/* ============================================================
   V6b｜FV可読性版（別バージョン・index_v6b.html だけが読み込む）
   既存の index_v6.html / css/v6.css には一切影響しない。

   ■問題
   巨大文字（monument）の輪郭がコピーを横切り、見出し・サブ・CTAが読みにくい。
   とくにスライド1は金の「×」がサブコピーとCTAに重なる。

   ■方針（正典に戻す）
   マスター§1-B は巨大文字を「コピー背面で20〜35%の視認性」と規定している。
   現状 slide0 は「赤40%の輪郭・不透明度1.0」で、規定より濃い。
   よってこれは "舞台装置を弱める" 改変ではなく、**正典の視認性へ戻す**処置。
   舞台装置の位置骨格・塗り・はみ出しは一切変更しない（§2-A維持）。

   ■3方式を ?sc= で切替（比較用）
     sc-mask（既定） monument自体をコピー背面でだけ弱める。背景・グラデは汚さない
     sc-veil        monumentとコピーの間に、その舞台の地色でやわらかい幕を1枚入れる
     sc-both        併用（最も強い）
     sc-off         無処理（＝ index_v6.html と同じ状態。比較の基準）
   ============================================================ */

/* --- コピーが乗る領域（楕円）。ここだけ巨大文字を薄める --- */
.stage {
  --sc-x: 26%;   /* 楕円の中心X＝コピーの重心 */
  --sc-y: 50%;   /* 楕円の中心Y */
  --sc-w: 70%;   /* 楕円の幅 */
  --sc-h: 90%;   /* 楕円の高さ＝ラベルからCTA・PICK UPまでを含める */
  --sc-core: .30; /* 中心での巨大文字の残り視認性＝正典の20〜35%帯 */
}

/* ============================================================
   1. sc-mask: 巨大文字そのものをコピー背面でだけ弱める（推奨）
   幕を足さないので、スライド3の赤グラデーションを濁らせない。
   マスクのalpha: 1=そのまま見える / .30=30%だけ見える
   ============================================================ */
.sc-mask .monument,
.sc-both .monument {
  -webkit-mask-image: radial-gradient(ellipse var(--sc-w) var(--sc-h) at var(--sc-x) var(--sc-y),
      rgba(0, 0, 0, var(--sc-core)) 0%,
      rgba(0, 0, 0, var(--sc-core)) 34%,
      rgba(0, 0, 0, .70) 58%,
      rgba(0, 0, 0, 1) 82%);
  mask-image: radial-gradient(ellipse var(--sc-w) var(--sc-h) at var(--sc-x) var(--sc-y),
      rgba(0, 0, 0, var(--sc-core)) 0%,
      rgba(0, 0, 0, var(--sc-core)) 34%,
      rgba(0, 0, 0, .70) 58%,
      rgba(0, 0, 0, 1) 82%);
}

/* ============================================================
   2. sc-veil: 舞台の地色のやわらかい幕を1枚（monument z-index:1 と slides z-index:10 の間）
   ============================================================ */
.veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s ease, background 1.1s ease;
  background: radial-gradient(ellipse var(--sc-w) var(--sc-h) at var(--sc-x) var(--sc-y),
      color-mix(in srgb, var(--sc-veil-c) 74%, transparent) 0%,
      color-mix(in srgb, var(--sc-veil-c) 60%, transparent) 34%,
      transparent 74%);
}
.sc-veil .veil,
.sc-both .veil { opacity: 1; }
/* 幕の色は、その舞台の地色に一致させる（幕だと気づかせない） */
.stage[data-slide="0"] { --sc-veil-c: var(--alpe-paper); }
.stage[data-slide="1"] { --sc-veil-c: var(--alpe-paper-dim); }
.stage[data-slide="2"] { --sc-veil-c: var(--alpe-red-night); }
.stage[data-slide="3"] { --sc-veil-c: var(--alpe-red-stage); }

/* 併用時は、それぞれを弱めて重ねすぎを防ぐ */
.sc-both { --sc-core: .46; }
.sc-both .veil {
  background: radial-gradient(ellipse var(--sc-w) var(--sc-h) at var(--sc-x) var(--sc-y),
      color-mix(in srgb, var(--sc-veil-c) 46%, transparent) 0%,
      color-mix(in srgb, var(--sc-veil-c) 34%, transparent) 34%,
      transparent 74%);
}

/* ============================================================
   3. レスポンシブ: モバイルはコピーが画面幅いっぱい＝楕円を広く・中央へ
   ============================================================ */
@media (max-width: 62em) {
  .stage { --sc-x: 40%; --sc-w: 92%; --sc-h: 74%; }
}
@media (max-width: 46em) {
  .stage { --sc-x: 50%; --sc-y: 42%; --sc-w: 124%; --sc-h: 72%; }
}

/* ============================================================
   V10｜トップ再構成（2026-07-19・施主レビュー二巡目・index_v6bのみ）
   設計書: V10_トップ再構成設計_ヘッダー統一・入口カード統合.md
   見本  : _見本_V10_ヘッダーと入口カード.html（見た目の正）
   施主裁定:
     ・ヘッダーは「1枚の統一背景」＝**白帯**（ロゴ白地PNGと地続きで継ぎはぎ感を解消）
       帯下辺は深紅2px＋金1pxの二重罫でブランドの緊張感を担保
     ・nav各項目に金の菱◆＝押せる手がかり（M5の大タブ・ピル禁止は維持）
     ・「入口」＝作り手言葉を廃し、塾HPの慣習語「**講座**」へ（K3改・K9）
     ・三分岐帯を廃止し、講座カード6枚へ統合（K4〜K8）
   マスター§2-A「ヘッダーは帯にしない」は本件で更新（施主指示2026-07-19・C-26）。
   ============================================================ */

/* --- A. ヘッダー: 白の統一帯（旧V6b-2のロゴプレート＋navリボンを置換） --- */
.head {
  background: var(--alpe-white);
  border-bottom: 2px solid var(--alpe-red-stage);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--alpe-gold) 55%, transparent);
}
/* ロゴは白帯に直置き（プレートの継ぎ目をなくす）。余白トリミング版で大きく */
.lockup { gap: 0; background: none; border: 0; padding: 0; }
.logo-full { display: block; height: clamp(2.6em, 4.6vw, 3.5em); width: auto; }

/* --- B. gnav: リボンを外し、白帯の上で色の階層（墨→金→臙脂）を効かせる --- */
.gnav ul { gap: 1.6em; background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gnav a {
  color: var(--alpe-ink-soft);
  opacity: 1;
  letter-spacing: .07em;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  transition: color .2s;
}
/* ◆＝クリックできる手がかり（施主要望2） */
.gnav a::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
  transition: color .2s;
}
.gnav a:hover { color: var(--alpe-red); opacity: 1; }
.gnav a:hover::before { color: var(--alpe-red); }
.gnav a.nav-focus {
  color: var(--alpe-red);
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--alpe-gold) 85%, transparent);
  padding-bottom: .1em;
}
.gnav a.nav-focus::before { color: var(--alpe-red); }
.gnav a.nav-focus:hover { opacity: 1; color: var(--alpe-red-deep); }
/* 白帯なのでスライド別の明暗反転（site.css）は不要＝常に固定色にする */
.stage[data-slide="0"] .head,
.stage[data-slide="1"] .head,
.stage[data-slide="2"] .head,
.stage[data-slide="3"] .head { color: var(--alpe-ink); }

/* --- C. 目次（入口一覧）: チップ化＋「入口は、4つ。」の実見出し（施主要望11・12） --- */
.index {
  background: color-mix(in srgb, var(--alpe-white) 84%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 1em 1.25em 1.1em;
  gap: .95em;
}
.index::before { content: none; } /* 旧「SELECT ─ 入口を選ぶ」を実要素 .index-head に置換 */
.index-head { display: flex; flex-direction: column; gap: .2em; margin-bottom: .25em; }
.ih-main {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: .14em;
  color: var(--alpe-red);
}
.ih-sub { font-size: calc(var(--fs-small) * .82); letter-spacing: .05em; color: var(--alpe-ink-soft); }
/* 紙の上は常に墨（site.cssのスライド別反転より詳細度で勝たせる） */
.stage[data-slide="0"] .index,
.stage[data-slide="1"] .index,
.stage[data-slide="2"] .index,
.stage[data-slide="3"] .index { color: var(--alpe-ink); }
/* 項目: 非現在も読める濃さへ引き上げ、現在は臙脂で明示 */
.idx { opacity: .74; }
.idx .t::after { opacity: .35; }
.idx[aria-current="true"] { opacity: 1; }
.idx[aria-current="true"] .n { color: var(--alpe-red); }
.idx[aria-current="true"] .t { font-weight: 700; }
/* 初回の誘導パルスは白地に合わせ臙脂で（同名keyframesを後勝ちで再定義）。4項目目にも付与 */
@keyframes idx-pulse { 0%, 100% { color: inherit; } 45% { color: var(--alpe-red); } }
.idx:nth-of-type(4) .n { animation: idx-pulse 1s ease-out 1.95s 1; }

/* --- D. PICK UP: 白チップで沈み込みを解消（施主要望10） --- */
.pickup {
  background: color-mix(in srgb, var(--alpe-white) 84%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-btn);
  padding: .55em .9em .5em;
}
.stage[data-slide="0"] .pickup,
.stage[data-slide="1"] .pickup,
.stage[data-slide="2"] .pickup,
.stage[data-slide="3"] .pickup { color: var(--alpe-ink); }
.pickup .pk { color: var(--alpe-red); }

/* --- E. スライド内の入口カウンタ「入口 01 / 04」（初見の誤解防止・施主要望12）
       コピー正典（label・見出し）は不変。メタ情報の1行だけを足す --- */
.entrance-no {
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .85);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  margin-bottom: 1.1em;
}
.slide-0 .entrance-no, .slide-1 .entrance-no { color: var(--alpe-red); }
.slide-2 .entrance-no, .slide-3 .entrance-no { color: var(--alpe-gold); }
.slide.on .entrance-no { animation: rise .5s 0s both; }

/* ============================================================
   F. 講座カード（旧・三分岐帯＋五つの入口を1セクションへ統合／施主要望4）
   カード2サイズ・誘導先の明示・孤立行を作らない改行規範（設計書§4）
   ============================================================ */
.courses { background: var(--alpe-paper-dim); padding-block: clamp(56px, 9vh, 100px); border-top: var(--rule-gold); }
.crs-en {
  font-size: calc(var(--fs-small) * .78);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
  text-transform: uppercase;
}
/* K3改: 1行・改行なし（施主指摘） */
.crs-title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(17px, 2.5vw, 30px);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  margin: .4em 0 1.6em;
  white-space: nowrap;
}
/* minmax(0,1fr): nowrapな子（.cc-cat/.cc-go）の min-content で列が押し広げられ、
   グリッドが親幅を超える（＝横スクロール）のを防ぐ。1024pxで実測・確認済み */
.crs-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 4列化は72em以上に限定。64emでは1枚あたりの本文幅が160pxしか取れず、
   文節スパンがスパン内部で折れて2〜3字の孤立行が出る（実測） */
@media (min-width: 72em) { .crs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ccard {
  background: var(--alpe-white);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 1.5em 1.4em 1.3em;
  display: flex;
  flex-direction: column;
  gap: .55em;
  color: var(--alpe-ink);
  transition: transform .2s, box-shadow .2s;
}
.ccard:hover { color: var(--alpe-ink); transform: translateY(-3px); box-shadow: 0 8px 24px color-mix(in srgb, var(--alpe-ink) 8%, transparent); }
.ccard--l { grid-column: span 2; }
.cc-no { font-family: var(--font-mincho); font-weight: 700; color: var(--alpe-gold); font-size: 1.05em; letter-spacing: .1em; }
.cc-cat { font-size: var(--fs-small); font-weight: 700; letter-spacing: .12em; color: var(--alpe-ink-soft); white-space: nowrap; }
/* 中カードの本文: 実測で「本文幅186px・11字＝195px」で溢れていたため字送りを詰める。
   文節スパンが必ず1行に収まる大きさにすること（孤立行の防止＝施主指摘） */
.cc-copy {
  font-family: var(--font-mincho);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .01em;
  font-size: clamp(14.5px, 1.2vw, 16px);
}
.ccard--l .cc-copy { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: var(--ls-head); }
.cc-copy em { font-style: normal; color: var(--alpe-red); }
.cc-sub { font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: 1.8; }
/* 誘導先の明示（施主要望: 何が見られるか分からないとクリックされない） */
.cc-go {
  margin-top: auto;
  padding-top: .7em;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--alpe-red);
  border-top: 1px dashed color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  white-space: normal; /* 狭い列では折返す。広い画面でのみ1行に固定（下） */
}
/* V11-K11: 72em以上の nowrap は廃止。実測で card3〜6 が +14〜34px はみ出していた
   （文言が列幅より長く、nowrapのため折り返せずカード外へ出ていた）。文言も短縮済み。 */
.cc-go span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 75%, transparent); padding-bottom: .15em; }
/* 文節スパン: 折返しはこの境界でのみ（1スパン≒1行の字数で切る＝設計書§4の改行規範） */
.w { display: inline-block; }

/* 補助リンク: 小チップ化（施主要望「もう少し目立つように」） */
.crs-aux-label { margin-top: 2.2em; font-size: var(--fs-small); font-weight: 700; letter-spacing: .18em; color: var(--alpe-ink-soft); }
.crs-aux { display: flex; flex-wrap: wrap; gap: .8em; margin-top: .8em; }
.crs-aux a {
  display: inline-block;
  background: var(--alpe-white);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 55%, transparent);
  border-radius: var(--radius-btn);
  padding: .6em 1.1em;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--alpe-ink);
  transition: transform .2s, box-shadow .2s, color .2s;
}
.crs-aux a:hover { color: var(--alpe-red); transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--alpe-ink) 8%, transparent); }

/* ============================================================
   V11｜トップ再調整（2026-07-20・施主レビュー三巡目）
   設計書: V11_ポートフォリオ新設・トップ再調整設計.md
   ・K12: S3の4枠グリッドを廃止し、実績の直後に「1行の静かな帯」へ圧縮
   ・K13: 押せるものは「赤太字＋金下線＋◆」に統一（golink様式）
   ・S5: 巨大文字がコピーを消していた問題を、FVと同じ思想（背面で20〜35%）で解消
   ============================================================ */

/* --- J. 押せるものの統一様式（golink）。カードの行き先行と同じ語彙にする --- */
.golink {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  transition: color .2s;
}
.golink::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  transform: translateY(-.2em);
}
.golink span { border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent); padding-bottom: .15em; }
.golink:hover { color: var(--alpe-red-deep); }

/* --- K. イベント帯（K12・旧S3 tracesの代替。実績の直後に置く1行の静かな帯） --- */
.works-band { background: var(--alpe-paper-dim); border-block: var(--rule-gold); padding-block: var(--sp-section-band); }
.works-band .container { display: flex; align-items: center; gap: clamp(1.4em, 4vw, 3em); }
.wb-slot {
  flex: 0 0 clamp(140px, 22vw, 260px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  border: 1px solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  background: repeating-linear-gradient(45deg,
      var(--alpe-paper) 0 12px,
      color-mix(in srgb, var(--alpe-paper) 88%, var(--alpe-gold)) 12px 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--alpe-ink-faint); font-size: calc(var(--fs-small) * .85);
  letter-spacing: .12em; text-align: center; padding: .8em;
}
.wb-body { flex: 1 1 auto; }
.wb-title {
  font-family: var(--font-mincho); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); color: var(--alpe-ink);
}
.wb-lead { font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: 1.9; margin: .7em 0 1em; max-width: 34em; }
@media (max-width: 46em) {
  .works-band .container { flex-direction: column; align-items: flex-start; gap: 1.2em; }
  .wb-slot { flex: none; width: 100%; aspect-ratio: 16 / 9; }
}

/* --- L. S5署名: 巨大文字がコピーを消す問題（FVと同じ思想＝背面で20〜35%へ） --- */
.sign-mon {
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 50%,
      rgba(0,0,0,.28) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.72) 58%, rgba(0,0,0,1) 82%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 50%,
      rgba(0,0,0,.28) 0%, rgba(0,0,0,.28) 32%, rgba(0,0,0,.72) 58%, rgba(0,0,0,1) 82%);
}
.sign-quote { text-wrap: balance; }
/* K13: 「アルペの考え方を見る →」「指導方針とお願い →」を押せる様式へ */
.sign-more, .selection-line .link-arrow { color: var(--alpe-red); font-weight: 700; }
.sign-more span, .selection-line .link-arrow span {
  border-bottom: 1px solid color-mix(in srgb, var(--alpe-gold) 80%, transparent);
  padding-bottom: .15em;
}
.sign-more::before, .selection-line .link-arrow::before {
  content: '◆';
  font-size: .5em;
  color: color-mix(in srgb, var(--alpe-gold) 90%, transparent);
  margin-right: .45em;
  vertical-align: .35em;
}

/* --- G. NOW: 上下余白を圧縮し、夏期講習の見出しフォントを一段落とす（施主要望5） --- */
.now { padding-block: clamp(56px, 8vh, 88px); }
.now-head { margin-bottom: 1.9em; }
.now-feature h3 { font-size: calc(var(--fs-h2) * .68); }
/* 2026-07-20: お知らせ一覧（news.html）新設に伴う「すべてのお知らせを見る」行（golink様式） */
.now-more { margin-top: 1.6em; text-align: right; }

/* ============================================================
   H. FV衝突の恒久対策（設計書§5・実測で再現したバグ）
   真因: 下端固定のPICK UP/目次と、上から積むコピーが「低い視口高」で交差する。
   対策: コピー側に安全領域を確保する（stageはmin-heightなので下へ伸びる＝正）。
   検証は 390x844 / 375x667 / 1280x650 の3視口で行うこと。
   ============================================================ */
/* PC/タブレットで視口が低いとき: padding で押し引きすると中央揃えの計算で
   コピーがヘッダー側へ抜けてしまう（実測で確認）。モバイルと同じく「文字を縮める」で解く。 */
/* 閾値840pxは高さ掃引で決定: 800〜820pxの帯でスライド4のCTAがPICK UPに重なり、
   860px以上は自然に収まる。よってその帯を確実に含める。 */
@media (min-width: 46em) and (max-height: 840px) {
  .head-copy { font-size: clamp(28px, 4.4vw, 50px); }
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: clamp(4.5em, 9vh, 6.5em); }
  .slide .label { margin-bottom: 1.1em; }
  .entrance-no { margin-bottom: .8em; }
  .slide .sub { margin-top: 1em; }
  /* 実績2行を持つスライド4が最長。低背PCではここも一段詰める（1280x650で13px超過を実測） */
  .slide .fact { font-size: calc(var(--fs-small) * .92); line-height: 1.6; margin-top: .8em; }
  .slide .cta { margin-top: 1em; }
}
/* 超低背PC（1024x600 等の小型ノート・タブレット横持ち）: もう一段詰める */
@media (min-width: 46em) and (max-height: 640px) {
  .head-copy { font-size: clamp(24px, 3.6vw, 40px); }
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: clamp(3.6em, 7vh, 5em); }
  .slide .label { margin-bottom: .8em; }
  .entrance-no { margin-bottom: .6em; }
  .slide .sub { margin-top: .8em; font-size: var(--fs-small); }
  .slide .fact { margin-top: .6em; font-size: calc(var(--fs-small) * .88); }
  .slide .cta { margin-top: .8em; }
}
/* .fact（スライド4の実績2行）は site.css に幅制限がなく、右端の目次チップの下へ
   回り込んで重なっていた（1152x720・1280x650で実測）。.sub と同じ考え方で幅を締める。 */
.slide .fact { max-width: 32em; }

/* PC/タブレット: 目次チップは右端に縦置きのため、コピー欄に「目次の幅ぶん」の
   安全域を確保する。これがないと見出しが目次へ食い込む（1280x650で44px食い込みを実測）。
   V6b-2で目次を不透明チップにしたことで、この食い込みが可視化された。 */
@media (min-width: 46em) {
  .copy, .copy-1, .copy-2, .copy-3 { padding-right: 23rem; }
}
/* モバイルは .slide{align-items:flex-start}（v6.css）のため padding-bottom が視覚的に効かない。
   ＝コピー側を圧縮して、下端クラスタ（PICK UP・目次）の上に収める。 */
@media (max-width: 46em) {
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: 7.2em; padding-bottom: 0; }
  .entrance-no { margin-bottom: .8em; }
  .slide .label { margin-bottom: 1em; }
  .slide .sub { margin-top: 1.1em; }
  .slide .fact { margin-top: 1em; }
  .slide .cta { margin-top: 1.2em; }
}
/* 低背モバイル（375x667・414x736・360x640 等）: さらに一段圧縮する。
   閾値800pxは実測で決定（390x844は基本指定で収まり、736以下は圧縮が要る） */
@media (max-width: 46em) and (max-height: 800px) {
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: 5.6em; }
  .head-copy { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .slide .label { margin-bottom: .7em; }
  .entrance-no { margin-bottom: .55em; }
  .slide .sub { font-size: var(--fs-small); margin-top: .8em; line-height: 1.7; }
  .slide .fact { margin-top: .7em; }
  .slide .cta { margin-top: .9em; }
  .index { padding: .55em .9em .65em; row-gap: .4em; gap: .55em; }
  .pickup { bottom: calc(clamp(.8em, 3vh, 1.4em) + 10.2em); padding: .45em .75em .4em; }
}
/* 最小クラス（360x640 等）: 見出しがさらに折り返すため、もう一段だけ詰める */
@media (max-width: 46em) and (max-height: 660px) {
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: 4.8em; }
  .head-copy { font-size: clamp(1.45rem, 6.9vw, 1.95rem); }
  .slide .sub { margin-top: .6em; }
  .slide .cta { margin-top: .7em; }
  .slide .fact { margin-top: .55em; }
  .pickup { bottom: calc(clamp(.7em, 2.5vh, 1.2em) + 9.6em); }
}
/* 極小クラス（320x568 等）: 目次が2段に折り返して下端クラスタ自体が厚くなるため、
   目次・PICK UP を一段小さくし、コピーも最小まで詰める */
@media (max-width: 24em) and (max-height: 600px) {
  /* ヘッダー実測90px（この幅ではロゴ＋メニューで厚くなる）→ ロゴを縮めて帯を薄くする */
  .logo-full { height: 2em; }
  /* ヘッダー実測90px（navbtn基準で決まる）。96px確保して確実に下へ出す */
  .copy, .copy-1, .copy-2, .copy-3 { padding-top: 6.2em; }
  .head-copy { font-size: clamp(1.3rem, 6.6vw, 1.7rem); }
  .slide .label { margin-bottom: .5em; letter-spacing: .16em; }
  /* 「講座 01 / 04」は目次チップの「講座は、4つ。」と役割が重複するため、この極小サイズでは省く */
  .entrance-no { display: none; }
  .slide .sub { margin-top: .5em; line-height: 1.6; }
  .slide .cta { margin-top: .6em; }
  /* スライド4は実績2行（.fact）が加わり最長。実測23px超過だったため、ここだけ追加で詰める */
  .slide .fact { font-size: calc(var(--fs-small) * .84); line-height: 1.5; margin-top: .45em; }
  .index { padding: .45em .7em .55em; row-gap: .3em; gap: .45em; }
  .index-head { gap: 0; }
  .ih-sub { display: none; } /* 補足は省き、主行「講座は、4つ。」だけ残す */
  .idx .n { width: 1.3em; }
  /* 実測（320x568）: 目次184px＋PICK UP64px＝画面高の44%で、下端の装置が構造的に過大。
     主要ナビである目次を優先し、補助的なPICK UP（内容は下の講座カードと重複）はこのサイズだけ隠す。
     ※320px級はiPhone SE初代相当の極小クラス。360px以上では従来どおり表示される。 */
  .pickup { display: none; }
}

/* --- I. モバイル（46em以下） --- */
@media (max-width: 46em) {
  .logo-full { height: 2.5em; }
  /* ハンバーガー: 白帯の上なので墨字＋臙脂罫 */
  .navbtn { background: none; color: var(--alpe-ink); border-color: color-mix(in srgb, var(--alpe-red) 55%, transparent); }
  /* ドロップダウン内は白パネル（site.css）。◆は残して手がかりを統一 */
  .head.open .gnav ul { background: none; border: 0; padding: 0; }
  /* 目次: 下部横一列のチップ。見出しは主行を折り返させず、補足は下の行へ */
  .index { left: var(--sp-inline); right: var(--sp-inline); padding: .7em 1em .8em; row-gap: .5em; gap: .8em; }
  .index-head { flex-basis: 100%; margin-bottom: 0; gap: .1em; }
  .ih-main { white-space: nowrap; }
  .ih-sub { font-size: calc(var(--fs-small) * .78); }
  /* PICK UP: 目次チップの上へ */
  .pickup { bottom: calc(clamp(1em, 5vh, 1.9em) + 12.2em); }
  /* 講座カード: 1列。行き先行は折返し可 */
  .crs-title { white-space: normal; }
  .crs-grid { grid-template-columns: 1fr; }
  .ccard--l { grid-column: auto; }
  .cc-go { white-space: normal; }
}


/* ============================================================
   M. SP専用調整（トップページ修正依頼 2026-09-01 → 本番反映 2026-09-07）
   対象: index.html のFV見出し(.head-copy .w)・切替ボタン(.idx/.arw)・最終CTA(.consult-actions .btn-primary)
   方針: PC（46em超）のデザインには影響させない。サイズはトークン相対のみ・色指定なし。
   ============================================================ */
/* --- 2-2 スライド見出し: 文節span（.w）単位でのみ折り返す。
       孤立行（「る。」等）の発生を防ぐ。.w は v6b.css で inline-block 定義済み --- */
.head-copy .w { display: inline-block; }

@media (max-width: 46em) {

  /* --- 2-3 スライド切替ボタン（01〜04）: 見た目・レイアウトを一切変えず、
         疑似要素でタップ領域だけを拡大（実測ヒット高 約41〜44px）。
         .index の gap（1.1em ≒ 17px）が残るため、隣接ボタンとの誤タップ域は重ならない --- */
  .idx { position: relative; }
  .idx::after {
    content: '';
    position: absolute;
    inset: -0.45em -0.5em;
  }

  /* 矢印ボタンも同様に、レイアウトを変えずタップ領域を確保 */
  .arw { position: relative; }
  .arw::after {
    content: '';
    position: absolute;
    inset: -0.5em;
  }

  /* --- 2-10 最終CTA: SPのみ字間・余白を詰め、文節spanで2行までに制御。
         1文字だけの折返しを作らない --- */
  .consult-actions .btn-primary {
    letter-spacing: 0.02em;
    padding-inline: 1.4em;
    text-align: center;
  }
  .consult-actions .btn-primary .w { display: inline-block; }
}

/* --- 320px級: 見出しとCTAをさらに一段階だけ縮小（文節は維持） --- */
@media (max-width: 24em) {
  .consult-actions .btn-primary {
    font-size: calc(var(--fs-lead) * 0.88);
    padding-inline: 1.1em;
  }
}