@charset "UTF-8";

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

/* MV */


.mv {
    margin-top: calc((100vw / var(--vw-large))*80);

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

/* ABOUT */

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

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

    h3 {
        font-size: calc((100vw / var(--vw-large))*36);
        font-style: italic;
        font-weight: 500;
        line-height: 140%;
        /* 50.4px */
        letter-spacing: calc((100vw / var(--vw-large))*0.5);
        margin: 0 auto calc((100vw / var(--vw-large))*44);

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*22);
            letter-spacing: calc((100vw / var(--vw-small))*0.5);
        }
    }

    ul {
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto calc((100vw / var(--vw-large))*100);
        justify-content: space-between;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            width: calc((100vw / var(--vw-small))*360);
            margin: 0 auto calc((100vw / var(--vw-small))*60);
            gap: calc((100vw / var(--vw-small))*20);
        }

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

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

    .description {
        h2 {
            font-size: calc((100vw / var(--vw-large))*48);
            font-style: italic;
            font-weight: 500;
            line-height: 150%;
            /* 72px */
            letter-spacing: calc((100vw / var(--vw-large))*0.5);
            margin-bottom: calc((100vw / var(--vw-large))*36);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*36);
                letter-spacing: calc((100vw / var(--vw-small))*0.5);
                width: calc((100vw / var(--vw-small))*360);
                margin: 0 auto calc((100vw / var(--vw-small))*30);
            }
        }

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

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

        p {
            width: calc((100vw / var(--vw-large))*638);
            margin: 0 auto calc((100vw / var(--vw-large))*24);
            font-weight: 400;
            line-height: 200%;
            /* 28px */
            letter-spacing: calc((100vw / var(--vw-large))*1.6);

            @media screen and (max-width: 768px) {
                width: calc((100vw / var(--vw-small))*330);
                margin: 0 auto calc((100vw / var(--vw-small))*30);
                font-size: calc((100vw / var(--vw-small))*14);
                letter-spacing: calc((100vw / var(--vw-small))*0.6);
            }
        }
    }
}

/* STRENGTHS */
.strengths {
    padding: calc((100vw / var(--vw-large))*80) calc((100vw / var(--vw-large))*100) calc((100vw / var(--vw-large))*164);
    background: linear-gradient(180deg, #F5F5F5 0%, #FFF 100%);
    position: relative;

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

    .tit_wrap {
        text-align: left;
        margin-bottom: calc((100vw / var(--vw-large))*60);

        @media screen and (max-width: 768px) {
            margin-bottom: calc((100vw / var(--vw-small))*30);
        }

        span {
            font-size: calc((100vw / var(--vw-large))*16);
            font-style: normal;
            font-weight: 400;
            line-height: calc((100vw / var(--vw-large))*35);
            /* 218.75% */
            letter-spacing: calc((100vw / var(--vw-large))*6);
            margin-bottom: calc((100vw / var(--vw-large))*8);
            display: block;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*12);
                line-height: calc((100vw / var(--vw-small))*35);
                /* 291.667% */
                letter-spacing: calc((100vw / var(--vw-small))*3);
                margin-bottom: calc((100vw / var(--vw-small))*12);
            }
        }

        h2 {
            text-align: left;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*28);
                line-height: 114.286%;
            }
        }
    }

    ul {
        justify-content: space-between;
        align-items: flex-start;
        position: relative;
        z-index: 1;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            gap: calc((100vw / var(--vw-small))*20);
            margin-bottom: calc((100vw / var(--vw-small))*38);
        }

        li {
            width: calc((100vw / var(--vw-large))*365);
            background: #FFF;
            box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.25);
            padding: calc((100vw / var(--vw-large))*30) 0;

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

            &:nth-child(2) {
                margin-top: calc((100vw / var(--vw-large))*36);

                @media screen and (max-width: 768px) {
                    margin-top: 0;
                }
            }

            &:nth-child(3) {
                margin-top: calc((100vw / var(--vw-large))*72);

                @media screen and (max-width: 768px) {
                    margin-top: 0;
                }
            }

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

                @media screen and (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*305);
                }

                img {
                    margin-bottom: calc((100vw / var(--vw-large))*10);

                    @media screen and (max-width: 768px) {
                        margin-bottom: calc((100vw / var(--vw-small))*10);
                    }
                }

                span {
                    color: var(--text-black, #333);
                    font-size: calc((100vw / var(--vw-large))*20);
                    font-style: normal;
                    font-weight: 500;
                    line-height: normal;
                    letter-spacing: calc((100vw / var(--vw-large))*0.8);
                    text-transform: uppercase;
                    margin-bottom: calc((100vw / var(--vw-large))*16);
                    display: block;

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*20);
                        letter-spacing: calc((100vw / var(--vw-small))*0.8);
                        margin-bottom: calc((100vw / var(--vw-small))*15);
                    }
                }

                p {
                    color: var(--text-black, #333);
                    font-size: calc((100vw / var(--vw-large))*16);
                    font-style: normal;
                    font-weight: 400;
                    line-height: calc((100vw / var(--vw-large))*35);
                    /* 218.75% */
                    letter-spacing: calc((100vw / var(--vw-large))*0.64);
                    text-transform: uppercase;

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*16);
                        line-height: calc((100vw / var(--vw-small))*35);
                        /* 218.75% */
                        letter-spacing: calc((100vw / var(--vw-small))*0.64);
                    }
                }
            }
        }
    }

    .view_btn {
        margin: 0 auto 0 0;

        @media screen and (max-width: 768px) {
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
    }

    .deco_text {
        position: absolute;
        color: #333;
        text-align: center;
        font-style: italic;
        font-size: calc((100vw / var(--vw-large))*147);
        font-style: italic;
        font-weight: 500;
        line-height: 140%;
        /* 205.8px */
        opacity: 0.1;
        mix-blend-mode: multiply;
        right: 0;
        bottom: calc((100vw / var(--vw-large))*60);
        z-index: 0;

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*80);
            bottom: calc((100vw / var(--vw-small))*70);
        }
    }

    .deco_img {
        position: absolute;
        width: calc((100vw / var(--vw-large))*200);
        right: calc((100vw / var(--vw-large))*48);

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*103);
            top: calc((100vw / var(--vw-small))*128);
            right: calc((100vw / var(--vw-small))*13);
        }
    }
}

/* SERVICE */
.service {
    position: relative;
    padding: calc((100vw / var(--vw-large))*96) 0 calc((100vw / var(--vw-large))*150);

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

    .service_bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .tit_wrap {
        width: calc((100vw / var(--vw-large))*1106);
        margin: 0 auto calc((100vw / var(--vw-large))*80);
        position: relative;
        align-items: flex-start;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            width: calc((100vw / var(--vw-small))*350);
            margin: 0 auto calc((100vw / var(--vw-small))*30);
        }

        h2 {
            position: relative;
            font-style: normal;
            font-weight: 500;
            /* line-height: calc((100vw / var(--vw-large))*17.85); */
            /* 63.75% */
            letter-spacing: calc((100vw / var(--vw-large))*6.68);
            z-index: 1;

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*28);
                line-height: 63.75%;
                letter-spacing: calc((100vw / var(--vw-small))*6.68);
                margin-bottom: calc((100vw / var(--vw-small))*42);
            }

            span {
                position: absolute;
                color: #333;
                text-align: center;
                font-size: calc((100vw / var(--vw-large))*147);
                font-style: normal;
                font-weight: 500;
                line-height: 140%;
                /* 205.8px */
                letter-spacing: calc((100vw / var(--vw-large))*0.993);
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);
                -webkit- transform: translateY(-50%) translateX(-50%);
                opacity: 0.1;
                mix-blend-mode: multiply;
                z-index: 0;

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*80);
                    line-height: 140%;
                    /* 112px */
                    letter-spacing: calc((100vw / var(--vw-small))*0.99);
                }
            }
        }

        p {
            font-size: calc((100vw / var(--vw-large))*18);
            line-height: calc((100vw / var(--vw-large))*51.73);
            /* 287.389% */
            width: calc((100vw / var(--vw-large))*748);
            text-align: left;
            margin-top: calc((100vw / var(--vw-large))*-10);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*18);
                font-style: normal;
                font-weight: 500;
                line-height: 205.556%;
                width: calc((100vw / var(--vw-small))*350);

            }
        }
    }

    .service_img {
        position: relative;
        z-index: 1;
        width: calc((100vw / var(--vw-large))*910);
        margin: 0 auto calc((100vw / var(--vw-large))*52);

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

    .description {
        width: calc((100vw / var(--vw-large))*858);
        margin: 0 auto;
        line-height: calc((100vw / var(--vw-large))*35);
        /* 250% */
        letter-spacing: calc((100vw / var(--vw-large))*1.59);

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*310);
            font-size: 14px;
            line-height: 250%;
            letter-spacing: calc((100vw / var(--vw-small))*1.59)
        }
    }

    .service_ul {
        width: calc((100vw / var(--vw-large))*833);
        margin: calc((100vw / var(--vw-large))*60) auto calc((100vw / var(--vw-large))*60);
        align-items: flex-start;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            width: calc((100vw / var(--vw-small))*294);
            margin: calc((100vw / var(--vw-small))*20) auto calc((100vw / var(--vw-small))*80);
            gap: calc((100vw / var(--vw-small))*20);
        }

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

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

            img {
                margin-bottom: calc((100vw / var(--vw-large))*10);

                @media screen and (max-width: 768px) {
                    margin-bottom: calc((100vw / var(--vw-small))*10);
                }
            }

            span {
                font-size: calc((100vw / var(--vw-large))*18);
                color: #524D38;
                font-weight: 400;
                line-height: calc((100vw / var(--vw-large))*32.8);
                /* 182.222% */

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*18);
                    line-height: 182.222%;
                }
            }
        }
    }

    .service-slider-container {
        position: relative;
        margin-inline: auto;

        /* ページネーション */
        .swiper-pagination-bullets.swiper-pagination-horizontal {
            bottom: calc((100vw / var(--vw-large))*-60);

            @media screen and (max-width: 768px) {
                bottom: calc((100vw / var(--vw-small))*-40);
            }
        }

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

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

        /* ページネーションのサイズと色 */
        .swiper-pagination-bullet {
            background-color: #524D38;
            height: calc((100vw / var(--vw-large))*10);
            width: calc((100vw / var(--vw-large))*10);
            opacity: 1;

            @media screen and (max-width: 768px) {
                height: calc((100vw / var(--vw-small))*10);
                width: calc((100vw / var(--vw-small))*10);
            }
        }

        .swiper-pagination-bullet-active {
            background-color: #fff;
            outline: #524D38 1px solid;
        }
    }

    .view_btn {
        margin-top: calc((100vw / var(--vw-large))*110);

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

/* CASE_STUDY */
.case_study {
    background: linear-gradient(180deg, #F9F9F9 0%, rgba(249, 249, 249, 0.70) 100%);
    padding: calc((100vw / var(--vw-large))*120) 0 calc((100vw / var(--vw-large))*100);
    position: relative;
    margin-bottom: calc((100vw / var(--vw-large))*80);

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

    .case_bg {
        position: absolute;
        width: calc((100vw / var(--vw-large))*625);
        top: 0;
        right: 0;
        z-index: 0;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*184);
        }
    }

    .inner {
        width: calc((100vw / var(--vw-large))*994);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*328);
        }

        .tit_wrap {
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*80);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*20);
            }

            h2 {
                font-style: italic;
                line-height: 140%;
                /* 39.2px */
                letter-spacing: calc((100vw / var(--vw-large))*6.61);
                text-align: left;
                margin-bottom: calc((100vw / var(--vw-large))*20);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*26);
                    letter-spacing: calc((100vw / var(--vw-small))*3.61);
                    margin-bottom: calc((100vw / var(--vw-small))*10);
                }
            }

            p {
                font-size: calc((100vw / var(--vw-large))*16);
                letter-spacing: calc((100vw / var(--vw-large))*4);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*16);
                    line-height: 200%;
                    letter-spacing: calc((100vw / var(--vw-small))*4);
                }
            }
        }

        .case-slider-container {
            position: relative;

            ul {
                li {
                    background-color: #fff;
                    padding: calc((100vw / var(--vw-large))*70) 0;
                    width: 100%;

                    .inner {
                        width: calc((100vw / var(--vw-large))*914);

                        @media screen and (max-width: 768px) {
                            width: calc((100vw / var(--vw-small))*288);
                        }

                        .top {
                            align-items: flex-start;
                            margin-bottom: calc((100vw / var(--vw-large))*20);

                            @media screen and (max-width: 768px) {
                                flex-direction: column;
                                margin-bottom: calc((100vw / var(--vw-small))*40);
                            }

                            .thum_contents {
                                width: calc((100vw / var(--vw-large))*366);
                                position: relative;
                                margin-bottom: calc((100vw / var(--vw-small))*38);

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

                                img {
                                    width: 100%;
                                    height: calc((100vw / var(--vw-large))*320);
                                    object-fit: cover;

                                    @media screen and (max-width: 768px) {
                                        height: calc((100vw / var(--vw-small))*272);
                                    }
                                }

                                .thum_des {
                                    position: absolute;
                                    width: 100%;
                                    bottom: 0;
                                    background: #4B9F9F;

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

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

                                        @media screen and (max-width: 768px) {
                                            font-size: calc((100vw / var(--vw-small))*14);
                                        }
                                    }

                                    .nickname-wrap {
                                        width: calc((100vw / var(--vw-large))*340);
                                        margin: 0 auto;
                                        justify-content: flex-start;

                                        @media screen and (max-width: 768px) {
                                            width: calc((100vw / var(--vw-small))*280);
                                        }

                                        .name_wrap {
                                            margin-right: calc((100vw / var(--vw-large))*20);

                                            @media screen and (max-width: 768px) {
                                                margin-right: calc((100vw / var(--vw-small))*10);
                                            }
                                        }
                                    }
                                }
                            }

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

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

                                h3 {
                                    font-size: calc((100vw / var(--vw-large))*20);
                                    line-height: calc((100vw / var(--vw-large))*24);
                                    /* 120% */
                                    letter-spacing: calc((100vw / var(--vw-large))*0.8);
                                    margin-bottom: calc((100vw / var(--vw-large))*20);

                                    @media screen and (max-width: 768px) {
                                        font-size: calc((100vw / var(--vw-small))*20);
                                        line-height: 120%;
                                        letter-spacing: calc((100vw / var(--vw-small))*0.8);
                                        margin-bottom: calc((100vw / var(--vw-small))*20);
                                    }
                                }

                                p {
                                    line-height: calc((100vw / var(--vw-large))*35);
                                    /* 250% */
                                    letter-spacing: calc((100vw / var(--vw-large))*1.6);

                                    @media screen and (max-width: 768px) {
                                        line-height: 250%;
                                        letter-spacing: calc((100vw / var(--vw-small))*1.6);
                                    }
                                }
                            }
                        }

                        .bottom {
                            @media screen and (max-width: 768px) {
                                flex-direction: column-reverse;
                            }

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

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

                                h3 {
                                    font-size: calc((100vw / var(--vw-large))*20);
                                    line-height: calc((100vw / var(--vw-large))*24);
                                    /* 120% */
                                    letter-spacing: calc((100vw / var(--vw-large))*0.8);
                                    margin-bottom: calc((100vw / var(--vw-large))*20);

                                    @media screen and (max-width: 768px) {
                                        font-size: calc((100vw / var(--vw-small))*20);
                                        line-height: 120%;
                                        letter-spacing: calc((100vw / var(--vw-small))*0.4);
                                    }
                                }

                                p {
                                    line-height: calc((100vw / var(--vw-large))*35);
                                    /* 250% */
                                    letter-spacing: calc((100vw / var(--vw-large))*1.6);

                                    @media screen and (max-width: 768px) {
                                        line-height: 250%;
                                        letter-spacing: calc((100vw / var(--vw-small))*1.6);
                                    }
                                }
                            }

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

                                @media screen and (max-width: 768px) {
                                    width: 100%;
                                    margin-bottom: calc((100vw / var(--vw-small))*30);
                                }

                                img {
                                    height: calc((100vw / var(--vw-large))*262);
                                    object-fit: cover;

                                    @media screen and (max-width: 768px) {
                                        height: calc((100vw / var(--vw-small))*199);
                                    }
                                }
                            }
                        }
                    }


                }
            }

            /* プログレスバーの位置を下に移動 */
            .swiper-horizontal>.swiper-pagination-progressbar,
            .swiper-pagination-progressbar.swiper-pagination-horizontal {
                bottom: calc((100vw / var(--vw-large))*-80);
                top: auto;
                right: calc((100vw / var(--vw-large))*258);
                left: initial;
                height: calc((100vw / var(--vw-large))*2);
                width: calc((100vw / var(--vw-large))*500);
                border-radius: calc((100vw / var(--vw-large))*5);
                -webkit-border-radius: calc((100vw / var(--vw-large))*5);
                -moz-border-radius: calc((100vw / var(--vw-large))*5);
                -ms-border-radius: calc((100vw / var(--vw-large))*5);
                -o-border-radius: calc((100vw / var(--vw-large))*5);

                @media screen and (max-width: 768px) {
                    display: none;
                    /* bottom: calc((100vw / var(--vw-small))*-40);
                    height: calc((100vw / var(--vw-small))*2);
                    width: 100%;
                    right: initial; */
                }
            }

            /* プログレスバーの背景色変更 */
            .swiper-pagination-progressbar {
                background-color: #4B9F9F;
            }

            /* プログレスバーの色変更 */
            .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
                height: calc((100vw / var(--vw-large))*5);
                background-color: #4B9F9F;
                right: 0;
                border-radius: calc((100vw / var(--vw-large))*5);

                @media screen and (max-width: 768px) {
                    height: calc((100vw / var(--vw-small))*4);
                }
            }

            /* 前へ次への矢印カスタマイズ */
            .swiper-button-prev,
            .swiper-button-next {
                height: calc((100vw / var(--vw-large))*50);
                width: calc((100vw / var(--vw-large))*50);

                @media screen and (max-width: 768px) {
                    height: calc((100vw / var(--vw-small))*40);
                    width: calc((100vw / var(--vw-small))*40);
                }
            }

            .swiper-button-next {
                @media screen and (max-width: 768px) {
                    right: calc((100vw / var(--vw-small))*-18);
                }
            }

            .swiper-button-prev {
                @media screen and (max-width: 768px) {
                    left: calc((100vw / var(--vw-small))*-18);
                }
            }

            /* 前へ次への矢印カスタマイズ */
            .swiper-button-prev::after,
            .swiper-button-next::after {
                background-repeat: no-repeat;
                background-size: contain;
                content: "";
                height: calc((100vw / var(--vw-large))*50);
                margin: auto;
                width: calc((100vw / var(--vw-large))*50);

                @media screen and (max-width: 768px) {
                    height: calc((100vw / var(--vw-small))*40);
                    width: calc((100vw / var(--vw-small))*40);
                }
            }

            /* 前への矢印カスタマイズ */
            .swiper-button-prev::after {
                background-image: url(../img/top/button-prev.svg);
                position: absolute;
            }

            /* 次への矢印カスタマイズ */
            .swiper-button-next::after {
                background-image: url(../img/top/button-next.svg);
            }

            /* 画像サイズ調整 */
            .swiper-slide img {
                height: auto;
                width: 100%;
            }

            .btn {
                position: absolute;
                bottom: calc((100vw / var(--vw-large))*-80);
                width: calc((100vw / var(--vw-large))*200);

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

    .view_btn {
        margin: calc((100vw / var(--vw-large))*60) calc((100vw / var(--vw-large))*180) 0 auto;
        background-color: #4B9F9F;

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


/* 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))*50) 0 calc((100vw / var(--vw-large))*100);

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

    .inner {
        width: calc((100vw / var(--vw-large))*1158);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*326);
        }

        .tit_wrap {
            text-align: left;
            margin: calc((100vw / var(--vw-large))*-80) auto calc((100vw / var(--vw-large))*73);

            @media screen and (max-width: 768px) {
                margin: calc((100vw / var(--vw-small))*-190) auto calc((100vw / var(--vw-small))*40);
            }

            h2 {
                text-align: left;
                font-size: calc((100vw / var(--vw-large))*40);
                font-style: italic;
                line-height: 140%;
                /* 56px */
                letter-spacing: calc((100vw / var(--vw-large))*0.993);

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*28);
                    letter-spacing: calc((100vw / var(--vw-small))*0.993);
                }
            }

            p {
                font-size: calc((100vw / var(--vw-large))*16);
                font-weight: 400;
                line-height: 140%;
                /* 22.4px */
                letter-spacing: calc((100vw / var(--vw-large))*4);
                margin-top: calc((100vw / var(--vw-large))*34);

                @media screen and (max-width: 768px) {
                    color: var(--brown, #524D38);
                    font-size: calc((100vw / var(--vw-small))*16);
                    letter-spacing: calc((100vw / var(--vw-small))*4);
                    margin-top: calc((100vw / var(--vw-small))*20);
                }
            }
        }

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

            @media screen and (max-width: 768px) {
                flex-direction: column;
                width: 100%;
                gap: calc((100vw / var(--vw-small))*55);
            }

            li {
                width: calc((100vw / var(--vw-large))*500);
                background-color: #fff;
                padding: calc((100vw / var(--vw-large))*36) 0;
                position: relative;

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

                .inner {
                    width: calc((100vw / var(--vw-large))*432);
                    margin: 0 auto;

                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*290);
                    }

                    img {
                        width: calc((100vw / var(--vw-large))*280);
                        margin: 0 auto calc((100vw / var(--vw-large))*11) 0;
                        display: block;

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

                    p {
                        text-align: left;
                        line-height: calc((100vw / var(--vw-large))*35);
                        /* 250% */
                        letter-spacing: calc((100vw / var(--vw-large))*1.6);

                        @media screen and (max-width: 768px) {
                            line-height: calc((100vw / var(--vw-small))*35);
                            letter-spacing: calc((100vw / var(--vw-small))*1.6);
                        }
                    }

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

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

                        span {
                            width: initial;
                        }

                        img {
                            width: calc((100vw / var(--vw-large))*19);
                            height: calc((100vw / var(--vw-large))*19);
                            margin: 0 0 0 calc((100vw / var(--vw-large))*10);

                            @media screen and (max-width: 768px) {
                                width: calc((100vw / var(--vw-small))*19);
                                height: calc((100vw / var(--vw-small))*19);
                                margin: 0 0 0 calc((100vw / var(--vw-small))*10);
                            }
                        }
                    }
                }

                .cormorant {
                    color: #333;
                    text-align: left;
                    font-family: Cormorant;
                    font-size: calc((100vw / var(--vw-large)) * 62.81);
                    font-style: italic;
                    font-weight: 500;
                    line-height: 140%;
                    mix-blend-mode: overlay;
                    bottom: calc((100vw / var(--vw-large))*-66);
                    position: absolute;
                    width: 100%;
                    left: 0;

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*40);
                        bottom: calc((100vw / var(--vw-small))*-42);
                    }
                }
            }
        }
    }

}

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

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

    .inner {
        width: calc((100vw / var(--vw-large))*910);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*340);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*28);
            font-weight: 500;
            line-height: calc((100vw / var(--vw-large))*48);
            /* 171.429% */
            letter-spacing: calc((100vw / var(--vw-large))*4);
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*33);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*20);
                line-height: 180%;
                letter-spacing: calc((100vw / var(--vw-small))*4);
                margin-bottom: calc((100vw / var(--vw-small))*20);
            }
        }

        p {
            text-align: left;
            font-weight: 400;
            line-height: calc((100vw / var(--vw-large))*35);
            /* 250% */
            letter-spacing: calc((100vw / var(--vw-large))*1.6);
            margin: calc((100vw / var(--vw-large))*50) auto calc((100vw / var(--vw-large))*70);

            @media screen and (max-width: 768px) {
                line-height: 250%;
                letter-spacing: calc((100vw / var(--vw-small))*1.6);
                margin: calc((100vw / var(--vw-small))*20) auto;
            }
        }
    }
}

/* IN_NUMBER */
.in_number {
    margin-bottom: calc((100vw / var(--vw-large))*100);

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

    .inner {
        width: calc((100vw / var(--vw-large))*912);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*360);
        }

        h2 {
            color: var(--light_gold, #9F946A);
            font-size: calc((100vw / var(--vw-large))*40);
            font-style: normal;
            font-weight: 500;
            line-height: 140%;
            /* 56px */
            letter-spacing: calc((100vw / var(--vw-large))*0.993);
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*25);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*24);
                letter-spacing: calc((100vw / var(--vw-small))*0.993);
                margin-bottom: calc((100vw / var(--vw-small))*25);
            }
        }
    }
}

/* VOICE */
.voice {
    margin-bottom: calc((100vw / var(--vw-large))*138);

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

    .inner {
        width: calc((100vw / var(--vw-large))*1140);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*360);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*34);
            line-height: 140%;
            /* 47.6px */
            letter-spacing: calc((100vw / var(--vw-large))*0.5);
            margin-bottom: calc((100vw / var(--vw-large))*36);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*24);
                letter-spacing: calc((100vw / var(--vw-small))*0.5);
                margin-bottom: calc((100vw / var(--vw-small))*30);
            }
        }

        img {
            width: calc((100vw / var(--vw-large))*596);
            margin: 0 auto calc((100vw / var(--vw-large))*45);

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

        .txt {
            margin-bottom: calc((100vw / var(--vw-large))*60);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }

            span {
                font-size: calc((100vw / var(--vw-large))*18);
                letter-spacing: calc((100vw / var(--vw-large))*1.8);
                font-weight: 500;
                margin-bottom: calc((100vw / var(--vw-large))*12);
                display: block;

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*18);
                    letter-spacing: calc((100vw / var(--vw-small))*1.8);
                    margin-bottom: calc((100vw / var(--vw-small))*13);
                    line-height: 1;
                }
            }

            p {
                font-size: calc((100vw / var(--vw-large))*26);
                line-height: 140%;
                /* 36.4px */
                letter-spacing: calc((100vw / var(--vw-large))*3.5);
                font-weight: 500;

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*20);
                    letter-spacing: calc((100vw / var(--vw-small))*3.5);

                }

                span {
                    font-size: calc((100vw / var(--vw-large))*26);
                    letter-spacing: calc((100vw / var(--vw-large))*3.5);
                    font-weight: 500;
                    display: inline-block;
                    margin: 0;

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*20);
                        letter-spacing: calc((100vw / var(--vw-small))*3.5);
                    }
                }
            }
        }

        ul {
            align-items: flex-start;

            @media screen and (max-width: 768px) {
                flex-direction: column;
                gap: calc((100vw / var(--vw-small))*20);
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }

            li {
                img {
                    width: calc((100vw / var(--vw-large))*360);
                    box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.25);

                    @media screen and (max-width: 768px) {
                        width: 100%;
                        margin-bottom: 0;
                    }
                }
            }
        }

        .view_btn {
            background-color: #4B9F9F;
        }
    }
}

/* CONSULTANT */
.consultant {
    padding-bottom: calc((100vw / var(--vw-large))*80);
    position: relative;

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

    .inner {
        padding-left: calc((100vw / var(--vw-large))*240);

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

        .tit {
            text-align: left;
            margin-bottom: calc((100vw / var(--vw-large))*50);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }

            h2 {
                font-size: calc((100vw / var(--vw-large))*30);
                font-style: italic;
                margin-bottom: calc((100vw / var(--vw-small))*8);
                text-align: left;

                @media screen and (max-width: 768px) {
                    font-size: calc((100vw / var(--vw-small))*30);
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                    line-height: 1;
                }
            }

            .br {
                background-color: #524D38;
                width: calc((100vw / var(--vw-large))*52);
                height: calc((100vw / var(--vw-large))*4.2);
                margin-bottom: calc((100vw / var(--vw-large))*16);

                @media screen and (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*26);
                    height: calc((100vw / var(--vw-small))*2);
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                }
            }
        }

        .consultant-slider-container {
            position: relative;
            margin-bottom: calc((100vw / var(--vw-large))*110);

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*70);
            }

            /* プログレスバーの位置を下に移動 */
            .swiper-horizontal>.swiper-pagination-progressbar,
            .swiper-pagination-progressbar.swiper-pagination-horizontal {
                bottom: calc((100vw / var(--vw-large))*-80);
                top: auto;
                right: 0;
                height: calc((100vw / var(--vw-large))*2);
                width: calc((100vw / var(--vw-large))*1001);
                border-radius: calc((100vw / var(--vw-large))*5);
                -webkit-border-radius: calc((100vw / var(--vw-large))*5);
                -moz-border-radius: calc((100vw / var(--vw-large))*5);
                -ms-border-radius: calc((100vw / var(--vw-large))*5);
                -o-border-radius: calc((100vw / var(--vw-large))*5);

                @media screen and (max-width: 768px) {
                    bottom: calc((100vw / var(--vw-small))*-30);
                    height: calc((100vw / var(--vw-small))*2);
                    width: 100%
                }
            }

            /* プログレスバーの背景色変更 */
            .swiper-pagination-progressbar {
                background-color: #524D38;
            }

            /* プログレスバーの色変更 */
            .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
                height: calc((100vw / var(--vw-large))*5);
                background-color: #524D38;
                border-radius: calc((100vw / var(--vw-large))*5);

                @media screen and (max-width: 768px) {
                    height: calc((100vw / var(--vw-small))*5);
                    border-radius: calc((100vw / var(--vw-small))*5);
                    -webkit-border-radius: calc((100vw / var(--vw-small))*5);
                    -moz-border-radius: calc((100vw / var(--vw-small))*5);
                    -ms-border-radius: calc((100vw / var(--vw-small))*5);
                    -o-border-radius: calc((100vw / var(--vw-small))*5);
                }

            }
        }
    }

    .view_btn {
        position: relative;
        z-index: 2;
    }

    .deco_bg {
        position: absolute;
        background-color: #F5F4F0;
        width: 100%;
        height: calc((100vw / var(--vw-large))*366);
        bottom: 0;

        @media screen and (max-width: 768px) {
            height: calc((100vw / var(--vw-small))*303);
            z-index: -2;
        }
    }

    .deco_text {
        position: absolute;
        color: var(--brown, #524D38);
        font-size: calc((100vw / var(--vw-large))*100);
        letter-spacing: calc((100vw / var(--vw-large))*4);
        opacity: 0.1;
        mix-blend-mode: multiply;
        text-align: left;
        bottom: 0;
        left: 0;
        line-height: 80%;

        @media screen and (max-width: 768px) {
            font-size: calc((100vw / var(--vw-small))*62);
            letter-spacing: calc((100vw / var(--vw-small))*2.48);
            z-index: -1;
        }
    }
}

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

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

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

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

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

            @media screen and (max-width: 768px) {
                margin-bottom: calc((100vw / var(--vw-small))*30);
            }
        }

        .campaign {
            width: calc((100vw / var(--vw-large))*850);
            margin: 0 auto;

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

        .price_inner {
            margin-bottom: calc((100vw / var(--vw-large))*80);

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

            .tit {
                position: relative;
                margin-bottom: calc((100vw / var(--vw-large))*60);

                @media screen and (max-width: 768px) {
                    margin-bottom: calc((100vw / var(--vw-small))*20);
                }

                h3 {
                    font-size: calc((100vw / var(--vw-large))*42);
                    font-weight: 500;
                    line-height: 130%;
                    /* 0 */
                    letter-spacing: calc((100vw / var(--vw-large))*1.5);

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*32);
                        letter-spacing: calc((100vw / var(--vw-small))*1.5);
                        line-height: 1;
                    }

                    span {
                        font-size: calc((100vw / var(--vw-large))*24);
                        font-weight: 400;
                        line-height: 0%;
                        /* 0 */
                        letter-spacing: calc((100vw / var(--vw-large))*1.5);

                        @media screen and (max-width: 768px) {
                            font-size: calc((100vw / var(--vw-small))*18);
                            letter-spacing: calc((100vw / var(--vw-small))*1.5);
                            display: block;
                            line-height: 1.5;
                        }
                    }
                }

                .deco_text {
                    position: absolute;
                    width: 100%;
                    font-size: calc((100vw / var(--vw-large))*90);
                    font-weight: 500;
                    line-height: normal;
                    letter-spacing: calc((100vw / var(--vw-large))*9.9);
                    opacity: 0.1;
                    mix-blend-mode: multiply;
                    top: 50%;
                    left: 50%;
                    transform: translateY(-50%) translateX(-50%);
                    -webkit- transform: translateY(-50%) translateX(-50%);

                    @media screen and (max-width: 768px) {
                        font-size: calc((100vw / var(--vw-small))*52);
                        line-height: 100%;
                        letter-spacing: calc((100vw / var(--vw-small))*5.72);
                    }
                }
            }

            ul {
                align-items: flex-end;
                margin-bottom: calc((100vw / var(--vw-large))*80);

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

                    @media screen and (max-width: 768px) {
                        width: initial;
                    }
                }
            }

            .price-slider-container {
                position: relative;
                margin-inline: auto;

                /* ページネーション */
                .swiper-pagination-bullets.swiper-pagination-horizontal {
                    bottom: calc((100vw / var(--vw-small))*-30);

                }

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

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

                }

                .swiper-pagination-bullet-active {
                    background-color: #fff;
                    outline: #4B9F9F 1px solid;
                }
            }
        }
    }
}


/* NEWS */
.news {
    position: relative;
    padding: 0 0 calc((100vw / var(--vw-large))*40);
    margin-bottom: calc((100vw / var(--vw-large))*150);

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

    .inner {
        position: relative;
        z-index: 1;
        width: calc((100vw / var(--vw-large))*1160);
        margin: 0 auto;

        @media screen and (max-width: 768px) {
            width: calc((100vw / var(--vw-small))*370);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*40);
            font-style: italic;
            text-align: left;
            line-height: 140%;
            /* 56px */
            letter-spacing: calc((100vw / var(--vw-large))*0.993);
            margin-bottom: calc((100vw / var(--vw-large))*60);

            @media screen and (max-width: 768px) {
                font-size: calc((100vw / var(--vw-small))*28);
                letter-spacing: calc((100vw / var(--vw-small))*0.993);
                margin-bottom: calc((100vw / var(--vw-small))*40);
            }
        }

        /*tabの形状*/
        .tab {
            flex-wrap: wrap;
            width: calc((100vw / var(--vw-large))*757);
            margin: 0 auto;

            @media screen and (max-width: 768px) {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: calc((100vw / var(--vw-small))*16) 0;
            }

            li {
                width: calc((100vw / var(--vw-large))*170);
                background-color: #F6F1EB;
                height: calc((100vw / var(--vw-large))*50);
                display: flex;
                align-items: center;
                position: relative;
                z-index: 1;

                @media screen and (max-width: 768px) {
                    width: calc((100vw / var(--vw-small))*180);
                    height: calc((100vw / var(--vw-small))*50);
                }

                &::after {
                    content: "";
                    width: calc((100vw / var(--vw-large))*18);
                    height: calc((100vw / var(--vw-large))*18);
                    background-color: #F6F1EB;
                    clip-path: polygon(50% calc((100vw / var(--vw-large))*18), 0% 0%, calc((100vw / var(--vw-large))*18) 0%);
                    position: absolute;
                    bottom: calc((100vw / var(--vw-large))*-15);
                    left: 50%;
                    z-index: 0;
                    transform: translateX(-50%);
                    -webkit-transform: translateX(-50%);
                    -moz-transform: translateX(-50%);
                    -ms-transform: translateX(-50%);
                    -o-transform: translateX(-50%);

                    @media screen and (max-width: 768px) {
                        width: calc((100vw / var(--vw-small))*18);
                        height: calc((100vw / var(--vw-small))*18);
                        clip-path: polygon(50% calc((100vw / var(--vw-small))*18), 0% 0%, calc((100vw / var(--vw-small))*18) 0%);
                        bottom: calc((100vw / var(--vw-small))*-10);
                    }
                }

                a {
                    width: 100%;
                    display: block;
                    color: #524D38;
                    text-decoration: none;
                }
            }

            /*liにactiveクラスがついた時の形状*/

            li.active {
                background-color: #524D38;

                &::after {
                    background-color: #524D38;
                }

                a {
                    color: #FCFCFD;
                }
            }
        }

        /* 初期は非表示だが要素自体の高さを確保しないパターン */
        .area {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity .35s ease, max-height .35s ease;
            /* パディングを無効にしている場合は調整 */

            ul {
                justify-content: center;

                @media screen and (max-width: 768px) {
                    justify-content: initial;
                }

                li {
                    width: calc((100vw / var(--vw-large))*274);
                    margin-right: calc((100vw / var(--vw-large))*20);

                    @media screen and (max-width: 768px) {
                        width: initial;
                    }

                    &:last-child {
                        margin-right: 0;
                    }

                    a {
                        color: #524D38;
                        text-decoration: none;

                        .post-thumb {
                            width: 100%;
                            height: calc((100vw / var(--vw-large))*170);
                            object-fit: cover;
                            display: block;

                            @media screen and (max-width: 768px) {
                                height: calc((100vw / var(--vw-small))*170);

                            }
                        }

                        .post-meta {
                            background-color: #fff;
                            padding: calc((100vw / var(--vw-large))*20) calc((100vw / var(--vw-large))*10);
                            text-align: left;

                            @media screen and (max-width: 768px) {
                                padding: calc((100vw / var(--vw-small))*20) calc((100vw / var(--vw-small))*10);
                            }

                            time {
                                font-size: calc((100vw / var(--vw-large))*12);
                                font-weight: 400;
                                line-height: normal;
                                margin-bottom: calc((100vw / var(--vw-large))*10);

                                @media screen and (max-width: 768px) {
                                    font-size: calc((100vw / var(--vw-small))*12);
                                    margin-bottom: calc((100vw / var(--vw-small))*10);
                                }
                            }

                            .post-title {
                                font-size: calc((100vw / var(--vw-large))*18);
                                font-weight: 500;
                                line-height: normal;
                                display: block;

                                @media screen and (max-width: 768px) {
                                    font-size: calc((100vw / var(--vw-small))*18);

                                }
                            }

                            .post-description {
                                font-weight: 400;
                                line-height: calc((100vw / var(--vw-large))*35);
                                /* 250% */

                                @media screen and (max-width: 768px) {
                                    line-height: calc((100vw / var(--vw-small))*35);

                                }
                            }
                        }
                    }
                }
            }

        }

        /* is-active で即表示 → トランジションでフェードイン */
        .area.is-active {
            opacity: 1;
            max-height: 1000px;
            /* 十分に大きな値（実コンテンツの高さより大きく） */
            padding: calc((100vw / var(--vw-large))*70) 0 calc((100vw / var(--vw-large))*60);
            /* 元のパディングを戻す */

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

    @media screen and (max-width: 768px) {
        .inner.sp {
            .swiper-container {
                position: relative;

                .swiper-slide {
                    a {
                        color: #524D38;
                        text-decoration: none;

                        .post-thumb {
                            width: 100%;
                            height: calc((100vw / var(--vw-small))*170);
                            object-fit: cover;
                            display: block;
                        }

                        .post-meta {
                            background-color: #fff;
                            padding: calc((100vw / var(--vw-small))*20) calc((100vw / var(--vw-small))*10);
                            text-align: left;

                            time {
                                font-size: calc((100vw / var(--vw-small))*12);
                                font-weight: 400;
                                line-height: normal;
                                margin-bottom: calc((100vw / var(--vw-small))*10);
                            }

                            .post-title {
                                font-size: calc((100vw / var(--vw-small))*18);
                                font-weight: 500;
                                line-height: normal;
                                display: block;
                            }

                            .post-description {
                                font-weight: 400;
                                line-height: calc((100vw / var(--vw-small))*35);
                                /* 250% */
                            }
                        }
                    }
                }

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

                .swiper-pagination {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: calc((100vw / var(--vw-small))*20);
                    text-align: center;
                    z-index: 20;
                }

                .swiper-pagination-bullet {
                    background-color: #524D38;
                    height: calc((100vw / var(--vw-small))*10);
                    width: calc((100vw / var(--vw-small))*10);
                    opacity: 1;
                }

                .swiper-pagination-bullet-active {
                    background-color: #fff;
                    outline: #524D38 1px solid;
                }

            }
        }
    }

    .deco_bg {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 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;
        }
    }

    .top-slide_wrap {
        overflow-x: hidden;
    }

    .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: #212121;
    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,
    img {
        margin: 0 auto calc((100vw / var(--vw-large))*24);
        width: calc((100vw / var(--vw-large))*878);
        text-align: center;
        display: block;
    }

    .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: #212121;

        &::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);
            }
        }
    }
}