/* AI SCHOOL REBORN — /school/ 専用スタイル。
   このページからのみ読み込む。トップ(index.html)はインライン維持のままで、
   共有はしていない。追加・変更したら aws/deploy.sh の同期対象にも入っているか確認する。 */
/* 配色トークンと基本コンポーネントは v2 ブランド（Overwrite Blue）に準拠。
   書体はこのページだけ Noto Serif JP（明朝）で通しており、v2 とは異なる。 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#ffffff;
  --paper-warm:#f7f6f3;
  --ink:#0d0d0f;
  --ink-body:#4c5057;
  /* 補助テキスト用。#8a8e94 は白背景で約3.3:1しかなくWCAG AAを満たさないため、
     .76rem 前後の注記でも読める 4.7:1 相当まで暗くしている。 */
  --ink-mute:#6f7379;
  --blue:#1b3a6b;
  --blue-deep:#142d53;
  --blue-tint:rgba(27,58,107,.07);
  --rule:rgba(16,16,18,.13);
  --rule-soft:rgba(16,16,18,.07);

  /* 本文も見出しも明朝で通す。--font-en は eyebrow などの小さな欧文ラベルにだけ使う。 */
  --font-en:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-jp:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','Yu Mincho Medium',serif;
  --font-serif:'Noto Serif JP','Hiragino Mincho ProN','Yu Mincho','Yu Mincho Medium',serif;

  /* 2カラムの割り付け。.cols（各セクションの見出し＋本文）と .prof（講師）で
     同じ値を使い、上下段で縦ラインが揃うようにする。片方だけ書き換えないこと。 */
  --cols-tpl:minmax(0,.86fr) minmax(0,1.14fr);
  --cols-gap:clamp(38px,6vw,96px);

  --maxw:1180px;
  --gut:clamp(22px,6vw,72px);
  --sec:clamp(96px,15vw,208px);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink-body);
  font-family:var(--font-jp);
  font-weight:300;
  font-size:clamp(.9rem,.86rem + .18vw,.98rem);
  line-height:2.15;
  letter-spacing:.03em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.warm{background:var(--paper-warm)}

/* ヘッダーが固定なので、アンカーで飛んだ見出しがその裏に潜らないよう逃がす。
   値はナビの高さ clamp(66px,7vw,86px) + 余白。 */
section[id]{scroll-margin-top:clamp(84px,9vw,108px)}

/* キーボード操作でいきなり本文へ。フォーカスされるまでは画面外。 */
.skip{
  position:absolute;left:var(--gut);top:0;z-index:200;
  transform:translateY(-120%);
  background:var(--blue);color:#fff;
  padding:.9rem 1.4rem;font-size:.8rem;letter-spacing:.08em;
  transition:transform .2s ease;
}
.skip:focus{transform:translateY(0)}

/* ── typography primitives ───────────────────────────── */
.eyebrow{
  font-family:var(--font-en);
  font-size:.68rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--blue);
  display:flex;align-items:center;gap:.9em;
  margin-bottom:clamp(28px,4vw,44px);
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule-soft);max-width:120px}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:400;color:var(--ink);
  letter-spacing:.045em;
  line-height:1.55;
}
h1,h2,h3,.lead,.cap-desc,.step-desc,.hero-sub,.plan-desc{
  word-break:auto-phrase;line-break:strict;
}
.display{
  font-size:clamp(1.9rem,1rem + 4.9vw,4.5rem);
  font-weight:400;
  line-height:1.46;
  letter-spacing:.055em;
}
@media(max-width:480px){ .display{letter-spacing:.03em} }
.h2{
  font-size:clamp(1.55rem,1.05rem + 2.1vw,2.7rem);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.05em;
}
.h3{
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  font-weight:500;line-height:1.8;
}
.lead{
  font-size:clamp(.95rem,.9rem + .3vw,1.08rem);
  line-height:2.3;color:var(--ink-body);
  max-width:34em;
}
.mute{color:var(--ink-mute)}
.en{font-family:var(--font-en);letter-spacing:.06em}
strong,b{font-weight:500;color:var(--ink)}
.hl{color:var(--blue);font-weight:500}

/* ── buttons / links ─────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.85em;
  padding:1.15rem 2.15rem;
  background:var(--blue);color:#fff;
  font-size:.82rem;font-weight:400;letter-spacing:.09em;
  border:1px solid var(--blue);
  transition:background .35s ease,border-color .35s ease,transform .35s ease;
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);transform:translateY(-2px)}
.btn .ar{transition:transform .35s ease}
.btn:hover .ar{transform:translateX(4px)}

.tlink{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.82rem;letter-spacing:.08em;color:var(--blue);
  padding-bottom:.3em;border-bottom:1px solid var(--rule);
  transition:border-color .35s ease;
}
.tlink:hover{border-color:var(--blue)}
.tlink .ar{transition:transform .35s ease}
.tlink:hover .ar{transform:translateX(4px)}

/* ── nav ─────────────────────────────────────────────── */
header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease;
}
header.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--rule-soft);
}
.nav{
  max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  height:clamp(66px,7vw,86px);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.brand{
  display:flex;align-items:center;line-height:0;
  /* 画像が出ないときの代替テキスト用にフォント指定は残す */
  font-family:var(--font-en);font-size:.92rem;font-weight:400;
  letter-spacing:.22em;color:var(--ink);
}
/* ナビの高さ clamp(66px,7vw,86px) に対して、上下に余白が残る大きさに抑える */
.brand img{display:block;height:clamp(26px,3vw,36px);width:auto}
.nav-links{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,2.6rem)}
.nav-links a{
  font-size:.76rem;letter-spacing:.1em;color:var(--ink-body);
  transition:color .3s ease;
}
.nav-links a:hover{color:var(--blue)}
.nav-links a.cta{color:var(--blue)}
@media(max-width:820px){ .nav-links a:not(.cta){display:none} }

/* ── モバイル固定CTA ──────────────────────────────────
   820px 以下ではナビのリンクが畳まれ、申し込みへ戻る手段がヘッダーだけになる。
   ページが長いので、下端に価格つきの導線を常駐させる。
   申込セクションが見えている間は .hide で引っ込める（重複と、フォーム下端の被り防止）。 */
.mcta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-top:1px solid var(--rule-soft);
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  align-items:center;justify-content:space-between;gap:1rem;
  transition:transform .35s ease;
}
.mcta.hide{transform:translateY(110%)}
.mcta-price{font-family:var(--font-serif);font-size:1.05rem;color:var(--ink);line-height:1.4}
.mcta-price small{display:block;font-family:var(--font-jp);font-size:.66rem;letter-spacing:.06em;color:var(--ink-mute);line-height:1.6}
.mcta .btn{padding:.9rem 1.5rem;font-size:.8rem;white-space:nowrap}
@media(max-width:820px){
  .mcta{display:flex}
  /* フッターの内容が固定バーに隠れないよう、その分だけ下に余白を足す */
  footer{padding-bottom:calc(clamp(64px,8vw,104px) + 76px)}
}
@media(prefers-reduced-motion:reduce){ .mcta{transition:none} }

/* フォーカスの可視化。既定のアウトラインを消している要素があるので明示する。 */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ── hero ────────────────────────────────────────────── */
/* メインビジュアルが上に来たぶん、ヒーロー本文の上余白は詰める */
/* コピーを重ねたぶん、下の #hero は残りの要素（CTA・facts）だけになるので上の余白を詰める */
#hero{padding-top:clamp(34px,4.5vw,60px);padding-bottom:clamp(56px,8vw,104px)}

/* ── hero に冒頭のひと段落を重ねる ───────────────────
   写真は白壁と窓で明るく、そのままだと本文色（#4c5057）が沈む。
   下から白いスクリムを掛けて、文字が乗る帯だけ明度を上げている。
   スクリムは画像の下半分に効かせ、上半分（人物の顔）には掛けない。 */
.hero-frame{position:relative}
/* 写真は即表示（LCP要素のため）。コピーだけ少し遅らせて立ち上げ、
   写真 → 言葉の順に見えるようにする。 */
.hero-over.r{transition-delay:.35s}
/* コピーは上から42%。見出しが二人の顔の高さに重なる位置を狙っている
   （人物との重なりは許容する方針）。下端寄せだと文字が写真の主役より
   下に来て視線が落ち、上寄せすぎると顔の上を素通りするため、この間で取る。 */
.hero-over{
  position:absolute;left:0;right:0;top:42%;bottom:auto;
  pointer-events:none;   /* 写真の上の帯がリンクを塞がないように */
}
/* スクリムは文字が乗る帯だけに掛ける。上下とも透明へ抜いて、
   写真の中に白い矩形が見えないようにしている。
   重なる相手（講師の髪・観葉植物）が濃いので、中央部は強めに置く。 */
.hero-over::before{
  content:"";position:absolute;left:0;right:0;top:-24%;bottom:-30%;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.60) 20%,
    rgba(255,255,255,.82) 50%,
    rgba(255,255,255,.60) 80%,
    rgba(255,255,255,0) 100%);
}
.hero-over .wrap{position:relative}
.hero-over .hero-tag{margin-bottom:clamp(12px,1.6vw,18px);color:var(--ink-body)}

/* 4:5 に切り替わる幅では画像が縦に伸び、顔の位置も相対的に上がるので合わせる */
@media(max-width:760px){
  .hero-over{top:38%}
}
.hero-tag{
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:clamp(34px,5vw,54px);
}
.hero-sub{
  margin-top:clamp(34px,4.5vw,52px);
  font-size:clamp(.95rem,.9rem + .32vw,1.1rem);
  line-height:2.35;max-width:32em;
}
.hero-actions{
  margin-top:clamp(42px,6vw,66px);
  display:flex;flex-wrap:wrap;gap:1rem 1.1rem;align-items:center;
}
.figcap{
  max-width:var(--maxw);margin:1.4rem auto 0;padding-inline:var(--gut);
  font-family:var(--font-en);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-mute);
}

/* ── 写真システム ─────────────────────────────────────
   ルール:
   - 画像は 1セクション1枚。ファイル名とセクションを固定で対応させ、
     本番写真は同じファイル名で上書きするだけで差し替わる。
   - トリミング位置は figure 側の --pos で1枚ずつ調整する
     （例: style="--pos:center 62%"）。顔や手元が切れたらここだけ触る。
   - 幅は「全幅 / 版面いっぱい / 少し絞って左右に寄せる」を使い分け、
     均等に並べない。スマホは全部が画面幅いっぱいになる。
   - aspect-ratio を必ず持たせて読み込み前に領域を確保する（CLS対策）。
   - 撮影待ちの枠は .pending で非表示。写真を置いたら pending を外す。 */
.ph{display:block;width:100%;object-fit:cover;object-position:var(--pos,center)}
.pending{display:none}

/* 全幅（ウィンドウ幅いっぱい）。figure は .wrap の外に置く */
.ph-full .ph{aspect-ratio:16/9}
/* 版面いっぱい（.wrap の内側） */
.ph-inset .ph{aspect-ratio:3/2}
/* 少し絞って左右どちらかに寄せる＝誌面のリズム */
.ph-left{width:82%;margin-right:auto}
.ph-right{width:92%;margin-left:auto}
.ph-left .ph,.ph-right .ph{aspect-ratio:3/2}
/* 比率の上書き（枠ごとに 3:2 か 16:9 を選ぶ） */
.ph-169 .ph{aspect-ratio:16/9}
.ph-32 .ph{aspect-ratio:3/2}
/* フォーム直前の帯。全幅のまま高さだけ抑え、絵としての主張を下げる
   （16:9のままだと部屋の全景がもう一度出て、heroと役割が重複する）。 */
.ph-band .ph{aspect-ratio:4.2/1}
@media(max-width:760px){ .ph-band .ph{aspect-ratio:2.4/1} }
/* 版面内の figure ではキャプションの左右インデントを打ち消す
   （.figcap は全幅写真用に padding を持っているため） */
.ph-inset .figcap,.ph-left .figcap,.ph-right .figcap{max-width:none;padding-inline:0}
/* セクション内での上下の間隔。前後の文章から十分に離す */
.ph-gap{margin-top:clamp(56px,7.5vw,104px)}
.ph-gap-tight{margin-top:clamp(40px,5vw,68px)}   /* 直前の要素とひとまとまりに見せる */

/* ページ最上部の1枚。固定ナビ（高さ clamp(66px,7vw,86px)）の下から始める */
.ph-top{padding-top:clamp(66px,7vw,86px)}
/* メインビジュアルは横に長く、スマホでは縦位置に寄せて空間と人物を残す */
.ph-hero .ph{aspect-ratio:16/9}
@media(max-width:760px){
  .ph-hero .ph{aspect-ratio:4/5}
}

/* ── 写真に本文を重ねる枠（いまは WHY の1枚だけ） ─────
   hero と同じ考え方。人物の顔の高さに文章を置いて、人が主役にならない
   ようにする。写真は白壁と窓で明るく、そのままだと本文色（#4c5057）が
   沈むので、文字が乗る帯にだけ白いスクリムを掛ける。 */
.ph-frame{position:relative}
/* スクリムは写真の高さを基準に置く（文章の行数で位置が動かないように）。
   顔は写真の高さ40〜58%の帯にあるので、22%〜72% に掛けて確実に覆う。
   中央は .94 まで上げている。.88 では髪と目鼻が残って顔が読めてしまい、
   「顔を隠す」という狙いに届かなかった（右の人物で確認）。
   上下は透明へ抜き、写真の中に白い矩形が見えないようにしている。 */
.ph-frame::after{
  content:"";position:absolute;left:0;right:0;top:22%;bottom:28%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 20%,
    rgba(255,255,255,.94) 42%,
    rgba(255,255,255,.94) 62%,
    rgba(255,255,255,.70) 82%,
    rgba(255,255,255,0) 100%);
}
/* 文字はスクリムより前に出す（::after は最後に描かれるため z-index が要る）。 */
.ph-over{position:absolute;left:0;right:0;top:37%;z-index:1;padding-inline:clamp(24px,4vw,56px)}
.ph-over-text{max-width:30em;font-size:clamp(.9rem,.86rem + .28vw,1.04rem);line-height:2.2;color:var(--ink)}
/* 画面が狭いと写真が低くなるぶん、文章の頭を上げて顔の帯から外れないようにする */
@media(max-width:760px){
  .ph-over{top:31%}
  .ph-over-text{line-height:2.05}
}

/* 画面が狭いときは版面内の写真も画面幅いっぱいに抜く。
   900px は .cols / .prof が1カラムに折り返す境界と同じ＝レイアウトの節目に揃える。 */
@media(max-width:900px){
  .ph-inset,.ph-left,.ph-right{
    width:calc(100% + var(--gut) * 2);
    margin-inline:calc(var(--gut) * -1);
  }
  .ph-inset .ph,.ph-left .ph,.ph-right .ph{aspect-ratio:3/2}
  .ph-inset.ph-169 .ph{aspect-ratio:16/9}
  .ph-gap{margin-top:clamp(44px,10vw,64px)}
}

/* 開講の要点。ヒーロー直下に置いて、条件を探させない。 */
.facts{
  margin-top:clamp(44px,6vw,68px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule-soft);
  border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
@media(max-width:760px){ .facts{grid-template-columns:repeat(2,1fr)} }
.fact{background:var(--paper);padding:clamp(22px,3vw,32px) clamp(16px,2vw,26px)}
.fact-k{font-family:var(--font-en);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.fact-v{margin-top:.9rem;font-family:var(--font-serif);font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);color:var(--ink);line-height:1.6}
.fact-n{margin-top:.4rem;font-size:.76rem;line-height:1.9;color:var(--ink-mute)}

/* ── generic two-column ──────────────────────────────── */
/* 左に見出し、右に本文。見出しは本文の高さに対して縦センターに置く
   （本文が長いセクションほど、上寄せだと見出しだけが取り残されて見えるため）。 */
.cols{
  display:grid;grid-template-columns:var(--cols-tpl);
  gap:var(--cols-gap);align-items:center;
}
@media(max-width:900px){ .cols{grid-template-columns:1fr} }

/* 2カラムのときは見出しを折り返さない。
   左カラムをコンテナにして、その幅に収まる最大サイズまで文字を自動で縮める
   （13文字 × 約1.05em ＝ 13.65em ぶんが必要なので 7cqi を上限にする）。
   1カラムに折り返す 900px 以下では、幅が足りず縮めすぎになるため適用しない。 */
@media(min-width:901px){
  .cols > div:first-child{container-type:inline-size}
  .cols > div:first-child .h2{
    white-space:nowrap;
    font-size:min(clamp(1.55rem,1.05rem + 2.1vw,2.7rem), 7cqi);
    letter-spacing:.03em;
  }
}

/* ── 番号つきリスト（教えること／教えないこと） ──────── */
.caps{margin-top:clamp(56px,8vw,104px);border-top:1px solid var(--rule-soft)}
.cap{
  display:grid;grid-template-columns:auto minmax(0,.9fr) minmax(0,1.3fr);
  gap:clamp(16px,4vw,56px);align-items:baseline;
  padding-block:clamp(30px,4.4vw,52px);
  border-bottom:1px solid var(--rule-soft);
}
.cap-no{
  font-family:var(--font-en);font-size:.68rem;font-weight:500;letter-spacing:.16em;
  color:var(--blue);padding-top:.55em;
}
.cap-name{font-size:clamp(1.02rem,.95rem + .42vw,1.32rem);color:var(--ink);font-weight:500;line-height:1.7}
.cap-desc{font-size:.9rem;line-height:2.2;color:var(--ink-body)}
@media(max-width:760px){
  .cap{grid-template-columns:auto 1fr;gap:14px 20px}
  .cap-desc{grid-column:2}
}

/* ── 対比ブロック（教えない／渡す） ──────────────────── */
.pair{margin-top:clamp(52px,7vw,88px);display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
@media(max-width:800px){ .pair{grid-template-columns:1fr} }
.pair-cell{background:var(--paper);padding:clamp(32px,4.2vw,58px)}
.warm .pair-cell{background:var(--paper-warm)}
.pair-tag{font-family:var(--font-en);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue)}
.pair-title{margin-top:1.6rem;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--ink);font-weight:500;line-height:1.7}
.pair-desc{margin-top:1.4rem;font-size:.87rem;line-height:2.15}

/* ── できるようになることの例 ────────────────────────── */
.uses{
  margin-top:clamp(56px,8vw,100px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--rule-soft);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
@media(max-width:900px){ .uses{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .uses{grid-template-columns:1fr} }
.use{background:var(--paper);padding:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,32px)}
.warm .use{background:var(--paper-warm)}
.use-k{font-family:var(--font-en);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.use-name{margin-top:1.4rem;font-size:1.02rem;color:var(--ink);font-weight:500;line-height:1.7}
.use-desc{margin-top:1rem;font-size:.82rem;line-height:2.05;color:var(--ink-body)}
.uses-note{margin-top:clamp(32px,4vw,48px);font-size:.8rem;line-height:2.1;color:var(--ink-mute);max-width:44em}

/* ── 進め方の図（4ステップの流れ） ─────────────────────
   下の4カラムは各段階の説明、この図は「どこから どこへ向かうのか」だけを見せる。
   画像ではなくテキストで組み、狭い画面では横一列から縦積みに替える。
   線は .warm の地色で塗ったドットで分節する。 */
.flowmap{
  margin-top:clamp(52px,7vw,88px);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(16px,2.4vw,30px);
}
/* 和文なので --font-en（Inter）ではなく本文と同じ明朝で置く */
.fm-cap{
  font-family:var(--font-jp);font-size:.74rem;
  letter-spacing:.12em;color:var(--ink-mute);white-space:nowrap;
}
.fm-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
/* 最初と最後のドットの中心（12.5% と 87.5%）をつなぐ横線 */
.fm-track::before{
  content:"";position:absolute;top:4px;left:12.5%;right:12.5%;
  height:1px;background:var(--rule);
}
.fm-node{position:relative;display:grid;justify-items:center;gap:.9rem;text-align:center}
.fm-dot{
  width:9px;height:9px;border-radius:50%;
  border:1px solid var(--blue);background:var(--paper-warm);
}
.fm-no{font-family:var(--font-en);font-size:.62rem;font-weight:500;letter-spacing:.16em;color:var(--blue);line-height:1}
.fm-name{font-size:.95rem;color:var(--ink);line-height:1.6}
/* 図と、その下の4カードはひとまとまりに見せる */
.flowmap + .steps{margin-top:clamp(34px,4.6vw,58px)}

@media(max-width:700px){
  /* 縦積み。線も縦に倒し、ドットの左端(4px)に合わせる。 */
  .flowmap{grid-template-columns:1fr;gap:1.1rem;justify-items:start}
  .fm-track{grid-template-columns:1fr;gap:1.5rem;width:100%}
  .fm-track::before{top:8px;bottom:8px;left:4px;right:auto;width:1px;height:auto}
  .fm-node{grid-template-columns:auto 1fr;justify-items:start;align-items:baseline;gap:.35rem 1.1rem;text-align:left}
  .fm-dot{grid-row:1/3;align-self:start;transform:translateY(.45em)}
  .fm-cap{padding-left:1.9rem}
}

/* ── steps ───────────────────────────────────────────── */
.steps{
  margin-top:clamp(56px,8vw,100px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule-soft);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
@media(max-width:1000px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }
.step{background:var(--paper);padding:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,32px)}
.warm .step{background:var(--paper-warm)}
.step-no{font-family:var(--font-en);font-size:.68rem;font-weight:500;letter-spacing:.16em;color:var(--blue)}
.step-name{margin-top:1.5rem;font-size:1.05rem;color:var(--ink);font-weight:500;line-height:1.7}
.step-desc{margin-top:1rem;font-size:.82rem;line-height:2.05;color:var(--ink-body)}

/* ── 最初の1か月 ──────────────────────────────────────
   4ステップの直後に置く、初月の具体像。カードを5枚目として足すと段階の
   一覧に見えてしまうので、罫線で区切った別ブロックにする。割り付けは
   セクション見出しと同じ 2カラム（--cols-tpl）に合わせ、左にラベルを置く。 */
/* 優先度は「セクション見出しの一段下、ステップの一段上」に置く。装飾では
   なく、余白・罫線の濃さ・文字サイズの3つだけで差をつける。 */
.month1{
  margin-top:clamp(52px,7vw,96px);padding-top:clamp(40px,5vw,68px);
  /* ステップ間の区切り（--rule-soft）より一段濃い罫線で、ここから話が
     変わることを示す。線を太くはしない（ページ全体がヘアラインのため）。 */
  border-top:1px solid var(--rule);
  display:grid;grid-template-columns:var(--cols-tpl);gap:var(--cols-gap);align-items:start;
}
.month1-tag{font-family:var(--font-en);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);padding-top:.5em}
/* このセクション唯一の写真。左カラムに収め、講師写真と同じく本文より小さく扱う
   （このブロックの優先度は見出しより下なので、写真で持ち上げない）。
   素材・枠とも3:2なので object-position の調整は要らない。 */
.month1-photo{
  display:block;margin-top:clamp(22px,2.6vw,30px);
  width:85%;aspect-ratio:3/2;object-fit:cover;border-radius:2px;
}
@media(max-width:900px){
  .month1{grid-template-columns:1fr;gap:1.6rem}
  /* 1カラムでは ラベル → 本文 → 写真 の順にする。ラベルと見出しの間に写真が
     入ると、本来ひとつながりの「First month／最初の1か月は〜」が切れるため。
     display:contents で中の2要素を直接グリッドに載せ、order で並べ替える。 */
  .month1-side{display:contents}
  .month1-tag{order:1}
  .month1-body{order:2}
  .month1-photo{order:3;width:100%;margin-top:0}
}
/* .h2 と .h3 の中間。ステップ名（1.05rem）よりはっきり大きく、
   セクション見出し（最大2.7rem）は超えない。 */
.month1-title{font-size:clamp(1.25rem,1.05rem + .9vw,1.72rem);font-weight:400;line-height:1.75;color:var(--ink);letter-spacing:.04em}
.month1-desc{margin-top:1.5rem;font-size:clamp(.9rem,.87rem + .18vw,.96rem);line-height:2.25;color:var(--ink-body);max-width:36em}

/* 料金直下の相談ボタン。注記から十分に離し、単独で見えるようにする。 */
.plan-cta{margin-top:clamp(30px,4vw,44px)}

/* ── 講師プロフィール ────────────────────────────────── */
/* 上段の .cols と同じグリッドを使う。以前は .82fr/1.18fr で、右カラムの
   開始位置と幅が上下段でわずかにズレていた。align-items だけ start にする
   （写真を上端に合わせるため）。 */
.prof{margin-top:clamp(52px,7vw,88px);display:grid;grid-template-columns:var(--cols-tpl);gap:var(--cols-gap);align-items:start}
@media(max-width:900px){ .prof{grid-template-columns:1fr} }
.prof-name{font-family:var(--font-serif);font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem);color:var(--ink);letter-spacing:.06em;line-height:1.5}
.prof-yomi{margin-top:.7rem;font-family:var(--font-en);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.prof-role{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--rule-soft);font-size:.86rem;line-height:2.05}
/* 講師写真。四角く切り抜いた証明写真的な見せ方はせず、横長の一枚として置く。
   差し替えは img/photos/instructor.jpg を上書きするだけでよい。 */
/* 写真が先頭に来るので、間隔は名前との間（下）に持たせる */
/* 講師写真は控えめに扱う。主役は受講する人の仕事であって講師本人ではないため、
   左カラム幅いっぱいには広げず、名前・肩書きより小さく収める。 */
.prof-photo{
  margin-bottom:clamp(26px,3.2vw,36px);
  width:85%;aspect-ratio:3/2;object-fit:cover;object-position:var(--pos,center 72%);
  border-radius:2px;
}
/* スマホでも全幅には抜かない（他の記事写真とは扱いを変える）。
   全幅にすると画面内で最大の人物写真になってしまう。 */
@media(max-width:900px){
  /* 1カラムに折り返す幅では左端に寄せず中央に置く。左寄せのままだと
     右側に大きな余白が残り、写真だけが取り残されて見えるため。 */
  .prof-photo{width:70%;margin-inline:auto}
}
/* 経歴は数字のある事実だけを並べる。肩書きの羅列より、こちらのほうが判断材料になる。 */
.facts-list{margin-top:clamp(30px,4vw,44px);border-top:1px solid var(--rule-soft)}
.facts-row{
  display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.2rem;
  padding-block:1.15rem;border-bottom:1px solid var(--rule-soft);
  font-size:.85rem;line-height:1.95;
}
.facts-row .k{font-family:var(--font-en);font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);padding-top:.5em}
@media(max-width:560px){ .facts-row{grid-template-columns:1fr;gap:.3rem} }
/* 事実の列と、この学校でやることをつなぐ一文。列の一部に見えないよう
   罫線の外に置き、本文よりわずかに小さくする。 */
.facts-bridge{margin-top:1.6rem;font-size:.85rem;line-height:2.15;color:var(--ink-body);max-width:38em}

/* ── 対象者 ──────────────────────────────────────────── */
.fits{margin-top:clamp(48px,6vw,80px);display:grid;gap:1rem;max-width:44em}
.fits div{position:relative;padding-left:1.5em;font-size:.9rem;line-height:2.1}
.fits div::before{content:"";position:absolute;left:0;top:1.05em;width:8px;height:1px;background:var(--blue)}

/* ── 料金 ────────────────────────────────────────────── */
.plan{
  margin-top:clamp(52px,7vw,88px);
  border:1px solid var(--rule-soft);background:var(--paper);
  padding:clamp(36px,5vw,68px);
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(34px,5vw,80px);align-items:start;
}
@media(max-width:800px){ .plan{grid-template-columns:1fr} }
.plan-price{font-family:var(--font-serif);font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem);color:var(--ink);line-height:1.25;letter-spacing:.03em}
.plan-price .u{font-family:var(--font-jp);font-size:.95rem;font-weight:400;letter-spacing:.08em;color:var(--ink-mute);margin-left:.5em}
.plan-tax{margin-top:1rem;font-size:.78rem;color:var(--ink-mute)}
.plan-desc{font-size:.9rem;line-height:2.2}
.plan-list{margin-top:1.6rem;list-style:none;display:grid;gap:.75rem}
.plan-list li{position:relative;padding-left:1.35em;font-size:.85rem;line-height:2}
.plan-list li::before{content:"";position:absolute;left:0;top:1em;width:6px;height:1px;background:var(--blue)}
.limit{
  margin-top:clamp(28px,4vw,40px);
  display:inline-flex;align-items:center;gap:.8em;
  padding:.75rem 1.3rem;background:var(--blue-tint);
  font-family:var(--font-en);font-size:.72rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);
}

/* ── FAQ ─────────────────────────────────────────────
   details/summary で開閉する。JSは使わない。
   閉じていても本文はDOMにあるので FAQPage の構造化データと矛盾しない。 */
#faq{border-top:1px solid var(--rule-soft)}
.faq{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule-soft)}
.faq-item{border-bottom:1px solid var(--rule-soft)}
.faq-q{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:baseline;
  padding-block:clamp(22px,3vw,30px);cursor:pointer;list-style:none;
  font-size:clamp(.94rem,.9rem + .28vw,1.06rem);font-weight:500;color:var(--ink);
  line-height:1.9;transition:color .3s ease;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--blue)}
.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.faq-mark{
  font-family:var(--font-en);font-size:1rem;color:var(--blue);
  line-height:1;transform:translateY(.2em);
}
.faq-mark::before{content:"+"}
.faq-item[open] .faq-mark::before{content:"−"}
.faq-a{
  padding-bottom:clamp(24px,3vw,36px);
  font-size:.87rem;line-height:2.15;color:var(--ink-body);max-width:46em;
}
.faq-a a{color:var(--blue);border-bottom:1px solid var(--rule)}

/* ── contact ─────────────────────────────────────────── */
#apply{background:var(--paper-warm)}
/* ── ページ後半のテンポ ────────────────────────────
   FAQ → 写真 → CONTACT → ACCESS → footer と続く後半だけ、通しで見ると
   縦に間延びする。--sec をそのまま使うと 208px×2 が3回重なるため、
   CONTACT以降の接続部だけ約12%詰めた。余白の質は保ちつつ、最後まで
   テンポが落ちないようにする狙い。 */
#apply{padding-bottom:calc(var(--sec) * .88)}
#access{padding-block:calc(var(--sec) * .88)}
.cgrid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(44px,6vw,96px);align-items:start}
@media(max-width:900px){ .cgrid{grid-template-columns:1fr} }
.assure{margin-top:clamp(32px,4vw,44px);display:grid;gap:1rem}
.assure div{position:relative;padding-left:1.5em;font-size:.85rem;line-height:2.05}
.assure div::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:1px;background:var(--blue)}


form{display:grid;gap:1.55rem}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1.55rem}
@media(max-width:560px){ .f-row{grid-template-columns:1fr} }
.field{display:grid;gap:.6rem}
.lbl{font-family:var(--font-en);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.lbl .req{color:var(--blue)}
input,select,textarea{
  width:100%;font-family:var(--font-jp);font-size:.9rem;font-weight:300;
  color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--rule);
  padding:.75rem 0;letter-spacing:.03em;
  transition:border-color .35s ease;
  border-radius:0;-webkit-appearance:none;appearance:none;
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237c8086'/></svg>");
  background-repeat:no-repeat;background-position:right .2rem center;
}
textarea{resize:vertical;min-height:8.5rem;line-height:2.05}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--blue)}
/* キーボード操作のときだけは下線の色変化だけでは弱いので、枠を出す */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:3px;
}
input::placeholder,textarea::placeholder{color:#9a9ea3}
.f-note{font-size:.76rem;line-height:2;color:var(--ink-mute)}
.f-note a{color:var(--blue);border-bottom:1px solid var(--rule)}
#f-msg{display:none;font-size:.82rem;letter-spacing:.04em}
button[type=submit]{
  justify-self:start;cursor:pointer;font-family:var(--font-jp);
  background:var(--blue);color:#fff;border:1px solid var(--blue);
  padding:1.15rem 2.4rem;font-size:.84rem;letter-spacing:.09em;
  transition:background .35s ease,transform .35s ease;
}
button[type=submit]:hover{background:var(--blue-deep);transform:translateY(-2px)}
button[type=submit]:disabled{opacity:.45;cursor:default;transform:none}
#thanks{display:none;border:1px solid var(--rule-soft);background:var(--paper);padding:clamp(36px,5vw,64px)}
#thanks .t-mark{font-family:var(--font-en);font-size:.7rem;letter-spacing:.24em;color:var(--blue)}
#thanks .t-title{margin-top:1.4rem;font-family:var(--font-serif);font-size:1.4rem;letter-spacing:.045em;color:var(--ink);font-weight:400}
#thanks .t-sub{margin-top:1.2rem;font-size:.87rem;line-height:2.15}

/* ── アクセス（ページ末尾の地図） ─────────────────────
   Google マップは iframe。本番は CloudFront の CSP で frame-src を
   既定 'self' にしているため、main.yaml 側に www.google.com を足してある。
   それを反映（deploy.sh infra）しないと本番では地図が出ない。 */
.access-grid{
  margin-top:clamp(44px,6vw,72px);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,72px);align-items:start;
}
@media(max-width:900px){ .access-grid{grid-template-columns:1fr} }
.access-row{padding-block:1.1rem;border-bottom:1px solid var(--rule-soft)}
.access-row:first-child{border-top:1px solid var(--rule-soft)}
.access-k{font-family:var(--font-en);font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.access-v{margin-top:.6rem;font-size:.88rem;line-height:2}
.map{
  width:100%;aspect-ratio:16/10;border:1px solid var(--rule-soft);
  background:var(--paper-warm);
}
.map iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:900px){ .map{aspect-ratio:4/3} }
/* 会場の外観。住所ブロックの下、地図の左カラムに収める。
   .figcap は全幅写真用の左右余白を持っているので、ここでは打ち消す。 */
.venue-photo{margin-top:clamp(28px,4vw,40px)}
.venue-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.venue-photo .figcap{max-width:none;padding-inline:0}

/* ── footer ──────────────────────────────────────────── */
footer{padding-top:calc(clamp(64px,8vw,104px) * .88);padding-bottom:clamp(64px,8vw,104px);border-top:1px solid var(--rule-soft)}
.foot{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot-brand{font-family:var(--font-en);font-size:.92rem;letter-spacing:.22em;color:var(--ink);line-height:0}
/* ヘッダーより一回り大きく置く。ここは縮める理由がない */
.foot-brand img{display:block;height:clamp(34px,4.4vw,46px);width:auto}
.foot-tag{margin-top:1rem;font-family:var(--font-serif);font-style:italic;font-size:.95rem;letter-spacing:.05em;color:var(--ink-mute)}
.foot-nav{display:flex;flex-wrap:wrap;gap:.9rem 2rem}
.foot-nav a{font-size:.78rem;letter-spacing:.06em;color:var(--ink-body);transition:color .3s ease}
.foot-nav a:hover{color:var(--blue)}
.foot-copy{margin-top:clamp(40px,6vw,72px);font-family:var(--font-en);font-size:.68rem;letter-spacing:.1em;color:var(--ink-mute)}

/* ── reveal ──────────────────────────────────────────── */
.r{opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
.r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  .btn,.tlink{transition:none}
}