@charset "utf-8";

.inner-padding {
    padding: 3% 0 4%;
}
/*===============================================
 *	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;}
.intro ul li p{font-size: 18px;}
.f-20{font-weight: bold;}
@media only screen and (max-width: 1024px) {
    .intro ul li h3{font-size: 20px;}
    .f-20{font-size: 18px;}
}
@media only screen and (max-width: 960px) {
    .intro h2{font-size:32px ;}
    .intro ul li{padding: 20px;}
}
@media only screen and (max-width: 568px) {
    .f-20{font-size: 16px;}
    .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 .inner{padding: 40px 0 60px;}
.commitment .f-20{margin-bottom: 40px;}
.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;}
    .commitment .inner{padding: 20px 0 30px;}
    .commitment .f-20{margin-bottom: 20px;}
}
/*===============================================
 *	product
===============================================*/
#product .product_contents {gap: 2vw;justify-content: center;}
.product_box{max-width: 575px;width: 48%;display:flex;flex-direction: column;gap: .5vw;}
.product_box h3{font-size: 28px; font-weight: bold;margin-bottom: 40px; position: relative;}
.product_box h3::before{position: absolute;
    border-bottom: 4px solid var(--site-primary);
    bottom:-15px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    content: '';}
.product_box .flow_txt{
    margin: 20px 0;
}
.product_box .flow_txt dt{
    background: var(--site-primary);
    font-size: 26px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
    padding: 5px 0 8px;
}
.product_box .flow_txt dd{
    font-size: 22px;
    color: var(--site-primary);
    margin: 10px 0 20px 20px;
}
.product_box .flow_txt dd:last-child{
    margin-bottom: 0;
}

@media only screen and (max-width: 1024px) {
    
}
@media only screen and (max-width: 960px) {
    .product_box h3{font-size: 20px;}
    .product_box .flow_txt dt{font-size: 20px;}
    .product_box .flow_txt dd{font-size: 16px;}
    
}
@media only screen and (max-width: 568px) {
    #product .product_contents{flex-direction: column;gap:20px;}
    .product_box{max-width: 100%;width: 100%;gap:10px;}
    .product_box h3{margin-bottom: 30px;}
}

/*===============================================
 *	Support_system
===============================================*/
.support_system .f-20{margin-bottom: 60px;}
.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/countermeasure/label-merit01.svg)no-repeat;background-size: contain;}
.support_system ol li:nth-child(2) .photo::before{background: url(../img/countermeasure/label-merit02.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: 28px;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 .f-20{margin-bottom: 40px;}
    .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; text-align: center;}
    .support_system ol li:nth-child(even) .txt_box{margin-left: 0;}

}

/*===============================================
 *	Flow
===============================================*/
.flow ol li{background: var(--site-basecolor);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:nth-child(5) .photo::before{background: url(../img/comfortable/label-flow05.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;}
.flow ol li .flow_txt p{font-size: 18px;}

@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 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;}
    .flow ol li .flow_txt p{font-size: 16px;}
}