@charset "UTF-8";
/* =============================================================
   クリアゼミ  clear-semi.com
   白基調 × 紺 × 金。Tsunagu と同じブランド色。

   書体は塾が既に自前で持っているものだけを使う（新規読み込みゼロ）:
     Shippori Mincho    … 見出しの和文。塾の品位
     Century Gothic Std … 欧文・数字。C.L.E.A.R. の主役
     Noto Sans JP       … 本文
   ============================================================= */

@font-face{
  font-family:"Shippori Mincho";
  src:url(webfont/ShipporiMincho-Regular.woff) format("woff");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Century Gothic Std";
  src:url(webfont/CenturyGothicStd.woff) format("woff");
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:"Century Gothic Std";
  src:url(webfont/CenturyGothicStd-Bold.woff) format("woff");
  font-weight:700; font-display:swap;
}

:root{
  color-scheme: light only;   /* 自動ダークモードを拒否 */

  /* --- 色 --- */
  --navy:      #0a2a5e;   /* 主色 */
  --navy-deep: #061a3c;   /* フッター・最終CTA */
  --navy-soft: #2c4c81;
  /* 金は役割で分ける。装飾用の金は明るい面では文字に使えない（白地でコントラスト2.39）。 */
  --gold:      #c8a25a;   /* 装飾のみ: 罫線・帯・ボタンの地。文字には使わない */
  --gold-ink:  #8c6a22;   /* 明るい面の文字用。白5.00 / mist4.62 / wash4.60 */
  --gold-big:  #ad8440;   /* 大きな文字(24px+)用。washの上で3.14 */
  --gold-lt:   #e3cd9b;
  --gold-wash: #faf5ea;

  /* 画面下の固定CTAバーの高さ（実測70px）。
     ヒーローの高さから引かないと、帯がバーの裏に隠れる。 */
  --dock-h: 70px;
  --paper:     #ffffff;
  --mist:      #f3f6fb;   /* 面の切り替え。冷たい灰青 */
  --line:      #e0e5ee;
  --ink:       #1b2333;
  --ink-mute:  #5d6879;

  /* --- 書体 --- */
  --serif:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:   "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --gothic: "Century Gothic Std", "Futura", "Avenir Next", sans-serif;

  /* --- ガラスの透過 ---
     sweep.py で全ビューポート・Ken Burns終盤・最悪ピクセルを実測し、
     WCAG AA を保てる限界が glass .36 / scrim .50 / strip .68 と判明。
     一段だけ安全側に寄せてこの値。これ以上透かすと文字が沈む。
       実測: ガラス白字 8.11 / 金ラベル 5.20 / 帯の数字 6.07
     数値を変えたら必ず `python3 sweep.py` を回すこと。 */
  --scrim-l:  .54;   /* 写真スクリム: 左（ガラスの下） */
  --scrim-m:  .30;   /* 写真スクリム: 中央 */
  --scrim-r:  .06;   /* 写真スクリム: 右。ここはほぼ素通し */
  --scrim-top:.34;   /* 上（ヘッダーが乗る） */
  --glass-a:  .40;   /* ガラス板（元 .62） */
  --strip-a:  .72;   /* 下の帯（白ガラス） */

  /* --- 寸法 --- */
  --wrap: 1120px;
  --head: 72px;
  --r:    4px;    /* 角丸は控えめに。塾は軽薄に見せない */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head) + 16px);
  -webkit-text-size-adjust:100%;   /* iOS が横向きで文字を勝手に拡大するのを止める */
     -moz-text-size-adjust:100%;
          text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  font-size:16px; line-height:1.9;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
li{ list-style:none; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
}
.skip:focus{ left:8px; top:8px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

/* ============================================================
   共通パーツ
   ============================================================ */

/* セクション見出し。欧文ラベル＋和文。左に金の縦罫 */
.head{ margin-bottom:48px; }
.head__en{
  font-family:var(--gothic); font-weight:700;
  font-size:12px; letter-spacing:.22em; color:var(--gold-ink);
  display:block; margin-bottom:10px;
}
.head__ja{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,38px); line-height:1.45; color:var(--navy);
  letter-spacing:.02em;
}
.head__note{ margin-top:14px; color:var(--ink-mute); font-size:15px; max-width:58ch; }

.sect{ padding:96px 0; }
.sect--mist{ background:var(--mist); }
.sect--tight{ padding:72px 0; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; line-height:1;
  padding:16px 26px; border-radius:var(--r); border:1.5px solid transparent;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--gold{ background:var(--gold); color:var(--navy); }
.btn--gold:hover{ background:var(--gold-lt); }
.btn--navy{ background:var(--navy); color:#fff; }
.btn--navy:hover{ background:var(--navy-deep); }
.btn--ghost{ border-color:var(--navy); color:var(--navy); background:transparent; }
.btn--ghost:hover{ background:var(--navy); color:#fff; }
.btn--onnavy{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn--onnavy:hover{ background:#fff; color:var(--navy); }
.btn--wide{ padding-inline:36px; }
.btn .ico{ width:16px; height:16px; }

/* テキストリンク（→つき） */
.tlink{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px;                     /* タップ領域 */
  font-weight:700; font-size:14px; color:var(--navy);
  box-shadow:inset 0 -1px 0 var(--gold);
}
.tlink:hover{ color:var(--gold-ink); }
/* 文中で使うとき。inline-flex＋min-height:44px のままだと、金線が
   44px箱の下端＝本文ベースラインから浮いた位置に出てズレる。 */
.tlink--in{ display:inline; min-height:0; }
/* 紺帯（phead等の暗い面）の上では白文字＋金線 */
.phead .tlink{ color:#fff; }
.phead .tlink:hover{ color:var(--gold); }

/* ============================================================
   FAQ（details/summary。JS不要で開閉・キーボード操作可）
   ============================================================ */
.faq{ display:grid; gap:12px; max-width:820px; }
.faq__i{
  background:#fff; border:1px solid #e3e8f0; border-radius:6px;
  overflow:hidden;
}
.faq__i summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:14px;
  padding:18px 20px;
  font-size:15px; font-weight:700; color:var(--navy); line-height:1.6;
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::before{
  content:"Q"; flex:none;
  font-family:var(--gothic); font-weight:700; font-size:14px;
  color:var(--gold-ink);
}
.faq__i summary::after{
  content:""; flex:none; margin-left:auto;
  width:9px; height:9px;
  border-right:2px solid var(--navy); border-bottom:2px solid var(--navy);
  transform:rotate(45deg); transition:transform .2s;
}
.faq__i[open] summary::after{ transform:rotate(-135deg); }
.faq__i summary:hover{ background:var(--mist); }
.faq__a{
  padding:2px 20px 20px 48px;
  font-size:14.5px; line-height:1.95; color:var(--ink);
}
@media (max-width:600px){
  .faq__a{ padding-left:20px; }
}

@media (prefers-reduced-motion:reduce){
  .btn, .btn:hover{ transition:none; transform:none; }
}

/* ============================================================
   ヘッダー
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--head);
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:saturate(190%) blur(20px);
          backdrop-filter:saturate(190%) blur(20px);
  border-bottom:1px solid rgba(200,162,90,.45);   /* 金の細線 */
  transition:background-color .3s ease, border-color .3s ease;
}
/* ヒーローの上にいる間は透明。写真の上に浮かせる */
.hdr[data-top="true"]{
  background:transparent;
  border-bottom-color:rgba(255,255,255,.18);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.hdr[data-top="true"] .hdr__nav a,
.hdr[data-top="true"] .hdr__tel a{ color:#fff; }
.hdr[data-top="true"] .hdr__tel span{ color:rgba(255,255,255,.72); }
.hdr[data-top="true"] .hdr__login{ color:#fff; border-color:rgba(255,255,255,.6); }
.hdr[data-top="true"] .hdr__login:hover{ background:#fff; color:var(--navy); }
.hdr[data-top="true"] .burger span{ background:#fff; }
.hdr[data-top="true"] .hdr__logo .lg-navy{ display:none; }
.hdr[data-top="true"] .hdr__logo .lg-white{ display:block; }
.hdr__logo .lg-white{ display:none; }
@media (prefers-reduced-motion:reduce){ .hdr{ transition:none; } }
.hdr__in{
  height:100%; display:flex; align-items:center; gap:28px;
  max-width:1360px; margin-inline:auto; padding-inline:24px;
}
.hdr__logo{ display:flex; align-items:center; min-height:44px; }
.hdr__logo img{ width:132px; }
.hdr__nav{ margin-left:auto; }
.hdr__nav ul{ display:flex; gap:26px; }
.hdr__nav a{
  white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--navy);
  padding:6px 0; border-bottom:2px solid transparent;
}
.hdr__nav a:hover{ border-bottom-color:var(--gold); }
.hdr__side{ display:flex; align-items:center; gap:14px; }
.hdr__tel{ text-align:right; line-height:1.25; }
.hdr__tel span{ font-size:10px; color:var(--ink-mute); letter-spacing:.04em; }
.hdr__tel a{
  white-space:nowrap;
  display:block; font-family:var(--gothic); font-weight:700;
  font-size:21px; color:var(--navy); letter-spacing:.01em;
}
.hdr__login{
  font-size:12px; font-weight:700; color:var(--navy);
  border:1.5px solid var(--navy); border-radius:999px; padding:7px 14px;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.hdr__login:hover{ background:var(--navy); color:#fff; }
.hdr__login .ico{ width:14px; height:14px; }
.hdr__cta{ padding:13px 20px; font-size:14px; }

/* ハンバーガー */
.burger{
  display:none; width:44px; height:44px; background:none; border:0;
  cursor:pointer; position:relative; margin-left:auto;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--navy);
  transition:transform .25s, opacity .25s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ドロワー */
.drawer{
  position:fixed; inset:var(--head) 0 0 0; z-index:99;
  background:var(--paper); padding:32px 24px 120px;
  overflow-y:auto; display:none;
}
.drawer[data-open="true"]{ display:block; }
.drawer__login{ margin-bottom:28px; }
.drawer__login a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); color:#fff; font-weight:700;
  padding:16px; border-radius:var(--r);
}
.drawer nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:17px 2px; border-bottom:1px solid var(--line);
  font-size:16px; font-weight:500; color:var(--navy);
}
.drawer nav a::after{ content:"→"; color:var(--gold-ink); }
.drawer__tel{
  margin-top:32px; text-align:center; padding:24px;
  background:var(--mist); border-radius:var(--r);
}
.drawer__tel span{ font-size:12px; color:var(--ink-mute); }
.drawer__tel a{
  display:block; font-family:var(--gothic); font-weight:700;
  font-size:28px; color:var(--navy); margin-top:4px;
}

/* ============================================================
   お知らせバー（夏期講習）
   ============================================================ */
.ribbon{ background:var(--navy-deep); color:#fff; }
.ribbon a{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:9px 24px; font-size:13px; font-weight:500;
}
.ribbon b{
  font-family:var(--gothic); font-weight:700; color:var(--gold);
  letter-spacing:.1em; font-size:12px;
}
.ribbon span{ color:var(--gold-lt); }
.ribbon a:hover span{ text-decoration:underline; }

/* ============================================================
   ヒーロー — 全画面写真 × ガラス
   スクリムは数値で決めた: 最も明るい写真の上でも
   ガラス rgba(6,26,60,.62) なら白文字 6.8、金ラベル 4.4 を確保できる。
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;   /* 帯は絶対配置にしない。フローで底に置く */
  background:var(--navy-deep);           /* 画像が来る前も暗い。文字が消えない */
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  /* 主役の子は写真の左寄り（横25〜45%）にいる。中央(50%)で cover すると
     縦長のスマホでは主役が切れて右の余白ばかり映る。左寄りに寄せて主役を出す。 */
  object-position:38% 42%;
  animation:kenburns 24s ease-out forwards;
}
@keyframes kenburns{
  from{ transform:scale(1.10); }
  to  { transform:scale(1.00); }
}
@media (prefers-reduced-motion:reduce){ .hero__bg img{ animation:none; } }

/* 写真そのものにも紺のスクリム。左が濃く、右へ抜ける */
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg,
      rgba(6,26,60,var(--scrim-l)) 0%,
      rgba(6,26,60,var(--scrim-m)) 46%,
      rgba(6,26,60,var(--scrim-r)) 100%),
    linear-gradient(180deg,
      rgba(6,26,60,var(--scrim-top)) 0%, rgba(6,26,60,0) 26%);
}

.hero__in{
  position:relative; z-index:1;
  flex:1; display:flex;
  /* 下端のガラス帯を基準に据える。画面が高くなるほど上の余白が増え、
     ガラスは下寄りに落ち着く。中央寄せだと背の高い画面で宙に浮く。 */
  align-items:flex-end;
  width:100%; max-width:1360px; margin-inline:auto;
  padding:calc(var(--head) + 32px) 24px 88px;
}

/* ガラス板 */
.glass{
  max-width:660px;
  background:rgba(6,26,60,var(--glass-a));
  -webkit-backdrop-filter:blur(26px) saturate(150%);
          backdrop-filter:blur(26px) saturate(150%);
  /* 縁は金の細線。紺一色を崩す */
  border:1px solid rgba(200,162,90,.42);
  border-radius:12px;
  padding:44px 44px 40px;
  box-shadow:0 30px 70px -44px rgba(0,0,0,.6);
}
.hero__eyebrow{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.2em; color:var(--gold-lt); margin-bottom:20px;
}
/* 見出し */
.hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,44px); line-height:1.42; color:#fff;
  letter-spacing:0; margin-bottom:26px;
}
.hero h1 em{ font-style:normal; color:var(--gold-lt); }

/* 入れ替わり。
   2つの見出しは「どちらも2行」に揃えてある。だから同じセルに重ねても
   空白は残らず、枠の高さも動かない。
   ※ 行数を変えると枠が伸び縮みする。文言を変えるときは2行を守ること。 */
.rot{ display:grid; }
.rot__i{ grid-area:1 / 1; pointer-events:none; }

/* 行が下から流れ込み、上へ流れ去る。 */
.ln{ display:block; overflow:hidden; }
.ln i{
  display:block; font-style:normal;
  transform:translateY(112%);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.rot__i.is-on .ln i{ transform:none; }
.rot__i.is-out .ln i{ transform:translateY(-112%); }
.rot__i.no-anim .ln i{ transition:none; }

/* 行ごとに少しずつ遅らせる */
.ln:nth-child(1) i{ transition-delay:0s; }
.ln:nth-child(2) i{ transition-delay:.10s; }
.ln:nth-child(3) i{ transition-delay:.20s; }

@media (prefers-reduced-motion:reduce){
  .ln i{ transform:none; transition:none; }
  .rot__i:not(.is-on){ visibility:hidden; }
}
.hero__lead{ color:rgba(255,255,255,.82); font-size:16px; margin-bottom:30px; max-width:44ch; }
/* リードも見出しと一緒に切り替える。行数を揃えてあるので枠は動かない。 */
.rot--lead .ln{ overflow:hidden; }
.rot--lead .ln i{ transition-delay:.16s; }   /* 見出しのあとに続いて流れる */
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ガラスの帯（数字） */
.hero__strip{
  --strip-num:23px;                     /* 数字のサイズ */
  --strip-ja:calc(var(--strip-num) * .82);   /* 和文（小1〜高3）。実測でこの倍率 */
  position:relative; z-index:1; margin-top:auto;   /* フローで底に */
  /* 紺一色にしない。ここは白いすりガラス＋紺文字にして、面を切り替える。 */
  background:rgba(255,255,255,var(--strip-a));
  -webkit-backdrop-filter:blur(22px) saturate(160%);
          backdrop-filter:blur(22px) saturate(160%);
  border-top:1px solid rgba(200,162,90,.55);   /* 金の細線 */
}
.hero__strip ul{
  max-width:1360px; margin-inline:auto; padding:20px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  /* 列をまたいで文字のベースラインを揃える。
     これが無いと、数字(19px)と和文(14px)で足元が2pxずれる。 */
  align-items:baseline;
}
.hero__strip li{
  display:flex; align-items:baseline; gap:9px; color:var(--navy);
  padding-left:14px; border-left:1px solid rgba(10,42,94,.14);
}
.hero__strip li:first-child{ border-left:0; padding-left:0; }
.hero__strip b{
  /* 帯の下は写真。暗い部分が透けるので金は沈む（実測2.8）。ここは紺。

     4項目とも「本文フォント」で統一する。
     欧文フォント(Century Gothic Std)は日本語のグリフを持たないので、
     「小1〜高3」を入れると そこだけ別フォントに落ちて字形も高さも崩れる。
     数字だけ欧文にして漢字を添え字にする、といった小細工もしたが、
     結局そこだけ別物に見える。**混ぜないのが一番きれい。** */
  font-family:var(--sans); font-weight:700; color:var(--navy);
  font-size:var(--strip-num);
  line-height:1; flex:none;
  letter-spacing:.01em;
  font-feature-settings:"palt" 1;   /* 和文の字間を詰める */
}
/* 同じフォント・同じ px でも、和文の字面は数字より大きい（実測 22px vs 17px）。
   これは和文フォントの構造。倍率とずらしは実測で出した値:
     0.82倍 → 字の高さが数字と完全一致（17px）
     -0.06em → 字面の底が数字の足元に揃う（差0.9px）
   ※ font-size は --strip-num に連動させること。固定pxにすると
     SPで数字だけ縮んだときに取り残される。 */
.hero__strip b.ja{
  font-size:var(--strip-ja);
  transform:translateY(-.07em);   /* 和文は字面の底がベースラインより下に出る */
  display:inline-block;
}
.hero__strip span{ font-size:12.5px; color:var(--navy); font-weight:500; }
.hero__strip span small{
  display:block; margin-top:1px; font-size:10.5px; font-weight:400;
  color:var(--navy-soft); letter-spacing:.02em;
}
/* 「中学生のみ」等の付記。下にぶら下げず、主説明の後にインラインで小さく続ける。
   ぶら下げると項目ごとに高さが変わり、SPの2列で数字のベースラインがずれる。 */
.hero__strip .note{
  font-style:normal; font-size:10.5px; font-weight:400;
  color:var(--navy-soft); letter-spacing:.02em; margin-left:6px; white-space:nowrap;
}

/* スクロールキュー */
.cue{
  position:absolute; z-index:2; left:50%; bottom:120px; transform:translateX(-50%);
  width:1px; height:52px; background:rgba(255,255,255,.35); overflow:hidden;
}
.cue::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(100%); }
}
@media (prefers-reduced-motion:reduce){ .cue{ display:none; } }

/* ============================================================
   ① 学年で選ぶ
   ============================================================ */
.grades{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grade{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:36px 28px 28px; text-align:center;
  transition:border-color .2s, box-shadow .2s, transform .2s;
  display:flex; flex-direction:column; align-items:center;
}
.grade:hover{
  border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 12px 30px -18px rgba(10,42,94,.35);
}
.grade img{ height:88px; width:auto; margin-bottom:22px; }
.grade__t{
  font-family:var(--serif); font-size:22px; color:var(--navy); margin-bottom:8px;
}
.grade__d{ font-size:14px; color:var(--ink-mute); line-height:1.8; margin-bottom:20px; }
.grade .tlink{ margin-top:auto; }
@media (prefers-reduced-motion:reduce){ .grade:hover{ transform:none; } }

/* 学年カードの下の「学研教室」案内バナー。
   3枚のカードとは別の帯として、無学年方式＝戻って復習したい層に届ける。 */
.pickup{
  display:flex; align-items:center; gap:24px;
  margin-top:28px; padding:24px 28px;
  background:var(--gold-wash); border:1px solid var(--gold-lt);
  border-radius:10px; text-decoration:none;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.pickup:hover{
  border-color:var(--gold);
  box-shadow:0 8px 24px rgba(200,162,90,.16);
  transform:translateY(-2px);
}
.pickup__body{ flex:1; }
.pickup__k{
  font-weight:700; color:var(--navy); font-size:15px; margin-bottom:8px;
  letter-spacing:.01em;
}
.pickup__k::before{
  content:"おすすめ"; display:inline-block; vertical-align:middle;
  margin-right:10px; padding:2px 9px; border-radius:3px;
  background:var(--gold); color:var(--navy);
  font-size:11px; font-weight:700; letter-spacing:.04em;
}
.pickup__d{ font-size:13.5px; color:var(--ink-mute); line-height:1.85; }
.pickup__d b{ color:var(--gold-ink); font-weight:700; }
.pickup__price{ margin-top:10px; font-size:14px; color:var(--navy); }
.pickup__price b{ font-family:var(--gothic); font-size:22px; color:var(--gold-big); }
.pickup__price small{ font-size:11.5px; color:var(--ink-mute); margin-left:2px; }
.pickup__go{
  flex:none; align-self:center;
  font-size:14px; font-weight:700; color:var(--gold-ink); white-space:nowrap;
}
@media (max-width:680px){
  .pickup{ flex-direction:column; align-items:flex-start; gap:16px; padding:22px; }
  .pickup__go{ align-self:flex-end; }
}
@media (prefers-reduced-motion:reduce){ .pickup:hover{ transform:none; } }

/* 学年カードの料金 */
.grade__p{
  font-family:var(--gothic); font-weight:700; color:var(--navy);
  font-size:15px; margin-bottom:2px; display:flex; align-items:baseline; gap:2px;
}
.grade__p b{ font-size:28px; line-height:1; }
.grade__p small{ font-size:11px; font-weight:400; color:var(--ink-mute); margin-left:4px; }
.grade__note{ font-size:11px; color:var(--ink-mute); margin-bottom:18px; }

/* ============================================================
   ③ 料金
   ============================================================ */
.ptab{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.ptab table{
  width:100%; min-width:640px; border-collapse:collapse;
  border:1px solid var(--line); background:var(--paper);
}
.ptab caption{
  text-align:left; font-size:12px; color:var(--ink-mute);
  padding-bottom:10px;
}
.ptab th, .ptab td{
  padding:16px 14px; text-align:center; border-bottom:1px solid var(--line);
  font-size:14px;
}
.ptab thead th{
  background:var(--navy); color:#fff; font-weight:700; font-size:13px;
  border-bottom:0; line-height:1.4;
}
.ptab thead th small{
  display:block; font-weight:400; font-size:11px; color:var(--gold-lt); margin-top:2px;
}
.ptab tbody th{
  text-align:left; color:var(--navy); font-weight:700; white-space:nowrap;
  background:var(--mist);
}
.ptab tbody th em{
  display:inline-block; font-style:normal; margin-left:8px;
  font-family:var(--gothic); font-weight:700; font-size:10px; letter-spacing:.08em;
  color:var(--gold-ink); border:1px solid var(--gold); border-radius:2px;
  padding:2px 6px; vertical-align:1px;
}
.ptab td{ font-family:var(--gothic); font-weight:700; color:var(--ink); }
.ptab__hl td{ background:var(--gold-wash); color:var(--navy); }
.ptab tbody tr:last-child th, .ptab tbody tr:last-child td{ border-bottom:0; }

.pnote{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 28px;
  font-size:13px; color:var(--ink-mute);
}
.pnote li{ display:flex; align-items:baseline; gap:8px; }
.pnote b{
  font-size:11px; font-weight:700; color:var(--gold-ink);
  font-family:var(--sans); white-space:nowrap;
}

/* ============================================================
   ② 80分の授業 ／ クリア＋Plus
   ============================================================ */
.lesson{ background:var(--navy); color:#fff; }
.lesson .head{ text-align:center; }
.lesson .head__ja{ color:#fff; }
.lesson .head__en{ color:var(--gold); }        /* 紺地では明るい金。5.83 */
.lesson .head__note{ color:rgba(255,255,255,.78); margin-inline:auto; }
.lesson .head__note em.only{
  display:block; margin-top:8px; font-style:normal;
  font-size:13px; color:var(--gold-lt);
}

/* ---- 60分 / 20分 の中身 ----
   PDFと同じく「個別授業（60分）」「プリント演習（20分）」の2枚。
   以前ここに比率バーを別途置いていたが、カードの見出しと同じ文言を
   二重に言うことになったので廃止した。 */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:64px; }
.split__c{
  min-width:0;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);
  overflow:hidden;                 /* 見出し帯を角丸に収める */
}
.split__c--gold{ border-color:rgba(200,162,90,.55); background:rgba(200,162,90,.09); }

/* 見出し帯（PDFの黒帯にあたる） */
.split__h{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 24px;
  background:rgba(255,255,255,.10);
}
.split__c--gold .split__h{ background:var(--gold); color:var(--navy-deep); }

/* 見出しは「1行」に保つ。注記を下に折ると、その1行ぶんだけ帯が高くなり、
   隣のカードと頭の高さが揃わなくなる（実際に揃わなかった）。
   注記はインラインの札にして、行を増やさない。 */
.split__t{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0;
  font-weight:700; font-size:17px; color:#fff; line-height:1.35;
}
.split__c--gold .split__t{ color:var(--navy-deep); }
.split__t small{
  flex:none;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 7px; border-radius:2px; line-height:1.4;
  color:var(--navy-deep); background:var(--gold-lt);
}
.split__c--gold .split__t small{
  color:var(--gold-lt); background:var(--navy-deep);
}
.split__m{
  display:flex; align-items:baseline; gap:2px; flex:none;
  font-family:var(--gothic); font-weight:700; font-size:13px; color:#fff;
}
.split__c--gold .split__m{ color:var(--navy-deep); }
.split__m b{ font-size:26px; line-height:1; }

.split ul{ padding:6px 24px 20px; }
.split li{
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.09);
  font-size:13px; line-height:1.8; color:rgba(255,255,255,.72);
}
.split li:last-child{ border-bottom:0; padding-bottom:0; }
.split li b{ display:block; font-size:14px; color:#fff; margin-bottom:2px; }

/* ---- クリア＋Plus ---- */
.plus{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(200,162,90,.45);
  border-radius:12px;
  padding:40px 36px 36px;
}
.plus__head{ text-align:center; margin-bottom:40px; }
.plus__tag{
  display:inline-block;
  font-family:var(--gothic); font-weight:700; font-size:10px; letter-spacing:.16em;
  color:var(--navy-deep); background:var(--gold-lt);
  padding:5px 12px; border-radius:2px; margin-bottom:14px;
}
.plus__name{
  font-family:var(--gothic); font-weight:700; font-size:clamp(26px,3vw,36px);
  color:#fff; line-height:1; margin-bottom:16px;
}
.plus__name span{ color:var(--gold-lt); margin:0 2px; }
.plus__copy{
  font-family:var(--serif); font-size:clamp(18px,2.2vw,26px); line-height:1.5;
  color:var(--gold-lt); margin-bottom:10px;
}
.plus__sub{ font-size:14px; color:rgba(255,255,255,.72); }

/* 4ステップの流れ */
.fl{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  gap:0 8px; align-items:stretch;
}
.fl__s{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgba(6,26,60,.5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px; padding:22px 16px 18px;
}
.fl__ico{ width:64px; height:64px; margin-bottom:14px; flex:none; }
.fl__b{ display:flex; flex-direction:column; flex:1; width:100%; }
.fl__n{
  font-family:var(--gothic); font-weight:700; font-size:10px;
  letter-spacing:.14em; color:var(--gold); margin-bottom:6px;
}
.fl__t{ font-size:15px; font-weight:700; color:#fff; margin-bottom:6px; line-height:1.5; }
.fl__d{ font-size:12.5px; line-height:1.75; color:rgba(255,255,255,.72); margin-bottom:auto; }
/* 「くり返し！」の金の札。ステップ3・4だけに付く */
.fl__chip{
  margin-top:14px;
  background:var(--gold); color:var(--navy-deep);
  font-size:11.5px; font-weight:700; line-height:1.5;
  padding:8px 10px; border-radius:4px;
}

/* 矢印 */
.fl__ar{ display:flex; align-items:center; justify-content:center; }
.fl__ar svg{ width:20px; height:20px; }

@media (prefers-reduced-motion:reduce){ .fl__s{ transition:none; } }

/* ============================================================
   ③ C.L.E.A.R. スパイン  ← 見せ場
   ============================================================ */
.clear{ background:var(--gold-wash); }
.clear__lead{
  text-align:center; max-width:60ch; margin:0 auto 12px;
  color:var(--ink-mute); font-size:15px;
}
.clear__word{
  text-align:center; font-family:var(--gothic); font-weight:700;
  font-size:clamp(13px,1.6vw,15px); letter-spacing:.4em; color:var(--gold-ink);
  margin-bottom:52px;
}
.spine{ border-top:1px solid var(--gold-lt); }
.spine li{
  /* 文字 / 名前 / 説明 の3列。右側を空けない。 */
  display:grid; grid-template-columns:96px 260px 1fr;
  gap:28px; align-items:center;
  padding:26px 8px; border-bottom:1px solid var(--gold-lt);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.spine li.is-in{ opacity:1; transform:none; }
.spine__l{
  /* C.L.E.A.R. の5文字は字幅が倍違う（L=21px / C=42px）。
     左揃えだと光学中心が8.5pxばらつく。グリッドのセルの中央に置く。 */
  display:flex; align-items:center; justify-content:center;
  font-family:var(--gothic); font-weight:700;
  font-size:clamp(40px,5vw,62px); line-height:1; color:var(--gold-big);
  font-feature-settings:"kern" 0;   /* 1文字なのでカーニングは不要 */
}
/* Century Gothic Std は字ごとにサイドベアリングが違い、中央寄せしても
   L/R が右に、A が左にわずかに寄る。実測したズレを打ち消す。
   （値は 1440px 実測: L +2.0 / E +0.5 / R +1.5 / A -1.0 / C -0.5 px）
   font-size に比例させるため em で指定する。 */
.spine li:nth-child(1) .spine__l{ transform:translateX( .008em); }  /* C */
.spine li:nth-child(2) .spine__l{ transform:translateX(-.032em); }  /* L */
.spine li:nth-child(3) .spine__l{ transform:translateX(-.008em); }  /* E */
.spine li:nth-child(4) .spine__l{ transform:translateX( .016em); }  /* A */
.spine li:nth-child(5) .spine__l{ transform:translateX(-.024em); }  /* R */
.spine__b{ display:flex; flex-direction:column; gap:5px; }
.spine__ja{ font-family:var(--serif); font-size:clamp(19px,2.2vw,25px); color:var(--navy); }
.spine__en{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.16em; color:var(--gold-ink);
}
.spine__d{
  font-size:15px; line-height:1.9; color:var(--ink-mute);
  padding-left:28px; border-left:1px solid var(--gold-lt);
}
.clear__foot{ text-align:center; margin-top:44px; }
@media (prefers-reduced-motion:reduce){
  .spine li{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   ④ 選ばれる3つの理由
   ============================================================ */
.reasons{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.reason__n{
  font-family:var(--gothic); font-weight:700; font-size:13px;
  letter-spacing:.16em; color:var(--gold-ink); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.reason__n::after{ content:""; flex:1; height:1px; background:var(--line); }
.reason__t{
  font-family:var(--serif); font-size:20px; line-height:1.6;
  color:var(--navy); margin-bottom:14px;
}
.reason__d{ font-size:14px; color:var(--ink-mute); line-height:1.95; }

/* ============================================================
   ⑤ 組み合わせる講座 / ⑥ マナビー
   ============================================================ */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile{
  display:flex; align-items:center; gap:18px;
  border:1px solid var(--line); border-radius:var(--r); padding:22px;
  background:var(--paper); transition:border-color .2s;
}
.tile:hover{ border-color:var(--gold); }
.tile img{ width:74px; height:auto; flex:none; }
.tile__t{
  /* <span> なので display 指定が無いとインラインのまま。
     説明文（.tile__d）が同じ行に続いて読めなくなる。 */
  display:flex; align-items:center; gap:6px;
  font-weight:700; font-size:15px; color:var(--navy); line-height:1.5;
}
.tile__d{ font-size:13px; color:var(--ink-mute); margin-top:3px; }

.brands{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.brand{
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:22px; text-align:center; transition:border-color .2s, transform .2s;
  /* 3枚でロゴの大きさ・縦位置・タイトル位置を揃える。
     画像エリアを固定高にして、縦横比の違う学研ロゴも同じ枠に収める。
     タイトルはカード下端に固定（画像が低くても浮かない）。 */
  display:flex; flex-direction:column;
}
.brand__pic{
  height:240px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.brand__pic img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; border-radius:2px; margin:0;
}
.brand__t{ margin-top:auto; }
.brand:hover{ border-color:var(--gold); transform:translateY(-3px); }
.brand__t{ font-size:14px; font-weight:700; color:var(--navy); }
@media (prefers-reduced-motion:reduce){ .brand:hover{ transform:none; } }

/* ============================================================
   ⑦ 夏期講習 / ⑧ くりとも割
   ============================================================ */
.promo{ display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:center; }
.promo__pic img{ width:320px; border-radius:var(--r); box-shadow:0 20px 44px -26px rgba(10,42,94,.45); }
.promo__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }

.kuritomo{ display:block; border-radius:var(--r); overflow:hidden; }
.kuritomo img{ width:100%; transition:transform .4s; }
.kuritomo:hover img{ transform:scale(1.02); }
@media (prefers-reduced-motion:reduce){ .kuritomo:hover img{ transform:none; } }

/* ============================================================
   ⑨ 教室案内
   ============================================================ */
.schools{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.school{
  border:1px solid var(--line); border-radius:var(--r);
  padding:34px; background:var(--paper);
}
.school__t{
  font-family:var(--serif); font-size:22px; color:var(--navy);
  padding-bottom:16px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
}
.school__t::before{
  content:""; width:3px; height:20px; background:var(--gold);
}
.school dl{ display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:14px; }
.school dt{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.1em; color:var(--gold-ink); padding-top:4px;
}
.school dd{ color:var(--ink); }
.school dd a{ font-family:var(--gothic); font-weight:700; font-size:18px; color:var(--navy); }
.school dd a:hover{ color:var(--gold-ink); }

/* ============================================================
   ⑩ お知らせ
   ============================================================ */
.news{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.news__i{
  display:grid; grid-template-columns:112px 1fr; gap:20px;
  align-items:center; padding:18px;
  border:1px solid var(--line); border-radius:var(--r);
  transition:border-color .2s;
}
.news__i:hover{ border-color:var(--gold); }
.news__i img{ width:112px; height:108px; object-fit:cover; border-radius:2px; }
.news__d{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.08em; color:var(--gold-ink); margin-bottom:6px;
}
.news__t{ font-size:14px; line-height:1.75; color:var(--navy); font-weight:500; }
.news__more{ text-align:center; margin-top:40px; }

/* ============================================================
   ⑪ 最終CTA
   ============================================================ */
/* ===== マナビー（習い事）ページ ===== */
/* スクリーンリーダー専用テキスト（視覚的には隠す） */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* 画像＋本文を左右に並べる。次のブランドで左右を入れ替える（.mn--rev）。 */
.mn{
  display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:44px;
  align-items:center;
}
.mn--rev{ grid-template-columns:1fr minmax(0,440px); }
.mn--rev .mn__pic{ order:2; }
.mn__pic{
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:28px; display:flex; align-items:center; justify-content:center;
  min-height:240px;
}
.mn__pic img{ max-width:100%; max-height:220px; width:auto; height:auto; object-fit:contain; }
.mn__en{
  font-family:var(--gothic); font-size:12px; letter-spacing:.18em;
  color:var(--gold-ink); margin-bottom:8px;
}
.mn__t{
  font-family:var(--serif); font-size:26px; font-weight:600; color:var(--navy);
  margin-bottom:6px; line-height:1.3;
}
.mn__note{
  display:inline-block; margin-left:10px; padding:2px 9px; border-radius:3px;
  background:var(--gold); color:var(--navy); font-size:11px; font-weight:700;
  letter-spacing:.03em; vertical-align:middle; font-family:var(--sans);
}
.mn__age{ font-size:13px; color:var(--ink-mute); margin-bottom:16px; }
.mn__d{ font-size:15px; color:var(--ink); line-height:1.9; margin-bottom:22px; }
.mn__d strong{ color:var(--gold-ink); font-weight:700; }
/* 料金リスト（course の ocard__l と同じ見た目） */
.mn__price{ max-width:420px; }
.mn__price > div{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); gap:16px;
}
.mn__price > div:last-child{ border-bottom:0; }
.mn__price dt{ font-size:14px; color:var(--ink); font-weight:500; }
.mn__price dt span{ display:block; font-size:11px; color:var(--ink-mute); font-weight:400; }
.mn__price dd{
  font-family:var(--gothic); font-weight:700; font-size:16px; color:var(--navy);
  white-space:nowrap;
}
.mn__price > div.is-hl dd{ color:var(--gold-ink); }
.mn__link{ margin-top:18px; }
.mn__ext{ font-size:.85em; }
@media (max-width:760px){
  .mn, .mn--rev{ grid-template-columns:1fr; gap:24px; }
  .mn--rev .mn__pic{ order:0; }
  .mn__t{ font-size:23px; }
}



/* ===== 復元: policy/study/flow/contact 固有CSS（2026-08-08版から移植）===== */
/* 教育方針：ご挨拶（policy.html #a1）
   読み物なので1カラムの読みやすい幅に絞る。文字は黒に近い ink。
   強調（塾名の由来・思考力/判断力/表現力）だけ明朝＋gold-ink。
   gold-ink は白地で 5.00、AA を満たす。装飾の gold は使わない。 */
.greet{ max-width:62ch; margin:0 auto; }
.greet__body p{
  font-size:16px; line-height:2.05; color:var(--ink);
  margin-bottom:1.55em; text-align:justify;
  text-justify:inter-character;
}
.greet__body p:last-child{ margin-bottom:0; }
.greet em{
  font-style:normal; font-family:var(--serif); font-weight:400;
  color:var(--gold-ink);
}
.greet__sign{ margin-top:44px; padding-top:26px; border-top:1px solid var(--line); text-align:right; }
.greet__sign span{
  display:block; font-family:var(--gothic); font-weight:700;
  font-size:11px; letter-spacing:.18em; color:var(--ink-mute); margin-bottom:8px;
}
.greet__sign b{
  font-family:var(--serif); font-weight:400;
  font-size:26px; letter-spacing:.1em; color:var(--navy);
}
@media (max-width:560px){
  .greet__body p{ font-size:15.5px; line-height:1.95; text-align:left; }
  .greet__sign b{ font-size:23px; }
}
/* ============================================================
   入塾の流れ（flow.html）— 縦タイムライン
   ============================================================ */
.flow{ max-width:660px; margin:8px auto 0; }
.flow__step{
  position:relative; display:grid; grid-template-columns:52px 1fr; gap:26px;
  padding-bottom:40px;
}
/* 番号どうしをつなぐ縦線（最後の手前まで） */
.flow__step:not(:last-child)::before{
  content:""; position:absolute; left:25px; top:56px; bottom:0; width:2px;
  background:var(--line);
}
.flow__no{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; position:relative; z-index:1;
  background:var(--navy); color:#fff;
  font-family:var(--serif); font-size:22px; line-height:1;
  box-shadow:0 8px 20px -10px rgba(10,42,94,.6);
}
.flow__b{ padding-top:3px; min-width:0; }
.flow__en{
  font-family:var(--gothic); font-weight:700; font-size:11px; letter-spacing:.18em;
  color:var(--gold-ink); margin-bottom:6px;
}
.flow__t{ font-family:var(--serif); font-size:20px; color:var(--navy); margin-bottom:10px; }
.flow__d{ font-size:15px; line-height:1.9; color:var(--ink-mute); max-width:52ch; }
.flow__d em{ font-style:normal; font-weight:700; color:var(--gold-ink); }
.flow__foot{
  max-width:660px; margin:8px auto 0; text-align:center;
  font-size:14px; color:var(--ink-mute);
}
@media (max-width:560px){
  .flow__step{ grid-template-columns:44px 1fr; gap:18px; padding-bottom:34px; }
  .flow__step:not(:last-child)::before{ left:21px; top:48px; }
  .flow__no{ width:44px; height:44px; font-size:19px; }
  .flow__t{ font-size:18px; }
}
/* ============================================================
   学習方法（study.html）
   ============================================================ */
/* 個別 × グループ × 映像 の帯 */
.combo{
  display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:center;
  margin:34px 0 8px;
}
.combo span{
  font-family:var(--serif); font-size:19px; color:var(--navy);
  padding:10px 22px; border:1px solid var(--gold); border-radius:999px;
  background:var(--gold-wash);
}
.combo i{ font-style:normal; color:var(--gold-ink); font-weight:700; font-size:16px; }
@media (max-width:560px){
  .combo span{ font-size:17px; padding:9px 18px; }
}
/* ============================================================
   お問い合わせ（contact.html）
   フォームは SSGform に POST。name属性の値がそのまま通知メールの
   見出しになるので、日本語で分かりやすく付けてある。
   ============================================================ */
.contact__grid{ display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; }
.contact__main{ min-width:0; }
.field{ margin-bottom:24px; }
.field--2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.field--2 > div{ min-width:0; }
.field__l{
  display:block; margin-bottom:9px;
  font-size:14px; font-weight:700; color:var(--navy); letter-spacing:.02em;
}
.req{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:4px;
  font-family:var(--sans); font-style:normal; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; color:#fff; background:var(--gold-ink); vertical-align:middle;
}
/* 入力欄。iOSでズームさせないため font-size は16px を死守。高さ48px。 */
.ctrl{
  width:100%; min-height:48px; padding:12px 14px;
  font-family:var(--sans); font-size:16px; color:var(--ink); line-height:1.6;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  transition:border-color .16s, box-shadow .16s; -webkit-appearance:none; appearance:none;
}
.ctrl::placeholder{ color:var(--ink-mute); opacity:1; }
/* white で 5.6、AA */
.ctrl:focus{
  outline:none; border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(200,162,90,.35);
}
/* ラジオ・チェックの群れ */
.opts{ display:flex; flex-wrap:wrap; gap:10px; }
.opt{
  display:inline-flex; align-items:center; gap:8px;
  min-height:48px; padding:0 16px;
  border:1.5px solid var(--line); border-radius:var(--r);
  font-size:15px; color:var(--ink); cursor:pointer;
  transition:border-color .16s, background-color .16s;
}
.opt input{ width:18px; height:18px; accent-color:var(--navy); margin:0; }
.opt:hover{ border-color:var(--gold); }
.opt:has(input:checked){ border-color:var(--navy); background:var(--mist); }
.opt:has(input:focus-visible){ box-shadow:0 0 0 3px rgba(200,162,90,.35); }
/* 同意 */
.agree{
  display:flex; gap:12px; align-items:flex-start;
  margin:4px 0 28px; padding:18px 20px;
  background:var(--mist); border-radius:var(--r);
  font-size:14px; line-height:1.85; color:var(--ink); cursor:pointer;
}
.agree input{ width:20px; height:20px; margin-top:2px; accent-color:var(--navy); flex:0 0 auto; }
.agree .req{ margin-left:6px; }
.cform__submit .btn{ width:100%; min-height:54px; }
.cform__note{ margin-top:14px; font-size:13px; color:var(--ink-mute); text-align:center; }
/* スパム対策のおとり。人には見せない。 */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* 右カラム：電話・教室 */
.contact__aside{ display:flex; flex-direction:column; gap:16px; position:sticky; top:calc(var(--head) + 16px); }
.cbox{ padding:24px 22px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.cbox__en{ font-family:var(--gothic); font-weight:700; font-size:11px; letter-spacing:.2em; color:var(--gold-ink); margin-bottom:8px; }
.cbox__h{ font-family:var(--serif); font-size:18px; color:var(--navy); margin-bottom:12px; }
.cbox__tel{ display:block; font-family:var(--gothic); font-weight:700; font-size:27px; color:var(--navy); letter-spacing:.02em; }
.cbox__sub{ font-size:12px; color:var(--ink-mute); margin-top:4px; }
.cbox__room{ font-size:13.5px; line-height:1.7; color:var(--ink-mute); margin-top:14px; }
.cbox__room:first-of-type{ margin-top:0; }
.cbox__room b{ display:block; color:var(--navy); font-size:14px; margin-bottom:2px; }
.cbox__room a{ color:var(--gold-ink); font-weight:700; }
/* 確認モーダル */
.cmodal{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(6,26,60,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.cmodal[hidden]{ display:none; }
.cmodal__box{
  width:min(520px,100%); max-height:86vh; overflow:auto;
  background:#fff; border-radius:14px; padding:30px 28px;
  box-shadow:0 24px 60px rgba(6,26,60,.35);
}
.cmodal__h{ font-family:var(--serif); font-size:20px; color:var(--navy); margin-bottom:18px; }
.cmodal__list{ margin:0 0 24px; }
.cmodal__list div{ padding:12px 0; border-bottom:1px solid var(--line); }
.cmodal__list dt{ font-size:12px; font-weight:700; color:var(--ink-mute); margin-bottom:4px; }
.cmodal__list dd{ margin:0; font-size:15px; color:var(--ink); line-height:1.7; white-space:pre-wrap; word-break:break-word; }
.cmodal__cta{ display:flex; gap:12px; justify-content:flex-end; }
@media (max-width:900px){
  .contact__grid{ grid-template-columns:1fr; gap:32px; }
  .contact__aside{ position:static; }
}
@media (max-width:560px){
  .field--2{ grid-template-columns:1fr; gap:24px; }
  .cmodal__cta{ flex-direction:column-reverse; }
  .cmodal__cta .btn{ width:100%; }
}

.close{ background:var(--navy-deep); color:#fff; text-align:center; padding:100px 0; }
.close__en{
  font-family:var(--gothic); font-weight:700; font-size:12px;
  letter-spacing:.22em; color:var(--gold); margin-bottom:16px;
}
.close h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.4vw,40px); line-height:1.5; margin-bottom:18px;
}
.close p{ color:rgba(255,255,255,.72); font-size:15px; margin-bottom:36px; }
.close__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.close__tel{ margin-top:30px; font-size:13px; color:rgba(255,255,255,.6); }
.close__tel a{
  font-family:var(--gothic); font-weight:700; font-size:26px;
  color:#fff; display:block; margin-top:2px;
}

/* ============================================================
   フッター
   ============================================================ */
.ftr{ background:var(--navy); color:rgba(255,255,255,.8); padding:72px 0 0; }
.ftr__top{ display:grid; grid-template-columns:1.1fr 2fr; gap:56px; }
.ftr__logo img{ width:150px; margin-bottom:20px; }
.ftr__addr{ font-size:13px; line-height:1.9; }
.ftr__addr + .ftr__addr{ margin-top:16px; }
.ftr__addr b{ display:block; color:#fff; font-weight:700; margin-bottom:2px; }
.ftr__nav{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.ftr__nav .ftr__h{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.12em; color:var(--gold); margin-bottom:14px;
}
.ftr__nav a{ display:flex; align-items:center; min-height:44px; font-size:13px; }
.ftr__nav a:hover{ color:var(--gold); }
.ftr__bar{
  margin-top:56px; border-top:1px solid rgba(255,255,255,.14);
  padding:22px 0; display:flex; justify-content:space-between;
  align-items:center; gap:16px; flex-wrap:wrap;
  font-size:12px; color:rgba(255,255,255,.55);
}
.ftr__bar nav{ display:flex; gap:20px; }
.ftr__bar nav a{ display:flex; align-items:center; min-height:44px; }   /* タップ領域 */
.ftr__bar a:hover{ color:var(--gold); }

/* ============================================================
   SP 固定CTAバー
   ============================================================ */
.dock{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:97;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid rgba(200,162,90,.5);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.dock a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:15px 8px; border-radius:var(--r);
  font-size:14px; font-weight:700; line-height:1;
}
.dock__tel{ border:1.5px solid var(--navy); color:var(--navy); }
.dock__cta{ background:var(--gold); color:var(--navy); }
.dock .ico{ width:17px; height:17px; }

/* ============================================================
   スクロール時のふわっと（控えめに）
   ============================================================ */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1420px){
  .hdr__nav ul{ gap:16px; }
  .hdr__tel{ display:none; }
}
@media (max-width:1180px){
  .hdr__nav{ display:none; }
  .hdr__tel{ display:none; }
  .hdr__side{ margin-left:auto; }
}
@media (max-width:900px){
  :root{ --head:60px; }
  .burger{ display:block; }
  .hdr__side{ display:none; }
  .dock{ display:flex; }
  body{ padding-bottom:76px; }

  .sect{ padding:64px 0; }
  /* 下部固定CTA(76px)がヒーロー下端のガラス帯を覆わないよう、その分だけ引く */
  .hero{ min-height:calc(100svh - 76px); }
  .hero__in{ padding:calc(var(--head) + 20px) 16px 56px; }
  .glass{ padding:30px 24px 28px; border-radius:8px; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .hero__strip ul{ grid-template-columns:1fr 1fr; gap:12px 16px; padding:16px; }
  /* 案B: 2列レイアウトでは、各列の先頭（左列＝1,3番目）は線なし、
     右列（2,4番目）だけ線あり。列ごとに対称になる。 */
  .hero__strip li:nth-child(odd){ border-left:0; padding-left:0; }
  .hero__strip li:nth-child(even){ border-left:1px solid rgba(10,42,94,.14); padding-left:14px; }
  /* サイズが変わると丸め誤差で最適な倍率も変わる（実測）。
     PC 23px → 0.82倍 / SP 19px → 0.72倍。両方ここで持つ。 */
  .hero__strip{ --strip-num:19px; --strip-ja:calc(var(--strip-num) * .72); }
  .hero__strip span{ font-size:12px; }
  .cue{ display:none; }
  .hero__bg::after{
    /* 上部は軽く（写真＝主役の顔を見せる）、ガラスが乗る下部だけしっかり暗く。
       上を一律に濃くすると顔が潰れてトップ画が「見えない」印象になる。 */
    background:
      linear-gradient(180deg,
        rgba(6,26,60,.30) 0%,
        rgba(6,26,60,.32) 40%,
        rgba(6,26,60,.72) 72%,
        rgba(6,26,60,.90) 100%);
  }

  /* 80分セクション: 横の流れ → 縦の流れ */
  .split{ grid-template-columns:1fr; margin-bottom:44px; }
  .plus{ padding:28px 20px 24px; }
  .plus__head{ margin-bottom:28px; }
  .fl{ grid-template-columns:1fr; gap:0; }
  .fl__s{ flex-direction:row; align-items:flex-start; text-align:left; gap:16px; padding:18px; }
  .fl__ico{ width:50px; height:50px; margin-bottom:0; margin-top:2px; }
  .fl__ar{ padding:8px 0; }
  .fl__ar svg{ transform:rotate(90deg); }
  .grades{ grid-template-columns:1fr; }
  .reasons{ grid-template-columns:1fr; gap:32px; }
  .tiles{ grid-template-columns:1fr; }
  .brands{ grid-template-columns:1fr 1fr; }
  .promo{ grid-template-columns:1fr; gap:28px; }
  .promo__pic img{ width:100%; max-width:340px; margin-inline:auto; }
  .schools{ grid-template-columns:1fr; }
  .news{ grid-template-columns:1fr; }

  /* SP: 文字 / (名前 + 説明) の2列 */
  .spine li{ grid-template-columns:56px 1fr; gap:16px; padding:22px 4px; }
  .spine__d{
    grid-column:2; padding-left:0; border-left:0; margin-top:8px; font-size:14px;
  }
  .ptab{ margin-inline:-24px; padding-inline:24px; }   /* 表は横スクロールさせる */
  .pnote{ flex-direction:column; gap:8px; }

  .ftr__top{ grid-template-columns:1fr; gap:40px; }
  .ftr__nav{ grid-template-columns:1fr 1fr; }
  .ftr__bar{ justify-content:center; text-align:center; }
}
@media (max-width:560px){
  /* 画面下に固定CTAバーがある。ガラス内に同じ「無料体験」を重ねても
     裏に隠れるだけで導線が2重になる。狭い画面ではガラス側を落とす。 */
  .hero__cta .btn--gold{ display:none; }
  .glass{ padding:26px 20px 24px; }
  .hero__lead{ font-size:15px; margin-bottom:24px; }

  /* 縦長のスマホは横がさらに切れる。主役の子（左寄り）に寄せて確実に出す。 */
  .hero__bg img{ object-position:32% 38%; }

  .brands{ grid-template-columns:1fr; }
  .close{ padding:72px 0; }
}

/* ============================================================
   下層ページ共通
   ============================================================ */
.phead{
  padding:calc(var(--head) + 56px) 0 44px;
  background:var(--navy);
  color:#fff;
  position:relative;
}
.phead::after{                       /* 金の細線。ヒーローと同じ語彙 */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(200,162,90,.55);
}
.crumb{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:rgba(255,255,255,.6); margin-bottom:22px;
}
.crumb a{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px;      /* タップ領域は縦横とも44px */
  color:rgba(255,255,255,.82);
}
.crumb > span{ display:flex; align-items:center; min-height:44px; }
.crumb a:hover{ color:var(--gold-lt); }
.crumb [aria-current]{ color:#fff; }
.phead__en{
  font-family:var(--gothic); font-weight:700; font-size:11px;
  letter-spacing:.22em; color:var(--gold-lt); margin-bottom:12px;
}
.phead__ja{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.6vw,42px); line-height:1.4; letter-spacing:.02em;
}
.phead__lead{
  margin-top:18px; max-width:64ch; font-size:15px; color:rgba(255,255,255,.82);
}
.phead__lead strong{ color:var(--gold-lt); font-weight:700; }

/* 現在地 */
.hdr__nav a[aria-current="page"]{ border-bottom-color:var(--gold); font-weight:700; }

/* 目次 */
.toc{
  position:sticky; top:var(--head); z-index:90;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
          backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.toc ul{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.toc a{
  display:flex; align-items:center; min-height:52px; padding:0 14px;
  font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap;
  border-bottom:2px solid transparent;
}
.toc a:hover{ border-bottom-color:var(--gold); }

/* S1 / S2 比較 */
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cmp__c{
  border:1px solid var(--line); border-radius:var(--r);
  padding:32px 30px; background:var(--paper);
}
.cmp__c--hl{ border-color:var(--gold); background:var(--gold-wash); }
.cmp__tag{
  font-family:var(--gothic); font-weight:700; font-size:12px; letter-spacing:.16em;
  color:var(--gold-ink); margin-bottom:10px;
}
.cmp__t{ font-family:var(--serif); font-size:23px; color:var(--navy); margin-bottom:12px; }
.cmp__d{ font-size:14px; color:var(--ink-mute); line-height:1.9; margin-bottom:22px; }
.cmp__p{
  display:flex; align-items:baseline; gap:4px; flex-wrap:wrap;
  font-family:var(--gothic); font-weight:700; color:var(--navy);
  padding-top:18px; border-top:1px solid var(--line);
}
.cmp__c--hl .cmp__p{ border-top-color:rgba(200,162,90,.4); }
.cmp__p b{ font-size:32px; line-height:1; }
.cmp__p small{
  font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-mute);
}
.cmp__p small:first-child{ width:100%; margin-bottom:6px; }

/* 補足ボックス */
.callout{
  margin-top:32px; padding:24px 26px;
  border-left:3px solid var(--gold); background:var(--mist);
}
.callout__t{ font-weight:700; color:var(--navy); margin-bottom:6px; font-size:15px; }
.callout__d{ font-size:14px; color:var(--ink-mute); line-height:1.9; }
.callout__d b{ color:var(--navy); }

/* 中3受験コース */
.exam{
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r);
  padding:34px; background:var(--paper);
}
.exam__l{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.exam__i{ }
.exam__k{ font-weight:700; color:var(--navy); font-size:15px; }
.exam__v{ font-size:13px; color:var(--ink-mute); margin-top:2px; }
.exam__plus{
  /* 装飾の金(#c8a25a)は白地で2.39しかない。文字として見える以上、gold-ink を使う。 */
  font-family:var(--gothic); font-weight:700; font-size:22px; color:var(--gold-ink);
}
.exam__p{
  display:flex; align-items:baseline; gap:3px;
  font-family:var(--gothic); font-weight:700; color:var(--navy);
  padding-left:32px; border-left:1px solid var(--line);
}
.exam__p b{ font-size:38px; line-height:1; }
.exam__p small{ font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-mute); }

/* 講座カード */
/* align-items:start だと中身の量でカードの高さがバラバラになる（実測 261/261/412）。
   stretch（既定）にして、同じ行のカードは高さを揃える。 */
.ocards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ocard{ display:flex; flex-direction:column; }
.ocard__l{ flex:1; }   /* 料金の行が下まで伸びて、枠の底に張り付く */
.ocard{
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px; background:var(--paper);
}
.ocard__t{
  font-family:var(--serif); font-size:19px; color:var(--navy);
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.ocard__note{
  display:inline-block; margin-left:8px;
  font-family:var(--sans); font-size:10px; font-weight:700; color:var(--gold-ink);
  border:1px solid var(--gold); border-radius:2px; padding:2px 6px; vertical-align:3px;
}
.ocard__age{ font-size:12px; color:var(--ink-mute); margin-bottom:8px; }
.ocard__l > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.ocard__l > div:last-child{ border-bottom:0; }
.ocard__l > div.is-hl dd{ color:var(--gold-ink); }
.ocard__l dt{ font-size:14px; color:var(--ink); font-weight:500; }
.ocard__l dt span{ display:block; font-size:11px; color:var(--ink-mute); font-weight:400; }
.ocard__l dd{
  font-family:var(--gothic); font-weight:700; font-size:16px; color:var(--navy);
  white-space:nowrap;
}

/* 諸経費 */
.fees{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.fee{
  border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; background:var(--paper);
}
.fee__k{
  font-family:var(--serif); font-size:19px; color:var(--navy); margin-bottom:16px;
  display:flex; align-items:baseline; gap:10px;
}
.fee__k span{
  font-family:var(--gothic); font-weight:700; font-size:10px; letter-spacing:.1em;
  color:var(--gold-ink); border:1px solid var(--gold); border-radius:2px; padding:2px 6px;
}
.fee li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.fee li:last-child{ border-bottom:0; }
.fee b{ font-family:var(--gothic); font-size:17px; color:var(--navy); }
.fees__note{ margin-top:22px; font-size:13px; color:var(--ink-mute); text-align:center; }

@media (max-width:900px){
  .phead{ padding:calc(var(--head) + 36px) 0 32px; }
  .toc ul{ margin-inline:-24px; padding-inline:24px; }
  .cmp{ grid-template-columns:1fr; }
  .exam{ grid-template-columns:1fr; gap:24px; }
  .exam__p{ padding-left:0; border-left:0; padding-top:20px; border-top:1px solid var(--line); }
  .ocards{ grid-template-columns:1fr; }
  .fees{ grid-template-columns:1fr; }
}

/* 外部サイトへ出るタイル（Web授業 → STUDYMO オンライン） */
.tile__ex{ width:12px; height:12px; flex:none; color:var(--gold-ink); }
.tile--ext:hover .tile__ex{ color:var(--navy); }

/* 目に見えないが読み上げられる文字 */
.sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}

/* ============================================================
   UI/UX の仕上げ
   ============================================================ */

/* ---- アンカーリンクが追従ヘッダー（＋追従目次）の裏に隠れないように ----
   実測: ヘッダー72px + 目次52px。余白を足して確保する。 */
[id]{ scroll-margin-top: calc(var(--head) + 68px); }
.toc [id]{ scroll-margin-top: var(--head); }

/* 目次のないページはヘッダー分だけでよい */
body:not(:has(.toc)) [id]{ scroll-margin-top: calc(var(--head) + 20px); }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ---- 文字を選択したときの色 ---- */
::selection{ background:var(--gold-lt); color:var(--navy-deep); }

/* ---- 404 ---- */
.nf{
  padding:calc(var(--head) + 96px) 0 120px;
  text-align:center;
}
.nf__code{
  /* --gold は白地で2.39しかない。大きな文字には --gold-big を使う（自分で決めた規則）。
     opacity で薄めると実効コントラストが落ちるので、薄めない。 */
  font-family:var(--gothic); font-weight:700;
  font-size:clamp(64px,10vw,120px); line-height:1;
  color:var(--gold-big); margin-bottom:16px;
}
.nf__t{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,3vw,34px); color:var(--navy); margin-bottom:20px;
}
.nf__d{ font-size:15px; color:var(--ink-mute); line-height:2; margin-bottom:36px; }
.nf__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.nf__tel{ margin-top:36px; font-size:13px; color:var(--ink-mute); }
.nf__tel a{
  display:block; margin-top:6px;
  font-family:var(--gothic); font-weight:700; font-size:26px; color:var(--navy);
}

/* ---- 印刷（料金ページは保護者が紙で見る） ---- */
@media print{
  .hdr, .drawer, .dock, .toc, .cue, .hero, .ribbon, .close,
  .kuritomo, .skip{ display:none !important; }
  body{ background:#fff; color:#000; }
  /* スクロール演出は印刷では邪魔。トランジションごと止める。
     transition を残すと、印刷のスナップショットが「途中の半透明」を捉えることがある
     （実測 opacity 0.86 で紙が薄くなった）。 */
  .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .sect{ padding:16px 0; page-break-inside:avoid; }
  .sect--mist, .sect--navy, .lesson{ background:#fff !important; color:#000 !important; }
  .lesson *, .lesson .head__ja{ color:#000 !important; }
  .ptab table{ page-break-inside:avoid; }
  /* 料金表の見出しセルは紺地。紙では黒く潰れるのでグレー地・黒文字に。 */
  .ptab th, .ptab td{ border:1px solid #999 !important; }
  .ptab thead th, .ptab tbody th{
    background:#eee !important; color:#000 !important;
  }
  .ptab th small, .ptab th em{ color:#333 !important; background:none !important; }
  .ptab__hl th, .ptab__hl td{ background:#f7f2e6 !important; color:#000 !important; }
  .phead{ background:#fff !important; color:#000 !important; padding:0 0 16px; }
  .phead__ja, .phead__lead, .phead__lead strong{ color:#000 !important; }
  .crumb, .phead::after{ display:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:10px; color:#666; }
  a[href^="#"]::after, a[href^="tel"]::after{ content:""; }
  .ocard, .cmp__c, .fee, .split__c{ break-inside:avoid; border:1px solid #ccc !important; }

  /* フッターは連絡先が要るので残すが、紺地のままだと紙が真っ黒になる */
  .ftr{ background:#fff !important; color:#000 !important; border-top:1px solid #999; padding:16px 0; }
  .ftr *{ color:#000 !important; }
  .ftr__nav, .ftr__logo{ display:none !important; }

  /* 紺地のパーツは紙では黒く潰れる。枠線だけの表現にする。 */
  .fl__s, .plus, .split__c, .btn{
    background:#fff !important; color:#000 !important;
    border:1px solid #999 !important;
  }
  .fl__s *, .plus *, .split__c *, .btn{ color:#000 !important; }
  .fl__chip, .split__h, .split__t small, .plus__tag{
    background:#eee !important; color:#000 !important;
  }
  .fl__ico{ filter:grayscale(1) contrast(.7); }
  .btn--gold, .btn--navy, .btn--onnavy, .btn--line{ display:none !important; }
}


/* ============================================================
   最終行に数文字だけ落ちるのを防ぐ
   ------------------------------------------------------------
   日本語はどこでも改行できるので、「す。」「生。」の2文字だけが
   最後の行に取り残される。text-wrap:balance が行の長さを均等に割る。
   （balance は数行までの短い塊が対象。長い本文には効かないので、
     見出しの説明・リード・カードの説明にだけ効かせる。）
   ============================================================ */
.head__note,
.hero__lead,
.phead__lead,
.grade__d,
.why__d,
.fl__d,
.plus__sub,
.plus__copy,
.cmp__d,
.tile__d,
.nf__d,
.mn__d,
.close p{
  text-wrap:balance;
}


/* ============================================================
   画面下の固定CTAバーが、ヒーロー下端の帯を隠さないようにする
   ------------------------------------------------------------
   帯はヒーローの底にある。固定バーは position:fixed で画面の底にいる。
   画面が低い端末（iPhone SE = 390x667 等）では両者が重なり、
   「8,580円から／月」が 55px ぶん隠れて読めなかった（実測）。
   → 固定バーが出ている幅では、帯の下にバーぶんの余白を敷く。
   ============================================================ */
@media (max-width:820px){
  /* 画面下の固定CTAバーのぶん、ヒーローを縮める。 */
  .hero{ min-height:calc(100svh - var(--dock-h)); }
}

/* 画面が低い端末（iPhone SE 390x667 等）。
   中身（ヘッダー60 + ガラス380 + 帯136 = 576px）は 597px に収まるのに、
   ヒーローの上下余白（80/56px）で 652px に膨らみ、帯が固定バーの裏に隠れていた。
   → 低い画面では余白を詰める。中身は削らない。 */
@media (max-width:820px) and (max-height:760px){
  .hero__in{ padding:calc(var(--head) + 12px) 16px 20px; }
  .hero__strip ul{ padding:12px 16px; gap:10px 14px; }
  .hero__strip{ --strip-num:18px; --strip-ja:calc(var(--strip-num) * .72); }
  .hero__strip span{ font-size:11px; }
  .cue{ display:none; }
}

/* さらに低い画面（iPhone SE 第1世代 320x568 等）。
   ここは詰めても物理的に入らない。ヒーローの高さ指定をやめ、
   帯を画面の下に流す（スクロールすれば読める）。
   固定バーに隠れないよう、帯の下にバーぶんの余白を敷く。
   ※ 情報は削らない。読めなくなる方が悪い。 */
@media (max-width:820px) and (max-height:620px){
  .hero{ min-height:0; }
  .hero__in{ padding:calc(var(--head) + 12px) 16px 16px; }
  .hero__strip{ padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   本文プロース（.mbody）と要点リスト（.mpts）
   study / mannabe / campaign / lepton / stop / fast で共通に使う。
   明るい面のみ。色は AA 実証済み（--ink-mute / --navy / --gold-ink）。
   ============================================================ */
.mbody{ max-width:760px; }
/* 中央寄せの見出し（.head[style*=center]）の下で使う。ブロックごと中央に。 */
.mbody--c{ margin-inline:auto; }
.mbody p{ font-size:15px; line-height:2.0; color:var(--ink-mute); margin-bottom:20px; }
.mbody p:last-child{ margin-bottom:0; }
/* 強調は下線ハイライト。文字は紺なので明るい面で必ず AA。 */
.mbody em{
  font-style:normal; font-weight:700; color:var(--navy);
  background:linear-gradient(transparent 62%, var(--gold-lt) 62%);
}
.mbody strong{ color:var(--gold-ink); font-weight:700; }

.mpts{ list-style:none; display:grid; gap:14px; margin-top:32px; max-width:820px; }
.mpts li{
  position:relative; padding:16px 20px 16px 44px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  font-size:14.5px; line-height:1.9; color:var(--ink);
}
/* 金の小さな点。フォント/マスクに依存せず必ず描画される。装飾のみ。 */
.mpts li::before{
  content:""; position:absolute; left:20px; top:22px;
  width:8px; height:8px; border-radius:50%; background:var(--gold);
}
.mpts li b{ display:block; font-size:15px; color:var(--navy); margin-bottom:3px; }
.mpts__note{ font-size:12px; color:var(--ink-mute); }

/* ============================================================
   教室案内（.acc）— 情報カード（.cbox）＋ 地図
   ============================================================ */
.acc{
  display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:36px;
  align-items:start; margin-bottom:56px;
}
.acc:last-child{ margin-bottom:0; }
.acc__map{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--mist);
}
.acc__map iframe{ width:100%; height:100%; border:0; display:block; }
.acc .cbox__room b{ color:var(--navy); }
@media (max-width:760px){
  .acc{ grid-template-columns:1fr; gap:20px; }
  .acc__map{ aspect-ratio:16/10; }
}

/* ============================================================
   合格実績（.rez）— 高校 / 中学 / 大学の3カード
   ============================================================ */
.rez{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.rez__c{
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
  padding:28px 26px;
}
.rez__en{
  display:block; font-family:var(--gothic); font-size:11px; letter-spacing:.2em;
  color:var(--gold-ink); margin-bottom:6px;
}
.rez__k{ font-family:var(--serif); font-size:20px; color:var(--navy); margin-bottom:16px; }
.rez__l{ font-size:14px; line-height:2.05; color:var(--ink-mute); }
@media (max-width:820px){ .rez{ grid-template-columns:1fr; } }

/* ============================================================
   お知らせバー（.nbar）— ヒーロー直下の細いテキストリスト
   画像カードの旧 .news セクションを置き換えるもの（2026-08-19）。
   明るい面のみ。日付 --ink-mute／タイトル --navy／ラベル --gold-ink。
   ============================================================ */
.nbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.nbar__in{ display:flex; align-items:flex-start; gap:26px; padding-block:14px; }
.nbar__l{
  flex:none; font-family:var(--gothic); font-size:11px;
  letter-spacing:.22em; color:var(--gold-ink); padding-top:9px;
}
.nbar__list{ list-style:none; flex:1; min-width:0; display:grid; }
.nbar__list a{
  display:flex; gap:16px; align-items:baseline; min-width:0;
  padding:7px 4px; border-radius:6px; text-decoration:none;
}
.nbar__list a:hover .nbar__t,
.nbar__list a:focus-visible .nbar__t{ text-decoration:underline; }
.nbar__d{
  flex:none; font-family:var(--gothic); font-size:12px;
  color:var(--ink-mute); letter-spacing:.04em;
}
.nbar__t{
  font-size:13.5px; line-height:1.7; color:var(--navy); min-width:0;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.nbar__all{ flex:none; padding-top:8px; font-size:12.5px; }
@media (max-width:760px){
  .nbar__in{ flex-wrap:wrap; gap:8px 18px; }
  .nbar__l{ padding-top:2px; }
  .nbar__all{ order:3; margin-left:auto; padding-top:2px; }
  .nbar__list{ order:2; width:100%; }
  .nbar__t{ -webkit-line-clamp:2; }
}

/* ===== ナビの「無料」バッジ ===== */
.nav-free{
  display:inline-block; margin-left:5px; padding:1px 7px;
  border:1px solid var(--gold); border-radius:999px;
  font-size:10px; font-weight:700; color:var(--gold-ink);
  letter-spacing:.04em; vertical-align:2px;
}
.hdr[data-top="true"] .nav-free{ border-color:rgba(255,255,255,.65); color:#fff; }
.drawer nav a .nav-free{ vertical-align:3px; margin-left:8px; margin-right:auto; }