/* ══════════════════════════════════════════════════════════════
   Typography — 全体統一レイヤー
   ────────────────────────────────────────────────────────────
   目的:
     ・フォントを「Noto Sans JP（本文）／Noto Serif JP（見出し）」に統一
     ・文字サイズを 8段階のスケールに統一（散在する103種類を吸収）
     ・PC と スマホで別スケール（スマホは読みやすさ優先で行間を広く・字を少し小さく）
     ・行間・字間・文字色の階層を統一
   読み込み順:
     すべてのCSSの「最後」に読み込むことで、既存の細かな指定を上書きして統一する。
   ══════════════════════════════════════════════════════════════ */

/* ── 1. トークン（PC 基準） ─────────────────────────────── */
:root {
  /* フォント */
  --lt-font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  --lt-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --lt-font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* サイズスケール（PC） */
  --lt-fs-xs:   0.78rem;   /* 12.5px  補足・キャプション */
  --lt-fs-sm:   0.875rem;  /* 14px    ラベル・メタ情報 */
  --lt-fs-base: 1rem;      /* 16px    本文 */
  --lt-fs-md:   1.0625rem; /* 17px    強調本文・カード本文 */
  --lt-fs-lg:   1.25rem;   /* 20px    小見出し h3 */
  --lt-fs-xl:   1.5rem;    /* 24px    見出し h2 */
  --lt-fs-2xl:  1.875rem;  /* 30px    大見出し h1 */
  --lt-fs-3xl:  2.25rem;   /* 36px    ヒーロー */

  /* 行間 */
  --lt-lh-tight:  1.3;
  --lt-lh-snug:   1.5;
  --lt-lh-normal: 1.7;
  --lt-lh-loose:  1.85;

  /* 字間 */
  --lt-ls-tight:  -0.01em;
  --lt-ls-normal:  0;
  --lt-ls-wide:    0.04em;

  /* 文字色の階層 */
  --lt-ink:       #1a1d29;
  --lt-ink-2:     #3d4356;
  --lt-ink-muted: #6b7080;
  --lt-ink-faint: #9aa0ae;

  /* 太さ */
  --lt-fw-regular: 400;
  --lt-fw-medium:  500;
  --lt-fw-bold:    700;
  --lt-fw-black:   800;
}

/* ── 2. スマホ用スケール（〜768px） ─────────────────────── */
@media (max-width: 768px) {
  :root {
    --lt-fs-xs:   0.75rem;   /* 12px */
    --lt-fs-sm:   0.8125rem; /* 13px */
    --lt-fs-base: 0.9375rem; /* 15px  本文はやや小さく＋行間広めで読みやすく */
    --lt-fs-md:   1rem;      /* 16px */
    --lt-fs-lg:   1.125rem;  /* 18px */
    --lt-fs-xl:   1.3125rem; /* 21px */
    --lt-fs-2xl:  1.5625rem; /* 25px */
    --lt-fs-3xl:  1.875rem;  /* 30px */
    --lt-lh-normal: 1.8;
    --lt-lh-loose:  1.95;
  }
}
/* 極小画面（iPhone SE 等） */
@media (max-width: 380px) {
  :root {
    --lt-fs-base: 0.9rem;
    --lt-fs-xl:   1.25rem;
    --lt-fs-2xl:  1.4375rem;
  }
}

/* ── 3. ベース ──────────────────────────────────────────── */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;   /* iOS の自動拡大を抑止して意図したサイズに */
  text-size-adjust: 100%;
}
body {
  font-family: var(--lt-font-sans);
  font-size: var(--lt-fs-base);
  line-height: var(--lt-lh-normal);
  letter-spacing: var(--lt-ls-normal);
  color: var(--lt-ink);
  font-weight: var(--lt-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 0; /* 日本語の詰め過ぎを防ぐ */
}

/* ── 4. 見出し階層（フォント・サイズ・行間・字間を統一） ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lt-font-serif);
  color: var(--lt-ink);
  font-weight: var(--lt-fw-bold);
  line-height: var(--lt-lh-tight);
  letter-spacing: var(--lt-ls-tight);
  margin-top: 0;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--lt-fs-2xl); margin-bottom: .6em; }
h2 { font-size: var(--lt-fs-xl);  margin-bottom: .55em; }
h3 { font-size: var(--lt-fs-lg);  margin-bottom: .5em; }
h4 { font-size: var(--lt-fs-md);  margin-bottom: .45em; font-family: var(--lt-font-sans); font-weight: var(--lt-fw-bold); }
h5, h6 { font-size: var(--lt-fs-base); margin-bottom: .4em; font-family: var(--lt-font-sans); font-weight: var(--lt-fw-bold); }

/* ── 5. 本文・補助テキスト ─────────────────────────────── */
p, li, dd, td, th, label, blockquote {
  font-size: var(--lt-fs-base);
  line-height: var(--lt-lh-normal);
}
small, .description, .learning-note, .learning-hint, figcaption {
  font-size: var(--lt-fs-xs);
  color: var(--lt-ink-muted);
  line-height: var(--lt-lh-snug);
}
strong, b { font-weight: var(--lt-fw-bold); }
code, kbd, pre, samp {
  font-family: var(--lt-font-mono);
  font-size: 0.92em;
}

/* ── 6. フォーム要素（iOS のズーム防止のため 16px 未満にしない） ── */
input, select, textarea, button {
  font-family: var(--lt-font-sans);
  font-size: var(--lt-fs-base);
  line-height: var(--lt-lh-snug);
}
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px; } /* iOS 自動ズーム回避 */
}

/* ── 7. テーマ主要コンポーネントのサイズ統一 ──────────── */

/* ヘッダー */
.learning-header__logo { font-family: var(--lt-font-serif); font-size: var(--lt-fs-lg); font-weight: var(--lt-fw-bold); letter-spacing: var(--lt-ls-tight); }
.learning-header__faq-link,
.learning-header__mobile-link { font-size: var(--lt-fs-sm); font-weight: var(--lt-fw-medium); }
.learning-header__mobile-link--small { font-size: var(--lt-fs-xs); }

/* ページタイトル・セクション見出し */
.learning-page-title,
.learning-section-title,
.learning-dashboard h2 { font-size: var(--lt-fs-xl); }
.learning-dashboard h3 { font-size: var(--lt-fs-lg); }

/* コンテンツカード */
.learning-card__title {
  font-family: var(--lt-font-sans);
  font-size: var(--lt-fs-md);
  font-weight: var(--lt-fw-bold);
  line-height: var(--lt-lh-snug);
  letter-spacing: var(--lt-ls-tight);
}
.learning-card__meta,
.learning-card__desc { font-size: var(--lt-fs-sm); color: var(--lt-ink-muted); line-height: var(--lt-lh-snug); }
.learning-card__action-btn { font-size: var(--lt-fs-sm); font-weight: var(--lt-fw-bold); letter-spacing: var(--lt-ls-wide); }

/* カテゴリ行 */
.learning-category-row__title { font-size: var(--lt-fs-lg); font-weight: var(--lt-fw-bold); }

/* 講義本文（記事・動画説明） */
.learning-content__body,
.learning-content__body p,
.learning-content__body li {
  font-size: var(--lt-fs-md);
  line-height: var(--lt-lh-loose);
}
.learning-content__body h2 { font-size: var(--lt-fs-xl); margin-top: 1.8em; }
.learning-content__body h3 { font-size: var(--lt-fs-lg); margin-top: 1.5em; }
.learning-content__title  { font-size: var(--lt-fs-2xl); line-height: var(--lt-lh-tight); }

/* 理解度クイズ・設問 */
.learning-question__text,
.learning-question__title { font-size: var(--lt-fs-md); font-weight: var(--lt-fw-bold); line-height: var(--lt-lh-snug); }
.learning-question__choice { font-size: var(--lt-fs-base); line-height: var(--lt-lh-snug); }
.learning-question__feedback { font-size: var(--lt-fs-base); }
.learning-question__feedback > strong { font-size: var(--lt-fs-lg); }
.learning-question__explanation { font-size: var(--lt-fs-base); line-height: var(--lt-lh-normal); }

/* アフターケア（まとめ・休憩・理解度チェック） */
.learning-aftercare__title { font-size: var(--lt-fs-xl); }
.learning-aftercare__title--big { font-size: var(--lt-fs-2xl); }
.learning-aftercare__desc,
.learning-aftercare__effect { font-size: var(--lt-fs-base); line-height: var(--lt-lh-normal); }
.learning-checks__text { font-size: var(--lt-fs-base); }
.learning-checks__num  { font-size: var(--lt-fs-base); }

/* 目標・モーダル */
.lc-goal-modal__title { font-size: var(--lt-fs-xl); }
.lc-goal-modal__desc  { font-size: var(--lt-fs-sm); line-height: var(--lt-lh-normal); }
.lc-goal-banner__text { font-size: var(--lt-fs-md); }
.lc-goal-banner__deadline { font-size: var(--lt-fs-sm); }
.lc-today-modal__title { font-size: var(--lt-fs-xl); }
.lc-today-modal__desc  { font-size: var(--lt-fs-base); }

/* ロードマップ・カレンダー・統計 */
.learning-roadmap__week-title { font-size: var(--lt-fs-lg) !important; }
.learning-stats-bar__value { font-size: var(--lt-fs-lg); font-weight: var(--lt-fw-black); }
.learning-stats-bar__label { font-size: var(--lt-fs-xs); }

/* ログイン・登録 */
.lx-login__title { font-size: var(--lt-fs-xl); }
.lx-login__label { font-size: var(--lt-fs-sm); }
.lx-login__input { font-size: var(--lt-fs-base); }
.lx-login__submit { font-size: var(--lt-fs-base); letter-spacing: var(--lt-ls-wide); }
.lx-login__register-label { font-size: var(--lt-fs-xs); letter-spacing: var(--lt-ls-wide); }
.lx-login__reg-btn { font-size: var(--lt-fs-sm); }
.lx-login__trial-note,
.lx-login__step-note { font-size: var(--lt-fs-xs); }

/* 修了証ページ（証明書本体は除外：画像に合わせた固有サイズを維持） */
.lc-cert-page h1 { font-size: var(--lt-fs-2xl); }

/* ゲスト体験のバー・案内 */
#lc-guest-bar { font-size: var(--lt-fs-sm); }
.lc-guest-notice__title { font-size: var(--lt-fs-lg); }
.lc-guest-notice__text  { font-size: var(--lt-fs-sm); }

/* ボタン共通 */
.learning-btn,
.lc-goal-btn,
.lc-today-modal__btn,
.g-btn { font-size: var(--lt-fs-base); font-weight: var(--lt-fw-bold); letter-spacing: var(--lt-ls-wide); }
.learning-btn--small, .button-small { font-size: var(--lt-fs-sm); }

/* ── 8. 可読性の底上げ ───────────────────────────────── */
/* 長い英単語・URLで横はみ出ししない */
p, li, td, .learning-card__title, .lc-goal-card__text { overflow-wrap: anywhere; word-break: normal; }
/* リンクの視認性 */
a:not([class]) { text-decoration: underline; text-underline-offset: .15em; }
/* 数字は等幅で揃える（残り時間・ポイント等） */
.lc-guest-bar__time, .learning-stats-bar__value, .learning-roadmap__pct { font-variant-numeric: tabular-nums; }

/* ── 9. 除外（画像に合わせた固有サイズが必要な要素） ── */
/* 修了証の証明書本体（.lc-cert 内）は、このレイヤーで一切上書きしない。
   上記のセレクタは .lc-cert 内の要素にマッチしないよう、ここで打ち消す。 */
.lc-cert h1, .lc-cert h2, .lc-cert h3, .lc-cert h4, .lc-cert h5, .lc-cert h6,
.lc-cert p, .lc-cert li, .lc-cert span, .lc-cert small, .lc-cert strong {
  font-size: unset;
  line-height: unset;
  letter-spacing: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  margin: unset;
}