/* 和歌山お墓参り代行 — 白と濃墨に深緑一色。罫線と余白で組む。
   意匠は shinkoku-sensei の「A｜編集罫」を継承し、accent だけ替えた。
     ・帯と CTA は墨地。ページ内で最も強い面を「申し込みボタン」に与える
     ・表題の下に極太罫（5px）を通し、表紙をつくる
     ・章に連番を吊る（CSS counter。テンプレは番号を持たない）
     ・全幅は 100vw を使わず main のグリッドで取る（縦スクロールバーで横溢れしない）
   禁則：角丸・影・グラデーション・カード3列グリッド・外部フォント */

:root{
  --paper:#fdfdfa; --ink:#14181a; --muted:#5b6268;
  --rule:#dad9d2; --hair:#e9e8e1; --rule-strong:#14181a;
  --accent:#1f4a44; --accent-weak:#eef2f0;
  --band:#14181a; --band-ink:#fdfdfa;
  --band-mute:rgba(253,253,250,.72); --band-hair:rgba(253,253,250,.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:#101314; --ink:#eaeae6; --muted:#99a09f;
    --rule:#2b3132; --hair:#212627; --rule-strong:#eaeae6;
    --accent:#8fc0b6; --accent-weak:#172020;
    --band:#1a2021; --band-ink:#eaeae6;
    --band-mute:rgba(234,234,230,.72); --band-hair:rgba(234,234,230,.22); }
}

@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{
  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 }

/* ── 版面 ───────────────────────────── */
.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:.16em; 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.8rem,4.7vw,2.85rem); 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.2rem,2.85vw,1.58rem); 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;
}
main:not(:has(section:nth-of-type(2))) section > h2::before{ content:"" }
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-in > .apply:first-child{ margin-top:0 }

/* ── 写真 ───────────────────────────── */
/* 図版は本文段の幅に収める。全幅の大きな画像はチープに見える（PJ0005 の既定） */
figure{ margin:1.6rem 0 1.8rem; max-width:var(--measure) }
figure img{ width:100%; border:1px solid var(--hair) }
figcaption{ font-size:.82rem; color:var(--muted); margin-top:.5rem }

/* ── ビフォーアフター：同じ幅で並べ、上に札を貼る ── */
/* 2 枚が別々の大きさだと「同じ位置から撮った」が伝わらない。幅も比も揃える */
.ba{ max-width:var(--measure); margin:1.6rem 0 1.8rem }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem }
.ba-pair figure{ margin:0; max-width:none }
.ba-pair img{ aspect-ratio:4/3; object-fit:cover }
.ba-pair figcaption{ margin-top:.4rem; font-size:.76rem; letter-spacing:.12em; font-weight:700;
  color:var(--ink) }
.ba-pair figure:last-child figcaption{ color:var(--accent) }
.ba > figcaption{ font-size:.82rem; color:var(--muted); margin-top:.6rem }

/* ── 表 ─────────────────────────────── */
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 }
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 }
/* 右寄せセルは既定で右に余白を持たせる。最終列だけ 0 にする——
   1 列目を右寄せにしたとき（出張料｜市町村）に、数字と次の列が詰まって読めなくなる */
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; padding-right:1.6rem }
td.num:last-child,th.num:last-child{ padding-right:0 }
tr.hi td{ font-weight:700 }
.yes{ color:var(--ink); font-weight:700 } .no{ color:var(--muted) }

/* ── する／しない ───────────────────── */
/* 「しない」を薄くしない。線を引くことが値打ちであって、恥ずかしいことではない */
.items{ list-style:none; padding:0; margin:0 0 1.4rem; max-width:var(--measure);
  border-top:2px solid var(--rule-strong) }
.items li{ margin:0; padding:.85rem 0; border-bottom:1px solid var(--hair) }
.items b{ display:block; font-weight:700 }
.items span{ display:block; font-size:.9rem; color:var(--muted); margin-top:.15rem }
.items--not b::before{ content:"／"; color:var(--muted); margin-right:.3em; font-weight:400 }

/* ── 公営墓地の一覧 ─────────────────── */
.cem{ list-style:none; padding:0; margin:.2rem 0 1.2rem; max-width:var(--measure);
  display:flex; flex-wrap:wrap; gap:.4rem .5rem; font-size:.9rem }
.cem li{ margin:0; padding:.18rem .6rem; border:1px solid var(--rule); color:var(--ink) }

/* ── エリア一覧 ─────────────────────── */
.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 }
.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 }

/* ── フッター ───────────────────────── */
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 }
  .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 }
  /* 「1 回の基/本料金」と語の途中で折れていた。行を分ける */
  .price{ flex-wrap:wrap }
  .price .per{ flex:1 0 100%; margin-top:.15rem }
  .cta .hours span{ display:block }
  footer{ padding-bottom:5.5rem }
}
@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) }
}

/* 1 坪の図（写真ではないので images.json の管轄外・テンプレに直書き） */
.plan{ max-width:26rem; margin:1.4rem 0 1.6rem }
.plan svg{ width:100%; height:auto; display:block }
.plan svg text{ font-family:inherit; font-size:12px; fill:var(--muted); letter-spacing:.04em }
.plan svg .lbl text{ font-size:11px }
.plan figcaption{ font-size:.82rem; color:var(--muted); margin-top:.5rem }