/* ============================================================
   神様診断（/shindan/）
   すべて .kz の中で完結させる。サイト本体のCSSとは干渉しない。
   Webフォントは使わない。端末の標準フォントだけで組む。
   ============================================================ */
.kz{
  --paper:#F4F1E8;
  --card:#FFFDF7;
  --sumi:#191A1F;
  --shu:#D93B2B;
  --ai:#2C7CA6;
  --kin:#C8901C;
  --midori:#1F8F72;

  --bd:3px;
  --bd-thick:4px;
  --sh:4px 4px 0 var(--sumi);
  --sh-lg:7px 7px 0 var(--sumi);

  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,
           "Noto Sans JP","Meiryo",system-ui,sans-serif;
  --mincho:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",YuMincho,
           "Noto Serif JP","MS PMincho",serif;

  --ease:cubic-bezier(.16,.84,.44,1);

  font-family:var(--gothic);
  color:var(--sumi);
  background:var(--paper);
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  position:relative;
  overflow-x:hidden;
}
.kz *{box-sizing:border-box;margin:0;padding:0;}
/* ── 文字色の詳細度について ──
   WordPress がブロックの既定として、この link より後ろにインラインで
     a:where(:not(.wp-element-button)){color:var(--wp--preset--color--jp)}
   を出す。詳細度は :where() が 0 なので (0,0,1)。

   そのため、リセットは次の高さに置く。
     .kz a          (0,1,1) … WordPress の (0,0,1) に勝つ
     .kz-sh.kz-sh-x (0,2,0) … クラス2つで、上のリセットに勝つ

   一度 :where(.kz) a (0,0,1) にしたところ WordPress に負けてリンクが朱色になり、
   次に .kz .kz-stage a (0,2,1) まで上げたら今度は X ボタンの白文字を奪って
   墨地に墨文字で潰れた。低すぎても高すぎても壊れる。
   濃い背景を持つ要素は、必ずクラスを2つ重ねて (0,2,0) にすること。 */
:where(.kz) button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
.kz a{color:inherit;}
.kz img{max-width:100%;display:block;}

/* 和紙の目。グラデーションは使わず微細な点だけ */
.kz::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7'><circle cx='1' cy='1' r='.7' fill='%23191A1F' opacity='.09'/><circle cx='4.5' cy='4' r='.5' fill='%23191A1F' opacity='.06'/></svg>");
}
.kz-stage{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 16px;}

.kz-block{background:var(--card);border:var(--bd) solid var(--sumi);box-shadow:var(--sh);border-radius:0;}
.kz-tate{writing-mode:vertical-rl;text-orientation:upright;font-feature-settings:"vkrn" 1;}

.kz-screen{display:none;}
.kz-screen.is-active{display:block;}
@keyframes kzInR{from{opacity:0;transform:translate3d(22px,0,0)}to{opacity:1;transform:none}}
@keyframes kzOutL{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-22px,0,0)}}
.kz-anim-in{animation:kzInR .34s var(--ease) both;}
.kz-anim-out{animation:kzOutL .2s ease-in both;}

/* ── 導入 ── */
.kz-intro{min-height:calc(100svh - 24px);display:flex;flex-direction:column;justify-content:center;padding:40px 0 32px;}
.kz-intro-head{position:relative;text-align:center;padding-bottom:28px;}
.kz-title{font-family:var(--mincho);font-weight:600;font-size:clamp(38px,13vw,58px);
  letter-spacing:.16em;line-height:1.15;margin:0 auto;height:auto;}
.kz-title-wrap{display:flex;justify-content:center;align-items:flex-start;gap:14px;}
.kz-title-rule{width:var(--bd-thick);background:var(--shu);align-self:stretch;}
.kz-lede{margin-top:22px;font-size:14.5px;letter-spacing:.02em;}
.kz-note{margin-top:18px;padding:12px 14px;border:2px solid var(--sumi);font-size:12.5px;line-height:1.7;}
.kz-note b{color:var(--shu);}
.kz-start{margin-top:26px;width:100%;background:var(--shu);color:#fff;
  border:var(--bd-thick) solid var(--sumi);box-shadow:var(--sh-lg);
  padding:18px;font-size:19px;font-weight:800;letter-spacing:.22em;
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);}
.kz-start:active{transform:translate(5px,5px);box-shadow:2px 2px 0 var(--sumi);}
.kz-meta{margin-top:14px;font-size:12px;text-align:center;opacity:.72;letter-spacing:.08em;}
.kz-mon{display:block;margin:0 auto 6px;}

/* ── 設問 ── */
.kz-q{min-height:calc(100svh - 24px);display:flex;flex-direction:column;padding:22px 0 32px;}
.kz-prog{display:flex;align-items:center;gap:8px;margin-bottom:26px;}
.kz-prog-cell{flex:1;height:9px;border:2px solid var(--sumi);background:transparent;transition:background .3s var(--ease);}
.kz-prog-cell.is-done{background:var(--sumi);}
.kz-prog-cell.is-now{background:var(--shu);border-color:var(--sumi);}
.kz-prog-num{font-size:11px;font-weight:700;letter-spacing:.14em;white-space:nowrap;}
.kz-q-head{margin-bottom:22px;display:flex;gap:12px;align-items:flex-start;}
.kz-q-no{flex:none;width:38px;height:38px;background:var(--sumi);color:var(--paper);
  font-family:var(--mincho);font-size:20px;display:grid;place-items:center;}
.kz-q-text{font-family:var(--mincho);font-size:clamp(21px,5.6vw,27px);font-weight:600;
  line-height:1.5;letter-spacing:.04em;padding-top:2px;}
.kz-q-sub{font-size:12px;letter-spacing:.1em;margin-top:8px;opacity:.7;}
.kz-opts{display:flex;flex-direction:column;gap:11px;}
.kz-opt{width:100%;text-align:left;background:var(--card);border:var(--bd) solid var(--sumi);
  box-shadow:var(--sh);padding:15px 14px;font-size:16px;font-weight:700;letter-spacing:.04em;
  display:flex;align-items:center;gap:12px;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease),background .1s;}
.kz-opt-mark{flex:none;width:11px;height:11px;background:var(--shu);}
.kz-opt-sub{display:block;font-size:11.5px;font-weight:500;opacity:.65;letter-spacing:.02em;margin-top:2px;}
.kz-opt:active,.kz-opt.is-picked{transform:translate(4px,4px);box-shadow:0 0 0 var(--sumi);}
.kz-opt.is-picked{background:var(--shu);color:#fff;}
.kz-opt.is-picked .kz-opt-mark{background:#fff;}
.kz-opt.is-picked .kz-opt-sub{opacity:.85;}
.kz-skip{margin-top:18px;align-self:center;font-size:13px;letter-spacing:.12em;
  border-bottom:2px solid var(--sumi);padding-bottom:2px;}
.kz-back{margin-top:22px;align-self:flex-start;font-size:12px;letter-spacing:.1em;opacity:.7;}
.kz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.kz-grid2 .kz-opt{display:block;}
.kz-grid2 .kz-opt-mark{display:none;}

/* ── 待ち（御籤筒） ── */
.kz-wait{min-height:calc(100svh - 24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;}
@keyframes kzShake{0%{transform:rotate(0)}12%{transform:rotate(-13deg)}27%{transform:rotate(11deg)}
  42%{transform:rotate(-9deg)}58%{transform:rotate(8deg)}74%{transform:rotate(-5deg)}
  88%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.kz-tsutsu{animation:kzShake .62s var(--ease) 2;transform-origin:50% 88%;}
@keyframes kzDrop{0%{opacity:0;transform:translateY(-14px) rotate(-30deg)}55%{opacity:1}
  100%{opacity:1;transform:translateY(46px) rotate(-46deg)}}
.kz-kuji{animation:kzDrop .5s var(--ease) .86s both;}
.kz-wait-text{font-family:var(--mincho);font-size:17px;letter-spacing:.3em;}
.kz-wait-dots span{display:inline-block;width:8px;height:8px;background:var(--shu);margin:0 4px;
  animation:kzPulse .9s infinite steps(2,end);}
.kz-wait-dots span:nth-child(2){animation-delay:.3s}
.kz-wait-dots span:nth-child(3){animation-delay:.6s}
@keyframes kzPulse{0%,100%{opacity:.2}50%{opacity:1}}

/* ── 結果 ── */
.kz-result{padding:24px 0 48px;}
.kz-res-eyebrow{text-align:center;font-size:11.5px;letter-spacing:.34em;font-weight:700;margin-bottom:14px;}
.kz-res-eyebrow::before,.kz-res-eyebrow::after{content:"—";margin:0 8px;color:var(--shu);}

.kz-fuda{position:relative;background:var(--card);border:var(--bd-thick) solid var(--sumi);
  box-shadow:var(--sh-lg);padding:0 0 22px;overflow:hidden;
  animation:kzFudaIn .5s var(--ease) both;}
@keyframes kzFudaIn{0%{opacity:0;transform:translateY(-26px) scale(.985)}
  70%{opacity:1;transform:translateY(4px) scale(1)}100%{opacity:1;transform:none}}
.kz-fuda-top{background:var(--sumi);color:var(--paper);padding:9px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:.24em;font-weight:700;}
.kz-myth-tag{background:var(--accent);color:#fff;padding:2px 9px;letter-spacing:.16em;}
.kz-seigaiha{height:22px;background-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><g fill='none' stroke='%23191A1F' stroke-width='2'><path d='M0 14a14 14 0 0 1 28 0'/><path d='M0 14a9 9 0 0 1 28 0'/><path d='M0 14a4 4 0 0 1 28 0'/></g></svg>");
  border-bottom:var(--bd) solid var(--sumi);}

.kz-fuda-name{display:flex;gap:16px;justify-content:center;align-items:flex-start;padding:30px 18px 8px;}
.kz-name-rule{width:var(--bd);background:var(--accent);align-self:stretch;}
.kz-name{font-family:var(--mincho);font-weight:600;font-size:clamp(34px,10.5vw,50px);
  letter-spacing:.14em;line-height:1.06;}
.kz-name-yomi{font-size:11px;letter-spacing:.26em;line-height:1.9;opacity:.7;padding-top:6px;}
@keyframes kzRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kz-rise{animation:kzRise .42s var(--ease) both;}

.kz-e{margin:16px 18px 0;border:var(--bd) solid var(--sumi);background:var(--paper);position:relative;}
.kz-e img{width:100%;height:auto;}
.kz-e-cap{font-size:10px;letter-spacing:.06em;padding:5px 8px;border-top:2px solid var(--sumi);opacity:.68;line-height:1.5;}

.kz-riyaku{display:flex;flex-wrap:wrap;gap:7px;padding:18px 18px 0;}
.kz-riyaku span{border:2px solid var(--sumi);padding:3px 9px;font-size:12px;font-weight:700;background:var(--paper);}
.kz-riyaku span.is-hit{background:var(--shu);color:#fff;border-color:var(--sumi);}
.kz-line{padding:14px 18px 0;font-size:14.5px;}

.kz-why{margin:20px 18px 0;border:var(--bd) solid var(--sumi);background:var(--paper);padding:14px 14px 14px 16px;}
.kz-why-h{display:inline-block;background:var(--sumi);color:var(--paper);
  font-size:10.5px;letter-spacing:.22em;font-weight:700;padding:3px 9px;margin-bottom:10px;}
.kz-why ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.kz-why li{font-size:13.5px;line-height:1.65;padding-left:16px;position:relative;}
.kz-why li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--shu);}
.kz-why-relax{margin-top:11px;font-size:11.5px;line-height:1.6;border-top:2px solid var(--sumi);padding-top:9px;opacity:.85;}

.kz-yashiro{margin:18px 18px 0;border:var(--bd) solid var(--sumi);box-shadow:var(--sh);background:var(--card);}
.kz-yashiro-h{background:var(--accent);color:#fff;font-size:10.5px;letter-spacing:.22em;
  font-weight:700;padding:5px 12px;border-bottom:var(--bd) solid var(--sumi);}
.kz-yashiro-b{padding:13px 13px 0;}
.kz-yashiro-name{font-family:var(--mincho);font-size:20px;font-weight:600;letter-spacing:.06em;}
.kz-yashiro-addr{font-size:12.5px;margin-top:5px;opacity:.8;line-height:1.6;}
.kz-yashiro-links{display:flex;gap:9px;padding:13px;}
.kz-lnk{flex:1;text-align:center;text-decoration:none;border:2px solid var(--sumi);
  padding:10px 6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;background:var(--paper);
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);box-shadow:3px 3px 0 var(--sumi);}
.kz-lnk:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--sumi);}

.kz-inkan{position:absolute;right:14px;bottom:14px;width:74px;height:74px;pointer-events:none;
  animation:kzStamp .5s var(--ease) 1.05s both;}
@keyframes kzStamp{0%{opacity:0;transform:scale(2.5) rotate(-24deg)}
  55%{opacity:.98;transform:scale(.9) rotate(-9deg)}
  75%{transform:scale(1.04) rotate(-9deg)}100%{opacity:.9;transform:scale(1) rotate(-9deg)}}

.kz-change{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  border:2px solid var(--sumi);background:var(--card);padding:8px 10px;margin-bottom:14px;}

.kz-refine{margin-top:24px;border:var(--bd-thick) solid var(--sumi);box-shadow:var(--sh-lg);
  background:var(--card);padding:18px 16px 16px;position:relative;}
.kz-refine::before{content:"";position:absolute;left:0;top:0;width:100%;height:9px;
  background-color:var(--sumi);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='9'><path d='M0 9L8 0l8 9z' fill='%23F4F1E8'/></svg>");}
.kz-refine-h{font-family:var(--mincho);font-size:19px;font-weight:600;letter-spacing:.14em;margin-top:10px;}
.kz-refine-t{font-size:13px;line-height:1.7;margin-top:8px;}
.kz-refine-btn{width:100%;margin-top:14px;background:var(--sumi);color:var(--paper);
  border:var(--bd) solid var(--sumi);box-shadow:var(--sh);padding:15px;font-size:16px;
  font-weight:800;letter-spacing:.16em;transition:transform .1s var(--ease),box-shadow .1s var(--ease);}
.kz-refine-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--sumi);}
.kz-refine-n{font-size:11.5px;text-align:center;margin-top:9px;opacity:.7;}

.kz-share{margin-top:22px;}
.kz-share-h{font-size:11.5px;letter-spacing:.24em;font-weight:700;text-align:center;margin-bottom:12px;}
.kz-share-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.kz-sh{border:var(--bd) solid var(--sumi);box-shadow:var(--sh);padding:13px 6px;text-align:center;
  text-decoration:none;font-size:12.5px;font-weight:800;letter-spacing:.08em;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);}
.kz-sh:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--sumi);}
.kz-sh.kz-sh-x{background:var(--sumi);color:var(--paper);}
.kz-sh.kz-sh-line{background:var(--midori);color:#fff;}
.kz-sh-copy{background:var(--card);}

.kz-others{margin-top:34px;}
.kz-others-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.kz-others-h b{font-family:var(--mincho);font-size:17px;letter-spacing:.1em;font-weight:600;}
.kz-others-h i{flex:1;height:2px;background:var(--sumi);font-style:normal;}
.kz-tanzaku{display:flex;align-items:stretch;border:var(--bd) solid var(--sumi);box-shadow:var(--sh);
  background:var(--card);margin-bottom:11px;text-decoration:none;overflow:hidden;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);}
.kz-tanzaku:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--sumi);}
.kz-rank{flex:none;width:44px;background:var(--sumi);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mincho);font-size:19px;}
.kz-rank small{font-size:9px;letter-spacing:.1em;opacity:.75;}
.kz-tan-b{flex:1;padding:11px 13px;min-width:0;}
/* span は既定で inline。block にしないと名前と説明が一行に潰れ、
   高さ指定も効かないため、得点の帯が card いっぱいに膨らんでいた。 */
.kz-tan-name{display:block;font-family:var(--mincho);font-size:19px;font-weight:600;
  letter-spacing:.08em;color:var(--sumi);}
.kz-tan-meta{display:block;font-size:11.5px;opacity:.75;margin-top:2px;color:var(--sumi);}
/* 得点の帯はやめた。目盛りも単位もない帯は、何を表しているか伝わらない。
   代わりに、なぜ近いのかを言葉で出す。 */
.kz-tan-why{display:block;margin-top:6px;font-size:11.5px;line-height:1.6;
  color:var(--sumi);opacity:.85;padding-left:12px;position:relative;}
.kz-tan-why::before{content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;background:var(--accent2);}

.kz-again{margin-top:30px;display:flex;gap:10px;}
.kz-again button,.kz-again a{flex:1;text-align:center;text-decoration:none;
  border:var(--bd) solid var(--sumi);box-shadow:var(--sh);background:var(--card);
  padding:14px 8px;font-size:13.5px;font-weight:700;letter-spacing:.1em;
  transition:transform .1s var(--ease),box-shadow .1s var(--ease);}
.kz-again button:active,.kz-again a:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--sumi);}
.kz-disclaimer{margin-top:26px;border-top:2px solid var(--sumi);padding-top:14px;
  font-size:11.5px;line-height:1.8;opacity:.78;}

.kz-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:#191A1F;color:#F4F1E8;border:2px solid #191A1F;box-shadow:4px 4px 0 #191A1F;
  padding:11px 18px;font-size:13px;font-weight:700;letter-spacing:.08em;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s cubic-bezier(.16,.84,.44,1);z-index:50;}
.kz-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);}

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

@media (prefers-reduced-motion:reduce){
  .kz *,.kz *::before,.kz *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
}
@media (min-width:700px){
  .kz-stage{padding:0 24px;}
  .kz-fuda-name{padding-top:38px;}
}

/* ── 見出し ──
   縦書きの「神様診断」は看板で、意味を持つのはその下の一行。
   両方を h1 に入れて、検索側にも読み手にも同じことが伝わるようにする。 */
.kz-h1{display:block;margin:0;font-weight:400;}
.kz-h1 .kz-title-wrap{display:flex;justify-content:center;align-items:flex-start;gap:14px;}
.kz-h1 .kz-title-rule{width:var(--bd-thick);background:var(--shu);align-self:stretch;}
.kz-h1-sub{
  display:block;margin-top:20px;text-align:center;
  font-size:clamp(13px,3.6vw,15px);font-weight:700;
  letter-spacing:.06em;line-height:1.7;
}

/* ── ページの中身 ──
   診断は JavaScript で動くため、そのままだと本文がほぼ無い。
   何をする道具で、何を根拠に選んでいるのかを文章で置く。 */
.kz-about{
  padding:44px 0 56px;
  border-top:var(--bd) solid var(--sumi);
  margin-top:8px;
}
.kz-about .kz-h2{
  font-family:var(--mincho);
  font-size:clamp(19px,5vw,23px);font-weight:600;letter-spacing:.08em;
  margin:34px 0 12px;padding-left:14px;position:relative;line-height:1.5;
}
.kz-about .kz-h2:first-child{margin-top:0;}
.kz-about .kz-h2::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;
  width:var(--bd);background:var(--shu);
}
.kz-about p{margin:0 0 12px;font-size:14.5px;line-height:1.95;}
.kz-about b{font-weight:800;}
.kz-about-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:9px;}
.kz-about-list li{
  font-size:14px;line-height:1.85;padding:10px 12px;
  border:2px solid var(--sumi);background:var(--card);
}
.kz-about-list b{display:inline-block;margin-right:.5em;color:var(--shu);}
.kz-about-faq h3{
  font-size:14.5px;font-weight:800;letter-spacing:.02em;
  margin:18px 0 6px;padding-left:16px;position:relative;
}
.kz-about-faq h3::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;background:var(--sumi);
}
.kz-about-faq p{font-size:13.5px;color:var(--sumi);opacity:.88;}