/* Facility TOP 「◯◯ならでは」 and 「◯◯からのお知らせ」 (みっくん FB-41/42, scripts/facility-top-signals.mjs).
   Text-led and quiet: an index, a heading, one line, a link; news as dated rows. BUB COLOR only. */
.facility-signals { width: min(calc(100% - 40px), 1200px); margin: 8px auto 40px; }
.facility-signals > h2 { margin: 0 0 16px; font-size: 20px; line-height: 30px; font-weight: 700; }
.facility-signals-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(47 47 47 / 12%); }
.facility-signals-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 8px; padding: 16px 0; border-bottom: 1px solid rgb(47 47 47 / 12%); }
.facility-signals-index { grid-row: 1 / 4; padding-top: 3px; color: #d56e59; font: 700 13px/20px var(--font-num, inherit), var(--font-ja, sans-serif); letter-spacing: .06em; }
.facility-signals-list h3 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.facility-signals-list p { margin: 4px 0 0; color: rgb(47 47 47 / 80%); font-size: 14px; line-height: 22px; }
.facility-signals-list a, .facility-news-more { display: inline-flex; align-items: center; gap: 2px; width: fit-content; margin-top: 6px; color: #2f2f2f; font-size: 13px; line-height: 20px; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(47 47 47 / 30%); text-underline-offset: 3px; }
.facility-signals-list .ic, .facility-news-more .ic { width: 14px; height: 14px; }

.facility-news > h2 { margin: 0 0 16px; font-size: 22px; line-height: 32px; font-weight: 700; }
.facility-news-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(47 47 47 / 12%); }
.facility-news-list a { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgb(47 47 47 / 12%); color: #2f2f2f; text-decoration: none; }
.facility-news-list time { color: rgb(47 47 47 / 64%); font: 400 12px/18px var(--font-num, inherit), var(--font-ja, sans-serif); }
.facility-news-list span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 22px; font-weight: 500; }
.facility-news-more { margin-top: 16px; font-size: 14px; }

@media (min-width: 768px) {
  .facility-signals { width: min(calc(100% - 96px), 1200px); margin-bottom: 56px; }
  .facility-signals > h2 { font-size: 24px; line-height: 34px; }
  .facility-signals-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; border-bottom: 1px solid rgb(47 47 47 / 12%); }
  .facility-signals-list li { grid-template-columns: 1fr; padding: 20px 0 24px; border-bottom: 0; }
  .facility-signals-index { grid-row: auto; margin-bottom: 6px; padding-top: 0; }
  .facility-news-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .facility-news-list a { height: 100%; }
}
@media (hover: hover) {
  .facility-news-list a:hover span { text-decoration: underline; text-underline-offset: 3px; }
}

/* Points with photographs, in TOP's tone (owner, 2026-10-07): the photo 12px round above the title, the
   line and a bold 「〜を見る >」 — as TOP's and /about/'s cards; no MUCHU index. Stacked on phones,
   three across on the web. */
.facility-signals-list:has(.facility-signals-photo) { gap: 28px; border: 0; }
.facility-signals-list li:has(.facility-signals-photo) { display: flex; flex-direction: column; padding: 0; border: 0; }
.facility-signals-photo { display: block; aspect-ratio: 16 / 10; margin-bottom: 14px; overflow: hidden; border-radius: 12px; background: #e7ecec; }
.facility-signals-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.facility-signals-list li:has(.facility-signals-photo) h3 { font-size: 17px; line-height: 26px; }
.facility-signals-list li:has(.facility-signals-photo) p { text-wrap: pretty; word-break: auto-phrase; }
.facility-signals > h2 { font-size: 22px; line-height: 32px; }
@media (min-width: 768px) {
  .facility-signals-list:has(.facility-signals-photo) { column-gap: 24px; border: 0; }
  .facility-signals-photo { aspect-ratio: 4 / 3; }
  .facility-signals > h2 { font-size: 28px; line-height: 40px; }
}
/* Room under the hero's brush edge, as TOP's first section (owner, 2026-10-07): 68px on phones, 88px
   on the web from the hero to the heading. */
.facility-signals { margin-top: 68px; }
@media (min-width: 768px) { .facility-signals { margin-top: 88px; } }
/* The points only say what is special here — no 「〜を見る >」, which read as leaving the page while
   it only jumped down; the section tabs right below do that (owner, 2026-10-07). */
/* As TOP's 「BUB RESORTとは」 cards (owner, 2026-10-07: thumbnail rows read as a blog list): a large
   square photo (14px round), a bold title and one line under it; on phones the cards run across with
   the next one peeking, as on TOP; three across on the web. Measured from TOP at 393 / 1440. */
@media (max-width: 767px) {
  .facility-signals-list:has(.facility-signals-photo) { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 40px) * .72); 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-signals-list:has(.facility-signals-photo)::-webkit-scrollbar { display: none; }
  .facility-signals-list li:has(.facility-signals-photo) { display: block; min-width: 0; scroll-snap-align: start; }
  .facility-signals-photo { aspect-ratio: 1 / 1; margin: 0; border-radius: 14px; }
  .facility-signals-list li:has(.facility-signals-photo) h3 { margin-top: 10px; font-size: 16px; line-height: 24px; }
  .facility-signals-list li:has(.facility-signals-photo) p { margin-top: 2px; color: rgb(47 47 47 / 85%); font-size: 13px; line-height: 20px; }
}
@media (min-width: 768px) {
  .facility-signals-list:has(.facility-signals-photo) { column-gap: 56px; }
  .facility-signals-photo { margin-bottom: 16px; border-radius: 16px; }
  .facility-signals-list li:has(.facility-signals-photo) h3 { font-size: 20px; line-height: 30px; }
  .facility-signals-list li:has(.facility-signals-photo) p { margin-top: 8px; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 26px; }
}

/* メディア掲載 sits under お知らせ in the same row form (2026-10-17). */
.facility-news + .facility-media { padding-top: 0; }
/* 親離れBUBステイ・天才キャンプ banners under the plan cards: full width on phones, two across on PC. */
.facility-program-banners { display: grid; gap: 12px; margin-top: 32px; }
.facility-program-banner { display: block; overflow: hidden; border-radius: 12px; }
.facility-program-banner img { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
  .facility-program-banners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
}
@media (hover: hover) and (pointer: fine) {
  .facility-program-banner img { transition: opacity .2s ease; }
  .facility-program-banner:hover img { opacity: .92; }
}