@charset "utf-8";
.main-visual {
    background-image : url(/wp/wp-content/themes/wp-templ/assets/img/safety_and_quality/quality/long-life/main_visual.jpg);
}
.introduction.full-screen {
    background-image  : url(/wp/wp-content/themes/wp-templ/assets/img/safety_and_quality/quality/long-life/intro-backimage.jpg);
    height            : initial;
}
#introduction {
    background-color : #e9e9e9;
    padding          : 20px 0 75px;
}
.introduction {
    width  : calc( 100% - 40px );
    margin : auto;
}
.introduction .inner .catch {
    display           : flex;
    align-items       : center;
    justify-content   : center;
    width             : 90%;
    max-width         : 360px;
    margin            : auto;
    background-color  : rgba(0,0,0,0.6);
    text-align        : center;
    color             : #fff;
    line-height       : 1;
    height            : 46px;
}
.introduction .inner .text {
    width     : calc(100% - 40px);
    max-width : 600px;
    margin    : 60px auto;
    color     : #fff;
}
.intro-desc {
    margin-top       : -270px;
    justify-content  : center;
    gap              : 65px;
    padding          : 0 40px;
}
.intro-desc > .desc-block {
    width            : calc( 100% - 40px);
    max-width        : 920px;
    padding          : 65px 50px;
    color            : #fff;
    background-color : #8AB14E;
}
.intro-desc > .desc-block .title {
    font-size : var(--fs-ttl-s);
}
.intro-desc > .desc-block ul {
    margin-top      : 30px;
    display         : flex;
    flex-direction  : column;
}
.intro-desc > .desc-block p {
    margin-top  : 30px;
}
.actually {
    padding-top         : 60px;
    background-image    : url(/wp/wp-content/themes/wp-templ/assets/img/safety_and_quality/quality/long-life/actually-backimage.jpg);
    background-position : bottom;
}
.actually > .inner {
    background-color  : rgba(0,0,0,0.6);
    color             : #fff;
    width             : 100%;
    padding-bottom    : 60px;
}
.actually > .inner > .title {
    margin     : 120px auto 62px;
    text-align : center;
}
.actually > .inner .long-life_contents_list {
    width     : calc(100% - 30px);
    max-width : 1600px;
    margin    : auto;
    flex-wrap : wrap;
    gap       : 10px 15px;
}
.actually > .inner .long-life_contents_list .item {
    padding          : 10px 10px 45px;
    background-color : #fff;
    width            : 20%;
    color            : #000;
    display          : flex;
    flex-direction   : column;
    flex-grow        : 1;
}
.actually > .inner .long-life_contents_list .item img {
    width : 100%;
}
.actually > .inner .long-life_contents_list .item .desc {
    margin-top     : 30px;
    padding        : 0 30px;
    display        : flex;
    flex-direction : column;
    height         : 100%;
}
.actually > .inner .long-life_contents_list .item .desc .title {
    font-size : var(--fs-ttl-s);
}
.actually > .inner .long-life_contents_list .item .desc .text {
    flex-grow : 1;
}
.actually > .inner .long-life_contents_list .item .desc .modal {
    cursor    : pointer;
    font-size : var(--fs-txt-s);
}
.actually > .inner .long-life_contents_list .item .desc .modal:not(.child) {
    margin-top : 30px;
}
.efforts.full-screen {
    height            : initial;
    padding           : 170px 0px;
    background-color  : #8bb14e;
    color             : #fff;
}
.efforts .sec-title {
    margin-top  : 25px;
    color       : #fff;
}
.efforts .tyuui {
    margin-top : 20px;
}
.efforts .move_content .text {
    margin-top : 30px;
    width      : calc( 100% - 40px);
    max-width  : 760px;
}
.efforts .merit_title {
    font-size   : var(--fs-ttl-l);
    margin-top  : 75px;
    font-weight : bold;
}
.efforts .merit_list {
    margin-top  : 55px;
    width       : 1600px;
    max-width   : calc(100% - 40px);
    gap         : 20px;
}
.efforts .merit_list .f-item {
    padding           : 55px 45px;
    flex-direction    : column;
    background-color  : #fff;
    color             : #8bb14e;
    width             : 30%;
}
.efforts .merit_list .f-item .title {
    font-size : var(--fs-ttl-m);
}
.efforts .merit_list .f-item .text {
    margin-top : 25px;
}
.efforts .btn-round {
    border-radius    : 0;
    width            : calc(100% - 20px);
    max-width        : 800px;
    background-color : #fff;
    border           : none;
}
@media (max-width:767px) {
    .introduction.full-screen {
        width      : calc(100% - 20px);
        height     : initial;
        min-height : initial;
        padding    : 60px 0;
        margin     : 10px auto;
    }
    .intro-desc {
        margin  : -100px auto 0;
        width   : calc( 100% - 20px);
        gap     : 20px;
        padding : 20px 0;
    }
    .intro-desc > .f-item {
        padding : 40px 10px;
    }
    .intro-desc > .desc-block {
        padding : 60px 12px;
    }
    .actually {
        background-repeat : no-repeat;
        background-size   : cover;
    }
    .actually.full-screen {
        max-height : initial;
        width      : 100%;
        height     : initial;
    }
    .actually > .inner {
        max-height : initial;
        height     : initial;
        padding    : 60px 10px;
    }
    .actually > .inner > .title {
        display         : flex;
        justify-content : center;
        text-align      : left;
        font-size       : var(--fs-ttl-m);
        margin          : 0 auto 62px;
    }
    .actually > .inner .text {
        width : calc( 100% - 10px );
    }
    .actually > .inner .long-life_contents_list .item {
        width   : 100%;
        padding : 10px 10px 40px;
    }
    .actually > .inner .long-life_contents_list .item .desc {
        padding : 0 0 0 10px;
    }
    .efforts.full-screen {
        padding : 60px 10px;
        width   : calc(100% - 20px);
        margin  : 10px;
    }
    .efforts .tyuui {
        width : calc( 100% - 20px);
    }
    .efforts .move_content .text {
        width : calc( 100% - 20px);
    }
    .efforts .merit_list {
        margin-top : 40px;
        max-width  : calc( 100% - 20px);
    }
    .efforts .merit_list .f-item {
        width   : 100%;
        padding : 55px 20px;
    }
    .efforts .merit_list .f-item .title {
        text-align : left;
    }
    .efforts .merit_list .f-item .desc {
        padding : 0;
    }
    .efforts .merit_list .f-item .desc .model .name {
        font-size : var(--fs-small);
    }
    .efforts .danper-desc {
        width : calc( 100% - 20px);
    }
    .efforts .btn-round {
        font-size : var(--fs-txt);
    }
}