@charset "UTF-8";
/* ===================================================================
   Medi-L 国試パック（学生版）専用スタイル
   - 全クラスに ks- 接頭辞（本体 medi-lecture.jp の共通CSSとの衝突防止）
   - 全称セレクタのリセットは使用しない。指定は .ks-page 配下に限定
   - モバイルファースト（375px基準）→ min-width 600px / 900px で拡張
   - 外部リソース参照なし（Webフォント・CDN・外部画像なし）
   =================================================================== */

.ks-page {
  --ks-navy: #1e3278;
  --ks-navy-deep: #16255c;
  --ks-cyan: #00afed;
  --ks-orange: #ff7a45;
  --ks-text: #333333;
  --ks-sub: #55607c;
  --ks-muted: #6d7793;
  --ks-line: #e2e9f6;
  --ks-line-soft: #eef2f9;
  --ks-bg: #ffffff;
  --ks-bg-soft: #f5f8fd;
  --ks-bg-tint: #f2f7ff;
  --ks-grad: linear-gradient(90deg, #00afed, #1e3278);

  --ks-radius-s: 8px;
  --ks-radius-m: 12px;
  --ks-radius-l: 14px;
  --ks-pill: 999px;

  --ks-gap-s: 8px;
  --ks-gap-m: 14px;
  --ks-gap-l: 22px;
  --ks-pad-x: 20px;
  --ks-sec-y: 40px;

  --ks-font: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;

  font-family: var(--ks-font);
  color: var(--ks-text);
  background: var(--ks-bg);
  line-height: 1.8;
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

/* 数字（価格・章数）は等幅寄りのタブナンバー表示にする */
.ks-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.ks-page img { max-width: 100%; height: auto; }
.ks-page a { color: var(--ks-cyan); text-decoration: none; }
.ks-page a:hover { color: var(--ks-navy); text-decoration: underline; }
.ks-page p { margin: 0; }
.ks-page h1, .ks-page h2, .ks-page h3 { margin: 0; line-height: 1.4; font-weight: 700; }
.ks-page ul { margin: 0; padding: 0; list-style: none; }

/* 文節単位の改行制御（日本語見出しの見切れ防止） */
.ks-nb { display: inline-block; }

.ks-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--ks-pad-x);
}

.ks-section { padding: var(--ks-sec-y) 0; }
.ks-section--soft { background: var(--ks-bg-soft); }
.ks-section--navy { background: linear-gradient(160deg, #1e3278, #16255c); color: #fff; }
.ks-section--tight { padding: 32px 0; }

.ks-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ks-cyan);
  margin-bottom: 6px;
}
.ks-section--navy .ks-eyebrow { color: #7fd4f6; }

.ks-h1 { font-size: 27px; font-weight: 700; color: var(--ks-navy); line-height: 1.35; text-wrap: pretty; }
.ks-h2 { font-size: 21px; font-weight: 700; color: var(--ks-navy); }
.ks-section--navy .ks-h1, .ks-section--navy .ks-h2 { color: #fff; }
.ks-lead { margin-top: 12px; color: var(--ks-sub); font-size: 14px; }
.ks-section--navy .ks-lead { color: #c8d3f0; }
.ks-note { font-size: 12px; color: var(--ks-muted); line-height: 1.7; }
/* .ks-mark（H1の水色マーカー）は 2026-08-03 池辺判断で不採用・削除 */
/* 2026-08-03: 代わりにコーポレート medi-lx.jp の `.hero h1 .accent` と同一手法で
   Navy→Cyan の文字グラデーションを当てる。ブランドの一貫性のため角度・色順も揃える。
   🔴 background-clip:text は色を transparent にするため、非対応ブラウザで文字が消える。
      @supports で対応環境に限定し、非対応時は navy のベタ塗りにフォールバックさせる。 */
.ks-accent { color: var(--ks-navy); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ks-page .ks-accent {
    background: linear-gradient(90deg, var(--ks-navy) 0%, var(--ks-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------- ヘッダー ---------- */
.ks-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e6ebf5;
}
.ks-header__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--ks-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ks-logo { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ks-logo img { display: block; height: 20px; width: auto; }
.ks-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--ks-orange);
  border-radius: 5px;
  padding: 4px 7px;
  white-space: nowrap;
}
.ks-nav { display: none; }
.ks-header__cta { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* ---------- SPメニュー（ハンバーガー / 2026-08-08 追加）----------
   🔴 追加理由: 600px未満では .ks-nav が display:none で、ハンバーガーも無かったため
   ログイン中のマイページ・ログアウト・配布資料・お知らせへ到達できなかった（S382で発覚）。
   JS を増やさないため checkbox + :checked のみで開閉する。600px以上では両方とも隠し、
   従来どおり .ks-nav（横並び）だけが出る＝PCの見た目は一切変えない。 */
.ks-menu-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 8px;
}
.ks-menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ks-navy);
  transition: transform .2s ease, opacity .2s ease;
}
.ks-menu-toggle:checked ~ .ks-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ks-menu-toggle:checked ~ .ks-menu-btn span:nth-child(2) { opacity: 0; }
.ks-menu-toggle:checked ~ .ks-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ドロワー本体。既定は閉（高さ0）。開いたら縦積みで全項目を出す。 */
.ks-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
  border-top: 0 solid #e6ebf5;
  background: #fff;
  overflow: hidden;
}
.ks-drawer > a {
  min-height: 0;
  padding: 0 var(--ks-pad-x);
  font-size: 15px;
  font-weight: 600;
  color: var(--ks-navy);
  line-height: 0;
  overflow: hidden;
  transition: line-height .22s ease, padding .22s ease;
  border-bottom: 1px solid transparent;
}
.ks-header:has(.ks-menu-toggle:checked) .ks-drawer { grid-template-rows: 1fr; border-top-width: 1px; }
.ks-header:has(.ks-menu-toggle:checked) .ks-drawer > a {
  line-height: 48px;
  border-bottom-color: #eef2fa;
}
/* 🔴 :has() 非対応ブラウザ向けフォールバック。checkbox は nav の兄弟ではないので
   `~` で辿れない＝:has() が使えない環境では開かない。その場合でもメニューが
   「存在しない」状態にはしないため、非対応時はドロワーを常時展開しておく。 */
@supports not selector(:has(*)) {
  .ks-drawer { grid-template-rows: 1fr; border-top-width: 1px; }
  .ks-drawer > a { line-height: 48px; border-bottom-color: #eef2fa; }
  .ks-menu-btn { display: none; }
}

/* ---------- ボタン / CTA ---------- */
.ks-page .ks-btn {
  display: inline-block;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  border-radius: var(--ks-pill);
  padding: 14px 26px;
  font-size: 15px;
  line-height: 1.4;
  text-decoration: none;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.ks-page .ks-btn--primary { color: #fff; background: var(--ks-grad); box-shadow: 0 8px 20px rgba(30, 50, 120, 0.22); }
.ks-page .ks-btn--primary:hover { color: #fff; filter: brightness(1.08); text-decoration: none; }
.ks-page .ks-btn--primary:active { filter: brightness(0.95); box-shadow: none; }
.ks-page .ks-btn--ghost { color: var(--ks-navy); border: 1.5px solid var(--ks-navy); background: transparent; }
.ks-page .ks-btn--ghost:hover { background: var(--ks-bg-tint); color: var(--ks-navy); text-decoration: none; }
.ks-page .ks-btn--onnavy { color: var(--ks-navy); background: #fff; }
.ks-page .ks-btn--onnavy:hover { background: var(--ks-bg-tint); color: var(--ks-navy); text-decoration: none; }
.ks-page .ks-btn--solid { color: #fff; background: var(--ks-navy); font-size: 13px; padding: 10px 18px; }
.ks-page .ks-btn--solid:hover { background: var(--ks-navy-deep); color: #fff; text-decoration: none; }
.ks-page .ks-btn--sm { font-size: 12px; padding: 9px 14px; }

/* CTA群：ボタン直下の条件併記は必ず同一視認性（15px / --ks-text） */
.ks-cta { display: grid; gap: 8px; justify-items: start; }
.ks-cta--center { justify-items: center; text-align: center; }
.ks-cta__terms { font-size: 15px; font-weight: 500; color: var(--ks-text); }
.ks-section--navy .ks-cta__terms { color: #fff; }
.ks-cta__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Hero ---------- */
.ks-hero { padding: 32px 0 34px; background: linear-gradient(140deg, #f4f9ff 0%, #eaf3fd 55%, #e6ecfb 100%); }
.ks-hero__body { display: grid; gap: 20px; }
.ks-tag {
  justify-self: start;
  font-size: 11px;
  font-weight: 700;
  color: var(--ks-navy);
  background: #fff;
  border: 1px solid #cfe3f8;
  border-radius: var(--ks-pill);
  padding: 7px 13px;
}
/* 国試カウントダウン等の後付け用スロット（現状は非表示・高さ0） */
.ks-slot { display: none; }

.ks-price-set { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.ks-price-set__item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: #fff;
  border: 1px solid #dbe6f6;
  border-radius: var(--ks-radius-m);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ks-navy);
}
.ks-price-set__item--accent { border-color: #ffd9c8; color: var(--ks-orange); }
.ks-price-set__num { font-size: 26px; font-weight: 700; }
.ks-price-set__unit { font-size: 12px; font-weight: 400; color: var(--ks-sub); }

/* ---------- カードグリッド ---------- */
.ks-grid { display: grid; gap: var(--ks-gap-m); margin-top: var(--ks-gap-l); }
.ks-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  border: 1px solid #e6ebf5;
  border-radius: var(--ks-radius-m);
  background: #fbfcff;
}
.ks-card__no { font-size: 13px; font-weight: 700; color: var(--ks-orange); }
.ks-card__title { font-size: 16px; font-weight: 700; color: var(--ks-navy); line-height: 1.6; }
.ks-card__text { font-size: 13px; color: var(--ks-sub); line-height: 1.85; }
.ks-card--onnavy {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}
.ks-card--onnavy .ks-card__no { color: #7fd4f6; font-size: 24px; }
.ks-card--onnavy .ks-card__title { color: #fff; font-size: 17px; }
.ks-card--onnavy .ks-card__text { color: #c8d3f0; }
.ks-card__rule { width: 40px; height: 4px; border-radius: 2px; background: var(--ks-grad); }

/* ---------- カリキュラム（LP：3STEP圧縮表示） ---------- */
.ks-steps { display: grid; gap: var(--ks-gap-m); margin-top: var(--ks-gap-l); }
.ks-step {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-l);
}
.ks-step__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--ks-orange); }
.ks-step__name { font-size: 23px; font-weight: 700; color: var(--ks-navy); }
.ks-step__desc { font-size: 13px; color: var(--ks-sub); }
.ks-step__scale { font-size: 13px; font-weight: 700; color: var(--ks-cyan); }
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-chip {
  font-size: 13px;
  color: var(--ks-navy);
  background: var(--ks-bg-tint);
  border: 1px solid #dbe6f6;
  border-radius: var(--ks-pill);
  padding: 6px 13px;
}
.ks-chips__more { font-size: 13px; color: var(--ks-muted); padding: 6px 2px; }

/* 進行バー（難易度ではなく「行動の進行」の表現） */
.ks-bar { height: 6px; border-radius: 3px; background: #eaf0fa; overflow: hidden; }
.ks-bar__fill { height: 100%; border-radius: 3px; background: var(--ks-grad); }
.ks-bar--thin { height: 5px; }

/* ---------- 監修・信頼性 ---------- */
.ks-quality { display: grid; gap: 16px; margin-top: var(--ks-gap-l); }
.ks-profile {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--ks-radius-l);
  background: linear-gradient(160deg, #f2f8ff, #eaf1ff);
  border: 1px solid #dbe6f6;
}
.ks-profile__head { display: flex; gap: 14px; align-items: center; }
.ks-profile__photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  background: #d8e3f6;
  border: 2px solid #fff;
  flex: 0 0 auto;
}
.ks-profile__role { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--ks-orange); }
.ks-profile__name { font-size: 19px; font-weight: 700; color: var(--ks-navy); }
.ks-profile__meta { font-size: 12px; color: var(--ks-sub); }
.ks-profile__text { font-size: 14px; color: #3c4762; }

/* ---------- 料金 ---------- */
.ks-pricing { display: grid; gap: 16px; margin-top: var(--ks-gap-l); }
.ks-plan {
  display: grid;
  gap: 16px;
  padding: 26px 22px;
  background: #fff;
  border: 2px solid var(--ks-navy);
  border-radius: 16px;
}
.ks-plan__price { display: flex; align-items: baseline; gap: 8px; }
.ks-plan__amount { font-size: 44px; font-weight: 700; color: var(--ks-navy); line-height: 1; }
.ks-plan__unit { font-size: 14px; color: var(--ks-sub); }
.ks-plan__list { display: grid; gap: 8px; }
.ks-plan__item { display: flex; gap: 10px; font-size: 14px; color: #3c4762; line-height: 1.7; }
.ks-plan__check { color: var(--ks-cyan); font-weight: 700; }
.ks-side {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--ks-line);
  border-radius: 16px;
}
.ks-side__title { font-size: 16px; font-weight: 700; color: var(--ks-navy); }
.ks-side__text { font-size: 14px; color: var(--ks-sub); }
.ks-side__caution { font-size: 12px; color: var(--ks-muted); padding-top: 12px; border-top: 1px solid var(--ks-line-soft); line-height: 1.85; }

/* ---------- FAQ（details/summary・JS不使用） ---------- */
.ks-faq { display: grid; gap: 10px; margin-top: var(--ks-gap-l); }
.ks-faq__item { background: #fff; border: 1px solid var(--ks-line); border-radius: var(--ks-radius-m); padding: 16px 18px; }
.ks-faq__q {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--ks-navy);
  line-height: 1.65;
  list-style: none;
}
.ks-faq__q::-webkit-details-marker { display: none; }
.ks-faq__q::before { content: "Q"; color: var(--ks-cyan); flex: 0 0 auto; }
.ks-faq__a {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ks-line-soft);
  font-size: 14px;
  color: var(--ks-sub);
  line-height: 1.95;
}

/* ---------- 最終CTA ---------- */
.ks-final { padding: 44px 0; background: linear-gradient(140deg, #1e3278, #00afed); color: #fff; text-align: center; }
.ks-final .ks-h2 { color: #fff; font-size: 23px; }
.ks-final__lead { margin: 12px auto 22px; font-size: 14px; color: #e2ebff; max-width: 520px; }
.ks-final a.ks-link-w { color: #fff; text-decoration: underline; font-size: 14px; font-weight: 700; }

/* ---------- フッター ---------- */
.ks-footer { padding: 32px 0; background: var(--ks-navy-deep); color: #c8d3f0; }
.ks-footer__in { display: grid; gap: 14px; }
.ks-footer__links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.ks-page .ks-footer__links a { color: #c8d3f0; }
.ks-page .ks-footer__links a:hover { color: #fff; text-decoration: underline; }
.ks-footer__legal { font-size: 12px; color: #8fa0cc; line-height: 1.8; }

/* ===================================================================
   list1（講義一覧）
   =================================================================== */
.ks-listhero { padding: 26px 0 24px; background: linear-gradient(140deg, #f4f9ff, #e8eefb); }
.ks-progress {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #fff;
  border: 1px solid #dbe6f6;
  border-radius: var(--ks-radius-l);
  max-width: 640px;
  margin-top: 18px;
}
.ks-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ks-progress__label { font-size: 13px; font-weight: 700; color: var(--ks-navy); }
.ks-progress__count { font-size: 15px; font-weight: 700; color: var(--ks-navy); }
.ks-progress__resume { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ks-progress__last { font-size: 13px; color: var(--ks-sub); }

/* アンカーナビ（タブではなくページ内ジャンプ／JS不使用） */
.ks-anchors {
  position: sticky;
  top: 41px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #e6ebf5;
}
.ks-anchors__in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--ks-pad-x);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ks-anchors a {
  font-size: 13px;
  font-weight: 700;
  color: var(--ks-navy);
  background: var(--ks-bg-tint);
  border: 1px solid #dbe6f6;
  border-radius: var(--ks-pill);
  padding: 8px 14px;
  text-decoration: none;
}
.ks-anchors a:hover { background: #e3edff; text-decoration: none; }

.ks-stepsec { padding: 34px 0; border-bottom: 1px solid var(--ks-line-soft); scroll-margin-top: 96px; }
.ks-stepsec__head { display: flex; gap: 14px; align-items: flex-start; }
.ks-stepsec__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ks-radius-m);
  background: linear-gradient(140deg, #00afed, #1e3278);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  flex: 0 0 auto;
}
.ks-group { display: grid; gap: 12px; margin-top: var(--ks-gap-l); }
.ks-group__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ks-navy);
  padding-left: 10px;
  border-left: 3px solid var(--ks-cyan);
}
.ks-themes { display: grid; gap: var(--ks-gap-m); }
.ks-theme {
  display: grid;
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-l);
  overflow: hidden;
  background: #fff;
}
.ks-theme:hover { box-shadow: 0 10px 26px rgba(30, 50, 120, 0.1); }
.ks-theme__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(140deg, #dfe9fa, #eef4ff);
}
.ks-theme__body { display: grid; gap: 10px; padding: 14px 16px 16px; }
.ks-theme__title { font-size: 15px; font-weight: 700; color: var(--ks-navy); line-height: 1.6; }
.ks-theme__count { font-size: 12px; font-weight: 700; color: var(--ks-cyan); }
.ks-chaps { display: flex; flex-wrap: wrap; gap: 6px; }
.ks-chap {
  font-size: 12px;
  color: #3c4762;
  background: var(--ks-bg-soft);
  border: 1px solid var(--ks-line);
  border-radius: var(--ks-radius-s);
  padding: 6px 10px;
  text-decoration: none;
}
.ks-chap:hover { background: #eaf1ff; color: var(--ks-navy); text-decoration: none; }
.ks-theme__foot { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ks-line-soft); }
.ks-theme__progress { display: flex; justify-content: space-between; font-size: 11px; color: var(--ks-sub); }
.ks-theme__progress strong { color: var(--ks-navy); }
.ks-theme__gate { display: grid; gap: 8px; justify-items: start; }
.ks-theme__gate p:first-child { font-size: 13px; font-weight: 700; color: var(--ks-orange); }
.ks-theme__gate .ks-note { font-size: 11px; }

/* ===================================================================
   ブレークポイント: 600px（2カラム化）/ 900px（PC 1080px想定）
   =================================================================== */
@media (min-width: 600px) {
  .ks-page { font-size: 15px; }
  .ks-h1 { font-size: 34px; }
  .ks-h2 { font-size: 25px; }
  .ks-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .ks-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ks-themes { grid-template-columns: repeat(2, 1fr); }
  .ks-nav { display: flex; gap: 16px; font-size: 13px; font-weight: 500; white-space: nowrap; }
  .ks-nav a { color: var(--ks-navy); }
  /* 🔴 600px以上ではSPメニューを完全に消す（PCの見た目を変えないための打ち消し）。
     :has() 非対応フォールバックで常時展開にした分もここで確実に閉じる。 */
  .ks-menu-btn { display: none; }
  .ks-drawer { display: none; }
}

@media (min-width: 900px) {
  .ks-page { --ks-pad-x: 40px; --ks-sec-y: 64px; }
  .ks-hero { padding: 60px 0 54px; }
  .ks-hero__body { gap: 26px; max-width: 760px; }
  .ks-h1 { font-size: 46px; line-height: 1.32; }
  .ks-h2 { font-size: 30px; }
  .ks-lead { font-size: 16px; }
  .ks-logo img { height: 26px; }
  .ks-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .ks-step { grid-template-columns: 280px 1fr; gap: 22px; padding: 26px; align-items: start; }
  .ks-step__name { font-size: 26px; }
  .ks-quality { grid-template-columns: 1fr 1.1fr; align-items: start; }
  .ks-pricing { grid-template-columns: 1.15fr 1fr; }
  .ks-plan { padding: 32px; }
  .ks-plan__amount { font-size: 56px; }
  .ks-final { padding: 66px 0; }
  .ks-final .ks-h2 { font-size: 32px; }
  .ks-listhero { padding: 40px 0 34px; }
  .ks-stepsec { padding: 44px 0; }
  .ks-price-set__num { font-size: 30px; }
}

/* ===== 2026-08-03 実機確認による修正（池辺指摘） ===== */
/* 2026-08-03: カード高が揃わず内容が上寄せになるため、縦横中央に揃える */
.ks-page .ks-price-set__item { display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; }
/* 🔴 2026-08-03: 濃紺CTAバンドの実クラスは .ks-final。白文字の指定が
   .ks-section--navy にしか無く、注記が既定色(#333)のまま濃紺背景に乗って読めなかった。 */
.ks-page .ks-final .ks-cta__terms { color: #fff; }
.ks-page .ks-final .ks-final__lead { color: #dbe4fb; }
/* 2026-08-03: 見出し・CTAが中央なのにリード文だけ左寄せだったため揃える */
.ks-page .ks-final__lead { text-align: center; margin-left: auto; margin-right: auto; }

/* 2026-08-03: 監修責任者の所属・役職リスト（池辺指示で追記）。
   既存の .ks-profile__meta と同じ補足色・字送りに揃え、本文より一段下げて置く。 */
.ks-page .ks-profile__affil { list-style: none; margin: 12px 0 0; padding: 0;
  font-size: 12.5px; line-height: 1.85; color: var(--ks-sub); }
.ks-page .ks-profile__affil li { position: relative; padding-left: 12px; }
.ks-page .ks-profile__affil li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--ks-cyan); }

/* 2026-08-03: サムネイルを第1回へのリンク化（池辺指示）。
   .ks-page a の下線・色変化がサムネに乗らないよう打ち消し、押せることはホバーで示す。 */
.ks-page .ks-theme__thumblink { display: block; text-decoration: none; }
.ks-page .ks-theme__thumblink:hover { text-decoration: none; }
.ks-page .ks-theme__thumblink img { transition: opacity .15s ease, transform .15s ease; }
.ks-page .ks-theme__thumblink:hover img { opacity: .88; }

/* =========================================================================
 * 国試 過去問Web演習（Phase 0・2026-08-10 / S394）
 * 対象: /quiz/ · /quiz/unit/<id> · /quiz/q/<uid>
 * 🔴 PDL1.0 の要請で「原典部」と「自社解説」を視覚的に分離する（.ks-q-exp が解説側）。
 * ========================================================================= */

/* --- 演習トップ: 領域カード --- */
.ks-q-domains { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ks-q-domain {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--ks-line); background: #fff;
  font-size: 13.5px; text-decoration: none; color: var(--ks-navy);
}
.ks-q-domain:hover { border-color: var(--ks-cyan); }
.ks-q-domain__label { font-weight: 700; }
.ks-q-domain__cnt { font-size: 12px; color: var(--ks-muted); }
.ks-q-count { margin-left: 10px; font-size: 13px; font-weight: 500; color: var(--ks-muted); }

/* --- 単元リスト --- */
.ks-q-units { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ks-q-units a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--ks-line); border-radius: 10px;
  background: #fff; text-decoration: none; color: var(--ks-text);
}
.ks-q-units a:hover { border-color: var(--ks-cyan); }
.ks-q-unit__name { font-size: 14.5px; font-weight: 600; color: var(--ks-navy); }
.ks-q-unit__cnt { flex: 0 0 auto; font-size: 12.5px; color: var(--ks-muted); }

/* --- 設問リスト --- */
.ks-q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ks-q-list a {
  display: block; padding: 14px 16px;
  border: 1px solid var(--ks-line); border-radius: 10px; background: #fff;
  text-decoration: none; color: var(--ks-text);
}
.ks-q-list a:hover { border-color: var(--ks-cyan); }
.ks-q-list__meta { display: block; font-size: 12px; color: var(--ks-muted); margin-bottom: 6px; }
.ks-q-list__body { display: block; font-size: 14px; line-height: 1.75; }

.ks-q-badge {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--ks-navy); color: #fff; font-size: 11px; font-weight: 700; vertical-align: middle;
}
.ks-q-badge--situ { background: var(--ks-cyan); }
.ks-q-badge--calc { background: #ff7a45; }

/* --- 設問本体 --- */
.ks-q-case { margin: 0 0 16px; border: 1px solid var(--ks-line); border-radius: 10px; background: #fff; }
.ks-q-case > summary { padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ks-navy); }
.ks-q-case__body { padding: 0 16px 16px; font-size: 14px; line-height: 1.95; }
.ks-q-body { font-size: 16px; line-height: 1.95; font-weight: 600; color: var(--ks-text); margin-bottom: 18px; }
.ks-q-hint { font-size: 12.5px; color: var(--ks-muted); margin: 0 0 10px; }

.ks-q-choices { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.ks-q-choice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; min-height: 44px;   /* タップ領域 44px 以上 */
  border: 1px solid var(--ks-line); border-radius: 10px; background: #fff; cursor: pointer;
}
.ks-q-choice:hover { border-color: var(--ks-cyan); }
.ks-q-choice input { margin-top: .3em; flex: 0 0 auto; }
.ks-q-choice__no { flex: 0 0 auto; font-weight: 700; color: var(--ks-navy); }
.ks-q-choice__text { font-size: 14.5px; line-height: 1.8; }

.ks-q-numeric { display: block; margin-bottom: 18px; }
.ks-q-numeric__label { display: block; font-size: 13px; font-weight: 700; color: var(--ks-navy); margin-bottom: 8px; }
.ks-q-numeric input {
  width: 100%; max-width: 220px; padding: 13px 16px;
  font: inherit; font-size: 16px;   /* SPでフォーカス時にズームさせない */
  border: 1.5px solid #c9d1e3; border-radius: 8px; background: #fff;
}
.ks-q-submit { width: 100%; }

/* --- 採点結果。🔴 色だけに頼らず記号も併用する（アクセシビリティ・設計書§7.2） --- */
.ks-q-result { margin: 16px 0 0; padding: 14px 16px; border-radius: 10px; font-size: 15px; font-weight: 700; }
.ks-q-result.is-correct { background: #e8f6ec; color: #1d7a3a; border: 1px solid #b6e0c2; }
.ks-q-result.is-correct::before { content: "○ "; }
.ks-q-result.is-wrong { background: #fdf0ef; color: #b3352f; border: 1px solid #f0c4c1; }
.ks-q-result.is-wrong::before { content: "✕ "; }
.ks-q-result.is-error { background: #fff8e6; color: #8a6d1f; border: 1px solid #ecd9a3; font-weight: 500; }

/* --- 解説（自社著作部）。🔴 原典と視覚的に分離するためのラベルと背景 --- */
.ks-q-exp {
  margin: 22px 0 0; padding: 18px 18px 6px;
  border: 1px solid var(--ks-line); border-left: 4px solid var(--ks-cyan);
  border-radius: 10px; background: var(--ks-bg-soft);
}
.ks-q-exp__label {
  margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--ks-navy);
}
.ks-q-exp__body { font-size: 14.5px; line-height: 1.95; color: var(--ks-text); }
.ks-q-exp__body p { margin: 0 0 12px; }
.ks-q-exp__body ul { margin: 0 0 12px; padding-left: 1.3em; }
.ks-q-exp__body li { margin-bottom: 6px; }
.ks-q-exp__body strong { color: var(--ks-navy); }
.ks-q-exp__body small { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--ks-line); font-size: 13px; color: var(--ks-sub); }

.ks-q-source { margin: 18px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--ks-muted); }
.ks-q-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.ks-q-form { margin: 0 0 8px; }

/* ========= 無料会員登録（Phase 1a・2026-08-10 / S394） ========= */
.ks-q-benefits{
  padding:18px 20px;border:1px solid var(--ks-line);border-left:4px solid var(--ks-cyan);
  border-radius:10px;background:var(--ks-bg-soft);
}
.ks-q-benefits__title{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--ks-navy)}
.ks-q-benefits ul{margin:0 0 10px;padding-left:1.3em;font-size:14px;line-height:1.95;color:var(--ks-text)}
.ks-q-benefits li{margin-bottom:6px}

.ks-q-field{margin-bottom:18px}
.ks-q-field label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:700;color:var(--ks-navy)}
.ks-q-req{
  display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:#d9534f;color:#fff;font-size:11px;font-weight:700;vertical-align:middle;
}
.ks-q-field input[type="text"],
.ks-q-field input[type="email"],
.ks-q-field input[type="password"],
.ks-q-field select{
  width:100%;padding:13px 16px;font:inherit;font-size:16px;   /* SPでズームさせない */
  color:var(--ks-text);background:#fff;
  border:1.5px solid #c9d1e3;border-radius:8px;
  appearance:none;-webkit-appearance:none;
}
.ks-q-field select{background-image:none}

.ks-q-errors{
  margin:0 0 20px;padding:14px 16px;border:1px solid #f0c4c1;border-radius:10px;background:#fdf0ef;
}
.ks-q-errors__title{margin:0 0 8px;font-size:13.5px;font-weight:700;color:#b3352f}
.ks-q-errors ul{margin:0;padding-left:1.3em;font-size:13px;line-height:1.85;color:#b3352f}

.ks-q-notice{
  padding:18px 20px;border:1px solid var(--ks-line);border-radius:10px;background:#fff;
  font-size:14px;line-height:1.95;color:var(--ks-text);
}
.ks-q-notice p{margin:0 0 10px}
.ks-q-notice p:last-child{margin-bottom:0}
.ks-q-notice--warn{border-left:4px solid #d9534f;background:#fdf3f2}
.ks-q-reveal{margin:18px 0 0}

/* ========= 学習ダッシュボード（Phase 1a・2026-08-10 / S394） ========= */
.ks-q-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ks-q-stat{padding:16px 12px;border:1px solid var(--ks-line);border-radius:10px;background:#fff;text-align:center}
.ks-q-stat__num{display:block;font-size:26px;font-weight:700;color:var(--ks-navy);line-height:1.2}
.ks-q-stat__label{display:block;margin-top:6px;font-size:12px;color:var(--ks-muted)}
.ks-q-stat__label small{display:block;font-size:10.5px;margin-top:2px}

.ks-q-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ks-q-box{padding:16px 12px;border:1px solid var(--ks-line);border-radius:10px;background:#fff;text-align:center}
.ks-q-box__num{display:block;font-size:24px;font-weight:700;line-height:1.2;color:var(--ks-navy)}
.ks-q-box__label{display:block;margin-top:6px;font-size:12px;color:var(--ks-muted)}
.ks-q-box__label small{display:block;font-size:10.5px;margin-top:2px;line-height:1.5}
.ks-q-box.is-wrong{border-color:#f0c4c1;background:#fdf0ef}
.ks-q-box.is-wrong .ks-q-box__num{color:#b3352f}
/* 🔴 克服済みは「できるようになった事実」なので、唯一の達成色で見せる */
.ks-q-box.is-overcome{border-color:#b6e0c2;background:#e8f6ec}
.ks-q-box.is-overcome .ks-q-box__num{color:#1d7a3a}

.ks-q-bars{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.ks-q-bar__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ks-q-bar__name{font-size:14px;font-weight:700;color:var(--ks-navy)}
.ks-q-bar__val{font-size:12.5px;color:var(--ks-muted);text-align:right}
.ks-q-bar__val small{font-size:11px;margin-left:4px}
.ks-q-bar{height:10px;border-radius:999px;background:var(--ks-line);overflow:hidden}
.ks-q-bar__fill{display:block;height:100%;border-radius:999px;background:var(--ks-cyan)}
.ks-q-bars li.is-good .ks-q-bar__fill{background:#1d7a3a}
.ks-q-bars li.is-mid  .ks-q-bar__fill{background:#e0a92b}
.ks-q-bars li.is-low  .ks-q-bar__fill{background:#b3352f}
.ks-q-bars li.is-none .ks-q-bar__fill{background:transparent}

@media(max-width:430px){
  .ks-q-stats,.ks-q-boxes{grid-template-columns:1fr 1fr}
  .ks-q-boxes .ks-q-box:last-child{grid-column:1 / -1}
}