@charset "UTF-8";
/* ----------------------------- contact */
.p-contact { color: #000; }

/* contact-box */
.p-contact .contact-box { width: 840px; max-width: 100%; border: 2px solid #000000; padding: 48px 40px; margin: 0 auto; text-align: center; font-size: 20px; font-size: 2.0rem; box-sizing: border-box; }
.p-contact .contact-box .txt-l { font-size: 25px; font-size: 2.5rem; }
.p-contact .contact-box .txt-s { font-size: 18px; font-size: 1.8rem; }
.p-contact .contact-box .bg { background-color: #F5F5F5; padding: 23px 0 19px; margin: 27px 0; }
.p-contact .contact-box .bg p.txt-s { margin-top: 18px; }
.p-contact .contact-box .tel { display: flex; justify-content: center; align-items: center; font-size: 52px; font-size: 5.2rem; font-family: "Roboto"; font-weight: 500;}
.p-contact .contact-box .tel::before { content: ""; display: inline-block; background: url(../img/common/icn_iphone.svg) no-repeat center; background-size: 100%; width: 35px; height: 53px; margin-right: 23px; }
.p-contact .contact-box .tel a:hover { text-decoration: none; opacity: .7; }
.p-contact .contact-box .time { margin-top: 10px; }
.p-contact .contact-box .contact-btn { margin-top: 30px; }
.p-contact .contact-box .contact-btn a { background: #000; color: #FFF; padding: 10px; display: block; margin: 0 auto; width: 476px; max-width: 100%; position: relative; line-height: 1.6; box-sizing: border-box; }
.p-contact .contact-box .contact-btn a:hover { text-decoration: none; opacity: .7; }
.p-contact .contact-box .contact-btn a::after { content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; background: url(../img/common/icn_arrow_right.svg) no-repeat right; background-size: 100%; width: 8px; height: 15px; }

@media screen and (max-width: 767px) {
  .p-contact .contact-box { padding: 42px 20px 46px; font-size: 16px; font-size: 1.6rem; }
  .p-contact .contact-box .txt-l { font-size: 22px; font-size: 2.2rem; margin-bottom: 6px; display: inline-block; line-height: 39px; }
  .p-contact .contact-box .txt-s { font-size: 15px; font-size: 1.5rem;}
  .p-contact .contact-box .bg { padding: 20px 25px; margin: 21px 0 23px; font-size: 15px; font-size: 1.5rem; }
  .p-contact .contact-box .tel { font-size: 38px; font-size: 3.8rem; line-height: 1.316; }
  .p-contact .contact-box .tel::before { width: 27px; height: 41px; }
  .p-contact .contact-box .time.txt-s { margin-top: 10px; font-size: 13px; font-size: 1.3rem; }
  .p-contact .contact-box .contact-btn {margin-top: 33px;}
}

/* sec01 */
.p-contact .sec01 { margin-top: 160px; position: sticky; }
.p-contact .sec01 .c-title1 { padding-top: 0; margin: 0 auto 88px; }
.p-contact .sec01 .c-title1::before { top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 1px; border: none; background: #000; }
.p-contact .sec01 .c-title1 .c-title1-inner { display: inline-block; position: relative; padding: 0 calc(100vw * 80 / 1920); background: #FFF;}
.p-contact .sec01 .c-title1 .en { font-size: 70px; font-size: 7.0rem;/* line-height: .6;*/ }
.p-contact .sec01 .c-title1 .h { font-size: 28px; font-size: 2.8rem;/* line-height: 1.6;*/ margin-top: 2px; }

@media screen and (max-width: 767px) {
  .p-contact .sec01 { margin-top: 130px; }
  .p-contact .sec01 .c-title1 { width: 95%; margin-bottom: 40px; }
  .p-contact .sec01 .c-title1 .en { font-size: 45px; font-size: 4.5rem; }
  .p-contact .sec01 .c-title1 .h { font-size: 18px; font-size: 1.8rem; margin-top: 1px; }
}

/* sec02 */
.p-contact .sec02 { margin-top: 130px; padding: 70px 0 130px; background: #F5F5F5; }
.p-contact .sec02 .c-title1 { margin-top: -120px; margin-bottom: 82px; }
.p-contact .sec02 ul.flow {  }
.p-contact .sec02 ul.flow li { position: relative; padding-bottom: 66px; }
.p-contact .sec02 ul.flow li:last-of-type { padding-bottom: 0; }
.p-contact .sec02 ul.flow li .flow-step { position: absolute; top: 0; left: 0; height: 100%;  }
.p-contact .sec02 ul.flow li .flow-step .border-line { position: absolute; left: calc(73px / 2); transform: translateX(-50%); top: 0; width: 5px; height: 100%; background: #000; }
.p-contact .sec02 ul.flow li:last-of-type .flow-step .border-line {display: none;}
.p-contact .sec02 ul.flow li .flow-step .step-square { position: absolute; top: 0; left: 0; width: 73px; height: 73px; justify-content: center; align-items: center; background: #000; color: #FFF; text-align: center; font-family: "Roboto"; line-height: 1; }
.p-contact .sec02 ul.flow li .flow-step .step-square .step-number { font-size: 30px; font-size: 3.0rem; font-weight: 500; margin-top: -20px; line-height: 0; width: 100%; }
.p-contact .sec02 ul.flow li .flow-content { margin-left: 99px; }
.p-contact .sec02 ul.flow li .flow-content::before,
.p-contact .sec02 ul.flow li .flow-content::after { content: none; }
.p-contact .sec02 ul.flow li .flow-content .flow-txt { width: 610px; max-width: 100%; margin-bottom: 10px; }
.p-contact .sec02 ul.flow li .flow-content .flow-txt h3 { font-size: 20px; font-size: 2.0rem; height: 73px; display: flex; align-items: center; margin-bottom: 16px; }
.p-contact .sec02 ul.flow li .flow-content .flow-img { width: 430px; max-width: 100%; }
@media screen and (max-width: 767px) {
  .p-contact .sec02 { padding-bottom: 100px; }
  .p-contact .sec02 .c-title1 { margin-bottom: 60px; }
  .p-contact .sec02 ul.flow li .flow-step .step-square { width: 60px; height: 60px; }
  .p-contact .sec02 ul.flow li .flow-step .border-line { left: calc(60px / 2); }
  .p-contact .sec02 ul.flow li .flow-content {margin-left: 80px;}
  .p-contact .sec02 ul.flow li .flow-content .flow-txt { font-size: 15px; font-size: 1.5rem; }
  .p-contact .sec02 ul.flow li .flow-content .flow-txt h3 { font-size: 18px; font-size: 1.8rem; height: 60px; margin-bottom: 10px; }
}

/* sec03 */
.p-contact .sec03 { padding: 125px 0 130px; background: #333; color: #FFF; }
.p-contact .sec03 h2 { font-size: 50px; font-size: 5.0rem; font-weight: 700; line-height: 1; margin-bottom: 27px; text-align: center; }
.p-contact .sec03 p { margin-bottom: 43px; text-align: center; }
.p-contact .sec03 .sec03-img-group { width: 781px; max-width: 100%; margin: 0 auto; }
.p-contact .sec03 .sec03-img-group::before,
.p-contact .sec03 .sec03-img-group::after { content: none; }
.p-contact .sec03 .sec03-img-group .sec03-img { width: calc((100% - 40px) / 3); }

@media screen and (max-width: 767px) {
  .p-contact .sec03 { padding: 106px 0 94px; }
  .p-contact .sec03 h2 { font-size: 30px; font-size: 3.0rem; margin-bottom: 25px; }
  .p-contact .sec03 p { margin-bottom: 33px; font-size: 15px; font-size: 1.5rem; line-height: 1.4; }
  .p-contact .sec03 .sec03-img-group .sec03-img { width: calc((100% - 20px) / 3); }
}

/* sec04 */
.p-contact .sec04 { padding: 0 0 130px; }
.p-contact .sec04 .c-title1 { margin-bottom: 33px; }
.p-contact .sec04 .address {text-align: center; margin-bottom: 20px;}
.p-contact .sec04 iframe { max-width: 100%; display: block; }

@media screen and (max-width: 767px) {
  .p-contact .sec04 {padding-bottom: 100px;}
  .p-contact .sec04 .c-title1 { margin-bottom: 20px; }
  .p-contact .sec04 iframe { max-height: calc(100vw - 40px); }
}

/* 無料相談予約申し込み */
.p-contact .p-top__contact { margin-top: 110px;}

@media screen and (max-width: 767px) {
  .p-contact .p-top__contact { margin-top: 80px; }
}