@charset "utf-8";
/* =========================================================
   questionnaire.css — アンケート共通スタイル（ダークテーマ）
   questionnaire02.html / questionnaire03.html などで共通利用
   ========================================================= */
/* アンカー移動時の余白（固定ヘッダーがある場合は数値を大きく） */
html{ scroll-behavior:smooth; }
#apply{ scroll-margin-top:120px; }
.qf-card{ color:#fff; padding:clamp(16px,3vw,28px);}
/* ステップ */
.qf-steps{ display:flex; gap:6px; margin:0 auto 26px; padding:0; list-style:none; max-width:520px; }
.qf-steps li{ flex:1; position:relative; text-align:center; padding:12px 6px; font-weight:800; font-size:clamp(13px,2.6vw,16px);
  background:#3a3a3a; color:#9a9a9a; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.qf-steps li:first-child{ clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.qf-steps li.is-active{ background:#e7e7e7; color:#111; }
.qf-steps li.is-done{ background:var(--line); color:#111; }

/* 行：ラベル左・コントロール右（SPは縦積み） */
.qf-row{ display:grid; grid-template-columns:180px 1fr; gap:10px 18px; align-items:start; padding:16px 0; border-bottom:1px dashed #444; }
.qf-label{ font-weight:800; font-size:clamp(13px,1.7vw,15px); padding-top:9px; }
.qf-label .req{ color:var(--accent); font-size:.9em; margin-left:6px; }
.qf-control{ min-width:0; }

/* テキスト系（白ボックス） */
.qf-input, .qf-area{ width:100%; padding:12px 12px; border:1px solid #000; background:#fff; color:#111; font:inherit; }
.qf-input:focus, .qf-area:focus{ outline:2px solid var(--line); outline-offset:1px; }
.qf-area{ min-height:150px; resize:vertical; }
.qf-score{ width:120px; text-align:center; }
.qf-scoreline{ display:flex; align-items:center; gap:10px; font-weight:700; flex-wrap:wrap; }
.qf-hour,.qf-day,.qf-month{ width:100px; text-align:center; }
.qf-sup{ grid-column:2; margin:6px 0 0; font-size:clamp(13px, 1.6vw, 15px); line-height:1.6; color:var(--line); }

/* 選択肢（ボタン型ラジオ／チェック） */
.qf-opts{ display:grid; gap:8px; }
.qf-opts.cols-4{ grid-template-columns:repeat(4,1fr); }
.qf-opts.cols-3{ grid-template-columns:repeat(3,1fr); }
.qf-opts.cols-2{ grid-template-columns:repeat(2,1fr); }
.qf-opt{ position:relative; display:block; }
.qf-opt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.qf-opt span{ display:block; text-align:center; padding:11px 6px; border:1px solid #888; background:#111; color:#fff; font-weight:700; font-size:clamp(12px,2.4vw,14px); transition:.12s; }
.qf-opt input:checked + span{ background:var(--line); border-color:var(--line); color:#111; }
.qf-opt input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
/* 選択肢内の小見出し（例：すべてあった／忘れてた） */
.qf-opt .qf-note-in{ font-size:.78em; font-weight:700; color:var(--accent); }
.qf-opt input:checked + span .qf-note-in{ color:#a00f1f; }

/* 条件付き表示（選択で展開・アニメーション） */
.qf-reveal{ display:grid; grid-template-columns:180px 1fr; gap:10px 18px; max-height:0; overflow:hidden; opacity:0; padding:0; border-bottom:none; transition:max-height .35s ease, opacity .25s ease, padding .35s ease; }
.qf-reveal.show{ max-height:200px; opacity:1; padding:16px 0; border-bottom:1px dashed #444; }

/* 注意書き（全幅・黄） */
.qf-note{ grid-column:1 / -1; color:var(--line); font-weight:700; font-size:13px; }
.qf-note-row{ padding:12px 0; border-bottom:1px dashed #444; }

/* エラー */
.qf-error{ color:var(--accent); font-weight:700; font-size:13px; margin:6px 0 0; display:none; }
.qf-row.has-error .qf-label{ color:var(--accent); }
.qf-row.has-error .qf-input{ outline:2px solid var(--accent); }
.qf-row.has-error .qf-error{ display:block; }

/* ボタン */
.qf-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.qf-btn{ min-width:150px; padding:14px 22px; border-radius:8px; font-weight:900; font-size:clamp(14px,2.6vw,16px); cursor:pointer; border:2px solid transparent; }
.qf-btn.primary{ background:var(--accent); color:#fff; }
.qf-btn.primary:hover{ background:#a90f22; }
.qf-btn.ghost{ background:transparent; color:#fff; border-color:#fff; }
.qf-btn.ghost:hover{ background:#ffffff1a; }

/* 確認・完了 */
.qf-confirm, .qf-done{ display:none; }
.qf-confirm .qf-crow{ display:grid; grid-template-columns:180px 1fr; gap:6px 18px; padding:12px 0; border-bottom:1px solid #333; }
.qf-confirm .qf-clabel{ font-weight:800; font-size:clamp(13px,1.7vw,15px); }
.qf-confirm .qf-cval{ white-space:pre-wrap; word-break:break-word; min-height:1.2em; }
.qf-confirm .qf-cval.empty{ color:#888; }
.qf-lead{ margin:0 0 18px; font-weight:700; }
.qf-done{ text-align:center; padding:36px 10px; }
.qf-done h3{ font-size:clamp(20px,4vw,28px); margin:0 0 10px; }

@media (max-width:640px){
  .qf-row{ grid-template-columns:1fr; gap:8px; }
  .qf-label{ padding-top:0; }
  .qf-reveal{ grid-template-columns:1fr; }
  .qf-confirm .qf-crow{ grid-template-columns:1fr; gap:2px; }
  .qf-sup{ grid-column:1 / -1; }
}