/* コンテンツ詳細 */

.learning-pane { margin-bottom: 2rem; }

/* 動画 */
.learning-video iframe { width: 100% !important; aspect-ratio: 16/9; height: auto !important; border: 0; border-radius: var(--radius); }
.learning-video {
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
  border-radius: var(--radius);
  overflow: hidden;
}
.learning-video__progress { height: 4px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-top: 0.5rem; }
.learning-video__progress-bar { height: 100%; width: 0%; background: var(--color-accent); transition: width 0.3s; }

/* タイトル下のカテゴリ名は非表示 */
.learning-content-page__category { display: none; }

/* ── 記事タイトル：アイキャッチ画像の幅（900px）に合わせて中央配置・左詰め ── */
.learning-content-page__title {
  max-width: 900px;      /* アイキャッチ画像と同じ幅で左端を揃える */
  margin: 0 auto 2.2rem;
  text-align: left;
  font-size: 1.75rem;
  line-height: 1.4;
  font-weight: 800;
}

/* 記事 ─────────────────────────────────── */
.learning-article {
  max-width: 1100px;     /* 本文幅（アイキャッチ900pxより広い） */
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;   /* 18px */
  line-height: 1.9;
  color: var(--color-text, #1a1a1a);
  word-break: break-word;
  overflow-wrap: break-word;
  /* 表の1セルあたり最大幅 = スマホの横幅。PC も同じ値を使用。
     スマホ表示時は下のメディアクエリで実際の画面幅にあわせて上書きする。 */
  --lc-cell-max: 360px;
  /* ゴシック体に統一（見やすさ重視） */
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
    "Yu Gothic", "YuGothic", "游ゴシック", "Meiryo", "メイリオ",
    system-ui, -apple-system, sans-serif;
}
/* 記事内の全要素をゴシック体に統一 */
.learning-article p,
.learning-article li,
.learning-article td,
.learning-article th,
.learning-article span,
.learning-article div,
.learning-article blockquote,
.learning-article h1,
.learning-article h2,
.learning-article h3,
.learning-article h4,
.learning-article h5,
.learning-article h6 {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
    "Yu Gothic", "YuGothic", "游ゴシック", "Meiryo", "メイリオ",
    system-ui, -apple-system, sans-serif;
}

/* 見出し */
.learning-article h1,
.learning-article h2,
.learning-article h3,
.learning-article h4,
.learning-article h5,
.learning-article h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 2rem 0 0.75rem;
  color: var(--color-text, #1a1a1a);
}
.learning-article h1 { font-size: 1.75rem; }
.learning-article h2 {
  font-size: 1.35rem;
  padding: 0.55rem 0.9rem;
  border-left: 4px solid var(--color-primary, #43a047);
  background: var(--color-bg-muted, #f8f9fa);
  border-radius: 0 4px 4px 0;
}
.learning-article h3 {
  font-size: 1.15rem;
  border-bottom: 2px solid var(--color-border, #e0e0e0);
  padding-bottom: 0.3rem;
}
.learning-article h4 { font-size: 1.05rem; }
.learning-article h5,
.learning-article h6 { font-size: 1rem; color: #555; }

/* 段落・テキスト */
.learning-article p {
  margin: 0 0 1.2rem;
}
.learning-article p:last-child { margin-bottom: 0; }

.learning-article strong,
.learning-article b  { font-weight: 700; }
.learning-article em,
.learning-article i  { font-style: italic; }
.learning-article u  { text-decoration: underline; }
.learning-article s,
.learning-article del { text-decoration: line-through; color: #888; }

/* リンク */
.learning-article a {
  color: var(--color-primary, #43a047);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.learning-article a:hover { opacity: 0.75; }

/* リスト */
.learning-article ul,
.learning-article ol {
  margin: 0 0 1.2rem;
  padding-left: 1.6rem;
}
.learning-article li { margin-bottom: 0.35rem; line-height: 1.7; }
.learning-article li > ul,
.learning-article li > ol { margin-top: 0.35rem; margin-bottom: 0; }

/* 引用 */
.learning-article blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid #bbb;
  background: #f8f8f8;
  border-radius: 0 6px 6px 0;
  color: #555;
  font-style: italic;
}
.learning-article blockquote p { margin: 0; }

/* コード */
.learning-article code {
  background: #f0f0f0;
  color: #c62828;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: 3px;
}
.learning-article pre {
  background: #1e1e1e;
  color: #dcdcdc;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.875rem;
  padding: 1.1rem 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.2rem 0;
  line-height: 1.6;
}
.learning-article pre code {
  background: none;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

/* 区切り線 */
.learning-article hr {
  border: none;
  border-top: 2px solid var(--color-border, #e0e0e0);
  margin: 2rem 0;
}

/* テーブル（画面幅を超える場合は横スクロール可能に） */
/* スクロール枠: 記事内の表はすべて learning-table-scroll（PHPで自動付与）で包まれ、
   この枠が横スクロールを担当する。 */
.learning-article .learning-table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0;
}
/* WPブロックの figure はスクロール枠ではなく単なる入れ物に（内側の枠が担当）。 */
.learning-article .wp-block-table {
  display: block;
  max-width: 100%;
  overflow: visible;
  margin: 1.2rem 0;
}
.learning-article .wp-block-table > .learning-table-scroll {
  margin: 0;   /* figure 側の余白と二重にしない */
}
/* 表本体は通常のテーブルレイアウトを維持し、内容幅まで広げる。
   列数が多く合計幅が枠を超えたら、枠内で横スクロールする（PC・スマホ共通）。 */
.learning-article table {
  display: table;
  width: -webkit-max-content;  /* iOS Safari 等のフォールバック */
  width: -moz-max-content;
  width: max-content;     /* 内容に合わせて広がる */
  max-width: none;
  border-collapse: collapse;
  font-size: inherit;     /* 本文と同じサイズを継承 */
  margin: 0;              /* マージンはスクロール枠側で付与 */
}
.learning-article th,
.learning-article td {
  border: 1px solid #ddd;
  padding: 0.65rem 0.85rem;  /* 18px本文に合わせてpadding微調整 */
  text-align: left;
  font-size: inherit;  /* 親のフォントサイズを確実に継承 */
  /* セル幅: 内容に合わせて自然に広がり、最大はスマホの横幅（PCも同じ上限）で頭打ち。
     超えた分はセル内で折り返し、列の合計が画面を超えたらスクロール枠が横スクロールする。 */
  max-width: var( --lc-cell-max, 360px );
  white-space: normal;
  overflow-wrap: break-word;  /* 極端に長い英単語・URL のみ折る */
  word-break: normal;         /* 本文の break-word を打ち消し、過度な改行を防ぐ */
}
.learning-article th {
  background: #f5f5f5;
  font-weight: 700;
}
.learning-article tr:nth-child(even) td { background: #fafafa; }

/* 画像 */
.learning-article img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 1rem auto;
}
.learning-article figure {
  margin: 1.2rem 0;
  text-align: center;
}
.learning-article figcaption {
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.4rem;
}

/* 固定フッター ───────────────────────────── */
.learning-footer-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  border-top: 1px solid var(--color-border);
  background: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(8px);
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom);
}
.learning-footer-bar__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem;
}

/* 日次制限超え警告メッセージ */
.learning-footer-bar__limit-warning {
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem;
  background: #fff8e1;
  border: 2px solid #f59e0b;
  border-radius: 8px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #7c4a00;
  order: -1; /* フッターバー内の先頭に表示 */
}
.learning-footer-bar__limit-warning strong {
  color: #c05000;
  font-size: 1.05em;
}
.learning-btn--sm {
  font-size: 0.82rem !important;
  padding: 0.3rem 0.8rem !important;
  display: inline-flex;
}

/* ════════════════════════════════════════════════════════
   クイズ・復習問題フォーカスモード（v2.5.0）
   post/review ペイン表示中はヘッダー・フッターバー・記事本文を隠し
   画面いっぱいにクイズだけを表示する。スクロール不要レイアウト。
   ════════════════════════════════════════════════════════ */

/* body にクラスを付与（JS側で制御） */
body.is-quiz-mode .learning-header,
body.is-quiz-mode .learning-footer-bar,
body.is-quiz-mode .learning-breadcrumb,
body.is-quiz-mode .learning-content-page__title,
body.is-quiz-mode .learning-content-page__category,
body.is-quiz-mode [data-pane="main"] {
  display: none !important;
}

body.is-quiz-mode .learning-main {
  padding: 0 !important;
  margin: 0 !important;
}

/* クイズ表示中は背面ページのスクロールをロック（スマホのガタつき防止） */
body.is-quiz-mode {
  overflow: hidden !important;
}

body.is-quiz-mode .learning-content-page {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* クイズパネルを全画面オーバーレイに（アプリ風レイアウト）。
   構造: [固定ヘッダー(進捗)] → [スクロール領域(問題)] → [固定フッター(ボタン)]
   縦中央寄せ（margin:auto）はフィードバック表示時に内容が再センタリングされて
   スマホでガタつくため廃止し、上詰め＋下方向にのみ伸びる安定配置にする。 */
body.is-quiz-mode .learning-question-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
  max-width: none !important;   /* 全画面オーバーレイ。640px制約を解除 */
  margin: 0 !important;
  border-radius: 0;
  border-top-width: 0;
  background: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;          /* 背面へのスクロール連鎖を防止 */
  -webkit-overflow-scrolling: touch;     /* iOS の慣性スクロールを安定化 */
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

/* ヘッダー（フェーズ名・進捗バー・ページャー）は常に上部に固定表示 */
body.is-quiz-mode .learning-question-panel__head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  margin-bottom: 0;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1.25rem 1rem;
  border-bottom: 1px solid #f0f1f4;
  flex: none;
}
body.is-quiz-mode .learning-question-panel__head::before,
body.is-quiz-mode .learning-question-panel__head::after {
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0.45rem;
}
body.is-quiz-mode .learning-question-panel__head::before {
  width: calc((100% - 2.5rem) * var(--q-progress, 0));
}

/* 問題エリア: 上詰めで安定表示。内容が伸びても下方向に増えるだけで
   既読部分（設問・選んだ選択肢）は動かない。 */
body.is-quiz-mode .learning-question {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 1.4rem 0 1rem;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* 選択肢タップ後のフィードバックが見やすいように */
body.is-quiz-mode .learning-question__feedback {
  font-size: 1.05rem;
  margin-top: 1rem;
}

/* アクション（次へ/完了）は画面下部に固定（アプリのボトムバー風）。
   スクロールしてもボタン位置が動かないため、操作が安定する。 */
body.is-quiz-mode .learning-question__actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin: auto 0 0;                       /* 余白時は最下部へ */
  padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%);
  display: flex;
  justify-content: center;
}
body.is-quiz-mode .learning-question__actions .learning-btn {
  width: 100%;
  max-width: 480px;
  min-height: 52px;
  font-size: 1.05rem;
  border-radius: 14px;
}

/* スマホでさらに最適化 */
@media (max-width: 600px) {
  body.is-quiz-mode .learning-question__prompt { font-size: 1.08rem; }
  body.is-quiz-mode .learning-question        { padding-top: 1.1rem; }
}

/* ── スマホでの記事タイトル 1.5倍 ── */
@media (max-width: 600px) {
  .learning-content-page__title {
    font-size: 1.75rem; /* 2rem × 0.875 → 1.5倍で約 1.75rem（元が小さかった分） */
  }
  .learning-article h1 { font-size: 1.5rem; }
  .learning-article h2 { font-size: 1.25rem; }
  .learning-article h3 { font-size: 1.1rem; }
}

/* ── スマホ: 本文を少し小さく / 表の文字をより小さく ── */
@media (max-width: 600px) {
  /* 記事本文の文字サイズを少し小さく（18px → 16px） */
  .learning-article {
    font-size: 1rem;
    line-height: 1.85;
    /* 1セルの最大幅 = 実際のスマホ表示幅（左右の余白 1.5rem×2 を差し引く）。
       1セルなら画面に収まり、複数列で超えた分だけ横スクロールになる。 */
    --lc-cell-max: calc( 100vw - 3rem );
  }

  /* 表の文字サイズは本文よりさらに小さく、余白も圧縮。
     セル幅の上限（--lc-cell-max）と折り返し・横スクロールは共通ルールで対応済み。 */
  .learning-article table {
    font-size: 0.8125rem; /* 約 13px */
  }
  .learning-article th,
  .learning-article td {
    font-size: 0.8125rem; /* 約 13px */
    padding: 0.45rem 0.6rem;
  }
}

/* ── 記事冒頭のアイキャッチ画像（記事のみ） ── */
.learning-article-eyecatch {
  max-width: 900px;        /* タイトルと同じ幅 */
  margin: 0 auto 1.8rem;
  text-align: center;
}
.learning-article-eyecatch img {
  width: 100%;       /* 900pxの枠いっぱい */
  max-width: 900px;
  height: auto;
  border-radius: 8px;
  display: inline-block;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════
   理解度クイズ後のアフターケア（まとめ40秒・休憩5分）
   全画面オーバーレイ。スクロールでは前後に移動できず、
   ボタンでのみステップ間を遷移する。
   ════════════════════════════════════════════ */
.learning-aftercare {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(180deg, #fdfcfb 0%, #f4f6fb 100%);
  display: flex;
  flex-direction: column;
  overflow-y: auto;                 /* 内容が収まらない端末のみ内部スクロール */
  overscroll-behavior: contain;     /* 背面ページへのスクロール連鎖を防止 */
  -webkit-overflow-scrolling: touch;
  text-align: center;
  padding: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
.learning-aftercare[hidden] { display: none !important; }

/* オーバーレイ表示中は背面のスクロールを完全ロック */
body.lc-aftercare-open {
  overflow: hidden !important;
}
body.lc-aftercare-open .learning-footer-bar { display: none !important; }

.learning-aftercare__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin: auto;          /* 縦横の安全なセンタリング（はみ出し時はスクロール可） */
  max-width: 560px;
  width: 100%;
}
.learning-aftercare__icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: .3rem;
}
.learning-aftercare__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1a1560;
  margin: 0;
  line-height: 1.5;
}
.learning-aftercare__desc {
  font-size: .92rem;
  color: #666;
  line-height: 1.7;
  margin: 0 0 .5rem;
}
.learning-aftercare__notion-btn {
  display: inline-block;
  padding: .85rem 2rem;
  background: linear-gradient(135deg, #2f3437, #000);
  color: #fff;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .12s, filter .15s;
}
.learning-aftercare__notion-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* タイマー */
.learning-aftercare__timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  margin: .8rem 0;
}
.learning-aftercare__timer-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(#43a047 0deg, #e8f5e9 0deg);
  position: relative;
  border: 6px solid #e8f5e9;
}
.learning-aftercare__timer--rest .learning-aftercare__timer-ring {
  border-color: #e3f2fd;
  background: #e3f2fd;
}
.learning-aftercare__timer-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: #2e7d32;
  font-variant-numeric: tabular-nums;
}
.learning-aftercare__timer--rest .learning-aftercare__timer-num {
  color: #1565c0;
  font-size: 1.9rem;
}
.learning-aftercare__timer-label {
  font-size: .8rem;
  color: #888;
  font-weight: 700;
}

/* スキップ/終了ボタン */
.learning-aftercare__skip {
  background: none;
  border: none;
  color: #9fa8da;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  padding: .4rem .8rem;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.learning-aftercare__skip:hover { background: #f0f4ff; color: #5c6bc0; }

@media (max-width: 600px) {
  .learning-aftercare { padding: 1.25rem; }
  .learning-aftercare__title { font-size: 1.1rem; }
  .learning-aftercare__icon { font-size: 2.5rem; }
  .learning-aftercare__timer-ring { width: 96px; height: 96px; }
}

/* ステップ2のボタン列（戻る / 終える） */
.learning-aftercare__btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.learning-aftercare__skip--back { color: #888; }

/* （旧）クイズ後にまとめリンク等を隠す指定は廃止。
   40秒画面ではまとめリンクを常に表示する。 */

/* 受講前確認 → 本編への移行フェードイン演出（+0.5秒遅延後） */
@keyframes lc-pane-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lc-pane-fadein {
  animation: lc-pane-fadein .45s cubic-bezier(.22,.61,.36,1) both;
}

/* ════════════════════════════════════════════
   受講制限ゲート（記事内容が見える前の全画面警告）
   ════════════════════════════════════════════ */
.learning-limit-gate {
  position: fixed;
  inset: 0;
  z-index: 10500;                 /* クイズ(9999)・アフターケア(10000)より上 */
  background: rgba(20, 22, 28, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.lc-gate-open { overflow: hidden !important; }
body.lc-gate-open .learning-footer-bar { display: none !important; }

.learning-limit-gate__box {
  background: #fff;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  padding: 2rem 1.75rem calc(1.75rem + env(safe-area-inset-bottom));
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.learning-limit-gate__icon  { font-size: 2.4rem; margin-bottom: .4rem; }
.learning-limit-gate__title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .8rem; color: #1a1a2e; }
.learning-limit-gate__msg   { font-size: .98rem; line-height: 1.8; color: #444; margin: 0 0 1.1rem; }

.learning-limit-gate__detail {
  background: #f7f8fb;
  border: 1px solid #e8ebf2;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  margin: 0 0 1.4rem;
  text-align: left;
}
.learning-limit-gate__detail-head {
  font-size: .92rem; font-weight: 700; color: #333;
  margin: 0 0 .6rem; line-height: 1.6;
}
.learning-limit-gate__detail-head strong { color: var(--color-accent, #c44d2c); font-size: 1.05rem; }
.learning-limit-gate__detail-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem;
  font-size: .85rem; color: #555;
}
.learning-limit-gate__detail-list li::before { content: "・"; color: var(--color-accent, #c44d2c); }

.learning-limit-gate__btns { display: flex; gap: .6rem; }
.learning-limit-gate__btn {
  flex: 1; min-height: 50px;
  border-radius: 12px; font-size: .98rem; font-weight: 700;
  cursor: pointer; border: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.learning-limit-gate__btn--back {
  background: #f1f3f6; color: #555;
}
.learning-limit-gate__btn--go {
  background: var(--color-accent, #c44d2c); color: #fff;
}
.learning-limit-gate__btn:active { transform: scale(.98); }

/* ════════════════════════════════════════════
   アフターケア改良: 2つの独立した画面 + 効果説明
   ════════════════════════════════════════════ */

/* 画面切り替え時のスライドイン（hidden 解除で display が復帰し再生される） */
@keyframes lc-aftercare-screen-in {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
.learning-aftercare__step:not([hidden]) {
  animation: lc-aftercare-screen-in .32s cubic-bezier(.25,.8,.35,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .learning-aftercare__step:not([hidden]) { animation: none; }
}

/* リンク注記・効果説明 */
.learning-aftercare__caption {
  font-size: .78rem;
  color: #8a8f99;
  margin: -0.2rem 0 .4rem;
}
.learning-aftercare__effect {
  font-size: .85rem;
  line-height: 1.8;
  color: #555;
  background: #f6f8fb;
  border: 1px solid #e7ebf2;
  border-radius: 12px;
  padding: .8rem 1rem;
  margin: .4rem 0 .6rem;
  text-align: left;
  max-width: 480px;
}
.learning-aftercare__effect strong { color: var(--color-accent, #c44d2c); }

/* 大見出し（何をする時間かを一目で） */
.learning-aftercare__title--big {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.4;
}
@media (max-width: 600px) {
  .learning-aftercare__title--big { font-size: 1.45rem; }
}

/* 画面1（まとめ）のタイマー文字は黒で視認性を確保 */
.learning-aftercare__timer-num,
.learning-aftercare__timer-label {
  color: #1a1a2e;
}

/* 画面2（5分間ボーとする）: 夜の画面。
   暗い夜空トーン + 月と星。文字・タイマーは明色でコントラストを確保。 */
.learning-aftercare.is-rest {
  background:
    radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 14%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 38%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 32% 64%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 80%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 10% 86%, rgba(255,255,255,.6) 50%, transparent 51%),
    linear-gradient(180deg, #0d1326 0%, #1a2140 60%, #232b52 100%);
}
.learning-aftercare.is-rest .learning-aftercare__icon::before { content: "🌙 "; }
.learning-aftercare.is-rest .learning-aftercare__title { color: #f2f4ff; }
.learning-aftercare.is-rest .learning-aftercare__desc  { color: #aeb6d4; }
/* 夜画面ではタイマーの数字・ラベルを明色に上書き（暗背景での視認性） */
.learning-aftercare.is-rest .learning-aftercare__timer-num,
.learning-aftercare.is-rest .learning-aftercare__timer-label {
  color: #f5f7ff;
}
.learning-aftercare.is-rest .learning-aftercare__timer-ring {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
.learning-aftercare.is-rest .learning-aftercare__effect {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: #c3cae4;
}
.learning-aftercare.is-rest .learning-aftercare__effect strong { color: #ffc9a3; }
.learning-aftercare.is-rest .learning-aftercare__skip {
  background: rgba(255,255,255,.12);
  color: #f2f4ff;
  border-color: rgba(255,255,255,.25);
}

/* ════════════════════════════════════════════
   回答フィードバックをボトムシート化（クイズモード時）
   タップ → 画面下から結果が出る → ボタンで次の問題へ。
   ページが下に伸びないため、スクロール操作が一切不要になる。
   ════════════════════════════════════════════ */
body.is-quiz-mode .learning-question__feedback:not([hidden]) {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 6;                              /* actions(4)・head(5) より上 */
  margin: 0;
  border: none;
  border-radius: 20px 20px 0 0;
  padding: 1rem 1.25rem calc(5.4rem + env(safe-area-inset-bottom)); /* 下部にボタン分の余白 */
  max-height: 38vh;                        /* 画面の4割未満に抑え、選択肢の表示域を確保 */
  overflow-y: auto;                        /* 長い解説はシート内のみでスクロール */
  touch-action: pan-y;                     /* スマホでシート内スクロールを確実に有効化 */
  overscroll-behavior: contain;
  box-shadow: 0 -8px 32px rgba(0,0,0,.18);
  animation: lc-sheet-up .26s cubic-bezier(.25,.8,.35,1) both;
}
/* シート表示中: 設問エリアにシート分の下余白を確保し、
   パネルをスクロールすればすべての選択肢がシートの上に見えるようにする */
body.is-quiz-mode .learning-question.has-feedback {
  padding-bottom: calc(38vh + 6.5rem + env(safe-area-inset-bottom));
}
@keyframes lc-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.is-quiz-mode .learning-question__feedback:not([hidden]) { animation: none; }
}
body.is-quiz-mode .learning-question__feedback.is-correct   { background: #e7f9ee; }
body.is-quiz-mode .learning-question__feedback.is-incorrect { background: #fdeeee; }

/* シート表示中は「次へ/完了」ボタンをシートの上（最前面）に重ねる
   （JS が .has-feedback を付与。:has() 非対応ブラウザでも動作） */
body.is-quiz-mode .learning-question.has-feedback .learning-question__actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 7;
  background: none;
}

/* ════════════════════════════════════════════
   [hidden] を確実に非表示にするガード（最重要修正）
   author CSS の display:flex 等は hidden 属性（UA の display:none）に
   勝ってしまうため、hidden が付いた要素は必ず非表示にする。
   これが無いと「40秒と5分が同時に表示」「スクロールで次の問題が見える」
   という不具合が発生する。
   ════════════════════════════════════════════ */
.learning-aftercare__step[hidden],
.learning-question[hidden],
.learning-pane[hidden],
.learning-question__feedback[hidden] {
  display: none !important;
}


/* PC（広い画面）ではクイズの問題と選択肢を画面中央に配置する。
   モバイルは上詰め（スクロール安定性のため）を維持。 */
@media (min-width: 900px) {
  body.is-quiz-mode .learning-question {
    margin: auto;          /* flexコンテナ内で安全に縦横センタリング */
    flex: 0 0 auto;
    justify-content: center;
    padding-top: 0;
  }
}

/* ─── アフターケア: 元の講義に戻るリンク画面 ─── */
.learning-aftercare__lecture-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, #1a56db 0%, #1e429f 100%);
  color: #fff; text-decoration: none;
  font-size: clamp(.9rem, 2.5vw, 1.05rem); font-weight: 700;
  padding: .9rem 1.4rem; border-radius: 14px;
  box-shadow: 0 4px 14px rgba(26, 86, 219, .35);
  transition: transform .12s, box-shadow .12s;
  max-width: 90%; text-align: center; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.learning-aftercare__lecture-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(26, 86, 219, .45);
}
.learning-aftercare__lecture-btn:active { transform: scale(.98); }

/* ── 理解度チェックボックス（クイズ直後・アフターケア画面） ───────── */
.learning-checks {
	list-style: none;
	margin: 1.2rem auto 0.6rem;
	padding: 0;
	max-width: 520px;
	width: 100%;
	text-align: left;
}
.learning-checks__item { margin: 0 0 .55rem; }
.learning-checks__label {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .85rem 1rem;
	background: #fff;
	border: 2px solid #e3e7f0;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color .15s, background .15s, transform .08s;
	line-height: 1.6;
}
.learning-checks__label:hover { border-color: #c5cde0; background: #fafbff; }
.learning-checks__label:active { transform: scale(.995); }
.learning-checks__input { position: absolute; opacity: 0; width: 0; height: 0; }
.learning-checks__box {
	flex: 0 0 22px;
	width: 22px; height: 22px;
	margin-top: 1px;
	border: 2px solid #c5cde0;
	border-radius: 6px;
	background: #fff;
	position: relative;
	transition: background .15s, border-color .15s;
}
.learning-checks__box::after {
	content: "";
	position: absolute;
	left: 6px; top: 2px;
	width: 5px; height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform .15s;
}
.learning-checks__input:checked + .learning-checks__box {
	background: #5c6bc0;
	border-color: #5c6bc0;
}
.learning-checks__input:checked + .learning-checks__box::after { transform: rotate(45deg) scale(1); }
.learning-checks__input:checked ~ .learning-checks__text { color: #3b4a8c; font-weight: 600; }
.learning-checks__input:focus-visible + .learning-checks__box { outline: 3px solid #b9c2ea; outline-offset: 2px; }
.learning-checks__label:has(.learning-checks__input:checked) {
	border-color: #5c6bc0;
	background: #f4f6ff;
}
.learning-checks__text { flex: 1; color: #333; font-size: .98rem; }
.learning-checks__progress {
	margin: .2rem 0 .6rem;
	font-size: .85rem;
	font-weight: 700;
	color: #5c6bc0;
	letter-spacing: .02em;
}
.learning-aftercare__skip[disabled] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}
@media (max-width: 600px) {
	.learning-checks__label { padding: .75rem .85rem; }
	.learning-checks__text { font-size: .92rem; }
}

/* 理解度チェック: 自動採番（1. 2. 3.） */
.learning-checks__num {
	flex: 0 0 auto;
	min-width: 1.4em;
	font-weight: 800;
	color: #5c6bc0;
	font-size: .98rem;
	line-height: 1.6;
	text-align: right;
}
.learning-checks__input:checked ~ .learning-checks__num { color: #3b4a8c; }

/* ── 受講制限メッセージ（コンテンツ側ゲート）: 赤文字・中央・2行 ── */
.learning-limit-gate__msg {
  color: #d32f2f;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}