/* ============================================================
   自己診断（check-v2.html だけで読む）v9 2026-10-11。cta.css のあとに読む
   主役の演出は「月が満ちる診断ステージ」の1つだけ。ほかに動きは足さない
   ・月の描き方は top.css の .phase-moon（影の円を translateX で動かす）と .moonlet（色）にそろえる
   ・ボタン・カードの見た目は top.css／cta.css の部品をそのまま使う。新しい色は足さない
   ・1問ずつ出す見た目は .qz--step（page-check.js が付ける）の下だけ。JS が無いときは今までどおり9問の一覧と新月
   ============================================================ */

/* ---------------- 最初の画面：背を低くして、診断の入口を最初の画面に入れる ---------------- */
.space.sub .page-hero--short{min-height:auto;padding-bottom:clamp(36px,2.8vw,48px)}   /* v9.1：72→40（1440）。質問文を最初の画面に入れる */
.space.sub .page-hero .orbit-deco{display:none}   /* 月の周りの軌道と二重になるので出さない */
.check-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;margin-top:14px;
  font-size:var(--t5);line-height:var(--lh5);font-weight:700;letter-spacing:.04em;color:#fff;
  text-shadow:0 0 22px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.9)}
.check-meta li{display:inline-flex;align-items:center}
.check-meta li+li::before{content:"";width:4px;height:4px;margin:0 .85em;border-radius:50%;background:currentColor;opacity:.7}

/* ---------------- 質問のパネル ---------------- */
.space.sub #quiz.sf-panel{padding-block:clamp(48px,4vw,64px) clamp(56px,7vw,96px)}   /* v9.1：上だけ 96→58（1440） */
.space.sub #quiz .qz{margin-top:clamp(24px,2vw,28px)}
/* 390幅で語の途中で切れないように、<wbr> の所でだけ折り返す（v9.1） */
.space.sub #quiz .h2,.space.sub #quiz .sec-note,.space.sub .qz-t,.space.sub .page-hero .notes li,.space.sub .qz-result .notes li,
.space.sub .page-hero .page-title,.space.sub .page-hero .page-lead,.space.sub .end-title,.space.sub .end-inner .notes li{word-break:keep-all;overflow-wrap:anywhere}

/* 右端の小さな月（.phase-rail）は、診断の大きな月と並んで二重に見えるので、このページでは出さない（v9.1。物語ページの story.css と同じ扱い） */
.space.sub .phase-rail{display:none}

/* ステージ：左に1問のカード（結果もここに出る）、右に月 */
.space.sub .qz-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(32px,4.4vw,80px);align-items:start}
.space.sub .qz-main{min-width:0}

/* ---------------- 月 ---------------- */
.space.sub .qz-moon{--d:clamp(220px,26vw,360px);position:sticky;top:calc(var(--header-h) + 12px);width:calc(var(--d) * 1.44);aspect-ratio:1;
  margin-top:calc(var(--d) * -.1)}
/* 外側のぼかし光：満ちるほど強く（動かすのは opacity だけ） */
.space.sub .qz-moon::before{content:"";position:absolute;left:calc(50% - var(--d) / 2);top:calc(50% - var(--d) / 2);width:var(--d);height:var(--d);border-radius:50%;
  box-shadow:0 0 70px 14px rgba(160,200,255,.32);opacity:var(--lit,0);transition:opacity 700ms var(--ease-reveal)}
.space.sub .qz-luna{position:absolute;left:calc(50% - var(--d) / 2);top:calc(50% - var(--d) / 2);width:var(--d);height:var(--d);border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 35% 35%,#fff 0%,#DDE6FA 45%,#8FA6D8 100%);box-shadow:0 0 0 1px var(--rule)}
/* 影の円：--lit（答えた数/9）が 0 で新月、1 で満月。.phase-moon と同じ描き方 */
.space.sub .qz-luna i,.space.sub .qz-mini i{position:absolute;inset:-2px;border-radius:50%;background:var(--space);opacity:.96;
  transform:translateX(calc(var(--lit,0) * 100%));transition:transform 700ms var(--ease-reveal)}
.space.sub .qz-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.space.sub .qz-arc{fill:none;stroke:var(--rule);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;
  transition:stroke 600ms var(--ease-reveal),stroke-width 600ms var(--ease-reveal)}
.space.sub .qz-arc.is-top{stroke:#8DB8FF;stroke-width:4}
.space.sub .qz-tick{fill:var(--navy);stroke:rgba(201,210,234,.6);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:fill 300ms ease,stroke 300ms ease}
.space.sub .qz-tick.is-yes{fill:#fff;stroke:#fff}
.space.sub .qz-tick.is-no{fill:#8DB8FF;stroke:#8DB8FF}
.space.sub .qz-arc-l{position:absolute;top:27.5%;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.08em;color:var(--note);white-space:nowrap;
  transform:translateY(-50%);transition:color 600ms var(--ease-reveal)}
.space.sub .qz-arc-l[data-g="a"]{left:89.5%}
.space.sub .qz-arc-l[data-g="c"]{right:89.5%}
.space.sub .qz-arc-l[data-g="b"]{top:95.5%;left:50%;transform:translate(-50%,-50%)}
.space.sub .qz-arc-l.is-top{color:#8DB8FF}

/* ---------------- カードのヘッダー（JS があるときだけ） ---------------- */
.space.sub .qz-head,.space.sub .qz-nav{display:none}
.space.sub .qz-mini,.space.sub .qz-bar{display:none}

/* ================= 1問ずつ（.qz--step の下だけ） ================= */
.space.sub .qz--step .qz-main{position:relative;padding:clamp(20px,2.6vw,36px);border:1px solid rgba(150,180,255,.35);border-radius:20px;background:rgba(120,160,255,.06)}
.space.sub .qz--step .qz-head{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:18px;row-gap:4px;margin-bottom:clamp(14px,1.6vw,22px);
  font-size:var(--t5);line-height:var(--lh5);font-weight:700;color:var(--note)}
.space.sub .qz--step .qz-group{margin-right:auto;letter-spacing:.08em;color:var(--soft)}
.space.sub .qz--step .qz-no{font-family:var(--font-en),var(--font-ja);letter-spacing:.04em;color:#fff}
.space.sub .qz--step .qz-no b,.space.sub .qz--step .qz-pct b{font-weight:800;color:#fff}
.space.sub .qz--step .qz-pct{font-family:var(--font-en),var(--font-ja);min-width:3.2em;text-align:right}

/* 今の問いだけ出す。見出し（1 進める人について など）は読み上げ用に残す */
.space.sub .qz--step .qz-g{display:none}
.space.sub .qz--step .qz-g.is-cur{display:block}
.space.sub .qz--step .qz-g+.qz-g{margin-top:0}
.space.sub .qz--step .qz-gh,.space.sub .qz-keyhint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.space.sub .qz--step .qz-list{margin-top:0;border:0}
.space.sub .qz--step .qz-q{display:none;padding:0;border:0}
.space.sub .qz--step .qz-q.is-cur{display:block}
.space.sub .qz--step .qz-q .qz-t{font-size:var(--t3);line-height:var(--lh3);min-height:calc(var(--lh3) * 2em)}
/* 問いの切り替えは動かさない（v9.1。動きは月の1つに絞る） */
.space.sub .qz--step .qz-opts{margin-top:clamp(20px,2.4vw,32px);gap:12px}
.space.sub .qz--step .qz-opt span{min-width:11em;min-height:64px;font-size:17px}
.space.sub .qz--step .qz-nav{display:flex;align-items:center;justify-content:space-between;gap:8px 16px;min-height:44px;margin-top:clamp(14px,1.6vw,20px)}
.space.sub .qz-back{min-height:44px;padding:8px 0;background:none;border:0;font:inherit;font-size:var(--t5);font-weight:700;color:var(--soft);cursor:pointer}
.space.sub .qz-back:hover{color:#fff}
.space.sub .qz-back:focus-visible{outline:2px solid var(--soft);outline-offset:4px;border-radius:4px}
.space.sub .qz-back.is-off{visibility:hidden}
/* キーボードで選んでいるときだけ「Enter で次へ」を見せる */
.space.sub .qz--step .qz-card:has(.qz-opt input:focus-visible) .qz-keyhint{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  font-size:var(--t5);line-height:var(--lh5);font-weight:500;color:var(--note)}
.space.sub .qz--step .qz-foot{display:block;margin-top:0}
.space.sub .qz--step:not(.qz--ready) .qz-foot .btn{display:none}
.space.sub .qz--step.qz--ready .qz-foot .btn{margin-top:14px}
.space.sub .qz--step .qz-msg{min-height:0}
.space.sub .qz--step .qz-msg:not(:empty){margin-top:10px}

/* カード → 結果：カードはその場で消え、結果は同じ場所に opacity だけで 400ms で出る（v9.1：位置の動きはやめた） */
.space.sub .qz-card[hidden]{display:none}
.space.sub .qz--step .qz-result{animation:qzRise 400ms ease both}
@keyframes qzRise{from{opacity:0}to{opacity:1}}
.space.sub .qz-result:focus{outline:none}
.space.sub .qz-stage.is-result .qz-head{display:none}

/* ---------------- 結果 ---------------- */
.space.sub .res-tag{font-family:var(--font-en);font-size:var(--t5);line-height:var(--lh5);font-weight:800;letter-spacing:.16em;color:var(--soft)}
.space.sub .res-title{margin-top:8px;font-size:min(var(--t2),44px);line-height:var(--lh2);font-weight:900;letter-spacing:-.01em;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.space.sub .res-title em{font-style:normal;color:var(--soft)}
.space.sub .qz-result .meter{margin-top:clamp(20px,2.4vw,32px)}
.space.sub .qz-result .meter-word{font-weight:700;color:var(--note)}
.space.sub .qz-result .meter li.is-top .meter-word{color:#fff}
.space.sub .qz-result .res-detail{margin-top:clamp(24px,2.8vw,36px)}
/* 原因ごとの見出し：結果の見出し（h3）の下なので h4。見た目は story-pages.css の .res-item h3 と同じ（v9.1） */
.space.sub .res-item h4{margin:0;font-size:var(--t3);line-height:var(--lh3);font-weight:900;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.space.sub .qz-result .res-cta{margin-top:clamp(28px,3.4vw,44px);padding-top:clamp(24px,2.8vw,32px);border-top:1px solid var(--rule)}
.space.sub .res-next{margin-bottom:14px;font-size:var(--t4);line-height:var(--lh4);font-weight:700;color:#fff;word-break:keep-all;overflow-wrap:anywhere}
.space.sub .qz-result .btn-row .btn--solid{text-align:center;word-break:keep-all;overflow-wrap:anywhere}

/* ---------------- 幅ごとの組み替え ---------------- */
@media (max-width:1180px){
  .space.sub .qz--step .qz-opt span{min-width:9.5em}
}
@media (max-width:860px){
  .space.sub .qz-stage{grid-template-columns:1fr}
  /* JS が無いとき：月は一覧の上に小さく（新月のまま） */
  .space.sub .qz-moon{--d:150px;position:relative;top:auto;order:-1;justify-self:center;margin:0 0 24px}
  .space.sub .qz-arc-l{font-size:12px}
  /* JS があるとき：大きな月はやめ、カードの上の1行に小さな月と目盛りの横バーを置く */
  .space.sub .qz--step .qz-moon{display:none}
  .space.sub .qz--step .qz-main{padding:18px 18px 12px;border-radius:18px}
  .space.sub .qz--step .qz-head{display:grid;grid-template-columns:56px auto auto minmax(0,1fr);grid-template-areas:"m no pct bar" "m g g g";
    column-gap:12px;row-gap:2px;align-items:center;margin-bottom:18px}
  .space.sub .qz--step .qz-mini{grid-area:m;display:block;position:relative;width:56px;height:56px;border-radius:50%;overflow:hidden;
    background:radial-gradient(circle at 35% 35%,#fff 0%,#DDE6FA 45%,#8FA6D8 100%);box-shadow:0 0 0 1px var(--rule)}
  .space.sub .qz--step .qz-mini i{inset:-1px}
  .space.sub .qz--step .qz-no{grid-area:no}
  .space.sub .qz--step .qz-pct{grid-area:pct;min-width:0;text-align:left}
  .space.sub .qz--step .qz-group{grid-area:g;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .space.sub .qz--step .qz-bar{grid-area:bar;justify-self:end;display:flex;gap:7px}
  .space.sub .qz-bar-g{display:flex;gap:4px;padding-bottom:4px;border-bottom:2px solid transparent;transition:border-color 600ms var(--ease-reveal)}
  .space.sub .qz-bar-g.is-top{border-bottom-color:#8DB8FF}
  .space.sub .qz-bar i{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(201,210,234,.6);transition:background-color 300ms ease,box-shadow 300ms ease}
  .space.sub .qz-bar i.is-yes{background:#fff;box-shadow:none}
  .space.sub .qz-bar i.is-no{background:#8DB8FF;box-shadow:none}
  .space.sub .qz--step .qz-q .qz-t{min-height:calc(var(--lh3) * 3em)}
  .space.sub .qz--step .qz-opts{flex-direction:column;gap:10px;margin-top:18px}
  .space.sub .qz--step .qz-opt{flex:none;width:100%}
  .space.sub .qz--step .qz-opt span{width:100%;min-width:0}
  .space.sub .qz--step .qz-nav{margin-top:6px}
  /* 結果のとき：月の行（小さな月・%・横バー）だけ上に残す */
  .space.sub .qz-stage.is-result .qz-head{display:grid;grid-template-areas:"m pct bar";grid-template-columns:56px auto minmax(0,1fr)}
  .space.sub .qz-stage.is-result .qz-no,.space.sub .qz-stage.is-result .qz-group{display:none}
}
@media (max-width:600px){
  .space.sub .qz-result .meter li{grid-template-columns:1fr;row-gap:6px}
  .space.sub .qz-result .meter-n{flex-wrap:wrap;column-gap:12px;row-gap:4px;white-space:normal}
  .space.sub .qz-result .btn-row .btn{width:100%}
}

/* ---------------- 動きを減らす設定：最初から完成形。月は瞬時に満ち、結果はすぐ出る ---------------- */
@media (prefers-reduced-motion:reduce){
  .space.sub .qz-moon::before,.space.sub .qz-luna i,.space.sub .qz-mini i,.space.sub .qz-arc,.space.sub .qz-tick,.space.sub .qz-arc-l,
  .space.sub .qz-bar-g,.space.sub .qz-bar i,.space.sub .qz-opt span{transition:none}
  .space.sub .qz--step .qz-result{animation:none}
}

/* ---------------- フッター（v9.1） ----------------
   共通の作りはフッターを margin-top:-100vh で最後の呼びかけに重ねる。フッターの高さ（pages-space.css の min-height:76vh）が重なり幅より低いと、
   ページの一番下でフッターの下に呼びかけの地球と注記がはみ出す（1440×900 で 216px）。このページではフッターを重なり幅と同じ 100vh 以上にする。
   動きを減らす設定では共通側が重ねない（margin-top:0）ので、ここも変えない */
@media (prefers-reduced-motion:no-preference){
  .space.sub .site-footer{min-height:100vh}
}

/* 最終通し検査（2026-10-11）：最後の呼びかけの注記。スクロールの途中で地球の縁の明るい光が文字の後ろを通るので、相談ページと同じく文字の周りだけ暗くする */
.space.sub #cta .notes li{text-shadow:0 0 16px rgba(3,6,14,.95),0 0 6px rgba(3,6,14,.95),0 0 2px rgb(3,6,14)}