/* 確定申告の先生 — 白と濃墨に藍一色。罫線と余白で組む。
   意匠 A｜編集罫（2026-08-05 採用）
     ・帯と CTA は墨地。ページ内で最も強い面を「申し込みボタン」に与える（2026-08-08 に電話番号から変更）
     ・表題の下に極太罫（5px）を通し、表紙をつくる
     ・章に連番を吊る（CSS counter。テンプレは触らない）
     ・全幅は 100vw を使わず main のグリッドで取る（縦スクロールバーで横溢れしないため）
   禁則：角丸・影・グラデーション・カード3列グリッド・外部フォント */

:root{
  --paper:#fffefb; --ink:#14161a; --muted:#5c626b;
  --rule:#dcd8d0; --hair:#eae6de; --rule-strong:#14161a;
  --accent:#173a63; --accent-weak:#eef1f6;
  /* 墨地の帯（帯・CTA・スマホ固定 CTA が共有する） */
  --band:#14161a; --band-ink:#fffefb;
  --band-mute:rgba(255,254,251,.72); --band-hair:rgba(255,254,251,.28);
  --measure:34rem; --wrap:60rem; --edge:1.2rem;
  --gutter:4.6rem; --gcol:1.6rem;   /* 連番の段と、その右の空き */
  --gap:clamp(2.5rem,6vw,4.5rem);
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#101215; --ink:#eceae6; --muted:#9aa0a8;
    --rule:#2c3037; --hair:#22262c; --rule-strong:#eceae6;
    --accent:#9dbbe0; --accent-weak:#181d25;
    /* 暗所では帯を「地より明るい墨」にする。地色と文字色を入れ替えると白い板になってしまう */
    --band:#1b2027; --band-ink:#eceae6;
    --band-mute:rgba(236,234,230,.72); --band-hair:rgba(236,234,230,.22); }
}

/* ── 見出し書体（Zen Kaku Gothic New Bold・SIL OFL）
   ビルド時に「見出しで実際に使う文字だけ」へ自動サブセット化（scripts/subset-font.py）。
   外部 CDN は 0 本。本文は端末の書体のまま。
   章の連番は h2::before なので h2 の指定を継承する（数字は subset の基本セットに入っている）── */
@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;
}
h1,h2,h3,.brand,.cta .apply,.price b,.price .unit,.fig-price text{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans",
              "Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  font-weight:700;
}
h1,h2{ letter-spacing:-.025em }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,system-ui,sans-serif;
  font-size:clamp(16px,1.9vw,17px); line-height:1.85;
  font-feature-settings:"palt" 1;
  counter-reset:sec;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--accent); text-underline-offset:.22em; text-decoration-thickness:1px }
a:hover{ text-decoration-thickness:2px }

/* ── 版面 ─────────────────────────────
   main だけ 4 本のトラックを持つグリッドにして、全幅（full）と本文幅（wrap）を名前で取る。
   .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) }

/* ── 帯（墨地・スクロール追従） ─────────── */
.topbar{ position:sticky; top:0; z-index:40; background:var(--band); color:var(--band-ink) }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.62rem 0 }
.brand{ flex:0 0 auto; font-weight:700; letter-spacing:.18em; font-size:.82rem;
  text-decoration:none; color:inherit; white-space:nowrap }
.brand span{ letter-spacing:0; font-weight:400; color:var(--band-mute) }
.topbar nav{ font-size:.8rem; color:var(--band-mute) }
.topbar nav a{ color:inherit; text-decoration:none; margin-left:1.1rem; white-space:nowrap }
.topbar nav a:hover{ color:var(--band-ink); text-decoration:underline }

/* ── 表題：肩見出し ＋ 極太罫 ─────────── */
.kicker{ font-size:.74rem; letter-spacing:.24em; color:var(--muted); margin:2.6rem 0 .95rem; max-width:none }
h1{
  font-size:clamp(1.85rem,4.8vw,2.9rem); line-height:1.28; letter-spacing:-.03em;
  font-weight:700; margin:2.6rem 0 0; max-width:22em;
  border-bottom:5px solid var(--rule-strong); padding-bottom:1.15rem;
}
.kicker + h1{ margin-top:0 }
h1 + .lede,h1 + p{ margin-top:1.5rem }
.lede{ font-size:clamp(1rem,2.2vw,1.12rem); color:var(--ink); max-width:var(--measure) }
p{ margin:0 0 1.15em; max-width:var(--measure) }
strong{ font-weight:700 }
ul,ol{ max-width:var(--measure); padding-left:1.3em }
li{ margin-bottom:.45em }
h3{ font-size:1.02rem; font-weight:700; margin:2rem 0 .6rem }

/* ── 章：太罫で切り、左に連番を吊る ────── */
section{
  counter-increment:sec;
  margin:var(--gap) 0 0;
  border-top:3px solid var(--rule-strong);
  padding-top:1.35rem;
  display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); column-gap:var(--gcol);
}
section > *{ grid-column:2 }
section > h2{
  grid-column:1 / 3;
  display:grid; grid-template-columns:var(--gutter) minmax(0,1fr); column-gap:var(--gcol);
  align-items:baseline;
  font-size:clamp(1.22rem,2.9vw,1.6rem); line-height:1.42; letter-spacing:-.02em;
  font-weight:700; margin:0 0 1.15rem; padding-top:0; border-top:0;
}
section > h2::before{
  content:counter(sec,decimal-leading-zero);
  color:var(--muted); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; font-size:.98em; line-height:1;
}
/* 章が 1 つしかないページ（404・特商法）で「01」だけが出るのを避ける。
   :has() 非対応の環境ではこの規則ごと無効になり、番号が出るだけで壊れない。 */
main:not(:has(section:nth-of-type(2))) section > h2::before{ content:"" }
/* 手順・章立てに属さない注記の節（flow の「いたずらのご予約について」など） */
section.note-sec{ counter-increment:none }
section.note-sec > h2::before{ content:"" }

/* ── 料金の数字 ───────────────────────── */
.price{ display:flex; align-items:baseline; gap:.35em; margin:0;
  font-variant-numeric:tabular-nums; letter-spacing:-.035em }
.price b{ font-size:clamp(2.4rem,7.6vw,4rem); font-weight:700; line-height:.95 }
.price .unit{ font-size:.98rem; font-weight:400; letter-spacing:0 }
.note{ font-size:.86rem; color:var(--muted); max-width:var(--measure) }
.price .per{ font-size:.9rem; font-weight:400; letter-spacing:0; color:var(--band-mute) }
.nb{ white-space:nowrap }
/* ☰ は狭い画面でだけ出す。広い画面ではナビを素のまま並べる */
.navtoggle{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.navbtn{ display:none }


/* ── CTA：墨地の全幅帯。ページ内で最も強い面 ── */
.cta{
  grid-column:full;
  display:grid; grid-template-columns:inherit;
  background:var(--band); color:var(--band-ink);
  margin:var(--gap) 0 0; padding:1.9rem 0 2rem; max-width:none;
}
.cta-in{ grid-column:wrap }
.cta-head{ display:flex; align-items:baseline; gap:.6rem 2.8rem; flex-wrap:wrap }
/* 申し込みボタン：墨地の上でいちばん強い面は「地と文字を入れ替えた塊」。罫でなく面で立てる */
.cta .apply{
  display:inline-block; font-size:clamp(1.2rem,3.9vw,1.6rem); font-weight:700; line-height:1.2;
  letter-spacing:.01em; text-decoration:none;
  color:var(--band); background:var(--band-ink);
  padding:.92rem 2.4rem; margin-top:1.15rem;
}
.cta .apply:hover{ color:var(--accent) }
.cta .add{ margin:.55rem 0 0; font-size:1.02rem; font-weight:700; color:var(--band-ink); max-width:none }
.cta .hours{ margin:.3rem 0 0; font-size:.9rem; color:var(--band-mute); max-width:none }
.cta .who{ margin:.25rem 0 0; font-size:.9rem; color:var(--band-mute); max-width:none }
/* 価格の無い CTA（下層ページ）はボタンだけになるので上の空きを落とす */
.cta-in > .apply:first-child{ margin-top:0 }

/* ── 図版（インライン SVG。<text> は DOM の実文字＝検索・読み上げに届く） ── */
/* 図版は本文段の幅に収める。全幅の大きな画像はチープに見える（ユーザー指摘・2026-08-04）。
   2026-08-08 に絵を写真へ差し替えたが、この幅の規律は据え置く */
.fig{ display:block; width:100%; height:auto; max-width:var(--measure); margin:1.6rem 0 1.8rem }
.fig text{ font-family:inherit }
.fig-price{ margin-top:1rem }

/* ── 表（横罫のみ・縞なし） ─────────────── */
table{ border-collapse:collapse; width:100%; margin:0 0 1.4rem; font-size:.95rem }
caption{ text-align:left; font-size:.86rem; color:var(--muted); padding-bottom:.5rem }
/* 見出しが表の内容を言い切っている表は caption も thead も持たない。
   その場合、面の頭を開く極太罫が無くなるので、表そのものに持たせる */
table.ruled{ border-top:2px solid var(--rule-strong) }
th,td{ text-align:left; padding:.7rem .8rem .7rem 0; border-bottom:1px solid var(--hair); vertical-align:top }
thead th{ border-bottom:2px solid var(--rule-strong); font-size:.8rem; letter-spacing:.1em;
  color:var(--muted); white-space:nowrap; padding-bottom:.5rem }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-right:0 }
.yes{ color:var(--ink); font-weight:700 } .no{ color:var(--muted) }

/* ── エリア一覧（カードでなく索引） ──────── */
.area-group{ margin-bottom:2rem }
.area-group h4{ margin:1.6rem 0 .35rem; font-size:.78rem; letter-spacing:.16em; color:var(--muted);
  font-weight:700 }
/* 一覧の小見出し。列見出しは grid が折り返すと位置が合わないので、面の頭に 1 回だけ置く。
   直下の群見出しより強くないと階層が逆さに見えるので、罫を引いて表の頭と同じ格にする */
.list-head{ font-size:.95rem; font-weight:700; margin:1.6rem 0 0; padding-bottom:.45rem;
  border-bottom:2px solid var(--rule-strong) }
.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:.6rem 0; text-decoration:none; color:inherit }
.area-list a:hover .n{ text-decoration:underline; text-decoration-color:var(--accent) }
.area-list .p{ font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }

/* ── FAQ ─────────────────────────────── */
.qa{ max-width:var(--measure); border-bottom:1px solid var(--hair); padding:1.15rem 0 }
.qa:first-of-type{ border-top:1px solid var(--hair) }
.qa .q{ font-weight:700; margin:0 0 .5rem }
.qa p:last-child{ margin-bottom:0 }

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

/* ── 税理士 ───────────────────────────── */
.person{ display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap; max-width:var(--measure) }
/* 似顔絵は円形に描かれ、円の外は透過。だから罫も円で回す。
   これは角丸禁則の例外ではない——四角い枠に円を収めると、
   暗所（--paper:#101215）で白い板が浮く。絵の輪郭に罫を合わせている */
.portrait{ width:9.5rem; height:auto; border:1px solid var(--rule); border-radius:50%; flex:0 0 auto }
@media (max-width:30rem){ .portrait{ width:7.5rem } }

/* ── フッター ─────────────────────────── */
footer{ border-top:3px solid var(--rule-strong); margin-top:0; padding:1.8rem 0 2.2rem;
  font-size:.86rem; color:var(--muted) }
footer a{ color:inherit }
footer nav{ margin-bottom:.9rem; line-height:2 }
footer nav a{ margin-right:1.3rem }
.operator{ max-width:var(--measure) }
footer p:last-child{ margin-bottom:0 }

/* ── スマホ固定 CTA（墨地で帯と揃える） ──── */
.sticky{ position:fixed; inset:auto 0 0 0; z-index:20; display:none;
  background:var(--band); color:var(--band-ink); border-top:1px solid var(--band-hair) }
.sticky a{ display:flex; justify-content:center; align-items:baseline; gap:.6rem;
  padding:.85rem 1rem; text-decoration:none; color:var(--band-ink); font-weight:700 }
.sticky .sub{ font-size:.78rem; font-weight:400; color:var(--band-mute) }

/* ── 狭い画面：連番の段を詰める ─────────── */
@media (max-width:52rem){ :root{ --gutter:3rem; --gcol:1.1rem } }
@media (max-width:48rem){
  .sticky{ display:block }
  .area-list{ grid-template-columns:1fr }
  /* ☰ に畳むのでヘッダーは 1 行。追従させても画面を食わない */
  .topbar .wrap{ flex-wrap:wrap; gap:0 .8rem; padding:.5rem 0; align-items:center }
  .brand{ font-size:.78rem; letter-spacing:.1em }
  .brand span{ display:none }                 /* 副題は落として 1 行に収める */
  .navbtn{ display:inline-block; font-size:.78rem; letter-spacing:.06em; line-height:1.5;
    color:var(--band-ink); border:1px solid var(--band-hair); padding:.2rem .6rem;
    cursor:pointer; white-space:nowrap; -webkit-user-select:none; user-select:none }
  .navtoggle:focus-visible + .navbtn{ outline:2px solid var(--band-ink); outline-offset:2px }
  /* 横スクロールで切ると『壊れている』と読まれる。切らずに畳む */
  .topbar nav{ display:none; flex:1 0 100% }
  .navtoggle:checked ~ nav{ display:block; margin-top:.5rem; border-top:1px solid var(--band-hair) }
  .topbar nav a{ display:block; margin-left:0; padding:.68rem 0; font-size:.92rem;
    color:var(--band-ink); border-bottom:1px solid var(--band-hair) }
  .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 }
  footer{ padding-bottom:5.5rem }             /* 下部固定 CTA の分はここでだけ確保する */
}
@media (max-width:34rem){
  :root{ --gutter:2.4rem; --gcol:.85rem }
  /* 横スクロールで逃がすと、切れた表は「壊れている」と読まれる。折り返して収める */
  table{ font-size:.88rem }
  th,td{ padding:.62rem .55rem .62rem 0 }
  thead th{ white-space:normal }
  td.num,th.num{ padding-right:.7rem; 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:.76rem; letter-spacing:.08em; color:var(--muted); font-weight:700 }
  table.stack td{ margin-top:.22rem }
}

/* ── 印刷（墨地は紙では反転させる） ─────── */
@media print{
  .sticky,.topbar nav{ display:none }
  a{ text-decoration:none }
  .topbar,.cta,.sticky{ background:transparent; color:var(--ink) }
  .cta{ border-top:3px solid var(--ink); border-bottom:3px solid var(--ink) }
  .cta .hours,.cta .add,.brand span{ color:var(--ink) }
  .cta .apply{ background:transparent; color:var(--ink); border:2px solid var(--ink); padding:.5rem 1.2rem }
  .topbar{ border-bottom:1px solid var(--ink) }
}