/* TOP as an app home (owner, 2026-10-06). The page had grown a full-width black 「すべて見る」 under
   every section, outlined buttons in 過ごし方, alternating grey bands with brush edges and scattered
   notes. Loaded last, so it only overrides: one canvas, each section's link beside its title, and
   rows that are tapped as a whole. Mobile first; the desktop keeps the same order at a wider width. */

/* BUB's brush-edged band only where the page turns: 過ごし方 (the stay) and the closing FAQ・相談.
   The intro shares the paper with the activities and facilities after it. */
.ref-intro.ref-section { background: var(--paper); }
.ref-intro::before, .ref-intro::after { content: none; display: none; }
.ref-next-step { position: relative; margin-top: 18px; background: var(--surface-subtle); }
.ref-next-step::before {
  content: ""; position: absolute; inset: -17px 0 auto; height: 18px; z-index: 1; pointer-events: none; background: var(--surface-subtle);
  -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;
}

/* Section header: the title and its 「すべて見る」 on one line (index.html .ref-head-row). */
.ref-text-home .ref-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ref-text-home .ref-head-row > h2 { flex: 1 1 auto; min-width: 0; margin: 0; white-space: normal; text-wrap: balance; }
.ref-text-home .ref-head-row > .button.ref-view-all {
  flex: none; width: auto; min-height: 40px; margin: 0 -2px 0 0; padding: 0 2px; gap: 2px; border: 0; border-radius: 0; background: none;
  color: var(--ink); font-size: 14px; line-height: 22px; font-weight: 700;
}
.ref-text-home .ref-head-row > .button.ref-view-all > svg { display: none; }
.ref-text-home .ref-head-row > .button.ref-view-all::after,
.ref-text-home .ref-stay-scene .button.ref-stay-button::after {
  content: ""; flex: none; 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;
}
.ref-text-home .ref-experience-heading .ref-head-row > h2 { white-space: normal; text-wrap: balance; }

/* The English eyebrow over お知らせ and the repeated 「体験内容は…」 note go; the intro keeps its one note. */
.ref-news .ref-section-head > .eyebrow, .ref-experience-feed > .ref-section-note { display: none; }

/* 過ごし方: each scene ends in a quiet link, not an outlined full-width button. */
.ref-text-home .ref-stay-scene .button.ref-stay-button {
  width: auto; min-height: 40px; margin-top: 4px; padding: 0; gap: 2px; border: 0; background: none;
  justify-content: flex-start; color: var(--ink); font-size: 14px; line-height: 22px; font-weight: 700;
}

/* One title size for every section, as an app's section headers. */
.ref-text-home .ref-head-row > h2 { font-size: 22px; line-height: 32px; font-weight: 700; }
@media (min-width: 1024px) {
  .ref-text-home .ref-head-row > h2 { font-size: 28px; line-height: 40px; }
  .ref-text-home .ref-head-row > .button.ref-view-all { font-size: 15px; }
}
/* The intro title is a section header like the others: ink, and its row spans the column. */
.ref-text-home .ref-intro .ref-section-head { width: 100%; max-width: none; }
.ref-text-home .ref-intro .ref-head-row > h2.ref-intro-eyebrow { color: var(--ink); letter-spacing: 0; }
@media (min-width: 768px) { .ref-text-home .ref-intro .ref-section-head > .ref-head-row { grid-column: 1 / -1; } }
/* 0.04em tracking and the top-intro sizes give way to the shared header (letter-spacing normal). */
.ref-text-home .ref-intro .ref-section-head .ref-head-row > h2.ref-intro-eyebrow { font-size: 22px; line-height: 32px; letter-spacing: normal; }
@media (min-width: 1024px) { .ref-text-home .ref-intro .ref-section-head .ref-head-row > h2.ref-intro-eyebrow { font-size: 28px; line-height: 40px; } }

/* お知らせ and よくあるご質問 as app lists: square thumbnails, hairlines, rows tapped as a whole. */
.ref-text-home .ref-news .ref-feed-list { gap: 0; border-top: 1px solid var(--line); }
.ref-text-home .ref-news-row { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ref-text-home .ref-news-thumb { width: 64px; aspect-ratio: 1; border-radius: 8px; }
.ref-text-home .ref-news-copy time { margin-bottom: 2px; }
.ref-text-home .ref-news-copy strong { font-size: 14px; line-height: 21px; font-weight: 700; }
.ref-text-home .ref-faq-list { border-top: 1px solid var(--line); }
.ref-text-home .ref-faq-question summary { min-height: 56px; padding: 14px 0; font-size: 15px; line-height: 23px; }
@media (min-width: 1024px) {
  .ref-text-home .ref-news .ref-feed-list { column-gap: 40px; border-top: 0; }
  .ref-text-home .ref-news-row { border-top: 1px solid var(--line); border-bottom: 0; }
}

/* BUB RESORTとは as a compact list (owner, 2026-10-06): all three reasons in one screen on a phone,
   a small photo left and the words right, the figure (20+ / 0円 / 旬) set straight on the photo. */
.ref-text-home .ref-intro-figure { rotate: 0deg !important; -webkit-text-stroke-color: var(--paper); }
.ref-text-home .ref-intro .ref-section-head { margin-bottom: 20px; }
@media (max-width: 767px) {
  .ref-text-home .ref-intro-points { gap: 20px; }
  .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
  .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-visual { order: 0; }
  .ref-text-home .ref-intro-visual { width: 96px; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { right: -8px; left: auto; bottom: -6px; font-size: 28px; -webkit-text-stroke-width: 5px; }
  .ref-text-home .ref-intro-figure small { font-size: 14px; }
  .ref-text-home .ref-intro-index { display: none; }
  .ref-text-home .ref-intro-copy h3 { font-size: 16px; line-height: 24px; }
  .ref-text-home .ref-intro-copy h3 + p { margin-top: 2px; font-size: 13px; line-height: 20px; }
}
@media (min-width: 768px) {
  .ref-text-home .ref-intro-points li:nth-child(2) { margin-top: 0; }
}
.ref-text-home .ref-intro-index { display: none; }
/* Rhythm: paper sections that run into another paper section do not stack two paddings. */
.ref-text-home .ref-intro.ref-section, .ref-text-home .ref-experience-feed { padding-bottom: 0; }
.ref-text-home .ref-intro-note { margin-top: 20px; }

/* One photo language below the hero: the freehand cut-outs stay the activity wall's signature; the
   intro's three reasons use the same rounded photo as every other list on the page. */
.ref-text-home .ref-intro-art { -webkit-mask: none; mask: none; border-radius: 12px; overflow: hidden; animation: none; }
.ref-text-home .ref-intro-figure { -webkit-text-stroke-width: 0; right: 6px; bottom: 6px; padding: 2px 6px 1px; border-radius: 6px; background: var(--paper); line-height: 1; }
@media (max-width: 767px) {
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { right: 4px; bottom: 4px; font-size: 18px; }
  .ref-text-home .ref-intro-figure small { font-size: 11px; }
  .ref-text-home .ref-intro-visual { width: 96px; }
}
@media (min-width: 768px) {
  .ref-text-home .ref-intro-visual { width: 100%; }
  .ref-text-home .ref-intro-art { aspect-ratio: 4 / 3; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { right: 10px; bottom: 10px; font-size: 32px; }
  .ref-text-home .ref-intro-figure small { font-size: 16px; }
}

/* Three photo sizes and one corner for the whole page (owner, 2026-10-06):
   L — the facility cards, 4:3 across the column;  M — 過ごし方, 4:3 beside its text;
   S — the intro's reasons and お知らせ, an 80px square. Every photo 12px round (S 10px). */
.ref-text-home .ref-facility-feed .ref-feed-list img, .ref-text-home .home-facility-section .ref-feed-list img { border-radius: 12px; }
.ref-text-home .ref-stay-scene img { border-radius: 12px; }
@media (max-width: 767px) {
  .ref-text-home .ref-stay-scene { grid-template-columns: 120px minmax(0, 1fr); }
  .ref-text-home .ref-stay-scene img { width: 120px; aspect-ratio: 4 / 3; align-self: start; }
  .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) { grid-template-columns: 80px minmax(0, 1fr); }
  .ref-text-home .ref-intro-visual { width: 80px; }
  .ref-text-home .ref-intro-art { border-radius: 10px; }
  .ref-text-home .ref-news-row { grid-template-columns: 80px minmax(0, 1fr); }
  .ref-text-home .ref-news-thumb { width: 80px; border-radius: 10px; }
}
@media (min-width: 768px) { .ref-text-home .ref-news-thumb { border-radius: 10px; } }
@media (max-width: 767px) { .ref-text-home .ref-stay-scene .button.ref-stay-button { grid-column: 2; justify-self: start; } }
@media (min-width: 768px) { .ref-text-home .ref-news-row { grid-template-columns: 80px minmax(0, 1fr); } .ref-text-home .ref-news-thumb { width: 80px; } }
@media (max-width: 767px) { .ref-text-home .ref-stay-scene { grid-template-rows: auto auto auto; row-gap: 4px; } .ref-text-home .ref-stay-scene img { grid-row: 1 / 3; } }
/* The figure leads the words, not the photo (owner, 2026-10-06): a tab on the photo looked pasted on,
   no figure looked weak. 20+ / 0円 / 旬 sit large in Inter 700 above each title; the photo stays clean. */
.ref-text-home .ref-intro-points li { grid-template-rows: auto 1fr; row-gap: 4px; align-items: start; }
.ref-text-home .ref-intro-visual { display: contents; }
.ref-text-home .ref-intro-art { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure {
  position: static; grid-column: 2; grid-row: 1; align-self: end; padding: 0; border-radius: 0; background: none;
  color: var(--ink); font: 700 32px/1 var(--font-num), var(--font-ja); letter-spacing: 0; -webkit-text-stroke: 0; rotate: 0deg;
}
.ref-text-home .ref-intro-figure small { margin-left: 2px; font-size: 15px; font-weight: 700; }
.ref-text-home .ref-intro-copy { grid-column: 2; grid-row: 2; align-self: start; }
@media (max-width: 767px) {
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { font-size: 30px; }
  .ref-text-home .ref-intro-figure small { font-size: 14px; }
}
@media (min-width: 768px) {
  .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 0; }
  .ref-text-home .ref-intro-art { grid-column: 1; grid-row: 1; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { grid-column: 1; grid-row: 2; margin-top: 20px; font-size: 40px; }
  .ref-text-home .ref-intro-figure small { font-size: 18px; }
  .ref-text-home .ref-intro-copy { grid-column: 1; grid-row: 3; margin-top: 8px; }
}
@media (max-width: 767px) { .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) { column-gap: 16px; row-gap: 4px; } }

/* 2026-10-06 research (Club Med, 星野リゾート リゾナーレ): strengths are told by a large photograph
   carrying a short line, not by thumbnails in a list. On phones the three reasons become swipeable
   cards (the next one peeks); the figure sits large and white on the photo over a soft shade. */
@media (max-width: 767px) {
  .ref-text-home .ref-intro-points { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .ref-text-home .ref-intro-points::-webkit-scrollbar { display: none; }
  .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) {
    position: relative; display: block; scroll-snap-align: start; animation: none;
  }
  .ref-text-home .ref-intro-visual { display: block; position: relative; width: 100%; }
  .ref-text-home .ref-intro-art { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; }
  .ref-text-home .ref-intro-art::after { content: ""; position: absolute; inset: 40% 0 0; border-radius: 0 0 16px 16px; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 55%)); pointer-events: none; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure {
    position: absolute; z-index: 1; left: 16px; right: auto; bottom: 14px; color: #fcfcfc; font-size: 52px; line-height: 1;
  }
  .ref-text-home .ref-intro-figure small { font-size: 20px; }
  .ref-text-home .ref-intro-copy { margin-top: 12px; }
  .ref-text-home .ref-intro-copy h3 { font-size: 17px; line-height: 26px; }
  .ref-text-home .ref-intro-copy h3 + p { font-size: 14px; line-height: 22px; }
}
/* Smaller cards (owner, 2026-10-06): about two thirds of the screen, square, so two cards and the words show. */
@media (max-width: 767px) {
  .ref-text-home .ref-intro-points { grid-auto-columns: 64%; }
  .ref-text-home .ref-intro-art { aspect-ratio: 1; border-radius: 14px; }
  .ref-text-home .ref-intro-art::after { border-radius: 0 0 14px 14px; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure { left: 14px; bottom: 12px; font-size: 40px; }
  .ref-text-home .ref-intro-figure small { font-size: 16px; }
  .ref-text-home .ref-intro-copy { margin-top: 10px; }
  .ref-text-home .ref-intro-copy h3 { font-size: 16px; line-height: 24px; }
  .ref-text-home .ref-intro-copy h3 + p { font-size: 13px; line-height: 20px; }
}

/* Balance pass (owner, 2026-10-06). */
/* 1 · The activity header in three layers: title, いま開催中, the wall. The total (also on /activity/) leaves TOP. */
.ref-text-home .ref-experience-feed .ref-activity-overview { display: none; }
.ref-text-home .ref-experience-feed .top-season { margin-top: 12px; margin-bottom: 8px; }
/* 2 · One swipe rhythm: the intro and the facility cards take the same share of the screen. */
@media (max-width: 767px) {
  .ref-text-home .ref-intro-points { grid-auto-columns: 72%; }
  .ref-text-home .ref-facility-feed .ref-feed-list, .ref-text-home .home-facility-section .ref-feed-list { grid-auto-columns: 72%; gap: 12px; }
}
/* 3 · 過ごし方 shows each scene's words in full: a sentence cut with 「…」 read as unfinished (owner, 2026-10-06). */

/* Closing contact in one row (owner, 2026-10-06): form and phone side by side, the number and hours in
   one quiet line beneath. A phone dials from the button; a desktop reads the number. */
.ref-text-home .ref-support-phone h3 { font-size: 17px; line-height: 26px; }
.ref-text-home .ref-contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ref-text-home .ref-contact-actions .button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 12px; border-radius: 8px; font-size: 15px; line-height: 22px; font-weight: 700; }
.ref-text-home .ref-contact-actions .button.secondary { border: 1px solid var(--ink); background: var(--paper); color: var(--ink); }
.ref-text-home .ref-contact-actions .button .ic { width: 18px; height: 18px; }
.ref-text-home .ref-support-phone .support-contact__phone { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 10px; }
.ref-text-home .ref-support-phone .support-contact__phone p { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.ref-text-home .ref-support-phone .support-contact__phone .ref-contact-number { color: var(--ink); font: 700 13px/20px var(--font-num), var(--font-ja); }
/* アクティビティ: the crew line moves under the shorter title. */
.ref-text-home .ref-experience-lead { margin-top: 8px; color: var(--top-body-ink); font-size: 14px; line-height: 22px; }
@media (min-width: 1024px) { .ref-text-home .ref-experience-lead { font-size: 16px; line-height: 28px; } }
.ref-text-home .ref-contact-actions { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.ref-text-home .ref-contact-actions .button { white-space: nowrap; padding-inline: 10px; }
.ref-text-home .ref-support-phone .support-contact__phone { padding: 0; border: 0; }
/* Two equal choices (owner, 2026-10-06): フォームで相談 / 電話で相談, half and half. */
.ref-text-home .ref-contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Every wall photo is named (owner, 2026-10-06). Smaller photos get a smaller label; on phones a long
   name on a smaller photo folds at a word (breakableName), never mid-word. Below the large photos the arrow
   goes on phones, since the whole photo is the link. */
.ref-text-home .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; }
.ref-text-home .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-arrow { display: none; }
.ref-text-home .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; }
.ref-text-home .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-category { white-space: inherit; }
.ref-text-home .ref-activity-photo[data-activity-size="small"] .ref-activity-caption { padding: 2px 5px; font-size: 11px; line-height: 15px; }
@media (min-width: 768px) {
  .ref-text-home .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; }
  .ref-text-home .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-arrow { display: block; width: 14px; height: 14px; }
  .ref-text-home .ref-activity-photo:not([data-activity-size="large"]) .ref-activity-caption { max-width: none; white-space: nowrap; text-align: left; }
  .ref-text-home .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). */
.ref-text-home .ref-activity-caption { transform: translateX(calc(-50% + var(--caption-shift, 0px))); }
/* 過ごし方 on phones (owner, 2026-10-06): the whole scene is the link and a chevron marks it, so the
   separate 「〜を見る」 line goes; its words stay for screen readers. */
@media (max-width: 767px) {
  .ref-text-home .ref-stay-scenes { gap: 20px; }
  .ref-text-home .ref-stay-scene { position: relative; grid-template-rows: auto 1fr; padding-right: 24px; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button { position: static; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: visible; clip-path: none; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button::before { content: ""; position: absolute; inset: -6px; border-radius: 12px; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button::after { position: absolute; top: 50%; right: 0; transform: translateY(-50%); color: var(--muted); }
  .ref-text-home .ref-stay-scene .button.ref-stay-button:focus-visible { outline: none; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button:focus-visible::before { outline: 2px solid var(--ink); }
  .ref-text-home .ref-stay-scene:has(.ref-stay-button:active) img { opacity: .85; }
}
/* The note under 0円 stays beside the claim it qualifies, as one quiet line. */
.ref-text-home .ref-intro-note { margin-top: 16px; font-size: 11px; line-height: 18px; }
/* Web matches the phone (owner, 2026-10-06): the figure sits large and white on the photo, the words below. */
@media (min-width: 768px) {
  .ref-text-home .ref-intro-points li, .ref-text-home .ref-intro-points li:nth-child(even) { position: relative; display: block; }
  .ref-text-home .ref-intro-visual { display: block; position: relative; width: 100%; }
  .ref-text-home .ref-intro-art { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
  .ref-text-home .ref-intro-art::after { content: ""; position: absolute; inset: 45% 0 0; border-radius: 0 0 16px 16px; background: linear-gradient(to bottom, rgb(0 0 0 / 0), rgb(0 0 0 / 55%)); pointer-events: none; }
  .ref-text-home .ref-intro-figure, .ref-text-home .ref-intro-points li:nth-child(even) .ref-intro-figure {
    position: absolute; z-index: 1; left: 20px; right: auto; bottom: 16px; margin: 0; padding: 0; background: none; color: #fcfcfc; font-size: 56px; line-height: 1;
  }
  .ref-text-home .ref-intro-figure small { font-size: 22px; }
  .ref-text-home .ref-intro-copy { margin-top: 16px; }
}

/* 過ごし方 (owner, 2026-10-06): the band ends straight; the thin brush at its foot read as a glitch.
   On the web its lead sits under the title, as everywhere else on the page. */
/* The band's foot mirrors its head: the same brush in the band's grey, reaching down into the paper. */
.ref-text-home .ref-about::after { inset: auto 0 -17px; background: var(--surface); transform: scaleY(-1); }
@media (min-width: 768px) {
  .ref-text-home .ref-about .ref-section-head { display: block; }
  .ref-text-home .ref-about .ref-section-head > p { margin-top: 12px; max-width: 42em; }
}

/* いま開催中 (owner, 2026-10-06). On the web it is no longer a 420px
   card pinned beside the title (which pushed 「すべて見る」 into the middle) nor a full-width banner:
   a compact card under the lead, sized to its words, the art at its end and a chevron. */
.ref-text-home .top-season-link { background: #ece1d6; }
/* Colour back (owner, 2026-10-06): SAON from BUB COLOR, one fixed colour for every season (never a
   colour per season). The only accent is a MUCHU mark in the wall's hand-drawn circle, blinking like a
   live sign (still when motion is reduced). */
.ref-text-home .top-season-badge { display: inline-flex; align-items: center; gap: 6px; }
.ref-text-home .top-season-badge::before {
  content: ""; flex: none; width: 10px; height: 10px; 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: top-season-live 1.4s ease-in-out infinite;
}
@keyframes top-season-live { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .ref-text-home .top-season-badge::before { animation: none; } }
/* Mobile season copy: align all three text rows, hang the status mark in the
   gutter, and keep 12px above/below the copy even on a narrow phone. */
@media (max-width: 767px) {
  .ref-text-home .top-season-now { height: 88px; aspect-ratio: auto; }
  .ref-text-home .top-season-link { padding: 0 20px; }
  .ref-text-home .top-season-copy { gap: 0; }
  .ref-text-home .top-season-badge { position: relative; margin-bottom: 4px; font-size: 12px; line-height: 16px; font-weight: 500; }
  .ref-text-home .top-season-badge::before { position: absolute; left: -13px; top: 4px; width: 8px; height: 8px; }
  .ref-text-home .top-season-name { margin: 0; font-size: 20px; line-height: 26px; letter-spacing: 0; }
  .ref-text-home .top-season-period { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 16px; }
}
@media (min-width: 768px) {
  .ref-text-home .ref-section-head.ref-experience-heading { min-height: 0; padding: 0; margin-bottom: 24px; }
  .ref-text-home .top-season { position: static; width: auto; margin-top: 16px; }
  .ref-text-home .top-season-now { display: inline-block; width: auto; max-width: 100%; height: 72px; }
  .ref-text-home .top-season-now[hidden] { display: none; }
  .ref-text-home .top-season-link { gap: 16px; padding: 0 20px 0 20px; border-radius: 12px; }
  .ref-text-home .top-season-now:has(.top-season-art) .top-season-copy { max-width: none; }
  .ref-text-home .top-season-copy { display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: start; column-gap: 12px; max-width: none; }
  .ref-text-home .top-season-badge { grid-column: 1 / -1; font-size: 12px; line-height: 18px; }
  .ref-text-home .top-season-name { margin: 0; font-size: 20px; line-height: 28px; }
  .ref-text-home .top-season-period { margin: 0; font-size: 13px; line-height: 20px; }
  .ref-text-home .top-season-art { position: static; flex: none; width: 72px; height: 72px; margin-right: -4px; object-position: center bottom; }
  .ref-text-home .top-season-link::after {
    content: ""; flex: none; 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;
  }
}

/* 過ごし方 on the web too (owner, 2026-10-06): the 「〜を見る」 line under every scene goes; the scene is
   the link (its words stay for screen readers) and answers the pointer on its photo and title. */
@media (min-width: 768px) {
  .ref-text-home .ref-stay-scene { position: relative; grid-template-rows: auto auto 1fr; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button { position: static; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: visible; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button::after { content: none; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button::before { content: ""; position: absolute; inset: -8px; border-radius: 16px; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button:focus-visible { outline: none; }
  .ref-text-home .ref-stay-scene .button.ref-stay-button:focus-visible::before { outline: 2px solid var(--ink); }
  .ref-text-home .ref-stay-scene img { transition: opacity var(--feedback-duration) ease; }
  .ref-text-home .ref-stay-scene:has(.ref-stay-button:hover) img { opacity: .9; }
  .ref-text-home .ref-stay-scene:has(.ref-stay-button:hover) h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* お知らせ (owner, 2026-10-06): never a half-empty second column. Tablets list three rows; wide screens
   show three side by side, without the list's hairlines (three short lines read as broken). */
@media (min-width: 768px) {
  .ref-text-home .ref-news .ref-feed-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .ref-text-home .ref-news-row:nth-child(n + 4 of :not([hidden])) { display: none; }
}
@media (min-width: 1024px) {
  .ref-text-home .ref-news .ref-feed-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .ref-text-home .ref-news-row { align-items: start; padding-top: 0; border-top: 0; }
}
.ref-text-home .ref-intro-note { text-wrap: pretty; }

/* いま開催中 on the web (owner, 2026-10-06). A short card under the lead left half the row empty; under
   「すべて見る」 it read as that link's label; a pill went unseen; photos doubled the wall below. So the
   heading becomes two columns: title and lead at left, the season card at right, the height of both.
   「すべて見る」 moves under the wall, where the photos end. Phones keep the title row and the card. */
.ref-text-home .ref-experience-more { display: none; }
@media (min-width: 1024px) {
  .ref-text-home .ref-section-head.ref-experience-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-rows: auto auto; column-gap: 48px; align-items: center; }
  .ref-text-home .ref-experience-heading > .ref-head-row { grid-column: 1; grid-row: 1; }
  .ref-text-home .ref-experience-heading > .ref-head-row > .ref-view-all { display: none; }
  .ref-text-home .ref-experience-heading > .ref-experience-lead { grid-column: 1; grid-row: 2; margin: 8px 0 0; }
  .ref-text-home .ref-experience-heading > .top-season { grid-column: 2; grid-row: 1 / 3; width: 100%; margin: 0; }
  .ref-text-home .top-season-now, .ref-text-home .top-season-now:not([hidden]) { display: block; width: 100%; height: 96px; }
  .ref-text-home .top-season-now[hidden] { display: none; }
  .ref-text-home .top-season-link { padding: 0 20px 0 24px; border-radius: 16px; }
  .ref-text-home .top-season-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .ref-text-home .top-season-name { font-size: 22px; line-height: 30px; }
  .ref-text-home .top-season-art { width: 96px; height: 96px; margin-left: auto; }
  /* The section has no bottom padding (the wall runs into the next band); the button needs room above
     the next section's brush edge. */
  .ref-text-home .ref-experience-more { display: flex; justify-content: center; margin-top: 32px; padding-bottom: 72px; }
  .ref-text-home .ref-experience-more .button.ref-view-all { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 280px; justify-content: center; }
}


/* みなかみ now has its real facts (access, rooms, meals): shown like the other places (10/12). */

/* 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. */
.ref-text-home .top-season-now[data-top-season="summer"] .top-season-link { background: #dae4f1; }
.ref-text-home .top-season-now[data-top-season="earlysummer"] .top-season-link { background: #d5d9d2; }
.ref-text-home .top-season-now[data-top-season="halloween"] .top-season-link { background: #ece1d6; }
.ref-text-home .top-season-now[data-top-season="holiday"] .top-season-link { background: #f0d1cb; }
.ref-text-home .top-season-now[data-top-season="winter"] .top-season-link { background: #dfdad4; }
.ref-text-home .top-season-now[data-top-season="spring"] .top-season-link { background: #ebdad6; }

/* どこで遊ぶ？ sheet (owner, 2026-10-07: eight equal buttons read cheap; keep the app feel): a bottom sheet with a
 * grabber, each place one list cell — photo, 「県｜施設」, its line and 「>」, the whole cell opening the
 * facility — and one action at the foot, 「空室検索・予約」, which opens the booking sheet (it picks the
 * facility there). As the reservation sheet: 12px corners, 52px button; no outlined buttons. */
.ref-facility-modal .ref-facility-modal-dialog { padding-bottom: 0; }
.ref-facility-modal-grabber { display: block; width: 36px; height: 4px; margin: -8px auto 12px; border-radius: 2px; background: rgb(47 47 47 / 18%); }
.ref-facility-modal .ref-facility-modal-list { margin: 12px calc(var(--gutter) * -1) 0; }
.ref-facility-modal .ref-facility-modal-item { padding: 0; border-top: 0; }
.ref-facility-modal .ref-facility-modal-actions { display: block; }
.ref-facility-modal .ref-facility-modal-detail { position: relative; display: grid !important; grid-template-columns: 64px minmax(0, 1fr) 16px; column-gap: 14px; align-items: center; justify-content: stretch !important; min-height: 88px; padding: 12px var(--gutter) !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--ink); text-align: left; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.ref-facility-modal .ref-facility-modal-item + .ref-facility-modal-item .ref-facility-modal-detail::before { content: ""; position: absolute; top: 0; right: var(--gutter); left: calc(var(--gutter) + 78px); border-top: 1px solid rgb(47 47 47 / 10%); }
.ref-facility-modal .ref-facility-modal-detail::after { content: ""; width: 16px; height: 16px; background: rgb(47 47 47 / 45%); -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; }
.ref-facility-modal .ref-facility-modal-detail:active { background: var(--surface-subtle) !important; }
.ref-facility-modal .ref-facility-modal-photo { display: block; width: 64px; height: 64px; overflow: hidden; border-radius: 12px; background: var(--surface); }
.ref-facility-modal .ref-facility-modal-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref-facility-modal .ref-facility-modal-photo.is-empty { display: grid; place-items: center; color: rgb(47 47 47 / 50%); font-size: 11px; }
.ref-facility-modal .ref-facility-modal-text { display: grid; gap: 2px; min-width: 0; }
.ref-facility-modal .ref-facility-modal-copy { margin: 0; gap: 6px; font-size: 16px; line-height: 24px; font-weight: 700; }
.ref-facility-modal .ref-facility-modal-copy .ic { display: none; }
.ref-facility-modal .ref-facility-modal-copy .ref-place { color: rgb(47 47 47 / 60%); font-weight: 500; }
.ref-facility-modal .ref-place-divider { color: rgb(47 47 47 / 25%); }
.ref-facility-modal .ref-facility-modal-line { color: rgb(47 47 47 / 80%); font-size: 13px; line-height: 20px; }
.ref-facility-modal .ref-facility-modal-state { margin-right: 6px; color: #d56e59; font-weight: 700; }
.ref-facility-modal .ref-facility-modal-footer { position: sticky; bottom: 0; display: grid; gap: 4px; margin: 8px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgb(47 47 47 / 10%); background: var(--paper); }
.ref-facility-modal .ref-facility-modal-compare { justify-content: center; min-height: 40px; margin: 0; color: rgb(47 47 47 / 70%); font-size: 13px; font-weight: 500; }
.ref-facility-modal .ref-facility-modal-book { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 16px; line-height: 24px; font-weight: 700; text-decoration: none; }
.ref-facility-modal .ref-facility-modal-book:active { background: color-mix(in srgb, var(--ink) 85%, var(--paper)); }
.ref-facility-modal .ref-facility-modal-detail:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (hover: hover) { .ref-facility-modal .ref-facility-modal-detail:hover { background: var(--surface-subtle) !important; } }
@media (min-width: 768px) {
  .ref-facility-modal-grabber { display: none; }
  .ref-facility-modal .ref-facility-modal-list { margin-inline: -32px; }
  .ref-facility-modal .ref-facility-modal-detail { padding-inline: 32px !important; }
  .ref-facility-modal .ref-facility-modal-detail { grid-template-columns: 80px minmax(0, 1fr) 16px; column-gap: 16px; min-height: 104px; }
  .ref-facility-modal .ref-facility-modal-photo { width: 80px; height: 80px; }
  .ref-facility-modal .ref-facility-modal-item + .ref-facility-modal-item .ref-facility-modal-detail::before { left: calc(32px + 96px); right: 32px; }
  .ref-facility-modal .ref-facility-modal-footer { margin-inline: -32px; padding: 12px 32px 24px; }
}
/* どこで過ごす？: no arrow mark on the photo (owner, 2026-10-07); the whole card is the link. */
.ref-text-home .ref-facility-photo::after { content: none !important; }
/* Destination sheet (owner 10/7 「개밤티」 → TOP's season banner grammar): each place is one tinted card — the
 * place and line on the left, its own still-life large on the right — stacked with space, no hairlines. */
.ref-facility-modal .ref-facility-modal-list { display: grid; gap: 10px; margin: 16px 0 0; }
.ref-facility-modal .ref-facility-modal-detail { --place: #ece1d6; grid-template-columns: minmax(0, 1fr) 112px !important; column-gap: 8px !important; min-height: 108px !important; padding: 0 0 0 20px !important; overflow: hidden; border-radius: 16px; background: var(--place) !important; color: var(--ink); }
.ref-facility-modal .ref-facility-modal-detail::before, .ref-facility-modal .ref-facility-modal-detail::after { display: none !important; }
.ref-facility-modal a[href="/chosei/"].ref-facility-modal-detail { --place: #ece1d6; }      /* SAON */
.ref-facility-modal a[href="/tsukuba/"].ref-facility-modal-detail { --place: #d5dfd0; }     /* KICHAKU, lighter */
.ref-facility-modal a[href="/yatsugatake/"].ref-facility-modal-detail { --place: #e3ddd5; } /* TAIDOU, lighter */
.ref-facility-modal .ref-facility-modal-detail[data-place="minakami"] { --place: #dae4f1; }    /* KAIHO */
.ref-facility-modal .ref-facility-modal-text { order: 1; gap: 4px; padding: 16px 0; }
.ref-facility-modal .ref-facility-modal-copy { display: grid !important; gap: 0 !important; }
.ref-facility-modal .ref-facility-modal-copy .ref-place { color: rgb(47 47 47 / 60%); font-size: 12px; line-height: 18px; font-weight: 700; }
.ref-facility-modal .ref-place-divider { display: none; }
.ref-facility-modal .ref-facility-modal-copy .ref-facility-name { font-size: 20px; line-height: 28px; font-weight: 700; }
.ref-facility-modal .ref-facility-modal-line { color: rgb(47 47 47 / 75%); font-size: 13px; line-height: 19px; }
.ref-facility-modal .ref-facility-modal-state { display: inline-flex; align-self: start; justify-self: start; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; background: rgb(252 252 252 / 70%); color: var(--ink); font-size: 11px; }
.ref-facility-modal .ref-facility-modal-photo.is-art { order: 2; align-self: stretch; width: 100% !important; height: 100% !important; padding: 0; border-radius: 0; background: none; }
.ref-facility-modal .ref-facility-modal-photo.is-art img { width: 120%; height: 100%; margin-left: -4%; object-fit: contain; object-position: center bottom; transition: transform .25s ease; }
.ref-facility-modal .ref-facility-modal-detail:active .ref-facility-modal-photo img { transform: scale(.97); }
.ref-facility-modal .ref-facility-modal-detail:active { background: var(--place) !important; filter: brightness(.97); }
@media (hover: hover) { .ref-facility-modal .ref-facility-modal-detail:hover { background: var(--place) !important; } .ref-facility-modal .ref-facility-modal-detail:hover .ref-facility-modal-photo img { transform: scale(1.05) rotate(-2deg); } }
.ref-facility-modal .ref-facility-modal-footer { border-top: 0; }
.ref-facility-modal .ref-facility-modal-detail { border-radius: 16px !important; }
@media (min-width: 768px) {
  .ref-facility-modal .ref-facility-modal-list { margin-inline: 0; }
  .ref-facility-modal .ref-facility-modal-detail { grid-template-columns: minmax(0, 1fr) 140px !important; min-height: 112px !important; padding-inline: 24px 8px !important; }
  .ref-facility-modal .ref-facility-modal-line { white-space: nowrap; }
}
.ref-facility-modal .ref-facility-modal-detail { height: 108px; }
.ref-facility-modal .ref-facility-modal-photo.is-art { height: 108px !important; overflow: hidden; }
.ref-facility-modal .ref-facility-modal-photo.is-art img { height: 96px; margin-top: 8px; }
@media (min-width: 768px) {
  .ref-facility-modal .ref-facility-modal-detail { height: 112px; }
  .ref-facility-modal .ref-facility-modal-photo.is-art { height: 112px !important; }
  .ref-facility-modal .ref-facility-modal-photo.is-art img { height: 100px; }
}
/* Compact cards (owner 10/7 「터치 영역이 너무 큼」): place and name on one line, the line under it, 76px tall. */
.ref-facility-modal .ref-facility-modal-list { gap: 8px; }
.ref-facility-modal .ref-facility-modal-detail { height: 76px; min-height: 0 !important; grid-template-columns: minmax(0, 1fr) 92px !important; padding-left: 18px !important; border-radius: 14px !important; }
.ref-facility-modal .ref-facility-modal-text { gap: 2px; padding: 0; }
.ref-facility-modal .ref-facility-modal-copy { display: flex !important; align-items: baseline; gap: 6px !important; }
.ref-facility-modal .ref-facility-modal-copy .ref-place { font-size: 12px; line-height: 18px; }
.ref-facility-modal .ref-facility-modal-copy .ref-facility-name { font-size: 17px; line-height: 24px; }
.ref-facility-modal .ref-facility-modal-line { font-size: 12px; line-height: 18px; }
.ref-facility-modal .ref-facility-modal-state { height: 20px; font-size: 11px; }
.ref-facility-modal .ref-facility-modal-photo.is-art { height: 76px !important; }
.ref-facility-modal .ref-facility-modal-photo.is-art img { height: 68px; margin-top: 6px; }
@media (min-width: 768px) {
  .ref-facility-modal .ref-facility-modal-detail { height: 84px; grid-template-columns: minmax(0, 1fr) 104px !important; }
  .ref-facility-modal .ref-facility-modal-photo.is-art { height: 84px !important; }
  .ref-facility-modal .ref-facility-modal-photo.is-art img { height: 74px; }
}
/* One calm card colour; the four objects are one set (same frame, baseline and contact shadow) (owner 10/7). */
.ref-facility-modal a.ref-facility-modal-detail[href] { --place: #eceeed; }
.ref-facility-modal .ref-facility-modal-detail { grid-template-columns: minmax(0, 1fr) 104px !important; }
.ref-facility-modal .ref-facility-modal-photo.is-art img { width: 104px; height: 78px; margin: 0; object-fit: contain; object-position: center; }
.ref-facility-modal .ref-facility-modal-photo.is-art { display: grid; place-items: center; }
.ref-facility-modal .ref-facility-modal-state { background: var(--paper); }
.ref-facility-modal .ref-facility-modal-footer { gap: 0; margin-top: 4px; padding-top: 4px; }
.ref-facility-modal .ref-facility-modal-compare { min-height: 36px; font-size: 12px; }
@media (min-width: 768px) {
  .ref-facility-modal .ref-facility-modal-detail { grid-template-columns: minmax(0, 1fr) 116px !important; }
  .ref-facility-modal .ref-facility-modal-photo.is-art img { width: 116px; height: 87px; }
}
/* お知らせ thumbnails are the articles' own images now (scripts/top-news.mjs). */
.ref-text-home .ref-news-thumb { overflow: hidden; background: var(--surface-subtle, #e7ecec); }
.ref-text-home .ref-news-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref-text-home .ref-news-thumb img.is-placeholder { object-fit: contain; padding: 18%; filter: invert(1) brightness(1.1); background: #2f2f2f; }

/* The first view's one way in (owner, 2026-10-08): one white button that says what it does, with an icon
 * (as 星野リゾート's 「日程から空室を検索」), white so it does not read as 「空室検索・予約」. The sheet it opens asks 「どこで遊ぶ？」 and lists the places, so the
 * button keeps its shape however many places BUB has. */
.ref-text-home .ref-hero-actions button.ref-hero-where {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 16px;
  border: 0; border-radius: 8px; background: var(--paper); color: var(--ink);
}
.ref-text-home .ref-hero-actions button.ref-hero-where:active { background: var(--surface, #ECEFEF); }
.ref-text-home .ref-hero-where strong { font: 700 16px/24px var(--font-ja, sans-serif); }
.ref-hero-where-pin { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 768px) {
  .ref-text-home .ref-hero-actions button.ref-hero-where { width: min(100%, 360px); min-height: 56px; }
}

/* The season of the family's planned stay (assets/js/family-plan.js): a still KAIHO mark, not the live one. */
.ref-text-home .top-season-badge.is-planned::before { background: #8aadd8; animation: none; }
/* みなかみ before its own photographs: a stand-in photograph (data-dummy names the real shot), never an object. */
.ref-facility-placeholder.is-dummy { display: block; font-size: 0; }
.ref-facility-description { word-break: auto-phrase; text-wrap: pretty; }