/* Shared BUB UI. Opt-in only: approved TOP and migrated routes.
 * Extracted without visual changes from checkpoint 01e09281.
 * Do not load legacy route styles beneath this stylesheet. */
@import url("/assets/css/site/motion.css?v=20261008-tap");
:root {
  color-scheme: light;
  /* Inter supplies Latin/numerals; Japanese glyphs fall back to Zen Kaku. */
  --font-ui: Inter, "Zen Kaku Gothic New", sans-serif;
  --font-ja: var(--font-ui);
  --font-jp: var(--font-ui);
  --font-en: var(--font-ui);
  --font-num: var(--font-ui);
  --ink: #2f2f2f;
  --muted: rgb(47 47 47 / 70%);
  --paper: #fcfcfc;
  --surface: #e7ecec;
  --surface-subtle: color-mix(in srgb, var(--paper) 60%, var(--surface));
  --line: rgb(47 47 47 / 9%);
  --interaction-hover: rgb(47 47 47 / 3%);
  --interaction-pressed: rgb(47 47 47 / 7%);
  --type-section: 22px;
  --line-section: 30px;
  --type-title: 16px;
  --line-title: 24px;
  --radius-action: 8px;
  --feedback-duration: 150ms;
  --motion-ui-duration: 180ms;
  --motion-ui-easing: cubic-bezier(.22, 1, .36, 1);
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 3.5 4.5 4.5L6 12.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --content: 1200px;
  --gutter: 20px;
  --radius-media: 12px;
  --radius-control: 12px;
  --header-height: 64px;
  --section-space: 56px;
}
* { box-sizing: border-box; }
/* Hide the page scrollbar without changing scrolling or nested scroll areas. */
html { scroll-padding-top: calc(var(--header-height) + 24px); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.8125 var(--font-ja); letter-spacing: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
:where(h1, h2, h3, p, ul) { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button, input { border: 0; }
button:disabled, input:disabled { cursor: not-allowed; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:where(a, button, input, select, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic, .mobile-nav-ic { display: block; flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 20px; height: 20px; }
.eyebrow { display: none; }
.btn, .button, .ref-hero-actions button, .ref-mailmagazine-form button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 16px; font-weight: 500; line-height: 24px; text-align: center; }
.btn-primary, .button.primary { background: var(--ink); color: var(--paper); }
.button.ghost, .button.secondary { background: var(--surface-subtle); }

/* Shell. Transparent only over the existing hero; same navigation destinations. */
.header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header-height); color: var(--paper); border-bottom: 1px solid transparent; transition: background-color var(--motion-ui-duration) ease-out, color var(--motion-ui-duration) ease-out, border-color var(--motion-ui-duration) ease-out; }
.header-in { width: min(calc(100% - var(--gutter) * 2), var(--content)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 12px; }
.logo { display: block; flex-shrink: 0; font: 400 28px/1 bubbub, cursive; }
.logo-image { width: 128.25px; height: 28px; object-fit: contain; }
.logo-image-light { display: none; }
.header:not(.is-solid):not(.menu-open) .logo-image-dark { display: none; }
.header:not(.is-solid):not(.menu-open) .logo-image-light { display: block; }
.logo small, .site-footer-logo small { display: block; margin-top: 7px; font: 500 9px/14px var(--font-ja); letter-spacing: .02em; }
.gnav, .header-in > .btn { display: none; }
.menu-btn { display: grid; place-items: center; flex-shrink: 0; order: -1; width: 44px; height: 44px; margin-left: -10px; margin-right: 0; padding: 0; background: transparent; border-radius: 8px; }
.mi-close, .menu-btn.is-open .mi-open { display: none; }
.menu-btn.is-open .mi-close { display: block; }
.header.is-solid, .header.menu-open { background: var(--paper); color: var(--ink); border-color: var(--line); }
.header:not(.is-solid):not(.menu-open) :focus-visible { outline-color: var(--paper); }
.mnav { --line: rgb(47 47 47 / 12%); display: none; position: fixed; inset: var(--header-height) 0 0; z-index: 39; overflow-y: auto; overscroll-behavior: contain; background: var(--paper); padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); }
.mnav.open, .mnav.is-closing { display: block; }
.mnav.is-closing { pointer-events: none; }
.mnav-grid a .ic { width: 16px; height: 16px; color: var(--muted); transition: transform var(--motion-ui-duration) var(--motion-ui-easing); }
.mnav-grid a:focus-visible .ic { transform: translateX(3px); }
.mnav-section + .mnav-section { margin-top: 28px; }
.mnav-label { display: block; color: var(--muted); font-size: 13px; line-height: 20px; font-weight: 400; margin-bottom: 8px; }
.mnav-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 24px; }
.mnav-grid a { min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; font-weight: 500; transition: background-color var(--feedback-duration) ease; }
.mnav-grid a:active { background: var(--interaction-pressed); }
.mnav-grid .is-wide { grid-column: 1 / -1; }
.mnav > .btn { width: 100%; min-height: 44px; padding: 11px 16px; border-radius: 4px; font-size: 14px; line-height: 20px; font-weight: 400; }
.is-menu-locked, .is-facility-modal-open { overflow: hidden; }
.mobile-action-bar { position: fixed; z-index: 35; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 64px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 0; background: var(--paper); box-shadow: 0 -4px 14px rgb(47 47 47 / 7%); clip-path: inset(-24px 0 0 0); }
/* A soft shadow above the bar, not the hairline, so it reads as the site's menu on top of the page rather
   than part of the browser toolbar under it (owner, 2026-10-17: the CEO missed it on a phone). Only upward. */
.mobile-action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; border-radius: var(--radius-action); font-size: 12px; font-weight: 500; line-height: 16px; color: var(--muted); }
.mobile-action-bar :is(.is-active, [aria-current="page"]) { color: var(--ink); font-weight: 700; }
.mobile-action-bar :is(.is-active, [aria-current="page"]) .mobile-nav-ic { fill: currentColor; }
.mobile-action-bar :is(.is-active, [aria-current="page"]) .mobile-nav-ic circle { fill: var(--paper); stroke: none; }

@media (max-width: 359px) {
  .mnav-grid { column-gap: 16px; }
  .mnav-grid a { gap: 4px; }
  .mobile-action-bar { padding-inline: 4px; }
  .mobile-action-bar a { font-size: 11px; white-space: nowrap; }
}

/* Footer headings deliberately do not inherit page-heading dimensions. */
.site-footer { --muted: rgb(252 252 252 / 78%); --line: rgb(252 252 252 / 18%); padding-block: 48px 32px; background: var(--ink); color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer-inner { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
.site-footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
.site-footer-grid > div:first-child { grid-column: 1 / -1; }
.site-footer-logo { font: 400 32px/1 bubbub, cursive; }
.site-footer-logo-image { width: 146.57px; height: 32px; object-fit: contain; }
.site-footer-logo small { color: var(--muted); font-size: 10px; }
/* Official SNS (owner 2026-10-07: footer only, the accounts linked from bub-resort.com). */
.site-footer-grid .site-footer-sns { display: flex; gap: 4px; margin: 16px 0 0 -10px; }
.site-footer-grid .site-footer-sns li + li { margin-top: 0; }
.site-footer-grid .site-footer-sns a { justify-content: center; width: 44px; height: 44px; min-height: 0; border-radius: 50%; color: var(--paper); }
.site-footer-sns svg { width: 22px; height: 22px; }
.site-footer-heading { margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 700; }
.site-footer-grid li + li { margin-top: 2px; }
.site-footer-grid li a { display: inline-flex; align-items: center; min-height: 36px; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--muted); }
.site-footer-grid li a > .ic { width: 16px; height: 16px; margin-left: 6px; }
.site-footer-bottom { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 24px; }
.site-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer-legal a { display: inline-flex; align-items: center; min-height: 32px; font-size: 12px; line-height: 18px; color: var(--muted); }
.site-footer-copyright { margin-top: 20px; color: var(--muted); font: 400 11px/18px var(--font-num); }

@media (min-width: 768px) {
  :root { --gutter: 32px; --section-space: 80px; }
  .site-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}
@media (min-width: 1024px) {
  :root { --header-height: 76px; --section-space: 80px; --type-section: 24px; --line-section: 32px; }
  body { padding-bottom: 0; }
  .header-in { gap: 24px; }
  .gnav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
  .gnav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 14px; line-height: 20px; font-weight: 500; }
  .gnav a::after { content: ""; position: absolute; bottom: 6px; inset-inline: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--motion-ui-duration) var(--motion-ui-easing); }
  .gnav a:focus-visible::after { transform: scaleX(1); }
  .header-in > .btn { display: inline-flex; font-size: 14px; padding-inline: 20px; white-space: nowrap; }
  .menu-btn, .mobile-action-bar, .mnav.open, .mnav.is-closing { display: none; }
  .site-footer { padding-block: 64px 32px; }
  .site-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .site-footer-grid > div:first-child { grid-column: auto; }
}

/* Shared control feedback; media and row feedback stay route-owned. */
:is(.btn, .button, .menu-btn, .mobile-action-bar a) { transition: background-color var(--feedback-duration) ease, color var(--feedback-duration) ease; }
:is(.mobile-action-bar a, .menu-btn):active { background-color: var(--interaction-pressed); }
:is(.btn-primary, .button.primary):active { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
:is(.button.ghost, .button.secondary):active { background: var(--surface); }
@media (hover: hover) {
  .site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .site-footer .site-footer-sns a:hover { text-decoration: none; background: rgb(252 252 252 / 10%); }
  .gnav a:hover { text-decoration: none; }
  .gnav a:hover::after { transform: scaleX(1); }
  .mnav-grid a:hover .ic { transform: translateX(3px); }
  :is(.mobile-action-bar a, .menu-btn):hover:not(:active) { background-color: var(--interaction-hover); }
  :is(.btn-primary, .button.primary):hover:not(:active) { background: color-mix(in srgb, var(--ink) 92%, var(--paper)); }
  :is(.button.ghost, .button.secondary):hover:not(:active) { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --feedback-duration: 0ms; --motion-ui-duration: 0ms; }
  .mnav-grid a .ic { transform: none !important; }
}

/* Optional video control; the TOP keeps its existing positioned variant. */
.bub-video-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(252 252 252 / 48%); border-radius: 50%; color: var(--paper); background: rgb(47 47 47 / 32%); }
.bub-video-toggle .video-play, .bub-video-toggle[data-paused="true"] .video-pause { display: none; }
.bub-video-toggle[data-paused="true"] .video-play { display: block; }
.bub-video-toggle:focus-visible { outline-color: var(--paper); }

/* Menu in TOP's tone (owner, 2026-10-07; CSS only — every page shares the markup). Section labels as
   the dialogs' small bold labels; the four places as 12px-round tiles on the BUB grey, two by two; the
   other links as hairline rows with TOP's chevron; 空室検索・予約 as the 52px 12px-round ink button. */
.mnav { padding-top: 20px; }
.mnav-section + .mnav-section { margin-top: 24px; }
.mnav-label { margin-bottom: 8px; color: rgb(47 47 47 / 64%); font-size: 12px; line-height: 18px; font-weight: 700; }
.mnav-grid { gap: 0 20px; margin-bottom: 20px; }
.mnav-grid a { min-height: 52px; font-size: 15px; line-height: 22px; font-weight: 700; }
.mnav-grid a .ic { width: 16px; height: 16px; color: #2f2f2f; opacity: .55; }
.mnav-section:first-child .mnav-grid { gap: 8px; }
.mnav-section:first-child .mnav-grid a { min-height: 60px; padding: 0 14px 0 16px; border: 0; border-radius: 12px; background: #e7ecec; font-size: 16px; }
.mnav-section:first-child .mnav-grid a:active { background: #dde3e3; }
.mnav > .btn { min-height: 52px; margin-top: 4px; border-radius: 12px; font-size: 15px; line-height: 22px; font-weight: 700; }
.menu-btn { border-radius: 12px; }
.menu-btn:focus-visible { outline: 2px solid rgb(47 47 47 / 35%); outline-offset: -2px; }
/* Menu: each place with the same still-life as the destination chooser; no chevron (owner 2026-10-07). */
.mnav-section:first-child .mnav-grid a { position: relative; justify-content: flex-start; min-height: 64px; padding: 0 12px 0 14px; overflow: hidden; background: #eceeed; font-weight: 700; }
.mnav-section:first-child .mnav-grid a .ic { display: none; }
.mnav-section:first-child .mnav-grid a::after { content: ""; position: absolute; right: 4px; top: 50%; width: 64px; height: 48px; transform: translateY(-50%); background: center / contain no-repeat; pointer-events: none; }
.mnav-section:first-child .mnav-grid a[href="/chosei/"]::after { background-image: url('/assets/images/destination/chosei-cutout.webp'); }
.mnav-section:first-child .mnav-grid a[href="/tsukuba/"]::after { background-image: url('/assets/images/destination/tsukuba-cutout.webp'); }
.mnav-section:first-child .mnav-grid a[href="/yatsugatake/"]::after { background-image: url('/assets/images/destination/yatsugatake-cutout.webp'); }
.mnav-section:first-child .mnav-grid a[href="/minakami/"]::after { background-image: url('/assets/images/destination/minakami-cutout.webp'); }

/* Wide screens (owner 10/7 「웹 사이즈감이 너무 작음」): the 1200 layout was drawn for a 1440 window, so on large
 * monitors everything sat small in the middle. Scale the whole page in steps so the grid keeps its share of
 * the window (≈80%), as on reference sites. Phones and laptops up to 1599px are unchanged. */
@media (min-width: 1600px) { html { zoom: 1.12; } }
@media (min-width: 1800px) { html { zoom: 1.24; } }
@media (min-width: 2100px) { html { zoom: 1.4; } }
@media (min-width: 2500px) { html { zoom: 1.6; } }

/* 3. No page transitions: on iPhone Safari the cross-document fade held the old page and ghosted it over
 * the new one, so every tap felt slow (owner real-device check, 2026-10-07). Pages simply navigate. */

/* Horizontal strips move sideways only (owner iPhone check, 2026-10-08). overflow-x: auto quietly makes
 * the other axis scrollable as well; a pixel of taller content (an underline, iPhone's taller Japanese
 * font) then let the section tabs and the season tabs bob up and down under a finger. */
:is(.url-subnav, .chosei-season-tabs, .activity-genres, .activity-day-options, .facility-signals-list,
  .room-showcase-grid, .url-card-grid, .food-decision-layout, .ref-feed-list, .ref-intro-points,
  .live-card-grid, .chosei-day-overview, [data-room-lineup], .activity-c-related-rail, .chosei-room-listing-gallery,
  .live-room-grid, .season-b-schedule-cards, .baby-experiences, .anniversary-experiences, .long-stay-plans,
  .pets-experiences, .media-facility-grid, .news-explore-cards, .tensai-crew-row, .group-location__list-wrap,
  .group-flow__list-wrap) {
  overflow-y: hidden !important;
  overscroll-behavior-y: auto;
}

/* Body text wraps plainly (owner iPhone check, 2026-10-08). Safari's text-wrap: pretty evens every line of a
 * Japanese paragraph, so a sentence beside a photo shrank to a narrow column of 8–9 characters while the
 * title above ran full width. Titles keep their own balance/pretty; paragraphs and list text do not. */
body :is(p, li, dd, figcaption, small) { text-wrap: wrap !important; }

/* Japanese lines break between phrases, not inside a word (owner quality pass, 2026-10-15). Chrome and Edge do it
 * here; Safari and Firefox get <wbr> from assets/js/phrase-breaks.js (BudouX), which then sets html.has-phrase-wbr.
 * A phrase longer than its line still breaks rather than overflow. Fields keep normal wrapping. */
@supports (word-break: auto-phrase) {
  body { word-break: auto-phrase; overflow-wrap: break-word; }
}
html.has-phrase-wbr body { word-break: keep-all; overflow-wrap: break-word; }
body :is(input, textarea, select) { word-break: normal; }

/* Menu as a side drawer on phones (2026-10-19, owner idea after ZOZO): it slides over the header and runs
   the full height; the page stays visible and dimmed on the right, where the close button sits, and a tap
   on the dimmed page closes it. Facility cards stay 2×2 on top; the rest becomes one labelled list. */
@media (max-width: 1023px) {
  .mnav { inset: 0 auto 0 0; z-index: 42; width: min(86vw, 360px); padding: env(safe-area-inset-top) 0 calc(24px + env(safe-area-inset-bottom)); box-shadow: 8px 0 24px rgb(47 47 47 / 12%); }
  .is-menu-locked::after { content: ""; position: fixed; inset: 0; z-index: 41; background: rgb(47 47 47 / 48%); }
  /* The header lifts above the dim but shows only its menu button, now the close button on the right. */
  .header.menu-open { z-index: 43; background: transparent; border-color: transparent; pointer-events: none; }
  .header.menu-open .header-in > :not(.menu-btn) { visibility: hidden; }
  .header.menu-open .menu-btn { position: fixed; top: calc(env(safe-area-inset-top) + (var(--header-height) - 44px) / 2); right: calc((100vw - min(86vw, 360px) - 44px) / 2); margin: 0; color: #fff; pointer-events: auto; }
  .mnav-section + .mnav-section { margin-top: 0; }
  .mnav-label { margin: 0; padding: 12px 20px 8px; background: #f3f4f4; color: rgb(47 47 47 / 64%); }
  .mnav-section:first-child .mnav-label { padding-top: 14px; }
  .mnav-section:first-child .mnav-grid { padding: 16px 16px 20px; margin: 0; }
  .mnav-section:not(:first-child) .mnav-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
  .mnav-section:not(:first-child) .mnav-grid a { padding: 0 20px; }
  .mnav-section:not(:first-child) .mnav-grid a:last-child { border-bottom: 0; }
  /* 空室検索・予約 stays pinned to the drawer's bottom while the list scrolls; facility names one step smaller. */
  .mnav-section:first-child .mnav-grid a { font-size: 15px; }
  .mnav > .btn { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); margin: 20px 20px 0; box-shadow: 0 0 0 20px var(--paper), 0 40px 0 20px var(--paper); }
  .is-menu-locked .mobile-action-bar { visibility: hidden; }
}

/* Footer after goodpatch.com (owner 2026-10-19): one rule for weight — only the facilities are large and white;
 * every other group is a white heading over muted links. Then the outside sites, the two actions, SNS, legal. */
.site-footer .site-footer-top { display: flex; justify-content: flex-end; align-items: center; gap: 6px; width: max-content; min-height: 44px; margin: -8px 0 32px auto; font-size: 13px; line-height: 20px; font-weight: 700; color: var(--paper); }
.site-footer .site-footer-top .ic { width: 16px; height: 16px; }
.site-footer > .site-footer-inner > .site-footer-logo { padding-bottom: 28px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.site-footer .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
.site-footer .site-footer-grid > * { grid-column: auto; }
.site-footer .site-footer-heading { margin-bottom: 12px; font-size: 16px; line-height: 24px; color: var(--paper); }
/* Facilities: tiles with the menu's objects, the only large white words in the footer. */
.site-footer .site-footer-grid .site-footer-places { grid-column: 1 / -1; }
.site-footer .site-footer-places ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.site-footer .site-footer-grid .site-footer-places li + li { margin-top: 0; }
.site-footer .site-footer-grid .site-footer-places a { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 12px 8px 6px; border-radius: 12px; background: rgb(252 252 252 / 7%); white-space: normal; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--paper); }
.site-footer .site-footer-places img { flex: none; width: 56px; height: 42px; object-fit: contain; }
.site-footer .site-footer-places small { display: block; font: 600 10px/14px var(--font-num, inherit); letter-spacing: .04em; color: var(--muted); }
.site-footer .site-footer-grid .site-footer-plans { grid-column: 1 / -1; }
.site-footer .site-footer-plans ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.site-footer .site-footer-grid .site-footer-plans li + li { margin-top: 0; }
.site-footer .site-footer-grid .site-footer-outside { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer .site-footer-grid .site-footer-outside li + li { margin-top: 0; }
.site-footer .site-footer-grid .site-footer-outside a { font-size: 14px; font-weight: 700; color: var(--muted); }
.site-footer .site-footer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 40px; }
.site-footer .site-footer-actions a { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 52px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; }
.site-footer .site-footer-actions img { width: 36px; height: 36px; object-fit: contain; }
.site-footer > .site-footer-inner > .site-footer-sns { display: flex; gap: 4px; margin: 28px 0 0 -10px; padding: 0; list-style: none; }
.site-footer > .site-footer-inner > .site-footer-sns a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--paper); }
@media (min-width: 1024px) {
  .site-footer .site-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
  .site-footer .site-footer-grid .site-footer-places, .site-footer .site-footer-grid .site-footer-plans { grid-column: auto; }
  .site-footer .site-footer-places a:hover { text-decoration: none; background: rgb(252 252 252 / 12%); }
  .site-footer .site-footer-plans ul { grid-template-columns: minmax(0, 1fr); }
  .site-footer .site-footer-grid .site-footer-outside { display: flex; flex-wrap: wrap; gap: 4px 32px; }
  .site-footer .site-footer-actions { width: min(100%, 520px); }
  .site-footer .site-footer-actions a:hover { text-decoration: none; background: rgb(252 252 252 / 88%); }
}

/* みなかみ before its release (owner 10/19): reached only from the promo bar, so its tiles and cards elsewhere
   stay as 近日公開 without a link (a placeholder <a class="is-soon"> with no href). */
a.is-soon:not([href]) { cursor: default; pointer-events: none; }
.mnav-section:first-child .mnav-grid a.is-soon::after { background-image: url('/assets/images/destination/minakami-cutout.webp'); }
.mnav-section:first-child .mnav-grid a.is-soon { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.mnav-grid a.is-soon small { color: var(--muted); font-size: 11px; line-height: 14px; font-weight: 500; }
.site-footer .site-footer-places a.is-soon em { display: block; width: fit-content; margin-top: 4px; padding: 0 8px; border-radius: 999px; background: rgb(252 252 252 / 14%); color: rgb(252 252 252 / 80%); font: 600 10px/18px var(--font-num, inherit); font-style: normal; }