@charset "UTF-8";
/* 新規登録リデザイン — 共通フォーム（Sectioned / CAPS Pink）
   A=single / B=wizard / C=accordion の3バリエーション共通。見た目の出し分けは
   body[data-layout]（本ファイル下部の「レイアウト別」節）で行う。
   register-standalone/register-02-input.html 準拠。サイト共通ヘッダー／フッターは
   そのまま使い、フォーム領域のみ刷新。共有 JS の data-* 契約に対応。 */

:root {
  --pink-5:#DF0050; --pink-6:#B80045; --pink-5-5:rgba(223,0,80,.05); --pink-5-10:rgba(223,0,80,.10);
  --bluegray-0:#F8FAFC; --bluegray-1:#F1F5F9; --bluegray-2:#E2E8F0;
  --warmgray-1:#EEEEEE; --warmgray-2:#E0E0E0; --warmgray-3:#A6A6A6; --warmgray-5:#616161;
  --black:#212121; --white:#FFFFFF;
  --red-4:#F13D4A; --red-4-5:rgba(241,61,74,.06);
  --tealblue-5:#14B8A6; --tealblue-7:#0F766E; --tealblue-5-10:rgba(20,184,166,.10);
  --orange-4:#E88B37; --orange-4-bg:rgba(232,139,55,.10);
  --blue-4:#2F80ED;

  --primary:var(--pink-5); --primary-hover:var(--pink-6);
  --text:var(--black); --text-desc:var(--warmgray-5); --text-ph:var(--warmgray-3);
  --bg-default:var(--bluegray-0); --bg-surface:var(--white); --bg-disabled:var(--warmgray-1);
  --border:var(--warmgray-2); --border-strong:var(--warmgray-3); --border-focus:var(--pink-5);
  --error:var(--red-4); --success:var(--tealblue-5); --success-text:var(--tealblue-7);

  --radius-sm:4px; --radius-md:10px; --radius-lg:16px; --radius-full:9999px;
  --shadow-sm:0 1px 2px -1px rgba(0,0,0,.10),0 1px 3px 0 rgba(0,0,0,.10);
  --shadow-md:0 2px 4px -2px rgba(0,0,0,.10),0 4px 6px -1px rgba(0,0,0,.10);
  --shadow-button:0 4px 6px -4px rgba(0,0,0,.10),0 10px 15px -3px rgba(0,0,0,.10);

  --font-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --content-max:540px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body.reg {
  font-family:var(--font-sans); font-size:16px; color:var(--text);
  background:var(--bg-default); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
button { font-family:inherit; }

/* ===== 既存サイトヘッダーを馴染ませる ===== */
body.reg > header { border-top:3px solid var(--primary); background:var(--bg-surface); border-bottom:1px solid var(--border); }
body.reg > header .logo { margin:0; }
body.reg > header .logo img { display:block; height:auto; }

/* ===== フッター（テンプレート側 reg-footer） ===== */
.reg-footer { text-align:center; padding:24px 0 32px; }
.reg-footer .copy { margin:0; font-size:12px; color:var(--text-ph); }

/* ===== Layout shell ===== */
.shell { max-width:var(--content-max); margin:0 auto; padding:0 20px 48px; }

/* ===== Intro guidance ===== */
.intro { padding:24px 0 4px; }
.intro h1 { font-size:24px; font-weight:700; letter-spacing:-.022em; margin:0; line-height:1.25; }
.intro .lead { margin:8px 0 0; font-size:15px; color:var(--text-desc); line-height:1.7; }
.intro-points {
  margin:16px 0 0; padding:14px 16px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:10px;
}
.intro-point { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.55; }
.intro-point svg { flex:0 0 auto; width:20px; height:20px; color:var(--primary); margin-top:1px; }
.intro-point .meta { color:var(--text-desc); }

/* ===== Stepper ===== */
.stepper { display:flex; align-items:flex-start; justify-content:center; padding:8px 4px 6px; }
.step { display:flex; flex-direction:column; align-items:center; gap:7px; flex:0 0 auto; width:96px; }
.step .circle-area { height:40px; display:flex; align-items:center; justify-content:center; }
.step .circle {
  width:28px; height:28px; border-radius:var(--radius-full);
  background:var(--bg-surface); border:1.5px solid var(--border); color:var(--text-ph);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; transition:all .3s cubic-bezier(.4,0,.2,1);
}
.step .circle svg { width:18px; height:18px; }
.step .step-label { font-size:12px; font-weight:600; color:var(--text-ph); white-space:nowrap; transition:color .3s ease; }
.step[data-state="current"] .circle {
  width:40px; height:40px; background:var(--primary); border-color:var(--primary); color:#fff;
  font-size:17px; box-shadow:0 4px 12px rgba(223,0,80,.30);
}
.step[data-state="current"] .step-label { color:var(--primary); font-weight:700; }
.step[data-state="done"] .circle { background:var(--primary); border-color:var(--primary); color:#fff; }
.step[data-state="done"] .step-label { color:var(--text); }
.step-line { flex:1 1 auto; height:1.5px; background:var(--border); margin-top:20px; min-width:14px; max-width:48px; transition:background .3s ease; }

/* ===== 全体エラーバナー ===== */
.reg-banner {
  display:flex; gap:10px; align-items:flex-start; margin:16px 0 0;
  background:var(--red-4-5); border:1px solid rgba(241,61,74,.35); color:var(--error);
  border-radius:var(--radius-md); padding:13px 15px; font-size:13.5px; line-height:1.6; font-weight:600;
}
.reg-banner svg { flex:0 0 auto; width:18px; height:18px; margin-top:1px; }
.reg-banner a { color:var(--primary); font-weight:700; }

/* ===== Section cards ===== */
.section {
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px 18px; margin-top:16px; box-shadow:var(--shadow-sm);
}
.section-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.section-num {
  flex:0 0 auto; width:26px; height:26px; border-radius:var(--radius-full);
  background:var(--pink-5-10); color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
  transition:all .3s ease;
}
.section[data-done="true"] .section-num { background:var(--primary); color:#fff; }
.section-num .check { display:none; width:15px; height:15px; }
.section[data-done="true"] .section-num .check { display:block; }
.section[data-done="true"] .section-num .num { display:none; }
.section-title { font-size:17px; font-weight:700; letter-spacing:-.01em; }
.section-owner { font-size:12px; color:var(--text-desc); margin:2px 0 16px; }

/* ===== Field ===== */
.field { margin-top:16px; }
.field:first-of-type { margin-top:0; }
.field > .label { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.field .label-text { font-size:14px; font-weight:700; color:var(--text); }
.req, .opt { font-size:10px; font-weight:700; line-height:1; padding:3px 6px; border-radius:var(--radius-sm); }
.req { background:var(--primary); color:#fff; }
.opt { background:var(--bluegray-1); color:var(--text-desc); }
.sublabel { font-size:11px; color:var(--text-desc); margin-bottom:4px; display:block; }

input[type="text"], input[type="tel"], input[type="email"], input[type="password"],
input[type="number"], select {
  width:100%; height:48px; padding:0 14px;
  font-size:16px; font-family:var(--font-sans); color:var(--text);
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance:none; appearance:none;
}
input::placeholder { color:var(--text-ph); }
input:focus, select:focus { border-color:var(--border-focus); box-shadow:0 0 0 3px var(--pink-5-10); }
select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer;
}
/* 不備は該当 input/select 単位で赤くする（共有 JS が .is-invalid を付与） */
input.is-invalid, select.is-invalid, input[aria-invalid="true"], select[aria-invalid="true"] { border-color:var(--error); }
input.is-invalid:focus, select.is-invalid:focus { box-shadow:0 0 0 3px var(--red-4-5); }
input:disabled, select:disabled, .is-disabled { background:var(--bg-disabled); color:var(--text-ph); cursor:not-allowed; }

.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ロック等の常時ヒント */
.hint { margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--text-desc); gap:7px; align-items:flex-start; }
.hint svg { flex:0 0 auto; width:15px; height:15px; margin-top:2px; color:var(--text-ph); }
.hint--static { display:flex; }

/* error message */
.error-msg { margin-top:8px; font-size:13px; line-height:1.5; color:var(--error); display:none; gap:7px; align-items:flex-start; }
.error-msg svg { flex:0 0 auto; width:15px; height:15px; margin-top:2px; }
.field.has-error .error-msg, .field-block.has-error .error-msg { display:flex; }

.note { font-size:12.5px; color:var(--text-desc); line-height:1.6; margin-top:8px; }
.charset { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:var(--text-ph); letter-spacing:.03em; word-break:break-all; margin-top:6px; }

/* status line（郵便番号・ログインID・一致確認の共有ステータス） */
.status-line { margin-top:8px; font-size:12.5px; font-weight:600; line-height:1.5;
  display:flex; gap:6px; align-items:center; }
.status-line::before { content:""; width:7px; height:7px; border-radius:var(--radius-full); background:currentColor; flex:0 0 auto; }
.status-line[data-state="ok"] { color:var(--success-text); }
.status-line[data-state="warn"] { color:var(--orange-4); }
.status-line[data-state="taken"] { color:var(--error); }

/* radio pills（実 radio を内包） */
.radio-row { display:flex; gap:10px; }
.radio-pill {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 14px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md);
  font-size:15px; font-weight:500; color:var(--text); cursor:pointer; transition:all .15s ease; position:relative;
}
.radio-pill input { position:absolute; opacity:0; width:1px; height:1px; }
.radio-pill .mark { width:18px; height:18px; border-radius:var(--radius-full);
  border:2px solid var(--border-strong); flex:0 0 auto; position:relative; }
/* 内側ドットは絶対配置でど真ん中に固定（flex センタリングのサブピクセルずれを回避） */
.radio-pill .mark::after { content:""; position:absolute; top:50%; left:50%;
  width:8px; height:8px; border-radius:var(--radius-full); background:var(--primary);
  transform:translate(-50%,-50%) scale(0); transition:transform .15s ease; }
.radio-pill:has(input:checked) { border-color:var(--primary); background:var(--pink-5-5); font-weight:700; }
.radio-pill:has(input:checked) .mark { border-color:var(--primary); }
.radio-pill:has(input:checked) .mark::after { transform:translate(-50%,-50%) scale(1); }
.radio-pill:focus-within { box-shadow:0 0 0 3px var(--pink-5-10); }

/* birthday row */
.birth-row { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.birth-row .unit { font-size:13px; color:var(--text-desc); flex:0 0 auto; }
.birth-row input { width:58px; text-align:center; padding:0 4px; flex:0 0 auto; }
.birth-row select { width:60px; padding:0 4px; background-position:right 5px center; padding-right:20px; flex:0 0 auto; }

/* zip row */
.zip-row { display:flex; align-items:center; gap:8px; }
.zip-row input { width:96px; text-align:center; }
.zip-sep { color:var(--text-ph); }

/* password rules checklist（共有 JS が .is-met を付与） */
.pw-rules { margin-top:10px; padding:12px 14px; background:var(--bluegray-1);
  border-radius:var(--radius-md); display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.pw-rule { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-desc); transition:color .2s ease; }
.pw-rule svg { width:16px; height:16px; flex:0 0 auto; color:var(--text-ph); transition:color .2s ease; }
.pw-rule.is-met { color:var(--success-text); }
.pw-rule.is-met svg { color:var(--success); }

/* password input wrap + toggle */
.input-wrap { position:relative; }
.input-wrap input { padding-right:48px; }
.toggle-eye {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-ph); border-radius:var(--radius-md);
}
.toggle-eye:hover { color:var(--text-desc); }
.toggle-eye svg { width:22px; height:22px; }
.toggle-eye .eye-off { display:none; }
.toggle-eye[aria-pressed="true"] .eye-on { display:none; }
.toggle-eye[aria-pressed="true"] .eye-off { display:block; }

/* carrier notice（本実装では常時表示の注意） */
.carrier-notice {
  margin-top:10px; padding:12px 14px; border-radius:var(--radius-md);
  background:var(--orange-4-bg); border:1px solid rgba(232,139,55,.35);
  font-size:12.5px; line-height:1.6; color:var(--text); display:none; gap:10px; align-items:flex-start;
}
.carrier-notice.show { display:flex; }
.carrier-notice svg { flex:0 0 auto; width:18px; height:18px; color:var(--orange-4); margin-top:1px; }
.carrier-notice strong { font-weight:700; }

/* ===== OTP block ===== */
.otp-divider { border:0; border-top:1px dashed var(--border); margin:18px 0 16px; }
.otp-state { margin-top:12px; }
.otp-send-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.otp-input-row { display:flex; gap:10px; align-items:flex-start; margin-top:4px; }
.otp-input-row input { letter-spacing:.4em; font-weight:600; text-align:center; }
.otp-meta { font-size:12.5px; color:var(--text-desc); line-height:1.6; }
.otp-help { margin-top:12px; padding:12px 14px; background:var(--bluegray-1);
  border-radius:var(--radius-md); font-size:12.5px; line-height:1.65; color:var(--text-desc); display:none; }
.otp-help.show { display:block; }
.otp-help ul { margin:6px 0 6px; padding-left:18px; }
.otp-help li { margin:3px 0; }
.otp-help a { color:var(--primary); font-weight:600; }
#send-code-button-plane { cursor:pointer; }
#send-code-button-plane.not-active { opacity:.6; pointer-events:none; }

/* ===== Buttons ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:56px; padding:0 28px; border-radius:var(--radius-md);
  font-size:17px; font-weight:700; cursor:pointer; border:1px solid transparent; text-decoration:none;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease; white-space:nowrap;
}
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--shadow-button); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-outline { background:var(--bg-surface); color:var(--primary); border-color:var(--primary); box-shadow:var(--shadow-sm); }
.btn-outline:hover { background:var(--pink-5-5); }
.btn-sm { height:44px; padding:0 18px; font-size:14px; border-radius:var(--radius-md); }

.actions { display:flex; gap:12px; margin-top:24px; }
.actions .btn-back { flex:0 0 120px; }
.actions .btn-next { flex:1; }

.help-link { text-align:center; margin-top:18px; }
.help-link a { font-size:13px; color:var(--text-desc); display:inline-flex; align-items:center; gap:5px; text-decoration:none; }
.help-link a:hover { color:var(--primary); }
.help-link svg { width:16px; height:16px; }

/* toast（共有 submit.js が .fc-toast を生成） */
.fc-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--black); color:#fff; padding:12px 20px; border-radius:var(--radius-md);
  font-size:14px; font-weight:600; box-shadow:var(--shadow-md); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:50; max-width:90vw; text-align:center; }
.fc-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ============================================================
   レイアウト別案（A=single / B=wizard / C=accordion）。
   DOM順・name・POST は不変。layout.js が body.layout-ready を付与するまで、
   または JS 無効時は single（全表示）にフォールバックする。
   ============================================================ */

/* --- B. ウィザード：1セクションずつ --- */
body.layout-ready[data-layout="wizard"] .section { display:none; }
body.layout-ready[data-layout="wizard"] .section[data-active="true"] { display:block; animation:fadeStep .2s ease both; }
@keyframes fadeStep { from { transform:translateY(5px); } to { transform:none; } }
.wizard-meta { display:none; }
body.layout-ready[data-layout="wizard"] .wizard-meta {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px; padding:0 2px; font-size:13px; color:var(--text-desc); font-weight:600;
}
body.layout-ready[data-layout="wizard"] .wizard-meta .wm-count { color:var(--primary); font-weight:700; }
body.layout-ready[data-layout="wizard"] .wizard-meta > span:last-child { white-space:nowrap; padding-left:12px; }
body.layout-ready[data-layout="wizard"] .wizard-meta .wm-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- C. アコーディオン：見出しで開閉 --- */
body.layout-ready[data-layout="accordion"] .section > :not(.section-head) { display:none; }
body.layout-ready[data-layout="accordion"] .section[data-open="true"] > * { display:revert; }
body.layout-ready[data-layout="accordion"] .section { padding-top:16px; padding-bottom:16px; transition:padding .2s ease; }
body.layout-ready[data-layout="accordion"] .section-head { cursor:pointer; margin-bottom:0; padding:2px 0; }
body.layout-ready[data-layout="accordion"] .section[data-open="true"] .section-head { margin-bottom:4px; }
body.layout-ready[data-layout="accordion"] .section-head::after {
  content:""; margin-left:auto; width:22px; height:22px; flex:0 0 auto;
  background:no-repeat center / 22px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A6A6A6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  transition:transform .2s ease;
}
body.layout-ready[data-layout="accordion"] .section[data-open="true"] .section-head::after { transform:rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
}