/* 登録まわりの3画面で共有する。LPと同じトークンを使う */
:root{
  --void:#F8FAFC;--surface:#FFFFFF;--white:#0F172A;--dim:#475569;--dimmer:#94A3B8;
  --line:#E2E8F0;--signal:#0F766E;--signal-dim:#F0FDFA;--absent:#B45309;--absent-bg:#FFFBEB;
  --f-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif;
  --f-lat:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{background:var(--void);color:var(--white);font-family:var(--f-jp);font-size:15px;line-height:1.85;
  -webkit-font-smoothing:antialiased;margin:0;min-height:100vh;display:flex;flex-direction:column}
p{margin:0}a{color:inherit}
h1{margin:0;font-weight:800;line-height:1.34;letter-spacing:-.012em;font-size:clamp(24px,3.6vw,34px)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;width:100%;margin:0 auto;padding:20px 28px}
.mark{font-family:var(--f-lat);font-weight:800;font-size:15px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--white)}
.mark:hover{opacity:.75}
.back{font-size:12.5px;color:var(--dim);text-decoration:none}
.back:hover{color:var(--white)}

.wrap{flex:1;width:100%;max-width:520px;margin:0 auto;padding:56px 28px 96px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--signal);flex:none}
.lead{margin-top:18px;color:var(--dim);font-size:14.5px}

.steps{display:flex;align-items:center;gap:10px;margin-top:34px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--dimmer)}
.steps i{font-style:normal;padding:5px 11px;border:1px solid var(--line);border-radius:99px;background:var(--surface);white-space:nowrap}
.steps i.on{color:var(--signal);border-color:var(--signal);background:var(--signal-dim)}
.steps i.done{color:var(--dim)}
.steps s{flex:1;height:1px;background:var(--line);text-decoration:none}

form{margin-top:34px}
.field + .field{margin-top:20px}
.field label{display:block;font-size:12.5px;color:var(--dim);font-weight:600;letter-spacing:.02em}
.field label .opt{margin-left:8px;font-weight:400;color:var(--dimmer)}
.field input{margin-top:8px;width:100%;font-family:var(--f-jp);font-size:15px;padding:13px 15px;
  border-radius:9px;color:var(--white);background:var(--surface);border:1px solid var(--line)}
.field input::placeholder{color:var(--dimmer)}
.field input:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-color:var(--signal)}
.field input[aria-invalid=true]{border-color:var(--absent)}
.err{display:none;margin-top:7px;font-size:12.5px;color:var(--absent)}
.err.on{display:block}

.btn{display:inline-block;width:100%;font-family:var(--f-jp);font-size:14px;font-weight:600;letter-spacing:.03em;
  padding:15px 28px;border-radius:9px;border:none;cursor:pointer;text-align:center;text-decoration:none;
  background:var(--signal);color:#F8FAFC;transition:background .15s ease}
.btn:hover{background:#0B5C50}
.btn:disabled{opacity:.55;cursor:default}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.btn-line{background:transparent;color:var(--white);border:1px solid var(--line)}
.btn-line:hover{background:var(--surface);border-color:var(--white)}
.submit{margin-top:30px}

.fine{margin-top:20px;color:var(--dimmer);font-size:12.5px;line-height:1.9}
.fine a{color:var(--signal);text-decoration:none}
.fine a:hover{text-decoration:underline}

.panel{margin-top:34px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:28px 26px}
.panel.good{border-color:var(--signal);background:var(--signal-dim)}
.panel.bad{border-color:var(--absent);background:var(--absent-bg)}
.panel b{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700}
.panel b svg{width:18px;height:18px;flex:none;stroke:var(--signal);stroke-width:2.6;fill:none}
.panel.bad b svg{stroke:var(--absent)}
.panel .who{margin-top:14px;font-family:var(--f-mono);font-size:13px;color:var(--signal);word-break:break-all}
.panel .then{margin-top:14px;color:var(--dim);font-size:13.5px;line-height:1.85}
.panel .then + .btn{margin-top:22px}

footer{padding:30px 0 56px;border-top:1px solid var(--line);color:var(--dimmer);font-size:11.5px}
.frow{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;max-width:1120px;margin:0 auto;padding:0 28px}
.flinks{display:flex;flex-wrap:wrap;gap:20px}
.flinks a{color:var(--dim);text-decoration:none}
.flinks a:hover{color:var(--white)}

/* ---------- 画面が狭いとき ---------- */
@media(max-width:640px){
  .nav{padding:16px 20px}
  .wrap{padding:40px 20px 72px}
  .frow{padding:0 20px;flex-direction:column;align-items:flex-start;gap:14px}
  .flinks{flex-wrap:wrap;gap:12px 18px}
  /* 3段の手順表示は、狭いと横に入りきらない。折り返して縦の区切り線を消す */
  .steps{flex-wrap:wrap;gap:8px;margin-top:28px}
  .steps s{display:none}
  .panel{padding:24px 20px}
  .panel b{font-size:16px}
  .field input{font-size:16px}   /* iOS が 16px 未満で勝手に拡大するのを避ける */
}
@media(max-width:400px){
  .nav{padding:14px 16px}
  .wrap{padding:34px 16px 64px}
  .frow{padding:0 16px}
}