@charset "UTF-8";
/* 社会人力診断・設問ページ（quiz/）。
   トークン・ヘッダー/フッター・.btn は style.css を共有する。
   30問を1問ずつ縦積みで出す最小構成。スマホ幅375pxが主戦場なので、
   選択肢は横幅いっぱい・縦積み・タップ領域は必ず56px以上を確保する。 */

.quiz{
  min-height:calc(100vh - 88px - 260px); /* ヘッダー高 + フッター概算ぶんを引いて縦センターに近づける */
  display:flex;align-items:center;justify-content:center;
  padding:56px 20px 72px;
}
.quiz__wrap{width:100%;max-width:560px}

/* ---------- 進捗 ---------- */
.quiz__progress{
  text-align:center;font-size:13px;font-weight:700;color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.quiz__progress #qnum{color:var(--blue-dark);font-size:15px}

.quiz__bar{
  margin-top:10px;height:8px;border-radius:var(--radius-pill);
  background:var(--sky-200);overflow:hidden;
}
.quiz__bar span{
  display:block;height:100%;background:var(--blue-dark);border-radius:inherit;
  transition:width .25s ease;
}

/* ---------- 設問 ---------- */
.quiz__kind{
  margin-top:28px;text-align:center;font-size:13px;font-weight:700;color:var(--blue);
  letter-spacing:.02em;
}
.quiz__text{
  margin-top:10px;text-align:center;font-size:clamp(18px,4.6vw,22px);font-weight:700;
  line-height:1.6;letter-spacing:-.01em;color:var(--navy);
}

/* ---------- 選択肢 ---------- */
.quiz__options{margin-top:28px;display:grid;gap:12px}
.quiz__opt{
  display:flex;align-items:center;
  min-height:56px;width:100%;
  padding:14px 20px;
  border:1.5px solid var(--border);border-radius:var(--radius-md);
  background:#fff;box-shadow:var(--sh-card);
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.5;color:var(--text);
  text-align:left;cursor:pointer;
  transition:border-color .12s,background-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.quiz__opt:hover{border-color:var(--blue)}
.quiz__opt.is-on{
  border-color:var(--blue-dark);background:var(--sky-050);
  color:var(--navy);font-weight:700;
}
/* フォーカスリングは維持する（キーボード操作のアクセシビリティ） */
.quiz__opt:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ---------- 戻る ---------- */
.quiz__nav{margin-top:24px;text-align:center}
.quiz__back{
  border:0;background:none;padding:10px 14px;
  font-family:inherit;font-size:13px;font-weight:700;color:var(--text-muted);
  cursor:pointer;
}
.quiz__back:hover{color:var(--blue)}
.quiz__back:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- JS 無効時の案内（index.html の <noscript>） ---------- */
.qnoscript{width:100%;max-width:560px;text-align:center}
.qnoscript h1{font-size:clamp(19px,4.6vw,24px);font-weight:800;line-height:1.6;color:var(--navy)}
.qnoscript p{margin-top:14px;font-size:13.5px;font-weight:500;line-height:1.95;color:var(--text-muted)}
.qnoscript p + p{margin-top:24px}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .quiz{padding:36px 16px 56px}
  .quiz__opt{padding:14px 16px;font-size:13.5px}
}