@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}


.main_title {
    padding: calc((100vw / var(--vw-large))*150) 0 calc((100vw / var(--vw-large))*48);
}

/* MV */

@media screen and (max-width: 768px) {
    .main_title {
        padding: calc((100vw / var(--vw-small))*70) 0 calc((100vw / var(--vw-small))*40);
    }
}

/* fv-nav */
.fv-nav {
    width: calc((100vw / var(--vw-large))*1198);
    justify-content: space-between;
    margin: calc((100vw / var(--vw-large))*100) auto;

    li {
        width: calc((100vw / var(--vw-large))*576);
    }
}

@media screen and (max-width: 768px) {
    .fv-nav {
        display: block;
        width: calc((100vw / var(--vw-small))*326);
        margin: calc((100vw / var(--vw-small))*60) auto 0;

        li {
            width: 100%;

            &:first-child {
                margin: 0 auto calc((100vw / var(--vw-small))*20);
            }
        }
    }
}

/* concept */

.concept {
    padding: calc((100vw / var(--vw-large))*150) 0;
    width: calc((100vw / var(--vw-large))*1200);
    margin: 0 auto;

    .text {

        .title-wrap {
            position: relative;
            text-align: left;

            .deco {
                position: absolute;
                font-size: calc((100vw / var(--vw-large))*120);
                z-index: 0;
                left: calc((100vw / var(--vw-large))*-80);
            }

            .sub {
                font-size: calc((100vw / var(--vw-large))*26);
                font-weight: 700;
                line-height: 140%;
                z-index: 1;
                position: relative;
                margin: 0 auto calc((100vw / var(--vw-large))*16);
            }

            h2 {
                margin: 0 auto calc((100vw / var(--vw-large))*40);
            }
        }

        .description {
            text-align: left;
            line-height: 150%;
            width: calc((100vw / var(--vw-large))*512);
            margin: 0 auto calc((100vw / var(--vw-large))*40) 0;

            .bold {
                font-weight: 700;
            }
        }

        a {
            display: block;
            width: calc((100vw / var(--vw-large))*124);
            margin: 0 0 0 auto;
        }
    }

    .img {
        width: calc((100vw / var(--vw-large))*608);
    }
}

@media screen and (max-width: 768px) {
    .concept {
        display: block;
        padding: calc((100vw / var(--vw-small))*100) 0 calc((100vw / var(--vw-small))*47);
        width: calc((100vw / var(--vw-small))*340);
        margin: 0 auto;

        .text {

            margin: 0 auto calc((100vw / var(--vw-small))*40);

            .title-wrap {
                position: relative;
                text-align: left;

                .deco {
                    font-size: calc((100vw / var(--vw-small))*86);
                    left: calc((100vw / var(--vw-small))*-30);
                    top: calc((100vw / var(--vw-small))*-20);
                }

                .sub {
                    font-size: calc((100vw / var(--vw-small))*18);
                    margin: 0 auto calc((100vw / var(--vw-small))*16);
                }

                h2 {
                    margin: 0 auto calc((100vw / var(--vw-small))*40);
                }
            }

            .description {
                width: calc((100vw / var(--vw-small))*326);
                margin: 0 auto calc((100vw / var(--vw-small))*40) auto;

                .bold {
                    font-weight: 700;
                }
            }

            a {
                width: calc((100vw / var(--vw-small))*124);
            }
        }

        .img {
            width: calc((100vw / var(--vw-small))*360);
            position: relative;
            right: calc((100vw / var(--vw-small))*-5);
        }
    }

}

/* bnr01 */

.bnr01 {
    width: calc((100vw / var(--vw-large))*840);
    display: inline-block;
    margin: 0 auto calc((100vw / var(--vw-large))*100);
}

@media screen and (max-width: 768px) {
    .bnr01 {
        width: calc((100vw / var(--vw-small))*326);
        margin: 0 auto calc((100vw / var(--vw-small))*60);
    }
}

/* service-menu */

.service-menu {
    background-image: url(../img/top/service-menu.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc((100vw / var(--vw-large))*100) 0;

    ul {
        width: calc((100vw / var(--vw-large))*1200);
        margin: 0 auto;

        li {
            width: calc((100vw / var(--vw-large))*570);
        }
    }
}

@media screen and (max-width: 768px) {
    .service-menu {
        background-image: url(../img/sp/top/service-menu.jpg);
        padding: calc((100vw / var(--vw-small))*60) 0;

        ul {
            display: block;
            width: calc((100vw / var(--vw-small))*342);

            li {
                width: 100%;

                &:first-child {
                    margin: 0 auto calc((100vw / var(--vw-small))*40);
                }
            }
        }
    }
}

/* bnr02 */

.bnr02 {
    width: calc((100vw / var(--vw-large))*840);
    display: inline-block;
    margin: calc((100vw / var(--vw-large))*100) auto;
}

@media screen and (max-width: 768px) {
    .bnr02 {
        width: calc((100vw / var(--vw-small))*390);
        display: inline-block;
        margin: calc((100vw / var(--vw-small))*60) auto;
    }
}

/* service */
.service {
    background-image: url(../img/top/service-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc((100vw / var(--vw-large))*100) 0;

    .title-wrap {
        margin: 0 auto calc((100vw / var(--vw-large))*40);

        h2 {
            font-size: calc((100vw / var(--vw-large))*56);
            margin: 0 auto calc((100vw / var(--vw-large))*16);
            display: inline-block;
            line-height: 85.714%;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -16px;
                /*線の上下位置*/
                display: inline-block;
                width: calc((100vw / var(--vw-large))*40);
                /*線の長さ*/
                height: calc((100vw / var(--vw-large))*4);
                /*線の太さ*/
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                /*位置調整*/
                background-color: #FCC802;
                /*線の色*/
            }
        }

        span {
            margin: calc((100vw / var(--vw-large))*16) auto 0;
            display: block;
        }
    }

    ul.list01 {
        width: calc((100vw / var(--vw-large))*1164);
        margin: 0 auto calc((100vw / var(--vw-large))*16);
        flex-wrap: wrap;
        gap: calc((100vw / var(--vw-large))*16);

        li {
            width: calc((100vw / var(--vw-large))*270);

            &:nth-of-type(2n) {
                margin-top: calc((100vw / var(--vw-large))*40);
            }
        }
    }

    ul.list02 {
        width: calc((100vw / var(--vw-large))*866);
        margin: 0 auto calc((100vw / var(--vw-large))*40);
        flex-wrap: wrap;
        gap: calc((100vw / var(--vw-large))*16);

        li {
            width: calc((100vw / var(--vw-large))*270);

            &:nth-of-type(2n) {
                margin-top: calc((100vw / var(--vw-large))*40);
            }
        }
    }

    .learnmore {
        width: calc((100vw / var(--vw-large))*124);
        display: inline-block;
    }
}


@media screen and (max-width: 768px) {
    .service {
        background-image: url(../img/top/sp/service-bg.jpg);
        padding: calc((100vw / var(--vw-small))*60) 0;

        .title-wrap {
            margin: 0 auto calc((100vw / var(--vw-small))*40);

            h2 {
                font-size: calc((100vw / var(--vw-small))*40);
                margin: 0 auto calc((100vw / var(--vw-small))*16);

                &::after {
                    width: calc((100vw / var(--vw-small))*40);
                    /*線の長さ*/
                    height: calc((100vw / var(--vw-small))*4);
                }
            }

            span {
                margin: calc((100vw / var(--vw-small))*16) auto 0;
            }
        }

        .service-slider-container {
            position: relative;

            .swiper {
                overflow: initial;
                width: calc((100vw / var(--vw-small))*270);

                .swiper-wrapper {
                    transition-timing-function: linear;
                    width: initial;

                    .swiper-slide {
                        position: relative;

                        &:nth-of-type(2n + 1) {
                            margin-top: calc((100vw / var(--vw-small))*20);
                        }
                    }
                }
            }
        }

        .learnmore {
            width: calc((100vw / var(--vw-small))*124);
            display: inline-block;
            margin: calc((100vw / var(--vw-small))*20) auto 0;
        }
    }
}

/* reasons */

.reasons {
    background-image: url(../img/top/reasons-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc((100vw / var(--vw-large))*100) 0;

    .title-wrap {
        margin: 0 auto calc((100vw / var(--vw-large))*40);

        h2 {
            font-size: calc((100vw / var(--vw-large))*56);
            margin: 0 auto calc((100vw / var(--vw-large))*16);
            display: inline-block;
            line-height: 85.714%;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -16px;
                /*線の上下位置*/
                display: inline-block;
                width: calc((100vw / var(--vw-large))*40);
                /*線の長さ*/
                height: calc((100vw / var(--vw-large))*4);
                /*線の太さ*/
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                /*位置調整*/
                background-color: #FCC802;
                /*線の色*/
            }
        }

        span {
            margin: calc((100vw / var(--vw-large))*16) auto 0;
            display: block;
        }
    }

    ul {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto calc((100vw / var(--vw-large))*40);

        li {
            background-color: #FFFFFF;
            padding: calc((100vw / var(--vw-large))*40) calc((100vw / var(--vw-large))*48);

            .text {
                text-align: left;
                width: calc((100vw / var(--vw-large))*640);

                span {
                    color: #BDBDBD;
                    font-size: calc((100vw / var(--vw-large))*18);
                    margin: 0 auto calc((100vw / var(--vw-large))*8);
                    display: inline-block;
                }

                h3 {
                    margin: 0 auto calc((100vw / var(--vw-large))*24) 0;
                }

                .reason01-h3 {
                    width: calc((100vw / var(--vw-large))*332);
                }

                .reason02-h3 {
                    width: calc((100vw / var(--vw-large))*300);
                }

                .reason03-h3 {
                    width: calc((100vw / var(--vw-large))*364);
                }

                .reason04-h3 {
                    width: calc((100vw / var(--vw-large))*427);
                }

                .under_line {
                    color: #333;
                    font-weight: 700;
                    background: linear-gradient(transparent 60%, rgba(252, 200, 2, 0.5) 50%);
                    margin: 0;
                    font-size: calc((100vw / var(--vw-large))*16);
                    display: inline;
                }
            }

            .img {
                width: calc((100vw / var(--vw-large))*380);
            }

            &:nth-of-type(2n) {
                background-color: #FAFAFA;
            }
        }
    }

    a {
        width: calc((100vw / var(--vw-large))*122);
        display: inline-block;
    }
}

@media screen and (max-width: 768px) {
    .reasons {
        background-image: url(../img/sp/top/reasons-bg.png);
        padding: calc((100vw / var(--vw-small))*60) 0;

        .title-wrap {
            margin: 0 auto calc((100vw / var(--vw-small))*40);

            h2 {
                font-size: calc((100vw / var(--vw-small))*40);
                margin: 0 auto calc((100vw / var(--vw-small))*16);

                &::after {
                    width: calc((100vw / var(--vw-small))*40);
                    /*線の長さ*/
                    height: calc((100vw / var(--vw-small))*4);
                }
            }

            span {
                margin: calc((100vw / var(--vw-small))*16) auto 0;
            }
        }

        .reasons-slider-container {
            position: relative;

            .swiper {
                padding-bottom: calc((100vw / var(--vw-small))*53);

                ul {
                    width: initial;
                    margin: 0;

                    li {
                        width: 100%;
                        padding: calc((100vw / var(--vw-small))*40) 0;
                        margin: 0 auto;

                        .text {
                            width: calc((100vw / var(--vw-small))*292);
                            margin: 0 auto;

                            span {
                                font-size: calc((100vw / var(--vw-small))*18);
                                margin: 0 auto calc((100vw / var(--vw-small))*8);
                            }

                            h3 {
                                margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
                            }

                            .reason01-h3 {
                                width: calc((100vw / var(--vw-small))*252);
                            }

                            .reason02-h3 {
                                width: calc((100vw / var(--vw-small))*228);
                            }

                            .reason03-h3 {
                                width: calc((100vw / var(--vw-small))*276);
                            }

                            .reason04-h3 {
                                width: calc((100vw / var(--vw-small))*203);
                            }

                            .under_line {
                                font-size: calc((100vw / var(--vw-small))*14);
                            }

                            p {
                                font-size: calc((100vw / var(--vw-small))*14);
                            }


                            &:nth-of-type(2n) {
                                background-color: #FAFAFA;
                            }
                        }

                        .img {
                            width: calc((100vw / var(--vw-small))*280);
                            margin: calc((100vw / var(--vw-large))*32) auto 0;
                        }
                    }
                }
            }

            /* ページネーションの余白 */
            .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
            .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
                margin: 0 calc((100vw / var(--vw-small))*6);
            }

            /* ページネーションのサイズと色 */
            .swiper-pagination-bullet {
                background-color: #616161;
                height: calc((100vw / var(--vw-small))*6);
                width: calc((100vw / var(--vw-small))*6);
            }

            .swiper-pagination-bullet-active {
                background-color: #FCC802;
            }
        }


        a {
            width: calc((100vw / var(--vw-small))*122);
            margin: calc((100vw / var(--vw-small))*32) auto 0;
        }
    }
}

/* top-news */

.top-news {
    padding: calc((100vw / var(--vw-large))*100) 0 calc((100vw / var(--vw-large))*150);

    .title-wrap {
        width: calc((100vw / var(--vw-large))*1200);
        margin: 0 auto calc((100vw / var(--vw-large))*40);
        text-align: left;
        align-items: flex-end;

        h2 {
            font-size: calc((100vw / var(--vw-large))*48);
            margin: 0 auto calc((100vw / var(--vw-large))*16);
            display: inline-block;
            line-height: 85.714%;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -16px;
                /*線の上下位置*/
                display: inline-block;
                width: calc((100vw / var(--vw-large))*40);
                /*線の長さ*/
                height: calc((100vw / var(--vw-large))*4);
                /*線の太さ*/
                -webkit-transform: translateX(0);
                transform: translateX(0);
                /*位置調整*/
                background-color: #333333;
                /*線の色*/
                -webkit-transform: translateX(-50%);
                -moz-transform: translateX(0);
                -ms-transform: translateX(0);
                -o-transform: translateX(0);
                -webkit-transform: translateX(0);
            }
        }

        span {
            margin: calc((100vw / var(--vw-large))*16) auto 0;
            display: block;
        }
    }

    .news_single_link {
        text-decoration: none;
        height: calc((100vw / var(--vw-large))*296);

    }

    .news_contents {
        width: calc((100vw / var(--vw-large))*476);
        height: calc((100vw / var(--vw-large))*296);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0 auto;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.2);
        }
    }

    .news_description {
        text-align: left;
        z-index: 2;
        position: relative;
    }

    .news_cat {
        background-color: #3B413C;
        color: #fff;
        padding: calc((100vw / var(--vw-large))*6) calc((100vw / var(--vw-large))*16);
    }

    .news_title {
        display: block;
        font-size: calc((100vw / var(--vw-large))*18);
        font-weight: 700;
        width: calc((100vw / var(--vw-large))*428);
        margin: calc((100vw / var(--vw-large))*159) calc((100vw / var(--vw-large))*24) calc((100vw / var(--vw-large))*8);
    }

    .news_date {
        font-size: calc((100vw / var(--vw-large))*14);
        margin: 0 auto 0 calc((100vw / var(--vw-large))*24);
    }
}

@media screen and (max-width: 768px) {
    .top-news {
        padding: calc((100vw / var(--vw-small))*60) 0 calc((100vw / var(--vw-small))*100);

        .title-wrap {
            display: block;
            width: calc((100vw / var(--vw-small))*340);
            margin: 0 auto calc((100vw / var(--vw-large))*40);

            h2 {
                font-size: calc((100vw / var(--vw-small))*40);
                margin: 0 auto calc((100vw / var(--vw-small))*16);

                &::after {
                    bottom: calc((100vw / var(--vw-small))*-16);
                    /*線の上下位置*/
                    display: inline-block;
                    width: calc((100vw / var(--vw-small))*40);
                    /*線の長さ*/
                    height: calc((100vw / var(--vw-small))*4);
                }
            }

            span {
                margin: calc((100vw / var(--vw-small))*16) auto 0;
            }

            a {
                width: calc((100vw / var(--vw-small))*124);
                display: block;
                margin: 0 0 calc((100vw / var(--vw-small))*40) auto;
            }
        }

        .news_single_link {
            text-decoration: none;
            height: calc((100vw / var(--vw-small))*296);
        }

        .news_contents {
            width: calc((100vw / var(--vw-small))*476);
            height: calc((100vw / var(--vw-small))*296);

            &::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.2);
            }
        }

        .news_cat {
            padding: calc((100vw / var(--vw-small))*6) calc((100vw / var(--vw-small))*16);
        }

        .news_title {
            font-size: calc((100vw / var(--vw-small))*18);
            line-height: 145%;
            width: calc((100vw / var(--vw-small))*428);
            margin: calc((100vw / var(--vw-small))*159) calc((100vw / var(--vw-small))*24) calc((100vw / var(--vw-small))*8);
        }

        .news_date {
            font-size: calc((100vw / var(--vw-small))*14);
            margin: 0 auto 0 calc((100vw / var(--vw-small))*24);
        }
    }
}

.remodal-wrapper {
    padding: 0;
}

.remodal {
    background-color: initial;
    max-width: calc((100vw / var(--vw-large))*1000);
    padding: calc((100vw / var(--vw-large))*100) 0;
    color: #fff;
    text-align: left;
    margin: 0 auto;

    .time {
        font-size: calc((100vw / var(--vw-large))*20);
        color: #616161;
    }

    .title {
        font-size: calc((100vw / var(--vw-large))*20);
        font-weight: 700;
        width: calc((100vw / var(--vw-large))*767);
        margin: 0 auto calc((100vw / var(--vw-large))*24) 0;
        line-height: 140%;
    }

    p {
        font-size: calc((100vw / var(--vw-large))*16);
        margin: 0 auto calc((100vw / var(--vw-large))*24) 0;
    }

    .wp-block-image {
        margin: 0 auto calc((100vw / var(--vw-large))*24);
        width: calc((100vw / var(--vw-large))*878);
        text-align: center;
    }

    .remodal-close {
        width: calc((100vw / var(--vw-large))*40);
        right: calc((100vw / var(--vw-large))*32);
        top: calc((100vw / var(--vw-large))*32);
        left: initial;
        color: #fff;

        &::before {
            font-size: calc((100vw / var(--vw-large))*40);
        }
    }

}

@media screen and (max-width: 768px) {
    .remodal-wrapper {
        padding: 0;
    }

    .remodal {
        padding: calc((100vw / var(--vw-small))*74) calc((100vw / var(--vw-small))*30);
        max-width: 100%;

        .time {
            font-size: calc((100vw / var(--vw-small))*18);
        }

        .title {
            font-size: calc((100vw / var(--vw-small))*16);
            width: calc((100vw / var(--vw-small))*330);
            margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
        }

        p {
            font-size: calc((100vw / var(--vw-small))*16);
            margin: 0 auto calc((100vw / var(--vw-small))*24) 0;
        }

        .wp-block-image {
            margin: 0 auto calc((100vw / var(--vw-small))*24);
            width: calc((100vw / var(--vw-small))*312);
        }

        .remodal-close {
            width: calc((100vw / var(--vw-small))*26);
            right: calc((100vw / var(--vw-small))*32);
            top: calc((100vw / var(--vw-small))*32);

            &::before {
                font-size: calc((100vw / var(--vw-small))*26);
            }
        }
    }
}