@charset 'utf-8';
/*
 * name:online-consultation-about.css
 * author:Rotana
*/
/* rental
------------------------------------------------ */
#consultation{ overflow: hidden; padding-bottom: 170px; font-size: 1.8rem; font-weight: 400; line-height: calc(36/18); letter-spacing: 0.05em; color:#011E41; }
#consultation .note-txt{ color: #CE1017; }
.consultation-title{ font-weight: bold; letter-spacing: 0.08em; }
.consultation-title.center{ text-align: center; }
.consultation-title .en{ display: block; font-size: 2rem; font-weight: 500; font-family: Oswald, "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; line-height: calc(24 / 16); color:#59BCDC; }
.consultation-title .ja{ margin-top: 10px; display: block; font-size: 3rem; line-height: calc(41 / 24); color:#011E41; }
.consultation--note-txt{ margin-bottom: 2rem; font-weight: 600; font-size: 2.4rem; line-height: calc(41 / 24); text-align: center; color: #D94A7B; }
.consultation--btn{ margin: 20px auto 0; position: relative; padding: 19px 0; display: block; max-width: 380px; width: 100%; font-size: 2.2rem; font-weight: 400; color:#fff !important; text-align: center; line-height: calc(37/22); letter-spacing: 0.08em; border-radius: 6px; background-color: #011E41; }
.consultation--btn.ml-0{ margin-left: 0; } 
.consultation--btn:after{ content: '>'; display: inline-block; line-height: 1; margin-left: 10px; }
.consultation--txt-center{ text-align: center; margin:0 auto 35px; max-width: 516px; }
.visual{ width: 100%; height: 430px; background:url(../../img/2026/online-consultation/online-consultation_fv-pc-min.png) no-repeat center center / cover; }

@media screen and (max-width: 768px) {
    .visual,
    .how-to-use .visual{ background: none; height: unset; }
    .consultation-title{ text-align: center; }
    .consultation-title .en{ font-size: 1.3rem; }
    .consultation-title .ja{ margin-top: 5px; font-size: 1.6rem;  }
    .consultation--note-txt{ font-size: 1.6rem; }
    .consultation--btn{ font-size: 1.4rem; }
    .consultation--txt-center{ max-width: 410px; }
}

.consultation-about{ padding-top: 65px; }
.consultation-about--row{ max-width:  720px; margin: 0 auto; }
.consultation-about--img{ position: relative; }
.consultation-about--img::after{ content: ''; position: absolute; width: 100%; height: 100%; bottom: -20px; right: -20px; background-color: #C4EFFF; border-radius: 10px; z-index:-1; }

@media screen and (min-width: 769px) {
    .consultation-about--row{ margin-top: 54px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
    .consultation-about--desc{ width: 430px; }
    .consultation-about--img{ width: 220px; }
}
@media screen and (max-width: 768px) {
    #consultation{ font-size: 1.2rem; }
    .consultation-about{ padding-top: 45px; }
    .consultation-about--desc{ margin-top: 25px; }
    .consultation-about--img{ margin:33px auto 0; max-width: 220px; }
}
#schedule{ margin-top: 80px; padding: 60px 0 48px; background-color: #C4EFFF; }
.schedule--box{ max-width: 720px; margin: 55px auto 0; padding: 20px 20px 30px; background-color: #F4FCFF; border-radius: 10px; }
.schedule--block{ max-width: 540px; margin: 0 auto; text-align: center; }
.schedule--block+.schedule--block{ margin-top: 40px; }
.schedule--block p+p{ margin-top: 10px; }
.schedule--block h3{ display: table; margin: 0 auto 5px; min-width: 80px; padding: .15em 10px; font-size: 1.4rem; font-weight: bold; line-height: calc(36/14); letter-spacing: 0.05em; color:#fff; background-color: #59BCDC; border-radius: 10px; }

@media screen and (max-width: 768px) {
    #schedule{ padding: 30px 0; }
    .schedule--box{ width: calc(100% - 80px); max-width: 440px; padding: 20px; margin-top: 25px; }
    .schedule--block h3{ min-width: 65px; font-size: 1.2rem; border-radius: 8px; }
    .schedule--block{ max-width: 250px; }
    .schedule--block+.schedule--block{ margin-top: 25px; }
}

/*
service-flow
---------------------------------------*/
#service-flow{ padding: 108px 0 0; }
.service-flow--step{ margin: 50px auto 0; max-width: 554px; }
#service-flow .step-item+.step-item{ padding-top: 28px; margin-top: 55px; border-top:1px dashed #59BCDC; }
#service-flow .note-txt{ margin-top: 40px; font-size: 1.6rem; font-weight: bold; text-align: center; letter-spacing: 0.072em; line-height: calc(32 / 16); }
.service-flow--step .step-num{ width: 130px; color:#59BCDC; letter-spacing: 0.072em; }
.service-flow--step .step-num span{ margin-left: 10px; max-width: 80px; display: block; text-align: center; position: relative; font-size: 1.2rem; font-weight: 500; font-family: Oswald, "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; }
.service-flow--step .step-num span b{ font-size: 1.8rem; }
.service-flow--step .step-num span:before,
.service-flow--step .step-num span:after{ content: ''; top: 19px; position: absolute; width: 26px; border-bottom: 1px dashed #59BCDC; }
.service-flow--step .step-num span:before{ left: -7px; transform: rotate(65deg); }
.service-flow--step .step-num span:after{ right: -7px; transform: rotate(-65deg); }
.service-flow--step .step-num p{ margin-left: 10px; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 76px; height: 76px; font-size: 2.2rem; font-weight: 400; text-align: center; border: 2px solid #59BCDC; border-radius: 50%; line-height: 1.2; }
.service-flow--step .step-num figure{ margin-top: 26px; max-width: 100px; display: block; }
.service-flow--step .step-desc{ padding-top: 30px; padding-right: 10px; width: calc(100% - 140px); color:#011E41; }
.service-flow--step .step-item{ display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }


@media screen and (max-width: 768px) {
    #service-flow{ padding-top: 40px; }
    .service-flow--step{ margin-top: 40px; }
    .service-flow--step .step-num { width: 100px; }
    .service-flow--step .step-num p{ width: 56px; height: 56px; font-size: 1.6rem; }
    .service-flow--step .step-num span{ margin-left: 2px; }
    .service-flow--step .step-num figure{ margin-left: 4px; max-width: 75px; margin-top: 15px; }
    .service-flow--step .step-desc{ width: calc(100% - 110px); }
    
}

#precautions{ margin-top: 80px; margin-bottom: 50px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 604px; background: url(../../img/2026/online-consultation/online-consultation_02-min.jpg) no-repeat center / cover; }
.precautions--title{ font-size: 1.8rem; font-weight: bold; line-height: calc(36/18); letter-spacing: 0.05em; text-align: center; }
.precautions--box{ max-width: 680px; width: 100%; padding: 45px 20px 45px; background-color: #fff; border-radius: 10px; }
.precautions--list{ max-width: 515px; margin: 23px auto 0; font-size: 1.4rem; font-weight: 400; line-height: calc(36/18); letter-spacing: 0.05em; }
.precautions--list li:before{content: '・';}
.precautions--list li+li{ margin-top: 10px; }

@media screen and (max-width: 768px) {
    #precautions{ background: url(../../img/2026/online-consultation/online-consultation_02-min.jpg) no-repeat left top / cover; }
    .precautions--box{ max-width: 444px; }
}