/* ========================================================================
   フォームの確認ステップ（入力 → 確認 → 送信完了）
   contact.html / download.html / *-thanks.html で共用
   動作は assets/form-confirm.js
   ======================================================================== */

/* ── 進行ステップ ─────────────────────────────────────── */
/* scroll-margin-top: 追従ヘッダー（PC 81px / SP 72px）＋余白24px 分だけ上を空けてスクロールを止める */
.form-steps { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; scroll-margin-top: 105px; }
.form-steps li { display: flex; align-items: center; gap: 8px; font-family: "Noto Sans JP", sans-serif; font-size: 13px; font-weight: 700; color: #b5b5b5; white-space: nowrap; }
.form-steps li .n { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #e6e6e6; color: #fff; display: grid; place-items: center; font-family: "Oswald", sans-serif; font-size: 13px; line-height: 1; }
.form-steps li.is-done { color: #4a4a4a; }
.form-steps li.is-done .n { background: #a5d494; }
.form-steps li.is-current { color: #2a2a2a; }
.form-steps li.is-current .n { background: #4fb233; }
.form-steps .bar { flex: 1; min-width: 12px; height: 1px; background: #e6e6e6; }

/* ── 確認画面 ─────────────────────────────────────────── */
.form-confirm .lead { font-size: 14px; line-height: 1.9; color: #4a4a4a; margin: -10px 0 24px; }
.confirm-list { margin: 0; border-top: 1px solid #e6e6e6; }
.confirm-list > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-bottom: 1px solid #e6e6e6; }
.confirm-list dt { padding: 15px 18px; background: #fafafa; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 13px; line-height: 1.7; color: #2a2a2a; }
.confirm-list dd { margin: 0; padding: 15px 18px; font-size: 14px; line-height: 1.9; color: #4a4a4a; white-space: pre-wrap; overflow-wrap: anywhere; }
.confirm-list dd.is-empty { color: #b5b5b5; }
.confirm-actions { margin-top: 28px; display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.confirm-actions .btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 16px; }
.confirm-actions .btn[disabled] { opacity: 0.55; pointer-events: none; }

/* 資料請求フォームのように幅の狭いカラムに入る場合は項目名列を詰める */
.form-confirm--narrow .confirm-list > div { grid-template-columns: 150px minmax(0, 1fr); }
.form-confirm--narrow .confirm-list dt,
.form-confirm--narrow .confirm-list dd { padding: 13px 15px; }

/* 完了ページのステップ（中央寄せレイアウト内で使う） */
.thanks-block .form-steps { max-width: 520px; margin: 0 auto 40px; }

@media (max-width: 980px) {
  .form-confirm .confirm-list > div,
  .form-confirm--narrow .confirm-list > div { grid-template-columns: 150px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .form-steps { gap: 8px; scroll-margin-top: 96px; }
  .form-steps li { font-size: 12px; }
  .form-confirm .confirm-list > div,
  .form-confirm--narrow .confirm-list > div { grid-template-columns: 1fr; }
  .form-confirm .confirm-list dt,
  .form-confirm--narrow .confirm-list dt { padding: 12px 14px; }
  .form-confirm .confirm-list dd,
  .form-confirm--narrow .confirm-list dd { padding: 12px 14px; }
  .confirm-actions { grid-template-columns: 1fr; }
  .confirm-actions .btn-ghost { order: 2; }
}