/* 食事・館内施設 in the room pages' tone (owner, 2026-10-07).
 * As the rooms: the quick facts as one light line (no table, no rules), space instead of hairlines
 * between sections, 22px heads with TOP's 15px lead, full-width photos with 12px corners and a small
 * expand mark, the notes in TOP's closing grey band; the meal jump links become the page's tabs.
 * These are pages to browse, so phones keep the four tabs and lose the booking card in the page. */
.bub-site-page[data-bub-detail-tone] main.room-reference-detail:is(.food-reference-detail, .facilities-reference-detail) {
  --place-line: rgb(47 47 47 / 12%);
}
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-quick-facts, .facilities-quick-facts) { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 0; border: 0; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-quick-facts, .facilities-quick-facts) > div { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 0; padding: 0; border: 0; grid-template-columns: none; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-quick-facts, .facilities-quick-facts) dt { display: inline-flex; align-items: center; gap: 4px; width: auto; min-width: 0; margin: 0; color: rgb(47 47 47 / 70%); font-size: 13px; line-height: 20px; font-weight: 500; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-quick-facts, .facilities-quick-facts) dt svg { width: 16px; height: 16px; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-quick-facts, .facilities-quick-facts) dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 22px; font-weight: 700; }

/* The meal links as the page's tabs, as 館内施設's section tabs. */
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav { display: flex; gap: 24px; margin: 24px 0 0; padding: 0; border: 0; box-shadow: inset 0 -1px var(--place-line); background: none; scrollbar-width: none; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 6px; min-height: 44px; margin: 0; padding: 10px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: rgb(47 47 47 / 70%); font-size: 15px; line-height: 22px; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a strong { color: var(--ink); font-weight: 700; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a .food-time { font-size: 13px; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a svg { display: none; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a:first-child { border-bottom-color: var(--ink); }

/* Sections: space, not rules. */
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-reference-content, .facilities-reference-content) > section,
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) section.section { border-top: 0 !important; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-section-heading, .facilities-section-heading) h2 { font-size: 22px; line-height: 32px; font-weight: 700; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-section-heading, .facilities-section-heading) p { margin-top: 8px; color: rgb(47 47 47 / 85%); font-size: 15px; line-height: 26px; }

/* Photos: full width, 12px, a small expand mark instead of 「拡大」. */
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .room-reference-context-photo { width: 100%; margin: 0 0 12px; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .room-reference-context-photo .bell-photo-trigger { display: block; width: 100%; overflow: hidden; border-radius: 12px; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .room-reference-context-photo img { border-radius: 12px; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .room-reference-context-photo figcaption { margin-top: 6px; color: rgb(47 47 47 / 60%); font-size: 12px; line-height: 18px; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .bell-photo-trigger::after {
  content: "" !important; right: 8px !important; bottom: 8px !important; width: 28px; height: 28px; padding: 0 !important; border-radius: 4px !important;
  background: rgb(47 47 47 / 64%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcfcfc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 14px no-repeat !important;
  font-size: 0 !important;
}
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-dish-row img, .facilities-reference-photos img) { border-radius: 12px; }

/* Facts inside a section: a light list, labels muted, no rules. */
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-service-facts, .facilities-info-list) > div { padding-block: 6px; border: 0; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-service-facts, .facilities-info-list) dt { color: rgb(47 47 47 / 70%); font-size: 13px; font-weight: 500; }

@media (max-width: 1023px) {
  :root .bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .chosei-room-listing-booking { display: none; }
}
@media (max-width: 767px) {
  .bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) section:is(.food-important-section, .facilities-important-section) { position: relative; width: auto !important; margin: 40px calc(50% - 50vw) 0 !important; padding: 48px calc(50vw - 50%) 40px !important; border-top: 0 !important; background: var(--surface-subtle); }
  .bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) section:is(.food-important-section, .facilities-important-section)::before { content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 18px; 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; }
}
@media (min-width: 768px) {
  .bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) section:is(.food-important-section, .facilities-important-section) { margin-top: 24px !important; padding: 32px !important; border-top: 0 !important; border-radius: 12px; background: var(--surface-subtle); }
  .bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-section-heading, .facilities-section-heading) h2 { font-size: 24px; line-height: 34px; }
}

/* Sections after the hero: space, not rules (the detail tone draws a top rule on each). */
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) :is(.food-reference-content, .facilities-reference-content) > * { border-top: 0 !important; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav { padding: 0; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav { justify-content: flex-start; }
.bub-site-page[data-bub-detail-tone] main.food-reference-detail .food-meal-nav a { flex: none; width: auto; justify-content: flex-start; }
.bub-site-page[data-bub-detail-tone] main:is(.food-reference-detail, .facilities-reference-detail) .facilities-info-list > div { padding-block: 4px; }