/* 研修振り返りクイズ 共通スタイル（全コース共有） */
    /* ===== デザイントークン：全体で使う色・余白・書体を一元管理 ===== */
    :root {
      --bg: #E7E4DC;
      /* 背景：温かみのある淡いグレージュ */
      --card: #FBFAF6;
      /* カード面：ほぼ白。背景と差をつけて浮かせる */
      --ink: #26241F;
      /* 基本文字色：純黒を避けた温かいダークブラウン */
      --ink-soft: #6A675E;
      /* 補助文字色：説明文やラベル用の中間トーン */
      --line: #D8D4C8;
      /* 罫線・境界線の色 */
      --amber: #E89B2C;
      /* アクセント1：温かい琥珀色 */
      --blue: #4866BE;
      /* アクセント2：澄んだ青 */
      --ok: #3FA088;
      /* 正解を示す穏やかな緑 */
      --ng: #DC5337;
      /* 不正解を示す朱色 */
      --level-high: #DC5337;
      /* 到達度：高 */
      --level-uppermid: #E89B2C;
      /* 到達度：やや高 */
      --level-mid: #3FA088;
      /* 到達度：標準 */
      --level-low: #4866BE;
      /* 到達度：再確認 */
      --radius: 18px;
      /* カードの角丸の基準値 */
      --shadow: 0 18px 40px -22px rgba(40, 36, 28, .45);
      /* 浮遊感を出す共通の影 */
    }

    /* ===== リセットとベース：箱の計算方法とマージンを統一 ===== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    /* 端末による文字サイズの自動調整を止める */
    html {
      -webkit-text-size-adjust: 100%
    }

    /* ページ全体の書体・背景・レイアウト方向 */
    body {
      font-family: "Zen Kaku Gothic New", system-ui, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.75;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      /* 背景に淡いグラデーションを敷き、テーマを示唆する */
      background-image:
        radial-gradient(60% 50% at 12% 8%, rgba(72, 102, 190, .10), transparent 70%),
        radial-gradient(55% 50% at 88% 6%, rgba(232, 155, 44, .12), transparent 70%),
        radial-gradient(55% 55% at 90% 95%, rgba(220, 83, 55, .10), transparent 70%),
        radial-gradient(55% 55% at 8% 94%, rgba(63, 160, 136, .10), transparent 70%);
    }

    /* ===== レイアウトの外枠：中央寄せして読みやすい幅に制限 ===== */
    .wrap {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 32px 20px 56px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* ===== 共通ブランドヘッダー ===== */
    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-bottom: 26px;
    }

    .site-brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--ink);
      text-decoration: none;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      object-fit: contain;
    }

    .brand-fallback {
      display: none;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 9px;
      color: #fff;
      background: var(--ink);
      font: 700 11px/1 "Space Grotesk", sans-serif;
    }

    .brand-name {
      font: 600 14px/1.2 "Space Grotesk", sans-serif;
      letter-spacing: .04em;
    }

    .header-meta {
      color: var(--ink-soft);
      font: 600 11px/1.2 "Space Grotesk", sans-serif;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    /* ===== 小見出しラベル（英字のアクセント） ===== */
    .eyebrow {
      font-family: "Space Grotesk", sans-serif;
      font-size: 12px;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 600;
    }

    /* ===== カード：各画面の共通コンテナ ===== */
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 34px 30px;
    }

    /* ===== 画面の切り替え：display で表示/非表示を管理 ===== */
    .screen {
      display: none
    }

    /* 表示中の画面 */
    .screen.active {
      display: block;
      animation: fade .5s ease both
    }

    /* 表示時にふわっと出すアニメーション */
    @keyframes fade {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ===== イントロ画面：タイトルと説明 ===== */
    .intro h1 {
      font-size: clamp(28px, 6.4vw, 42px);
      font-weight: 900;
      line-height: 1.25;
      margin: 14px 0 6px;
      letter-spacing: .01em;
    }

    /* タイトル下の英語サブタイトル */
    .intro .sub {
      font-family: "Space Grotesk", sans-serif;
      color: var(--ink-soft);
      font-size: 14px;
      letter-spacing: .16em;
      margin-bottom: 22px;
    }

    /* イントロの本文 */
    .intro p {
      color: var(--ink-soft);
      margin-bottom: 14px
    }

    /* ===== 研修の軸を示すミニカード（2枚でも3枚でも等幅に並ぶ） ===== */
    .preview {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 8px;
      margin: 24px 0 28px;
    }

    /* ミニカード本体 */
    .preview .q {
      border-radius: 12px;
      padding: 14px 16px;
      color: #fff;
      min-height: 84px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    /* ミニカードの見出し */
    .preview .q b {
      font-weight: 900;
      font-size: 16px;
      display: block
    }

    /* ミニカードの補足文 */
    .preview .q span {
      font-size: 12px;
      opacity: .92
    }

    /* ミニカードの色：pe=青 / pa=琥珀 / pg=緑 */
    .preview .q.pe {
      background: var(--blue)
    }

    .preview .q.pa {
      background: var(--amber)
    }

    .preview .q.pg {
      background: var(--ok)
    }

    /* ===== 出題順シャッフルの切り替え ===== */
    .shuffle-toggle {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      margin: 0 0 22px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .5);
      cursor: pointer;
    }

    .shuffle-toggle input {
      flex: none;
      width: 17px;
      height: 17px;
      margin-top: 4px;
      accent-color: var(--blue);
      cursor: pointer;
    }

    .shuffle-toggle b {
      display: block;
      font-size: 14px;
      font-weight: 700;
    }

    .shuffle-toggle small {
      display: block;
      margin-top: 3px;
      color: var(--ink-soft);
      font-size: 12px;
      line-height: 1.65;
    }

    .shuffle-toggle input:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 2px;
    }

    /* ===== 画面には出さず、スクリーンリーダーにだけ読ませる領域 ===== */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      white-space: nowrap;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
    }

    /* ===== ボタン共通スタイル ===== */
    .btn {
      font-family: inherit;
      font-weight: 700;
      font-size: 16px;
      border: none;
      border-radius: 999px;
      padding: 15px 30px;
      cursor: pointer;
      color: #fff;
      background: var(--ink);
      transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    }

    /* ボタンにマウスを乗せたときの浮き上がり */
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 24px -10px rgba(38, 36, 31, .6)
    }

    /* 押し込んだ瞬間の見た目 */
    .btn:active {
      transform: translateY(0)
    }

    /* キーボード操作時のフォーカス枠 */
    .btn:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 3px
    }

    /* 控えめなセカンダリボタン */
    .btn.ghost {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--line);
    }

    /* セカンダリボタンのホバー */
    .btn.ghost:hover {
      box-shadow: none;
      border-color: var(--ink-soft)
    }

    /* ===== 質問画面のヘッダー：進捗表示 ===== */
    .qhead {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    /* 「03 / 16」のカウンター */
    .counter {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 600;
      color: var(--ink-soft);
      font-size: 14px;
      letter-spacing: .06em;
    }

    /* カウンターの現在値を強調 */
    .counter b {
      color: var(--ink);
      font-size: 18px
    }

    /* 出題テーマのラベル */
    .theme-tag {
      font-size: 12px;
      font-weight: 700;
      color: var(--ink-soft);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 12px;
      background: rgba(255, 255, 255, .5);
    }

    /* ===== 進捗バー ===== */
    .bar {
      height: 6px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 28px;
    }

    /* 進捗バーの中で伸びる部分 */
    .bar i {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--blue), var(--amber));
      border-radius: 999px;
      transition: width .4s ease;
    }

    /* ===== 場面設定の文（設問の前置き） ===== */
    .scene {
      border-left: 4px solid var(--line);
      padding-left: 14px;
      color: var(--ink-soft);
      font-size: 14.5px;
      margin-bottom: 16px;
    }

    /* ===== 質問文 ===== */
    .qtext {
      font-size: clamp(19px, 4.2vw, 24px);
      font-weight: 700;
      line-height: 1.55;
      margin-bottom: 24px;
    }

    /* ===== 選択肢のリスト ===== */
    .opts {
      display: flex;
      flex-direction: column;
      gap: 10px
    }

    /* 各選択肢のボタン */
    .opt {
      text-align: left;
      font-family: inherit;
      font-size: 15.5px;
      font-weight: 500;
      line-height: 1.65;
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 15px 18px;
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      color: var(--ink);
      transition: border-color .15s ease, background .15s ease, transform .1s ease;
    }

    /* 未回答時のホバー */
    .opt:not(:disabled):hover {
      border-color: var(--blue);
      background: rgba(72, 102, 190, .05)
    }

    /* 押し込んだ瞬間の縮み */
    .opt:not(:disabled):active {
      transform: scale(.99)
    }

    /* キーボード操作時のフォーカス枠 */
    .opt:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 2px
    }

    /* 選択肢左の丸印 */
    .opt .dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--line);
      flex: none;
      margin-top: 2px;
      display: grid;
      place-items: center;
      font-family: "Space Grotesk", sans-serif;
      font-size: 11px;
      font-weight: 700;
      color: var(--ink-soft);
    }

    /* ホバー時の丸印 */
    .opt:not(:disabled):hover .dot {
      border-color: var(--blue)
    }

    /* 回答後の正解の選択肢 */
    .opt.correct {
      border-color: var(--ok);
      background: rgba(63, 160, 136, .12);
    }

    /* 正解の丸印 */
    .opt.correct .dot {
      background: var(--ok);
      border-color: var(--ok);
      color: #fff;
    }

    /* 回答後、自分が選んだ誤答 */
    .opt.wrong {
      border-color: var(--ng);
      background: rgba(220, 83, 55, .10);
    }

    /* 誤答の丸印 */
    .opt.wrong .dot {
      background: var(--ng);
      border-color: var(--ng);
      color: #fff;
    }

    /* 回答後は押せなくする */
    .opt:disabled {
      cursor: default;
      opacity: 1;
    }

    /* ===== 回答後の判定と解説 ===== */
    .verdict {
      display: inline-block;
      margin: 26px 0 12px;
      font-weight: 900;
      font-size: 15px;
      padding: 5px 16px;
      border-radius: 999px;
      color: #fff;
    }

    /* 正解時の判定バッジ */
    .verdict.ok {
      background: var(--ok)
    }

    /* 不正解時の判定バッジ */
    .verdict.ng {
      background: var(--ng)
    }

    /* 解説ブロック */
    .explain {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 18px 20px;
      background: rgba(255, 255, 255, .40);
    }

    /* 解説内の小見出し */
    .explain h4 {
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .04em;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 小見出し左の色バー */
    .explain h4::before {
      content: "";
      width: 5px;
      height: 16px;
      border-radius: 3px;
      background: var(--ok);
      flex: none;
    }

    /* 2つ目以降の小見出しは上に余白を取る */
    .explain h4:not(:first-child) {
      margin-top: 18px;
    }

    /* 解説の本文 */
    .explain p {
      font-size: 14.5px;
      color: var(--ink-soft);
      line-height: 1.85;
    }

    /* 誤答の理由リスト */
    .explain ul {
      list-style: none;
      display: grid;
      gap: 8px;
    }

    /* 誤答の理由の各項目 */
    .explain li {
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.75;
      padding-left: 14px;
      border-left: 2px solid var(--line);
    }

    /* 誤答の選択肢名 */
    .explain li b {
      color: var(--ink);
      font-weight: 700;
    }

    /* 次へボタンの配置 */
    .qfoot {
      margin-top: 24px;
      text-align: center;
    }

    /* ===== 結果カード上部のロゴヘッダー（画面・印刷共通） ===== */
    .brand {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }

    /* ロゴ画像 */
    .brand img {
      width: 30px;
      height: 30px;
      object-fit: contain;
      display: block;
    }

    /* 社名テキスト */
    .brand .name {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: .04em;
      color: var(--ink);
    }

    /* ===== 結果画面のヘッダー ===== */
    .result-head {
      text-align: center;
      margin-bottom: 8px
    }

    /* 研修名の表示 */
    .assessment-title {
      font-weight: 900;
      font-size: clamp(18px, 4.5vw, 24px);
      line-height: 1.35;
      letter-spacing: .02em;
      margin-bottom: 8px;
    }

    /* ヘッダー内のラベル */
    .result-head .eyebrow {
      display: block;
      margin-bottom: 10px
    }

    /* 到達度の名称 */
    .type-name {
      font-size: clamp(28px, 6.4vw, 40px);
      font-weight: 900;
      line-height: 1.15;
    }

    /* 到達度の英字表記 */
    .type-en {
      font-family: "Space Grotesk", sans-serif;
      letter-spacing: .14em;
      font-size: 14px;
      color: var(--ink-soft);
      margin-top: 4px;
    }

    /* 到達度のキャッチコピー */
    .type-catch {
      display: inline-block;
      margin-top: 14px;
      font-weight: 700;
      font-size: 15px;
      padding: 6px 16px;
      border-radius: 999px;
      color: #fff;
    }

    /* ===== 結果の主役：正答数のゲージ ===== */
    .gauge-area {
      margin: 28px auto 10px;
      max-width: 560px;
    }

    /* 得点表示のまとまり */
    .score-display {
      text-align: center;
      margin-bottom: 20px;
    }

    /* 得点表示のラベル */
    .score-display .eyebrow {
      display: block;
      margin-bottom: 6px;
    }

    /* 得点の数字 */
    .score-big {
      font-family: "Space Grotesk", sans-serif;
      font-size: clamp(46px, 11vw, 64px);
      font-weight: 700;
      line-height: 1;
      color: var(--type-color, var(--ink));
    }

    /* 得点の分母 */
    .score-big small {
      font-size: 18px;
      font-weight: 600;
      color: var(--ink-soft);
      margin-left: 6px;
    }

    /* ゲージの外枠 */
    .scale {
      position: relative;
      padding: 10px 0 4px;
    }

    /* ゲージの帯 */
    .scale-track {
      position: relative;
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, #D9D5C9 0%, var(--blue) 34%, var(--amber) 68%, var(--level-high) 100%);
      overflow: visible;
    }

    /* 得点より右側を淡く覆う */
    .scale-cover {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      border-radius: 0 999px 999px 0;
      background: rgba(251, 250, 246, .78);
      transition: width .9s cubic-bezier(.34, 1.4, .5, 1);
    }

    /* 得点位置を示すドット */
    .scale-dot {
      position: absolute;
      top: 50%;
      left: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      border: 6px solid var(--ink);
      box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .5);
      transform: translate(-50%, -50%) scale(0);
      z-index: 2;
      transition: left .9s cubic-bezier(.34, 1.4, .5, 1), transform .5s ease .3s;
    }

    /* ドットの出現状態 */
    .scale-dot.show {
      transform: translate(-50%, -50%) scale(1)
    }

    /* ゲージの目盛り */
    .scale-ticks {
      display: flex;
      justify-content: space-between;
      margin-top: 12px;
      font-family: "Space Grotesk", sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .06em;
      color: var(--ink-soft);
    }

    /* ゲージの読み方の説明 */
    .axis-explainer {
      margin-top: 10px;
      text-align: center;
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.7;
    }

    /* 説明文の強調部分 */
    .axis-explainer b {
      color: var(--ink);
      font-weight: 800;
    }

    /* ===== 結果の各セクション ===== */
    .section {
      margin-top: 26px
    }

    /* セクション見出し */
    .section h3 {
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .04em;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* 見出し左の小さな色バー */
    .section h3::before {
      content: "";
      width: 6px;
      height: 18px;
      border-radius: 3px;
      background: var(--type-color, var(--ink));
    }

    /* 補足説明の文章 */
    .desc {
      color: var(--ink-soft)
    }

    /* ===== テーマ別の正答一覧 ===== */
    .theme-grid {
      display: grid;
      gap: 8px;
    }

    /* テーマ1行分 */
    .theme-row {
      display: flex;
      align-items: center;
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 14px;
      background: rgba(255, 255, 255, .32);
    }

    /* テーマ名 */
    .theme-row .tname {
      font-weight: 700;
      font-size: 13.5px;
      flex: 1;
    }

    /* テーマごとのメーター */
    .theme-row .tmeter {
      width: 90px;
      height: 8px;
      border-radius: 999px;
      background: var(--line);
      overflow: hidden;
      flex: none;
    }

    /* メーターの中身 */
    .theme-row .tmeter i {
      display: block;
      height: 100%;
      background: var(--ok);
    }

    /* テーマの正答数 */
    .theme-row .tscore {
      font-family: "Space Grotesk", sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      width: 44px;
      text-align: right;
      flex: none;
    }

    /* ===== 振り返り一覧（1問ずつのカード） ===== */
    .review-item {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 16px 18px;
      background: rgba(255, 255, 255, .34);
      margin-bottom: 12px;
    }

    /* 振り返り一覧の設問行 */
    .review-item .rq {
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 10px;
      line-height: 1.6;
    }

    /* 正誤バッジ */
    .badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 900;
      border-radius: 6px;
      padding: 2px 8px;
      margin-right: 8px;
      color: #fff;
      vertical-align: 2px;
    }

    /* 正解のバッジ */
    .badge.ok {
      background: var(--ok)
    }

    /* 不正解のバッジ */
    .badge.ng {
      background: var(--ng)
    }

    /* 正解・自分の回答の表示 */
    .review-ans {
      font-size: 13.5px;
      color: var(--ink-soft);
      margin-bottom: 12px;
    }

    /* 正解の文言を強調 */
    .review-ans b {
      color: var(--ink);
      font-weight: 700;
    }

    /* ===== 振り返りメモ：画面では入力欄、印刷では罫線の記入欄になる ===== */
    .memo-grid {
      display: grid;
      gap: 12px;
    }

    /* メモ1つ分の枠 */
    .memo-box {
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, .32);
    }

    /* メモの見出し */
    .memo-box h4 {
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
      color: var(--ink);
    }

    /* 罫線ノート風の入力欄 */
    .memo-write {
      min-height: 4.8em;
      line-height: 1.7em;
      font-size: 13.5px;
      color: var(--ink);
      outline: none;
      background-image: repeating-linear-gradient(to bottom,
          transparent 0,
          transparent calc(1.7em - 1px),
          var(--line) calc(1.7em - 1px),
          var(--line) 1.7em);
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    /* 入力中の背景 */
    .memo-write:focus {
      background-color: rgba(72, 102, 190, .04);
      border-radius: 6px;
    }

    /* メモの使い方の案内 */
    .memo-hint {
      font-size: 12.5px;
      color: var(--ink-soft);
      margin-bottom: 12px;
    }

    /* ===== 明日からのアクション ===== */
    .action-list {
      display: grid;
      gap: 10px;
      counter-reset: step;
    }

    /* アクション1件分 */
    .action-item {
      position: relative;
      border: 1px solid var(--line);
      border-radius: 13px;
      padding: 12px 14px 12px 46px;
      color: var(--ink-soft);
      background: rgba(255, 255, 255, .32);
      font-size: 13.5px;
      line-height: 1.65;
    }

    /* アクションの連番 */
    .action-item::before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: 14px;
      top: 13px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--type-color, var(--ink));
      font-family: "Space Grotesk", sans-serif;
      font-size: 12px;
      font-weight: 700;
    }

    /* ===== 補足の注記 ===== */
    .result-note {
      margin-top: 12px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(38, 36, 31, .04);
      color: var(--ink-soft);
      font-size: 13.5px;
    }

    /* 結果下部のボタン群 */
    .result-foot {
      margin-top: 30px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    /* 結果下部のボタン幅をそろえる */
    .result-foot .btn {
      min-width: 180px
    }

    /* 印刷の案内文 */
    .print-hint {
      margin-top: 10px;
      font-size: 12.5px;
      color: var(--ink-soft);
      text-align: center;
    }

    /* ===== 印刷用の氏名入力欄 ===== */
    .print-name-control {
      margin-top: 22px;
      padding: 18px 18px 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, .34);
      display: grid;
      gap: 8px;
      justify-items: center;
      text-align: center;
    }

    /* 氏名欄のラベル */
    .print-name-control label {
      font-size: 14px;
      font-weight: 900;
      color: var(--ink);
    }

    /* 氏名の入力欄 */
    .print-name-control input {
      width: min(100%, 360px);
      font-family: inherit;
      font-size: 16px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      background: #fff;
      color: var(--ink);
    }

    /* 入力中の枠線 */
    .print-name-control input:focus {
      outline: 3px solid rgba(72, 102, 190, .28);
      border-color: var(--blue);
    }

    /* 氏名欄の補足文 */
    .print-name-control .help {
      font-size: 12.5px;
      color: var(--ink-soft);
      line-height: 1.6;
    }

    /* 画面では隠し、印刷時のみ表示する氏名欄 */
    .print-name-box {
      display: none;
    }

    /* 結果カード末尾の著作権表記 */
    .credit {
      text-align: center;
      color: var(--ink-soft);
      font-size: 11px;
      margin-top: 26px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    /* ===== ページ全体のフッター（全画面で表示） ===== */
    .page-footer {
      text-align: center;
      padding: 24px 20px 6px;
      font-size: 12px;
      color: var(--ink-soft);
    }

    /* フッターのリンク */
    .page-footer a {
      color: var(--ink-soft);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color .15s ease, border-color .15s ease;
    }

    /* フッターリンクのホバー */
    .page-footer a:hover {
      color: var(--ink);
      border-color: var(--ink-soft)
    }

    /* フッターリンクのフォーカス枠 */
    .page-footer a:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px
    }

    /* ===== 一覧ページへ戻るナビ（印刷対象外） ===== */
    .portal-nav {
      margin-bottom: 14px;
    }

    /* 戻るリンクのボタン風表示 */
    .portal-nav a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-soft);
      text-decoration: none;
      padding: 8px 16px;
      border: 1.5px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .5);
      transition: color .15s ease, border-color .15s ease;
    }

    /* 戻るリンクのホバー */
    .portal-nav a:hover {
      color: var(--ink);
      border-color: var(--ink-soft);
    }

    /* 戻るリンクのフォーカス枠 */
    .portal-nav a:focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 2px;
    }

    /* ===== 印刷用：ブラウザの標準印刷で復習資料として使える形に整える ===== */
    @page {
      size: A4 portrait;

      /* 上下の余白はここでしか作れない（要素のpaddingは1ページ目にしか効かないため）。
         左右はブラウザの印刷ダイアログで「余白：なし」を選ばれると無視されるので、
         ここでは6mmだけ持たせ、残りは #printArea の左右paddingで確保する。
         印刷ダイアログが「既定」なら 6mm + 14mm = 左右20mm になる。 */
      margin: 20mm 6mm 24mm
    }

    @media print {

      /* 背景と装飾を落として読みやすくする */
      body {
        background: #fff !important;
        background-image: none !important;
        color: #000;
      }

      /* 印刷では幅の制限を外す */
      .wrap {
        max-width: none;
        padding: 0;
        display: block;
      }

      /* 結果画面だけを印刷する */
      .screen {
        display: none !important
      }

      /* 結果画面は必ず表示する */
      #result {
        display: block !important
      }

      /* 印刷対象のカードから影と枠を外す。
         左右のpaddingは全ページに効くので、余白設定に左右されない安全域として使う。 */
      #printArea {
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 14mm;
        background: #fff;
      }

      /* ロゴヘッダーを小さくする */
      .brand {
        margin-bottom: 8px;
        padding-bottom: 8px
      }

      /* ロゴ画像を縮小 */
      .brand img {
        width: 24px;
        height: 24px
      }

      /* 社名を縮小 */
      .brand .name {
        font-size: 12px
      }

      /* ===== A4・2枚（両面印刷で1枚）に収めるための紙面調整 ===== */

      /* 見出しまわりの余白を詰める */
      .result-head {
        margin-bottom: 4px
      }

      /* 研修名を紙面向けに縮小 */
      .assessment-title {
        font-size: 15pt;
        margin-bottom: 4px;
      }

      /* ラベルの下余白を詰める */
      .result-head .eyebrow {
        margin-bottom: 4px
      }

      /* 到達度名を紙面向けに縮小 */
      .type-name {
        font-size: 22pt
      }

      /* キャッチコピーを紙面向けに縮小 */
      .type-catch {
        margin-top: 6px;
        padding: 3px 12px;
        font-size: 11pt;
      }

      /* ゲージ周りの余白を詰める */
      .gauge-area {
        margin: 4mm auto 3mm;
        max-width: 140mm;
      }

      /* 得点表示の下余白を詰める */
      .score-display {
        margin-bottom: 8px
      }

      /* 得点の数字を紙面向けに調整 */
      .score-big {
        font-size: 26pt
      }

      /* セクションの途中で改ページしない */
      .section {
        margin-top: 6mm;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      /* セクション見出しの下余白を詰める */
      .section h3 {
        margin-bottom: 6px
      }

      /* テーマ別の手応えは2列にして、縦方向の紙面を半分にする */
      .theme-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px 8px;
      }

      /* テーマ1行分を薄くする */
      .theme-row {
        gap: 8px;
        padding: 5px 9px;
      }

      /* 2列でもテーマ名が折り返しにくいよう、メーターと数字を細くする */
      .theme-row .tmeter {
        width: 42px;
        height: 6px;
      }

      .theme-row .tscore {
        width: 36px;
        font-size: 11px;
      }

      .theme-row .tname {
        font-size: 11.5px
      }

      /* 次に見直すとよいところの枠を詰める */
      .action-list {
        gap: 6px
      }

      .action-item {
        padding: 8px 12px 8px 40px;
        font-size: 12px;
        line-height: 1.55;
      }

      .action-item::before {
        top: 9px;
        left: 12px;
      }

      /* 振り返りメモの枠を詰める（記入欄の行数は確保する） */
      .memo-grid {
        gap: 8px
      }

      .memo-box {
        padding: 8px 12px
      }

      .memo-box h4 {
        margin-bottom: 5px
      }

      .memo-write {
        min-height: 4.2em
      }

      /* 注記を小さくする */
      .result-note {
        font-size: 11px;
        line-height: 1.6;
      }

      /* 設問カードの途中で改ページしない */
      .review-item {
        break-inside: avoid;
        page-break-inside: avoid;
        background: #fff;
      }

      /* 印刷用の氏名欄を表示する */
      .print-name-box {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10mm;
        padding-top: 5mm;
        border-top: 1px solid #999;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      /* 氏名欄のラベル */
      .print-name-label {
        font-size: 12px;
        font-weight: 900;
        white-space: nowrap;
      }

      /* 氏名の記入線 */
      .print-name-value {
        min-width: 70mm;
        border-bottom: 1px solid #000;
        padding: 0 4mm 1mm;
        font-size: 13px;
        line-height: 1.5;
      }

      /* 操作用の要素とページフッターは印刷しない */
      .no-print,
      .page-footer {
        display: none !important
      }

      /* リンクの色と下線を消す */
      a {
        color: inherit;
        text-decoration: none
      }

      /* 段落の1行だけが次ページに取り残されないようにする */
      p,
      .desc,
      .action-item,
      .memo-box {
        orphans: 2;
        widows: 2;
      }

      /* 見出しだけがページ末尾に残らないようにする */
      .section h3,
      .memo-box h4 {
        break-after: avoid;
        page-break-after: avoid;
      }
    }

    /* ===== レスポンシブ：狭い画面の調整 ===== */
    @media (max-width:520px) {

      .site-header {
        padding-bottom: 18px;
      }

      .header-meta {
        display: none;
      }

      /* カードの余白を詰める */
      .card {
        padding: 26px 20px
      }

      /* ミニカードを縦積みにする */
      .preview {
        grid-auto-flow: row
      }

      /* ボタン幅を自動にする */
      .result-foot .btn {
        flex: 0 1 auto;
        width: auto
      }

      /* テーマ別一覧のメーターを細くする */
      .theme-row .tmeter {
        width: 60px
      }
    }

    /* ===== アクセシビリティ：モーション軽減設定の尊重 ===== */
    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      /* ドットは最初から表示する */
      .scale-dot {
        transform: translate(-50%, -50%) scale(1)
      }
    }