/* ==========================================================================
   hidden 属性は必ず効かせる
   JS 側は要素の出し分けを el.hidden = true/false で行っている。
   ところが .plan-goal { display: flex } のように display を持つクラスがあると、
   作者スタイルがブラウザ既定の [hidden]{display:none} に勝ってしまい、
   中身が空のまま枠だけ残る（2026-08-26・ダッシュボードの目標メッセージ枠で発生）。
   以前は .today-goal[hidden] のように 1 件ずつ打ち消していたが、
   新しい要素を足すたびに同じ不具合が出るため、ここで一度だけ優先度を上げる。
   ========================================================================== */
[hidden] { display: none !important; }

/* ==========================================================================
   文字サイズの基準
   すべての font-size は rem で書く。ここ 1 か所で全体の大きさが決まる。
   px で直書きすると、端末ごとの調整ができなくなるため使わない。
   ========================================================================== */
html {
  /* 端末に応じた基準 × 利用者が選んだ倍率。
     倍率は data-fse-font 属性で入り、既定は 1（＝標準）。
     社内レビュー（2026-08-12・iPad mini）で「一段大きいくらいが標準でよい」との
     指摘を受け、基準そのものを 1 段引き上げている。 */
  font-size: calc(18px * var(--fse-font-scale, 1));
}
html, body {
  /* スマホでLPが横にはみ出す不具合対策（施主指摘 2026-09-09）。
     LPのナビ(.l3-nav-in)は横スクロールを内部で持つが、position:sticky の
     親（.l3-nav）越しに見ると scrollWidth がその分広く計算され、
     ページ全体が横にスクロールできる状態になっていた。
     ナビ自体の横スクロールは .l3-nav-in の overflow-x:auto で保たれるので、
     ページ全体はここで止める。 */
  overflow-x: hidden;
}
/* タブレット。iPad mini(768/1024) や iPad(810/1080) が入る。
   画面が物理的に小さいわりに CSS 上の幅が広く、そのままだと文字が小さく見える。 */
@media (min-width: 700px) and (max-width: 1180px) {
  html { font-size: calc(20px * var(--fse-font-scale, 1)); }
}
/* 大画面では行長が伸びすぎないよう、わずかに上げるだけに留める。 */
@media (min-width: 1600px) {
  html { font-size: calc(18.5px * var(--fse-font-scale, 1)); }
}
/* 利用者が選んだ文字サイズ。読みやすさは人によって違うので、本人に決めてもらう。
   基準を上げたぶん、小さめにする選択肢も用意する。 */
html[data-fse-font="s"]  { --fse-font-scale: 0.9; }
html[data-fse-font="l"]  { --fse-font-scale: 1.125; }
html[data-fse-font="xl"] { --fse-font-scale: 1.25; }

/* app.css — モックアップ由来のコンポーネントCSS。tokens.css の後に読み込む。 */
/* ============ design tokens ============ */
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
    background: var(--bg);
    color: var(--body);
    font-size: 0.9375rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  a { color: var(--accent); text-decoration: none; }
  h1, h2, h3, h4, h5 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
  h1 { font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; }
  h2 { font-size: 2rem; line-height: 1.2; }
  h3 { font-size: 1.375rem; line-height: 1.3; }
  h4 { font-size: 1.0625rem; line-height: 1.4; }
  .muted { color: var(--muted); }
  button { font-family: inherit; cursor: pointer; border: 0; }

  /* ============ page switching ============ */
  /* ※ 最重要バグ修正: 元の「.page { display:none }」は WordPress が固定ページの
     <body> に付与する page クラスに誤マッチし、固定ページ全体が非表示（真っ白）になっていた。
     SPA用途のクラス名を .fse-spa-page に変更（テーマでは未使用）。 */
  .fse-spa-page { display: none; min-height: 100vh; }
  .fse-spa-page.active { display: block; }

  /* ============ layout ============ */
  .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
  .section { padding: 80px 0; }
  .section-sm { padding: 48px 0; }

  /* ============ buttons ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 600;
    text-align: center; white-space: nowrap;
    transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
  }
  .btn-primary { background: var(--ink); color: #fff; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-accent { background: var(--accent); color: #fff; }
  .btn-accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--border); }
  .btn-outline:hover { border-color: var(--ink); }
  .btn-ghost { background: transparent; color: var(--ink); }
  .btn-ghost:hover { background: var(--surface); }
  .btn-lg { padding: 14px 24px; font-size: 0.9375rem; }

  /* ============ Cards ============ */
  .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
  .card-sm { padding: 16px; border-radius: var(--radius-sm); }

  /* ============ Stripe-like hero ============ */
  .hero {
    position: relative;
    padding: 100px 0 80px;
    overflow: hidden;
    /* 以前は上端が純白だったため、ヘッダーとの間に余白が空いて見えた
       （施主指摘 2026-08-28）。上端から色を乗せ、ヘッダーと地続きにする。 */
    background: linear-gradient(180deg, #f6f4ff 0%, #f3f0ff 45%, #ffffff 100%);
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 45% at 15% 10%, rgba(99,91,255,0.12), transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 0%, rgba(5,112,222,0.10), transparent 60%);
    pointer-events: none;
  }
  .hero .container { position: relative; }
  .hero-eyebrow {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: rgba(99,91,255,0.08); color: var(--accent);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
    margin-bottom: 20px;
  }
  .hero h1 { max-width: 740px; }
  .hero h1 .grad {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .hero-sub { font-size: 1.125rem; color: var(--body); max-width: 640px; margin-top: 20px; }
  .hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

  /* ============ page nav (top) ============ */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1160px; margin: 0 auto; }
  .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); font-size: 1rem; }
  .brand-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    display: inline-flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 0.875rem;
    flex: 0 0 auto;
  }
  /* サイトアイコンを出すときは、下地の色を敷かない（アイコン自体が絵になっているため）。 */
  .brand-mark.is-img { background: none; border-radius: 6px; overflow: hidden; }
  .brand-mark.is-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .brand-mark.is-lg { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; }
  .topnav-links { display: flex; gap: 24px; align-items: center; }
  .topnav-links a:not(.btn) { color: var(--body); font-size: 0.875rem; font-weight: 500; }
  .topnav-links a:not(.btn):hover { color: var(--ink); }
  .topnav-links .btn { font-size: 0.8125rem; padding: 8px 16px; line-height: 1; }

  /* ============ feature grid ============ */
  .grid { display: grid; gap: 24px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  }

  .feature-card h4 { margin-top: 16px; }
  .feature-card p { color: var(--body); margin-top: 8px; font-size: 0.875rem; }
  .feature-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, #efeeff, #e8ebff);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent);
  }

  /* ============ section heading ============ */
  .section-head { text-align: center; margin-bottom: 48px; }
  .section-head .eyebrow { color: var(--accent); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .section-head h2 { margin-top: 8px; }
  .section-head p { max-width: 640px; margin: 16px auto 0; color: var(--body); font-size: 1rem; }

  /* ============ stats ============ */
  .stat-number { font-size: 1.375rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.2; }
  .stat-label { font-size: 0.8125rem; color: var(--muted); margin-top: 6px; }

  /* ============ pricing cards ============ */
  .price-card {
    position: relative;
    padding: 32px 28px;
    border-radius: var(--radius-lg);
  }
  .price-card.featured {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-lg);
  }
  .price-card.featured::before {
    content: "おすすめ";
    position: absolute; top: -14px; left: 24px;
    background: var(--accent); color: #fff; padding: 4px 12px;
    border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  }
  .price-name { font-size: 0.875rem; font-weight: 600; color: var(--accent); letter-spacing: 0.06em; }
  .price-amount { font-size: 2.625rem; font-weight: 800; color: var(--ink); margin-top: 8px; letter-spacing: -0.02em; }
  .price-unit { font-size: 0.875rem; color: var(--muted); margin-left: 4px; }
  .price-caption { color: var(--body); font-size: 0.875rem; margin: 12px 0 24px; }
  /* (unused price-list styles removed with simplified pricing) */

  /* ============ floating navigation ============ */
  .float-nav {
    position: fixed; bottom: 24px; right: 24px; z-index: 100;
    font-family: inherit;
  }
  .float-btn {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ink); color: #fff;
    box-shadow: var(--shadow-lg);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .float-btn:hover { background: var(--accent); transform: scale(1.04); }
  .float-menu {
    position: absolute; bottom: 68px; right: 0;
    width: 280px;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
  }
  .float-menu.open { display: block; }
  .float-menu-head { padding: 12px 14px; font-size: 0.75rem; color: var(--muted); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
  .float-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    color: var(--ink); font-size: 0.875rem; font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background 0.08s ease;
  }
  .float-menu-item:hover { background: var(--surface); }
  .float-menu-item.active { background: var(--surface-2); color: var(--accent); }
  .float-menu-item .bullet {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border);
  }
  .float-menu-item.active .bullet { background: var(--accent); }

  /* ============ Login ============ */
  .auth-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--surface) 0%, #fff 100%); padding: 40px 16px; }
  .auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-md); }
  .auth-title { text-align: center; margin-bottom: 28px; }
  .field { margin-bottom: 16px; }
  .field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
  .field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.875rem; transition: border 0.12s ease, box-shadow 0.12s ease; }
  .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,91,255,0.15); }
  .auth-submit { width: 100%; padding: 12px; font-size: 0.9375rem; margin-top: 12px; }
  .auth-foot { text-align: center; margin-top: 20px; font-size: 0.8125rem; color: var(--muted); }

  /* ============ App shell (for logged-in screens) ============ */
  .appbar {
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  }
  .appbar-nav { display: flex; gap: 4px; }
  .appbar-nav a {
    padding: 8px 14px; border-radius: var(--radius-sm);
    color: var(--body); font-size: 0.875rem; font-weight: 500;
  }
  .appbar-nav a:hover { background: var(--surface); color: var(--ink); }
  .appbar-nav a.active { background: var(--surface-2); color: var(--ink); }
  .appbar-user { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--body); }
  .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

  .app-main { background: var(--surface); min-height: calc(100vh - 60px); padding: 32px 0; }

  /* ============ Dashboard ============ */
  .dash-head { margin-bottom: 24px; }
  .dash-head .greet { color: var(--muted); font-size: 0.875rem; }
  .dash-head h2 { margin-top: 2px; }

  .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
  .kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
  .kpi-label { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
  .kpi-value { font-size: 1.75rem; font-weight: 800; color: var(--ink); margin-top: 6px; letter-spacing: -0.02em; }
  .kpi-trend { font-size: 0.75rem; margin-top: 4px; }
  .kpi-trend.up { color: var(--success); }
  .kpi-trend.warn { color: var(--warning); }

  .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

  .panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .panel-title h3 { font-size: 1.0625rem; }
  .panel-title .more { font-size: 0.8125rem; color: var(--accent); }

  /* ============ Bars (chart) ============ */
  .bar-list { display: flex; flex-direction: column; gap: 10px; }
  /* 3列目を固定幅にすると「1563/1563」のような長い値がカードからはみ出す。
     値は内容にあわせて広げ、代わりにバーを縮ませる（2026-08-27 修正）。 */
  .bar-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 0.8125rem; }
  .bar-row .bar-label { color: var(--body); }
  .bar-track { background: var(--surface-2); height: 8px; border-radius: 999px; overflow: hidden; position: relative; }
  .bar-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .bar-fill.warn { background: linear-gradient(90deg, #f59e0b, #ef4444); }
  /* 棒の中身。理解度などの割合は .bar-fill を使うが、月ごとの学習時間のように
     割合でない値は、いちばん長い月を100%として <i> の幅で描いている。
     <i> は既定でインラインのため、高さと背景を与えないと何も見えない
     （2026-09-30 修正。受講者側の「月ごとの学習時間」が空の帯になっていた）。 */
  .bar-track > i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
  }
  /* 学習していない月。0 の棒を描くと「ごく短い時間だけ学習した」ように見える。 */
  .bar-row.is-zero .bar-track > i { background: transparent; }
  .bar-row.is-zero .bar-value { font-weight: 500; color: var(--muted, #64748b); }
  .bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); min-width: 48px; white-space: nowrap; }

  /* ============ Radial / gauge ============ */
  .gauge {
    --pct: 0;
    width: 160px; height: 160px; margin: 12px auto;
    border-radius: 50%;
    background: conic-gradient(var(--gauge-color, var(--accent)) calc(var(--pct) * 1%), var(--surface-2) 0);
    display: grid; place-items: center;
    position: relative;
    transition: --pct 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }
  .gauge::before {
    content: ""; width: 130px; height: 130px; background: #fff; border-radius: 50%;
  }
  .gauge-inner { position: absolute; text-align: center; }
  /* まだ解答が無い類。輪を塗らず、数字も「—」にして「0点」と読ませない。 */
  .gauge.is-empty { background: var(--surface-2); }
  .gauge.is-empty .val { color: var(--muted); font-weight: 700; }
  .gauge-inner .val { font-size: 2.25rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
  .gauge-inner .sfx { font-size: 0.8125rem; color: var(--muted); margin-top: 4px; }

  /* ============ Category chooser ============ */
  .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
  .category-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; text-align: left; position: relative;
    transition: border 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    cursor: pointer;
    /* 長い数値や書名でカードから中身がはみ出さないようにする。 */
    min-width: 0; overflow-wrap: anywhere;
  }
  .category-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .category-card.selected { border-color: var(--accent); background: rgba(99,91,255,0.09); box-shadow: 0 0 0 3px rgba(99,91,255,0.30); }
  .category-card .code { color: var(--accent); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; }
  .category-card .name { margin-top: 6px; color: var(--ink); font-weight: 700; font-size: 1rem; }
  .category-card .desc { margin-top: 8px; color: var(--muted); font-size: 0.8125rem; }
  .category-card .pass { margin-top: 12px; font-size: 0.75rem; color: var(--body); }
  .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; }
  .pill-info { background: rgba(99,91,255,0.10); color: var(--accent); }
  .pill-warn { background: rgba(245,158,11,0.14); color: #B45309; }
  .pill-success { background: rgba(11,176,123,0.14); color: #067855; }

  /* ============ Question screen ============ */
  .exam-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .exam-head .progress { color: var(--muted); font-size: 0.8125rem; }
  .exam-head .timer { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); background: #fff; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
  .timer-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 176px; }
  .timer-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted); padding: 0 2px; display: inline-flex; align-items: center; transition: color 0.1s; }
  .timer-edit-btn:hover { color: var(--ink); }
  .timer-goal-input { width: 52px; font-size: 0.75rem; font-weight: 600; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 4px; text-align: center; font-family: inherit; outline: none; }
  .timer-goal-input.hidden { display: none; }
  .timer-track { position: relative; height: 4px; background: var(--border); border-radius: 2px; }
  .timer-fill { height: 100%; border-radius: 2px; background: var(--success); transition: width 0.9s linear, background 0.3s; }
  .timer-goal-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; opacity: 0.5; }
  .timer-hint { display: flex; justify-content: space-between; font-size: 0.625rem; color: var(--muted); }
  .question {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 28px 28px 20px; margin-bottom: 16px;
  }
  .q-tag { display: flex; gap: 8px; margin-bottom: 12px; }
  .q-body { color: var(--ink); font-size: 1.0625rem; line-height: 1.6; font-weight: 600; }
  .choices { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
  .choice {
    display: flex; gap: 12px; padding: 14px 16px;
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
    text-align: left; font-size: 0.9375rem; color: var(--ink);
    transition: border 0.12s ease, background 0.12s ease;
    cursor: pointer;
  }
  .choice:hover { border-color: var(--accent); background: var(--surface); }
  /*
   * 選んだことが分かりにくいというご指摘（2026-09-24 / C-9）。
   * 枠線を太くし、地の色も濃くして、選択中であることをはっきり示す。
   */
  .choice.selected {
    border-color: var(--accent); border-width: 2px; padding: 13px 15px;
    background: rgba(99, 91, 255, 0.16);
    box-shadow: 0 0 0 1px var(--accent) inset;
  }
  .choice.correct { border-color: var(--success); border-width: 2px; padding: 13px 15px; background: rgba(11,176,123,0.16); }
  .choice.wrong { border-color: var(--danger); border-width: 2px; padding: 13px 15px; background: rgba(223,27,65,0.12); }
  .choice .key {
    flex: 0 0 28px; height: 28px; border-radius: 50%;
    background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: var(--body); font-size: 0.8125rem;
  }
  .choice.selected .key { background: var(--accent); color: #fff; }
  .choice.correct .key { background: var(--success); color: #fff; }
  .choice.wrong .key { background: var(--danger); color: #fff; }

  /*
   * 正誤を色だけで伝えない（2026-09-24 / C-14）。
   * 色の見分けがつきにくい方にも、記号で正誤が分かるようにする。
   */
  .choice .mark {
    flex: 0 0 auto; margin-left: auto; align-self: center;
    font-size: 1.125rem; font-weight: 800; line-height: 1;
  }
  .choice.correct .mark { color: var(--success); }
  .choice.wrong .mark { color: var(--danger); }
  .explain {
    margin-top: 20px; padding: 16px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
    font-size: 0.875rem; color: var(--body); display: none;
  }
  .explain.visible { display: block; }
  .exam-actions { display: flex; justify-content: space-between; gap: 12px; }

  /* ============ Results / history ============ */
  .history-table {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
  }
  .history-table table { width: 100%; border-collapse: collapse; }
  .history-table th, .history-table td {
    padding: 12px 16px; text-align: left; font-size: 0.8125rem;
    border-bottom: 1px solid var(--border);
  }
  .history-table th { background: var(--surface); color: var(--body); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .history-table tr:last-child td { border-bottom: 0; }
  .history-table td.num { font-variant-numeric: tabular-nums; }

  /* ============ Admin table ============ */
  .filter-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
  .select {
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-size: 0.8125rem; color: var(--ink);
  }
  .badge { font-size: 0.6875rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
  .badge-success { background: rgba(11,176,123,0.14); color: #067855; }
  .badge-warn { background: rgba(245,158,11,0.14); color: #B45309; }
  .badge-danger { background: rgba(223,27,65,0.12); color: #A01029; }

  /* ============ Section split (feature + image mock) ============ */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  @media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
  .mock-frame {
    background: linear-gradient(135deg, #f9fafb, #f0f4ff);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-lg);
  }
  .mock-inner {
    background: #fff; border-radius: var(--radius);
    padding: 20px; border: 1px solid var(--border);
  }

  /* ============ Footer ============ */
  footer { padding: 48px 0; border-top: 1px solid var(--border); background: var(--surface); }
  footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; font-size: 0.8125rem; color: var(--muted); }

  /* ============ Misc ============ */
  .spacer-16 { height: 16px; }
  .spacer-24 { height: 24px; }
  .spacer-32 { height: 32px; }
  .centered { text-align: center; }

  /* ============ Inline SVG icons ============ */
  .ic {
    width: 1em; height: 1em;
    display: inline-block; vertical-align: -0.18em;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  .ic-lg { width: 1.25em; height: 1.25em; vertical-align: -0.25em; }
  .ic-hero {
    width: 28px; height: 28px;
    padding: 8px; border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,91,255,0.12), rgba(5,112,222,0.10));
    color: var(--accent);
    vertical-align: middle; margin-right: 8px;
  }
  .ic-hero .ic { width: 100%; height: 100%; vertical-align: 0; }

  /* ============ Modal (mock detail) ============ */
  .modal-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .modal-wrap.hidden { display: none; }
  .modal-backdrop { position: absolute; inset: 0; background: rgba(10,37,64,0.55); backdrop-filter: blur(2px); }
  .modal-card {
    position: relative; background: #fff; border-radius: var(--radius-lg);
    padding: 32px; max-width: 720px; width: 100%;
    box-shadow: 0 24px 48px rgba(10,37,64,0.24);
    max-height: 90vh; overflow-y: auto;
  }
  .modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface); color: var(--ink);
    font-size: 1.25rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 0;
  }
  .modal-close:hover { background: var(--surface-2); }
  @media (max-width: 600px) {
    .modal-card { padding: 20px; }
    .modal-card .kpi-grid { grid-template-columns: 1fr !important; }
  }

  /* ============ Admin User Detail Modal ============ */
  .admin-detail-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
  .admin-detail-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--ink), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
  .admin-detail-name { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
  .admin-detail-meta { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
  .admin-detail-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
  .admin-detail-kpi { background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; text-align: center; }
  .admin-detail-kpi-val { font-size: 1.375rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
  .admin-detail-kpi-label { font-size: 0.625rem; color: var(--muted); margin-top: 2px; }
  .admin-detail-section-title { font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }
  .admin-detail-bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
  .admin-detail-bar-row { display: flex; align-items: center; gap: 8px; }
  .admin-detail-bar-label { font-size: 0.75rem; color: var(--body); width: 130px; flex-shrink: 0; }
  .admin-detail-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; }
  .admin-detail-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .admin-detail-bar-pct { font-size: 0.6875rem; font-weight: 700; width: 34px; text-align: right; }
  .admin-detail-advice { border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
  .admin-detail-advice-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
  .admin-detail-advice-item:last-child { border-bottom: 0; }
  .admin-detail-advice-tag { font-size: 0.625rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; align-self: flex-start; margin-top: 1px; }
  .admin-detail-mock { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin-bottom: 4px; }
  .admin-detail-mock-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.7; min-width: 20px; }
  .admin-detail-mock-labels { display: flex; gap: 6px; }
  .admin-detail-mock-label { flex: 1; font-size: 0.625rem; color: var(--muted); text-align: center; }
  #adminUserTable tbody tr { cursor: pointer; }
  #adminUserTable tbody tr:hover td { background: rgba(99,91,255,0.04); }

  /* ============ Streak Modal ============ */
  .streak-modal-card { max-width: 420px; text-align: center; padding: 40px 32px; }
  .streak-flame { display: flex; justify-content: center; animation: streakPop 0.5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes streakPop {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .streak-count { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 12px 0 4px; }
  .streak-count .num { font-size: 5rem; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
  .streak-count .unit { font-size: 1.625rem; font-weight: 700; color: var(--ink); }
  .streak-label { font-size: 1.125rem; font-weight: 700; color: var(--accent-warm); margin-bottom: 12px; }
  .streak-best { font-size: 0.8125rem; color: var(--muted); margin-bottom: 24px; }
  .streak-new-record { display: inline-block; background: linear-gradient(135deg, var(--accent-warm), #ff8c42); color: #fff; font-size: 0.6875rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; letter-spacing: 0.04em; }
  .streak-recommend { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 28px; text-align: left; }
  .streak-recommend-label { font-size: 0.6875rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .streak-recommend-topic { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
  .streak-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .streak-option-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px 16px; text-align: left; cursor: pointer;
    transition: border-color 0.12s, box-shadow 0.12s;
  }
  .streak-option-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
  .streak-option-card.primary { border-color: var(--accent); background: rgba(99,91,255,0.04); }
  .streak-option-label {
    font-size: 0.625rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
    display: flex; align-items: center; gap: 5px;
  }
  .streak-option-title { font-size: 0.8125rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
  .streak-option-sub { font-size: 0.6875rem; color: var(--muted); margin-top: 4px; }
  .streak-option-btn {
    margin-top: 10px; width: 100%; padding: 7px 0; border-radius: var(--radius-sm);
    font-size: 0.75rem; font-weight: 600; text-align: center;
  }
  .streak-actions { display: flex; flex-direction: column; gap: 8px; }

  /* ============ Password Gate ============ */
  .password-gate {
    position: fixed; inset: 0; z-index: 9999;
    background:
      radial-gradient(ellipse 60% 45% at 20% 20%, rgba(99,91,255,0.18), transparent 60%),
      radial-gradient(ellipse 60% 45% at 80% 80%, rgba(5,112,222,0.15), transparent 60%),
      linear-gradient(180deg, #f9faff 0%, #eef1fb 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
  }
  .password-gate.hidden { display: none; }
  .password-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    max-width: 440px; width: 100%;
    box-shadow: 0 24px 48px rgba(10,37,64,0.16), 0 4px 8px rgba(10,37,64,0.04);
    border: 1px solid var(--border);
    text-align: center;
  }
  .password-mark {
    width: 56px; height: 56px; border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-warm));
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 1.5rem;
    margin-bottom: 20px;
    box-shadow: 0 8px 16px rgba(99,91,255,0.25);
  }
  .password-card h2 { margin-bottom: 8px; font-size: 1.375rem; }
  .password-card .pw-sub { color: var(--muted); font-size: 0.8125rem; margin-bottom: 24px; line-height: 1.6; }
  .password-input-row { display: flex; gap: 8px; }
  .password-input-row input {
    flex: 1;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-family: inherit;
  }
  .password-input-row input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,91,255,0.15);
  }
  .password-input-row input.error {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(223,27,65,0.12);
    animation: shake 0.35s ease;
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
  }
  .password-error {
    color: var(--danger); font-size: 0.8125rem; margin-top: 12px;
    min-height: 18px; font-weight: 600;
  }
  .password-foot {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
    font-size: 0.6875rem; color: var(--muted);
  }

  /* ============ Quiz progress bar ============ */
  .quiz-progress-bar { height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
  .quiz-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; transition: width 0.35s ease; }

  /* ============ Review UI ============ */
  .review-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px 0; }
  .review-body { padding: 16px 28px 28px; }
  .review-summary { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; align-items: start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .review-score-block { text-align: center; min-width: 80px; }
  .review-score-num { font-size: 3.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.04em; line-height: 1; }
  .review-score-denom { font-size: 0.8125rem; color: var(--muted); margin-top: 3px; }
  .review-cat-bars { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
  .review-bar-row { display: flex; align-items: center; gap: 8px; }
  .review-bar-label { font-size: 0.75rem; color: var(--body); width: 120px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .review-bar-track { flex: 1; height: 5px; background: var(--border); border-radius: 3px; }
  .review-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .review-bar-pct { font-size: 0.6875rem; font-weight: 700; width: 32px; text-align: right; }
  .review-filter-row { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
  .review-tab { padding: 5px 13px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border); background: #fff; color: var(--body); cursor: pointer; transition: all 0.1s; }
  .review-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
  .review-tab-count { font-size: 0.625rem; margin-left: 3px; opacity: 0.6; }
  .review-legend { display: flex; gap: 14px; margin-bottom: 8px; flex-wrap: wrap; }
  .review-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); }
  .review-grid { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 20px; padding: 12px; background: var(--surface); border-radius: var(--radius); }
  .r-btn { width: 34px; height: 34px; border-radius: 7px; font-size: 0.6875rem; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.1s, opacity 0.15s; }
  .r-btn:hover { transform: scale(1.12); }
  .r-btn.r-correct { background: rgba(11,176,123,0.12); color: #07875F; border-color: rgba(11,176,123,0.35); }
  .r-btn.r-wrong { background: rgba(223,27,65,0.10); color: var(--danger); border-color: rgba(223,27,65,0.28); }
  .r-btn.r-skipped { background: rgba(245,158,11,0.10); color: #B45309; border-color: rgba(245,158,11,0.35); }
  .r-btn.r-none { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
  .r-btn.r-dim { opacity: 0.2; pointer-events: none; }
  .review-cards { display: flex; flex-direction: column; gap: 10px; }
  .review-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: outline 0.3s; }
  .review-card-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
  .review-card-num { font-size: 0.6875rem; font-weight: 700; color: var(--muted); flex-shrink: 0; }
  .review-card-cat { font-size: 0.6875rem; color: var(--muted); }
  .review-card-status { margin-left: auto; flex-shrink: 0; }
  .review-card-body { padding: 14px 16px; }
  .review-card-q { font-size: 0.875rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; line-height: 1.55; }
  .review-card-choices { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
  .rcc { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--body); }
  .rcc.rcc-correct { background: rgba(11,176,123,0.10); color: #07875F; font-weight: 600; }
  .rcc.rcc-wrong { background: rgba(223,27,65,0.07); color: var(--danger); text-decoration: line-through; }
  .rcc-key { font-weight: 700; min-width: 18px; flex-shrink: 0; }
  .review-card-explain { font-size: 0.8125rem; color: var(--body); background: var(--surface); border-radius: var(--radius-sm); padding: 10px 14px; line-height: 1.65; }
  .review-card-law { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }

  /* Disabled button style */
  .btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
  .btn:disabled:hover { transform: none; box-shadow: none; }

  /* ============ Sidebar (left nav) ============ */
  .sidebar {
    position: fixed; top: 0; left: 0; width: 240px; height: 100vh;
    background: #fff; border-right: 1px solid var(--border);
    z-index: 40;
    display: none;
    flex-direction: column;
    padding: 20px 0;
  }
  body.app-mode .sidebar { display: flex; }
  .sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 20px 20px;
    font-weight: 700; color: var(--ink); font-size: 0.9375rem;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
  .sidebar-nav-head {
    padding: 12px 12px 6px;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em;
    color: var(--muted); text-transform: uppercase;
  }
  .sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; margin-bottom: 2px;
    color: var(--body); font-size: 0.875rem; font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background 0.08s ease, color 0.08s ease;
  }
  .sidebar-link:hover { background: var(--surface); color: var(--ink); }
  .sidebar-link.active { background: rgba(99,91,255,0.10); color: var(--accent); }
  .sidebar-link.active svg { color: var(--accent); }
  .sidebar-link svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
  .sidebar-user {
    padding: 16px 20px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
  }
  .sidebar-user-name { flex: 1; font-size: 0.8125rem; color: var(--ink); font-weight: 600; }
  .sidebar-user-sub { font-size: 0.6875rem; color: var(--muted); }
  body.app-mode .app-main { margin-left: 240px; padding-top: calc(var(--fse-appbar-h, 64px) + 16px); }
  body.app-mode .appbar { position: fixed; top: 0; left: 240px; right: 0; z-index: 30; }
  body.app-mode .appbar-nav { display: none; } /* sidebar replaces horizontal nav */
  body.app-mode .appbar .brand { display: none; } /* sidebar has its own brand */
  @media (max-width: 900px) {
    body.app-mode .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; display: flex; }
    body.app-mode.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
    body.app-mode .app-main { margin-left: 0; }
    body.app-mode .appbar { left: 0; }
    body.app-mode .appbar .brand { display: flex; }
  }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(10,37,64,0.5);
    z-index: 35; display: none;
  }
  body.sidebar-open .sidebar-backdrop { display: block; }

  /* Hamburger for mobile */
  .sidebar-toggle { display: none; }
  @media (max-width: 900px) {
    .sidebar-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: var(--radius-sm);
      background: transparent; color: var(--ink); border: 1px solid var(--border);
    }
  }

  /* ============ Hero stats (LP) ============ */
  .hero-stats { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; }

  /* ============ Pricing (simple) ============ */
  .pricing-simple {
    max-width: 680px; margin: 0 auto;
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 40px;
    box-shadow: var(--shadow-md);
  }
  .pricing-line {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; padding: 16px 0;
  }
  .pricing-line-label { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
  .pricing-line-sub { font-size: 0.8125rem; color: var(--muted); margin-top: 2px; }
  .pricing-line-amount { display: flex; align-items: baseline; gap: 4px; }
  .pricing-yen { font-size: 1.25rem; font-weight: 700; color: var(--ink); }
  .pricing-value { font-size: 2.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
  .pricing-unit { font-size: 0.875rem; color: var(--muted); margin-left: 4px; }
  .pricing-divider { height: 1px; background: var(--border); margin: 4px 0; }
  .pricing-cta {
    text-align: center; margin-top: 24px; padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .pricing-examples {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 32px; max-width: 880px; margin-left: auto; margin-right: auto;
  }
  .pricing-example-card {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px;
    text-align: center;
  }
  .pricing-example-size { font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }
  .pricing-example-users { font-size: 0.8125rem; color: var(--body); margin-top: 4px; }
  .pricing-example-amount { font-size: 1.125rem; font-weight: 800; color: var(--ink); margin-top: 10px; }
  .pricing-example-amount .pricing-unit { font-size: 0.75rem; }

  /* ============ Responsive ============ */
  @media (max-width: 900px) {
    h1 { font-size: 2.375rem; }
    h2 { font-size: 1.625rem; }
    h3 { font-size: 1.1875rem; }
    .hero { padding: 64px 0 56px; }
    .hero-sub { font-size: 1rem; }
    .section { padding: 56px 0; }
    .container { padding: 0 20px; }

    /* 以前はナビを丸ごと隠していたため、申し込み導線がヘッダーから消えていた
       （施主指摘 2026-08-28）。アンカーリンクだけ畳み、
       「ログイン」と「3日間お試し」は残す。 */
    .topnav-links { display: flex; gap: 12px; }
    .topnav-links a:not(.btn) { display: none; }
    .topnav-links a[href*="/login/"] { display: inline; font-size: 0.8125rem; }
    .topnav-links .btn { font-size: 0.8125rem; padding: 8px 14px; white-space: nowrap; }
    .topbar-inner { padding: 12px 20px; gap: 12px; }

    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-grid { grid-template-columns: 1fr; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-examples { grid-template-columns: repeat(2, 1fr); }

    .appbar { flex-wrap: wrap; padding: 12px 16px; gap: 8px; }
    .appbar-nav { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .appbar-nav a { white-space: nowrap; flex-shrink: 0; }
    .appbar-user { font-size: 0.75rem; }

    .filter-bar { gap: 8px; }
    .filter-bar .select { font-size: 0.75rem; }

    .history-table { overflow-x: auto; }
    .history-table table { min-width: 640px; }
  }

  @media (max-width: 600px) {
    h1 { font-size: 1.875rem; line-height: 1.2; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.0625rem; }
    h4 { font-size: 0.9375rem; }
    body { font-size: 0.875rem; }

    /* ── Mobile header simplification ──
       システム名は消さない。どのサービスを開いているか分からなくなるため、
       縮めて、入りきらないときだけ末尾を省略する。 */
    body.app-mode .appbar .brand {
      min-width: 0; flex: 1 1 auto; overflow: hidden;
    }
    body.app-mode .appbar .brand-text {
      display: block; font-size: 0.8125rem; font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    }
    body.app-mode .appbar-user-name { display: none; }
    body.app-mode .appbar-user { flex: none; }
    body.app-mode .appbar .brand { gap: 6px; }
    body.app-mode .appbar { gap: 6px; padding: 10px 12px; align-items: center; }
    body.app-mode .appbar-user { gap: 0; }
    .sidebar-toggle { width: 40px; height: 40px; }

    .hero { padding: 48px 0 40px; }
    .hero-eyebrow { font-size: 0.6875rem; }
    .hero-sub { font-size: 0.9375rem; margin-top: 16px; }
    .hero-cta { margin-top: 24px; flex-direction: column; align-items: stretch; }
    .hero-cta .btn { justify-content: center; }
    .hero-stats { gap: 20px 32px; margin-top: 32px; }
    .stat-number { font-size: 1.625rem; }

    .section { padding: 40px 0; }
    .section-head { margin-bottom: 32px; }
    .section-head p { font-size: 0.875rem; }

    .container { padding: 0 16px; }

    .topbar-inner { padding: 10px 16px; gap: 10px; }
    /* 幅が足りない端末では「ログイン」を畳み、申し込みボタンだけ残す。 */
    .topnav-links a[href*="/login/"] { display: none; }
    .topnav-links .btn { font-size: 0.75rem; padding: 7px 12px; }
    .brand { font-size: 0.9375rem; min-width: 0; }
    .brand-text, .brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .brand { font-size: 0.875rem; }
    .brand-mark { width: 24px; height: 24px; font-size: 0.75rem; border-radius: 6px; }

    .card { padding: 16px; }
    .card-sm { padding: 12px; }

    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi { padding: 14px; }
    .kpi-value { font-size: 1.375rem; }
    .kpi-label { font-size: 0.6875rem; }

    .category-grid { grid-template-columns: 1fr; }

    .pricing-simple { padding: 24px 20px; }
    .pricing-value { font-size: 2rem; }
    .pricing-yen { font-size: 1rem; }
    .pricing-line-label { font-size: 0.9375rem; }
    .pricing-line { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pricing-line-amount { align-self: flex-end; }
    .pricing-examples { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pricing-example-card { padding: 12px; }
    .pricing-example-amount { font-size: 1rem; }

    .price-amount { font-size: 2.125rem; }

    .q-body { font-size: 0.9375rem; }
    .choice { padding: 12px 14px; font-size: 0.875rem; }
    .choice .key { flex: 0 0 24px; height: 24px; font-size: 0.75rem; }
    .exam-head { flex-wrap: wrap; gap: 8px; }
    .exam-actions { flex-direction: column; gap: 8px; }
    .exam-actions .btn { width: 100%; justify-content: center; }

    .gauge { width: 140px; height: 140px; }
    .gauge::before { width: 114px; height: 114px; }
    .gauge-inner .val { font-size: 1.875rem; }

    .float-btn { width: 48px; height: 48px; }
    .float-btn svg { width: 20px; height: 20px; }
    .float-menu { width: calc(100vw - 32px); max-width: 300px; right: 0; bottom: 60px; }

    .appbar { padding: 10px 12px; }
    .appbar-nav a { padding: 6px 10px; font-size: 0.8125rem; }

    footer { padding: 32px 0; }

    .auth-card { padding: 28px 20px; }
    .bar-row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; font-size: 0.75rem; }
    .bar-value { min-width: 40px; }
  }

/* === ブロックテーマ版の補正 ===================================================
 * アプリ画面（body.app-mode）では、WordPress のブロックレイアウト幅
 * （theme.json contentSize による .wp-block-post-content の max-width / 中央寄せ）を
 * 無効化し、アプリ本来の .fse-app-mode / .app-main / .container に幅制御を委ねる。
 * これがないと post-content が 1120px 中央寄せされ、固定サイドバー＋.app-main
 * (margin-left:240) のフルワイド前提レイアウトが崩れる。
 * 既存のショートコード設置ページ・新しいブロックページの両方に効く。
 * ------------------------------------------------------------------------- */
body.app-mode .wp-block-post-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.app-mode .wp-block-post-content > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* WP管理バー表示時（システム管理者のみ）に、固定appbar/サイドバーが管理バーへ潜り込んで
 * 被らないよう上端をオフセットする（PC 32px / スマホ 46px）。 */
body.admin-bar.app-mode .sidebar,
body.admin-bar.app-mode .appbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar.app-mode .sidebar,
  body.admin-bar.app-mode .appbar { top: 46px; }
}

/* 設問に埋め込まれた図（実技・鑑別の写真/系統図/平面図）。
   PDF取り込み時に原本ページから該当領域だけを切り出して本文先頭に挿入している。 */
.fse-q-figure {
  margin: 0 0 12px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}
.fse-q-figure img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  border-radius: 6px;
}
/* 狭い画面では、図の全体が1画面に収まるようにする。
 *
 * 施主ご指摘（2026-09-28・0928-01）:
 *   「iPhoneだとやや大きく見づらい、Androidだと大きすぎて見づらい。
 *     基本は全体写しで、必要に応じて指で広げられる様に出来ないか？」
 *
 * 9/15 は逆に「潰れて読めない」とのことで、縮小をやめて横スクロールにしていた。
 * ただ、横スクロールは端末によって見え方が大きく変わり、
 * 図の一部しか見えない状態が続いた。**全体を見せて、読みたいところは指で広げる**
 * ほうが分かりやすい、というご判断。横スクロールはやめる。
 *
 * 高さも抑える。幅だけ収めても、縦に長い図だと設問と選択肢が画面外に出てしまい、
 * 「何を問われているのか」が見えなくなる。
 * 読みにくいときは、画面のピンチ操作か、図をタップして拡大していただく。
 */
@media screen and (max-width: 640px) {
  .fse-q-figure {
    overflow: hidden;
    text-align: center;
  }
  .fse-q-figure img {
    max-width: 100%;
    /* 画面の高さの半分まで。残り半分に設問と選択肢の頭が見える。 */
    max-height: 46vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  /* 全体が見えているので「横にスクロールできます」は出さない。
     代わりに、広げられることを伝える。 */
  /* かっこの中は行を分ける。1行に続けると折り返しが半端になり読みにくい
     （施主ご指摘 2026-09-28）。 */
  .fse-q-figure::after {
    content: "図はタップで拡大できます\A（画面は指で広げられます）";
    display: block;
    white-space: pre-line;
    margin-top: 6px;
    line-height: 1.6;
    font-size: 0.6875rem;
    color: var(--muted);
  }
}
.fse-q-figure img { cursor: zoom-in; }

/* 図の拡大表示。図が読めないと問題そのものが解けないため、
   縮小して収めるのではなく、確実に読める手段を用意する。 */
.fse-figzoom {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 20, 26, .92);
  display: flex;
  flex-direction: column;
}
.fse-figzoom-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-top, 0));
  color: #fff;
  font-size: 0.8125rem;
}
.fse-figzoom-bar span { flex: 1; opacity: .85; }
.fse-figzoom-close {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .6);
  background: transparent;
  color: #fff;
  font: inherit;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.fse-figzoom-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0));
}
/* まず図の全体を見せる。
 *
 * 施主ご指摘（2026-09-28・実機のAndroid）: タップで拡大すると大きくなりすぎて、
 * 表の左上しか見えない。
 *
 * `min-width: 100%` で横幅いっぱいまで引き伸ばしていたため、
 * 縦に長い図や横に広い表が画面からはみ出していた。
 * 「開いた直後は全体が見える。もっと読みたいときは指で広げる」に変える。
 */
.fse-figzoom-body img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  display: block;
}

/* ============================================================
   受講者ダッシュボード（UI改善 2026-08-12）
   この画面の仕事は「今日の学習を始めさせる」こと1つ。
   主操作を最上部に1つだけ置き、実績値は下へ回す。
   既存の .card / .panel-title / .bar-* を流用し、
   衝突を避けるため新規の指定は .dash 配下にスコープする。
   ============================================================ */
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash .dash-head { margin-bottom: 0; }
.dash .greet { font-size: 0.8125rem; color: var(--muted); min-height: 20px; }

/* 上段：今日やること + 合格まで */
/*
 * 「今日」のカードを、この画面でいちばん大きくする（施主ご要望 2026-09-24 / C-11）。
 *
 * これまでは 総合理解度・これまでの記録 と横一列に並べていたため、
 * 主役のはずのカードが3分の1の幅しか持てず、画面全体も小さく見えていた（C-10）。
 * 1段目はこのカードだけにして全幅を与え、残りは2段目へ送る。
 */
.dash-top { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; }
.dash-top .today-card { grid-column: 1 / -1; }
.dash-sub { display: grid; grid-template-columns: 1.1fr 0.85fr; gap: 16px; align-items: stretch; }
.dash .today-card {
  border-color: rgba(99, 91, 255, 0.45);
  box-shadow: var(--shadow-md);
  padding: 26px 28px;
}
/* 誰の・何の類の・いつまでの学習か（C-12でここへ移した） */
.dash .today-who {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 0.875rem; font-weight: 700; color: var(--accent-2);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
/* 目標日は倍の大きさで出す（施主ご要望 2026-09-28 / 0928-09）。
   いつまでに受けるのかが、この画面でいちばん先に目に入るようにする。 */
.dash .today-who .today-target { display: inline-flex; align-items: baseline; gap: 6px; }
.dash .today-who .today-target b { font-size: 1.75rem; line-height: 1.1; color: var(--ink); }

.dash .today-main { display: flex; gap: 28px; align-items: center; }
.dash .today-body { flex: 1; min-width: 0; }
.dash .today-body h3 { margin: 0; font-size: 1.375rem; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; }
.dash .today-sub { margin: 6px 0 0; font-size: 0.9375rem; }
.dash .today-actions { margin-top: 14px; display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.dash .today-links { display: flex; gap: 16px; flex-wrap: wrap; }
.dash .today-links a { font-size: 0.8125rem; color: var(--accent-2); font-weight: 600; }

/* 主操作。PCでは全幅にせず、押す場所を一点に定める。
   補足はボタンの外（今日の説明文）に置く。ボタン内に入れると2行になって膨らむ。 */
.dash .btn-primary-lg {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 38px; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; white-space: nowrap;
}

/* 達成リング */
.dash .ring {
  --pct: 0;
  width: 128px; height: 128px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid; place-items: center;
}
.dash .ring-inner {
  width: 100px; height: 100px; border-radius: 50%; background: #fff;
  display: grid; place-content: center; text-align: center; line-height: 1.15;
}
.dash .ring-val { font-size: 2rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .ring-goal { font-size: 0.875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash .ring-cap { display: block; font-size: 0.75rem; color: var(--muted); }
.dash .ring.is-done { background: conic-gradient(var(--success) 100%, var(--success) 0); }

/* 合格まで */
.dash .pass-meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.dash .pass-track { flex: 1; height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dash .pass-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
.dash .pass-num { font-size: 0.9375rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .pass-hint { margin: 10px 0 0; font-size: 0.7812rem; line-height: 1.6; }
.dash .pass-card .more { display: inline-block; margin-top: 10px; font-size: 0.7812rem; }

/* 下段 */
.dash-bottom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: stretch; }
.dash .recent-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.dash .recent-row {
  display: grid; grid-template-columns: 46px 1fr 46px 48px; align-items: center; gap: 8px;
  font-size: 0.7812rem; padding: 7px 0; border-bottom: 1px dashed var(--border);
}
.dash .recent-row:last-child { border-bottom: 0; }
.dash .recent-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.dash .dash-foot { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.7812rem; margin: 4px 2px 0; }

/* 目標達成時 */
.dash .today-card.is-done { border-color: rgba(11, 176, 123, 0.45); }
.dash .today-card.is-done .btn-accent { background: var(--success); box-shadow: 0 1px 2px rgba(11, 176, 123, 0.4); }

@media (max-width: 900px) {
  .dash-top, .dash-sub, .dash-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash .today-card { padding: 18px 16px; }
  .dash .today-who { font-size: 0.8125rem; margin-bottom: 10px; padding-bottom: 9px; }
  .dash .today-body h3 { font-size: 1.125rem; }
  .dash .today-sub { font-size: 0.875rem; }
  /*
   * 狭い画面でリングと本文を横に並べると、本文が1行12文字ほどに潰れて読みにくい。
   * リングを上に置いて、本文に画面いっぱいの幅を与える（2026-09-24 実機確認）。
   */
  .dash .today-main { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dash .today-body { width: 100%; }
  .dash .ring { width: 96px; height: 96px; }
  .dash .ring-inner { width: 74px; height: 74px; }
  .dash .ring-val { font-size: 1.5rem; }
  /* スマホでは主操作を全幅にして親指の届く場所へ */
  .dash .today-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .dash .btn-primary-lg { width: 100%; padding: 15px 16px; }
  .dash .today-links { justify-content: center; }
  .dash .recent-row { grid-template-columns: 42px 1fr 42px 44px; font-size: 0.75rem; }
}

/* ============================================================
   受講者は上部ナビ（UI検証 2026-08-12）
   宛先が5つしかなく、日々の作業が「演習」1つに集中する道具のため、
   240pxを常時占有するサイドバーは割に合わない。管理者側は据え置き。
   ============================================================ */
body.app-mode.app-topnav .sidebar,
body.app-mode.app-topnav .sidebar-backdrop,
body.app-mode.app-topnav .sidebar-toggle { display: none !important; }

/* ヘッダは position: fixed。高さを固定値で見込むと、文字サイズを変えたときや
   ブランドが2行になったときに本文と重なる。実測値（JS が --fse-appbar-h に入れる）を使う。 */
body.app-mode.app-topnav .app-main {
  margin-left: 0;
  padding-top: calc(var(--fse-appbar-h, 80px) + 16px);
}
body.app-mode.app-topnav .appbar { left: 0; }
body.app-mode.app-topnav .appbar .brand { display: flex; }
body.app-mode.app-topnav .appbar-nav { display: flex; gap: 2px; margin-left: 26px; flex: 1; }
body.app-mode.app-topnav .appbar-nav a {
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 0.8438rem; font-weight: 650; color: var(--body); white-space: nowrap;
}
body.app-mode.app-topnav .appbar-nav a:hover { background: var(--surface); color: var(--ink); }
/* 現在地を濃くする（施主ご要望 2026-09-24 / C-9）。下線だけでは気づきにくい。 */
body.app-mode.app-topnav .appbar-nav a.active {
  background: rgba(99, 91, 255, .12); color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
/* 読みやすさのため内容は中央寄せで上限を設ける（全幅に伸ばさない） */
body.app-mode.app-topnav .app-main > .container { max-width: 1240px; }

@media (max-width: 900px) {
  /* 項目が5つなので隠さず、横スクロールで全部に届かせる */
  body.app-mode.app-topnav .appbar { flex-wrap: wrap; }
  body.app-mode.app-topnav .appbar-nav {
    order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  body.app-mode.app-topnav .appbar-nav a { flex-shrink: 0; padding: 8px 11px; font-size: 0.8125rem; }
  body.app-mode.app-topnav .app-main { padding-top: calc(var(--fse-appbar-h, 104px) + 16px); }
}

/* 記録カード（連続日数・正答率・累計）。横幅を使い切り、下部に浮く文字をなくす */
.dash .stat-card .stat-list { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0; }
.dash .stat-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 9px; border-bottom: 1px dashed var(--border);
}
.dash .stat-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.dash .stat-list dt { font-size: 0.7812rem; color: var(--muted); margin: 0; }
.dash .stat-list dd { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .stat-list dd small { font-size: 0.6875rem; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* 連続学習の行だけは dt/dd のあとにドットと補足文が続く。
   1行に4つ並べると「連続学習」が縦書きに潰れるので、折り返して段を分ける。
   width:100% にしているのは、中間幅で列方向に変わるときに flex-basis が
   高さの指定として効いてしまうのを避けるため。 */
.dash .stat-list > div { flex-wrap: wrap; }
.dash .stat-list .streak-dots,
.dash .stat-list .streak-note { width: 100%; }
.dash .stat-list .streak-dots:empty,
.dash .stat-list .streak-note:empty { display: none; }

/* 各カードの高さを揃え、余白の抜けを減らす */
.dash-top > .card { display: flex; flex-direction: column; }
.dash .today-card .today-main { flex: 1; }

/* 中間幅では2カラムが詰まるので1カラムへ（1段目は元から全幅） */
@media (max-width: 1199px) {
  .dash-sub { grid-template-columns: 1fr; }
  .dash .stat-card { grid-column: 1 / -1; }
  .dash .stat-card .stat-list { flex-direction: row; }
  .dash .stat-card .stat-list > div {
    flex: 1; flex-direction: column; align-items: flex-start; gap: 2px;
    border-bottom: 0; border-right: 1px dashed var(--border); padding: 0 12px 0 0;
  }
  .dash .stat-card .stat-list > div:last-child { border-right: 0; }
}
@media (max-width: 900px) {
  .dash-sub { grid-template-columns: 1fr; }
  .dash .stat-card { grid-column: auto; }
}

/* --- 分野別理解度：レーダー --- */
.dash .radar-wrap { display: flex; align-items: center; gap: 18px; margin-top: 6px; flex-wrap: wrap; }
.dash .radar-wrap canvas { flex: none; }
.dash .radar-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 7px; }
.dash .radar-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.7812rem; }
.dash .radar-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.dash .radar-legend .dot.weak { background: var(--warning); }
.dash .radar-legend .nm { flex: 1; color: var(--body); }
.dash .radar-legend .vl { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash .radar-empty { margin: 8px 0 0; }

/* --- 直近7日の学習量 --- */
.dash .spark { display: flex; align-items: flex-end; gap: 6px; height: 132px; margin-top: 10px; }
.dash .spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.dash .spark-val { font-size: 0.6875rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash .spark-bar { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.dash .spark-bar i { display: block; width: 100%; background: var(--accent); border-radius: var(--radius-sm); }
.dash .spark-col.is-today .spark-bar i { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.dash .spark-col.is-today .spark-day { color: var(--ink); font-weight: 700; }
.dash .spark-day { font-size: 0.6562rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash .spark + .recent-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.dash .recent-list:empty { display: none; }

@media (max-width: 600px) {
  .dash .radar-wrap { justify-content: center; }
  .dash .radar-legend { min-width: 100%; }
  .dash .spark { height: 112px; }
}

/* 下段カードの高さを揃え、内側で余りを吸収させる（片方だけ間延びしないように） */
.dash-bottom > .card { display: flex; flex-direction: column; }
.dash .radar-wrap { flex: 1; align-items: center; justify-content: center; }
.dash .spark + .recent-list { flex: 1; }
.dash .radar-legend { align-self: center; }

/* ============================================================
   問題演習（UI改善 2026-08-12）
   主操作は「解答する」1つ。前へ/スキップは補助リンクへ降格。
   PCは右レールに解答状況を出し、見直したい問題へ直接戻れるようにする。
   ============================================================ */
.quiz { display: flex; flex-direction: column; gap: 12px; }
.quiz-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.8125rem; }
.quiz-exit { color: var(--accent-2); font-weight: 650; }
.quiz-book { color: var(--muted); }
.quiz-count { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-timer { color: var(--muted); font-variant-numeric: tabular-nums; }

/* 通常の問題演習では時間を出さない（2026-09-18 施主ご指示）。
   模擬試験は本番と同じく残り時間を出すため、`.is-exam` が付く模試側だけを残す。
   （通常演習 = #fse-quiz.quiz ／ 模擬試験 = #mock-exam.quiz.is-exam）

   **表示を消すだけで、計測は止めない。** 解答にかかった時間はサーバに送って
   学習時間として保存しているため、StudyClock ごと止めると学習時間が全件0になる。 */
.quiz:not(.is-exam) .quiz-timer { display: none; }

.quiz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 16px; align-items: start; }
.quiz-main { min-width: 0; max-width: min(760px, 100%); }
.quiz .question { padding: 22px; }
/* 分野の表示と「この問題を報告」を同じ行に。
   報告は解答の動線から外した右端に置く（押し間違いを避ける）。 */
.quiz .q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.quiz .q-head .q-field { margin-bottom: 0; min-width: 0; }

/* 目立たせない。誤りを見つけた人だけが押せればよく、
   解答の邪魔になってはいけない。ただし押せる大きさは確保する。 */
.quiz .q-report {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.6875rem;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  cursor: pointer;
}
.quiz .q-report:hover,
.quiz .q-report:focus-visible {
  color: var(--danger);
  border-color: rgba(223, 27, 65, .35);
  background: rgba(223, 27, 65, .05);
}
.quiz .q-report-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.5625rem;
  font-weight: 800;
}

/* 報告のモーダル。種類は必ずどれか選ばれている状態にする。 */
.q-report-opts { margin: 12px 0 0; display: grid; gap: 2px; }
/* 開いた直後だけ。指の下に出たモーダルを誤って触るのを防ぐ。 */
.q-report-opts.is-guard { pointer-events: none; }
.q-report-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
}
.q-report-opt:hover { background: var(--surface-2, rgba(0, 0, 0, .03)); }
.q-report-opt input { flex: none; margin: 0; }
.q-report-note-l {
  display: block;
  margin-top: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.q-report-note {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 5px;
  font: inherit;
  font-size: 0.8125rem;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--body);
  resize: vertical;
}

.quiz .q-field { margin-bottom: 10px; }
.quiz .q-field .pill { background: rgba(11,176,123,.12); color: #077954; font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.quiz .q-verdict { font-size: 0.8125rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; display: inline-block; margin-bottom: 12px; }
.quiz .q-verdict.ok { background: rgba(11,176,123,.12); color: #077954; }
.quiz .q-verdict.ng { background: rgba(223,27,65,.10); color: var(--danger); }
.quiz .question.is-correct { border-color: rgba(11,176,123,.45); }
.quiz .question.is-wrong { border-color: rgba(223,27,65,.35); }

.quiz-actions { margin-top: 16px; display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
/* 解答ボタンは押しやすく大きく（施主ご要望 2026-09-24 / C-13）。 */
.quiz .quiz-primary { padding: 18px 44px; font-size: 1.0625rem; font-weight: 800; flex: none; min-width: 200px; }
.quiz .quiz-primary:disabled { opacity: .45; cursor: not-allowed; }
.quiz-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
/* 補助操作。主操作に競らせないが、押せることは形で分かるようにする
   （テキストだけだと操作と気づかれない）。 */
.quiz .linklike {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 14px; color: var(--body); font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; line-height: 1;
}
.quiz .linklike:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,91,255,.04); }
.quiz .linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.quiz-kbd { margin-left: auto; font-size: 0.7188rem; color: var(--muted); }

/* 右レール */
.quiz-rail { display: flex; flex-direction: column; gap: 12px; }
.quiz-rail .rail-title { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.quiz-rail .rail-ring {
  --pct: 0; width: 80px; height: 80px; margin: 12px auto 8px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--surface-2) 0);
  display: grid; place-items: center;
}
.quiz-rail .rail-ring-in {
  width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-content: center;
  font-size: 1.125rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums;
}
.quiz-rail .rail-ring-in small { font-size: 0.6875rem; color: var(--muted); font-weight: 600; }
.quiz-rail .rail-stat { display: flex; gap: 8px; margin: 6px 0 0; }
.quiz-rail .rail-stat > div { flex: 1; text-align: center; }
.quiz-rail .rail-stat dt { font-size: 0.6875rem; color: var(--muted); margin: 0; }
.quiz-rail .rail-stat dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.quiz-rail .rail-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.quiz-rail .rail-dot {
  height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff;
  font-size: 0.6875rem; color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums;
}
.quiz-rail .rail-dot.is-ok { background: rgba(11,176,123,.12); border-color: rgba(11,176,123,.4); color: #077954; font-weight: 700; }
.quiz-rail .rail-dot.is-ng { background: rgba(223,27,65,.09); border-color: rgba(223,27,65,.35); color: var(--danger); font-weight: 700; }
.quiz-rail .rail-dot.is-current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; }
.quiz-rail .rail-note { margin: 9px 0 0; font-size: 0.7188rem; }
.quiz-rail .rail-quit { justify-content: center; font-size: 0.8125rem; }

@media (max-width: 1023px) {
  /* タブレット以下は右レールを畳む（設問に集中させる） */
  .quiz-layout { grid-template-columns: 1fr; }
  .quiz-rail { display: none; }
  /*
   * 640px は「広い画面で間延びさせない」ための上限。画面がそれより狭いときは
   * 画面幅で止める。100% を入れないと、中身（横長の図）に押されて
   * 設問カードごと画面からはみ出す（2026-09-24 実機確認で判明）。
   */
  .quiz-main { max-width: min(640px, 100%); margin: 0 auto; }
}
@media (max-width: 600px) {
  .quiz .question { padding: 16px; }
  /* スマホは主操作を全幅にして親指の届く位置へ（C-13で寸法を上げた） */
  .quiz .quiz-primary { align-self: stretch; width: 100%; padding: 19px 16px; min-width: 0; }
  .quiz-sub { justify-content: center; gap: 14px; }
  .quiz-kbd { display: none; }
}

/* 最初の問題では「前の問題」を隠すが、場所は空けておく（押すたびに位置がずれないように） */
.quiz .quiz-sub .linklike[style*="hidden"] { pointer-events: none; }
/* 指で押す端末（スマホ・タブレット）は、主操作を全幅の大きなボタンにする。
   幅だけで判定すると iPad が漏れるため、ポインタの種類でも判定する。 */
@media (max-width: 1024px), (pointer: coarse) {
  .quiz-actions { flex-direction: column; align-items: stretch; }
  .quiz-sub { justify-content: center; }
  .quiz .linklike { flex: 1; justify-content: center; padding: 12px 14px; font-size: 0.875rem; }
  .quiz .quiz-primary {
    width: 100%; padding: 20px 24px; font-size: 1.125rem; border-radius: 14px; min-width: 0;
  }
}
/* 片手で持つ幅では、主操作を画面下に固定して親指の届く位置に置く。
 *
 * 施主ご指摘（2026-09-28・実機のiPhone）: ボタンが隠れている。
 * iOS Safari の下のツールバーが、画面下に貼り付けたボタンの上に重なる。
 * bottom を 12px の決め打ちにしていたため、ツールバーの下に潜り込んでいた。
 * 端末が教えてくれる安全な余白（env(safe-area-inset-bottom)）を足して避ける。
 *
 * あわせて、ボタンのぶんだけ下に余白を取る。
 * 取らないと、最後の選択肢がボタンの下に隠れて読めない。
 */
@media (max-width: 600px) {
  .quiz .quiz-primary {
    position: sticky;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    box-shadow: 0 8px 24px rgba(10, 37, 64, .18);
  }
  .quiz .quiz-actions { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* --- 解説（解答後に出る）---
   選択肢のすぐ下に続くため、見出しと余白で「別の情報」だと分かるようにする。 */
.quiz .explain { margin-top: 20px; padding: 0; background: transparent; border: 0; }
/* 見出しの行。解説の印のとなりに、正誤と正解番号を並べる。
   スマートフォンでは解説まで下りると画面の上の正誤が見えず、
   合っていたのか分からない（2026-09-25 ご指摘 / E-2）。
   折り返せるようにしておく（狭い画面で3つ並ばないときは2段になる）。 */
.quiz .explain .explain-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px;
}
.quiz .explain .explain-title {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 800; letter-spacing: .04em;
  color: var(--accent); background: rgba(99,91,255,.10);
  padding: 4px 12px; border-radius: 999px;
}
.quiz .explain .explain-title::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("../icons/explain.svg") no-repeat center / contain;
  mask: url("../icons/explain.svg") no-repeat center / contain;
}
/* 正誤。色だけに頼らず ○× も添える（C-14 と同じ考え方）。 */
.quiz .explain .explain-verdict {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8125rem; font-weight: 800;
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid;
}
.quiz .explain .explain-verdict.ok {
  color: var(--success); border-color: var(--success); background: rgba(11,176,123,.12);
}
.quiz .explain .explain-verdict.ng {
  color: var(--danger); border-color: var(--danger); background: rgba(223,27,65,.10);
}
.quiz .explain .explain-verdict.ok::before { content: "○"; }
.quiz .explain .explain-verdict.ng::before { content: "×"; }
/* 正解番号。どれが正解だったかを、上に戻らずに確かめられるようにする。 */
.quiz .explain .explain-answer {
  font-size: 0.8125rem; font-weight: 700; color: var(--muted);
}
.quiz .explain .explain-answer b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; margin-left: 2px; padding: 0 5px;
  border-radius: 999px; background: var(--success); color: #fff;
  font-size: 0.8125rem; font-weight: 800;
}
.quiz .explain .explain-body {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; font-size: 0.875rem; line-height: 1.8; color: var(--body);
}
.quiz .explain .explain-body > *:first-child { margin-top: 0; }
.quiz .explain .explain-body > *:last-child { margin-bottom: 0; }
/* 解説に埋め込まれた図も設問と同じ体裁で */
.quiz .explain .explain-body .fse-q-figure { margin: 12px 0 0; background: #fff; }
/* 選択肢と解説のあいだに区切りを入れる */
.quiz .choices + .explain.visible { border-top: 1px solid var(--border); padding-top: 18px; }

/* 解説は改行を活かす（AIが箇条書きを1段落で返すため、改行位置をサーバ側で入れている） */
.quiz .explain .explain-body { white-space: pre-line; }
.quiz .explain .explain-body .fse-q-figure { white-space: normal; }

/* --- 見直し（解答済みの問題に戻ったとき）---
   新規に解く画面と同じ見た目だと、答えが見えている理由が分からず混乱するため明示する。 */
.quiz .q-review {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: #8a5a00;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 12px; width: fit-content;
}
.quiz .q-review::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("../icons/review.svg") no-repeat center / contain;
  mask: url("../icons/review.svg") no-repeat center / contain;
}
.quiz.is-review .quiz-bar { position: relative; }
.quiz.is-review .quiz-bar::after {
  content: "見直し中"; font-size: 0.6875rem; font-weight: 700; color: #8a5a00;
  background: rgba(245,158,11,.14); padding: 2px 10px; border-radius: 999px; margin-left: 8px;
}
.quiz.is-review .question { border-color: rgba(245,158,11,.45); background: #fffdf7; }

/* --- 演習完了（結果） --- */
.quiz .quiz-done { margin-top: 0; padding: 32px 28px; text-align: left; max-width: 760px; }
.quiz .done-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.quiz .done-eyebrow { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.quiz .done-score { margin: 0; font-variant-numeric: tabular-nums; }
.quiz .done-score b { font-size: 2.125rem; font-weight: 800; color: var(--ink); }
.quiz .done-score span { font-size: 0.875rem; color: var(--muted); margin-left: 6px; }
.quiz .done-meter { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin: 14px 0 10px; }
.quiz .done-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; }
.quiz .done-rate { margin: 0; font-size: 0.875rem; color: var(--body); }
.quiz .done-rate b { color: var(--ink); font-size: 1rem; }
.quiz .done-note { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.7; }
.quiz .done-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .quiz .quiz-done { padding: 24px 18px; }
  .quiz .done-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   アイコン（絵文字は使わない）
   assets/icons/*.svg をファイルとして読み込み、mask で currentColor に着色する。
   インラインSVGにしないのは、CSSだけで差し替え・色変更ができるようにするため。
   ============================================================ */
.fse-icon {
    display: inline-block; width: 20px; height: 20px; flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    vertical-align: -4px;
  }
  :root {
    --i-dashboard: url('../icons/dashboard.svg');
    --i-practice: url('../icons/practice.svg');
    --i-mock: url('../icons/mock.svg');
    --i-results: url('../icons/results.svg');
    --i-prediction: url('../icons/prediction.svg');
    --i-account: url('../icons/account.svg');
    --i-menu: url('../icons/menu.svg');
    --i-explain: url('../icons/explain.svg');
    --i-review: url('../icons/review.svg');
    --i-help: url('../icons/help.svg');
    --i-book: url('../icons/book.svg');
    --i-org: url('../icons/org.svg');
    --i-import: url('../icons/import.svg');
    --i-mail: url('../icons/mail.svg');
    --i-alarm: url('../icons/alarm.svg');
    --i-target: url('../icons/target.svg');
    --i-billing: url('../icons/billing.svg');
    --i-adash: url('../icons/adash.svg');
  }
  .fse-icon-dashboard { -webkit-mask-image: var(--i-dashboard); mask-image: var(--i-dashboard); }
  .fse-icon-practice { -webkit-mask-image: var(--i-practice); mask-image: var(--i-practice); }
  .fse-icon-mock { -webkit-mask-image: var(--i-mock); mask-image: var(--i-mock); }
  .fse-icon-results { -webkit-mask-image: var(--i-results); mask-image: var(--i-results); }
  .fse-icon-prediction { -webkit-mask-image: var(--i-prediction); mask-image: var(--i-prediction); }
  .fse-icon-account { -webkit-mask-image: var(--i-account); mask-image: var(--i-account); }
  .fse-icon-menu { -webkit-mask-image: var(--i-menu); mask-image: var(--i-menu); }
  .fse-icon-explain { -webkit-mask-image: var(--i-explain); mask-image: var(--i-explain); }
  .fse-icon-review { -webkit-mask-image: var(--i-review); mask-image: var(--i-review); }
  .fse-icon-help { -webkit-mask-image: var(--i-help); mask-image: var(--i-help); }
  .fse-icon-book { -webkit-mask-image: var(--i-book); mask-image: var(--i-book); }
  .fse-icon-org { -webkit-mask-image: var(--i-org); mask-image: var(--i-org); }
  .fse-icon-import { -webkit-mask-image: var(--i-import); mask-image: var(--i-import); }
  .fse-icon-mail { -webkit-mask-image: var(--i-mail); mask-image: var(--i-mail); }
  .fse-icon-alarm { -webkit-mask-image: var(--i-alarm); mask-image: var(--i-alarm); }
  .fse-icon-target { -webkit-mask-image: var(--i-target); mask-image: var(--i-target); }
  .fse-icon-billing { -webkit-mask-image: var(--i-billing); mask-image: var(--i-billing); }
  .fse-icon-adash { -webkit-mask-image: var(--i-adash); mask-image: var(--i-adash); }

/* ============================================================
   初回チュートリアル（スポットライト案内）
   対象要素自身に大きな影を付けて周囲を覆う＝切り抜きを作る。
   要素の角丸をそのまま活かせるので、別途マスクを作らなくてよい。
   ============================================================ */
.fse-tour-dim { position: fixed; inset: 0; background: rgba(10, 37, 64, .62); z-index: 9000; }
/* 旧方式（対象自身の影で切り抜く）は、対象が position:fixed のバーの中にあると
   その重なり順に閉じ込められて暗幕が出なかった。互換のため残すが使っていない。 */
.fse-tour-spot {
  z-index: 9001 !important;
  box-shadow: 0 0 0 3px var(--accent) !important;
  border-radius: var(--radius);
}
/* 暗幕。対象の位置に clip-path で穴を開ける。最前面に置くので、
   対象がどの要素の中にあっても確実に暗くなる。 */
.fse-tour-dim {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(10, 37, 64, .62);
  pointer-events: none;
}
/* 照らしている場所の枠。暗幕とは別の要素なので、穴の縁を必ずなぞれる。 */
.fse-tour-ring {
  position: fixed; z-index: 9002; display: none;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  pointer-events: none;
}
.fse-tour-coach {
  z-index: 9002; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px 18px;
}
.fse-tour-coach:focus { outline: none; }
.fse-tour-step { font-size: 0.6875rem; font-weight: 800; color: var(--accent); letter-spacing: .06em; }
.fse-tour-coach h4 { margin: 5px 0 6px; font-size: 0.9688rem; color: var(--ink); font-weight: 750; }
.fse-tour-coach p { margin: 0; font-size: 0.8438rem; line-height: 1.7; color: var(--body); }
.fse-tour-act { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fse-tour-dots { display: flex; gap: 5px; flex: 1; }
.fse-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.fse-tour-dots span.on { background: var(--accent); width: 16px; border-radius: 999px; }
.fse-tour-skip {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  color: var(--muted); font-size: 0.7812rem; font-weight: 600; text-decoration: underline;
}
.fse-tour-skip:hover { color: var(--ink); }
.fse-tour-next { padding: 9px 20px; font-size: 0.8438rem; }

/* --- 案内役（タイガーくん）---
   吹き出しの左に立たせる。外に浮かせず中に並べるのは、位置決めが吹き出しの
   実寸を測って行われるため（外に出すと画面端で見切れる）。
   絵は飾りなので、押しても何も起きないようにしておく。 */
/* 案内役は吹き出しの「中」ではなく、外の辺に立たせる。
   中に横並びで入れると、文章が長い回に左側が大きく空いて落ち着かなかった
   （施主指摘 2026-08-29）。外に出せば、吹き出しは文章だけの箱に戻る。
   吹き出しは position:fixed なので、そのまま絶対位置の基準になる。

   上下どちらの辺に立つかは JS が決める。照らしている対象の反対側に置かないと、
   案内役が「今まさに指している場所」を隠してしまうため。 */
.fse-tour-skip, .fse-tour-next { white-space: nowrap; }
/* 仕草ごとに絵の縦横比が違う。枠を固定して contain で収めることで、
   ステップが進んでも背丈が揃い、立ち位置も動かない。 */
.fse-tour-mascot {
  position: absolute; left: 16px;
  width: 96px; height: 112px;
  object-fit: contain; object-position: bottom center;
  pointer-events: none; user-select: none;
}
.fse-tour-coach.mascot-top    .fse-tour-mascot { bottom: calc(100% - 8px); top: auto; }
.fse-tour-coach.mascot-bottom .fse-tour-mascot { top: calc(100% - 8px); bottom: auto; }
/* 置き場所が無い（画面が狭い・対象と重なる）ときは出さない。 */
.fse-tour-coach.mascot-off .fse-tour-mascot { display: none; }
/* 次のステップに進んだことに気づけるよう、一度だけ跳ねる。 */
@keyframes fseTourHop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-7px); }
  70%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .fse-tour-mascot.is-hop { animation: fseTourHop .5s ease; }
}
/* 狭い画面では吹き出しが画面下部に固定される。外に立たせると上の辺しか空いておらず、
   そこは照らしている対象の真下になりやすい。重なるたびに案内役が消えて落ち着かないので、
   狭い画面だけは吹き出しの中に並べる（中なら対象を隠しようがない）。 */
@media (max-width: 767px) {
  .fse-tour-coach.has-mascot { display: flex; align-items: flex-end; gap: 10px; padding-left: 12px; }
  .fse-tour-body { flex: 1 1 auto; min-width: 0; }
  .fse-tour-mascot {
    position: static; flex: 0 0 auto;
    width: 64px; height: 82px; margin-bottom: -12px;
  }
  .fse-tour-coach.mascot-off .fse-tour-mascot { display: block; }
}
/* 画面が低いときは、案内役より文章を優先する。 */
@media (max-height: 520px) {
  .fse-tour-mascot { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .fse-tour-coach { transition: top .15s ease, left .15s ease; }
}

/* --- 通信状態の通知（PWA）--- */
.fse-net-note { display: none; }
.fse-net-note.is-off, .fse-net-note.is-wait, .fse-net-note.is-ok, .fse-net-note.is-update {
  display: block; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius);
  font-size: 0.8125rem; line-height: 1.6; border: 1px solid;
}
.fse-net-note.is-off { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.4); color: #8a5a00; }
.fse-net-note.is-wait { background: var(--surface); border-color: var(--border); color: var(--body); }
.fse-net-note.is-ok { background: rgba(11,176,123,.08); border-color: rgba(11,176,123,.4); color: #077954; }
.fse-net-note.is-update { background: rgba(99,91,255,.06); border-color: rgba(99,91,255,.35); color: var(--ink); }
.fse-net-note button {
  margin-left: 8px; background: var(--accent); color: #fff; border: 0;
  padding: 5px 12px; border-radius: var(--radius-sm); font-size: 0.7812rem; font-weight: 700; cursor: pointer;
}
.quiz .q-verdict.pending { background: rgba(245,158,11,.12); color: #8a5a00; }

/* ============================================================
   「？」ヘルプ（各機能の常設ツールチップ）
   初回チュートリアルは一度きりなので、あとから確かめる手段として各機能のそばに置く。
   見出し(<h3>)の中に入れることで、右寄せリンクがあっても必ず文字の直後に並ぶ。
   マウスオーバー・キーボードフォーカス・クリックのいずれでも開く
   （タッチ端末にはホバーが無いためクリックも要る）。
   ============================================================ */
.fse-help {
  position: relative; display: inline-flex; align-items: center;
  margin-left: 6px; vertical-align: middle; line-height: 1;
}
.fse-help-btn {
  width: 17px; height: 17px; border-radius: 50%; cursor: help;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-size: 0.6875rem; font-weight: 700; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.fse-help-btn:hover, .fse-help-btn:focus-visible, .fse-help.is-open .fse-help-btn {
  border-color: var(--accent); color: var(--accent); background: rgba(99,91,255,.06);
}
.fse-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.fse-help-body {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 60; width: max-content; max-width: 280px;
  background: var(--ink); color: #fff; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 0.7812rem; line-height: 1.7; font-weight: 400;
  box-shadow: var(--shadow-lg); text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.fse-help-body::before {
  content: ""; position: absolute; bottom: 100%; left: 50%;
  /* 吹き出し本体を画面内に寄せた分だけ、三角は逆に戻してボタンを指したままにする。 */
  transform: translateX(calc(-50% - var(--tip-shift, 0px)));
  border: 6px solid transparent; border-bottom-color: var(--ink);
}
/* ホバー / フォーカス / クリック（タッチ）のいずれでも開く */
.fse-help:hover .fse-help-body,
.fse-help:focus-within .fse-help-body,
.fse-help.is-open .fse-help-body { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .fse-help-body { transition: opacity .12s ease; }
}
/* 画面端での寄せは JS が実測して transform で行う（place 関数）。 */

@media (max-width: 600px) {
  .fse-help-body { max-width: 220px; }
}

/* --- 模擬試験（演習と同じ見た目に揃える。違うのは中身だけ）--- */
.quiz.is-exam .exam-timer {
  font-size: 0.9375rem; font-weight: 800; color: var(--ink);
  padding: 3px 10px; border-radius: var(--radius-sm); background: var(--surface-2);
}
.quiz.is-exam .exam-timer.is-urgent {
  background: rgba(223,27,65,.10); color: var(--danger);
}
/* 試験中は正誤を出さない。埋まっているか否かだけ示す。 */
.quiz-rail .rail-dot.is-done { background: rgba(99,91,255,.12); border-color: rgba(99,91,255,.4); color: var(--accent); font-weight: 700; }
.quiz.is-exam .quiz-exit { background: none; border: 0; padding: 0; color: var(--accent-2); font-weight: 650; cursor: pointer; font-size: 0.8125rem; }
.quiz.is-exam .quiz-exit:hover { text-decoration: underline; }

/* ============================================================
   管理者ダッシュボード
   受講者画面が「自分が次に何をするか」なのに対し、こちらは
   「誰に声をかけるべきか」を最短で分からせる。だから最上部は KPI ではなく人。
   ============================================================ */
.adash { display: flex; flex-direction: column; gap: 16px; }
.adash-top { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 16px; align-items: stretch; }
.adash-top > .card { display: flex; flex-direction: column; }
.adash .alert-card { border-color: rgba(223,27,65,.3); }
.adash .alert-list { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; flex: 1; }
.adash .alert-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
}
.adash .alert-row:last-child { border-bottom: 0; }
.adash .alert-node { font-size: 0.7188rem; color: var(--muted); margin-left: 8px; }
.adash-name { font-weight: 700; color: var(--ink); font-size: 0.8438rem; }
.adash-code { font-size: 0.6875rem; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }

.adash-stat { display: flex; gap: 8px; margin: 10px 0 0; }
.adash-stat > div { flex: 1; text-align: center; padding: 0 6px; border-right: 1px dashed var(--border); }
.adash-stat > div:last-child { border-right: 0; }
.adash-stat dt { font-size: 0.7188rem; color: var(--muted); margin: 0; }
.adash-stat dd { margin: 3px 0 0; font-size: 1.3125rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.adash-stat dd small { font-size: 0.6875rem; color: var(--muted); font-weight: 600; margin-left: 2px; }
.adash-meter { margin-top: auto; padding-top: 14px; }
.adash-meter .track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.adash-meter .fill { height: 100%; background: var(--accent); border-radius: 999px; }
.adash-meter p { margin: 8px 0 0; font-size: 0.75rem; }

.adash-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.adash-tools .select { font-size: 0.8125rem; padding: 7px 10px; }
.adash-table table { width: 100%; }
.adash-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.adash-table th[data-sort]:hover { color: var(--accent); }
.adash-table th[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.5625rem; color: var(--accent); }
.adash-table th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.5625rem; color: var(--accent); }
.adash-foot { margin: 10px 2px 0; font-size: 0.7812rem; }

@media (max-width: 1199px) { .adash-top { grid-template-columns: 1fr 1fr; } .adash .alert-card { grid-column: 1 / -1; } }
@media (max-width: 900px) { .adash-top { grid-template-columns: 1fr; } .adash .alert-card { grid-column: auto; } }

/* ログイン画面のブランド表示（アイコンだけではどのサイトか分からないため名称を並べる） */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; }
.auth-brand-text { text-align: left; line-height: 1.3; }
.auth-brand-text strong { display: block; font-size: 1.125rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.auth-brand-text small { display: block; font-size: 0.7188rem; color: var(--muted); margin-top: 2px; }

/* 学習時間の計測を止めている状態（離席・タブ非表示）を分かるようにする。
   無言で止まると「タイマーが壊れている」に見えるため。 */
.quiz-timer.is-paused { opacity: .45; }
.quiz-timer.is-paused::after { content: "一時停止"; margin-left: 6px; font-size: 0.6562rem; letter-spacing: .04em; }

/* ==========================================================================
   学習履歴（成績・履歴）
   1回ぶんの学習を1行にし、開くとその回に解いた問題まで辿れる。
   ========================================================================== */

.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.hist-filter { display: flex; gap: 6px; }
.hist-chip {
	appearance: none; border: 1px solid var(--line); background: #fff; color: var(--muted);
	font: inherit; font-size: 0.7812rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
	cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.hist-chip:hover { border-color: var(--brand); color: var(--brand); }
.hist-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.hist-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hist-note { padding: 12px 0; }

.hist-row { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.hist-row.is-open { border-color: rgba(99, 91, 255, .35); box-shadow: 0 1px 3px rgba(10, 37, 64, .06); }

.hist-head {
	display: grid; align-items: center; gap: 12px; width: 100%;
	grid-template-columns: minmax(150px, auto) 1fr auto auto auto 16px;
	appearance: none; border: 0; background: none; font: inherit; text-align: left;
	padding: 14px 16px; cursor: pointer;
}
.hist-head:hover { background: var(--bg-soft, #f7f8fb); }
.hist-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.hist-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist-date { font-size: 0.8438rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hist-kind { font-size: 0.7188rem; font-weight: 700; letter-spacing: .02em; }
.hist-kind-practice { color: var(--brand); }
.hist-kind-mock { color: var(--warning); }

.hist-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hist-tag {
	display: inline-block; font-size: 0.6875rem; font-weight: 600; color: var(--muted);
	background: var(--bg-soft, #f2f4f8); border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}

.hist-meta { display: flex; gap: 14px; color: var(--muted); font-size: 0.7812rem; white-space: nowrap; }
.hist-num b { color: var(--ink); font-size: 0.875rem; font-variant-numeric: tabular-nums; }

.hist-acc { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-acc-ok { color: var(--success, #0f9d58); }
.hist-acc-warn { color: var(--warning); }
.hist-acc-bad { color: var(--danger, #df1b41); }

.hist-caret {
	width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .18s ease; justify-self: end;
}
.hist-row.is-open > .hist-head .hist-caret,
.hist-q.is-open > .hist-q-head .hist-caret { transform: rotate(-135deg); }

.hist-body { border-top: 1px solid var(--line); padding: 4px 16px 12px; }

/* --- その回に解いた問題 --- */
.hist-tools {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	padding: 12px 0 14px;
}
.hist-tools-sum { font-size: 0.8125rem; color: var(--muted); }
.hist-tools-sum b { color: var(--ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.hist-tools-sum b.is-wrong { color: var(--danger, #df1b41); }
.hist-tools-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hist-btn { padding: 7px 15px !important; font-size: 0.7812rem !important; }

.hist-qs {
	list-style: none; margin: 0; padding: 0;
	border-top: 1px solid var(--line);
}
.hist-q {
	border-bottom: 1px solid var(--line);
	border-left: 3px solid transparent;
	transition: background .12s;
}
.hist-q.is-ok { border-left-color: rgba(15, 157, 88, .5); }
.hist-q.is-ng { border-left-color: rgba(223, 27, 65, .55); }
.hist-q:hover { background: var(--bg-soft, #f7f8fb); }

.hist-q-head {
	display: grid; align-items: center; gap: 12px; width: 100%;
	grid-template-columns: 26px minmax(0, 1fr) auto 12px;
	appearance: none; border: 0; background: none; font: inherit; text-align: left;
	padding: 12px 12px 12px 11px; cursor: pointer;
	align-items: start;
}
.hist-q-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.hist-q-no {
	padding-top: 2px;
	font-size: 0.7188rem; font-weight: 800; font-variant-numeric: tabular-nums;
	letter-spacing: .02em; color: var(--muted);
}
.hist-q.is-ok .hist-q-no { color: var(--success, #0f9d58); }
.hist-q.is-ng .hist-q-no { color: var(--danger, #df1b41); }

/* 畳んでいる間は1行。開くと全文を下に出すので、ここで折り返す必要はない。 */
.hist-q-body {
	font-size: 0.8125rem; line-height: 1.5; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hist-q.is-open .hist-q-body {
	color: var(--ink); font-weight: 600;
	white-space: normal; overflow: visible; line-height: 1.7;
}
.hist-q-head:hover .hist-q-body { color: var(--brand); }

.hist-q-side { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* 狭い画面では、右の札（解き直し・分野）が横幅を取り、設問の列が潰れて
   1行に1文字ずつ落ちることがある（施主ご指摘 2026-09-28 / C-3）。
   札は設問の下の段へ回し、設問に幅をすべて渡す。 */
@media (max-width: 640px) {
	.hist-q-head {
		grid-template-columns: 26px minmax(0, 1fr) 12px;
		grid-template-areas:
			"no   body  caret"
			".    side  .";
		row-gap: 6px;
	}
	.hist-q-no { grid-area: no; }
	.hist-q-body { grid-area: body; }
	.hist-q-side { grid-area: side; justify-content: flex-start; }
	.hist-caret { grid-area: caret; }

	/* 選択肢も同じ。「正解・あなたの解答」の札が右にあると本文の列が細くなり、
	   数文字ずつ折り返してしまう。札は本文の下の段へ回す。 */
	.hist-choices li { grid-template-columns: 22px minmax(0, 1fr); }
	.hist-c-flag { grid-column: 2; }
}

.hist-q-detail { padding: 4px 12px 18px 40px; }

.hist-choices { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hist-choices li {
	display: grid; grid-template-columns: 22px 1fr auto; align-items: start; gap: 8px;
	font-size: 0.8125rem; line-height: 1.65; padding: 9px 11px;
	border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
/* 正解・自分の解答の色は、演習中の画面と同じ濃さにする。
   薄いと、振り返りでどれが正解だったのか一目で分からない（施主ご指摘 2026-09-28）。
   演習中は .choice.correct / .choice.wrong が 枠2px・塗り12〜16%。それに合わせる。 */
.hist-choices li.is-answer {
	border-color: var(--success, #0f9d58); border-width: 2px; padding: 8px 10px;
	background: rgba(11, 176, 123, .16);
}
.hist-c-no {
	width: 20px; height: 20px; border-radius: 5px; background: var(--bg-soft, #f2f4f8);
	color: var(--muted); font-size: 0.7188rem; font-weight: 700; display: grid; place-items: center;
}
.hist-choices li.is-answer .hist-c-no { background: var(--success, #0f9d58); color: #fff; }
.hist-c-flag { font-size: 0.6875rem; font-weight: 700; color: var(--success, #0f9d58); white-space: nowrap; }

.hist-expl {
	border-left: 3px solid var(--brand); background: var(--bg-soft, #f7f8fb);
	border-radius: 0 8px 8px 0; padding: 12px 14px; font-size: 0.8125rem; line-height: 1.85;
}
.hist-expl-label {
	display: inline-block; font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em;
	color: var(--brand); margin-bottom: 6px;
}

@media (max-width: 860px) {
	.hist-head { grid-template-columns: 1fr auto 14px; row-gap: 8px; }
	.hist-when { grid-column: 1; }
	.hist-tags { grid-column: 1 / -1; grid-row: 2; }
	.hist-meta { grid-column: 1 / 2; grid-row: 3; flex-wrap: wrap; }
	.hist-acc { grid-column: 2; grid-row: 1; }
	.hist-caret { grid-column: 3; grid-row: 1; }
}

/* ==========================================================================
   模擬試験の結果
   点数だけでなく「なぜその判定か」「あと何問か」「次に何をするか」を出す。
   ========================================================================== */

.mres-card { padding: 0 !important; overflow: hidden; }
.mres { display: flex; flex-direction: column; }

.mres-head {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 16px 24px; border-bottom: 1px solid var(--line);
}
.mres-head.is-pass { background: rgba(15, 157, 88, .07); }
.mres-head.is-fail { background: rgba(223, 27, 65, .05); }
.mres-verdict { font-size: 1.125rem; font-weight: 800; letter-spacing: .02em; }
.mres-head.is-pass .mres-verdict { color: var(--success, #0f9d58); }
.mres-head.is-fail .mres-verdict { color: var(--danger, #df1b41); }
.mres-exam { font-size: 0.8438rem; font-weight: 700; color: var(--ink); }
.mres-time { margin-left: auto; font-size: 0.7812rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- スコア --- */
.mres-score {
	display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
	padding: 24px; border-bottom: 1px solid var(--line);
}
.gauge.is-fail { --gauge-color: var(--danger, #df1b41); }
.gauge.is-pass { --gauge-color: var(--success, #0f9d58); }
.mres-score-side { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.mres-kv {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.mres-kv span { font-size: 0.7812rem; color: var(--muted); }
.mres-kv b { font-size: 0.9375rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.mres-gap { margin: 6px 0 0; font-size: 0.875rem; color: var(--ink); }
.mres-gap b { color: var(--danger, #df1b41); font-size: 1.0625rem; }

/* --- 判定理由 --- */
.mres-why { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.mres-why h4 { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.mres-why ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mres-why li {
	position: relative; padding-left: 20px; font-size: 0.8438rem; line-height: 1.65; color: var(--ink);
}
.mres-why li::before {
	content: ""; position: absolute; left: 4px; top: 8px;
	width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
}

/* --- 科目別（基準線つき） --- */
.mres-subjects { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.mres-subjects h4 {
	margin: 0 0 14px; font-size: 0.8125rem; font-weight: 800; color: var(--ink);
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.mres-legend { font-size: 0.7188rem; font-weight: 600; color: var(--muted); }
.mres-bar {
	display: grid; grid-template-columns: minmax(120px, 190px) 1fr 46px 64px;
	align-items: center; gap: 12px; padding: 7px 0;
}
.mres-bar-label { font-size: 0.7812rem; color: var(--ink); line-height: 1.4; }
.mres-bar-track {
	position: relative; height: 9px; border-radius: 999px;
	background: var(--bg-soft, #eef1f6); overflow: hidden;
}
.mres-bar-fill {
	position: absolute; inset: 0 auto 0 0; border-radius: 999px;
	background: linear-gradient(90deg, #635BFF, #8b84ff);
}
.mres-bar.is-weak .mres-bar-fill { background: linear-gradient(90deg, #df1b41, #ff7a52); }
.mres-bar-line {
	position: absolute; top: -3px; bottom: -3px; width: 2px;
	background: var(--ink); opacity: .35; border-radius: 2px;
}
.mres-bar-val { font-size: 0.8125rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mres-bar.is-weak .mres-bar-val { color: var(--danger, #df1b41); }
.mres-bar-flag { font-size: 0.6875rem; font-weight: 700; color: var(--danger, #df1b41); white-space: nowrap; }

/* --- 次にやること --- */
.mres-next {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	padding: 18px 24px; background: var(--bg-soft, #f7f8fb); border-bottom: 1px solid var(--line);
}
.mres-next > div { flex: 1 1 300px; }
.mres-next-label {
	display: inline-block; font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em;
	color: var(--brand); margin-bottom: 4px;
}
.mres-next p { margin: 0; font-size: 0.8125rem; line-height: 1.7; color: var(--ink); }

/* --- 振り返り --- */
.mres-review { padding: 6px 24px 0; }
.mres-review-toggle {
	appearance: none; border: 1px solid var(--line); background: #fff; font: inherit;
	font-size: 0.8125rem; font-weight: 700; color: var(--ink);
	width: 100%; text-align: left; padding: 13px 16px; border-radius: 10px; cursor: pointer;
	margin: 14px 0 0; position: relative;
}
.mres-review-toggle:hover { border-color: var(--brand); color: var(--brand); }
.mres-review-toggle::after {
	content: ""; position: absolute; right: 16px; top: 50%;
	width: 8px; height: 8px; margin-top: -6px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .18s ease;
}
.mres-review-toggle.is-open::after { transform: rotate(-135deg); margin-top: -2px; }
.mres-review-body { padding: 4px 2px 0; }

.mres-actions {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 20px 24px 24px;
}

@media (max-width: 700px) {
	.mres-head, .mres-score, .mres-why, .mres-subjects, .mres-next, .mres-review, .mres-actions { padding-left: 16px; padding-right: 16px; }
	.mres-score { gap: 20px; justify-content: center; }
	.mres-bar { grid-template-columns: 1fr 44px; row-gap: 4px; }
	.mres-bar-label { grid-column: 1; }
	.mres-bar-val { grid-column: 2; }
	.mres-bar-track { grid-column: 1 / -1; grid-row: 2; }
	.mres-bar-flag { grid-column: 1 / -1; grid-row: 3; }
	.mres-time { margin-left: 0; width: 100%; }
}

/* ==========================================================================
   解き直し
   ========================================================================== */

.hist-redo {
	font-size: 0.6875rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
	white-space: nowrap; letter-spacing: .01em;
}
.hist-redo.is-done { background: rgba(15, 157, 88, .12); color: var(--success, #0f9d58); }
.hist-redo.is-part { background: rgba(178, 107, 0, .12); color: var(--warning); }
.hist-redo.is-none { background: var(--bg-soft, #f2f4f8); color: var(--muted); }

.hist-head { grid-template-columns: minmax(140px, auto) 1fr auto auto auto auto 16px; }

.hist-q-redo {
	font-size: 0.6562rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.hist-q-redo.ok { background: rgba(15, 157, 88, .12); color: var(--success, #0f9d58); }
.hist-q-redo.bad { background: rgba(223, 27, 65, .1); color: var(--danger, #df1b41); }

/* 読み上げ専用テキスト。定義漏れがあると画面に生で出てしまうため必ず持つ。 */
.sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 解き直し中であることを演習画面の上に出す */
.quiz-replay {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 11px 16px; margin-bottom: 12px;
	border: 1px solid rgba(99, 91, 255, .3); background: rgba(99, 91, 255, .06);
	border-radius: 10px; font-size: 0.8125rem; color: var(--ink);
}
.quiz-replay-tag {
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .04em;
	background: var(--brand); color: #fff; padding: 3px 10px; border-radius: 999px;
}
.quiz-replay a { margin-left: auto; font-size: 0.7812rem; font-weight: 700; color: var(--brand); }

/* スマホ・タブレットでは1行に詰め込まない。
   右端のラベルが見切れるくらいなら、行を増やして全部見せる。 */
@media (max-width: 900px) {
	.hist-head {
		grid-template-columns: 1fr auto auto;
		grid-template-areas: "when acc verdict" "tags tags tags" "meta meta caret";
		row-gap: 10px; align-items: center;
	}
	.hist-when { grid-area: when; }
	.hist-tags { grid-area: tags; }
	.hist-meta { grid-area: meta; flex-wrap: wrap; row-gap: 4px; }
	.hist-acc { grid-area: acc; }
	.hist-row .badge { grid-area: verdict; }
	.hist-caret { grid-area: caret; }
	.hist-redo { grid-area: meta; justify-self: end; align-self: center; }
	.hist-meta { padding-right: 96px; }
	.hist-q-detail { padding-left: 14px; }
	.hist-tools { flex-direction: column; align-items: stretch; }
	.hist-tools-btns .btn { flex: 1; text-align: center; }
}
@media (max-width: 560px) {
	.hist-head { grid-template-areas: "when acc verdict" "tags tags tags" "meta meta meta" "redo redo caret"; }
	.hist-redo { grid-area: redo; justify-self: start; }
	.hist-meta { padding-right: 0; }
	.hist-tools-btns { flex-direction: column; }
}

/* 履歴のページャー。件数が増えても一覧が縦に伸び続けないようにする。 */
.hist-pager {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-top: 14px; flex-wrap: wrap;
}
.hist-pager button {
	appearance: none; border: 1px solid var(--line); background: #fff; font: inherit;
	font-size: 0.7812rem; font-weight: 600; color: var(--ink);
	min-width: 34px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
	font-variant-numeric: tabular-nums;
}
.hist-pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.hist-pager button[aria-current="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.hist-pager button:disabled { opacity: .4; cursor: default; }
.hist-pager .hist-pager-info { font-size: 0.75rem; color: var(--muted); margin-right: 6px; }

/* ナビのアイコン */
.appbar-nav a { display: inline-flex; align-items: center; gap: 8px; }
/* 縦に並ぶサイドバーは、文字数で背景の幅が変わらないよう幅いっぱいに敷く
   （inline-flex にすると項目ごとに色の付く幅がばらつく）。 */
.sidebar-nav a { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; }
.appbar-nav .fse-icon, .sidebar-nav .fse-icon { width: 17px; height: 17px; opacity: .85; }
.appbar-nav a.active .fse-icon, .sidebar-nav a.active .fse-icon { opacity: 1; }

/* ホーム画面への追加案内。閉じられるまで居座らない前提の、控えめな帯。 */
.fse-install {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 14px 16px; margin: 20px 0 18px;
	border: 1px solid rgba(99, 91, 255, .28); background: rgba(99, 91, 255, .05);
	border-radius: 12px;
}
.fse-install-ico { width: 24px; height: 24px; color: var(--brand); flex: none; margin-top: 1px; }
.fse-install-body { flex: 1; min-width: 0; }
.fse-install-body strong { display: block; font-size: 0.875rem; color: var(--ink); }
.fse-install-body p { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }
.fse-install-body b { color: var(--ink); }
.fse-install .btn { margin-top: 10px; }
.fse-install-close {
	appearance: none; border: 0; background: none; font-size: 1.125rem; line-height: 1;
	color: var(--muted); cursor: pointer; padding: 2px 4px; flex: none;
}
.fse-install-close:hover { color: var(--ink); }
/* iOS の共有アイコン（□に↑）。文中で位置を示すための最小限の図。 */
.fse-share {
	display: inline-block; width: 11px; height: 13px; vertical-align: -2px;
	border: 1.4px solid currentColor; border-top: 0; border-radius: 2px; position: relative;
}
.fse-share::before {
	content: ""; position: absolute; left: 50%; top: -5px; width: 1.4px; height: 8px;
	background: currentColor; transform: translateX(-50%);
}
.fse-share::after {
	content: ""; position: absolute; left: 50%; top: -5px; width: 5px; height: 5px;
	border-left: 1.4px solid currentColor; border-top: 1.4px solid currentColor;
	transform: translateX(-50%) rotate(45deg);
}

/* おまかせ出題であることの説明。出題根拠を隠さない。 */
.quiz-auto-note {
	margin: 10px 0 0; font-size: 0.7812rem; line-height: 1.6; color: var(--muted);
}

/* ==========================================================================
   合格予測: スコアを上げるためのアクション
   「何をどこまで上げるか」を、数字と目盛りの両方で示す。
   ========================================================================== */
.pa-action {
	border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: #fff;
	display: flex; flex-direction: column; gap: 10px;
}
.pa-action.is-top { border-color: rgba(99, 91, 255, .35); background: rgba(99, 91, 255, .04); }
.pa-action-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-action-head h4 { margin: 0; font-size: 0.9375rem; color: var(--ink); }
.pa-action-note { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.pa-action-note b { color: var(--ink); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
/* 現在地（塗り）と目標（縦線）を1本の目盛りに重ねる */
.pa-action-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg-soft, #eef1f6); }
.pa-action-bar span {
	position: absolute; inset: 0 auto 0 0; border-radius: 999px;
	background: linear-gradient(90deg, #635BFF, #8b84ff);
}
.pa-action-bar i {
	position: absolute; top: -4px; bottom: -4px; width: 2px;
	background: var(--ink); opacity: .45; border-radius: 2px;
}
.pa-action-go { align-self: flex-start; padding: 7px 15px !important; font-size: 0.8125rem !important; }

/* ==========================================================================
   スマホのナビ: 現在地を下線だけに頼らない
   横スクロールするため、下線は端まで見えないことがある。
   選択中は色を反転させ、ひと目で分かるようにする。
   ========================================================================== */
@media (max-width: 900px) {
	body.app-mode.app-topnav .appbar-nav {
		margin-left: 0; gap: 6px; padding: 2px 0 6px;
		scroll-snap-type: x proximity;
	}
	body.app-mode.app-topnav .appbar-nav a {
		padding: 8px 14px; border-radius: 999px;
		border: 1px solid var(--line); background: #fff;
		scroll-snap-align: center;
	}
	body.app-mode.app-topnav .appbar-nav a.active {
		background: var(--accent); border-color: var(--accent); color: #fff;
		box-shadow: none; font-weight: 700;
	}
	body.app-mode.app-topnav .appbar-nav a.active .fse-icon { opacity: 1; }
	/* 現在の画面名をサービス名の下にも出す（ナビをスクロールしても分かるように） */
	body.app-mode .appbar-here { display: block; }
}
.brand-lines { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.appbar-here {
	display: none; font-size: 0.6875rem; font-weight: 700; color: var(--accent);
	letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==========================================================================
   問題演習の結果
   点数だけで終わらせず、分野別の出来と、解いた問題の振り返りまで置く。
   ========================================================================== */
.quiz-done { padding: 0 !important; overflow: hidden; }
.done-head {
	display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
	padding: 20px 24px 16px; border-bottom: 1px solid var(--line);
}
.done-head-ok { background: rgba(15, 157, 88, .07); }
.done-head-warn { background: rgba(178, 107, 0, .07); }
.done-head-bad { background: rgba(223, 27, 65, .05); }
.done-eyebrow {
	margin: 0; font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; color: var(--muted);
	width: 100%;
}
.done-score { margin: 0; font-size: 0.875rem; color: var(--muted); }
.done-score b { font-size: 2.125rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.done-score span { margin-left: 6px; }
.done-rate { margin: 0 0 0 auto; font-size: 0.8125rem; color: var(--muted); }
.done-rate b { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.done-meter { height: 6px; background: var(--bg-soft, #eef1f6); }
.done-fill { height: 100%; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.done-msg { margin: 0; padding: 16px 24px; font-size: 0.8438rem; line-height: 1.8; color: var(--ink); }

.done-fields { padding: 4px 24px 18px; }
.done-fields h4 { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 800; color: var(--ink); }
.done-bar {
	/* 割合の列は置かない。1回の演習では分野ごとの出題が2〜3問しかなく、
	   百分率にすると理解度と誤解されるため、解いた数だけを示す。 */
	display: grid; grid-template-columns: minmax(110px, 180px) 1fr 72px;
	align-items: center; gap: 12px; padding: 6px 0;
}
.done-bar-label { font-size: 0.7812rem; color: var(--ink); }
.done-bar-track { height: 8px; border-radius: 999px; background: var(--bg-soft, #eef1f6); overflow: hidden; }
.done-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.done-bar.is-weak .done-bar-fill { background: linear-gradient(90deg, #df1b41, #ff7a52); }
.done-bar-val { font-size: 0.75rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.done-bar.is-weak .done-bar-val { color: var(--danger, #df1b41); font-weight: 700; }
.done-fields-note { font-size: 0.75rem; line-height: 1.7; margin: 8px 0 0; }

.done-actions {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 4px 24px 20px; border-bottom: 1px solid var(--line);
}
.done-review { padding: 18px 24px 24px; }
.done-review h4 { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 800; color: var(--ink); }
.done-note { margin: 0; }

/* 自分が選んだ選択肢 */
.hist-choices li.is-chosen {
	border-color: var(--danger, #df1b41); border-width: 2px; padding: 8px 10px;
	background: rgba(223, 27, 65, .12);
}
.hist-choices li.is-chosen .hist-c-no { background: var(--danger, #df1b41); color: #fff; }
.hist-c-flag.is-mine { color: var(--danger, #df1b41); }

@media (max-width: 700px) {
	.done-head, .done-msg, .done-fields, .done-actions, .done-review { padding-left: 16px; padding-right: 16px; }
	.done-rate { margin-left: 0; width: 100%; }
	.done-bar { grid-template-columns: 1fr 48px 44px; }
	.done-bar-label { grid-column: 1 / -1; }
	.done-bar-track { grid-column: 1; }
}

/* モード切替（個人契約で受講者と管理者を兼ねる場合のみ表示） */
.appbar-mode {
	display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
	padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px;
	margin-right: 10px; line-height: 1.2; text-decoration: none;
}
.appbar-mode:hover { border-color: var(--accent); background: rgba(99,91,255,.05); }
.appbar-mode-now { font-size: 0.6875rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.appbar-mode-go { font-size: 0.625rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
@media (max-width: 600px) {
	.appbar-mode { padding: 4px 9px; margin-right: 6px; }
	.appbar-mode-now { font-size: 0.625rem; }
	.appbar-mode-go { display: none; }
}

/* ホーム画面から起動したとき（standalone）は、端末のステータスバー領域を避ける。 */
@media (display-mode: standalone) {
	body.app-mode .appbar { padding-top: calc(0.875rem + env(safe-area-inset-top, 0px)); }
	body.app-mode .app-main { padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   文字サイズの切り替え
   ========================================================================== */
.fse-font { position: relative; margin-right: 10px; }

/* ボタンは「文字サイズを変えられる」ことが見て分かる形にする。
   大小の A ＋ ラベル ＋ 開くことを示す三角。アイコンだけにしない。 */
.fse-font-btn {
	appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer;
	border-radius: 999px; padding: 6px 12px 6px 10px;
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--ink); font-family: inherit; line-height: 1;
}
.fse-font-btn:hover, .fse-font.is-open .fse-font-btn {
	border-color: var(--accent); color: var(--accent); background: rgba(99,91,255,.05);
}
.fse-font-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fse-font-aa { display: inline-flex; align-items: baseline; gap: 1px; }
.fse-font-aa b { font-size: 1.0625rem; font-weight: 800; line-height: 1; }
.fse-font-aa i { font-size: 0.6875rem; font-style: normal; font-weight: 800; line-height: 1; }
.fse-font-label { font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.fse-font-caret {
	width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg); margin-top: -3px; opacity: .6;
}
.fse-font.is-open .fse-font-caret { transform: rotate(-135deg); margin-top: 2px; }

.fse-font-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow-lg); padding: 6px; min-width: 210px;
}
.fse-font-menu[hidden] { display: none; }
.fse-font-menu-head {
	margin: 4px 10px 6px; font-size: 0.6875rem; font-weight: 700; color: var(--muted); letter-spacing: .02em;
}
.fse-font-menu button {
	appearance: none; border: 0; background: none; width: 100%; text-align: left; cursor: pointer;
	display: flex; align-items: center; gap: 12px;
	padding: 9px 10px; border-radius: 8px; color: var(--ink); font-family: inherit;
}
.fse-font-menu button:hover { background: var(--bg-soft, #f5f6fa); }
.fse-font-menu button[aria-checked="true"] { background: rgba(99,91,255,.08); color: var(--accent); }
.fse-font-menu button[aria-checked="true"] .fse-font-name { font-weight: 700; }
.fse-font-menu button[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-size: 0.8125rem; }
/* 実際の大きさの違いを、その場で見せる */
.fse-font-sample {
	flex: none; width: 30px; text-align: center; font-weight: 800; color: var(--ink);
}
.fse-font-menu button[aria-checked="true"] .fse-font-sample { color: var(--accent); }
.fse-font-sample.s { font-size: 0.6875rem; }
.fse-font-sample.m { font-size: 0.8125rem; }
.fse-font-sample.l { font-size: 1rem; }
.fse-font-sample.xl { font-size: 1.1875rem; }
.fse-font-name { font-size: 0.8125rem; }

@media (max-width: 600px) {
	.fse-font { margin-right: 6px; }
	.fse-font-btn { padding: 5px 9px; gap: 5px; }
	.fse-font-label { display: none; }
}

/* ==========================================================================
   1日の目標（本人が決める）
   ========================================================================== */
/* 目標は「リンクの間に挟んだ小さな文字」ではなく、独立した設定行として置く。
   毎日目にする値なので、いまいくつなのかが常に見えている必要がある。 */
.today-goal-row {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	margin: 16px 0 18px; padding: 10px 14px;
	border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #f6f9fc);
}
.today-goal-ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.today-goal-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.today-goal-cap { font-size: 0.6875rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.today-goal-now { font-size: 0.75rem; color: var(--muted); }
.today-goal-now b {
	font-size: 1.125rem; font-weight: 800; color: var(--ink); margin-right: 2px;
	font-variant-numeric: tabular-nums;
}
.today-goal-src { font-size: 0.6875rem; }
.today-goal-edit {
	margin-left: auto; appearance: none; cursor: pointer; font: inherit;
	border: 1px solid var(--line); background: #fff; border-radius: 999px;
	padding: 7px 15px; font-size: 0.75rem; font-weight: 700; color: var(--ink);
	display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.today-goal-edit .fse-icon { width: 15px; height: 15px; color: var(--accent); }
.today-goal-edit:hover { border-color: var(--accent); color: var(--accent); }
.today-goal-edit[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: rgba(99,91,255,.06); }
.today-goal {
	margin-top: 4px; padding: 16px; border: 1px solid rgba(99,91,255,.3);
	border-radius: 12px; background: rgba(99,91,255,.04);
	display: flex; flex-direction: column; gap: 12px;
}
.today-goal[hidden] { display: none; }
.today-goal > label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.today-goal-input { display: flex; align-items: center; gap: 8px; }
.today-goal-step {
	appearance: none; width: 38px; height: 38px; flex: none; cursor: pointer;
	border: 1px solid var(--line); background: #fff; border-radius: 10px;
	font-size: 1.125rem; font-weight: 700; color: var(--ink); line-height: 1;
}
.today-goal-step:hover { border-color: var(--accent); color: var(--accent); }
.today-goal-input input {
	width: 84px; height: 38px; text-align: center; font-size: 1.125rem; font-weight: 800;
	border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
	font-variant-numeric: tabular-nums; font-family: inherit;
}
.today-goal-unit { font-size: 0.8125rem; color: var(--muted); }
.today-goal-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.today-goal-presets button {
	appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer;
	border-radius: 999px; padding: 7px 14px; font-size: 0.75rem; font-weight: 600;
	color: var(--body); font-family: inherit;
}
.today-goal-presets button:hover { border-color: var(--accent); color: var(--accent); }
.today-goal-note { margin: 0; font-size: 0.75rem; line-height: 1.7; color: var(--muted); }
.today-goal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.today-goal-actions .btn { padding: 8px 18px !important; font-size: 0.8125rem !important; }

@media (max-width: 560px) {
	/* 横一列に収まらないので、上段に現在値、下段にボタンを置く。 */
	.today-goal-row {
		display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 12px 14px;
	}
	.today-goal-ico { grid-row: 1 / 3; align-self: center; }
	.today-goal-text { grid-column: 2; }
	.today-goal-src { grid-column: 2; margin-top: 2px; }
	.today-goal-edit { grid-column: 1 / -1; margin-left: 0; justify-content: center; margin-top: 8px; }
	.today-goal-input { flex-wrap: wrap; }
	.today-goal-input input { flex: 1; min-width: 90px; }
	.today-goal-presets button { flex: 1; text-align: center; }
	.today-goal-actions .btn { flex: 1; text-align: center; }
}

/* ==========================================================================
   ナビの横スクロール
   スクロールできること自体が見えないと、隠れた項目に永久に気づかれない。
   端をぼかして「まだ続く」ことを示し、送りボタンも置く。
   ========================================================================== */
.appbar-navwrap { position: relative; display: flex; align-items: center; min-width: 0; }
body.app-mode.app-topnav .appbar-navwrap { flex: 1 1 auto; margin-left: 26px; }
/* サイドバー表示のときは横ナビを使わない。枠だけ残ると header に空白が空く。 */
body.app-mode:not(.app-topnav) .appbar-navwrap { display: none; }

body.app-mode.app-topnav .appbar-navwrap .appbar-nav {
	margin-left: 0; flex: 1; min-width: 0;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
body.app-mode.app-topnav .appbar-navwrap .appbar-nav::-webkit-scrollbar { display: none; }

/* 続きがある側だけをぼかす。両端の値を変数で切り替える。 */
.appbar-navwrap .appbar-nav {
	--fade-l: 0px;
	--fade-r: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.appbar-navwrap.can-prev .appbar-nav { --fade-l: 34px; }
.appbar-navwrap.can-next .appbar-nav { --fade-r: 34px; }

/* 送りボタン。押せば動くので、スクロールに気づかなくても全項目に届く。 */
.appbar-navmore {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
	width: 28px; height: 28px; flex: none; cursor: pointer;
	appearance: none; border: 1px solid var(--line); border-radius: 50%;
	background: #fff; box-shadow: 0 1px 4px rgba(10, 37, 64, .12);
	display: grid; place-items: center; padding: 0;
}
.appbar-navmore[hidden] { display: none; }
.appbar-navmore:hover { border-color: var(--accent); }
.appbar-navmore::before {
	content: ""; width: 7px; height: 7px;
	border-right: 2px solid var(--body); border-bottom: 2px solid var(--body);
}
.appbar-navmore:hover::before { border-color: var(--accent); }
.appbar-navmore.is-prev { left: -6px; }
.appbar-navmore.is-prev::before { transform: rotate(135deg); margin-left: 2px; }
.appbar-navmore.is-next { right: -6px; }
.appbar-navmore.is-next::before { transform: rotate(-45deg); margin-right: 2px; }

@media (max-width: 900px) {
	/* ナビを2行目に送る。width ではなく flex-basis で指定する
	   （flex:1 の flex-basis:0% が width を打ち消してしまうため）。 */
	body.app-mode.app-topnav .appbar-navwrap { flex: 0 0 100%; order: 3; margin-left: 0; }
	/* ナビ自身に残る旧指定（行送り用）は、枠の中では不要なので戻す。 */
	body.app-mode.app-topnav .appbar-navwrap .appbar-nav { order: 0; flex-basis: auto; }
	/* 最後の項目が端でぴったり切れると「そこで終わり」に見える。
	   余白を足して次の項目が半分見える状態にする。 */
	body.app-mode.app-topnav .appbar-navwrap .appbar-nav { padding-right: 20px; }
	.appbar-navmore { width: 26px; height: 26px; }
}

/* ==========================================================================
   ヘッダの収まり
   文字サイズを上げたぶん、ヘッダの要素が入りきらず折り返していた。
   折り返しは崩れて見えるので、必ず1行に保ち、狭いところから順に情報を削る。
   ========================================================================== */
body.app-mode .appbar .brand-text,
body.app-mode .appbar-here,
body.app-mode .appbar-user-name,
body.app-mode .fse-font-label,
body.app-mode .appbar-mode-now,
body.app-mode .appbar-mode-go {
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.app-mode .appbar .brand { min-width: 0; flex: 0 1 auto; }
body.app-mode .appbar .brand-lines { min-width: 0; }
body.app-mode .appbar-user { flex: none; min-width: 0; }
body.app-mode .appbar-user-name { max-width: 10ch; }

/* タブレット。幅が足りないぶんは、ナビをスクロールに回して吸収する。
   サービス名は切らない。どのシステムを開いているかが分からなくなるため。 */
@media (max-width: 1180px) {
	body.app-mode .appbar-user-name { display: none; }
	body.app-mode .fse-font-label { display: none; }
	body.app-mode .appbar .brand { flex: none; }
	body.app-mode .appbar .brand-text { max-width: none; }
	/* 送りボタンの下に文字が潜らないよう、端に余白を持たせる。 */
	body.app-mode.app-topnav .appbar-navwrap .appbar-nav { padding-right: 26px; }
}
/* ナビをヘッダと同じ行に置けるのは、この幅より上だけ。
   これ未満は 900px 以下の指定でナビを2行目へ送る（後勝ちで打ち消さないよう範囲を切る）。 */
@media (min-width: 901px) and (max-width: 1180px) {
	body.app-mode.app-topnav .appbar-navwrap { min-width: 0; flex: 1 1 0; margin-left: 16px; }
}
@media (max-width: 1400px) and (min-width: 1181px) {
	body.app-mode .appbar-user-name { max-width: 8ch; }
}
/* 右側の操作はひとまとまり。要素が増えても行の構成が変わらないようにする。 */
.appbar-tools { display: flex; align-items: center; gap: 0; flex: none; }
body.app-mode .fse-font { flex: none; margin-left: auto; }

/* 狭い幅では 1行目「サービス名 ＋ 操作」、2行目「ナビ」の2行に固定する。
   折り返し任せにすると、あふれた操作が3行目へ回り、
   ヘッダの高さが伸びて本文の下に隠れてしまう。 */
@media (max-width: 900px) {
	/* 折り返しの都合で行が増えないよう、配置をグリッドで固定する。
	   左にサービス名、中央に文字サイズ、右に利用者、その下にメニュー。
	   flex の縮小に頼ると、サービス名が縮まなかったときに操作が押し出されるため
	   minmax(0, 1fr) で「名前がどれだけ長くても列は必ず縮む」ことを保証する。 */
	body.app-mode .appbar {
		display: grid;
		/* 左右を同じ比率にすることで、中央の文字サイズがヘッダの真ん中に来る。
		   列は 0 まで縮められるようにし（サービス名が長くても崩れない）、
		   潰れて消えないよう最低幅は要素側で担保する。 */
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		grid-template-areas: "brand font tools" "nav nav nav";
		align-items: center;
		gap: 8px 10px;
	}
	body.app-mode .appbar > .brand { grid-area: brand; min-width: 0; max-width: none; }
	body.app-mode .appbar > .fse-font { grid-area: font; justify-self: center; margin-left: 0; }
	body.app-mode .appbar > .appbar-tools { grid-area: tools; justify-self: end; min-width: 2.25rem; }
	body.app-mode.app-topnav .appbar > .appbar-navwrap { grid-area: nav; min-width: 0; margin-left: 0; }
	/* サイドバー表示のときは横ナビが無いので、1行だけにする。 */
	body.app-mode:not(.app-topnav) .appbar { grid-template-areas: "brand font tools"; }
	body.app-mode .appbar .brand-text { max-width: none; }
	/* 名前は出す。誰でログインしているかが分かるほうが安心なので、
	   本当に幅が無いところ（下の指定）まで残す。 */
	body.app-mode .appbar-user-name { display: inline; max-width: 8ch; }
}
@media (max-width: 560px) {
	/* ここまで狭いと名前は入らない。アイコンだけ残す。 */
	body.app-mode .appbar-user-name { display: none; }
}
@media (max-width: 420px) {
	body.app-mode .appbar .brand-mark { width: 26px; height: 26px; }
	.appbar-tools .fse-font { margin-right: 6px; }
}

/* ==========================================================================
   確認モーダル
   設定を変える操作は、押した瞬間に確定させない。
   「今こう → こうなる」を見せてから確定する。
   ========================================================================== */
.fse-modal-back {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(10, 37, 64, .45);
	display: grid; place-items: start center; padding: 24px 20px;
	overflow-y: auto; overscroll-behavior: contain;
	animation: fseFade .12s ease;
}
/* 内容が短いときは中央に見せる */
.fse-modal-back > * { margin: auto 0; }
@keyframes fseFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fse-modal-back { animation: none; } }

.fse-modal {
	background: #fff; border-radius: 16px; padding: 22px;
	width: min(440px, 100%); box-shadow: 0 20px 60px rgba(10, 37, 64, .25);
}
.fse-modal h3 { margin: 0 0 14px; font-size: 1rem; color: var(--ink); }
.fse-modal-body { font-size: 0.8125rem; color: var(--body); }
.fse-modal-note { margin: 12px 0 0; font-size: 0.75rem; line-height: 1.7; color: var(--muted); }
.fse-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.fse-modal-actions .btn { padding: 9px 18px !important; font-size: 0.8125rem !important; }

/* 現在 → 変更後 の対比 */
.fse-diff {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
	background: var(--bg-soft, #f6f9fc); border-radius: 12px; padding: 14px;
}
.fse-diff-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: center; }
.fse-diff-col span { font-size: 0.6875rem; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.fse-diff-col b { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.fse-diff-col.is-next b { color: var(--accent); font-size: 1.125rem; }
.fse-diff-arrow {
	width: 9px; height: 9px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted);
	transform: rotate(45deg);
}
@media (max-width: 420px) {
	.fse-diff { grid-template-columns: 1fr; gap: 8px; }
	.fse-diff-arrow { transform: rotate(135deg); justify-self: center; }
	.fse-modal-actions .btn { flex: 1; text-align: center; }
}

/* ==========================================================================
   利用者メニュー（氏名・役割・ログアウト）
   共有端末では「誰として入っているか」が見えないと事故になる。
   ========================================================================== */
.appbar-user { position: relative; }
.appbar-user-btn {
	appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
	display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
	border-radius: 999px; font: inherit; color: var(--body);
}
.appbar-user-btn:hover, .appbar-user.is-open .appbar-user-btn {
	border-color: var(--line); background: #fff;
}
.appbar-user-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.appbar-user-caret {
	width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg); margin-top: -3px; opacity: .55; flex: none;
}
.appbar-user.is-open .appbar-user-caret { transform: rotate(-135deg); margin-top: 2px; }

.appbar-user-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
	min-width: 220px; padding: 6px;
	background: #fff; border: 1px solid var(--line); border-radius: 12px;
	box-shadow: var(--shadow-lg);
}
.appbar-user-menu[hidden] { display: none; }
.appbar-user-head {
	display: flex; align-items: center; gap: 10px;
	padding: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line);
}
.appbar-user-head b { display: block; font-size: 0.8125rem; color: var(--ink); }
.appbar-user-head small { display: block; font-size: 0.6875rem; color: var(--muted); margin-top: 1px; }
.appbar-user-menu a {
	display: block; padding: 10px; border-radius: 8px;
	font-size: 0.8125rem; color: var(--ink); text-decoration: none;
}
.appbar-user-menu a:hover { background: var(--bg-soft, #f5f6fa); }
.appbar-user-menu a.is-logout { color: var(--danger, #df1b41); font-weight: 600; }
.appbar-user-menu a.is-logout:hover { background: rgba(223, 27, 65, .07); }
/* メニュー内のボタン（リンクではない操作）もリンクと同じ見た目に揃える */
.appbar-user-act {
	display: block; width: 100%; text-align: left;
	padding: 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
	font-size: 0.8125rem; font-family: inherit; color: var(--ink);
}
.appbar-user-act:hover { background: var(--bg-soft, #f5f6fa); }

/* 表示する類の切り替え（複数の類を学習している人だけに出る） */
.exam-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.exam-chip {
	display: inline-flex; align-items: baseline; gap: 6px;
	padding: 8px 14px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--line, #e3e8ee); background: #fff;
	font-size: 0.8125rem; font-weight: 700; color: var(--body);
	font-family: inherit; transition: background .12s, color .12s, border-color .12s;
}
.exam-chip span { font-size: 0.6875rem; font-weight: 500; color: var(--muted); }
.exam-chip:hover { border-color: var(--accent); color: var(--accent); }
.exam-chip.is-on { background: var(--ink, #0a2540); border-color: var(--ink, #0a2540); color: #fff; }
.exam-chip.is-on span { color: rgba(255,255,255,.7); }

/* 受験予定の類。一覧の中で「自分が受けるのはこれ」が離れて見ても分かるようにする。 */
.exam-badge {
	display: inline-block; margin-left: 8px; vertical-align: middle;
	padding: 3px 9px; border-radius: 999px;
	background: var(--accent, #635bff); color: #fff;
	font-size: 0.6875rem; font-weight: 700; letter-spacing: .02em;
}
/* 受験予定の類。
 * 2026-09-24（C-9）で塗りつぶして目立たせたが、
 * 「受験予定の類も白く表示してください。受験予定のバッジはそのままで大丈夫です」
 * とのご要望（2026-09-28 / 0928-05）。中は白のまま、枠だけで示す。 */
.category-card.is-target {
	border-color: var(--accent, #635bff);
	/* --surface はページの地（薄いグレー）なので、白にはならない。
	   他のカードと同じ白を指定する（2026-09-28 ご指摘）。 */
	background: #fff;
	box-shadow: 0 0 0 3px rgba(99, 91, 255, .30);
}

/* いま何の類を見ているか（総合理解度・成績）。 */
.exam-scope { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.exam-scope-label {
	font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em;
	color: var(--muted, #6b7280);
}
.exam-scope-name { font-size: 1rem; font-weight: 800; color: var(--ink, #0a2540); }
.exam-scope-badge {
	padding: 3px 9px; border-radius: 999px;
	background: var(--accent, #635bff); color: #fff;
	font-size: 0.6875rem; font-weight: 700;
}
.exam-scope-note { font-size: 0.8125rem; color: var(--muted, #6b7280); margin: 0 0 16px; }

/* 連続学習のドット。数字だけより「積み上がっている」が伝わる。 */
.streak-dots { display: flex; gap: 4px; margin-top: 8px; }
.streak-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--line, #e3e8ee);
}
.streak-dot.is-on { background: linear-gradient(135deg, #22c58b, #12a5c9); }
.streak-note { margin: 6px 0 0; font-size: 0.6875rem; color: var(--muted); line-height: 1.6; }

/* 節目を祝う帯。学習の邪魔をしないよう、短く出して自動で消える。 */
/* 通知はカードと同じ地・枠・影にそろえる。独自のグラデーションを使うと
   このUIの中で浮いて見えるため、色は左端のアクセント帯だけで示す。 */
.fse-celebrate {
	position: fixed; left: 50%; top: 16px; z-index: 9999;
	display: flex; align-items: flex-start; gap: 12px;
	padding: 14px 18px 14px 16px;
	border: 1px solid var(--border); border-left: 3px solid var(--success, #0BB07B);
	border-radius: var(--radius-lg, 16px);
	background: #fff; color: var(--ink, #0A2540);
	box-shadow: var(--shadow-lg, 0 12px 24px rgba(10,37,64,.10));
	transform: translate(-50%, -12px); opacity: 0;
	transition: transform .35s cubic-bezier(.2,.8,.3,1), opacity .35s ease;
	max-width: min(440px, calc(100vw - 32px));
}
.fse-celebrate.is-in { transform: translate(-50%, 0); opacity: 1; }
.fse-celebrate-ico { font-size: 1.125rem; line-height: 1.4; }
.fse-celebrate b { display: block; font-size: 0.875rem; font-weight: 700; }
.fse-celebrate small { display: block; font-size: 0.75rem; color: var(--muted, #6b7c93); margin-top: 3px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .fse-celebrate { transition: none; } }

/* 解答直後の手応え */
.q-feedback { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.q-chip {
	display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
	font-size: 0.75rem; font-weight: 700;
}
.q-chip.is-hot { background: rgba(255,138,0,.14); color: #b45309; }
.q-chip.is-up { background: rgba(11,176,123,.14); color: #067855; }
.q-chip.is-down { background: rgba(99,91,255,.10); color: var(--muted); }

/* 合格予測の伸び */
.pass-delta { font-size: 0.75rem; font-weight: 700; }
.pass-delta.is-up { color: #067855; }
.pass-delta.is-down { color: var(--muted); }

/* 認証まわりの注意書き */
.auth-note {
	margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
	font-size: 0.8125rem; line-height: 1.8;
}
.auth-note p { margin: 0 0 6px; }
.auth-note p:last-child { margin-bottom: 0; }
.auth-note.is-ok { background: rgba(11,176,123,.08); border: 1px solid rgba(11,176,123,.28); color: #08694c; }
.auth-note.is-info { background: rgba(99,91,255,.06); border: 1px solid rgba(99,91,255,.24); color: var(--ink); }
.auth-note.is-error { background: rgba(223,27,65,.06); border: 1px solid rgba(223,27,65,.22); color: var(--danger, #df1b41); }
.auth-help { font-size: 0.75rem; line-height: 1.8; margin: 12px 0 0; }
/* ログイン画面の「パスワードを忘れたとき」の案内。
   受講者はメールで再設定できないため、ここが唯一の行き先になる。
   auth-help より一段大きくし、読み飛ばされないようにする。 */
.auth-foot-note {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.7;
  text-align: center;
  color: var(--ink);
}
.auth-foot-note .muted { font-size: 0.8125rem; }

/* 分野バランス（レーダー）
   flex の既定は align-items: stretch のため、隣のカードが高いと
   キャンバスが縦に引き伸ばされる（iPadで発生）。中央寄せで高さを保つ。 */
.radar-wrap {
	display: flex; align-items: center; justify-content: center;
	padding: 6px 0 2px; min-height: 0;
}
/* 幅・高さはJS側が実ピクセルに合わせて設定する。
   ここで width/height を上書きすると、その値と食い違って歪む。 */
.radar-wrap canvas { max-width: 100%; flex: 0 0 auto; align-self: center; }
.radar-empty { font-size: 0.8125rem; text-align: center; line-height: 1.8; padding: 24px 12px; }
/* 棒グラフが空のときの表示。分野バランス（レーダー）と同じ見た目に揃える。 */
.bar-empty { font-size: 0.8125rem; text-align: center; line-height: 1.8; padding: 24px 12px; margin: 0; }

/* ---- 試験日からの逆算プラン ----
   数字を並べる場所ではなく、「今日これだけやれば届く」を1つ見せる場所。

   紙は白。濃い地に白抜きだと、明るい場所や輝度を落とした画面で数字が読みにくい。
   状態（間に合っている／急ぐ）は、地の色ではなく左の帯と日数バッジの色で示す。 */
.plan {
	position: relative; overflow: hidden;
	background: #fff; color: var(--ink);
	border: 1px solid var(--line); border-left: 4px solid var(--accent);
	border-radius: var(--radius, 14px);
	padding: 20px 22px; margin-bottom: 16px;
}
/* 状態ごとの色。左の帯と日数バッジだけを塗り替える。 */
.plan.is-great { border-left-color: var(--success, #0bb07b); }
.plan.is-focus, .plan.is-push { border-left-color: var(--warn, #e0a500); }
.plan.is-nodate { border-left-color: var(--line-2, #c8c8ce); }

.plan-head {
	display: flex; align-items: center; gap: 14px; width: 100%;
	padding: 0; border: 0; background: none; color: inherit;
	font-family: inherit; text-align: left; cursor: pointer;
}
/* 「押せば開く」と分かる形にする。畳んだだけの状態を放置しない。 */
.plan-more {
	flex: 0 0 auto; margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 999px;
	background: var(--surface, #f6f9fc); border: 1px solid var(--line);
	color: var(--body);
	font-size: 0.75rem; font-weight: 700; white-space: nowrap;
	transition: background .12s ease, border-color .12s ease;
}
.plan-head:hover .plan-more { background: #fff; border-color: var(--accent); color: var(--accent); }
.plan-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
.plan-more-open { display: none; }
.plan.is-collapsed .plan-more-open { display: inline; }
.plan.is-collapsed .plan-more-close { display: none; }
.plan-caret {
	width: 8px; height: 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, -1px); transition: transform .15s ease;
}
.plan.is-collapsed .plan-caret { transform: rotate(-135deg) translate(-1px, -1px); }

/* 畳んでいるときも、間に合っているか（見通し）と、どこまで来たか（バー）は残す。
   残り日数だけを出すと、急かすだけで次の行動につながらない。 */
.plan.is-collapsed { padding: 12px 14px; }
.plan.is-collapsed .plan-title { display: none; }
.plan.is-collapsed .plan-msg {
	display: block; margin: 0; font-size: 0.8125rem; color: var(--ink); font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
	-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
/* 畳んでいるときの進捗は、細い帯だけ残す */
.plan.is-collapsed .plan-detail { display: none; }
.plan-mini { display: none; margin-top: 10px; }
.plan.is-collapsed .plan-mini { display: block; }
.plan-mini .plan-bar { height: 5px; }
.plan-mini-text {
	margin: 6px 0 0; font-size: 0.6875rem; color: var(--muted);
	display: flex; justify-content: space-between; gap: 10px;
}
@media (max-width: 600px) {
	.plan-more { padding: 6px 10px; font-size: 0.6875rem; }
}

/* 中身がカードからはみ出さないようにする（長い分野名など） */
.plan, .plan * { max-width: 100%; }
.plan-head { flex-wrap: nowrap; }
.plan-headtext { flex: 1 1 auto; }
.plan-title { display: block; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.plan-msg { display: block; margin-top: 4px; font-size: 0.875rem; line-height: 1.7; color: var(--body); }

/* 残り日数。ここが一番読まれるので、白地の上で確実に読める濃さにする。 */
.plan-days {
	flex: 0 0 auto; align-self: center;
	padding: 7px 14px; border-radius: 999px;
	background: var(--accent); color: #fff;
	font-size: 0.8125rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.plan.is-great .plan-days { background: var(--success, #0bb07b); }
.plan.is-focus .plan-days, .plan.is-push .plan-days { background: #9a5b08; }
.plan.is-nodate .plan-days { background: var(--muted); }
.plan-days:empty { display: none; }
.plan-headtext { min-width: 0; }
.plan-body {
	display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
	margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.plan-figure { display: flex; flex-direction: column; line-height: 1.1; }
.plan-figure-num { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-figure-cap { margin-top: 3px; font-size: 0.6875rem; color: var(--muted); }
.plan-progress { flex: 1; min-width: 200px; }
.plan-bar { height: 8px; border-radius: 999px; background: var(--surface, #eef2f7); overflow: hidden; }
.plan-bar span {
	display: block; height: 100%; width: 0; border-radius: 999px;
	background: linear-gradient(90deg, var(--accent), #4ec9ff);
	transition: width .6s cubic-bezier(.2,.7,.3,1);
}
.plan-progress-text { margin: 7px 0 0; font-size: 0.75rem; color: var(--muted); }
/* 目標の評価。今日の数字は「1日の目標」に一本化し、ここでは可否と提案だけ。 */
.plan-goal {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: 14px; padding: 12px 14px; border-radius: 10px;
	background: var(--surface, #f6f9fc); border: 1px solid var(--line);
}
.plan-goal p { margin: 0; flex: 1; min-width: 180px; font-size: 0.8125rem; line-height: 1.7; color: var(--body); }
.plan-goal-ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.plan-goal.is-enough, .plan-goal.is-auto, .plan-goal.is-done {
	background: rgba(11,176,123,.08); border-color: rgba(11,176,123,.28);
}
.plan-goal.is-short, .plan-goal.is-tight {
	background: rgba(224,165,0,.10); border-color: rgba(224,165,0,.34);
}
.plan-goal-apply {
	flex: 0 0 auto; cursor: pointer; font-family: inherit;
	padding: 8px 16px; border-radius: 999px; border: 0;
	background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 700;
}
.plan-goal-apply:hover { background: #4f46e5; }
.plan-goal-apply:disabled { opacity: .6; cursor: default; }

/* できていること。チェック付きで短く。 */
.plan-wins { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.plan-wins li {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px 6px 10px; border-radius: 999px;
	background: rgba(11,176,123,.10); color: #0a6b50;
	font-size: 0.75rem; font-weight: 600;
}
.plan-wins li::before { content: "✓"; font-weight: 800; color: var(--success, #0bb07b); }

.plan-options { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.plan-options li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px; border-radius: 10px;
	background: var(--surface, #f6f9fc); border: 1px solid var(--line);
}
.plan-options b { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.plan-options span { font-size: 0.75rem; color: var(--muted); }
@media (max-width: 600px) {
	.plan { padding: 16px; }
	.plan-head { flex-direction: column; gap: 10px; }
	.plan-days { align-self: flex-start; }
	.plan-figure-num { font-size: 1.75rem; }
}

/* 発行したログイン情報 */
.fse-creds { display: grid; gap: 8px; margin: 12px 0; }
.fse-creds > div {
	display: flex; align-items: baseline; gap: 10px;
	padding: 10px 12px; border-radius: 8px; background: var(--bg-soft, #f5f6fa);
}
.fse-creds span { flex: 0 0 84px; font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.fse-creds code { font-size: 0.9375rem; font-weight: 700; color: var(--ink); word-break: break-all; }
.fse-cred-copy { width: 100%; }

/* パスワード変更フォーム（モーダル内） */
.fse-pw-field { display: block; margin-bottom: 12px; }
.fse-pw-field > span { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.fse-pw-field input { width: 100%; box-sizing: border-box; }
.fse-pw-err {
	margin: 0 0 12px; padding: 9px 11px; border-radius: 8px;
	background: rgba(223, 27, 65, .08); color: var(--danger, #df1b41);
	font-size: 0.75rem; line-height: 1.7;
}

/* モーダル内の入力・対象表示 */
.fse-modal-lead { margin: 0; font-size: 0.8125rem; line-height: 1.8; color: var(--body); }
.fse-modal-lead + .fse-modal-note { margin-top: 10px; }
.fse-modal-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ink); margin: 14px 0 6px; }
.fse-modal-input {
	width: 100%; padding: 11px 13px; font: inherit; font-size: 0.9375rem;
	border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff;
}
.fse-modal-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.fse-modal-target {
	background: var(--bg-soft, #f6f9fc); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
	font-size: 0.9375rem; color: var(--ink);
}
.btn-danger { background: var(--danger, #df1b41); color: #fff; border: 1px solid var(--danger, #df1b41); }
.btn-danger:hover { filter: brightness(0.94); }

/* ==========================================================================
   管理者: 会社としての得意・苦手／総量／受講者詳細
   ========================================================================== */
.adash-org-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: center; }
.adash-radar { max-width: 100%; justify-self: center; }
.adash-org-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* 分野名・帯・値・人数を1行に収める。折り返すと読めなくなるため幅を確保する。 */
.adash-omrow {
	display: grid; grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) 48px 68px;
	gap: 12px; align-items: center;
}
.adash-omlabel { font-size: 0.8125rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adash-omtrack { height: 8px; border-radius: 999px; background: var(--bg-soft, #eef1f6); overflow: hidden; }
.adash-omtrack span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.adash-omrow.is-weak .adash-omtrack span { background: linear-gradient(90deg, #df1b41, #ff7a52); }
.adash-omval { font-size: 0.8125rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.adash-omrow.is-weak .adash-omval { color: var(--danger, #df1b41); }
.adash-omsub { font-size: 0.6875rem; color: var(--muted); text-align: right; white-space: nowrap; }
.adash-omrow.is-weak .adash-omsub { color: var(--danger, #df1b41); }
.adash-omfoot { margin: 4px 0 0; font-size: 0.6875rem; color: var(--muted); text-align: right; }

.adash-totals {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px;
	margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.adash-totals span { display: flex; flex-direction: column; gap: 2px; }
.adash-totals b { font-size: 1.25rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adash-totals small { font-size: 0.6875rem; color: var(--muted); }

.adash-row { cursor: pointer; }
.adash-row:hover { background: var(--bg-soft, #f7f8fb); }
.adash-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.adash-goal-src { display: block; font-size: 0.625rem; color: var(--muted); font-weight: 400; }

/* 受講者ひとりの詳細 */
.fse-modal.is-wide { width: min(760px, 100%); padding: 0; }
.ld-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.ld-head h3 { margin: 0; font-size: 1.0625rem; }
.ld-sub { margin: 4px 0 0; font-size: 0.75rem; color: var(--muted); }
.ld-close {
	margin-left: auto; appearance: none; border: 0; background: none; cursor: pointer;
	font-size: 1.375rem; line-height: 1; color: var(--muted); padding: 0 4px;
}
.ld-close:hover { color: var(--ink); }
.ld-kpi {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px;
	padding: 16px 22px; background: var(--bg-soft, #f6f9fc); border-bottom: 1px solid var(--line);
}
.ld-kpi div { display: flex; flex-direction: column; gap: 2px; }
.ld-kpi span { font-size: 0.6875rem; color: var(--muted); }
.ld-kpi b { font-size: 1.125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ld-kpi b small { display: block; font-size: 0.625rem; font-weight: 400; color: var(--muted); margin-top: 1px; }
.ld-body { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 20px 22px; }
.ld-body h4 { margin: 0 0 10px; font-size: 0.8125rem; color: var(--ink); }
.ld-side h4 + h4 { margin-top: 18px; }
.ld-note { margin: 0 0 8px; font-size: 0.8125rem; line-height: 1.8; color: var(--body); }
.ld-note .is-bad { color: var(--danger, #df1b41); }
.ld-mocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-mocks li {
	display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
	font-size: 0.8125rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
}
.ld-mocks b { font-variant-numeric: tabular-nums; }
.ld-actions { display: flex; justify-content: flex-end; padding: 0 22px 20px; }

@media (max-width: 900px) {
	.adash-org-body { grid-template-columns: 1fr; }
	.adash-omrow { grid-template-columns: minmax(100px, 1fr) 44px 60px; row-gap: 4px; }
	.adash-omtrack { grid-column: 1 / -1; grid-row: 2; }
	.adash-radar { justify-self: center; }
	.ld-body { grid-template-columns: 1fr; }
	.ld-radar-wrap { justify-self: center; }
}

/* ==========================================================================
   組織管理
   毎日見るのは一覧。追加操作は必要なときだけ開く。
   ========================================================================== */
.org-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 18px; }
.org-toggle {
	appearance: none; cursor: pointer; font: inherit;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px; border-radius: 999px;
	border: 1px solid var(--line); background: #fff;
	font-size: 0.8125rem; font-weight: 700; color: var(--ink);
}
.org-toggle:hover { border-color: var(--accent); color: var(--accent); }
.org-toggle.is-open { border-color: var(--accent); color: var(--accent); background: rgba(99,91,255,.06); }
.org-toggle .fse-icon { width: 17px; height: 17px; color: var(--accent); }

.org-panel { margin-bottom: 18px; border-color: rgba(99,91,255,.3); }
.org-panel[hidden] { display: none; }
.org-panel-lead { font-size: 0.8125rem; margin: 0 0 14px; }
.org-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.org-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

.org-list-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.org-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.org-row-actions { white-space: nowrap; }
.org-row-actions .btn { padding: 4px 12px !important; font-size: 0.75rem !important; }
tr.is-suspended { background: var(--bg-soft, #f7f8fb); }
tr.is-suspended td:first-child, tr.is-suspended td:nth-child(2) { opacity: .6; }

/* 受講者一覧の行が押せることを示す（管理者ダッシュボード） */
.adash-row td:first-child { position: relative; }
.adash-row td:last-child::after {
	content: ""; display: inline-block; margin-left: 10px; vertical-align: middle;
	width: 6px; height: 6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(-45deg); opacity: .5;
}
.adash-row:hover td:last-child::after { border-color: var(--accent); opacity: 1; }

/* 追加操作のモーダル（既存パネルをそのまま入れて使う） */
.fse-modal.org-modal { padding: 0; }
/* パネル側でスクロールさせると、はみ出す吹き出し（ツールチップ）が切れる。
   スクロールは背景側に持たせ、パネルは切らない。 */
.fse-modal.org-modal .org-panel {
	margin: 0; border: 0; border-radius: 16px; box-shadow: none; overflow: visible;
}
.fse-modal.org-modal .org-panel[hidden] { display: none; }

/* ==========================================================================
   LP（申し込み前に、何ができるのかを具体的に見せる）
   ========================================================================== */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head .eyebrow {
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px;
}
.section-head h2 { margin: 0; }
/* 中央寄せの説明文は、行の長さが揃わないと最終行が1〜2文字だけ残って不格好になる。
   balance で行を均し、幅も詰めて自然な位置で折り返させる。 */
.section-lead {
	margin: 14px auto 0;
	max-width: 34em;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--muted);
	text-wrap: balance;
	line-break: strict;
	word-break: normal;
	overflow-wrap: normal;
}
.lp-alt { background: var(--surface, #f6f9fc); }

/* 機能の説明と画面例を左右に並べる */
.lp-split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px; align-items: center; margin-bottom: 64px;
}
.lp-split:last-child { margin-bottom: 0; }
.lp-split.is-reverse .lp-split-visual { order: 2; }
.lp-split-text h3 { margin: 0 0 12px; font-size: 1.375rem; }
.lp-split-text > p { margin: 0; font-size: 0.9375rem; line-height: 1.9; color: var(--body); }
.lp-checks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-checks li {
	position: relative; padding-left: 28px; font-size: 0.875rem; line-height: 1.8; color: var(--body);
}
.lp-checks li::before {
	content: ""; position: absolute; left: 4px; top: 8px;
	width: 6px; height: 11px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
}

/* 画面例の枠 */
.lp-shot {
	background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(10, 37, 64, .10);
}
.lp-shot-head {
	display: flex; align-items: center; gap: 6px; padding: 10px 14px;
	background: var(--surface, #f6f9fc); border-bottom: 1px solid var(--line);
}
.lp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.lp-shot-title { margin-left: 8px; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.lp-shot-body { padding: 20px; }
.lp-radar { width: 100%; height: auto; display: block; }
.lp-radar-label { font-size: 9px; fill: var(--muted); }

.lp-shot-pred { text-align: center; }
.lp-gauge {
	width: 132px; height: 132px; margin: 4px auto 0; border-radius: 50%;
	background: conic-gradient(var(--accent) 68%, var(--surface-2) 0);
	display: grid; place-items: center;
}
.lp-gauge-inner {
	width: 104px; height: 104px; background: #fff; border-radius: 50%;
	display: grid; place-items: center; line-height: 1;
}
.lp-gauge-inner b { font-size: 2rem; font-weight: 800; color: var(--ink); }
.lp-gauge-inner span { font-size: 0.75rem; color: var(--muted); }
.lp-gauge-cap { margin: 10px 0 18px; font-size: 0.75rem; color: var(--muted); }
.lp-act { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.lp-act strong { display: block; margin: 8px 0 4px; font-size: 0.9375rem; color: var(--ink); }
.lp-act p { margin: 0 0 10px; font-size: 0.8125rem; color: var(--muted); }
.lp-act p b { color: var(--ink); }
.lp-act-bar { position: relative; height: 8px; border-radius: 999px; background: var(--surface-2); }
.lp-act-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.lp-act-bar i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .45; }

.lp-shot-today { display: flex; align-items: center; gap: 18px; }
.lp-ring {
	width: 86px; height: 86px; flex: none; border-radius: 50%;
	background: conic-gradient(var(--accent) 70%, var(--surface-2) 0);
	display: grid; place-items: center;
}
.lp-ring span {
	width: 66px; height: 66px; background: #fff; border-radius: 50%;
	display: grid; place-items: center; font-size: 0.75rem; color: var(--muted);
}
.lp-ring b { font-size: 1.25rem; color: var(--ink); }
.lp-today-txt strong { display: block; font-size: 0.9375rem; color: var(--ink); }
.lp-today-txt p { margin: 4px 0 10px; font-size: 0.75rem; line-height: 1.7; color: var(--muted); }
.lp-btn {
	display: inline-block; padding: 8px 16px; border-radius: 8px;
	background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700;
}

.lp-fgrid .feature-card h4 { margin: 12px 0 8px; font-size: 1rem; }
.lp-fgrid .feature-card p { margin: 0; font-size: 0.8125rem; line-height: 1.85; color: var(--muted); }
.lp-fgrid .feature-icon {
	width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
	background: rgba(99, 91, 255, .1); color: var(--accent); font-weight: 800; font-size: 1rem;
}

/* 管理者向け */
.lp-admin { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lp-admin-alert { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.lp-admin-alert-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; font-size: 0.875rem; }
.lp-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.lp-table th, .lp-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.lp-table th { font-size: 0.6875rem; color: var(--muted); font-weight: 700; }
.lp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lp-bad { color: var(--danger, #df1b41); font-weight: 700; }
.lp-warn { color: var(--warning); font-weight: 700; }
.lp-admin-points { display: grid; gap: 18px; }
.lp-point h4 { margin: 0 0 6px; font-size: 0.9375rem; color: var(--ink); }
.lp-point p { margin: 0; font-size: 0.8125rem; line-height: 1.85; color: var(--muted); }

/* 導入の流れ */
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.lp-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.lp-step-no {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	background: var(--accent); color: #fff; font-weight: 800; font-size: 0.9375rem; margin-bottom: 14px;
}
.lp-step h4 { margin: 0 0 8px; font-size: 1rem; }
.lp-step p { margin: 0; font-size: 0.8125rem; line-height: 1.85; color: var(--muted); }

/* FAQ */
.lp-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.lp-faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0; }
.lp-faq summary {
	cursor: pointer; padding: 16px 44px 16px 18px; font-size: 0.9375rem; font-weight: 700; color: var(--ink);
	list-style: none; position: relative;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
	content: ""; position: absolute; right: 20px; top: 22px;
	width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg); transition: transform .18s;
}
.lp-faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.lp-faq p { margin: 0; padding: 0 18px 18px; font-size: 0.875rem; line-height: 1.9; color: var(--body); }

@media (max-width: 900px) {
	.lp-split { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
	.lp-split.is-reverse .lp-split-visual { order: 0; }
	.lp-admin { grid-template-columns: 1fr; gap: 24px; }
}


/* ==========================================================================
   LP 追加分（課題の対比・AI・組織集計）
   ========================================================================== */
/* 日本語の行末処理。禁則を効かせ、句読点や括弧で不自然に折り返さないようにする。 */
/* 日本語の行末処理。禁則を効かせ、句読点や括弧で不自然に折り返さないようにする。
   左揃えの本文は pretty（最終行が極端に短くなるのを避ける）。 */
.lp-checks li, .lp-voices p, .lp-point p, .lp-step p,
.lp-aicard p, .lp-faq p, .lp-split-text > p, .feature-card p {
	line-break: strict; word-break: normal; overflow-wrap: normal;
	text-wrap: pretty;
}
.section-head h2 { text-wrap: balance; }

/* 日本語の折り返しを文節単位にする。
   スマホ幅で「ください。」が「くだ／さい。」に、「お試し」が「お／試し」に割れて
   読みにくかった（施主指摘 2026-08-28）。
   word-break: auto-phrase はブラウザが文節を判定して折り返す指定で、
   未対応のブラウザでは従来どおりの折り返しに戻るだけなので安全に足せる。
   見出しは balance で行の長さを均し、本文は pretty で最終行が1文字だけ残るのを防ぐ。 */
.hero h1,
.section-head h2,
.lp-item h2, .lp-item h3, .lp-item h4,
.lp-reveal h2, .lp-reveal h3, .lp-reveal h4,
.card h2, .card h3 {
	line-break: strict;
	word-break: auto-phrase;
	text-wrap: balance;
}
.hero-sub,
.section-lead,
.lp-item > p,
.card > p {
	line-break: strict;
	word-break: auto-phrase;
	text-wrap: pretty;
}

/* LP本文の折り返し（2026-09-01 施主指摘）。

   word-break: auto-phrase は Safari が未対応で、iPhone では
   「受験/する」のように語の途中で割れていた。
   そこで本文に <wbr>（文節の切れ目。BudouX で機械的に付与）を埋め込み、
   keep-all で「その位置でだけ折り返す」ようにする。
   これはどのブラウザでも同じように効く。
   長すぎる文節だけは overflow-wrap で逃がし、はみ出させない。

   pretty は外す。3〜4行の短い説明文にかけると、最終行を長くしようとして
   どの行も右端に届かず、文の途中で改行されているように見えるため。 */
.hero h1,
.hero-sub,
.section-lead,
.lp-item h2, .lp-item h3, .lp-item h4,
.lp-step > p,
.feature-card p,
.lp-point p,
.lp-plan li,
.lp-ai3-txt p,
.lp-flow4 figcaption p,
.lp-price-note,
.lp-price-year,
.lp-price-list li,
.lp-price-foot,
.lp-maker-txt p,
.lp-maker li,
.lp-realshot figcaption,
.lp-voices p,
.lp-faq summary,
.lp-faq p,
.lp-split-text p,
.lp-ainote {
	line-break: strict;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: auto;
}

@media (max-width: 700px) { .lp-br { display: none; } }

/* 課題 → 導入後 の対比 */
.lp-why { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 20px; align-items: start; }
.lp-why-col { min-width: 0; }
.lp-why-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lp-why-head h3 { margin: 0; font-size: 1.0625rem; }
.lp-why-tag {
	font-size: 0.625rem; font-weight: 800; letter-spacing: .06em;
	padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--body);
}
.lp-why-tag.is-accent { background: var(--accent); color: #fff; }
.lp-why-arrow { display: grid; place-items: center; align-self: center; height: 100%; }
.lp-why-arrow span {
	display: block; width: 12px; height: 12px;
	border-right: 3px solid var(--border-strong); border-bottom: 3px solid var(--border-strong); transform: rotate(-45deg);
}

/* いまの状態（台帳） */
.lp-ledger { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.lp-ledger-head {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border-strong);
	font-size: 0.75rem; font-weight: 700; color: var(--muted);
}
.lp-ledger-note { font-weight: 400; color: var(--warning); }
.lp-ledger-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.lp-ledger-table th, .lp-ledger-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.lp-ledger-table th { font-size: 0.6875rem; color: var(--body); font-weight: 700; background: var(--surface); }
.lp-ledger-table tr:last-child td { border-bottom: 0; }
.lp-q { color: var(--muted); font-weight: 800; }

.lp-voices { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-voices li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.lp-voices.is-after li { border-color: rgba(99, 91, 255, .25); background: rgba(99, 91, 255, .03); }
.lp-voices p { margin: 0; font-size: 0.8125rem; line-height: 1.75; color: var(--ink); }
.lp-voices span { display: block; margin-top: 5px; font-size: 0.6875rem; color: var(--muted); }

/* 導入後の画面例 */
.lp-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 0.8125rem; }
.lp-alert-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lp-alert-list li {
	display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
	font-size: 0.75rem; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.lp-alert-list em { font-style: normal; color: var(--muted); }
.lp-alert-list b { color: var(--danger, #df1b41); }
.lp-mini-bars { display: flex; flex-direction: column; gap: 8px; }
.lp-mini-bars div { display: grid; grid-template-columns: 84px 1fr 38px; gap: 10px; align-items: center; font-size: 0.75rem; }
.lp-mini-bars i { display: block; height: 7px; border-radius: 999px; background: var(--surface-2); }
.lp-mini-bars b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.lp-mini-bars .is-weak b { background: linear-gradient(90deg, #df1b41, #ff7a52); }
.lp-mini-bars em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* AI の節 */
.lp-aicard { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.lp-aitag {
	display: inline-block; font-size: 0.625rem; font-weight: 800; letter-spacing: .06em;
	padding: 5px 12px; border-radius: 999px; background: rgba(99, 91, 255, .1); color: var(--accent);
}
.lp-aicard h4 { margin: 14px 0 10px; font-size: 1.0625rem; }
.lp-aicard p { margin: 0; font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
.lp-aicard p b { color: var(--ink); }
.lp-ainote { margin: 24px 0 0; text-align: center; font-size: 0.6875rem; color: var(--muted); }

/* 組織の得意・苦手 */
.lp-orgbars { display: flex; flex-direction: column; gap: 10px; }
.lp-orgbars div { display: grid; grid-template-columns: 116px 1fr 40px 56px; gap: 10px; align-items: center; font-size: 0.75rem; }
.lp-orgbars i { display: block; height: 8px; border-radius: 999px; background: #eef1f6; }
.lp-orgbars b { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #635BFF, #8b84ff); }
.lp-orgbars .is-weak b { background: linear-gradient(90deg, #df1b41, #ff7a52); }
.lp-orgbars em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lp-orgbars .is-weak em { color: var(--danger, #df1b41); }
.lp-orgbars small { color: var(--muted); text-align: right; }
.lp-orgnote { margin: 12px 0 0; font-size: 0.6875rem; color: var(--muted); text-align: right; }
.lp-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lp-admin-points { display: grid; gap: 18px; }
/* 上の .lp-admin は 900px 以下で1カラムに畳む指定より後ろにあるため、
   ここで畳み直さないと後勝ちで2カラムのままになる（施主指摘 2026-08-28）。
   スマホでは表とテキストが左右に潰れて読めなくなっていた。 */
@media (max-width: 900px) {
	.lp-admin { grid-template-columns: 1fr; gap: 24px; }
}

.lp-radar-label { font-size: 10px; fill: var(--muted); }
.lp-radar-val { font-size: 11px; font-weight: 700; fill: var(--ink); }
.lp-radar-val.is-weak { fill: var(--warning); }

@media (max-width: 900px) {
	.lp-why { grid-template-columns: 1fr; gap: 28px; }
	.lp-why-arrow { height: auto; }
	.lp-why-arrow span { transform: rotate(45deg); }
	.lp-orgbars div { grid-template-columns: 1fr 40px 56px; row-gap: 4px; }
	.lp-orgbars i { grid-column: 1 / -1; grid-row: 2; }
}

/* ==========================================================================
   スクロールに合わせた表示
   一度に全部出さず、読んでいる場所に視線が留まるようにする。
   ========================================================================== */
/* セクションごとに一度きり。中の要素が少しずつ遅れて現れる。
   まとめて出すと動いたことに気づかれないため、時間差をつける。 */
.lp-item {
	opacity: 0;
	transform: translateY(26px);
	will-change: opacity, transform;
}
.lp-reveal.is-in .lp-item {
	opacity: 1;
	transform: none;
	transition:
		opacity .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms),
		transform .7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}
/* 並び順に応じて少しずつ遅らせる。まとめて出すと動いたことに気づかれない。 */
.lp-reveal .lp-item:nth-child(1) { --d: 0ms; }
.lp-reveal .lp-item:nth-child(2) { --d: 90ms; }
.lp-reveal .lp-item:nth-child(3) { --d: 180ms; }
.lp-reveal .lp-item:nth-child(4) { --d: 270ms; }
.lp-reveal .lp-item:nth-child(5) { --d: 360ms; }
.lp-reveal .lp-item:nth-child(6) { --d: 450ms; }
.lp-reveal .lp-item:nth-child(n+7) { --d: 540ms; }
/* 見出しは常に最初に出す */
.lp-reveal .section-head.lp-item { --d: 0ms; }
/* 見出しはやや大きく動かして、節の切り替わりを感じさせる。 */
.lp-reveal .section-head.lp-item { transform: translateY(32px); }

/* 動きが苦手な方には演出を出さない（内容はそのまま読める） */
@media (prefers-reduced-motion: reduce) {
	.lp-item { opacity: 1 !important; transform: none !important; }
	.lp-reveal.is-in .lp-item { transition: none !important; }
}
/* JS が動かない環境でも本文が読めるようにする。
   .lp-ready は JS が付ける印で、これが無ければ非表示にしない。 */
html:not(.lp-ready) .lp-item { opacity: 1; transform: none; }

/* ページ内リンクは滑らかに移動する。
   固定ヘッダーの下に見出しが潜らないよう、着地位置をずらす。 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* 自動で送った先が、固定ヘッダの下に潜らないようにする。
 *
 * 施主ご指摘（2026-09-28・実機のiPhone）: 自動スクロールで上部の文字が切れる。
 * 88px の決め打ちにしていたが、スマートフォンではブランドの行と
 * タブの行で2段になり、ヘッダが150px近くになる。そのぶん潜っていた。
 * JS が実測してくれる高さ（--fse-appbar-h）を使う。 */
[id] { scroll-margin-top: calc(var(--fse-appbar-h, 88px) + 12px); }
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); }

/* ヒーローの画面例。文字だけだと何のサービスか伝わりにくい。 */
/* ヒーローの画面。2枚までにする。3枚重ねると後ろが読めず、飾りになってしまう。 */
.hero-shot { position: relative; margin-top: 44px; max-width: 560px; }
.hero-shot-main { position: relative; z-index: 3; max-width: 400px; }
.hero-shot-back { position: absolute; z-index: 1; width: 320px; }
.hero-shot .lp-shot { box-shadow: 0 22px 60px rgba(10, 37, 64, .16); }
.hero-shot-back .lp-shot { box-shadow: 0 14px 36px rgba(10, 37, 64, .12); }
@media (max-width: 1100px) {
	.hero-shot-back { display: none; }
	.hero-shot { margin-top: 36px; }
}

/* ヒーローは PC で2カラム。文字だけだと右が空いてもったいない。 */
@media (min-width: 1000px) {
	.hero-grid {
		display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		gap: 48px; align-items: center;
	}
	.hero-grid .hero-text { min-width: 0; }
	/* 見出しは列幅に合わせて縮める。1文字だけ次行に落ちる不格好を避ける。 */
	.hero-grid h1 {
		font-size: clamp(2rem, 3.2vw, 2.75rem);
		line-height: 1.28;
		text-wrap: balance;
		word-break: keep-all;
	}
	.hero-grid .hero-sub { font-size: 0.9375rem; max-width: 30em; }
	/* 数値は必ず横一列。折り返すと崩れて見える。 */
	.hero-grid .hero-stats {
		display: flex; flex-wrap: nowrap; gap: 26px; margin-top: 32px;
	}
	.hero-grid .hero-stats > div { min-width: 0; }
	.hero-grid .stat-number { font-size: 1.5rem; white-space: nowrap; }
	.hero-grid .stat-label { font-size: 0.6875rem; line-height: 1.5; }

	/* 手前に「今日の学習」、その左奥にレーダー。重なりは3割程度に留める。 */
	.hero-grid .hero-shot { margin-top: 0; max-width: none; min-height: 380px; }
	.hero-grid .hero-shot-main { max-width: 370px; margin: 0 0 0 auto; }
	.hero-grid .hero-shot-back { width: 330px; left: 0; top: 34px; }
}
/* 中間幅では奥の1枚を出すと窮屈になるので手前だけにする。 */
@media (min-width: 1000px) and (max-width: 1279px) {
	.hero-grid { gap: 36px; }
	.hero-grid .hero-shot-back { display: none; }
	.hero-grid .hero-shot { min-height: 0; }
	.hero-grid .hero-shot-main { margin: 0 auto; }
}

/* ログイン前の画面（申し込みなど）の簡易ヘッダー */
.appbar-public { justify-content: space-between; }
.appbar-public-login { padding: 8px 18px !important; font-size: 0.8125rem !important; }
body.app-mode .app-main-public { margin-left: 0; padding-top: calc(var(--fse-appbar-h, 72px) + 24px); }

/* ==========================================================================
   申し込み画面
   金額・内訳・同意を一画面で。契約前の方が迷わず判断できることを優先する。
   ========================================================================== */
.co { max-width: 1080px; margin: 0 auto; }
.co-head { margin-bottom: 28px; }
.co-head h2 { margin: 4px 0 0; }
.co-lead { margin: 12px 0 0; font-size: 0.875rem; line-height: 1.9; color: var(--muted); max-width: 46em; }

.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.co-main { display: flex; flex-direction: column; gap: 18px; }

.co-step { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.co-step h3 { margin: 0 0 14px; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.co-no {
	width: 24px; height: 24px; flex: none; border-radius: 50%;
	background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 800;
	display: grid; place-items: center;
}
.co-hint { margin: 8px 0 0; font-size: 0.75rem; line-height: 1.75; color: var(--muted); }

.co-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.co-plan {
	appearance: none; cursor: pointer; font: inherit; text-align: left;
	border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 16px;
	display: flex; flex-direction: column; gap: 6px;
}
.co-plan:hover { border-color: var(--accent); }
.co-plan.is-on { border-color: var(--accent); background: rgba(99, 91, 255, .05); box-shadow: inset 0 0 0 1px var(--accent); }
.co-plan-tag {
	align-self: flex-start; font-size: 0.625rem; font-weight: 800; letter-spacing: .06em;
	padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--body);
}
.co-plan.is-on .co-plan-tag { background: var(--accent); color: #fff; }
.co-plan b { font-size: 0.9375rem; color: var(--ink); }
.co-plan-desc { font-size: 0.75rem; line-height: 1.8; color: var(--muted); }

.co-cycle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 4px; background: #fff; }
.co-cyc {
	appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
	padding: 8px 22px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--muted);
}
.co-cyc.is-on { background: var(--accent); color: #fff; }

.co-seats { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.co-seat-step {
	appearance: none; width: 40px; height: 40px; flex: none; cursor: pointer;
	border: 1px solid var(--line); background: #fff; border-radius: 10px;
	font-size: 1.125rem; font-weight: 700; color: var(--ink);
}
.co-seat-step:hover { border-color: var(--accent); color: var(--accent); }
.co-seats input {
	width: 92px; height: 40px; text-align: center; font: inherit; font-size: 1.125rem; font-weight: 800;
	border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.co-seat-unit { font-size: 0.8125rem; color: var(--muted); }
.co-seat-presets { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.co-seat-presets button {
	appearance: none; border: 1px solid var(--line); background: #fff; cursor: pointer; font: inherit;
	border-radius: 999px; padding: 6px 14px; font-size: 0.75rem; color: var(--body);
}
.co-seat-presets button:hover { border-color: var(--accent); color: var(--accent); }

/* プランの上限を超える人数は選べない（2026-09-24 施主ご指摘）。
   押せないことが見て分かるようにする。押せるのに断られるのがいちばん困る。 */
.co-seat-presets button:disabled,
.co-seat-step:disabled { opacity: .38; cursor: not-allowed; }
.co-seat-presets button:disabled:hover,
.co-seat-step:disabled:hover { border-color: var(--line); color: var(--body); }

/* 上限で止めたときの説明。黙って数字が変わると戸惑うため、理由を必ず出す。 */
.co-cap-note {
	margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
	background: rgba(223, 27, 65, .07); color: var(--danger);
	font-size: 0.8125rem; line-height: 1.7;
}

/* 右側のお支払い内容 */
.co-side { position: sticky; top: 96px; }
.co-summary { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.co-summary h3 { margin: 0 0 16px; font-size: 1rem; }
.co-lines { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.co-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-line dt { font-size: 0.8125rem; color: var(--body); }
.co-line dt small { display: block; font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }
.co-line dd { margin: 0; font-size: 0.875rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-total {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.co-total span { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
/* 「初回のお支払い」の横に出す「税込」。実際に払う額だと分かるようにする
   （施主ご指示 2026-10-01）。 */
.co-total span small {
	display: inline-block; margin-left: 6px; padding: 1px 7px;
	font-size: 0.6875rem; font-weight: 700; color: var(--ink);
	background: var(--surface-2, #F0F4F8); border-radius: 999px;
}
/* 小計と消費税。品目とは少し離して、合計への流れが見えるようにする。 */
.co-line.is-sub { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.co-line.is-tax dt, .co-line.is-tax dd,
.co-line.is-sub dt, .co-line.is-sub dd { color: var(--muted); }
.co-line.is-tax dt small, .co-line.is-sub dt small { display: inline; margin-left: 4px; }
.co-total b {
	font-size: 1.375rem; font-weight: 800; color: var(--ink);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 金額が取れないとき。合計欄に長文を入れると枠が崩れるので、別の見せ方にする。 */
.co-summary.is-unavailable .co-total,
.co-summary.is-unavailable .co-agree,
.co-summary.is-unavailable .co-submit,
.co-summary.is-unavailable .co-status { display: none; }
.co-unavail {
	background: var(--surface, #f6f9fc); border-radius: 12px; padding: 18px; text-align: center;
}
.co-unavail b { display: block; font-size: 0.9375rem; color: var(--ink); }
.co-unavail p { margin: 8px 0 14px; font-size: 0.75rem; line-height: 1.85; color: var(--muted); }
.co-unavail .btn { padding: 9px 20px !important; font-size: 0.8125rem !important; }
.co-total-note { margin: 8px 0 0; font-size: 0.6875rem; line-height: 1.8; color: var(--muted); }

.co-agree { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 12px; font-size: 0.75rem; line-height: 1.8; color: var(--body); }
.co-agree input { margin-top: 3px; flex: none; }
.co-agree a { color: var(--accent); text-decoration: underline; }
.co-submit { width: 100%; padding: 14px 16px !important; font-size: 0.9375rem !important; }
.co-submit:disabled { opacity: .5; cursor: not-allowed; }
.co-status { margin: 10px 0 0; font-size: 0.6875rem; line-height: 1.8; }
.co-assure { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.co-assure li { position: relative; padding-left: 22px; font-size: 0.6875rem; line-height: 1.7; color: var(--muted); }
.co-assure li::before {
	content: ""; position: absolute; left: 3px; top: 4px;
	width: 5px; height: 9px; border-right: 2px solid var(--success, #0bb07b); border-bottom: 2px solid var(--success, #0bb07b);
	transform: rotate(45deg);
}

@media (max-width: 900px) {
	.co-grid { grid-template-columns: 1fr; }
	.co-side { position: static; }
	.co-seat-presets { margin-left: 0; width: 100%; }
}

/* 決済画面を閉じて戻ってきたとき。料金が発生していないことを先に伝える。 */
.co-notice {
	display: flex; flex-direction: column; gap: 4px;
	margin: 0 0 24px; padding: 14px 18px;
	border: 1px solid var(--warn, #e0a500); border-left-width: 4px; border-radius: 10px;
	background: rgba(224, 165, 0, .07);
}
.co-notice b { font-size: 0.875rem; color: var(--ink); }
.co-notice span { font-size: 0.75rem; line-height: 1.85; color: var(--body); }

/* 申し込み完了。この方はまだアカウントを持っていないので、
   一列に絞って「次にすること」だけが目に入るようにする。 */
.co-done { max-width: 620px; }
.co-done-card {
	background: #fff; border: 1px solid var(--line); border-radius: 16px;
	padding: 40px 36px; text-align: center;
}
.co-done-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 72px; height: 72px; margin-bottom: 20px;
	border-radius: 999px; background: rgba(11, 176, 123, .1); color: var(--success, #0bb07b);
}
.co-done-card h2 { margin: 0; font-size: 1.375rem; }
.co-done-lead {
	margin: 12px auto 0; max-width: 34em;
	font-size: 0.875rem; line-height: 1.95; color: var(--body);
}
.co-done-lead b { color: var(--ink); word-break: break-all; }

.co-done-lines {
	margin: 28px 0 0; padding: 18px 20px;
	border-radius: 12px; background: var(--surface, #f6f9fc);
	display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.co-done-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.co-done-lines dt { font-size: 0.75rem; color: var(--muted); flex: none; }
.co-done-lines dd { margin: 0; font-size: 0.8125rem; color: var(--ink); text-align: right; }
.co-done-amount { padding-top: 10px; border-top: 1px solid var(--line); }
.co-done-amount dd { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.co-done-tax { font-size: 0.6875rem; font-weight: 400; color: var(--muted); }

.co-done-next {
	list-style: none; counter-reset: co-done-step;
	margin: 28px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.co-done-next li { position: relative; padding-left: 38px; }
.co-done-next li::before {
	counter-increment: co-done-step; content: counter(co-done-step);
	position: absolute; left: 0; top: 0;
	width: 24px; height: 24px; border-radius: 999px;
	background: var(--accent); color: #fff;
	font-size: 0.75rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.co-done-next b { display: block; font-size: 0.875rem; color: var(--ink); }
.co-done-next span { display: block; margin-top: 3px; font-size: 0.75rem; line-height: 1.85; color: var(--muted); }

.co-done-go { width: 100%; margin-top: 28px; padding: 14px 16px !important; font-size: 0.9375rem !important; }
.co-done-note {
	margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
	font-size: 0.6875rem; line-height: 1.9; color: var(--muted);
}

@media (max-width: 600px) {
	.co-done-card { padding: 32px 22px; }
	.co-done-lines > div { flex-direction: column; gap: 2px; }
	.co-done-lines dd { text-align: left; }
}

/* ==========================================================================
   規約・法令表示のページ
   ========================================================================== */
.legal { max-width: 820px; margin: 0 auto; padding: 8px 0 40px; }
.legal-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.legal-head h1 { margin: 0; font-size: 1.75rem; }
.legal-lead { margin: 14px 0 0; font-size: 0.875rem; line-height: 1.9; color: var(--muted); }
.legal-sec { margin-bottom: 28px; }
.legal-sec h2 { margin: 0 0 10px; font-size: 1rem; color: var(--ink); }
.legal-sec p { margin: 0 0 10px; font-size: 0.875rem; line-height: 2; color: var(--body); }
.legal-list { margin: 10px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.legal-list li { font-size: 0.875rem; line-height: 1.95; color: var(--body); }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td {
	padding: 14px 16px; border-bottom: 1px solid var(--line);
	font-size: 0.875rem; line-height: 1.9; text-align: left; vertical-align: top;
}
.legal-table th { width: 34%; background: var(--surface, #f6f9fc); color: var(--ink); font-weight: 700; }
.legal-table td { color: var(--body); }
.legal-note { display: inline-block; margin-top: 4px; font-size: 0.75rem; color: var(--muted); }
.legal-date { margin-top: 32px; font-size: 0.75rem; color: var(--muted); text-align: right; }
@media (max-width: 640px) {
	.legal-table th, .legal-table td { display: block; width: auto; border-bottom: 0; }
	.legal-table th { border-radius: 8px 8px 0 0; }
	.legal-table td { border-bottom: 1px solid var(--line); padding-top: 10px; }
}

/* フッターの規約リンク。法令上の表示なので、どのページからも辿れるようにする。 */
.site-footer-links {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
	margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.site-footer-links a {
	font-size: 0.8125rem; color: var(--body); text-decoration: none; white-space: nowrap;
}
.site-footer-links a:hover { color: var(--accent); text-decoration: underline; }
/* サービス名は控えめに、著作権表記はさらに一段落とす。
   ここは主役ではないので、規約リンクより目立たせない。 */
.site-footer .wp-block-site-title {
	margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--body);
}
.site-footer .muted {
	margin: 0; font-size: 0.6875rem; color: var(--muted); letter-spacing: .01em;
}
@media (max-width: 560px) {
	.site-footer-links { gap: 10px 18px; }
	.site-footer-links a { font-size: 0.75rem; }
}

/* ==========================================================================
   規約などの独立ページ
   本文だけを置くと端末によっては余白がゼロになる。器を用意する。
   ========================================================================== */
.page-topbar {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--line);
}
.page-topbar-inner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-top: 14px; padding-bottom: 14px;
}
.page-topbar .brand { text-decoration: none; }
.page-topnav { display: flex; align-items: center; gap: 20px; }
.page-topnav a { font-size: 0.8125rem; color: var(--body); text-decoration: none; white-space: nowrap; }
.page-topnav a:hover { color: var(--accent); }
.page-topnav .btn { padding: 8px 18px !important; font-size: 0.8125rem !important; color: #fff; }

.page-main {
	background: var(--surface, #f6f9fc);
	padding: 48px 0 64px;
	min-height: 60vh;
}
/* 本文は白い紙の上に置く。読み物なので行長と余白を確保する。 */
.page-main .legal {
	background: #fff; border: 1px solid var(--line); border-radius: 16px;
	padding: 48px 56px; box-shadow: 0 1px 3px rgba(10, 37, 64, .04);
}
@media (max-width: 900px) {
	.page-main { padding: 28px 0 40px; }
	.page-main .legal { padding: 32px 28px; border-radius: 14px; }
	.page-topnav { gap: 14px; }
	.page-topnav a:not(.btn) { display: none; }
}
@media (max-width: 560px) {
	.page-main { padding: 16px 0 32px; }
	.page-main .legal { padding: 24px 20px; border-radius: 12px; }
	.page-main .legal-head h1 { font-size: 1.375rem; }
}

/* ログイン中はフッターのログインリンクを出さない。
   ブロックテンプレートは条件分岐が書けないので、WordPress が body に付ける
   logged-in クラスで制御する。 */
body.logged-in .site-footer-links .is-login-link { display: none; }

/* 画面の説明文。指示だけでは何のための画面か伝わらない。 */
.screen-lead {
	margin: 8px 0 0; max-width: 46em;
	font-size: 0.875rem; line-height: 1.9; color: var(--muted);
	line-break: strict; word-break: normal; text-wrap: pretty;
}

/* 日本語の折り返しは語句の単位で行う。
   既定では文字単位で折れるため「ボタ／ン」のように語の途中で切れる。
   auto-phrase は文節を見て折り返し位置を選ぶ（非対応の環境では従来どおり）。 */
.screen-lead,
.plan-headtext p,
.plan-progress-text,
.plan-goal p,
.today-sub,
.org-panel-lead,
.fse-modal-lead,
.fse-modal-note,
.dash-head .greet,
.card p.muted {
	word-break: auto-phrase;
	line-break: strict;
	text-wrap: pretty;
}

/* 入力欄が主体の画面（アカウント設定など）。
   読みやすい行長で頭打ちにしつつ、画面の中央に置く。
   カードだけを絞って左に寄せると、タブレット以上で右側だけが大きく空く。 */
.form-column { max-width: 560px; margin-inline: auto; }

/* 「選ばずに始める」で、実際に出題される類を名指しする。 */
.practice-auto-exam {
	display: inline-block; margin-left: 8px;
	padding: 3px 9px; border-radius: 999px;
	background: var(--accent, #635bff); color: #fff;
	font-size: 0.6875rem; font-weight: 700; vertical-align: middle;
}
.practice-auto-exam:empty { display: none; }

/* 選ばずに始める近道 */
.practice-auto {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	margin: 18px 0 22px; padding: 16px 20px;
	border: 1px solid rgba(99, 91, 255, .3); background: rgba(99, 91, 255, .05); border-radius: 12px;
}
.practice-auto b { display: block; font-size: 0.9375rem; color: var(--ink); }
.practice-auto p { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.75; color: var(--muted); }
.practice-auto .btn { padding: 11px 22px !important; white-space: nowrap; }
@media (max-width: 560px) {
	.practice-auto { flex-direction: column; align-items: stretch; }
	.practice-auto .btn { text-align: center; }
}
.practice-auto.is-warn { border-color: rgba(178, 107, 0, .35); background: rgba(178, 107, 0, .06); }

/* 何を解くか選ぶ（分野で選ぶ／問題集で選ぶ）。
   2つの入口を上下に並べる。切替タブにすると、もう一方があることに気づかれない。 */
.practice-pick { margin: 0 0 28px; }
.practice-pick-title {
	margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--ink);
	padding-left: 11px; border-left: 3px solid var(--accent);
}
.practice-pick-lead {
	margin: 0 0 14px; padding-left: 14px;
	font-size: 0.8125rem; line-height: 1.8; color: var(--muted);
}

/* 行き止まりの画面（権限が無い・契約が無効）。
   断りだけを大きく出すと突き放して見えるので、中央に小さくまとめ、
   次に行ける場所を1つだけ添える。 */
.screen-notice { display: flex; justify-content: center; padding: 48px 16px; }
.screen-notice-card {
	background: #fff; border: 1px solid var(--line); border-radius: 14px;
	padding: 36px 32px; max-width: 520px; width: 100%; text-align: center;
}
.screen-notice-card h2 { margin: 0; font-size: 1.25rem; color: var(--ink); }
.screen-notice-card p {
	margin: 12px 0 0; font-size: 0.875rem; line-height: 1.95; color: var(--body);
}
.screen-notice-card .btn { margin-top: 24px; padding: 12px 28px !important; }
@media (max-width: 560px) {
	.screen-notice { padding: 28px 12px; }
	.screen-notice-card { padding: 28px 20px; }
	.screen-notice-card .btn { width: 100%; text-align: center; }
}

/* ------------------------------------------------------------------
   404（お探しのページが見つからないとき）
   白い紙の上に置き、行き先を3つだけ示す。迷った人を止めない。
   ------------------------------------------------------------------ */
.notfound {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 64px 56px;
	box-shadow: 0 1px 3px rgba(10, 37, 64, .04);
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.notfound-code {
	font-size: 4.5rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--accent, #635BFF);
	margin: 0 0 8px;
}
.notfound-title {
	font-size: 1.375rem;
	line-height: 1.5;
	margin: 0 0 16px;
	color: var(--ink, #0A2540);
}
.notfound-lead {
	margin: 0 auto 28px;
	max-width: 30em;
	color: var(--body, #425466);
}
.notfound-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-bottom: 28px;
}
.notfound-help {
	margin: 0 auto;
	max-width: 34em;
	font-size: .875rem;
	line-height: 1.8;
}
@media (max-width: 900px) {
	.notfound { padding: 40px 24px; border-radius: 14px; }
	.notfound-code { font-size: 3.25rem; }
	.notfound-title { font-size: 1.125rem; }
	.notfound-actions .btn { width: 100%; justify-content: center; }
}

/* 返金申請: 受講者ごとに選ぶ一覧。
   誰を選んでいるか、その人が返金の条件を満たすかが一目で分かるようにする。 */
.rf-h { font-size: 0.9375rem; margin: 0 0 8px; }
.rf-lead { font-size: 0.8125rem; margin: 0 0 12px; line-height: 1.8; }
.rf-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.rf-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.rf-item:hover { border-color: var(--accent, #635bff); }
.rf-item:has(input:checked) { border-color: var(--accent, #635bff); background: rgba(99,91,255,.05); }
.rf-item input { margin-top: 3px; flex: none; }
.rf-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rf-name { font-weight: 700; font-size: 0.9375rem; }
.rf-sub { font-size: 0.75rem; color: var(--muted); }
.rf-stat { font-size: 0.8125rem; }
.rf-exam { font-size: 0.8125rem; }

/* 条件を満たしていない方は選べない（施主ご指示 2026-09-25）。
   「選べるが、あとで対象外と言われる」のがいちばん困るため、
   警告ではなく押せない形にする。理由はすぐ下に出す。 */
.rf-item.is-locked { opacity: .72; cursor: not-allowed; background: var(--surface); }
.rf-item.is-locked input[type="checkbox"] { cursor: not-allowed; }
.rf-item.is-locked .rf-name { color: var(--muted); }

/* 返金条件の判定（規約 第4条）。
   「対象外です」だけでは納得できない。どの月が・なぜ足りないのかを開いて見せる。 */
.rf-judge { display: block; margin-top: 8px; }
.rf-judge-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: 0.75rem; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--body);
}
.rf-judge.is-ok .rf-judge-toggle { border-color: rgba(11,176,123,.45); color: #0a6b4a; background: rgba(11,176,123,.07); }
.rf-judge.is-ng .rf-judge-toggle { border-color: rgba(223,27,65,.40); color: var(--danger); background: rgba(223,27,65,.05); }
.rf-judge-more { font-weight: 400; color: var(--muted); }
.rf-judge-toggle.is-open .rf-judge-more { text-decoration: underline; }
.rf-judge-body { display: block; margin-top: 10px; }
.rf-judge-reasons { display: block; margin-bottom: 8px; }
.rf-judge-reasons span { display: block; font-size: 0.75rem; color: var(--danger); line-height: 1.7; }
/* 月が多いと縦に長い。枠だけ横に送って、表そのものは崩さない。 */
.rf-judge-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rf-judge-table table { border-collapse: collapse; width: 100%; min-width: 440px; font-size: 0.75rem; background: #fff; }
.rf-judge-table th, .rf-judge-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; white-space: nowrap; }
.rf-judge-table th { background: var(--surface-2); font-weight: 700; }
.rf-judge-table tr.is-ng td { background: rgba(223,27,65,.05); }
.rf-judge-table tr.is-ng td:last-child { color: var(--danger); font-weight: 800; }
.rf-judge-table tr.is-ok td:last-child { color: #0a6b4a; font-weight: 800; }
.rf-ok { color: #0b7a55; }
.rf-ng { color: #b4213c; font-weight: 700; }
.rf-warn { color: #9a6200; }
.rf-total { font-size: 0.8125rem; margin-top: 10px; }
.rf-modal-names { display: block; font-size: 0.8125rem; font-weight: 400; margin-top: 4px; }

/* 初回の受験設定モーダル。受ける試験を選び、分かれば試験日も入れてもらう。 */
.fr-opts { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.fr-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.fr-opt input { margin-top: 3px; flex: none; }
.fr-opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-opt-name { font-weight: 700; }
.fr-opt-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.7; }
.fr-opts { max-height: 46vh; overflow-y: auto; }
.fr-opt:hover { border-color: var(--accent, #635bff); }
.fr-opt:has(input:checked) { border-color: var(--accent, #635bff); background: rgba(99,91,255,.05); }
.fr-date { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.fr-date label { display: block; font-size: 0.8125rem; font-weight: 700; margin-bottom: 6px; }
.fr-date input { width: 100%; max-width: 220px; }
.fr-err { color: var(--danger, #df1b41); font-weight: 700; margin-top: 10px; }

/* 本試験の結果（受講者の設定・受講者詳細・返金申請の3か所で使う共通部品） */
.ex-h { font-size: 0.9375rem; margin: 0 0 8px; }
.ex-lead { font-size: 0.8125rem; line-height: 1.8; margin: 0 0 12px; }
.ex-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ex-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 0.8125rem;
}
.ex-date { font-variant-numeric: tabular-nums; }
.ex-class { color: var(--muted); }
.ex-ok { color: #0b7a55; font-weight: 700; }
.ex-ng { color: #b4213c; font-weight: 700; }
.ex-note { color: var(--muted); }
/* 受験の記録を直すボタン。
   もとは下線付きの小さな文字で、押せることが伝わらなかった（施主ご指摘 2026-09-05）。
   枠と背景を付けて、他の操作ボタンと同じ作法に揃える。 */
.ex-edit {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border: 1px solid var(--brand, #4f46e5); border-radius: 8px;
  background: #fff; color: var(--brand, #4f46e5);
  font-size: 0.75rem; font-weight: 700; line-height: 1; cursor: pointer;
}
.ex-edit::before { content: "✎"; font-size: 0.8125rem; }
.ex-edit:hover { background: var(--brand, #4f46e5); color: #fff; }
.ex-edit:focus-visible { outline: 2px solid var(--brand, #4f46e5); outline-offset: 2px; }
.ex-empty { font-size: 0.8125rem; margin: 0 0 12px; }
.ex-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ex-form .select, .ex-form input[type="date"] { min-width: 130px; }
.ex-msg { font-size: 0.8125rem; margin: 8px 0 0; }
.ld-exam { margin-top: 8px; }
/* 返金申請の「結果を登録する」 */
.rf-reg {
  margin-left: 8px; background: none; border: 0; padding: 0;
  color: var(--accent, #635bff); font-size: 0.8125rem; cursor: pointer; text-decoration: underline;
}

/* 日付入力（試験日など）。
   iOS Safari は input[type=date] を独自に描くため、指定が足りないと
   高さが潰れて灰色の帯のように見える。見た目を他の入力欄とそろえる。 */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 240px;
  /* iOS は内容の高さで潰れるので、最低の高さを与える（指で押せる大きさ）。 */
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, #fff);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
}
input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, .15);
}
/* 値の部分。iOS では既定で中央寄せになり、欄の中で浮いて見える。 */
input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
  min-height: 1.4em;
}
/* 未入力のとき、iOS は薄い文字で年/月/日を出す。読める濃さにする。 */
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper { color: var(--ink); }
input[type="date"]:invalid::-webkit-datetime-edit { color: var(--muted); }
/* カレンダーのアイコン。
   iOS Safari は標準のアイコンを出さないため、指定するだけでは
   「押すと日付を選べる」ことが伝わらない。自前のアイコンを背景として描き、
   どの端末でも同じ見た目にする。 */
input[type="date"] {
  /* 右端を「押す場所」として見せる。
     アイコンだけでは弱いので、色を敷いて区切り線を引き、ボタンらしくする。 */
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18'/%3E%3C/svg%3E"),
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(rgba(99, 91, 255, .10), rgba(99, 91, 255, .10));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 14px center, right 46px center, right 0 center;
  background-size: 20px 20px, 1px 100%, 46px 100%;
  padding-right: 58px;
  cursor: pointer;
}
/* 標準のアイコンは隠す（自前のものと二重になるため）。
   ただし当たり判定は残し、その場所を押せば従来どおり選べるようにする。 */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
}
/* 押せることが分かるように、触れたときに反応させる。 */
input[type="date"]:hover { border-color: var(--accent); }
/* 押せる場所を広く取る（右端のどこを押しても開く）。 */
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 46px;
  margin-right: -12px;
}
/* モーダル内の日付欄は幅いっぱいにしない（隣の項目と並ぶため） */
.ex-form input[type="date"] { max-width: 170px; min-width: 150px; }

/* フッターの著作権表記。会社サイトへ繋ぐ。
   本文と同じ色にすると気づかれないので、下線で押せることを示す。 */
.site-footer-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer-copy a:hover { color: var(--accent); }

/* 解約の導線。必ず見つかる場所に置きつつ、誤って押されない見た目にする。
   塗りつぶしの赤にすると画面で一番強い要素になってしまうので、枠線で示す。
   押したあとに確認のモーダルが出るので、ここでは「危険な操作だ」と伝われば足りる。 */
.bl-cancel { margin-top: 16px; }
.bl-cancel-lead { font-size: 0.8125rem; line-height: 1.9; margin: 0 0 14px; }
.bl-cancel-act { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-cancel {
  background: #fff;
  color: var(--danger, #df1b41);
  border: 1px solid var(--danger, #df1b41);
}
.btn-cancel:hover {
  background: var(--danger, #df1b41);
  color: #fff;
}
.btn-cancel:focus-visible {
  outline: 2px solid var(--danger, #df1b41);
  outline-offset: 2px;
}

/* ============================================================
   可読性・視認性の底上げ（2026-08-27）

   指摘: 明るい場所やPCのディスプレイで「エリア分けが見づらい」
        「全部読めば分かるが、パッと見でどこに何があるか分からない」。

   方針は3つだけ。演出は足さない。
     1. 区画を囲う  … カードの外周を、地と確実に見分けられる線にする
     2. 見出しを立てる… 見出しの下に罫線を引き、離れても段落の頭が分かる
     3. 文字を濃く  … 補足文の色を本文相当まで上げる

   ファイル末尾に置くのは、既存の指定を打ち消すのではなく上書きするため。
   ============================================================ */

/* 1. 区画を囲う ------------------------------------------------ */
/* 地（--surface）とカードの白の差は 1.13。線が無いと境界が消えるので、
   外周は必ず 3:1 以上の線で閉じる。 */
.card,
.kpi,
.hist-row,
.category-card,
.mres-card {
	border-color: var(--border-strong);
}

/* カード内部の仕切りは細い線のまま。外周と同じ濃さにすると、
   どこが区画の切れ目なのか分からなくなる。 */
.card .bar-row + .bar-row,
.hist-body,
.hist-q + .hist-q {
	border-color: var(--border);
}

/* 2. 見出しを立てる -------------------------------------------- */
/* 画面のタイトル。離れて見て最初に目に入るのはここ。 */
.dash-head h2 {
	font-size: 2rem;
	letter-spacing: -0.02em;
}
.dash-head .greet {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--accent);
	text-transform: none;
}

/* カードの中の見出し。下に罫線を引いて「ここから下がこの話」を示す。 */
.card > h3,
.card > .panel-title,
.card > .ex-h {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 10px;
	padding-left: 11px;
	border-bottom: 1px solid var(--border);
}
/* 見出しの頭に縦罫。行頭がそろい、見出しと本文が一目で分かれる。 */
.card > h3::before,
.card > .panel-title::before,
.card > .ex-h::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 12px;
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
}
.card > .panel-title h3 {
	margin: 0;
	padding: 0;
	border: 0;
}
.card > .panel-title h3::before { content: none; }

/* 3. 文字を濃く ------------------------------------------------ */
/* 画面の説明文は読ませる文章。補足色（--muted）だと屋外で沈む。 */
.screen-lead {
	color: var(--body);
}
/* 数値の見出しラベル。全部大文字＋字間だと日本語混じりで読みにくい。 */
.kpi-label {
	text-transform: none;
	letter-spacing: .02em;
	color: var(--body);
}

/* 4. 操作できるものは操作できるように見せる ---------------------- */
/* --brand が未定義でフォーカス枠が出ていなかったため、ここで担保する。 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 対象の類・切り替え。説明文の下に置き、ひとまとまりに見せる。 */
.exam-scope { margin-top: 14px; }
.exam-switch { margin-top: 8px; }
.exam-scope-note { margin-top: 8px; }

/* ------------------------------------------------------------
   LP（ランディングページ）の視認性
   受講者画面と同じ基準（区画は囲う／文字は濃く）を当てる。
   LP は白背景の上に白いパネルを重ねる構成が多く、
   線が無いと「どこからどこまでが1つの図か」が読み取れない。
   ------------------------------------------------------------ */
.lp-ledger,
.lp-mock,
.lp-panel,
.lp-split-visual > *,
.lp-compare-card {
	border-color: var(--border-strong);
}
/* 表の行の区切りは細いまま（外周と同じ濃さにすると罫線だらけになる） */
.lp-ledger-table th,
.lp-ledger-table td {
	border-bottom-color: var(--border);
}
/* セクションのリード文。読ませる文章なので本文色に上げる。 */
.section-lead,
.section-head p,
.lp-lead,
.hero-sub,
.lp-fgrid .feature-card p,
.lp-step p,
.lp-shot-title {
	color: var(--body);
}
/* 数値の下のラベル。ここが読めないと数値そのものの意味が伝わらない。 */
.stat-label,
.hero-stats small,
.hero-stat-label {
	color: var(--body);
}
/* 画面例・手順・機能のカード。白の上に白なので、線が無いと図の範囲が読めない。 */
.lp-shot,
.lp-step,
.price-card {
	border: 1px solid var(--border-strong);
}
/* 機能カードは、もともと背景も角丸も内側の余白も持たない素のブロックだった。
   そこへ線だけを足したため、文字が枠に接した素っ気ない四角になっていた。
   他のLPカード（.lp-step）と同じ作りに揃える（2026-08-27 修正）。 */
.lp-fgrid .feature-card {
	background: #fff;
	border: 1px solid var(--border-strong);
	border-radius: 14px;
	padding: 22px;
}
/* 料金の行間の区切り。金額の対応関係が分かるように、行を明示する。 */
.price-card .price-row + .price-row {
	border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------
   管理者画面（管理者ダッシュボード・組織管理・契約課金・返金申請）
   一覧表が主体の画面なので、行と列が追えることを最優先にする。

   表の入れ物は `.history-table`（div）で、中に <table> が入る。
   管理者ダッシュボードだけ `.adash-table` が併記されている。
   ------------------------------------------------------------ */
/* 表の外周を閉じる。中の行の区切りは細いまま。 */
.history-table table {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.history-table th {
	color: var(--body);
	background: var(--surface);
	border-bottom: 1px solid var(--border-strong);
}
.history-table td {
	border-bottom: 1px solid var(--border);
}
/* 行をまたいで目で追えるように、1行おきに敷く。
   9列あって右端（状態）が氏名から遠いため、行を見失いやすい。
   色を薄くしすぎると意味を成さないので、地と同じ濃さをそのまま使う。 */
.history-table tbody tr:nth-child(even) {
	background: var(--surface);
}
/* 押せる行であることが分かるように、重ねたときははっきり変える。 */
.history-table tbody tr:hover,
.adash-row:hover {
	background: var(--accent-bg);
}
/* 人数・正答率・日数を縦に比べる画面なので、数字の桁をそろえる。 */
.history-table td {
	font-variant-numeric: tabular-nums;
}
/* 進捗の溝。地と同じ明るさだと、どこまで伸びているか分からない。 */
.adash-omtrack {
	background: var(--surface-2);
}

/* 無効化した受講者の状態バッジ。在籍者と取り違えないよう、他と色を分ける。 */
.badge-muted {
	background: var(--surface-2);
	color: var(--body);
	border: 1px solid var(--border-strong);
}

/* オフラインで出題していることを示す帯。解き直しの帯と作りは同じで、色だけ変える。 */
.quiz-replay.is-offline {
	border-color: var(--warning);
	background: var(--warning-bg);
}
.quiz-replay.is-offline .quiz-replay-tag {
	background: var(--warning);
	color: #fff;
}

/* 申込画面：銀行振込のご案内。カード決済の導線を邪魔しないよう、控えめに置く。 */
.co-bank { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-bank-title { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.co-bank-text { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.85; color: var(--muted);
	line-break: strict; word-break: auto-phrase; text-wrap: pretty; }
.co-bank-btn { width: 100%; text-align: center; }

/* 銀行振込のお問い合わせフォーム。押されたときだけ開く。 */
.co-bankform { margin: 24px 0 8px; }
.co-bankform-card { padding: 24px; }
.co-bankform-card h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.co-bankform-lead { margin: 0 0 18px; font-size: 0.8125rem; line-height: 1.85; }
.co-bankform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.co-bankform-grid label,
.co-bankform-msg { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--body); }
.co-bankform-msg { margin-top: 14px; }
.co-bankform-grid .input,
.co-bankform-msg .input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
	font-size: 0.875rem; background: #fff; color: var(--ink);
}
.co-bankform-grid .input:focus,
.co-bankform-msg .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.co-req {
	margin-left: 6px; font-style: normal; font-size: 0.6875rem; font-weight: 700;
	padding: 1px 6px; border-radius: 4px; background: rgba(255,90,95,.12); color: #b3262b;
}
.co-bankform-note { margin: 14px 0 0; font-size: 0.75rem; line-height: 1.8; }
.co-bankform-err {
	margin: 12px 0 0; padding: 10px 12px; border-radius: 8px;
	background: rgba(223,27,65,.08); color: #a01029; font-size: 0.8125rem;
}
.co-bankform-actions { display: flex; gap: 10px; margin-top: 18px; }
/* 自動投稿よけ。画面には出さないが、読み上げ・タブ移動からも外す。 */
.co-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 700px) {
	.co-bankform-grid { grid-template-columns: 1fr; }
	.co-bankform-card { padding: 18px; }
	.co-bankform-actions { flex-direction: column; }
}

/* お支払い間隔。年払いの割安さが選ぶ前に伝わるよう、印を添える。
   バッジを縦に積むと、月払い側だけ高さが余って丸くつぶれてしまう（施主指摘 2026-08-28）。
   横並びにして、両方のボタンの高さを揃える。 */
.co-cycle { align-items: stretch; }
.co-cyc {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	white-space: nowrap;
}
.co-cyc-badge {
	font-size: 0.6875rem; font-weight: 700; line-height: 1;
	padding: 4px 8px; border-radius: 999px; white-space: nowrap;
	background: rgba(11,176,123,.14); color: #067855;
}
.co-cyc.is-on .co-cyc-badge { background: rgba(255,255,255,.24); color: #fff; }
/* 幅の狭い端末では、バッジを下に折り返す（横に伸びて画面からはみ出さないように）。 */
@media (max-width: 480px) {
	.co-cycle { display: flex; width: 100%; }
	.co-cyc { flex: 1 1 0; flex-direction: column; gap: 5px; padding: 8px 12px; }
}

/* お問い合わせフォームの同意チェック。 */
.co-bankform-check {
	display: flex; align-items: flex-start; gap: 9px; margin-top: 14px;
	font-size: 0.8125rem; line-height: 1.7; color: var(--body); cursor: pointer;
}
.co-bankform-check input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; }
.co-bankform-check a { color: var(--accent); }

/* WordPress のブロックテーマ既定
     :root :where(.is-layout-flow) > * { margin-block-start: 24px }
   が、固定ページ本文の直下に置いた自前のブロックにも当たっていた。
   先頭要素だけは :first-child で 0 に戻されるため、
   ヘッダーの「次」に来るヒーローや本文だけが 24px 下がり、
   ヘッダーとの間に説明のつかない白い帯ができていた（施主が原因を特定、2026-08-28）。

   theme.json の blockGap を 0 にすると、利用規約などエディタで書いた
   ページの段落間隔まで詰まってしまう。そこで、自前で組んだ要素だけを名指しで戻す。
   クラス2つぶんの詳細度になるので、既定より確実に優先される。 */
.is-layout-flow > .topbar,
.is-layout-flow > .hero,
.is-layout-flow > .section,
.is-layout-flow > .appbar,
.is-layout-flow > .app-main,
.is-layout-flow > .app-shell,
.is-layout-flow > .auth-wrap {
	margin-block-start: 0;
}

/* 初期パスワードの変更が済むまでは、背後の画面を触らせない。
   モーダルを閉じさせない指定と合わせて使う。 */
body.fse-pw-locked { overflow: hidden; }
body.fse-pw-locked .appbar,
body.fse-pw-locked .sidebar,
body.fse-pw-locked .app-main { pointer-events: none; user-select: none; }
body.fse-pw-locked .fse-modal-back { pointer-events: auto; }

/* 機能カードの補足。本文より一段落として、注意書きだと分かる大きさにする。 */
.feature-card .feature-note {
	margin: 10px 0 0; font-size: 0.75rem; line-height: 1.75; color: var(--muted);
	line-break: strict; word-break: auto-phrase; text-wrap: pretty;
}

/* 画面の先頭に置く戻る導線。
   説明文の下にテキストリンクで置くと探さないと見つからないため、
   見出しより上に、押せる大きさで置く（レビュー指摘 2026-08-28）。 */
.screen-back {
	display: inline-flex; align-items: center; gap: 6px;
	margin: 0 0 14px; padding: 7px 14px 7px 11px;
	border: 1px solid var(--line); border-radius: 999px; background: #fff;
	font-size: 0.8125rem; font-weight: 700; color: var(--body); text-decoration: none;
}
.screen-back:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.screen-back span { font-size: 0.875rem; line-height: 1; }

/* ==========================================================================
   LP の案内役（タイガーくん）
   出すのは2か所だけにする。最初のつかみ（ヒーロー）と、最後の一押し（CTA）。
   BtoB の資料として読まれる面なので、増やすと真面目さが薄れる。
   絵は飾りなので、押しても何も起きないようにしておく。
   ========================================================================== */
.lp-tiger {
	position: absolute; z-index: 4;
	object-fit: contain; object-position: bottom center;
	pointer-events: none; user-select: none;
}
/* ヒーロー: 画面のモックの手前に立たせる。
   2カラムになる幅（1000px以上）でのみ出す。狭い画面ではモックと重なるため。 */
.lp-tiger-hero { left: 0; bottom: -6px; width: 152px; height: 212px; display: none; }
@media (min-width: 1000px) { .lp-tiger-hero { display: block; } }

/* 1カラムになる幅では、画面のモックがずっと下に回るため、
   そこに立たせると最初の画面に案内役が出てこない（施主指摘 2026-08-29）。
   見出しの右が空くので、そこへ移す。
   絵は .hero-shot の中にあるので、基準をヒーロー全体に付け替える。 */
@media (max-width: 999px) {
	.hero-grid { position: relative; }
	.hero-shot { position: static; }
	.lp-tiger-hero {
		display: block;
		top: -10px; right: 2px; left: auto; bottom: auto;
		width: 76px; height: 106px;
	}
}

/* 最後のCTA: 濃紺のカードの上辺に立たせる。
   カードの中に置くと、黒い燕尾服が背景に沈んで顔だけが浮いて見える。 */
/* 上に空けた余白のぶんだけカードが下がり、そこへ案内役が立つ。
   bottom: 100% で組むと、この余白の上に浮いてしまう（絶対位置の基準は
   余白を含めた枠のため）。上端からの位置で置くほうが素直で崩れない。 */
.lp-cta-wrap { position: relative; padding-top: 110px; }
.lp-tiger-cta { left: 40px; top: 0; width: 108px; height: 132px; }
@media (max-width: 767px) {
	.lp-cta-wrap { padding-top: 80px; }
	.lp-tiger-cta { left: 14px; top: 0; width: 78px; height: 96px; }
}

/* ==========================================================================
   スマホの申し込み導線（LP）
   画面下に固定して常時見せる。ヘッダーの導線は上部にしかなく、
   下まで読み進めた人がいちど戻らないと申し込めなかったため。
   ========================================================================== */
.lp-sticky-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: none;                    /* 出すのは狭い画面だけ。JSが hidden も操作する */
	flex-direction: column; align-items: stretch; gap: 4px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(180%) blur(10px);
	border-top: 1px solid var(--border);
	box-shadow: 0 -6px 20px rgba(10, 37, 64, .10);
	transform: translateY(110%);
	transition: transform .22s ease;
}
.lp-sticky-cta.is-on { transform: translateY(0); }
.lp-sticky-cta .btn { width: 100%; justify-content: center; text-align: center; }
.lp-cta-main { display: flex; flex-direction: column; gap: 4px; }
/* 案内役はバーの内側に重ねる。
   ・外（上辺）に立たせると、スクロール中の本文にかぶさって文字を隠す
   ・横に並べるとボタンが痩せる
   どちらも避けたいので、ボタンの左側の余白に重ねる。
   文字は中央にあるので当たらない。押下は素通りさせる。
   高さはバーの上端からボタンの下端まで。はみ出さないので本文は隠れない。 */
.lp-cta-tiger {
	position: absolute; left: 14px; top: 0;
	width: 52px; height: 66px;
	object-fit: contain; object-position: bottom center;
	pointer-events: none; user-select: none;
	/* 黒い燕尾服が紫のボタンに沈むので、白いふちどりで浮かせる。 */
	filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95))
	        drop-shadow(0 0 5px rgba(255, 255, 255, .7));
}
.lp-sticky-note { font-size: 0.6875rem; color: var(--muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
	.lp-sticky-cta { transition: none; }
}

@media (max-width: 767px) {
	.lp-sticky-cta { display: flex; }
	/* 固定バーが最後の内容に重なるので、そのぶん下に余白を作る。 */
	body.has-lp-cta .site-footer,
	body.has-lp-cta .lp-foot { padding-bottom: 88px; }

	/* ヘッダーの作り直し。
	   申し込みは下のバーが常時出しているので、ヘッダーからは外す。
	   代わりに、これまで狭い画面で消えていた「ログイン」を戻す。
	   既存の利用者がスマホからログインできない状態だった。 */
	.topnav-links .btn { display: none; }
	.topnav-links a[href*="/login/"] {
		display: inline-flex; align-items: center;
		font-size: 0.8125rem; font-weight: 700; color: var(--accent);
		border: 1px solid var(--border); border-radius: 999px;
		padding: 7px 14px; line-height: 1; white-space: nowrap;
	}
}

/* ==========================================================================
   LP 追補（下出会長ご指摘 No.1/2/5/6/7/8/9 対応・2026-09-01）

   狙いは「読む量を増やさずに、分かる量を増やす」こと。
   文章を足すのではなく、対象資格はバッジ、AIの働きは実画面、
   料金は個人と法人の2枚に分けて、目で追えるようにする。
   ========================================================================== */

/* --- No.1 対象資格を一目で（ファーストビュー） --- */
.hero-quals {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.hero-quals li {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	padding: 7px 10px;
	border-radius: 999px;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	white-space: nowrap;
}
.hero-quals li.is-alt { color: #fff; background: var(--ink); border-color: var(--ink); }

/* --- No.6 個人／法人の入口 --- */
.lp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; }
.lp-plan {
	display: flex; flex-direction: column;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 28px;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.lp-plan:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(10,37,64,.08); }
.lp-plan.is-corp { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.lp-plan-tag {
	/* 親が縦並びのflexなので、指定しないと横いっぱいに伸びる。 */
	display: inline-block;
	align-self: flex-start;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--accent);
	background: rgba(99,91,255,.1);
	border-radius: 999px;
	padding: 6px 12px;
}
.lp-plan h3 { margin: 14px 0 12px; font-size: 1.25rem; }
.lp-plan ul { margin: 0 0 18px; padding-left: 1.1em; }
.lp-plan li { font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
.lp-plan li b { color: var(--ink); }
.lp-plan-go { margin-top: auto; font-size: 0.875rem; font-weight: 700; color: var(--accent); }

/* --- No.5 AIの3ステップ（実画面つき） --- */
.lp-ai3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-ai3 > li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 20px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px;
}
.lp-ai3-no {
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 12px;
	font-size: 1.125rem; font-weight: 800;
	color: #fff; background: var(--accent);
}
.lp-ai3-txt h4 { margin: 0 0 8px; font-size: 1.0625rem; }
.lp-ai3-txt h4 b { color: var(--accent); }
.lp-ai3-txt p { margin: 0; font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
/* 画像の縦を揃える。実画面は縦横比がまちまちで、そのまま貼ると
   縦長の1枚だけが行を押し広げ、説明文の横に大きな空白ができる。 */
.lp-ai3-shot { margin: 0; display: flex; justify-content: flex-end; }
.lp-ai3-shot img {
	display: block; width: auto; height: auto;
	max-width: 100%; max-height: 300px;
	border: 1px solid var(--line); border-radius: 10px;
	box-shadow: 0 6px 20px rgba(10,37,64,.07);
}
@media (max-width: 860px) {
	.lp-ai3-shot { justify-content: center; }
	.lp-ai3-shot img { max-height: 260px; }
}
@media (max-width: 860px) {
	.lp-ai3 > li { grid-template-columns: 36px minmax(0, 1fr); }
	.lp-ai3-no { width: 36px; height: 36px; font-size: 1rem; }
	.lp-ai3-shot { grid-column: 1 / -1; }
}

/* --- No.7 学習の流れ（実画面つき） --- */
.lp-flow4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }
.lp-flow4 figure { margin: 0; display: flex; flex-direction: column; }
.lp-flow4 img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--line); border-radius: 10px;
	box-shadow: 0 6px 20px rgba(10,37,64,.07);
	background: #fff;
}
.lp-flow4 figcaption { margin-top: 12px; }
.lp-flow4 .lp-flow4-no {
	display: inline-block; margin-right: 8px;
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em;
	color: #fff; background: var(--ink);
	border-radius: 999px; padding: 4px 9px;
}
.lp-flow4 figcaption b { font-size: 0.9375rem; }
.lp-flow4 figcaption p { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }

/* --- No.9 管理者画面の実物 --- */
.lp-realshot { margin: 0 0 28px; }
.lp-realshot img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--line); border-radius: 12px;
	box-shadow: 0 10px 30px rgba(10,37,64,.09);
}
.lp-realshot figcaption {
	margin-top: 10px; font-size: 0.75rem; color: var(--muted); text-align: center;
}

/* --- No.2 料金を個人／法人の2枚に --- */
/* 高さを揃える。個人と法人で書く量が違うため、揃えないと片方だけ短くなり
   「情報が足りない方」に見えてしまう。ボタンは下端で揃える。 */
.lp-price2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: stretch; }
.lp-price-card {
	background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px;
	display: flex; flex-direction: column;
}
.lp-price-card > .btn { margin-top: auto; align-self: flex-start; }
.lp-price-card.is-main { border-color: var(--accent); box-shadow: 0 10px 30px rgba(99,91,255,.1); }
.lp-price-cap { font-size: 0.8125rem; font-weight: 800; color: var(--accent); }
.lp-price-card.is-main .lp-price-cap { color: var(--accent); }
.lp-price-row { display: flex; align-items: baseline; gap: 4px; margin-top: 14px; flex-wrap: wrap; }
.lp-price-row + .lp-price-row { margin-top: 6px; }
.lp-price-row .lp-price-label { font-size: 0.8125rem; color: var(--muted); margin-right: 8px; min-width: 6.5em; }
.lp-price-note { margin: 12px 0 0; font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
.lp-price-year {
	margin: 14px 0 0; padding: 10px 12px;
	font-size: 0.8125rem; color: var(--muted);
	background: var(--surface); border-radius: 10px;
}
.lp-price-year b { color: var(--ink); }
.lp-price-list { margin: 18px 0; padding-left: 1.1em; }
.lp-price-list li { font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
.lp-price-foot { margin: 24px 0 0; font-size: 0.75rem; color: var(--muted); text-align: center; }

/* --- No.8 開発元 --- */
.lp-maker {
	background: #fff; border: 1px solid var(--line); border-radius: 16px;
	padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px;
}
.lp-maker p { margin: 0; font-size: 0.875rem; line-height: 2; color: var(--muted); }
.lp-maker p b { color: var(--ink); }
.lp-maker ul { margin: 0; padding-left: 1.1em; }
.lp-maker li { font-size: 0.8125rem; line-height: 1.9; color: var(--muted); }
.lp-maker li b { color: var(--ink); }

/* --- 料金の個人／法人タブ（2026-09-01）

   JavaScript を使わず :target だけで切り替える。
   ・何も指定が無いとき＝法人（既定）
   ・#plan-personal を指すと個人に切り替わる
   上の「個人でお使いの方」カードから直接そのタブを開けるようにするため、
   ラジオボタンではなくアンカーで実装している。 */
.lp-pricetabs { max-width: 720px; margin: 0 auto; }
.lp-tabmark { display: block; height: 0; scroll-margin-top: 90px; }
.lp-tabbar {
	display: flex; gap: 6px;
	background: var(--surface-2, #eef1f7);
	border-radius: 999px; padding: 5px; margin-bottom: 20px;
}
.lp-tabbar a {
	flex: 1 1 0; min-width: 0;
	text-align: center; text-decoration: none;
	font-size: 0.875rem; font-weight: 700; color: var(--muted);
	padding: 11px 8px; border-radius: 999px;
	transition: background .18s, color .18s, box-shadow .18s;
}
.lp-tabbar a:hover { color: var(--ink); }
/* 既定（ハッシュなし）＝法人を選択中として見せる */
.lp-tabbar a[href="#plan-corp"] {
	background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,37,64,.12);
}
.lp-panel.is-personal { display: none; }
/* 個人を指しているときだけ入れ替える */
#plan-personal:target ~ .lp-tabbar a[href="#plan-corp"] { background: transparent; color: var(--muted); box-shadow: none; }
#plan-personal:target ~ .lp-tabbar a[href="#plan-personal"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(10,37,64,.12); }
#plan-personal:target ~ .lp-panel.is-corp { display: none; }
#plan-personal:target ~ .lp-panel.is-personal { display: block; }

/* 開発元：2段落にしたので、段落の間隔だけ整える */
.lp-maker-txt p + p { margin-top: 14px; }

/* 解答後の操作欄を画面の下に貼り付ける（2026-09-04 ご指摘）

   解説が長いと「次の問題へ」が画面の外に出て、1問ごとにスクロールが要る。
   実測では画面900pxに対してボタンが1098pxの位置にあった。
   並び（正誤 → 選択肢 → 解説 → 操作）は変えずに、押したいボタンだけを手元に置く。 */
.quiz-actions.is-stuck {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: 16px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	border-top: 1px solid var(--line);
	border-radius: 12px 12px 0 0;
	box-shadow: 0 -6px 20px rgba(10, 37, 64, .08);
}
@media (max-width: 700px) {
	/* スマホは画面が狭く、貼り付けの効き目が大きい。左右いっぱいに使う。 */
	.quiz-actions.is-stuck {
		margin-left: -16px;
		margin-right: -16px;
		border-radius: 0;
	}
}

/* 契約に含まれていない類・合格して終えた類（2026-09-04 ご要望）

   一覧から消さずに、押せない見た目にして残す。
   消すと「その類は無い」ように見え、契約すれば学べることが伝わらない。
   進捗の数字も薄くする。契約外の類に0%が濃く並ぶと、
   「やっていない」のか「やれない」のかが読み取れない。 */
.category-card.is-locked {
	background: var(--surface);
	border-style: dashed;
	cursor: default;
	opacity: 0.62;
}
.category-card.is-locked:hover {
	border-color: var(--line);
	transform: none;
	box-shadow: none;
}
.category-card.is-locked .bar-fill { background: var(--muted); }
.cat-lock {
	display: inline-block;
	margin-left: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--muted);
	background: var(--surface-2, #eef1f7);
	border: 1px solid var(--line);
	vertical-align: middle;
}

/* まだ枠に余裕があって追加できる類は、押せない見た目にしない。
   「上限に達した」と同じ薄いグレーだと、増やせることが伝わらない
   （施主ご指摘 2026-09-08）。 */
.category-card.is-addable {
	background: var(--surface);
	border-style: solid;
	border-color: var(--accent);
	cursor: pointer;
	opacity: 1;
}
.category-card.is-addable:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.cat-lock-add {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

/* 保存結果の表示。以前はボタン横の小さいグレー文字だけだったため、
   ボタンが全幅ブロックだと下に折り返して見落とされていた（施主ご指摘 2026-09-08）。
   色つきの帯にして、保存できたかどうかが一目で分かるようにする。 */
.fse-save-msg {
	display: none;
	margin: 10px 0 0;
	padding: 9px 14px;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 700;
}
.fse-save-msg:empty { display: none; }
.fse-save-msg.is-pending,
.fse-save-msg.is-ok,
.fse-save-msg.is-err {
	display: block;
}
.fse-save-msg.is-pending { background: var(--surface-2, #eef1f7); color: var(--muted); }
.fse-save-msg.is-ok { background: #e6f6ec; color: #157a45; }
.fse-save-msg.is-ok::before { content: "✓ "; }
.fse-save-msg.is-err { background: #fdecec; color: #b3261e; }

/* ---- 学習する類（個人契約の類ごとのご契約）---- */
/* 契約中の類は色で、追加できる類は押せるカードで出す。
   同じ見た目にすると「いま契約しているのはどれか」が読めない。 */
.exam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exam-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px;
	background: var(--brand-50, #eef0ff); color: var(--brand-700, #3730a3);
	font-size: 0.8125rem; font-weight: 600;
}
.exam-chip.is-passed { background: #f1f5f9; color: #64748b; }
.exam-chip small { font-weight: 400; font-size: 0.75rem; }

.bl-exam-add { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line, #e2e8f0); }
.bl-exam-add h4 { margin: 0 0 4px; font-size: 0.9375rem; }

.exam-add-grid {
	display: grid; gap: 12px; margin-top: 12px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.exam-add-item {
	display: flex; flex-direction: column; gap: 6px; text-align: left;
	padding: 14px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
	background: #fff; cursor: pointer;
}
.exam-add-item:hover { border-color: var(--brand, #4f46e5); }
.exam-add-item[disabled] { opacity: 0.5; cursor: default; }
/* 演習・模試から「この類を追加する」で来たときに、どれを選べばよいか分かるようにする。 */
.exam-add-item.is-wanted { border-color: var(--brand, #4f46e5); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.exam-add-name { font-weight: 700; }
.exam-add-desc { font-size: 0.8125rem; color: var(--muted, #64748b); line-height: 1.6; }
.exam-add-go { margin-top: 4px; font-size: 0.8125rem; font-weight: 600; color: var(--brand, #4f46e5); }

/* アプリ画面のリード文の折り返し（施主ご指摘 2026-09-04）。
   LP と同じ考え方。文中に <wbr>（文節の切れ目。BudouX で機械的に付与）を
   埋め込み、keep-all で「その位置でだけ折り返す」ようにする。
   word-break: auto-phrase は Safari が未対応なので使わない。
   長すぎる文節だけ overflow-wrap で逃がし、はみ出させない。 */
.screen-lead {
	line-break: strict;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: auto;
}

/* 合格後に次の類を選んでいただくモーダル／受験の記録の修正 */
.next-exam-grid {
	display: grid; gap: 10px; margin: 12px 0;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	max-height: 320px; overflow-y: auto;
}
.next-exam-item {
	display: flex; flex-direction: column; gap: 4px; text-align: left;
	padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
	background: #fff; cursor: pointer;
}
.next-exam-item:hover { border-color: var(--brand, #4f46e5); }
.next-exam-item.is-picked {
	border-color: var(--brand, #4f46e5);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.next-exam-name { font-weight: 700; }
.next-exam-desc { font-size: 0.75rem; color: var(--muted, #64748b); line-height: 1.55; }
.next-exam-date, .ex-ed-row {
	display: flex; flex-direction: column; gap: 6px;
	margin-top: 12px; font-size: 0.8125rem; font-weight: 600;
}
.next-exam-date input, .ex-ed-row input, .ex-ed-row select {
	padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; font-weight: 400;
}

/* =========================================================================
   ランディングページ（2026-09-04 いただいたLP案13枚に合わせて作り直し）

   ・章ごとに .l3 で囲み、幅と余白をひとつの規則で決める。
     章ごとに余白を書くと、足すたびにリズムが崩れる。
   ・日本語の折り返しは <wbr>（BudouX の文節）＋ keep-all。
     word-break: auto-phrase は Safari が未対応で、iPhone で語の途中が割れる。
   ・色はLP案から拾う。濃紺 #123a8c ／ 黄 #ffc61a ／ 赤 #d7132a。
   ========================================================================= */
.l3 {
	--l3-navy: #123a8c;
	--l3-navy-d: #0d2a66;
	--l3-blue: #1b63d8;
	--l3-yellow: #ffc61a;
	--l3-red: #d7132a;
	--l3-green: #1f8a4c;
	--l3-ink: #17233a;
	--l3-muted: #5b6880;
	--l3-line: #d9e1f0;
	--l3-tint: #f2f6fd;
	padding: 48px 20px;
	color: var(--l3-ink);
	background: #fff;
}
.l3:nth-child(even) { background: linear-gradient(180deg, #f6f9ff 0%, #fff 100%); }
.l3-in { max-width: 1180px; margin: 0 auto; }

.l3 :where(h1, h2, h3, h4, p, li, dt, dd, summary, figcaption, span, b) {
	line-break: strict;
	word-break: keep-all;
	overflow-wrap: anywhere;
	text-wrap: auto;
}
.l3 em { font-style: normal; color: var(--l3-blue); }
.l3 .ai { color: var(--l3-blue); }
.l3 .mst { color: var(--l3-yellow); }

/* ---- 章の見出し ---- */
.l3-head { margin-bottom: 8px; }
.l3-title { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.125rem); font-weight: 800; letter-spacing: .01em; }
.l3-lead { margin: 6px 0 0; color: var(--l3-muted); font-size: 0.9375rem; line-height: 1.85; }
.l3-sub { margin: 0 0 6px; font-size: 1.1875rem; color: var(--l3-blue); font-weight: 800; }
.l3-big {
	margin: 18px 0; font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 800; line-height: 1.6;
}
.l3-note { margin: 8px 0 0; font-size: 0.75rem; color: var(--l3-muted); }
.l3-turn {
	margin: 22px 0 0; text-align: center;
	font-size: clamp(1rem, 2.4vw, 1.3125rem); font-weight: 800;
	/* 幅いっぱいに流すと、最後の数文字だけが次の行に残る。
	   行の長さをそろえ、幅も抑えて、2行が同じくらいの長さになるようにする。 */
	max-width: 44em; margin-inline: auto; text-wrap: balance;
}

/* ---- 並び ---- */
.l3-grid2, .l3-grid3, .l3-grid4, .l3-grid5 { display: grid; gap: 16px; margin-top: 18px; }
/* auto-fit だと、要素が3つでも枠が5つできて右が空く（実際に空いた）。
   数を決めて並べ、狭い画面だけ下の @media で折り返す。 */
.l3-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.l3-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.l3-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.l3-grid5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* カードの絵は高さを揃える。バラつくと、見出しの位置がガタつく。 */
.l3-card-img { height: 168px; object-fit: contain; object-position: bottom; margin-top: auto; }

/* ---- カード ---- */
.l3-card {
	position: relative; display: flex; flex-direction: column;
	padding: 18px; border: 1px solid var(--l3-line); border-radius: 14px;
	background: #fff; box-shadow: 0 1px 2px rgba(20, 40, 90, .05);
}
.l3-card h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 800; padding-right: 8px; }
.l3-card p { margin: 0; font-size: 0.875rem; line-height: 1.85; color: var(--l3-muted); }
.l3-card-img { display: block; width: 100%; max-width: 220px; margin: 14px auto 0;
	height: 168px; object-fit: contain; object-position: bottom; }
.l3-card.is-feat h3 { color: var(--l3-navy); }

/* ---- 01 ヒーロー ---- */
.l3.is-hero { padding-top: 56px; background: linear-gradient(180deg, #eef4ff 0%, #fff 70%); }
.l3-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
.l3-hero-eyebrow { margin: 0; font-size: clamp(1.0625rem, 2.6vw, 1.5rem); font-weight: 800; }
.l3-hero-title { margin: 6px 0 10px; font-size: clamp(2.5rem, 7vw, 4.25rem); font-weight: 900; letter-spacing: -.01em; }
.l3-hero-title .ai { color: var(--l3-blue); }
.l3-hero-title .mst { color: var(--l3-ink); }
.l3-hero-sub { margin: 0 0 18px; color: var(--l3-blue); font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 700; line-height: 1.7; }
/*
 * 資格のカード。2列のグリッド。
 *
 * 3枚目（第二種電気工事士）は、上の2枚を合わせた幅いっぱいに広げる
 * （施主ご指示 2026-10-01）。flex だと中身の量で幅が決まり、
 * 上の2枚と右端が揃わなかった。
 */
.l3-quals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
/* 下の1枚は、上の2枚ぶん（溝も含めて）ちょうどの幅にする。 */
.l3-qual.is-soon { grid-column: 1 / -1; }
/* 消火器の絵を右上に添える。資格名の行と重ならないよう、絵の幅ぶんだけ
   右に余白を取る。 */
.l3-qual { position: relative; padding: 12px 14px;
	border: 2px solid var(--l3-red); border-radius: 12px; }
.l3-qual.is-fire { padding-right: 74px; }
.l3-qico { position: absolute; top: 50%; right: 12px; width: 54px; height: auto;
	transform: translateY(-50%); }
.l3-qual.is-haz { border-color: #e8730f; }
.l3-qual b { display: block; color: var(--l3-red); font-size: 1.0625rem; }
.l3-qual.is-haz b { color: #e8730f; }
.l3-qual span { display: block; margin: 2px 0 8px; font-weight: 800; }
.l3-qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.l3-q {
	padding: 3px 9px; border-radius: 5px; background: var(--l3-red); color: #fff;
	font-size: 0.75rem; font-weight: 700;
}
.l3-q.is-orange { background: #e8730f; }
/* これから出すもの（第二種電気工事士・11月1日リリース予定）。
   いま選べるものと同じ色だと「もう使える」と読める。灰色にして区別する
   （施主ご指示 2026-10-01 / 1001-04）。 */
.l3-qual.is-soon { border-color: #9aa4b0; border-style: dashed; }
.l3-qual.is-soon b { color: #5b6875; }
.l3-q.is-soon { background: #8a95a3; }
@media (max-width: 600px) {
	.l3-quals { grid-template-columns: 1fr; }
}
.l3-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 16px 0 0; padding: 0; list-style: none; }
.l3-checks li { font-weight: 700; }
.l3-checks li::before { content: "✓"; margin-right: 6px; color: var(--l3-green); font-weight: 900; }
.l3-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.l3-hero-shot img { width: 100%; height: auto; border-radius: 16px; }
.l3-refund {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
	margin-top: 28px; padding: 18px 22px; border-radius: 16px; background: #fdeef0;
}
.l3-refund-txt { font-size: clamp(1.125rem, 3vw, 1.75rem); font-weight: 900; }
.l3-refund-txt b { color: var(--l3-red); }
.l3-refund-txt em { font-style: normal; background: var(--l3-yellow); padding: 0 6px; border-radius: 4px; color: var(--l3-ink); }
.l3-refund p { margin: 0; font-size: 0.8125rem; color: var(--l3-muted); }

/* ---- ボタン ---- */
.l3-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 52px; padding: 0 26px; border-radius: 10px;
	font-weight: 800; text-decoration: none;
}
.l3-btn.is-primary { background: var(--l3-navy); color: #fff; }
.l3-btn.is-primary:hover { background: var(--l3-navy-d); }
.l3-btn.is-red { background: var(--l3-red); color: #fff; }
.l3-btn.is-ghost { border: 2px solid var(--l3-navy); color: var(--l3-navy); background: #fff; }

/* ---- 02 お悩み ---- */
.l3-worry { margin-top: 24px; padding: 30px 18px 18px; border-radius: 16px; position: relative; }
.l3-worry.is-self { background: #eef4ff; }
.l3-worry.is-org { background: #eefaf1; margin-top: 22px; }
.l3-wtag {
	position: absolute; top: -14px; left: 18px; padding: 6px 18px; border-radius: 999px;
	background: var(--l3-navy); color: #fff; font-weight: 800; font-size: 0.875rem;
}
.l3-worry.is-org .l3-wtag { background: var(--l3-green); }

/* ---- 03 なら！ ---- */
.l3.is-can { background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%); }
.l3-can-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.l3-can-txt { flex: 1 1 22rem; }
.l3-cantitle { margin: 0; font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 900; }
.l3-tiger { height: auto; }
.l3-tiger.is-thumbs { width: min(150px, 30vw); }
.l3-tiger.is-point, .l3-tiger.is-fist { width: min(160px, 32vw); }
.l3-tiger.is-wink { width: min(260px, 46vw); }
.l3-band {
	margin-top: 26px; padding: 22px; border-radius: 16px;
	background: var(--l3-navy); color: #fff; text-align: center;
}
.l3-band p { margin: 0 0 14px; font-size: clamp(1rem, 2.6vw, 1.375rem); font-weight: 800; }
.l3-band em { color: var(--l3-yellow); }
.l3-band ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.l3-band li { background: #fff; color: var(--l3-navy); border-radius: 999px; padding: 10px 20px; text-align: center; }
.l3-band li b { display: block; font-size: 0.9375rem; }
.l3-band li span { font-size: 0.75rem; color: var(--l3-muted); }
.l3-band.is-thin { background: var(--l3-navy); }
.l3-band.is-thin small { display: block; margin-top: 6px; font-size: 0.75rem; opacity: .85; }

/* ---- 04 AIだからできる学習 ---- */
/* 文と吹き出しをひとつの塊にする。絵と横並びにしたとき、行の高さが
   絵に引きずられ、文の上下へ大きな空きができていた。 */
.l3-flow-lead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.l3-flow-txt { flex: 1 1 22rem; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.l3-balloon {
	position: relative; padding: 12px 18px; border: 2px solid var(--l3-blue); border-radius: 14px;
	background: #fff; font-weight: 700; font-size: 0.9375rem;
}
.l3-balloon b { color: var(--l3-blue); }
.l3-steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; }
.l3-step { padding: 18px; border: 1px solid var(--l3-line); border-radius: 14px; background: #fff; }
.l3-sno { display: block; margin-bottom: 8px; font-size: 0.6875rem; font-weight: 800; color: var(--l3-muted); letter-spacing: .08em; }
.l3-sno b { display: block; font-size: 1.5rem; color: var(--l3-navy); letter-spacing: 0; }
.l3-step h3 { margin: 0 0 8px; font-size: 1.0625rem; color: var(--l3-navy); }
.l3-step p { margin: 0; font-size: 0.875rem; line-height: 1.85; color: var(--l3-muted); }

/* ---- 05 違い ---- */
.l3-vs { display: grid; grid-template-columns: 1fr auto 1.15fr .9fr; gap: 14px; align-items: stretch; margin-top: 20px; }
.l3-vs-col, .l3-vs-side { display: flex; flex-direction: column; }
.l3-vs-col { padding: 18px; border-radius: 14px; border: 1px solid var(--l3-line); background: #fff; }
.l3-vs-col h3 { margin: -18px -18px 14px; padding: 12px; border-radius: 14px 14px 0 0; text-align: center; color: #fff; font-size: 1.0625rem; }
.l3-vs-col.is-plain h3 { background: #7a8598; }
.l3-vs-col.is-ours h3 { background: var(--l3-navy); }
.l3-vs-col ol { margin: 0 0 14px; padding-left: 1.2em; }
.l3-vs-side dl { margin: 0 0 14px; }
.l3-vs-col li { margin-bottom: 12px; }
.l3-vs-col li b { display: block; font-size: 0.9375rem; }
.l3-vs-col li span { font-size: 0.8125rem; color: var(--l3-muted); }
.l3-vs-mark {
	align-self: center; justify-self: center;
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	background: var(--l3-navy); color: #fff; font-weight: 900; font-size: 0.9375rem;
}
.l3-vs-pain { margin: 12px 0 0; margin-top: auto; padding: 12px; list-style: none; border-radius: 10px; background: #f1f3f7; font-size: 0.8125rem; color: var(--l3-muted); }
.l3-vs-goal { margin-top: auto; padding: 14px; border-radius: 12px; background: var(--l3-navy); color: #fff; }
.l3-vs-goal b { display: block; font-size: 1rem; }
.l3-vs-goal span { font-size: 0.8125rem; opacity: .9; }
.l3-vs-side { padding: 18px; border-radius: 14px; background: #fffbe9; border: 1px solid #f4e3ab; }
.l3-vs-side h3 { margin: 0 0 10px; font-size: 1rem; text-align: center; }
.l3-vs-side dt { font-weight: 800; color: var(--l3-navy); margin-top: 10px; }
.l3-vs-side dd { margin: 4px 0 0; font-size: 0.8125rem; color: var(--l3-muted); line-height: 1.8; }
.l3-vs-note { margin: 14px 0 0; margin-top: auto; padding: 10px; border-radius: 8px; background: var(--l3-yellow); font-weight: 800; font-size: 0.875rem; text-align: center; }

/* ---- 06 いつでも、どこでも ---- */
.l3-any { display: grid; grid-template-columns: 2.3fr 1fr; gap: 20px; align-items: stretch; }
.l3-any-main { display: flex; flex-direction: column; }
.l3-any-main .l3-grid3 { flex: 1 1 auto; }
.l3-dev { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--l3-line); border-radius: 14px; background: #fff; }
.l3-dev h4 { margin: 0 0 4px; color: var(--l3-navy); font-size: 1rem; }
.l3-dev p { margin: 0 0 10px; font-size: 0.8125rem; color: var(--l3-muted); }
/* 端末の写真は正方形に切ってある。カードの残りを全部使わせると縦長の枠になり、
   横長の端末（タブレット・ノートPC）が左右で切れる（実際に切れた）。
   枠のほうを写真と同じ比率にして、切らずに収める。 */
.l3-dev img { width: 100%; aspect-ratio: 1 / 1; height: auto;
	object-fit: cover; object-position: center; border-radius: 10px; }
.l3-life { display: flex; flex-direction: column; padding: 18px; border: 1px solid #f0e0b4; border-radius: 16px; background: #fffdf4; }
.l3-life h3 { margin: 0 0 12px; font-size: 1.0625rem; }
.l3-life em { background: var(--l3-yellow); padding: 0 4px; border-radius: 3px; color: var(--l3-ink); }
.l3-life ul { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; display: grid; grid-auto-rows: 1fr; gap: 10px; }
.l3-life li { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; align-items: center; }
.l3-life li span { font-weight: 800; font-size: 0.875rem; }
/* 写真の高さは決め打ちにする。読み込み前と後で行の高さが変わり、
   左の端末カードとの背丈が合わなくなる。 */
.l3-life li img { width: 100%; height: 78px; object-fit: cover; border-radius: 8px; }

/* ---- 08 法人 ---- */
.l3-corp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.l3-corp-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.l3-corp-head img { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 14px; }
.l3-bubble {
	display: inline-block; padding: 14px 18px; border-radius: 999px;
	background: var(--l3-blue); color: #fff; font-weight: 800; font-size: 0.875rem;
}
.l3-bubble em { color: var(--l3-yellow); }
/* 右は2行の一文しかない。左と同じ幅を与えると、右半分が空いて見える。
   右を白いカードにして中身を持たせ、幅も左に寄せる。 */
.l3-corp-foot { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px;
	align-items: stretch; margin-top: 22px; padding: 18px;
	border-radius: 16px; background: var(--l3-tint); }
.l3-corp-foot h3 { margin: 0 0 6px; font-size: 1.125rem; }
.l3-scopes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.l3-scopes li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--l3-line); font-weight: 800; font-size: 0.875rem; }
/* flex にはしない。<em> や <wbr> が独立した子になり、語ごとに散る。
   高さの中心そろえは、親のグリッド側（align-self）で行う。 */
.l3-corp-note {
	align-self: center; margin: 0; padding: 16px 18px;
	border-radius: 12px; background: #fff; border: 1px solid var(--l3-line);
	font-weight: 700; line-height: 1.9;
}

/* ---- 09 料金 ---- */
.l3-guard {
	display: inline-block; margin: 10px 0 0; padding: 8px 18px; border-radius: 999px;
	border: 2px solid var(--l3-red); color: var(--l3-red); font-weight: 800; font-size: 0.875rem;
}
.l3-plans { position: relative; margin-top: 30px; padding: 30px 18px 18px; border-radius: 16px; border: 2px solid var(--l3-red); }
.l3-plans.is-solo { border-color: var(--l3-navy); }
.l3-ptag { position: absolute; top: -16px; left: 16px; padding: 7px 20px; border-radius: 999px; background: var(--l3-red); color: #fff; font-weight: 800; }
.l3-plans.is-solo .l3-ptag { background: var(--l3-navy); }
.l3-plan { border: 1px solid var(--l3-line); border-radius: 14px; overflow: hidden; background: #fff; text-align: center; }
.l3-plan h3 { margin: 0; padding: 12px; color: #fff; font-size: 1.125rem; letter-spacing: .04em; }
.l3-plan.is-lite h3 { background: #cf1128; }
.l3-plan.is-std h3 { background: #e8730f; }
.l3-plan.is-pro h3 { background: #1f8a4c; }
.l3-amt { margin: 14px 0 0; font-size: 0.875rem; color: var(--l3-muted); font-weight: 700; }
.l3-amt b { font-size: clamp(1.75rem, 4vw, 2.375rem); color: var(--l3-ink); margin: 0 2px; }
.l3-plan.is-lite .l3-amt b { color: #cf1128; }

/* 税込の併記（施主ご指示 2026-10-01）。
   価格を税別にしたので、総額も読めるようにする。
   個人向けプランは消費者向けのため、税込の明示が要る（消費税法63条）。
   金額のすぐ下に、控えめな大きさで置く。 */
/* 料金の見出しの横に出す「税抜」（施主ご指示 2026-10-01 / 1001-01）。
   見出しを読んだ時点で、税抜だと分かるようにする。 */
.l3-title-tax {
  display: inline-block; margin-left: 10px; padding: 3px 12px; vertical-align: middle;
  font-size: 0.875rem; font-weight: 700; color: var(--l3-muted);
  background: #EEF2F7; border-radius: 999px;
}

.l3-tax {
  display: block; margin-top: 4px;
  font-size: 0.75rem; font-weight: 700; color: var(--l3-muted);
  letter-spacing: 0.01em;
}
/* 料金のまとまりの冒頭に出す但し書き。 */
.l3-taxnote {
  margin: 0 0 14px; font-size: 0.8125rem; line-height: 1.7; color: var(--l3-muted);
}
.l3-taxnote b { color: var(--l3-ink); }
.l3-plan.is-std .l3-amt b { color: #e8730f; }
.l3-plan.is-pro .l3-amt b { color: #1f8a4c; }
.l3-plus { margin: 6px 0; font-weight: 900; color: var(--l3-muted); }
.l3-cap { display: inline-block; margin: 12px 0 0; padding: 6px 16px; border-radius: 8px; background: #f4f6fa; font-weight: 800; font-size: 0.875rem; }
.l3-for { margin: 12px 14px 18px; font-size: 0.8125rem; color: var(--l3-muted); line-height: 1.8; }
.l3-solo { padding: 18px; border: 1px solid var(--l3-line); border-radius: 14px; background: #fff; text-align: center; }
.l3-solo h3 { margin: 0 0 4px; padding: 10px; border-radius: 8px; background: var(--l3-navy); color: #fff; font-size: 1rem; }
.l3-solo.is-add { text-align: left; }
.l3-solo.is-add h3 { background: #fff; color: var(--l3-navy); border: 1px solid var(--l3-line); }
.l3-solo.is-add b { color: var(--l3-blue); font-size: 1.25rem; }

/* ---- 10 返金保証 ---- */
.l3-refund-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px; align-items: center; }
.l3-seal {
	display: grid; place-content: center; gap: 2px;
	width: 200px; height: 200px; border-radius: 50%;
	border: 4px solid var(--l3-red); background: #fff;
	color: var(--l3-red); font-weight: 800; text-align: center; line-height: 1.5;
}
.l3-seal span { font-size: 0.875rem; }
.l3-seal b { display: block; font-size: 1.5rem; background: var(--l3-red); color: #fff; padding: 4px 14px; border-radius: 8px; margin: 4px 0; }
@media (max-width: 900px) {
	.l3-refund-head { grid-template-columns: 1fr; justify-items: center; gap: 16px; }
	.l3-seal { width: 172px; height: 172px; }
}
.l3-rbox { padding: 0 0 18px; border: 1px solid var(--l3-line); border-radius: 14px; overflow: hidden; background: #fff; }
.l3-rbox h3 { margin: 0 0 12px; padding: 12px 18px; background: var(--l3-navy); color: #fff; font-size: 1.0625rem; }
.l3-rbox ol, .l3-rbox ul { margin: 0; padding: 0 18px 0 38px; }
.l3-rbox li { margin-bottom: 10px; font-size: 0.875rem; line-height: 1.85; }

/* ---- 11 開発会社 ---- */
.l3-maker { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.l3-maker-txt { display: flex; flex-direction: column; }
.l3-maker-points { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; gap: 10px; margin-top: 18px; }
.l3-card.is-point { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.l3-card.is-point h3 { margin: 0; font-size: 1rem; }
.l3-card.is-point p { font-size: 0.8125rem; }
.l3-maker-shot { display: flex; flex-direction: column; margin: 0; }
.l3-maker-shot figcaption { margin-top: auto; }
.l3-maker-shot img { width: 100%; height: auto; max-height: 460px; object-fit: cover; object-position: center 30%; border-radius: 14px; }
.l3-maker-shot figcaption { margin-top: 10px; padding: 14px; border-radius: 12px; background: var(--l3-navy); color: #fff; font-size: 0.875rem; line-height: 1.85; }
.l3-maker-shot figcaption em { color: var(--l3-yellow); }
/* 会社概要。LP案と同じく、左に紺色の見出し帯を置く。
   帯があるぶん右の内容が締まり、項目が少なくても間が抜けて見えない。 */
.l3-company { display: grid; grid-template-columns: 148px minmax(0, 1fr);
	margin-top: 22px; border-radius: 16px; background: var(--l3-tint); overflow: hidden; }
.l3-company-tag {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; padding: 20px 12px; background: var(--l3-navy); color: #fff;
	font-weight: 800; font-size: 0.9375rem; text-align: center;
}
.l3-company-tag .l3-ico { width: 2.4em; height: 2.4em; }
.l3-company-body { padding: 20px; }
.l3-company h3 { margin: 0 0 4px; font-size: 1.25rem; }
.l3-company > p { margin: 0 0 12px; font-size: 0.875rem; color: var(--l3-muted); }
/* 項目は左から詰める。等分に広げると、項目が少ないときに間が空く
   （いまは3項目。建設業許可・有資格者数が入れば5項目になる）。 */
.l3-company dl { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; }
.l3-company dl > div { min-width: 0; }
.l3-company dt { font-size: 0.75rem; font-weight: 800; color: var(--l3-navy); }
.l3-company dd { margin: 2px 0 0; font-size: 0.875rem; }

/* ---- 12 よくある質問 ---- */
.l3-faq { display: grid; gap: 10px; margin-top: 18px; }
.l3-faq details { border: 1px solid var(--l3-line); border-radius: 12px; background: #fff; }
/* Qの丸と文を、行の頭でそろえる。
   以前は文の流れの中に丸を置き、vertical-align を目分量でずらしていた。
   文字の大きさが変わると、そのぶんズレる。並べて置いて、頭をそろえる。 */
.l3-faq summary { display: flex; align-items: flex-start; gap: 10px;
	cursor: pointer; padding: 16px 18px; font-weight: 800; list-style: none; line-height: 1.6; }
.l3-faq summary::-webkit-details-marker { display: none; }
.l3-faq summary::before { content: "Q"; flex: none; display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%; background: var(--l3-navy);
	color: #fff; font-size: 0.8125rem; line-height: 1; }
.l3-faq p { margin: 0; padding: 0 18px 18px 54px; font-size: 0.875rem; line-height: 1.9; color: var(--l3-muted); }
.l3-faq-cta { margin-top: 18px; text-align: center; }
.l3-faq-cta a { display: inline-block; padding: 14px 28px; border-radius: 10px; background: var(--l3-navy); color: #fff; font-weight: 800; text-decoration: none; }

/* ---- 13 最後の申込み ---- */
.l3.is-last { background: linear-gradient(180deg, #f3f7ff 0%, #e8f0ff 100%); }
.l3-last { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.l3-cta { padding: 22px; border-radius: 16px; background: #fff; border: 2px solid var(--l3-navy); text-align: center; }
.l3-cta.is-corp { border-color: var(--l3-red); }
.l3-cta h3 { margin: 0 0 8px; color: var(--l3-navy); font-size: 1.125rem; }
.l3-cta.is-corp h3 { color: var(--l3-red); }
.l3-cta p { margin: 0 0 12px; font-size: 0.875rem; color: var(--l3-muted); }
.l3-cta .l3-btn { width: 100%; }
.l3-login { margin: 22px 0 0; text-align: center; font-size: 0.875rem; }

/* ---- 画面が狭いとき ---- */
@media (max-width: 1100px) {
	.l3-grid4, .l3-grid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.l3 { padding: 34px 16px; }
	.l3-grid2, .l3-grid3, .l3-grid4, .l3-grid5 { grid-template-columns: 1fr; }
	.l3-hero-grid, .l3-any, .l3-corp-head, .l3-corp-foot, .l3-maker { grid-template-columns: 1fr; }
	.l3-vs { grid-template-columns: 1fr; }
	.l3-vs-mark { justify-self: center; }
	.l3-hero-cta .l3-btn { flex: 1 1 100%; }
	.l3-tiger { align-self: center; }
}

/* LPの仕上げ（実機で見て直した分 2026-09-04） */
/* 濃紺の帯の中は、文字色を必ず白に戻す。
   親の見出し色をそのまま継いで、紺地に紺の文字になっていた。 */
.l3-band, .l3-band :where(p, b, span, small) { color: #fff; }
.l3-band em { color: var(--l3-yellow); }
.l3-band .ai { color: #fff; }
.l3-band li b { color: var(--l3-navy); }
.l3-band li span { color: var(--l3-muted); }

/* 「複数科目ならお得」は、金額が行末で折り返さないようにする。 */
.l3-solo.is-add p { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.9; }
.l3-solo.is-add b { display: inline-block; white-space: nowrap; }

/* 章の締めに添えるマスコット。文の左に小さく置く。 */
.l3-turn .l3-tiger.is-sweat { width: 92px; vertical-align: middle; margin-right: 10px; }

/* 追従CTAの色を、作り直したLPの濃紺に揃える。
   アプリ側の紫のままだと、LPだけ色が浮く。 */
.lp-sticky-cta .btn-accent { background: #123a8c; border-color: #123a8c; }
.lp-sticky-cta .btn-accent:hover { background: #0d2a66; }
.lp-sticky-cta .btn-outline { border-color: #123a8c; color: #123a8c; background: #fff; }

/* 特商法の中に入れる小さな表（料金プランの内訳）。
   料金が3プランになり、文章で並べると読み取れないため表にする。 */
.legal-sub { width: 100%; margin: 10px 0 6px; border-collapse: collapse; font-size: 0.8125rem; }
.legal-sub th, .legal-sub td { padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); text-align: left; }
.legal-sub thead th { background: #f4f7fc; font-weight: 700; white-space: nowrap; }
.legal-sub td { background: #fff; }
@media (max-width: 640px) {
	.legal-sub, .legal-sub thead, .legal-sub tbody, .legal-sub tr, .legal-sub th, .legal-sub td { display: block; }
	.legal-sub thead { display: none; }
	.legal-sub tr { margin-bottom: 8px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; overflow: hidden; }
	.legal-sub td { border: 0; border-bottom: 1px solid #eef1f7; }
	.legal-sub tr td:first-child { background: #f4f7fc; font-weight: 700; }
}

/* 申込画面の法人プラン（LITE / STANDARD / PRO COMPANY）。
   金額と上限が並ぶので、カードで比べられる形にする。 */
.co-tiers { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
.co-tier {
	display: flex; flex-direction: column; gap: 4px; text-align: left;
	padding: 16px; border: 2px solid var(--line, #e2e8f0); border-radius: 12px;
	background: #fff; cursor: pointer;
}
.co-tier:hover { border-color: #123a8c; }
.co-tier.is-on { border-color: #123a8c; background: #f4f7fd; }
.co-tier-name { font-weight: 800; font-size: 1.0625rem; color: #123a8c; }
.co-tier-amt { font-size: 0.9375rem; font-weight: 700; }
.co-tier-amt.is-id { font-size: 0.8125rem; font-weight: 600; color: var(--muted, #64748b); }
.co-tier-cap {
	align-self: flex-start; margin-top: 6px; padding: 4px 12px; border-radius: 6px;
	background: #eef2f8; font-size: 0.75rem; font-weight: 700;
}
.co-tier-note { margin-top: 6px; font-size: 0.75rem; line-height: 1.7; color: var(--muted, #64748b); }
@media (max-width: 760px) { .co-tiers { grid-template-columns: 1fr; } }

/* 苦手な細目（分野をさらに細かく分けた単位）。
   正答率の低い順に並べ、そのまま解き始められるようにする。 */
.topic-list { display: grid; gap: 8px; margin-top: 12px; }
.topic-row {
	display: grid; align-items: center; gap: 12px;
	grid-template-columns: minmax(0, 1.6fr) minmax(80px, 1fr) 56px 72px 52px;
	padding: 12px 14px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
	background: #fff; text-decoration: none; color: inherit;
}
.topic-row:hover { border-color: var(--brand, #4f46e5); }
.topic-name { font-weight: 700; font-size: 0.9375rem; min-width: 0; }
.topic-name small { display: block; margin-top: 2px; font-weight: 400; font-size: 0.6875rem; color: var(--muted, #64748b); }
.topic-bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.topic-bar i { display: block; height: 100%; background: #22a06b; }
.topic-row.is-mid .topic-bar i { background: #e8a33d; }
.topic-row.is-weak .topic-bar i { background: #d7132a; }
.topic-num { text-align: right; font-weight: 800; font-size: 1.0625rem; }
.topic-num small { font-size: 0.6875rem; font-weight: 600; margin-left: 1px; }
.topic-cnt { text-align: right; font-size: 0.75rem; color: var(--muted, #64748b); }
.topic-go {
	text-align: center; padding: 6px 0; border-radius: 6px;
	background: var(--brand, #4f46e5); color: #fff; font-size: 0.75rem; font-weight: 700;
}
.topic-fresh { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted, #64748b); }
@media (max-width: 680px) {
	.topic-row { grid-template-columns: 1fr auto; row-gap: 8px; }
	.topic-bar { grid-column: 1 / -1; }
	.topic-cnt { text-align: left; }
	.topic-go { grid-column: 1 / -1; }
}

/* 模擬試験の採点結果（履歴を開いたときに出す）。
   採点直後にしか見られなかったものを、後から見返せるようにする。 */
.mockres { padding: 14px; margin-bottom: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 10px; background: #f8fafc; }
.mockres-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mockres-score { font-size: 1.5rem; font-weight: 800; }
.mockres-score small { font-size: 0.75rem; margin-left: 2px; }
.mockres-cri { font-size: 0.75rem; color: var(--muted, #64748b); }
.mockres-list { display: grid; gap: 6px; }
.mockres-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(70px, 1fr) 52px auto; gap: 10px; align-items: center; }
.mockres-label { font-size: 0.8125rem; font-weight: 600; }
.mockres-bar { height: 7px; border-radius: 999px; background: #e6eaf1; overflow: hidden; }
.mockres-bar i { display: block; height: 100%; background: #22a06b; }
.mockres-row.is-weak .mockres-bar i { background: #d7132a; }
.mockres-val { text-align: right; font-weight: 700; font-size: 0.875rem; }
.mockres-val small { font-size: 0.6875rem; }
.mockres-flag { font-size: 0.6875rem; font-weight: 700; color: #d7132a; }
@media (max-width: 640px) {
	.mockres-row { grid-template-columns: 1fr auto; }
	.mockres-bar { grid-column: 1 / -1; }
}

/* 所属ごとの得意・苦手（管理者ダッシュボード）。
   分野が横に並ぶため、狭い画面では横スクロールさせる。 */
.adash-nodes-table table { min-width: 620px; }
.adash-nodes-table th[scope="row"] { text-align: left; font-weight: 700; white-space: nowrap; }
.adash-nodes-table .num { text-align: right; white-space: nowrap; }
.adash-nodes-table td.is-weak { color: #d7132a; font-weight: 700; background: #fdf1f2; }
.adash-nodes-note { margin: 10px 0 0; font-size: 0.75rem; }

/* 個人詳細：先月との比較・月ごとの推移・声かけの案（No.12） */
.ld-compare { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 4px; font-size: 0.875rem; }
.ld-compare .is-up { color: #22a06b; }
.ld-compare .is-down { color: #d7132a; }
.ld-trend { display: flex; align-items: flex-end; gap: 10px; margin: 10px 0 4px; height: 96px; }
.ld-trend-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; flex: 1; }
.ld-trend-col i { display: block; width: 100%; max-width: 34px; border-radius: 4px 4px 0 0; background: #4f46e5; }
.ld-trend-col em { font-style: normal; font-size: 0.6875rem; font-weight: 700; }
.ld-trend-col small { font-size: 0.625rem; color: var(--muted, #64748b); }
/* 月ごとの学習時間（施主ご要望 2026-09-30）。12か月ぶんを縦に並べる。
   月名は「2026年1月」まで入るので、既定の100pxより少し広く取る。 */
.ld-months { display: flex; flex-direction: column; gap: 7px; margin: 10px 0 4px; }
.ld-months .bar-row { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; font-size: 0.75rem; }
.ld-advice { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px; }
.ld-advice li { font-size: 0.8125rem; line-height: 1.8; }
.ld-advice li.is-warn { color: #b03a2e; }
.ld-advice li.is-good { color: #1e7a4d; }

/* 返金保証の達成状況（管理者ダッシュボード）。
   月が横に並ぶため、狭い画面では横スクロールさせる。 */
.adash-refund-table table { min-width: 760px; }
.adash-refund-table th[scope="row"] { text-align: left; white-space: nowrap; }
.adash-refund-table th[scope="row"] small { display: block; font-weight: 400; font-size: 0.6875rem; color: var(--muted, #64748b); }
.adash-refund-table .num { text-align: center; white-space: nowrap; }
.adash-refund-table .rf-cell { color: var(--muted, #64748b); font-size: 0.8125rem; }
.adash-refund-table .rf-cell.is-ok { color: #1e7a4d; font-weight: 800; background: #edf8f1; }
.adash-refund-note { margin: 10px 0 0; font-size: 0.75rem; }
/* 記録はあるが条件に届いていない月。空欄と見分けが付くようにする。 */
.adash-refund-table .rf-cell.is-short { color: #b06a00; background: #fff8ec; }

/* 料金表のカードから、そのプランで申し込めるようにする。
   金額を見た流れでそのまま進めるほうが、選び直しが起きない。

   カード全体を <a> で包んではいけない。LPの本文は WordPress が段落を補うため、
   <a> の直後に </p> が入り、中の <h3> でその段落が閉じられる。
   閲覧側では <a> が分割され、申し込みボタンだけが別のカードとして
   並んでしまう（「LITE」「ボタンだけの箱」「STANDARD」と3列に崩れた）。
   包む代わりに、ボタンの当たり判定をカード全面へ広げる。 */
.l3-plan, .l3-solo { position: relative; display: flex; flex-direction: column; }
.l3-plan:hover, .l3-solo:hover { border-color: var(--l3-navy); }
/* 説明文を伸び代にして、金額の量が違ってもボタンの高さがそろうようにする。 */
.l3-plan .l3-for, .l3-solo p:last-of-type { flex: 1 1 auto; }
.l3-solo-go {
	display: block; margin: 14px 14px 16px; padding: 11px 10px; border-radius: 8px;
	background: var(--l3-navy); color: #fff; font-size: 0.8125rem; font-weight: 700;
	text-align: center; text-decoration: none;
}
.l3-solo .l3-solo-go { margin: 14px 0 0; }
/* カードのどこを押しても、このボタンの行き先へ進む。 */
.l3-solo-go::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.l3-plan:hover .l3-solo-go, .l3-solo:hover .l3-solo-go { background: var(--l3-blue); }
.l3-solo.is-add { cursor: default; }

/* 料金プランの切り替え（法人／個人）。
   縦に重ねると章が長く、自分に関係のない側まで読ませることになる。
   JSが動くまでは出さない（出しても切り替わらないため）。 */
.l3-tabs { display: flex; gap: 8px; margin: 18px 0 0; padding: 6px; border-radius: 999px; background: #eef2f8; }
.l3-tabs[hidden] { display: none; }
.l3-tab {
	flex: 1 1 0; padding: 12px 10px; border: 0; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--l3-muted); font-weight: 800; font-size: 0.9375rem;
	font-family: inherit;
}
.l3-tab.is-on { background: var(--l3-navy); color: #fff; }
.l3-tab:focus-visible { outline: 2px solid var(--l3-blue); outline-offset: 2px; }
/* 切り替えが出ているときは、中の見出しは重複するので隠す。 */
.l3-tabs:not([hidden]) ~ .l3-plans > .l3-ptag { display: none; }
.l3-tabs:not([hidden]) ~ .l3-plans { margin-top: 16px; padding-top: 18px; }

/* 入力欄と選択欄の高さをそろえる。
   同じ余白を指定しても、選択欄はブラウザが独自の行の高さと矢印を持つため、
   隣り合わせにすると段差になる（銀行振込のお問い合わせで実際にずれていた）。
   高さを決め打ちし、矢印もこちらで描いて、見た目を1種類にする。 */
.co-bankform-grid .input,
.co-bankform-msg .input { font-family: inherit; line-height: 1.5; }
.co-bankform-grid input.input,
.co-bankform-grid select.input { height: 40px; }
.co-bankform-grid select.input {
	-webkit-appearance: none; appearance: none; padding-right: 34px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
/* 数値の欄は、ブラウザの上下ボタンのぶんだけ内側が狭くなる。
   矢印は使わないので消し、他の欄と同じ幅で文字が入るようにする。 */
.co-bankform-grid input[type="number"].input { -moz-appearance: textfield; appearance: textfield; }
.co-bankform-grid input[type="number"].input::-webkit-outer-spin-button,
.co-bankform-grid input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* スクロールに合わせて、ふわっと現れるようにする。
   一度に全部が見えていると、どこを読めばよいのかが分かりにくい。

   隠すのはJSが動いてからにする（class を付けてから隠す）。
   先にCSSで隠すと、JSが動かない環境で本文が読めなくなる。
   「動きを減らす」設定の人には動かさない。 */
.has-reveal .l3 [data-reveal] {
	opacity: 0; transform: translateY(16px);
	transition: opacity .55s ease, transform .55s ease;
	transition-delay: var(--reveal-wait, 0ms);
}
.has-reveal .l3 [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.has-reveal .l3 [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 章の中の間隔。狭い画面では、縦に積むぶん間が効きすぎて間延びして見える。
   1画面に入る量が減ると、読み進める手が止まりやすい。 */
@media (max-width: 900px) {
	.l3-grid2, .l3-grid3, .l3-grid4, .l3-grid5 { gap: 12px; margin-top: 14px; }
	.l3-turn { margin-top: 16px; }
	.l3-band { margin-top: 18px; padding: 18px 14px; }
	.l3-worry { margin-top: 18px; padding: 26px 14px 14px; }
	.l3-worry.is-org { margin-top: 20px; }
	.l3-can-head, .l3-flow-lead { gap: 12px; }
	.l3-corp-foot, .l3-any { gap: 14px; margin-top: 16px; }
	.l3-tabs { margin-top: 14px; }
	.l3-last { gap: 12px; }
	.l3-login { margin-top: 16px; }
	.l3-card { padding: 14px; }
	/* 縦に積むと絵が主役になりすぎる。文が読める大きさに戻す。 */
	.l3-tiger.is-thumbs, .l3-tiger.is-point, .l3-tiger.is-fist { width: min(132px, 30vw); }
	.l3-tiger.is-wink { width: min(190px, 44vw); }
}

/* ご契約のプランと、その変更（契約・課金の画面）。 */
.bl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.bl-plan {
	display: flex; flex-direction: column; gap: 6px;
	padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
/* ご契約中のものは、ひと目で分かるようにする。 */
.bl-plan.is-now { border-color: var(--accent); background: var(--tint, #f5f8ff); }
.bl-plan-name { font-weight: 800; font-size: 1.0625rem; color: var(--ink); }
.bl-plan-cap { font-size: 0.8125rem; font-weight: 700; color: var(--accent); }
.bl-plan-note-in { margin: 0; font-size: 0.8125rem; line-height: 1.85; color: var(--muted); }
/* 説明の量が違ってもボタンの高さがそろうよう、説明を伸び代にする。 */
.bl-plan-note-in { flex: 1 1 auto; }
.bl-plan .btn { width: 100%; margin-top: 6px; }
.bl-plan-now {
	margin-top: 6px; padding: 9px; border-radius: 8px; text-align: center;
	background: var(--accent); color: #fff; font-size: 0.8125rem; font-weight: 700;
}
/* 変えられない理由は、押せないボタンではなく文で伝える。 */
.bl-plan-ng {
	margin-top: 6px; padding: 9px 10px; border-radius: 8px; text-align: center;
	background: #f4f6fa; color: var(--muted); font-size: 0.75rem; line-height: 1.7;
}
.bl-plan-note { margin: 12px 0 0; font-size: 0.8125rem; }
/* 上限を超えたままのご契約は、気づけるようにする。 */
#bl-plan-lead.is-warn { color: #b3262b; font-weight: 700; }

/* ---- お問い合わせ画面 ---- */
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ct-form-card { display: flex; flex-direction: column; gap: 14px; }
/* 2つ並べる欄。狭い画面では縦に積む。 */
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.ct-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--body); }
.ct-field .input {
	width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
	font-size: 0.875rem; font-family: inherit; line-height: 1.5; background: #fff; color: var(--ink);
}
/* 入力欄と選択欄で高さがずれる。選択欄はブラウザ独自の行の高さと矢印を持つため。 */
.ct-field input.input, .ct-field select.input { height: 40px; }
.ct-field select.input {
	-webkit-appearance: none; appearance: none; padding-right: 34px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center;
}
.ct-field input[type="number"].input { -moz-appearance: textfield; appearance: textfield; }
.ct-field input[type="number"].input::-webkit-outer-spin-button,
.ct-field input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ct-field .input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ct-note { margin: 0; font-size: 0.75rem; line-height: 1.8; }
.ct-actions { margin-top: 4px; }
.ct-actions .btn { width: 100%; }

.ct-side { display: flex; flex-direction: column; gap: 18px; }
.ct-tel { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; }
.ct-tel a { color: var(--ink); text-decoration: none; }
.ct-side-note { margin: 0; font-size: 0.75rem; }
.ct-side-block h4 { margin: 0 0 8px; font-size: 0.9375rem; }
.ct-side-list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.ct-side-list li { font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }
.ct-side-block .btn { width: 100%; margin-top: 10px; }

/* 送ったあと。フォームを残すと二重に送られる。 */
.ct-done { display: grid; gap: 12px; justify-items: start; }
.ct-done h3 { margin: 0; font-size: 1.125rem; }
.ct-done p { margin: 0; font-size: 0.875rem; line-height: 1.9; }

@media (max-width: 900px) {
	.ct-grid { grid-template-columns: 1fr; }
	.ct-row { grid-template-columns: 1fr; }
}
/* LP最後の、相談への入口。申し込む気が無い方の行き場。 */
.l3-ask { margin: 20px 0 0; text-align: center; font-size: 0.9375rem; }
.l3-ask a { color: var(--l3-navy); font-weight: 800; }
.l3-cta-sub { margin: 8px 0 0; font-size: 0.75rem; color: var(--l3-muted); }
/* 締めの一言に絵が付く場合。
   絵を文の流れの中に置くと、文が絵をよけて細切れになる
   （PCで3行、スマホで5行に割れていた）。絵と文を横に並べ、
   文は文でひとまとまりに折り返させる。 */
.l3-turn.is-with-tiger {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	max-width: 54em;
}
.l3-turn.is-with-tiger .l3-tiger.is-sweat { flex: none; margin-right: 0; }
@media (max-width: 600px) {
	/* 狭い画面では、絵を上に置いて文に幅を渡す。横に並べると文が細くなる。 */
	.l3-turn.is-with-tiger { flex-direction: column; gap: 8px; }
}
/* 決め打ちの改行は、広い画面でしか合わない。
   狭い画面では前半が2行になり、「支援する」だけが取り残されていた。
   狭いときは改行を外し、行の長さをそろえて折り返させる。 */
.l3-hero-sub { text-wrap: balance; }
@media (max-width: 720px) {
	.l3-br-wide { display: none; }
	.l3-hero-eyebrow, .l3-hero-sub { max-width: 22em; }
}
@media (max-width: 720px) {
	/* 縦に積むと、横並びのときの間隔がそのまま残って空きすぎる。 */
	.l3-hero-cta { gap: 8px; margin-top: 16px; }
	/* 帯の中の3つ。文の長さで幅が変わり、ガタついていた。
	   縦に積むときは幅をそろえる（内容の長さで大きさが決まる理由がない）。 */
	.l3-band ul { gap: 8px; }
	.l3-band li { width: 100%; }
}
/* 吹き出しの中も、行の長さをそろえる。
   幅まかせだと「近づく！」だけが2行目に残っていた。 */
.l3-balloon { text-wrap: balance; }
@media (max-width: 720px) {
	/* 縦に積んだとき、絵が左端に寄って右側が空いていた。
	   吹き出しは幅いっぱい、絵は真ん中に置く。 */
	.l3-flow-lead { gap: 10px; }
	.l3-flow-txt { width: 100%; }
	.l3-flow-txt .l3-balloon { width: 100%; text-align: center; }
	.l3-flow-lead > .l3-tiger { align-self: center; margin: 0 auto; }
}

/* ---- 短い強調文の折り返し ----
 * 最後の数文字だけが次の行に残る崩れが、LPのあちこちで出ていた。
 * 幅まかせで折り返すと、行の切れ目が「入るところまで入れる」で決まるため。
 * 該当する箇所を1つずつ直すのではなく、短い文はまとめて
 * 行の長さをそろえて折り返させる。
 */
.l3 :is(
	.l3-vs-note, .l3-bubble, .l3-seal, .l3-guard, .l3-corp-note,
	.l3-big, .l3-lead, .l3-sub, .l3-cantitle, .l3-title,
	.l3-band p, .l3-cta p, .l3-vs-goal span, .l3-faq-cta, .l3-ask, .l3-login
) {
	text-wrap: balance;
}
@media (max-width: 900px) {
	/* 縦に積んだら、背をそろえる理由が無くなる。
	   横に並んでいるときは「隣とそろえる」ために伸ばしていたが、
	   積んだあとも伸ばすと、絵の上に大きな空きができる。 */
	.l3-any { align-items: start; }
	.l3-any-main .l3-grid3 { flex: 0 0 auto; }
	.l3-dev { display: block; }
	.l3-dev img { margin-top: 12px; object-fit: contain; }
	.l3-maker { align-items: start; }
	.l3-maker-points { grid-auto-rows: auto; }
	.l3-corp-head { align-items: start; }
}
/* タイガーくんの絵は <div> で包んである（単独の行の <img> は
   WordPress が <p> で包んでしまい、位置の指定が効かなくなるため）。 */
.l3-tiger-wrap { display: flex; align-items: flex-end; }
@media (max-width: 900px) {
	/* 縦に積んだら、絵は真ん中に置く。左端に寄せる理由が無い。 */
	.l3-tiger-wrap { justify-content: center; width: 100%; }
	/* 会社名が2行に割れていた。狭い画面では少し小さくして収める。 */
	.l3-company h3 { font-size: 1rem; }
}

/* 並びの中に紛れ込む <br> を無効にする。
 *
 * LPの本文は固定ページに入れてあり、WordPress は要素と要素の間の改行を
 * <br> に変える。横並び・格子の中に入ると、それが1つの子として数えられ、
 * 行がまるまる1つ増える。
 * 実際、ヒーローのボタン2つの間に <br> が入り、8pxの指定なのに
 * 90px近く空いていた。
 *
 * 消しても、文章の途中の <br> には影響しない（対象は並びの直下だけ）。
 */
.l3 :is(
	.l3-hero-cta, .l3-tabs, .l3-grid2, .l3-grid3, .l3-grid4, .l3-grid5,
	.l3-band ul, .l3-scopes, .l3-qchips, .l3-checks, .l3-last-cta,
	.l3-plans, .l3-flow-lead, .l3-can-head, .l3-corp-head, .l3-maker,
	.l3-any, .l3-vs, .l3-last, .l3-steps, .l3-life ul, .l3-faq
) > br { display: none; }
/* 端末の絵。画像は余白を切ってあるので、並べ方はここで決める。
   横に並ぶときはカードの高さいっぱいに使い、下でそろえる。 */
.l3-dev img { object-position: center; }
@media (max-width: 900px) {
	/* 縦に積むと幅いっぱいに広がる。スマホは縦長なので、
	   高さで抑えないとスマホの絵だけ画面2つ分の高さになる。 */
	.l3-dev img {
		display: block; width: auto; max-width: 100%; height: auto;
		max-height: 300px; margin: 12px auto 0;
	}
}

/* ---- 受講者の詳細（管理者が開くモーダル） ----
 * 左にレーダーだけを置いていたため、左が空いて右に詰まっていた。
 * 中身を2列に配り直し、長い文（声かけの案）は幅いっぱいに置く。
 */
.fse-modal.is-wide { width: min(1040px, 100%); max-width: 1040px; }
.ld-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 16px; }
.ld-head-main h3 { margin: 0; font-size: 1.25rem; }
.ld-sub { margin: 4px 0 0; font-size: 0.8125rem; color: var(--muted); }
/* 受験予定日は、未登録でも欄を出す。消すと登録できないのか分からない。 */
.ld-head-exam { text-align: right; }
.ld-head-exam span { display: block; font-size: 0.75rem; color: var(--muted); }
.ld-head-exam b { font-size: 1.0625rem; color: var(--ink); }
.ld-head-exam small { display: block; font-size: 0.75rem; font-weight: 400; color: var(--accent); }
.ld-blank { font-size: 0.9375rem; font-weight: 400; color: var(--muted); }

.ld-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ld-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ld-block { min-width: 0; }
.ld-block h4 { margin: 0 0 8px; font-size: 0.9375rem; }

/* 総合理解度の推移。点数の動きは折れ線のほうが伝わる。 */
.ld-line { width: 100%; height: auto; }
.ld-line line { stroke: var(--line); stroke-width: 1; }
.ld-line path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.ld-line circle { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.ld-line-v { font-size: 10px; fill: var(--ink); text-anchor: middle; font-weight: 700; }
.ld-line-x { font-size: 9px; fill: var(--muted); text-anchor: middle; }

/* 苦手な細目。分野より細かく、次に解く場所が決まる。 */
.ld-topics { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: t; }
.ld-topics li { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; align-items: center; gap: 10px; }
.ld-topic-name { font-size: 0.8125rem; color: var(--ink); overflow-wrap: anywhere; }
.ld-topic-bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.ld-topic-bar i { display: block; height: 100%; background: #e0663b; }
.ld-topic-rate { font-size: 0.875rem; font-weight: 800; color: var(--ink); text-align: right; }
.ld-topic-rate small { display: block; font-size: 0.6875rem; font-weight: 400; color: var(--muted); }

/* 直近7日の学習量。目標に届いているかは、続くかどうかに直結する。 */
.ld-goal { margin-top: 10px; }
.ld-goal-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; }
.ld-goal-bar { display: block; height: 10px; margin: 6px 0 4px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.ld-goal-bar i { display: block; height: 100%; }
.ld-goal-bar i.is-ok { background: #2e9e5b; }
.ld-goal-bar i.is-mid { background: #d99a2b; }
.ld-goal-bar i.is-low { background: #d0553c; }

/* AI学習分析は文が長い。細い列に入れず、幅いっぱいに置く。
   このモーダルは、内側の余白を各ブロックが持っている（.fse-modal 自体は padding:0）。
   ここだけ左右の余白を付け忘れ、文が枠に張り付いていた。 */
.ld-advice-block { margin: 0; padding: 16px 22px 4px; border-top: 1px solid var(--line); }
.ld-advice { columns: 2; column-gap: 22px; }
.ld-advice li { break-inside: avoid; margin-bottom: 8px; }

@media (max-width: 860px) {
	.ld-head { grid-template-columns: minmax(0, 1fr) auto; }
	.ld-head-exam { grid-column: 1 / -1; text-align: left; }
	.ld-body { grid-template-columns: 1fr; }
	.ld-advice { columns: 1; }
}
.ld-goal-ok { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #e8f5ec; color: #2e7d4f; font-size: 0.6875rem; font-weight: 700; }

/* ---- 受講者の詳細ページ ----
 * モーダルから移した。中身の見た目（.ld-*）はそのまま使う。
 * ページでは枠が無いので、外側にカードの体裁を与える。
 */
.lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lp-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.lp-back:hover { color: var(--accent); }
.lp-switch { display: flex; align-items: center; gap: 8px; }
.lp-switch .btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; font-size: 0.8125rem; }
.lp-switch .btn:disabled { opacity: .4; cursor: default; }
.lp-pick select {
	max-width: 260px; height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line);
	border-radius: 8px; background: #fff; font-size: 0.8125rem; font-family: inherit;
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 10px center;
}
/* ページでは、モーダルの枠の代わりにカードで囲う。 */
#lp-body .ld-head { border-radius: 14px 14px 0 0; background: #fff; border: 1px solid var(--line); border-bottom: 0; }
#lp-body .ld-kpi { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#lp-body .ld-body,
#lp-body .ld-advice-block { background: #fff; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#lp-body .ld-advice-block { border-bottom: 1px solid var(--line); border-radius: 0 0 14px 14px; padding-bottom: 18px; }

@media (max-width: 720px) {
	.lp-bar { gap: 10px; }
	.lp-switch { width: 100%; }
	.lp-pick { flex: 1 1 auto; }
	.lp-pick select { max-width: none; width: 100%; }
}
/* 印刷したときは、操作の部分を出さない。面談の資料として配れるように。 */
@media print {
	.lp-bar, .appbar, .sidebar, .lp-switch { display: none !important; }
	#lp-body .ld-body { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LPの線画アイコン
   実体は inc/lp-icons.php が <body> 先頭に出す <symbol>。
   ここでは大きさ・色・文字との並べ方だけを決める。

   色は currentColor に任せる。紺の帯の中では白、白いカードの中では
   下の指定で青になる。形を色ごとに作り分けなくてよい。
   ============================================================ */
.l3-ico {
	flex: none;
	width: 1.5em; height: 1.5em;
	fill: none; stroke: currentColor;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
	vertical-align: -0.37em;  /* 0.38em（和文の中心）- 1.5em/2 */
}

/* 見出しは flex にする。行送りで折り返しても、文字だけが折り返して
   アイコンは左に残る。inline のままだと2行目が絵の下に潜り込む。 */
.l3 :is(
	.l3-wtag, .l3-ptag,
	.l3-card h3, .l3-dev h4, .l3-rbox h3, .l3-solo h3, .l3-cta h3,
	.l3-vs-side dt, .l3-life li > span, .l3-scopes li, .l3-company dt,
	.l3-maker .l3-sub
) {
	display: flex; align-items: center; gap: 8px;
}
/* 丸いピルは中身ぶんの幅。flex にすると行いっぱいに伸びる。 */
.l3 .l3-guard { display: inline-flex; align-items: center; gap: 8px; }
/* 見出しが2行になっても、絵は文字のかたまりの中心に置く。
   先頭行に合わせると、絵だけが上に浮いて見える。 */
.l3-card h3, .l3-vs-side dt, .l3-dev h4 { align-items: center; }

/* 白い面の上では青。文字と同じ濃さにすると、絵が主張しすぎる。 */
.l3 :is(.l3-card h3, .l3-dev h4, .l3-vs-side dt, .l3-scopes li,
        .l3-company dt, .l3-maker .l3-sub, .l3-cta h3, .l3-solo h3,
        .l3-faq p, .l3-plan .l3-for) .l3-ico { color: var(--l3-blue); }
.l3 .l3-cta.is-corp h3 .l3-ico { color: var(--l3-red); }
.l3-worry.is-org .l3-wtag .l3-ico { color: #fff; }

/* 章の締めの一文。文の頭に置き、中央そろえのまま行に乗せる。 */
.l3 :is(.l3-turn, .l3-band.is-thin, .l3-corp-note) .l3-ico {
	width: 1.9em; height: 1.9em; margin-right: 10px;
	vertical-align: -0.57em;  /* 0.38em（和文の中心）- 1.9em/2 */
}
/* 紺の帯の中は白、白地の上は青。同じ形のまま色だけ替える。 */
.l3 .l3-band.is-thin .l3-ico { color: var(--l3-yellow); }
.l3 :is(.l3-turn, .l3-corp-note) .l3-ico { color: var(--l3-blue); }

/* 帯の中の3つ。見出しが中央そろえなので、絵も中央に寄せる。 */
.l3-band li b { display: flex; align-items: center; justify-content: center; gap: 6px; }
.l3-band li b .l3-ico { color: var(--l3-blue); }

/* 比較表。番号付きの並びなので、絵は太字の中に入れて行頭をそろえる。 */
/* もとから display:block（見出しを1行占有）。inline-flex にすると
   説明文が同じ行に流れ込むので、flex のまま行を占有させる。 */
.l3-vs-col ol li b { display: flex; align-items: center; gap: 6px; }
.l3-vs-col.is-plain li b .l3-ico { color: var(--l3-muted); }
.l3-vs-col.is-ours li b .l3-ico { color: var(--l3-blue); }
.l3-vs-goal b { display: flex; align-items: center; gap: 8px; }

/* ヒーローの返金保証。文の先頭に盾を置く。 */
.l3-refund-txt .l3-ico { width: 1.6em; height: 1.6em; margin-right: 10px;
	vertical-align: -0.42em; color: var(--l3-red); }

/* よくある質問の答え。左の余白（Qバッジの分）はそのままに、行頭へ置く。 */
.l3-faq p .l3-ico { width: 1.55em; height: 1.55em; margin-right: 9px;
	vertical-align: -0.4em;  /* 0.38em（和文の中心）- 1.55em/2 */ }

/* 返金保証条件のボタン。 */
.l3-faq-cta a { display: inline-flex; align-items: center; gap: 10px; }

/* プランの対象者。1行の説明の頭に小さく添える。 */
.l3-plan .l3-for .l3-ico { margin-right: 6px; }

@media (max-width: 640px) {
	/* 画面が狭いと絵が場所を取りすぎる。文字を優先する。 */
	.l3 :is(.l3-turn, .l3-band.is-thin, .l3-corp-note) .l3-ico {
		width: 1.5em; height: 1.5em; vertical-align: -0.37em; }
	.l3-scopes li { gap: 6px; }
}

/* アイコンを入れたことで、もとの並びが崩れた分の手当て。 */

/* 中央そろえの見出しは、絵を入れても中央のまま。 */
.l3 :is(.l3-solo h3, .l3-cta h3, .l3-vs-side h3) { justify-content: center; }
/* カードの見出し。資料と同じく薄い青の丸に入れる。
   ただし5枚並びだとカードが細く、絵を横に置くと見出しが3行に割れる。
   絵は見出しの上に置き、文字には幅をすべて使わせる。 */
.l3 .l3-card:not(.is-point) h3 {
	flex-direction: column; align-items: flex-start; gap: 8px;
}
.l3-card h3 .l3-ico {
	box-sizing: content-box;
	width: 1.5em; height: 1.5em; padding: 0.46em;
	border-radius: 50%; background: #e8f0ff;
}
/* 縦に積む「開発会社の強み」だけは、絵を横に置いたままにする。
   1行の見出しなので割れない。 */
.l3-card.is-point h3 { gap: 9px; }
.l3-card.is-point h3 .l3-ico { width: 1.2em; height: 1.2em; padding: 0.34em; }

/* 端末カードは中身ぶんの高さ。右の「すきま時間」に合わせて引き伸ばすと、
   説明文と写真のあいだに大きな空きができる。 */
.l3-any .l3-grid3 { align-items: start; }

/* 文の行は flex にしない。
   <b> <em> <br> <wbr> がそれぞれ独立した「子」になり、語ごとにバラバラに並ぶ。
   絵は行の中に置いたまま、下の vertical-align で高さを合わせる。 */




/* 見出し・ラベルの文字は、まとめて1つの箱（.l3-t）に入れている。
   flex の子を「絵」と「文字の箱」の2つに保つため。
   <wbr> を直接の子にすると、1つずつが子として数えられ、
   gap のぶんだけ語の間に隙間が空く（見出し・FAQ・ボタンで実際に空いた）。 */
.l3 .l3-t { min-width: 0; }

/* 小さすぎて読めないところを、個別に大きくする。 */
.l3-band li b .l3-ico { width: 1.7em; height: 1.7em; }
.l3-dev h4 .l3-ico, .l3-rbox h3 .l3-ico, .l3-solo h3 .l3-ico,
.l3-cta h3 .l3-ico, .l3-maker .l3-sub .l3-ico { width: 1.7em; height: 1.7em; }
.l3-vs-side dt .l3-ico, .l3-vs-col ol li b .l3-ico,
.l3-vs-goal b .l3-ico { width: 1.6em; height: 1.6em; }
.l3-wtag .l3-ico, .l3-ptag .l3-ico, .l3-guard .l3-ico,
.l3-scopes li .l3-ico, .l3-company dt .l3-ico,
.l3-life li > span .l3-ico { width: 1.55em; height: 1.55em; }
.l3-plan .l3-for .l3-ico { width: 1.5em; height: 1.5em; vertical-align: -0.37em; }

@media (max-width: 720px) {
	/* 狭い画面では帯を上に回す。左に置くと本文が細くなりすぎる。 */
	.l3-company { grid-template-columns: 1fr; }
	.l3-company-tag { flex-direction: row; padding: 12px; }
	.l3-company-tag .l3-ico { width: 1.6em; height: 1.6em; }
}

/* 甲種特類。1〜7類とは別枠の資格なので、印の色を分ける。 */
.l3-q.is-toku { background: var(--l3-navy); }

/* ------------------------------------------------------------------
   「あわせて学習する類」
   素のチェックボックスのままだと、設定画面の中で浮いて見える。
   ほかの入力欄と同じ「囲みのある一区画」として作る。
   ------------------------------------------------------------------ */
.lc {
	padding: 16px 18px 14px;
	border: 1px solid var(--line, #e2e8f0);
	border-radius: 12px;
	background: var(--surface, #f8fafc);
}
.lc-head {
	display: flex; align-items: flex-start; justify-content: space-between;
	gap: 16px; margin-bottom: 12px;
}
.lc-head label { margin: 0; }
.lc-lead { margin: 2px 0 0; font-size: 0.8125rem; color: var(--muted, #64748b); }

/* 残りいくつ選べるかは、数字とゲージの両方で出す。数字だけだと見落とされる。 */
.lc-count { flex: none; text-align: right; }
.lc-count b { display: block; font-size: 1.125rem; line-height: 1.2; }
.lc-count span { font-size: 0.75rem; color: var(--muted, #64748b); }
.lc-meter {
	display: block; width: 88px; height: 5px; margin-top: 5px;
	border-radius: 999px; background: #dfe6f0; overflow: hidden;
}
.lc-meter i {
	display: block; height: 100%; width: 0;
	background: var(--brand, #1b63d8); border-radius: 999px;
	transition: width .18s ease;
}

.lc-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
	gap: 8px;
}

/* 1つ分。チェックボックスそのものは隠し、枠と印で状態を示す。 */
.lc-item {
	/* 1行に収める。折り返すと、札の付く「受験する類」だけ背が高くなる。 */
	position: relative; display: flex; align-items: center; gap: 9px;
	flex-wrap: nowrap; min-height: 46px;
	padding: 11px 12px; border: 1.5px solid var(--line, #e2e8f0);
	border-radius: 10px; background: #fff; cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.lc-item input { position: absolute; opacity: 0; pointer-events: none; }
.lc-item:hover { border-color: #b9c8de; }

.lc-tick {
	flex: none; width: 18px; height: 18px; border-radius: 5px;
	border: 1.5px solid #c3cede; background: #fff;
	display: grid; place-items: center;
}
.lc-tick::after {
	content: ""; width: 9px; height: 5px; margin-top: -2px;
	border-left: 2px solid #fff; border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scale(.6); opacity: 0;
	transition: opacity .12s ease, transform .12s ease;
}
.lc-name { font-size: 0.875rem; font-weight: 700; white-space: nowrap; }

/* 選択中 */
.lc-item:has(input:checked) {
	border-color: var(--brand, #1b63d8); background: #eef4ff;
}
.lc-item:has(input:checked) .lc-tick {
	background: var(--brand, #1b63d8); border-color: var(--brand, #1b63d8);
}
.lc-item:has(input:checked) .lc-tick::after { opacity: 1; transform: rotate(-45deg) scale(1); }

/* 受験する類。外せないので、チェックではなく「固定」だと分かる見た目にする。 */
.lc-tag {
	display: none; margin-left: auto; padding: 2px 6px; border-radius: 999px;
	background: var(--brand, #1b63d8); color: #fff;
	font-size: 0.625rem; font-weight: 700; white-space: nowrap; letter-spacing: -.02em;
}
.lc-item.is-fixed { cursor: default; }
.lc-item.is-fixed .lc-tag { display: inline-block; }

/* 上限に達して選べないもの。押せないことが分かればよいので、薄くするだけ。 */
.lc-item.is-off { opacity: .4; cursor: default; }
.lc-item.is-off:hover { border-color: var(--line, #e2e8f0); }

.lc-note { margin: 10px 0 0; font-size: 0.8125rem; color: var(--muted, #64748b); }
.lc-note.is-full { color: #b06a00; font-weight: 700; }

@media (max-width: 640px) {
	.lc { padding: 14px; }
	.lc-head { flex-direction: column; gap: 8px; }
	.lc-count { text-align: left; }
	.lc-meter { width: 120px; }
	.lc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* 実際の画面を3枚並べる（施主ご要望 2026-09-07）。
   作り物の絵ではなく本番の画面をそのまま貼るので、枠は画像側に焼いてある。 */
.l3-shots-lead { margin: 26px 0 10px; font-weight: 800; text-align: center; }
.l3-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l3-shots figure { margin: 0; }
.l3-shots img {
	display: block; width: 100%; height: auto;
	/* 縦横比は画像側でそろえてある（shots3.py が台紙に載せている）。
	   ここで cover にすると、わずかな差で左右が切られてナビが欠ける。 */
	aspect-ratio: 4 / 3; object-fit: contain; object-position: top;
	border-radius: 10px;
}
.l3-shots figcaption {
	margin-top: 8px; text-align: center;
	font-size: 0.875rem; font-weight: 800; color: var(--l3-navy);
}
@media (max-width: 860px) {
	.l3-shots { grid-template-columns: 1fr; gap: 20px; }
	.l3-shots img { aspect-ratio: auto; }
}

/* ------------------------------------------------------------------
   ページ内の案内（施主ご要望 2026-09-07「TOPに各ページへ移動できるボタン」）
   ヒーローを過ぎたら画面上部に貼り付く。
   13章すべてを並べると読めないので、訪問者が探しに来る7つに絞っている。
   ------------------------------------------------------------------ */
.l3-nav {
	/* LPの色は .l3 の中でしか定義されていない。ナビはその外にあるので、
	   ここで持ち直す。持たないと var() が空になり、CTAの赤が消える（実際に消えた）。 */
	--l3-navy: #123a8c;
	--l3-blue: #1b63d8;
	--l3-red: #d7132a;
	--l3-ink: #17233a;
	--l3-line: #dbe2ee;

	position: sticky; top: 0; z-index: 30;
	background: #fff;
	border-bottom: 1px solid var(--l3-line);
	/* 帯だと分かるように、下に薄く影を落とす。
	   背景だけだと本文と地続きに見えて、案内だと気づかれない。 */
	box-shadow: 0 2px 10px rgba(18, 51, 110, 0.06);
}
.l3-nav-in {
	display: flex; align-items: center; gap: 2px;
	max-width: 1180px; margin: 0 auto; padding: 0 20px;
	overflow-x: auto; scrollbar-width: none;
}
.l3-nav-in::-webkit-scrollbar { display: none; }
.l3-nav a {
	flex: none; padding: 15px 13px; color: var(--l3-ink);
	font-size: 0.875rem; font-weight: 800; text-decoration: none;
	border-bottom: 3px solid transparent; white-space: nowrap;
	transition: color .12s ease, border-color .12s ease;
}
/* 項目の区切り。文字だけを並べると、どこまでが1つか分かりにくい。 */
.l3-nav a + a:not(.l3-nav-cta)::before {
	content: ""; position: absolute; margin-left: -14px;
	width: 1px; height: 14px; background: var(--l3-line);
	transform: translateY(3px);
}
.l3-nav a:hover { color: var(--l3-blue); border-bottom-color: var(--l3-blue); }

/* 申し込みだけは色を変えて、押す先だと分かるようにする。 */
.l3-nav .l3-nav-cta {
	margin-left: auto; padding: 9px 20px; border-radius: 999px;
	background: var(--l3-red); color: #fff; border-bottom: 0;
}
.l3-nav .l3-nav-cta:hover { background: #a80f21; color: #fff; border-bottom-color: transparent; }

/* 貼り付くナビの分だけ、飛び先を下にずらす。無いと見出しがナビの裏に隠れる。 */
.l3[id] { scroll-margin-top: 58px; }

@media (max-width: 640px) {
	.l3-nav-in { padding: 0 12px; }
	.l3-nav a { padding: 13px 10px; font-size: 0.8125rem; }
	.l3-nav .l3-nav-cta { margin-left: 8px; padding: 8px 15px; }
}

/* ==========================================================================
   オフラインの確認用の帯（?offline=1 のときだけ出る）
   実際に通信が切れているわけではないと分かるよう、必ず「確認用」と書く。
   ========================================================================== */
#fse-offline-debug {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0));
  background: #8a5a00; color: #fff; font-size: 0.8125rem; line-height: 1.6;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
#fse-offline-debug .fse-od-tag {
  flex: none; background: #fff; color: #8a5a00; font-weight: 800;
  padding: 2px 10px; border-radius: 999px; font-size: 0.75rem;
}
#fse-offline-debug .fse-od-text { flex: 1; min-width: 0; }
#fse-offline-debug .fse-od-off {
  flex: none; color: #fff; text-decoration: underline; font-weight: 700;
}

/* オフラインで読めなかった枠。空欄や 0 を残さず、理由を書く。 */
.fse-offline-box {
  padding: 22px 20px; border: 1px dashed var(--line); border-radius: 12px;
  background: var(--surface); text-align: center;
}
.fse-offline-title { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 800; color: var(--body); }
.fse-offline-text { margin: 0; font-size: 0.8125rem; line-height: 1.8; color: var(--muted); }

/* 送信待ちの帯に置く「いま送る」。
   自動で送ってはいるが、残っているときに自分で押せる逃げ道を用意する
   （ホーム画面から起動したアプリは、背面から戻っても読み込みが起きないため）。 */
.fse-net-send {
  margin-left: 4px; padding: 2px 10px; border-radius: 999px;
  border: 1.5px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 0.75rem; font-weight: 700;
  cursor: pointer; line-height: 1.6;
}
.fse-net-send:hover { background: rgba(0, 0, 0, .06); }

/* ======================================================================
   無料お試しのお申し込み（カード登録なし）

   チラシのQRからお越しになる方の入口。使われ方が3通りあるので、
   幅ごとに組み替える（施主ご指示 2026-09-30）。
     スマートフォン … 展示会場で立ったまま。1列・大きな入力欄・親指で押せる送信
     タブレット     … ブースに置いた端末。1列のまま、氏名と地域は横に並べる
     パソコン       … 後日あらためて見る。左に内容、右に申込欄の2段組み
   ====================================================================== */
.trial { width: 100%; padding: 8px 0 48px; }
.trial-grid { display: grid; gap: 22px; max-width: 560px; margin: 0 auto; }

/* 左の説明。狭い画面では申込欄の上に短く出す。 */
.trial-pitch { min-width: 0; }
.trial-pitch-title { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.45; }
.trial-pitch-lead { margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.85; color: var(--muted); }
.trial-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.trial-points li {
	display: grid; gap: 2px; padding-left: 26px; position: relative;
}
.trial-points li::before {
	content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px;
	border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
	transform: rotate(-45deg);
}
.trial-point-t { font-size: 0.9375rem; font-weight: 700; }
.trial-point-b { font-size: 0.84375rem; line-height: 1.75; color: var(--muted); }

.trial-card { padding: 22px 20px; }
.trial-lead { margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.8; color: var(--muted); }
.trial-lead b { color: var(--ink); }
.trial-closed {
	margin: 0; padding: 14px 16px; border-radius: 10px;
	background: #FFF8E9; border: 1px solid #F0DDBB; color: #8A6516;
	font-size: 0.9375rem; font-weight: 700; line-height: 1.8;
}

.trial-row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trial-pair { display: grid; gap: 0; }
.trial-label { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.trial-row input[type="text"],
.trial-row input[type="email"],
.trial-row select {
	width: 100%; padding: 13px 14px; font: inherit; font-size: 1rem;
	border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
	/* iOS は16px未満の入力欄で画面を勝手に拡大する。1rem を下回らせない。 */
	min-height: 48px;
}
/* 自前の矢印を描く。appearance:none だけだと、選ぶ欄に見えない（施主ご指摘 2026-09-30）。 */
.trial-row select {
	appearance: none; -webkit-appearance: none;
	padding-right: 40px; cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}
.trial-row input:focus, .trial-row select:focus {
	outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand);
}
.trial-hint { font-size: 0.78125rem; color: var(--muted); line-height: 1.6; }

/* 個人／法人の切り替え。指で押すので大きく。 */
.trial-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trial-segbtn { position: relative; }
.trial-segbtn input { position: absolute; opacity: 0; width: 0; height: 0; }
.trial-segbtn span {
	display: block; padding: 13px 10px; text-align: center; cursor: pointer;
	border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
	font-size: 0.9375rem; font-weight: 700; color: var(--muted); min-height: 48px;
}
.trial-segbtn input:checked + span {
	border-color: var(--brand); color: var(--brand); background: #EEF2FF; border-width: 2px; padding: 12px 9px;
}
.trial-segbtn input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 機械よけ。display:none だと埋めない機械がいるので、画面の外へ逃がす。 */
.trial-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.trial-req {
	display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 4px;
	background: rgba(223, 27, 65, .1); color: var(--danger, #df1b41);
	font-size: 0.6875rem; font-weight: 800; letter-spacing: .04em; vertical-align: 1px;
}
.trial-note {
	margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
	background: #F1F6FF; border: 1px solid #D3E0F5;
	font-size: 0.84375rem; line-height: 1.75; color: var(--ink);
}
.trial-note b { color: var(--brand); }
.trial-terms { margin: 4px 0 14px; font-size: 0.78125rem; line-height: 1.7; color: var(--muted); }
/* 送信ボタンの色は、埋まっていてもいなくても同じにする。
   状態で色を変えると、どちらが押せるのか分かりにくい（施主ご指摘 2026-09-30）。
   足りない欄があるときは、押したその場で何が足りないかを文字で伝える。 */
.trial-submit.is-locked {
	background: var(--brand); color: #fff; border: 0; opacity: 1;
}
.trial-error {
	margin: 0 0 12px; padding: 12px 14px; border-radius: 10px;
	background: rgba(223, 27, 65, .08); border: 1px solid rgba(223, 27, 65, .35);
	color: var(--danger, #df1b41); font-size: 0.875rem; font-weight: 700; line-height: 1.7;
}
.trial-submit { width: 100%; padding: 15px; font-size: 1rem; min-height: 52px; }
.trial-submit[aria-busy="true"] { opacity: .7; }

/* 完了画面 */
.trial-done-title { margin: 0 0 8px; font-size: 1.125rem; }
.trial-done-lead { margin: 0 0 18px; font-size: 0.9375rem; line-height: 1.8; color: var(--muted); }
.trial-done-lead b { color: var(--ink); font-size: 1.0625rem; }
.trial-cred {
	margin: 0 0 18px; padding: 14px 16px; border-radius: 10px;
	background: var(--bg-soft, #f7f8fb); border: 1px solid var(--line);
}
.trial-cred-row { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; }
.trial-cred-row span { flex: 0 0 90px; font-size: 0.78125rem; color: var(--muted); font-weight: 700; }
.trial-cred-row b {
	flex: 1 1 auto; min-width: 0; font-size: 1rem; word-break: break-all;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.trial-share, .trial-invite {
	margin: 0 0 18px; padding: 14px 16px; border-radius: 10px;
	background: #F1F6FF; border: 1px solid #D3E0F5;
}
.trial-share-title { margin: 0 0 6px; font-size: 0.875rem; font-weight: 800; color: var(--brand); }
.trial-share-body { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.7; color: var(--muted); }
.trial-invite-url {
	width: 100%; padding: 10px 12px; font: inherit; font-size: 0.8125rem;
	border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.trial-go { display: block; width: 100%; padding: 15px; text-align: center; font-size: 1rem; min-height: 52px; }
.trial-center { text-align: center; margin-top: 10px; }

/* --- スマートフォン ------------------------------------------------- */
@media (max-width: 640px) {
	/* 左右に必ず余白を取る。画面の端まで文字や枠が寄ると窮屈で、
	   端末の角の丸みにも掛かる（施主ご指摘 2026-09-30）。 */
	.trial { padding: 14px 16px 36px; }
	.trial-grid { gap: 18px; }
	.trial-card { padding: 20px 18px; }
	.trial-pitch { padding: 0 2px; }
	.trial-pitch-title { font-size: 1.1875rem; margin-bottom: 8px; }
	/* 立ったまま入力される。説明で画面を埋めず、申込欄をすぐ出す。 */
	.trial-points { display: none; }
	.trial-pitch-lead { margin-bottom: 0; font-size: 0.875rem; }
	.trial-row { margin-bottom: 18px; }
	.trial-terms { margin: 8px 0 16px; }
	/* 送信ボタンは指の届くところに。下端ぎりぎりに置かない。 */
	.trial-submit, .trial-go { margin-bottom: 4px; }
	.trial-cred-row { flex-direction: column; gap: 2px; }
	.trial-cred-row span { flex: none; }
	.trial-done-title { font-size: 1.0625rem; }
}

/* --- タブレット ----------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1023px) {
	.trial-grid { max-width: 640px; gap: 24px; }
	.trial-card { padding: 26px 26px; }
	.trial-pitch-title { font-size: 1.5rem; }
	/* 横幅に余裕があるので、名前と地域を1行に収めて縦を短くする。 */
	.trial-pair { grid-template-columns: 1fr 1fr; gap: 0 16px; }
	.trial-points { flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }
	.trial-points li { flex: 1 1 calc(50% - 20px); }
}

/* --- パソコン ------------------------------------------------------- */
@media (min-width: 1024px) {
	.trial { padding: 24px 0 64px; }
	.trial-grid {
		max-width: 1060px;
		grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
		gap: 48px; align-items: start;
	}
	.trial-pitch { position: sticky; top: 24px; padding-top: 6px; }
	.trial-pitch-title { font-size: 1.75rem; }
	.trial-pitch-lead { font-size: 1rem; }
	.trial-card { padding: 30px 30px; }
	.trial-pair { grid-template-columns: 1fr 1fr; gap: 0 16px; }
	/* 完了画面は説明が要らないので、中央に寄せて読みやすくする。 */
	.trial-grid:has(.trial-done:not([hidden])) { grid-template-columns: minmax(0, 620px); justify-content: center; }
	.trial-grid:has(.trial-done:not([hidden])) .trial-pitch { display: none; }
}

/* ----------------------------------------------------------------------
   お試し中の帯（アプリのどの画面にも出す）
   ---------------------------------------------------------------------- */
.trial-band {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
	background: #EEF2FF; border: 1px solid #C9D6F5; font-size: 0.875rem;
}
.trial-band.is-soon { background: #FFF8E9; border-color: #F0DDBB; }
.trial-band.is-over { background: rgba(223, 27, 65, .07); border-color: rgba(223, 27, 65, .3); }
.trial-band-tag {
	flex: 0 0 auto; padding: 2px 10px; border-radius: 999px;
	background: var(--brand); color: #fff; font-size: 0.71875rem; font-weight: 800;
}
.trial-band.is-soon .trial-band-tag { background: #B26B00; }
.trial-band.is-over .trial-band-tag { background: var(--danger, #df1b41); }
.trial-band-body { flex: 1 1 200px; min-width: 0; line-height: 1.6; }
.trial-band-cta {
	flex: 0 0 auto; padding: 7px 14px; border-radius: 8px;
	background: var(--brand); color: #fff; text-decoration: none;
	font-size: 0.8125rem; font-weight: 700;
}

/* ----------------------------------------------------------------------
   お試しが終わったときのご案内
   ---------------------------------------------------------------------- */
.trial-over {
	position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
	padding: 20px; background: rgba(16, 22, 30, .55);
}
.trial-over-box {
	max-width: 460px; width: 100%; background: #fff; border-radius: 14px;
	padding: 26px 24px calc(24px + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 18px 50px rgba(16, 22, 30, .3);
}
.trial-over-title { margin: 0 0 10px; font-size: 1.125rem; }
.trial-over-lead { margin: 0 0 8px; font-size: 0.9375rem; line-height: 1.8; }
.trial-over-note { margin: 0 0 20px; font-size: 0.875rem; line-height: 1.8; color: var(--muted); }
.trial-over-actions { display: flex; flex-direction: column; gap: 10px; }
.trial-over-actions .btn { width: 100%; padding: 14px; text-align: center; }

@media (max-width: 640px) {
	.trial { padding: 4px 0 30px; }
	.trial-card { padding: 18px 16px; }
	.trial-cred-row { flex-direction: column; gap: 2px; }
	.trial-cred-row span { flex: none; }
}


/* 組織管理からの返金申請への導線（施主ご指示 2026-09-30）。 */
.org-refund-link {
	display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
	margin-bottom: 16px;
}
.org-refund-body { flex: 1 1 260px; min-width: 0; }
.org-refund-title { margin: 0 0 4px; font-size: 0.9375rem; font-weight: 700; }
.org-refund-note { margin: 0; font-size: 0.8125rem; line-height: 1.75; color: var(--muted); }
.org-refund-link .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
	.org-refund-link .btn { width: 100%; text-align: center; }
}


/* 返金条件の内訳。<table> を使えない場所なので grid で桁を揃える
   （<label> の中の <span> に表を置くと、ブラウザが外へ押し出す）。 */
.rf-j-grid { display: block; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rf-j-row {
	display: grid; grid-template-columns: 5.5em 6em 1fr 1fr 2.5em;
	gap: 8px; align-items: center; padding: 6px 10px;
	font-size: 0.78125rem; border-top: 1px solid var(--line);
}
.rf-j-row:first-child { border-top: 0; }
.rf-j-row.is-head { background: var(--bg-soft, #f7f8fb); font-weight: 700; color: var(--muted); }
.rf-j-row.is-ng { background: rgba(223, 27, 65, .05); }
.rf-j-mark { text-align: center; font-weight: 800; }
.rf-j-row.is-ok .rf-j-mark { color: #1e7a4d; }
.rf-j-row.is-ng .rf-j-mark { color: var(--danger, #df1b41); }
.rf-j-empty { display: block; padding: 10px; font-size: 0.78125rem; color: var(--muted); }
@media (max-width: 640px) {
	.rf-j-row { grid-template-columns: 4.5em 1fr 2.2em; row-gap: 2px; }
	.rf-j-row > span:nth-child(3) { grid-column: 2; }
	.rf-j-row > span:nth-child(4) { grid-column: 2; }
	.rf-j-row.is-head > span:nth-child(3),
	.rf-j-row.is-head > span:nth-child(4) { display: none; }
}


/* 異議申し立ての案内（施主ご指示 2026-09-30）。 */
.rf-appeal {
	margin: 0 0 16px; padding: 14px 16px; border-radius: 10px;
	background: #FFF8E9; border: 1px solid #F0DDBB;
}
.rf-appeal-title { margin: 0 0 6px; font-size: 0.875rem; font-weight: 800; color: #8A6516; }
.rf-appeal-body { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.8; color: var(--muted); }
.rf-appeal-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8125rem; line-height: 1.7; cursor: pointer; }
.rf-appeal-check input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: #B26B00; cursor: pointer; }
.rf-item.is-appeal { opacity: 1; }
.rf-item.is-appeal .rf-judge { border-color: #F0DDBB; }


/* 返金理由。事情を書き添えられるよう複数行（施主ご指示 2026-09-30）。 */
.rf-reason {
	width: 100%; padding: 11px 13px; font: inherit; font-size: 0.9375rem; line-height: 1.8;
	border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
	resize: vertical; min-height: 96px;
}
.rf-reason:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.rf-reason-hint { display: block; margin-top: 6px; font-size: 0.78125rem; line-height: 1.7; color: var(--muted); }


/* 不合格通知（PDF）の添付（施主ご要望 2026-09-30）。
   返金のお申し出に必要な書類。お一人につき1枚。 */
.ex-proof { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-proof-pick { display: inline-flex; align-items: center; cursor: pointer; }
.ex-proof-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ex-proof-pick span {
	display: inline-block; padding: 5px 12px; border-radius: 7px;
	border: 1.5px dashed var(--line); background: #fff; color: var(--muted);
	font-size: 0.78125rem; font-weight: 700;
}
.ex-proof-pick:hover span { border-color: var(--brand); color: var(--brand); }
/* 登録の欄に並ぶ添付ボタン。ファイル名が長くても行を壊さない。 */
.ex-in-proof-pick span {
	max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-proof-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ex-proof.has .ex-proof-link {
	display: inline-block; padding: 5px 12px; border-radius: 7px;
	background: var(--accent-soft, #EEF2FF); color: var(--brand);
	font-size: 0.78125rem; font-weight: 700; text-decoration: none;
	border: 1.5px solid transparent;
}
.ex-proof.has .ex-proof-link:hover { border-color: var(--brand); }
.ex-proof-name {
	font-size: 0.71875rem; color: var(--muted); max-width: 16em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-proof-del {
	border: 0; background: transparent; color: var(--danger, #df1b41);
	font: inherit; font-size: 0.71875rem; cursor: pointer; padding: 2px 4px;
}
.ex-note-proof {
	margin: 10px 0 0; padding: 10px 12px; border-radius: 9px;
	background: #FFF8E9; border: 1px solid #F0DDBB; color: var(--ink);
	font-size: 0.78125rem; line-height: 1.8;
}
.ex-note-proof b { color: #8A6516; }


/* 完了画面の「課金開始日」。申し込んだ直後にいちばん知りたいところなので、
   金額と同じ重さで見えるようにする（施主ご指示 2026-09-30）。 */
.co-done-charge-from dd b { font-size: 1.125rem; font-weight: 700; }
.co-done-charge-from { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.co-done-trial dd { color: var(--muted); }


/* 不合格通知が未提出の方（返金申請の画面）。 */
.rf-proof-ng {
	display: block; margin-top: 4px; font-size: 0.78125rem; line-height: 1.7;
	color: var(--danger, #df1b41); font-weight: 700;
}
.rf-proof-ng a { color: inherit; }


/* 苦手な細目の列見出し（施主ご指摘 2026-09-30 / 0930-04）。
   数字だけだと「42問中31問正解」と読まれてしまうため、何の数かを書く。 */
.topic-row.is-head {
	pointer-events: none; background: transparent; border: 0; padding-top: 0; padding-bottom: 4px;
	font-size: 0.6875rem; font-weight: 700; color: var(--muted); letter-spacing: .04em;
}
.topic-row.is-head .topic-num,
.topic-row.is-head .topic-cnt { font-size: 0.6875rem; font-weight: 700; color: var(--muted); }
.topic-cnt small { font-weight: 400; color: var(--muted); }


/* 受講者詳細の「見る類」切り替え（施主ご指摘 2026-09-30 / 0930-03）。 */
.ld-classes {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
	background: var(--bg-soft, #f7f8fb); border: 1px solid var(--line);
}
.ld-classes-cap { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.ld-class {
	display: inline-flex; align-items: baseline; gap: 6px; cursor: pointer;
	padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--line);
	background: #fff; color: var(--muted); font: inherit; font-size: 0.84375rem; font-weight: 700;
}
.ld-class small { font-weight: 400; font-size: 0.71875rem; }
.ld-class.is-on { border-color: var(--brand); color: var(--brand); background: #EEF2FF; }
.ld-class:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ld-classes-note { flex: 1 1 100%; font-size: 0.75rem; color: var(--muted); }

/* ダッシュボードの「受験の結果をご登録ください」。
   学習の邪魔をしない程度に目立たせる。叱る見た目にはしない。 */
.dash-due {
	display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center;
	margin: 0 0 16px; padding: 14px 18px; border-radius: 12px;
	border: 1px solid rgba(178, 107, 0, .32); background: rgba(255, 246, 232, .9);
}
.dash-due-title { flex: 0 0 100%; margin: 0; font-size: 0.9375rem; font-weight: 700; color: #7A4B00; }
.dash-due-text { flex: 1 1 320px; margin: 0; font-size: 0.8125rem; line-height: 1.8; color: var(--muted); }
.dash-due-go { flex: 0 0 auto; }
@media (max-width: 600px) {
	.dash-due-go { width: 100%; text-align: center; }
}