/* ============================================================
   コスモアイル羽咋 貸館・ホールサイト — hall.css
   ------------------------------------------------------------
   /hall/ 配下のページ専用。site.css は読み込まない。
   配色は「客席の深紅 × 温かい紙色」。本館（紺の夜空）とは色相を変え、ロゴの金だけを共有する。
   構成:
     1. トークン   2. リセット   3. 共通部品（ボタン・見出し・表）
     4. ヘッダー / フッター   5. トップ   6. 空き表   7. 下層ページ
     8. 予約ページ   9. フォーム   10. レスポンシブ
   ============================================================ */

/* ------------------------------------------------------------
   1. トークン
   ------------------------------------------------------------ */
:root {
  /* 貸館の配色: 客席と緞帳の深紅 × 温かい紙色。本館（紺の夜空）とは色相を変え、ロゴの金だけを共有する */
  --ground: #F6F1EE;
  --surface: #FFFFFF;
  --surface-2: #F0E7E4;
  --ink: #2B1B20;
  --ink-2: #5F4A51;
  --ink-3: #8F7B82;
  --line: #E6DBDA;
  --line-2: #CDBBBE;
  --stage: #4E1B28;
  --stage-2: #36111B;
  --stage-ink: #F7EEEA;
  --stage-mute: #C9AEB4;
  --gold: #D9AD35;
  --gold-hi: #F0C040;
  --gold-ink: #866312;
  --gold-soft: rgba(217, 173, 53, .16);
  --navy: #0F1F3D;
  --navy-2: #0B1730;
  --navy-ink: #F0F4FF;
  --navy-mute: #A8B4CC;
  --ok: #1D8A5C;
  --ok-soft: rgba(29, 138, 92, .10);
  --amber: #B7791F;
  --amber-soft: rgba(183, 121, 31, .12);
  --taken: #A39096;
  --closed: #EFE7E5;
  --hatch: #D6C7C8;
  --red: #B93A3A;
  --blue: #2C5DB5;
  --shadow: 0 14px 34px rgba(43, 27, 32, .12);
  /* 書体: 見出し＝明朝（大きいサイズのみ）／本文・UI＝Noto Sans JP／数字・英字＝IBM Plex Sans（見やすさ重視） */
  --font-display: 'Shippori Mincho B1', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-body: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Sans', 'Noto Sans JP', system-ui, sans-serif;
  --wrap: 76rem;
  --hd-top: 4.9rem;   /* ヘッダー1段目（ロゴ行）の高さ */
  --hd-h: 3.65rem;    /* スクロール時に上部へ固定される高さ（ナビ行 3.5rem＋金ライン） */
}

/* ------------------------------------------------------------
   2. リセット
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hd-h) + 1rem); }
body { margin: 0; color: var(--ink); background: var(--ground); font-family: var(--font-body); font-size: 15px; line-height: 1.85; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold); color: var(--stage-2); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 1rem; background: var(--gold); color: var(--stage-2); padding: .5rem 1rem; border-radius: 4px; font-weight: 700; z-index: 100; }
.skip-link:focus { left: 1rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(1rem, 3.2vw, 2.25rem); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.kicker { font-family: var(--font-num); font-weight: 600; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink); }
.disp { font-family: var(--font-display); font-feature-settings: "palt"; letter-spacing: .06em; }

/* ------------------------------------------------------------
   3. 共通部品
   ------------------------------------------------------------ */
/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.9rem; padding: .6rem 1.4rem; border-radius: 4px; font-weight: 700; font-size: .92rem; line-height: 1.2; letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s; }
.btn svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn--gold { background: var(--gold); color: var(--stage-2); box-shadow: 0 2px 0 rgba(134, 99, 18, .35), 0 6px 16px rgba(217, 173, 53, .25); }
.btn--gold:hover { background: var(--gold-hi); box-shadow: 0 2px 0 rgba(134, 99, 18, .35), 0 8px 20px rgba(217, 173, 53, .35); }
.btn--navy { background: var(--stage); color: var(--stage-ink); }
.btn--navy:hover { background: var(--stage-2); }
/* 外部リンクの目印も上向きシェブロン（キット v0.14.2）。以前の border-top+border-right は
   描画すると「⌐」＝シェブロンを 45 度倒した形になり、施主指示「斜めの記号は使わない」に反する。
   rotate(-45deg) は動きではなく形そのものなので、hover 側にも必ず併記する。 */
.btn--ext::after { content: ""; display: inline-block; flex: 0 0 auto; width: .45em; height: .45em; border-style: solid; border-color: currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); margin-left: .1em; transition: transform .2s; }
.btn--ext:hover::after, .btn--ext:focus-visible::after { transform: translateX(2px) rotate(-45deg); }
.btn--line { border-color: var(--line-2); color: var(--ink); background: var(--surface); }
.btn--line:hover { border-color: var(--ink); background: var(--surface); }
.btn--white { border-color: rgba(255, 255, 255, .7); color: #fff; }
.btn--white:hover { background: rgba(255, 255, 255, .14); }
.btn--lg { min-height: 3.4rem; padding: .8rem 1.9rem; font-size: 1rem; }
.btn--sm { min-height: 2.25rem; padding: .35rem .9rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn--danger { border-color: rgba(185, 58, 58, .4); color: var(--red); background: var(--surface); }
.btn--danger:hover { border-color: var(--red); }
.ctas { display: flex; flex-wrap: wrap; gap: .8rem; }

/* セクション見出し */
.sec { padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.sec--tint { background: var(--surface); border-block: 1px solid var(--line); }
.sec__head { display: grid; gap: .5rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); max-width: 50rem; }
.sec__title { font-family: var(--font-display); font-feature-settings: "palt"; font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.35; letter-spacing: .06em; text-wrap: balance; }
.sec__title::after { content: ""; display: block; width: 2.75rem; height: 2px; background: var(--gold); margin-top: .9rem; }
.sec__lead { color: var(--ink-2); font-size: .95rem; max-width: 42em; }
.sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; max-width: none; flex-wrap: wrap; }
.more { font-size: .88rem; font-weight: 700; color: var(--gold-ink); white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.more:hover { color: var(--ink); }
/* 矢印記号は使わず、細いシェブロンを CSS で描く */
.chev, .more::after, .result-card li a::after { content: ""; display: inline-block; width: .5em; height: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex: 0 0 auto; }
.more::after { margin-top: .05em; }
.result-card li a::after { margin-left: .35em; vertical-align: .1em; }
.sub { display: grid; gap: 1rem; }
.sub__title { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; padding-bottom: .55rem; border-bottom: 1px solid var(--line-2); display: flex; align-items: baseline; gap: .8rem; }
.sub__title .kicker { font-size: .72rem; }
.stack { display: grid; gap: clamp(2.2rem, 4.5vw, 3.4rem); }

/* 表 */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 34rem; }
.tbl th, .tbl td { padding: .75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { background: var(--surface-2); font-size: .78rem; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--ground); }
.tbl td.n, .tbl th.n { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.n { font-weight: 500; font-size: .95rem; }
.tbl td.sub { padding-left: 2.2rem; color: var(--ink-2); }
.tbl td.paren { color: var(--ink-3); font-weight: 400; }
/* セルの中に添える注記（「※現在使用できません」「（1日あたり）」など）。
   上の .paren はセル自体に付ける用（td 限定）なので、インラインには効かない。 */
.tbl td .paren { color: var(--ink-3); font-weight: 400; font-size: .88em; }
.tbl-note { font-size: .8rem; color: var(--ink-2); margin-top: .7rem; }
.tbl-title { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .9rem; }
.tbl-title h2, .tbl-title h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; }
.tbl-title small { font-size: .76rem; color: var(--ink-3); }

/* 資料タイル */
.docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.doc { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; transition: border-color .15s, transform .15s; }
.doc:hover { border-color: var(--gold); transform: translateY(-2px); }
.doc svg { width: 1.6rem; height: 1.6rem; color: var(--gold-ink); margin-top: .1rem; }
.doc b { display: block; font-size: .92rem; }
.doc span { display: block; font-size: .74rem; color: var(--ink-3); margin-top: .2rem; }
.doc .fmt { display: inline-block; font-family: var(--font-num); font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); border: 1px solid var(--line-2); padding: 0 .4rem; border-radius: 2px; margin-top: .45rem; }

/* 注記・囲み */
.callout { border-left: 3px solid var(--gold); background: var(--surface); padding: 1.1rem 1.3rem; font-size: .9rem; color: var(--ink-2); }
.callout b { color: var(--ink); }
.callout--red { border-left-color: var(--red); }
.grant { border: 1px solid var(--gold); background: var(--gold-soft); border-radius: 4px; padding: 1.3rem 1.5rem; font-size: .88rem; color: var(--ink-2); display: grid; gap: .65rem; }
.grant h3 { color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.grant ul { display: grid; gap: .2rem; }
.grant ul li::before { content: "—"; margin-right: .45rem; color: var(--gold-ink); }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tags span { font-size: .8rem; padding: .38rem .85rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.badges { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; }
.badges span { font-size: .76rem; padding: .3rem .75rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.badges span.is-gold { border-color: var(--gold); color: var(--gold-ink); background: var(--gold-soft); font-weight: 700; }

/* FAQ（全幅・回答は常に表示。左に質問、右に回答の2カラム） */
.faq { border-top: 1px solid var(--line-2); }
.qa { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .5rem 2.5rem; padding: 1.15rem .25rem; border-bottom: 1px solid var(--line); align-items: start; }
.qa__q, .qa__a { display: grid; grid-template-columns: 1.7rem 1fr; gap: .5rem; align-items: baseline; margin: 0; }
.qa__q { font-weight: 700; font-size: 1rem; color: var(--ink); }
.qa__q::before { content: "Q"; font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; color: var(--gold-ink); }
.qa__a { font-size: .92rem; color: var(--ink-2); line-height: 1.8; }
.qa__a::before { content: "A"; font-family: var(--font-num); font-weight: 700; font-size: 1.1rem; color: var(--stage); }

/* ------------------------------------------------------------
   4. ヘッダー / フッター
   ------------------------------------------------------------ */
.util { background: var(--stage-2); color: var(--stage-mute); font-size: .76rem; }
.util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.15rem; }
.util a { color: var(--stage-ink); display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.util a svg { width: .8rem; height: .8rem; flex: 0 0 auto; }
.util__tel { white-space: nowrap; }
.util__tel b { color: var(--gold-hi); font-weight: 600; font-family: var(--font-num); font-size: .95rem; letter-spacing: .03em; margin-left: .35rem; }

/* 1段目（ロゴ行）は上へ隠れ、2段目（ナビ行）だけが固定される。負の top がその仕掛け */
.hd { position: sticky; top: calc(-1 * var(--hd-top)); z-index: 20; background: var(--stage); color: var(--stage-ink); box-shadow: 0 6px 24px rgba(54, 17, 27, .25); }
.hd::after { content: ""; display: block; height: 2px; background: var(--gold); }
.hd__top { display: flex; align-items: center; gap: 1.25rem; min-height: var(--hd-top); }
.brand { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; }
.brand img { width: 200px; height: auto; }
.brand__sep { width: 1px; height: 2.4rem; background: rgba(255, 255, 255, .28); }
.brand__name { font-family: var(--font-display); font-feature-settings: "palt"; font-size: 1.35rem; font-weight: 600; letter-spacing: .1em; line-height: 1.1; white-space: nowrap; color: var(--stage-ink); }
.brand__en { display: block; font-family: var(--font-num); font-weight: 500; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--stage-mute); margin-top: .3rem; }
.hd__cta { margin-left: auto; }
/* ナビ行: 7項目を等幅のセルに並べ、縦の区切り線で境界をはっきりさせる */
.nav { border-top: 1px solid rgba(255, 255, 255, .14); }
.nav__inner { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; min-height: 3.5rem; }
.nav__link:nth-child(7) { border-right: 1px solid rgba(255, 255, 255, .2); }  /* 閉じの線はセルの右端に（容器の余白の外に出さない） */
.nav__link { display: flex; align-items: center; justify-content: center; text-align: center; padding: .9rem .5rem; font-size: .92rem; font-weight: 500; color: var(--stage-ink); position: relative; white-space: nowrap; border-left: 1px solid rgba(255, 255, 255, .2); transition: background .15s, color .15s; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold-hi); transform: scaleY(0); transform-origin: bottom; transition: transform .15s ease; }
.nav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav__link.is-here { color: #fff; font-weight: 700; background: rgba(0, 0, 0, .18); }
.nav__link:hover::after, .nav__link.is-here::after { transform: scaleY(1); }
.nav__cta { display: none; }
.menu-btn { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; color: var(--stage-ink); }
.menu-btn svg { width: 1.25rem; height: 1.25rem; margin: auto; }
.menu-btn .i-close { display: none; }
.hd.is-open .menu-btn .i-menu { display: none; }
.hd.is-open .menu-btn .i-close { display: block; }

.ft { background: var(--stage-2); color: var(--stage-mute); font-size: .82rem; border-top: 3px solid var(--gold); }
.ft .wrap { padding-block: 3.2rem 1.6rem; }
.ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.ft__brand img { width: 200px; margin-bottom: 1rem; }
.ft__brand p { line-height: 1.8; }
.ft h2 { color: var(--stage-ink); font-size: .9rem; font-weight: 700; letter-spacing: .1em; margin-bottom: .7rem; }
.ft li { margin-bottom: .35rem; }
.ft a:hover { color: #fff; }
.ft__bottom { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.6rem; padding-top: 1.2rem; font-size: .76rem; }

/* ------------------------------------------------------------
   5. トップ
   ------------------------------------------------------------ */
.hero { position: relative; min-height: clamp(32rem, 70vh, 44rem); display: grid; align-items: center; color: #fff; overflow: hidden; background: #1A0B10; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(26, 11, 16, .82) 0%, rgba(26, 11, 16, .55) 38%, rgba(26, 11, 16, .1) 100%),
  linear-gradient(0deg, rgba(26, 11, 16, .8) 0%, rgba(26, 11, 16, .2) 40%, rgba(26, 11, 16, 0) 100%); }
.hero .wrap { position: relative; width: 100%; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(5rem, 9vw, 7rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.hero__vert { writing-mode: vertical-rl; font-family: var(--font-display); font-feature-settings: "palt"; font-size: .92rem; letter-spacing: .3em; color: rgba(255, 255, 255, .85); border-left: 1px solid rgba(255, 255, 255, .35); padding-left: .8rem; height: 21rem; margin-top: .4rem; white-space: nowrap; }
.hero__eyebrow { font-family: var(--font-num); font-weight: 600; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: .9rem; }
/* 見出しは「石川・能登の公共ホール」の1行。名乗りなので大きく叫ばず、字間を広めにとって落ち着かせる */
.hero__title { font-family: var(--font-display); font-feature-settings: "palt"; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.35; letter-spacing: .14em; text-wrap: balance; max-width: 15em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero__lead { max-width: 33em; margin-top: 1.3rem; font-size: clamp(.92rem, 1.2vw, 1.02rem); line-height: 2; color: rgba(255, 255, 255, .92); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__cap { position: absolute; right: 1.5rem; bottom: 4.2rem; font-size: .72rem; color: rgba(255, 255, 255, .7); letter-spacing: .06em; }

.hindex { position: relative; z-index: 2; margin-top: -3.4rem; }
.hindex__box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 4px; overflow: hidden; }
.hindex a { padding: 1.1rem 1.25rem 1rem; border-right: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .15rem .6rem; transition: background .15s; min-width: 0; }
.hindex a:last-child { border-right: 0; }
.hindex a:hover { background: var(--surface-2); }
.hindex b { grid-column: 1; grid-row: 1; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hindex small { grid-column: 1; grid-row: 2; font-size: .74rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hindex .chev { grid-column: 2; grid-row: 1 / 3; width: .7rem; height: .7rem; border-width: 2px; color: var(--gold-ink); }

.avail { background: var(--surface); border-bottom: 1px solid var(--line); }
.avail .wrap { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.2rem, 4vw, 3rem); }
.avail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.avail__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.avail__note { font-size: .76rem; color: var(--ink-3); margin-top: .8rem; }

.facs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 3rem); }
.fac { display: grid; gap: .9rem; }
.fac__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.fac__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.fac:hover .fac__img img { transform: scale(1.035); }
.fac__tag { position: absolute; left: .8rem; top: .8rem; background: rgba(78, 27, 40, .9); color: #fff; font-size: .7rem; letter-spacing: .1em; padding: .25rem .65rem; border-radius: 2px; }
.fac__note { position: absolute; right: .6rem; bottom: .5rem; font-size: .64rem; color: rgba(255, 255, 255, .85); background: rgba(26, 11, 16, .55); padding: .1rem .45rem; border-radius: 2px; letter-spacing: .04em; }
.fac__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
.fac__name { font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.fac__name small { font-family: var(--font-num); font-size: .74rem; font-weight: 500; color: var(--ink-3); margin-left: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.fac__cap { font-family: var(--font-num); font-size: 1.6rem; font-weight: 600; color: var(--ink); white-space: nowrap; line-height: 1; }
.fac__cap small { font-family: var(--font-body); font-size: .74rem; color: var(--ink-3); font-weight: 400; margin-left: .2rem; }
.fac__spec { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .82rem; color: var(--ink-2); }
.fac__spec li::before { content: ""; display: inline-block; width: .35rem; height: .35rem; border-radius: 50%; background: var(--gold); margin-right: .45rem; vertical-align: .15em; }
.fac__desc { font-size: .9rem; color: var(--ink-2); }
.fac__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fac__price { font-size: .8rem; color: var(--ink-2); }
.fac__price b { font-family: var(--font-num); font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.uses a { display: grid; gap: .1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 4px; background: var(--ground); font-size: .9rem; font-weight: 500; transition: border-color .15s; }
.uses a:hover { border-color: var(--gold); }
.uses a small { color: var(--ink-3); font-size: .74rem; font-weight: 400; }

/* ご利用の流れ（順序のある手順なので番号を使う） */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.4rem; position: relative; counter-reset: step; }
.flow::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 1px; background: var(--line-2); }
.flow > li { position: relative; padding-top: 3.9rem; }
.flow > li::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--font-num); font-size: 1.15rem; font-weight: 600; line-height: 1; color: var(--ink); }
.flow > li:first-child::before { background: var(--stage); color: var(--gold-hi); border-color: var(--stage); }
.flow__when { display: inline-block; font-size: .7rem; letter-spacing: .04em; color: var(--gold-ink); background: var(--gold-soft); padding: .15rem .55rem; border-radius: 2px; margin-bottom: .5rem; }
.flow__title { font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; margin-bottom: .4rem; }
.flow__body { font-size: .84rem; color: var(--ink-2); line-height: 1.75; }

.xlink { background: var(--navy); color: var(--navy-ink); }
.xlink .wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2.2rem, 4.5vw, 3.5rem); }
.xlink__img { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; }
.xlink__img img { width: 100%; height: 100%; object-fit: cover; }
.xlink .kicker { color: var(--gold-hi); }
.xlink__title { font-family: var(--font-display); font-feature-settings: "palt"; font-weight: 600; font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: .06em; margin: .5rem 0 .9rem; text-wrap: balance; }
.xlink__text { color: var(--navy-mute); font-size: .9rem; max-width: 34em; }
.xlink__meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: .4rem 1.8rem; font-size: .76rem; color: var(--navy-mute); margin-top: 1.2rem; }
.xlink__meta b { display: block; color: var(--navy-ink); font-weight: 500; font-size: .95rem; }

/* ------------------------------------------------------------
   6. 空き表（○×・午前/午後/夜間を縦に並べる）
   ------------------------------------------------------------ */
/* 表は枠内でスクロールさせない（ページに全体を載せる）。日付の見出し行はページのスクロールに追従して固定 */
.grid-wrap { overflow: visible; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.grid { --facw: 12.75rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; width: 100%; font-size: .86rem; }
.grid th, .grid td { border-bottom: 1px solid var(--line); padding: 0; height: 2.2rem; text-align: center; vertical-align: middle; }
.grid--lg th, .grid--lg td { height: 2.7rem; }
.grid thead th { background: var(--surface-2); height: 3.5rem; font-weight: 500; line-height: 1.15; position: sticky; top: var(--hd-h); z-index: 3; }
.grid thead th b { display: block; font-family: var(--font-num); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.grid thead th span { font-size: .72rem; color: var(--ink-3); }
.grid thead th.is-sat b { color: var(--blue); }
.grid thead th.is-sun b, .grid thead th.is-hol b { color: var(--red); }
.grid thead th.is-closed b { color: var(--ink-3); }
.grid thead th.is-closed span { color: var(--red); font-weight: 700; }
.grid thead th.is-today b { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25rem; text-decoration-thickness: 2px; }
.grid th.gfac { z-index: 2; width: var(--facw); min-width: var(--facw); text-align: left; padding: .4rem .8rem; background: var(--surface); border-right: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.grid th.gfac b { display: block; font-weight: 700; font-size: .95rem; letter-spacing: .02em; line-height: 1.3; }
.grid th.gfac small { display: block; font-size: .72rem; color: var(--ink-3); margin-top: .1rem; font-weight: 400; }
.grid th.gfac em { display: inline-block; font-style: normal; font-size: .7rem; color: var(--ok); background: var(--ok-soft); padding: 0 .45rem; border-radius: 999px; margin-top: .3rem; font-family: var(--font-num); font-weight: 600; }
.grid th.slot { z-index: 2; width: 3.9rem; min-width: 3.9rem; text-align: left; padding: 0 .55rem; background: var(--surface); border-right: 1px solid var(--line); font-weight: 500; color: var(--ink-2); font-size: .82rem; line-height: 1.15; white-space: nowrap; overflow: hidden; }
/* 区分は「午前」の下に時間帯を小さく2段で置く（横に並べると列幅からはみ出す） */
.grid th.slot small { display: block; color: var(--ink-3); margin: .15rem 0 0; font-family: var(--font-num); font-size: .7rem; letter-spacing: 0; }
.grid thead th.gfac, .grid thead th.slot { z-index: 4; background: var(--surface-2); text-align: left; font-size: .74rem; color: var(--ink-3); }
.grid tr.first th, .grid tr.first td { border-top: 2px solid var(--line-2); }
.grid thead + tbody tr.first th, .grid thead + tbody tr.first td { border-top: 0; }
.grid td.is-closed { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, var(--closed) 1px 7px); }
.grid td.is-out { background: var(--ground); }
.grid td.is-sel { background: var(--gold-soft); }
.grid td.is-today { box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
.mark { display: inline-grid; place-items: center; width: 100%; height: 100%; min-height: 2.2rem; }
.grid--lg .mark { min-height: 2.7rem; }
button.mark { transition: background .12s; }
button.mark:hover { background: var(--ok-soft); }
.mark i { display: block; }
.mark--o i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--ok); }
.mark--tel i { width: 1rem; height: 1rem; border-radius: 50%; border: 2px dashed var(--ink-3); }
.mark--t i, .mark--tt i { width: .95rem; height: .95rem; position: relative; }
.mark--t i::before, .mark--t i::after, .mark--tt i::before, .mark--tt i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 2px; background: var(--taken); transform: translate(-50%, -50%) rotate(45deg); }
.mark--t i::after, .mark--tt i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mark--tt i::before, .mark--tt i::after { background: var(--amber); }
.mark--n i { width: .7rem; height: 2px; background: var(--line-2); }
.mark--s i { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--gold); position: relative; }
.mark--s i::after { content: ""; position: absolute; left: .4rem; top: .22rem; width: .3rem; height: .58rem; border: solid var(--stage-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mark small { display: block; font-family: var(--font-num); font-size: .62rem; color: var(--ink-3); line-height: 1; margin-top: .15rem; }
button.mark--t, button.mark--tt, button.mark--n, button.mark--tel { cursor: not-allowed; }
button.mark--t:hover, button.mark--tt:hover, button.mark--n:hover, button.mark--tel:hover { background: none; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .76rem; color: var(--ink-2); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.legend .mark { width: auto; height: auto; min-height: 0; }
.legend .swatch { width: 1.4rem; height: 1rem; border-radius: 2px; border: 1px solid var(--line); }
.grid-msg { padding: 2.5rem 1rem; text-align: center; color: var(--ink-3); font-size: .9rem; }
.grid-msg--err { color: var(--red); }

.weekbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .9rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-bottom: 0; border-radius: 4px 4px 0 0; }
.weekbar__nav { width: 2.4rem; height: 2.4rem; border: 1px solid var(--line-2); border-radius: 4px; display: grid; place-items: center; background: var(--surface); }
.weekbar__nav:hover { border-color: var(--ink); }
.weekbar__nav[disabled] { opacity: .35; cursor: not-allowed; }
.weekbar__nav svg { width: 1rem; height: 1rem; }
.weekbar__range { font-family: var(--font-num); font-size: 1.3rem; font-weight: 600; letter-spacing: .01em; margin-inline: .2rem; white-space: nowrap; }
.weekbar__range small { font-family: var(--font-body); font-size: .76rem; color: var(--ink-3); font-weight: 400; margin-left: .6rem; }
.weekbar input[type="date"] { border: 1px solid var(--line-2); border-radius: 4px; padding: .4rem .55rem; font-size: .84rem; background: var(--surface); font-family: var(--font-num); }
.weekbar .legend { flex-basis: 100%; margin-top: .35rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.grid-wrap--reserve { border-radius: 0 0 4px 4px; }
.matrix-note { font-size: .78rem; color: var(--ink-2); margin-top: .8rem; line-height: 1.75; }

/* ------------------------------------------------------------
   7. 下層ページ
   ------------------------------------------------------------ */
.crumb { display: flex; flex-wrap: wrap; gap: .3rem .5rem; font-size: .76rem; color: var(--ink-3); }
.crumb a:hover { color: var(--ink); }
.crumb li + li::before { content: "›"; margin-right: .5rem; }
.ptitle { padding-block: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.4rem, 3vw, 2.2rem); }
.ptitle .kicker { display: block; margin-top: 1.2rem; }
.ptitle__title { font-family: var(--font-display); font-feature-settings: "palt"; font-weight: 600; font-size: clamp(2rem, 3.8vw, 3rem); letter-spacing: .08em; line-height: 1.3; margin-top: .2rem; }
.ptitle__sub { color: var(--ink-2); margin-top: .6rem; font-size: .98rem; max-width: 44em; }

.keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.keys div { padding: 1rem 1.2rem; border-right: 1px solid var(--line); }
.keys div:last-child { border-right: 0; }
.keys small { display: block; font-size: .72rem; color: var(--ink-3); letter-spacing: .06em; white-space: nowrap; }
.keys b { display: block; font-family: var(--font-num); font-size: 2rem; font-weight: 600; line-height: 1.1; margin-top: .15rem; letter-spacing: 0; white-space: nowrap; }
.keys b span { font-family: var(--font-body); font-size: .95rem; font-weight: 700; margin-left: .2rem; letter-spacing: .04em; }

.gallery { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: .6rem; }
.gallery figure { position: relative; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.gallery figure:first-child { grid-row: 1 / 3; aspect-ratio: 3 / 2; }
.gallery figure:not(:first-child) { aspect-ratio: 3 / 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery--2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.gallery--2 figure:first-child { grid-row: auto; }
.gallery figcaption { position: absolute; left: .75rem; bottom: .65rem; font-size: .72rem; color: #fff; background: rgba(26, 11, 16, .62); padding: .2rem .6rem; border-radius: 2px; letter-spacing: .03em; }
.photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--surface-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--wide { aspect-ratio: 21 / 9; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 20.5rem; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.aside { position: sticky; top: calc(var(--hd-h) + 1rem); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; box-shadow: var(--shadow); padding: 1.4rem; display: grid; gap: 1rem; }
.aside__title { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.aside dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem .8rem; font-size: .86rem; }
.aside dt { color: var(--ink-3); white-space: nowrap; }
.aside dd { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.aside dd b { font-size: 1.05rem; font-weight: 700; }
.aside__note { font-size: .74rem; color: var(--ink-3); line-height: 1.6; }
.aside__tel { text-align: center; font-size: .78rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: .9rem; }
.aside__tel b { display: block; font-family: var(--font-num); font-size: 1.5rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); line-height: 1.2; }

.spec { display: grid; grid-template-columns: 9.5rem 1fr; font-size: .9rem; border-top: 1px solid var(--line); }
.spec dt, .spec dd { padding: .75rem .25rem; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-3); font-weight: 500; }
.eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.eq li { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.eq svg { width: 1.3rem; height: 1.3rem; color: var(--gold-ink); margin-top: .15rem; }
.eq b { display: block; font-size: .92rem; }
.eq p { font-size: .82rem; color: var(--ink-2); line-height: 1.7; margin-top: .2rem; }
.eq p small { color: var(--ink-3); }
.eq--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.green { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.4rem; align-items: center; }
.green figure { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; }
.green img { width: 100%; height: 100%; object-fit: cover; }
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.room { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.room .photo { border-radius: 0; }
.room__body { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .3rem; }
.room__name { font-size: 1.05rem; font-weight: 700; }
.room dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; font-size: .82rem; }
.room dt { color: var(--ink-3); }
.room dd { font-family: var(--font-num); }
.room .tags { margin-top: .4rem; }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.others a { display: grid; gap: .55rem; }
.others figure { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--surface-2); position: relative; }
.others img { width: 100%; height: 100%; object-fit: cover; }
.others b { font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; }
.others span { font-size: .78rem; color: var(--ink-3); }
.subnav { position: sticky; top: var(--hd-h); z-index: 10; background: var(--ground); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: 0 0 auto; padding: .8rem .9rem; font-size: .86rem; font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover, .subnav a.is-here { color: var(--ink); border-bottom-color: var(--gold); }
.notes { counter-reset: n; display: grid; gap: .9rem; }
.notes > li { counter-increment: n; display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: .9rem; color: var(--ink-2); }
.notes > li::before { content: counter(n); font-family: var(--font-num); font-size: 1.35rem; font-weight: 600; color: var(--gold-ink); line-height: 1.2; }
.notes b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .25rem; }
.notes ul { margin-top: .45rem; display: grid; gap: .2rem; }
.notes ul li::before { content: "—"; margin-right: .45rem; color: var(--ink-3); }
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.svc li { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem 1.3rem; font-size: .86rem; color: var(--ink-2); display: grid; gap: .3rem; align-content: start; }
.svc b { color: var(--ink); font-size: 1.02rem; font-weight: 700; }
.svc .yen { margin-top: .4rem; color: var(--ink); font-weight: 700; font-size: 1rem; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.rules li { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: .95rem 1.15rem; font-size: .84rem; color: var(--ink-2); display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.rules svg { width: 1.2rem; height: 1.2rem; color: var(--gold-ink); margin-top: .15rem; }
.rules b { display: block; color: var(--ink); font-size: .9rem; margin-bottom: .1rem; }
.dl-list { display: grid; gap: .7rem; }
.dl-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.dl-row svg { width: 1.6rem; height: 1.6rem; color: var(--gold-ink); }
.dl-row__name { font-weight: 700; font-size: .95rem; }
.dl-row__desc { font-size: .82rem; color: var(--ink-2); margin-top: .15rem; }
.dl-row__meta { display: flex; gap: .4rem; margin-top: .45rem; }
.dl-row__meta span { font-family: var(--font-num); font-size: .68rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-2); border: 1px solid var(--line-2); padding: 0 .4rem; border-radius: 2px; }
.dl-row .btn { white-space: nowrap; }
.dl-row.is-pending .btn { pointer-events: none; opacity: .5; }

/* ------------------------------------------------------------
   8. 予約ページ
   ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; counter-reset: s; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.steps li { counter-increment: s; display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); font-size: .86rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.steps li::before { content: counter(s); width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--font-num); font-weight: 600; font-size: .9rem; line-height: 1; flex: 0 0 auto; }
.steps li.is-now { color: var(--ink); font-weight: 700; border-color: var(--stage); }
.steps li.is-now::before { background: var(--stage); color: var(--gold-hi); border-color: var(--stage); }

.cart { position: sticky; top: calc(var(--hd-h) + 1rem); background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; box-shadow: var(--shadow); overflow: hidden; }
.cart__head { display: flex; align-items: baseline; justify-content: space-between; padding: 1rem 1.25rem .8rem; }
.cart__head b { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; }
.cart__count { font-size: .76rem; color: var(--ink-3); }
.cart__count b { font-family: var(--font-num); font-size: 1.2rem; color: var(--ink); margin-right: .1rem; }
.cart__clear { font-size: .72rem; color: var(--ink-3); text-decoration: underline; }
.cart__clear:hover { color: var(--red); }
.cart__empty { padding: 1.4rem 1.25rem 1.6rem; font-size: .86rem; color: var(--ink-2); border-top: 1px solid var(--line); line-height: 1.8; }
.cart__empty b { color: var(--ink); }
.cart__empty > b:first-child { display: block; margin-bottom: .4rem; }
.cart__item { border-top: 1px solid var(--line); }
.cart__main { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .05rem .8rem; padding: .8rem 1.25rem; font-size: .86rem; align-items: start; cursor: pointer; }
.cart__main:hover { background: var(--ground); }
.cart__date { grid-row: 1 / 3; font-family: var(--font-num); font-size: 1.25rem; font-weight: 600; line-height: 1; }
.cart__date small { display: block; font-family: var(--font-body); font-size: .68rem; color: var(--ink-3); margin-top: .2rem; font-weight: 400; }
.cart__date.is-sat { color: var(--blue); }
.cart__date.is-sun, .cart__date.is-hol { color: var(--red); }
.cart__fac { font-weight: 700; }
.cart__time { color: var(--ink-2); font-size: .8rem; grid-column: 2; font-family: var(--font-num); }
.cart__acts { grid-column: 3; grid-row: 1 / 3; display: grid; justify-items: end; gap: .3rem; }
.cart__detail { font-size: .72rem; color: var(--gold-ink); font-weight: 700; white-space: nowrap; }
.cart__remove { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-3); font-size: .9rem; line-height: 1; }
.cart__remove:hover { border-color: var(--red); color: var(--red); }
.cart__ext { padding: .2rem 1.25rem 1rem 1.25rem; border-top: 1px dashed var(--line); background: var(--ground); }
.cart__ext-title { font-size: .74rem; font-weight: 700; color: var(--ink-2); margin: .8rem 0 .4rem; }
.cart__ext-opts { display: grid; gap: .3rem; }
.ext-opt { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
.ext-opt input { width: 1rem; height: 1rem; accent-color: var(--stage); }
.ext-opt--disabled { color: var(--ink-3); }
.ext-opt__tag { font-size: .66rem; color: var(--red); margin-left: .3rem; }
.cart__ext-note { font-size: .72rem; color: var(--ink-3); margin-top: .35rem; }
.cart__foot { padding: 1.1rem 1.25rem 1.25rem; display: grid; gap: .7rem; border-top: 1px solid var(--line); }
.cart__note { font-size: .72rem; color: var(--ink-3); line-height: 1.65; }
.split--reserve { grid-template-columns: minmax(0, 1fr) 19.5rem; }

.result-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.6rem); text-align: center; display: grid; gap: 1rem; justify-items: center; }
.result-card svg { width: 3rem; height: 3rem; color: var(--ok); }
.result-card h2 { font-size: 1.4rem; font-weight: 700; }
.result-card p { color: var(--ink-2); font-size: .92rem; max-width: 40em; }
.result-card ul { text-align: left; display: grid; gap: .5rem; width: 100%; max-width: 36rem; }
.result-card li { font-size: .88rem; padding: .7rem 1rem; background: var(--ground); border-radius: 4px; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.result-card li b { font-family: var(--font-num); color: var(--gold-ink); }
.result-card li a { color: var(--gold-ink); font-weight: 700; font-size: .8rem; margin-left: auto; }
.status-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; padding: clamp(1.5rem, 4vw, 2.4rem); max-width: 40rem; display: grid; gap: 1rem; }
.status-card h2 { font-size: 1.3rem; font-weight: 700; }
.status-card dl { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem .8rem; font-size: .9rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.status-card dt { color: var(--ink-3); }
.status-card dd { word-break: break-all; }
.status-badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status-badge--pending { background: var(--amber-soft); color: var(--amber); }
.status-badge--confirmed { background: var(--ok-soft); color: var(--ok); }
.status-badge--cancelled { background: var(--surface-2); color: var(--ink-3); }

/* ------------------------------------------------------------
   9. フォーム
   ------------------------------------------------------------ */
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.4rem, 3.2vw, 2.4rem); display: grid; gap: 1.3rem; }
.form h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; padding-bottom: .55rem; border-bottom: 1px solid var(--line-2); }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .82rem; font-weight: 700; }
.field label i { font-style: normal; font-size: .64rem; color: #fff; background: var(--red); margin-left: .5rem; padding: .05rem .4rem; border-radius: 2px; font-weight: 700; vertical-align: .1em; }
.field input, .field textarea { border: 1px solid var(--line-2); border-radius: 3px; padding: .7rem .8rem; font-size: .95rem; background: var(--ground); width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--ink); background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.field textarea { min-height: 6rem; resize: vertical; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: .88rem; color: var(--ink-2); padding: 1rem 1.1rem; background: var(--ground); border-radius: 4px; border: 1px solid var(--line); cursor: pointer; }
.consent input { margin-top: .35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--stage); }
.consent b { color: var(--ink); }
.form__submit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.form__submit small { font-size: .76rem; color: var(--ink-3); }
.form-result { font-size: .9rem; padding: 0; }
.form-result:not(:empty) { padding: .8rem 1rem; border-radius: 4px; margin-top: .5rem; }
.form-result.is-success { background: var(--ok-soft); color: var(--ok); }
.form-result.is-error { background: rgba(185, 58, 58, .1); color: var(--red); }
/* ドロップゾーン（dropzone.js と共通の構造） */
.dropzone { position: relative; border: 1.5px dashed var(--line-2); border-radius: 4px; padding: 1.4rem; text-align: center; font-size: .86rem; color: var(--ink-2); background: var(--ground); transition: border-color .15s, background .15s; }
.dropzone.is-dragover { border-color: var(--gold); background: var(--gold-soft); }
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone__icon { width: 1.8rem; height: 1.8rem; color: var(--gold-ink); margin: 0 auto .4rem; }
.dropzone__primary { color: var(--ink); }
.dropzone__primary em { font-style: normal; color: var(--gold-ink); font-weight: 700; }
.dropzone__secondary { font-size: .78rem; color: var(--ink-2); margin-top: .3rem; }
.dropzone__formats { font-size: .72rem; color: var(--ink-3); margin-top: .3rem; }
.dropzone__file { display: flex; align-items: center; gap: .8rem; text-align: left; position: relative; z-index: 1; }
.dropzone__file-icon svg { width: 1.6rem; height: 1.6rem; color: var(--gold-ink); }
.dropzone__file-name { font-weight: 700; color: var(--ink); word-break: break-all; }
.dropzone__file-meta { font-size: .74rem; color: var(--ink-3); }
.dropzone__remove { margin-left: auto; font-size: .78rem; color: var(--red); text-decoration: underline; position: relative; z-index: 2; }
.dropzone__error { color: var(--red); font-size: .78rem; margin-top: .5rem; }

/* ---------- お問い合わせ（フォーム切替タブ）・アクセス ---------- */
.ftabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line-2); margin-bottom: 1.4rem; }
.ftabs [role="tab"] { padding: .85rem 1.3rem; font-weight: 700; font-size: .95rem; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; }
.ftabs [role="tab"]:hover { color: var(--ink); }
.ftabs [role="tab"][aria-selected="true"] { color: var(--stage); border-bottom-color: var(--stage); }
.field select { border: 1px solid var(--line-2); border-radius: 3px; padding: .7rem 2.4rem .7rem .8rem; font-size: .95rem; background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F4A51' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center / 1rem; width: 100%; appearance: none; -webkit-appearance: none; }
.field select:focus { border-color: var(--ink); background-color: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--gold-soft); }
.access { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.4rem; align-items: stretch; }
.addr { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 4px; padding: 1.4rem; display: grid; gap: 1rem; align-content: start; }
.addr dl { display: grid; grid-template-columns: 4.5rem 1fr; gap: .6rem .8rem; font-size: .92rem; }
.addr dt { color: var(--ink-3); font-size: .82rem; padding-top: .15rem; }
.access__map { min-height: 20rem; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--surface-2); }
.access__map iframe { width: 100%; height: 100%; min-height: 20rem; border: 0; display: block; }

/* ------------------------------------------------------------
   10. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  :root { --hd-h: 4.9rem; }
  .hd { top: 0; }
  .nav { display: none; }
  .menu-btn { display: grid; margin-left: 0; }
  .hd__cta { margin-left: auto; }
  .hd.is-open .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--stage); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow); }
  .hd.is-open .nav__inner { display: grid; grid-template-columns: 1fr; gap: 0; padding: .6rem clamp(1rem, 3vw, 2rem) 1.25rem; min-height: 0; }
  .hd.is-open .nav__link:nth-child(7) { border-right: 0; }
  .hd.is-open .nav__link { justify-content: flex-start; text-align: left; padding: .85rem 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1rem; white-space: normal; color: var(--stage-ink); background: none; }
  .hd.is-open .nav__link.is-here { color: var(--gold-hi); }
  .hd.is-open .nav__link::after { display: none; }
  .hd.is-open .nav__cta { display: inline-flex; margin-top: .9rem; }
}
@media (max-width: 1024px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__vert { display: none; }
  .hindex { margin-top: -2rem; }
  .hindex__box { grid-template-columns: 1fr 1fr; }
  .hindex a:nth-child(2) { border-right: 0; }
  .hindex a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .uses { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .flow::before { left: 1.4rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .flow > li { padding: 0 0 0 4.2rem; min-height: 2.8rem; }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split--reserve { grid-template-columns: 1fr; }
  .aside, .cart { position: static; }
  .rules, .svc, .others, .keys, .rooms, .eq--3 { grid-template-columns: 1fr 1fr; }
  .keys div:nth-child(2) { border-right: 0; }
  .keys div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps { grid-template-columns: 1fr 1fr; }
  .weekbar .legend { margin-left: 0; }
  .grid { --facw: 9.5rem; }
}
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .util .wrap { font-size: .7rem; }
  .util__tel span { display: none; }
  :root { --hd-top: 4.2rem; --hd-h: 4.2rem; }
  .brand img { width: 150px; }
  .brand { gap: .7rem; }
  .brand__sep { height: 1.8rem; }
  .brand__name { font-size: 1rem; }
  .brand__en { display: none; }
  .hd__cta { display: none; }
  .hero { min-height: 32rem; }
  .hero__cap { display: none; }
  .hero__cta .btn { width: 100%; }
  .hindex__box { grid-template-columns: 1fr; }
  .hindex a { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .hindex a:last-child { border-bottom: 0; }
  .facs { grid-template-columns: 1fr; }
  .docs, .eq, .eq--3, .rules, .svc, .others, .fgrid, .uses, .rooms, .access { grid-template-columns: 1fr; }
  .ftabs [role="tab"] { flex: 1 1 0; text-align: center; padding-inline: .5rem; font-size: .88rem; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery figure:first-child { grid-row: auto; }
  .spec { grid-template-columns: 6.5rem 1fr; }
  .green { grid-template-columns: 1fr; }
  .xlink .wrap { grid-template-columns: 1fr; }
  .xlink__meta { grid-template-columns: 1fr 1fr; }
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
  .grid { font-size: .78rem; --facw: 5.8rem; }
  .grid th.gfac { padding-inline: .45rem; white-space: normal; }
  .grid th.gfac b { font-size: .8rem; line-height: 1.25; }
  .grid th.gfac small { display: none; }
  .grid th.slot { width: 3rem; min-width: 3rem; padding-inline: .35rem; font-size: .74rem; }
  .grid th.slot small { display: none; }
  .grid thead th b { font-size: .95rem; }
  .grid thead th { height: 3rem; }
  .mark--o i, .mark--tel i { width: .85rem; height: .85rem; }
  .steps li { font-size: .78rem; padding: .55rem .7rem; }
  .dl-row { grid-template-columns: auto 1fr; }
  .dl-row .btn { grid-column: 2; justify-self: start; }
  .status-card dl { grid-template-columns: 6rem 1fr; }
  .qa { grid-template-columns: 1fr; gap: .35rem; }
  .ctas .btn { width: 100%; }
}
/* 管理画面どうしの往来ボタン（貸館 → 博物館・2026-09-16 施主指示）。
   深紅の帯の上に乗るので明るい線で描く。操作ボタンと見分けがつくよう
   アイコン＋2 行のラベル＋シェブロンにしてある。 */
.admbar__switch { display: inline-flex; align-items: center; gap: .6rem; padding: .3rem .75rem .3rem .6rem; border: 1px solid rgba(255, 255, 255, .45); border-radius: 4px; color: var(--stage-ink); transition: background .15s, border-color .15s; }
.admbar__switch:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.admbar__switch svg { width: 1.35rem; height: 1.35rem; color: var(--gold-hi); flex: 0 0 auto; }
.admbar__switch-text { display: grid; gap: .05rem; text-align: left; }
.admbar__switch-text small { font-size: .62rem; letter-spacing: .1em; color: var(--stage-mute); }
.admbar__switch-text b { font-size: .86rem; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.admbar__switch .chev { color: var(--gold-hi); margin-left: .1rem; transition: transform .2s; }
.admbar__switch:hover .chev { transform: translateX(2px) rotate(-45deg); }
@media (max-width: 720px) {
  .admbar__switch-text small { display: none; }
  .admbar__switch-text b { white-space: normal; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------
   11. 管理画面（貸館）  ── /hall/admin/ 専用・2026-09-16
   ------------------------------------------------------------
   施主指示（2026-09-16）:
     ・貸館予約と料金計算は「貸館サイトのデザイン」で、貸館ページに紐づける
     ・予約カレンダーと登録フォームは、広いときは横並び・狭いときは縦
     ・両方の基本の横幅をもっと詰めて、なるべく横並びになるようにする

   中身を動かすのは博物館側と同じ assets/js/admin-reserve.js と admin-fee.js。
   **JS には手を入れていない**ので、ここに出てくる .reserve-* / .sel-* /
   .detail-* / .form-field / .option-card / .price-table などの名前は
   すべて博物館側（site.css・紺の暗色）由来。この層で紙色の意匠に置き換える。
   名前を変えると JS が黙って壊れるので、名前は動かさない。

   横幅の内訳（横並びが成り立つ最小値）:
     左 = 週マトリクス 32rem ＋ カードの内余白 2rem ＝ 約 34rem
     右 = 21rem ／ 間 = 1.5rem   → 合計 約 56.5rem ≒ 900px
   既存の折り返し（1024px）より狭いので、新しい折り返し幅は増やしていない。
   ------------------------------------------------------------ */

/* ---------- 職員用の帯（公開ページのヘッダーは出さない） ---------- */
.hall-admin { background: var(--ground); }
.admbar { background: var(--stage); color: var(--stage-ink); border-bottom: 2px solid var(--gold); }
.admbar__inner { display: flex; align-items: center; gap: 1rem; min-height: 3.2rem; flex-wrap: wrap; }
.admbar__brand { font-family: var(--font-display); font-feature-settings: "palt"; font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; }
.admbar__title { font-size: .76rem; letter-spacing: .16em; color: var(--stage-mute); border-left: 1px solid rgba(255,255,255,.28); padding-left: .8rem; }
.admbar__spacer { flex: 1 1 auto; }
.admbar__link { font-size: .78rem; color: var(--stage-mute); }
.admbar__link:hover { color: #fff; text-decoration: underline; }
.admbar .btn--line { background: transparent; border-color: rgba(255,255,255,.45); color: var(--stage-ink); }
.admbar .btn--line:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* ---------- タブとパネル ---------- */
.hall-admin .ftabs { margin-bottom: 1.6rem; }
.admtab__badge {
  display: inline-block; margin-left: .45rem; padding: 0 .45rem;
  background: var(--red); color: #fff;
  font-family: var(--font-num); font-size: .7rem; font-weight: 700;
  border-radius: 999px; vertical-align: .1em;
}
.admpanel { display: none; }
.admpanel.is-active { display: block; }

/* ---------- 横並び（広いとき2列・1024px以下で縦積み） ---------- */
.split--adm { grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- 予約一覧 ---------- */
.hall-admin .admin-reserve-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .78rem; }
.hall-admin .admin-reserve-filter button {
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  padding: .4rem .8rem; border-radius: 3px; min-width: 7rem; text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}
.hall-admin .admin-reserve-filter button:hover { border-color: var(--ink); color: var(--ink); }
.hall-admin .admin-reserve-filter button.adm-rf-wide { min-width: 11rem; }
.hall-admin .admin-reserve-filter button.is-active { background: var(--stage); border-color: var(--stage); color: var(--gold-hi); font-weight: 700; }
.hall-admin .admin-reserve-filter #reserve-refresh { min-width: auto; color: var(--gold-ink); }

.admlist { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.admlist__empty, .admlist > p { padding: 1.6rem 1.2rem; text-align: center; color: var(--ink-3); font-size: .86rem; }
.hall-admin .admin-reserve-row {
  display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: flex-start;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .84rem;
}
.hall-admin .admin-reserve-row:last-child { border-bottom: 0; }
.hall-admin .admin-reserve-row--clickable { cursor: pointer; transition: background .12s; }
.hall-admin .admin-reserve-row--clickable:hover { background: var(--ground); }
.hall-admin .admin-reserve-row--clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hall-admin .admin-reserve-row__id { font-family: var(--font-num); font-weight: 700; font-size: .9rem; color: var(--gold-ink); }
.hall-admin .admin-reserve-row__name { color: var(--ink); margin: .2rem 0; }
.hall-admin .admin-reserve-row__meta { color: var(--ink-3); font-size: .74rem; }
.hall-admin .admin-reserve-row__actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.hall-admin .admin-reserve-row__actions .btn { min-height: 1.9rem; padding: .25rem .6rem; font-size: .72rem; }

/* 状態のしるし。公開側の .status-badge と同じ色の考え方（緑＝確定・橙＝仮） */
.hall-admin .reserve-status-badge { display: inline-block; padding: .18rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.hall-admin .reserve-status-badge--pending   { background: var(--amber-soft); color: var(--amber); }
.hall-admin .reserve-status-badge--confirmed { background: var(--ok-soft); color: var(--ok); }
.hall-admin .reserve-status-badge--cancelled { background: var(--surface-2); color: var(--ink-3); }
.hall-admin .reserve-status-badge--blocked   { background: rgba(44,93,181,.12); color: var(--blue); }

/* ---------- JS が使う本館由来のボタン（貸館には無い系統なので足す） ---------- */
.hall-admin .btn--primary { background: var(--stage); color: var(--stage-ink); border-color: var(--stage); }
.hall-admin .btn--primary:hover { background: var(--stage-2); border-color: var(--stage-2); }
.hall-admin .btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.hall-admin .btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

/* ---------- 予約カレンダー（週マトリクス・幅を詰めた） ---------- */
.reserve-matrix-card { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1rem; }
.reserve-date-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.reserve-date-bar__label { font-family: var(--font-num); font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.reserve-date-bar__input { border: 1px solid var(--line-2); border-radius: 3px; padding: .3rem .5rem; font-size: .8rem; background: var(--ground); font-family: var(--font-num); }
.reserve-date-bar .btn--sm { min-height: 2rem; padding: .25rem .7rem; }
.reserve-matrix-wrap { overflow-x: auto; }

/* 幅の圧縮: 本館は min-width 50rem・nowrap・3px 間隔だった。
   施設名を折り返せるようにし、区分列と余白を詰めて 32rem まで落としてある。 */
.reserve-week-matrix {
  width: 100%; min-width: 32rem;
  border-collapse: separate; border-spacing: 2px;
  font-size: .68rem; table-layout: fixed;
}
.reserve-week-matrix th, .reserve-week-matrix td {
  padding: .28rem .1rem; text-align: center;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--ground); vertical-align: middle;
}
.reserve-week-matrix th.reserve-row-label {
  width: 5.2rem; text-align: left; white-space: normal; line-height: 1.25;
  padding: .35rem .4rem; font-size: .72rem; font-weight: 700;
  color: var(--ink); background: var(--surface-2);
}
.reserve-week-matrix thead th.reserve-row-label--head { text-align: center; padding: .3rem .2rem; font-size: .68rem; color: var(--ink-3); }
.reserve-week-matrix th.reserve-slot-label {
  width: 2.4rem; font-size: .66rem; font-weight: 700; padding: .2rem .1rem;
  color: var(--gold-ink); background: var(--surface-2);
}
.reserve-week-matrix tr.reserve-week-matrix__spacer > td { height: 7px; padding: 0; border: 0; background: transparent; }

.reserve-day-header { background: var(--surface-2); font-weight: 700; }
.reserve-day-header__date { font-family: var(--font-num); font-size: .82rem; font-weight: 600; color: var(--ink); }
.reserve-day-header__wday { font-size: .58rem; color: var(--ink-3); margin-top: .05rem; }
.reserve-day-header--sat .reserve-day-header__wday { color: var(--blue); }
.reserve-day-header--sun .reserve-day-header__wday { color: var(--red); }

.reserve-week-cell { height: 2.9rem; font-weight: 700; font-size: .7rem; line-height: 1.2; transition: background .12s, border-color .12s; }
.reserve-week-cell__time { display: block; font-family: var(--font-num); font-size: .52rem; font-weight: 400; margin-top: .1rem; color: var(--ink-3); white-space: nowrap; }
.reserve-week-cell--open      { background: var(--ok-soft); border-color: rgba(29,138,92,.45); color: var(--ok); cursor: pointer; }
.reserve-week-cell--open:hover { background: rgba(29,138,92,.18); border-color: var(--ok); }
.reserve-week-cell--tentative { background: var(--amber-soft); border-color: rgba(183,121,31,.45); color: var(--amber); cursor: pointer; }
.reserve-week-cell--tentative:hover { background: rgba(183,121,31,.22); }
.reserve-week-cell--booked    { background: rgba(185,58,58,.12); border-color: rgba(185,58,58,.4); color: var(--red); cursor: pointer; }
.reserve-week-cell--confirmed { background: rgba(29,138,92,.18); border-color: rgba(29,138,92,.5); color: var(--ok); cursor: pointer; }
.reserve-week-cell--confirmed:hover { background: rgba(29,138,92,.28); }
.reserve-week-cell--blocked   { background: rgba(44,93,181,.12); border-color: rgba(44,93,181,.4); color: var(--blue); cursor: pointer; }
.reserve-week-cell--blocked:hover { background: rgba(44,93,181,.2); }
.reserve-week-cell--closed    { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, var(--closed) 1px 7px); border-color: var(--line-2); color: var(--ink-3); cursor: not-allowed; }
.reserve-week-matrix--admin .reserve-week-cell--closed:hover { border-color: var(--gold); }
.reserve-week-cell--locked, .reserve-week-cell--toosoon { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); cursor: not-allowed; font-weight: 400; }
.reserve-week-cell--out { background: transparent; border-color: transparent; color: transparent; cursor: default; }
.reserve-week-cell--selected {
  background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink);
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--gold);
}
.reserve-week-cell--selected:hover { background: rgba(217,173,53,.28); }
/* 編集中の予約が元から押さえている枠は、選択中とは別に分かるようにする */
.reserve-week-cell[data-edit-target].reserve-week-cell--selected { box-shadow: inset 0 0 0 2px var(--blue), inset 0 0 0 4px rgba(44,93,181,.2); }

.reserve-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; font-size: .7rem; color: var(--ink-2); }
.reserve-legend span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.reserve-legend i { display: inline-block; width: .85rem; height: .85rem; border-radius: 2px; border: 1px solid var(--line-2); }
.reserve-legend i.lg-open   { background: var(--ok-soft); border-color: rgba(29,138,92,.45); }
.reserve-legend i.lg-tent   { background: var(--amber-soft); border-color: rgba(183,121,31,.45); }
.reserve-legend i.lg-conf   { background: rgba(29,138,92,.18); border-color: rgba(29,138,92,.5); }
.reserve-legend i.lg-block  { background: rgba(44,93,181,.12); border-color: rgba(44,93,181,.4); }
.reserve-legend i.lg-closed { background: repeating-linear-gradient(135deg, var(--hatch) 0 1px, var(--closed) 1px 5px); }
.reserve-legend i.lg-sel    { background: var(--gold-soft); border-color: var(--gold); }

/* ---------- 選択中の予約と新規登録（右の列） ---------- */
.admform { min-width: 0; }
.register-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem; transition: border-color .2s, background .2s; }
.register-panel.is-edit { border-color: var(--blue); background: rgba(44,93,181,.04); box-shadow: 0 0 0 2px rgba(44,93,181,.12); }

.edit-banner { display: none; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem .8rem; margin-bottom: .9rem; background: rgba(44,93,181,.1); border: 1px solid rgba(44,93,181,.4); border-radius: 4px; }
.is-edit .edit-banner { display: flex; }
.edit-banner__label { background: var(--blue); color: #fff; padding: .15rem .55rem; border-radius: 3px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.edit-banner__id { font-family: var(--font-num); font-size: .8rem; font-weight: 700; color: var(--blue); }
.edit-banner__exit { margin-left: auto; border: 1px solid rgba(44,93,181,.4); color: var(--blue); font-size: .68rem; padding: .2rem .6rem; border-radius: 3px; }
.edit-banner__exit:hover { background: rgba(44,93,181,.1); }

.sel-empty { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; background: var(--ground); border: 1px dashed var(--line-2); border-radius: 4px; color: var(--ink-3); font-size: .8rem; line-height: 1.7; }
.sel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .8rem; background: var(--gold-soft); border: 1px solid var(--gold); border-bottom: 0; border-radius: 4px 4px 0 0; }
.sel-count { font-size: .78rem; font-weight: 700; color: var(--gold-ink); }
.sel-clear { border: 1px solid rgba(185,58,58,.4); color: var(--red); font-size: .68rem; padding: .2rem .55rem; border-radius: 3px; }
.sel-clear:hover { background: rgba(185,58,58,.08); border-color: var(--red); }
.sel-list { background: var(--surface); border: 1px solid var(--gold); border-top: 0; border-radius: 0 0 4px 4px; }
.sel-row { border-bottom: 1px solid var(--line); }
.sel-row:last-child { border-bottom: 0; }
.sel-row.is-expanded { background: rgba(217,173,53,.05); }
.sel-row__main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .8rem; }
.sel-row__main--clickable { cursor: pointer; transition: background .12s; user-select: none; }
.sel-row__main--clickable:hover { background: var(--ground); }
.sel-row__main--clickable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.sel-row__date { font-family: var(--font-num); font-weight: 700; font-size: .82rem; min-width: 4.2rem; }
.sel-row__fac { flex: 1 1 auto; font-size: .82rem; min-width: 0; }
.sel-row__time { font-family: var(--font-num); font-size: .76rem; font-weight: 700; color: var(--gold-ink); }
.sel-row__detail-btn { border: 1px solid var(--gold); color: var(--gold-ink); background: var(--gold-soft); font-size: .68rem; padding: .18rem .5rem; border-radius: 3px; white-space: nowrap; }
.sel-row__detail-btn:hover { background: rgba(217,173,53,.26); }
.sel-row__del { border: 1px solid rgba(185,58,58,.4); color: var(--red); width: 1.5rem; height: 1.5rem; border-radius: 3px; font-size: .9rem; line-height: 1; }
.sel-row__del:hover { background: rgba(185,58,58,.08); border-color: var(--red); }
/* 折りたたみの中身は、日付の桁ぶんだけ下げて親子関係を見せる */
.sel-row__detail-body { padding: .45rem .8rem .8rem calc(4.2rem + .5rem + .8rem); border-top: 1px dashed var(--line-2); background: var(--ground); }
.sel-row__ext-title { font-size: .68rem; font-weight: 700; color: var(--gold-ink); letter-spacing: .06em; margin: 0 0 .4rem; }
.sel-row__ext-empty { font-size: .74rem; color: var(--ink-3); }
.sel-row__ext-auto { font-size: .68rem; color: var(--ink-3); margin-top: .45rem; font-style: normal; }

.reserve-ext-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.reserve-ext-opt { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .55rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 3px; font-size: .74rem; cursor: pointer; transition: border-color .12s, background .12s; }
.reserve-ext-opt:hover { border-color: var(--gold); background: var(--gold-soft); }
.reserve-ext-opt input[type="checkbox"] { width: .85rem; height: .85rem; margin: 0; accent-color: var(--stage); cursor: pointer; }
.reserve-ext-opt input[type="checkbox"]:checked + .reserve-ext-opt__label { color: var(--gold-ink); font-weight: 700; }
.reserve-ext-opt--disabled { cursor: not-allowed; opacity: .7; border-color: rgba(185,58,58,.3); background: rgba(185,58,58,.04); }
.reserve-ext-opt--disabled:hover { border-color: rgba(185,58,58,.3); background: rgba(185,58,58,.04); }
.reserve-ext-opt__tag { font-size: .62rem; font-weight: 700; padding: .05rem .3rem; border-radius: 2px; }
.reserve-ext-opt__tag--reserved { background: rgba(185,58,58,.12); color: var(--red); border: 1px solid rgba(185,58,58,.35); }

/* ---------- フォーム部品（本館由来の名前） ---------- */
.hall-admin .form-heading { font-size: .88rem; font-weight: 700; letter-spacing: .02em; margin: 1.1rem 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-2); }
.hall-admin .form-heading:first-child { margin-top: 0; }
.hall-admin .form-grid { display: grid; grid-template-columns: 1fr; gap: .7rem .9rem; }
.hall-admin .form-field { display: grid; gap: .25rem; margin-bottom: .7rem; }
.hall-admin .form-field__label { display: flex; align-items: center; gap: .4rem; font-size: .78rem; font-weight: 700; }
.hall-admin .form-field__required { font-size: .62rem; color: #fff; background: var(--red); padding: .05rem .4rem; border-radius: 2px; font-weight: 700; }
.hall-admin .form-field__opt { font-size: .62rem; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2); padding: .02rem .38rem; border-radius: 2px; font-weight: 500; }
.hall-admin .form-field__hint { font-size: .7rem; color: var(--ink-3); line-height: 1.6; }
.hall-admin .form-field input, .hall-admin .form-field textarea, .hall-admin .form-field select {
  width: 100%; border: 1px solid var(--line-2); border-radius: 3px;
  padding: .5rem .6rem; font-size: .88rem; background: var(--ground);
}
.hall-admin .form-field select { appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F4A51' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / .9rem; }
.hall-admin .form-field input:focus, .hall-admin .form-field textarea:focus, .hall-admin .form-field select:focus {
  border-color: var(--ink); background-color: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--gold-soft);
}
.hall-admin .form-field textarea { min-height: 3.4rem; resize: vertical; }

.hall-admin .option-group { display: grid; gap: .35rem; margin-top: .15rem; }
.hall-admin .option-card { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .6rem; background: var(--surface); border: 1px solid var(--line-2); border-radius: 3px; cursor: pointer; font-size: .8rem; transition: background .12s, border-color .12s; }
.hall-admin .option-card:hover { background: var(--gold-soft); border-color: var(--gold); }
.hall-admin .option-card input[type="radio"], .hall-admin .option-card input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; accent-color: var(--stage); }
.hall-admin .option-card__label { font-weight: 700; }
.hall-admin .option-card__desc { color: var(--ink-3); font-size: .7rem; line-height: 1.5; flex: 1 1 100%; }
.hall-admin .option-card:has(input:checked) { background: var(--gold-soft); border-color: var(--gold); }
.hall-admin .option-card:has(input:checked) .option-card__label { color: var(--gold-ink); }

.hall-admin .submit-row { display: grid; gap: .5rem; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.hall-admin .submit-row__hint { font-size: .72rem; color: var(--ink-3); line-height: 1.6; }

/* ---------- 予約の詳細・キャンセル理由のモーダル ---------- */
.hall-admin .reserve-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto;
  background: rgba(26,11,16,.72);
}
.hall-admin .reserve-modal.is-open { display: flex; }
.hall-admin .reserve-modal__inner {
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: 4px; box-shadow: var(--shadow);
  max-width: 42rem; width: 100%; margin: 2rem auto;
  max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
}
.hall-admin .reserve-modal__head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.hall-admin .reserve-modal__title { font-size: 1.05rem; font-weight: 700; letter-spacing: .03em; }
.hall-admin .reserve-modal__subtitle { font-family: var(--font-num); font-size: .76rem; color: var(--gold-ink); margin-top: .15rem; }
.hall-admin .reserve-modal__close { width: 2rem; height: 2rem; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; color: var(--ink-2); }
.hall-admin .reserve-modal__close:hover { border-color: var(--ink); color: var(--ink); }
.hall-admin .reserve-modal__body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 1.25rem; -webkit-overflow-scrolling: touch; }
.hall-admin .reserve-modal__footer { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: var(--ground); }

.hall-admin .detail-section-title { font-size: .78rem; font-weight: 700; color: var(--gold-ink); margin: 1.3rem 0 .45rem; padding-bottom: .25rem; border-bottom: 1px solid var(--gold); }
.hall-admin .detail-section-title:first-child { margin-top: 0; }
.hall-admin .detail-row { display: grid; grid-template-columns: 7rem 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.hall-admin .detail-row__label { color: var(--ink-3); font-size: .74rem; }
.hall-admin .detail-row__value { color: var(--ink); word-break: break-word; }

/* ---------- 料金計算 ---------- */
/* 金額はサーバー（api/_lib/fees.php）が正本。ここは入力と見せ方だけ。 */
.fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; align-items: start; margin-top: 1rem; }
.fee-box { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1rem 1.1rem; }
.fee-box__title { font-size: .82rem; font-weight: 700; color: var(--gold-ink); margin-bottom: .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-2); }
.fee-box__note { font-size: .74rem; color: var(--ink-2); line-height: 1.7; margin-bottom: .6rem; }
/* 大ホール以外を選んでいるときは薄くして「関係ない」と示す。
   隠さないのは、入れた数字が見えないまま計算に入るのを防ぐため。 */
#fee-euphony-only.is-off { opacity: .45; }

.fee-slots { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.fee-slot { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; background: var(--ground); border: 1px solid var(--line-2); border-radius: 3px; font-size: .78rem; cursor: pointer; }
.fee-slot input { width: .9rem; height: .9rem; margin: 0; accent-color: var(--stage); }
.fee-slot--main { font-weight: 700; border-color: var(--gold); }
.fee-slot.is-off { opacity: .45; cursor: not-allowed; }
/* 橋渡し（12-13・17-18）は前後の区分を両方選ぶと自動で入る。
   外せないことを見た目で示す（サーバー側の正規化と同じ挙動）。 */
.fee-slot.is-forced { border-style: dashed; color: var(--gold-ink); cursor: default; }

.fee-check { display: flex; align-items: flex-start; gap: .45rem; padding: .3rem 0; font-size: .8rem; line-height: 1.6; cursor: pointer; }
.fee-check input { width: 1rem; height: 1rem; margin: .2rem 0 0; accent-color: var(--stage); flex-shrink: 0; }
.fee-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .55rem; margin-bottom: .7rem; }
.fee-nums label { display: grid; gap: .2rem; }
.fee-nums span { font-size: .7rem; color: var(--ink-2); }
.fee-nums input { width: 100%; border: 1px solid var(--line-2); border-radius: 3px; padding: .3rem .45rem; background: var(--ground); text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* 附帯設備（54品目。グループごとに折りたたむ） */
.fee-eqgroup { border: 1px solid var(--line); border-radius: 4px; margin-bottom: .45rem; background: var(--surface); }
.fee-eqgroup summary { display: flex; align-items: baseline; gap: .55rem; padding: .55rem .85rem; font-size: .82rem; font-weight: 700; cursor: pointer; }
.fee-eqgroup__n { font-size: .7rem; font-weight: 400; color: var(--ink-3); }
.fee-eqrow { display: grid; grid-template-columns: 1fr 3.5rem 5.5rem 4.5rem; gap: .5rem; align-items: center; padding: .4rem .85rem; border-top: 1px solid var(--line); font-size: .78rem; }
.fee-eqrow__name { line-height: 1.5; }
.fee-eqrow__na { font-style: normal; font-size: .68rem; color: var(--ink-3); margin-left: .3rem; }
.fee-eqrow__unit { font-size: .7rem; color: var(--ink-3); text-align: center; }
.fee-eqrow__yen { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.fee-eqrow__qty { border: 1px solid var(--line-2); border-radius: 3px; padding: .25rem .35rem; background: var(--ground); text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.fee-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.3rem 0 1rem; }
.fee-items { display: grid; gap: .35rem; }
.fee-items__empty { font-size: .78rem; color: var(--ink-3); line-height: 1.8; }
.fee-item { display: grid; grid-template-columns: 1.5rem 1fr auto; gap: .55rem; align-items: center; padding: .45rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: .8rem; }
.fee-item__no { font-family: var(--font-num); font-weight: 700; color: var(--gold-ink); text-align: center; }
.fee-item__body { line-height: 1.5; }

.fee-resultbox { margin-top: 1.3rem; }
.fee-res { margin-bottom: 1.6rem; }
.hall-admin .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.hall-admin .price-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.hall-admin .price-table thead th { background: var(--surface-2); padding: .55rem .8rem; font-size: .74rem; font-weight: 700; color: var(--ink-2); letter-spacing: .04em; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.hall-admin .price-table thead th:first-child { text-align: left; }
.hall-admin .price-table td { padding: .55rem .8rem; border-top: 1px solid var(--line); vertical-align: top; }
.hall-admin .price-table td:last-child { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* グループの見出し行（基本使用料・延長料金 …）は colspan=3 の 1 セル */
.hall-admin .price-table tbody tr.fee-res__group td { background: var(--gold-soft); color: var(--gold-ink); font-size: .72rem; font-weight: 700; text-align: left; }
.hall-admin .price-table tfoot td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--line-2); }
.fee-res__notes { display: grid; gap: .25rem; margin-top: .6rem; }
.fee-res__notes li { position: relative; padding-left: 1.1rem; font-size: .74rem; color: var(--ink-2); line-height: 1.7; }
.fee-res__notes li::before { content: "\203B"; position: absolute; left: 0; }
.fee-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 4px; font-size: .88rem; font-weight: 700; }
.fee-total b { font-family: var(--font-num); font-size: 1.5rem; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.fee-res__caution { font-size: .74rem; color: var(--ink-2); line-height: 1.7; margin-top: .55rem; }

/* ---------- 狭い画面 ---------- */
/* 1024px 以下は縦積み。既存の `.split, .split--reserve { 1fr }`（詳細度 0,1,0）だけでは
   `.hall-admin .split--adm`（0,2,0）に負けるので、同じ詳細度で書き直す。 */
@media (max-width: 1024px) {
  .hall-admin .split--adm { grid-template-columns: 1fr; }
  /* 縦積みなら幅に余裕ができるので、登録フォームは 2 列に戻す */
  .hall-admin .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .hall-admin .submit-row { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .hall-admin .submit-row__hint { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .admbar__inner { min-height: 2.8rem; gap: .6rem; }
  .admbar__link { display: none; }
  .hall-admin .form-grid--2 { grid-template-columns: 1fr; }
  .hall-admin .submit-row { grid-template-columns: 1fr; }
  .hall-admin .admin-reserve-filter button { min-width: 0; flex: 1 1 auto; }
  .hall-admin .admin-reserve-filter button.adm-rf-wide { min-width: 0; flex: 1 1 100%; }
  .reserve-week-matrix { font-size: .62rem; border-spacing: 1px; }
  .reserve-week-matrix th.reserve-row-label { width: 4.4rem; font-size: .66rem; }
  .reserve-week-matrix th.reserve-slot-label { width: 2.1rem; font-size: .6rem; }
  .reserve-week-cell { height: 2.5rem; font-size: .64rem; }
  .sel-row__detail-body { padding-left: .8rem; }
  .fee-eqrow { grid-template-columns: 1fr 4.5rem; grid-template-areas: "name qty" "meta qty"; }
  .fee-eqrow__name { grid-area: name; }
  .fee-eqrow__unit { grid-area: meta; text-align: left; }
  .fee-eqrow__yen  { grid-area: meta; text-align: right; }
  .fee-eqrow__qty  { grid-area: qty; }
  .hall-admin .detail-row { grid-template-columns: 5.5rem 1fr; }
  .hall-admin .reserve-modal__footer { justify-content: stretch; }
  .hall-admin .reserve-modal__footer .btn { flex: 1 1 auto; }
}