.modal-fixed {
    overflow : hidden;
}
@media (max-width: 767px) {
    #wrap {
        margin-top : 50px;
    }
}
.intro-section {
    background      : url("/wp/wp-content/themes/wp-templ/assets/img/concept/bg_intro.jpg") no-repeat;
    background-size : cover;
    padding         : 150px 15px 111px;
}
@media (max-width: 767px) {
    .intro-section {
        background-image : url("/wp/wp-content/themes/wp-templ/assets/img/concept/bg_intro_sp.jpg");
        padding-top      : 64px;
        padding-bottom   : 64px;
    }
}
.intro-section .content-section {
    text-align : center;
}
.intro-section .content-section .title-section {
    max-width     : 600px;
    margin        : 0 auto;
    width         : 100%;
    position      : relative;
    left          : 23px;
    margin-bottom : 72px;
}
@media (max-width: 767px) {
    .intro-section .content-section .title-section {
        left          : 13px;
        max-width     : 244px;
        margin-bottom : 51px;
    }
}
.intro-section .content-section .desc-intro {
    text-align  : center;
    font-size   : 14px;
    font-size   : 1.4rem;
    color       : #fff;
    line-height : 2.75;
}
@media (max-width: 767px) {
    .intro-section .content-section .desc-intro {
        font-size   : 13px;
        font-size   : 1.3rem;
        line-height : 1.85;
    }
}
.concept-section {
    padding : 79px 15px 167px;
}
@media (max-width: 767px) {
    .concept-section {
        padding : 43px 0 79px;
    }
}
.concept-section .title-section {
    font-size     : 45px;
    font-size     : 4.5rem;
    text-align    : center;
    margin-bottom : 74px;
}
@media (max-width: 767px) {
    .concept-section .title-section {
        font-size     : 22px;
        font-size     : 2.2rem;
        margin-bottom : 43px;
    }
}
.concept-section .content-section {
    max-width : 1000px;
    margin    : 0 auto;
}
.concept-box {
    margin-bottom : 147px;
}
@media (max-width: 767px) {
    .concept-box {
        margin-bottom : 77px;
        padding       : 0 10px;
    }
}
@media (max-width: 767px) {
    .concept-box:first-child .box-left {
        margin-bottom : 57px;
    }
    .concept-box:first-child .box-left .desc-box {
        margin-bottom : 0;
    }
}
.concept-box.right-to-left .box-left {
    float        : right;
    margin-right : 0;
    margin-left  : 11.12%;
}
@media (max-width: 767px) {
    .concept-box.right-to-left .box-left {
        margin-left : 0;
    }
    .concept-box.right-to-left .box-left .img-box {
        margin : 0 0 47px auto;
    }
}
.concept-box.right-to-left .box-left .title-box strong:before {
    right : 0;
    left  : auto;
    width : 530px;
}
.concept-box.right-to-left .box-left .title-box strong:after {
    right : 0;
    left  : auto;
    width : 415px;
}
.concept-box.right-to-left .box-left .list-btn li {
    width : 38.3%;
}
@media (max-width: 767px) {
    .concept-box.right-to-left .box-left .list-btn li {
        width : 45%;
    }
}
.concept-box.right-to-left .box-right {
    float : left;
}
.concept-box.concept-box-2 {
    margin-bottom : 151px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-2 {
        margin-bottom : 79px;
    }
}
.concept-box.concept-box-2 .box-left {
    margin-top : -4px;
}
.concept-box.concept-box-2 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-2 .box-left .title-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-2 .box-left .title-box strong:after {
    width : 350px;
}
.concept-box.concept-box-2 .box-left .desc-box {
    margin-bottom : 10px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-2 .box-left .desc-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-2 .box-left .c-btn01 {
    margin-bottom : 28px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-2 .box-left .c-btn01 {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-2 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box.concept-box-3 {
    margin-bottom : 151px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-3 {
        margin-bottom : 79px;
    }
}
.concept-box.concept-box-3 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-3 .box-left .title-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-3 .box-left .desc-box {
    margin-bottom : 40px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-3 .box-left .desc-box {
        margin-bottom : 30px;
    }
}
.concept-box.concept-box-3 .box-left .c-btn01 {
    margin-bottom : 28px;
}
.concept-box.concept-box-3 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box.concept-box-4 {
    margin-bottom : 100px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-4 {
        margin-bottom : 79px;
    }
}
.concept-box.concept-box-4 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-4 .box-left .title-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-4 .box-left .desc-box {
    margin-bottom : 18px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-4 .box-left .desc-box {
        margin-bottom : 5px;
    }
}
.concept-box.concept-box-4 .box-left .c-btn01 {
    margin-bottom : 28px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-4 .box-left .c-btn01 {
        margin-bottom : 23px;
    }
}
.concept-box.concept-box-4 .box-left .list-btn li {
    width : 33.3%;
}
@media (max-width: 767px) {
    .concept-box.concept-box-4 .box-left .list-btn li {
        width : 41%;
    }
}
.concept-box.concept-box-4 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box.concept-box-5 {
    margin-bottom : 100px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-5 {
        margin-bottom : 75px;
    }
}
.concept-box.concept-box-5 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-5 .box-left .title-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-5 .box-left .title-box strong em {
    display : block;
    width   : 114%;
}
@media (max-width: 767px) {
    .concept-box.concept-box-5 .box-left .title-box strong em {
        width : 100%;
    }
}
.concept-box.concept-box-5 .box-left .desc-box {
    margin-bottom : 24px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-5 .box-left .desc-box {
        margin-bottom : 5px;
    }
}
.concept-box.concept-box-5 .box-left .list-btn li {
    width : 33.3%;
}
.concept-box.concept-box-5 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box.concept-box-6 {
    margin-bottom : 148px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-6 {
        margin-bottom : 74px;
    }
}
.concept-box.concept-box-6 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-6 .box-left .title-box {
        margin-bottom : 22px;
    }
}
.concept-box.concept-box-6 .box-left .desc-box {
    margin-bottom : 24px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-6 .box-left .desc-box {
        margin-bottom : 7px;
    }
}
.concept-box.concept-box-6 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box.concept-box-7 {
    margin-bottom : 0;
}
.concept-box.concept-box-7 .box-left .title-box {
    margin-bottom : 25px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-7 .box-left .title-box {
        margin-bottom : 21px;
    }
}
.concept-box.concept-box-7 .box-left .desc-box {
    margin-bottom : 43px;
}
@media (max-width: 767px) {
    .concept-box.concept-box-7 .box-left .desc-box {
        margin-bottom : 30px;
    }
}
.concept-box.concept-box-7 .box-left .list-btn {
    width : 107%;
}
.concept-box.concept-box-7 .box-left .list-btn li {
    width : 26.3%;
}
.concept-box.concept-box-7 .box-left .list-btn li .btn-basic{
    max-width : initial;
}
@media (max-width: 767px) {
    .concept-box.concept-box-7 .box-left .list-btn {
        width : 100%;
    }
    .concept-box.concept-box-7 .box-left .list-btn li {
        width         : 31%;
        margin-bottom : 10px;
    }
}
.concept-box.concept-box-7 .box-left .list-btn li:last-child {
    margin-right : 0 !important;
}
.concept-box.concept-box-7 .box-right .img-box {
    margin-bottom : 0;
}
.concept-box .box-left {
    float        : left;
    width        : 44.44%;
    margin-right : 11.12%;
    margin-top   : 24px;
    position     : relative;
    z-index      : 1;
}
@media (max-width: 767px) {
    .concept-box .box-left {
        float        : none;
        width        : 100%;
        margin-right : 0;
        margin-top   : 0;
    }
    .concept-box .box-left .img-box {
        margin-bottom : 46px;
    }
}
.concept-box .box-right {
    float : right;
    width : 44.44%;
}
@media (max-width: 767px) {
    .concept-box .box-right {
        float : none;
        width : 100%;
    }
}
.concept-box .box-right .img-box {
    margin-bottom : 89px;
    position      : relative;
    z-index       : -1;
}
@media (max-width: 767px) {
    .concept-box .box-right .img-box {
        margin : 0 0 45px auto;
    }
}
.concept-box .box-right .desc-box {
    margin-bottom : 19px;
}
@media (max-width: 767px) {
    .concept-box .box-right .desc-box {
        margin-bottom : 17px;
    }
}
.concept-box .c-btn01 {
    text-align : right;
}
.concept-box .c-btn01 .txt {
    font-size      : 16px;
    font-size      : 1.6rem;
    padding-right  : 16px;
    padding-bottom : 0;
}
@media (max-width: 767px) {
    .concept-box .c-btn01 .txt {
        font-size     : 11px;
        font-size     : 1.1rem;
        margin-right  : 20px;
        padding-right : 10px;
    }
}
.concept-box .title-box {
    margin-bottom : 41px;
    background    : #fff;
    font-weight   : normal;
}
@media (max-width: 767px) {
    .concept-box .title-box {
        margin-bottom : 21px;
    }
}
.concept-box .title-box span {
    display   : block;
    font-size : 20px;
    font-size : 2rem;
}
@media (max-width: 767px) {
    .concept-box .title-box span {
        font-size     : 14px;
        font-size     : 1.4rem;
        margin-bottom : 3px;
    }
}
.concept-box .title-box strong {
    display     : block;
    font-size   : 30px;
    font-size   : 3rem;
    position    : relative;
    font-weight : normal;
}
@media (max-width: 767px) {
    .concept-box .title-box strong {
        font-size : 18px;
        font-size : 1.8rem;
    }
}
.concept-box .title-box strong:before {
    position   : absolute;
    content    : '';
    width      : 530px;
    height     : 1px;
    background : #5b5959;
    left       : 0;
    top        : 26px;
    z-index    : 1;
}
@media (max-width: 767px) {
    .concept-box .title-box strong:before {
        display : none;
    }
}
.concept-box .title-box strong:after {
    position   : absolute;
    content    : '';
    width      : 42%;
    height     : 2px;
    background : #fff;
    left       : 0;
    top        : 26px;
    z-index    : 2;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .concept-box .title-box strong:after {
        top    : 25px;
        height : 4px;
    }
}
@media (device-width: 1024px) and (device-height: 1366px), (device-height: 1024px) and (device-width: 1366px), (device-width: 834px) and (device-height: 1194px), (device-height: 834px) and (device-width: 1194px) {
    .concept-box .title-box strong:after {
        top    : 25px;
        height : 4px;
    }
}
@media (max-width: 767px) {
    .concept-box .title-box strong:after {
        display : none;
    }
}
.concept-box .title-box strong em {
    font-style : normal;
    position   : relative;
    z-index    : 3;
    background : #fff;
}
.concept-box .desc-box {
    font-size     : 1.4rem;
    line-height   : 2.45;
    margin-bottom : 73px;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .concept-box .desc-box {
        font-size : 1.3rem;
    }
}
@media (device-width: 1024px) and (device-height: 1366px), (device-height: 1024px) and (device-width: 1366px), (device-width: 834px) and (device-height: 1194px), (device-height: 834px) and (device-width: 1194px) {
    .concept-box .desc-box {
        font-size : 13px;
        font-size : 1.3rem;
    }
}
@media (max-width: 767px) {
    .concept-box .desc-box {
        font-size   : 13px;
        font-size   : 1.3rem;
        line-height : 1.85;
    }
}
.concept-box .list-btn {
    display   : flex;
    flex-wrap : wrap;
    gap       : 10px;
}
@media (max-width: 767px) {
    .concept-box .list-btn {
        justify-content : space-between;
    }
}
.concept-box .list-btn li {
    width         : 30%;
    max-width     : 144px;
    margin-bottom : 32px;
}
@media (max-width: 767px) {
    .concept-box .list-btn li {
        width         : 31%;
        max-width     : initial;
        margin-bottom : 10px;
    }
    .concept-box .list-btn li a{
        max-width : initial;
    }
}
@media (max-width: 767px) {
}
.concept-box .list-btn li .darkgray-btn {
    height      : 38px;
    max-width   : 100%;
    line-height : 32px;
    background  : #fff;
    color       : #5b5959;
}
.concept-box .list-btn li .darkgray-btn span {
    font-size : 14px;
    font-size : 1.4rem;
}
@media (max-width: 767px) {
    .concept-box .list-btn li .darkgray-btn {
        height      : 32px;
        line-height : 29px;
    }
    .concept-box .list-btn li .darkgray-btn span {
        font-size : 12px;
        font-size : 1.2rem;
    }
}
.concept-box .list-btn li .darkgray-btn:hover {
    background : #5b5959;
    color      : #fff;
}
.concept-box .list-btn li .darkgray-btn:hover:before, .concept-box .list-btn li .darkgray-btn:hover:after {
    border-color : #5b5959;
}
.modal {
    display          : none;
    position         : fixed;
    margin-top       : 0px;
    z-index          : 1000;
    padding          : 50px 40px 200px;
    left             : 0;
    top              : 0;
    width            : 100%;
    height           : 100%;
    overflow         : auto;
    background-color : #000;
    background-color : rgba(0, 0, 0, 0.5);
}
@media (max-width: 767px) {
    .modal {
        margin-top : 0px;
        padding    : 10px 10px 120px;
    }
}
.modal.modal-2 .modal-content {
    padding-top : 90px;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content {
        padding-top   : 53px;
        padding-left  : 0;
        padding-right : 0;
    }
}
.modal.modal-2 .modal-content .title-box {
    text-align    : center;
    margin-bottom : 53px;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .title-box {
        margin-bottom : 43px;
    }
}
.modal.modal-2 .modal-content .title-box span {
    display   : block;
    font-size : 20px;
    font-size : 2rem;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .title-box span {
        font-size : 14px;
        font-size : 1.4rem;
    }
}
.modal.modal-2 .modal-content .title-box strong {
    display     : block;
    font-size   : 30px;
    font-size   : 3rem;
    font-weight : normal;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .title-box strong {
        font-size : 18px;
        font-size : 1.8rem;
    }
}
.modal.modal-2 .modal-content .desc-box {
    font-size : 14px;
    font-size : 1.4rem;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .desc-box {
        font-size : 13px;
        font-size : 1.3rem;
        padding   : 0 10px;
    }
}
.modal.modal-2 .modal-content .concept-box {
    margin-bottom : 0;
}
.modal.modal-2 .modal-content .concept-box .box-left {
    margin-top : 0;
}
.modal.modal-2 .modal-content .concept-box .box-left .desc-box, .modal.modal-2 .modal-content .concept-box .box-left .img-box {
    margin-bottom : 41px;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .concept-box .box-left .desc-box, .modal.modal-2 .modal-content .concept-box .box-left .img-box {
        margin-bottom : 46px;
    }
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .concept-box .box-left .img-box {
        margin : 0 0 18px auto;
    }
    .modal.modal-2 .modal-content .concept-box .box-left .img-box.img-sp-left {
        margin : 0 auto 18px 0;
    }
}
.modal.modal-2 .modal-content .concept-box .box-right {
    margin-top : 10px;
}
.modal.modal-2 .modal-content .concept-box .box-right .desc-box, .modal.modal-2 .modal-content .concept-box .box-right .img-box {
    margin-bottom : 41px;
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .concept-box .box-right .desc-box {
        margin-bottom : 0;
    }
}
@media (max-width: 767px) {
    .modal.modal-2 .modal-content .concept-box .box-right .img-box {
        max-width : 93.4%;
        margin    : 0 0 18px auto;
    }
}
.modal .modal-content {
    background-color : #fefefe;
    margin           : auto;
    padding          : 100px;
    width            : 100%;
    max-width        : 1100px;
    position         : relative;
}
@media (max-width: 767px) {
    .modal .modal-content {
        padding : 53px 10px;
    }
}
.modal .close {
    width    : 32px;
    height   : 32px;
    position : absolute;
    right    : 6px;
    top      : 24px;
    cursor   : pointer;
}
@media (max-width: 767px) {
    .modal .close {
        right : -7px;
        top   : 16px;
    }
}
.modal .close:before {
    position          : absolute;
    content           : '';
    width             : 2px;
    height            : 32px;
    background        : #000000;
    -moz-transform    : rotate(45deg);
    -webkit-transform : rotate(45deg);
    -ms-transform     : rotate(45deg);
    transform         : rotate(45deg);
    top               : 0;
    left              : 0;
}
@media (max-width: 767px) {
    .modal .close:before {
        height : 15px;
        width  : 1px;
    }
}
.modal .close:after {
    position          : absolute;
    content           : '';
    width             : 2px;
    height            : 32px;
    background        : #000000;
    -moz-transform    : rotate(-45deg);
    -webkit-transform : rotate(-45deg);
    -ms-transform     : rotate(-45deg);
    transform         : rotate(-45deg);
    top               : 0;
    left              : 0;
}
@media (max-width: 767px) {
    .modal .close:after {
        height : 15px;
        width  : 1px;
    }
}
.modal .concept-box {
    margin-bottom : 70px;
}
@media (max-width: 767px) {
    .modal .concept-box {
        margin-bottom : 25px;
    }
}
@media (max-width: 767px) {
    .modal .concept-box .box-left {
        margin-bottom : 21px;
    }
    .modal .concept-box .box-left .title-box, .modal .concept-box .box-left .desc-box {
        padding : 0 10px;
    }
    .modal .concept-box .box-left .desc-box {
        margin-bottom : 0;
    }
}
.modal .concept-box .box-right .img-box {
    margin-bottom : 0;
    z-index       : 0;
}
@media (max-width: 767px) {
    .modal .concept-box .box-right .img-box {
        max-width : 100%;
    }
}
.modal .list-faq ul li {
    border        : solid 1px #5b5959;
    margin-bottom : 50px;
}
@media (max-width: 767px) {
    .modal .list-faq ul li {
        margin-bottom : 24px;
    }
}
.modal .list-faq ul li:last-child {
    margin-bottom : 0;
}
.modal .list-faq ul li .question {
    font-size  : 22px;
    font-size  : 2.2rem;
    color      : #fff;
    padding    : 13px 35px;
    background : #5b5959;
    position   : relative;
}
@media (max-width: 767px) {
    .modal .list-faq ul li .question {
        font-size : 13px;
        font-size : 1.3rem;
        padding   : 16px 9px;
    }
    .modal .list-faq ul li .question.two-row {
        padding     : 11px 9px;
        line-height : 1.3;
    }
}
.modal .list-faq ul li .question.active:before {
    top               : 53%;
    -moz-transform    : rotate(225deg);
    -webkit-transform : rotate(225deg);
    -ms-transform     : rotate(225deg);
    transform         : rotate(225deg);
}
@media (max-width: 767px) {
    .modal .list-faq ul li .question.active:before {
        top : 69%;
    }
}
.modal .list-faq ul li .question:before {
    content           : "";
    position          : absolute;
    right             : 26px;
    top               : 53%;
    -moz-transform    : rotate(225deg);
    -webkit-transform : rotate(225deg);
    -ms-transform     : rotate(225deg);
    transform         : rotate(225deg);
    width             : 16px;
    height            : 16px;
    margin-top        : -16px;
    border-left       : 2px solid #fff;
    border-top        : 2px solid #fff;
}
@media (max-width: 767px) {
    .modal .list-faq ul li .question:before {
        width       : 8px;
        height      : 8px;
        border-left : 1px solid #fff;
        border-top  : 1px solid #fff;
        right       : 20px;
        top         : 72%;
    }
}
.modal .list-faq ul li .answer {
    padding     : 40px 44px 40px 48px;
    font-size   : 14px;
    font-size   : 1.4rem;
    line-height : 2.45;
}
@media (max-width: 767px) {
    .modal .list-faq ul li .answer {
        padding     : 15px 8px 12px;
        font-size   : 13px;
        font-size   : 1.3rem;
        line-height : 1.85;
    }
}
/* custom */
.modal .close {
    right : 22px;
}
.modal .close:before, .modal .close:after {
    left : 16px;
}
.concept-box.concept-box-2 .box-left .desc-box p,
.concept-box.concept-box-3 .box-left .desc-box p,
.concept-box.concept-box-5 .box-left .desc-box p,
.concept-box.concept-box-6 .box-left .desc-box p,
.concept-box.concept-box-7 .box-left .desc-box p {
    margin-bottom : 43px;
}

/* 性能・品質 */
#quality {
    margin-top: 62px;
    display: flex;
    flex-direction: column;
    gap: 28px
}

.quality-block {
    display: flex;
    width: 95%;
    height: 600px;
    position: relative
}

.quality-block.left {
    margin-right: auto
}

.quality-block.right {
    margin-left: auto
}

.quality-block__cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(181, 183, 86, 1);
    transition-delay: 1s;
    transition-duration: .3s;
    z-index: 2;
    overflow: hidden
}

.left .quality-block__cover {
    right: 0
}

.right .quality-block__cover {
    left: 0
}

.quality-block__backcolor {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 130px;
    background-color: rgba(26, 16, 13, .2);
    z-index: 1
}

.quality-block__backimage {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-position: center;
    background-size: cover;
    z-index: -1
}

.quality-block__backimage.zeh {
    background-image: url(/wp/wp-content/themes/wp-templ/assets/img/top/qualitysec_1.webp);
    background-position: top
}

.quality-block__backimage.prepare {
    background-image: url(/wp/wp-content/themes/wp-templ/assets/img/top/qualitysec_2.webp)
}

.quality-block__backimage.quality {
    background-image: url(/wp/wp-content/themes/wp-templ/assets/img/top/qualitysec_3.webp)
}

.quality-block__backimage.maintenance {
    background-image: url(/wp/wp-content/themes/wp-templ/assets/img/top/qualitysec_4.webp)
}

.quality-block__title {
    margin-top: 30px;
    color: #fff;
    font-weight: 100;
    font-size: 62px;
    letter-spacing: .24em;
    text-indent: var(--ti-adjust)
}

#quality .btn-darkgray {
    margin: 0
}

#quality .btn-darkgray::before {
    content: "";
    height: 100%;
    width: 0;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    transition-duration: .3s;
    z-index: 0
}

#quality .btn-darkgray:hover::before {
    width: 100%
}

#quality .btn-darkgray span {
    position: relative;
    z-index: 1
}

.btn-darkgray.thick {
    height: 72px;
    max-width: 490px;
    border: 1px solid #fff;
    background-color: #2c2c2c;
    margin: 0
}

.quality-block.scrollIn {
    width: 0;
    transition-duration: .5s
}

.quality-block.scrollActive {
    width: 95%
}

.quality-block__cover {
    width: 100%;
    transition-delay: 1.1s;
    transition-duration: .3s
}

.scrollActive .quality-block__cover {
    width: 0%
}

.quality-block__cover-txt {
    display: flex;
    align-items: center;
    height: 100%;
    width: 6000px;
    font-size: 12rem;
    line-height: 100%;
    font-weight: 100;
    color: #fff;
    position: absolute;
    top: 0;
    opacity: 0;
    transition-duration: 0.8s;
    transition-delay: 0.1s;
    letter-spacing: 3em
}

.quality-block__cover-txt {
    transition-duration: 0.7s
}

.left .quality-block__cover-txt {
    right: 50%;
    text-align: right;
    justify-content: end
}

.right .quality-block__cover-txt {
    left: 50%;
    text-align: left
}

.scrollActive .quality-block__cover-txt {
    letter-spacing: 3px
}

.left.scrollActive .quality-block__cover-txt {
    opacity: 1;
    right: 120px
}

.right.scrollActive .quality-block__cover-txt {
    opacity: 1;
    left: 120px
}

.quality-block__title {
    opacity: 0;
    transition: .6s;
    transition-delay: 1s
}

.scrollActive .quality-block__title {
    opacity: 1
}

@media (max-width:767px) {

    .quality-block__cover-txt,
    .left .quality-block__cover-txt {
        font-size: 5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6000px
    }

    .maintenance .quality-block__cover-txt {
        font-size: 4.2rem
    }

    .quality-block {
        height: 320px;
        font-size: 32px
    }

    .quality-block.scrollActive {
        width: 98%
    }

    .quality-block__backcolor {
        gap: 44px
    }

    .quality-block__title {
        font-size: 32px;
        letter-spacing: .24em;
        text-indent: var(--ti-adjust)
    }

    .btn-darkgray.thick {
        height: 44px;
        background-color: rgba(44, 44, 44, .8);
        font-size: var(--fs-txt-m)
    }

    .scrollActive .quality-block__cover-txt {
        width: 100%;
        min-width: 350px
    }

    .left.scrollActive .quality-block__cover-txt {
        right: 0
    }

    .right.scrollActive .quality-block__cover-txt {
        left: 0
    }
}

.main-visual {
    background-position : right;
}
.main-visual .catch {
    text-shadow         : rgba(159,159,159,0.7) 1px 0 10px;
}

.concept-description {
    width               : 98%;
    max-width           : 2000px;
    margin              : auto;
}
.concept-description > h2 {
    margin-top          : 120px;
    font-size           : var(--fs-ttl-m);
}
.concept-description .description-1 {
    margin-top          : 120px;
    gap                 : 90px;
}
.concept-description .text p {
    line-height         : 2.6;
    max-width           : 600px;
}
.concept-description .description-1 .text p:not(:first-child) {
    margin-top          : 45px;
}
.concept-description .description-2 {
    margin-top          : -30px;
    gap                 : 180px;
}
.concept-description .description-2 .text {
    margin-top          : 270px;
}
.concept-description .description-2 .text .text-wrap {
    width               : fit-content;
    margin-top          : 60px;
}
.concept-description .description-2 .text .text-wrap p {
    width               : fit-content;
}
.concept-description .description-2 .text .text-wrap p:not(:first-child) {
    margin-top          : 45px;
}
.concept-description .description-2 .image {
    position            : relative;
}
.concept-description .description-2 .image .circle {
    display             : block;
    position            : relative;
    left                : -90px;
    top                 : -90px;
    width               : 380px;
    height              : auto;
    overflow            : hidden;
    border              : solid 10px #fff;
    border-radius       : 100%;
}

@media ( max-width: 767px ){
    .concept-description > h2 {
        margin-top      : 60px;
    }
    .concept-description .text {
        width           : calc( 100% - 20px );
        margin          : auto;
    }
    .concept-description .description-1 {
        margin-top      : 60px;
        gap             : 30px;
    }
    .concept-description .description-2 {
        margin-top      : 0;
        gap             : 30px;
    }
    .concept-description .description-2 .text {
        margin-top      : 60px;
    }
    .concept-description .description-2 .text .text-wrap {
        margin-top      : 30px;
    }
    .concept-description .description-2 .text .text-wrap p:not(:first-child) {
        margin-top      : 20px;
    }
    .concept-description .description-2 .image {
        margin-top      : 30px;
    }
    .concept-description .description-2 .image .circle {
        width           : 280px;
        left            : -45px;
        top             : -45px;
        border          : solid 5px #fff;
    }
}

.concept-links {
    counter-reset       : number 0;           /* number のカウンタを 0 にセット */
}
.concept-links h2 {
    display             : flex;
    justify-content     : center;
    align-items         : center;
    width               : calc( 100% - 20px );
    max-width           : 480px;
    height              : 50px;
    margin              : auto;
    background-color    : #a6a76a;
    color               : #fff;
}

.concept-links .list {
    display             : flex;
    flex-wrap           : wrap;
    max-width           : 1480px;
    margin              : 50px auto 0;
    padding             : 24px 35px 0;
    gap                 : 24px;
}
.concept-links .list .line1colm {
    box-sizing          : border-box;
    width               : calc( 50% - 13px );
    height              : auto;
    aspect-ratio        : 2 / 1;
    border              : solid 1px #ddd;
    font-size           : var( --fs-ttl-m );
}
.concept-links .list .line1colm a {
    display             : flex;
    justify-content     : center;
    align-items         : center;
    position            : relative;
    width               : 100%;
    height              : 100%;
    padding             : 10px;
    background-size     : cover;
    background-position : center;
    color               : #fff;
}
.concept-links .list .line1colm:hover a {
    opacity             : 1;
}
.concept-links .list .line1colm .bg_color {
    position            : absolute;
    left                : 0;
    top                 : 0;
    width               : 100%;
    height              : 100%;
    background          : rgba( 166, 167, 99, 0.92 );
    transition-duration : 0.3s;
}
.concept-links .list .line1colm:nth-child(2) .bg_color,
.concept-links .list .line1colm:nth-child(3) .bg_color {
    background          : rgba( 181, 183, 86, 0.92 );
}
.concept-links .list .line1colm:hover .bg_color {
    background          : rgba( 0, 0, 0, 0.4 );
}
.concept-links .list .line1colm span,
.concept-links .list .line1colm a::before,
.concept-links .list .line1colm a::after {
    position            : relative;
    transition          : .3s;
    z-index             : 1;
}
.concept-links .list .line1colm:hover span {
    color               : #fff;
}
.concept-links .list .line1colm.eco a {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/concept/concept_item_bg1.webp );
}
.concept-links .list .line1colm.prepare  a {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/concept/concept_item_bg2.webp );
}
.concept-links .list .line1colm.inspection a {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/concept/concept_item_bg3.webp );
}
.concept-links .list .line1colm.maintenance a {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/concept/concept_item_bg4.webp );
}
.concept-links .list .line1colm a::before {
    counter-increment   : number 1;             /* number カウンタの増加数をセット */
    content             : counter( number );    /* 表示形式を指定 */
    display             : flex;
    justify-content     : center;
    align-items         : center;
    width               : 38px;
    height              : auto;
    aspect-ratio        : 1 / 1;
    margin-right        : 20px;
    background-color    : #fff;
    font-size           : var( --fs-ttl-m );
    color               : #a6a76a;
    font-weight         : bold;
    text-indent         : var( --ti-adjust );
    border-radius       : 5px;
    transition-duration : .3s;
}
.concept-links .list .line1colm:hover a::before {
    background-color    : #fff;
    color               : #000;
}
.concept-links .list .line1colm a::after {
    content             : "";
    display             : block;
    width               : auto;
    height              : 34px;
    aspect-ratio        : 1 / 1;
    margin-left         : 20px;
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/top/link_arrow_w.svg );
    background-position : center;
    background-repeat   : no-repeat;
    background-size     : 12px;
    border              : solid 1px #fff;
}
.concept-links .list .line1colm:hover a::after {
    background-image    : url( /wp/wp-content/themes/wp-templ/assets/img/top/link_arrow_w.svg );
    border              : solid 1px #fff;
}
.description__link {
    margin              : 40px;
    font-size           : 1.2rem;
}
@media (max-width: 767px) {
    .concept-links .list {
        flex-direction  : column;
        width           : calc( 100% - 30px );
        margin-top      : 20px;
        padding         : 20px 0;
        gap             : 6px;
    }
    .concept-links .list .line1colm {
        justify-content : flex-start;
        align-items     : flex-start;
        width           : 100%;
        height          : 100px;
        aspect-ratio    : auto;
        font-size       : var( --fs-ttl-s );
        border          : solid 1px #948d5f;
    }
    .concept-links .list .line1colm a {
        justify-content : initial;
        align-items     : initial;
        padding         : 25px 50px;
    }
    .concept-links .list .line1colm a::before {
        position        : absolute;
        top             : 30px;
        left            : 12px;
        width           : 28px;
        height          : 28px;
        font-size       : var( --fs-ttl-s );
    }
    .concept-links .list .line1colm a::after {
        position        : absolute;
        right           : 10px;
        top             : 0;
        bottom          : 0;
        height          : 30px;
        margin          : auto;
        background-size : 12px;
    }
    .description__link {
        margin          : 40px auto;
    }
}