@charset "UTF-8";
#page.in.contact .contact-sec {
  padding: 100px 0 90px 0;
  border-bottom: 1px solid #dcdddd;
}

#page.in.contact .contact-sec .contact-sec-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

#page.in.contact .contact-sec .contact-top-text {
  text-align: center;
  margin-bottom: 40px;
}

#page.in.contact .contact-sec .contact-top-text p {
  font-size: 18px;
  color: #7a6a56;
}

#page.in.contact .contact-sec .contact_form_step {
  position: relative;
  list-style: none;
  margin: 0 auto 8em;
  padding: 0;
  text-align: center;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 5px;
}

#page.in.contact .contact-sec .step {
  padding: 20px 25px 20px 0px;
  background-color: #dcdde0;
  font-size: 19px;
  color: #333333;
  position: relative;
  z-index: 10;
  line-height: 1.4;
}

#page.in.contact .contact-sec .step.step_active {
  background-color: #66cbdc;
  color: #fff;
}

#page.in.contact .contact-sec .step.step_active::before {
  background-color: #66cbdc;
}

#page.in.contact .contact-sec .step.step_active::after {
  background-color: #66cbdc;
}

#page.in.contact .contact-sec .step01 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 36%;
          flex: 0 0 36%;
}

#page.in.contact .contact-sec .step02 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%;
}

#page.in.contact .contact-sec .step02:before {
  content: '';
  display: block;
  position: absolute;
  left: -17px;
  bottom: 0;
  background-color: #dcdde0;
  border-left: 3px solid #fff;
  width: 35px;
  height: 47px;
  -webkit-transform: skew(155deg);
          transform: skew(155deg);
  z-index: -1;
}

#page.in.contact .contact-sec .step02:after {
  content: '';
  display: block;
  position: absolute;
  left: -17px;
  background-color: #dcdde0;
  border-left: 3px solid #fff;
  width: 35px;
  height: 47px;
  top: 0;
  -webkit-transform: skew(-155deg);
          transform: skew(-155deg);
  z-index: -1;
}

#page.in.contact .contact-sec .step03 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%;
}

#page.in.contact .contact-sec .step03:before {
  content: '';
  display: block;
  position: absolute;
  left: -17px;
  bottom: 0;
  background-color: #dcdde0;
  border-left: 3px solid #fff;
  width: 35px;
  height: 47px;
  -webkit-transform: skew(155deg);
          transform: skew(155deg);
}

#page.in.contact .contact-sec .step03:after {
  content: '';
  display: block;
  position: absolute;
  left: -17px;
  background-color: #dcdde0;
  border-left: 3px solid #fff;
  width: 35px;
  height: 47px;
  top: 0;
  -webkit-transform: skew(-155deg);
          transform: skew(-155deg);
}

#page.in.contact .contact-sec .contact-form form ::-webkit-input-placeholder {
  color: #c9caca;
}

#page.in.contact .contact-sec .contact-form form :-ms-input-placeholder {
  color: #c9caca;
}

#page.in.contact .contact-sec .contact-form form ::-ms-input-placeholder {
  color: #c9caca;
}

#page.in.contact .contact-sec .contact-form form ::placeholder {
  color: #c9caca;
}

#page.in.contact .contact-sec .contact-form form label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#page.in.contact .contact-sec .contact-form form input,
#page.in.contact .contact-sec .contact-form form textarea {
  width: 100%;
  border: 1px solid #dcdddd;
  font-size: 18px;
  color: #7a6a56;
  border-radius: 5px;
  padding: 10px;
}

#page.in.contact .contact-sec .contact-form form p {
  font-size: 18px;
  color: #7a6a56;
  margin-bottom: 30px;
}

#page.in.contact .contact-sec .contact-form form .wpcf7-form-control-wrap {
  width: 100%;
  max-width: 70%;
  position: relative;
}

#page.in.contact .contact-sec .contact-form form .your-name::before,
#page.in.contact .contact-sec .contact-form form .your-email::before,
#page.in.contact .contact-sec .contact-form form .your-tel::before,
#page.in.contact .contact-sec .contact-form form .your-message::before {
  content: '必須';
  color: #e83828;
  border: 1px solid #e83828;
  padding: 6px 6px;
  font-size: 18px;
  position: absolute;
  top: 6px;
  left: -65px;
  line-height: 1;
}

#page.in.contact .contact-sec .contact-form form .your-name:before {
  display: block;
}

#page.in.contact .contact-sec .contact-form form .your-name-kana:before {
  display: block;
}

#page.in.contact .contact-sec .contact-form form .e-mail:before {
  display: block;
}

#page.in.contact .contact-sec .contact-form form .your-zip-code:before {
  display: block;
}

#page.in.contact .contact-sec .contact-form form .p-postal-code {
  max-width: 290px;
  font-size: 12px;
}

#page.in.contact .contact-sec .contact-form form .your-address {
  display: block;
  max-width: 360px;
  margin-bottom: 15px;
}

#page.in.contact .contact-sec .contact-form form .your-address:before {
  display: block;
  top: 35px;
}

#page.in.contact .contact-sec .contact-form form .your-address2 {
  display: block;
  max-width: 100%;
}

#page.in.contact .contact-sec .contact-form form .privacy-wrap {
  width: 100%;
  max-width: 70%;
  margin-left: auto;
  margin-bottom: 50px;
  font-size: 18px;
  color: #7a6a56;
}

#page.in.contact .contact-sec .contact-form form .privacy-wrap a {
  color: #e83828;
}

#page.in.contact .contact-sec .contact-form form .tel:before {
  display: block;
}

#page.in.contact .contact-sec .contact-form form .previous {
  max-width: 350px;
  margin: 0 auto 24px;
}

#page.in.contact .contact-sec .contact-form form .submit {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#page.in.contact .contact-sec .contact-form form .submit:after {
  content: '';
  background-image: url(../img/other/contact_arrow.png);
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 25px;
  z-index: 0;
  cursor: pointer;
}

#page.in.contact .contact-sec .contact-form form .submit:hover {
  opacity: 0.5;
}

#page.in.contact .contact-sec .contact-form form .wpcf7-previous {
  cursor: pointer;
  border-radius: 50px;
  padding: 20px 0;
  background: #dcdde0;
  color: #333;
  position: relative;
}

#page.in.contact .contact-sec .contact-form form .wpcf7-submit {
  cursor: pointer;
  border-radius: 50px;
  padding: 20px 0;
  background: #333;
  color: #fff;
  position: relative;
  border: none;
}

@media (min-width: 1px) and (max-width: 1200px) {
  #page.in.contact .contact-sec .contact-sec-inner {
    width: 95%;
  }
}

@media (min-width: 1px) and (max-width: 767px) {
  #page.in.contact .contact-sec {
    padding: 45px 0 45px 0;
  }
  #page.in.contact .contact-sec .contact-top-text {
    margin-bottom: 25px;
  }
  #page.in.contact .contact-sec .contact-top-text p {
    font-size: 12px;
  }
  #page.in.contact .contact-sec .contact_form_step {
    margin: 0 auto 50px auto;
  }
  #page.in.contact .contact-sec .step {
    font-size: 12px;
    padding: 15px 25px 15px 0px;
  }
  #page.in.contact .contact-sec .step01 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 38%;
            flex: 0 0 38%;
  }
  #page.in.contact .contact-sec .step02:before {
    height: 33px;
  }
  #page.in.contact .contact-sec .step02:after {
    height: 33px;
  }
  #page.in.contact .contact-sec .step03:before {
    height: 33px;
  }
  #page.in.contact .contact-sec .step03:after {
    height: 33px;
  }
  #page.in.contact .contact-sec .contact-form form p {
    font-size: 16px;
  }
  #page.in.contact .contact-sec .contact-form form input,
  #page.in.contact .contact-sec .contact-form form textarea {
    font-size: 16px;
  }
  #page.in.contact .contact-sec .contact-form form label {
    display: block;
  }
  #page.in.contact .contact-sec .contact-form form .wpcf7-form-control-wrap {
    max-width: 100%;
    display: block;
    margin-top: 5px;
  }
  #page.in.contact .contact-sec .contact-form form .p-postal-code {
    max-width: 100%;
  }
  #page.in.contact .contact-sec .contact-form form .privacy-wrap {
    max-width: 100%;
    font-size: 16px;
    margin-top: -20px;
    margin-bottom: 30px;
  }
  #page.in.contact .contact-sec .contact-form form .your-name::before,
  #page.in.contact .contact-sec .contact-form form .your-email::before,
  #page.in.contact .contact-sec .contact-form form .your-tel::before,
  #page.in.contact .contact-sec .contact-form form .your-message::before {
    font-size: 12px;
    right: 0;
    left: auto;
    top: -30px;
  }
  #page.in.contact .contact-sec .contact-form form .previous {
    max-width: 270px;
  }
  #page.in.contact .contact-sec .contact-form form .submit {
    max-width: 270px;
  }
  #page.in.contact .contact-sec .contact-form form .submit::after {
    width: 14px;
    height: 14px;
    top: 21px;
  }
  #page.in.contact .contact-sec .contact-form form .wpcf7-previous,
  #page.in.contact .contact-sec .contact-form form .wpcf7-submit {
    padding: 15px 0;
    font-size: 15px;
  }
}

@media (min-width: 1px) and (max-width: 400px) {
  #page.in.contact .contact-sec .step {
    font-size: 10px;
  }
  #page.in.contact .contact-sec .step02:before {
    height: 30px;
  }
  #page.in.contact .contact-sec .step02:after {
    height: 30px;
  }
  #page.in.contact .contact-sec .step03:before {
    height: 30px;
  }
  #page.in.contact .contact-sec .step03:after {
    height: 30px;
  }
}

#page.in.contact-confirm .contact-sec .contact-form form label {
  display: block;
}

#page.in.contact-confirm .contact-sec .contact-form form .wpcf7-form-control-wrap {
  display: block;
}

#page.in.contact-confirm .contact-sec .contact-form form .wpcf7-previous {
  cursor: pointer;
  border-radius: 50px;
  padding: 20px 0;
  background: linear-gradient(19deg, #66cbdc, #faee00);
  color: #fff;
  position: relative;
}

#page.in.contact-confirm .contact-sec .contact-form form .submit_btn {
  margin-bottom: 20px;
}

@media (min-width: 1px) and (max-width: 767px) {
  #page.in.contact-confirm .contact-sec .contact-form form .wpcf7-previous {
    font-size: 15px;
    padding: 15px 0;
  }
}
/*# sourceMappingURL=contact.css.map */