:root{
  --ink:#16233d;
  --ink-soft:#5a6b82;
  --paper:#ffffff;
  --paper-soft:#f5f6f8;
  --line:#e1e4e9;
  --accent:#e8451f;
  --accent-deep:#16233d;
  --gold:#e8451f;
  --danger:#b3452f;
  --radius:2px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper-soft);
  font-family:'Noto Sans JP', sans-serif;
  color:var(--ink);
  line-height:1.7;
}
.wrap{ max-width:640px; margin:0 auto; padding:56px 24px 96px; }
.eyebrow{ font-size:12px; letter-spacing:.18em; color:var(--accent); font-weight:700; }
h1{ font-family:'Zen Kaku Gothic New', sans-serif; font-size:28px; font-weight:900; margin:8px 0 4px; color:var(--ink); letter-spacing:.01em; }
.lead{ color:var(--ink-soft); font-size:14px; margin:0 0 32px; }

.tracker{ display:flex; align-items:center; margin-bottom:40px; }
.tracker .node{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:0 0 auto; width:76px; }
.tracker .num{
  width:28px;height:28px; border-radius:50%; border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;
  color:var(--ink-soft); background:var(--paper); transition:all .25s ease;
}
.tracker .label{ font-size:11px; color:var(--ink-soft); letter-spacing:.05em; }
.tracker .bar{ flex:1 1 auto; height:1px; background:var(--line); margin-bottom:22px; }
.tracker .node.active .num{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tracker .node.active .label{ color:var(--ink); font-weight:700; }
.tracker .node.done .num{ background:var(--accent-deep); border-color:var(--accent-deep); color:#fff; }

.card{ background:var(--paper); border:1px solid var(--line); padding:36px 32px; }

.field{ margin-bottom:24px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.field .req{ color:var(--danger); font-size:11px; margin-left:6px; font-weight:700; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=number], .field select, .field textarea{
  width:100%; border:none; border-bottom:1px solid var(--line); background:transparent;
  padding:10px 2px; font-size:15px; font-family:inherit; color:var(--ink); outline:none;
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom:2px solid var(--accent); padding-bottom:9px;
}
.field textarea{ resize:vertical; min-height:100px; }
.hint{ font-size:12px; color:var(--ink-soft); margin-top:6px; }
.error-msg{ font-size:12px; color:var(--danger); margin-top:6px; display:none; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-bottom-color:var(--danger); }
.field.invalid .error-msg{ display:block; }

.check-grid{ display:flex; flex-direction:column; gap:10px; }
.check-item{ display:flex; gap:10px; align-items:flex-start; font-size:14px; }
.check-item input{ margin-top:3px; }
.check-item .price{ color:var(--ink-soft); font-size:12px; margin-left:6px; }

.consent{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-soft); margin-bottom:28px; }
.consent input{ margin-top:3px; }

.actions{ display:flex; gap:12px; margin-top:8px; }
button{
  font-family:inherit; font-size:14px; font-weight:700; letter-spacing:.03em;
  padding:14px 28px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer;
  transition:opacity .2s ease, transform .1s ease;
}
button:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent-deep); color:#fff; flex:1; }
.btn-primary:hover{ opacity:.9; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--paper-soft); }

.confirm-row{ display:flex; justify-content:space-between; gap:24px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.confirm-row:last-child{ border-bottom:none; }
.confirm-row dt{ color:var(--ink-soft); flex:0 0 130px; }
.confirm-row dd{ margin:0; flex:1; white-space:pre-wrap; text-align:right; }
dl.confirm-list{ margin:0 0 28px; }
.confirm-row.total dt, .confirm-row.total dd{ font-weight:900; color:var(--accent); font-size:18px; }

.step{ display:none; }
.step.active{ display:block; }

.done-icon{ width:48px;height:48px; border-radius:50%; background:var(--accent-deep); color:#fff;
  display:flex;align-items:center;justify-content:center; font-size:22px; margin-bottom:20px; }
.done-title{ font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900; font-size:20px; margin:0 0 12px; }
.done-text{ color:var(--ink-soft); font-size:14px; margin-bottom:0; }

.submit-error{ display:none; background:#fbeeea; border:1px solid var(--danger); color:var(--danger);
  font-size:13px; padding:12px 14px; margin-bottom:20px; }

.price-box{
  background:var(--paper); border:1px solid var(--ink); padding:18px 20px; margin:8px 0 28px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.price-box .label{ font-size:13px; color:var(--ink-soft); font-weight:700; }
.price-box .amount{ font-family:'Zen Kaku Gothic New', sans-serif; font-size:28px; font-weight:900; color:var(--accent); }
.price-box .amount small{ font-size:13px; font-weight:400; color:var(--ink-soft); }

.nav-back{ display:inline-block; margin-bottom:24px; font-size:13px; color:var(--ink-soft); text-decoration:none; }
.nav-back:hover{ color:var(--accent); }

@media (max-width:480px){
  .wrap{ padding:32px 16px 72px; }
  .card{ padding:28px 20px; }
  .confirm-row{ flex-direction:column; gap:4px; }
  .confirm-row dd{ text-align:left; }
  .tracker .node{ width:auto; flex:1; }
}