@charset "UTF-8";
/* 新規登録フロー（同意 / 確認 / 完了）共通スタイル — CAPS Pink。
   入力画面 beginner01_redesign.css と同じデザイントークン。
   サイト共通ヘッダー／フッターはそのまま使い、本文のみ刷新。 */

: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-2:#E0E0E0; --warmgray-3:#A6A6A6; --warmgray-5:#616161;
  --black:#212121; --white:#fff;
  --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);
  --info:#2F80ED; --info-bg:rgba(47,128,237,.08);
  --danger:#D0021B; --danger-bg:rgba(208,2,27,.06);

  --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:#EEEEEE;
  --border:var(--warmgray-2); --border-strong:var(--warmgray-3);

  --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-flow{
  font-family:var(--font-sans); font-size:16px; color:var(--text);
  background:var(--bg-default); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button{ font-family:inherit; }
strong{ font-weight:700; }

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

/* ===== shell / footer ===== */
.shell{ max-width:var(--content-max); margin:0 auto; padding:0 20px 48px; }
.app-footer, .reg-flow-footer{ text-align:center; padding:24px 0 32px; font-size:12px; color:var(--text-ph); }
.app-footer .copy, .reg-flow-footer .copy{ margin:0; }

/* ===== stepper ===== */
.stepper{ display:flex; align-items:flex-start; justify-content:center; padding:18px 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; }
.step-line[data-state="done"]{ background:var(--primary); }

/* ===== page head ===== */
.page-head{ padding:20px 0 4px; }
.page-head h1{ font-size:24px; font-weight:700; letter-spacing:-.022em; margin:0; line-height:1.25; }
.page-head .sub{ margin:8px 0 0; font-size:15px; color:var(--text-desc); line-height:1.7; }

/* ===== card ===== */
.card{
  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);
}
.card-title{ font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0 0 4px; }

/* ===== confirm rows ===== */
.crow{ padding:14px 0; border-top:1px solid var(--bluegray-1); }
.crow:first-of-type{ border-top:0; padding-top:4px; }
.crow .clabel{ font-size:12.5px; font-weight:700; color:var(--text-desc); margin-bottom:5px; }
.crow .cvalue{ font-size:16px; color:var(--text); line-height:1.6; word-break:break-all; }
.crow .cvalue .cline{ display:block; }
.crow .cvalue .cmuted{ color:var(--text-desc); font-size:14px; }

/* ===== notice ===== */
.notice{
  margin-top:16px; padding:14px 16px; border-radius:var(--radius-md);
  font-size:13.5px; line-height:1.65; display:flex; gap:10px; align-items:flex-start;
}
.notice svg{ flex:0 0 auto; width:20px; height:20px; margin-top:1px; }
.notice-warn{ background:var(--orange-4-bg); border:1px solid rgba(232,139,55,.35); color:var(--text); }
.notice-warn svg{ color:var(--orange-4); }
.notice-sub{ display:inline-block; margin-top:8px; font-size:12.5px; color:var(--text-desc); line-height:1.6; }
.notice-info{ background:var(--info-bg); border:1px solid rgba(47,128,237,.30); color:var(--text); }
.notice-info svg{ color:var(--info); }
.notice-error{ background:var(--danger-bg); border:1px solid rgba(208,2,27,.35); color:var(--danger); font-weight:600; }

/* ===== policy（同意画面） ===== */
.policy-scroll{ max-height:58vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:8px; }
.policy-scroll::-webkit-scrollbar{ width:6px; }
.policy-scroll::-webkit-scrollbar-thumb{ background:var(--bluegray-2); border-radius:9999px; }
/* バックエンド由来の方針HTML（任意の構造）にも読みやすい体裁を付与 */
.policy-scroll h2{ font-size:16px; font-weight:700; margin:18px 0 6px; }
.policy-scroll h3{ font-size:15px; font-weight:700; margin:16px 0 6px; }
.policy-scroll h2:first-child, .policy-scroll h3:first-child{ margin-top:0; }
.policy-scroll p, .policy-scroll li{ font-size:13.5px; color:var(--text-desc); line-height:1.85; }
.policy-scroll ul, .policy-scroll ol{ margin:6px 0; padding-left:20px; }
.policy-scroll a{ color:var(--primary); }
.consent-check{
  display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:14px 16px;
  background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer;
}
.consent-check input{ width:22px; height:22px; accent-color:var(--primary); flex:0 0 auto; margin-top:1px; }
.consent-check span{ font-size:14px; font-weight:500; line-height:1.6; }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  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,opacity .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-ghost{ background:none; color:var(--text-desc); box-shadow:none; }
.btn-ghost:hover{ color:var(--primary); }
.btn[aria-disabled="true"]{ background:var(--bg-disabled); color:var(--text-ph); box-shadow:none; border-color:transparent; pointer-events:none; }
.btn-stack{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.btn-stack .btn{ width:100%; }
.link-center{ text-align:center; margin-top:16px; }
.link-center a{ font-size:14px; color:var(--text-desc); text-decoration:none; }
.link-center a:hover{ color:var(--primary); }

/* ===== 診察券番号カード（完了画面） ===== */
.card-number{ text-align:center; }
.num-head{ display:flex; align-items:center; justify-content:center; gap:7px; color:var(--text-desc); font-size:13px; font-weight:700; }
.num-head svg{ width:18px; height:18px; }
.num-value{ margin-top:10px; font-size:26px; font-weight:700; letter-spacing:.02em; color:var(--text); font-variant-numeric:tabular-nums; }
.num-copy{
  margin-top:14px; display:inline-flex; align-items:center; gap:6px;
  height:40px; padding:0 18px; border-radius:var(--radius-md);
  background:var(--bg-surface); border:1px solid var(--primary); color:var(--primary);
  font-size:14px; font-weight:700; cursor:pointer; transition:background .15s ease;
}
.num-copy:hover{ background:var(--pink-5-5); }
.num-copy svg{ width:16px; height:16px; }
.num-copy.copied{ border-color:var(--tealblue-5); color:var(--tealblue-7); background:var(--tealblue-5-10); }
.num-note{ margin:14px 0 0; font-size:12.5px; color:var(--text-desc); line-height:1.7; text-align:left; }

/* ===== 完了（成功演出） ===== */
.complete{ text-align:center; padding:24px 0 0; }
.success-badge{
  position:relative; width:96px; height:96px; margin:8px auto 26px;
  border-radius:var(--radius-full); background:var(--tealblue-5); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(20,184,166,.35);
  animation:badgePop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.success-badge::before{
  content:""; position:absolute; inset:-14px; border-radius:var(--radius-full);
  background:radial-gradient(circle, rgba(20,184,166,.45) 0%, rgba(20,184,166,0) 70%);
  z-index:-1; animation:glowPulse 3.2s ease-in-out infinite;
}
.success-badge svg{ width:46px; height:46px; }
@keyframes badgePop{ from{ transform:scale(.6); } to{ transform:scale(1); } }
@keyframes glowPulse{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.28); opacity:1; } }
.complete h1{ font-size:24px; font-weight:700; letter-spacing:-.022em; margin:0; }
.complete .sub{ margin:10px 0 0; font-size:15px; color:var(--text-desc); line-height:1.8; }
.feature-list{ margin:6px 0 0; padding:0; list-style:none; text-align:left; }
.feature-list li{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; font-size:15px; line-height:1.6; }
.feature-list li svg{ flex:0 0 auto; width:20px; height:20px; color:var(--primary); margin-top:2px; }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } .success-badge::before{ opacity:.7; } }