/* feature-html basic styles*/
.feature-html img {
    max-width: 100%;
}
@media(max-width:767px) {
    .sp-hidden {
        display: none;
    }
    h2.customTtl {
        font-size: 30px;
    }
    h2.customTtlLarge {
        font-size: 42px;
    }
    h3.customTtl {
        font-size: 24px;
    }
    h3.customTtlMideum {
        font-size: 24px;
    }
}
@media(min-width:768px) {
    .pc-hidden {
        display: none;
    }
    h2.customTtl {
        font-size: 26px;
    }
    h2.customTtlLarge {
        font-size: 53px;
    }
    h3.customTtl {
        font-size: 22px;
    }
    h3.customTtlMideum {
        font-size: 17px;
    }
    .customSection01, .customSection02, .customSection03, .customSection04, .customSection05 {
        padding-left: 60px;
        padding-right: 60px;
    }

}
.note_p01 {
    color: #9aa0a6;
    font-size: 12px;
}


/* feature-html customSection01*/
@media(min-width:768px) {
    .customSection01 .leadTextImage {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 82.79%;
        margin: 0 auto 30px auto;
        gap: 16px;
        }
}


/* feature-html customSection02*/
@media(min-width:768px) {
    .section02-cardWrap {  
        width: 94.88%;
        }
    #section02-card01 .ico-heart {
        width: 36px;
        }
    #section02-card03 .ico-bolt {
        width: 18px;
        }
}

.section02-card {
    background-color: #e1effe;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

@media(min-width:768px) {
    #section02-card01 .section02-card-txt {
        width: 45%;
        }
    #section02-card01 .section02-card-img {
        width: 55%;
        }
    #section02-card01 .section02-card-img img {
        width: 368px;
        }
    #section02-card02 .section02-card-txt {
        width: 50%;
        }
    #section02-card02 .section02-card-img {
        width: 50%;
        text-align: right;
        }
    #section02-card02 .section02-card-img img {
        width: 393px;
        }
    #section02-card03 .section02-card-txt {
        width: 50%;
        }
    #section02-card03 .section02-card-img {
        width: 50%;
        }
    #section02-card03 .section02-card-img img {
        width: 368px;
        }
    #section02-card03 {
        flex-direction: row-reverse;
        }
}

@media(max-width:767px) {
    .section02-card {
        background:none;
        border-radius: 30px;
        flex-direction: column-reverse;
        }
    .section02-card-img img {
        width: auto !important;
        }
    #section02-card03 {
        flex-direction: column-reverse;
        }
    #section02-card01 .ico-heart {
        width: 63px;
        }
    #section02-card03 .ico-bolt {
        width: 30px;
        }
}


/* feature-html customSection03*/
@media(min-width:768px) {
    .customSection03 .section03-mv, 
    .section03-1st2clm, 
    .section03-2nd2clm,
    .section03-1st3clm {
        width: 85.35%;
        margin-left:auto;
        margin-right:auto;
    }
    .section03-1st2clm {
        display: flex;
        gap:15px
    }
    .section03-1st2clmIn {
        flex: 1;
    }

    .section03-2nd2clm {
        display: flex;
        gap:15px
    }
    .section03-2nd2clmInL {
        width: 51.06%;
    }

    .section03-2nd2clmInR {
        width: 46.83%;
    }
    .section03-1st3clm {
        display: flex;
        gap:15px
    }
    .section03-1st3clmIn {
        flex: 1;
    }    
}


/* feature-html customSection04*/
@media(min-width:768px) {
    .customSection04 {
        background-color: #f8f9fa;
        padding-top:40px !important;
        padding-bottom:40px !important;
    }
    .section04-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding-left: 2.56%;
        padding-right: 2.56%;
    }
    .section04-grid01Txt {
        order: 1;
    }
    .section04-grid01Img {
        order: 2;
    }
    .section04-grid02Img {
        order: 3;
    }
    .section04-grid02Txt {
        order: 4;
    }
    .section04-grid03Txt {
        order: 5;
    }
    .section04-grid03Img {
        order: 6;
    }
    .section04-grid04Img {
        order: 7;
    }
    .section04-grid04Txt {
        order: 8;
    }
    .section04-grid .grid-contText {
        display: flex;
        flex-direction: column;
        height: 84%;
        justify-content: center;
        padding: 0 52px;
    }
    .section04-grid .grid-headText {
        padding: 15px 0 0 20px;
        font-size: 14px;
    }
    .section04-grid01Txt, .section04-grid02Txt, .section04-grid03Txt, .section04-grid04Txt {
        border-radius: 20px;
    }
    .section04-grid01Txt {
        background-color: #e1effe;
    }
    .section04-grid02Txt {
        background-color: #fdd3d0;
    }
    .section04-grid03Txt {
        background-color: #cde2dc;
    }
    .section04-grid04Txt {
        background-color: #eeece9;
    }
}
@media(max-width:767px) {
    .customSection04 {
        background-color: #f8f9fa;
        padding-top:30px !important;
        padding-bottom:30px !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .customSection04 .customTtlLarge {
        font-size: 38px;
    }
    .section04-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .section04-grid01Img {
        order: 1;
    }
    .section04-grid01Txt {
        order: 2;
    }
    .section04-grid02Img {
        order: 3;
    }
    .section04-grid02Txt {
        order: 4;
    }
    .section04-grid03Img {
        order: 5;
    }
    .section04-grid03Txt {
        order: 6;
    }
    .section04-grid04Img {
        order: 7;
    }
    .section04-grid04Txt {
        order: 8;
    }
    .section04-grid .grid-headText {
        padding: 0;
        text-align: center;
    }
    .section04-grid .grid-contText {
        text-align: center !important;
    }
}

/* feature-html customSection05*/
@media(min-width:768px) {
    .section05-1st2clm {
        width: 85.58%;
        margin: 0 auto;
        display: flex;
        gap: 15px;
    }
    .section05-1st2clmIn {
        flex: 1;
    }
}

/* feature-html customSection06*/
@media(min-width:768px) {
    .section06-1st2clm {
        width: 85.58%;
        margin: 0 auto;
        display: flex;        
        gap: 15px;
    }
    .section06-1st2clmIn {
        flex: 1; 
    }    
}

@media(min-width:768px) {
    .section06-1st3clm {
        width: 85.58%;
        margin: 0 auto;
        display: flex;        
        gap: 4.36%;
    }
    .section06-1st3clmIn {
        width: 31.88%; 
    }    
    
}

/* feature-html customSection07*/
.customSection07 {
    background-color: #f8f9fa;
    padding: 30px 2.56%;
}
@media(min-width:768px) {
    .customSection07 {
        padding-top: 40px;
    }
    .section07-1st2clm {
        width: 85.58%;
        margin: 0 auto;
        display: flex;
        gap: 15px;
    }
    .section07-1st2clmIn {
        flex: 1;
    } 
    
}