/* ============================================================
   Top Page — SP (max-width: 1024px) + PC (min-width: 1025px)
   SP design: 393px | PC design: 1366px
   --b: viewport-proportional unit (= 10px at design width)
   ============================================================ */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    h1, h2, h3 {
        font-weight: inherit;
        font-size: inherit;
        line-height: inherit;
        margin: 0;
        padding: 0;
    }

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

    /* ── Shared helpers ── */
    .arrow-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
        flex-shrink: 0;
    }

    .arrow-icon svg {
        display: block;
    }

    /* ── Page wrapper ── */
    .top-page {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        background: #FFFFFF;
        overflow-x: hidden;
        isolation: isolate;
        /* SP: 1 unit ≈ 10px at 393px design width */
        --b: calc(100vw / 39.3);
    }

    /* ============================================================
   MV — Main Visual
   ============================================================ */
    .top-mv {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: #D9D9D9;
        overflow: hidden;
        flex-shrink: 0;
        isolation: isolate;
    }

    .top-mv__video {
        display: none;
    }

    .top-mv__video-sp {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100dvh;
        width: calc(100dvh * 9 / 16);
        min-width: 100%;
        min-height: calc(100vw * 16 / 9);
        transform: translate(-50%, -50%);
        z-index: 0;
        border: none;
        pointer-events: none;
    }

    .top-mv__blur {
        position: absolute;
        width: calc(19.1 * var(--b));
        height: calc(19.1 * var(--b));
        background: #1C3537;
        opacity: 0.5;
        filter: blur(calc(5 * var(--b)));
        z-index: 1;
        pointer-events: none;
        left: calc(-1.7 * var(--b));
        top: calc(26.3 * var(--b));
    }

    .top-mv__text {
        position: absolute;
        display: flex;
        flex-direction: column;
        gap: calc(1 * var(--b));
        isolation: isolate;
        z-index: 2;
        width: calc(28.9 * var(--b));
        left: calc(2 * var(--b));
        top: calc(30 * var(--b));
    }

    .top-mv__title {
        font-family: new-spirit, serif;
        font-weight: 500;
        font-size: calc(6.4 * var(--b));
        line-height: 100%;
        color: #FFFFFF;
        mix-blend-mode: plus-lighter;
        opacity: 0.6;
    }

    /* ============================================================
   Shared section title row
   ============================================================ */
    .section-title-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        gap: calc(1.6 * var(--b));
    }

    .section-title {
        font-family: new-spirit, serif;
        font-weight: 400;
        font-size: calc(3.2 * var(--b));
        line-height: 100%;
        color: #212227;
    }

    .top-concept .section-title {
        font-size: calc(2.4 * var(--b));
        line-height: 170%;
    }

    .section-subtitle {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .more-link {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: calc(0.4 * var(--b));
        gap: calc(1.6 * var(--b));
        text-decoration: none;
        cursor: pointer;
        border: none;
        color: #212227;
        --bg-y: 100%;
        background: linear-gradient(currentColor, currentColor) 0 var(--bg-y)/100% 1px no-repeat;
    }

    .more-link__label {
        font-family: 'Shippori Mincho', serif;
        font-weight: 400;
        font-size: calc(1.5 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
        white-space: nowrap;
    }

    .cta-btn {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        padding: calc(1 * var(--b)) calc(1.6 * var(--b)) calc(1 * var(--b)) calc(2 * var(--b));
        gap: calc(0.8 * var(--b));
        background: #FFFFFF;
        border-radius: 9999px;
        text-decoration: none;
        cursor: pointer;
        border: none;
        white-space: nowrap;
    }

    .cta-btn__label {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 100%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    /* ============================================================
   CONCEPT
   ============================================================ */
    .top-concept {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(3 * var(--b));
        background: #E5E4D5;
        flex-shrink: 0;
        padding: calc(8 * var(--b)) calc(2 * var(--b));
        width: 100%;
    }

    .top-concept__paragraphs {
        display: flex;
        flex-direction: column;
        gap: calc(1.6 * var(--b));
        width: 100%;
    }

    .top-concept__text {
        font-family: 'Shippori Mincho', serif;
        font-weight: 500;
        font-size: calc(1.5 * var(--b));
        line-height: 200%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .top-concept__btn-row {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 100%;
    }

    /* ============================================================
   GALLERY
   ============================================================ */
    .top-gallery {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(3 * var(--b));
        background: #E5E4D5;
        flex-shrink: 0;
        padding: 0 calc(2 * var(--b)) calc(8 * var(--b));
        width: 100%;
    }

    .top-gallery__carousel {
        display: flex;
        flex-direction: column;
        gap: calc(1 * var(--b));
        width: 100%;
    }

    .top-gallery__scroll-area {
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        height: calc(50 * var(--b));
    }

    .top-gallery__scroll-area::-webkit-scrollbar {
        display: none;
    }

    .top-gallery__images {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: calc(0.8 * var(--b));
        padding-right: calc(0.8 * var(--b));
        width: max-content;
        height: 100%;
    }

    .top-gallery__item {
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
        scroll-snap-align: start;
        width: calc(31.5 * var(--b));
        height: calc(50 * var(--b));
    }

    .top-gallery__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .top-gallery__footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(1.6 * var(--b));
        width: 100%;
        padding-top: calc(0.8 * var(--b));
    }

    .top-gallery__progress {
        flex: 1;
        position: relative;
        height: 2px;
    }

    .top-gallery__progress-bg {
        position: absolute;
        inset: 0;
        background: #ffffff;
    }

    .top-gallery__progress-active {
        position: absolute;
        left: 0;
        top: 0;
        height: 2px;
        width: 0;
        background: #212227;
        transition: width 0.25s ease;
    }

    .top-gallery__arrows {
        display: none;
        flex-direction: row;
        align-items: center;
        gap: calc(3 * var(--b));
        flex-shrink: 0;
    }

    .top-gallery__arrow-btn {
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .top-gallery__arrow-btn#galleryPrev:hover {
            transform: translateX(calc(-0.3 * var(--b)));
        }
        .top-gallery__arrow-btn#galleryNext:hover {
            transform: translateX(calc(0.3 * var(--b)));
        }
    }

    .top-gallery__arrow-btn svg {
        display: block;
    }

    /* ============================================================
   LOCATIONS
   ============================================================ */
    .top-locations {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        background: #EDECE2;
        flex-shrink: 0;
        padding: calc(6 * var(--b)) 0;
        width: 100%;
    }

    .top-locations__head {
        display: flex;
        flex-direction: column;
        gap: calc(1.6 * var(--b));
        padding: 0 calc(2 * var(--b));
        width: 100%;
    }

    .top-locations__lead {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 200%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .top-locations__map-row {
        display: flex;
        justify-content: flex-end;
    }

    .map-link {
        display: inline-flex;
        align-items: center;
        padding: 0 calc(0.4 * var(--b)) calc(0.4 * var(--b));
        gap: calc(0.4 * var(--b));
        text-decoration: none;
        cursor: pointer;
        color: #212227;
        --bg-y: 100%;
        background: linear-gradient(currentColor, currentColor) 0 var(--bg-y)/100% 1px no-repeat;
    }

    .map-link span {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.4 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .top-locations__list {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 calc(2 * var(--b));
        width: 100%;
        gap: 0;
    }

    .location-card {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: calc(1.5 * var(--b));
        border-bottom: 1px solid #D1D0C1;
        padding: calc(4 * var(--b)) 0 calc(6 * var(--b));
        width: 100%;
    }

    .location-card__head {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .location-card__name-group {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(1.6 * var(--b));
    }

    .location-card__name {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .location-card__divider {
        width: 1px;
        height: calc(0.8 * var(--b));
        background: #8E8E8E;
    }

    .location-card__area {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.2 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .loc-carousel__cta-pc {
        display: none;
    }

    .loc-carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 100%;
    }

    .loc-carousel__wrap {
        overflow: hidden;
        background: #FFFFFF;
        width: 100%;
        height: calc(35.3 * var(--b));
    }

    .loc-carousel__slides {
        display: flex;
        flex-direction: row;
        height: 100%;
        transition: transform 0.35s ease;
    }

    .loc-carousel__slide {
        flex-shrink: 0;
        overflow: hidden;
        width: 100%;
        height: calc(35.3 * var(--b));
    }

    .loc-carousel__slide a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .loc-carousel__slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .loc-carousel__nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: calc(1 * var(--b)) 0;
        width: 100%;
    }

    .loc-carousel__dots {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(0.8 * var(--b));
    }

    .loc-dot {
        width: calc(0.7 * var(--b));
        height: calc(0.7 * var(--b));
        border-radius: 50%;
        background: #D1D0C1;
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .loc-dot.is-active {
        background: #212227;
    }

    .loc-carousel__prev-next {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: calc(3 * var(--b));
    }

    .loc-carousel__btn {
        width: calc(1.6 * var(--b));
        height: calc(1.6 * var(--b));
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: none;
        border: none;
        padding: 0;
        flex-shrink: 0;
    }

    .loc-carousel__btn svg {
        display: block;
        transition: transform 0.2s ease;
    }

    .loc-carousel__btn[data-dir="next"]:hover svg {
        transform: translateX(3px);
    }

    .loc-carousel__btn[data-dir="prev"]:hover svg {
        transform: translateX(-3px);
    }

    .top-locations__bottom {
        display: flex;
        justify-content: center;
        padding: calc(3.8 * var(--b)) calc(2 * var(--b)) 0;
        width: 100%;
    }

    /* ============================================================
   TOPICS
   ============================================================ */
    .top-topics {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(3 * var(--b));
        background: #E5E4D5;
        flex-shrink: 0;
        padding: calc(6 * var(--b)) calc(2 * var(--b));
        width: 100%;
    }

    .top-topics__list {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .topic-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: calc(1.6 * var(--b));
        border-bottom: 1px solid #D1D0C1;
        text-decoration: none;
        cursor: pointer;
        padding: calc(2 * var(--b)) calc(1 * var(--b)) calc(1 * var(--b)) calc(2 * var(--b));
    }

    .topic-item:last-child {
        border-bottom: none;
    }

    .topic-item__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0 0 calc(1 * var(--b));
        gap: calc(0.8 * var(--b));
        flex: 1;
    }

    .topic-item__date {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.2 * var(--b));
        line-height: 100%;
        letter-spacing: 0.03em;
        color: #8E8E8E;
    }

    .topic-item__title {
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 400;
        font-size: calc(1.5 * var(--b));
        line-height: 170%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .topic-item__icon {
        width: calc(2.6 * var(--b));
        height: calc(2.6 * var(--b));
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }

    .topic-item:hover .topic-item__icon {
        transform: translateX(3px);
    }

    /* ============================================================
   ABOUT / FOOTER-TOP
   ============================================================ */
    .top-about {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        isolation: isolate;
        background: #EDECE2;
        flex-shrink: 0;
        padding: calc(5 * var(--b)) 0 0;
        width: 100%;
    }

    .top-about__text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: calc(4 * var(--b));
        width: 100%;
        padding: 0 calc(2 * var(--b));
        margin-bottom: calc(20 * var(--b));
        position: relative;
        z-index: 1;
        background: transparent;
    }

    .top-about__heading {
        display: flex;
        flex-direction: column;
        gap: calc(1 * var(--b));
    }

    .top-about__en-title {
        font-family: new-spirit, serif;
        font-weight: 500;
        font-size: calc(3.6 * var(--b));
        line-height: 100%;
        color: #212227;
    }

    .top-about__jp-title {
        font-family: 'Shippori Mincho', serif;
        font-weight: 500;
        font-size: calc(1.8 * var(--b));
        line-height: 200%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .top-about__body {
        display: flex;
        flex-direction: column;
        gap: calc(2 * var(--b));
    }

    .top-about__para {
        font-family: 'Shippori Mincho', serif;
        font-weight: 500;
        font-size: calc(1.5 * var(--b));
        line-height: 200%;
        letter-spacing: 0.03em;
        color: #212227;
    }

    .top-about__slider-wrap {
        position: relative;
        z-index: 0;
        width: 100%;
        flex-shrink: 0;
        margin-top: calc(-17 * var(--b));
    }

    .top-about__slider {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .top-about__slide {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        opacity: 0;
        transition: opacity 1.2s ease;
    }

    .top-about__slide.is-active {
        position: relative;
        opacity: 1;
    }

    .top-about__slide img {
        width: 100%;
        height: auto;
        object-fit: initial;
        display: block;
    }

    .back-to-top {
        position: absolute;
        bottom: calc(-1.4 * var(--b));
        left: 50%;
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: calc(1 * var(--b)) calc(2 * var(--b));
        gap: calc(0.8 * var(--b));
        height: calc(4 * var(--b));
        background: #FFFFFF;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
        z-index: 10;
        white-space: nowrap;
    }

    .back-to-top span {
        font-family: new-spirit, serif;
        font-weight: 500;
        font-size: calc(1.2 * var(--b));
        line-height: 100%;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #212227;
        white-space: nowrap;
    }

    /* ============================================================
   PC OVERRIDES  ≥ 1025px
   ============================================================ */
    @media (min-width: 1025px) {

        .top-page {
            /* PC: 1 unit ≈ 10px at 1366px design width */
            --b: calc(100vw / 136.6);
        }

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

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

        .top-mv__video-sp {
            display: none;
        }

        .top-mv__video {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 177.78vh;
            height: 56.25vw;
            min-width: 100%;
            min-height: 100%;
            transform: translate(-50%, -50%);
            z-index: 0;
            border: none;
            pointer-events: none;
        }

        .top-mv__blur {
            width: calc(36 * var(--b));
            height: calc(36 * var(--b));
            filter: blur(calc(10 * var(--b)));
            left: calc(-1.2 * var(--b));
            top: calc(50% - calc(18 * var(--b)) + calc(4.3 * var(--b)));
        }

        .top-mv__text {
            width: calc(46.1 * var(--b));
            left: calc(11.8 * var(--b));
            top: calc(50% - calc(3.2 * var(--b)) + calc(4.3 * var(--b)));
        }

        .top-stay {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            background: #E5E4D5;
            width: 100%;
        }

        .top-concept {
            flex-shrink: 0;
            width: calc(70 * var(--b));
            padding: calc(10 * var(--b)) calc(5 * var(--b)) calc(10 * var(--b)) calc(11.8 * var(--b));
            background: transparent;
            gap: calc(4 * var(--b));
            justify-content: center;
        }

        .top-concept>.section-title-row {
            flex-direction: column;
            align-items: flex-start;
            gap: calc(0.8 * var(--b));
        }

        .top-concept .section-title {
            font-size: calc(4 * var(--b));
            line-height: 100%;
        }

        .top-concept__paragraphs {
            max-width: calc(44.3 * var(--b));
        }

        .top-concept__btn-row {
            align-items: flex-end;
        }

        .top-gallery {
            flex: 1;
            min-width: 0;
            padding: calc(18 * var(--b)) 0 calc(10 * var(--b)) 0;
            background: transparent;
            gap: calc(1.6 * var(--b));
            overflow: hidden;
            justify-content: center;
        }

        .top-gallery>.section-title-row {
            display: none;
        }

        .top-gallery__scroll-area {
            height: calc(44 * var(--b));
            scroll-snap-type: none;
        }

        .top-gallery__item {
            width: calc(27 * var(--b));
            height: calc(44 * var(--b));
        }

        .top-gallery__footer {
            flex-direction: column;
            align-items: stretch;
            gap: calc(1.6 * var(--b));
            padding-right: calc(10 * var(--b));
        }

        .top-gallery__progress {
            flex: none;
            width: 100%;
        }

        .top-gallery__arrows {
            display: flex;
            align-self: flex-end;
        }

        .top-locations {
            padding: calc(8 * var(--b)) 0;
        }

        .top-locations__head {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            row-gap: calc(2.2 * var(--b));
            padding: 0 calc(11.8 * var(--b));
        }

        .top-locations__head>.section-title-row {
            flex: none;
        }

        .top-locations__head .section-title {
            font-size: calc(4 * var(--b));
        }

        .top-locations__lead {
            width: 100%;
            order: 3;
            font-size: calc(1.5 * var(--b));
            line-height: 170%;
        }

        .top-locations__map-row {
            order: 2;
        }

        .top-locations__list {
            padding: calc(3 * var(--b)) calc(11.8 * var(--b)) 0;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: calc(4 * var(--b)) calc(4 * var(--b));
            align-items: start;
        }

        .location-card {
            gap: calc(1.6 * var(--b));
            padding: 0;
            border-bottom: none;
            cursor: pointer;
        }

        .location-card__name {
            font-size: calc(2 * var(--b));
        }

        .location-card__area {
            font-size: calc(1.2 * var(--b));
        }

        .location-card .cta-btn {
            display: none;
        }

        .loc-carousel__cta-pc {
            display: flex;
            position: absolute;
            top: calc(1 * var(--b));
            right: calc(1 * var(--b));
            width: calc(2.8 * var(--b));
            height: calc(2.8 * var(--b));
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid #212227;
            border-radius: 50%;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            z-index: 2;
            flex-shrink: 0;
            transform: scale(1);
            transform-origin: bottom left;
            transition: transform 0.4s ease;
        }

        .loc-carousel__cta-pc:hover {
            transform: scale(1.6);
        }

        .loc-carousel__wrap {
            height: auto;
            aspect-ratio: 1 / 1;
            transform: scale(1);
            transition: transform 0.4s ease;
        }

        .loc-carousel__slide {
            height: 100%;
            aspect-ratio: 1 / 1;
        }

        .top-locations__bottom {
            padding: calc(4 * var(--b)) calc(11.8 * var(--b)) 0;
        }

        .top-topics {
            flex-direction: row;
            align-items: flex-start;
            gap: calc(8 * var(--b));
            padding: calc(8 * var(--b)) calc(11.8 * var(--b));
        }

        .top-topics>.section-title-row {
            flex-direction: row;
            align-items: flex-end;
            flex-shrink: 0;
            width: calc(49.1 * var(--b));
        }

        .top-topics .section-title {
            font-size: calc(4 * var(--b));
        }

        .top-topics__list {
            flex: 1;
        }

        .topic-item {
            padding: calc(2 * var(--b)) 0 calc(1.2 * var(--b));
        }

        .topic-item__title {
            font-size: calc(1.4 * var(--b));
        }

        .top-about {
            padding: calc(10 * var(--b)) 0 0;
            align-items: flex-start;
            flex-direction: row;
        }

        .top-about__text {
            padding: 0 calc(10 * var(--b)) calc(8 * var(--b)) calc(11.8 * var(--b));
            gap: calc(4 * var(--b));
            margin-bottom: 0;
            width: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        .top-about__slider-wrap {
            width: 70%;
            flex-shrink: 0;
            align-self: flex-end;
            margin-left: -20%;
            margin-top: 0;
            position: relative;
            z-index: 0;
            transform: translate(calc(2 * var(--b)), calc(1 * var(--b)));
        }

        .top-about__body {
            max-width: calc(36 * var(--b));
        }

        .top-about__en-title {
            font-size: calc(4 * var(--b));
        }

        .top-about__slider {
            height: auto;
            aspect-ratio: 792 / 406;
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 792 406'%3E%3Cpath d='M-0.354614 736.703L-0.354585 399.82C4.6102 399.466 6.73794 400.056 10.5207 398.521C25.0603 392.853 33.8078 390.964 39.2455 388.366C59.8138 378.683 53.0759 346.447 68.6795 325.547C73.4078 319.289 82.3917 316.337 87.2383 309.134C102.133 287.171 100.596 262.492 134.64 245.017L157.1 223.172C161.001 219.393 166.675 217.858 171.994 219.157C176.486 220.338 181.333 222.109 184.051 223.054C201.074 228.84 207.457 237.932 224.242 243.836C237.836 248.559 234.763 244.78 248.002 242.537C252.967 241.71 256.75 243.836 262.069 241.356C271.762 236.751 285.356 211.718 293.513 211.364C311.481 210.655 307.343 201.681 323.893 201.681C334.177 201.681 355.336 213.961 357.346 215.26C362.074 218.33 367.157 220.574 377.441 220.22C386.071 219.983 402.974 203.688 413.731 198.611C434.654 188.928 436.428 189.991 451.558 171.925C474.136 145.003 483.711 120.678 535.723 108.752C543.407 106.981 549.317 103.793 554.4 100.014C556.528 98.479 571.186 86.3167 573.905 83.2466C584.78 70.9662 597.901 63.7633 614.45 62.8187C630.054 61.9921 639.274 62.9368 654.523 57.5051C666.462 53.2542 671.427 50.4203 684.193 48.649C733.368 42.1547 725.094 23.7341 754.764 15.7046C762.33 13.6973 784.908 2.59778 792 0L792 736.703L-0.23645 736.703L-0.354614 736.703Z' fill='black'/%3E%3C/svg%3E");
            -webkit-mask-size: 100% 100%;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 792 406'%3E%3Cpath d='M-0.354614 736.703L-0.354585 399.82C4.6102 399.466 6.73794 400.056 10.5207 398.521C25.0603 392.853 33.8078 390.964 39.2455 388.366C59.8138 378.683 53.0759 346.447 68.6795 325.547C73.4078 319.289 82.3917 316.337 87.2383 309.134C102.133 287.171 100.596 262.492 134.64 245.017L157.1 223.172C161.001 219.393 166.675 217.858 171.994 219.157C176.486 220.338 181.333 222.109 184.051 223.054C201.074 228.84 207.457 237.932 224.242 243.836C237.836 248.559 234.763 244.78 248.002 242.537C252.967 241.71 256.75 243.836 262.069 241.356C271.762 236.751 285.356 211.718 293.513 211.364C311.481 210.655 307.343 201.681 323.893 201.681C334.177 201.681 355.336 213.961 357.346 215.26C362.074 218.33 367.157 220.574 377.441 220.22C386.071 219.983 402.974 203.688 413.731 198.611C434.654 188.928 436.428 189.991 451.558 171.925C474.136 145.003 483.711 120.678 535.723 108.752C543.407 106.981 549.317 103.793 554.4 100.014C556.528 98.479 571.186 86.3167 573.905 83.2466C584.78 70.9662 597.901 63.7633 614.45 62.8187C630.054 61.9921 639.274 62.9368 654.523 57.5051C666.462 53.2542 671.427 50.4203 684.193 48.649C733.368 42.1547 725.094 23.7341 754.764 15.7046C762.33 13.6973 784.908 2.59778 792 0L792 736.703L-0.23645 736.703L-0.354614 736.703Z' fill='black'/%3E%3C/svg%3E");
            mask-size: 100% 100%;
        }

        .top-about__slide {
            position: absolute;
            inset: 0;
        }

        .top-about__slide.is-active {
            position: absolute;
        }

        .top-about__slide img {
            height: 100%;
            object-fit: cover;
        }

        .back-to-top {
            bottom: calc(-0.4 * var(--b));
            left: 80%;
        }

        /* ── Footer margin ── */
        /* .top-page .site-footer {
            margin-top: calc(12 * var(--b));
        } */

        /* ── MV title: keep on one line ── */
        .top-mv__title {
            white-space: nowrap;
        }

        /* ── Hover effects ── */
        .loc-carousel__slide img {
            transform: scale(1.04);
            transition: transform 0.4s ease;
        }
        .location-card:hover .loc-carousel__wrap {
            transform: scale(0.97);
        }
        .location-card:hover .loc-carousel__slide img {
            transform: scale(1.07);
        }
        .location-card:hover .loc-carousel__cta-pc {
            transform: scale(1.6);
        }

        .topic-item {
            transition: opacity 0.2s ease;
        }
        .topic-item:hover {
            opacity: 0.7;
        }

        .cta-btn {
            transition: background 0.2s ease, color 0.2s ease;
        }
        .cta-btn:hover {
            background: #212227;
        }
        .cta-btn:hover .cta-btn__label {
            color: #FFFFFF;
        }
        .cta-btn:hover svg path {
            stroke: #FFFFFF;
        }

    }

    @media (hover: hover) and (pointer: fine) {
        .more-link,
        .map-link {
            transition: background-size 0.4s ease-out, background-position 0s 0.4s;
        }
        .more-link:hover,
        .map-link:hover {
            background-size: 0 1px;
            background-position: 100% var(--bg-y);
            transition: background-size 0.4s ease-out;
        }
    }