/*===============================================
 *	Intro
===============================================*/
.intro h2{font-size:46px;position: relative;padding: 10px 0 20px;margin-bottom: 30px;font-weight: bold;background: linear-gradient(90deg, #0881b1 0% 50%, #08b177 50%);background-repeat: no-repeat;background-size: 80px 5px;background-position: bottom;}

.intro ul{margin:3% 0 5%; gap:1vw;}
.intro ul li{max-width: 270px;width: 23%;display: flex;flex-direction: column;gap:15px;border: 4px solid var(--site-primary);box-sizing: border-box;border-radius: 6px;padding:30px 20px 20px;background: #fff;}
.intro ul li img{border-radius: 6px;max-width: 70px;margin: 0 auto;}
.intro ul li h3{font-size: 22px;font-weight: bold;line-height: 1.4;}

@media only screen and (max-width: 1024px) {
    .intro ul li h3{font-size: 20px;}
}
@media only screen and (max-width: 960px) {
    .intro h2{font-size:32px ;}
    .intro ul li{padding: 20px;}
}
@media only screen and (max-width: 568px) {
    .intro h2{font-size: 24px;}
    .intro ul{flex-wrap: wrap; gap: 10px;margin-bottom: 10%;}
    .intro ul li{width: 48%;padding: 20px 15px 15px;}
    .intro ul li img{max-width: 50px;}
    .intro ul li h3{font-size: 16px;}
    .intro ul li p{font-size: 15px;}
}
/*===============================================
 *	Commitment
===============================================*/
.commitment ul{gap: 1vw;}
.commitment ul li{max-width: 380px;width: 32%;display:flex;flex-direction: column;gap: .5vw;}
.commitment ul li h3{font-size: 22px; font-weight: bold;margin-bottom: 10px;}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 960px) {
    .commitment ul li h3{font-size: 20px;}
    
}
@media only screen and (max-width: 568px) {
    .commitment ul{flex-direction: column;gap:20px;}
    .commitment ul li{max-width: 100%;width: 100%;gap:10px;}
}

/*===============================================
 *	Support_system
===============================================*/
.support_system ol li{gap:4vw; align-items: center;margin-bottom: 80px;}
.support_system ol li .photo{position: relative;max-width: 560px;}
.support_system ol li .photo::before{content: '';position: absolute;left: -20px;top: -20px;width: 84px; height: 84px;background: url(../img/comfortable/label-point01.svg)no-repeat;background-size: contain;}
.support_system ol li:nth-child(2) .photo::before{background: url(../img/comfortable/label-point02.svg)no-repeat;}
.support_system ol li:nth-child(3) .photo::before{background: url(../img/comfortable/label-point03.svg)no-repeat;}
.support_system ol li:nth-child(4) .photo::before{background: url(../img/comfortable/label-point04.svg)no-repeat;}
.support_system ol li .photo{margin-left: 20px;}
.support_system ol li .txt_box{max-width: 550px;}
.support_system ol li .txt_box h3{font-size: 22px;font-weight: bold;margin-bottom: 20px;}
.support_system ol li:nth-child(even) .txt_box{margin-left: 20px;}
.support_system ol li:last-child{margin-bottom: 0;}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 960px) {
    .support_system ol li:nth-child(even){gap: 10px;}
    .support_system ol li .txt_box{max-width: 55%;}
    .support_system ol li .txt_box h3{font-size: 20px;}
    .support_system ol li .photo::before{width: 60px; height: 60px;}
}
@media only screen and (max-width: 568px) {
    .support_system ol li{flex-direction: column;}
    .support_system ol li{margin-bottom: 40px;}
    .support_system ol li .txt_box{max-width: 100%;}
    .support_system ol li .txt_box h3{font-size: 18px;}
    .support_system ol li:nth-child(even) .txt_box{margin-left: 0;}

}

/*===============================================
 *	Flow
===============================================*/
.flow ol li{background: #fff;padding:50px 40px;margin-bottom: 40px;gap: 3vw;}
.flow ol li:last-child{margin-bottom: 0;}
.flow ol li .photo{position: relative;max-width: 375px;}
.flow ol li .photo::before{content: '';position: absolute;left: 0;top: 0px;width: 76px; height: 42px;background: url(../img/comfortable/label-flow01.svg)no-repeat;background-size: contain;}
.flow ol li:nth-child(2) .photo::before{background: url(../img/comfortable/label-flow02.svg)no-repeat}
.flow ol li:nth-child(3) .photo::before{background: url(../img/comfortable/label-flow03.svg)no-repeat}
.flow ol li:nth-child(4) .photo::before{background: url(../img/comfortable/label-flow04.svg)no-repeat}
.flow ol li .flow_txt{max-width: 61.5%;}
.flow ol li .flow_txt h3{font-size: 30px;font-weight: bold;margin-bottom: 30px;position: relative;}
.flow ol li .flow_txt h3::before{border-radius: 1.5px; background: var(--site-primary); content: ""; height: 3px; left: 0; position: absolute;bottom: -10px;width: 50px;}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 960px) {
    .flow ol li{padding: 30px 20px;}
    .flow ol li .flow_txt h3{font-size: 22px;}
    .flow ol li .flow_txt{max-width: 55%;}
    
}
@media only screen and (max-width: 568px) {
    #flow{margin-top: -60px; padding-top: 60px;}
    .flow ol li{padding: 20px;flex-direction: column;margin-bottom: 20px;}
    .flow ol li .flow_txt{max-width: 100%;}
    .flow ol li .flow_txt h3{font-size: 20px;}

}

/*===============================================
 *	Guidance
===============================================*/
.guidance{background: url(../img/comfortable/bg_guidance.png)no-repeat;background-size: contain;background-position: center 90px;}

.guidance_intro{margin-bottom: 3%;}
.guidance_intro h3{font-size:30px;font-weight: bold;margin-bottom:30px;margin-top: -10px;}
.guidance_intro img{max-width: 299px;margin-top: -20px;}
.guidance_txt{font-size: 18px;}
.guidance_txt p{margin-bottom: 30px;}

.features ul{margin-bottom: 3%; gap: 1vw;}
.features ul li{max-width: 370px;width: 32%;display: flex;flex-direction: column;gap: 20px;}
.features ul li img{border-radius: 6px;box-sizing: border-box;border:2px solid var(--site-primary);}
.features ul li h4{font-size:20px;font-weight: bold;}

.lineup ul li{max-width: 250px;}
.lineup ul li img{max-width: 190px;margin: 0 auto;}
.lineup ul li:nth-child(2) img{max-width: 181px;}
.lineup ul li:nth-child(3) img,.lineup ul li:nth-child(4) img{max-width: 156px;}
.lineup ul{margin-bottom: 3%;}
.lineup ul li h4{font-size: 20px;letter-spacing: 0;font-weight: bold;margin-bottom: 10px;}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 960px) {
    .guidance{background-position: center 70px;}
    .guidance_intro h3{font-size: 24px;margin-bottom: 20px;}
    .guidance_intro img{max-width: 230px;margin-top: 0;}
    
    .lineup ul li{max-width: 22%;}
    .lineup ul li h4{font-size: 18px;}
    .lineup ul li img,.lineup ul li:nth-child(2) img{max-width: 80%;}
    .lineup ul li:nth-child(3) img,.lineup ul li:nth-child(4) img{max-width: 68%;}
}
@media only screen and (max-width: 568px) {
    #countermeasure{margin-top: -60px; padding-top: 60px;}
    .guidance{background-position: center 150px;}
    .guidance_intro h3{font-size: 22px;}
    .guidance_intro .row-rev{flex-direction: column;}
    .guidance_intro img{margin: 0 auto 10px; display: block;}
    .guidance_txt{font-size: 16px;}
    .guidance_txt p{margin-bottom: 10px;}

    .features{margin-bottom: 30px;}
    .features ul{flex-direction: column;gap: 20px;}
    .features ul li{max-width: 100%;width: 100%;gap: 10px;}

    .lineup ul{flex-wrap: wrap;gap: 20px 10px;margin-bottom: 20px;}
    .lineup ul li{max-width: 48%;}
      .lineup ul li h4{font-size: 17px;}
}