/* 手書きフォント「Yusei Magic」(Google Fonts / SIL Open Font License 1.1)。
   ヘッダーのひとこと用に、必要な文字のサブセット woff2 を static/fonts/ に
   同梱し、実行時は外部へ取りに行かない。 */
@font-face {
  font-family: 'Yusei Magic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/yusei-magic-97.woff2) format('woff2');
  unicode-range: U+7e, U+b4, U+25c6, U+2661, U+4e92, U+4eee, U+4ffa, U+5144, U+5237, U+5287, U+52b4, U+58c1, U+5bff, U+5c04, U+5c06, U+5e95, U+5f31, U+5f93, U+63c3, U+640d, U+6557, U+6614, U+662f, U+67d3, U+690d, U+6bba, U+6e6f, U+72af, U+732b, U+7518, U+7ae0, U+7ae5, U+7af6, U+822a, U+89e6, U+8a3a, U+8a98, U+8cb8, U+8de1, U+8e8d, U+95d8, U+961c, U+96a3, U+96ea, U+9bae, U+ff20, U+ff22, U+ff29, U+ff2b-ff2c;
}
@font-face {
  font-family: 'Yusei Magic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/yusei-magic-110.woff2) format('woff2');
  unicode-range: U+40, U+4e86, U+4e95, U+4f01, U+4f1d, U+4fbf, U+5099, U+5171, U+5177, U+53cb, U+53ce, U+53f0, U+5668, U+5712, U+5ba4, U+5ca1, U+5f85, U+60f3, U+653e, U+65ad, U+65e9, U+6620, U+6750, U+6761, U+6b62, U+6b74, U+6e08, U+6e80, U+7248, U+7531, U+7533, U+753a, U+77f3, U+798f, U+7f6e, U+8449, U+88fd, U+89b3, U+8a55, U+8ac7, U+8b77, U+8db3, U+8efd, U+8fd4, U+9031-9032, U+9580, U+9589, U+96d1, U+985e;
}
@font-face {
  font-family: 'Yusei Magic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/yusei-magic-116.woff2) format('woff2');
  unicode-range: U+a9, U+3010-3011, U+30e2, U+4e0b, U+4eca, U+4ed6, U+4ed8, U+4f53, U+4f5c, U+4f7f, U+53d6, U+540d, U+54c1, U+5730, U+5916, U+5b50, U+5c0f, U+5f8c, U+624b, U+6570, U+6587, U+6599, U+691c, U+696d, U+6cd5, U+7269, U+7279, U+7406, U+767a-767b, U+77e5, U+7d04, U+7d22, U+8005, U+80fd, U+81ea, U+8868, U+8981, U+89a7, U+901a, U+9023, U+90e8, U+91d1, U+9332, U+958b, U+96c6, U+9ad8, U+ff1a, U+ff1f;
}
@font-face {
  font-family: 'Yusei Magic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/yusei-magic-118.woff2) format('woff2');
  unicode-range: U+21-22, U+27-2a, U+2c-3b, U+3f, U+41-4d, U+4f-5d, U+61-7b, U+7d, U+ab, U+ae, U+b2-b3, U+b7, U+bb, U+c9, U+cd, U+d6, U+d8, U+dc, U+e0-e5, U+e7-ed, U+ef, U+f1-f4, U+f6, U+f8, U+fa, U+fc-fd, U+103, U+14d, U+1b0, U+300-301, U+1ebf, U+1ec7, U+2013-2014, U+201c-201d, U+2039-203a, U+203c, U+2048-2049, U+2113, U+2122, U+65e5, U+6708, U+70b9;
}
@font-face {
  font-family: 'Yusei Magic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/yusei-magic-119.woff2) format('woff2');
  unicode-range: U+20, U+2027, U+3001-3002, U+3041-307f, U+3081-308f, U+3091-3093, U+3099-309a, U+309d-309e, U+30a1-30e1, U+30e3-30ed, U+30ef-30f0, U+30f2-30f4, U+30fb-30fe, U+ff0c, U+ff0e;
}


  :root {
    --navy:#122e4a; --ink:#17293c; --body:#3c4f61; --muted:#6d7f8f;
    --line:#e2eaf1; --bg:#e9eff4; --panel:#f6f9fb; --gold:#c9962e; --gold-d:#a97c1c;
    --shadow:0 1px 2px rgba(16,42,67,.05), 0 10px 28px rgba(16,42,67,.05);
  }
  * { box-sizing:border-box; }
  body { font-family:"Noto Sans JP",sans-serif; background:var(--bg); color:var(--body); margin:0; padding:20px; }
  .note { max-width:1240px; margin:0 auto 12px; font-size:12.5px; color:#5a6a77; line-height:1.7; }
  .screen { display:none; max-width:1240px; margin:0 auto; background:var(--panel); border-radius:16px; overflow:hidden; box-shadow:0 12px 36px rgba(16,42,67,.16); min-height:660px; }
  .screen.active { display:block; }
  svg.ic { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
  svg.ic.sm { width:16px; height:16px; }
  svg.ic.lg { width:24px; height:24px; }

  /* ---------- buttons / chips / forms ---------- */
  .btn { border:none; border-radius:9px; padding:12px 22px; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:8px; justify-content:center; }
  .btn.gold { background:linear-gradient(180deg,#e2b04a,#cd9a2f); color:#fff; box-shadow:0 2px 8px rgba(201,150,46,.28); }
  .btn.ghost { background:#fff; border:1px solid #c6d3df; color:var(--navy); }
  .btn:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
  .chip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 11px; white-space:nowrap; }
  .chip.gold { background:#fdf3d7; color:#96690f; } .chip.red { background:#fdecec; color:#b3372f; }
  .chip.green { background:#e5f4e7; color:#2e7d3a; } .chip.gray { background:#edf1f5; color:#647686; }
  .chip.blue { background:#e3edf9; color:#2f5d8a; } .chip.purple { background:#efe9fb; color:#6a4fa1; }
  .chip.orange { background:#fdeedd; color:#b25f14; }
  label { font-size:12.5px; font-weight:700; color:#43566a; display:block; margin:14px 0 5px; }
  input[type=text], input[type=password], textarea, select { width:100%; border:1px solid #c9d5df; border-radius:9px; padding:11px 12px; font-size:14.5px; background:#fff; font-family:inherit; color:var(--ink); }
  input:focus, textarea:focus, select:focus { outline:2px solid #bcd3e8; border-color:#7ba7cc; }
  .muted { color:var(--muted); font-size:12.5px; }
  table { border-collapse:collapse; width:100%; font-size:13.5px; }
  th, td { padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
  th { color:var(--muted); font-size:12px; background:#f4f8fb; font-weight:700; }
  tr:last-child td { border-bottom:none; }

  /* ---------- login ---------- */
  /* ログイン画面は写真1枚を全面表示し、白グラデーションの上に左側部品（ロゴ・金のバー・見出し・説明文・特徴3つ）と右側のログインカードを重ねる。各部品の位置・大きさは合意デザイン（06-画面設計/agreed-login-reference.png、1212×690）のインク実測値（画面に対する割合）に基づく。大きさは cqw（.login-wrap 幅の1%）で指定し、表示幅によらず見本と同じ割合を保つ */
  .login-wrap { position:relative; aspect-ratio:16 / 9; overflow:hidden; background:#fff; container-type:inline-size; }
  /* ログイン画面は、画面いっぱいの全面表示ではなく、地色の上にカードとして置く（2026-11-12 に本人が変更を決定。全面だと写真が大きすぎて圧が強いため。営業指導員システムのログインの雰囲気に合わせる）。中身の部品の割合（上の実測値）は .login-wrap に対する割合のまま使えるので、変えるのは外側の枠だけ */
  body.login-body { padding:28px; background:var(--bg); display:flex; min-height:100vh; min-height:100dvh; }
  body.login-body .screen { max-width:1400px; width:100%; margin:auto; border-radius:20px; box-shadow:0 12px 36px rgba(16,42,67,.16); min-height:0; }
  body.login-body .login-wrap { width:100%; height:auto; max-height:calc(100dvh - 56px); }
  @media (max-width: 900px) {
    body.login-body { padding:10px; }
    body.login-body .login-wrap { max-height:calc(100dvh - 20px); }
  }
  .login-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
  .login-left { position:absolute; inset:0; z-index:2; pointer-events:none; }
  /* ロゴ：実測 左1.9%・上3.2%・幅27.4%（透過PNGは余白なし）。下地カードなし */
  .login-logo { position:absolute; left:1.9%; top:3.2%; width:27.4%; display:block; }
  /* 金のバー：実測 左2.7%〜6.5%・上18.8%・高さ約0.7% */
  .login-goldbar { position:absolute; left:2.7%; top:18.8%; width:3.9%; height:0.75%; min-height:3px; border-radius:999px; background:linear-gradient(90deg,#ddad3e,#c9962e); }
  /* 見出し：実測 左2.7%・1行目の字の上23.6%・字高約9.1%・行ピッチ10.9%・色 RGB(18,40,76)。font-size 5cqw・line-height 1.25 で字高とピッチを再現し、top は字の上が23.6%に来るよう置く */
  .login-head { position:absolute; left:2.6%; top:21.9%; margin:0; font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-weight:700; font-size:5cqw; line-height:1.25; letter-spacing:-0.04em; color:#12284c; white-space:nowrap; }
  /* 説明文：実測 左2.6%・字の上46.8%・2行ピッチ4.2%。font-size 1.42cqw（見出しの約0.28倍）・line-height 1.65 */
  .login-desc { position:absolute; left:2.6%; top:46%; margin:0; font-size:1.42cqw; line-height:1.65; font-weight:500; color:#33465e; white-space:nowrap; }
  /* 特徴3つ：ラベル中心の実測 横6.4%／17.8%／28.6%（left は views.py の inline style）。アイコンの丸は直径5.4cqw、ラベルの字の上69.7%、説明の字の上73.5%・2行目76.1% */
  .feat { position:absolute; top:58.5%; width:11%; transform:translateX(-50%); text-align:center; }
  .feat .fc { width:5.4cqw; height:5.4cqw; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto; }
  .feat .fc svg { width:2.5cqw; height:2.5cqw; stroke-width:2.7; }
  .feat .fc.blue { background:#e3f0fd; color:#2b78e4; }
  .feat .fc.purple { background:#e9e7fb; color:#6c4bd8; }
  .feat .fc.gold { background:#fef4de; color:#d9a62e; }
  .feat b { display:block; margin-top:0.55cqw; font-size:1.25cqw; font-weight:700; color:#16283f; white-space:nowrap; }
  .feat span { display:block; margin-top:0.5cqw; font-size:1cqw; line-height:1.48; color:#40536b; white-space:nowrap; }
  /* 白のグラデーション：文字部品の土台。左上は97%でほぼ真っ白。白の上側の境目は、左端では上端まで届き、右へ行くほど斜めに下がって、女性の画面左の肩（横37%・縦52%）が尾根の頂点になり、そこから左下へ下る山形。頭の上の範囲（横40〜60%・頭頂より上）と画面右の肩の方向には白は伸びず、写真のまま残る。下へは徐々に薄くなり直線で切れない。グラデーション本体はこの形を焼いた画像（login-wash-gradient.png）、人物に被らない処理は写真から型どったシルエットマスク（login-wash-mask.png：髪・肩・腕・ノートPCの輪郭内は完全に消え、輪郭の外側約2%でぼけて消える）で行う */
  .login-wash { position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("assets/login-wash-gradient.png"); background-size:100% 100%; background-repeat:no-repeat; -webkit-mask-image:url("assets/login-wash-mask.png"); -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-image:url("assets/login-wash-mask.png"); mask-size:100% 100%; mask-repeat:no-repeat; }
  .level-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .level-opt { display:flex; gap:9px; align-items:flex-start; border:1px solid #c9d5df; border-radius:10px; padding:12px 14px; margin:0; cursor:pointer; font-weight:400; background:#fff; }
  .level-opt:has(input:checked) { border-color:#d9a441; background:#fffdf4; }
  .level-opt input { margin-top:3px; }
  .level-opt b { display:block; font-size:14px; color:var(--ink); }
  .level-opt small { display:block; font-size:12px; color:var(--muted); line-height:1.55; margin-top:2px; }
  .gold-rule { width:56px; height:5px; border-radius:3px; background:linear-gradient(90deg,#e2b04a,#cd9a2f); margin:30px 0 20px; }
  .tic.blue { background:#e8f1fc; color:#2f7de1; } .tic.purple { background:#efeafd; color:#6a4fd0; } .tic.gold { background:#fdf3d7; color:#d29a26; }
  /* カード：実測 左67.7%・右余白1.8%・幅30.5%・中心50.5%・高さ約471px（68.3%）。内側の余白配分も実測の字位置に合わせた */
  .login-card { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 14px 40px rgba(16,42,67,.18); padding:31px 36px 25px; position:absolute; right:1.8%; top:50.5%; transform:translateY(-50%); width:30.5%; z-index:2; margin:0; }
  .login-card h2 { font-size:30px; font-weight:700; margin:0 0 7px; color:var(--navy); letter-spacing:.02em; }
  .login-card p.sub { color:var(--muted); font-size:14px; margin:0 0 6px; line-height:1.65; }
  .login-card label { font-size:13.5px; margin:15px 0 6px; }
  .field { position:relative; }
  .field > svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#7b8b9c; pointer-events:none; }
  .field > svg.eye { left:auto; right:14px; }
  .field input { height:50px; padding:11px 42px 11px 44px; font-size:15px; border-radius:9px; }
  .login-check { display:flex; gap:9px; align-items:center; font-weight:400; font-size:13.5px; color:var(--body); margin-top:15px; }
  .login-check input { width:20px; height:20px; accent-color:var(--navy); flex:none; }
  .forgot { display:flex; align-items:center; gap:14px; text-align:center; font-size:13.5px; color:#2f6fd0; margin-top:18px; }
  .forgot::before, .forgot::after { content:""; flex:1; height:1px; background:var(--line); }
  .forgot span { text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

  /* ---------- app frame ---------- */
  .layout { display:flex; min-height:660px; }
  .side { width:218px; background:linear-gradient(180deg,#0d2b4a 0%,#123a5f 62%,#0c2440 100%); color:#d7e4f0; padding:22px 14px; flex-shrink:0; display:flex; flex-direction:column; }
  .side-brand { display:flex; flex-direction:column; align-items:stretch; padding:4px 4px 16px; border-bottom:1px solid rgba(255,255,255,.14); }
  .side-brand .brand-row { display:flex; align-items:center; gap:9px; }
  .side-brand .brand-row img { height:38px; width:auto; display:block; flex:none; }
  .side-brand .bt { font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-weight:700; font-size:14px; color:#fff; line-height:1.25; white-space:nowrap; }
  .side-brand .brand-title { margin-top:13px; padding-top:13px; border-top:1px solid rgba(255,255,255,.14); text-align:center; font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-size:15.5px; font-weight:700; letter-spacing:.03em; color:#fff; line-height:1.4; white-space:nowrap; }
  .side-brand .brand-title::after { content:""; display:block; width:34px; height:3px; border-radius:2px; background:linear-gradient(90deg,#e2b04a,#cd9a2f); margin:8px auto 1px; }
  .side nav { margin-top:18px; }
  .side nav a { display:flex; align-items:center; gap:11px; color:#d7e4f0; font-size:14px; padding:11px 12px; border-radius:9px; margin-bottom:3px; cursor:pointer; }
  .side nav a:hover { background:rgba(255,255,255,.08); }
  .side nav a.on { background:linear-gradient(180deg,#e2b04a,#cd9a2f); color:#1f2a37; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.25); }
  .side nav .sep { border-top:1px solid rgba(255,255,255,.14); margin:14px 4px; }
  .side-foot { margin-top:18px; padding:4px 10px 4px; font-size:12.5px; line-height:1.9; color:#8fb0cc; }
  .side-foot img { width:150px; max-width:100%; height:auto; display:block; }
  .main { flex:1; padding:20px 28px 28px; min-width:0; }
  .topbar { display:flex; justify-content:space-between; align-items:center; gap:14px; padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; }
  /* ヘッダー左ブロック：営業指導員システムと同じ形（金のアイコン＋ペルソナ名・
     役割、勤務中ピル、手書きのひとこと＋金の飾り線）。色は見本の実測値 */
  .topbar .tl { display:flex; align-items:center; gap:18px; min-width:0; flex-wrap:wrap; }
  .persona-id { display:flex; align-items:center; gap:11px; flex:none; }
  .persona-ic { width:40px; height:40px; border-radius:9px; background:#fef7e7; display:flex; align-items:center; justify-content:center; color:#f6b52b; flex:none; }
  .persona-ic svg.ic { width:23px; height:23px; }
  .persona-id b { font-size:19px; color:var(--ink); display:block; line-height:1.25; }
  .persona-id span { font-size:11.5px; color:var(--muted); display:block; }
  .duty-pill { display:inline-flex; align-items:center; gap:6px; background:#e8f3ee; color:#1f6b4d; font-size:12.5px; font-weight:700; border-radius:999px; padding:6px 14px; white-space:nowrap; flex:none; }
  .duty-pill::before { content:""; width:8px; height:8px; border-radius:50%; background:#1f6b4d; }
  .hand-note { font-family:"Yusei Magic","Noto Sans JP",sans-serif; color:#133961; font-size:20px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
  .hand-note .spark { flex:none; margin-bottom:5px; }
  .topbar .tr { display:flex; align-items:center; gap:14px; }
  .bell { position:relative; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:#5a7085; flex:none; }
  .bell::after { content:""; position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:#d64541; border:2px solid #fff; }
  .user-chip { display:flex; align-items:center; gap:10px; }
  .user-chip img { width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:center 25%; }
  .user-chip b { font-size:14px; color:var(--ink); display:block; line-height:1.3; }
  .user-chip span { font-size:11.5px; color:var(--muted); }
  .crumbs { font-size:12.5px; color:var(--muted); margin-bottom:8px; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
  .page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
  .page-head h2 { font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-size:33px; color:var(--navy); margin:0 0 6px; }
  .page-head p { margin:0; font-size:13.5px; color:var(--body); line-height:1.7; }
  .head-btns { display:flex; gap:10px; flex-wrap:wrap; }

  /* ---------- cards ---------- */
  .card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px; box-shadow:var(--shadow); margin-bottom:14px; }
  .card h3.tt { margin:0 0 4px; font-size:16.5px; color:var(--navy); display:flex; align-items:center; gap:9px; }
  .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }

  /* home */
  .hero-band { display:flex; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); margin-bottom:14px; }
  .hero-band .ht { flex:1; padding:28px 30px; min-width:0; }
  .hero-band .kicker { display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--gold-d); letter-spacing:.05em; margin-bottom:12px; }
  .hero-band .kicker::before { content:""; width:4px; height:16px; background:var(--gold); border-radius:2px; }
  .hero-band h2 { font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-size:37px; color:var(--navy); margin:0 0 10px; line-height:1.4; }
  .hero-band p { margin:0 0 22px; font-size:14px; line-height:1.85; color:var(--body); }
  .hero-band .hbtns { display:flex; gap:10px; flex-wrap:wrap; }
  .hero-band img.hp { width:330px; flex:none; object-fit:cover; object-position:center 30%; display:block; }
  .stat-card { display:flex; gap:15px; align-items:center; }
  .stat-card .tic { width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none; }
  .tic.green { background:#e5f4e7; color:#2e7d3a; } .tic.orange { background:#fdeedd; color:#b25f14; }
  .stat-card .sl { font-size:13px; color:var(--muted); display:block; margin-bottom:2px; }
  .stat-card .sv { font-size:27px; font-weight:700; color:var(--ink); line-height:1.15; }
  .stat-card .sv small { font-size:13px; font-weight:500; color:var(--muted); margin-left:3px; }

  /* wizard */
  .steps { display:flex; align-items:flex-start; margin:8px 0 22px; }
  .steps .st { text-align:center; width:86px; flex:none; }
  .steps .dot { width:38px; height:38px; border-radius:50%; background:#e6edf3; color:#5a7085; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; margin:0 auto 6px; border:2px solid #e6edf3; }
  .steps .st.on .dot { background:linear-gradient(180deg,#e2b04a,#cd9a2f); border-color:#cd9a2f; color:#fff; }
  .steps .st.done .dot { background:var(--navy); border-color:var(--navy); color:#fff; }
  .steps .st span { font-size:12.5px; color:var(--body); font-weight:500; }
  .steps .st.on span { color:var(--gold-d); font-weight:700; }
  .steps .line { flex:1; height:2px; background:#dbe4ec; margin-top:19px; }
  .wstep { display:none; } .wstep.active { display:block; }
  .point-row { display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
  .point-row:last-child { border-bottom:none; }
  .point-row .pn { width:26px; height:26px; border-radius:50%; background:#e3edf9; color:#2f5d8a; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; margin-top:1px; }
  .point-row b { display:block; font-size:14px; color:var(--ink); margin-bottom:2px; }
  .point-row p { margin:0; font-size:12.5px; color:var(--muted); line-height:1.65; }

  /* running */
  .run-item { display:flex; gap:13px; align-items:center; padding:13px 2px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink); }
  .run-item .tic { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:none; }
  .run-item .st { margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:700; white-space:nowrap; }
  .run-item.doing .st { color:#96690f; }
  .run-item.done .st { color:#2e7d3a; }

  /* summary */
  .domain { padding:17px 18px; }
  .domain .dh { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
  .domain .tic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
  .domain b { font-size:15px; color:var(--ink); }
  .domain .dh .chip { margin-left:auto; }
  .domain p { font-size:12px; color:var(--muted); margin:0 0 7px; line-height:1.55; }
  .domain .num { font-size:12.5px; color:var(--body); line-height:1.6; }
  .tic.pink { background:#fde8ee; color:#b83a5e; } .tic.teal { background:#e0f2f1; color:#22706a; }
  .prio { display:flex; gap:14px; padding:15px 16px; border-radius:12px; margin-bottom:11px; }
  .prio:last-child { margin-bottom:0; }
  .prio .no { width:34px; height:34px; border-radius:50%; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; font-size:15px; }
  .prio b { display:block; font-size:14.5px; color:var(--ink); margin-bottom:3px; line-height:1.5; }
  .prio p { margin:0; font-size:12.5px; color:var(--body); line-height:1.65; }
  .prio .chip { margin-left:auto; flex:none; align-self:flex-start; }
  .prio.p1 { background:#fdf1f1; } .prio.p1 .no { background:#d64541; }
  .prio.p2 { background:#fdf6e0; } .prio.p2 .no { background:#d9a441; }
  .prio.p3 { background:#eef0fb; } .prio.p3 .no { background:#5b5bd6; }

  /* review */
  .bar-row { display:flex; align-items:center; gap:9px; font-size:12.5px; margin:6px 0; }
  .bar-row .lb { width:118px; color:var(--body); flex:none; }
  .bar-track { flex:1; background:#e8edf1; border-radius:6px; height:12px; }
  .bar-fill { height:12px; border-radius:6px; background:#8fb0cc; }
  .bar-fill.self { background:#d9a441; }

  /* preview */
  .page-item { display:flex; gap:11px; align-items:center; padding:11px 12px; border:1px solid var(--line); border-radius:11px; margin-bottom:9px; background:#fff; }
  .page-item.on { border-color:#d9a441; background:#fffdf4; }
  .page-item .no { width:24px; height:24px; border-radius:50%; background:#eef3f8; color:var(--navy); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
  .page-item.on .no { background:#d9a441; color:#fff; }
  .page-item b { display:block; font-size:13.5px; color:var(--ink); }
  .page-item span { font-size:11.5px; color:var(--muted); }
  .viewer { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
  .viewer-bar { background:#26313d; color:#dbe5ee; display:flex; align-items:center; justify-content:center; gap:16px; padding:9px; font-size:13px; }
  .sheet { padding:34px 38px 30px; }
  .sheet .slogo { display:flex; align-items:center; gap:9px; }
  .sheet .slogo img { height:32px; width:auto; }
  .sheet .slogo .st1 { font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-weight:700; font-size:16px; color:var(--ink); line-height:1.2; }
  .sheet .slogo .st2 { font-size:10px; color:var(--muted); letter-spacing:.05em; }
  .sheet h3 { font-family:"Noto Serif CJK JP","Hiragino Mincho ProN","Hiragino Mincho Pro",YuMincho,"Yu Mincho","MS Mincho",serif; font-size:27px; color:var(--navy); margin:30px 0 8px; line-height:1.4; }
  .sheet .smeta { display:grid; grid-template-columns:auto 1fr; gap:5px 20px; font-size:13px; margin:18px 0; }
  .sheet .smeta dt { color:var(--muted); } .sheet .smeta dd { margin:0; color:var(--ink); }
  .flow { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-top:14px; flex-wrap:wrap; }
  .flow .f { padding:4px 11px; border-radius:999px; background:#e8edf1; }
  .flow .f.done { background:#e2f2e4; color:#2e7d3a; font-weight:700; }
  .flow .f.now { background:#fdf3d7; color:#96690f; font-weight:700; }

  img { max-width:100%; }
  @media (max-width: 1080px) {
    .login-card { padding:26px 24px 22px; }
    .login-card h2 { font-size:26px; }
    .grid4 { grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 900px) {
    body { padding:10px; }
    .login-wrap { display:flex; flex-direction:column; aspect-ratio:auto; background:#fff; }
    .login-bg { position:relative; inset:auto; width:100%; height:auto; flex:none; }
    .login-wash { inset:0 0 auto 0; height:56.25vw; }
    .login-left { inset:0 0 auto 0; height:auto; aspect-ratio:16 / 9; }
    .login-card { position:relative; z-index:2; transform:none; width:auto; margin:18px 20px 24px; padding:28px 24px 24px; }
    .login-card h2 { font-size:26px; }
    .level-row { grid-template-columns:1fr; }
    .layout { flex-direction:column; }
    .side { width:100%; padding:14px; }
    .side nav { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
    .side nav a { margin-bottom:0; padding:9px 11px; }
    .side nav .sep { display:none; }
    .side-foot { display:none; }
    .main { padding:16px 14px 20px; }
    .topbar { flex-wrap:wrap; }
    .grid2, .grid3 { grid-template-columns:1fr !important; }
    .preview-grid { grid-template-columns:1fr !important; }
    .grid4 { grid-template-columns:1fr 1fr; }
    .hero-band { flex-direction:column; }
    .hero-band img.hp { width:100%; height:210px; }
    .hero-band h2 { font-size:24px; }
    .page-head h2 { font-size:23px; }
    .steps { flex-wrap:wrap; gap:6px; }
    .steps .line { display:none; }
    .steps .st { width:70px; }
    table { display:block; overflow-x:auto; }
    .screen { min-height:auto; border-radius:12px; }
    .layout { min-height:auto; }
    .sheet { padding:24px 20px; }
    .sheet h3 { font-size:22px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition:none !important; animation:none !important; }
  }

  /* ---------- home: 見本の見た目の文法（ホーム画面だけに適用。構成・中身は現行のまま） ---------- */
  /* 実測（見本 1672×941）：サイドバー幅14.8%／濃紺 #0E2849→#193A63／地色 #F0F4FB／見出し #132C4E／金 #E2B04A→#CD9A2F */
  #s-home { background:#f0f4fb; }
  #s-home .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-home .side-brand { padding:2px 6px 22px; }
  #s-home .side-brand img { height:44px; }
  #s-home .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-home .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-home .side-foot { padding-left:10px; }
  #s-home .side-foot img { width:150px; max-width:100%; height:auto; display:block; }
  #s-home .main { padding:0 30px 30px; }
  #s-home .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-home .bell { width:42px; height:42px; }
  #s-home .user-chip img { width:44px; height:44px; }
  #s-home .hero-band { border-radius:16px; border-color:#e3ebf2; box-shadow:0 2px 6px rgba(16,42,67,.05), 0 14px 34px rgba(16,42,67,.06); margin-bottom:16px; }
  #s-home .hero-band .ht { padding:30px 34px; }
  #s-home .hero-band .kicker { color:#3a4a5c; font-size:13px; }
  #s-home .hero-band .kicker::before { width:4px; height:17px; }
  #s-home .hero-band h2 { color:#132c4e; font-size:38px; }
  #s-home .hero-band img.hp { width:336px; object-position:60% 15%; }
  #s-home .btn.gold { border-radius:10px; padding:13px 20px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-home .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 16px; font-size:14.5px; }
  #s-home .hero-band .hbtns { gap:8px; }
  @media (min-width: 901px) {
    #s-home .hero-band .hbtns { flex-wrap:nowrap; }
  }
  #s-home .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-home .side-brand { gap:8px; }
  #s-home .side-brand img { height:40px; }
  #s-home .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:22px 24px; margin-bottom:16px; }
  #s-home .card h3.tt { font-size:17px; }
  #s-home .grid3 { gap:16px; }
  #s-home .stat-card .tic { width:54px; height:54px; border-radius:13px; }
  #s-home .stat-card .sv { font-size:28px; }
  #s-home table th { background:#f2f6fa; padding:11px 12px; }
  #s-home table td { padding:13px 12px; }
  @media (max-width: 900px) {
    #s-home .side { width:100%; }
    #s-home .main { padding:0 14px 20px; }
    #s-home .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-home .side-foot { transform:none; }
  }

  /* ---------- wizard（新規診断）: 見本の見た目の文法（この画面だけに適用。構成・中身は仕様のまま） ---------- */
  /* 実測の出どころ：ホーム画面で確定した数値＋見本セットアップ画面（1672×941）のフォーム部品の実測。地色 #F0F4FB／見出し #132C4E／入力枠 #D3DCE6 前後・角丸9px／金 #E2B04A→#CD9A2F */
  #s-wizard { background:#f0f4fb; }
  #s-wizard .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-wizard .side-brand { padding:2px 6px 22px; gap:8px; }
  #s-wizard .side-brand img { height:40px; }
  #s-wizard .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-wizard .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-wizard .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-wizard .side-foot { padding-left:10px; }
  #s-wizard .main { padding:0 30px 30px; }
  #s-wizard .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-wizard .bell { width:42px; height:42px; }
  #s-wizard .user-chip img { width:44px; height:44px; }
  #s-wizard .page-head h2 { color:#132c4e; }
  #s-wizard .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:26px 30px; margin-bottom:16px; }
  #s-wizard label { font-size:14px; color:#132c4e; margin:20px 0 8px; }
  #s-wizard label.level-opt { margin:0; font-size:inherit; color:inherit; }
  #s-wizard .card > label:first-child { margin-top:2px; }
  #s-wizard input[type=text], #s-wizard textarea, #s-wizard select { border:1px solid #ccd8e3; border-radius:9px; padding:12px 15px; font-size:15px; }
  #s-wizard input[type=text]:focus, #s-wizard textarea:focus { outline:2px solid #bcd3e8; border-color:#7ba7cc; }
  #s-wizard .level-opt { border:1px solid #ccd8e3; border-radius:11px; padding:14px 16px; }
  #s-wizard .level-opt:has(input:checked) { border-color:#d9a441; background:#fffdf4; }
  #s-wizard .level-opt input { accent-color:#c9962e; width:17px; height:17px; flex:none; }
  #s-wizard table th { background:#f2f6fa; padding:11px 12px; }
  #s-wizard table td { padding:12px; }
  #s-wizard #w-approve { width:19px; height:19px; accent-color:#2f7de1; flex:none; }
  #s-wizard .btn.gold { border-radius:10px; padding:13px 22px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-wizard .btn.gold:disabled { box-shadow:none; }
  #s-wizard .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 18px; font-size:14.5px; }
  @media (max-width: 900px) {
    #s-wizard .side { width:100%; }
    #s-wizard .main { padding:0 14px 20px; }
    #s-wizard .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-wizard .side-foot { transform:none; }
    #s-wizard .card { padding:20px 18px; }
  }

  /* ---------- summary（診断結果サマリー）: 見本の見た目の文法（この画面だけに適用。構成・中身は現行のまま） ---------- */
  /* 実測の出どころ：見本サマリー画面（1625×941）＋ホーム・新規診断で確定した数値。地色 #F0F4FB／見出し #132C4E 明朝／サイドバー190px濃紺／カード角丸15px・柔らかい影／領域タイルは淡いグレー青地・角丸12px・影なし／バッジは淡色ピル */
  #s-summary { background:#f0f4fb; }
  #s-summary .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-summary .side-brand { padding:2px 6px 22px; gap:8px; }
  #s-summary .side-brand img { height:40px; }
  #s-summary .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-summary .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-summary .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-summary .side-foot { padding-left:10px; }
  #s-summary .main { padding:0 30px 30px; }
  #s-summary .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-summary .bell { width:42px; height:42px; }
  #s-summary .user-chip img { width:44px; height:44px; }
  #s-summary .crumbs { color:#7a8ca0; margin-bottom:10px; }
  #s-summary .page-head { margin-bottom:20px; }
  #s-summary .page-head h2 { color:#132c4e; letter-spacing:.01em; }
  #s-summary .page-head p { color:#3c4f61; }
  #s-summary .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:22px 24px; margin-bottom:16px; }
  #s-summary .card h3.tt { font-size:17px; color:#132c4e; }
  #s-summary .btn.gold { border-radius:10px; padding:13px 20px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-summary .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 16px; font-size:14.5px; }
  #s-summary .grid4 { gap:16px; }
  #s-summary .grid3 { gap:14px; }
  #s-summary .grid2 { gap:16px; }
  #s-summary .stat-card { padding:20px 22px; }
  #s-summary .stat-card .tic { width:54px; height:54px; border-radius:13px; }
  #s-summary .stat-card .sl { font-size:13px; color:#6d7f8f; }
  #s-summary .stat-card .sv { font-size:28px; color:#10233d; }
  #s-summary .stat-card .sv small { font-size:13px; color:#6d7f8f; }
  #s-summary table th { background:#f2f6fa; padding:11px 12px; }
  #s-summary table td { padding:12px; }
  /* 9領域タイル：見本は白カードの中に淡いグレー青のタイルを並べる体裁。影なし・細い罫・角丸12px */
  #s-summary .domain { background:#f5f8fc; border:1px solid #e6edf3; border-radius:12px; box-shadow:none; padding:16px 18px; }
  #s-summary .domain .dh { gap:9px; margin-bottom:6px; }
  #s-summary .domain .tic { width:34px; height:34px; border-radius:9px; }
  #s-summary .domain .tic svg { width:18px; height:18px; }
  #s-summary .domain b { font-size:14.5px; color:#132c4e; line-height:1.35; }
  #s-summary .domain p { font-size:12px; color:#7a8ca0; margin:0 0 6px; line-height:1.55; }
  #s-summary .domain .num { font-size:12.5px; color:#3c4f61; line-height:1.65; }
  /* バッジ：見本の淡色ピルに合わせる（文字色は現行の意味分けを維持し、地色を淡く・角を丸く） */
  #s-summary .chip { font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.02em; }
  #s-summary .domain .dh .chip { margin-left:auto; flex:none; }
  #s-summary .chip.gold { background:#fdf3d7; color:#96690f; }
  #s-summary .chip.red { background:#fdecec; color:#b3372f; }
  #s-summary .chip.green { background:#e5f4e7; color:#2e7d3a; }
  #s-summary .chip.gray { background:#edf1f5; color:#647686; }
  #s-summary .chip.blue { background:#e3edf9; color:#2f5d8a; }
  #s-summary .chip.purple { background:#efe9fb; color:#6a4fa1; }
  /* 優先する3つの対応：見本の淡色面＋番号丸の体裁を維持しつつ余白と角丸を文法に合わせる */
  #s-summary .prio { border-radius:12px; padding:16px 18px; margin-bottom:12px; gap:13px; }
  #s-summary .prio .no { width:32px; height:32px; font-size:15px; }
  #s-summary .prio b { font-size:14.5px; color:#132c4e; }
  #s-summary .prio p { font-size:12.5px; color:#3c4f61; }
  @media (max-width: 900px) {
    #s-summary .side { width:100%; }
    #s-summary .main { padding:0 14px 20px; }
    #s-summary .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-summary .side-foot { transform:none; }
    #s-summary .card { padding:20px 18px; }
    #s-summary .domain { padding:15px 16px; }
  }

  /* ---------- review（改善候補レビュー）: 見本の見た目の文法（この画面だけに適用。構成・中身は現行のまま） ---------- */
  /* 実測の出どころ：見本 改善候補レビュー画面（1625×941）＋ホーム／新規診断／サマリーで確定した数値。地色 #F0F4FB／見出し #132C4E 明朝／サイドバー190px濃紺グラデーション／カード角丸15px・柔らかい影・広めの余白／表の見出し行 #F2F6FA／優先度バッジは淡色地＋濃色文字の角丸矩形／ステータスバッジは淡色ピル／チェックボックスは約20px・角丸5px・チェック時は濃紺地に白チェック */
  #s-review { background:#f0f4fb; }
  #s-review .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-review .side-brand { padding:2px 6px 22px; gap:8px; }
  #s-review .side-brand img { height:40px; }
  #s-review .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-review .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-review .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-review .side-foot { padding-left:10px; }
  #s-review .main { padding:0 30px 30px; }
  #s-review .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-review .bell { width:42px; height:42px; }
  #s-review .user-chip img { width:44px; height:44px; }
  #s-review .crumbs { color:#7a8ca0; margin-bottom:10px; }
  #s-review .page-head { margin-bottom:20px; }
  #s-review .page-head h2 { color:#132c4e; letter-spacing:.01em; }
  #s-review .page-head p { color:#3c4f61; }
  #s-review .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:22px 24px; margin-bottom:16px; }
  #s-review .card h3.tt { font-size:17px; color:#132c4e; }
  /* キッカーの文法：見出し横の金の縦バーを、比較カードの見出しにも同じ体裁で効かせる（アイコン色は現行のまま） */
  #s-review .btn.gold { border-radius:10px; padding:13px 20px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-review .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 16px; font-size:14.5px; }
  #s-review .grid2 { gap:16px; }
  /* 表：見本は見出し行が淡いグレー青、行は広めの上下余白と細い罫線で区切る体裁 */
  #s-review table { font-size:13.5px; }
  #s-review table th { background:#f2f6fa; color:#647686; font-size:12px; font-weight:700; padding:11px 12px; border-bottom:1px solid #e3ebf2; white-space:nowrap; }
  #s-review table td { padding:14px 12px; border-bottom:1px solid #e6edf3; vertical-align:middle; color:#3c4f61; }
  #s-review table tr:last-child td { border-bottom:none; }
  #s-review table td b { color:#132c4e; }
  #s-review table td .muted { font-size:12px; color:#7a8ca0; line-height:1.55; display:inline-block; margin-top:2px; }
  /* 優先度バッジ：見本は淡色地に濃色文字、角丸は小さめの矩形（高=淡い赤、中=淡い金、低=淡い青） */
  #s-review .chip { font-size:12px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
  #s-review table .chip { border-radius:7px; padding:4px 11px; min-width:46px; justify-content:center; }
  #s-review .chip.red { background:#fdecec; color:#b3372f; }
  #s-review .chip.gold { background:#fdf3d7; color:#96690f; }
  #s-review .chip.blue { background:#e3edf9; color:#2f5d8a; }
  #s-review .chip.gray { background:#edf1f5; color:#647686; }
  #s-review .chip.green { background:#e5f4e7; color:#2e7d3a; }
  /* ページ見出し横のサイト名バッジは見本のステータス系ピルに合わせる */
  #s-review .page-head .chip { border-radius:999px; padding:5px 13px; font-size:11.5px; align-self:flex-start; }
  /* チェックボックス：見本は約20px角・角丸5px・細い枠、チェック時は濃紺地（この画面に現れる場合の体裁を文法に合わせる） */
  #s-review input[type=checkbox] { width:20px; height:20px; border-radius:5px; accent-color:#132c4e; flex:none; cursor:pointer; }
  /* 競合比較のバー：見本のバーの体裁（細めのトラック、自サイトは金、競合はスレートブルー） */
  #s-review .bar-row { gap:10px; font-size:12.5px; margin:8px 0; }
  #s-review .bar-row .lb { width:118px; color:#3c4f61; flex:none; }
  #s-review .bar-track { background:#e8edf1; border-radius:5px; height:10px; }
  #s-review .bar-fill { height:10px; border-radius:5px; background:#8fb0cc; }
  #s-review .bar-fill.self { background:linear-gradient(90deg,#e2b04a,#cd9a2f); }
  @media (max-width: 900px) {
    #s-review .side { width:100%; }
    #s-review .main { padding:0 14px 20px; }
    #s-review .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-review .side-foot { transform:none; }
    #s-review .card { padding:20px 18px; }
    #s-review table td { padding:12px 10px; }
  }

  /* ---------- preview（レポートプレビュー・承認）: 見本の見た目の文法（この画面だけに適用。構成・中身は現行のまま） ---------- */
  /* 実測の出どころ：見本 レポートプレビュー画面（1625×941）＋確定済みの数値。地色 #F0F4FB／見出し #132C4E 明朝／サイドバー190px濃紺グラデーション／カード角丸15px・柔らかい影・広めの余白／金ボタン・ゴーストボタンの体裁。用紙まわりは見本の実測：ビューアは濃いスレート（#2E3D4F 前後）の台で角丸約14px、その上に白い紙が左右約9%・下約4%の余白を空けて置かれ、影で浮いて見える。ツールバーは台と同色で文字は淡いグレー。用紙内の見出しは紙幅の約6.5%の大きさ */
  #s-preview { background:#f0f4fb; }
  #s-preview .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-preview .side-brand { padding:2px 6px 22px; gap:8px; }
  #s-preview .side-brand img { height:40px; }
  #s-preview .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-preview .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-preview .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-preview .side-foot { padding-left:10px; }
  #s-preview .main { padding:0 30px 30px; }
  #s-preview .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-preview .bell { width:42px; height:42px; }
  #s-preview .user-chip img { width:44px; height:44px; }
  #s-preview .crumbs { color:#7a8ca0; margin-bottom:10px; }
  #s-preview .page-head { margin-bottom:20px; }
  #s-preview .page-head h2 { color:#132c4e; letter-spacing:.01em; }
  #s-preview .page-head p { color:#3c4f61; }
  #s-preview .btn.gold { border-radius:10px; padding:13px 20px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-preview .btn.gold:disabled { box-shadow:none; }
  #s-preview .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 16px; font-size:14.5px; }
  /* 右カラムのカード：見本のカード文法（角丸15px・柔らかい影・広めの余白） */
  #s-preview .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:22px 24px; margin-bottom:16px; }
  #s-preview .card h3.tt { font-size:17px; color:#132c4e; }
  #s-preview .card table td { padding:11px 10px; border-bottom:1px solid #e6edf3; }
  #s-preview .card table tr:last-child td { border-bottom:none; }
  /* ステータスバッジ：見本の淡色ピル */
  #s-preview .chip { font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
  #s-preview .chip.green { background:#e5f4e7; color:#2e7d3a; }
  /* ページ一覧：見本は白カードの行が並び、選択中は金の枠＋淡い金の地、番号は淡い金の丸 */
  #s-preview .page-item { border:1px solid #e3ebf2; border-radius:12px; padding:12px 14px; margin-bottom:10px; box-shadow:0 1px 3px rgba(16,42,67,.04); }
  #s-preview .page-item .no { width:26px; height:26px; background:#fdf3d7; color:#96690f; font-size:13px; }
  #s-preview .page-item b { font-size:14px; color:#132c4e; }
  #s-preview .page-item span { font-size:12px; color:#7a8ca0; }
  #s-preview .page-item.on { border-color:#d9a441; background:#fffaf0; box-shadow:0 2px 8px rgba(201,150,46,.14); }
  #s-preview .page-item.on .no { background:linear-gradient(180deg,#e2b04a,#cd9a2f); color:#fff; }
  /* 進行フロー：見本系の淡色ピル。完了は淡い緑、現在地は淡い金 */
  #s-preview .flow { gap:7px; font-size:12px; margin-top:16px; }
  #s-preview .flow .f { padding:5px 12px; background:#e8edf1; color:#647686; }
  #s-preview .flow .f.done { background:#e2f2e4; color:#2e7d3a; }
  #s-preview .flow .f.now { background:#fdf3d7; color:#96690f; }
  /* ビューア：濃いスレートの台の上に白い紙を置く見せ方（見本実測） */
  #s-preview .viewer { background:#2e3d4f; border:none; border-radius:14px; box-shadow:0 2px 6px rgba(16,42,67,.12), 0 18px 40px rgba(16,42,67,.20); padding:0 30px 26px; overflow:hidden; }
  #s-preview .viewer-bar { background:transparent; color:#dbe5ee; padding:13px 2px 11px; font-size:13.5px; gap:18px; }
  #s-preview .sheet { background:#fff; border-radius:3px; box-shadow:0 8px 28px rgba(6,18,32,.45); padding:40px 44px 36px; }
  #s-preview .sheet .slogo img { height:34px; }
  #s-preview .sheet .slogo { flex:none; }
  #s-preview .sheet .slogo .st1 { font-size:16.5px; color:#132c4e; white-space:nowrap; }
  #s-preview .sheet .slogo .st2 { font-size:10.5px; color:#7a8ca0; }
  #s-preview .sheet h3 { font-size:31px; color:#132c4e; margin:32px 0 10px; letter-spacing:.01em; }
  #s-preview .sheet .smeta { font-size:13.5px; gap:6px 22px; margin:20px 0; }
  #s-preview .sheet .smeta dt { color:#7a8ca0; }
  #s-preview .sheet .smeta dd { color:#17293c; }
  @media (max-width: 900px) {
    #s-preview .side { width:100%; }
    #s-preview .main { padding:0 14px 20px; }
    #s-preview .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-preview .side-foot { transform:none; }
    #s-preview .card { padding:20px 18px; }
    #s-preview .viewer { padding:0 10px 12px; }
    #s-preview .sheet { padding:26px 20px 24px; }
    #s-preview .sheet h3 { font-size:23px; margin:24px 0 8px; }
  }

  /* ---------- case（案件詳細）: 確定済みの見た目の文法（この画面だけに適用） ---------- */
  /* 出どころ：先行5画面で確定した数値と同一。地色 #F0F4FB／見出し #132C4E 明朝／サイドバー190px濃紺グラデーション／白いトップバー／カード角丸15px・柔らかい影・広めの余白／表の見出し行 #F2F6FA／バッジは淡色ピル／統計アイコン54px／導線タイル角丸12px */
  #s-case { background:#f0f4fb; }
  #s-case .side { width:190px; background:linear-gradient(180deg,#0e2849 0%,#11325c 55%,#1a4470 82%,#2c5d8c 100%); padding:24px 16px; }
  #s-case .side-brand { padding:2px 6px 22px; gap:8px; }
  #s-case .side-brand img { height:40px; }
  #s-case .side-brand .bt { font-size:13.5px; white-space:nowrap; }
  #s-case .side nav a { padding:12px 13px; border-radius:10px; margin-bottom:6px; }
  #s-case .side nav a.on { box-shadow:0 3px 10px rgba(0,0,0,.28); }
  #s-case .side-foot { padding-left:10px; }
  #s-case .main { padding:0 30px 30px; }
  #s-case .topbar { background:#fff; margin:0 -30px 22px; padding:15px 30px; border-bottom:1px solid #e4ecf3; }
  #s-case .bell { width:42px; height:42px; }
  #s-case .user-chip img { width:44px; height:44px; }
  #s-case .crumbs { color:#7a8ca0; margin-bottom:10px; }
  #s-case .page-head { margin-bottom:20px; }
  #s-case .page-head h2 { color:#132c4e; letter-spacing:.01em; }
  #s-case .page-head p { color:#3c4f61; }
  #s-case .card { border-radius:15px; border-color:#e3ebf2; box-shadow:0 1px 3px rgba(16,42,67,.04), 0 12px 30px rgba(16,42,67,.05); padding:22px 24px; margin-bottom:16px; }
  #s-case .card h3.tt { font-size:17px; color:#132c4e; }
  #s-case .btn.gold { border-radius:10px; padding:13px 20px; font-size:15px; box-shadow:0 3px 10px rgba(201,150,46,.32); }
  #s-case .btn.ghost { border-radius:10px; border-color:#d3dee8; padding:13px 16px; font-size:14.5px; }
  #s-case .grid4 { gap:16px; }
  #s-case .grid2 { gap:16px; }
  #s-case .stat-card { padding:20px 22px; }
  #s-case .stat-card .tic { width:54px; height:54px; border-radius:13px; }
  #s-case .stat-card .sl { font-size:13px; color:#6d7f8f; }
  #s-case .stat-card .sv { font-size:28px; color:#10233d; }
  #s-case .stat-card .sv small { font-size:13px; color:#6d7f8f; }
  #s-case table th { background:#f2f6fa; padding:11px 12px; }
  #s-case table td { padding:13px 12px; border-bottom:1px solid #e6edf3; vertical-align:middle; color:#3c4f61; }
  #s-case table tr:last-child td { border-bottom:none; }
  #s-case table td b { color:#132c4e; }
  #s-case .chip { font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; letter-spacing:.02em; white-space:nowrap; }
  #s-case .chip.gold { background:#fdf3d7; color:#96690f; }
  #s-case .chip.green { background:#e5f4e7; color:#2e7d3a; }
  #s-case .chip.gray { background:#edf1f5; color:#647686; }
  #s-case .info-table td:first-child { width:150px; color:#647686; font-size:12.5px; font-weight:700; background:#f8fafc; white-space:nowrap; }
  /* レポートへの導線タイル：角丸12px・細い罫・影なし（サマリーの領域タイルと同じ体裁） */
  #s-case .link-tile { display:flex; align-items:center; gap:13px; background:#f5f8fc; border:1px solid #e6edf3; border-radius:12px; padding:15px 18px; margin-bottom:10px; }
  #s-case .link-tile:last-child { margin-bottom:0; }
  #s-case .link-tile .tic { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; }
  #s-case .link-tile b { display:block; font-size:14.5px; color:#132c4e; margin-bottom:2px; }
  #s-case .link-tile span { font-size:12px; color:#7a8ca0; line-height:1.55; }
  #s-case .link-tile .btn { margin-left:auto; flex:none; padding:9px 15px; font-size:13px; }
  @media (max-width: 900px) {
    #s-case .side { width:100%; }
    #s-case .main { padding:0 14px 20px; }
    #s-case .topbar { margin:0 -14px 16px; padding:12px 14px; }
    #s-case .side-foot { transform:none; }
    #s-case .card { padding:20px 18px; }
    #s-case .info-table td:first-child { width:104px; white-space:normal; }
    #s-case .link-tile { flex-wrap:wrap; }
    #s-case .link-tile .btn { margin-left:51px; }
  }

  /* ---------- サイドバー上部（全画面共通の確定体裁） ---------- */
  /* ロゴはマーク＋Breakthrough Lab. だけを左寄せの正規配置にし、「SEO・AI流入診断」はロゴから切り離して、その下に中央寄せのタイトルとして置く。画面別の .side-brand 指定（padding・gap・画像高さ・文字サイズ）より後に置き、全画面で同じ体裁にそろえる */
  #s-home .side-brand, #s-wizard .side-brand, #s-running .side-brand, #s-summary .side-brand, #s-review .side-brand, #s-preview .side-brand, #s-case .side-brand, #s-done .side-brand { flex-direction:column; align-items:stretch; gap:0; padding:4px 4px 16px; }
  #s-home .side-brand img, #s-wizard .side-brand img, #s-running .side-brand img, #s-summary .side-brand img, #s-review .side-brand img, #s-preview .side-brand img, #s-case .side-brand img, #s-done .side-brand img { height:38px; }
  #s-home .side-brand .bt, #s-wizard .side-brand .bt, #s-running .side-brand .bt, #s-summary .side-brand .bt, #s-review .side-brand .bt, #s-preview .side-brand .bt, #s-case .side-brand .bt, #s-done .side-brand .bt { font-size:14px; white-space:nowrap; }

  /* ---------- アプリ用オーバーライド（デザイン試作→実アプリ） ---------- */
  /* 画面の枠（body の余白・地色／.screen の最大幅1240px・角丸・影／.layout の高さ）は
     デザイン試作の確定値をそのまま使う。実アプリは対象の画面だけを .active で出す。 */
  a.btn { text-decoration:none; }
  a { text-decoration:none; }
  .side nav a { text-decoration:none; }
  .flash { background:#eef6ee; border:1px solid #bcd8be; color:#2e7d3a; border-radius:10px; padding:11px 14px; font-size:13.5px; margin-bottom:14px; }
  .flash.error { background:#fdf3f3; border-color:#eec5c5; color:#b3372f; }
  .login-error { background:#fdf3f3; border:1px solid #eec5c5; color:#b3372f; border-radius:9px; padding:9px 12px; font-size:13px; margin:10px 0 0; }
  .side nav form { margin:0; }
  .nav-logout { background:none; border:none; color:#d7e4f0; font-size:14px; font-family:inherit; padding:11px 12px; cursor:pointer; text-align:left; width:100%; display:flex; align-items:center; gap:11px; border-radius:9px; margin-bottom:3px; }
  .side nav .nav-logout:hover { background:rgba(255,255,255,.08); }
  .viewer iframe { display:block; border-radius:3px; box-shadow:0 8px 28px rgba(6,18,32,.45); }