@charset "utf-8";
:root {
    --header-height: 0px;
    --ja-font: "DM Sans", "Zen Kaku Gothic New", sans-serif;
    --en-font: "DM Sans", sans-serif;
    --black-color: #4e4a47;
    --blue-color: #6eb0c9;
    --error-color: #F21717;
    --text-font: clamp(0.875rem, 0.643rem + 0.95vw, 1rem);
}

html,
body {
    font-family: var(--ja-font);
    scroll-behavior: smooth;
    font-size: var(--text-font);
    font-weight: 400;
    background-color: #F6F6F6;
}

.en {
    font-family: var(--en-font);
    font-weight: 400;
}

a {
    transition: all 0.3s ease;
}

@media screen and (min-width: 900px) {
    a:hover {
        opacity: 0.7;
    }
}

.pc-only {
    display: block !important;
}

.sp-only {
    display: none !important;
}

.pc-only-flex {
    display: flex !important;
}

.sp-only-flex {
    display: none !important;
}

@media screen and (max-width: 900px) {
    .pc-only {
        display: none !important;
    }
    .sp-only {
        display: block !important;
    }
    .pc-only-flex {
        display: none !important;
    }
    .sp-only-flex {
        display: flex !important;
    }
}

.l-wrapper {
    padding-left: 40px;
    padding-right: 40px;
}

@media screen and (max-width: 900px) {
    .l-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

body {
    color: #fff;
    background-color: var(--blue-color);
    font-kerning: normal;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
    letter-spacing: normal;
}

body {
    width: 100%;
    height: 100vh;
}

.scroll-stop {
    overflow: scroll;
    &.active {
        overflow: hidden;
    }
}

.pc-header {
    z-index: 9;
    position: fixed;
    width: 100%;
    height: auto;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    .close-btn {
        display: none;
    }
    .pc-header-inner {
        max-width: 1200px;
        width: 100%;
        height: auto;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 65px;
        justify-content: start;
        align-items: start;
    }
    .pc-logo {
        width: 205px;
        height: auto;
        object-fit: contain;
    }
    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 80px;
        .header-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 22px;
            .header-link {
                position: relative;
                font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                font-weight: 500;
                line-height: 1;
                display: inline-block;
                padding-bottom: 6px;
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 0;
                    height: 1px;
                    background-color: #fff;
                    transition: all .3s ease;
                }
                &.active::before,
                &.visited::before {
                    width: 100%;
                }
            }
        }
        .pc-cta-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            .cta-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 40px;
                position: relative;
                padding: 16px 20px 16px 28px;
                color: var(--black-color);
                font-size: 16px;
                font-weight: 500;
                background-color: #fff;
                border-radius: 5rem;
                &::after {
                    content: '';
                    display: block;
                    width: 8px;
                    height: 8px;
                    background-color: var(--black-color);
                    border-radius: 5rem;
                }
            }
            .tel-btn {
                font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                line-height: 1;
                font-weight: 500;
            }
        }
    }
}

@media screen and (max-width: 1180px) {
    .pc-header {
        z-index: 999;
        background-color: var(--blue-color);
        background: url("../img/mv-pc.webp") no-repeat 75% / cover;
        left: 50%;
        width: 100%;
        height: 100vh;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: all .3s ease;
        overflow: scroll;
        padding: 60px 20px;
        &.active {
            opacity: 1;
            pointer-events: all;
        }
        .close-btn {
            cursor: pointer;
            display: block;
            position: absolute;
            top: 0;
            right: 20px;
            padding: 3px 10px 2px 10px;
            font-size: 16px;
            line-height: 1;
            font-weight: 700;
            height: 100dvh;
            padding-top: 90px;
        }
        .pc-header-inner {
            z-index: 3;
            max-width: 600px;
            justify-content: center;
            align-items: center;
            gap: 40px;
        }
        .pc-logo {
            width: 150px;
        }
        nav {
            gap: 30px;
            .header-list {
                gap: 25px;
            }
            .pc-cta-area {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                .cta-btn {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 40px;
                    position: relative;
                    padding: 16px 20px 16px 28px;
                    color: var(--black-color);
                    font-size: 16px;
                    font-weight: 500;
                    background-color: #fff;
                    border-radius: 5rem;
                    &::after {
                        content: '';
                        display: block;
                        width: 8px;
                        height: 8px;
                        background-color: var(--black-color);
                        border-radius: 5rem;
                    }
                }
                .tel-btn {
                    font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                    line-height: 1;
                    font-weight: 500;
                }
            }
        }
    }
}

.pc-mv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--blue-color);
    background: url("../img/mv-pc.webp") no-repeat right / cover;
}

.pc-footer {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    .copywrite {
        position: absolute;
        bottom: 40px;
        right: 40px;
        font-size: 14px;
        font-weight: 300;
    }
}

@media screen and (max-width: 1180px) {
    .pc-footer {
        display: none;
    }
}

.sp-area {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    height: auto;
    padding-top: 78px;
    .sp-container {
        position: relative;
        border-radius: 31px 31px 0 0;
        width: 100%;
        height: auto;
        background-color: #fff;
    }
}

@media screen and (max-width: 1180px) {
    .sp-area {
        padding-top: 40px;
    }
}

@media screen and (max-width: 900px) {
    .sp-area {
        position: absolute;
        top: 0;
        right: 0;
        max-width: none;
        width: 100%;
        height: auto;
        padding-top: 0;
        .sp-container {
            max-width: 600px;
            margin: auto;
            border-radius: 0;
            box-shadow: none;
        }
    }
}

.sp-header {
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
    padding: 50px 40px;
    width: 100%;
    height: auto;
    color: #fff;
    .sh-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .header-top {
            width: 186px;
            height: auto;
        }
        .menu-btn {
            display: none;
            position: relative;
            width: 55px;
            height: 12px;
            /* border: 1px solid black; */
            span {
                position: absolute;
                right: 0;
                height: 1px;
                background-color: var(--black-color);
                &:nth-of-type(1) {
                    top: 0;
                    width: 100%;
                }
                &:nth-of-type(2) {
                    bottom: 0;
                    width: 70%;
                }
            }
        }
    }
    .sp-menu {
        display: none;
    }
}

@media screen and (max-width: 1180px) {
    .sp-header {
        .sh-inner {
            .menu-btn {
                display: block;
                cursor: pointer;
                span {
                    transition: all .3s ease;
                    &:nth-of-type(1) {
                        top: 0;
                        width: 100%;
                    }
                    &:nth-of-type(2) {
                        bottom: 0;
                        width: 70%;
                    }
                }
            }
        }
        .sp-menu {
            display: none;
            position: fixed;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--blue-color);
            .sp-header-inner {
                max-width: 1200px;
                width: 100%;
                height: auto;
                margin: auto;
                display: flex;
                flex-direction: column;
                gap: 65px;
                justify-content: center;
                align-items: center;
            }
            .sp-logo {
                width: 205px;
                height: auto;
                object-fit: contain;
            }
            nav {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 80px;
                .header-sp-menu {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 22px;
                    .header-link {
                        position: relative;
                        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                        font-weight: 500;
                        line-height: 1;
                        display: inline-block;
                        padding-bottom: 6px;
                        &::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0;
                            height: 1px;
                            background-color: #fff;
                            transition: all .3s ease;
                        }
                        &.active::before {
                            width: 100%;
                        }
                    }
                }
                .sp-cta-area {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;
                    .cta-btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 40px;
                        position: relative;
                        padding: 16px 20px 16px 28px;
                        color: var(--black-color);
                        font-size: 16px;
                        font-weight: 500;
                        background-color: #fff;
                        border-radius: 5rem;
                        &::after {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            background-color: var(--black-color);
                            border-radius: 5rem;
                        }
                    }
                    .tel-btn {
                        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                        line-height: 1;
                        font-weight: 500;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 900px) {
    .sp-header {
        padding: 30px 20px;
    }
}

.mv-wrapper {
    margin-top: calc(-1 * (var(--header-height)));
    width: 100%;
    height: auto;
    background: url("../img/mv-sp.webp") no-repeat top / cover;
    border-radius: 31px 31px 0 0;
    overflow: hidden;
    .sp-mv {
        width: 100%;
        height: calc(100vh - 78px);
        .content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: end;
            justify-content: center;
            padding-bottom: 40px;
        }
    }
    .mv-lead {
        padding-top: 30px;
        padding-bottom: 100px;
        width: 100%;
        height: auto;
        .heading {
            text-align: center;
            font-size: clamp(1.375rem, 1.027rem + 1.43vw, 1.563rem);
            font-weight: 400;
            line-height: 2.9;
            color: var(--black-color);
        }
    }
}

@media screen and (max-width: 1180px) {
    .mv-wrapper {
        .sp-mv {
            height: calc(100vh - 40px);
        }
    }
}

@media screen and (max-width: 900px) {
    .mv-wrapper {
        border-radius: 0;
        .sp-mv {
            height: 100vh;
        }
    }
}

.concept {
    width: 100%;
    height: auto;
    background: url("../img/lead-back.webp") no-repeat top / cover;
    padding-top: 400px;
    padding-bottom: 105px;
    text-align: center;
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .desc {
        margin-top: 64px;
        font-size: clamp(1.125rem, 0.304rem + 2.86vw, 1.375rem);
        line-height: 2.1;
    }
    .concept-img {
        margin-top: 80px;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media screen and (max-width: 420px) {
    .concept {
        padding-top: 300px;
        padding-bottom: 60px;
        .heading {
            font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
            font-weight: 500;
            line-height: 1;
        }
        .desc {
            margin-top: 50px;
            font-size: clamp(1.125rem, 0.304rem + 2.86vw, 1.375rem);
            line-height: 2.1;
        }
        .concept-img {
            margin-top: 50px;
        }
    }
}

.menu {
    padding-top: 95px;
    padding-bottom: 95px;
    background-color: #fff;
    color: var(--black-color);
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .menu-wrapper {
        margin-top: 73px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 100px;
        .menu-content {
            width: 100%;
            height: auto;
            .menu-name {
                font-size: clamp(1.5rem, 0.92rem + 2.38vw, 1.813rem);
                font-weight: 500;
                line-height: 1;
            }
            .menu-img-area {
                margin-top: 30px;
                width: 100%;
                height: auto;
                .pilates-splide,
                .yoga-splide {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1 / 1;
                    overflow: hidden;
                    .splide__track,
                    .splide__list,
                    .splide__slide {
                        width: 100%;
                        height: 100%;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .pilates-splide-list,
                .yoga-splide-list {
                    margin-top: 10px;
                    width: 100%;
                    height: auto;
                    .splide__list {
                        width: 100%;
                        height: auto;
                    }
                    .splide__slide {
                        aspect-ratio: 1 / 1;
                        height: fit-content !important;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            cursor: pointer;
                        }
                    }
                }
            }
            .desc {
                margin-top: 25px;
                font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
                font-weight: 300;
                line-height: 1.6;
            }
            .detail-list {
                margin-top: 35px;
                width: 100%;
                height: auto;
                padding: 24px 30px;
                background-color: rgba(225, 226, 222, .35);
                .detail-item {
                    width: 100%;
                    height: auto;
                    padding: 20px 0;
                    border-bottom: 1px dashed var(--black-color);
                    display: flex;
                    align-items: start;
                    font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
                    line-height: 1.6;
                    &:nth-last-of-type(1) {
                        border-bottom: 0px;
                    }
                    dt {
                        width: 30%;
                        font-weight: 900;
                    }
                    dd {
                        width: 70%;
                        font-weight: 300;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 420px) {
    .menu {
        padding-top: 60px;
        padding-bottom: 60px;
        .menu-wrapper {
            margin-top: 40px;
            gap: 60px;
            .menu-content {
                .detail-list {
                    margin-top: 25px;
                    padding: 10px 20px;
                    .detail-item {
                        font-size: clamp(0.875rem, 0.411rem + 1.9vw, 1.125rem);
                    }
                }
            }
        }
    }
}

.price {
    padding-top: 95px;
    padding-bottom: 95px;
    width: 100%;
    height: auto;
    background-color: rgba(225, 226, 222, .3);
    color: var(--black-color);
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .desc {
        margin-top: 58px;
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        line-height: 2.1;
    }
    .price-box {
        margin-top: 54px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        .name {
            font-size: clamp(1.5rem, 0.92rem + 2.38vw, 1.813rem);
            font-weight: 600;
            line-height: 1;
        }
        .price-content {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            gap: 95px;
        }
        .price-list {
            width: 100%;
            height: auto;
            margin-top: 35px;
            display: flex;
            flex-direction: column;
            gap: 35px;
            .price-item {
                width: 100%;
                height: auto;
                .label {
                    font-size: clamp(1.25rem, 1.018rem + 0.95vw, 1.375rem);
                    font-weight: 300;
                    line-height: 1;
                }
                .detail {
                    margin-top: 10px;
                    width: 100%;
                    height: auto;
                    background-color: rgba(225, 226, 222, .35);
                    .detail-item {
                        width: 100%;
                        height: auto;
                        padding: 20px 30px;
                        border-bottom: 1px dashed var(--black-color);
                        display: flex;
                        align-items: start;
                        font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
                        line-height: 1.6;
                        &:nth-last-of-type(1) {
                            border-bottom: 0px;
                        }
                        dt {
                            width: 30%;
                            font-weight: 700;
                        }
                        dd {
                            width: 70%;
                            font-weight: 300;
                        }
                    }
                }
            }
        }
        &.yoga {
            .price-list {
                .detail-item {
                    margin-top: 10px;
                    background-color: rgba(225, 226, 222, .35);
                    width: 100%;
                    height: auto;
                    padding: 20px 30px;
                    display: flex;
                    align-items: start;
                    font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
                    line-height: 1.6;
                }
            }
        }
    }
}

@media screen and (max-width: 420px) {
    .price {
        padding-top: 60px;
        padding-bottom: 60px;
        .desc {
            margin-top: 40px;
        }
        .price-box {
            margin-top: 30px;
            .price-list {
                margin-top: 30px;
                gap: 30px;
                .price-item {
                    .detail {
                        .detail-item {
                            padding: 10px 20px;
                            dt {
                                width: 40%;
                            }
                            dd {
                                width: 60%;
                            }
                        }
                    }
                }
            }
            &.yoga {
                .price-list {
                    .detail-item {
                        padding: 10px 20px;
                    }
                }
            }
        }
    }
}

.voice {
    padding-top: 95px;
    padding-bottom: 95px;
    width: 100%;
    height: auto;
    color: var(--black-color);
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .desc {
        margin-top: 58px;
        font-size: clamp(1.25rem, 1.018rem + 0.95vw, 1.375rem);
        line-height: 2.1;
    }
    .voice-list {
        margin-top: 45px;
        width: 100%;
        height: auto;
        .voice-item {
            padding: 33px 45px;
            font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
            font-weight: 300;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            gap: 25px;
            &:nth-last-of-type(2n) {
                background-color: rgba(225, 226, 222, .35);
            }
        }
    }
}

@media screen and (max-width: 420px) {
    .voice {
        padding-top: 60px;
        padding-bottom: 60px;
        .voice-list {
            margin-top: 25px;
            .voice-item {
                padding: 25px 20px;
                gap: 18px;
            }
        }
    }
}

.instructor {
    padding-top: 95px;
    padding-bottom: 10px;
    width: 100%;
    height: auto;
    background-color: var(--blue-color);
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .instructor-img {
        margin-top: 60px;
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .name {
        margin-top: 34px;
        font-size: clamp(1.5rem, 0.92rem + 2.38vw, 1.813rem);
        font-weight: 600;
        line-height: 1;
    }
    .label {
        display: block;
        margin-top: 28px;
        font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
        line-height: 1;
        font-weight: 300;
    }
    .desc {
        margin-top: 31px;
        font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
        line-height: 1.6;
    }
}

@media screen and (max-width: 420px) {
    .instructor {
        padding-top: 60px;
        padding-bottom: 10px;
        .instructor-img {
            margin-top: 30px;
        }
        .name {
            margin-top: 25px;
        }
        .label {
            margin-top: 25px;
        }
        .desc {
            margin-top: 25px;
        }
    }
}

.column {
    padding-top: 95px;
    padding-bottom: 95px;
    width: 100%;
    height: auto;
    background-color: var(--blue-color);
    .heading {
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 500;
        line-height: 1;
    }
    .column-list {
        margin-top: 42px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 30px;
        .column-item,
        .column-link {
            width: 100%;
            height: auto;
        }
        .thumbnail {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 10px;
        }
        .txt {
            margin-top: 23px;
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            gap: 27px;
            time {
                margin-top: 3px;
                font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
                line-height: 1.6;
                font-weight: 300;
            }
            .title {
                font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
                line-height: 1.6;
                font-weight: 300;
            }
        }
    }
    .more-btn {
        display: inline-block;
        margin-top: 35px;
        font-size: clamp(1rem, 0.768rem + 0.95vw, 1.125rem);
        font-weight: 300;
        line-height: 1.4;
        border-bottom: 1px solid #fff;
    }
}

@media screen and (max-width: 420px) {
    .column {
        padding-top: 60px;
        padding-bottom: 60px;
        .column-list {
            margin-top: 30px;
            gap: 50px;
            .txt {
                margin-top: 13px;
                gap: 16px;
            }
        }
        .more-btn {
            margin-top: 30px;
        }
    }
}

.sp-footer {
    padding-top: 95px;
    padding-bottom: 95px;
    background-color: #274252;
    .studio-detail {
        margin-top: 40px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 21px;
        .sd-item {
            width: 100%;
            height: auto;
            display: flex;
            align-items: start;
            font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
            line-height: 1.6;
            dt {
                width: 23%;
                font-weight: 700;
            }
            dd {
                width: 77%;
            }
        }
    }
    .footer-content {
        margin-top: 175px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        .fotoer-logo {
            width: 200px;
            height: auto;
            object-fit: contain;
        }
        .copywrite {
            font-size: 14px;
            line-height: 1;
            font-weight: 300;
        }
    }
}

@media screen and (max-width: 420px) {
    .sp-footer {
        padding-top: 60px;
        padding-bottom: 60px;
        .studio-detail {
            margin-top: 30px;
            gap: 25px;
            .sd-item {
                dt {
                    width: 30%;
                }
                dd {
                    width: 70%;
                }
            }
        }
        .footer-content {
            margin-top: 90px;
            gap: 30px;
        }
    }
}

.sp-cta {
    position: sticky;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 85px;
    display: flex;
    align-items: center;
    color: var(--black-color);
    background-color: #f2f2f2;
    opacity: 0;
    pointer-events: none;
    transition: all .6s ease;
    &.active {
        opacity: 1;
        pointer-events: all;
    }
    .desc {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(1.125rem, 0.893rem + 0.95vw, 1.25rem);
        font-weight: 300;
        border-right: 1px solid #d4d0c8;
    }
    .cta-link {
        width: 25%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &.line {
            border-right: 1px solid #d4d0c8;
            img {
                width: 48px;
                height: auto;
                object-fit: contain;
            }
        }
        &.tel {
            img {
                width: 45px;
                height: auto;
                object-fit: contain;
            }
        }
    }
}

@media screen and (max-width: 420px) {
    .sp-cta {
        height: 85px;
        &.active {
            opacity: 1;
            pointer-events: all;
        }
        .desc {
            font-size: 14px;
        }
        .cta-link {
            &.line {
                img {
                    width: 35px;
                }
            }
            &.tel {
                img {
                    width: 35px;
                }
            }
        }
    }
}

.page-top {
    margin-top: calc(-1 * (var(--header-height)));
    width: 100%;
    height: auto;
    border-radius: 31px 31px 0 0;
}

@media screen and (max-width: 900px) {
    .page-top {
        border-radius: 0;
    }
}


/* single-area */

.single-area {
    --text: #f5f5f5;
    --muted: #bbbbbb;
    --accent: #274252;
    --bg-soft: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.15);
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    padding-top: calc((var(--header-height)) + 60px);
    padding-bottom: 120px;
    background-color: var(--blue-color);
    .l-inner {
        max-width: 1000px;
    }
    .title {
        font-size: clamp(1.5rem, 1rem + 1.2vw, 1.75rem);
        line-height: 1.6;
        font-weight: 500;
        padding-bottom: 15px;
    }
    .news-thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        margin: var(--space-5) 0 var(--space-2);
    }
    .single-content-area {
        color: var(--text);
        font-size: 1rem;
        line-height: 1.9;
        letter-spacing: 0.02em;
        font-kerning: normal;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        line-break: strict;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .single-content-area>*+* {
        margin-top: var(--space-4);
    }
    .single-content-area p {
        margin: 0;
    }
    .single-content-area h2,
    .single-content-area h3,
    .single-content-area h4,
    .single-content-area h5,
    .single-content-area h6 {
        line-height: 1.35;
        letter-spacing: 0.01em;
        margin: var(--space-5) 0 var(--space-2);
    }
    /* タイトル(h1)はページ側で既に設定済み。本文内はh2以下を使用 */
    .single-content-area h2 {
        /* h1より一段小さく設計 */
        font-size: clamp(1.5rem, 1rem + 1.2vw, 1.75rem);
        border-left: 4px solid var(--text);
        padding-left: var(--space-2);
    }
    .single-content-area h3 {
        font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.5rem);
    }
    .single-content-area h4 {
        font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.25rem);
    }
    .single-content-area h5 {
        font-size: 1.0625rem;
    }
    .single-content-area h6 {
        font-size: 1rem;
        color: var(--muted);
    }
    /* リスト */
    .single-content-area ul,
    .single-content-area ol {
        padding-left: 1.4em;
        margin: 0;
    }
    .single-content-area li+li {
        margin-top: var(--space-1);
    }
    .single-content-area ul {
        list-style: disc;
    }
    .single-content-area ol {
        list-style: decimal;
    }
    /* 引用 */
    .single-content-area blockquote {
        margin: 0;
        padding: var(--space-3) var(--space-4);
        border-left: 4px solid var(--accent);
        background: var(--bg-soft);
        color: #222;
    }
    .single-content-area blockquote>*+* {
        margin-top: var(--space-2);
    }
    /* 区切り線 */
    .single-content-area hr {
        border: 0;
        height: 1px;
        background: var(--border);
        margin: var(--space-5) 0;
    }
    /* リンク */
    .single-content-area a {
        color: var(--accent);
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1.5px;
    }
    .single-content-area a:hover {
        opacity: 0.9;
        text-decoration-thickness: 2px;
    }
    /* 画像・図版 */
    .single-content-area img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: var(--space-3) auto;
    }
    .single-content-area figure {
        margin: 0;
        text-align: center;
    }
    .single-content-area figcaption {
        margin-top: var(--space-1);
        font-size: 0.9rem;
        color: var(--muted);
    }
    /* コード */
    .single-content-area code {
        background: var(--bg-soft);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.1em 0.4em;
        font-size: 0.95em;
    }
    .single-content-area pre {
        overflow-x: auto;
        padding: var(--space-3);
        background: var(--bg-soft);
        border: 1px solid var(--border);
        border-radius: 8px;
        line-height: 1.7;
    }
    .single-content-area pre code {
        padding: 0;
        border: 0;
        background: transparent;
    }
    /* 表 */
    .single-content-area table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
    }
    .single-content-area th,
    .single-content-area td {
        border: 1px solid var(--border);
        padding: 0.75rem 0.9rem;
        vertical-align: top;
    }
    .single-content-area thead th {
        background: #fafbfc;
        font-weight: 600;
    }
    .single-content-area tbody tr:nth-child(odd) {
        background: #fcfdff;
    }
    /* 表のモバイル横スクロール */
    @media (max-width: 800px) {
        .single-content-area table {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
        }
    }
    /* キャプション・補足テキスト */
    .single-content-area small,
    .single-content-area .caption {
        color: var(--muted);
        font-size: 0.9rem;
    }
    /* リスト内の段落など、入れ子要素の間隔を整える */
    .single-content-area li>*+* {
        margin-top: var(--space-1);
    }
}

@media screen and (max-width: 800px) {
    .single-area {
        padding-top: calc((var(--header-height)) + 30px);
        padding-bottom: 60px;
        .l-inner {
            max-width: 600px;
        }
        .title {
            font-size: 22px;
        }
    }
}