@charset "UTF-8";
/*======================================================================

 問い合わせフォーム

======================================================================*/
main #contents.contact1 {
  padding-top: 0;
}

@media (min-width: 768px) {
  main #contents.contact1 {
    padding-bottom: 60px;
  }
}

main #contents.contact1 #formwrapper {
  background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(65%, #f5f5f5), color-stop(65%, #fff), to(#fff));
  background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 65%, #fff 65%, #fff 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

@media (max-width: 767px) {
  main #contents.contact1 #formwrapper {
    background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), color-stop(38%, #f5f5f5), color-stop(38%, #fff), to(#fff));
    background: linear-gradient(180deg, #f5f5f5 0%, #f5f5f5 38%, #fff 38%, #fff 100%);
  }
}

@media (min-width: 800px) {
  main #contents.contact1 .inner {
    width: 800px;
  }
}

@media (max-width: 799px) {
  main #contents.contact1 .inner {
    width: 94%;
    margin: auto;
  }
}

main #contents.contact1 .must {
  color: #fd0000;
}

main #contents.contact1 .msg {
  font-weight: 900;
  font-size: 1.08em;
}

main #contents.contact1 .msg,
main #contents.contact1 .msg i {
  color: #fd0000;
}

main #contents.contact1 .msg i {
  vertical-align: baseline;
  font-size: 0.85em;
}

@media (min-width: 768px) {
  main #contents.contact1 .msg {
    margin-top: 20px;
  }
}

main #contents.contact1 .at {
  font-size: 75%;
}

main #contents.contact1 .form_title {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  font-size: 22px;
  letter-spacing: 0.1em;
}

@media (max-width: 767px) {
  main #contents.contact1 .form_title {
    margin: 0 0 5vw;
  }
}

main #contents.contact1 .form_title span {
  display: inline-block;
  padding: 10px 30px;
}

@media (max-width: 767px) {
  main #contents.contact1 .form_title span {
    padding: 3vw;
    width: 90%;
  }
}

main #contents.contact1 .form_wrap {
  background-color: #fff;
  padding: 50px 40px 60px;
  -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  main #contents.contact1 .form_wrap {
    padding: 8vw 2vw 10vw;
    -webkit-box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.3);
            box-shadow: 0 1vw 2vw 0 rgba(0, 0, 0, 0.3);
  }
}

main #contents.contact1 .head_txt_wrap .tel,
main #contents.contact1 .head_txt_wrap .hr {
  text-align: center;
  line-height: 1.4;
}

main #contents.contact1 .head_txt_wrap p.hr {
  padding-top: 0;
}

main #contents.contact1 .head_txt_wrap .tel {
  font-size: 32px;
  letter-spacing: 0.1em;
  font-weight: 900;
}

main #contents.contact1 .head_txt_wrap .tel,
main #contents.contact1 .head_txt_wrap .tel a {
  color: #ed9407;
}

main #contents.contact1 .head_txt_wrap .tel a {
  text-decoration: none;
}

main #contents.contact1 .head_txt_wrap i {
  color: #ed9407;
  font-size: 26px;
  vertical-align: baseline;
}

@media (min-width: 768px) {
  main #contents.contact1 .head_txt_wrap .head_txt {
    margin: auto;
    width: 560px;
    font-size: 0.95em;
  }
}

main #contents.contact1 .form_dl {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  margin-bottom: 50px;
}

@media (max-width: 768px) {
  main #contents.contact1 .form_dl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

main #contents.contact1 .form_dl input,
main #contents.contact1 .form_dl textarea {
  border: 1px solid #838383;
  width: 80%;
}

@media (max-width: 768px) {
  main #contents.contact1 .form_dl input,
  main #contents.contact1 .form_dl textarea {
    width: 100%;
    padding: 2vw;
  }
}

main #contents.contact1 .form_dl input,
main #contents.contact1 .form_dl .input,
main #contents.contact1 .form_dl textarea,
main #contents.contact1 .form_dl .textarea {
  padding: 6px 8px;
}

main #contents.contact1 .form_dl .input,
main #contents.contact1 .form_dl .textarea {
  background-color: #f7f7f7;
}

main #contents.contact1 .form_dl .input {
  display: inline-block;
}

main #contents.contact1 .form_dl textarea,
main #contents.contact1 .form_dl .textarea {
  min-height: 5em;
  display: block;
  width: 95%;
}

@media (min-width: 768px) {
  main #contents.contact1 .form_dl > dt,
  main #contents.contact1 .form_dl > dd {
    padding: 20px 5px;
  }
}

main #contents.contact1 .form_dl > dt {
  font-size: 0.85em;
}

@media (min-width: 768px) {
  main #contents.contact1 .form_dl > dt {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 30%;
            flex: 1 0 30%;
    border-bottom: 1px solid #333333;
  }
}

@media (max-width: 768px) {
  main #contents.contact1 .form_dl > dt {
    padding: 3vw 3vw 1vw;
  }
}

main #contents.contact1 .form_dl > dd {
  border-bottom: 1px solid #333333;
}

@media (min-width: 768px) {
  main #contents.contact1 .form_dl > dd {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 65%;
            flex: 1 0 65%;
  }
}

@media (max-width: 768px) {
  main #contents.contact1 .form_dl > dd {
    padding: 0 3vw 5vw;
    border-color: #ccc;
  }
}

main #contents.contact1 #name_dd input,
main #contents.contact1 #name_dd .input {
  width: 15em;
}

main #contents.contact1 #company_dd input,
main #contents.contact1 #company_dd .input {
  width: 20em;
}

main #contents.contact1 #email_dd input,
main #contents.contact1 #email_dd .input {
  width: 20em;
}

main #contents.contact1 #tel_dd input,
main #contents.contact1 #tel_dd .input {
  width: 20em;
}

main #contents.contact1 #address_dd .add_dl {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

main #contents.contact1 #address_dd .add_dl > dt {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 140px;
          flex: 0 0 140px;
}

main #contents.contact1 #address_dd .add_dl > dd {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 1fr;
          flex: 1 0 1fr;
}

main #contents.contact1 #address_dd input,
main #contents.contact1 #address_dd .input {
  width: 10em;
}

main #contents.contact1 #address_dd .room_dd input,
main #contents.contact1 #address_dd .room_dd .input {
  width: 12.7em;
}

main #contents.contact1 .mf_buttons {
  color: #fff;
}

main #contents.contact1 .mf_buttons button {
  font-weight: 900;
  -webkit-transition: .3s;
  transition: .3s;
}

@media (min-width: 768px) {
  main #contents.contact1 .mf_buttons button:hover {
    opacity: 0.8;
    cursor: pointer;
    -webkit-transition: .3s;
    transition: .3s;
  }
}

main #contents.contact1 .mf_buttons .cancel {
  background-color: #000;
  padding: 8px 10px;
  -webkit-box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 2px 3px 5px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 767px) {
  main #contents.contact1 .mf_buttons .cancel {
    padding: 4vw;
  }
}

main #contents.contact1 .mf_buttons .send {
  -webkit-box-shadow: 3px 5px 7px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 3px 5px 7px 0 rgba(0, 0, 0, 0.3);
  padding: 10px 60px;
  border: none;
  font-size: 1.25em;
  min-width: 50%;
}

@media (max-width: 767px) {
  main #contents.contact1 .mf_buttons .send {
    padding: 4vw;
  }
}

/*
 step1
 */
@media (min-width: 768px) {
  main #contents.contact1.step1 .mf_buttons .send {
    min-width: 65%;
    padding: 10px 60px;
  }
}

@media (max-width: 767px) {
  main #contents.contact1.step1 .mf_buttons .send {
    width: 90%;
  }
}

/*
 step2
 */
main #contents.contact1.step2 .mf_buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media (min-width: 768px) {
  main #contents.contact1.step2 .mf_buttons {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  main #contents.contact1.step2 .mf_buttons {
    gap: 2vw;
  }
}

@media (min-width: 768px) {
  main #contents.contact1.step2 .mf_buttons .send {
    width: 50%;
  }
}

/*
 step3
 */
@media (min-width: 768px) {
  main #contents.contact1.step3 .tohome {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  main #contents.contact1.step3 .tohome {
    margin-top: 2vw;
  }
}
/*# sourceMappingURL=contact.css.map */