/* ============================================================
   duplicate_seasons_months.css  -  UNIVERSAL (complete)
   PART 1: chrome + infrastructure (brand tokens, body/type, nav,
   single + split hero, layout, section type, sidebar planner,
   calendar, autocomplete, guests, story cards, map, view-more,
   food slider, bottom widget, placeReveal keyframe)
   ============================================================ */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

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;
  --map-fill: #f6e9ec;
  --map-fill-hover: #f2b6c1;
  --map-fill-active: #e60023;
  --map-stroke: #ffffff;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #ffffff;
  color: #111;
}

a {
  text-decoration: none;
}

/* =========================
   HEADER
========================= */

    /* 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 - SINGLE HERO VERSION
   Use this for standard region pages
========================= */

.season-hero {
  position: relative;
  min-height: 500px;
  color: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.season-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

body[data-page="dc-winter-january"] .season-hero-bg {
  background-image: url("../images/dc-japan_winter/months/dc-winter_january/hero_zao_juhyo_pt13837.jpg");
}

body[data-page="dc-winter-february"] .season-hero-bg {
  background-image: url("../images/dc-japan_winter/months/dc-winter_february/hero_yokote_kamakura_pt30292.jpg");
}

body[data-page="dd-spring-march"] .season-hero-bg {
  background-image: url("../images/dd-japan_spring/months/dd-spring_march/hero_kawazu_zakura_pt78088.jpg");
}

body[data-page="dd-spring-april"] .season-hero-bg {
  background-image: url("../images/dd-japan_spring/months/dd-spring_april/hero_inokashira_sakura_pc.jpg");
}

body[data-page="dd-spring-may"] .season-hero-bg {
  background-image: url("../images/dd-japan_spring/months/dd-spring_may/hero_koinobori_pc.jpg");
}

body[data-page="da-summer-june"] .season-hero-bg {
  background-image: url("../images/da-japan_summer/months/da-summer_june/hero_ajisai_pc.jpg");
}

body[data-page="da-summer-july"] .season-hero-bg {
  background-image: url("../images/da-japan_summer/months/da-summer_july/hero_lavender_furano_pc.jpg");
}

body[data-page="da-summer-august"] .season-hero-bg {
  background-image: url("../images/da-japan_summer/months/da-summer_august/hero_omagari_fireworks_pt27497.jpg");
}

body[data-page="db-autumn-september"] .season-hero-bg {
  background-image: url("../images/db-japan_autumn/months/db-autumn_september/hero_higanbana_pt2105.jpg");
}

body[data-page="db-autumn-october"] .season-hero-bg {
  background-image: url("../images/db-japan_autumn/months/db-autumn_october/hero_nakamise_autumn_pc.jpg");
}

body[data-page="db-autumn-november"] .season-hero-bg {
  background-image: url("../images/db-japan_autumn/months/db-autumn_november/hero_fuji_arakurayama_pc.jpg");
}

body[data-page="dc-winter-december"] .season-hero-bg {
  background-image: url("../images/dc-japan_winter/months/dc-winter_december/hero_omotesando_lights_pc.jpg");
}

.season-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.78), rgba(0,0,0,0.42));
}

.season-hero-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  z-index: 1;
}

.season-eyebrow {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}

.season-title {
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 900;
  margin: 0 0 10px;
  line-height: 1.08;
}

.season-underline {
  width: 100px;
  height: 4px;
  border-radius: 999px;
  background: #ff0000;
  margin-bottom: 24px;
}

.season-subtitle {
  font-size: 16px;
  line-height: 1.75;
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,0.96);
}

@media (max-width: 700px) {
  .season-hero-inner {
    padding: 56px 20px 64px;
  }

  .season-title {
    font-size: 36px;
  }
}

/* =========================
   HERO - SPLIT HERO VERSION
   Add class="season-hero split-hero"
========================= */

.split-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  overflow: hidden;
}

.hero-panel {
  position: relative;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition: filter 0.4s ease, transform 0.4s ease;
}

.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.74), rgba(0,0,0,0.16)),
    linear-gradient(to right, rgba(0,0,0,0.56), rgba(0,0,0,0.08));
  z-index: 1;
}

.hero-panel-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 24px 180px;
}

.hero-panel:first-child {
  border-right: none;
}

.split-hero:has(.hero-panel:hover) .hero-panel:not(:hover) {
  filter: brightness(0.4);
}

.split-hero .hero-panel:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
  cursor: pointer;
}

@media (max-width: 900px) {
  .split-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-panel {
    min-height: 420px;
  }

  .hero-panel:first-child {
    border-bottom: 2px solid rgba(255,255,255,0.16);
  }

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

  .season-title {
    font-size: clamp(34px, 8vw, 48px);
  }

  .season-subtitle {
    font-size: 15px;
    max-width: 100%;
  }

  .season-underline {
    width: 90px;
    margin-bottom: 20px;
  }
}

/* =========================
   MAIN LAYOUT
========================= */

.season-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: 56px;
}

@media (max-width: 960px) {
  .season-layout {
    grid-template-columns: 1fr;
  }
}

article {
  transition: opacity 0.3s ease;
}

article.is-switching {
  opacity: 0;
}

/* =========================
   SECTION TYPOGRAPHY
========================= */

.section-eyebrow {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand-red);
  margin-bottom: 6px;
}

.section-title {
  font-size: 26px;
  font-weight: 900;
  color: #111;
  margin: 0 0 12px;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}

.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: #ff0000;
}

.section-body {
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  margin: 0 0 14px;
  max-width: none;
}

.section-subheading {
  font-size: 18px;
  font-weight: 900;
  color: #222;
  margin: 36px 0 12px;
  padding-left: 14px;
  border-left: 4px solid #e60000;
  line-height: 1.4;
}

/* Body imagery only. Card, slider and widget images set their own layout,
   so they are excluded here instead of each one zeroing this margin. */
section img:not(.story-card-image img):not(.food-slide img):not(.widget-slide img):not(.expand-slider img) {
  margin: 32px auto;
  display: block;
  width: 100%;
}

/* =========================
   HIGHLIGHT BOX
========================= */

.highlight-box {
  margin-top: 28px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid #f1d6d6;
  background: linear-gradient(135deg, #fff7f7, #fffafa);
  font-size: 15px;
  color: #444;
  max-width: 720px;
  position: relative;
}

.highlight-link {
  display: inline-block;
  margin-top: 10px;
  font-weight: 800;
  color: #e60000;
  text-decoration: underline;
  transition: all 0.2s ease;
}

.highlight-link:hover {
  transform: translateX(4px);
}

.highlight-when {
  font-size: 16px;
  font-weight: 800;
  color: rgb(88, 81, 81);
  margin-bottom: 6px;
}

/* =========================
   SIDEBAR / CONTENTS / PLANNER
========================= */

aside {
  position: sticky;
  top: 104px;
  align-self: start;
}

.sidebar-stack {
  display: grid;
  gap: 22px;
}

.sidebar-heading {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand-red);
  margin: 28px 0 10px;
}

.sidebar-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.contents-card {
  margin-bottom: 28px;
  padding: 0;
  background: #fff;
  border: 1px solid #ececec;
  border-top: 3px solid #e60000;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.contents-top {
  padding: 22px 22px 16px;
  background: linear-gradient(180deg, #fffdfd 0%, #ffffff 100%);
  border-bottom: 1px solid #f1eeee;
  position: relative;
}

.contents-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 8px;
}

.contents-title {
  font-size: 18px;
  font-weight: 900;
  color: #1d1d1d;
  margin: 0;
  line-height: 1.25;
}

.contents-list {
  padding: 8px 12px 12px;
}

.contents-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 12px;
  color: #222;
  font-weight: 800;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contents-link:hover {
  background: #fff6f6;
  color: #e60000;
  transform: translateX(3px);
}

.contents-link + .contents-link {
  border-top: 1px solid #f3f3f3;
  border-radius: 0;
  margin-top: 2px;
  padding-top: 16px;
}

.contents-link span:last-child {
  font-size: 13px;
  color: #b8a3a3;
  transition: color 0.2s ease, transform 0.2s ease;
}

.contents-link:hover span:last-child {
  color: #e60000;
  transform: translateX(2px);
}

.sidebar-planner {
  background: #fff;
  border: 1px solid #ececec;
  border-top: 3px solid #e60000;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  overflow: visible;
  margin-top: 10px;
}

.planner-shell {
  padding: 18px 18px 20px;
}

.planner-eyebrow {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 8px;
}

.planner-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
  font-weight: 900;
  color: #111;
}

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

.planner-underline {
  width: 54px;
  height: 3px;
  background: #e60000;
  margin: 12px 0 12px;
}

.planner-subtitle {
  margin: 0 0 18px;
  color: #555;
  line-height: 1.6;
  font-size: 13px;
}

.planner-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.planner-field.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.planner-field.full {
  grid-column: 1 / -1;
}

.planner-field.book-with {
  margin-top: 16px;
}

.planner-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #1f1f1f;
  margin-bottom: 4px;
}

.planner-input,
.planner-select,
.guest-display {
  width: 100%;
  height: 44px;
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: #111;
  outline: none;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.planner-input:focus,
.planner-select:focus,
.guest-display:focus {
  border-color: #e60000;
}

.planner-select-wrap {
  position: relative;
}

.planner-select {
  padding-right: 40px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.planner-select-wrap::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: #767676;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.planner-actions {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.planner-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: none;
  background: #e60000;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.planner-button:hover {
  background: #c40000;
  transform: translateY(-1px);
}

.planner-note {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.arrow-icon {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 1040px) {
  aside {
    position: static;
  }
}

/* =========================
   DATE PICKER / CALENDAR
========================= */

.calendar-grid-shell {
  padding: 0 14px 14px;
}

.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-days {
  height: 216px;
}

.calendar-weekdays div {
  text-align: center;
  font-size: 12px;
  color: #737373;
  padding: 4px 0 6px;
}

.calendar-day {
  border: none;
  background: #fff;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: #222;
}

.calendar-day.empty {
  cursor: default;
  background: transparent;
}

.calendar-day:hover:not(.empty) {
  background: #fff1f1;
}

.calendar-day.selected {
  background: #e60000;
  color: #fff;
  font-weight: 800;
}

.calendar-day.disabled {
  color: #c8c8c8;
  cursor: not-allowed;
  background: #fafafa;
}

.calendar-day.disabled:hover {
  background: #fafafa;
}

.date-picker-wrap {
  position: relative;
}

.date-trigger {
  width: 100%;
  height: 44px;
  border: 1px solid #dcdcdc;
  background: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: #111;
  outline: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.date-trigger.empty {
  color: #737373;
}

.date-trigger i {
  color: #767676;
  font-size: 14px;
  margin-left: 10px;
}

.date-trigger.active-date {
  border-color: #e60000;
  color: #e60000;
}

.date-trigger.active-date i {
  color: #e60000;
}

.calendar-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.14);
  z-index: 120;
  display: none;
}

.calendar-popover.show {
  display: block;
}

.sidebar-calendar {
  width: 320px;
}

.bottom-calendar {
  width: 320px;
  max-width: min(320px, calc(100vw - 40px));
}

.sidebar-planner .date-picker-wrap .calendar-popover.sidebar-calendar {
  top: auto;
  bottom: calc(100% + 10px);
  left: 0;
}

.calendar-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 14px 16px 10px;
}

.calendar-nav.prev-month {
  justify-self: start;
}

.calendar-nav.next-month {
  justify-self: end;
}

.calendar-month-title {
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #222;
}

.calendar-nav {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  font-size: 18px;
  font-weight: 800;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-nav:hover {
  background: rgba(230, 0, 0, 0.08);
  border-color: #e60000;
  color: #e60000;
  transform: translateY(-1px);
}

@media (max-width: 1040px) {
  .sidebar-planner .date-picker-wrap .calendar-popover.sidebar-calendar {
    top: calc(100% + 10px);
    bottom: auto;
    left: 0;
  }
}

/* =========================
   AUTOCOMPLETE / GUEST PICKER
========================= */

.autocomplete-field,
.autocomplete-wrap,
.guest-picker {
  position: relative;
}

.autocomplete-input {
  padding-right: 40px;
}

.autocomplete-wrap::after {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #767676;
  pointer-events: none;
}

.autocomplete-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 90;
  display: none;
  max-height: 280px;
  overflow-y: auto;
}

.autocomplete-list.show {
  display: block;
}

.autocomplete-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f3f3f3;
  transition: background 0.18s ease, color 0.18s ease;
}

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

.autocomplete-item:hover,
.autocomplete-item.active {
  background: #fff6f6;
}

.autocomplete-item-title {
  font-size: 14px;
  font-weight: 800;
  color: #1f1f1f;
  line-height: 1.35;
}

.autocomplete-item:hover .autocomplete-item-title {
  color: #e60000;
}

.autocomplete-item-subtitle {
  font-size: 12px;
  color: #737373;
  margin-top: 2px;
}

.no-results {
  padding: 13px 14px;
  font-size: 13px;
  color: #737373;
}

.guest-display {
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 14px;
}

.guest-display::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11px;
  color: #767676;
  margin-left: 12px;
}

.guest-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  padding: 14px;
  display: none;
  z-index: 90;
}

.guest-panel.show {
  display: block;
}

.guest-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.guest-row + .guest-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f1f1;
}

.guest-copy {
  display: grid;
  gap: 2px;
}

.guest-copy strong {
  font-size: 14px;
  color: #222;
}

.guest-copy span {
  font-size: 12px;
  color: #737373;
}

.guest-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-controls button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #333;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.guest-controls button:hover {
  background: #fff6f6;
  border-color: #f0c3c3;
  color: #e60000;
}

.guest-value {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
}

/* =========================
   STORY CARD / RELATED ARTICLE
========================= */

.story-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  margin-bottom: 18px;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.story-card:hover {
  transform: translateY(-3px);
  border-color: #ffd1d1;
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);
}

.story-card-image {
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.story-card-image img {
  width: 100%;
  height: 100%;
  margin: 0;                 /* beats the global `section img { margin: 32px auto }` */
  object-fit: cover;
  object-position: center;
  display: block;
}

.story-card-body {
  padding: 14px 16px 16px;
}

.story-card-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 6px;
}

.story-card-title {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 6px;
  color: #222;
  line-height: 1.3;
}

.story-card-text {
  font-size: 13px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* =========================
   REGION MAP / PREFECTURE DETAIL
========================= */

.spring-region-picker {
  margin: 24px 0 10px;
  max-width: 1000px;
}

.spring-region-display {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.04);
  padding: 20px;
}

.spring-region-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 6px;
}

.spring-region-title {
  font-size: 24px;
  font-weight: 900;
  color: #222;
  margin: 0 0 10px;
  line-height: 1.2;
}

.spring-region-summary {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted-text);
  margin: 0 0 14px;
}

.spring-region-tag {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-red-border);
  background: var(--soft-red-bg);
  color: #8a3c42;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.spring-region-map-wrap {
  margin-top: 6px;
  padding: 24px 24px 18px;
  border: 1px solid #efefef;
  border-radius: 12px;
  background: #fcfcfc;
  min-height: 520px;
}

.spring-region-map-wrap.region-chubu-wrap {
  min-height: 720px;
  padding: 32px 36px 28px;
}

.spring-region-map-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin: 0 0 28px;
}

.spring-region-map {
  width: 100%;
  min-height: 430px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spring-region-map.region-chubu {
  min-height: 640px;
}

.spring-region-map svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.spring-region-map.region-kanto svg,
.spring-region-map.region-tohoku svg {
  max-width: 560px;
}

.spring-region-map.region-chubu svg {
  width: min(100%, 820px);
}

.spring-region-map path {
  fill: var(--map-fill);
  stroke: var(--map-stroke);
  stroke-width: 0.6;
  transition: fill 0.25s ease;
  cursor: pointer;
}

.spring-region-map path:hover,
.spring-region-map path.hover-group {
  fill: var(--map-fill-hover);
}

.spring-region-map path.active-prefecture {
  fill: var(--map-fill-active);
}

.spring-region-map-empty {
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

.pref-label {
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-size: 2.9px;
  font-weight: 800;
  fill: #9c4a5a;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.pref-label-left {
  text-anchor: end;
}

.pref-line {
  stroke: #9c4a5a;
  stroke-width: 3.4;
  vector-effect: non-scaling-stroke;
  fill: none;
  pointer-events: none;
}

.spring-region-map.region-hokkaido .pref-label { font-size: 7.2px; }
.spring-region-map.region-tohoku .pref-label { font-size: 4.2px; }
.spring-region-map.region-kanto .pref-label { font-size: 3.2px; }
.spring-region-map.region-chubu .pref-label { font-size: 4.2px; }
.spring-region-map.region-kansai .pref-label { font-size: 2.8px; }
.spring-region-map.region-chugoku .pref-label { font-size: 3.4px; }
.spring-region-map.region-shikoku .pref-label { font-size: 2.6px; }
.spring-region-map.region-kyushu .pref-label { font-size: 3.4px; }

.pref-label.active-label {
  fill: #fff7f8;
}

.pref-label.special-label.active-label,
.pref-label.highlight {
  fill: #e60023;
}

.active-line {
  stroke: #fff7f8;
}

.prefecture-detail {
  scroll-margin-top: 120px;
  margin-top: 16px;
  border-top: 1px solid #ececec;
  padding-top: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.prefecture-detail.show {
  opacity: 1;
  transform: translateY(0);
}

.prefecture-detail-inner {
  display: grid;
  gap: 24px;
}

.prefecture-detail-header {
  max-width: 780px;
}

.prefecture-detail-title {
  font-size: 28px;
  font-weight: 900;
  color: #222;
  margin: 0 0 12px;
  line-height: 1.15;
}

.prefecture-detail-summary {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin: 0;
  max-width: 760px;
}

.prefecture-detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.prefecture-detail-image-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 10px 0 18px;
}

.prefecture-detail-image-row img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  background: #f4f4f4;
}

.prefecture-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.prefecture-detail-tag {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--soft-red-border);
  background: var(--soft-red-bg);
  color: #8a3c42;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.prefecture-detail-sections {
  display: grid;
  gap: 18px;
}

.prefecture-detail-section {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.prefecture-detail-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #222;
  margin: 0 0 8px;
}

.prefecture-detail-section-text {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

@media (max-width: 700px) {
  .prefecture-detail-image-row {
    grid-template-columns: 1fr;
  }
}

/* =========================
   VIEW MORE / MORE PLACES
========================= */

.more-places {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition:
    max-height 0.45s ease,
    opacity 0.35s ease,
    transform 0.35s ease;
}

.more-places.show {
  max-height: 4000px;
  opacity: 1;
  transform: translateY(0);
}

.view-more-wrapper {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}

.view-more-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #222;
  position: relative;
  transition: all 0.2s ease;
}

.view-more-inline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 36px;
  height: 2px;
  background: #e60000;
  border-radius: 999px;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}

.view-more-inline:hover {
  color: #e60000;
  border-color: #e60000;
  transform: translateY(-1px);
}

.view-more-inline:hover::after {
  width: 70%;
}

.view-more-inline span {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.view-more-inline:hover span {
  transform: translateY(2px);
}

.place-card {
  display: none;
  opacity: 0;
  transform: translateY(18px);
}

.place-card.is-visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.place-card.is-revealing {
  animation: placeReveal 0.45s ease forwards;
}

.place-card + .place-card {
  margin-top: 8px;
}

@keyframes placeReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   FOOD SLIDER
========================= */

.food-slider-section {
  background: transparent;
  padding: 0;
}

.food-slider-shell {
  position: relative;
  width: 100%;
  overflow: visible;
}

.food-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.food-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.food-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.food-slide.active {
  opacity: 1;
  pointer-events: auto;
}

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

.food-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  background: rgba(60, 60, 60, 0.72);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 28px;
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.food-arrow:hover {
  background: #e60000;
  transform: translateY(-50%) scale(1.04);
}

.food-arrow-left {
  left: 4px;
}

.food-arrow-right {
  right: 4px;
}

.food-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.food-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d5d5d5;
  cursor: pointer;
  padding: 0;
}

.food-dot.active {
  background: #e60000;
}

@media (max-width: 768px) {
  .food-arrow {
    width: 42px;
    height: 42px;
    font-size: 22px;
  }

  .food-arrow-left {
    left: 18px;
  }

  .food-arrow-right {
    right: 18px;
  }
}

/* =========================
   BOTTOM WIDGET / PLAN BEYOND YOUR STAY
========================= */

.bottom-widget-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 90px;
}

.bottom-widget-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.35fr);
  gap: 28px;
  background: linear-gradient(180deg, #fffefe 0%, #ffffff 100%);
  border: 1px solid #ececec;
  border-top: 4px solid #e60000;
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
  overflow: visible;
}

.bottom-widget-copy {
  padding: 0;
  background: none;
  border-right: 1px solid #f1eded;
  border-top-left-radius: 22px;
  border-bottom-left-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.widget-copy-text {
  padding: 20px 28px 16px;
}

.bottom-widget-copy .planner-eyebrow {
  font-size: 11px;
  margin-bottom: 10px;
  color: var(--brand-red);
}

.bottom-widget-title {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.08;
  font-weight: 900;
  color: #111;
}

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

.bottom-widget-line {
  width: 72px;
  height: 4px;
  background: #e60000;
  border-radius: 999px;
  margin-bottom: 18px;
}

.widget-slideshow {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}

.widget-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.widget-slide.active {
  opacity: 1;
}

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

.widget-slide-caption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

.bottom-widget-form {
  padding: 34px 34px 34px 8px;
}

.bottom-form-grid.new-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
}

.field-destination { grid-column: 1 / 2; }
.field-checkin { grid-column: 2 / 3; }
.field-checkout { grid-column: 3 / 4; }
.field-guests { grid-column: 1 / 2; }
.field-platform { grid-column: 2 / 4; }

.bottom-submit-row {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
}

.bottom-widget-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  height: 52px;
  padding: 0 24px;
  border: none;
  border-radius: 12px;
  background: #e60000;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bottom-widget-button:hover {
  background: #c40000;
  transform: translateY(-1px);
}

.bottom-widget-note {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  max-width: 320px;
}

@media (max-width: 1040px) {
  .bottom-widget-card {
    grid-template-columns: 1fr;
  }

  .bottom-widget-copy {
    border-right: none;
    border-bottom: 1px solid #f1eded;
    border-top-right-radius: 22px;
    border-bottom-left-radius: 0;
  }

  .bottom-widget-form {
    padding: 28px 24px 28px;
  }
}

@media (max-width: 900px) {
  .bottom-form-grid.new-layout {
    grid-template-columns: 1fr;
  }

  .field-destination,
  .field-checkin,
  .field-checkout,
  .field-guests,
  .field-platform {
    grid-column: auto;
  }

  .bottom-submit-row {
    grid-template-columns: 1fr;
  }

  .bottom-widget-button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .planner-field.split,
  .bottom-form-grid {
    grid-template-columns: 1fr;
  }

  .bottom-widget-copy {
    padding: 28px 24px;
  }

  .bottom-widget-button {
    width: 100%;
  }
}

/* ============================================================
   PART 2: redesign components (loaded after Part 1 so the new
   design wins on shared selectors). expand-cards, card-info-panel,
   card map, providers button/panel, region CTA, site footer,
   bottom trip planner, guest/provider animations.
   ============================================================ */

  :root {
    /* autumn seasonal accent, used only for autumn-specific signals */
    --autumn-accent: #c2571f;
  }

  .block {
    margin-bottom: 64px;
  }

  .section-figure {
    margin: 26px 0 22px;
  }

  .section-figure img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: 16px;
    display: block;
  }

  .section-figure figcaption {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--muted-text);
  }

  /* -- Taller figure --
     The 16 / 7 band suits a wide landscape but crops a tall subject, a
     shrine front or a gate, down to its eaves. Add `tall` on the figure
     for a 16 / 9 box instead. A figure without the class does not move. */
  .section-figure.tall img {
    aspect-ratio: 16 / 9;
  }

  /* `taller` again for a subject shot in portrait, a staircase or a plate
     of food, where even 16 / 9 clips the top and bottom off it. */
  .section-figure.taller img {
    aspect-ratio: 4 / 3;
  }

  /* `tallest` for a strongly vertical subject, a gate seen head on or a wall
     of tied omikuji, where 4 / 3 still clips the top or the bottom off it. */
  .section-figure.tallest img {
    aspect-ratio: 5 / 4;
  }

  /* ─────────── the condense-and-expand card (shared component) ─────────── */
  .expand-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Map section spacing */
.prefecture-detail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* View More / View Less spacing in the map section */
.prefecture-detail-body > .view-more-wrapper {
  margin: 20px 0;
}

/* Only the extra cards revealed after clicking View More */
.prefecture-detail-body > .more-places {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.prefecture-detail-body > .more-places.show {
  opacity: 1;
}

/* Without this, the revealed children (flex items, default flex-shrink:1) get
   squashed to 0 height in the collapsed (max-height:0) container, so the panel
   measures ~0 and opens empty. This file's panels hold text sections and image
   rows rather than cards, so target every direct child. */
.prefecture-detail-body > .more-places > .expand-card {
  flex-shrink: 0;
}

  .expand-card {
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .expand-card:hover {
    border-color: var(--soft-red-border);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.05);
  }

  .expand-card.open {
    border-color: var(--soft-red-border);
  }

  .expand-card-head {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: stretch;
    cursor: pointer;
  }

  .expand-card-thumb {
    background-size: cover;
    background-position: center;
  }

  .expand-card-main {
    padding: 16px 18px;
  }

  .expand-card-kicker {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--muted-text);
    margin-bottom: 5px;
  }

  .expand-card-name {
    font-size: 19px;
    font-weight: 900;
    color: #111;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  .expand-card-hook {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .expand-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 4px;
  }

  .expand-fact {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: #444;
  }

  .expand-fact i {
    color: var(--autumn-accent);
    font-size: 12px;
    width: 14px;
    text-align: center;
  }

  .expand-fact b {
    font-weight: 500;
    color: var(--muted-text);
  }

  /* expand mechanism: animatable grid rows */
  .expand-card-more {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.32s ease;
  }

  .expand-card.open .expand-card-more {
    grid-template-rows: 1fr;
  }

  .expand-card-more-inner {
    overflow: hidden;
  }

  .expand-card-detail {
    padding: 18px;
  }

  .expand-card-detail > :last-child {
    margin-bottom: 0;
  }

  .expand-card.open .expand-card-detail {
    border-top: 1px solid #f2eae6;
  }

  .expand-card-detail p {
    font-size: 14.5px;
    line-height: 1.85;
    color: #444;
    margin-bottom: 12px;
  }

  .expand-access {
    font-size: 13px;
    color: var(--muted-text);
    line-height: 1.7;
    border-left: 3px solid var(--card-border);
    padding-left: 12px;
    margin-bottom: 12px;
  }

  /* general information block (compact version of the Shikotsu reference) */
  .card-info-panel {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
    margin-top: 6px;
  }

  .card-info-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-red);
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--card-border);
  }

  .card-info-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--card-border);
  }

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

  .card-info-k {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-text);
    padding-top: 2px;
  }

  .card-info-v {
    font-size: 13px;
    color: #444;
    line-height: 1.6;
  }

  .card-info-v a {
    color: var(--brand-red);
    font-weight: 700;
  }

  /* tap-to-show map */
  .card-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-red);
    cursor: pointer;
    transition: 0.18s;
  }

  .card-map-toggle:hover {
    border-color: var(--brand-red-strong);
  }

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

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

  .card-map-embed {
    display: none;
    margin-top: 12px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
  }

  .card-map-embed.open {
    display: block;
  }

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

  .expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-red);
    transition: 0.18s;
  }

  .expand-toggle:hover {
    border-color: var(--brand-red-strong);
    background: #faf8f6;
  }

  .expand-toggle i {
    font-size: 11px;
    transition: transform 0.28s ease;
  }

  .expand-card.open .expand-toggle i {
    transform: rotate(180deg);
  }

  .expand-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }

  .expand-slider .s {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
  }

  @media (max-width: 560px) {
    .expand-card-head {
      grid-template-columns: 1fr;
    }

    .expand-card-thumb {
      min-height: 148px;
    }
  }

  /* section-level reveal, original fade-in from the seasonal pages */
  .expand-extra {
    display: none;
    opacity: 0;
    transform: translateY(18px);
  }

  .expand-extra.is-visible {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  .expand-extra.is-revealing {
    animation: placeReveal 0.45s ease forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .expand-card-more,
    .expand-toggle i {
      transition: none;
    }

    .expand-extra.is-revealing {
      animation: none;
    }
  }

  /* DEMO override: consistent rounded hover box on the Contents nav links.
     Proper home is .contents-link + .contents-link in the shared sheet. */
  .contents-link + .contents-link {
    border-radius: 12px;
  }

  .contents-link:hover {
    border-top-color: transparent;
  }

/* ---- bottom trip planner, region CTA, footer (matches Hokkaido) ---- */
  .book-with .providers-select-wrap { position: relative; }
  .providers-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; border: 1px solid #ddd; border-radius: 10px; height: 44px; padding: 0 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: var(--brand-red-strong, #e60000); color: var(--brand-red-strong, #e60000); }
  .providers-btn.open { border-color: var(--brand-red-strong, #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: var(--brand-red-strong, #e60000); }
  .providers-btn.open .providers-btn-chevron { transform: rotate(180deg); color: var(--brand-red-strong, #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: 120; display: none; max-height: 60vh; overflow-y: auto;
  }
  .providers-panel.open { display: block; }
  .providers-panel.open-up { top: auto; bottom: calc(100% + 6px); }
  .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: var(--brand-red-strong, #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: var(--brand-red-strong, #e60000); }
  .provider-option.active { border-color: var(--brand-red-strong, #e60000); background: #fff8f8; color: var(--brand-red-strong, #e60000); }
  .provider-option.active::after { content: '\2713'; font-weight: 900; color: var(--brand-red-strong, #e60000); }
  

  /* ===== Bottom CTA band ===== */
  .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: 0 0 6px; }
  .bottom-region-cta p { font-size: 15px; color: #fff; margin: 0; max-width: 560px; line-height: 1.6; }
  .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 i { font-size: 13px; }
  .bottom-region-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
  @media (max-width: 760px) { .bottom-region-cta { padding: 36px 24px; } .bottom-region-cta-inner { flex-direction: column; align-items: flex-start; gap: 22px; } .bottom-region-cta h2 { font-size: clamp(28px, 8vw, 36px); } .bottom-region-cta-btn { width: 100%; min-width: 0; justify-content: center; } }
  

  /* ===== Full-width bottom planner (own scope) ===== */
  .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; gap: 18px; }
  .bottom-trip-planner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .bottom-trip-planner .bt-field-full { grid-column: 1 / -1; }
  .bottom-trip-planner .providers-panel { z-index: 200; }
  /* Book with shares a grid row with Guests here, so drop the sidebar-only top margin that pushed it lower */
  .bottom-trip-planner .planner-field.book-with { margin-top: 0; }
  @media (max-width: 760px) {
    .bottom-trip-planner { padding: 40px 22px; }
    .bottom-trip-planner-inner { grid-template-columns: 1fr; gap: 32px; }
    .bottom-trip-planner-grid { grid-template-columns: 1fr; }
    .bottom-trip-planner-title { font-size: clamp(28px, 8vw, 40px); }
  }
  

  /* Guests box (bottom + side planner): match the Book-with (provider) box hover/open animation, incl. chevron flip */
  .bottom-trip-planner .guest-display,
  .sidebar-planner .guest-display {
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .bottom-trip-planner .guest-display:hover,
  .sidebar-planner .guest-display:hover {
    border-color: var(--brand-red-strong, #e60000);
    color: var(--brand-red-strong, #e60000);
  }

  .bottom-trip-planner .guest-display::after,
  .sidebar-planner .guest-display::after {
    transition: rotate 0.18s ease, color 0.18s ease;
  }

  .bottom-trip-planner .guest-display:hover::after,
  .sidebar-planner .guest-display:hover::after {
    color: var(--brand-red-strong, #e60000);
  }

  .bottom-trip-planner .guest-picker:has(.guest-panel.show) .guest-display,
  .sidebar-planner .guest-picker:has(.guest-panel.show) .guest-display {
    border-color: var(--brand-red-strong, #e60000);
  }

  .bottom-trip-planner .guest-picker:has(.guest-panel.show) .guest-display::after,
  .sidebar-planner .guest-picker:has(.guest-panel.show) .guest-display::after {
    color: var(--brand-red-strong, #e60000);
    rotate: 180deg;
  }

  /* Side planner: open the Book-with panel upward and cap its height so it fits on short, sticky screens */
  .sidebar-planner .providers-panel { z-index: 300; }

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

    /* ════ HERO CAP ════
       The hero is a 500px floor, taller than a 600px screen once the header
       is taken off, so it filled the fold and everything below needed an
       extra scroll to discover. Capped against the measured header with a
       160px peek of the next section, which is what signals there is more.

       min-height rather than height, because that is how this hero is built:
       if the title and copy ever run taller than the cap it still grows to
       hold them instead of clipping. No width scoping, since landscape
       phones are shorter still. */
    @media (max-height: 700px) {
        .season-hero {
            min-height: max(260px, min(500px, calc(100vh - var(--header-h, 80px) - 160px)));
            min-height: max(260px, min(500px, calc(100svh - var(--header-h, 80px) - 160px)));
        }

        /* the 56px/64px inner padding is a big share of a shortened hero */
        .season-hero-inner { padding-top: 0; padding-bottom: 0; }
    }

    /* ════ CONTENTS CARD TO THE TOP ON MOBILE ════
       Once .season-layout stacks at 960px the whole <aside> drops below the
       article, so the in-page Navigation card — the one thing that saves
       scrolling — ended up past everything it was meant to skip.

       `order` on the <aside> alone would drag the planner and the blogs up
       with it, so the aside is dissolved and its three cards become grid
       items in their own right. Order is visual only: the reading order for
       screen readers is untouched. */
    @media (max-width: 960px) {
        .season-layout > aside { display: contents; }

        .season-layout > aside > .contents-card      { order: 1; }
        .season-layout > article                     { order: 2; }
        .season-layout > aside > .sidebar-planner    { order: 3; }
        .season-layout > aside > .sidebar-sticky-blogs { order: 4; }

        /* it sat in a 56px grid gap as a sidebar item; at the top of the
           column that reads as a gap rather than a heading */
        .season-layout > aside > .contents-card { margin-bottom: 0; }
    }
    /* ════ MAP CARD HUGS THE DRAWING ON PORTRAIT PHONES ════
       The map was never narrow — it already fills ~85% of the card width.
       What made it look small was the card: min-height 520px on the wrapper
       and 430px on the inner box, sized for a wide multi-prefecture region,
       around a drawing only ~220px tall. Roughly 300px of empty card.

       Only the floors go. Padding, border and radius are all left alone. */
    @media (max-width: 700px) and (orientation: portrait) {
        .spring-region-map-wrap { min-height: 0; }
        .spring-region-map { min-height: 0; }
        .spring-region-map-label { margin-bottom: 16px; }

        /* Chubu carries its own floors at 0,2,0 — 720px on the wrap and
           640px on the map — so the plain 0,1,0 rules above never reached
           it and it alone kept a 720px card around a small drawing. Matched
           specificity here, and its heavier 32/36px padding comes down to
           the standard 24 so the map gets the width back too. */
        .spring-region-map-wrap.region-chubu-wrap {
            min-height: 0;
            padding: 24px 24px 18px;
        }

        .spring-region-map.region-chubu { min-height: 0; }

        /* ════ LABEL LEADER LINES ════
           .pref-line is `vector-effect: non-scaling-stroke` at 3.4px, so it
           holds 3.4 physical pixels while the map scales around it. The
           prefecture borders are 0.6 in USER units and do scale, so the two
           only agree at one size — and that size is desktop. On a portrait
           phone the map runs about 2.6px per user unit, the borders drop to
           ~1.6px and the leaders stay at 3.4, more than twice the weight of
           the coastline they point at.

           Matched to the borders here, in the same user units, so the two
           scale together. Deliberately scoped to portrait phones rather than
           changed at the root: these sheets serve every region and their map
           viewBoxes differ by roughly 3x in scale (the per-region label sizes
           run 2.6 to 7.2), so a root change would move desktop by a different
           amount for each one. 0.6 needs no per-region value because the
           border it matches is 0.6 for every region. */
        .pref-line {
            vector-effect: none;
            stroke-width: 0.6;
        }
    }
    /* ════ SIDEBAR PLANNER FIELDS ════
       .planner-field.split is `1fr 1fr`, and 1fr means minmax(auto, 1fr) —
       the track can never go below its content's min-content width. A native
       <input type="date"> bottoms out around 130px in Chrome, so the tracks
       refused to shrink and the check-in, check-out and guests controls
       pushed out past the card edge.

       Two parts. minmax(0, 1fr) lets the tracks shrink at any width, so a
       control can never widen its own column again. And between 961 and
       1240 the sidebar simply has not got room for two date fields side by
       side (121px each at 1024), so they stack — above 1240 there is room,
       below 961 the sidebar is full width anyway. */
    .planner-field.split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .planner-input,
    .planner-select,
    .guest-display,
    .date-trigger {
        min-width: 0;
    }

    @media (min-width: 961px) and (max-width: 1240px) {
        .planner-field.split { grid-template-columns: minmax(0, 1fr); }
    }
    /* ════ DESTINATION PLACEHOLDER ════
       The pin already has clearance (.autocomplete-input reserves 40px on
       the right), so the icon was not the problem. The placeholder simply
       does not fit: 12px left padding + 40px right leaves ~200px of text
       room in the narrow sidebar, and "Where in Japan are you going?" needs
       about 203px at 14px. It was being chopped mid-word.

       Dropping the placeholder to 13px in that band buys ~15px, which clears
       it. Only the placeholder shrinks — a typed value stays at 14px. The
       ellipsis is a safety net so any placeholder that is still too long for
       its field degrades to "…" instead of a hard cut. */
    .planner-input,
    .autocomplete-input {
        text-overflow: ellipsis;
    }

    @media (min-width: 961px) and (max-width: 1240px) {
        .planner-input::placeholder { font-size: 13px; }
    }
    /* ════ SIDEBAR PLANNER HIDDEN ONCE IT IS NOT A SIDEBAR ════
       Tied to the same 960px where .season-layout drops to one column,
       because that is the point the widget stops doing the job it was
       designed for: beside the article it is a persistent booking panel,
       stacked it is a full screen of form wedged between the article and
       the blog cards. Surface Pro 7 (912) and every tablet in portrait sit
       in that band.

       The bottom full-width planner (.bottom-trip-planner) is a separate
       element and is untouched, so the booking path still exists. */
    @media (max-width: 960px) {
        .sidebar-planner { display: none; }
    }
    /* ════ GUEST STEPPER ════
       The panel is left:0/right:0, so it is exactly as wide as the Guests
       field — about 230px in the bottom planner's two-column grid. Padding
       leaves ~202px, the stepper needs 102 of it, and the copy is left with
       86px. "Ages 18 or above" cannot fit that on one line and "Children"
       cannot wrap at all.

       Widening the panel is not safe: in the sidebar the field is already
       the full card width, so a wider panel would hang off the card. So the
       row wraps instead. The copy keeps a 96px floor so its text never
       overflows under the controls, and if the two cannot sit side by side
       the stepper drops to its own line, starting at the left edge.
       Correct at any panel width, which the earlier min-width: 0 was not —
       that let the copy shrink past its own text and clipped it. */
    .guest-row {
        flex-wrap: wrap;
        /* base rule is space-between, which threw the stepper to the far
           right of the panel; everything reads from the left edge now */
        justify-content: flex-start;
    }

    .guest-copy {
        flex: 1 1 auto;
        min-width: 96px;
    }

    .guest-controls {
        flex: 0 0 auto;
        margin-left: 0;
    }

    .guest-value {
        min-width: 22px;
        flex-shrink: 0;
    }

    .guest-controls button {
        flex: 0 0 auto;
    }
    /* ════ 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;
    }
    /* ════ CALENDAR ON SHORT VIEWPORTS ════
       The popover is 320px wide with a fixed 216px day grid, so with its
       header it stands about 312px tall — 83% of a 375px landscape screen.
       Everything comes down proportionally rather than the grid being made
       scrollable, so all six week rows stay visible and the month is still
       readable at a glance. Lands near 240px, about two thirds of what it
       was taking. max-height is the backstop for anything shorter still. */
    @media (max-height: 500px) {
        .sidebar-calendar,
        .bottom-calendar {
            width: 280px;
            max-width: min(280px, calc(100vw - 32px));
        }

        .calendar-popover {
            max-height: calc(100vh - 88px);
            overflow-y: auto;
        }

        .calendar-head { padding: 8px 12px 6px; }
        .calendar-nav { width: 30px; height: 30px; }
        .calendar-month-title { font-size: 15px; }

        .calendar-grid-shell { padding: 0 10px 10px; }
        .calendar-weekdays,
        .calendar-days { gap: 4px; }

        .calendar-weekdays div { font-size: 11px; padding: 2px 0 4px; }
        .calendar-days { height: 168px; }
        .calendar-day { font-size: 12px; border-radius: 7px; }
    }

    /* ════ SECTION FIGURES ON SHORT VIEWPORTS ════
       .section-figure img is `aspect-ratio: 16 / 7`, so its height is purely
       a function of width — and in landscape the width grows while the
       height available shrinks. A Pixel 7 (915x412) gives an 867px-wide
       figure, so 379px tall, which with the 65px header needs 444px of a
       412px screen. An iPhone SE (667x375) happens to fit because it is
       narrower: 619 wide, 271 tall, 336 total against 375.

       Capping the height to the viewport reproduces the SE's ~40px of
       breathing room at any width. object-fit: cover is already on the rule,
       so the picture crops instead of squashing. */
    @media (max-height: 500px) {
        .section-figure img {
            max-height: calc(100vh - var(--header-h, 65px) - 40px);
        }

        /* The cap above was written when every figure was 16 / 7, where
           cropping a wide band costs nothing. A tall / taller / tallest
           figure is a vertical subject, and capping its height alone
           slices a 5 / 4 picture down to roughly 2.8 / 1. Letting the
           width follow the capped height keeps the whole picture, just
           smaller and centred in the column. */
        .section-figure.tall img,
        .section-figure.taller img,
        .section-figure.tallest img {
            width: auto;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
    }

    /* ════ SECTION FIGURES IN PORTRAIT ════
       16 / 7 is a cinematic crop that works on desktop, where the column is
       ~900px and the figure stands ~394px tall. On a phone the same ratio
       gives a 342px column only 150px of height — a letterbox strip between
       two blocks of body copy.

       The width cannot grow (it is the text column's), so the ratio gives
       instead. 3 / 2 takes an iPhone 12 Pro from 150px to 228px, and it is
       also closer to how the source photos were shot, so the crop shows
       MORE of each picture rather than less. Phones in portrait only —
       landscape keeps 16 / 7 and its height cap. */
    @media (max-width: 500px) and (orientation: portrait) {
        .section-figure img { aspect-ratio: 3 / 2; }
        .section-figure.tall img { aspect-ratio: 4 / 3; }
        .section-figure.taller img { aspect-ratio: 5 / 4; }
        .section-figure.tallest img { aspect-ratio: 1 / 1; }
    }

    /* ════ EXPAND-CARD IMAGE ROTATOR ════
       Three 4:3 tiles in a card was the problem: below ~400px the grid gave
       one column and dumped a ~585px stack, and above it two tiles plus an
       orphan. One slot that rotates avoids both, and it is the pattern the
       old food section used (.food-slider) — fade between absolutely
       stacked slides, arrows, dots, 7s autoplay.

       Phones only. Above 700px the grid already lays three tiles out
       tidily, so the arrows and dots hide and the slider goes back to being
       a grid. */
    @media (max-width: 700px) {
        .expand-slider {
            position: relative;
            display: block;
            aspect-ratio: 16 / 10;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .expand-slider .s {
            position: absolute;
            inset: 0;
            margin: 0;
            aspect-ratio: auto;
            border-radius: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        .expand-slider .s.active {
            opacity: 1;
            pointer-events: auto;
        }

        .exp-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background: rgba(60, 60, 60, 0.72);
            color: #fff;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 3;
        }

        .exp-arrow-left { left: 8px; }
        .exp-arrow-right { right: 8px; }

        .exp-dots {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 0 0 14px;
        }

        .exp-dot {
            width: 8px;
            height: 8px;
            padding: 0;
            border: none;
            border-radius: 50%;
            background: #d5d5d5;
            cursor: pointer;
        }

        .exp-dot.active { background: #e60000; }
    }

    /* the grid handles it above 700 — controls are injected regardless so
       the script does not have to care about width */
    @media (min-width: 701px) {
        .exp-arrow,
        .exp-dots { display: none; }
    }

    /* landscape: 16/10 of a 583px-wide card is 364px tall, more than a
       375px screen has left once the header is off */
    @media (max-height: 500px) {
        .expand-slider {
            aspect-ratio: auto;
            height: calc(100vh - var(--header-h, 65px) - 90px);
        }
    }