@charset "UTF-8";

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

/* main {
    background-image: url(../img/common/main-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */

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

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

    span {
        font-size: calc((100vw / var(--vw-large))*20);
        margin-top: calc((100vw / var(--vw-large))*16);
    }
}

@media screen and (max-width: 768px) {
    .h1-wrap {
        margin: 0 auto calc((100vw / var(--vw-small))*32);

        .main_title {
            padding: calc((100vw / var(--vw-small))*80) 0 calc((100vw / var(--vw-small))*8);
        }

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

}

.mv {
    width: calc((100vw / var(--vw-large))*1260);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .mv {
        width: 100%;
    }
}

/* about */

.about {
    padding: calc((100vw / var(--vw-large))*100) 0 calc((100vw / var(--vw-large))*50);

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

        .description {
            width: calc((100vw / var(--vw-large))*512);
            position: relative;
            z-index: 1;

            .en {
                font-size: calc((100vw / var(--vw-large))*120);
                position: absolute;
                z-index: -1;
                width: calc((100vw / var(--vw-large))*614);
                z-index: -1;
                right: calc((100vw / var(--vw-large))*-10);
                letter-spacing: calc((100vw / var(--vw-large))*-1);
                top: calc((100vw / var(--vw-large))*-35);
            }

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

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

            .bold {
                font-weight: 700;
            }
        }

    }

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

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

        .flex {
            width: calc((100vw / var(--vw-small))*360);
            margin: 0 auto;
            flex-direction: column;

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

                .en {
                    font-size: calc((100vw / var(--vw-small))*58);
                    width: calc((100vw / var(--vw-small))*317);
                    right: calc((100vw / var(--vw-small))*50);
                    letter-spacing: calc((100vw / var(--vw-small))*-1);
                    top: calc((100vw / var(--vw-small))*-15);
                }

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

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

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

                .bold {
                    font-weight: 700;
                }
            }

        }

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

}

/* concept */

.concept {
    padding: 0 0 calc((100vw / var(--vw-large))*50);

    .description-wrap {
        width: calc((100vw / var(--vw-large))*1120);
        padding: calc((100vw / var(--vw-large))*60) calc((100vw / var(--vw-large))*40) calc((100vw / var(--vw-large))*80);
        background-image: url(../img/about/concept-bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        margin: 0 auto;
        text-align: left;
        align-items: flex-start;

        .title-wrap {
            width: calc((100vw / var(--vw-large))*563);

            span {
                font-size: calc((100vw / var(--vw-large))*20);

            }

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


        .description {
            width: calc((100vw / var(--vw-large))*520);
            margin: calc((100vw / var(--vw-large))*84) 0 0 auto;
        }
    }
}

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

        .description-wrap {
            flex-direction: column;
            width: calc((100vw / var(--vw-small))*294);
            padding: calc((100vw / var(--vw-small))*40) calc((100vw / var(--vw-small))*24) calc((100vw / var(--vw-small))*80);
            background-image: url(../img/sp/about/concept-bg.jpg);

            .title-wrap {
                width: calc((100vw / var(--vw-small))*304);

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

                }

                h2 {
                    font-size: calc((100vw / var(--vw-small))*22);
                    width: calc((100vw / var(--vw-small))*317);
                    margin: calc((100vw / var(--vw-small))*12) auto 0;
                }
            }


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

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

/* 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;
            }
        }
    }

}

@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;
        }
    }
}

/* outline */

.outline {
    padding: calc((100vw / var(--vw-large))*100) 0 calc((100vw / var(--vw-large))*150);
    text-align: left;

    .flex.inner {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;
        justify-content: flex-start;
        align-items: flex-start;

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

            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: 0;
                    bottom: -16px;
                    /*線の上下位置*/
                    display: inline-block;
                    width: calc((100vw / var(--vw-large))*40);
                    /*線の長さ*/
                    height: calc((100vw / var(--vw-large))*4);
                    /*位置調整*/
                    background-color: #FCC802;
                    /*線の太さ*/
                    -webkit-transform: translateX(0);
                    transform: translateX(0);
                    -webkit-transform: translateX(0);
                    -moz-transform: translateX(0);
                    -ms-transform: translateX(0);
                    -o-transform: translateX(0);
                }
            }

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

        .list.flex {
            justify-content: space-between;

            ul {
                width: calc((100vw / var(--vw-large))*384);

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

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


                    span {
                        display: block;
                    }

                    .title {
                        font-weight: 700;
                        margin: 0 auto calc((100vw / var(--vw-large))*18);
                        padding-bottom: calc((100vw / var(--vw-large))*6);
                        border-bottom: 1px dotted #BDBDBD;
                    }

                    .content {
                        font-weight: 400;
                    }
                }
            }
        }
    }

}

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

        .flex.inner {
            width: calc((100vw / var(--vw-small))*342);
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            .title-wrap {
                display: block;
                width: calc((100vw / var(--vw-small))*340);
                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 {
                        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;
                }

            }

            .list.flex {
                flex-direction: column;
                width: 100%;

                ul {
                    width: 100%;

                    &:first-child {
                        margin: 0 auto;
                    }

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


                        span {
                            display: block;
                            line-height: 164%;
                        }

                        .title {
                            margin: 0 auto calc((100vw / var(--vw-small))*18);
                            padding-bottom: calc((100vw / var(--vw-small))*6);
                        }

                        .content {
                            font-weight: 400;
                        }
                    }
                }
            }
        }

    }
}