/* ============================================================
   0. トークン
   ============================================================ */
.kz{
  /* ── 地・文字・カードは、必ずサイトの設定から引く ──
     ここに色を直書きしていたため、トップページの本文の地だけが
     4サイトとも同じクリーム色（#FFFDF7）のままだった。
     ヘッダーとフッターは style.css の --paper で正しく塗られていたので、
     「帯は変わったのに真ん中が神図鑑と同じ」という見え方になっていた。
     var() の第2引数は、設定が無いときの既定（神図鑑の色）。 */
  --kz-paper:var(--paper,#F4F1E8);
  --kz-card:var(--card,#FFFDF7);
  --kz-ink:var(--ink,#191A1F);
  --kz-muted:var(--muted,#5D5D5D);

  /* 主色。囲みの縁や、押したときの枠に使う */
  --kz-accent:var(--accent,#D93B2B);

  /* 地図の地域ごとの色。神図鑑の世界地図でしか使わない */
  --kz-jp:#D93B2B;
  --kz-nr:#2C7CA6;
  --kz-gr:#C8901C;
  --kz-eg:#1F8F72;
  --kz-rm:#8B4F9F;
  --kz-cn:#B5473A;

  --kz-line:3px;
  --kz-line-thick:4px;
  --kz-shadow:4px 4px 0 var(--kz-ink);
  --kz-shadow-sm:3px 3px 0 var(--kz-ink);

  --kz-mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Sawarabi Mincho",serif;
  --kz-gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP","Meiryo",sans-serif;

  background:var(--kz-paper);
  color:var(--kz-ink);
  font-family:var(--kz-gothic);
  font-size:16px;
  line-height:1.85;
  -webkit-text-size-adjust:100%;
}
.kz *,.kz *::before,.kz *::after{box-sizing:border-box}

/* ---- リセット：WordPress のリンク色を無効化 (0,1,1) ---- */
.kz a{color:inherit;text-decoration:none}
.kz a:hover{text-decoration:none}

.kz p{margin:0 0 1em}
.kz ul,.kz ol{margin:0;padding:0;list-style:none}
.kz img,.kz svg{max-width:100%}
.kz svg{display:block}

.kz :focus-visible{outline:var(--kz-line-thick) solid var(--kz-accent);outline-offset:3px}

/* ============================================================
   1. レイアウト
   ============================================================ */
.kz-wrap{width:100%;max-width:1020px;margin:0 auto;padding:0 16px}
.kz-sec{padding:44px 0}
.kz-sec + .kz-sec{border-top:var(--kz-line) solid var(--kz-ink)}

/* 見出し：番号ではなく「体系の色帯」で区別する */
.kz-h2{
  font-family:var(--kz-mincho);
  font-size:24px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.02em;
  margin:0 0 6px;
  padding-left:14px;
  border-left:10px solid var(--kz-ink);
}
.kz-lead{
  font-size:14px;
  line-height:1.8;
  margin:0 0 22px;
  padding-left:24px;
}
.kz-hero__action{margin:18px 0 0;text-align:center}
@media (min-width:768px){
  .kz-sec{padding:64px 0}
  .kz-h2{font-size:30px}
  .kz-lead{font-size:15px}
}

/* ============================================================
   2. ヒーロー（H1 + 導入文）
   ============================================================ */
.kz-hero{
  padding:34px 0 40px;
  border-bottom:var(--kz-line-thick) solid var(--kz-ink);
}
.kz-h1{
  font-family:var(--kz-mincho);
  font-weight:700;
  margin:0 0 20px;
  line-height:1.28;
  letter-spacing:.01em;
}
/* H1 は一字も変えず、表示上の階層だけ span で作る */
.kz-h1__name{
  display:block;
  font-size:44px;
  letter-spacing:.16em;
  text-indent:.16em;
}
.kz-h1__main{
  display:block;
  font-size:20px;
  margin-top:4px;
}
.kz-h1__sub{
  display:block;
  font-size:14px;
  font-family:var(--kz-gothic);
  font-weight:700;
  line-height:1.6;
  margin-top:8px;
}
.kz-hero__text{font-size:15px;margin:0 0 18px;max-width:44em}
.kz-hero__figs{display:flex;flex-wrap:wrap;gap:8px}
.kz-fig{
  display:inline-flex;align-items:baseline;gap:5px;
  background:var(--kz-card);
  border:var(--kz-line) solid var(--kz-ink);
  box-shadow:var(--kz-shadow-sm);
  padding:5px 11px;
  font-size:12px;font-weight:700;
}
.kz-fig__n{font-family:var(--kz-mincho);font-size:20px;line-height:1}
@media (min-width:768px){
  .kz-hero{padding:52px 0 56px}
  .kz-h1__name{font-size:68px}
  .kz-h1__main{font-size:28px}
  .kz-h1__sub{font-size:16px}
  .kz-hero__text{font-size:16px}
  .kz-fig{font-size:13px;padding:6px 14px}
  .kz-fig__n{font-size:24px}
}

/* ============================================================
   3. 世界の神話マップ（このページの主役）
   ============================================================ */
.kz-map{
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:8px;
  margin-bottom:18px;
}
.kz-map__svg{width:100%;height:auto}

/* 陸地 */
.kz-map__land{fill:#E6E1D2;stroke:var(--kz-ink);stroke-width:3;stroke-linejoin:round}

/* 地域（<a> でくるむ） */
.kz-map__area{stroke:var(--kz-ink);stroke-width:4.5;stroke-linejoin:round}
.kz-map__region--jp .kz-map__area{fill:var(--kz-jp)}
.kz-map__region--nr .kz-map__area{fill:var(--kz-nr)}
.kz-map__region--gr .kz-map__area{fill:var(--kz-gr)}
.kz-map__region--eg .kz-map__area{fill:var(--kz-eg)}
.kz-map__region--rm .kz-map__area{fill:var(--kz-rm)}
.kz-map__region--cn .kz-map__area{fill:var(--kz-cn)}

.kz-map__stem{stroke:var(--kz-ink);stroke-width:4;stroke-linecap:square}
.kz-map__plate-sh{fill:var(--kz-ink)}
.kz-map__plate{stroke:var(--kz-ink);stroke-width:3.5}
.kz-map__region--jp .kz-map__plate{fill:var(--kz-jp)}
.kz-map__region--nr .kz-map__plate{fill:var(--kz-nr)}
.kz-map__region--gr .kz-map__plate{fill:var(--kz-gr)}
.kz-map__region--eg .kz-map__plate{fill:var(--kz-eg)}
.kz-map__region--rm .kz-map__plate{fill:var(--kz-rm)}
.kz-map__region--cn .kz-map__plate{fill:var(--kz-cn)}

.kz-map__num{
  font-family:var(--kz-mincho);
  font-weight:700;font-size:30px;
  text-anchor:middle;
  fill:var(--kz-card);
}
.kz-map__unit{
  font-family:var(--kz-gothic);
  font-weight:700;font-size:14px;
  text-anchor:middle;
  fill:var(--kz-card);
}
/* ギリシャ（金）だけは墨文字のほうが読める */
.kz-map__region--gr .kz-map__num,
.kz-map__region--gr .kz-map__unit{fill:var(--kz-ink)}

.kz-map__region{cursor:pointer}
.kz-map__region .kz-map__group{transition:transform .12s ease-out}
.kz-map__region:hover .kz-map__group,
.kz-map__region:focus-visible .kz-map__group,
.kz-map__region.is-on .kz-map__group{transform:translate(-3px,-3px)}
.kz-map__region:active .kz-map__group{transform:translate(2px,2px)}
.kz-map__region:focus-visible{outline:none}
.kz-map__region:focus-visible .kz-map__area{stroke-width:7}

.kz-map__cap{
  font-size:12px;line-height:1.7;
  margin:0 0 20px;
}

/* 地図の下の一覧＝スマホの本命タップ領域 */
.kz-lands{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:600px){.kz-lands{grid-template-columns:1fr 1fr}}
.kz-land{
  display:flex;align-items:center;gap:12px;
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:12px 14px;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-land:hover,.kz-land:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-land:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
.kz-land__chip{
  flex:0 0 auto;width:46px;height:46px;
  display:grid;place-items:center;
  border:var(--kz-line) solid var(--kz-ink);
  font-family:var(--kz-mincho);font-size:20px;font-weight:700;line-height:1;
}
/* 濃色 → クラス2枚 (0,2,0) */
.kz-land__chip.kz-c-jp{background:var(--kz-jp);color:var(--kz-card)}
.kz-land__chip.kz-c-nr{background:var(--kz-nr);color:var(--kz-card)}
.kz-land__chip.kz-c-gr{background:var(--kz-gr);color:var(--kz-ink)}
.kz-land__chip.kz-c-eg{background:var(--kz-eg);color:var(--kz-card)}
.kz-land__chip.kz-c-rm{background:var(--kz-rm);color:var(--kz-card)}
.kz-land__chip.kz-c-cn{background:var(--kz-cn);color:var(--kz-card)}
.kz-land__chip:not(.kz-c-jp):not(.kz-c-nr):not(.kz-c-gr):not(.kz-c-eg):not(.kz-c-rm):not(.kz-c-cn){background:var(--kz-accent);color:var(--kz-card)}
.kz-land__body{min-width:0}
.kz-land__ttl{font-family:var(--kz-mincho);font-size:18px;font-weight:700;line-height:1.3;display:block}
.kz-land__meta{font-size:12px;font-weight:700;line-height:1.5;display:block;margin-top:2px}

/* ============================================================
   4. 神話からさがす（収録中の体系カード）
   ============================================================ */
.kz-myths{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){.kz-myths{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.kz-myths{grid-template-columns:repeat(3,1fr)}}
.kz-myth{
  display:flex;flex-direction:column;
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-myth:hover,.kz-myth:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-myth:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
.kz-myth__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:10px 14px;
  border-bottom:var(--kz-line) solid var(--kz-ink);
}
/* 濃色 → クラス2枚 */
.kz-myth__head.kz-c-jp{background:var(--kz-jp);color:var(--kz-card)}
.kz-myth__head.kz-c-nr{background:var(--kz-nr);color:var(--kz-card)}
.kz-myth__head.kz-c-gr{background:var(--kz-gr);color:var(--kz-ink)}
.kz-myth__head.kz-c-eg{background:var(--kz-eg);color:var(--kz-card)}
.kz-myth__head.kz-c-rm{background:var(--kz-rm);color:var(--kz-card)}
.kz-myth__head.kz-c-cn{background:var(--kz-cn);color:var(--kz-card)}
.kz-myth__head:not(.kz-c-jp):not(.kz-c-nr):not(.kz-c-gr):not(.kz-c-eg):not(.kz-c-rm):not(.kz-c-cn){background:var(--kz-accent);color:var(--kz-card)}
.kz-myth__name{font-family:var(--kz-mincho);font-size:19px;font-weight:700;line-height:1.2}
.kz-myth__count{font-size:13px;font-weight:700;white-space:nowrap}
.kz-myth__count b{font-family:var(--kz-mincho);font-size:20px}
.kz-myth__gods{padding:12px 14px 14px;font-size:13px;line-height:1.9;flex:1}
.kz-myth__gods span{display:inline-block;margin-right:.5em}
.kz-myth__more{
  padding:0 14px 12px;font-size:12px;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
}

/* ============================================================
   5. 相関図（ラジオ + CSS のみ。JS なしで全名称が HTML に残る）
   ============================================================ */
.kz-rel{
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
}
.kz-rel__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.kz-rel__tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:var(--kz-line) solid var(--kz-ink)}
@media (min-width:768px){.kz-rel__tabs{grid-template-columns:repeat(6,1fr)}}
.kz-rel__tab{
  display:block;text-align:center;cursor:pointer;
  padding:11px 2px;
  font-family:var(--kz-mincho);font-size:15px;font-weight:700;line-height:1.2;
  background:var(--kz-paper);
  border-right:var(--kz-line) solid var(--kz-ink);
  user-select:none;
}
.kz-rel__tab:last-of-type{border-right:0}
.kz-rel__panels{padding:18px 12px 20px}
.kz-rel__panel{display:none}

#kzrel-jp:checked ~ .kz-rel__panels .kz-rel__panel--jp,
#kzrel-nr:checked ~ .kz-rel__panels .kz-rel__panel--nr,
#kzrel-gr:checked ~ .kz-rel__panels .kz-rel__panel--gr,
#kzrel-eg:checked ~ .kz-rel__panels .kz-rel__panel--eg,
#kzrel-rm:checked ~ .kz-rel__panels .kz-rel__panel--rm,
#kzrel-cn:checked ~ .kz-rel__panels .kz-rel__panel--cn{display:block}

/* 選択中タブ（濃色＝クラス2枚相当の詳細度を確保） */
#kzrel-jp:checked ~ .kz-rel__tabs .kz-rel__tab--jp{background:var(--kz-jp);color:var(--kz-card)}
#kzrel-nr:checked ~ .kz-rel__tabs .kz-rel__tab--nr{background:var(--kz-nr);color:var(--kz-card)}
#kzrel-gr:checked ~ .kz-rel__tabs .kz-rel__tab--gr{background:var(--kz-gr);color:var(--kz-ink)}
#kzrel-eg:checked ~ .kz-rel__tabs .kz-rel__tab--eg{background:var(--kz-eg);color:var(--kz-card)}
#kzrel-rm:checked ~ .kz-rel__tabs .kz-rel__tab--rm{background:var(--kz-rm);color:var(--kz-card)}
#kzrel-cn:checked ~ .kz-rel__tabs .kz-rel__tab--cn{background:var(--kz-cn);color:var(--kz-card)}

#kzrel-jp:focus-visible ~ .kz-rel__tabs .kz-rel__tab--jp,
#kzrel-nr:focus-visible ~ .kz-rel__tabs .kz-rel__tab--nr,
#kzrel-gr:focus-visible ~ .kz-rel__tabs .kz-rel__tab--gr,
#kzrel-eg:focus-visible ~ .kz-rel__tabs .kz-rel__tab--eg,
#kzrel-rm:focus-visible ~ .kz-rel__tabs .kz-rel__tab--rm,
#kzrel-cn:focus-visible ~ .kz-rel__tabs .kz-rel__tab--cn{outline:var(--kz-line-thick) solid var(--kz-ink);outline-offset:-6px}

/* 系図 */
/* 系図の札（.kz-tree / .kz-node）は、相関図を [kamizukan_graph] に
   置き換えたときに使わなくなったので消した。 */

/* ============================================================
   6. 願い事からさがす
   ============================================================ */
.kz-wish{
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:18px 14px 20px;
}
.kz-wish__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.kz-chip{
  display:inline-block;
  background:var(--kz-paper);
  border:var(--kz-line) solid var(--kz-ink);
  box-shadow:var(--kz-shadow-sm);
  padding:6px 12px;
  font-size:13px;font-weight:700;line-height:1.3;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-chip:hover,.kz-chip:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--kz-ink)}
.kz-chip:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--kz-ink)}

.kz-btn{
  display:inline-flex;align-items:center;gap:10px;
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:13px 20px;
  font-family:var(--kz-mincho);font-size:17px;font-weight:700;line-height:1.3;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-btn:hover,.kz-btn:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
/* 濃色 → クラス2枚 (0,2,0) */
.kz-btn.kz-btn--ink{background:var(--kz-ink);color:var(--kz-card)}
.kz-btn.kz-btn--jp{background:var(--kz-jp);color:var(--kz-card)}
.kz-btn.kz-btn--paper{background:var(--kz-card);color:var(--kz-ink)}
.kz-btn__arw{font-size:14px}

/* ============================================================
   7. 神社・遺跡からさがす
   ============================================================ */
.kz-places{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){.kz-places{grid-template-columns:300px 1fr;align-items:start}}
.kz-jpmap{
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:12px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-jpmap:hover,.kz-jpmap:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-jpmap:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
.kz-jpmap__svg{width:170px;height:auto}
.kz-jpmap__land{fill:var(--kz-jp);stroke:var(--kz-ink);stroke-width:5;stroke-linejoin:round}
.kz-jpmap__cap{font-family:var(--kz-mincho);font-size:17px;font-weight:700;text-align:center;line-height:1.4}
.kz-jpmap__cap b{font-size:23px}

.kz-ruins{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:480px){.kz-ruins{grid-template-columns:1fr 1fr}}
/* この a には display の指定が無く、既定の inline のままだった。
   中身は display:block の span なので、枠と背景が行の断片にしか掛からず、
   細長い箱が文字の左にずれて出ていた（スマホで顕著）。
   下の __bar も同じ理由で、span のままでは height が効かない。 */
.kz-ruin{
  display:block;
  background:var(--kz-card);
  border:var(--kz-line) solid var(--kz-ink);
  box-shadow:var(--kz-shadow-sm);
  padding:10px 12px;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-ruin:hover,.kz-ruin:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--kz-ink)}
.kz-ruin:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--kz-ink)}
.kz-ruin__ttl{font-family:var(--kz-mincho);font-size:16px;font-weight:700;display:block;line-height:1.3}
.kz-ruin__n{font-size:12px;font-weight:700;display:block;margin-top:2px}
.kz-ruin__bar{display:block;height:8px;border:2px solid var(--kz-ink);margin-top:7px}
.kz-ruin__bar.kz-c-eg{background:var(--kz-eg)}
.kz-ruin__bar.kz-c-gr{background:var(--kz-gr)}
.kz-ruin__bar.kz-c-nr{background:var(--kz-nr)}
.kz-ruin__bar.kz-c-etc{background:var(--kz-paper)}
.kz-places__foot{margin-top:14px}

/* ============================================================
   8. 属性でくらべる
   ============================================================ */
.kz-attrs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:768px){.kz-attrs{grid-template-columns:repeat(3,1fr);gap:14px}}
.kz-attr{
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:12px;min-height:104px;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-attr:hover,.kz-attr:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-attr:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
.kz-attr__ttl{font-family:var(--kz-mincho);font-size:17px;font-weight:700;line-height:1.3}
.kz-attr__n{font-size:12px;font-weight:700}
.kz-attr__n b{font-family:var(--kz-mincho);font-size:22px;margin-right:1px}
.kz-attr__glyph{width:34px;height:34px;align-self:flex-end}

/* 姉妹サイトの分類カード。色は飾りではなく分類を表す。 */
.kz-attr--visual{
  display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;
  align-items:center;column-gap:12px;row-gap:3px;min-height:92px;
}
.kz-attr__face{
  grid-row:1 / 3;display:grid;place-items:center;width:52px;height:52px;
  border:2.5px solid var(--kz-ink);
}
.kz-attr__face .kmz-ico{width:32px;height:32px}
.kz-attr__face .kmz-ico *{stroke:var(--kz-card)}
.kz-attr__face .kmz-ico .fl{fill:var(--kz-card);stroke:none}
.kz-attr__copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.kz-attr__desc{font-size:11px;line-height:1.55;color:var(--kz-muted)}

/* 都道府県をトップに何十個もむき出しにしない。 */
.kz-region-groups{display:grid;grid-template-columns:1fr;gap:10px;margin:18px 0 0}
@media (min-width:680px){.kz-region-groups{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.kz-region-groups{grid-template-columns:repeat(4,1fr)}}
.kz-region-group{
  background:var(--kz-card);border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
}
.kz-region-group summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:12px 14px;font-family:var(--kz-mincho);font-weight:700;
}
.kz-region-group summary::-webkit-details-marker{display:none}
.kz-region-group summary::after{content:'＋';font-family:var(--kz-gothic);font-size:20px;line-height:1}
.kz-region-group[open] summary::after{content:'−'}
.kz-region-group__count{font-family:var(--kz-gothic);font-size:11px;color:var(--kz-muted)}
.kz-region-group__links{
  display:flex;flex-wrap:wrap;gap:7px;padding:0 12px 12px;border-top:2px solid var(--kz-ink);
  padding-top:10px;
}
.kz-region-group__links a{
  background:var(--kz-paper);border:1.5px solid var(--kz-ink);padding:5px 8px;
  font-size:12px;font-weight:700;
}
.kz-region-all{margin-top:16px}

/* ============================================================
   9. 神話をまたいで読む
   ============================================================ */
.kz-reads{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:768px){.kz-reads{grid-template-columns:1fr 1fr}}
.kz-read{
  display:block;
  background:var(--kz-card);
  border:var(--kz-line-thick) solid var(--kz-ink);
  box-shadow:var(--kz-shadow);
  padding:16px;
  transition:transform .1s ease-out,box-shadow .1s ease-out;
}
.kz-read:hover,.kz-read:focus-visible{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--kz-ink)}
.kz-read:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--kz-ink)}
.kz-read__eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;
  border:2px solid var(--kz-ink);padding:1px 7px;margin-bottom:8px;
}
.kz-read__ttl{font-family:var(--kz-mincho);font-size:19px;font-weight:700;line-height:1.4;display:block}
/* span のままだと上下の margin が効かず、題との間が詰まる */
.kz-read__desc{display:block;font-size:13px;line-height:1.75;margin:6px 0 0}

/* ============================================================
   10. よくある質問
   ============================================================ */
.kz-faq{display:flex;flex-direction:column;gap:10px}
.kz-q{
  background:var(--kz-card);
  border:var(--kz-line) solid var(--kz-ink);
  box-shadow:var(--kz-shadow-sm);
}
.kz-q__s{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;cursor:pointer;list-style:none;
  font-family:var(--kz-mincho);font-size:16px;font-weight:700;line-height:1.5;
}
.kz-q__s::-webkit-details-marker{display:none}
.kz-q__mark{
  flex:0 0 auto;width:22px;height:22px;margin-top:2px;
  display:grid;place-items:center;
  font-family:var(--kz-gothic);font-size:13px;line-height:1;
  border:2px solid var(--kz-ink);
}
.kz-q__mark.kz-c-ink{background:var(--kz-ink);color:var(--kz-card)}
.kz-q__a{
  padding:0 14px 14px 46px;
  font-size:14px;line-height:1.85;
  margin:0;
}
.kz-q[open] .kz-q__s{border-bottom:2px dashed var(--kz-ink)}
.kz-q[open] .kz-q__a{padding-top:12px}

/* ============================================================
   11. 動きを減らす設定
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .kz *{transition:none !important}
}

/* ============================================================
   追記：相関図の札と、願い事の札
   ============================================================ */


/* ---- 願い事の札 ----
   案では 10 枚とも同じ /shindan/ へのリンクで、
   同じ行き先が 11 本並ぶ形になっていた。
   何を引けるかを見せる役に絞り、入口は下のボタン 1 つにする。
   li に付け替えたので、押せる見た目を外す。 */
li.kz-chip{cursor:default}
li.kz-chip:hover,li.kz-chip:focus-visible{transform:none;box-shadow:var(--kz-shadow-sm)}

/* ---- 相関図（プラグイン側の graph.css で組んである） ----
   .kz のリセットは「.kz p」「.kz ul」のように要素の型で当てているため
   詳細度が (0,1,1) になる。graph.css はクラス1つ (0,1,0) で書いてあるので、
   図を .kz の中に入れると、余白の指定だけがリセットに負けて崩れる。
   図の中でだけ、クラスを2つ重ねて (0,2,0) にして戻す。
   値は graph.css と同じもの。あちらを直すときはここも見ること。 */
.kz .kmz-side-name,
.kz .kmz-side-sum{margin:0}
.kz .kmz-side-latin{margin:-.5rem 0 0}
.kz .kmz-rels{margin:0;padding:.7rem 0 0}

/* 図の下の「一覧と物語を読む」 */
.kz-rel__more{
  margin:14px 0 0;padding-top:12px;
  border-top:var(--kz-line) dashed var(--kz-ink);
  font-size:14px;font-weight:700;text-align:right;
}
.kz-rel__more a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}