/* ホテルしみず — コンポーネント (COMPONENTS.md C-01〜C-30) */

/* icon */
.icon { width: 1.25em; height: 1.25em; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 1.75; flex-shrink: 0; }

/* C-01 R5-12: <1024 は position:relative */
.site-header {
  border-bottom: 1px solid var(--role-line);
}
@media (max-width: 1023px) {
  .site-header { position: relative; }
}
@media (min-width: 1024px) {
  .site-header { position: sticky; top: 0; z-index: var(--z-header); }
}
/* C-01b ヘッダー上部。電話と営業時間は「右側のひとかたまり」にする。
   以前は電話が左端・営業時間が右端に離れ、配置ミスに見えていた。
   高さは 36px のまま増やさない。 */
.site-header__utility {
  display: none;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--sp-2) var(--sp-4);
  min-height: 36px;
  font-size: var(--fs-small);
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .site-header__utility { display: flex; padding-block: var(--sp-2); }
}
.site-header__hours { color: var(--c-ink-2); }
.site-header__tel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  color: var(--role-heading);
  font-weight: 700;
}
.site-header__tel .icon { align-self: center; }
/* 「電話予約」= 何の番号か分かるラベル。番号そのものは変えない */
.site-header__tel-label {
  font-size: .75rem;
  line-height: 1.5;                  /* 行箱を広げない。ここが伸びると上段全体が伸びる */
  font-weight: 700;
  color: var(--c-surface);
  background-color: var(--c-navy);
  border-radius: var(--radius-s);
  padding-inline: .5em;
  letter-spacing: .04em;
  align-self: center;
}
.site-header__tel-num { font-size: 1rem; line-height: 1.5; letter-spacing: .01em; }
.lang-switch[hidden] { display: none; }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--header-h);
  flex-wrap: wrap;
  padding-block: var(--sp-2);
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  order: 3;
  background: var(--c-surface);
  border: 1px solid var(--role-line);
  border-radius: var(--radius-s);
  padding: var(--sp-2) var(--sp-3);
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  color: var(--c-navy);
  font-weight: 700;
  font-size: var(--fs-small);
}
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--c-navy); background-color: var(--c-mist); }
/* 1024px未満ではメニューをヘッダーの右端へ寄せる。
   予約ボタンが非表示になってから、ロゴのすぐ横に取り残されていた。 */
@media (max-width: 1023px) { .nav-toggle { margin-inline-start: auto; } }
@media (min-width: 1024px) { .nav-toggle { display: none; } }
@media (max-width: 599px) { .nav-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } }

/* C-01c ヘッダー内の予約ボタン。
   <1024 では画面下部の固定CTA(.sticky-cta)が同じ導線を出しているので隠す。
   両方出ていると常時UIが約122pxになり本文が圧迫されるため。
   固定CTAは .sticky-cta が 1024 以上で display:none になるので、
   この 1024 という境目は必ず両者で揃えること。 */
/* .btn が後段で display:inline-flex を指定しており、単一クラス同士だと
   後勝ちで隠れない。クラスを2つ重ねて詳細度を上げる。 */
.site-header__cta.btn { display: none; }
@media (min-width: 1024px) {
  .site-header__cta.btn { display: inline-flex; order: 3; margin-inline-start: auto; }
}

/* C-02 site-nav */
.site-nav { flex-basis: 100%; order: 4; }
.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.site-nav__list a {
  display: flex;
  align-items: center;
  padding: var(--sp-3) 0;
  min-height: 48px;
  font-weight: 700;
  color: var(--c-navy);
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--role-line);
}
.site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a[aria-current="page"] {
  color: var(--c-navy);
  background-color: var(--c-mist);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.site-nav__extra { display: block; padding-block: var(--sp-3); border-top: 1px solid var(--role-line); margin-top: var(--sp-2); }
.site-nav__extra a { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--c-navy); font-weight: 700; }

/* JS・<1024 のみドロワー化 (specificity 対策) */
@media (max-width: 1023px) {
  html.js .site-nav:not(.is-open) {
    display: none;
  }
  html.js .site-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    inset-inline-end: var(--gutter);
    width: min(360px, calc(100% - 2 * var(--gutter)));
    max-height: calc(100vh - var(--header-h-real, 64px) - var(--sticky-h-real, 56px));
    max-height: calc(100dvh - var(--header-h-real, 64px) - var(--sticky-h-real, 56px));
    overflow-y: auto;
    z-index: var(--z-drawer);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--role-line);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-2);
    animation: nav-in var(--dur-2) var(--ease);
  }
}
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1024px) {
  .site-nav { flex-basis: auto; order: 2; }
  .site-nav__list { flex-direction: row; gap: var(--sp-2); }
  .site-nav__list a { padding: var(--sp-1) var(--sp-2); min-height: auto; border-bottom: 0; background-color: var(--c-surface); font-size: var(--fs-small); }
  .site-nav__list a:hover, .site-nav__list a:focus-visible, .site-nav__list a[aria-current="page"] { background-color: var(--c-mist); text-underline-offset: 6px; }
  .site-nav__extra { display: none; }
  html.js .site-nav,
  html.js .site-nav.is-open {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    width: auto;
    padding: 0;
    border: 0;
    animation: none;
  }
}
@media (min-width: 1280px) {
  .site-nav__list { gap: var(--sp-5); }
  .site-nav__list a { font-size: var(--fs-body); }
}

/* C-04 brand（2026-09-23 文字からロゴ画像へ。高橋さん支給の2点）
   下層は金のロゴ、トップは写真に重ねる白のロゴ（pages.css）。全ページ同じ高さ:
   スマホ 34px・PC 40px（幅 約171 / 201px。以前の文字のロゴ 172 / 198px とほぼ同じ場所を占める）。
   高さを先に決め、幅は img の width/height の比から出すので、読み込み前後で動かない。 */
.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; block-size: 34px; inline-size: auto; max-inline-size: none; }
.brand__logo--solid { display: none; }   /* トップの白いヘッダー用（pages.css で切り替え） */
@media (min-width: 1024px) { .brand__logo { block-size: 40px; } }

/* C-05 buttons (社長裁定 D-13) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: var(--btn-h);
  padding: var(--sp-2) var(--sp-5);
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-s);
  font-weight: 700;
  line-height: var(--lh-ui);
  text-align: center;
  border: 0;
  cursor: pointer;
  overflow-wrap: anywhere;
  text-wrap-style: balance;
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.btn--cta, .btn--tel { white-space: nowrap; }
.btn--tel { padding-inline: var(--sp-3); }

.btn--cta, .btn--cta:visited { color: var(--c-white); background-color: var(--c-cta); }
.btn--cta:hover, .btn--cta:focus-visible, .btn--cta:active,
.btn--cta:visited:hover, .btn--cta:visited:focus-visible, .btn--cta:visited:active { color: var(--c-white); background-color: var(--c-cta-hover); }

.btn--secondary, .btn--secondary:visited { color: var(--c-white); background-color: var(--c-navy); }
.btn--secondary:hover, .btn--secondary:focus-visible, .btn--secondary:active,
.btn--secondary:visited:hover, .btn--secondary:visited:focus-visible, .btn--secondary:visited:active { color: var(--c-white); background-color: var(--c-navy-hover); }

.btn--ghost, .btn--ghost:visited,
.btn--tel, .btn--tel:visited { color: var(--c-navy); background-color: var(--c-paper); border: 1.5px solid var(--c-navy); }
.btn--ghost:hover, .btn--ghost:focus-visible, .btn--ghost:active,
.btn--ghost:visited:hover, .btn--ghost:visited:focus-visible, .btn--ghost:visited:active,
.btn--tel:hover, .btn--tel:focus-visible, .btn--tel:active,
.btn--tel:visited:hover, .btn--tel:visited:focus-visible, .btn--tel:visited:active { color: var(--c-navy); background-color: var(--c-navy-tint); border-color: var(--c-navy); }

/* C-06 sticky-cta (社長裁定 D-14: JS 有効時だけ固定)
   2026-09-23 全ページ共通の1つの設計にした（デザイナー指摘）。以前はトップだけ
   pages.css で「左右 8px のグリッド・文字 12.5px」、下層は「左右 12px の flex・14px」で、
   390px でボタン幅も 167/201 と 146/212 に食い違っていた。
   ・左右余白 12px / ボタン間 8px / 予約:電話 = 1.15:1 / 高さ 48px / 文字 14px（359px 以下 13px）
   ・予約帯(.cta-band)やフッターの予約ボタンが画面に全部見えている間は、同じボタンが
     二重に並ぶので下へ退く（.is-tucked。site.js §2c）
   ・退いたときに地色の帯が出ないよう、固定バーの分の下余白は body ではなく
     暗いフッターの中に取る（base.css の html.js body の padding を置き換え） */
.sticky-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  max-width: 100%;
  border-top: 1px solid var(--role-line);
}
html.js .sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 18px rgba(31, 29, 27, .07);
  transition: transform var(--dur-2) var(--ease), visibility 0s linear 0s;
}
html.js .sticky-cta.is-tucked {
  transform: translateY(calc(100% + 8px));
  visibility: hidden;                    /* 退いている間はタブ移動でも届かない */
  transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.sticky-cta .btn {
  inline-size: 100%;
  min-width: 0;
  padding-inline: var(--sp-2);
  font-size: var(--fs-small);
  white-space: nowrap;
}
@media (max-width: 359px) {
  .sticky-cta .btn { font-size: .8125rem; gap: .3em; }
}
@media (max-width: 1023px) {
  /* 固定バーの分の下余白（以前は base.css で body に取っていた） */
  html.js .site-footer { padding-block-end: calc(var(--sp-7) + var(--sticky-h-real, var(--sticky-h)) + 8px); }
}
@media (min-width: 1024px) {
  .sticky-cta { display: none; }
}
@media (max-width: 1023px) {
  /* 固定バーが退いている間は「先頭へ戻る」も下端へ（宙に浮かせない） */
  html.sticky-tucked .to-top { bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
}

/* C-07 hero (index) */
.hero { padding-block: 0; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 768px) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--sp-5);
    row-gap: 0;
    align-items: center;
    grid-template-areas: "content media" "facts facts";
  }
}
.hero__content { padding-block: var(--hero-content-pad-y); min-width: 0; }
@media (min-width: 768px) { .hero__content { grid-area: content; } }
.hero__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--role-heading); margin: 0 0 var(--sp-2); }
.hero__title { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.hero__name { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--role-heading); }
.hero__desc { font-family: var(--ff-body); font-weight: 500; font-size: var(--fs-display-desc); line-height: var(--lh-lead); color: var(--role-text); }
@media (min-width: 768px) { .hero__desc { font-size: 1.25rem; } }
.hero__lead { margin-block: var(--sp-4) 0; font-size: var(--fs-body); line-height: 1.8; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 100%; min-width: 0; }

.hero__media { margin: var(--sp-5) 0 0; padding-block: var(--hero-media-pad-y); }
@media (min-width: 768px) { .hero__media { margin: 0; grid-area: media; } }
.hero__media img {
  width: 100%;
  height: var(--hero-media-h);
  object-fit: cover;
  object-position: 50% 58%;
  border-radius: 0;
}
.hero__caption { font-size: var(--fs-small); margin-top: var(--sp-2); }

.hero__facts { box-shadow: 0 0 0 100vmax var(--c-mist); clip-path: inset(0 -100vmax); }
@media (min-width: 768px) { .hero__facts { grid-area: facts; margin-top: var(--sp-5); } }

/* C-08 page-hero（下層ページの冒頭パネル）
   2026-09-23 改（高橋さん指示「冒頭パネルの高さがページごとに跳ねる」）。共通ルール:
   ・骨格は パンくず → 見出し(h1) → 導入文（PC で3行以内・約90字以内） → [ページ内リンク]
     ページ内リンクは、読み手が節を行き来するページ（客室・料金・館内施設・アクセス・お土産）だけに置く
   ・見出しの開始位置は全ページ同じ（上余白 + パンくず 1行）。中身は上揃え
   ・768px 以上は「高さの基準」を下限として持つ（--page-hero-min）。短いページも同じ高さの面になり、
     長いページは自然に伸びる。固定の高さではないので、文字200%や長い文章でも欠けない
   ・767px 以下は下限なし（文字量に応じて伸びる）
   ・朝食の「料金・時間・予約」のような要点のカードは冒頭に置かず、次の面（写真の横）へ
   ・冒頭パネルの次の中身は、どのページも --sec-gap 空けて始める（.after-hero） */
.page-hero { padding-block: var(--page-hero-pad-y); }
@media (min-width: 768px) { .page-hero { min-block-size: var(--page-hero-min); } }
.after-hero { padding-block-start: var(--sec-gap); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-1); font-size: var(--fs-small); margin: 0 0 var(--sp-3); }
.breadcrumb li:not(:last-child)::after { content: "›"; margin-inline-start: var(--sp-1); }
.breadcrumb a { text-decoration: underline; }
/* 見出しの開始位置をそろえるため、パンくずは1行に保つ。今いるページ名はすぐ下の見出しと同じなので、
   収まらないときは末尾を「…」で省く（2026-09-23） */
.breadcrumb ol { flex-wrap: nowrap; min-inline-size: 0; }
.breadcrumb li { flex: none; white-space: nowrap; }
.breadcrumb li[aria-current] { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.page-hero__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--sp-2); }
.page-hero__title { margin: 0 0 var(--sp-4); }
.page-hero__lead { margin: 0; }
.page-hero__updated { margin-top: var(--sp-3); font-size: var(--fs-small); }
/* R5-9: em基準auto-fit (390=2列, 768+=4列, 200%で1列) */
/* C-11c 長い見出しは「主見出し + 副題」に分ける。
   1行に詰め込むと狭い画面で括弧の途中など不自然な位置で折り返す。
   title / meta / canonical / OG / JSON-LD は変えていない。 */
.page-hero__subtitle {
  margin: var(--sp-2) 0 0;
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  color: var(--role-muted);
  font-weight: 400;
}
.page-hero__title { text-wrap: balance; word-break: auto-phrase; }   /* 「コン／ビニ」のような語の途中で折り返さない（対応ブラウザのみ） */

/* C-29b 「こだわりの水 / 空気」。写真 + 仕様 + 説明。
   写真は index の安心・安全節と同じ既存ファイルを使い回している。 */
.care-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; margin-top: var(--sp-4); }
/* 原本が 187px / 205px しかないので、それ以上には拡大しない（粗く見えるため） */
.care-row__figure { flex: 0 1 auto; max-inline-size: min(100%, 205px); margin: 0; }
.care-row__figure img { inline-size: 100%; block-size: auto; aspect-ratio: 187 / 131; object-fit: contain; border-radius: var(--radius-s); background-color: var(--c-surface); }
.care-row__figure figcaption { margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--role-caption); }
.care-row__body { flex: 1 1 var(--measure-min); min-width: 0; }
.care-row__body p + p { margin-top: var(--sp-3); }
@media (max-width: 599px) {
  .care-row__figure { flex-basis: auto; max-inline-size: 205px; }
}

/* C-11b ページ内リンク（2026-09-23 改）
   ページごとに形が変わらないよう、置くページはすべて同じ形: 導入文の下に、細い枠の丸いタブを横に並べる。
   ページ内リンクだと分かるよう下向きの矢印を付け、外部リンク(↗)と区別する。
   押しやすさのため高さ 44px は保つ。狭い画面では折り返す（横スクロールにはしない）。 */
.page-hero__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.page-hero__quicklinks li { flex: 0 1 auto; }
.page-hero__quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border-radius: 999px;
  border: 1px solid var(--role-line);
  background-color: rgb(255 255 255 / .55);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
.page-hero__quicklinks a::after {
  content: "";
  flex: none;
  inline-size: .45em; block-size: .45em;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-.1em, -.1em);
}
.page-hero__quicklinks a:hover, .page-hero__quicklinks a:focus-visible { text-decoration: underline; background-color: var(--c-surface); border-color: var(--c-navy); }
/* スマホは同じ幅のマスに並べる（4つなら 2×2、3つなら1段）。1つだけ次の段に落ちるのを防ぐ */
@media (max-width: 599px) {
  .page-hero__quicklinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__quicklinks:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-hero__quicklinks a { inline-size: 100%; justify-content: center; padding-inline: var(--sp-2); white-space: nowrap; }
}
@media (max-width: 379px) { .page-hero__quicklinks a { gap: var(--sp-1); padding-inline: var(--sp-1); } }

/* 要点のカード（朝食の「料金・時間・予約」）。冒頭パネルから写真の横へ移した（2026-09-23）
   PC: 写真の右に縦に並べる / タブレット・スマホ: 写真の下に3列（狭い画面は2行に） */
.intro-media { display: grid; gap: var(--sp-4) var(--sp-6); align-items: start; }
.intro-media .morning-figure { margin: 0; }
@media (min-width: 1024px) {
  .intro-media { grid-template-columns: minmax(0, 760px) minmax(15rem, 1fr); align-items: center; }
}
.info-facts { border-top: 2px solid var(--c-gold); padding-top: var(--sp-3); }
.info-facts__title { margin: 0 0 var(--sp-2); font-family: var(--ff-display); font-size: var(--fs-h3); color: var(--role-heading); }
.info-facts__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-3); margin: 0; }
.info-facts__list > div { padding-block: var(--sp-2); border-bottom: 1px solid var(--role-line); min-width: 0; }
.info-facts__list dt { font-size: var(--fs-small); color: var(--role-muted); }
.info-facts__list dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.info-facts__note { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--role-muted); }
@media (max-width: 379px) { .info-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .info-facts__list { grid-template-columns: 1fr; }
  .info-facts__list > div { display: grid; grid-template-columns: 4.5em 1fr; align-items: baseline; padding-block: var(--sp-3); }
}

/* C-09 facts */
.facts { padding-block: var(--facts-pad-y); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: var(--sp-3) var(--sp-4); }
.facts__item { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.facts__item .icon { color: var(--role-heading); margin-bottom: var(--sp-1); }
.facts__label { font-size: var(--fs-small); }
.facts__value { display: flex; flex-direction: column; gap: 2px; font-family: var(--ff-body); }
.facts__num { font-family: var(--ff-body); font-size: var(--fs-num); font-weight: 700; line-height: var(--lh-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.facts__num--price { color: var(--role-price); }
.facts__unit { font-size: var(--fs-small); font-weight: 700; }
.facts__note { display: block; font-size: var(--fs-small); line-height: 1.6; }

/* C-10 section */
.section { padding-block: var(--sec-pad-y); }
.section--flow { padding-block: 0; margin-block-start: var(--sec-gap); }
.section--band { padding-block: var(--sec-gap); margin-block-start: var(--sec-gap); }
.section__head { text-align: left; margin-bottom: var(--sec-head-gap); }
.section__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--sp-2); }
.section__title { margin: 0 0 var(--sp-3); }
.section__lead { margin: 0; }
.section__more { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* C-11 cards */
.cards { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
.cards--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) {
  .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card {
  border: 1px solid var(--role-line);
  border-radius: var(--radius-m);
}
/* R5-1: card__link 自己完結部品 */
.card__link, .card__link:visited { display: block; color: var(--c-ink); background-color: var(--c-surface); border-radius: var(--radius-m); }
.card__link:hover, .card__link:focus-visible, .card__link:active,
.card__link:visited:hover, .card__link:visited:focus-visible, .card__link:visited:active { color: var(--c-ink); background-color: var(--c-surface); }
.card__link:hover .card__title, .card__link:focus-visible .card__title { text-decoration: underline; text-decoration-thickness: 2px; }
.card__media { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-start-start-radius: var(--radius-m); border-start-end-radius: var(--radius-m); }
.card__body { padding: var(--card-pad); }
.card__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.card__text { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.card__meta { font-size: var(--fs-small); margin: 0; }
.card--text .card__body { padding: var(--card-pad); }
.feature-card__num { margin: 0 0 var(--sp-2); }

/* C-12 room-card */
.room-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--role-line);
}
.room-card:last-child { border-bottom: 0; }
.room-card__media { flex: 0 1 275px; align-self: flex-start; max-width: min(100%, 275px); height: auto; border-radius: var(--radius-s); }
.room-card__body { flex: 1 1 var(--measure-min); min-width: 0; }
.room-card__title { margin: 0 0 var(--sp-3); }
.room-card__spec { margin: 0 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.room-card__spec > div { display: grid; grid-template-columns: max-content 1fr; gap: 0 var(--sp-4); }
.room-card__spec dd { margin: 0; font-weight: 700; }
.room-card__cond { font-size: var(--fs-body); font-weight: 400; color: var(--role-text); }
.room-card__text { margin: 0 0 var(--sp-2); }

/* 🔴 2026-09-23: 写真の img に width:auto を書かない。
   width:auto は HTML の width/height 属性より強く、遅延読み込みの画像は読み込まれるまで
   幅0・高さ0になる。読み込まれた瞬間にページが伸び、下の見出しが最大 716px 動いていた
   （料金ページ・390px で実測）。属性の幅を max-width で抑える形にすれば、読み込み前から
   正しい大きさの枠が取られる。 */
/* C-12b room-mini-card */
.cards--rooms { grid-template-rows: auto auto auto auto; }
/* 金額を折り返さなくしたので、列の幅は文字の大きさに合わせる（文字200%では列が減る）。
   100% の 1024〜1440px では従来どおり4列 */
@media (min-width: 1024px) { .cards--4.cards--rooms { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13em), 1fr)); } }
.room-mini-card {
  padding: var(--card-pad-rooms);
  border: 1px solid var(--role-line);
  border-radius: var(--radius-m);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: var(--sp-2);
  align-content: start;
}
.room-mini-card__media img { max-width: min(100%, 275px); height: auto; border-radius: var(--radius-s); }
.room-mini-card__title { font-size: var(--fs-h3); margin: 0; }
.room-mini-card__spec { margin: 0; font-size: var(--fs-body); }
.room-mini-card__prices { display: flex; flex-direction: column; gap: var(--sp-1); }
.room-mini-card__price { margin: 0; }
.room-mini-card__cond { font-size: var(--fs-body); }

/* C-13 rates-table */
.table-scroll { overflow-x: auto; }
.rates-table { min-width: 100%; }
.rates-table__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.rates-table__cap-note { font-size: var(--fs-small); font-weight: 400; }
.rates-table td, .rates-table th { font-variant-numeric: tabular-nums; }
.rates-table .price { text-align: right; }
/* 金額と「円」「〜」を一体で読ませる（2026-09-23 高橋さん指摘: PC で「14,400」と「円」が別の行に）。
   料金の列は折り返さず、狭くなるのは説明の長い「朝食」の列の側 */
.rates-table__price { white-space: nowrap; }
@media (min-width: 768px) { .rates-table th[scope="row"] { min-inline-size: 10em; } }

@media (max-width: 599px) {
  .rates-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .rates-table, .rates-table caption, .rates-table tbody, .rates-table tr, .rates-table td, .rates-table th { display: block; width: 100%; }
  .rates-table tr { border: 1px solid var(--role-line); border-radius: var(--radius-m); margin-bottom: var(--sp-3); padding: var(--sp-3); }
  .rates-table th, .rates-table td { border-bottom: 0; padding: var(--sp-1) 0; }
  .rates-table td::before { content: attr(data-label); display: block; font-size: var(--fs-small); font-weight: 400; color: var(--role-muted); }
  .rates-table tbody tr:nth-child(even) { background-color: transparent; }
}

/* C-14 spec-list */
.spec-list__row { display: grid; grid-template-columns: 1fr; gap: var(--sp-1); padding-block: var(--sp-2); border-bottom: 1px solid var(--role-line); }
.spec-list__row:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .spec-list__row { grid-template-columns: 160px minmax(0, 1fr); gap: var(--sp-4); }
}
.spec-list dd { margin: 0; }
.spec-list--card { padding: var(--card-pad); border: 1px solid var(--role-line); border-radius: var(--radius-m); }

/* C-15 faq / toc */
.toc { margin-bottom: var(--sp-6); }
.toc ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.toc a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-3); border: 1px solid var(--role-line); border-radius: var(--radius-s); font-weight: 700; }
/* よくある質問: 検索を先に、目次（10カテゴリー）はたためる枠に入れる（2026-09-23）。
   スマホでは目次が画面2枚ぶんあり、その下に検索欄が隠れていた。
   <details> なので JS 無効でも開いたまま・キーボードで開閉できる。狭い画面では
   site.js §7 が初期状態を閉じにする（フッターと同じ仕組み）。 */
.toc-fold { margin-block: var(--sp-4) var(--sp-6); border-block: 1px solid var(--role-line); }
.toc-fold__summary {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--role-heading);
}
.toc-fold__summary::-webkit-details-marker { display: none; }
.toc-fold__summary::after {
  content: ""; margin-inline-start: auto; inline-size: .55em; block-size: .55em;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-.12em, -.12em); transition: transform var(--dur-1) var(--ease);
}
.toc-fold[open] > .toc-fold__summary::after { transform: rotate(-135deg) translate(-.12em, -.12em); }
.toc-fold__count { color: var(--role-muted); font-weight: 400; }
.toc-fold .toc { margin: 0 0 var(--sp-4); }
@media (max-width: 599px) {
  /* 2列の短い並びにして縦の長さを半分に */
  .toc-fold .toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .toc-fold .toc a { font-size: var(--fs-small); padding: var(--sp-1) var(--sp-2); line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) { .toc-fold__summary::after { transition: none; } }
.faq + .faq { margin-top: var(--sp-6); }
/* C-15b FAQ はネイティブの <details> で開閉する。
   button + aria-expanded だと JS が無いと開けないが、<details> なら
   JS 無効でもキーボードでもそのまま開閉できる。aria-expanded は
   JS がある時だけ同期する（UAが持つ状態と二重にならないように）。 */
.faq__item {
  border-bottom: 1px solid var(--role-line);
}
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-4);
  min-height: 44px;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: "Q"; color: var(--role-heading); font-family: var(--ff-display); line-height: 1.7; }
.faq__q-title { font-size: 1rem; font-weight: 700; margin: 0; flex: 1 1 auto; min-width: 0; }
.faq__q::after {
  content: "";
  flex: none;
  align-self: center;
  inline-size: .55em; block-size: .55em;
  border-inline-end: 2px solid var(--role-heading);
  border-block-end: 2px solid var(--role-heading);
  transform: rotate(45deg) translate(-.12em, -.12em);
  transition: transform var(--dur-1) var(--ease);
}
.faq__item[open] > .faq__q::after { transform: rotate(-135deg) translate(-.12em, -.12em); }
.faq__q:hover .faq__q-title, .faq__q:focus-visible .faq__q-title { text-decoration: underline; text-underline-offset: 4px; }
.faq__a { padding-inline-start: calc(1em + var(--sp-2)); padding-block-end: var(--sp-4); }
.faq__a p { margin: 0; }
.faq__a p + p, .faq__a ul { margin-top: var(--sp-3); }
@media (prefers-reduced-motion: reduce) { .faq__q::after { transition: none; } }

/* 検索。新しいライブラリは入れず、質問文の絞り込みだけ */
.faq-search { margin-block: var(--sp-5) 0; }
.faq-search[hidden] { display: none; }
.faq-search__label { display: block; font-weight: 700; margin-bottom: var(--sp-2); color: var(--role-heading); }
.faq-search__input {
  inline-size: 100%;
  max-inline-size: 28rem;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--c-ink);
  background-color: var(--c-surface);
  border: 1px solid var(--role-line);
  border-radius: var(--radius-s);
}
.faq-search__count { margin: var(--sp-2) 0 0; color: var(--role-muted); font-size: var(--fs-small); min-height: 1.4em; }
.faq__item[hidden], .faq[hidden] { display: none; }

/* C-16 notice */
.notice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4b);
  border-inline-start: 4px solid var(--role-line);
  border-radius: var(--radius-s);
}
.notice .icon { margin-top: 2px; }
.notice p { margin: 0; font-size: var(--fs-body); }

/* C-17 embed (R5-4: 器/面/caption の 3 層) */
/* 🔴 親が flex のことがある (access の .access-map-row)。フレックスアイテムは
   既定の min-width:auto で中身より小さくなれず、320px 幅で横に溢れた。
   ファサードのボタンを iframe に替えて内在幅が変わったことで表面化した。 */
.embed { margin: 0; min-width: 0; max-width: 100%; }
/* 中身は絶対配置の iframe だけになったので、ボタンを収めるための flex 中央寄せと
   padding は不要。padding があると iframe が 16px 内側に入って額縁のように見える。 */
.embed__frame {
  position: relative; border-radius: var(--radius-m); overflow: clip;
  background-color: var(--c-mist);
}
.embed--4x3 .embed__frame { aspect-ratio: 4 / 3; }
/* 地図は押さずに読み込む (2026-09-21)。枠は比率だけを持ち、中の iframe を敷き詰める。 */
.embed__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed__caption { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-3); }
.embed__title { font-size: var(--fs-body); font-weight: 700; }
.embed__ext { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 700; text-decoration: underline; }
button.embed__ext { padding: 0; border: 0; background-color: transparent; color: var(--role-link); cursor: pointer; font-size: var(--fs-body); }
button.embed__ext:hover, button.embed__ext:focus-visible { color: var(--role-hover); }
.map-link { text-align: center; padding-bottom: var(--sp-4); margin: 0; }
.map-link a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; }

/* C-18 shop-list */
.shop-list { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
/* 2列は 1024px から。768px で2列にすると、写真を横に置いたカードの文字の段が 114px しか残らない */
@media (min-width: 1024px) { .shop-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* C-18b 店舗カード（2026-09-23 改）
   写真の原本は 210〜230 × 140〜146px しか無い（Q-B12。手元にも大きい原本は無い）。
   以前はカード上部いっぱい（スマホ 356px・PC 376px）に広げ、1.7〜1.8倍に拡大して粗く見えていた。
   写真を横に置き、原本の大きさ以下（PC 211px = 等倍、タブレット 180px、スマホ 最大 150px）
   でしか出さない。拡大しないので粗さは出ない。大きい原本が届けば幅を広げるだけで戻せる。
   aspect-ratio を固定して読み込み中のレイアウト移動を防ぐ。 */
.shop-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* 文字を大きくして横に収まらなければ、文字の段を写真の下へ回す */
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--role-line);
  border-radius: var(--radius-m);
  /* overflow は付けない。中にリンクがあるのでフォーカスリングが切れる (DESIGN R5-3) */
}
.shop-card__media {
  flex: none;
  inline-size: min(40%, 150px);
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: var(--c-mist);
  border-radius: var(--radius-s);
}
@media (min-width: 768px) { .shop-card__media { inline-size: 180px; } }
@media (min-width: 1024px) { .shop-card__media { inline-size: 211px; } }
/* 基準幅は em（文字200%で倍になり、写真の横に入らなければ下へ回る）。英字の店名は途中で折れる */
.shop-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 8em; overflow-wrap: anywhere; }
.shop-card__title { margin: 0; font-size: var(--fs-h3); }
.shop-card__text { margin: 0; font-size: var(--fs-body); color: var(--role-muted); flex: 1 1 auto; }
.shop-card__link { margin: 0; }
.shop-card__link a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; min-height: 44px; flex-wrap: wrap; }
@media (max-width: 379px) { .shop-card__text, .shop-card__link a { font-size: var(--fs-small); } }
/* 外部サイトであることを見た目でも示す小さなラベル */
.shop-card__src {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--role-muted);
  border: 1px solid var(--role-line);
  border-radius: var(--radius-s);
  padding: .05em .45em;
  text-decoration: none;
}

/* C-19 event-list */
.event-list__item { padding-block: var(--sp-5); border-bottom: 1px solid var(--role-line); }
.event-list__item:last-child { border-bottom: 0; }
.event-list__date { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: baseline; font-size: var(--fs-small); margin: 0 0 var(--sp-2); }
.event-list__note { font-size: var(--fs-small); }
.event-list__title { margin: 0 0 var(--sp-2); }
.event-list__title a { display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.event-list__text { margin: 0; }
.event-list__source { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--role-line); font-size: var(--fs-body); }
.event-list__source a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; }

/* spot-links (index 外部リンク行) */
.spot-links { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.spot-links a { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; min-height: 44px; }

/* C-20 related (section--flow 必須) */
.related { margin-block-end: var(--sec-gap); }
.related__title { margin: 0 0 var(--sp-4); }
.related__list { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--sp-1); }
@media (min-width: 768px) { .related__list { flex-direction: row; gap: var(--sp-4); } }
.related__list a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; }

/* C-21 cta-band */
.cta-band { padding-block: var(--sec-gap); }
.cta-band__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.cta-band__title { font-size: var(--fs-h3); margin: 0; font-family: var(--ff-display); color: var(--role-heading); }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); max-width: 100%; min-width: 0; }
.cta-band__note { margin: 0; font-size: var(--fs-small); }

/* C-22 site-footer */
.site-footer { padding-block: var(--sp-7); }
.site-footer a { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 600px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__title { font-family: var(--ff-display); font-size: 1.125rem; margin: 0 0 var(--sp-3); color: var(--role-heading); }
.site-footer__addr { font-style: normal; margin: 0 0 var(--sp-2); }
.site-footer__col p { margin: 0 0 var(--sp-2); }
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__facts { display: flex; flex-direction: column; gap: var(--sp-1); }
.site-footer__facts > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--sp-3); }
.site-footer__facts dt { color: var(--role-muted); }
.site-footer__facts dd { margin: 0; }

/* C-22b モバイルでフッターを畳む。
   HTMLは <details open> で出しているので JS が動かない環境では全部開いたまま。
   リンクは1本も減らしていない。表示の仕方だけを変えている。 */
.site-footer__fold { border-top: 1px solid var(--role-line); }
.site-footer__fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-3);
  margin-bottom: 0;
  min-height: 44px;
}
.site-footer__fold > summary::-webkit-details-marker { display: none; }
.site-footer__fold > summary::after {
  content: "";
  inline-size: .6em; block-size: .6em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translate(-.15em, -.15em);
  transition: transform var(--dur-1, .15s) var(--ease, ease);
  flex: none;
}
.site-footer__fold[open] > summary::after { transform: rotate(-135deg) translate(-.15em, -.15em); }
.site-footer__fold > ul, .site-footer__fold > dl { padding-block-end: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
  .site-footer__fold > summary::after { transition: none; }
}
@media (min-width: 600px) {
  /* この幅からは複数カラムなので、畳まず見出しとして出す */
  .site-footer__fold { border-top: 0; }
  .site-footer__fold > summary { cursor: default; padding-block: 0; margin-bottom: var(--sp-3); min-height: 0; }
  .site-footer__fold > summary::after { display: none; }
  .site-footer__fold > ul, .site-footer__fold > dl { padding-block-end: 0; }
}

/* 予約とアクセスは畳まない列に置く（常時表示） */
.site-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-block: var(--sp-3) var(--sp-2) !important; }
.site-footer__actions .btn { text-decoration: none; }
.btn--sm { min-height: 40px; padding-block: var(--sp-2); font-size: var(--fs-small); }

.site-footer__bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--role-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.site-footer__copy { margin: 0; color: var(--role-muted); }

/* C-23 external icon */
.ext-icon { margin-inline-start: var(--sp-1); }

/* C-25 inline */
.price { display: inline; font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-num); line-height: var(--lh-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.price, .price-group { white-space: nowrap; }   /* 金額の途中（数字と「円」、「円」と「〜」）で折り返さない */
.price__unit { font-family: var(--ff-body); font-size: var(--fs-body); font-weight: 700; }
.price--badge { color: var(--c-price-fg); background-color: var(--c-price-bg); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-s); font-family: var(--ff-body); }
.tag { display: inline-block; color: var(--c-navy); background-color: var(--c-navy-tint); font-size: var(--fs-small); padding: 2px var(--sp-2); border-radius: var(--radius-s); }
.key-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; }
.key-facts li { color: var(--c-navy); background-color: var(--c-navy-tint); font-size: var(--fs-body); padding: 2px var(--sp-2); border-radius: var(--radius-s); }
.notes { font-size: var(--fs-body); }
.updated { font-size: var(--fs-small); }
.aside { font-size: var(--fs-small); margin: 0; }
[data-open-q] { /* 未確定値マーカー。見た目は変えない */ }

/* C-26 quick-nav */
.quick-nav { border-bottom: 1px solid var(--role-line); }
.quick-nav__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.5em), 1fr)); gap: var(--sp-1); }
.quick-nav__list a { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--fs-body); font-weight: 700; color: var(--c-navy); }
.quick-nav__list a:hover, .quick-nav__list a:focus-visible { background-color: var(--c-mist); text-decoration: underline; }
@media (min-width: 1024px) { .quick-nav { display: none; } }

/* C-27 list-grid */
.list-grid { --list-min: 9rem; display: grid; gap: var(--sp-2) var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(var(--list-min), 100%), 1fr)); }
.list-grid--3 { max-width: 32rem; }
.list-grid--4 { max-width: 42rem; }
.list-grid--2 { --list-min: 12rem; max-width: 26rem; }
.list-grid li { font-size: var(--fs-body); padding-block: var(--sp-1); }

/* C-28 media-inline */
.media-inline { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.media-inline__media { flex: 0 0 auto; max-width: min(100%, 275px); height: auto; border-radius: var(--radius-s); }
.media-inline--wide .media-inline__media { max-width: min(100%, 440px); }
.media-inline--xwide .media-inline__media { max-width: min(100%, 560px); }

/* C-28b 館内施設の行。実写真を主役にする。
   🔴 原本が 213x142px しかないため、上限は 340px に留めている。
      480〜600px で出すと 2.3〜2.8倍の拡大になり明確にボケる。
      それ以上大きくするにはホテルから大きい原本をいただく必要がある。
   aspect-ratio を置いて読み込み中のレイアウト移動を防ぐ。 */
.facility-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.facility-row__media {
  flex: 1 1 260px;
  inline-size: 100%;
  max-inline-size: min(100%, 340px);
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-s);
}
.facility-row__body { flex: 1 1 var(--measure-min); min-width: 0; }
@media (max-width: 599px) {
  /* 狭い画面は 写真 → 見出し → 説明 の素直な1カラム */
  .facility-row { gap: var(--sp-4); }
  .facility-row__media { max-inline-size: 100%; flex-basis: 100%; }
}
.media-inline--parking .media-inline__media { max-width: min(100%, 340px); }
.media-inline__body { flex: 1 1 var(--measure-min); min-width: 0; }

.access-map-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; }
.access-map-row .embed { flex: 1 1 min(100%, 480px); max-width: 680px; }
.access-map-row__body { flex: 1 1 var(--measure-min); min-width: 0; }

.route-photos, .food-detail-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.route-photos img, .food-detail-row img { max-width: min(100%, 160px); height: auto; border-radius: var(--radius-s); }

/* C-32 food-grid/food-card (白カード、写真128px) */
.food-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); }
@media (min-width: 600px) { .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.food-card { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; padding: var(--card-pad); border: 1px solid var(--role-line); border-radius: var(--radius-m); }
.food-card__media { flex: 0 0 auto; max-width: min(100%, 128px); height: auto; border-radius: var(--radius-s); }
.food-card__body { flex: 1 1 var(--measure-min); min-width: 0; }
.food-card__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.food-card__time { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--role-caption); }

/* bullet-list */
.bullet-list { list-style: disc; padding-inline-start: 1.25em; }
.bullet-list li { font-size: var(--fs-body); margin-block: var(--sp-1); }

/* decorative divider */
.decor-divider { height: 32px; background-size: cover; background-position: center; }
.decor-divider--paper { background-image: url('../img/decorative-paper-768.webp'); }

/* split (C-29 index 朝食) */
.split-outer { container-type: inline-size; }
.split { display: flex; flex-direction: column; gap: var(--sp-5); }
.split__media img { width: 100%; max-width: 560px; height: auto; border-radius: var(--radius-s); }
@container (min-width: 37.5em) {
  .split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
    grid-template-areas: "media head" "media body";
    align-items: start;
  }
  .split__head { grid-area: head; }
  .split__media { grid-area: media; }
  .split__body { grid-area: body; }
}

/* 道順・駐車場 (access) */
.access-parking-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: flex-start; }
.access-parking-row img { max-width: min(100%, 340px); height: auto; border-radius: var(--radius-s); flex-shrink: 0; }
.access-parking-row__body { flex: 1 1 var(--measure-min); min-width: 0; }

/* C-31 souvenir-grid/place-list */
.souvenir-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) { .souvenir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.souvenir-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.souvenir-card__title { font-size: var(--fs-h3); margin: 0; }
.souvenir-card__media { max-width: min(100%, 240px); height: auto; border-radius: var(--radius-s); }
.souvenir-card__text { margin: 0; }
.souvenir-card__spec { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; }
.souvenir-card__spec > div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--sp-3); }
.souvenir-card__spec dd { margin: 0; }
.souvenir-card__link { margin: 0; }
.souvenir-card__link a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 700; }

.place-list { display: grid; gap: var(--sp-4); grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 600px) { .place-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.place { padding-block: var(--sp-4); border-bottom: 1px solid var(--role-line); }
.place-list > .place:last-child { border-bottom: 0; }
.place--card { padding: var(--card-pad); border: 1px solid var(--role-line); border-radius: var(--radius-m); }
.place__title { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.place__addr { font-size: var(--fs-body); margin: 0 0 var(--sp-2); }
.place__link { margin: 0; }
.place__link a { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 700; }

/* morning: 全体写真 */
.morning-figure { margin: 0 0 var(--sp-6); }
.morning-hero-img { max-width: min(100%, 880px); width: 100%; height: auto; border-radius: var(--radius-s); }

/* C-31 ページ先頭へ戻る (右下・少しスクロールしてから出す)
   JS 無効時は常時表示のただのページ内リンクとして働く (D-14 と同じ考え方)。
   2026-09-23 改（高橋さん指示「もう少しおしゃれに」「下部の予約・電話が隠れる」）:
   ・紺の円に矢印と小さな「TOP」。外周の金の細い輪がページの読み進み具合を示す（ロゴの金）
   ・予約帯・フッターが下から来たら、その上端の少し上に「停まって」一緒に上がる（site.js §5 が
     --to-top-lift を入れる）。予約ボタン・電話番号・リンクの上には重ならない。
     上がる余地が無くなったら消える（scripts/verify_ui.py U8 で全ページ・2幅を確かめる） */
.to-top {
  position: fixed;
  inset-inline-end: var(--sp-3);
  bottom: calc(var(--sticky-h-real, var(--sticky-h)) + var(--sp-3));
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: rgb(30 58 95 / .94);   /* --c-navy */
  color: var(--c-white);
  text-decoration: none;
  box-shadow: 0 6px 18px rgb(18 32 52 / .26), 0 1px 3px rgb(0 0 0 / .16);
  transform: translateY(calc(-1 * var(--to-top-lift, 0px)));
}
.to-top .icon { align-self: center; inline-size: 18px; block-size: 18px; margin-block-start: 2px; transition: translate var(--dur-1) var(--ease); }   /* base.css の svg{align-self:flex-start} を戻す */
.to-top__label {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
  padding-inline-start: .18em;   /* 字間の分だけ右へ寄って見えるのを戻す */
}
.to-top__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; rotate: -90deg; pointer-events: none; overflow: visible; }
.to-top__ring circle { fill: none; stroke-width: 1.5; }
.to-top__track { stroke: rgb(255 255 255 / .2); }
.to-top__progress {
  stroke: #C99A4E;   /* 紺の上で見える明るさにしたロゴの金 */
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--to-top-progress, 0) * 100);
}
.to-top:hover { background: var(--c-navy-hover); }
.to-top:hover .icon { translate: 0 -2px; }
/* JS があるときだけ「少しスクロールしたら出す」挙動にする */
html.js .to-top {
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity var(--dur-1) var(--ease), translate var(--dur-1) var(--ease), visibility 0s linear var(--dur-1), background-color var(--dur-1) var(--ease);
}
html.js .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
@media (min-width: 1024px) {
  /* この幅では sticky-cta が display:none なので、下端からの距離だけでよい */
  .to-top { bottom: var(--sp-5); inset-inline-end: var(--sp-5); inline-size: 56px; block-size: 56px; }
  .to-top .icon { inline-size: 20px; block-size: 20px; }
  .to-top__label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .to-top { transition: opacity var(--dur-1) var(--ease), visibility 0s linear var(--dur-1); translate: none; }
  html.js .to-top.is-visible { translate: none; }
  .to-top:hover .icon { translate: none; }
}

/* C-32 スクロールに合わせたフェードイン
   .reveal は JS だけが付ける。JS 無効・IntersectionObserver 非対応・
   prefers-reduced-motion: reduce のときは一切付かない = 中身が消えない。 */
.reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .6s var(--ease), translate .6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  translate: 0 0;
}
@media print {
  /* 印刷では必ず出す。IntersectionObserver は印刷時に働かないので、
     これが無いと未到達の要素が白紙で刷られる。 */
  .reveal { opacity: 1 !important; translate: none !important; }
  .to-top { display: none; }
}

/* C-33 パネル背景のイラスト（2026-09-23 第5版）

   「右下に置いた小さな挿絵」をやめ、面（セクション）の背景に大きく薄く溶け込ませる。

   構造
     .has-art（面）
       ├ .panel-art-zone … 装飾レイヤー。面の四辺ちょうど（inset:0）で、ここで絵を切り抜く。
       │                    面そのものには overflow を付けない（中のリンクの
       │                    フォーカスリングが切れる = DESIGN R5-3）。
       │   └ .panel-art … 絵。大きさ・位置・切り抜き・マスクは site.js §9 が面ごとに決める
       └ .container … 本文。z-index:1 で装飾より前
     → 絵は面の外へ 1px も出ない。前後の面にも、横スクロールにもならない。

   置き方（site.js §9）
     ・面の中の字・写真・表・ボタン・枠のある箱をすべて避けた「空いている最大の四角」を、
       表示のたびに実測して探す（画面幅別・面別の固定値を持たない）
     ・その四角いっぱいに絵を拡大し、面の端に接する側は大胆に切り落とす。
       本文に向いた側はマスクで余白へ消していく
     ・直前の面と同じ角（特に右下）が続く場合は、次点の空きを使う
     ・写真が多い面は控えめに、写真が面の大半なら出さない
     ・空きが小さすぎる幅（主にスマホ）では出さない。絵のために余白は足さない
     ・濃さ・合成・彩度・焦点は絵ごとの値（data-art-*。optimize_illustrations.py が
       絵の濃さと重心から出す）に、役割（主役/標準/補助）と写真の量を掛けて決める

   🔴 描画順
     .has-art は isolation:isolate で重なりの層を作る。z-index:-1 の装飾レイヤーは
     「その層の中で一番下」= 面の背景色の上・本文の下に描かれる。
   🔴 合成(multiply/darken)は装飾レイヤーで行う。isolation の層は透明な下地から
     描くので、背景色を持たない面では相手が無く白い紙が四角く残る。
     :where(.has-art) で地色を持たせてある（詳細度0。.section--band などには負ける）。
   ・JS が無いときは装飾を出さない（配置を計算できないため。装飾なので情報は欠けない） */
.has-art { position: relative; isolation: isolate; }
:where(.has-art) { background-color: var(--c-paper); }
.has-art > .container,
.has-art > .container--narrow { position: relative; z-index: 1; }
/* 流し込みの面（.section--flow）は上の間隔を margin で取っていた。margin は面の外なので、
   装飾レイヤーから見ると見出しの真上で面が終わっていた。同じ量を padding に移し、
   見た目の間隔は変えずに、その余白を面の内側（＝絵を敷ける場所）にする。
   地色は同じなので境目は見えない。絵のために余白を足しているわけではない。 */
.section--flow.has-art { margin-block-start: 0; padding-block-start: var(--sec-gap); }
.faq + .faq.has-art { margin-block-start: 0; padding-block-start: var(--sp-6); }   /* FAQ 同士の間隔を保つ */

.panel-art-zone {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  overflow: hidden;                  /* 面の四辺で切り抜く。中はフォーカスできない img だけ */
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;          /* site.js が絵ごとに multiply / darken を選ぶ */
  opacity: 0;
  transition: opacity .7s var(--ease);
}
html.js .panel-art-zone.is-placed { display: block; }
.panel-art {
  position: absolute;
  max-inline-size: none;
  object-fit: cover;                 /* 位置・大きさ・切り抜き・マスクは site.js §9 */
}
@media (prefers-reduced-motion: reduce) {
  .panel-art-zone { transition: none; }
}

@media (prefers-contrast: more) {
  /* 高コントラストを求める人には装飾を出さない */
  .panel-art { display: none; }
}

@media print {
  .panel-art { display: none; }
}