/* 和歌山税務調査SOS — PJ0005 family の版面（craft paper × 墨と弁柄）＋ 見出しは Zen Kaku Gothic New
   ★ このファイルは 05_scripts/make-service-css.py が生成する。直接編集しないこと。
   2026-08-19 意匠変更：白地＋細罫の「編集罫」から family へ移した（ユーザー指摘
   「他のサイトのデザインはよくできている」）。角丸・影の禁則は撤回。
   継承元：shinkoku-sites / kensetsugyou-kyoka（同じトークン・同じ印章と眉ラベル）
   単一の真実：フォントは 01_input/kaigo-fukushi-site/fonts */

/* ---------- 見出し書体（Zen Kaku Gothic New Bold・SIL OFL・セルフホスト）
   ビルド時に「見出しで実際に使う文字だけ」へ自動サブセット（scripts/subset-font.py）。外部 CDN は 0 本。
   本文は端末の書体。ただし Windows で游ゴシック Regular に落ちると細くてかすれるので
   "Yu Gothic Medium" を先に置く（2026-08-19・初版で丸ゴシックにしたのはユーザー指摘で撤回）。 ---------- */
@font-face{
  font-family:"Zen Kaku Gothic New";
  src:url("/fonts/zenkaku-bold-subset.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* 地（family 共通・craft paper） */
  --bg-craft:#F2E6D5; --bg-craft-light:#F8F0E5; --bg-white-card:#FFFDF9;
  --color-brown-dark:#4A3728; --color-brown:#8B6F4E; --color-brown-light:#A08A6E;
  /* family の --color-brown は craft 地で 3.81:1 と 4.5 に届かない。小さい注記用に一段暗いものを持つ */
  --color-note:#7C6346;
  --sumi:#1A1614; --sumi-soft:#2E2A27;
  /* accent（サイト固有） */
  --accent:#8C4A2E; --accent-deep:#6B3520; --accent-light:#C98A66; --accent-tint:#F3E2D8;
  --hair:rgba(139,111,78,.22); --rule:rgba(139,111,78,.34);
  /* 面 */
  --shadow-card:0 2px 12px rgba(26,22,20,.08);
  --shadow-card-hover:0 6px 24px rgba(26,22,20,.16);
  --shadow-seal:0 1px 3px rgba(26,22,20,.35), inset 0 0 0 1px rgba(140,74,46,.4);
  --radius:10px; --radius-lg:16px;
  /* 版面 */
  --measure:40rem; --wrap:60rem; --edge:1.2rem;
  --gap:clamp(2.6rem,6vw,4.2rem);
  --font-heading:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  --font-body:-apple-system,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  --cta-label:'ご相談';
  /* インライン SVG が参照する旧トークン名の別名。消すと fill が無効値になり図が真っ黒になる */
  --ink:var(--sumi); --paper:var(--bg-white-card); --muted:var(--color-note);
  --rule-strong:var(--sumi); --accent-weak:var(--accent-tint);
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--bg-craft); color:var(--color-brown-dark);
  font-family:var(--font-body); font-size:clamp(16px,1.9vw,17px); line-height:1.9; font-weight:400;
  font-feature-settings:"palt" 1; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  counter-reset:sec; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block }
strong,b{ font-weight:700; color:var(--sumi) }
a{ color:var(--accent-deep); text-decoration:underline; text-decoration-color:var(--accent-light);
   text-underline-offset:3px; text-decoration-thickness:1px; transition:color .15s, text-decoration-color .15s }
a:hover{ color:var(--sumi); text-decoration-color:var(--accent) }

/* ── 版面：main のグリッドで全幅（full）と本文幅（wrap）を名前で取る ── */
.wrap{ width:min(100% - (var(--edge) * 2), var(--wrap)); margin-inline:auto }
main{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--edge),1fr)
    [wrap-start] minmax(0,var(--wrap)) [wrap-end]
    minmax(var(--edge),1fr) [full-end];
  padding-bottom:var(--gap);
}
main > *{ grid-column:wrap }
.measure{ max-width:var(--measure) }

/* ── 帯（墨地・accent の下罫・スクロール追従） ── */
.topbar{ position:sticky; top:0; z-index:40; background:var(--sumi); color:var(--accent-light);
  border-bottom:3px solid var(--accent) }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0 }
.brand{ flex:0 0 auto; display:inline-flex; align-items:baseline; gap:.5rem;
  font-family:var(--font-heading); font-weight:700; font-size:.95rem; letter-spacing:.04em;
  text-decoration:none; color:#F5F1E8; white-space:nowrap }
.brand:hover{ color:#fff; text-decoration:none }
.brand span{ font-weight:400; font-size:.82rem; color:rgba(255,255,255,.62); letter-spacing:0 }
.topbar nav{ font-size:.85rem }
.topbar nav a{ color:rgba(255,255,255,.84); text-decoration:none; margin-left:1.2rem; white-space:nowrap }
.topbar nav a:hover{ color:#fff; text-decoration:underline; text-decoration-color:var(--accent-light) }

/* ── トップのヒーロー（2026-08-19 新設。family の .page-hero と同型） ── */
.page-hero{ padding:2.2rem 0 .4rem }
.page-hero__eyecatch{ margin:0 0 1.6rem }
.page-hero__eyecatch img{ width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card) }

/* ── 表題：眉ラベル ＋ accent の縦罫 ── */
.kicker{ display:flex; width:fit-content; max-width:100%; align-items:center; gap:.6rem;
  margin:2.2rem 0 .8rem; padding:.3rem 1rem; background:var(--sumi); color:var(--accent-light);
  font-family:var(--font-heading); font-size:.76rem; font-weight:700; letter-spacing:.18em;
  border-radius:3px; box-shadow:var(--shadow-seal) }
h1{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(1.6rem,4.4vw,2.3rem); line-height:1.5; letter-spacing:0;
  color:var(--sumi); margin:.5rem 0 1.2rem; max-width:24em;
  border-left:4px solid var(--accent); padding-left:1rem;
}
.kicker + h1{ margin-top:.2rem }
/* 下層ページは kicker もヒーローも無く、帯のすぐ下に表題が来てしまう */
main > h1:first-child{ margin-top:2.9rem }
h1 + .lede,h1 + p{ margin-top:1.2rem }
.lede{ font-size:1.02rem; line-height:1.95; color:var(--color-brown-dark); max-width:var(--measure) }
p{ margin:0 0 1.15em; max-width:var(--measure) }
ul,ol{ max-width:var(--measure); padding-left:1.4em }
li{ margin-bottom:.4em }
h3{ font-weight:700; font-size:1.04rem; color:var(--sumi); margin:2rem 0 .55rem }

/* ── 章：番号の印章 ＋ accent の横罫（family の section-eyebrow / section-title） ── */
section{ counter-increment:sec; margin:var(--gap) 0 0 }
section > h2{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(1.3rem,3.2vw,1.68rem); line-height:1.55; color:var(--sumi);
  margin:0 0 1.3rem; padding-bottom:.6rem; position:relative;
  border-bottom:2px solid var(--accent);
  display:flex; align-items:center; gap:.7rem;
}
section > h2::before{
  content:counter(sec,decimal-leading-zero);
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:1.9em; height:1.9em; padding:0 .35em;
  background:var(--sumi); color:var(--accent-light);
  font-size:.72em; font-variant-numeric:tabular-nums; letter-spacing:.04em;
  border-radius:4px; line-height:1;
}
section > h2::after{ content:''; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--sumi) }
/* 章が 1 つしかないページ（404・特商法）で「01」だけが出るのを避ける */
main:not(:has(section:nth-of-type(2))) section > h2::before{ content:none }
section.note-sec{ counter-increment:none }
section.note-sec > h2::before{ content:none }

/* ── 料金：面も縦罫も持たせず、数字そのもので見せる ── */
.price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.1em .55em; margin:.2rem 0 .1rem;
  max-width:var(--measure); font-family:var(--font-heading); font-variant-numeric:tabular-nums }
.price b{ font-size:clamp(2.3rem,6.4vw,3.1rem); font-weight:700; line-height:1.15; color:var(--sumi);
  letter-spacing:-.02em }
.price .unit{ font-size:1.05rem; font-weight:700; letter-spacing:0; color:var(--sumi) }
.price .per{ font-size:.88rem; font-weight:400; letter-spacing:0; color:var(--color-note) }
.note{ font-size:.88rem; color:var(--color-note); max-width:var(--measure) }
.nb{ white-space:nowrap }
.navtoggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.navbtn{ display:none }

/* ── CTA：family の統合カードと同じ型（跨ぐ印章ラベル ＋ 右上の桝形 notch ＋ 1px 罫）
   ★ 色つきの太い上罫は使わない。あれは版面の作法でなく、汎用テンプレートの顔になる。 ── */
.cta{
  position:relative; margin:2.4rem 0 0; max-width:none;
  background:var(--bg-white-card); border:1px solid rgba(140,74,46,.28);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:2rem 1.6rem 1.7rem;
}
/* 上辺に跨る印章ラベル。文字は :root の --cta-label（テンプレは触らない） */
.cta::before{
  content:var(--cta-label); position:absolute; top:-13px; left:22px;
  padding:.3rem 1rem; background:var(--sumi); color:var(--accent-light);
  font-family:var(--font-heading); font-weight:700; font-size:.78rem; letter-spacing:.18em;
  border-radius:3px; box-shadow:var(--shadow-seal); white-space:nowrap;
}
/* 右上の桝形 notch（clip-path を使わず、地の色の三角を重ねる） */
.cta::after{
  content:''; position:absolute; top:0; right:0; width:14px; height:14px;
  background:linear-gradient(135deg,transparent 50%,var(--bg-craft) 50%);
  border-top-right-radius:var(--radius-lg); pointer-events:none;
}
section + .cta{ margin-top:var(--gap) }
.cta-in{ max-width:none }
.cta-head{ display:flex; align-items:baseline; gap:.5rem 2rem; flex-wrap:wrap }
/* 申し込みボタン：墨地に accent の字、下に accent の「厚み」。ぼかし影で立てない */
.cta .apply{
  display:inline-block; font-family:var(--font-heading); font-weight:700;
  font-size:1rem; line-height:1.5; letter-spacing:.08em; text-decoration:none;
  color:var(--bg-craft-light); background:var(--accent); border-radius:4px;
  padding:.9rem 2.2rem; margin-top:1.3rem;
  box-shadow:0 4px 0 var(--accent-deep), 0 4px 12px rgba(26,22,20,.22);
  transition:transform .12s, box-shadow .12s, color .12s;
}
.cta .apply:hover{ transform:translateY(-2px); background:var(--accent-deep); color:#fff;
  box-shadow:0 6px 0 var(--sumi), 0 8px 20px rgba(26,22,20,.28) }
.cta .apply:active{ transform:translateY(2px);
  box-shadow:0 2px 0 var(--accent-deep), 0 2px 6px rgba(26,22,20,.2) }
.cta .apply:focus-visible{ outline:3px solid var(--accent-light); outline-offset:3px }
.cta .add{ margin:.6rem 0 0; font-size:1rem; font-weight:700;
  color:var(--sumi); max-width:none }
.cta .hours,.cta .who{ margin:.3rem 0 0; font-size:.88rem; color:var(--color-note); max-width:none }
.cta-in > .apply:first-child{ margin-top:.2rem }

/* ── 図版 ── */
.fig{ display:block; width:100%; height:auto; max-width:var(--measure); margin:1.6rem 0 1.8rem }
/* 角丸と影は写真だけに。インライン SVG は地が透明なので、影が「薄い枠」に見える */
img.fig{ border-radius:var(--radius); box-shadow:var(--shadow-card) }
.fig text{ font-family:inherit }
.fig-price{ margin-top:1rem }

/* ── 表：面を持たせず罫で組む（何もかもをカードにしない） ── */
table{ border-collapse:collapse; width:100%; max-width:var(--measure); margin:.4rem 0 1.5rem; font-size:.95rem }
table.wide{ max-width:none }
caption{ text-align:left; font-size:.86rem; color:var(--color-note); padding-bottom:.5rem }
table.ruled{ border-top:2px solid var(--accent) }
/* 左右に等しく余白を持たせ、両端だけ落とす。右パディング 0 だと隣の列にくっつく */
th,td{ text-align:left; padding:.75rem 1.1rem; border-bottom:1px solid var(--hair); vertical-align:top }
tr > :first-child{ padding-left:0 }
tr > :last-child{ padding-right:0 }
thead th{ border-bottom:2px solid var(--accent); font-size:.82rem; letter-spacing:.04em;
  color:var(--sumi); white-space:nowrap; padding-bottom:.55rem }
/* 見出しに字送りがあると、末尾の 1 文字ぶん右へ寄って下の数字と揃わない */
thead th.num{ letter-spacing:0 }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.yes{ color:var(--sumi); font-weight:700 } .no{ color:var(--color-brown-light) }

/* ── エリア一覧（索引・カード地） ── */
.area-group{ margin-bottom:2rem }
.area-group h4{ margin:1.6rem 0 .4rem; font-size:.8rem;
  letter-spacing:.14em; color:var(--color-note); font-weight:700 }
.list-head{ font-size:.98rem; font-weight:700; color:var(--sumi);
  margin:1.6rem 0 0; padding-bottom:.45rem; border-bottom:2px solid var(--accent) }
.area-list{ list-style:none; padding:0; margin:0; max-width:none;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(13.5rem,1fr)); gap:0 2rem }
.area-list li{ margin:0; border-bottom:1px solid var(--hair) }
.area-list a{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.62rem .2rem; text-decoration:none; color:var(--color-brown-dark) }
.area-list a:hover{ background:var(--bg-craft-light); color:var(--sumi) }
.area-list a:hover .n{ text-decoration:underline; text-decoration-color:var(--accent) }
.area-list .p{ font-size:.85rem; color:var(--color-note); font-variant-numeric:tabular-nums; white-space:nowrap }

/* ── FAQ：1 問 1 カード（family の .faq-item と同型） ── */
.qa{ max-width:var(--measure); background:var(--bg-white-card); border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow-card); padding:1.1rem 1.3rem; margin:.9rem 0 }
.qa .q{ font-weight:700; color:var(--sumi); font-size:1.02rem;
  line-height:1.55; margin:0 0 .6rem; border-left:3px solid var(--accent); padding-left:.75rem }
.qa p{ margin-bottom:.7em }
.qa p:last-child{ margin-bottom:0 }

/* ── 出典・注記 ── */
.src{ font-size:.82rem; color:var(--color-note); max-width:var(--measure) }
.src a{ color:var(--color-note) }

/* ── フッター ── */
footer{ background:var(--sumi); color:rgba(255,255,255,.7); border-top:3px solid var(--accent);
  margin-top:var(--gap); padding:2rem 0 2.4rem; font-size:.86rem }
footer .wrap{ max-width:var(--wrap) }
footer a{ color:var(--accent-light); text-decoration-color:rgba(255,255,255,.3) }
footer a:hover{ color:#fff }
footer nav{ margin-bottom:1rem; line-height:2 }
footer nav a{ margin-right:1.3rem }
.operator{ max-width:var(--measure) }
footer p:last-child{ margin-bottom:0 }
footer p{ max-width:var(--measure) }

/* ── 固定 CTA（画面下・全画面幅） ────
   ★ 帯そのものをリンクにしない。帯の中に独立したボタンを置く。 */
.sticky{ position:fixed; inset:auto 0 0 0; z-index:20;
  background:rgba(26,22,20,.97); border-top:2px solid var(--accent);
  box-shadow:0 -4px 14px rgba(0,0,0,.18) }
.sticky-in{ max-width:var(--wrap); margin:0 auto; padding:.6rem var(--edge);
  display:flex; align-items:center; justify-content:center; gap:1.3rem }
.sticky .lead{ margin:0; max-width:none; font-size:.9rem; color:#F5F1E8 }
.sticky .btn{ display:inline-flex; align-items:baseline; justify-content:center; gap:.55rem;
  padding:.7rem 1.7rem; border-radius:4px; line-height:1.4;   /* body の 1.9 を継承させない */
  font-family:var(--font-heading); letter-spacing:.06em;
  background:var(--accent-light); color:var(--sumi); font-weight:700; text-decoration:none;
  white-space:nowrap;
  box-shadow:0 3px 0 var(--accent);
  transition:background .15s, transform .1s, box-shadow .1s }
.sticky .btn:hover{ background:#fff }
.sticky .btn:active{ transform:translateY(2px); box-shadow:0 0 0 var(--accent) }
.sticky .btn:focus-visible{ outline:3px solid var(--accent-light); outline-offset:3px }
.sticky .sub{ font-size:.78rem; font-weight:400; color:var(--sumi); opacity:.68 }
/* 固定バーに隠れる分。バー実高 = 2 + 10 + [1+12+22+12+1] + 10 ≒ 70px に 14px の余裕 */
body{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)) }

/* ── 税理士（似顔絵は円形・透過。だから罫も円で回す）——shinkoku-sensei と同型 ── */
.person{ display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; max-width:var(--measure);
  background:var(--bg-white-card); border:1px solid var(--hair); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card); padding:1.4rem 1.5rem }
.portrait{ width:9.5rem; height:auto; border:2px solid var(--accent-light); border-radius:50%; flex:0 0 auto }
@media (max-width:30rem){ .portrait{ width:7.5rem } .person{ padding:1.1rem 1.1rem } }
/* ── 三択（いま、どの連絡が来ていますか）：白カードにラベルと 1 行。リンクはカード全体。上端の色罫は付けない ── */
.pick{ list-style:none; padding:0; margin:1rem 0 0; max-width:none;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.9rem }
.pick li{ margin:0 }
.pick a{ display:block; height:100%; text-decoration:none; color:var(--color-brown-dark);
  background:var(--bg-white-card); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:1rem 1.1rem 1rem;
  transition:transform .12s, box-shadow .12s }   /* 上端の accent 罫は 09-05 ユーザー指摘「AI デザインっぽい」で撤去 */
.pick a:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-hover); color:var(--sumi) }
.pick .k{ display:block; font-family:var(--font-heading); font-weight:700; font-size:1.02rem; color:var(--sumi); margin-bottom:.35rem }
.pick .d{ display:block; font-size:.88rem; color:var(--color-note); line-height:1.7 }
/* ── 60 分で決まること：番号つきの三段 ── */
.decide{ list-style:none; padding:0; margin:1rem 0 0; max-width:var(--measure); counter-reset:dec }
.decide li{ counter-increment:dec; position:relative; padding:.2rem 0 .9rem 2.6rem; margin:0; border-bottom:1px solid var(--hair) }
.decide li:last-child{ border-bottom:0 }
.decide li::before{ content:counter(dec); position:absolute; left:0; top:.25rem;
  width:1.8rem; height:1.8rem; display:inline-flex; align-items:center; justify-content:center;
  background:var(--sumi); color:var(--accent-light); font-family:var(--font-heading); font-weight:700;
  font-size:.86rem; border-radius:4px; box-shadow:var(--shadow-seal) }
.decide b{ display:block; font-size:1rem; margin-bottom:.15rem }
/* ── 逐語の引用（法令・国税庁 FAQ）：地は薄く、左に accent の罫、下に出典 ── */
.kb{ max-width:var(--measure); margin:1.2rem 0 1.4rem; padding:.9rem 1.1rem .8rem 1.2rem;
  background:var(--bg-craft-light); border-left:3px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0 }
.kb .kb-label{ display:block; font-family:var(--font-heading); font-weight:700; font-size:.8rem; letter-spacing:.06em;
  color:var(--accent-deep); margin-bottom:.4rem }
.kb .kb-q{ display:block; font-size:.9rem; color:var(--sumi); font-weight:700; margin-bottom:.4rem }
.kb .kb-body{ font-size:.9rem; line-height:1.85; color:var(--color-brown-dark); white-space:pre-line; margin:0 }
.kb .kb-src{ font-size:.78rem; color:var(--color-note); margin:.5rem 0 0 }
.kb .kb-src a{ color:var(--color-note) }
/* ── 加算税の率の表：数字は右寄せ・等幅。狭い画面では列見出しを各セルの前に出して畳む（.stack だと見出しが消えて率だけが並ぶ） ── */
table.rates td.num{ font-weight:700; color:var(--sumi) }
@media (max-width:34rem){
  table.rates thead{ display:none }
  table.rates, table.rates tbody, table.rates tr{ display:block; width:auto }
  table.rates tr{ border-bottom:1px solid var(--hair); padding:.55rem 0 }
  table.rates tr:last-child{ border-bottom:0 }
  table.rates td{ display:flex; justify-content:space-between; gap:1rem; border:0; padding:.2rem 0; white-space:normal }
  table.rates td:first-child{ display:block; font-weight:700; color:var(--sumi); padding-bottom:.35rem }
  table.rates td.num::before{ content:attr(data-label); font-weight:400; font-size:.8rem; color:var(--color-note); letter-spacing:.04em }
}
/* ── ガイド索引 ── */
.guide-list{ list-style:none; padding:0; margin:1rem 0 0; max-width:var(--measure) }
.guide-list li{ margin:0; border-bottom:1px solid var(--hair) }
.guide-list a{ display:block; padding:.9rem .2rem; text-decoration:none; color:var(--color-brown-dark) }
.guide-list a:hover{ background:var(--bg-craft-light); color:var(--sumi) }
.guide-list .t{ display:block; font-weight:700; color:var(--sumi) }
.guide-list .s{ display:block; font-size:.86rem; color:var(--color-note); margin-top:.15rem }

/* ── 狭い画面 ── */
@media (max-width:48rem){
  .sticky .lead{ display:none }
  .sticky-in{ padding:.55rem .8rem }
  .sticky .btn{ width:100% }
  .area-list{ grid-template-columns:1fr }
  .cta{ padding:1.5rem 1.2rem 1.6rem }
  .topbar .wrap{ flex-wrap:wrap; gap:0 .8rem; padding:.5rem 0; align-items:center }
  .brand{ font-size:.88rem; gap:.5rem }
  .brand span{ display:none }
  .navbtn{ display:inline-block; font-size:.78rem; letter-spacing:.06em; line-height:1.5;
    color:rgba(255,255,255,.9); border:1px solid var(--accent-light); border-radius:4px; padding:.24rem .7rem;
    cursor:pointer; white-space:nowrap; -webkit-user-select:none; user-select:none }
  .navtoggle:focus-visible + .navbtn{ outline:2px solid var(--accent-light); outline-offset:2px }
  /* 横スクロールで切ると『壊れている』と読まれる。切らずに畳む */
  .topbar nav{ display:none; flex:1 0 100% }
  .navtoggle:checked ~ nav{ display:block; margin-top:.5rem; border-top:1px solid rgba(255,255,255,.18) }
  .topbar nav a{ display:block; margin-left:0; padding:.68rem 0; font-size:.92rem;
    border-bottom:1px solid rgba(255,255,255,.14) }
  .topbar nav a:last-child{ border-bottom:0 }
  .price{ flex-wrap:wrap }
  .price .per{ flex:1 0 100%; margin-top:.15rem }
  .cta .hours span{ display:block }
}
@media (max-width:34rem){
  section > h2{ gap:.5rem }
  table{ font-size:.88rem }
  th,td{ padding:.62rem .7rem }
  thead th{ white-space:normal }
  td.num,th.num{ white-space:nowrap }
  /* 長文が入る 2 列の定義表は、横に並べず縦に積む */
  table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{ display:block; width:auto }
  table.stack tr{ border-bottom:1px solid var(--hair); padding:.6rem 0 }
  table.stack tr:last-child{ border-bottom:0 }
  table.stack th,table.stack td{ border:0; padding:0 }
  table.stack th{ font-size:.78rem; letter-spacing:.06em; color:var(--color-note) }
  table.stack td{ margin-top:.22rem }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important } html{ scroll-behavior:auto } }

/* ── 印刷（墨地は紙では反転させる） ── */
@media print{
  .sticky,.topbar nav{ display:none }
  body{ padding-bottom:0; background:#fff }
  a{ text-decoration:none }
  .topbar,footer{ background:transparent; color:var(--sumi); border-color:var(--sumi) }
  footer a{ color:var(--sumi) }
  .kicker{ background:transparent; color:var(--sumi); border:1px solid var(--sumi) }
  section > h2::before{ background:transparent; color:var(--sumi); border:1px solid var(--sumi) }
  .cta,.qa,.fig,.person{ box-shadow:none }
  .cta::before{ background:transparent; color:var(--sumi); border:1px solid var(--sumi); box-shadow:none }
  .cta::after{ display:none }
  .cta .apply{ background:transparent; color:var(--sumi); border:2px solid var(--sumi); box-shadow:none }
}