@import url("/assets/css/support-contact.css?v=20261002-contact");

/* The facility TOP (長生村, つくば, 八ヶ岳), aligned with the approved TOP and activity catalog.
 * Each page's <main id="facility-top"> carries it; shared facility templates and their
 * interaction styles remain unchanged. */
#facility-top {
  --content: 1200px;
  --radius-media: 8px;
  --radius-action: 4px;
  --type-section: 22px;
  --line-section: 30px;
  --chosei-sheet-overlap: 0px;
  --chosei-sheet-radius: 0px;
  --chosei-body: rgb(47 47 47 / 84%);
}

/* A single, full-bleed introduction, with no overlapping rounded sheet. */
#facility-top .url-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(400px, 60svh, 560px);
  padding: calc(var(--header-height) + 64px) var(--gutter) 64px;
  isolation: isolate;
  background: var(--ink);
  color: var(--paper);
}
#facility-top .url-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background: var(--paper);
  -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
  mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
}
#facility-top .chosei-hero-media { position: absolute; inset: 0; z-index: -1; }
/* The clean footage needs none of the base layer's logo-hiding zoom. */
#facility-top .url-hero-media { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; transform: none; }
#facility-top .chosei-hero-media::after { background: rgb(47 47 47 / 58%); }
#facility-top .url-hero-copy { width: min(100%, var(--content)); margin-inline: auto; padding: 0; }
#facility-top .url-hero h1 { font-size: 40px; line-height: 54px; font-weight: 700; }
#facility-top .url-hero .lead { max-width: 30em; margin-top: 12px; font-size: 16px; line-height: 28px; }
#facility-top .chosei-content-sheet { margin: 0; border-radius: 0; }
#facility-top .chosei-introduction { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; padding-block: 32px; }
#facility-top .chosei-introduction > p { max-width: 40em; color: var(--chosei-body); font-size: 16px; line-height: 28px; }
/* Tucked 1px under the fixed header so iOS momentum scrolling never opens a seam between them. */
#facility-top .url-subnav { top: calc(var(--header-height) - 1px); margin-top: 0; gap: 40px; border-top: 1px solid var(--line); }
#facility-top .url-subnav a { font-weight: 400; }
#facility-top .url-subnav a[aria-current] { font-weight: 500; }
#facility-top .chosei-content-sheet > section[id] { scroll-margin-top: 8px; }

/* One type and spacing scale across the information sections. */
#facility-top .section { padding-block: 56px; }
#facility-top .chosei-content-sheet > .section + .section { padding-top: 8px; }
#facility-top .section-heading, #facility-top .day-plan-section .section-heading { margin-bottom: 24px; }
#facility-top .section-heading h2, #facility-top .day-plan-section .section-heading h2 { font-size: var(--type-section); line-height: var(--line-section); font-weight: 700; }
#facility-top .section-heading > :is(.lead, .chosei-day-intro) { margin-top: 12px; font-size: 15px; line-height: 26px; font-weight: 400; color: var(--chosei-body); }
#facility-top :is(.live-copy, .food-decision-feature-copy > p:not(.food-decision-meta), .food-decision-row p:not(.food-decision-meta), .facility-information-body p, .url-card p, .room-type-facts dd) { font-size: 15px; line-height: 26px; color: var(--chosei-body); }
#facility-top :is(.room-type-image-link h3, .live-card-body h3, .food-decision-feature-copy h3, .food-decision-row h3, .facility-information-body h3, .url-card h3) { font-size: 18px; line-height: 28px; font-weight: 700; }
#facility-top :is(.section-actions .button, .chosei-faq-more) { gap: 8px; min-height: 44px; padding: 11px 16px; border: 1px solid rgb(47 47 47 / 18%); border-radius: 4px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--chosei-body); }
#facility-top .section-actions .button::after { content: ""; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; mask: var(--icon-chevron-right) center / contain no-repeat; }
#facility-top .section-actions { margin-top: 24px; }


/* Compare the room photos; reserve bold type for names, not controls. */
#facility-top .room-showcase-grid { grid-auto-columns: min(82%, 300px); scrollbar-width: none; padding-bottom: 4px; }
#facility-top .room-showcase-grid::-webkit-scrollbar { display: none; }
#facility-top .room-type-image { aspect-ratio: 4 / 3; }
#facility-top .room-type-card::before { content: none; }
#facility-top .room-type-image-link h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#facility-top .room-type-image-link h3 .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
#facility-top .room-lineup-control { border: 1px solid var(--line); border-radius: 4px; background: transparent; }
#facility-top .room-type-body { margin-top: 8px; }
#facility-top .chosei-season-detail-link { font-size: 14px; line-height: 22px; font-weight: 400; }
#facility-top [data-season-ready] .live-card-grid { margin-top: 0; }
#facility-top .chosei-season-panel { scroll-margin-top: 8px; }

/* Each season: its name, copy and detail route, then its photo wall. */
#facility-top .chosei-season-preview,
#facility-top .chosei-season-panel .chosei-season-preview { display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-width: 0; }
#facility-top .chosei-season-preview .live-card-body { margin: 0; }
#facility-top .chosei-season-context { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; }
#facility-top .chosei-season-overview { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); }
#facility-top .chosei-season-overview h3 { margin: 0; font-size: 20px; line-height: 30px; font-weight: 700; }
#facility-top .chosei-season-overview .ic { width: 16px; height: 16px; color: var(--muted); }
#facility-top .chosei-season-context .status-pill { margin: 0; font-size: 13px; line-height: 20px; }
#facility-top .chosei-season-preview .live-copy { max-width: 42em; margin: 4px 0 0; font-size: 14px; line-height: 24px; }
#facility-top .chosei-map-preview { border-radius: 8px; }
#facility-top .chosei-map { margin-bottom: 32px; }
#facility-top .chosei-map-heading p { display: none; }
#facility-top .surface-band { margin-top: 0; background: var(--surface-subtle); }
#facility-top .surface-band .section { padding-block: 48px; }

body:has(#facility-top) .chosei-booking-button { border-radius: 4px; font-size: 14px; line-height: 22px; font-weight: 500; }
body:has(#facility-top) .chosei-booking-dock-inner { max-width: 1200px; }
body:has(#facility-top) .chosei-day-peek { border-radius: 8px 8px 0 0; }
body:has(#facility-top) .chosei-day-peek-header button { background: transparent; }

@media (min-width: 768px) {
  #facility-top { --type-section: 24px; --line-section: 32px; }
  #facility-top .url-hero { min-height: clamp(400px, 60svh, 600px); padding-bottom: 64px; }
  #facility-top .url-hero h1 { font-size: 48px; line-height: 64px; }
  #facility-top .chosei-introduction { padding-block: 40px; }
  #facility-top .section { padding-block: 80px; }
  #facility-top .chosei-content-sheet > .section + .section { padding-top: 8px; }
  #facility-top .section-heading, #facility-top .day-plan-section .section-heading { margin-bottom: 32px; }
  #facility-top .surface-band .section { padding-block: 64px; }
  body:has(#facility-top) .chosei-day-peek { border-radius: 8px; }
}
/* Wide screens (owner views ~2280px): the hero grows with the width so faces in the footage are not cut (QA 2026-10-13). */
@media (min-width: 1200px) {
  #facility-top .url-hero { min-height: clamp(400px, max(60svh, 40vw), 760px); }
}
@media (min-width: 1024px) {
  #facility-top .room-showcase-grid { grid-auto-columns: auto; gap: 24px; }
  #facility-top :is(.live-copy, .food-decision-feature-copy > p:not(.food-decision-meta), .food-decision-row p:not(.food-decision-meta), .facility-information-body p, .url-card p, .room-type-facts dd) { font-size: 16px; line-height: 28px; }
}

/* Design QA (2026-09-29): TOP's section rhythm, "view all" control and list media. */
#facility-top .chosei-content-sheet { overflow-x: clip; }

/* The day plan runs day → night → morning: the section opens on TOP's surface band,
 * the night act turns to ink and the morning returns to paper, each with the brush edge. */
#facility-top .chosei-content-sheet > .section.day-plan-section { position: relative; padding-block: 64px 0; border-image: linear-gradient(var(--surface) 0 0) fill 0 / / 0 100vw; }
#facility-top .day-plan-section::before,
#facility-top .chosei-day-act.is-night::before,
#facility-top .chosei-day-act.is-night::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  height: 18px;
  margin-left: -50vw;
  pointer-events: none;
  -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
  mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
}
#facility-top .day-plan-section::before { top: -17px; background: var(--surface); }
#facility-top .chosei-day-act.is-night::before { top: -17px; background: var(--ink); }
#facility-top .chosei-day-act.is-night::after { bottom: -1px; background: var(--paper); }
#facility-top .chosei-content-sheet > .day-plan-section + .section { padding-top: 56px; }

/* FAQ joins the closing band, as TOP's FAQ does; the footer takes the brush edge. */
#facility-top .chosei-content-sheet > .section.chosei-faq-preview { padding-block: 56px 16px; border-image: linear-gradient(var(--surface-subtle) 0 0) fill 0 / / 0 100vw; }
body:has(#facility-top) .site-footer { position: relative; }
body:has(#facility-top) .site-footer::before {
  content: "";
  position: absolute;
  inset: -17px 0 auto;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background: var(--ink);
  -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
  mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat;
}

/* Every section's secondary route uses TOP's "すべて見る" control. */
#facility-top .section-actions { display: flex; justify-content: center; margin-top: 24px; }
#facility-top :is(.section-actions .button, .chosei-faq-more) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin-inline: 0;
  padding: 9px 16px;
  border: 1px solid rgb(47 47 47 / 18%);
  border-radius: 4px;
  background: transparent;
  color: var(--chosei-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
#facility-top :is(.section-actions .button, .chosei-faq-more)::after { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: currentColor; mask: var(--icon-chevron-right) center / contain no-repeat; opacity: .7; }
#facility-top .chosei-faq-more { margin-top: 24px; }
/* The press wrapper hugs the label so the chevron sits beside it, as on TOP. */
#facility-top :is(.section-actions .button, .chosei-faq-more) > .chosei-press-content { width: auto; }

/* One thumbnail size for every photo-and-text row on mobile. */
@media (max-width: 767px) {
  #facility-top .url-card { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
  #facility-top .chosei-option-image { width: 96px; }
  /* The five anchors still fit on one line at these gaps, so no destination is cut at the edge. */
  #facility-top .url-subnav { gap: 28px; }
}
@media (max-width: 386px) {
  #facility-top .url-subnav { gap: 20px; }
}

/* Map opens from the address, not from a label covering Google's attribution. */
#facility-top .chosei-access-maps-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 4px; font-size: 14px; line-height: 22px; font-weight: 500; }
#facility-top .chosei-access-maps-link .ic { width: 16px; height: 16px; }

@media (min-width: 768px) {
  /* Car access follows the address instead of the shuttle's height. */
  #facility-top .chosei-access-compact { grid-template-rows: auto 1fr; }
}
@media (min-width: 1024px) {
  #facility-top .section-actions, #facility-top .chosei-faq-more { margin-top: 40px; }
  #facility-top :is(.section-actions .button, .chosei-faq-more) { width: fit-content; min-height: 50px; margin-inline: auto; padding: 10px 28px 10px 32px; gap: 4px; border-color: var(--ink); color: var(--ink); font-size: 16px; line-height: 22px; }
  #facility-top :is(.section-actions .button, .chosei-faq-more)::after { flex-basis: 18px; width: 18px; height: 18px; opacity: 1; }
}
@media (hover: hover) {
  #facility-top :is(.section-actions .button, .chosei-faq-more):hover:not(:active) { background: var(--interaction-hover); border-color: rgb(47 47 47 / 28%); }
  #facility-top .chosei-access-maps-link:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Chapters (2026-09-29): 遊び → 1泊2日 → くつろぎ → 準備. Story chapters take TOP's
 * feature headings; practical sections keep the plain section type. */
#facility-top .section-heading.chosei-chapter-heading h2 { font-size: 24px; line-height: 34px; font-weight: 700; text-wrap: balance; }
#facility-top .chosei-title-phrase { display: inline-block; }
#facility-top .chosei-stay-block[id] { scroll-margin-top: 8px; }
#facility-top h4 { margin: 0; }

/* 1. 遊び: TOP's count, a visible season calendar and each season's photo wall. */
#facility-top .chosei-activity-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 12px; font-size: 12px; line-height: 20px; white-space: nowrap; }
#facility-top .chosei-activity-scope, #facility-top .chosei-activity-divider { color: var(--muted); }
#facility-top .chosei-activity-number strong { margin-right: 4px; font: 700 28px/1.1 var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; }
#facility-top .chosei-season-picker-controls { position: relative; margin: 0 calc(-1 * var(--gutter)); }
/* More seasons past the edge: the row fades into the page under a chevron (chosei-seasons.js seasonEdges). */
#facility-top .chosei-season-edge { position: absolute; top: 12px; bottom: 8px; z-index: 2; display: flex; align-items: center; width: 64px; padding: 0 12px; border: 0; background: linear-gradient(90deg, rgb(252 252 252 / 0%), rgb(252 252 252 / 92%) 55%, #fcfcfc); color: var(--ink); cursor: pointer; }
#facility-top .chosei-season-edge.is-next { right: 0; justify-content: flex-end; }
#facility-top .chosei-season-edge.is-prev { left: 0; justify-content: flex-start; background: linear-gradient(270deg, rgb(252 252 252 / 0%), rgb(252 252 252 / 92%) 55%, #fcfcfc); }
#facility-top .chosei-season-edge[hidden] { display: none; }
#facility-top .chosei-season-edge .ic { width: 20px; height: 20px; }
#facility-top .chosei-season-tabs { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 12px calc(var(--gutter) - 16px) 8px; scroll-padding-inline: calc(var(--gutter) - 16px); scrollbar-width: none; }
#facility-top .chosei-season-tabs::-webkit-scrollbar { display: none; }
/* Seasons are named, not boxed: large names on the page, and the chosen one sits on a pale hand-drawn
 * shape — the same freehand masks as the photo wall below — so it reads as marked, not as a second nav. */
#facility-top .chosei-season-tab { position: relative; isolation: isolate; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; min-width: 0; min-height: 0; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; color: var(--muted); text-align: left; transition: color 150ms ease; }
#facility-top .chosei-season-tab-name { font-size: 18px; line-height: 26px; font-weight: 700; white-space: nowrap; }
#facility-top .chosei-season-tab-period { font: 500 13px/20px var(--font-num), var(--font-ja); color: inherit; white-space: nowrap; }
#facility-top .chosei-season-tab[aria-selected="true"] { color: var(--ink); }
#facility-top .chosei-season-tab[aria-selected="true"]::before { content: ""; position: absolute; inset: -2px -4px; z-index: -1; background: #e7ecec; -webkit-mask: url('/assets/images/top-activities/freehand/mask-05.svg') center / 100% 100% no-repeat; mask: url('/assets/images/top-activities/freehand/mask-05.svg') center / 100% 100% no-repeat; }
#facility-top .chosei-season-tab[aria-selected="true"] .chosei-season-tab-period { color: var(--muted); }
/* The running season wears TOP's open-status colour above its name. */
#facility-top .chosei-season-tab-live { order: -1; margin-bottom: 2px; padding: 1px 6px; border-radius: 4px; background: #486860; color: var(--paper); font-size: 11px; line-height: 17px; font-weight: 500; white-space: nowrap; }
/* With script, one shape travels between seasons (chosei-seasons.js seasonTaffy); the ::before stays as the no-script mark. */
#facility-top .chosei-season-tabs.has-taffy { position: relative; isolation: isolate; }
#facility-top .has-taffy .chosei-season-tab { z-index: 1; }
#facility-top .has-taffy .chosei-season-tab[aria-selected="true"]::before { content: none; }
#facility-top .chosei-season-taffy { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; background: #e7ecec; transform-origin: 50% 50%; will-change: transform, width, height; -webkit-mask: url('/assets/images/top-activities/freehand/mask-05.svg') center / 100% 100% no-repeat; mask: url('/assets/images/top-activities/freehand/mask-05.svg') center / 100% 100% no-repeat; }
#facility-top .chosei-season-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 8px; }
#facility-top [data-season-ready] .live-card-grid { margin-top: 20px; }
#facility-top [data-season-ready] .chosei-season-context .status-pill { display: none; }
#facility-top .chosei-season-preview .live-copy { margin-top: 0; font-size: 15px; line-height: 26px; }
#facility-top #activity .section-actions { margin-top: 16px; }

/* TOP's freehand photo wall (top.css), scoped to Chosei. */
#facility-top .ref-activity-wall { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-inline: calc(-1 * var(--gutter)); padding-block: 8px; touch-action: pan-y; }
#facility-top .ref-activity-photo { position: relative; display: block; flex: 0 0 auto; width: 96px; aspect-ratio: 1; border-radius: 50%; }
#facility-top .ref-activity-photo[hidden] { display: none; }
#facility-top .ref-activity-art { position: relative; display: block; width: 100%; height: 100%; background: var(--surface); mask: var(--activity-mask) center / 100% 100% no-repeat; -webkit-mask: var(--activity-mask) center / 100% 100% no-repeat; pointer-events: none; transition: transform var(--feedback-duration) ease; }
#facility-top .ref-activity-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; transition: opacity var(--feedback-duration) ease; }
#facility-top .ref-activity-photo:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
#facility-top .ref-activity-caption { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 2px 4px; width: max-content; max-width: calc(100% - 4px); padding: 3px 5px; border-radius: 2px; background: var(--paper); color: var(--ink); text-align: left; font-size: 13px; font-weight: 600; line-height: 18px; word-break: normal; overflow-wrap: anywhere; text-wrap: balance; pointer-events: none; transition: background-color var(--feedback-duration) ease, color var(--feedback-duration) ease; }
#facility-top .ref-activity-caption.has-title { bottom: 10%; max-width: 86%; padding: 5px 7px; }
#facility-top .ref-activity-caption[hidden], #facility-top .ref-activity-name[hidden] { display: none; }
#facility-top .ref-activity-category { white-space: nowrap; }
#facility-top .ref-activity-caption .ref-activity-arrow { width: 14px; height: 14px; color: currentColor; transition: transform var(--feedback-duration) ease; }
#facility-top .ref-activity-name { grid-column: 1 / -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 19px; font-weight: 700; }
#facility-top .ref-activity-photo:focus-visible .ref-activity-caption { background: var(--ink); color: var(--paper); }
#facility-top .ref-activity-photo.is-pressed .ref-activity-art, #facility-top .ref-activity-photo:active:not(.is-grabbed) .ref-activity-art { transform: scale(.97); }
#facility-top .ref-activity-wall.is-physical { display: block; overflow: hidden; padding: 0; contain: layout paint; }
#facility-top .is-physical .ref-activity-photo { position: absolute; top: 0; left: 0; margin: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; will-change: transform; }
#facility-top .ref-activity-wall.is-dragging, #facility-top .is-physical .ref-activity-photo.is-grabbed { cursor: grabbing; }
#facility-top .is-physical .ref-activity-photo.is-grabbed { z-index: 1; }
/* iOS walls move their photos in 2D (top-activity-wall.js): no forced layer per photo, nor per masked art,
   which blinked out for a frame while the wall moved (2026-10-25). */
#facility-top .ref-activity-wall[data-activity-render="2d"] :is(.ref-activity-photo, .ref-activity-art) { will-change: auto; }

/* 3. くつろぎ: rooms, meals and facilities as one chapter with quiet sub-heads. */
#facility-top .chosei-content-sheet > #rooms { padding-bottom: 56px; }
#facility-top .chosei-stay-block { margin-top: 40px; }
#facility-top .chosei-stay-block + .chosei-stay-block { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgb(47 47 47 / 12%); }
#facility-top .chosei-stay-block :is(.section-heading, .room-lineup-heading) { margin-bottom: 16px; }
#facility-top .chosei-stay-block :is(.section-heading, .room-lineup-heading) h3 { font-size: 20px; line-height: 30px; font-weight: 700; }
#facility-top .chosei-stay-block .section-heading > .lead { margin-top: 8px; font-size: 15px; line-height: 26px; }
#facility-top :is(.room-type-image-link h4, .food-decision-feature-copy h4, .food-decision-row h4, .facility-information-body h4) { font-size: 18px; line-height: 28px; font-weight: 700; }
/* The chevron follows the name (as 「ハロウィン ›」) instead of floating at the card edge. */
#facility-top .room-type-image-link h4 { display: flex; justify-content: flex-start; align-items: center; gap: 4px; margin-top: 12px; }
#facility-top .room-type-image-link h4 .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
#facility-top .chosei-map-heading h4 { margin: 0 0 6px; font-size: 17px; line-height: 1.5; font-weight: 700; }
#facility-top .chosei-stay-block .chosei-map { margin-bottom: 0; }

/* 4. 準備: FAQ keeps TOP's telephone support beside it. */
#facility-top .chosei-support-phone { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
#facility-top .chosei-support-phone h3 { font-size: 18px; line-height: 26px; font-weight: 700; }
#facility-top .chosei-support-phone > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; font: 700 28px/36px var(--font-num), var(--font-ja); }
#facility-top .chosei-support-phone > a .ic { width: 20px; height: 20px; flex-shrink: 0; }
#facility-top .chosei-support-phone p { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--muted); }

@media (max-width: 359px) {
  #facility-top .ref-activity-caption:not(.has-title) { padding-inline: 3px; column-gap: 3px; }
}
/* Tablets keep the phone's season rail (six names at desktop size would break onto two rows);
 * from 1024px the seasons sit in one row. */
@media (min-width: 1024px) {
  #facility-top .chosei-season-picker-controls { margin: 0; }
  #facility-top .chosei-season-edge { display: none; }
  /* Seasons sit side by side at one steady gap (about 72px between names), each only as wide as its
   * name, so the hand-drawn shape keeps its proportions and the row never spreads thin on wide screens. */
  #facility-top .chosei-season-tabs { display: flex; flex-wrap: wrap; gap: 0 40px; overflow: visible; margin-inline: -16px; padding: 12px 0 0; }
  /* Desktop reads the seasons at a larger size: they are the section's choice, not a caption. */
  #facility-top .chosei-season-tab-name { font-size: 22px; line-height: 32px; }
  #facility-top .chosei-season-tab-period { font-size: 15px; line-height: 22px; }
  #facility-top .chosei-season-tab-live { font-size: 12px; line-height: 18px; }
  #facility-top .chosei-season-tab { min-width: 0; }
}
@media (min-width: 768px) {
  #facility-top .section-heading.chosei-chapter-heading h2 { font-size: 28px; line-height: 40px; }
  #facility-top .ref-activity-wall { margin-inline: 0; }
  #facility-top .ref-activity-photo { width: 144px; }
  #facility-top .ref-activity-caption { grid-template-columns: minmax(0, 1fr) 16px; gap: 3px 6px; padding: 4px 8px; font-size: 16px; line-height: 22px; }
  #facility-top .ref-activity-caption .ref-activity-arrow { width: 16px; height: 16px; }
  #facility-top .ref-activity-caption.has-title { padding: 6px 10px; }
  #facility-top .ref-activity-caption.has-title .ref-activity-category { font-size: 14px; line-height: 20px; }
  #facility-top .ref-activity-name { font-size: 16px; line-height: 22px; }
  #facility-top .chosei-content-sheet > #rooms { padding-bottom: 80px; }
  #facility-top .chosei-stay-block { margin-top: 48px; }
  #facility-top .chosei-stay-block + .chosei-stay-block { margin-top: 64px; padding-top: 32px; }
  #facility-top .chosei-map-heading h4 { font-size: 18px; }
}
@media (min-width: 1024px) {
  #facility-top .section-heading.chosei-chapter-heading h2 { font-size: 30px; line-height: 42px; }
  /* As on TOP, the count sits opposite the heading. */
  #facility-top #activity .chosei-chapter-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
  #facility-top .chosei-activity-total { margin: 0 0 4px; font-size: 14px; }
  #facility-top .chosei-activity-number strong { font-size: 32px; }
  #facility-top .chosei-faq-preview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); column-gap: 64px; align-items: start; }
  #facility-top .chosei-faq-preview > :is(.section-heading, .chosei-faq-card) { grid-column: 1; }
  #facility-top .chosei-support-phone { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--line); }
}
@media (hover: hover) {
  /* Hover only lifts the name a little: full ink and the shape belong to the chosen season alone. */
  #facility-top .chosei-season-tab:hover:not([aria-selected="true"]) .chosei-season-tab-name { color: rgb(47 47 47 / 88%); }
  #facility-top .ref-activity-photo:hover:not(.is-grabbed) .ref-activity-caption { background: var(--ink); color: var(--paper); }
  #facility-top .ref-activity-photo:hover:not(.is-grabbed) .ref-activity-arrow { transform: translateX(2px); }
  #facility-top .ref-activity-photo:hover:not(:active) img { opacity: .92; }
  #facility-top .chosei-support-phone > a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* 2. 1泊2日: three acts (遊んで、/ 泊まって、/ また遊ぶ。) told by their photographed moments.
 * Phones read them as photos with the time on them, then words; tablets set words beside the
 * photo; from 1280px each act keeps an index of its times in view beside words and a photo at
 * the page's card scale. Quieter moments of the same
 * hour stay as single lines under their key moment. */
#facility-top .chosei-day-act { --chosei-day-line: rgb(47 47 47 / 14%); position: relative; padding-block: 8px 64px; }
#facility-top .chosei-day-act.is-night { --chosei-body: rgb(252 252 252 / 82%); --muted: rgb(252 252 252 / 64%); --chosei-day-line: rgb(252 252 252 / 22%); padding-block: 64px 80px; border-image: linear-gradient(var(--ink) 0 0) fill 0 / / 0 100vw; color: var(--paper); }
#facility-top .chosei-day-act.is-night :focus-visible { outline-color: var(--paper); }
#facility-top .chosei-day-act.is-morning { padding-block: 56px 72px; border-image: linear-gradient(var(--paper) 0 0) fill 0 / / 0 100vw; }
/* Act head: 1日目・昼 as a small eyebrow above a large act name. */
#facility-top .chosei-day-act-head { display: flex; flex-direction: column-reverse; gap: 4px; margin-bottom: 24px; }
#facility-top .chosei-day-act-when { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .08em; color: var(--muted); }
#facility-top .chosei-day-act-head h3 { font-size: 26px; line-height: 36px; font-weight: 700; }
#facility-top .chosei-day-index { display: none; }
#facility-top .chosei-day-steps { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
#facility-top .chosei-day-steps .timeline-item { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
#facility-top .chosei-day-steps .timeline-item::before,
#facility-top .chosei-day-steps .timeline-item::after { content: none; }
#facility-top .chosei-day-step-body { min-width: 0; }
#facility-top .chosei-day-steps > li > .chosei-day-step-body > .timeline-date { display: block; font: 700 16px/24px var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; }
#facility-top .chosei-day-steps > li > .chosei-day-step-body > h4 { font-size: 20px; line-height: 30px; font-weight: 700; }
#facility-top .chosei-day-steps > li > .chosei-day-step-body > p { margin-top: 4px; font-size: 14px; line-height: 24px; color: var(--chosei-body); }
/* Key moment on phones: the photo with its time on it (TOP's photo caption), then the words. */
#facility-top .chosei-day-steps > .is-key { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#facility-top .chosei-day-steps > .is-key > .chosei-day-step-body { display: contents; }
#facility-top .chosei-day-step-photo { grid-row: 1; grid-column: 1; margin: 0; overflow: hidden; border-radius: 8px; }
#facility-top .chosei-day-step-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
#facility-top .chosei-day-steps > .is-key > .chosei-day-step-body > .timeline-date { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; z-index: 1; margin: 8px 0 0 8px; padding: 3px 6px; border-radius: 2px; background: var(--paper); color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600; }
#facility-top .chosei-day-steps > .is-key > .chosei-day-step-body > h4 { margin-top: 16px; }
#facility-top .chosei-day-step-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin-top: 4px; font-size: 14px; line-height: 22px; font-weight: 500; }
#facility-top .chosei-day-step-link .ic { width: 16px; height: 16px; flex: 0 0 16px; }
/* Quieter moments of the same hour: one line each, time muted. */
#facility-top .chosei-day-more { display: grid; margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--chosei-day-line); }
#facility-top .chosei-day-more > .timeline-item { display: grid; grid-template-columns: minmax(44px, max-content) auto minmax(0, 1fr); gap: 0 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--chosei-day-line); }
#facility-top .chosei-day-more .timeline-date { white-space: nowrap; font: 500 14px/22px var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; color: var(--muted); }
#facility-top .chosei-day-more h4 { font-size: 14px; line-height: 22px; font-weight: 600; }
#facility-top .chosei-day-more p { margin: 0; font-size: 14px; line-height: 22px; color: var(--muted); }
/* Arrival and departure bookend the stay as plain rows (as does a meal with no photo of its own); the morning closes on the note and
 * the season's own schedule, as the facility map closes on its note and button. */
#facility-top .chosei-day-steps > :is(.is-start, .is-end, .is-plain) { display: block; }
#facility-top .chosei-day-steps > .is-end { padding-top: 24px; border-top: 1px solid var(--chosei-day-line); }
#facility-top .chosei-day-act .chosei-day-photo-note { margin-top: 24px; font-size: 12px; line-height: 20px; color: var(--muted); }
#facility-top .chosei-day-act .chosei-day-actions { margin-top: 24px; }

@media (min-width: 768px) {
  #facility-top .chosei-day-act-head h3 { font-size: 30px; line-height: 42px; }
  #facility-top .chosei-day-steps { gap: 48px; }
  /* Words beside a large photo, the words resting on the photo's lower edge. */
  #facility-top .chosei-day-steps > .is-key { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: end; }
  #facility-top .chosei-day-steps > .is-key > .chosei-day-step-body { display: block; grid-row: 1; grid-column: 1; }
  #facility-top .chosei-day-step-photo { grid-column: 2; }
  #facility-top .chosei-day-steps > .is-key > .chosei-day-step-body > .timeline-date { margin: 0; padding: 0; border-radius: 0; background: none; color: inherit; font-size: 20px; line-height: 28px; }
  #facility-top .chosei-day-steps > li > .chosei-day-step-body > h4 { margin-top: 4px; font-size: 24px; line-height: 34px; }
  #facility-top .chosei-day-steps > li > .chosei-day-step-body > p { margin-top: 8px; font-size: 15px; line-height: 26px; }
  #facility-top .chosei-day-steps > .is-end { padding-top: 32px; }
  /* Plain rows keep to the words' column. */
  #facility-top .chosei-day-steps > :is(.is-start, .is-end, .is-plain) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
}
@media (min-width: 1280px) {
  /* Each act: its name and an index of its times (kept in view) | its moments. */
  #facility-top .chosei-day-act { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  #facility-top .chosei-day-act-side { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--header-height) + 72px); }
  #facility-top .chosei-day-act > :not(.chosei-day-act-side) { grid-column: 2; }
  #facility-top .chosei-day-act-head h3 { font-size: 32px; line-height: 44px; }
  #facility-top .chosei-day-index { display: block; }
  #facility-top .chosei-day-index ol { display: grid; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--chosei-day-line); }
  #facility-top .chosei-day-index a { display: flex; gap: 12px; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 22px; white-space: nowrap; transition: color .2s ease, border-color .2s ease; }
  #facility-top .chosei-day-index time { flex: 0 0 auto; min-width: 40px; font-family: var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; font-weight: 500; }
  #facility-top .chosei-day-index a[aria-current] { border-left-color: currentColor; color: inherit; font-weight: 600; }
  #facility-top .chosei-day-steps > :is(.is-key, .is-start, .is-end, .is-plain) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 48px; }
  /* The button centres on the page, as every section's button does. */
  #facility-top .chosei-day-act > .chosei-day-actions { grid-column: 1 / -1; }
}
@media (hover: hover) {
  #facility-top .chosei-day-step-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  #facility-top .chosei-day-index a:hover { color: inherit; }
}

/* The facility decision order is experience -> rooms and meals -> a short stay overview. */
#facility-top .chosei-content-sheet > #rooms { padding-top: 56px; }
#facility-top .chosei-content-sheet > .section.day-plan-section { padding-block: 56px; }
#facility-top .facility-day-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line); }
#facility-top .facility-day-summary li { position: relative; min-width: 0; padding: 18px 16px; background: var(--surface); scroll-margin-top: 96px; }
#facility-top .facility-day-anchor { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; scroll-margin-top: 96px; }
#facility-top .facility-day-summary-time { display: block; margin-bottom: 6px; color: var(--muted); font: 600 12px/18px var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; }
#facility-top .facility-day-summary strong { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
#facility-top .facility-day-summary p { margin-top: 6px; color: var(--chosei-body); font-size: 13px; line-height: 22px; }
#facility-top .facility-day-summary time { font: inherit; }
#facility-top .day-plan-section > .chosei-day-photo-note { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 20px; }

@media (min-width: 768px) {
  #facility-top .chosei-content-sheet > #rooms,
  #facility-top .chosei-content-sheet > .section.day-plan-section { padding-top: 80px; }
  #facility-top .chosei-content-sheet > .section.day-plan-section { padding-bottom: 80px; }
  #facility-top .facility-day-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #facility-top .facility-day-summary li { padding: 24px; }
  #facility-top .facility-day-summary strong { font-size: 18px; line-height: 28px; }
  #facility-top .facility-day-summary p { font-size: 14px; line-height: 24px; }
}

/* Sections 3–4 (design panel synthesis): each stay block keeps its own shape — rooms
 * 4-up, meals as photo | menu, facilities as list | map — and the practical chapter
 * closes on one light band. Numerals follow TOP's scale, capped at 28px. */
#facility-top .chosei-stay-block .section-heading > .lead { max-width: 36em; font-size: 14px; line-height: 22px; color: var(--muted); }
#facility-top :is(.food-decision-row h4, .facility-information-body h4, .url-card h3) { font-size: 16px; line-height: 24px; font-weight: 700; }
#facility-top :is(.food-decision-row p:not(.food-decision-meta), .facility-information-body p, .url-card p) { margin-top: 4px; font-size: 14px; line-height: 22px; }
/* Zoom stays available on thumbnails, as an icon instead of a label covering the photo. */
#facility-top :is(.food-decision-row, .facility-information-card) .chosei-gallery-expand-label { right: 6px; bottom: 6px; width: 26px; height: 26px; padding: 0; gap: 0; justify-content: center; border-radius: 4px; font-size: 0; line-height: 0; }
#facility-top :is(.food-decision-row, .facility-information-card) .chosei-gallery-expand-label .chosei-gallery-icon { width: 14px; height: 14px; }

/* Rooms: who it's for, then three aligned facts; the water line is last so it compares across cards. */
#facility-top .room-lineup-control { width: 40px; height: 40px; border-color: rgb(47 47 47 / 18%); }
#facility-top .room-type-facts dd { margin: 0; font-size: 14px; line-height: 22px; color: var(--chosei-body); }
/* Capacity, size and bathroom read as one line of facts; a long value wraps to a second line. */
#facility-top .room-type-specs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 14px; line-height: 22px; }
#facility-top .room-type-specs li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
#facility-top .room-type-specs .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }

/* Meals: times are what parents plan around. */
#facility-top .food-decision-meta { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 12px; line-height: 18px; }
#facility-top .food-decision-meta span { font-size: 12px; line-height: 18px; color: var(--muted); }
#facility-top .food-decision-meta strong { font: 700 14px/20px var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; color: var(--ink); }
#facility-top .food-decision-feature-copy .food-decision-meta strong { font-size: 16px; line-height: 24px; }
/* Meals (2026-10-01): dinner, breakfast and family as three equal photo cards, like the 客室 cards above —
 * a rail on phones, three across from 768px — so no one meal outweighs the others. Covers the stacked
 * links before chosei-gallery.js and the photo button + content link it builds. */
#facility-top .food-decision-layout { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 300px); grid-template-columns: none; gap: 16px; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; align-items: start; }
#facility-top .food-decision-layout::-webkit-scrollbar { display: none; }
#facility-top .food-decision-secondary { display: contents; }
#facility-top :is(.food-decision-feature, .food-decision-feature.chosei-gallery-card, .food-decision-row, .food-decision-row:first-child) { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 0; scroll-snap-align: start; }
#facility-top :is(.food-decision-feature, .food-decision-row) > .chosei-gallery-photo-button { align-self: stretch; width: 100%; height: auto; aspect-ratio: auto; border-radius: 8px; }
#facility-top :is(.food-decision-feature, .food-decision-row) > .chosei-gallery-photo-button > figure { height: auto; }
#facility-top :is(.food-decision-feature, .food-decision-row) img { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
#facility-top .food-decision-row > .chosei-gallery-photo-button > img { height: auto; }
#facility-top :is(.food-decision-feature, .food-decision-row) > .chosei-gallery-content-link { margin: 0; padding: 0; border: 0; }
#facility-top :is(.food-decision-feature-copy, .food-decision-row > div, .food-decision-row > .chosei-gallery-content-link > div) { margin-top: 14px; }
#facility-top :is(.food-decision-feature-copy h4, .food-decision-row h4) { margin-top: 2px; font-size: 18px; line-height: 28px; }
#facility-top :is(.food-decision-feature-copy > p:not(.food-decision-meta), .food-decision-row p:not(.food-decision-meta)) { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--chosei-body); }
#facility-top .food-decision-feature-copy .food-decision-meta strong { font-size: 14px; line-height: 20px; }
/* Every card's meta line keeps one height, so titles line up whether or not it carries a time. */
#facility-top :is(.food-decision-feature, .food-decision-row) .food-decision-meta { min-height: 20px; }
#facility-top :is(.food-decision-feature-copy, .food-decision-row) :is(h4, p) { text-wrap: pretty; word-break: auto-phrase; }
#facility-top :is(.food-decision-link, .food-decision-row > .ic, .food-decision-row > .chosei-gallery-content-link > .ic) { display: none; }
#facility-top :is(.food-decision-feature, .food-decision-row) .chosei-gallery-expand-label { right: 8px; bottom: 8px; width: 28px; height: 28px; padding: 0; gap: 0; justify-content: center; border-radius: 4px; font-size: 0; line-height: 0; }
#facility-top :is(.food-decision-feature, .food-decision-row) .chosei-gallery-expand-label .chosei-gallery-icon { width: 14px; height: 14px; }
/* Meals sit on a full-bleed BUB-black band, torn at top and bottom with the hero's and footer's
 * hand-drawn edge; the card grid keeps the page column. */
#facility-top #dining { --muted: rgb(252 252 252 / 70%); --line: rgb(252 252 252 / 18%); --chosei-body: rgb(252 252 252 / 84%); position: relative; isolation: isolate; margin: 56px calc(50% - 50vw) 0; padding: 40px calc(50vw - 50%) 48px; border-top: 0; background: var(--ink); color: var(--paper); }
#facility-top #dining::before, #facility-top #dining::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 1; pointer-events: none; background: var(--ink); -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; }
#facility-top #dining::before { top: -17px; }
#facility-top #dining::after { bottom: -17px; transform: scaleY(-1); }
#facility-top #dining + .chosei-stay-block { margin-top: 56px; padding-top: 0; border-top: 0; }
#facility-top #dining :is(h3, h4) { color: var(--paper); }
#facility-top #dining .food-decision-meta strong { color: var(--paper); }
#facility-top #dining .section-actions .button { border-color: rgb(252 252 252 / 36%); color: var(--paper); }
#facility-top #dining :is(.section-actions .button, .chosei-gallery-content-link, .chosei-gallery-photo-button):focus-visible { outline-color: var(--paper); }
@media (min-width: 768px) {
  #facility-top .food-decision-layout { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 24px; margin-inline: 0; padding: 0; overflow: visible; }
  #facility-top #dining { margin-top: 72px; padding-block: 56px 64px; }
  #facility-top #dining + .chosei-stay-block { margin-top: 72px; }
  #facility-top #dining .section-actions .button { border-color: var(--paper); color: var(--paper); }
}
@media (hover: hover) {
  #facility-top #dining .section-actions .button:hover:not(:active) { background: rgb(252 252 252 / 8%); border-color: var(--paper); }
}
@media (min-width: 1024px) {
  /* Body text reads as the room cards' notes do on desktop. */
  #facility-top :is(.food-decision-feature-copy > p:not(.food-decision-meta), .food-decision-row p:not(.food-decision-meta)) { font-size: 15px; line-height: 24px; }
}

/* Facilities: the one real open status wears TOP's open colour. */
#facility-top .chosei-open-badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 2px; background: #486860; color: var(--paper); font-size: 11px; line-height: 18px; font-weight: 500; vertical-align: 1px; }

/* 4. Access, FAQ and plans share one light band with a straight top edge, as on TOP;
 * the footer's brush edge closes the page. */
#facility-top .chosei-content-sheet > #access.section { padding-block: 64px 8px; border-image: linear-gradient(var(--surface-subtle) 0 0) fill 0 / / 0 100vw; }
#facility-top .chosei-access-layout { display: grid; gap: 32px; }
#facility-top .chosei-access-how, #facility-top .chosei-access-where { min-width: 0; }
#facility-top .chosei-access-shuttle { grid-column: auto; grid-row: auto; padding: 0; border: 0; }
#facility-top :is(.chosei-access-label, .chosei-access-mode-label) { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--muted); }
#facility-top :is(.chosei-access-label, .chosei-access-mode-label) .ic { width: 16px; height: 16px; }
#facility-top .chosei-access-shuttle-heading { justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
#facility-top .chosei-access-shuttle-heading strong { font-size: 18px; line-height: 28px; font-weight: 700; }
#facility-top .chosei-access-reservation { margin-bottom: 5px; padding: 0 6px; border: 1px solid rgb(47 47 47 / 28%); border-radius: 2px; color: var(--ink); font-size: 11px; line-height: 17px; font-weight: 500; }
/* A departure board: two columns under ink rules, times at TOP's big-numeral size. */
#facility-top .chosei-transfer-journeys { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
/* Journeys sit under a quiet hairline, not a heavy ink bar. */
#facility-top .chosei-transfer-journey { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid rgb(47 47 47 / 18%); }
#facility-top .chosei-transfer-direction { font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink); }
#facility-top .chosei-transfer-journey time { font: 700 28px/36px var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; }
#facility-top .chosei-transfer-journey p { font-size: 14px; line-height: 22px; }
#facility-top .chosei-transfer-journey p > strong { font-weight: 500; }
/* From → to as a transit route: both stops on one left edge, a filled dot for where you board, an open dot
 * for where you arrive, joined by the day timeline's hairline (replaces the indenting arrow). */
#facility-top .chosei-transfer-journey p { position: relative; display: grid; gap: 4px; margin-top: 4px; padding-left: 16px; }
#facility-top .chosei-transfer-journey p > span { display: block; font-size: 13px; line-height: 20px; color: var(--muted); }
#facility-top .chosei-transfer-journey p > span > .chosei-direction-icon { display: none; }
#facility-top .chosei-transfer-journey p > :is(strong, span) { position: relative; }
#facility-top .chosei-transfer-journey p > :is(strong, span)::before { content: ""; position: absolute; left: -16px; width: 7px; height: 7px; box-sizing: border-box; border-radius: 50%; }
#facility-top .chosei-transfer-journey p > strong::before { top: 7.5px; background: var(--ink); }
#facility-top .chosei-transfer-journey p > span::before { top: 6.5px; border: 1.5px solid rgb(47 47 47 / 55%); }
#facility-top .chosei-transfer-journey p::after { content: ""; position: absolute; left: 3px; top: 15px; height: 17px; width: 1px; background: rgb(47 47 47 / 18%); }
#facility-top .chosei-access-booking-note { margin-top: 16px; font-size: 13px; line-height: 20px; color: var(--muted); }
#facility-top .chosei-access-shuttle .chosei-access-disclosure { margin-top: 4px; border: 0; }
#facility-top .chosei-access-shuttle .chosei-access-disclosure summary { justify-content: flex-start; gap: 6px; width: fit-content; min-height: 44px; padding: 0; font-size: 14px; line-height: 22px; font-weight: 500; }
/* お車 reads like 無料送迎 above it: icon label, then the fact at the same size. */
#facility-top .chosei-access-car { display: grid; justify-items: start; gap: 2px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(47 47 47 / 12%); }
#facility-top .chosei-access-car strong { font-size: 18px; line-height: 28px; font-weight: 700; }
#facility-top .chosei-access-where { display: grid; gap: 16px; }
#facility-top .chosei-access-map-preview iframe { height: auto; aspect-ratio: 16 / 9; }
#facility-top .chosei-access-name { margin-top: 2px; font-size: 16px; line-height: 24px; }
#facility-top .chosei-access-address-text { font-size: 14px; line-height: 22px; }

/* FAQ rows use TOP's metrics. */
#facility-top .chosei-faq-list summary { min-height: 64px; padding-block: 19px; font-size: 15px; line-height: 26px; font-weight: 500; }
#facility-top .chosei-faq-list p { padding: 0 40px 24px 0; font-size: 15px; line-height: 26px; color: var(--chosei-body); }

@media (min-width: 768px) {
  #facility-top .chosei-access-map-preview iframe { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
  #facility-top .room-type-body .room-type-facts dd { font-size: 15px; line-height: 24px; }
  /* Four across: a two-line note keeps every card's facts on one line. Phones show one card, so no gap is reserved. */
  #facility-top .room-type-body .room-type-facts dd { min-height: 2lh; }
  /* Access in two even halves: the facts (shuttle, car, address) | the map, as tall as the facts. */
  #facility-top .chosei-access-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 64px; row-gap: 24px; align-items: stretch; }
  #facility-top .chosei-access-how { grid-column: 1; grid-row: 1; }
  #facility-top .chosei-access-where { display: contents; }
  #facility-top .chosei-access-destination { grid-column: 1; grid-row: 2; padding-top: 20px; border-top: 1px solid rgb(47 47 47 / 12%); }
  #facility-top .chosei-access-map-preview { grid-column: 2; grid-row: 1 / span 2; }
  #facility-top .chosei-access-map-preview iframe { height: 100%; min-height: 360px; aspect-ratio: auto; }
  #facility-top .chosei-transfer-journeys { gap: 32px; }
  /* Plans: five TOP-style photo cards in one row. */
  #facility-top .url-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  #facility-top .url-card { display: flex; flex-direction: column; align-items: stretch; }
  #facility-top .chosei-option-image { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 12px; }
}

/* Hierarchy pass: one scale for the whole page — chapter (24–30) › section (22–24) ›
 * sub-head / act (20–24) › featured title (18–22) › row title (16) › body (14–15) ›
 * eyebrow (12, muted). Inside a group lines sit 2–4px apart; groups sit 20px+ apart. */
#facility-top :is(.facility-information-body > span, .url-card .route-path) { display: block; margin: 0; font-size: 12px; line-height: 18px; color: var(--muted); }
#facility-top :is(.food-decision-row h4, .facility-information-body h4, .url-card h3) { margin-top: 2px; }
#facility-top :is(.food-decision-row p:not(.food-decision-meta), .facility-information-body p, .url-card p) { margin-top: 4px; color: var(--chosei-body); }
#facility-top :is(.chosei-access-label, .chosei-access-mode-label) { font-size: 12px; line-height: 18px; }
#facility-top .chosei-access-shuttle-heading strong { margin-top: 2px; }
/* Plan rows: the three lines travel as one block, centred on the photo instead of spread over it. */
#facility-top .url-card { grid-template-rows: 1fr auto auto auto 1fr; row-gap: 0; align-items: start; }
#facility-top .url-card .chosei-option-image { grid-row: 1 / -1; align-self: center; }
#facility-top .url-card .route-path { grid-row: 2; }
#facility-top .url-card h3 { grid-row: 3; }
#facility-top .url-card p { grid-row: 4; }
@media (min-width: 768px) {
  #facility-top .section-heading > :is(.lead, .chosei-day-intro) { font-size: 16px; line-height: 28px; }
}
@media (min-width: 1024px) {
  #facility-top .chosei-stay-block :is(.section-heading, .room-lineup-heading) h3 { font-size: 22px; line-height: 32px; }
}
@media (min-width: 1200px) {
  /* Facilities: the two places | the park map, in DOM order. Below 1200px the map column
   * would drop under 701px and the embed would switch to its phone layout. */
  #facility-top #facilities { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: stretch; }
  #facility-top #facilities > :is(.section-heading, .section-actions) { grid-column: 1 / -1; }
  #facility-top #facilities .facility-information-grid { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 32px; padding-top: calc(18px * 1.5 + 6px + 16px); /* map h4 line + its margin + heading margin: photos meet the map frame */ }
  #facility-top #facilities .chosei-map { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; margin: 0; }
  #facility-top #facilities .chosei-map-preview { flex: 1; }
  #facility-top #facilities .chosei-map-preview iframe { height: 100%; min-height: 560px; }
  #facility-top .facility-information-card { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #facility-top .facility-information-card > .chosei-gallery-content-link { grid-column: 1; }
  #facility-top #facilities .facility-information-media img { width: 100%; aspect-ratio: 2 / 1; }
}

/* Facilities below 1200px: two photo cards side by side (as 滞在をもっと見る and the meals), the running
 * badge on the photo so both names line up. Phones drop the lead and notes; the facility page keeps them. */
@media (max-width: 1199px) {
  #facility-top #facilities .facility-information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #facility-top #facilities .facility-information-card { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border: 0; }
  #facility-top #facilities .facility-information-card > .chosei-gallery-photo-button { width: 100%; aspect-ratio: auto; border-radius: 8px; }
  #facility-top #facilities :is(.facility-information-media, .facility-information-media img) { width: 100%; }
  #facility-top #facilities .facility-information-media img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
  #facility-top #facilities :is(.facility-information-card > .chosei-gallery-content-link, .facility-information-card > .facility-information-body) { margin-top: 10px; }
  #facility-top #facilities :is(.facility-information-card > .chosei-gallery-content-link, .facility-information-body, .facility-information-body > span) { position: static; }
  #facility-top #facilities .facility-information-card .chosei-open-badge { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; }
  #facility-top #facilities .facility-information-body h4 { font-size: 16px; line-height: 24px; }
}
@media (max-width: 767px) {
  #facility-top #facilities .section-heading > .lead, #facility-top #facilities .facility-information-body p { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #facility-top #facilities .facility-information-media img { aspect-ratio: 3 / 2; }
}

/* つくば has a single room type: from 768px its one card reads like a day-plan moment, the photo
 * with the name and facts resting on its lower edge, rather than a lone column-wide card. */
#facility-top .room-showcase-grid.is-single { grid-auto-columns: 100%; }
@media (min-width: 768px) {
  #facility-top .room-showcase-grid.is-single { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  #facility-top .is-single .room-type-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 40px; } /* text centred beside the photo, not pinned to its foot (QA 2026-10-13) */
  #facility-top .is-single .room-type-image-link { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  #facility-top .is-single .room-type-image { grid-column: 1; grid-row: 1 / -1; }
  #facility-top .is-single .room-type-image-link h4 { grid-column: 2; grid-row: 2; justify-content: flex-start; margin: 0; }
  #facility-top .is-single .room-type-body { grid-column: 2; grid-row: 3; }
}

/* 八ヶ岳 (four places) and つくば (three) lay their places out in a row above the park map,
 * which then takes the full width; 長生村's two keep the column beside the map. */
@media (max-width: 767px) {
  #facility-top #facilities .facility-information-grid[data-count="3"] > :last-child { grid-column: 1 / -1; }
  #facility-top #facilities .facility-information-grid[data-count="3"] > :last-child .facility-information-media img { aspect-ratio: 2 / 1; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #facility-top #facilities .facility-information-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  #facility-top #facilities .facility-information-grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  #facility-top #facilities:has(> .facility-information-grid:is([data-count="3"], [data-count="4"])) { grid-template-columns: minmax(0, 1fr); }
  #facility-top #facilities .facility-information-grid:is([data-count="3"], [data-count="4"]) { grid-template-columns: repeat(var(--count), minmax(0, 1fr)); gap: 24px; padding-top: 0; }
  #facility-top #facilities .facility-information-grid[data-count="3"] { --count: 3; }
  #facility-top #facilities .facility-information-grid[data-count="4"] { --count: 4; }
  #facility-top #facilities .facility-information-grid:is([data-count="3"], [data-count="4"]) .facility-information-media img { aspect-ratio: 3 / 2; }
  #facility-top #facilities:has(> .facility-information-grid:is([data-count="3"], [data-count="4"])) .chosei-map { grid-column: 1; grid-row: 3; margin-top: 48px; }
}

/* Review fixes: focus, wrapping and landings. */
/* Keyboard focus clears the sticky header + sub-nav, and the booking dock where it is shown. */
html:has(#facility-top) { scroll-padding-top: calc(var(--header-height) + 65px); }
#facility-top .chosei-day-steps .timeline-item[id] { scroll-margin-top: 8px; }
@media (max-width: 1023px) {
  html:has(#facility-top) { scroll-padding-bottom: calc(97px + env(safe-area-inset-bottom)); }
}
/* Photo buttons draw their ring on the paper just outside the photo. */
#facility-top .chosei-gallery-photo-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Japanese breaks at phrase boundaries, never leaving one character alone. */
#facility-top :where(.chosei-content-sheet) :where(p, h2, h3, h4, dd, summary) { word-break: auto-phrase; text-wrap: pretty; }
#facility-top :is(.url-card h3, .url-card p, .chosei-day-intro, .chosei-day-step-body > p, .room-type-facts dd) { word-break: auto-phrase; text-wrap: pretty; }
#facility-top :is(.chosei-day-steps h4, .chosei-day-more p) { word-break: auto-phrase; }
/* A shuttle destination wraps as one phrase beside its arrow. */
#facility-top .chosei-transfer-to { flex: 1 1 auto; min-width: 0; word-break: keep-all; }
#facility-top .chosei-transfer-journey p > strong { word-break: keep-all; }

/* TOP's shape mix (2026-09-30): squares and triangles from the supplied Frame 2 sit among the
 * freehand circles; triangles lift their caption into the wider part of the shape. */
#facility-top .ref-activity-photo:is([data-activity-shape="square"], [data-activity-shape="triangle"]) { border-radius: 0; }
#facility-top .ref-activity-photo[data-activity-shape="triangle"] .ref-activity-caption { bottom: 23%; }
#facility-top .ref-activity-photo[data-activity-shape="triangle"] .ref-activity-caption.has-title { bottom: 18%; }

/* Every wall photo is named (owner, 2026-10-06), as on TOP (top-app.css): smaller photos get a smaller
   label, a long name on a smaller phone photo folds at a word, and the arrow stays on the large photos. */
#facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-caption { z-index: 1; bottom: 10%; grid-template-columns: minmax(0, 1fr); max-width: none; padding: 2px 6px; font-size: 12px; line-height: 16px; white-space: nowrap; }
#facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-arrow { display: none; }
#facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-caption { max-width: calc(100% + 16px); white-space: normal; word-break: keep-all; overflow-wrap: normal; text-align: center; }
#facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-category { white-space: inherit; }
#facility-top .ref-activity-photo[data-activity-size="small"] .ref-activity-caption { padding: 2px 5px; font-size: 11px; line-height: 15px; }
@media (min-width: 768px) {
  #facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-caption { grid-template-columns: minmax(0, 1fr) 14px; gap: 4px; padding: 3px 8px; font-size: 14px; line-height: 19px; }
  #facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-arrow { display: block; width: 14px; height: 14px; }
  #facility-top .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-caption { max-width: none; white-space: nowrap; text-align: left; }
  #facility-top .ref-activity-photo[data-activity-size="small"] .ref-activity-caption { font-size: 13px; line-height: 17px; }
}
/* Near the wall's side a name slides inward (--caption-shift, set by top-activity-wall.js). */
#facility-top .ref-activity-caption { transform: translateX(calc(-50% + var(--caption-shift, 0px))); }

/* 遊んで、泊まって、また遊ぶ。 in TOP's tone (owner, 2026-10-07): four bordered boxes read as a form.
   The day reads as a timeline — the time in straight Inter at left, the moment and its line at right —
   between hairlines, as /activity/'s timetable; the action is TOP's bold chevron link. */
#facility-top .facility-day-summary { display: block; padding: 0; background: none; border-top: 1px solid rgb(47 47 47 / 12%); }
#facility-top .facility-day-summary li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; padding: 16px 0; background: none; border-bottom: 1px solid rgb(47 47 47 / 12%); }
#facility-top .facility-day-summary-time { grid-row: 1 / 3; margin: 2px 0 0; color: #2f2f2f; font: 700 14px/20px var(--font-num, Inter), var(--font-ja, sans-serif); }
#facility-top .facility-day-summary strong { font-size: 16px; line-height: 24px; word-break: auto-phrase; }
#facility-top .facility-day-summary p { margin-top: 4px; font-size: 14px; line-height: 22px; text-wrap: pretty; word-break: auto-phrase; }
#facility-top .chosei-day-photo-note { margin-top: 10px; font-size: 11px; line-height: 18px; }
#facility-top .chosei-day-actions { justify-content: flex-start; margin-top: 12px; }
#facility-top .chosei-day-actions .button { width: auto; min-height: 40px; padding: 0; border: 0; background: none; color: #2f2f2f; font-size: 14px; font-weight: 700; }
@media (min-width: 768px) {
  #facility-top .facility-day-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid rgb(47 47 47 / 12%); }
  #facility-top .facility-day-summary li { display: block; padding: 20px 0 24px; border-bottom: 0; }
  #facility-top .facility-day-summary-time { margin: 0 0 6px; font-size: 15px; }
  #facility-top .facility-day-summary strong { font-size: 18px; line-height: 28px; }
}
#facility-top .section-actions.chosei-day-actions { display: flex; justify-content: flex-start; }
#facility-top .chosei-day-actions .button { margin-inline: 0; }

/* ===== TOP's grammar (owner, 2026-10-07: 「톱이랑 너무 다르다, 어수선하다」) =====
 * One way to open a section — a noun title with 「すべて見る >」 on its line and one lead line under it
 * (index.html .ref-head-row); no outlined buttons in the body; white sections, with TOP's two
 * brush-edged bands only: the day (as BUBでの過ごし方) and FAQ・相談 closing the page (as TOP's).
 * Measured from TOP at 393 / 1440. */
#facility-top .chosei-content-sheet > .section,
#facility-top .chosei-content-sheet > .surface-band > .section { padding-block: 64px 0; border-image: none; }
#facility-top .chosei-content-sheet > .surface-band { background: none; }
#facility-top .chosei-content-sheet > #access.section { padding-bottom: 0; border-image: none; }
#facility-top .facility-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#facility-top .chosei-content-sheet .facility-head-row > h2 { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: 22px; line-height: 32px; font-weight: 700; letter-spacing: normal; text-wrap: balance; }
#facility-top .facility-view-all { display: inline-flex; flex: none; align-items: center; gap: 2px; min-height: 40px; padding-left: 2px; color: var(--ink); font-size: 14px; line-height: 22px; font-weight: 700; text-decoration: none; white-space: nowrap; }
#facility-top .facility-view-all::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('/assets/icons/lucide/source/chevron-right.svg') center / contain no-repeat; mask: url('/assets/icons/lucide/source/chevron-right.svg') center / contain no-repeat; }
#facility-top .chosei-content-sheet .section-heading { margin-bottom: 16px; }
#facility-top .chosei-content-sheet .section-heading > :is(.lead, .chosei-day-intro) { max-width: none; margin-top: 12px; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 26px; }
#facility-top .chosei-content-sheet .section-heading > .lead { display: block; }

#facility-top .chosei-content-sheet > .section + .section,
#facility-top .chosei-content-sheet > #access.section { padding-top: 64px; }
#facility-top .chosei-content-sheet .section-heading { display: block; }
#facility-top #activity .section-heading.chosei-chapter-heading { display: block; }
#facility-top #activity .chosei-season-context { row-gap: 0; }
#facility-top #activity .chosei-season-overview { min-height: 0; }

/* The day: TOP's grey band with the brush edge above and below. */
#facility-top .chosei-content-sheet > .section.day-plan-section { position: relative; margin-top: 40px; padding-block: 64px; border-image: linear-gradient(var(--surface) 0 0) fill 0 / / 0 100vw; }
#facility-top .chosei-content-sheet > .section.day-plan-section::after { content: ""; position: absolute; left: 50%; bottom: -17px; width: 100vw; height: 18px; margin-left: -50vw; background: var(--surface); transform: scaleY(-1); pointer-events: none; -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; }
#facility-top .chosei-content-sheet > .day-plan-section + .section { padding-top: 64px; }

/* アクティビティ: TOP's 「いま開催中」 card over the wall; the season tabs and the count give way. */
#facility-top #activity :is(.chosei-activity-total, .live-copy, .chosei-season-detail-link, .chosei-season-taffy, .chosei-season-edge) { display: none !important; }
/* Every season stays a tap away (owner, 2026-10-07): the page's own tab style (the section tabs above,
   /activity/'s season tabs) — names only, the chosen one bold and underlined, a live MUCHU dot on the
   running season. The card below carries the dates. */
#facility-top #activity .chosei-season-picker-controls { position: static; margin: 0 0 16px; padding: 0; border: 0; background: none; }
#facility-top #activity .chosei-season-tabs { display: flex; gap: 24px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; border-bottom: 1px solid rgb(47 47 47 / 12%); }
#facility-top #activity .chosei-season-tab { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; min-width: 0; min-height: 44px; margin: 0 0 -1px; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: rgb(47 47 47 / 60%); }
#facility-top #activity .chosei-season-tab::before { content: none; }
#facility-top #activity .chosei-season-tab-name { font-size: 15px; line-height: 22px; font-weight: 500; }
#facility-top #activity .chosei-season-tab-period { display: none; }
#facility-top #activity .chosei-season-tab[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }
#facility-top #activity .chosei-season-tab[aria-selected="true"] .chosei-season-tab-name { font-weight: 700; }
#facility-top #activity .chosei-season-tab-live { position: static; order: -1; flex: none; width: 7px; height: 7px; margin: 0 6px 0 0; padding: 0; overflow: hidden; border-radius: 0; background: #d56e59; color: transparent; font-size: 0; -webkit-mask: url('/assets/images/top-activities/freehand/mask-04.svg') center / contain no-repeat; mask: url('/assets/images/top-activities/freehand/mask-04.svg') center / contain no-repeat; animation: facility-season-live 1.4s ease-in-out infinite; }
#facility-top #activity .chosei-season-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { #facility-top #activity .chosei-season-tab:hover:not([aria-selected="true"]) { color: var(--ink); } }
@media (min-width: 768px) { #facility-top #activity .chosei-season-tabs { gap: 32px; margin-inline: 0; padding-inline: 0; overflow: visible; } }
#facility-top #activity .chosei-season-context { position: relative; display: grid; justify-items: start; align-content: center; min-height: 88px; margin: 0 0 8px; padding: 0 116px 0 20px; border-radius: 8px; background: #ece1d6 no-repeat right 8px bottom / auto 84px; }
/* Each season its own colour (owner, 2026-10-07): pale tints of the BUB palette (Figma bub_corp 1-2) —
   夏祭り KAIHO, 夏先取り KICHAKU, ハロウィン SAON, ホリデー MUCHU, 冬祭り TAIDOU, 春まつり NAKAMA — with
   the season's own cut-out on the right. */
#facility-top #activity [data-season-id="summer"] .chosei-season-context { background-color: #dae4f1; background-image: url('/assets/images/top-season/summer-cutout.webp'); }
#facility-top #activity [data-season-id="earlysummer"] .chosei-season-context { background-color: #d5d9d2; background-image: url('/assets/images/top-season/earlysummer-cutout.webp'); }
#facility-top #activity [data-season-id="halloween"] .chosei-season-context { background-color: #ece1d6; background-image: url('/assets/images/top-season/halloween-pumpkins-cutout.webp'); }
#facility-top #activity [data-season-id="holiday"] .chosei-season-context { background-color: #f0d1cb; background-image: url('/assets/images/top-season/holiday-cutout.webp'); }
#facility-top #activity [data-season-id="winter"] .chosei-season-context { background-color: #dfdad4; background-image: url('/assets/images/top-season/winter-cutout.webp'); }
#facility-top #activity [data-season-id="spring"] .chosei-season-context { background-color: #ebdad6; background-image: url('/assets/images/top-season/spring-cutout.webp'); }
#facility-top #activity .chosei-season-context::before { content: none; order: -1; margin-bottom: 4px; color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 500; }
#facility-top #activity:has(.chosei-season-tab.is-current[aria-selected="true"]) .chosei-season-context::before { content: "いま開催中"; }
#facility-top #activity:has(.chosei-season-tab.is-current[aria-selected="true"]) .chosei-season-context::after { content: ""; position: absolute; top: calc(50% - 32px + 4px); left: 7px; width: 8px; height: 8px; background: #d56e59; -webkit-mask: url('/assets/images/top-activities/freehand/mask-04.svg') center / contain no-repeat; mask: url('/assets/images/top-activities/freehand/mask-04.svg') center / contain no-repeat; animation: facility-season-live 1.4s ease-in-out infinite; }
@keyframes facility-season-live { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { #facility-top #activity .chosei-season-context::after, #facility-top #activity .chosei-season-tab-live { animation: none; } }
#facility-top #activity .chosei-season-overview { position: static; display: block; margin: 0; padding: 0; color: var(--ink); text-decoration: none; }
#facility-top #activity .chosei-season-overview::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
#facility-top #activity .chosei-season-overview h3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: 0; }
#facility-top #activity .chosei-season-overview .ic { display: none; }
#facility-top #activity .chosei-season-context .status-pill { display: block; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: rgb(47 47 47 / 70%); font: 400 12px/16px var(--font-num), var(--font-ja); letter-spacing: 0; }

/* 客室 / 食事 / 館内施設: three plain white sections with TOP's head; no arrows, no dark band, no rules. */
#facility-top #rooms .room-lineup-heading { display: none; }
#facility-top #rooms .chosei-stay-block,
#facility-top #rooms .chosei-stay-block + .chosei-stay-block,
#facility-top #rooms #dining,
#facility-top #rooms #dining + .chosei-stay-block { margin: 64px 0 0; padding: 0; border: 0; background: none; color: inherit; }
#facility-top #rooms .room-showcase-section { margin-top: 0; }
#facility-top #rooms #dining { --muted: rgb(47 47 47 / 70%); --line: rgb(47 47 47 / 12%); --chosei-body: rgb(47 47 47 / 85%); }
#facility-top #rooms #dining::before, #facility-top #rooms #dining::after { content: none; }
#facility-top #rooms #dining :is(h3, h4), #facility-top #rooms #dining .food-decision-meta strong { color: var(--ink); }
#facility-top #rooms .chosei-stay-block .section-heading { margin-bottom: 16px; }
#facility-top #facilities .section-heading > .lead { display: none; }

/* お知らせ: TOP's head; no rule above. */
#facility-top .chosei-content-sheet > .facility-news { margin-top: 0; padding-top: 64px; border-top: 0; }
#facility-top .facility-news .facility-head-row { margin-bottom: 8px; }
#facility-top .facility-news-list { border-top: 1px solid rgb(47 47 47 / 12%); }

/* FAQ・相談: TOP's closing band (surface-subtle, brush edge on top) running into the footer. */
#facility-top .chosei-content-sheet > .section.chosei-faq-preview { position: relative; margin-top: 82px; padding-block: 48px; border-image: linear-gradient(var(--surface-subtle) 0 0) fill 0 / / 0 100vw; }
#facility-top .chosei-content-sheet > .section.chosei-faq-preview::before { content: ""; position: absolute; left: 50%; top: -17px; width: 100vw; height: 18px; margin-left: -50vw; background: var(--surface-subtle); pointer-events: none; -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; }
#facility-top .chosei-faq-preview .section-heading { margin-bottom: 8px; }
#facility-top .chosei-support-phone h3 { font-size: 17px; line-height: 26px; }
#facility-top .facility-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#facility-top .facility-contact-actions .button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 12px 10px; border: 1px solid transparent; border-radius: 8px; font-size: 15px; line-height: 22px; font-weight: 700; white-space: nowrap; }
#facility-top .facility-contact-actions .button.primary { background: var(--ink); color: var(--paper); }
#facility-top .facility-contact-actions .button.secondary { border-color: var(--ink); background: var(--paper); color: var(--ink); }
#facility-top .facility-contact-actions .button .ic { width: 18px; height: 18px; }
#facility-top .chosei-support-phone .support-contact__phone { padding: 0; border: 0; display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
#facility-top .chosei-support-phone .support-contact__phone p { margin: 0; color: var(--muted); font-size: 13px; line-height: 20px; }
#facility-top .chosei-support-phone .support-contact__phone .facility-contact-number { color: var(--ink); font-weight: 700; }

@media (min-width: 768px) {
  #facility-top .chosei-content-sheet > .section,
  #facility-top .chosei-content-sheet > .surface-band > .section,
  #facility-top .chosei-content-sheet > .day-plan-section + .section,
  #facility-top .chosei-content-sheet > .facility-news { padding-top: 88px; }
  #facility-top .chosei-content-sheet > .section.day-plan-section { margin-top: 56px; padding-block: 88px; }
  #facility-top .chosei-content-sheet > .section + .section,
  #facility-top .chosei-content-sheet > #access.section { padding-top: 88px; }
  #facility-top #facilities { display: block; }
  #facility-top #facilities .facility-information-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 0; }
  /* 長生村 has two facilities: two columns, not a third empty one. */
  #facility-top #facilities .facility-information-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #facility-top .chosei-content-sheet .facility-head-row > h2 { font-size: 28px; line-height: 40px; }
  #facility-top .facility-view-all { font-size: 15px; }
  #facility-top .chosei-content-sheet .section-heading { margin-bottom: 24px; }
  #facility-top .chosei-content-sheet .section-heading > :is(.lead, .chosei-day-intro) { margin-top: 8px; }
  #facility-top #rooms .chosei-stay-block, #facility-top #rooms .chosei-stay-block + .chosei-stay-block, #facility-top #rooms #dining, #facility-top #rooms #dining + .chosei-stay-block { margin-top: 88px; }
  #facility-top #rooms .room-showcase-section { margin-top: 0; }
  #facility-top #activity .chosei-season-context { width: 400px; min-height: 96px; padding: 0 128px 0 24px; border-radius: 16px; background-size: auto 88px; }
  #facility-top #activity .chosei-season-context::before { font-size: 12px; line-height: 18px; font-weight: 700; padding-left: 16px; }
  #facility-top #activity:has(.chosei-season-tab.is-current[aria-selected="true"]) .chosei-season-context::after { top: calc(50% - 34px + 4px); left: 24px; width: 10px; height: 10px; }
  #facility-top #activity .chosei-season-overview h3 { font-size: 22px; line-height: 30px; }
  #facility-top #activity .chosei-season-context .status-pill { font-size: 13px; line-height: 20px; color: rgb(47 47 47 / 85%); }
  #facility-top .chosei-content-sheet > .section.chosei-faq-preview { padding-block: 64px; }
  #facility-top .chosei-support-phone { padding-left: 32px; }
}

/* 過ごし方 as TOP's 「BUBでの過ごし方」 (owner, 2026-10-07: the timetable read as a spec sheet): a 120px
   photo beside 「1日目 | 12:00」, an 18px title and the line on phones; four photo cards on the web. */
#facility-top #day-plan .facility-day-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; border: 0; background: none; }
#facility-top #day-plan .facility-day-summary > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; row-gap: 4px; align-items: start; padding: 0; border: 0; background: none; }
#facility-top #day-plan .facility-day-photo { grid-column: 1; grid-row: 1 / 4; display: block; width: 120px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface-subtle); }
#facility-top #day-plan .facility-day-summary-time { grid-column: 2; grid-row: auto; margin: 0; color: rgb(47 47 47 / 85%); font: 400 13px/20px var(--font-ja); }
#facility-top #day-plan .facility-day-summary strong { grid-column: 2; display: block; color: var(--ink); font-size: 18px; line-height: 28px; font-weight: 700; }
#facility-top #day-plan .facility-day-summary p { grid-column: 2; margin: 0; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 26px; }
#facility-top #day-plan > .chosei-day-photo-note { margin-top: 24px; }
@media (min-width: 768px) {
  #facility-top #day-plan .facility-day-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; border: 0; }
  #facility-top #day-plan .facility-day-summary > li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; align-content: start; row-gap: 0; padding: 0; }
  #facility-top #day-plan .facility-day-photo { grid-row: auto; width: 100%; margin-bottom: 12px; }
  #facility-top #day-plan .facility-day-summary-time { margin: 0; font-size: 13px; }
  #facility-top #day-plan .facility-day-summary strong { margin-top: 12px; font-size: 20px; line-height: 30px; }
  #facility-top #day-plan .facility-day-summary p { margin-top: 12px; }
  #facility-top #day-plan .facility-day-summary > li > :is(.facility-day-photo, .facility-day-summary-time, strong, p) { grid-column: 1; }
}

/* Polish (2026-10-07): every photo with TOP's 12px corner; プラン rows with 過ごし方's 120px photo; the
   gap before プラン as any other section's. */
#facility-top :is(.room-type-image, .food-decision-feature img, .food-decision-row img, .facility-information-media img, .chosei-option-image) { border-radius: 12px; }
#facility-top :is(.food-decision-feature, .food-decision-row) > .chosei-gallery-photo-button { border-radius: 12px; }
#facility-top .chosei-content-sheet > #rooms.section { padding-block: 64px 0; }
@media (min-width: 768px) { #facility-top .chosei-content-sheet > #rooms.section { padding-top: 88px; } }
#facility-top #optional-routes { margin-top: 0; padding-top: 0; }
@media (max-width: 767px) {
  #facility-top #optional-routes .url-card { grid-template-columns: 120px minmax(0, 1fr); }
  #facility-top #optional-routes .chosei-option-image { width: 120px; height: auto; aspect-ratio: 4 / 3; }
}
/* Two-phrase titles as TOP's (「到着したら、/遊びの時間」): the line breaks only between phrases. */
#facility-top #day-plan .facility-day-phrase { display: inline-block; }
@media (max-width: 767px) { #facility-top #day-plan .facility-day-phrase { display: block; } }
/* 館内施設 photos in 食事's 3:2 on the web, so the two rows of cards line up. */
@media (min-width: 768px) {
  #facility-top #facilities :is(.facility-information-media, .facility-information-media img) { height: auto; aspect-ratio: 3 / 2; }
  #facility-top #facilities .facility-information-media img { width: 100%; object-fit: cover; }
}
/* 長生村's TOP keeps the 3D map too (owner, 2026-10-07): full width under the cards, as つくば・八ヶ岳. */
@media (min-width: 768px) { #facility-top #facilities > .chosei-map { grid-column: 1 / -1; margin-top: 48px; } }

/* Shorter page on phones (owner, 2026-10-07):
   プラン — the 「ならでは」 cards: photos running across with the next one peeking.
   アクセス — a lower map and tighter rows. */
@media (max-width: 767px) {
  #facility-top #optional-routes .url-card-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 40px) * .62); grid-template-columns: none; gap: 12px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  #facility-top #optional-routes .url-card-grid::-webkit-scrollbar { display: none; }
  #facility-top #optional-routes .url-card { display: block; min-width: 0; padding: 0; border: 0; scroll-snap-align: start; }
  #facility-top #optional-routes .url-card .chosei-option-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 0 0 10px; border-radius: 12px; object-fit: cover; }
  #facility-top #optional-routes .url-card .route-path { display: block; margin: 0; color: rgb(47 47 47 / 70%); font-size: 12px; line-height: 18px; }
  #facility-top #optional-routes .url-card h3 { margin: 2px 0 0; font-size: 16px; line-height: 24px; }
  #facility-top #optional-routes .url-card p { margin: 2px 0 0; color: rgb(47 47 47 / 85%); font-size: 13px; line-height: 20px; }
  #facility-top #access .chosei-access-map-preview iframe { aspect-ratio: 5 / 2; }
  #facility-top #access .chosei-access-car { margin-top: 12px; padding-top: 16px; }
  #facility-top #access .chosei-access-where { margin-top: 0; }
  #facility-top #access .chosei-access-destination { padding-top: 0; }
}
/* Phones: the photo as tall as its row (owner, 2026-10-07: the words ran past a short 4:3 photo).
   Title up to two phrases, note up to three lines; the photo stretches to match. */
@media (max-width: 767px) {
  #facility-top #day-plan .facility-day-summary > li { grid-template-rows: auto auto auto; align-items: stretch; }
  #facility-top #day-plan .facility-day-photo { align-self: stretch; height: 100%; min-height: 136px; aspect-ratio: auto; }
  #facility-top #day-plan .facility-day-summary p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* The current tab is bolder; every tab reserves its bold width (an invisible bold copy of its label, set by
 * chosei.js), so the row does not shift sideways each time the current section changes while scrolling
 * (owner iPhone check, 2026-10-08). */
#facility-top .url-subnav a[data-label] { flex-direction: column; justify-content: center; align-items: center; }
#facility-top .url-subnav a[data-label]::before { content: attr(data-label); height: 0; overflow: hidden; visibility: hidden; font-weight: 500; pointer-events: none; }

/* The tab row sits exactly under the header and lets the header's line be the only line. It used to tuck
 * 1px under the header with a second line of its own; while scrolling, the fixed header and the sticky row
 * land a pixel apart on alternate frames, so the doubled line and a sliver of photo flickered at the seam
 * (owner, 2026-10-08). A paper-coloured edge above the row covers any such sliver. */
#facility-top .url-subnav { top: var(--header-height); border-top: 0; box-shadow: 0 -6px 0 var(--paper); }
/* The season wall bleeds to the screen edge by design, which made its holder 20px wider than the column and
 * scrollable sideways: a vertical swipe over the photos nudged the wall left and right (owner, 2026-10-08).
 * The holder shows one season at a time, so it neither scrolls nor clips: clipping at the column cut the
 * bleeding photos 20px in from each side (owner 10/12: 「양쪽 옆이 푹 들어감」). The content sheet clips at the
 * screen edge instead. bub-ui.css hides the y-overflow of every rail with !important, which would turn x back
 * into a scroller, so this holder restores it. */
#facility-top #activity .live-card-grid { overflow: visible !important; overscroll-behavior: auto; }
/* Pinned like the header once the row reaches it (chosei.js): Safari moved the sticky row a frame behind the
 * fixed header during momentum scroll, so it bobbed (owner iPhone recording, 2026-10-08). */
#facility-top .chosei-subnav-sentinel { height: 0; }
#facility-top .url-subnav.is-pinned { position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 30; margin: 0; }

/* The season of the family's planned stay (assets/js/family-plan.js): a still KAIHO mark beside its tab. */
#facility-top #activity .chosei-season-tab-live.is-planned { background: #8aadd8; animation: none; }