/* ============================================================
   MyPlanJapan — e-duplicate_destinations_base.css
   Shared base styles for prefecture destination pages.
   Identical across all prefecture pages (verified byte-for-byte).
   Loads alongside the existing duplicate_* stylesheets.
   ============================================================ */

/* Load Playfair Display for the .logo-word wordmark, matching the home page */
@import url('/fonts/fonts.css');
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    body.loaded {
        opacity: 1;
    }

    section[id] {
        scroll-margin-top: 110px;
    }

    :root {
        --brand-red: #b1222a;
        --brand-red-strong: #e60000;
        --soft-red-border: #ead7d7;
        --soft-red-bg: #fff8f8;
        --card-border: #ececec;
        --muted-text: #555;
        --red: #e60000;
        --red-dark: #b1222a;
        --red-light: #fff8f8;
        --white: #ffffff;
        --paper: #faf8f6;
        --ink: #111111;
        --ink-soft: #444444;
        --ink-muted: #666666;
        --border: #ececec;
        --sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        --serif: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body {
        font-family: var(--sans);
        background: #ffffff;
        color: #111;
    }

    a {
        text-decoration: none;
    }

    /* Header + verification banner stick together (builder-style stack) */
    .header-stack {
        position: sticky;
        top: 0;
        z-index: 20;
    }

    header {
        min-height: 84px;
        border-bottom: 3px solid #ff0000;
        background-color: #ffffff;
    }

    .nav-container {
        max-width: 1560px;
        height: 100%;
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 13px;
        justify-self: start;
        text-decoration: none;
        flex-shrink: 0;
        top: 1px
    }

    .logo-mark {
        height: 56px;
        width: auto;
        display: block;
    }

    .logo-word {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-weight: 700;
        font-size: 34px;
        line-height: 1;
        letter-spacing: 0.3px;
        color:  #333333;
        white-space: nowrap;
    }

    .logo-accent {
        color: #e60000;
    }

    .nav-links {
        justify-self: center;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 22px;
         position: relative;
    top: 3px;
    }

    .nav-links a {
        position: relative;
        color: #333333;
        font-weight: 700;
        font-size: 16px;
    }

    .nav-links a:hover {
        text-decoration: underline;
    }

    .nav-links a.active {
        color: #e60000;
        cursor: pointer;
    }

    .social-icons {
        display: flex;
        gap: 10px;
        justify-self: end;
        position: relative;
    top: 3px;
    }

    .social-icons a {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333;
        transition: all 0.2s ease;
        font-size: 16px;
    }

    .social-icons a:hover {
        background: #e60000;
        color: #fff;
        transform: translateY(-2px);
    }

    /* Account control (auth-aware) */
    .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-self: end;
    }

    /* Matches the builder's resend button (brand-btn) */
    .brand-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      height: 36px;
      padding: 0 16px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background: #fff;
      color: #111;
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .brand-btn:hover { border-color: #e60000; color: #e60000; }
    .account-control {
        position: relative;
        flex-shrink: 0;
        left: 24px;
        top: 2px;
    }

    .account-signin {
        display: inline-block;
        padding: 10px 16px;
        border-radius: 999px;
        background: #e60000;
        color: #fff;
        font-weight: 800;
        font-size: 14px;
        text-decoration: none;
        white-space: nowrap;
        line-height: 1;
        transition: background 0.18s ease;
    }

    .account-signin:hover {
        background: #b1222a;
    }

    .account-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #e6e6e6;
        background: #fff;
        border-radius: 999px;
        padding: 5px 12px 5px 6px;
        cursor: pointer;
        font-family: inherit;
    }

    .account-trigger:hover {
        border-color: #ccc;
    }

    .account-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e60000;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        line-height: normal;
        box-sizing: border-box;
        padding-bottom: 2px; /* same centring as the itinerary pages */
    }

    .account-name {
        font-size: 14px;
        font-weight: 700;
        color: #333;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-caret {
        font-size: 11px;
        color: #767676;
    }

    .account-dropdown {
        position: absolute;
        top: calc(100% + 11px);
        right: 0;
        min-width: 232px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(0,0,0,0.12);
        padding: 8px;
        z-index: 60;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    }

    .account-dropdown.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .account-dd-pointer { position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #ededed; border-top: 1px solid #ededed; transform: rotate(45deg); }
    .account-profile { display: flex; align-items: center; gap: 10px; padding: 6px 10px 12px; border-bottom: 1px solid #f0f0f0; margin-bottom: 6px; }
    .account-profile-avatar { width: 36px; height: 36px; border-radius: 50%; background: #e60000; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; text-transform: uppercase; flex-shrink: 0; }
    .account-profile-meta { min-width: 0; display: flex; flex-direction: column; }
    .account-profile-name { font-size: 14px; font-weight: 800; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-profile-email { font-size: 12px; color: #767676; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-dropdown-item {
        display: block;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 700;
        color: #333;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        text-decoration: none;
    }

    .account-dropdown-item:hover {
        background: rgba(230,0,0,0.08);
        color: #e60000;
    }

    .account-dropdown-divider {
        height: 1px;
        background: #f0f0f0;
        margin: 6px 4px;
    }

    .account-signout {
        color: #c1121f;
    }

    @media (max-width: 900px) {
        .header-right {
            justify-self: center;
        }
    }

    .nav-dropdown {
        position: relative;
        display: inline-flex;
        align-items: center;
    }

    .nav-dropbtn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-caret {
        font-size: 12px;
        transform: translateY(1px);
    }

    .nav-dropdown-menu {
        position: absolute;
        top: calc(100% + 12px);
        left: 0;
        min-width: 170px;
        background: #fff;
        border: 1px solid #ededed;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(0,0,0,0.12);
        padding: 10px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
        z-index: 50;
    }

    .nav-dropdown-menu a {
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 800;
        color: #333;
    }

    .nav-dropdown-menu a:hover {
        background: rgba(230,0,0,0.08);
        color: #e60000;
        text-decoration: none;
    }

    .nav-dropdown:hover .nav-dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-dropdown-menu::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 0;
        width: 100%;
        height: 12px;
    }

    @media (max-width: 1520px) {
        .nav-container { gap: 26px; }
        .logo-mark { height: 46px; }
        .logo-word { font-size: 30px; }
        .nav-links { gap: 16px; }
        .nav-links a { font-size: 14px; }

        .header-right {
            gap: 10px;
        }

        .account-signin {
            padding: 7px 14px;
            font-size: 13px;
        }
    }

    @media (max-width: 1260px) {
        .nav-container { gap: 20px; }
        .logo-mark { height: 38px; }
        .logo-word { font-size: 25px; }
        .nav-links { gap: 10px; }
        .nav-links a { font-size: 13px; }
    }

    @media (max-width: 1040px) {
        .nav-container {
            flex-direction: column;
            gap: 10px;
        }

        .nav-links {
            flex-wrap: wrap;
            gap: 16px;
            justify-content: center;
        }

        .social-icons {
            justify-self: center;
        }

        .header-right {
            justify-self: center;
        }
    }

    /* Tablet band only: the wrapping desktop nav still has the Seasons
       dropdown hidden by visibility/opacity, which keeps its layout space
       and pushes past the right edge (page drags sideways). Below 760px the
       drawer restyles this same element into the drill-down panel, so the
       range is capped there to leave that alone. */
    @media (min-width: 761px) and (max-width: 1040px) and (min-height: 501px) {
        .nav-dropdown-menu {
            display: none;
            left: auto;
            right: 0;
        }

        .nav-dropdown:hover .nav-dropdown-menu,
        .nav-dropdown:focus-within .nav-dropdown-menu {
            display: block;
        }
    }

    /* ════ MOBILE HEADER ════
       ≤760px: logo + account + hamburger in one row; .nav-links restyled as a
       tap-to-open panel under the header (no duplicated markup). The Seasons
       hover dropdown becomes a static inline group, since hover doesn't exist
       on touch. Toggled by .mobile-nav-open on .header-stack. */
    .nav-scrim,
    .nav-back,
    .nav-socials { display: none; }

    html.mpj-nav-locked, body.mpj-nav-locked { overflow: hidden; }

    .mobile-nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        background: none;
        border: 0;
        color: #222;
        padding: 0;
        cursor: pointer;
    }

    @media (max-width: 760px), (max-height: 500px) {
        header { position: relative; }

        /* While the drawer is open: freeze the page exactly where it is
           and hard-pin the header to the top of the screen. No sticky
           semantics involved, so no overflow interaction can detach it,
           and z 1200 keeps the whole stack above any page content. */
        body.mpj-nav-locked {
            position: fixed;
            left: 0;
            right: 0;
            padding-top: var(--header-h, 87px);
        }

        body.mpj-nav-locked .header-stack {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }

        .header-stack.mobile-nav-open { z-index: 1200; }

        .nav-container {
            position: relative;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding-left: 10px;
            padding-right: 14px;
        }

        /* Let the row actually shrink at narrow widths: flex children
           default to min-width auto and refuse to compress, which pushed
           the burger off screen and made the whole page pan sideways. */
        /* japan.travel-style bar: burger left, logo dead centre, account right. */
        .logo {
            flex: 0 1 auto;
            min-width: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .logo-mark { height: 30px; }
        .logo-word { font-size: 19px; white-space: nowrap; }

        /* Pinned, not flexed: absolute right anchor makes it impossible
           for the account control to land outside the viewport, whatever
           the flex row is doing. Mirrors the centred-logo approach. */
        .header-right {
            justify-self: auto;
            min-width: 0;
            gap: 8px;
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 0;
        }

        /* The base .account-control carries a desktop nudge (left: 24px,
           top: 2px) that shoved the sign-in pill / avatar past the viewport
           edge on phones. Neutralise it at mobile widths. */
        .account-control {
            left: 0;
            top: 0;
        }
        /* Bar shows just the avatar initials; the full name and email
           are already in the dropdown that opens on tap. */
        .account-name { display: none; }
        .account-caret { display: none; }
        .account-trigger { padding: 4px; }

        .mobile-nav-toggle { display: inline-flex; flex: 0 0 auto; order: -1; margin-left: 0; }
        .social-icons { display: none; }

        /* Slide-in drawer from the right, scrim over the page behind. */
        /* Parked via a right offset, NOT a transform: transformed fixed
           elements widen the page in Chrome (sideways pan), and clipping
           that at the root breaks the sticky header. Offset parking
           creates no overflow, so neither hack is needed. */
        .nav-links {
            position: fixed;
            top: var(--header-h, 87px);
            right: -440px;
            bottom: 0;
            left: auto;
            width: min(88vw, 360px);
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: stretch;
            /* The base rule centres the nav horizontally on desktop. In a
               column that centres VERTICALLY, and unsafe centring pushes
               half the overflow out through the top of the scroll
               container, where no scrollTop can reach it. */
            justify-content: flex-start;
            gap: 0;
            background: #fff;
            box-shadow: -18px 0 40px rgba(0,0,0,0.18);
            padding: 6px 0 18px;
            overflow-y: auto;
            overflow-x: hidden;
            z-index: 999;
            visibility: hidden;
            transition: right 0.28s ease, visibility 0s linear 0.28s;
        }

        .header-stack.mobile-nav-open .nav-links {
            right: 0;
            visibility: visible;
            transition: right 0.28s ease;
        }

        .nav-scrim {
            display: block;
            position: fixed;
            inset: var(--header-h, 87px) 0 0 0;
            background: rgba(0, 0, 0, 0.45);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, visibility 0s linear 0.28s;
            z-index: 998;
        }

        .header-stack.mobile-nav-open .nav-scrim {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.28s ease;
        }


        .nav-socials {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            padding: 18px 28px calc(10px + env(safe-area-inset-bottom));
            border-top: 1px solid #ececec;
        }

        /* Also covers the clone inside the Seasons sub-panel: outranks the
           .nav-dropdown-menu a row styling (block + hairline + bold) so
           icons never render as bordered rows in either sleeve. */
        .nav-links .nav-socials a,
        .nav-links .nav-dropdown-menu .nav-socials a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            font-size: 20px;
            font-weight: 400;
            border: 0;
            border-radius: 0;
            background: none;
            box-shadow: none;
            width: auto;
            height: auto;
        }

        .nav-links > a {
            padding: 16px 24px;
            font-size: 17px;
            border-bottom: 1px solid #f2f2f2;
        }

        .nav-dropdown { display: block; }

        .nav-links .nav-dropbtn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 16px 24px;
            font-size: 17px;
            font-weight: 700;
            color: #222;
            border-bottom: 1px solid #f2f2f2;
            cursor: pointer;
        }

        .nav-links .nav-dropbtn::after {
            content: '\203A';
            font-size: 24px;
            line-height: 1;
            color: inherit;
        }

        .nav-caret { display: none; }

        /* Seasons drills into a sub-panel that slides over the drawer,
           japan.travel style. The Back row is injected by the script. */
        .nav-dropdown { position: static; }

        .nav-dropdown-menu {
            position: absolute;
            inset: 0;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            opacity: 1;
            transform: translateX(102%);
            visibility: hidden;
            transition: transform 0.25s ease, visibility 0s linear 0.25s;
            box-shadow: none;
            border: 0;
            border-radius: 0;
            min-width: 0;
            padding: 6px 0 18px;
            overflow-y: auto;
            z-index: 2;
        }

        /* Outranks the desktop :hover rule, which otherwise pins the
           sub-panel open while a mouse pointer sits over it, making the
           Back button appear dead when testing in a desktop browser. */
        .nav-links .nav-dropdown:not(.drill-open) .nav-dropdown-menu {
            transform: translateX(102%);
            visibility: hidden;
            transition: transform 0.25s ease, visibility 0s linear 0.25s;
        }

        .nav-links .nav-dropdown.drill-open .nav-dropdown-menu {
            transform: translateX(0);
            visibility: visible;
            transition: transform 0.25s ease;
        }

        .nav-dropdown-menu::before { display: none; }

        .nav-dropdown-menu a {
            display: block;
            padding: 16px 24px;
            font-size: 17px;
            font-weight: 700;
            border-bottom: 1px solid #f2f2f2;
        }

        .nav-back {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 16px 24px;
            font-size: 15px;
            font-weight: 700;
            color: #666;
            background: none;
            border: 0;
            border-bottom: 1px solid #f2f2f2;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
        }
    }

    .hero {
        position: relative;
        height: calc(100vh - 91px);
        min-height: 580px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
    }

    .hero-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 50%, #0d1b2a 100%);
    }

    .hero-img-layer {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%);
    }

    /* ── PER-PAGE PREFECTURE HEROES ──
       Hooked off <body data-page="..."> on each prefecture page.
       Each rule restates the gradient because the base rule sets it in the
       same background shorthand, so a url-only override would drop it. */

    body[data-page="1-hokkaido"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("/images/c-destinations/destinations/a-hokkaido/1-hokkaido/hero-hokkaido.webp") center/cover no-repeat;
    }

    body[data-page="2-aomori"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("/images/c-destinations/destinations/b-tohoku/2-aomori/hero-hirosaki-castle.webp") center/cover no-repeat;
    }

    body[data-page="3-iwate"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/b-tohoku/3-iwate/hero_chusonji_benzaiten_pt27211.jpg") center/cover no-repeat;
    }

    body[data-page="4-miyagi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/b-tohoku/4-miyagi/hero_date_masamune_pc.jpg") center/cover no-repeat;
    }

    body[data-page="5-akita"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/b-tohoku/5-akita/hero_kakunodate_sakura_pt14568.jpg") center/cover no-repeat;
    }

    body[data-page="6-yamagata"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/b-tohoku/6-yamagata/hero_haguro_pagoda_pt41746.jpg") center/cover no-repeat;
    }

    body[data-page="7-fukushima"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/b-tohoku/7-fukushima/hero_ouchijuku_pt25111.jpg") center/cover no-repeat;
    }

    body[data-page="8-ibaraki"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/8-ibaraki/hero_mt_tsukuba_pt73106.jpg") center/cover no-repeat;
    }

    body[data-page="9-tochigi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/9-tochigi/hero_shinkyo_bridge_pc.jpg") center/cover no-repeat;
    }

    body[data-page="10-gunma"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/10-gunma/hero_kusatsu_yubatake_pt41846.jpg") center/cover no-repeat;
    }

    body[data-page="11-saitama"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/11-saitama/hero_kawagoe_bell_pc.jpg") center/cover no-repeat;
    }

    body[data-page="12-chiba"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/12-chiba/hero-inubosaki-dawn-pac34673920-2000.webp") center/cover no-repeat;
    }

    body[data-page="13-tokyo"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/13-tokyo/hero_kaminarimon_pc.jpg") center/cover no-repeat;
    }

    body[data-page="14-kanagawa"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/c-kanto/14-kanagawa/hero_hakone_fuji_torii_px.jpg") center/cover no-repeat;
    }

    body[data-page="15-niigata"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/15-niigata/hero_bandai_bridge_us.jpg") center/cover no-repeat;
    }

    body[data-page="16-toyama"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/16-toyama/hero_kurobe_dam_pt38988.jpg") center/cover no-repeat;
    }

    body[data-page="17-ishikawa"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/17-ishikawa/hero_tsuzumimon_pt24879.jpg") center/cover no-repeat;
    }

    body[data-page="18-fukui"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/18-fukui/hero_oshima_torii_pt42395.jpg") center/cover no-repeat;
    }

    body[data-page="19-yamanashi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/19-yamanashi/hero_fuji_kawaguchiko_pc.jpg") center/cover no-repeat;
    }

    body[data-page="20-nagano"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/20-nagano/hero_matsumoto_castle_pc.jpg") center/cover no-repeat;
    }

    body[data-page="21-gifu"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/21-gifu/hero_monets_pond_pt32651.jpg") center/cover no-repeat;
    }

    body[data-page="22-shizuoka"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/22-shizuoka/hero_atami_castle_pc.jpg") center/cover no-repeat;
    }

    body[data-page="23-aichi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/d-chubu/23-aichi/hero_inuyama_castle_pt91511.jpg") center/cover no-repeat;
    }

    body[data-page="24-mie"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/24-mie/hero_meoto_iwa_pt33692.jpg") center/cover no-repeat;
    }

    body[data-page="25-shiga"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/25-shiga/hero-ukimido-pac27897122-2000.webp") center/cover no-repeat;
    }

    body[data-page="26-kyoto"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/26-kyoto/hero_toji_pagoda_pt40638.jpg") center/cover no-repeat;
    }

    body[data-page="27-osaka"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/27-osaka/hero_tsutenkaku_pc.jpg") center/cover no-repeat;
    }

    body[data-page="28-hyogo"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/28-hyogo/hero_himeji_castle_pc.jpg") center/cover no-repeat;
    }

    body[data-page="29-nara"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/29-nara/hero_yakushiji_pt34812.jpg") center/cover no-repeat;
    }

    body[data-page="30-wakayama"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/e-kansai/30-wakayama/hero_hashigui_iwa_pt54885.jpg") center/cover no-repeat;
    }

    body[data-page="31-tottori"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/f-chugoku/31-tottori/hero_tottori_dunes_pt43246.jpg") center/cover no-repeat;
    }

    body[data-page="32-shimane"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/f-chugoku/32-shimane/hero_izumo_shimenawa_pt22225.jpg") center/cover no-repeat;
    }

    body[data-page="33-okayama"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/f-chugoku/33-okayama/hero_kurashiki_canal_pb.jpg") center/cover no-repeat;
    }

    body[data-page="34-hiroshima"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/f-chugoku/34-hiroshima/hero_miyajima_torii_pt43903.jpg") center/cover no-repeat;
    }

    body[data-page="35-yamaguchi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/f-chugoku/35-yamaguchi/hero_tsunoshima_bridge_pt21411.jpg") center/cover no-repeat;
    }

    body[data-page="36-tokushima"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/g-shikoku/36-tokushima/hero_onaruto_whirlpools_pt37030.jpg") center/cover no-repeat;
    }

    body[data-page="37-kagawa"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/g-shikoku/37-kagawa/hero_naoshima_pumpkin_us.jpg") center/cover no-repeat;
    }

    body[data-page="38-ehime"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/g-shikoku/38-ehime/hero_dogo_onsen_pt46139.jpg") center/cover no-repeat;
    }

    body[data-page="39-kochi"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/g-shikoku/39-kochi/hero_katsurahama_pc.jpg") center/cover no-repeat;
    }

    body[data-page="40-fukuoka"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/40-fukuoka/hero_dazaifu_tenmangu_us.jpg") center/cover no-repeat;
    }
    body[data-page="41-saga"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/41-saga/hero_yutoku_inari_us.jpg") center/cover no-repeat;
    }
    body[data-page="42-nagasaki"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/42-nagasaki/hero_gunkanjima_pt20011.jpg") center/cover no-repeat;
    }
    body[data-page="43-kumamoto"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/43-kumamoto/hero_aso_kusasenri_px.jpg") center/cover no-repeat;
    }
    body[data-page="44-oita"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/44-oita/hero_beppu_onsen_town_pt40821.jpg") center/cover no-repeat;
    }
    body[data-page="45-miyazaki"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/45-miyazaki/hero_udo_jingu_pt15744.jpg") center/cover no-repeat;
    }
    body[data-page="46-kagoshima"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/h-kyushu/46-kagoshima/hero_sakurajima_us.jpg") center/cover no-repeat;
    }
    body[data-page="47-okinawa"] .hero-img-layer {
        background:
            linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%),
            url("../images/c-destinations/destinations/i-okinawa/47-okinawa/hero_taketomi_lane_pt2616.jpg") center/cover no-repeat;
    }

    .hero-content {
        position: relative;
        z-index: 2;
        padding: 0 64px 80px;
        max-width: 860px;
    }

    .hero-eyebrow {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.55);
        margin-bottom: 16px;
    }

    .hero-kanji {
        font-size: 72px;
        color: rgba(255,255,255,0.08);
        font-family: var(--sans);
        line-height: 1;
        margin-bottom: 10px;
        letter-spacing: 0.1em;
    }

    .hero-title {
        font-size: clamp(56px, 8vw, 92px);
        font-weight: 900;
        color: white;
        line-height: 0.95;
        margin-bottom: 28px;
        letter-spacing: -0.02em;
    }

    .hero-hook {
        font-size: 17px;
        line-height: 1.7;
        color: rgba(255,255,255,0.82);
        max-width: 520px;
        padding-left: 20px;
        border-left: 3px solid #ff0000;
    }

    .page-body {
        max-width: 1080px;
        margin: 0 auto;
        padding: 64px 32px 80px;
    }

    .main-col {
        width: 100%;
        min-width: 0;
    }

    .section-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 10px;
    }

    .section-heading {
        font-size: 38px;
        font-weight: 900;
        color: #111;
        line-height: 1.1;
        margin-bottom: 24px;
    }

    .ga-title {
        font-size: 38px !important;
        font-weight: 900 !important;
        color: #111 !important;
        line-height: 1.1 !important;
    }

    .tips-title {
        font-size: 38px !important;
        font-weight: 900 !important;
        color: #111 !important;
        line-height: 1.1 !important;
    }

    .section-body {
        font-size: 16px;
        line-height: 1.9;
        color: var(--ink-soft);
        margin-bottom: 28px;
    }

    .content-section {
        margin-bottom: 64px;
        padding-bottom: 64px;
        border-bottom: 1px solid var(--border);
    }

    .content-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .intro-mosaic {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: 220px 220px;
        gap: 12px;
        margin-bottom: 32px;
    }

    .mosaic-img {
        border-radius: 10px;
        overflow: hidden;
        background: #c8c4c0;
    }

    .mosaic-img.tall {
        grid-row: span 2;
    }

    .img-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #d0ccc8, #b8b4b0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #767676;
    }

    /* ── INLINE SEASONS CARDS ── */
    .season-lead {
        font-size: 15px;
        line-height: 1.9;
        color: var(--ink-soft);
        margin: -8px 0 28px;
        max-width: 620px;
    }

    .seasons-inline {
        margin-top: 4px;
    }

    .season-card-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 14px;
    }

    .season-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 190px;
        padding: 20px 18px 18px;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: #fff;
        color: var(--ink);
        overflow: hidden;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .season-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 4px;
        background: var(--red);
        opacity: 0.9;
    }

    .season-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 34px rgba(0,0,0,0.08);
        border-color: var(--soft-red-border);
    }

    .season-card-top {
        position: relative;
        z-index: 2;
    }

    .season-card-kanji {
        font-size: 30px;
        font-weight: 900;
        color: rgba(177,34,42,0.16);
        line-height: 1;
        margin-bottom: 10px;
    }

    .season-card-name {
        font-size: 20px;
        font-weight: 900;
        color: var(--ink);
        margin-bottom: 8px;
    }

    .season-card-desc {
        font-size: 13px;
        line-height: 1.65;
        color: var(--ink-soft);
    }

    .season-card-link {
        position: relative;
        z-index: 2;
        margin-top: 18px;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--red);
    }

    .things-showcase-full {
        width: 100%;
        margin: 0 0 64px;
        padding: 0;
        border-bottom: none;
        background: transparent;
    }

    .things-showcase-full .things-showcase {
        width: 100%;
        max-width: none;
        border-radius: 0;
        position: relative;
        overflow: visible;
        background: transparent;
    }

    .things-showcase-bg {
        display: none;
    }

    .things-showcase-full .things-showcase-inner {
        max-width: 1080px;
        margin: 0 auto;
        padding: 0 32px 64px;
        position: relative;
        z-index: 2;
    }

    .things-showcase-full .things-showcase-inner::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 32px;
        right: 32px;
        height: 1px;
        background: var(--border);
    }

    .things-showcase-header {
        margin-bottom: 28px;
    }

    .things-showcase-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 10px;
    }

    .things-showcase-title {
        font-size: 38px;
        font-weight: 900;
        color: #111;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .things-showcase-text {
        font-size: 15px;
        line-height: 1.9;
        color: var(--ink-soft);
        max-width: 620px;
    }

    .things-tabs {
        display: flex;
        border-bottom: 1px solid #ececec;
        margin-bottom: 48px;
        position: relative;
    }

    .things-tab {
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 17px 18px;
        border: none;
        border-bottom: 3px solid transparent;
        background: none;
        font-family: inherit;
        font-size: 18px;
        font-weight: 700;
        color: #767676;
        cursor: pointer;
        transition: color 0.18s ease;
        white-space: nowrap;
        margin-bottom: -1px;
    }

    .things-tab:hover {
        color: #e60000;
    }

    .things-tab.active {
        color: #e60000;
    }

    .things-tab-indicator {
        position: absolute;
        bottom: -1px;
        height: 3px;
        background: #e60000;
        transition: left 0.3s ease, width 0.3s ease;
        pointer-events: none;
    }

    .things-panel {
        display: none;
    }

    .things-panel.active {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .things-row-card {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: #fff;
        text-decoration: none;
        color: var(--ink);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .things-row-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    }

    .things-row-card-img {
        position: relative;
        aspect-ratio: 16/9;
        overflow: hidden;
    }

    .things-row-card-img-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-color: #efeae5;
        transition: transform 0.4s ease;
    }

    .things-row-card:hover .things-row-card-img-bg {
        transform: scale(1.06);
    }

    .things-row-card-body {
        padding: 14px 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .things-row-card-name {
        font-size: 16px;
        font-weight: 900;
        color: var(--ink);
        line-height: 1.2;
    }

    .things-row-card-desc {
        font-size: 13px;
        line-height: 1.6;
        color: var(--ink-soft);
    }

    .things-row-card-link {
        font-size: 11px;
        font-weight: 700;
        color: #e60000;
        margin-top: auto;
        padding-top: 8px;
    }

    @media (max-width: 760px) {
        .things-panel.active {
            grid-template-columns: 1fr;
        }

        .things-showcase-full .things-showcase-inner {
            padding: 0 20px;
        }
    }

    /* ===== Destination explorer: cards with badges + season-style detail panel ===== */
    .dest-card {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;
        text-align: left;
        font-family: inherit;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #ececec;
        background: #fff;
        color: #111;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .dest-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    }

    .dest-card:focus-visible {
        outline: 2px solid #999;
        outline-offset: 2px;
    }

    .dest-card-img {
        position: relative;
        aspect-ratio: 16 / 9;
        background-size: cover;
        background-position: center;
        background-color: #efeae5;
    }

    .dest-card-body {
        padding: 14px 16px 18px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .dest-card-name {
        font-size: 16px;
        font-weight: 900;
        color: #111;
        line-height: 1.2;
    }

    .dest-card-desc {
        font-size: 13px;
        line-height: 1.6;
        color: #555;
    }

    /* shared detail panel - animatable open/close, season-style interior */
    .dest-detail {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.32s ease;
    }

    .dest-detail.open {
        grid-template-rows: 1fr;
        margin-top: 18px;
    }

    .dest-detail-inner {
        overflow: hidden;
    }

    .dest-detail-card {
        position: relative;
        border: 1px solid #ececec;
        border-radius: 16px;
        background: #fff;
        padding: 22px 24px 24px;
    }

    .dest-detail-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ececec;
        border-radius: 999px;
        background: #fff;
        color: #555;
        font-size: 14px;
        cursor: pointer;
        transition: 0.18s;
    }

    .dest-detail-close:hover {
        border-color: #e60000;
        color: #e60000;
    }

    .dest-detail-kicker {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #b1222a;
        margin-bottom: 8px;
    }

    .dest-detail-name {
        font-size: 24px;
        font-weight: 900;
        color: #111;
        line-height: 1.15;
        margin: 0 0 14px;
        padding-right: 40px;
    }

    .dest-detail-card p {
        font-size: 14.5px;
        line-height: 1.85;
        color: #444;
        margin: 0 0 14px;
    }

    @media (max-width: 760px) {
        .dest-detail-card {
            padding: 18px 16px 20px;
        }

        .dest-detail-name {
            font-size: 21px;
        }
    }

    .bottom-trip-planner {
        background: #faf8f6;
        border-top: 1px solid #ececec;
        border-bottom: 1px solid #ececec;
        padding: 56px 32px;
    }

    .bottom-trip-planner-inner {
        max-width: 1080px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
    }

    .bottom-trip-planner-eyebrow {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #e60000;
        margin-bottom: 10px;
    }

    .bottom-trip-planner-title {
        font-size: 32px;
        font-weight: 900;
        color: #111;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .bottom-trip-planner-title span {
        color: #e60000;
    }

    .bottom-trip-planner-text {
        font-size: 14px;
        color: #444;
        line-height: 1.8;
    }

    .bottom-trip-planner-form {
        display: flex;
        flex-direction: column;
    }

    .bottom-trip-planner-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .bottom-trip-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .bottom-trip-field-full {
        grid-column: span 2;
    }

    .bottom-trip-field label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #666;
    }

    .bottom-trip-field input, .bottom-trip-field select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ececec;
        border-radius: 8px;
        font-family: var(--sans);
        font-size: 13px;
        color: #111;
        background: #fff;
        transition: border-color 0.2s;
    }

    .bottom-trip-field input:focus, .bottom-trip-field select:focus {
        outline: none;
        border-color: #e60000;
    }

    .bottom-trip-submit {
        width: 100%;
        padding: 13px;
        background: #e60000;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        margin-top: 10px;
        transition: background 0.2s;
    }

    .bottom-trip-submit:hover {
        background: #b1222a;
    }

    .bottom-region-cta {
        background: #e60000;
        padding: 48px 64px;
    }

    .bottom-region-cta-inner {
        max-width: 1080px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }

    .bottom-region-cta h2 {
        font-size: 30px;
        font-weight: 900;
        color: #fff;
        margin-bottom: 6px;
    }

    .bottom-region-cta p {
        font-size: 15px;
        line-height: 1.6;
        color: #fff;
        max-width: 560px;
    }

    .bottom-region-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 32px;
        background: #fff;
        color: #e60000;
        border-radius: 999px;
        font-weight: 900;
        font-size: 15px;
        white-space: nowrap;
        flex-shrink: 0;
        text-decoration: none;
        transition: all 0.2s;
    }

    .bottom-region-cta-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .bottom-region-cta-btn i {
        font-size: 13px;
    }

    @media (max-width: 700px) {
        .things-tabs {
            grid-template-columns: 1fr;
        }

        .things-panel {
            grid-template-columns: 1fr;
        }

        .hero-kanji {
            font-size: 52px;
        }

        .hero-title {
            font-size: clamp(42px, 12vw, 72px);
        }

        .section-heading {
            font-size: 30px;
        }

        .things-showcase-title {
            font-size: 30px;
        }

        .bottom-trip-planner-grid {
            grid-template-columns: 1fr;
        }

        .bottom-trip-planner-title {
            font-size: clamp(34px, 10vw, 44px);
        }

        .bottom-region-cta h2 {
            font-size: clamp(30px, 9vw, 40px);
        }

        .bottom-region-cta-btn {
            width: 100%;
            min-width: 0;
        }
    }

    /* ── STICKY SECTION NAV ── */
    .section-nav {
        position: sticky;
        top: 74px;
        z-index: 15;
        background: rgba(255,255,255,0.82);
        backdrop-filter: blur(14px) saturate(1.4);
        -webkit-backdrop-filter: blur(14px) saturate(1.4);
        border-bottom: 1px solid #ececec;
    }

    .section-nav-inner {
        max-width: min(1200px, calc(100vw - 40px));
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        min-height: 76px;
        padding: 28px 0 16px;
    }

    .section-nav-inner::-webkit-scrollbar {
        display: none;
    }

    .section-nav-link {
        padding: 9px 18px;
        font-size: 13.5px;
        font-weight: 700;
        color: #555;
        text-decoration: none;
        white-space: nowrap;
        border-radius: 999px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    .section-nav-link:hover {
        background: #faf8f6;
        color: #111;
    }

    .section-nav-link.active {
        background: #e60000;
        color: #fff;
    }

    @media (max-width: 760px) {
        .section-nav-inner {
            justify-content: flex-start;
            gap: 4px;
        }
    }
    /* recommendation column removed: stack each transport row full-width */
    #getting-around .transport-list-grid{display:block;}
    #getting-around .transport-list-entry{display:block;margin-bottom:14px;}
    #getting-around .transport-list-entry:last-child{margin-bottom:0;}
  
  /* getting-around prose rework (scoped) */
  #getting-around .ga-prose{max-width:780px;margin:0 auto;}
  #getting-around .ga-prose p{font-size:16px;line-height:1.85;color:#444;margin:0 0 18px;}
  #getting-around .ga-prose p:last-child{margin-bottom:0;}
  #getting-around .ga-prose p b{font-weight:900;color:#111;}
  #getting-around .ga-prose-label{font-size:11px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#b1222a;margin:34px 0 14px;text-align:center;}

  #getting-around .ga-routes{max-width:780px;margin:0 auto;}
  #getting-around .ga-route{display:none;}
  #getting-around .ga-route.active{display:block;}
  #getting-around .ga-mode{margin-top:20px;}
  #getting-around .ga-mode:first-of-type{margin-top:16px;}
  #getting-around .ga-mode-head{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:#111;margin-bottom:6px;}
  #getting-around .ga-mode-head i{color:#e60000;font-size:13px;width:17px;text-align:center;}
  #getting-around .ga-route-head{font-size:18px;font-weight:900;line-height:1.3;color:#111;margin:0 0 18px;padding-left:14px;border-left:4px solid #ff0000;text-align:left;}
  #where-to-stay .stay-area-heading{border-left:4px solid #ff0000;border-bottom:none;padding:0 0 0 14px;line-height:1.2;margin-bottom:16px;}
  #where-to-stay .stay-area-name{color:#111;font-weight:900;}
  #where-to-eat .eat-section-label{display:block;border:none;color:#b1222a;font-weight:900;font-size:24px;text-align:center;text-transform:none;letter-spacing:normal;line-height:1.2;margin:28px 0 16px;padding:0;}
  #where-to-eat .eat-section-label::before{display:none;}
  #where-to-eat .eat-list-name{border:none;border-left:4px solid #ff0000;padding:0 0 0 14px;line-height:1.2;margin-bottom:6px;color:#111;font-weight:900;text-align:left;}
  #getting-around .ga-route p{font-size:16px;line-height:1.85;color:#444;margin:0;}

  #getting-around .ga-figure{margin:32px auto;max-width:780px;}
  #getting-around .ga-figure img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:14px;display:block;}
  #getting-around .ga-figure figcaption{font-size:13px;font-style:italic;color:#767676;margin-top:10px;text-align:center;}
  .content-section .section-header, #things-to-do .section-header{margin-bottom:22px;text-align:center;}
  .content-section .section-eyebrow, #things-to-do .section-eyebrow{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.22em;color:#b1222a;margin:0 0 8px;}
  .content-section .section-title-main, #things-to-do .section-title-main{font-size:26px;font-weight:900;color:#111;margin:0;line-height:1.15;}
  .content-section .section-title-line, #things-to-do .section-title-line{width:72px;height:4px;background:#ff0000;margin:10px auto 16px;}
  .content-section .section-sub-main, #things-to-do .section-sub-main{font-size:16px;line-height:1.85;color:#444;max-width:760px;margin:0 auto 22px;text-align:center;}
  #getting-around .departure-tabs{text-align:center;justify-content:center;margin:36px 0 28px;}
  /* ===== Planner: separate the Search stays button from the fields ===== */
  .bottom-trip-planner-form { gap: 18px; }
  /* ===== Provider selector (Book with), kyoto-style ===== */
  .providers-select-wrap { position: relative; }
  .providers-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 400; font-family: inherit; background: #fff; color: #111; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; }
  .providers-btn:hover { border-color: #e60000; color: #e60000; }
  .providers-btn.open { border-color: #e60000; }
  .providers-btn-label { text-align: left; }
  .providers-btn-chevron { font-size: 10px; color: #767676; transition: transform 0.18s ease, color 0.18s ease; flex-shrink: 0; }
  .providers-btn:hover .providers-btn-chevron { color: #e60000; }
  .providers-btn.open .providers-btn-chevron { transform: rotate(180deg); color: #e60000; }
  .providers-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 14px 40px rgba(0,0,0,0.12); padding: 16px; z-index: 200; display: none; max-height: 60vh; overflow-y: auto; }
  .providers-panel.open { display: block; }
  .providers-panel.open-up { top: auto; bottom: calc(100% + 6px); }
  /* Bottom-band calendar opens upward (page-closer planner sits low) */
  .bottom-trip-planner .date-picker-wrap .calendar-popover.sidebar-calendar { top: auto; bottom: calc(100% + 10px); left: 0; }
  @media (max-width: 960px) { .bottom-trip-planner .date-picker-wrap .calendar-popover.sidebar-calendar { top: calc(100% + 10px); bottom: auto; } }
  .providers-panel-header { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f3f3f3; }
  .providers-panel-eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #e60000; margin-bottom: 6px; }
  .providers-panel-sub { font-size: 12px; line-height: 1.5; color: #767676; }
  .providers-options { display: flex; flex-direction: column; gap: 4px; }
  .provider-option { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 1px solid #ececec; background: #fff; color: #222; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; text-align: left; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
  .provider-option:hover { border-color: #e60000; }
  .provider-option.active { border-color: #e60000; background: #fff8f8; color: #e60000; }
  .provider-option.active::after { content: '\2713'; font-weight: 900; color: #e60000; }

  
  /* Where-to-eat: address links to the place on Google Maps */
  .eat-list-where a.eat-addr-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(17,17,17,0.28); text-underline-offset: 2px; transition: color .15s ease; }
  .eat-list-where a.eat-addr-link:hover { color: #e60000; text-decoration-color: #e60000; }
  .eat-list-where a.eat-addr-link .fa-location-dot { color: #e60000; }
  
  /* Where to stay: provider-neutral "Compare prices" button */
  .hotel-view-btn.compare { background: #e60000; border: 1px solid #e60000; color: #fff; }
  .hotel-view-btn.compare:hover { background: #b1222a; border-color: #b1222a; color: #fff; }

    /* ── STANDARD SITE FOOTER (matches destination pages) ── */

    /* ── FOOTER NEWSLETTER STRIP ── */
    .site-footer .footer-newsletter {
        max-width: 1080px;
        margin: 0 auto;
        padding: 38px 32px 34px;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 36px;
        border-bottom: 1px solid #ececec;
    }

    .site-footer .footer-newsletter-eyebrow {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #e60000;
        margin-bottom: 8px;
    }

    .site-footer .footer-newsletter-title {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
        font-size: 28px;
        font-weight: 700;
        color: #111;
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .site-footer .footer-newsletter-sub {
        font-size: 14px;
        line-height: 1.7;
        color: #666;
        max-width: 500px;
    }

    .site-footer .footer-newsletter-action {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 9px;
        min-width: min(430px, 100%);
    }

    .site-footer .footer-newsletter-form {
        display: flex;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .site-footer .footer-newsletter-input {
        flex: 1;
        min-width: 0;
        padding: 14px 18px;
        border-radius: 999px;
        border: 1px solid #ddd;
        background: #fff;
        font-family: inherit;
        font-size: 14px;
        color: #111;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .site-footer .footer-newsletter-input::placeholder {
        color: #767676;
    }

    .site-footer .footer-newsletter-input:focus {
        border-color: #e60000;
        box-shadow: 0 0 0 3px rgba(230,0,0,0.08);
    }

    .site-footer .footer-newsletter-btn {
        flex-shrink: 0;
        padding: 0 26px;
        border-radius: 999px;
        border: none;
        background: #e60000;
        color: #fff;
        font-family: inherit;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.18s ease;
    }

    .site-footer .footer-newsletter-btn:hover {
        background: #b1222a;
    }

    .site-footer .footer-newsletter-thanks {
        display: none;
        font-size: 14px;
        font-weight: 800;
        color: #15803d;
    }

    .site-footer .footer-newsletter-thanks.show {
        display: block;
    }

    .site-footer .footer-newsletter-thanks i {
        margin-right: 6px;
    }

    @media (max-width: 780px) {
        .site-footer .footer-newsletter {
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 34px 22px 30px;
        }

        .site-footer .footer-newsletter-action {
            align-items: stretch;
            min-width: 0;
        }
    }

    @media (max-width: 520px) {
        .site-footer .footer-newsletter-form {
            flex-direction: column;
            gap: 18px;
        }

        .site-footer .footer-newsletter-btn {
            min-height: 46px;
        }

        .site-footer .footer-newsletter-title {
            font-size: 24px;
        }
    }

    .site-footer { background: #fff; border-top: 1px solid #ececec; font-family: "Noto Sans JP", system-ui, sans-serif; }
    .site-footer .foot { max-width: 1080px; margin: 0 auto; padding: 50px 32px 26px; }
    .site-footer .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 36px; }
    .site-footer .foot-brand { max-width: 270px; }
    .site-footer .foot-name { font-size: 22px; font-weight: 900; color: #e60000; margin-bottom: 10px; }
    .site-footer .foot-line { font-size: 13px; line-height: 1.7; color: #666; margin-bottom: 18px; }
    .site-footer .social-icons { display: flex; gap: 10px; justify-self: start; justify-content: flex-start; }
    .site-footer .social-icons a { width: 32px; height: 32px; border-radius: 50%; background: #f2f2f2; display: flex; align-items: center; justify-content: center; color: #333; font-size: 16px; text-decoration: none; transition: all 0.2s ease; }
    .site-footer .social-icons a:hover { background: #e60000; color: #fff; transform: translateY(-2px); }
    .site-footer .foot-h { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #111; margin-bottom: 14px; }
    .site-footer .foot-links a { display: block; font-size: 14px; color: #555; padding: 4px 0; text-decoration: none; transition: color 0.15s ease; }
    .site-footer .foot-links a:hover { color: #e60000; }
    .site-footer .foot-links a.foot-all { color: #b1222a; font-weight: 700; }
    .site-footer .foot-bottom { border-top: 1px solid #ececec; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; font-size: 12px; color: #767676; }
    .site-footer .foot-bottom-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
    .site-footer .foot-legal-links { display: flex; gap: 16px; }
    .site-footer .foot-legal-links a { color: #737373; text-decoration: none; transition: color 0.15s ease; }
    .site-footer .foot-legal-links a:hover { color: #e60000; }
    .site-footer a:focus-visible { outline: 2px solid #e60000; outline-offset: 3px; border-radius: 3px; }
    @media (max-width: 900px) { .site-footer .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 28px; } .site-footer .foot-brand { grid-column: 1 / -1; max-width: 320px; } }
    @media (max-width: 560px) { .site-footer .foot { padding: 40px 22px 24px; } .site-footer .foot-grid { grid-template-columns: 1fr 1fr; } .site-footer .foot-brand { grid-column: 1 / -1; } .site-footer .foot-bottom { flex-direction: column; align-items: flex-start; } }

    /* ════ MOBILE BAR ALIGNMENT ════
       Three separate causes were pulling the row out of line:

       1. header carried min-height: 84px but the row only produced 74px
          (42px burger + 16px padding top and bottom), and nav-container's
          height:100% resolved to auto against a min-height parent. So the
          whole bar sat ~5px above the header's optical centre.
       2. logo and header-right were absolutely centred on the padding box
          while the burger was centred by flex on the content box. Same
          result only while the vertical padding stayed symmetrical.
       3. the burger is a 22px icon inside a 42px tap target, so its box
          edge sits 10px outside the icon you actually see.

       Fixed by giving the bar one explicit height, pinning all three items
       with the identical formula so nothing is left to flex, and giving
       them a shared box height so none of it depends on content size. */
    @media (max-width: 760px), (max-height: 500px) {
        header { min-height: 0; }

        .nav-container {
            height: 62px;
            padding: 0 12px;
        }

        .mobile-nav-toggle,
        .logo,
        .header-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Pulled 9px left so the icon, not its 42px tap target, sits 12px
           in and matches the account chip on the other side. If the icon
           size changes, this is (42 - icon) / 2 subtracted from 12. */
        .mobile-nav-toggle {
            left: 3px;
            /* Optical nudge: the icon reads high against the heavier avatar,
               so it sits 2px below the shared centre line. */
            transform: translateY(calc(-50% + 2px));
        }

        .header-right { right: 12px; }

        .logo {
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* All three get the SAME box height, so alignment stops depending
           on their intrinsic content heights (30px logo mark, 38px account
           pill, 42px burger) and each just centres its own contents. Change
           the one value below and all three move together. */
        .mobile-nav-toggle,
        .logo,
        .header-right {
            height: 42px;
            align-items: center;
        }

        .logo-word { line-height: 1; }
    }

    /* ════ DRAWER ON SHORT VIEWPORTS ════
       Tighter rows so nine links plus the icons need much less scrolling
       on a 375px-tall screen. */
    @media (max-height: 500px) {
        .nav-links .nav-socials {
            padding: 10px 28px calc(8px + env(safe-area-inset-bottom));
        }

        .nav-links > a,
        .nav-links .nav-dropbtn,
        .nav-links .nav-dropdown-menu a {
            padding: 11px 24px;
            font-size: 15px;
        }

        .nav-back { padding: 11px 24px; font-size: 14px; }
    }

    /* ════ 1041-1260 BAND ════
       The 1260 step still needs ~1223px of header, so the bottom of its own
       band overflows and page background shows down the right (iPad Air in
       landscape is 1180). Everything except the social row is already near
       its floor: the five icons are 200px of fixed, unshrinkable width and
       the single largest inflexible block in the header. They are already
       in the footer and in the mobile drawer, so the header copy gives. */
    @media (min-width: 1041px) and (max-width: 1260px) {
        .nav-container .social-icons { display: none; }
        .nav-container .header-right { gap: 0; }

        .nav-container .account-name {
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
    }

    /* ════ 1261-1400 BAND ════
       Scoped above 1260 deliberately: appended at the end of the sheet it
       would otherwise outrank the tighter 1260 step at equal specificity
       and kill it. */
    @media (min-width: 1261px) and (max-width: 1400px) {
        .nav-container { gap: 22px; }
        .logo-mark { height: 42px; }
        .logo-word { font-size: 27px; }
        .nav-links { gap: 13px; }
        .nav-links a { font-size: 13.5px; }

        .nav-container .social-icons { gap: 8px; }
        .nav-container .social-icons a { width: 28px; height: 28px; font-size: 14px; }

        .nav-container .account-name {
            display: inline-block;
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
        }
    }

    /* ════ ACCOUNT CHIP EDGE ════
       .account-control { left: 24px } exactly cancels .nav-container's 24px
       padding, so the chip sits hard against the viewport edge on every
       screen where the 1560px container is not actually centred, which is
       everything under ~1608px. The nudge is deliberate on wide desktop,
       so it is kept there and dropped below. */
    @media (max-width: 1609px) {
        .account-control { left: 0; }
    }

    /* ════ SHORT VIEWPORTS ════
       Nest Hub is 1024x600: wide enough to miss the drawer, short enough
       that the stacked nav (~170px) eats a third of the fold. iPads sit in
       the same WIDTH band but are 1024-1180px tall, so they are fine as is
       — which is why this keys off height, not width. The stacked layout is
       kept exactly as it is, only the sizes come down: ~170px to ~122px. */
    @media (min-width: 761px) and (max-height: 700px) and (min-height: 501px) {
        /* Bottom padding runs heavier than the top: the socials and account
           row sat almost on the red border otherwise. */
        .nav-container { gap: 8px; padding: 8px 20px 15px; }

        .logo-mark { height: 30px; }
        .logo-word { font-size: 22px; }

        .nav-links { gap: 14px; }
        .nav-links a { font-size: 13px; }

        .nav-container .social-icons { gap: 8px; }
        .nav-container .social-icons a { width: 28px; height: 28px; font-size: 14px; }

        .account-avatar { width: 24px; height: 24px; font-size: 11px; }
        .account-trigger { padding: 3px 10px 3px 5px; }
        .account-signin { padding: 7px 14px; font-size: 13px; }
    }

    /* ════ HEADER ABOVE THE PLANNER PANELS ════
       .header-stack is z-index 20 while the planner's popovers sit far
       higher: providers-panel 120 (200 in the bottom planner), the calendar
       120, the guest panel and autocomplete list 90. So when the page is
       scrolled and a field sits behind the sticky header, its open panel
       drew straight over the nav.

       300 puts the header above all of them, so panels slide under it the
       way a sticky header should. Deliberately below the drawer's own
       layers — the scrim is 998 and the open header 1200 — so the mobile
       drawer still covers the page. */
    .header-stack {
        z-index: 300;
    }

    /* ════ WHY THE CHROME LIVES HERE TOO ════
       These pages load duplicate_seasons_destinations.css FIRST and this
       sheet LAST, and this sheet re-declares the whole header (root rules
       plus 1520/1260/1040 steps). Later file wins at equal specificity, so
       the drawer chrome arriving via the seasons sheet was being stomped by
       the legacy header rules below it in the cascade. The blocks above
       re-assert it after everything in this file. The planner, calendar and
       guest fixes are NOT duplicated here — they arrive via the seasons
       sheet and nothing in this file overrides them. */

    /* ════ HERO CAP ════
       Home-page shape: exactly one screen, no peek. The 91px was the desktop
       header hardcoded; the measured var tracks the real header at every
       width, svh follows mobile browser chrome, and the 580px floor has to
       go on short screens or it overflows the fold it is sized to fill. */
    .hero {
        height: calc(100vh - var(--header-h, 91px));
        height: calc(100svh - var(--header-h, 91px));
    }

    @media (max-height: 700px) {
        .hero { min-height: 0; }
    }

    /* ════ SECTION NAV ════
       Same treatment as the experiences hub and the highlight pages: pinned
       to the measured header instead of a hardcoded 74px, dropped entirely
       on phones in either orientation (stacked under the header it ate the
       screen; the section headings do the same job as you scroll), and the
       anchors only need to clear the header once the bar is gone. */
    .section-nav {
        top: var(--header-h, 74px);
    }

    @media (max-width: 700px), (max-height: 500px) {
        .section-nav { display: none; }

        section[id] {
            scroll-margin-top: calc(var(--header-h, 74px) + 12px);
        }
    }

    /* ════ HERO TEXT, MATCHED TO THE HIGHLIGHT PAGES ════
       Same hero, same treatment. Two gaps this sheet had against
       m-duplicate_destinations_highlights:

       1. PORTRAIT: the content kept its desktop `padding: 0 64px 80px` at
          every width, so on a 375px phone the hook was squeezed into a
          ~247px measure and wrapped into a tower. The highlight pages drop
          to 28px sides below 760.
       2. LANDSCAPE: nothing constrained the type, so the 72px title and the
          17px hook overflowed a ~313px-tall hero and clipped against its
          own `overflow: hidden`. Same numbers as the highlight block:
          centred, kanji 34, title clamp(30px, 6vw, 44px), hook 14px.

       Horizontal alignment stays left in both — the hook's 3px red left
       border is a left-edge treatment. */
    @media (max-width: 760px) {
        .hero-content {
            padding: 0 28px 56px;
        }
    }

    @media (max-height: 500px) {
        .hero { align-items: center; }

        .hero-content { padding: 24px 28px; }

        .hero-eyebrow { margin-bottom: 10px; }

        .hero-kanji {
            font-size: 34px;
            margin-bottom: 6px;
        }

        .hero-title {
            font-size: clamp(30px, 6vw, 44px);
            margin-bottom: 14px;
        }

        .hero-hook {
            font-size: 14px;
            line-height: 1.55;
            padding-left: 16px;
        }
    }

    /* ════ TAB INDICATOR CANNOT WIDEN THE PAGE ════
       Belt to the JS re-measure's braces: the sliding underline is absolutely
       positioned inside this row, and a stale width (sized at desktop, then
       the viewport shrinks) was sticking out the right edge and widening the
       whole document — the page then drags sideways and every 100%-width
       element crops. Clipping the row means the worst a stale indicator can
       ever do again is look short for 120ms until the re-measure lands. */
    .things-tabs {
        overflow: hidden;
    }

    /* ════ BOTTOM PLANNER COLLAPSES ON PHONES ════
       The root cause of the 17px white strip beside the hero at 412px. The
       seasons sheet collapses `.bottom-trip-planner-inner` to one column at
       760 — but this sheet re-declares the same selector at ROOT with
       `1fr 1fr` and loads LAST, and media queries add no specificity, so the
       later root rule won at every width. The planner stayed two-column on a
       phone: blurb beside a ~132px form whose min-content ran 17px past the
       viewport, widening the document (scrollWidth 429 at a 412 viewport)
       and cropping every 100%-wide element when the page dragged sideways.

       Re-stated here, after everything in this file, so the collapse
       finally lands. minmax(0, 1fr) and min-width: 0 are the standing 1fr
       treatment: a plain 1fr floors at min-content and can overflow even in
       the two-column band. */
    .bottom-trip-planner-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .bottom-trip-planner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bottom-trip-planner-grid > .planner-field {
        min-width: 0;
    }

    @media (max-width: 760px) {
        .bottom-trip-planner-inner {
            grid-template-columns: minmax(0, 1fr);
            gap: 32px;
        }
    }

    @media (max-width: 700px) {
        .bottom-trip-planner-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* ════ RED CTA BAND STACKS ON PHONES ════
       Found by sweeping for the same trap as the planner: 24 selectors get a
       mobile rule from the seasons sheet and a root re-declaration here, and
       this was the only other one with no later coverage of its own — the
       header set is re-covered by the drawer chrome above, and the footer
       and title sizes have their own mobile rules in this file. Without
       this, the band stayed a squeezed desktop row on phones. Values match
       the seasons sheet's 760 rule. */
    @media (max-width: 760px) {
        .bottom-region-cta-inner {
            flex-direction: column;
            align-items: flex-start;
            gap: 22px;
        }
    }
  


/* ========================================================================
   MOBILE  —  season-card mobile block
   ======================================================================== */
/* ════ SEASON CARDS — NARROW SCREENS ════
   .season-card-grid was repeat(4, 1fr) with no override at any width, so
   a 375px phone got 67px cards and the names/descriptions clipped. Two
   up from 820 down, then the card itself tightens at 700. Landscape
   phones go back to four across: they have the width and not the height. */
@media (max-width: 820px) {
    .season-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .page-body {
        padding: 44px 20px 60px;
    }

    .season-card-grid {
        gap: 12px;
    }

    .season-card {
        min-height: 0;
        padding: 16px 15px 15px;
        border-radius: 12px;
    }

    .season-card-kanji {
        font-size: 26px;
        margin-bottom: 8px;
    }

    .season-card-name {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .season-card-desc {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .season-card-link {
        margin-top: 14px;
    }
}

@media (min-width: 600px) and (max-height: 500px) {
    .season-card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .season-card {
        min-height: 0;
    }
}


/* ========================================================================
   MOBILE  —  intro mosaic in portrait
   ======================================================================== */
@media (max-width: 700px) {
    .intro-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        margin-bottom: 26px;
    }

    .mosaic-img {
        aspect-ratio: 4 / 3;
    }

    .mosaic-img.tall {
        grid-row: auto;
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }
}

/* landscape has the width and not the height: all three in one row */
@media (max-height: 500px) {
    .intro-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 10px;
    }

    .mosaic-img,
    .mosaic-img.tall {
        grid-row: auto;
        grid-column: auto;
        aspect-ratio: 4 / 3;
    }
}


/* ========================================================================
   MOBILE  —  destination detail panel
   ======================================================================== */
/* ── Figures inside the detail panel ──
   Was one paragraph followed by a block of three images. Now a lead
   figure, the paragraph, then a pair, so the text is broken up. */
.dd-fig {
    margin: 0 0 20px;
}

.dd-fig-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: #efeae5;
}

.dd-fig figcaption {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #767676;
}

.dd-fig-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.dd-fig-pair .dd-fig {
    margin-bottom: 0;
}

.dd-fig-pair .dd-fig-img {
    aspect-ratio: 4 / 3;
}

/* ── General information panel ──
   These classes had no rules in ANY of the four shared sheets, so the
   whole block rendered as bare text. Written here from scratch. */
.card-info-panel {
    margin-top: 4px;
    padding: 20px 22px 22px;
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #faf8f6;
}

.card-info-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b1222a;
    margin-bottom: 14px;
}

.card-info-list {
    display: flex;
    flex-direction: column;
}

.card-info-row {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid #ececec;
}

.card-info-row:first-child {
    border-top: none;
    padding-top: 0;
}

.card-info-k {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #111;
    padding-top: 3px;
}

.card-info-v {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
}

.card-info-v a {
    color: #e60000;
    font-weight: 700;
    text-decoration: none;
}

.card-info-v a:hover {
    text-decoration: underline;
}

.card-map-toggle {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    color: #111;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease;
}

.card-map-toggle:hover {
    border-color: #e60000;
    color: #e60000;
}

.card-map-toggle i:first-child {
    color: #e60000;
}

.card-map-toggle .chevron {
    font-size: 10px;
    transition: transform 0.22s ease;
}

.card-map-toggle.is-open .chevron {
    transform: rotate(180deg);
}

.card-map-embed {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.card-map-embed.open {
    max-height: 380px;
    margin-top: 14px;
}

.card-map-embed iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 12px;
}

/* ── Mobile: panel opens under the card you tapped ──
   #destDetail is one shared node parked after the whole grid, so at a
   single column it always opened below every card. The script now moves
   it in after the tapped card below 760, and this makes it span the
   grid and puts the card under the sticky header when it opens. */
@media (max-width: 760px) {
    .things-panel.active > .dest-detail {
        grid-column: 1 / -1;
    }

    .dest-card {
        scroll-margin-top: calc(var(--header-h, 74px) + 12px);
    }

    .dest-card.is-active {
        border-color: #e60000;
    }

    .card-info-panel {
        padding: 16px 16px 18px;
    }

    .card-info-row {
        grid-template-columns: 1fr;
        gap: 3px;
        padding: 10px 0;
    }

    .dd-fig-pair {
        gap: 10px;
    }
}


/* ========================================================================
   MOBILE  —  detail figures, capped on desktop
   ======================================================================== */
@media (min-width: 761px) {
    .dd-fig-img {
        max-height: 320px;
    }

    .dd-fig-pair .dd-fig-img {
        max-height: 320px;
    }

    .dd-fig-pair {
        gap: 16px;
    }
}


/* ========================================================================
   MOBILE  —  Getting to Hokkaido figure on short screens
   ======================================================================== */
@media (max-height: 500px) {
    #getting-around .ga-figure {
        margin: 22px auto;
    }

    #getting-around .ga-figure img {
        max-height: 260px;
    }

    #getting-around .ga-figure figcaption {
        font-size: 12px;
        margin-top: 8px;
    }
}


/* ========================================================================
   MOBILE  —  departure strip must not centre
   Companion to the scrolling strip in g-duplicate_destinations_transport.
   The base rule below in this same sheet centres the row, and centring an
   overflowing flex row pushes half the overflow out through the LEFT edge,
   where no scrollLeft can reach it, so the first tab is unreachable. Same
   specificity (0,1,1) and later in the file, which is why it lives here
   and not in the transport sheet.
   ======================================================================== */
@media (max-width: 760px) {
  #getting-around .departure-tabs {
    justify-content: flex-start;
    text-align: left;
    margin: 30px 0 0;
  }
}


/* ========================================================================
   MOBILE  —  scroll cue on the tab strips
   ======================================================================== */
.tabstrip {
    position: relative;
}

.tabstrip-cue {
    position: absolute;
    top: 0;
    bottom: 1px;
    width: 42px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #bbb;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.tabstrip-cue.right {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to right, rgba(255,255,255,0), #fff 62%);
}

.tabstrip-cue.left {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to left, rgba(255,255,255,0), #fff 62%);
}

.tabstrip.can-right .tabstrip-cue.right,
.tabstrip.can-left .tabstrip-cue.left {
    opacity: 1;
}


/* ========================================================================
   Images not filling their tiles

   SOURCE FOUND 30 Sep 2026. The margin comes from
   duplicate_seasons_destinations.css, which every prefecture page loads
   despite the name:

       section img:not(.story-card-image img):not(.food-slide img)
                 :not(.widget-slide img):not(.expand-slider img)
       { margin: 32px auto }

   Each :not() contributes the specificity of its own argument, so that
   selector scores (0,4,5) and outranks every plain `margin: 0` reset in
   these sheets. An absolutely positioned image with inset 0 is still
   shifted by its margin, so the tile background showed as a band across
   the top and the image was clipped at the bottom by overflow: hidden.

   !important is the honest fix here: a tile image must never carry a
   margin, so this is a reset rather than a preference, and it holds
   whatever the load order ends up being.
   ======================================================================== */
.mosaic-img img,
.eat-list-img img,
.eat-area-intro-img img,
.departure-city-img img,
#getting-around .ga-figure img {
  margin: 0 !important;
  display: block;
  max-width: none;
}
/* Shared destination photography, used by every prefecture page. */
body[data-page] img.dest-card-img,
body[data-page] img.dd-fig-img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  /* !important because duplicate_seasons_destinations.css, which every
     prefecture page also loads, carries
     `section img:not(...)  { margin: 32px auto }`. Each :not() adds the
     weight of its own argument, so that selector outranks this one and
     pushed every real card photo 32px down its card. A card image must
     never carry a margin, so this is a reset, not a preference. */
  margin: 0 !important;
  padding: 0;
  object-fit: cover;
}
body[data-page] .dest-card > img.dest-card-img {
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
}
.photo-context-note {
  font-size: 12px;
  color: #666;
  margin: 8px 0 18px;
}

/* Photo-specific hero sources and focal point. */
@media (max-width: 700px) {
 body[data-page="1-hokkaido"] .hero-img-layer {
  background-image: linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%), url("/images/c-destinations/destinations/a-hokkaido/1-hokkaido/hero-hokkaido-640.webp");
 }
}
@media (max-width: 700px) {
 body[data-page="2-aomori"] .hero-img-layer {
  background-image: linear-gradient(to bottom, rgba(10,18,30,0.25) 0%, rgba(10,18,30,0.65) 100%), url("/images/c-destinations/destinations/b-tohoku/2-aomori/hero-hirosaki-castle-640.webp");
 }
}

body[data-page="1-hokkaido"] .hero-img-layer {background-position: center 35%;}

    /* Season explorer, full width switcher (prefecture pages, option G) */
    .sx { position: relative; height: 560px; margin-top: 8px; overflow: hidden; border-radius: 6px; background: #111; color: #fff; }
    .sx-p { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; outline: none; }
    .sx-p.on { opacity: 1; visibility: visible; z-index: 1; transition: opacity .8s ease, visibility 0s; }
    .sx-p img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0 !important; object-fit: cover; }
    .sx-p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%), linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 30%); pointer-events: none; }
    .sx-lab { position: absolute; left: 48px; top: 52px; z-index: 2; max-width: 420px; padding: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
    .sx-k { display: none; }
    .sx-t { display: block; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: 46px; font-weight: 400; line-height: 1.05; }
    .sx-n { display: block; margin: 12px 0 16px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .9; }
    .sx-more p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: #fff; }
    .sx-lnk { display: inline-block; padding-bottom: 1px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 1px solid currentColor; }
    .sx-lnk:hover, .sx-lnk:focus-visible { border-bottom-width: 2px; }
    .sx-lnk::after { content: " \2192"; }
    .sx-nav { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255,255,255,.35); }
    .sx-nav button { position: relative; padding: 16px 24px 20px; background: none; border: 0; color: rgba(255,255,255,.72); font: inherit; text-align: left; cursor: pointer; }
    .sx-nav button b { display: block; font-size: 15px; font-weight: 600; color: #fff; }
    .sx-nav button span { font-size: 12px; }
    .sx-nav button::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: #fff; transition: width .3s; }
    .sx-nav button.on::before, .sx-nav button:hover::before { width: 100%; }
    .sx-nav button:hover b, .sx-nav button.on b { text-decoration: none; }
    .sx-nav button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

    @media (max-width: 700px) {
        .sx { height: 520px; }
        .sx-p::after { background: linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.6) 100%); }
        .sx-lab { left: 20px; right: 20px; top: 28px; max-width: none; }
        .sx-t { font-size: 34px; }
        .sx-n { margin: 8px 0 12px; }
        .sx-more p { font-size: 14.5px; }
        .sx-nav button { padding: 12px 10px 14px; }
        .sx-nav button b { font-size: 14px; }
        .sx-nav button span { display: block; font-size: 11px; }
    }

    @media (prefers-reduced-motion: reduce) {
        .sx-p, .sx-p.on, .sx-nav button::before { transition: none; }
    }