@import url("/assets/css/top-depth.css?v=20261015-concept");
@import url("/assets/css/top-feedback.css?v=20261007");
@import url("/assets/css/bub-ui.css?v=20260906-ui");
@import url("/assets/css/support-contact.css?v=20261002-contact");

/* TOP reuses the approved BUB type, color, media and control tokens. */
.ref-text-home {
  --section-space: 64px;
  --line: rgb(47 47 47 / 12%);
  --top-control-line: rgb(47 47 47 / 28%);
  --top-body-ink: rgb(47 47 47 / 85%);
  --top-feature-size: 24px;
  --top-feature-line: 34px;
  --top-card-size: 18px;
  --top-card-line: 28px;
  --top-body-size: 15px;
  --top-body-line: 26px;
  --top-meta-size: 13px;
  --top-meta-line: 20px;
}
.ref-text-hero { position: relative; display: flex; align-items: flex-end; min-height: 500px; min-height: clamp(460px, 70svh, 640px); padding: calc(var(--header-height) + 48px) var(--gutter) 32px; isolation: isolate; background: var(--ink); color: var(--paper); }
.ref-hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ref-text-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(47 47 47 / 58%); }
/* Reuse the supplied brush's upper edge to join the section backgrounds. */
.ref-text-hero::after,
.ref-about::before,
.ref-about::after,
.top-page .site-footer::before {
  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;
}
.ref-hero-copy { width: min(100%, var(--content)); margin-inline: auto; }
.ref-hero-copy > p { max-width: 32em; font-size: 14px; line-height: 25px; font-weight: 500; margin-bottom: 12px; }
.ref-hero-copy > p > span { display: inline-block; }
.ref-hero-copy h1 { font-size: 32px; line-height: 1.4; font-weight: 700; }
.ref-hero-copy h1 span { display: block; }
.ref-hero-actions { margin-top: 24px; }
.ref-hero-actions button { width: 100%; background: var(--paper); color: var(--ink); }
.ref-hero-actions strong { font-weight: 500; }
.ref-text-hero :focus-visible { outline-color: var(--paper); }

/* Only the desktop v3 footage contains letterboxing. */
.ref-text-hero { overflow: hidden; }
@media (min-width: 768px) {
  .ref-hero-video { top: -11%; bottom: auto; height: 122%; }
}

.ref-section { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; padding-block: var(--section-space); }
.ref-section-head { margin-bottom: 24px; }
.ref-section-head h2 { font-size: var(--type-section); font-weight: 700; line-height: var(--line-section); }
.ref-section-head.is-feature { margin-bottom: 28px; }
.ref-section-head.is-feature h2 { font-size: var(--top-feature-size); line-height: var(--top-feature-line); text-wrap: balance; }
.ref-title-phrase { display: inline-block; }
.ref-section-head > p:not(.eyebrow) { max-width: 42em; margin-top: 12px; color: var(--top-body-ink); font-size: var(--top-body-size); line-height: var(--top-body-line); }
.ref-section-end { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 32px; }
.ref-text-home .button { min-height: 52px; padding: 13px 20px; border-radius: var(--radius-action); font-size: 16px; line-height: 24px; font-weight: 600; }
.ref-text-home .button.secondary { background: var(--paper); color: var(--ink); border-color: var(--top-control-line); }
.ref-text-home .button .ic { width: 20px; height: 20px; flex-shrink: 0; }
.ref-text-home .button.ref-view-all { width: 100%; min-height: 40px; padding: 9px 16px; gap: 8px; border: 1px solid rgb(47 47 47 / 18%); border-radius: 4px; background: transparent; color: var(--top-body-ink); font-size: 14px; line-height: 20px; font-weight: 400; }
.ref-text-home .ref-view-all .ic { width: 16px; height: 16px; color: var(--muted); opacity: .7; }
.ref-text-home .ref-view-all:active { background: var(--interaction-pressed); }
.ref-section-end .button { width: 100%; }
.ref-section-end .button { gap: 12px; }
.ref-section-note { flex: 1 1 260px; font-size: var(--top-meta-size); line-height: var(--top-meta-line); color: var(--muted); }
.ref-text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 22px; font-weight: 500; }
.ref-text-link .ic { width: 18px; height: 18px; flex-shrink: 0; }
.ref-news-thumb { display: block; background-size: cover; background-position: center; border-radius: var(--radius-media); }

/* Curated notices stay immediately after the hero. */
.ref-news { padding-block: 40px; }
.ref-news .ref-feed-list { display: grid; gap: 24px; }
.ref-news-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 12px; }
/* Expired notices do not occupy a slot: four in two columns, three on mobile. */
.ref-news-row[hidden], .ref-news-row:nth-child(n + 5 of :not([hidden])) { display: none; }
.ref-news-thumb { width: 96px; aspect-ratio: 3 / 2; }
.ref-news-copy time { display: block; color: var(--muted); font: 400 12px/18px var(--font-num), var(--font-ja); margin-bottom: 4px; }
.ref-news-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 22px; font-weight: 500; }
.ref-news-thumb.is-news-1 { background-image: url('/assets/images/top-activity-crew.webp'); }
.ref-news-thumb.is-news-2 { background-image: url('/assets/images/location-chosei-clean.webp'); }
.ref-news-thumb.is-news-3 { background-image: url('/assets/images/top-stay-tent.webp'); }
.ref-news-thumb.is-news-4 { background-image: url('/assets/images/hero.webp'); }
.ref-news-more { display: flex; justify-content: flex-end; margin-top: 24px; }
.ref-facility-modal-compare::after { content: ""; flex: 0 0 14px; width: 14px; height: 14px; background: currentColor; mask: var(--icon-chevron-right) center / contain no-repeat; }

/* Photo links are enhanced into a bounded, touch-driven Matter.js field. */
.ref-experience-feed { position: relative; }
.ref-section-head.ref-experience-heading h2 { white-space: nowrap; text-wrap: nowrap; }
.ref-activity-overview { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.ref-activity-count { display: flex; align-items: baseline; gap: 6px; font-size: 12px; line-height: 20px; white-space: nowrap; }
.ref-activity-total strong { font: 700 28px/1.1 var(--font-num), var(--font-ja); font-variant-numeric: tabular-nums; }
.ref-activity-number { white-space: nowrap; }
.ref-activity-number strong { margin-right: 4px; }
.ref-activity-scope, .ref-activity-divider { color: var(--muted); }
.ref-activity-wall { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; height: 480px; margin-inline: calc(-1 * var(--gutter)); overflow: auto; touch-action: pan-y; }
/* iOS: no grey tap rectangle over the shaped photos, and the masked art is a layer before the first press scales it. */
.ref-activity-photo { position: relative; display: block; flex: 0 0 auto; width: 96px; aspect-ratio: 1; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.ref-activity-photo[data-activity-shape="square"], .ref-activity-photo[data-activity-shape="triangle"] { border-radius: 0; }
.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; will-change: transform; }
.ref-activity-photo[hidden] { display: none; }
.ref-activity-photo img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ref-activity-photo:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.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; }
.ref-activity-caption.has-title { bottom: 10%; max-width: 86%; padding: 5px 7px; }
.ref-activity-photo[data-activity-shape="triangle"] .ref-activity-caption { bottom: 23%; }
.ref-activity-photo[data-activity-shape="triangle"] .ref-activity-caption.has-title { bottom: 18%; }
.ref-activity-category { white-space: nowrap; }
.ref-activity-caption .ref-activity-arrow { width: 14px; height: 14px; color: currentColor; transition: transform var(--feedback-duration) ease; }
.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; }
.ref-activity-name[hidden] { display: none; }
.ref-activity-photo:focus-visible .ref-activity-caption { background: var(--ink); color: var(--paper); }
.ref-activity-photo.is-pressed .ref-activity-art, .ref-activity-photo:active:not(.is-grabbed) .ref-activity-art { transform: scale(.97); }
.ref-activity-caption[hidden] { display: none; }
.ref-activity-wall.is-physical { display: block; overflow: hidden; contain: layout paint; }
.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; }
/* iOS walls use 2D positioning; the masked child keeps its own press-ready layer. */
.ref-activity-wall[data-activity-render="2d"] .ref-activity-photo { will-change: auto; }
.ref-activity-wall.is-dragging, .is-physical .ref-activity-photo.is-grabbed { cursor: grabbing; }
.is-physical .ref-activity-photo.is-grabbed { z-index: 1; }
.ref-experience-feed > .ref-section-note { margin-top: 28px; }
.ref-text-link .ic { transition: transform var(--motion-ui-duration) var(--motion-ui-easing); }
.ref-text-link:focus-visible .ic { transform: translateX(3px); }
.ref-experience-feed .ref-section-end { justify-content: center; margin-top: 24px; }

/* A chronological photo-and-text sequence, distinct from the activity choices. */
.ref-about { position: relative; width: 100%; background: var(--surface); }
.ref-about::before { inset: -17px 0 auto; background: var(--surface); }
.ref-about-layout { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
.ref-about .ref-section-head > p { max-width: 32em; margin-top: 16px; }
.ref-stay-scenes { display: grid; gap: 32px; }
.ref-stay-scene { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 12px; align-content: start; min-width: 0; }
.ref-stay-scene img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 4px; object-fit: cover; border-radius: 8px; }
.ref-stay-scene .ref-scene-time { margin: 0 0 10px; color: var(--top-body-ink); font-size: 13px; line-height: 20px; font-weight: 400; }
.ref-stay-scene h3 { font-size: var(--top-card-size); line-height: var(--top-card-line); font-weight: 700; text-wrap: pretty; }
.ref-stay-scene > p { max-width: 30em; font-size: var(--top-body-size); line-height: var(--top-body-line); color: var(--top-body-ink); text-wrap: pretty; }
.ref-text-home .ref-stay-scene .ref-stay-button { width: 100%; min-height: 40px; margin-top: 4px; padding: 9px 16px; border: 1px solid var(--ink); border-radius: 4px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 400; line-height: 20px; text-align: center; }
/* Phones: photo left, words right, the link full width below, so the three scenes read as one short
   day rather than three tall cards (owner, 2026-10-02). Tablet and desktop keep the column cards. */
@media (max-width: 767px) {
  .ref-stay-scenes { gap: 28px; }
  .ref-stay-scene { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 16px; row-gap: 6px; }
  .ref-stay-scene img { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 1; margin: 0; }
  .ref-stay-scene .ref-stay-heading, .ref-stay-scene > p { grid-column: 2; }
  .ref-stay-scene .ref-scene-time { margin-bottom: 4px; }
  .ref-text-home .ref-stay-scene .ref-stay-button { grid-column: 1 / -1; margin-top: 10px; }
}

/* Photo-first facility links retain the directory's access and room facts. */
.ref-facility-feed .ref-feed-list { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 16px; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.ref-facility-rail { position: relative; }
.ref-facility-rail::-webkit-scrollbar { display: none; }
.ref-facility-row { min-width: 0; scroll-snap-align: start; }
.ref-facility-link { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; height: 100%; color: inherit; }
.ref-facility-link:focus-visible { outline-offset: -2px; }
.ref-facility-photo { position: relative; overflow: hidden; border-radius: 8px; }
.ref-facility-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.ref-facility-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 20px; }
.ref-row-copy { min-width: 0; }
.ref-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ref-row-heading .ic { width: 20px; height: 20px; flex-shrink: 0; }
.ref-row-copy h3 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.ref-row-copy h3 .ic { width: 18px; height: 18px; color: var(--muted); }
.ref-row-copy .ref-place, .ref-facility-name { white-space: nowrap; }
.ref-place-divider { flex: 0 0 1px; width: 1px; height: 14px; background: var(--muted); font-size: 0; }
.ref-status { display: inline-block; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.ref-facility-photo .ref-status { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 4px; color: var(--paper); }
.ref-status.is-open { background: #486860; }
.ref-status.is-preparing { background: var(--ink); }
.ref-facility-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 8px; font-size: var(--top-body-size); line-height: var(--top-body-line); color: var(--top-body-ink); }
.ref-facility-facts { margin: 0; display: grid; gap: 8px; font-size: var(--top-meta-size); line-height: 24px; }
.ref-facility-facts > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 10px; }
.ref-facility-facts dt, .ref-facility-facts dd span { color: var(--muted); }
.ref-facility-facts dt .ic { display: block; width: 20px; height: 20px; margin-top: 2px; }
.ref-facility-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ref-facility-facts dd span { display: inline-block; }

.ref-next-step { padding-block: 48px; background: var(--surface-subtle); }
.ref-next-inner { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; display: grid; gap: 32px; }
.ref-next-inner h2 { font-size: var(--type-section); line-height: var(--line-section); }
.ref-faq { min-width: 0; }
.ref-faq-scope { margin-top: 8px; font-size: var(--top-meta-size); line-height: var(--top-meta-line); color: var(--muted); }
.ref-faq-list { margin-top: 24px; border-top: 1px solid var(--line); }
.ref-faq-question { border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-height) + 20px); }
.ref-faq-question summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 20px 0; cursor: pointer; list-style: none; font-size: 15px; line-height: 26px; font-weight: 500; }
.ref-faq-question summary::-webkit-details-marker { display: none; }
.ref-faq-question summary > span { min-width: 0; overflow-wrap: anywhere; }
.ref-faq-question summary > .ic { width: 20px; height: 20px; flex-shrink: 0; }
.ref-faq-question[open] summary > .ic { transform: rotate(180deg); }
.ref-faq-question summary:focus-visible { outline-offset: 4px; }
.ref-faq-answer { padding: 0 40px 24px 0; font-size: var(--top-body-size); line-height: var(--top-body-line); color: var(--top-body-ink); overflow-wrap: anywhere; }
.ref-faq-answer p + p { margin-top: 12px; }
.ref-faq-answer a { text-decoration: underline; text-underline-offset: 4px; }
.ref-faq-more { display: flex; margin-top: 24px; }
.ref-support-phone { align-self: start; padding-top: 24px; border-top: 1px solid var(--line); }
.ref-support-phone h3 { font-size: 18px; line-height: 26px; font-weight: 700; }
.ref-support-phone > a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 12px; font-size: 28px; line-height: 36px; font-weight: 700; }
.ref-support-phone > a .ic { width: 20px; height: 20px; flex-shrink: 0; }
.ref-support-phone p { margin-top: 8px; font-size: var(--top-meta-size); line-height: var(--top-meta-line); color: var(--muted); }
.top-page .site-footer { position: relative; }
.top-page .site-footer::before { inset: -17px 0 auto; background: var(--ink); }

/* Keep the requested newsletter, without presenting unavailable signup as a next action. */
.ref-mailmagazine { padding-block: 24px; }
.ref-mailmagazine-inner { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }
.ref-mailmagazine summary { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 500; }
.ref-mailmagazine summary::-webkit-details-marker { display: none; }
.ref-mailmagazine summary > span { color: var(--muted); font-size: 12px; font-weight: 400; }
.ref-mailmagazine summary > .ic { margin-left: auto; transform: rotate(90deg); }
.ref-mailmagazine details[open] summary > .ic { transform: rotate(-90deg); }
.ref-mailmagazine details > p { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 25px; }
.ref-mailmagazine-form { display: grid; gap: 12px; margin-top: 20px; max-width: 740px; }
.ref-mailmagazine-form input { width: 100%; min-width: 0; height: 48px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); font-size: 16px; line-height: 24px; }
.ref-mailmagazine-form :disabled { background: var(--surface-subtle); border-color: transparent; color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
.mailmagazine-status { font-size: 13px; line-height: 20px; color: var(--muted); }

/* Existing destination selector. TOP JS supplies focus containment and restoration. */
.ref-facility-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.ref-facility-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgb(47 47 47 / 55%); }
.ref-facility-modal-dialog { position: relative; width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 24px var(--gutter) calc(20px + env(safe-area-inset-bottom)); background: var(--paper); border-radius: 8px 8px 0 0; }
.ref-facility-modal-dialog h2 { padding-right: 44px; font-size: 20px; line-height: 30px; font-weight: 700; }
.ref-facility-modal-close { position: absolute; top: 17px; right: calc(var(--gutter) - 10px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border-radius: 4px; }
.ref-facility-modal-list { margin-top: 20px; }
.ref-facility-modal-item { padding-block: 20px; border-top: 1px solid var(--line); }
.ref-facility-modal-copy { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 12px; font-size: 16px; line-height: 24px; font-weight: 700; }
.ref-facility-modal-copy .ic { flex: 0 0 18px; width: 18px; height: 18px; color: var(--muted); }
.ref-facility-modal-copy .ref-place { white-space: nowrap; }
.ref-facility-modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ref-facility-modal-actions a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 8px; border: 1px solid var(--ink); border-radius: 4px; background: transparent; font-size: 14px; line-height: 20px; font-weight: 400; text-align: center; }
.ref-facility-modal-actions .is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ref-facility-modal-compare { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--top-body-ink); font-size: 14px; line-height: 20px; font-weight: 400; }

:is(.btn, .button, .menu-btn, .mobile-action-bar a, .ref-news-row, .ref-facility-modal-actions a, .ref-hero-actions button) { transition: background-color var(--feedback-duration) ease, color var(--feedback-duration) ease; }
:is(.ref-activity-photo img, .ref-facility-photo img) { transition: opacity var(--feedback-duration) ease; }
:is(.ref-news-row, .mobile-action-bar a, .menu-btn):active { background-color: var(--interaction-pressed); }
:is(.ref-activity-photo, .ref-facility-link):active img { opacity: .85; }
:is(.btn-primary, .button.primary, .ref-facility-modal-actions .is-primary):active { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
:is(.ref-hero-actions button, .ref-facility-modal-actions a:not(.is-primary)):active { background: var(--surface); }

@media (max-width: 767px) {
  .ref-text-hero { padding-bottom: 64px; }
  .ref-news-row:nth-child(n + 4 of :not([hidden])) { display: none; }
  .ref-section-head.ref-experience-heading { margin-bottom: 16px; }
  .ref-section-head.ref-experience-heading h2 { font-size: 20px; line-height: 30px; }
}
@media (max-width: 359px) {
  .ref-section-head.ref-experience-heading h2 { font-size: 18px; line-height: 28px; }
  .ref-activity-overview { gap: 8px; }
  .ref-activity-count { font-size: 11px; gap: 5px; }
  .ref-activity-caption:not(.has-title) { padding-inline: 3px; column-gap: 3px; }
}
@media (min-width: 768px) {
  .ref-text-home { --section-space: 80px; --top-feature-size: 28px; --top-feature-line: 40px; --top-card-size: 20px; --top-card-line: 30px; }
  .ref-section-end .button { width: auto; }
  .ref-hero-copy h1 { font-size: 44px; }
  .ref-hero-actions button { width: auto; min-width: 200px; }
  .ref-facility-modal { align-items: center; padding: 32px; }
  .ref-facility-modal-dialog { width: min(100%, 560px); max-height: calc(100dvh - 64px); padding: 32px; border-radius: 8px; }
  .ref-facility-modal-dialog h2 { font-size: 24px; line-height: 34px; }
  .ref-facility-modal-close { top: 27px; right: 22px; }
  .ref-news .ref-feed-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
  .ref-news-row { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .ref-news-thumb { width: 120px; }
  .ref-activity-photo { width: 144px; }
  .ref-activity-wall { margin-inline: 0; }
  .ref-activity-caption { grid-template-columns: minmax(0, 1fr) 16px; gap: 3px 6px; padding: 4px 8px; font-size: 16px; line-height: 22px; }
  .ref-activity-caption .ref-activity-arrow { width: 16px; height: 16px; }
  .ref-activity-caption.has-title { padding: 6px 10px; }
  .ref-activity-caption.has-title .ref-activity-category { font-size: 14px; line-height: 20px; }
  .ref-activity-name { font-size: 16px; line-height: 22px; }
  .ref-about .ref-section-head > p { max-width: 38em; }
  .ref-stay-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .ref-stay-scene img { aspect-ratio: 4 / 3; }
  .ref-facility-feed .ref-feed-list { grid-auto-columns: calc((100% - 64px) / 2); gap: 24px; }
  .ref-mailmagazine-form { grid-template-columns: minmax(0, 1fr) auto; }
  .mailmagazine-status { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .ref-text-home { --section-space: 88px; --top-feature-size: 30px; --top-feature-line: 42px; }
  .ref-text-home .button.ref-view-all { 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; }
  .ref-text-home .ref-view-all .ic { width: 18px; height: 18px; color: currentColor; opacity: 1; }
  .ref-news-more, .ref-experience-feed .ref-section-end, .ref-facility-feed > .ref-section-end { margin-top: 40px; }
  .ref-faq-more { margin-top: 40px; }
  .ref-text-hero { min-height: 560px; height: min(72svh, 720px); padding-bottom: 56px; }
  .ref-hero-copy h1 { font-size: 48px; }
  .ref-hero-copy > p { font-size: 16px; line-height: 29px; }
  .ref-news { padding-block: 48px; }
  .ref-news-copy strong { font-size: 15px; line-height: 24px; }
  .ref-section-head.is-feature { margin-bottom: 40px; }
  .ref-experience-heading { padding-right: 360px; }
  .ref-activity-overview { position: absolute; top: var(--section-space); right: 0; margin: 0; gap: 32px; }
  .ref-activity-count { font-size: 14px; }
  .ref-activity-total strong { font-size: 32px; }
  .ref-about .ref-section-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: center; }
  .ref-about .ref-section-head > p { margin-top: 0; max-width: 30em; }
  .ref-stay-scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ref-stay-scene img { margin-bottom: 8px; }
  .ref-text-home .ref-stay-scene .ref-stay-button { margin-top: 8px; }
  .ref-facility-feed .ref-feed-list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
  .ref-next-step { padding-block: 64px; }
  .ref-next-inner { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 64px; }
  .ref-support-phone { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 32px; }
}
@media (hover: hover) {
  .ref-activity-photo:hover:not(.is-grabbed) .ref-activity-caption { background: var(--ink); color: var(--paper); }
  .ref-activity-photo:hover:not(.is-grabbed) .ref-activity-arrow { transform: translateX(2px); }
  .site-footer a:hover, .ref-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .ref-text-link:hover .ic { transform: translateX(3px); }
  :is(.ref-news-row, .mobile-action-bar a, .menu-btn):hover:not(:active) { background-color: var(--interaction-hover); }
  .ref-faq-question summary:hover { background: var(--interaction-hover); }
  .ref-support-phone > a:hover { text-decoration: underline; text-underline-offset: 4px; }
  :is(.ref-activity-photo, .ref-facility-link):hover:not(:active) img { opacity: .92; }
  :is(.btn-primary, .button.primary, .ref-facility-modal-actions .is-primary):hover:not(:active) { background: color-mix(in srgb, var(--ink) 92%, var(--paper)); }
  :is(.button.ghost, .button.secondary, .ref-hero-actions button, .ref-facility-modal-actions a:not(.is-primary)):hover:not(:active) { background: var(--surface); }
  .ref-text-home .button.secondary:hover:not(:active) { background: var(--surface); border-color: var(--ink); }
  .ref-text-home .button.ref-view-all:hover:not(:active) { background: var(--interaction-hover); border-color: var(--top-control-line); }
}
.ref-text-home .button:focus-visible, .ref-text-link:focus-visible { outline-offset: 5px; }
.ref-text-home .button.secondary:active { background: var(--surface); }
@media (prefers-reduced-motion: reduce) {
  :root { --feedback-duration: 0ms; }
  .ref-text-link .ic { transform: none !important; }
}

/* 「すべて見る」 under the wall is the way to the list (らこ FB, 2026-10-06): a filled button, not a
   hairline, now that the photos carry no genre labels. */
.ref-text-home .button.ref-view-all { min-height: 48px; border-color: var(--ink); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 700; }
.ref-text-home .ref-view-all .ic { color: currentColor; opacity: 1; }
.ref-text-home .ref-view-all:active { background: #000; }
@media (hover: hover) and (min-width: 768px) { .ref-text-home .button.ref-view-all:hover:not(:active) { background: #000; border-color: #000; color: var(--paper); } }