@charset "utf-8";
/* CSS Document */

/*事前アンケート*/
/* 白カード */
.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:#d7d7d7; color:#7a7a7a; 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:#4a4a4a; color:var(--paper); }
.qf-steps li.is-done{ background:var(--line); color:#111; }

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

/* 通常（PC）：コントロールの下＝左揃え */
.qf-sup{ grid-column:2; margin:6px 0 0; font-size:clamp(13px, 1.6vw, 15px); line-height:1.6; color:var(--line); }


/* テキスト系入力 */
.qf-input[readonly]{ background:#f4f4f4; color:#555; }
.qf-area{ min-height:150px; resize:vertical; }
/* テキスト系（白ボックス） */
.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-hour,.qf-day,.qf-month{ width:100px; text-align:center; }
.qf-scoreline{ display:flex; align-items:center; gap:10px; font-weight:700; }


/* 選択肢（ボタン型のラジオ/チェック） */
.qf-opts{ display:grid; gap:8px; }
.qf-opts.cols-5{ grid-template-columns:repeat(5,1fr); }
.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:10px 0px; border:1px solid #bfbfbf; background:#fff;color: var(--ink); font-weight:700; font-size:clamp(12px,2.4vw,14px); transition:background .12s, border-color .12s, box-shadow .12s; }
.qf-opt input:checked + span{ background:var(--line); border-color:var(--accent);  }
.qf-opt input:focus-visible + span{ outline:5px solid var(--accent); outline-offset:2px; }
.qf-opts.head .qf-opt span{ font-weight:900; }   /* コース見出し行を強調 */

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

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

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

@media screen and (max-width: 1024px) {
.qf-opts.cols-5{ grid-template-columns:repeat(2,1fr); }
.qf-opts.cols-4{ grid-template-columns:repeat(2,1fr); }
.qf-opts.cols-2{ grid-template-columns:repeat(1,1fr); }
  .qf-row{ grid-template-columns:1fr; gap:8px; }
  .qf-label{ padding-top:0;font-size: 18px }
    .qf-label small{ margin-left:4px;}
  .qf-confirm .qf-crow{ grid-template-columns:1fr; gap:2px; }
    .qf-sup{ grid-column:1 / -1; }
}
@media screen and (max-width: 767px) {
.qf-opts.cols-3{ grid-template-columns:repeat(2,1fr); }
}

qf-meta h4{color: black}