/* ============================================================
   アルペ記述読解教室 新サイト｜共通スタイル
   規範: 色・書体・文字サイズ・余白は css/tokens.css のカスタムプロパティのみ参照。
         hex・px直書き禁止（罫線の最小単位は border-width キーワード thin、
         微細寸法は em/rem、半透明はトークン色からの color-mix で生成する）。
   ============================================================ */

/* ---------- リセット・基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-gothic);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--alpe-ink);
  background: var(--alpe-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--alpe-red); text-decoration: none; }
a:hover { color: var(--alpe-red-deep); }
ul { list-style: none; }

h1, h2, h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
}

.container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--sp-inline);
}

/* ---------- 汎用部品 ---------- */
.section { padding-block: var(--sp-section); }
.section--paper { background: var(--alpe-paper); }
.section--dim   { background: var(--alpe-paper-dim); }

.section-label {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  text-transform: uppercase;
  margin-bottom: 1.4em;
}

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: .9em;
}
.section-title em { font-style: normal; color: var(--alpe-red); }

.section-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
  max-width: 44em;
  margin-bottom: 3em;
}
/* V12(2026-07-20・R11): .section-lead の em だけ font-style のリセットが漏れており、
   ブラウザ既定の斜体が出ていた（全站19箇所。日本語の斜体は可読性を落とす＝施主指摘）。
   他の em（.section-title/.page-hero h1/.chapter-title 等）と同じ扱いに揃える。 */
.section-lead em { font-style: normal; color: var(--alpe-red); }
/* V17-G-B（2026-07-22）: .lead（lane-hero のリード）の em だけ斜体リセットが漏れていた。
   上の .section-lead em（V12-R11）と同型。日本語の斜体は可読性を落とす＝施主指摘
   （shiritsu の「言葉の力の土台」が斜体で出ていた）。色は付けず斜体解消のみ。全站に効くが劣化はしない方向。 */
.lead em { font-style: normal; }

.link-arrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  border-bottom: thin solid var(--alpe-gold);
  padding-bottom: .35em;
}

/* 主CTAボタン（1ページ1つ） */
.btn-primary {
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-paper);
  background: var(--alpe-red-stage);
  border: thin solid color-mix(in srgb, var(--alpe-paper) 70%, transparent);
  border-radius: var(--radius-btn);
  padding: .9em 2.6em;
  transition: background .25s ease, transform .25s ease;
}
.btn-primary:hover {
  color: var(--alpe-paper);
  background: var(--alpe-red-deep);
  transform: translateY(-.12em);
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--alpe-paper);
  border-bottom: var(--rule-gold);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding-block: .9em;
}
.brand { display: flex; flex-direction: column; line-height: var(--lh-tight); }
.brand-name {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.brand-tag {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
}
.site-nav ul { display: flex; gap: 2.2em; }
.site-nav a {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.site-nav a:hover { color: var(--alpe-red); }

.nav-toggle {
  display: none;
  background: none;
  border: thin solid var(--alpe-ink-faint);
  border-radius: var(--radius-btn);
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
  padding: .5em 1em;
  cursor: pointer;
}

/* ============================================================
   S0 劇場型ファーストビュー（正典 _劇場型_ファーストビュー.html を移植）
   色はtokens.cssのvar()へ、巨大文字サイズは --fs-mono-* へ集約済み。
   一画面(100svh)の舞台。data-slideで背景・巨大文字・ヘッダー配色を一括切替。
   ============================================================ */
.stage {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  transition: background-color 1.1s ease;
}
.stage[data-slide="0"] { background: var(--alpe-paper); }
.stage[data-slide="1"] { background: var(--alpe-red-night); }
.stage[data-slide="2"] {
  background: radial-gradient(120% 120% at 75% 15%,
    var(--alpe-red-bright) 0%, var(--alpe-red-stage) 45%, var(--alpe-red-night) 100%);
}

/* --- 舞台装置: 巨大な「国語×未来」＋「2026」--- */
.monument { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mon-word {
  position: absolute;
  font-family: var(--font-mincho);
  font-weight: 800;
  line-height: .82;
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;
  transition: transform 1.1s ease, color 1.1s ease, opacity 1.1s ease, -webkit-text-stroke-color 1.1s ease;
}
.mon-a { font-size: var(--fs-mono-a); left: calc(var(--sp-inline) * -.2); bottom: 8%; }
.mon-b { font-size: var(--fs-mono-b); right: -.14em; bottom: -.16em; }
.mon-x { font-size: .62em; vertical-align: .28em; margin: 0 .02em; }
/* 巨大文字の輪郭は巨大フォントに依存しない一定の細線＝rem指定（.12rem≒2px / .06rem≒1px） */
.stage[data-slide="0"] .mon-word { color: transparent; -webkit-text-stroke: .12rem color-mix(in srgb, var(--alpe-red) 40%, transparent); opacity: 1; }
.stage[data-slide="0"] .mon-x { -webkit-text-stroke-color: color-mix(in srgb, var(--alpe-red) 62%, transparent); }
.stage[data-slide="1"] .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="1"] .mon-x { color: color-mix(in srgb, var(--alpe-gold) 30%, transparent); }
.stage[data-slide="1"] .mon-a { transform: translate(-.4em, .2em); }
.stage[data-slide="1"] .mon-b { transform: translate(.5em, 0); }
.stage[data-slide="2"] .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="2"] .mon-x { color: color-mix(in srgb, var(--alpe-gold) 48%, transparent); -webkit-text-stroke-color: transparent; }
.stage[data-slide="2"] .mon-a { transform: translate(.3em, -.3em); }
.stage[data-slide="2"] .mon-b { transform: translate(-.6em, .2em); }
.mon-year {
  position: absolute;
  top: -.16em;
  right: -.04em;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-mono-year);
  line-height: 1;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--alpe-gold) 22%, transparent);
  user-select: none;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.stage[data-slide="2"] .mon-year { opacity: 1; }

/* --- オーバーレイ・ヘッダー（帯にしない・透明・スライドで反転） --- */
.head { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: clamp(1em, 2.4vh, 1.6em) var(--sp-inline);
}
.lockup { display: flex; align-items: center; gap: .6em; color: inherit; }
.lockup:hover { color: inherit; }
.emblem { flex: 0 0 auto; width: clamp(2.2em, 3.2vw, 2.75em); height: clamp(2.2em, 3.2vw, 2.75em); display: block; }
/* エンブレム（プレースホルダ・A1でロゴ支給後に差し替え）。色はトークン参照 */
.emb-body { fill: var(--alpe-red-stage); }
.emb-edge { stroke: var(--alpe-gold); opacity: .7; }
.emb-mark { fill: var(--alpe-gold); }
.wordmark { font-family: var(--font-mincho); font-weight: 700; font-size: var(--fs-h3); letter-spacing: .1em; }
.gnav ul { display: flex; gap: 1.8em; }
.gnav a { font-size: var(--fs-small); letter-spacing: .1em; color: inherit; opacity: .86; }
.gnav a:hover { color: inherit; opacity: 1; }
.navbtn {
  display: none;
  background: none;
  border: thin solid currentColor;
  border-radius: var(--radius-btn);
  color: inherit;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: .08em;
  padding: .5em 1em;
  cursor: pointer;
}
.stage[data-slide="0"] .head { color: var(--alpe-ink); }
.stage[data-slide="1"] .head,
.stage[data-slide="2"] .head { color: var(--alpe-paper); }

/* --- スライド固有コピー --- */
.slides { position: absolute; inset: 0; z-index: 10; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s ease, visibility .7s ease;
  display: flex;
  align-items: center;
}
.slide.on { opacity: 1; visibility: visible; }
.copy {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--sp-inline);
  padding-top: clamp(5em, 12vh, 8.75em);
}
.copy-1 { padding-top: clamp(6em, 16vh, 11.25em); margin-left: 2%; }
.copy-2 { padding-top: clamp(4.5em, 10vh, 7.5em); }
.slide .label {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .24em;
  margin-bottom: 1.5em;
}
.head-copy {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 1.18;
  letter-spacing: .02em;
  text-wrap: balance;
}
.head-copy em { font-style: normal; }
.head-copy .shift { display: inline-block; margin-left: .6em; }
.slide .sub { font-size: var(--fs-lead); line-height: 1.85; margin-top: 1.5em; max-width: 26em; }
.slide .fact { font-size: var(--fs-small); letter-spacing: .06em; line-height: 1.8; margin-top: 1.4em; opacity: .82; }
.slide .cta {
  display: inline-block;
  margin-top: 1.8em;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .08em;
  padding-bottom: .35em;
  border-bottom: thin solid currentColor;
}
.slide .cta:hover { opacity: .75; }
.slide-0 .label { color: var(--alpe-red); }
.slide-0 .head-copy { color: var(--alpe-ink); }
.slide-0 .head-copy em { color: var(--alpe-red-deep); }
.slide-0 .sub { color: var(--alpe-ink-soft); }
.slide-0 .cta { color: var(--alpe-red); }
.slide-1 .label { color: var(--alpe-gold); }
.slide-1 .head-copy { color: var(--alpe-paper); }
.slide-1 .head-copy em { color: var(--alpe-gold); }
.slide-1 .sub { color: color-mix(in srgb, var(--alpe-paper) 82%, transparent); }
.slide-1 .cta { color: var(--alpe-paper); }
.slide-2 .label { color: var(--alpe-gold); }
.slide-2 .head-copy { color: var(--alpe-paper); }
.slide-2 .head-copy em { color: var(--alpe-gold-pale); }
.slide-2 .sub { color: color-mix(in srgb, var(--alpe-paper) 88%, transparent); }
.slide-2 .fact { color: color-mix(in srgb, var(--alpe-paper) 78%, transparent); }
.slide-2 .cta { color: var(--alpe-paper); }
@keyframes rise { from { opacity: 0; transform: translateY(.9em); } to { opacity: 1; transform: translateY(0); } }
.slide.on .label { animation: rise .5s .05s both; }
.slide.on .head-copy { animation: rise .6s .16s both; }
.slide.on .sub { animation: rise .6s .32s both; }
.slide.on .fact { animation: rise .6s .40s both; }
.slide.on .cta { animation: rise .6s .46s both; }

/* --- 雑誌の目次（細い数字＋語）＋補助の矢印 --- */
.index {
  position: absolute;
  z-index: 20;
  right: var(--sp-inline);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1.1em;
}
/* 「押せる」ことを示す小さな見出し（枠・ピルは使わない＝M5準拠） */
.index::before {
  content: 'SELECT ─ 入口を選ぶ';
  font-family: var(--font-gothic);
  font-size: calc(var(--fs-small) * .82);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  opacity: .9;
  margin-bottom: .2em;
}
.idx {
  display: flex;
  align-items: baseline;
  gap: .7em;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-gothic);
  text-align: left;
  color: currentColor;
  opacity: .5;
  transition: opacity .3s ease;
}
.idx .n { font-family: var(--font-mincho); font-size: var(--fs-small); letter-spacing: .1em; width: 1.6em; }
.idx .t { font-size: var(--fs-small); letter-spacing: .08em; white-space: nowrap; position: relative; }
/* 全項目にごく薄い下線＝「リンクである」ことの静かな手がかり。現在項目は実線 */
.idx .t::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.4em;
  height: .07em;
  background: currentColor;
  opacity: .25;
  transition: opacity .3s ease;
}
.idx:hover { opacity: .85; }
.idx:hover .t::after { opacity: .65; }
.idx[aria-current="true"] { opacity: 1; }
.idx[aria-current="true"] .n { color: var(--alpe-gold); }
.idx[aria-current="true"] .t::after { opacity: 1; }
/* 初回表示時、番号が順に一度だけ金に灯る（reduced-motion時は共通ルールで無効化） */
@keyframes idx-pulse { 0%, 100% { color: inherit; } 45% { color: var(--alpe-gold); } }
.idx:nth-of-type(1) .n { animation: idx-pulse 1s ease-out .9s 1; }
.idx:nth-of-type(2) .n { animation: idx-pulse 1s ease-out 1.25s 1; }
.idx:nth-of-type(3) .n { animation: idx-pulse 1s ease-out 1.6s 1; }
.stage[data-slide="0"] .index { color: var(--alpe-ink); }
.stage[data-slide="1"] .index,
.stage[data-slide="2"] .index { color: var(--alpe-paper); }
.arrows { position: absolute; z-index: 20; right: var(--sp-inline); bottom: clamp(1.1em, 4vh, 2.1em); display: flex; gap: .5em; }
.stage[data-slide="0"] .arrows { color: var(--alpe-ink-soft); }
.stage[data-slide="1"] .arrows,
.stage[data-slide="2"] .arrows { color: color-mix(in srgb, var(--alpe-paper) 70%, transparent); }
.arw { background: none; border: 0; color: inherit; font-size: var(--fs-h3); cursor: pointer; opacity: .55; padding: .2em .3em; line-height: 1; }
.arw:hover { opacity: 1; }

/* ---------- B2: 教育体系（4ステップ） ---------- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6em;
}
.step-card {
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 2em 1.6em;
}
.section--paper .step-card { background: var(--alpe-paper-dim); }
.step-card .kanji-num {
  font-family: var(--font-mincho);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  display: block;
  margin-bottom: 1.2em;
}
.step-card h3 {
  font-size: var(--fs-h2);
  color: var(--alpe-red);
  line-height: 1.2;
  margin-bottom: .6em;
}
.step-card p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }

.cycle-line {
  margin-top: 3.4em;
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.cycle-line em { font-style: normal; color: var(--alpe-red); }

/* ---------- B3: 指導の実際（3実践） ---------- */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}
.practice-card {
  background: var(--alpe-paper);
  border-radius: var(--radius-card);
  padding: 2.4em 2em;
  border-top: .25em solid var(--alpe-red);
}
.practice-card .en {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  display: block;
  margin-bottom: 1.4em;
}
.practice-card h3 { font-size: var(--fs-h3); margin-bottom: .8em; }
.practice-card p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* ---------- B4: 信頼帯 ---------- */
.trust-band {
  background: var(--alpe-red-night);
  color: var(--alpe-paper);
  border-top: var(--rule-gold);
  border-bottom: var(--rule-gold);
  padding-block: var(--sp-section-band);
}
.trust-band .container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2.5em;
}
.trust-item { flex: 1; text-align: center; }
.trust-item + .trust-item { border-left: var(--rule-gold); }
.trust-item .label {
  display: block;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: .8em;
}
.trust-item .value {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
}

/* ---------- B5: レーン振り分け（3カード） ---------- */
.path-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}
.path-card {
  display: flex;
  flex-direction: column;
  background: var(--alpe-paper-dim);
  border: thin solid color-mix(in srgb, var(--alpe-red) 25%, transparent);
  border-radius: var(--radius-card);
  padding: 2.4em 2em;
  color: var(--alpe-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.path-card:hover {
  color: var(--alpe-ink);
  transform: translateY(-.3em);
  box-shadow: 0 1.2em 2.4em color-mix(in srgb, var(--alpe-ink) 12%, transparent);
}
.path-card .letter {
  font-family: var(--font-mincho);
  font-size: var(--fs-h2);
  color: var(--alpe-red);
  line-height: 1;
  margin-bottom: .7em;
}
.path-card h3 { font-size: var(--fs-h3); margin-bottom: .8em; }
.path-card p {
  font-size: var(--fs-small);
  color: var(--alpe-ink-soft);
  flex-grow: 1;
  margin-bottom: 1.6em;
}
.path-card .go {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
}

/* ---------- B6: 講座カード ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6em;
}
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--alpe-paper);
  border-radius: var(--radius-card);
  padding: 2.4em 2em;
  color: var(--alpe-ink);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  transition: transform .25s ease, box-shadow .25s ease;
}
.course-card:hover {
  color: var(--alpe-ink);
  transform: translateY(-.3em);
  box-shadow: 0 1.2em 2.4em color-mix(in srgb, var(--alpe-ink) 12%, transparent);
}
.course-card .meta {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: 1.2em;
}
.course-card h3 { font-size: var(--fs-h3); margin-bottom: .8em; }
.course-card > p { font-size: var(--fs-small); color: var(--alpe-ink-soft); flex-grow: 1; }
.course-card .fact {
  font-size: var(--fs-small);
  color: var(--alpe-ink);
  border-top: var(--rule-gold);
  margin-top: 1.6em;
  padding-top: 1em;
}
.course-card .go {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  margin-top: 1.2em;
}

/* ---------- B7: 選別ライン ---------- */
.selection { text-align: center; }
.selection blockquote {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-sub);
  max-width: 30em;
  margin-inline: auto;
}
/* V14(2026-07-20・G5): blockquote内の em だけ font-style のリセットが漏れており、
   ブラウザ既定の斜体が出ていた（V12の .section-lead em と同型のバグ。施主指摘）。
   影響: blockquote内でemを使う8ページ（jukengo/kokugoryoku/naishin/shiritsu/
   index/index_v5/index_v6/index_v6b）。いずれも「斜体が直る」方向の変化のみ。
   色は各ページの既存指定に委ねるため、ここでは font-style のみ揃える。 */
.selection blockquote em { font-style: normal; }
.selection .link-arrow { display: inline-block; margin-top: 2.2em; }
.selection .sign-note { font-size: var(--fs-small); color: var(--alpe-ink-faint); margin-top: 1.4em; }

/* ---------- CTA帯 ---------- */
.cta-band {
  background: var(--alpe-red-stage);
  color: var(--alpe-paper);
  text-align: center;
  padding-block: var(--sp-section-cta);
}
.cta-band h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: .8em;
}
.cta-band p {
  font-size: var(--fs-lead);
  color: color-mix(in srgb, var(--alpe-paper) 82%, transparent);
  margin-bottom: 2.4em;
}

/* ---------- フッター ---------- */
.site-footer {
  background: var(--alpe-red-night);
  color: var(--alpe-paper);
  padding-block: var(--sp-section-band);
  border-top: var(--rule-gold);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5em;
}
.site-footer .brand-name { color: var(--alpe-paper); }
.site-footer .tagline {
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--alpe-paper) 70%, transparent);
  margin-top: .8em;
}
.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em 2em;
}
.footer-nav a {
  font-size: var(--fs-small);
  color: var(--alpe-paper);
}
.footer-nav a:hover { color: var(--alpe-gold); }
.copyright {
  width: 100%;
  text-align: center;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--alpe-paper) 55%, transparent);
  border-top: thin solid color-mix(in srgb, var(--alpe-paper) 18%, transparent);
  padding-top: 2em;
  margin-top: 1em;
}

/* ============================================================
   紙系ページ共通部品（C-1 教育体系 / L2系 / L3系）
   参考=06_承認済みHTML。生成り地×原稿用紙グリッド×朱筆傍注。
   ジャンプ率は赤系より1段抑える（見出しは --fs-h2 まで、ヒーローも同格）。
   ============================================================ */

/* 朱筆の傍注（赤ペンの書き込み） */
.margin-note {
  font-family: var(--font-hand);
  font-size: var(--fs-small);
  line-height: var(--lh-head);
  color: var(--alpe-red);
  letter-spacing: var(--ls-head);
}

/* 原稿用紙モチーフの背景（升目の淡い朱罫）
   罫線幅は .07em（≒1px相当・相対単位）。gradientのlengthにキーワードthinは使えない。 */
.genko-bg {
  position: relative;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--alpe-red) 11%, transparent) 0 .07em,
      transparent .07em 2.2em),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--alpe-red) 11%, transparent) 0 .07em,
      transparent .07em 2.2em),
    var(--alpe-paper);
}

/* --- 紙系ヒーロー --- */
.paper-hero { border-bottom: var(--rule-gold); }
.paper-hero .container {
  padding-top: var(--sp-section-hero);
  padding-bottom: var(--sp-section);
  max-width: 52rem;
}
.paper-hero .eyebrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-red);
  text-transform: uppercase;
  margin-bottom: 1.8em;
}
.paper-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: .9em;
}
.paper-hero h1 em { font-style: normal; color: var(--alpe-red); }
.paper-hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
  max-width: 40em;
}

/* --- 三つの層（積層図） --- */
.layers { display: flex; flex-direction: column; gap: 1em; max-width: 48rem; }
.layer {
  display: flex;
  align-items: baseline;
  gap: 1.4em;
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-left: .3em solid var(--alpe-red);
  border-radius: var(--radius-card);
  padding: 1.8em 2em;
}
.layer:nth-child(1) { margin-inline: 3.2em 0; }
.layer:nth-child(2) { margin-inline: 1.6em 1.6em; }
.layer:nth-child(3) { margin-inline: 0 3.2em; }
.layer .tier {
  flex-shrink: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
  writing-mode: horizontal-tb;
}
.layer h3 { font-size: var(--fs-h3); margin-bottom: .3em; }
.layer p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }
.layers-note { text-align: center; margin-top: 1.4em; }

/* --- 学びの循環（9段階フロー） --- */
.cycle-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .7em;
  margin-block: 2.4em 1.6em;
}
.cycle-step {
  flex: 1 1 8.5em;
  min-width: 8.5em;
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 40%, transparent);
  border-radius: var(--radius-card);
  padding: 1.2em 1.1em;
}
.cycle-step .num {
  font-family: var(--font-mincho);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
  display: block;
  margin-bottom: .5em;
}
.cycle-step h3 { font-size: var(--fs-h3); margin-bottom: .4em; }
.cycle-step p { font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: var(--lh-head); }
.cycle-step--core { border-color: var(--alpe-red); }
.cycle-close {
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-lead);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.cycle-close em { font-style: normal; color: var(--alpe-red); }

/* --- 七つの原則 --- */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6em 2.4em;
}
.principle {
  display: flex;
  gap: 1.2em;
  padding-block: .6em;
  border-top: var(--rule-gold);
}
.principle .no {
  flex-shrink: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  color: var(--alpe-red);
  line-height: 1.2;
}
.principle h3 { font-size: var(--fs-h3); margin-bottom: .4em; }
.principle p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* --- 受験と、その先（対句） --- */
.exam-future { text-align: center; }
.exam-future .duo-lead {
  font-family: var(--font-mincho);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  max-width: 34em;
  margin: 0 auto 3em;
}
.exam-future .duo-lead em { font-style: normal; color: var(--alpe-red); }
.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6em;
  text-align: left;
}
.duo-card {
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 2.4em 2.2em;
}
.duo-card .en {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
  display: block;
  margin-bottom: 1.2em;
}
.duo-card h3 { font-size: var(--fs-h2); margin-bottom: .6em; }
.duo-card p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* ============================================================
   レーンハブ規格（原器: M3で確立。L1-1 / L2-1 / L3-1 で共用する）
   /readable系: 特大英字ラベル＋章番号＋和文大見出しの高ジャンプ率章立て。
   配色はレーンごとに変奏する:
     L1 = 赤強め（.lane-hero--red）
     L2 = 明るい紙（.lane-hero--paper ※L2実装時に追加）
     L3 = 静かな紙＋深紅（.lane-hero--paper-crimson ※L3実装時に追加）
   ============================================================ */

/* --- レーンヒーロー --- */
.lane-hero {
  position: relative;
  overflow: hidden;
}
.lane-hero--red {
  background: var(--alpe-red-stage);
  color: var(--alpe-paper);
}
.lane-hero .container {
  position: relative;
  z-index: 2;
  padding-top: var(--sp-section-hero);
  padding-bottom: var(--sp-section);
}
.lane-display {
  position: absolute;
  z-index: 1;
  top: .1em;
  right: calc(var(--sp-inline) * -.5);
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.lane-hero--red .lane-display { color: color-mix(in srgb, var(--alpe-paper) 8%, transparent); }
.lane-hero .eyebrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: 2em;
}
.lane-hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  max-width: 15em;
  margin-bottom: .6em;
}
.lane-hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  max-width: 32em;
}
.lane-hero--red .lead { color: color-mix(in srgb, var(--alpe-paper) 82%, transparent); }

/* --- 章立て（特大英字＋章番号＋和文大見出し） --- */
.chapter-head {
  position: relative;
  overflow: hidden;
  margin-bottom: 2.2em;
}
.chapter-en {
  display: block;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: calc(var(--fs-display) * .75);
  line-height: 1;
  letter-spacing: var(--ls-label);
  color: color-mix(in srgb, var(--alpe-red) 9%, transparent);
  white-space: nowrap;
  margin-bottom: -.42em;
  user-select: none;
}
.chapter-no {
  display: flex;
  align-items: center;
  gap: 1em;
  font-family: var(--font-mincho);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: 1.2em;
}
.chapter-no::after {
  content: '';
  width: 3.4em;
  border-top: var(--rule-gold);
}
.chapter-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: .6em;
}
.chapter-title em { font-style: normal; color: var(--alpe-red); }

/* --- 共感チェックリスト --- */
.check-list {
  max-width: 38em;
  margin-top: 2.4em;
}
.check-list li {
  display: flex;
  gap: 1em;
  align-items: baseline;
  border-top: var(--rule-gold);
  padding-block: 1.1em;
  font-size: var(--fs-body);
  color: var(--alpe-ink);
}
.check-list li:last-child { border-bottom: var(--rule-gold); }
.check-list + .section-lead { margin-top: 2.4em; margin-bottom: 0; }
.check-list li::before {
  content: '✓';
  flex-shrink: 0;
  font-family: var(--font-mincho);
  font-weight: 700;
  color: var(--alpe-red);
}

/* --- 実績帯(学校名を特大で見せる変形。.trust-band--stack で縦積みにする) --- */
.trust-band--stack .container {
  flex-direction: column;
  gap: 0;
}
.band-label {
  text-align: center;
  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;
}
.band-schools {
  text-align: center;
  font-family: var(--font-mincho);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-sub);
}

/* --- 分岐CTA（リンク型・控えめ。主CTAボタンとは別物） --- */
.btn-secondary {
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-red);
  background: transparent;
  border: thin solid var(--alpe-red);
  border-radius: var(--radius-btn);
  padding: .85em 1.8em;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn-secondary:hover {
  color: var(--alpe-red-deep);
  border-color: var(--alpe-red-deep);
  transform: translateY(-.12em);
}
.branch-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  margin-top: 3em;
}

/* --- 本命講座カードの強調（2層構造: 本命は堂々提示） --- */
.course-card--featured {
  border: .15em solid var(--alpe-red);
}
.course-card--featured .meta { color: var(--alpe-red); }

/* レーンヒーローの配色変奏（L2=明るい紙 / L3=静かな紙＋深紅） */
.lane-hero--paper {
  background: var(--alpe-paper-dim);
  color: var(--alpe-ink);
  border-bottom: var(--rule-gold);
}
.lane-hero--paper .lane-display { color: color-mix(in srgb, var(--alpe-red) 7%, transparent); }
.lane-hero--paper .eyebrow { color: var(--alpe-red); }
.lane-hero--paper .lead { color: var(--alpe-ink-soft); }
.lane-hero--paper h1 em { font-style: normal; color: var(--alpe-red); }

.lane-hero--paper-crimson {
  background: var(--alpe-paper);
  color: var(--alpe-ink);
  border-bottom: .3em solid var(--alpe-red-night);
}
.lane-hero--paper-crimson .lane-display { color: color-mix(in srgb, var(--alpe-red-night) 9%, transparent); }
.lane-hero--paper-crimson .eyebrow { color: var(--alpe-red-night); }
.lane-hero--paper-crimson h1 { color: var(--alpe-red-night); }
.lane-hero--paper-crimson h1 em { font-style: normal; color: var(--alpe-red); }
.lane-hero--paper-crimson .lead { color: var(--alpe-ink-soft); }

/* ============================================================
   下層ページ共通部品（M4）
   ============================================================ */

/* --- 汎用ページヒーロー（子ページ用。紙系＝既定 / 赤系＝--red） --- */
.page-hero { border-bottom: var(--rule-gold); }
.page-hero .container {
  padding-top: var(--sp-section-hero);
  padding-bottom: var(--sp-section);
  max-width: 52rem;
}
.page-hero .eyebrow {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-red);
  text-transform: uppercase;
  margin-bottom: 1.8em;
}
.page-hero h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: .8em;
}
.page-hero h1 em { font-style: normal; color: var(--alpe-red); }
.page-hero .lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--alpe-ink-soft);
  max-width: 40em;
}
.page-hero--red {
  background: var(--alpe-red-stage);
  color: var(--alpe-paper);
  border-bottom: var(--rule-gold);
}
.page-hero--red .eyebrow { color: var(--alpe-gold); }
.page-hero--red h1,
.page-hero--red h1 em { color: var(--alpe-paper); }
.page-hero--red h1 em { text-decoration: underline; text-decoration-color: var(--alpe-gold); text-underline-offset: .18em; }
.page-hero--red .lead { color: color-mix(in srgb, var(--alpe-paper) 85%, transparent); }

/* --- 定義リスト（講座概要・仕様） --- */
.spec-list { max-width: 48rem; }
.spec-list > div {
  display: flex;
  gap: 1.6em;
  border-top: var(--rule-gold);
  padding-block: 1.2em;
}
.spec-list > div:last-child { border-bottom: var(--rule-gold); }
.spec-list dt {
  flex: 0 0 9em;
  font-family: var(--font-gothic);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.spec-list dd { font-size: var(--fs-body); color: var(--alpe-ink-soft); }
.spec-list dd .price-em { font-family: var(--font-mincho); font-size: var(--fs-h3); color: var(--alpe-red); }

/* --- 料金カード --- */
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6em;
}
.price-card {
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 2em;
}
.price-card .name { font-family: var(--font-mincho); font-size: var(--fs-h3); margin-bottom: .5em; }
.price-card .price { font-family: var(--font-mincho); font-size: var(--fs-h2); color: var(--alpe-red); line-height: 1.15; }
.price-card .unit { font-size: var(--fs-small); color: var(--alpe-ink-soft); }
.price-card p { font-size: var(--fs-small); color: var(--alpe-ink-soft); margin-top: .8em; }

/* --- 級別チップ（6区分） --- */
.rank-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.rank-chip {
  background: var(--alpe-paper);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 1.4em 1.2em;
  text-align: center;
}
.rank-chip--adv { border-color: var(--alpe-red); }
.rank-chip .rank-name { font-family: var(--font-mincho); font-size: var(--fs-h3); display: block; }
.rank-chip .rank-tag {
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-red);
  display: block;
  margin-top: .4em;
}

/* --- 領域グリッド --- */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
}
.domain-item {
  background: var(--alpe-paper);
  border-radius: var(--radius-card);
  border-left: .25em solid var(--alpe-red);
  padding: 1.4em 1.6em;
}
.domain-item h3 { font-size: var(--fs-h3); }
.domain-item p { font-size: var(--fs-small); color: var(--alpe-ink-soft); margin-top: .3em; }

/* ブロック間の上マージン（要素の直後に別ブロックを続けるとき） */
.mt-block { margin-top: 1.6em; }

/* セクション内のサブ見出し（節の中に小見出しを立てるとき） */
.section-subhead {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-top: 2.6em;
  margin-bottom: 1em;
}

/* --- 声カード（匿名・原文引用） --- */
.voice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6em;
}
.voice-card {
  background: var(--alpe-paper);
  border-radius: var(--radius-card);
  border-top: .2em solid var(--alpe-gold);
  padding: 2em;
}
.voice-card p { font-family: var(--font-mincho); font-size: var(--fs-body); line-height: var(--lh-loose); }
.voice-card .who { display: block; font-size: var(--fs-small); color: var(--alpe-ink-faint); margin-top: 1em; }

/* --- 受賞・実績リスト --- */
.award-list { max-width: 48rem; }
.award-list li {
  display: flex;
  gap: 1em;
  align-items: baseline;
  border-top: var(--rule-gold);
  padding-block: 1.1em;
  font-size: var(--fs-body);
  color: var(--alpe-ink);
}
.award-list li:last-child { border-bottom: var(--rule-gold); }
.award-list li::before {
  content: '◆';
  flex-shrink: 0;
  color: var(--alpe-gold);
  font-size: var(--fs-small);
}
.award-list .year { color: var(--alpe-ink-faint); font-size: var(--fs-small); }

/* --- 学校名の羅列（実績ページ） --- */
.school-cloud {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-loose);
  color: var(--alpe-ink);
}
.school-cloud .sep { color: var(--alpe-gold); padding-inline: .3em; }

/* --- 縦の流れステップ --- */
.flow-steps { max-width: 46rem; }
.flow-step {
  display: flex;
  gap: 1.4em;
  border-top: var(--rule-gold);
  padding-block: 1.4em;
}
.flow-step:last-child { border-bottom: var(--rule-gold); }
.flow-step .n {
  flex-shrink: 0;
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  color: var(--alpe-red);
  line-height: 1.2;
}
.flow-step h3 { font-size: var(--fs-h3); margin-bottom: .3em; }
.flow-step p { font-size: var(--fs-small); color: var(--alpe-ink-soft); }

/* --- FAQ（アコーディオン） --- */
.faq { max-width: 48rem; }
.faq details { border-top: var(--rule-gold); padding-block: 1.2em; }
.faq details:last-child { border-bottom: var(--rule-gold); }
.faq summary {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  color: var(--alpe-ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '＋';
  flex-shrink: 0;
  color: var(--alpe-red);
  font-family: var(--font-gothic);
}
.faq details[open] summary::after { content: '−'; }
.faq details p {
  font-size: var(--fs-body);
  color: var(--alpe-ink-soft);
  margin-top: 1em;
}

/* ============================================================
   V4 講座LP専用部品（各1ページ1回まで・乱発しない）
   ============================================================ */

/* --- 対話の再現（先生の問い＝明朝の朱／ナレーション＝ゴシック） --- */
.dialog-strip {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-block: 1.2em;
}
.dialog-strip .qs {
  font-family: var(--font-mincho);
  font-size: var(--fs-h2);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.dialog-strip .qs em { font-style: normal; color: var(--alpe-red); }
.dialog-strip .narration {
  font-size: var(--fs-body);
  color: var(--alpe-ink-soft);
  line-height: var(--lh-loose);
  margin-top: 1.6em;
  max-width: 34em;
  margin-inline: auto;
}

/* --- 答案の変化（初稿 → 講師の朱入れ・問い → 書き直し） --- */
.answer-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.6em;
  align-items: center;
  max-width: 52rem;
  margin-inline: auto;
}
.answer-shift figure { margin: 0; }
.answer-shift .stage-label {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  display: block;
  margin-bottom: .6em;
}
.answer-shift .cap {
  font-size: var(--fs-small);
  color: var(--alpe-ink-soft);
  line-height: var(--lh-head);
  margin-top: .7em;
}
.answer-shift .col-mid { text-align: center; max-width: 11em; }
.answer-shift .col-mid .arrow { font-family: var(--font-mincho); font-size: var(--fs-h2); color: var(--alpe-red); line-height: 1; }
.answer-shift .col-mid .ask {
  font-family: var(--font-mincho);
  font-size: var(--fs-body);
  color: var(--alpe-red);
  line-height: var(--lh-head);
  margin-top: .6em;
}

/* --- フォーム --- */
.site-form { max-width: 40rem; }
.form-field { margin-bottom: 1.6em; }
.form-field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
  margin-bottom: .5em;
}
.form-field .req { color: var(--alpe-red); margin-left: .3em; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--font-gothic);
  font-size: var(--fs-body);
  color: var(--alpe-ink);
  background: var(--alpe-paper);
  border: thin solid var(--alpe-ink-faint);
  border-radius: var(--radius-btn);
  padding: .8em 1em;
}
.form-field textarea { min-height: 8em; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: .14em solid var(--alpe-red);
  outline-offset: .06em;
  border-color: var(--alpe-red);
}
.site-form button.btn-primary { border: none; cursor: pointer; }

/* --- 【要確認】プレースホルダ（公開前にgrepで棚卸し） --- */
.todo-note {
  border: thin dashed var(--alpe-red);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--alpe-red) 5%, var(--alpe-paper));
  color: var(--alpe-red-deep);
  font-size: var(--fs-small);
  line-height: var(--lh-head);
  padding: 1.2em 1.4em;
  margin-block: 1.2em;
}
.todo-note::before {
  content: '【要確認】';
  font-weight: 700;
  margin-right: .4em;
}

/* ============================================================
   V3 トップ｜劇場型FV以降（S1 NOW / S2 入口 / S3 痕跡 / S4 実績 / S5 署名 / S6 相談）
   規範: 赤の面はS4(信頼帯)・S6のCTAボタン・S7のみ。S1/S2/S3/S5は生成り基調。
         セクション毎に密度と温度を変える（同じ生成り・同じカード列で塗らない）。
   ============================================================ */

/* スクロールで一度だけ立ち上がる入場（reduced-motion時はJSがhas-jsを付けない＝常時可視） */
.reveal { transition: opacity .7s ease, transform .7s ease; }
.has-js .reveal { opacity: 0; transform: translateY(.9em); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* --- S1 NOW（生成りの「間」・カードで囲まない・主役1＋補助2） --- */
.now { background: var(--alpe-paper); padding-block: var(--sp-section); }
.now-head { display: flex; align-items: baseline; gap: 1em; margin-bottom: 2.6em; flex-wrap: wrap; }
.now-en {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
}
.now-title { font-size: var(--fs-h3); font-weight: 600; color: var(--alpe-ink); }
.now-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 2.6em 3.2em; align-items: start; }
.now-meta {
  display: flex;
  gap: 1em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  margin-bottom: .8em;
}
.now-meta .d { color: var(--alpe-red); font-weight: 700; }
.now-meta .c { color: var(--alpe-ink-faint); }
.now-feature, .now-item { display: block; color: var(--alpe-ink); }
.now-feature:hover, .now-item:hover { color: var(--alpe-ink); }
.now-feature h3 { font-size: var(--fs-h2); line-height: var(--lh-head); margin-bottom: .4em; }
.now-feature:hover h3, .now-item:hover h3 { color: var(--alpe-red-deep); }
.now-item h3 { font-size: var(--fs-h3); line-height: var(--lh-head); margin-bottom: .3em; }
.now-desc { font-size: var(--fs-small); color: var(--alpe-ink-soft); line-height: var(--lh-head); }
.now-side { display: flex; flex-direction: column; gap: 2em; border-left: var(--rule-gold); padding-left: 3.2em; }

/* --- S2 三つの入口（カードにしない・幅違いの文字領域・文字の表情で差別化） --- */
.gates { background: var(--alpe-paper-dim); padding-block: var(--sp-section); }
.gates-en {
  display: block;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--alpe-gold);
  margin-bottom: 1.2em;
}
.gates-title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 1.8em; }
.gates-row { display: flex; gap: 2.4em; align-items: flex-start; }
.gate {
  display: block;
  color: var(--alpe-ink);
  border-top: thin solid color-mix(in srgb, var(--alpe-red) 30%, transparent);
  padding-top: 1.4em;
}
.gate:hover { color: var(--alpe-ink); }
.gate--a { flex: 1.05; }
.gate--b { flex: 0.9; }
.gate--c { flex: 1.2; }
.gate-no { font-family: var(--font-mincho); font-size: var(--fs-h3); color: var(--alpe-gold); line-height: 1; }
.gate-cat {
  display: block;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink-faint);
  margin-top: 1em;
}
.gate-title {
  display: block;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-head);
  margin-top: .35em;
}
.gate--a .gate-title { color: var(--alpe-ink); }
.gate--b .gate-title { color: var(--alpe-red); }
.gate--c .gate-title {
  color: var(--alpe-red-deep);
  background: linear-gradient(100deg, var(--alpe-red) 0%, var(--alpe-red-deep) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gate-sub {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  color: var(--alpe-ink-soft);
  line-height: var(--lh-head);
  transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}
.gate:hover .gate-sub, .gate:focus-visible .gate-sub { max-height: 9em; opacity: 1; margin-top: 1em; }

/* --- S3 言葉を、教室の外へ（編集的な非対称グリッド・実物写真は枠で待機） --- */
.traces { background: var(--alpe-paper); padding-block: var(--sp-section); }
.traces-title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: 1.4em; }
.traces-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6em;
  margin-top: 1.6em;
}
.trace { margin: 0; min-width: 0; }
.trace--lead { grid-column: 1 / 5; }
.trace--book { grid-column: 5 / 7; grid-row: 1 / 3; }
.trace--work { grid-column: 1 / 3; }
.trace--more { grid-column: 3 / 5; }
.trace--book .photo-slot { aspect-ratio: auto; height: 100%; min-height: 20em; }
.trace-cap {
  display: block;
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--alpe-ink);
  margin-top: .9em;
}
.trace-src { display: block; font-family: var(--font-gothic); font-size: var(--fs-small); color: var(--alpe-ink-faint); margin-top: .5em; }
.trace--more {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--alpe-paper-dim);
  border: thin solid color-mix(in srgb, var(--alpe-gold) 45%, transparent);
  border-radius: var(--radius-card);
  padding: 1.8em;
  color: var(--alpe-ink);
}
.trace--more:hover { color: var(--alpe-red); }
.trace-more-k {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
}
.trace-more-t { font-family: var(--font-mincho); font-size: var(--fs-h3); margin-top: .6em; }

/* --- S4 実績・信頼（赤黒の全面・静かな事実・ピル/トロフィー化しない） --- */
.proof {
  background: var(--alpe-red-night);
  color: var(--alpe-paper);
  border-block: var(--rule-gold);
  padding-block: var(--sp-section);
}
.proof .container { max-width: 60rem; }
.proof-title { font-size: var(--fs-h2); color: var(--alpe-paper); margin-bottom: 1.6em; }
.proof-facts { display: flex; flex-wrap: wrap; gap: 0 3.2em; margin-bottom: 2.4em; }
.proof-facts > div { padding-block: .6em; }
.proof-facts dt {
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--alpe-gold);
  margin-bottom: .4em;
}
.proof-facts dd { font-family: var(--font-mincho); font-size: var(--fs-h3); }
.proof-awards { max-width: 46em; }
.proof-awards li {
  display: flex;
  gap: .8em;
  align-items: baseline;
  border-top: thin solid color-mix(in srgb, var(--alpe-gold) 35%, transparent);
  padding-block: .9em;
  font-size: var(--fs-small);
  color: color-mix(in srgb, var(--alpe-paper) 90%, transparent);
}
.proof-awards li:last-child { border-bottom: thin solid color-mix(in srgb, var(--alpe-gold) 35%, transparent); }
.proof-awards li::before { content: '◆'; flex-shrink: 0; color: var(--alpe-gold); font-size: var(--fs-small); }
.proof-more {
  display: inline-block;
  margin-top: 2em;
  font-family: var(--font-gothic);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--ls-sub);
  color: var(--alpe-paper);
  border-bottom: thin solid var(--alpe-gold);
  padding-bottom: .35em;
}
.proof-more:hover { color: var(--alpe-gold); }
/* todo-noteの暗背景版（S4内） */
.todo-note--dark {
  background: color-mix(in srgb, var(--alpe-paper) 6%, transparent);
  border-color: color-mix(in srgb, var(--alpe-gold) 55%, transparent);
  color: color-mix(in srgb, var(--alpe-paper) 88%, transparent);
}
.todo-note--dark::before { color: var(--alpe-gold); }

/* --- S5 国語×未来（署名・巨大文字を再登場・補助文一行） --- */
.sign {
  position: relative;
  overflow: hidden;
  background: var(--alpe-paper);
  border-top: var(--rule-gold);
  min-height: 46vh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-section);
}
.sign-mon {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}
.sign-mon span {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fs-sign);
  line-height: .9;
  letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: .12rem color-mix(in srgb, var(--alpe-red) 38%, transparent);
}
.sign-mon .sign-x { font-size: .62em; vertical-align: .28em; -webkit-text-stroke-color: color-mix(in srgb, var(--alpe-red) 58%, transparent); }
.sign .container { position: relative; z-index: 2; text-align: center; max-width: 40rem; }
.sign-quote {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.sign-quote em {
  font-style: normal;
  color: var(--alpe-red);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--alpe-red) 50%, transparent);
  text-decoration-thickness: .08em;
  text-underline-offset: .3em;
}
.sign-cite { font-size: var(--fs-small); color: var(--alpe-ink-faint); margin-top: 1.4em; }
.sign-more {
  display: inline-block;
  margin-top: 2em;
  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: .35em;
}
.sign-more:hover { color: var(--alpe-red-deep); }

/* --- S6 迷った方へ（生成り地・唯一の大型CTA＋補助リンク） --- */
.consult {
  background: var(--alpe-paper-dim);
  text-align: center;
  padding-block: var(--sp-section-cta);
  border-top: var(--rule-gold);
}
.consult-title { font-size: var(--fs-h2); line-height: var(--lh-tight); margin-bottom: .7em; }
.consult-lead { font-size: var(--fs-lead); color: var(--alpe-ink-soft); }
.consult-fact { font-size: var(--fs-small); color: var(--alpe-ink-faint); margin-top: .6em; margin-bottom: 2.4em; }
.consult-actions { display: flex; flex-wrap: wrap; gap: 1.2em 1.6em; justify-content: center; align-items: center; }

/* --- フッター補足（住所・連絡先） --- */
.footer-info {
  font-size: var(--fs-small);
  line-height: var(--lh-head);
  color: color-mix(in srgb, var(--alpe-paper) 66%, transparent);
  margin-top: 1em;
}

/* --- 理念署名（各LP末尾に置く貫通の1行・C2） --- */
.signature-line {
  text-align: center;
  padding-block: var(--sp-section-band);
  background: var(--alpe-paper-dim);
  border-top: var(--rule-gold);
}
.signature-line a {
  font-family: var(--font-mincho);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-sub);
  color: var(--alpe-ink);
}
.signature-line a:hover { color: var(--alpe-red); }
.signature-line em { font-style: normal; color: var(--alpe-red); }

/* --- 写真プレースホルダ枠（C3・実写真はボス支給待ち） --- */
.photo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--alpe-paper-dim);
  border: thin dashed color-mix(in srgb, var(--alpe-ink-faint) 70%, transparent);
  border-radius: var(--radius-card);
  color: var(--alpe-ink-faint);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-sub);
  text-align: center;
  padding: 1em;
  min-width: 0;
  overflow-wrap: anywhere;
}
.photo-slot::before { content: '写真枠 ／ '; }

/* --- ロゴスロット（C4・ロゴデータ支給待ち。現状はテキストブランド併用） --- */
.logo-slot {
  flex: 0 0 auto;
  width: 2.6em;
  height: 2.6em;
  border-radius: var(--radius-btn);
  border: thin dashed color-mix(in srgb, var(--alpe-ink-faint) 60%, transparent);
  display: grid;
  place-items: center;
  font-family: var(--font-mincho);
  font-weight: 700;
  color: var(--alpe-red);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 62em) {
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .practice-grid, .path-grid, .course-grid { grid-template-columns: 1fr; }
  .principles-grid { grid-template-columns: 1fr; }
  .price-grid, .voice-grid { grid-template-columns: 1fr; }
  .rank-grid, .domain-grid { grid-template-columns: repeat(2, 1fr); }

  /* S3 痕跡: タブレットは主役を全幅、残り3枠を2列に */
  .traces-grid { grid-template-columns: 1fr 1fr; }
  .trace--lead { grid-column: 1 / 3; }
  .trace--book { grid-column: auto; grid-row: auto; }
  .trace--book .photo-slot { aspect-ratio: 16 / 9; height: auto; }
  .trace--work, .trace--more { grid-column: auto; }
}

@media (max-width: 46em) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--alpe-paper);
    border-bottom: var(--rule-gold);
    padding: 1.2em var(--sp-inline) 1.6em;
  }
  .site-header.is-nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 1.1em; }
  .nav-toggle { display: block; }

  /* S0 劇場型FV: ハンバーガー・巨大文字縮小・目次を下部横一列・矢印は隠す */
  .navbtn { display: block; }
  .gnav {
    display: none;
    position: absolute;
    top: 100%;
    right: var(--sp-inline);
    background: var(--alpe-paper);
    color: var(--alpe-ink);
    border: thin solid color-mix(in srgb, var(--alpe-gold) 50%, transparent);
    border-radius: var(--radius-card);
    padding: 1em 1.4em;
  }
  .head.open .gnav { display: block; }
  .head.open .gnav ul { flex-direction: column; gap: 1em; }
  .head.open .gnav a { color: var(--alpe-ink); }
  .copy, .copy-1, .copy-2 { padding-top: clamp(6em, 20vh, 10em); }
  .head-copy { font-size: clamp(2.2rem, 10.5vw, 3.4rem); }
  .head-copy .shift { margin-left: 0; }
  .mon-a { font-size: 44vw; bottom: 2%; left: -8%; }
  .mon-b { font-size: 58vw; bottom: -6%; }
  .mon-year { font-size: 40vw; }
  .index {
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: .6em;
    right: auto;
    left: var(--sp-inline);
    top: auto;
    bottom: clamp(1em, 5vh, 1.9em);
    transform: none;
    gap: 1.3em;
  }
  .index::before { flex-basis: 100%; margin-bottom: 0; }
  .idx { flex-direction: row; }
  .arrows { display: none; }

  /* S1 NOW: 主役と補助を縦積み、区切りは上罫へ */
  .now-grid { grid-template-columns: 1fr; gap: 2.4em; }
  .now-side { border-left: none; padding-left: 0; border-top: var(--rule-gold); padding-top: 2em; }

  /* S2 入口: 縦積み。touchはホバー不可のため補助文を常時表示 */
  .gates-row { flex-direction: column; gap: 2em; }
  .gate--a, .gate--b, .gate--c { flex: none; }
  .gate-sub { max-height: none; opacity: 1; margin-top: .8em; }

  /* S3 痕跡: 全枠1列。書影枠は縦長指定を解除し通常の16:9枠に戻す */
  .traces-grid { grid-template-columns: 1fr; }
  .trace--lead, .trace--book, .trace--work, .trace--more { grid-column: auto; grid-row: auto; }
  .trace--book .photo-slot { aspect-ratio: 16 / 9; height: auto; min-height: 0; }

  /* S4 実績: 事実を詰めすぎない */
  .proof-facts { gap: 0 2em; }

  /* S6 相談: 導線を縦積み */
  .consult-actions { flex-direction: column; }

  /* V4 講座LP: 答案3段を縦積み（中央の矢印は下向き） */
  .answer-shift { grid-template-columns: 1fr; }
  .answer-shift .col-mid { max-width: none; }
  .answer-shift .col-mid .arrow { display: inline-block; transform: rotate(90deg); }
  .dialog-strip .qs { font-size: var(--fs-h3); }

  .steps-grid { grid-template-columns: 1fr; }
  .trust-band .container { flex-direction: column; text-align: center; gap: 1.8em; }
  .trust-item + .trust-item {
    border-left: none;
    border-top: var(--rule-gold);
    padding-top: 1.8em;
  }
  .site-footer .container { flex-direction: column; }

  /* 紙系: 積層図のインデントを解除、対句を縦積み */
  .layer:nth-child(1),
  .layer:nth-child(2),
  .layer:nth-child(3) { margin-inline: 0; }
  .layer { flex-direction: column; gap: .5em; }
  .duo { grid-template-columns: 1fr; }
  .cycle-step { flex-basis: 100%; }

  /* レーンハブ: 特大英字を縮小して375pxに収める */
  .chapter-en { font-size: calc(var(--fs-display) * .42); margin-bottom: -.3em; }
  .lane-display { font-size: calc(var(--fs-display) * .55); }
  .branch-cta { flex-direction: column; }
  .branch-cta .btn-secondary { text-align: center; }

  /* 下層ページ: 全グリッド1列、定義リストは縦積み */
  .rank-grid, .domain-grid { grid-template-columns: 1fr; }
  .spec-list > div { flex-direction: column; gap: .4em; }
  .spec-list dt { flex-basis: auto; }
}