/*
Theme Name: 妖怪図鑑
Theme URI: https://youkaizukan.com/
Author: 妖怪図鑑編集部
Description: 妖怪図鑑のための自作テーマ。版画の輪郭線とベタ塗りを基調にする。グラデーションと角丸は使わない。
Version: 0.1.0
Text Domain: youkaizukan
*/

/* ══ トークン ══════════════════════════════════════
   色・影・線の定義はここに集約する。
   theme.json 側にも同じ値を置いてあり、ブロックエディタと揃う。 */
:root {
  --paper:   #F4F1E8;
  --card:    #FFFDF7;
  --ink:     #191A1F;
  --ink-mid: #5A5C66;
  --ink-dim: #93959E;
  --rule:    #DED8C8;
  --section-bg: #F8EEE9;

  /* サイトの主色。設定（config.php の color.accent）から上書きされる。
     ヘッダーの帯・ボタン・強調の数字・囲みなど、見た目の要に使う。
     既定は神図鑑の朱で、いままでの見た目と変わらない。 */
  --accent: #D93B2B;
  --link: #0645AD;

  /* 神話の識別色 */
  --jp: #D93B2B;
  --no: #2C7CA6;
  --gr: #C8901C;
  --eg: #1F8F72;
  --ce: #6152A8;

  /* 属性の色 */
  --a-sun:  #D9761B;
  --a-moon: #5B4E8C;
  --a-thun: #C9A012;
  --a-sea:  #226E96;
  --a-dead: #6E3560;
  --a-land: #3F7A38;
  --a-war:  #A8322A;
  --a-fire: #C1461C;

  --sh:    3px 3px 0 var(--ink);
  --sh-in: 1px 1px 0 var(--ink);

  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI",
          "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { max-width: 100%; }

body {
  margin: 0;
  max-width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 画面より広い要素を作らない。
   横にあふれるとページ全体が画面幅を超え、右下固定のボタンが
   表示領域の外へ出てしまうため、格子の最小幅は画面幅で頭打ちにする。 */
.kmz-cards, .kmz-works, .kmz-rellist, .kmz-famgrid,
.kmz-benefits, .kmz-toc-list { min-width: 0; }

a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.kmz-wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }

/* ══ ヘッダ ══════════════════════════════════════ */
.kmz-top { border-bottom: 2.5px solid var(--ink); background: var(--card); }
.kmz-top-in {
  max-width: 68rem; margin: 0 auto; padding: .8rem 1.25rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.kmz-logo {
  display: flex; align-items: center; gap: .55rem; margin-right: auto;
  font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; text-decoration: none;
}
.kmz-logo-mark {
  width: 2rem; height: 2rem; flex: none;
  border: 2.5px solid var(--ink); background: var(--accent);
  display: grid; place-items: center; color: #FFFDF7;
  font-size: .95rem; font-weight: 800; box-shadow: var(--sh-in);
}
.kmz-nav { display: flex; gap: .45rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.kmz-nav a {
  display: flex; align-items: center; gap: .4rem;
  border: 2.5px solid var(--ink); background: var(--card);
  padding: .3rem .7rem; font-size: .8rem; font-weight: 800;
  color: var(--ink-mid); text-decoration: none; box-shadow: var(--sh-in);
}
.kmz-nav a:hover { box-shadow: none; transform: translate(1px, 1px); }
.kmz-nav .dot { width: .55rem; height: .55rem; border: 1.5px solid var(--ink); }

/* 本文へ飛ばすリンク。ふだんは隠し、キーボードで進んだときだけ出す */
.kmz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #FFFDF7; padding: .6rem 1rem;
  border: 2.5px solid var(--ink); font-weight: 800; text-decoration: none;
}
.kmz-skip:focus { left: .5rem; top: .5rem; }

/* 開閉ボタン。広い画面では出さない */
.kmz-navbtn {
  display: none; align-items: center; gap: .45rem;
  border: 2.5px solid var(--ink); background: var(--card);
  padding: .38rem .7rem; font: inherit; font-size: .8rem; font-weight: 800;
  color: var(--ink); box-shadow: var(--sh-in); cursor: pointer;
}
.kmz-navbtn:hover { box-shadow: none; transform: translate(1px, 1px); }
.kmz-navbtn-bars { display: grid; gap: 3px; width: .95rem; }
.kmz-navbtn-bars span { display: block; height: 2.5px; background: var(--ink); }
.kmz-nav-wrap { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

@media (max-width: 46rem) {
  .kmz-navbtn { display: flex; }
  .kmz-nav-wrap {
    display: none; width: 100%; flex-direction: column;
    align-items: stretch; gap: .5rem; padding-top: .8rem;
  }
  .kmz-nav-wrap.is-open { display: flex; }
  .kmz-nav { flex-direction: column; gap: .4rem; }
  .kmz-nav a { justify-content: flex-start; padding: .6rem .8rem; font-size: .9rem; }
  /* JavaScript が動かない環境では、たたまずに全部出す */
  .no-js .kmz-nav-wrap { display: flex; }
  .no-js .kmz-navbtn { display: none; }
}

/* ══ 本文 ══════════════════════════════════════ */
.kmz-main { padding: 2rem 0 3rem; }
.kmz-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.kmz-lead { max-width: 34rem; line-height: 1.95; color: var(--ink-mid); }

.kmz-panel {
  border: 2.5px solid var(--ink); background: var(--card);
  box-shadow: var(--sh); padding: 1.3rem 1.4rem;
}

/* ══ トップの導入 ══════════════════════════════ */
.kmz-hero { padding: 0 0 1.5rem; }
.kmz-hero-title {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.3;
  margin: 0; text-wrap: balance;
}
.kmz-hero-lead {
  max-width: 32rem; margin: .8rem 0 0;
  font-size: .92rem; line-height: 1.95; color: var(--ink-mid);
}
.kmz-hero-meta {
  margin: .7rem 0 0; font-size: .74rem; font-weight: 800;
  letter-spacing: .06em; color: var(--ink-dim);
}
.kmz-hero-meta b { color: var(--accent); font-size: 1rem; }

.kmz-note {
  margin: 1rem 0 0; padding: .1rem 0 .1rem .8rem;
  border-left: 4px solid var(--gr);
  font-size: .82rem; line-height: 1.8; color: var(--ink-mid);
  max-width: 42rem;
}

/* ══ トップ：神話体系のカード ════════════════════ */
.kmz-pantheons {
  display: grid; gap: .7rem; margin: 1.4rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.kmz-pcard {
  display: block; padding: .85rem .95rem;
  border: 2.5px solid var(--ink); border-left-width: 8px; border-radius: 2px;
  background: var(--paper); color: inherit; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.kmz-pcard:hover, .kmz-pcard:focus-visible {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
}
.kmz-pcard-name {
  display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em;
}
.kmz-pcard-count {
  display: block; margin-top: .15rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--ink-dim);
}
.kmz-pcard-count b { font-size: .95rem; }
.kmz-pcard-gods {
  display: block; margin-top: .45rem;
  font-size: .74rem; line-height: 1.7; color: var(--ink-mid);
}
/* 体系の色は左端の帯で示す */
.kmz-pcard--japanese { border-left-color: var(--jp); }
.kmz-pcard--norse    { border-left-color: var(--no); }
.kmz-pcard--greek    { border-left-color: var(--gr); }
.kmz-pcard--egyptian { border-left-color: var(--eg); }
.kmz-pcard--celtic   { border-left-color: var(--ce); }
.kmz-pcard--japanese .kmz-pcard-count b { color: var(--jp); }
.kmz-pcard--norse    .kmz-pcard-count b { color: var(--no); }
.kmz-pcard--greek    .kmz-pcard-count b { color: var(--gr); }
.kmz-pcard--egyptian .kmz-pcard-count b { color: var(--eg); }
.kmz-pcard--celtic   .kmz-pcard-count b { color: var(--ce); }

/* ══ トップ：相関図の切り替え ════════════════════
   ラジオボタンと CSS だけで切り替える。JavaScript が動かなくても
   4体系ぶんの札（＝各神へのリンク）はすべて DOM に残る。 */
.kmz-graphs { margin-top: 1.6rem; }
.kmz-graphtabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.kmz-graphtab-in {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.kmz-graphtab {
  order: -1;                       /* ラベルだけを先頭に並べる */
  padding: .4rem .85rem; cursor: pointer;
  border: 2.5px solid var(--ink); border-radius: 2px;
  background: var(--paper);
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
  user-select: none;
}
.kmz-graphpane { display: none; width: 100%; }
.kmz-graphpane-more { margin: .7rem 0 0; font-size: .84rem; font-weight: 700; }

/* n番目のラジオが選ばれたら、n番目の図とラベルを出す */
.kmz-graphtabs > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.kmz-graphtabs > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.kmz-graphtabs > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.kmz-graphtabs > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.kmz-graphtabs > input:nth-of-type(5):checked ~ div:nth-of-type(5),
.kmz-graphtabs > input:nth-of-type(6):checked ~ div:nth-of-type(6) { display: block; }

.kmz-graphtabs > input:nth-of-type(1):checked ~ label:nth-of-type(1),
.kmz-graphtabs > input:nth-of-type(2):checked ~ label:nth-of-type(2),
.kmz-graphtabs > input:nth-of-type(3):checked ~ label:nth-of-type(3),
.kmz-graphtabs > input:nth-of-type(4):checked ~ label:nth-of-type(4),
.kmz-graphtabs > input:nth-of-type(5):checked ~ label:nth-of-type(5),
.kmz-graphtabs > input:nth-of-type(6):checked ~ label:nth-of-type(6) {
  background: var(--ink); color: var(--paper);
}
.kmz-graphtab-in:focus-visible + .kmz-graphtab {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ══ 神の個別ページ ══════════════════════════════ */
.kmz-h2 {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .8rem; padding-bottom: .4rem;
  border-bottom: 2.5px solid var(--ink);
}

.kmz-deity { border: 2.5px solid var(--ink); background: var(--card); box-shadow: var(--sh); }

.kmz-deity-hero {
  display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
  padding: 1.4rem 1.5rem; border-bottom: 2.5px solid var(--ink);
  color: #FFFDF7;
}
.kmz-deity-face {
  width: 4.6rem; height: 4.6rem; flex: none;
  border: 2.5px solid #FFFDF7; display: grid; place-items: center;
}
.kmz-deity-face .kmz-ico { width: 62%; height: 62%; }
.kmz-deity-face .kmz-ico * { stroke: #FFFDF7; }
.kmz-deity-face .kmz-ico .fl { fill: #FFFDF7; stroke: none; }
.kmz-deity-head {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 16rem;
}
.kmz-deity-eyebrow {
  margin: 0; font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; opacity: .88;
}
.kmz-deity-name {
  margin: .1rem 0 0; font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
  overflow-wrap: anywhere;
}
.kmz-deity-latin {
  margin: .25rem 0 0; font-size: .68rem; font-weight: 800;
  letter-spacing: .1em; opacity: .9;
}
.kmz-deity-kana { margin: .1rem 0 0; font-size: .64rem; font-weight: 700; opacity: .75; letter-spacing: .1em; }
.kmz-deity-chips { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .55rem; }
.kmz-deity-chips span {
  font-size: .62rem; font-weight: 800; padding: .08rem .42rem;
  border: 1.5px solid #FFFDF7; background: rgba(255,253,247,.2);
}
.kmz-deity-chips .ghost { background: transparent; }

.kmz-h2.is-gold { border-bottom-color: var(--gr); }
.kmz-lead-sm {
  margin: 0 0 .9rem; font-size: .84rem; line-height: 1.85;
  color: var(--ink-mid); max-width: 36rem;
}
.kmz-lead-sm b { color: var(--ink); }

.kmz-plainlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.kmz-plainlist li {
  font-size: .86rem; font-weight: 700; padding-left: .9rem; position: relative;
}
.kmz-plainlist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .42rem; height: .42rem; background: var(--accent);
}

.kmz-taglist { margin: 0 0 .6rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; }
.kmz-taglist li {
  font-size: .78rem; font-weight: 800;
  border: 2px solid var(--ink); background: var(--paper);
  padding: .12rem .5rem; box-shadow: var(--sh-in);
}

.kmz-deity-body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.kmz-deity-body > section { display: flex; flex-direction: column; }
.kmz-deity-body > section > .kmz-h2 {
  margin: 0 0 1rem;
  padding: .72rem .9rem .68rem 1rem;
  border-top: 4px solid var(--accent);
  border-bottom: 1.5px solid var(--rule);
  background: var(--section-bg);
  line-height: 1.55;
}
.kmz-deity-body > section > .kmz-h2.is-gold { border-top-color: var(--gr); }
.kmz-deity-body .kmz-split + .kmz-split { margin-top: .8rem; }
@media (max-width: 40rem) {
  .kmz-deity-body, .kmz-deity-hero { padding-left: 1.05rem; padding-right: 1.05rem; }
  .kmz-deity-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }
  .kmz-deity-head { width: 100%; }
  .kmz-deity-name { font-size: clamp(1.45rem, 7vw, 1.8rem); }
  .kmz-deity-body { gap: 2.25rem; }
  .kmz-deity-body > section > .kmz-h2 {
    margin-left: -.25rem; margin-right: -.25rem;
    padding: .68rem .72rem .64rem .82rem;
  }
}
.kmz-deity-sum {
  margin: 0; font-size: .95rem; font-weight: 800; line-height: 1.8;
  max-width: 34rem; padding-left: .85rem; border-left: 4px solid var(--ink);
}

/* 同じ題材を別の図鑑ではどう読むか。該当記事だけに出す。 */
.kmz-series-entry {
  margin: 1rem 0 1.35rem; padding: .75rem .85rem;
  border: 2px solid var(--ink); border-left-width: 7px;
  background: var(--paper); box-shadow: var(--sh-in);
}
.kmz-series-entry-head {
  margin: 0 0 .45rem; font-size: .7rem; font-weight: 900;
  letter-spacing: .08em; color: var(--ink-dim);
}
.kmz-series-entry a {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .45rem .55rem; border: 1.5px solid var(--ink);
  background: var(--card); color: var(--ink); text-decoration: none;
}
.kmz-series-entry a + a { margin-top: .4rem; }
.kmz-series-entry a:hover { background: var(--accent); color: var(--paper); }
.kmz-series-entry strong { flex: none; font-size: .78rem; }
.kmz-series-entry span { font-size: .72rem; line-height: 1.6; }
.kmz-deity-text { max-width: 34rem; }
.kmz-deity-text p { margin: 0 0 1.1rem; font-size: .94rem; line-height: 2; }
.kmz-deity-text p:last-child { margin-bottom: 0; }
/* 太字にマーカーは引かない。
   以前はすべての strong に山吹の帯を敷いていたため、
   単語ひとつにも一文まるごとにも同じ帯が付き、
   ページ全体が塗られたようになっていた。
   帯は ==マーカー==（.kmz-mark）だけの役目にする。 */

/* ── 異説の併記 ── */
.kmz-split { border: 2.5px solid var(--gr); }
.kmz-split-head {
  margin: 0; background: var(--gr); color: #16150E;
  border-bottom: 2.5px solid var(--ink);
  padding: .5rem .9rem; font-size: .9rem; font-weight: 800;
  letter-spacing: -.01em;
}
.kmz-split-cols { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 42rem) { .kmz-split-cols { grid-template-columns: 1fr; } }
.kmz-split-col { padding: .95rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.kmz-split-col + .kmz-split-col { border-left: 2.5px dashed var(--rule); }
@media (max-width: 42rem) {
  .kmz-split-col + .kmz-split-col { border-left: 0; border-top: 2.5px dashed var(--rule); }
}
.kmz-split-src { margin: 0; font-size: .95rem; font-weight: 800; }
.kmz-split-src em { font-style: normal; font-size: .64rem; color: var(--ink-dim); margin-left: .4rem; }
.kmz-split-loc { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .04em; color: var(--gr); }
.kmz-split-items { margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .18rem; }
.kmz-split-items li { font-size: .78rem; font-weight: 700; color: var(--ink-mid); }
.kmz-split-items b { color: var(--ink); }
.kmz-split-note {
  margin: .4rem 0 0; font-size: .78rem; line-height: 1.75; color: var(--ink-mid);
}

/* ── 関係の一覧 ── */
.kmz-rellist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}
.kmz-rellist li { display: grid; grid-template-columns: 4.6rem minmax(0,1fr); gap: .5rem; align-items: baseline; }

.kmz-after { margin-top: 2.2rem; }

/* ══ 本編（物語・神社・作品） ══════════════════ */
.kmz-h3 {
  font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 .6rem; display: flex; align-items: baseline; gap: .5rem;
  line-height: 1.45;
}
.kmz-h3-sm {
  font-size: .8rem; font-weight: 800; letter-spacing: .06em;
  margin: 0 0 .45rem; color: var(--ink-mid);
}
/* 章番号は装飾なので CSS の counter で描く。
   見出しのテキストには入れない（検索エンジンが読む文字列を汚さないため）。 */
.kmz-chapters { counter-reset: kmz-ch; }
.kmz-chapter { counter-increment: kmz-ch; }
.kmz-chapter > .kmz-h3::before {
  content: counter(kmz-ch);
  flex: none; width: 1.5rem; height: 1.5rem;
  background: var(--ink); color: var(--card);
  display: grid; place-items: center;
  font-size: .72rem; font-variant-numeric: tabular-nums;
}

.kmz-toc {
  margin: 0 0 1.4rem; padding: .85rem 1rem .85rem 2.4rem;
  border: 2.5px dashed var(--rule); background: var(--paper);
  display: flex; flex-direction: column; gap: .28rem;
  font-size: .82rem; font-weight: 700;
}
.kmz-toc a { color: var(--ink-mid); text-decoration: none; }
.kmz-toc a:hover { color: var(--accent); }

.kmz-chapter { padding: 0 0 1.4rem; }
.kmz-chapter + .kmz-chapter { border-top: 1.5px dashed var(--rule); padding-top: 1.3rem; }

.kmz-quote {
  margin: 0 0 1.1rem; padding: .7rem 0 .7rem 1rem;
  border-left: 5px solid var(--accent);
  font-size: 1rem; font-weight: 800; line-height: 1.9;
}

/* 用語の注釈 */
/* ══ 埋め込みフォーム ══════════════════════════
   Google フォームは外部ドメインなので、中身の高さを読めない。
   高さは固定で確保し、足りない分はフレームの中で縦に送ってもらう。 */
.kmz-form {
  margin: 1.2rem 0;
  border: 2.5px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  background: #FFF;
  overflow: hidden;
}
.kmz-form iframe { display: block; width: 100%; border: 0; }
.kmz-form-note { font-size: .78rem; line-height: 1.8; color: var(--ink-mid); }

/* ══ 強調の使い分け ════════════════════════════
   以前は「太字」しかなく、しかも太字すべてに山吹の帯を敷いていた。
   単語ひとつにも一文まるごとにも同じ帯が付き、ページが塗られたようになっていた。
   単位（単語か、文か）で役割を分ける。

     **太字**     … 単語。名前・用語を拾いやすくするだけ。帯は敷かない
     ==マーカー== … 文。覚えて帰ってほしい要点。1節に1回まで。帯を敷く
     !!注意!!     … 文。誤解しやすい点。朱にする
   引用（>）は枠そのものが強調なので、中では一切効かせない。 */
.kmz-warn { color: var(--accent); font-weight: 700; }
.kmz-mark {
  background: linear-gradient(transparent 60%, color-mix(in srgb, var(--gr) 38%, transparent) 60%);
  color: inherit; font-weight: 700;
}
.kmz-quote strong,
.kmz-quote .kmz-warn { font-weight: inherit; color: inherit; }
.kmz-quote .kmz-mark { background: none; font-weight: inherit; }

/* 本文中の神の名前から、その神のページへのリンク。
   用語の注釈（点線・山吹色）と見分けがつくよう、実線にする。 */
.kmz-inlink {
  color: inherit; text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .05em;
}
.kmz-inlink:hover { background: var(--accent); color: var(--paper); border-bottom-color: transparent; }
strong .kmz-inlink { border-bottom-width: 2.5px; }

.kmz-term { border-bottom: 2px dotted var(--gr); position: relative; cursor: help; }
.kmz-term-mark {
  font-style: normal; font-size: .58em; font-weight: 800;
  vertical-align: super; color: var(--gr); margin-left: .1em;
}
/* 吹き出しは display:none で完全に消す。
   visibility:hidden や opacity:0 だとレイアウト上は残るため、
   行の右寄りにある用語の吹き出しが画面の外へはみ出し、
   ページ全体に横スクロールが発生してしまう。
   横にあふれるとスマホで position:fixed の基準がずれ、
   右下のフロートボタンが画面の外に出てしまう。 */
.kmz-term::after {
  content: attr(data-tip);
  display: none;
  position: absolute; left: 0; top: calc(100% + .4rem); z-index: 20;
  width: min(17rem, 80vw);
  background: var(--ink); color: var(--card);
  border: 2px solid var(--ink);
  padding: .5rem .6rem; font-size: .74rem; font-weight: 700; line-height: 1.65;
  pointer-events: none;
}
.kmz-term:hover::after, .kmz-term:focus::after { display: block; }

/* 表 */
.kmz-table-scroll { overflow-x: auto; }
.kmz-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .84rem; }
.kmz-table th {
  text-align: left; font-size: .68rem; letter-spacing: .1em; font-weight: 800;
  color: var(--ink-dim); padding: 0 .8rem .45rem 0;
  border-bottom: 2.5px solid var(--ink); white-space: nowrap;
}
.kmz-table td { padding: .6rem .8rem .6rem 0; border-bottom: 1.5px dotted var(--rule); vertical-align: top; line-height: 1.75; }
.kmz-table .nowrap { white-space: nowrap; }
/* 行の見出し（左端の「日本」「ギリシャ」など）。
   上の .kmz-table th は列見出し向けの小さく淡い字なので、
   そのままだと行の見出しまで読めない大きさになる。本文と同じ字に戻す。 */
.kmz-table tbody th {
  font-size: .84rem; letter-spacing: 0; color: inherit;
  padding: .6rem .8rem .6rem 0;
  border-bottom: 1.5px dotted var(--rule);
  vertical-align: top; line-height: 1.75;
}
/* 表のなかの表組みは、本文の直後に来ることが多い */
.kmz-deity-text + .kmz-table-scroll { margin-top: 1.1rem; }

/* ══ 属性の一覧（/attribute/） ══════════════════ */
.kmz-acards {
  display: grid; gap: .7rem; margin-top: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.kmz-acard {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .85rem .95rem;
  border: 2.5px solid var(--ink); border-radius: 2px;
  background: var(--paper); color: inherit; text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.kmz-acard:hover, .kmz-acard:focus-visible {
  transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
}
.kmz-acard-face {
  flex: 0 0 auto; width: 2.9rem; aspect-ratio: 1 / 1;
  border: 2px solid var(--ink); display: grid; place-items: center;
}
.kmz-acard-face .kmz-ico { width: 62%; height: 62%; }
.kmz-acard-face .kmz-ico * { stroke: #FFFDF7; }
.kmz-acard-face .kmz-ico .fl { fill: #FFFDF7; stroke: none; }
.kmz-acard-body { min-width: 0; }
.kmz-acard-name {
  margin: 0 0 .3rem; font-size: 1rem; font-weight: 800; letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: .45rem;
}
.kmz-acard-name em {
  font-style: normal; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; color: var(--ink-dim);
}
.kmz-acard-desc {
  display: block; font-size: .76rem; line-height: 1.75; color: var(--ink-mid);
}

/* 家族 */
.kmz-famgrid {
  display: grid; gap: .7rem; margin-bottom: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.kmz-fam { border: 2.5px solid var(--ink); background: var(--paper); padding: .6rem .7rem; box-shadow: var(--sh-in); }
.kmz-fam-h { margin: 0; font-weight: 800; }
.kmz-fam-h .kmz-label { margin-bottom: .18rem; }
.kmz-fam em { font-style: normal; font-size: .62rem; color: var(--ink-dim); margin-left: .25rem; font-weight: 700; }

/* 神社 */
.kmz-shrine { border: 2.5px solid var(--ink); background: var(--paper); padding: 1rem 1.1rem; box-shadow: var(--sh-in); }
.kmz-shrine + .kmz-shrine { margin-top: .8rem; }
.kmz-shrine-name { display: block; margin-bottom: .2rem; }
.kmz-shrine-read { display: block; font-size: .6rem; font-weight: 800; letter-spacing: .12em; color: var(--ink-dim); margin-top: .1rem; }
.kmz-shrine-rank {
  margin: 0 0 .6rem; display: inline-block;
  font-size: .64rem; font-weight: 800; background: var(--ink); color: var(--card);
  padding: .1rem .45rem;
}
/* 見た目は2列の行のまま。見出しにはラベルと値の両方が入っている。 */
.kmz-shrine-facts { margin: 0 0 .8rem; }
.kmz-fact { padding: .3rem 0; border-bottom: 1.5px dotted var(--rule); }
.kmz-fact .kmz-h4 {
  margin: 0;
  display: grid; grid-template-columns: 6.4rem minmax(0, 1fr);
  gap: .5rem; align-items: baseline;
}
.kmz-fact .kmz-label {
  font-size: .7rem; font-weight: 800; color: var(--ink-dim);
  letter-spacing: 0; line-height: 1.7;
}
.kmz-fact .kmz-value { font-size: .82rem; font-weight: 700; line-height: 1.7; }
@media (max-width: 30rem) {
  .kmz-fact .kmz-h4 { grid-template-columns: 1fr; gap: .05rem; }
}

.kmz-map {
  float: right; margin: .15rem 0 .2rem .5rem;
  font-size: .66rem; font-weight: 800; text-decoration: none;
  border: 2px solid var(--no); color: var(--no); padding: 0 .35rem;
  white-space: nowrap;
}
.kmz-map:hover { background: var(--no); color: #FFFDF7; }
.kmz-fact::after { content: ""; display: block; clear: both; }
.kmz-fact-list {
  max-width: 34rem; margin: .8rem 0 1.2rem;
  border-top: 1.5px dotted var(--rule);
}
.kmz-fact-list .kmz-fact { padding: .5rem 0; }
.kmz-fact-note {
  margin: .18rem 0 0; font-size: .76rem; line-height: 1.75;
  color: var(--ink-mid);
}
.kmz-shrine-extra {
  margin: .6rem 0 0; font-size: .78rem; line-height: 1.75; color: var(--ink-mid);
  border-left: 4px solid var(--gr); padding-left: .7rem;
}

/* 姉妹図鑑の伝承地域・所在地・寺。固有施設への広告導線は置かず、
   原稿で確認した地域情報と地図、出典だけを見せる。 */
.kmz-deity-text a,
.kmz-reference-list a,
.kmz-work-item > p > a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.kmz-reference-list {
  margin: 0;
  padding-left: 1.45rem;
  font-size: .82rem;
  line-height: 1.65;
}
.kmz-reference-list li + li { margin-top: .45rem; }
.kmz-reference-note {
  margin: 0 0 .45rem;
  color: var(--ink-mid);
  font-size: .76rem;
  line-height: 1.7;
}

/* ══ 行き方をさがす（開閉） ══════════════════════
   <details> で作る。JavaScript を使わないので必ず開ける。 */
.kmz-travel { margin: .8rem 0 0; }
.kmz-travel-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; cursor: pointer; list-style: none;
  border: 2.5px solid var(--ink); border-radius: 2px;
  background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  font-size: .82rem; font-weight: 800; letter-spacing: -.01em;
  transition: transform .12s, box-shadow .12s;
}
.kmz-travel-btn::-webkit-details-marker { display: none; }
.kmz-travel-btn::after {
  content: '▾'; font-size: .7rem; transition: transform .15s;
}
.kmz-travel[open] .kmz-travel-btn::after { transform: rotate(180deg); }
.kmz-travel-btn:hover {
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink);
}

/* ── 押されてから中身を作る形（/shrine/ 専用） ──
   神社の一覧は255か所を1枚に並べる。神ページと同じ「開いた形」で
   書き出すと、外部リンクが424本になり HTML が600KBを超えた。
   読み手が押すのはそのうち1つか2つなので、押されてから作る。

   <details> ではなく <div>＋<button> になるため、
   ・summary 用の見た目を button にも当てる
   ・[open] の代わりに .is-open で開いた印を付ける
   の2つを足す。button は既定の見た目が付くので、そこも消す。 */
.kmz-travel.is-lazy > .kmz-travel-btn {
  font-family: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
}
.kmz-travel.is-lazy.is-open .kmz-travel-btn::after { transform: rotate(180deg); }
/* 作る前は中身が無いので、閉じている状態は body ごと出さない */
.kmz-travel.is-lazy:not(.is-open) .kmz-travel-body { display: none; }
.kmz-travel-body {
  margin-top: .6rem; padding: .8rem .9rem;
  border: 2px solid var(--rule); border-radius: 2px;
  background: color-mix(in srgb, var(--paper) 92%, var(--ink));
}
@media (prefers-reduced-motion: reduce) {
  .kmz-travel-btn, .kmz-travel-btn::after { transition: none; }
}
.kmz-travel-lead {
  margin: 0 0 .6rem; font-size: .78rem; line-height: 1.7; color: var(--ink-mid);
}
.kmz-travel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.kmz-travel-list a {
  display: block; padding: .5rem .7rem;
  border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--paper); text-decoration: none;
  font-size: .84rem; font-weight: 700;
}
.kmz-travel-list a::after { content: ' →'; color: var(--ink-dim); }
.kmz-travel-list a:hover { background: var(--ink); color: var(--paper); }
.kmz-travel-list a:hover::after { color: inherit; }
.kmz-travel-ad {
  margin: .6rem 0 0; font-size: .68rem; letter-spacing: .04em; color: var(--ink-dim);
}

/* 漢字表記 */
.kmz-notations { display: flex; flex-direction: column; }
.kmz-notation { border-bottom: 1.5px dashed var(--rule); padding: .7rem 0; }
.kmz-notation:last-child { border-bottom: 0; }
.kmz-h3-form {
  margin: 0 0 .25rem; font-size: 1rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.5;
  border-left: 4px solid var(--ink); padding-left: .55rem;
}
.kmz-notation p {
  margin: 0; padding-left: .55rem;
  font-size: .82rem; line-height: 1.8; color: var(--ink-mid);
}

/* ラベル＋値の見出し。
   見出しのテキストに値まで含める（「氷川神社のご利益：厄除け…」）。
   見た目はラベルを小さく上に、値を通常の大きさで下に置く。 */
.kmz-label {
  display: block;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em;
  color: var(--ink-dim);
}
.kmz-value {
  display: block;
  font-size: .86rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--ink); line-height: 1.7;
}
.kmz-dot { color: var(--ink-dim); font-weight: 400; margin: 0 .1rem; }

/* H4 共通（神社の行の中では上書きされる） */
.kmz-h4 { margin: .6rem 0 .1rem; font-weight: 800; }
.kmz-h4:first-child { margin-top: 0; }

/* ご利益 */
.kmz-benefits { display: flex; flex-direction: column; gap: .55rem; }
.kmz-benefit { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: .8rem; align-items: baseline; }
@media (max-width: 34rem) { .kmz-benefit { grid-template-columns: 1fr; gap: .1rem; } }
.kmz-h3-benefit {
  margin: 0; font-size: .86rem; font-weight: 800; line-height: 1.6;
  border-left: 4px solid var(--accent); padding-left: .5rem;
}
.kmz-benefit p { margin: 0; font-size: .8rem; line-height: 1.75; color: var(--ink-mid); }

/* 作品 */
.kmz-works { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.kmz-work { border: 2.5px solid var(--ink); background: var(--paper); padding: .85rem .95rem; box-shadow: var(--sh-in); }
.kmz-work-item { padding: .45rem 0; }
.kmz-work-item + .kmz-work-item { border-top: 1.5px dotted var(--rule); }
.kmz-work-item .kmz-h4 {
  font-size: .84rem; color: var(--ink); letter-spacing: -.01em; margin-bottom: .2rem;
}
.kmz-work-item p { margin: 0; font-size: .78rem; line-height: 1.75; color: var(--ink-mid); }

/* 作品を探しにいく線。
   説明の下に小さく置く。見出しを広告リンクにしない代わりの導線なので、
   本文より弱く、けれど押せると分かる濃さにする。
   すぐ上の .kmz-work-item p が (0,1,1) で余白を持っているので、
   こちらは要素まで含めて (0,2,1) にしないと勝てない。 */
.kmz-work-item p.kmz-work-shop { margin: .35rem 0 0; font-size: .74rem; }
.kmz-work-shop a {
  font-weight: 800; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; text-decoration-color: var(--gr);
}
.kmz-work-shop a:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* 広告であることの表示。Amazon アソシエイトが掲出を求めている一文 */
.kmz-work-note {
  margin: .8rem 0 0; font-size: .68rem; line-height: 1.7; color: var(--ink-dim);
}

/* FAQ */
.kmz-faq { display: flex; flex-direction: column; }
.kmz-faq-item { border-bottom: 1.5px dashed var(--rule); padding: .75rem 0; }
.kmz-h3-q {
  margin: 0 0 .3rem; font-size: .88rem; font-weight: 800; line-height: 1.6;
  padding-left: 1.4rem; position: relative;
}
.kmz-h3-q::before {
  content: "Q"; position: absolute; left: 0; top: 0;
  font-size: .8rem; color: var(--accent);
}
.kmz-faq-item p { margin: 0; font-size: .84rem; line-height: 1.85; color: var(--ink-mid); padding-left: 1.4rem; }

/* 用語（見た目は元のまま。出力は見出しにする） */
.kmz-gloss-item { border-bottom: 1.5px dashed var(--rule); padding: .7rem 0; }
.kmz-h3-term {
  margin: 0; font-size: .86rem; font-weight: 800; line-height: 1.6;
}
.kmz-h3-term em {
  font-style: normal; font-size: .64rem; font-weight: 700;
  color: var(--ink-dim); margin-left: .15rem;
}
.kmz-gloss-item p {
  margin: .15rem 0 0; font-size: .82rem; line-height: 1.8; color: var(--ink-mid);
}
.kmz-glossary dt { font-size: .86rem; font-weight: 800; }
.kmz-glossary dt em { font-style: normal; font-size: .64rem; color: var(--ink-dim); margin-left: .5rem; }
.kmz-glossary dd { margin: .15rem 0 0; font-size: .82rem; line-height: 1.8; color: var(--ink-mid); }

/* ══ 一覧ページ ══════════════════════════════════ */
.kmz-arch-head { padding: 0 0 1.4rem; }
.kmz-arch-title {
  margin: 0; font-size: clamp(1.5rem, 4.5vw, 2.2rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.3; text-wrap: balance;
}
.kmz-arch-lead {
  margin: .7rem 0 0; max-width: 36rem;
  font-size: .88rem; line-height: 1.95; color: var(--ink-mid);
}
.kmz-arch-lead b { color: var(--accent); }

.kmz-filters { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: 2rem; }
.kmz-filters-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
  color: var(--ink-dim); margin-right: .3rem;
}
.kmz-filter {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 2.5px solid var(--ink); background: var(--card);
  padding: .22rem .55rem; font-size: .76rem; font-weight: 800;
  text-decoration: none; color: var(--ink); box-shadow: var(--sh-in);
  transition: transform .1s, box-shadow .1s;
}
.kmz-filter:hover { box-shadow: none; transform: translate(1px, 1px); }
.kmz-filter i { width: .55rem; height: .55rem; border: 1.5px solid var(--ink); flex: none; }
.kmz-filter em { font-style: normal; font-size: .64rem; color: var(--ink-dim); }

.kmz-arch-sect { margin-bottom: 2.6rem; }
.kmz-tier-block { margin-bottom: 2rem; }

/* 段階の区切り。黒帯にして節の切れ目をはっきりさせる */
.kmz-h2.is-band {
  background: var(--ink); color: var(--card);
  border-bottom: 0; box-shadow: var(--sh-in);
  padding: .5rem .8rem; margin-bottom: .7rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.kmz-h2.is-band .kmz-h2-count { color: var(--card); opacity: .7; margin-left: auto; }
/* 属性でさがす。
   出力は H3（属性名）＋ H4（神名）だが、見た目は
   ラベルと値が並ぶ2列の行のままにする。 */
.kmz-attr-row {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr);
  gap: .5rem; align-items: baseline;
  padding: .35rem 0; border-bottom: 1.5px dotted var(--rule);
}
.kmz-attr-row > .kmz-label { margin: 0; }
.kmz-attr-gods { display: block; line-height: 1.9; }
.kmz-attr-gods h4 {
  display: inline; margin: 0;
  font-size: .84rem; font-weight: 800; letter-spacing: -.01em;
}
@media (max-width: 30rem) {
  .kmz-attr-row { grid-template-columns: 1fr; gap: .05rem; }
}

.kmz-flow-gods {
  margin: .5rem 0 0; padding: .5rem .7rem;
  background: var(--paper); border: 2px dashed var(--rule);
  font-size: .82rem; font-weight: 800;
}
.kmz-flow-gods .kmz-label { margin-bottom: .15rem; }
.kmz-src-year {
  font-size: .64rem; font-weight: 800; color: var(--ink-dim);
  margin-left: .5rem; letter-spacing: .04em;
}
.kmz-h2-count {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  color: var(--ink-dim); margin-left: .5rem;
}

.kmz-cards {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
}
.kmz-card {
  position: relative; display: flex; flex-direction: column; gap: .38rem;
  border: 2.5px solid var(--ink); background: var(--card);
  padding: .55rem .55rem .65rem; box-shadow: var(--sh);
  text-decoration: none; color: inherit;
  transition: transform .1s, box-shadow .1s;
}
.kmz-card:hover { box-shadow: var(--sh-in); transform: translate(2px, 2px); }
.kmz-card-tier {
  position: absolute; top: -2.5px; right: -2.5px; z-index: 1;
  font-size: .56rem; font-weight: 800; letter-spacing: .04em;
  background: var(--ink); color: var(--card); padding: .1rem .35rem;
}
.kmz-card-face {
  aspect-ratio: 1 / 1; border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.kmz-card-face .kmz-ico { width: 62%; height: 62%; }
.kmz-card-face .kmz-ico * { stroke: #FFFDF7; }
.kmz-card-face .kmz-ico .fl { fill: #FFFDF7; stroke: none; }
/* カードの神名は h3。見た目は元のまま */
.kmz-card-name {
  margin: 0; font-size: .87rem; font-weight: 800;
  line-height: 1.3; letter-spacing: -.02em;
}
.kmz-card-latin {
  font-size: .55rem; font-weight: 800; color: var(--ink-dim);
  letter-spacing: .06em; margin-top: -.3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kmz-card-chips { display: flex; flex-wrap: wrap; gap: .2rem; }
.kmz-card-chips span {
  font-size: .58rem; font-weight: 800; padding: .04rem .3rem;
  border: 1.5px solid var(--ink); color: #FFFDF7;
}
.kmz-card-chips .ghost { background: transparent; color: var(--ink-mid); }

/* ══ フッタ ══════════════════════════════════════ */
.kmz-foot {
  border-top: 2.5px solid var(--ink); background: var(--card);
  padding: 1.8rem 0 2.5rem; font-size: .78rem; color: var(--ink-dim);
}
.kmz-foot-nav { margin: 0 0 1.2rem; }
.kmz-foot-h {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; color: var(--ink-mid);
}
.kmz-foot-nav ul {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  list-style: none; margin: 0; padding: 0;
}
.kmz-foot-nav a {
  display: flex; align-items: center; gap: .35rem;
  border: 2px solid var(--ink); background: var(--paper);
  padding: .28rem .6rem; font-size: .78rem; font-weight: 700;
  color: var(--ink-mid); text-decoration: none;
}
.kmz-foot-nav a:hover { background: var(--card); }
.kmz-foot-nav .dot { width: .5rem; height: .5rem; border: 1.5px solid var(--ink); }
.kmz-foot-note { margin: 0 0 1rem; line-height: 1.8; }
.kmz-copy { margin: 0; padding-top: .9rem; border-top: 1.5px solid var(--rule); }

/* ══ 固定ページ ══════════════════════════════════ */
.kmz-page-head { margin-bottom: 1.5rem; }
.kmz-crumbs {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  font-size: .75rem; color: var(--ink-dim); margin-bottom: .7rem;
}
.kmz-crumbs a { color: var(--ink-mid); }
.kmz-page-title {
  font-size: clamp(1.5rem, 4.5vw, 2rem); font-weight: 800;
  letter-spacing: -.02em; margin: 0 0 .6rem; text-wrap: balance;
}
.kmz-page-body table {
  width: 100%; border-collapse: collapse; margin: 1rem 0;
  border: 2.5px solid var(--ink); background: var(--card);
}
.kmz-page-body th, .kmz-page-body td {
  border: 1.5px solid var(--rule); padding: .6rem .8rem;
  font-size: .88rem; text-align: left; vertical-align: top;
}
.kmz-page-body th {
  width: 30%; white-space: nowrap; background: var(--paper);
  font-weight: 800; color: var(--ink-mid);
}
.kmz-page-body h2 {
  font-size: 1.15rem; font-weight: 800; margin: 2rem 0 .8rem;
  padding-bottom: .4rem; border-bottom: 2.5px solid var(--ink);
}
.kmz-page-body h3 { font-size: 1rem; font-weight: 800; margin: 1.4rem 0 .5rem; }
.kmz-page-body ul { padding-left: 1.2rem; line-height: 1.9; }
.kmz-page-body p { line-height: 1.9; }
.kmz-page-updated {
  margin-top: 2rem; padding-top: .8rem; border-top: 1.5px solid var(--rule);
  font-size: .78rem; color: var(--ink-dim);
}

/* ══ 見つからないページ ══════════════════════════ */
.kmz-404 { padding: 1rem 0 2rem; }
.kmz-404-mark {
  display: inline-block; margin: 0 0 .8rem;
  border: 2.5px solid var(--ink); background: var(--accent); color: #FFFDF7;
  padding: .3rem .8rem; font-size: .8rem; font-weight: 800;
  box-shadow: var(--sh-in);
}
.kmz-404-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.8rem; padding: 0;
}
.kmz-404-list a {
  display: flex; align-items: center; gap: .5rem;
  border: 2.5px solid var(--ink); background: var(--card);
  padding: .5rem .9rem; font-weight: 800; text-decoration: none;
  color: var(--ink); box-shadow: var(--sh-in);
}
.kmz-404-list em { font-style: normal; font-size: .75rem; color: var(--ink-dim); }
.kmz-404-back { margin-top: 2rem; }
.kmz-btn {
  display: inline-block; border: 2.5px solid var(--ink); background: var(--accent);
  color: #FFFDF7; padding: .7rem 1.4rem; font-weight: 800;
  text-decoration: none; box-shadow: var(--sh);
}
.kmz-btn:hover { box-shadow: none; transform: translate(2px, 2px); }

/* ══ 暗い配色 ══════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15161A; --card: #1E2026; --ink: #EFEBE0;
    --ink-mid: #A9AAB4; --ink-dim: #74767F; --rule: #33353D;
    --jp: #F05643; --no: #4A9ECB; --gr: #E0AC34; --eg: #31AF8C; --ce: #8272CC;
    --a-sun: #EE8F31; --a-moon: #8375BC; --a-thun: #E3BB2C; --a-sea: #3B8FB8;
    --a-dead: #A05C90; --a-land: #5C9F53; --a-war: #D2544A; --a-fire: #E0653A;
    --sh: 3px 3px 0 #000; --sh-in: 1px 1px 0 #000;
  }
}

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

/* ══ 横あふれの最終防止 ══════════════════════════
   スマホでは、ページが画面より1pxでも広くなると
   position:fixed の基準がずれてフロートボタンが画面外へ出る。
   絶対配置の要素が右へはみ出しても影響が出ないよう、
   本文の器で切り取っておく。 */
.kmz-main { overflow-x: clip; }
.kmz-deity-text, .kmz-chapter, .kmz-deity-body { min-width: 0; }
/* ══ 神の姿を描いた図 ════════════════════════════
   実物の版画・図譜を出す。生成した絵ではないので、
   出典（作者・作品名・年・ライセンス）を必ず添える。 */
.kmz-deity-figure {
  margin: 1.4rem 0 1.6rem;
  max-width: 22rem;
}
.kmz-deity-figure img {
  display: block; width: 100%; height: auto;
  border: 2.5px solid var(--ink); border-radius: 2px;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--card);
}
.kmz-credit {
  margin: .55rem 0 0; font-size: .68rem; line-height: 1.7;
  color: var(--ink-dim); letter-spacing: .01em;
}
.kmz-credit a { color: var(--ink-mid); }
/* 一覧のカードに絵を出す場合の受け皿。いまは線画のままにしている */
.kmz-card-face.has-img { padding: 0; overflow: hidden; }
.kmz-card-face.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ══ あなたに合う神様（/shindan/） ════════════════
   事務的な絞り込みには見せない。1問ずつ大きく出し、
   結果は御札に見立てた札にする。人に見せたくなる形にするため。 */
.kmz-sd-wrap { max-width: 44rem; }

.kmz-sd-head { text-align: center; padding: 1.6rem 0 2rem; }
.kmz-sd-eyebrow {
  display: inline-block; margin: 0 0 .7rem;
  border: 2px solid var(--ink); padding: .18rem .6rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em;
}
.kmz-sd-title {
  font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 800;
  letter-spacing: -.03em; margin: 0; text-wrap: balance;
}
.kmz-sd-lead { margin: .9rem 0 0; font-size: .88rem; line-height: 2; color: var(--ink-mid); }

/* ── 設問。1問ずつ全画面で出す ── */
.kmz-sd-stage { position: relative; min-height: 22rem; }
.kmz-sd-step { display: none; animation: kmz-sd-in .28s ease both; }
.kmz-sd-step.is-on { display: block; }
@keyframes kmz-sd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.kmz-sd-count {
  margin: 0 0 .5rem; font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; color: var(--ink-dim);
}
.kmz-sd-count b { font-size: 1.5rem; color: var(--accent); letter-spacing: -.02em; }
.kmz-sd-q {
  margin: 0 0 .3rem; font-size: clamp(1.2rem, 4.6vw, 1.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.5; text-wrap: balance;
}
.kmz-sd-sub { margin: 0 0 1.2rem; font-size: .78rem; color: var(--ink-dim); }

.kmz-sd-opts {
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.kmz-sd-opt {
  border: 2.5px solid var(--ink); background: var(--card); color: inherit;
  padding: .95rem 1rem; font: inherit; font-size: .96rem; font-weight: 700;
  text-align: left; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; border-radius: 2px;
  transition: transform .1s, box-shadow .1s, background .1s;
}
.kmz-sd-opt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.kmz-sd-opt.is-on { background: var(--accent); color: #FFFDF7; transform: translate(2px, 2px); box-shadow: none; }
.kmz-sd-back {
  margin-top: 1.4rem; border: 0; background: none; color: var(--ink-mid);
  font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; padding: 0;
}

/* 進み具合 */
.kmz-sd-bar { height: 6px; border: 2.5px solid var(--ink); background: var(--card); margin-top: 2rem; }
.kmz-sd-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

/* さがしている間。おみくじの筒を振る見立て */
.kmz-sd-wait { text-align: center; padding: 3.5rem 0; }
.kmz-sd-omikuji { display: flex; justify-content: center; gap: .5rem; }
.kmz-sd-omikuji span {
  width: 10px; height: 46px; background: var(--card);
  border: 2.5px solid var(--ink); animation: kmz-sd-draw .9s ease-in-out infinite;
}
.kmz-sd-omikuji span:nth-child(2) { animation-delay: .15s; }
.kmz-sd-omikuji span:nth-child(3) { animation-delay: .3s; }
@keyframes kmz-sd-draw { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.kmz-sd-waittext {
  margin: 1.2rem 0 0; font-size: .84rem; font-weight: 800;
  letter-spacing: .1em; color: var(--ink-mid);
}

/* ── 御札 ──
   本文は角ゴシックだが、ここだけ明朝にする。
   札に見せるための切り替えで、他へは波及させない。 */
.kmz-fuda {
  position: relative; margin: 0 auto; max-width: 22rem;
  background: var(--card); border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); padding: .5rem;
  animation: kmz-fuda-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes kmz-fuda-in {
  from { opacity: 0; transform: scale(.94) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.kmz-fuda-in {
  border: 1.5px solid var(--ink); padding: 1.6rem 1.2rem 1.4rem;
  text-align: center; position: relative;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
.kmz-fuda-eyebrow {
  margin: 0 0 1rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .35em; color: var(--ink-dim); text-indent: .35em;
}
.kmz-fuda-img { width: 9.5rem; margin: 0 auto 1rem; }
.kmz-fuda-img img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.kmz-fuda-name {
  margin: 0; font-size: clamp(1.9rem, 8vw, 2.5rem); font-weight: 700;
  letter-spacing: .08em; line-height: 1.25; text-indent: .08em;
}
.kmz-fuda-latin {
  margin: .3rem 0 0; font-size: .68rem; letter-spacing: .2em;
  color: var(--ink-dim); text-indent: .2em;
}
.kmz-fuda-ben {
  margin: 1rem auto 0; display: inline-block;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  padding: .35rem .9rem; font-size: .84rem; letter-spacing: .1em;
}
.kmz-fuda-sum { margin: 1rem 0 0; font-size: .8rem; line-height: 2; color: var(--ink-mid); text-align: left; }
.kmz-fuda-shrine { margin-top: 1.2rem; padding-top: .9rem; border-top: 1.5px dotted var(--rule); }
.kmz-fuda-shrine-name { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .06em; }
.kmz-fuda-shrine-addr { margin: .2rem 0 0; font-size: .7rem; color: var(--ink-mid); }
/* 朱印 */
.kmz-fuda-seal {
  position: absolute; right: -.35rem; bottom: -.35rem;
  width: 3rem; padding: .35rem 0;
  border: 2.5px solid var(--accent); color: var(--accent);
  font-size: .62rem; font-weight: 700; line-height: 1.35; letter-spacing: .1em;
  background: var(--card); transform: rotate(-4deg);
}
.kmz-fuda.is-shared { margin-top: 1rem; }
.kmz-fuda-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 1.6rem 0 0; }
.kmz-btn.is-ghost { background: var(--card); }

.kmz-sd-why {
  max-width: 30rem; margin: 1.6rem auto 0; padding: .8rem 1rem;
  border-left: 5px solid var(--gr); background: var(--card);
  font-size: .84rem; line-height: 1.9;
}
.kmz-sd-why b {
  display: block; font-size: .68rem; letter-spacing: .1em;
  color: var(--ink-dim); margin-bottom: .25rem;
}
.kmz-sd-reason { max-width: 30rem; margin: .8rem auto 0; font-size: .82rem; line-height: 1.95; color: var(--ink-mid); }

/* 共有 */
.kmz-sd-share { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 0; }
.kmz-sd-share a, .kmz-sd-copy {
  border: 2.5px solid var(--ink); background: var(--card); color: inherit;
  padding: .4rem .85rem; font: inherit; font-size: .78rem; font-weight: 800;
  text-decoration: none; box-shadow: var(--sh-in); cursor: pointer;
}
.kmz-sd-share a:hover, .kmz-sd-copy:hover { box-shadow: none; transform: translate(1px, 1px); }
.kmz-sd-x    { background: var(--ink); color: var(--card); }
.kmz-sd-line { background: #06C755; color: #FFFFFF; border-color: #05A648; }

/* ほかの候補 */
.kmz-sd-otherh {
  margin: 2.4rem 0 .8rem; font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; color: var(--ink-dim); text-align: center;
}
.kmz-sd-minis { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.kmz-sd-mini {
  display: flex; gap: .7rem; align-items: center; text-decoration: none; color: inherit;
  border: 2.5px solid var(--ink); background: var(--card); padding: .6rem .7rem; box-shadow: var(--sh-in);
}
.kmz-sd-mini:hover { box-shadow: none; transform: translate(1px, 1px); }
.kmz-sd-mini-img { flex: 0 0 auto; width: 3.2rem; }
.kmz-sd-mini-img img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); }
.kmz-sd-mini-b { min-width: 0; display: block; }
.kmz-sd-mini-b b { display: block; font-size: .95rem; letter-spacing: -.01em; }
.kmz-sd-mini-b em { display: block; font-style: normal; font-size: .64rem; letter-spacing: .08em; color: var(--ink-dim); }
.kmz-sd-mini-b span { display: block; margin-top: .2rem; font-size: .7rem; line-height: 1.6; color: var(--ink-mid); }

.kmz-sd-note, .kmz-sd-none {
  max-width: 30rem; margin: 2rem auto 0;
  font-size: .74rem; line-height: 1.9; color: var(--ink-dim); text-align: center;
}
.kmz-sd-sep { border: 0; border-top: 2.5px solid var(--ink); margin: 2.6rem 0; }

@media (prefers-reduced-motion: reduce) {
  .kmz-sd-step, .kmz-fuda { animation: none; }
  .kmz-sd-omikuji span { animation: none; }
}

/* ══ 神社・遺跡からさがす（/shrine/） ══════════════
   都道府県ごとに社を並べる。1枚に全部入れるので、
   カードは詰めて置き、走査しやすさを優先する。 */
.kmz-pref-count {
  margin-left: .6rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; color: var(--ink-dim);
}
.kmz-shrinegrid {
  display: grid; gap: .7rem; margin-top: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.kmz-shrinecard {
  border: 2.5px solid var(--ink); background: var(--card);
  box-shadow: var(--sh-in); padding: .85rem .95rem;
}
.kmz-shrinecard-name {
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.5;
}
.kmz-shrinecard-name em {
  display: block; font-style: normal; font-size: .66rem;
  font-weight: 700; letter-spacing: .06em; color: var(--ink-dim); margin-top: .1rem;
}
.kmz-shrinecard-rank {
  margin: .35rem 0 0; font-size: .7rem; line-height: 1.6; color: var(--ink-mid);
}
.kmz-shrinecard-addr {
  margin: .35rem 0 0; font-size: .74rem; line-height: 1.65; color: var(--ink-mid);
}
.kmz-shrinecard-gods {
  margin: .5rem 0 0; padding-top: .5rem;
  border-top: 1.5px dotted var(--rule);
  font-size: .8rem; line-height: 1.8;
}
.kmz-shrinecard-gods a { border-bottom: 2px solid var(--accent); text-decoration: none; }
.kmz-shrinecard-links { margin: .5rem 0 0; }

/* ══ 日本地図（/shrine/） ════════════════════════
   都道府県を升目に置いた図。正確な地形は描かない。
   輪郭データが重いこと、小さい県がスマホで押せないこと、
   太い輪郭線と細かい海岸線の相性が悪いことによる。 */
.kmz-jmap-wrap { margin-top: 1.2rem; }
.kmz-jmap {
  display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto;
  border: 2.5px solid var(--ink); background: var(--paper);
  box-shadow: var(--sh);
}
.kmz-jtile rect {
  stroke: var(--ink); stroke-width: 2;
  transition: transform .1s, filter .1s;
}
.kmz-jtile-name {
  font-size: 13px; font-weight: 800; text-anchor: middle;
  fill: #FFFDF7; letter-spacing: -.02em;
}
/* 社のない県。日本の形として残すが、押せないことが分かる濃さにする */
.kmz-jtile-name.is-off { fill: var(--ink-dim); font-weight: 700; }
.kmz-jtile-num {
  font-size: 12px; font-weight: 800; text-anchor: middle;
  fill: #FFFDF7; opacity: .85;
}
a.kmz-jtile { cursor: pointer; }
a.kmz-jtile:hover rect,
a.kmz-jtile:focus-visible rect { filter: brightness(1.18); }
a.kmz-jtile:hover .kmz-jtile-num { opacity: 1; }
.kmz-jmap-note {
  max-width: 34rem; margin: .8rem auto 0;
  font-size: .74rem; line-height: 1.8; color: var(--ink-mid); text-align: center;
}
/* 地図から飛んだとき、見出しが上端に貼りつかないようにする */
.kmz-shrine[id] { scroll-margin-top: 1rem; }

@media (max-width: 30rem) {
  .kmz-jtile-name { font-size: 15px; }
  .kmz-jtile-num  { font-size: 14px; }
}
/* 横断一覧：場所・所在地の行 */
.kmz-place-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--ink);
  background: var(--ink);
}
.kmz-place-row {
  padding: 1rem 1.1rem;
  background: var(--card);
}
.kmz-place-row h3,
.kmz-place-row p { margin: 0; }
.kmz-place-row p + p { margin-top: .35rem; }
.kmz-card-desc {
  display: block;
  margin-top: .45rem;
  color: var(--ink-mid);
  font-size: .88rem;
  line-height: 1.65;
}