/* ============================================================
   V6/V7 専用CSS（v5.cssの内容を包含した発展版・独立して読み込む）
   対象: index_v6.html / shiritsu/ / naishin/ / jukengo/ / ikkan/index_v6.html / contact_v6.html
   規範: 色・サイズ・余白は tokens.css のカスタムプロパティのみ参照。hex・px直書き禁止。
   既存ページ（index.html等）には読み込まないため、現行サイトへの影響はゼロ。
   ============================================================ */

/* ============================================================
   1. FV 4スライド化（V7 C-1 案A）
   順: 0=10歳(生成り) 1=私立小・内部進学(生成り影) 2=中高一貫(深臙脂) 3=中学受験(赤グラデ)
   site.css の 0|1|2 定義を後着で上書きし、3 を新設する。
   ============================================================ */
.stage[data-slide="1"] { background: var(--alpe-paper-dim); }
.stage[data-slide="2"] { background: var(--alpe-red-night); }
.stage[data-slide="3"] {
  background: radial-gradient(120% 120% at 75% 15%,
    var(--alpe-red-bright) 0%, var(--alpe-red-stage) 45%, var(--alpe-red-night) 100%);
}

/* --- 巨大文字（monument）の塗り分け --- */
/* 1: 生成り影の上。墨の輪郭＋金の×で、スライド0（朱の輪郭）と描き分ける */
.stage[data-slide="1"] .mon-word {
  color: transparent;
  -webkit-text-stroke: .12rem color-mix(in srgb, var(--alpe-ink) 24%, transparent);
  opacity: 1;
}
.stage[data-slide="1"] .mon-x { -webkit-text-stroke-color: color-mix(in srgb, var(--alpe-gold) 80%, transparent); }
.stage[data-slide="1"] .mon-a { transform: translate(-.2em, .1em); }
.stage[data-slide="1"] .mon-b { transform: translate(.3em, 0); }
.stage[data-slide="1"] .mon-year { opacity: 0; }

/* 2: 旧slide1（深臙脂） */
.stage[data-slide="2"] .mon-word {
  color: color-mix(in srgb, var(--alpe-red-abyss) 70%, var(--alpe-red-night));
  -webkit-text-stroke: .06rem color-mix(in srgb, var(--alpe-gold) 42%, transparent);
  opacity: .9;
}
.stage[data-slide="2"] .mon-x { color: color-mix(in srgb, var(--alpe-gold) 30%, transparent); -webkit-text-stroke-color: transparent; }
.stage[data-slide="2"] .mon-a { transform: translate(-.4em, .2em); }
.stage[data-slide="2"] .mon-b { transform: translate(.5em, 0); }
.stage[data-slide="2"] .mon-year { opacity: 0; }

/* 3: 旧slide2（赤グラデ＋巨大2026） */
.stage[data-slide="3"] .mon-word {
  color: color-mix(in srgb, var(--alpe-red-abyss) 55%, transparent);
  -webkit-text-stroke: .06rem color-mix(in srgb, var(--alpe-gold) 30%, transparent);
  opacity: .85;
}
.stage[data-slide="3"] .mon-x { color: color-mix(in srgb, var(--alpe-gold) 48%, transparent); -webkit-text-stroke-color: transparent; }
.stage[data-slide="3"] .mon-a { transform: translate(.3em, -.3em); }
.stage[data-slide="3"] .mon-b { transform: translate(-.6em, .2em); }
.stage[data-slide="3"] .mon-year { opacity: 1; }

/* --- ヘッダー・目次・矢印の反転（0,1=墨 / 2,3=生成り） --- */
.stage[data-slide="1"] .head { color: var(--alpe-ink); }
.stage[data-slide="2"] .head,
.stage[data-slide="3"] .head { color: var(--alpe-paper); }
.stage[data-slide="1"] .index { color: var(--alpe-ink); }
.stage[data-slide="2"] .index,
.stage[data-slide="3"] .index { color: var(--alpe-paper); }
.stage[data-slide="1"] .arrows { color: var(--alpe-ink-soft); }
.stage[data-slide="2"] .arrows,
.stage[data-slide="3"] .arrows { color: color-mix(in srgb, var(--alpe-paper) 70%, transparent); }

/* --- スライド固有コピー（1=私立小 新設 / 2,3 は旧1,2の色を移設） --- */
.copy-3 { padding-top: clamp(4.5em, 10vh, 7.5em); }
.slide-1 .label { color: var(--alpe-red-deep); }
.slide-1 .head-copy { color: var(--alpe-ink); }
.slide-1 .head-copy em { color: var(--alpe-red-night); }
.slide-1 .sub { color: var(--alpe-ink-soft); }
.slide-1 .cta { color: var(--alpe-red-deep); }
.slide-2 .label { color: var(--alpe-gold); }
.slide-2 .head-copy { color: var(--alpe-paper); }
.slide-2 .head-copy em { color: var(--alpe-gold); }
.slide-2 .sub { color: color-mix(in srgb, var(--alpe-paper) 82%, transparent); }
.slide-2 .cta { color: var(--alpe-paper); }
.slide-3 .label { color: var(--alpe-gold); }
.slide-3 .head-copy { color: var(--alpe-paper); }
.slide-3 .head-copy em { color: var(--alpe-gold-pale); }
.slide-3 .sub { color: color-mix(in srgb, var(--alpe-paper) 88%, transparent); }
.slide-3 .fact { color: color-mix(in srgb, var(--alpe-paper) 78%, transparent); }
.slide-3 .cta { color: var(--alpe-paper); }
.slide.on .fact { animation: rise .6s .40s both; }

/* ============================================================
   2. FV内 PICK UP（劇場を邪魔しない下端の一行・スライド連動＝js/v6.js）
   ============================================================ */
.pickup {
  position: absolute;
  z-index: 20;
  left: var(--sp-inline);
  bottom: clamp(1.1em, 4vh, 2.1em);
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  border-bottom: thin solid currentColor;
  padding-bottom: .3em;
  transition: color 1.1s ease, opacity .35s ease;
}
.pickup .pk {
  font-size: .85em;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-right: .7em;
}
.pickup.is-swap { opacity: 0; }
.stage[data-slide="0"] .pickup,
.stage[data-slide="1"] .pickup { color: var(--alpe-red-deep); }
.stage[data-slide="2"] .pickup,
.stage[data-slide="3"] .pickup { color: var(--alpe-paper); }

/* ============================================================
   2a. 実エンブレム（2026-07-17支給・マスターA1完了）
   FVヘッダーは img.emblem（site.cssの.emblemサイズ指定をそのまま継承）。
   内側ページは .brand--mark で盾＋教室名のロックアップにする。
   ============================================================ */
.brand--mark { flex-direction: row; align-items: center; gap: .55em; }
.brand--mark .brand-text { display: flex; flex-direction: column; line-height: var(--lh-tight); }
.brand-emblem {
  flex: 0 0 auto;
  width: clamp(2.1em, 2.8vw, 2.5em);
  height: auto;
  display: block;
}

/* ============================================================
   2b. FVヘッダー: 教室名の下の小さな「国語×未来」（Work(6)-4・要確認C-10）
   署名のように静かに反復する。色はヘッダーの明暗反転（currentColor）を継承。
   ============================================================ */
.lockup-text { display: flex; flex-direction: column; gap: .2em; }
.lockup-tag {
  font-family: var(--font-mincho);
  font-size: calc(var(--fs-small) * .85);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  opacity: .62;
}

/* ============================================================
   3. gnav（V7 C-3: 「講座を探す」へ刷新）
   ============================================================ */
.gnav a.nav-focus { color: var(--alpe-gold); opacity: 1; }
.gnav a.nav-focus:hover { opacity: .8; }
.site-nav a.nav-focus { color: var(--alpe-red); font-weight: 700; }

/* ============================================================
   4. 三分岐帯（FV直後・静かな受け皿。広告バナーにしない）
   ============================================================ */
.annai-band {
  background: var(--alpe-paper-dim);
  border-block: var(--rule-gold);
  padding-block: var(--sp-section-band);
}
.annai-head {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--alpe-ink);
  margin-bottom: 1.4em;
}
.annai-head em { font-style: normal; color: var(--alpe-red); }
.annai-row {
  display: flex;
  align-items: baseline;
  gap: 1.2em;
  padding-block: 1.1em;
  border-top: thin solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
  color: var(--alpe-ink);
}
.annai-row:last-of-type { border-bottom: thin solid color-mix(in srgb, var(--alpe-gold) 40%, transparent); }
.annai-row:hover { color: var(--alpe-ink); }
.annai-row:hover .ar-go { color: var(--alpe-red-deep); }
.annai-row .ar-no {
  flex: 0 0 auto;
  font-family: var(--font-mincho);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
}
.annai-row .ar-body { flex: 1 1 auto; }
.annai-row .ar-t {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
}
.annai-row .ar-s {
  display: block;
  font-size: var(--fs-small);
  color: var(--alpe-ink-soft);
  line-height: var(--lh-head);
  margin-top: .35em;
}
.annai-row .ar-go {
  flex: 0 0 auto;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  border-bottom: thin solid var(--alpe-gold);
  padding-bottom: .3em;
  white-space: nowrap;
}
/* 迷う方のための診断入口（Work(6)-5・三分岐帯の末尾1行。帯の視覚言語に従い静かに） */
.annai-aux {
  margin-top: 1.6em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink-soft);
}
.annai-aux a {
  font-weight: 700;
  color: var(--alpe-red);
  border-bottom: thin solid color-mix(in srgb, var(--alpe-gold) 60%, transparent);
  padding-bottom: .25em;
  margin-left: .6em;
}
.annai-aux a:hover { color: var(--alpe-red-deep); }

/* LP冒頭の分岐用（細身） */
.annai-band--slim { padding-block: calc(var(--sp-section-band) * .55); }
.annai-band--slim .annai-row { border: 0; padding-block: .5em; }
.annai-band--slim .annai-row:last-of-type { border-bottom: 0; }
.annai-band--slim .annai-row .ar-t { font-size: var(--fs-body); }

/* ============================================================
   5. S2 五つの入口（3＋2段組・カード化しない・文字の表情で差別化）
   ============================================================ */
.gates-row--five { flex-wrap: wrap; gap: 2em 2.4em; }
.gates-row--five .gate-title { font-size: calc(var(--fs-h2) * .8); }
.gates-row--five .gate--a { flex: 1 1 30%; }
.gates-row--five .gate--e { flex: 1 1 32%; }
.gates-row--five .gate--d { flex: 1 1 30%; }
.gates-row--five .gate--b { flex: 1 1 46%; }
.gates-row--five .gate--c { flex: 1 1 46%; }
/* 新扉の表情: e=私立小在籍（墨＋金の下線）／d=内部進学後（最深赤） */
.gate--e .gate-title { color: var(--alpe-ink); }
.gate--e .gate-no { color: var(--alpe-red); }
.gate--d .gate-title { color: var(--alpe-red-night); }

/* 扉の下の補助リンク行（扉に昇格させないもの） */
.gates-aux {
  display: flex;
  flex-wrap: wrap;
  gap: .8em 2.2em;
  margin-top: 2.6em;
  padding-top: 1.4em;
  border-top: var(--rule-gold);
}
.gates-aux a {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink-soft);
  border-bottom: thin solid color-mix(in srgb, var(--alpe-gold) 60%, transparent);
  padding-bottom: .25em;
}
.gates-aux a:hover { color: var(--alpe-red); }

/* ============================================================
   6. LP内 相互分岐（他タイプへの細い導線・署名の手前に置く）
   ============================================================ */
.crosslink {
  background: var(--alpe-paper-dim);
  border-block: var(--rule-gold);
  padding-block: var(--sp-section-band);
}
.crosslink .cl-head {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: 1em;
}
.crosslink ul { display: flex; flex-wrap: wrap; gap: 1em 2.4em; }
.crosslink a {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  color: var(--alpe-ink);
  border-bottom: thin solid color-mix(in srgb, var(--alpe-red) 35%, transparent);
  padding-bottom: .2em;
}
.crosslink a:hover { color: var(--alpe-red); }

/* ============================================================
   7. T5 選別メッセージ（相談CTAの手前に置く1行）
   ============================================================ */
.selection-line {
  background: var(--alpe-paper);
  padding-block: var(--sp-section-band);
  text-align: center;
}
.selection-line p {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--alpe-ink);
  max-width: 32em;
  margin-inline: auto;
}
.selection-line .link-arrow { display: inline-block; margin-top: 1.4em; }

/* ============================================================
   8. レスポンシブ
   ============================================================ */
@media (max-width: 62em) {
  /* 五つの入口: 2列 */
  .gates-row--five .gate--a,
  .gates-row--five .gate--b,
  .gates-row--five .gate--c,
  .gates-row--five .gate--d,
  .gates-row--five .gate--e { flex: 1 1 42%; }
}

@media (max-width: 46em) {
  /* --- FVの縦詰まり解消（2026-07-17・実測で衝突を確認して修正）---
     375pxでは見出しが4行(約186px)になりコピーが下へ押し出される一方、
     PICK UPと目次は画面下端からの絶対配置のため、中間で衝突していた:
       サブコピー(571-630) × PICK UP(594-626) ／ CTA(653-686) × 目次(678-782)
     コピーを上下中央から「ヘッダー直下から積む」方式へ変えて、下端の2要素と分離する。
     ※スライドの座標を各スライドで微妙にずらす正典§2-Aの意図は、PC幅では従来どおり維持。 */
  .slide { align-items: flex-start; }
  .copy,
  .copy-1, .copy-2, .copy-3 { padding-top: 9.5em; }
  /* PICK UP: 目次ブロック（ヒント＋4項目が折返し）の上へ。位置はJS計測で微調整可 */
  .pickup { bottom: calc(clamp(1em, 5vh, 1.9em) + 11.4em); }
  /* 三分岐帯: 縦積み */
  .annai-row { flex-wrap: wrap; gap: .5em .8em; }
  .annai-row .ar-body { flex: 1 1 100%; }
  .annai-row .ar-go { margin-top: .4em; }
  /* 五つの入口: 縦積み */
  .gates-row--five .gate--a,
  .gates-row--five .gate--b,
  .gates-row--five .gate--c,
  .gates-row--five .gate--d,
  .gates-row--five .gate--e { flex: none; width: 100%; }
  .gates-aux { flex-direction: column; gap: .9em; }
  /* 相互分岐: 縦積み */
  .crosslink ul { flex-direction: column; gap: .9em; }
}