@charset "utf-8";

/* ============================================================
   おくりね｜申込フォーム／ヒアリングシート
   style.css のトークンを継承して使う。
   ============================================================ */

/* フォーム画面は明るい面だけで構成する。
   --ink-2 はLP側では「聴く面のカード地」だが、ここでは本文の補助色として使う。 */
body.formpage{
  background:var(--paper); padding-bottom:0;
  --ink-2:#4A5360;
}

/* ---------- ヘッダー ---------- */
.fhead{ background:var(--surface); border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:40; }
.fhead__in{ max-width:760px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.fhead__logo{ font-family:var(--serif); font-size:18px; font-weight:600; text-decoration:none; color:var(--ink); letter-spacing:.05em; }
.steps{ list-style:none; display:flex; gap:6px; margin:0; padding:0; font-size:12px; color:var(--ink-3); font-family:var(--mono); flex-wrap:wrap; }
.steps li{ padding:3px 9px; border:1px solid var(--rule); border-radius:2px; }
.steps li.on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600; }
.steps li.done{ color:var(--ink-3); opacity:.55; }

/* ---------- 本体 ---------- */
.fmain{ max-width:760px; margin:0 auto; padding:36px 20px 90px; }
.fstep h1{ font-size:clamp(22px,4vw,29px); margin-bottom:14px; }
.fintro{ color:var(--ink-2); font-size:15px; margin-bottom:28px; line-height:1.85; }

.fset{ border:1px solid var(--rule); border-radius:3px; background:var(--surface); padding:22px; margin:0 0 20px; }
.fset legend{ font-family:var(--serif); font-weight:700; font-size:16px; padding:0 8px; }
.frow{ margin-bottom:20px; }
.frow:last-child{ margin-bottom:0; }
.flabel{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px; }
.req{ display:inline-block; font-size:10.5px; font-weight:700; color:var(--seal); background:var(--seal-soft); padding:1px 6px; border-radius:2px; margin-left:6px; vertical-align:1px; }
.opt{ display:inline-block; font-size:10.5px; color:var(--ink-3); border:1px solid var(--rule); padding:1px 6px; border-radius:2px; margin-left:6px; vertical-align:1px; }

input[type="text"],input[type="email"],input[type="tel"],input[type="date"],select,textarea{
  font:inherit; width:100%; padding:11px 13px; border:1px solid var(--rule); border-radius:2px;
  background:var(--surface); color:var(--ink); line-height:1.6;
}
textarea{ resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{ border-color:var(--seal); background:#FFF9F8; }
input:disabled,textarea:disabled{ background:var(--surface-2); color:var(--ink-3); cursor:not-allowed; }
.fhint{ font-size:12.5px; color:var(--ink-3); margin-top:6px; line-height:1.75; }
.fhint b{ color:var(--ink-2); }

.fradio,.fcheck{
  display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border:1px solid var(--rule);
  border-radius:2px; margin-bottom:9px; cursor:pointer; background:var(--surface); font-size:14px; line-height:1.75;
}
.fradio:has(input:checked),.fcheck:has(input:checked){ border-color:var(--accent); background:#FFFCF4; }
.fradio input,.fcheck input{ margin-top:5px; accent-color:var(--accent); flex:0 0 auto; width:17px; height:17px; }
.fradio small,.fcheck small{ color:var(--ink-3); font-size:12.5px; display:block; margin-top:3px; }

/* ---- 注文サマリ ---- */
.osum{ font-size:14.5px; }
.osum__ttl{ font-family:var(--serif); font-size:19px; font-weight:700; }
.osum__row{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--rule-soft); }
.osum__row:last-of-type{ border-bottom:0; }
.osum__row span:last-child{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.osum__total{ display:flex; justify-content:space-between; gap:14px; margin-top:12px; padding-top:12px; border-top:2px solid var(--ink); font-weight:700; }
.osum__total b{ font-family:var(--mono); font-size:22px; }

/* ---- 最終確認画面 ---- */
.confirm{ background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:24px; margin-bottom:22px; }
.confirm h2{ font-size:15.5px; margin:26px 0 10px; padding-left:10px; border-left:3px solid var(--accent); }
.confirm h2:first-child{ margin-top:0; }
.confirm p, .confirm div{ font-size:14.5px; line-height:1.85; }
.cf_lead{ color:var(--ink-2); }
.cf_note{ font-size:12.5px; color:var(--ink-3); margin-top:9px; line-height:1.8; }
.confirm .tablewrap{ margin-top:12px; }
.cfline{ display:flex; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:1px solid var(--rule-soft); }
.cfline:last-child{ border-bottom:0; }
.cfline span:last-child{ font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cfline--sum{ border-top:2px solid var(--ink); border-bottom:0; margin-top:8px; padding-top:10px; font-weight:700; }
.cfline--sum span:last-child{ font-size:20px; }

.agrees{ background:var(--surface); border:1px solid var(--accent); border-radius:3px; padding:22px; margin-bottom:20px; }
.agrees__ttl{ font-size:16px; margin-bottom:6px; }

/* ---- ボタン ---- */
.factions{ display:flex; gap:11px; flex-wrap:wrap; margin-top:24px; }
.fbtn{ font:inherit; font-weight:700; padding:14px 26px; border-radius:2px; cursor:pointer; text-decoration:none; display:inline-block; text-align:center; border:1px solid var(--accent); font-size:15px; }
.fbtn--main{ background:var(--ink); color:var(--on-ink); border-color:var(--ink); flex:1 1 auto; }
.fbtn--main:hover{ background:#1B2A41; }
.fbtn--main[disabled]{ background:var(--rule); border-color:var(--rule); color:var(--ink-3); cursor:not-allowed; }
.fbtn--ghost{ background:transparent; color:var(--accent); }
.fbtn--ghost:hover{ background:var(--accent-soft); }
.fnote{ font-size:12.5px; color:var(--ink-3); margin-top:12px; line-height:1.8; }

.ferr{ background:var(--seal-soft); border-left:3px solid var(--seal); color:#8C2E1E; padding:13px 16px; font-size:14px; margin-top:18px; border-radius:0 2px 2px 0; line-height:1.8; }
.ferr ul{ margin:6px 0 0; padding-left:20px; }

/* ---- 完了画面 ---- */
.done{ background:var(--surface); border:1px solid var(--rule); border-radius:3px; padding:26px; font-size:15px; line-height:1.9; }
.done h2{ font-size:17px; margin:22px 0 8px; }
.done h2:first-child{ margin-top:0; }
.done .orderno{ font-family:var(--mono); font-size:18px; font-weight:600; background:var(--accent-soft); color:var(--accent); padding:4px 12px; border-radius:2px; display:inline-block; }
.done ol{ padding-left:20px; }
.done li{ margin-bottom:9px; }
.done .paybtn{ display:block; text-align:center; background:var(--ink); color:var(--on-ink); font-weight:700; padding:16px; border-radius:2px; text-decoration:none; margin:20px 0 8px; font-size:16px; }
.done .paybtn:hover{ background:#1B2A41; }

/* ---- 未設定の警告（運用者向け） ---- */
.setupwarn{ background:var(--amber-soft); border-left:3px solid var(--amber); color:#6B4C14; padding:14px 17px; font-size:13.5px; line-height:1.85; margin:18px 0; border-radius:0 2px 2px 0; }
.setupwarn b{ color:#4A340B; }
.setupwarn code{ font-family:var(--mono); font-size:12.5px; background:rgba(0,0,0,.06); padding:1px 5px; border-radius:2px; }

/* ---- ヒアリングシート ---- */
.hgate{ background:var(--surface); border:2px solid var(--seal); border-radius:3px; padding:24px; margin-bottom:26px; }
.hgate h2{ font-size:17px; color:var(--seal); margin-bottom:12px; }
.hgate p{ font-size:14.5px; line-height:1.9; color:var(--ink-2); margin-bottom:12px; }
.hpage{ display:none; }
.hpage.on{ display:block; }
.hprog{ display:flex; gap:4px; margin-bottom:26px; }
.hprog i{ flex:1 1 auto; height:4px; background:var(--rule); border-radius:2px; }
.hprog i.on{ background:var(--accent); }
.hpttl{ font-family:var(--serif); font-size:20px; font-weight:700; margin-bottom:6px; }
.hpsub{ font-size:13.5px; color:var(--ink-3); margin-bottom:22px; line-height:1.8; }
.hwhy{ font-size:12px; color:var(--ink-3); margin-top:5px; padding-left:11px; border-left:2px solid var(--rule); line-height:1.7; }
.hsave{ font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:14px; }

/* ---------- フッター ---------- */
.ffoot{ border-top:1px solid var(--rule); background:var(--surface); padding:22px 20px 40px; }
.ffoot{ display:flex; gap:8px 22px; flex-wrap:wrap; justify-content:center; font-size:12.5px; }
.ffoot a{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule); }
.ffoot a:hover{ color:var(--accent); border-bottom-color:var(--accent); }