@charset "UTF-8";
/* ============================================================
   学友館 公式サイト — design_handoff/design-reference.html 準拠
   デザイントークンは README「2. デザイントークン」と一致
   ============================================================ */
:root{
  --brand-blue:#2953A0;        /* 集団授業(予備校) */
  --brand-blue-tint:#2953A016;
  --brand-green:#1E8F5A;       /* 個別指導(個別塾)／主要CTA */
  --brand-green-tint:#1E8F5A16;
  --r-sm:2px;
  --r-md:4px;
  --r-lg:6px;

  /* 固定色(README) */
  --navy:#152a52;
  --navy-deep:#0f1e3d;
  --navy-tint:#f0f2f6;   /* 濃紺の極薄ティント（セクション背景） */
  /* 学年ページの帯。集団＝青、個別＝緑。カードやタグの色分けと揃える。
     生成りの本文背景(#faf8f4)の上で、面として認識できる最小限の濃さ。 */
  --group-bg:#eef2f8;
  --private-bg:#edf4ef;
  --bg:#faf8f4;
  --card:#fff;
  --line:#eee9dd;
  --line2:#ece7dc;
  --ink:#1b1b19;
  --text:#3a382f;
  --muted:#6b6659;
  --muted2:#8a8578;
  --label:#a39d8b;

  /* ブランドアクセント：金（背景の明るさで2段） */
  --gold-soft:#d9b45c;   /* 濃紺の上の文字   7.16:1 */
  --gold:#b8912e;        /* 罫・帯・面 */
  --gold-deep:#8f6d22;   /* 白・生成りの上の文字 4.80:1 */
  --gold-tint:#b8912e14;
  /* 行動（CTA）：朱 */
  --vermilion:#B3402E;   /* 白文字 5.69:1 */
  --vermilion-deep:#9E3323;
  /* 濃紺の上の補助テキスト */
  --on-navy:#c9d2e2;
  --on-navy-dim:#9fb2d9;

  --hd-h:88px;        /* ヘッダーの高さ。ヒーローの100svh計算に使う */
  --stage:1440px;
  --pad:56px;
  --maxw:1200px;   /* コンテンツ(生地)の最大幅(README 2.1 準拠)。背景は全幅のまま中身だけ中央にキャップ */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip}
body{
  margin:0;
  font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,'Yu Gothic Medium','Yu Gothic',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.9;
  -webkit-text-size-adjust:100%;
  overflow-wrap:anywhere;
  overflow-x:clip;      /* スマホの横ドリフト防止。clipならsticky追従ヘッダーを壊さない */
  max-width:100%;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
.mincho{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif}

.stage{width:var(--stage);max-width:100%;margin:0 auto}
/* ── 日本語の改行制御（全ページ共通） ──────────────────
   見出し = 行長を均等に（balance）＋文節で折返し。
   本文   = ぶら下がり防止（pretty）のみを既定とする。

   文節での折返し word-break:auto-phrase は、文節の途中で切らない代わりに
   行末に大きな空きを作る。実測（Chrome・本番）では
     箱228px … 3行→2行、最短行 61%→98%
     箱329px … 最短行 75%→92%
     箱820px … 最短行 91%→99%
   と、箱が狭いほど損が大きく、228pxでは行数まで増えていた。
   そのため auto-phrase は下の「幅の広い本文」だけに限定する。
   新しい部品を作るときも、カード内など幅の狭い本文には付けないこと。 */
h1,h2,h3{text-wrap:balance;word-break:auto-phrase}
p,li,dd{text-wrap:pretty}
.lead,.sec-lead,.sec-desc,.concept-lead,.eq-note,.ways-foot,.ways-note,
.creed-body p,.creed-lines p,.ex-sec p,.env p,.philo-card p,.oboe p,
.tp-b p,.punchbox p,.cp-hero p,.prep p,.hero-copy p,.trial p{word-break:auto-phrase}

.sec-pad{padding:104px var(--pad)}

/* ラベル(セクション上の英字) */
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--label);font-weight:700;margin-bottom:10px}
.sec-head{text-align:center;margin-bottom:56px}
.sec-title{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:34px;font-weight:700;line-height:1.4}
.sec-lead{font-size:15px;color:var(--muted);margin-top:14px}

/* ============ ユーティリティバー ============ */
.utilbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px var(--pad);background:var(--navy);color:#e7ecf6;font-size:12px;
}
.utilbar .left{display:flex;align-items:center;gap:10px}
.badge-nashi{background:var(--brand-green);color:#fff;font-weight:800;padding:3px 10px;border-radius:100px;font-size:11px}
.utilbar .right{display:flex;gap:22px;font-weight:700}
.utilbar .right a{color:#e7ecf6}
.utilbar .right a:hover{opacity:.8}

/* ============ ヘッダー ============ */
.site-header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);height:var(--hd-h);background:var(--navy);border-bottom:1px solid rgba(255,255,255,.12);
}
.site-header.is-scrolled{box-shadow:0 4px 18px rgba(21,42,82,.09)}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex:none}
.brand-mark img{width:44px;height:44px}
.brand-name{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:25px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.brand-sub{font-size:10px;letter-spacing:.16em;color:var(--muted2);font-weight:700;white-space:nowrap}
/* ヘッダー: ロゴを [社名 + キャッチフレーズ] のまとまりの縦中央に。社名の真下にキャッチフレーズ */
.site-header .brand{display:flex;align-items:center}
.brand-logo{height:52px;width:auto;display:block;filter:brightness(0) invert(1)}
.brand-logo-f{height:44px;width:auto;display:block;filter:brightness(0) invert(1)}
.site-header .brand-mark{grid-column:1;grid-row:1 / 3;align-self:center}
.site-header .brand-name{grid-column:2;grid-row:1;line-height:1;align-self:end}
.site-header .brand-sub{grid-column:2;grid-row:2;line-height:1;align-self:start;padding-top:4px}
.gnav{display:flex;gap:clamp(16px,2vw,26px);font-size:14px;font-weight:700;color:#e7ecf6;white-space:nowrap}
.gnav a{color:#e7ecf6}
.gnav a:hover{color:#fff}
.header-cta{
  background:var(--vermilion);color:#fff;font-size:14.5px;font-weight:800;
  padding:13px 26px;border-radius:100px;box-shadow:0 6px 16px rgba(179,64,46,.30);white-space:nowrap;
}
.header-cta:hover{background:var(--vermilion-deep)}
.nav-toggle{display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:10px}
.nav-toggle span{display:block;height:2.5px;border-radius:2px;background:#fff;transition:.25s}
.nav-toggle span+span{margin-top:6px}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* ============ ヒーロー ============ */
/* ヒーローは画面の高さいっぱい。ただしヘッダー分は差し引く。
   svh を使うのは、スマホのアドレスバー伸縮で高さが暴れるのを防ぐため。 */
/* ヒーローは画面に貼り付いたまま、続きのコンテンツがその上を昇ってくる。
   position:fixed ではなく sticky を使う。fixed だと iOS Safari の
   アドレスバー伸縮で高さが暴れるため。
   .hero-stage の高さがそのまま「貼り付いている時間」になる。 */
:root{--hero-h:max(560px, 100svh)}
@supports not (height:100svh){:root{--hero-h:max(560px, 100vh)}}
.hero-stage{position:relative;height:calc(var(--hero-h) * 1.7);z-index:0;
  /* ヘッダーは sticky で流れの中に場所を取る。その分引き上げて写真を画面いっぱいに */
  margin-top:calc(var(--hd-h,72px) * -1)}
.hero{position:sticky;top:0;height:var(--hero-h);overflow:hidden;background:var(--navy-deep)}
/* 続きを引き上げて、貼り付いたヒーローの上に重ねる */
.stage-wrap{position:relative;z-index:2;
  /* 末尾の -72px が、4枚のカードが画面下に顔を出す量 */
  margin-top:calc(var(--hero-h) * -0.7 - 72px)}
@media (prefers-reduced-motion:reduce){
  .hero-stage{height:var(--hero-h);margin-top:0}
  .hero{position:relative;top:auto}
  .stage-wrap{margin-top:0}
}
/* 画面いっぱいだと下に続きがあると気づきにくいため、控えめな合図を置く */
.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.55);border-radius:100px;
  display:flex;justify-content:center;padding-top:8px}
.hero-scroll span{width:3px;height:8px;border-radius:2px;background:rgba(255,255,255,.9);animation:heroScroll 2.2s ease-in-out infinite}
@keyframes heroScroll{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  70%{transform:translateY(13px);opacity:0}
  100%{transform:translateY(13px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.hero-scroll span{animation:none;opacity:.9}}
.hero>img,.hero picture,.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}

/* ── ヒーロー：3枚の切り替え＋ゆっくり横に流す ─────────────
   1枚あたり8秒 × 3枚 ＝ 24秒で1周。フェードは約1.5秒。
   各スライドに -8s / -16s の負のディレイを与えて順番をずらす。
   パンは scale(1.14) を土台に ±3% だけ動かすので、端が欠けない。
   JSは不使用。prefers-reduced-motion では1枚目を静止表示。 */
.hero-slides{position:absolute;inset:0;overflow:hidden}
.hs{position:absolute;inset:0;opacity:0;will-change:opacity}
.hs picture,.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs img{will-change:transform}
.hs{animation:heroFade 18s linear infinite}
.hs1{animation-delay:0s}
.hs2{animation-delay:-6s}
.hs3{animation-delay:-12s}
.hs1 img{object-position:50% 30%;animation:heroPanR 18s ease-in-out infinite}
.hs2 img{object-position:50% 45%;animation:heroPanL 18s ease-in-out infinite;animation-delay:-6s}
.hs3 img{object-position:50% 35%;animation:heroPanR 18s ease-in-out infinite;animation-delay:-12s}

/* 次の1枚が出きってから前の1枚が消えるよう、表示区間を重ねている。
   重ねないと切り替わりの瞬間に背景が覗いて暗く沈む。 */
@keyframes heroFade{
  0%     {opacity:0}
  6%     {opacity:1}
  33.33% {opacity:1}
  39.33% {opacity:0}
  100%   {opacity:0}
}
/* 左 → 右へ流す */
@keyframes heroPanR{
  0%   {transform:scale(1.14) translate3d(-3%,0,0)}
  100% {transform:scale(1.14) translate3d(3%,0,0)}
}
/* 右 → 左へ流す */
@keyframes heroPanL{
  0%   {transform:scale(1.14) translate3d(3%,0,0)}
  100% {transform:scale(1.14) translate3d(-3%,0,0)}
}
/* スマホ用。写真を画面比率で切ってあるので、振り幅を小さくして全体を見せる */
@keyframes heroPanRsp{
  0%   {transform:scale(1.10) translate3d(-2.5%,0,0)}
  100% {transform:scale(1.10) translate3d(2.5%,0,0)}
}
@keyframes heroPanLsp{
  0%   {transform:scale(1.10) translate3d(2.5%,0,0)}
  100% {transform:scale(1.10) translate3d(-2.5%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .hs{animation:none}
  .hs1{opacity:1}
  .hs2,.hs3{opacity:0}
  .hs img{animation:none;transform:none}
}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,45,.16) 0%,rgba(10,22,45,0) 42%,rgba(10,22,45,.34) 100%)}

/* ── ヒーロー下端を、粒を散らしながら背景へ溶かす ──────────
   なだらかなグラデーションだと、生成り(#faf8f4)のような明るく彩度の低い色は
   8bitの階調不足で縞が見える。乱数ディザのマスクで点に置き換えると縞が出ない。
   マスクは160x240の1枚を横に繰り返すだけ。 */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:clamp(96px,14%,170px);z-index:2;pointer-events:none;
  background:var(--bg);
  -webkit-mask-image:url(../assets/img/dither-fade.png);
          mask-image:url(../assets/img/dither-fade.png);
  -webkit-mask-size:160px 100%;      mask-size:160px 100%;
  -webkit-mask-repeat:repeat-x;      mask-repeat:repeat-x;
  -webkit-mask-position:bottom left; mask-position:bottom left;
}

/* ── 下から来るコンテンツに合わせて、コピーが一緒に動き出す ──
   --hero-val は js/main.js がスクロール量から 0→1 で入れる。
   手前では止まったまま、ストリップが近づいてから持ち上がって薄れる。 */
.hero-inner{
  --hero-val:0;
  opacity:calc(1 - var(--hero-val));
  transform:translate3d(0, calc(var(--hero-val) * -72px), 0);
  will-change:opacity,transform;
}
@media (prefers-reduced-motion:reduce){
  .hero-inner{opacity:1;transform:none}
}
.hero-inner{
  position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:0;max-width:720px;color:#fff;
  /* テキスト塊はコンテンツ列の左端に合わせる(パディングで潰さずマージンで位置決め) */
  margin-left:max(var(--pad), calc((100% - var(--maxw)) / 2));
  margin-right:var(--pad);
  /* ヘッダーが写真の上に重なるので、その分だけ下へ寄せて視覚的な中央に置く */
  padding-top:var(--hd-h,72px);
}
.hero-panel{
  display:flex;flex-direction:column;gap:22px;
  background:linear-gradient(160deg,rgba(15,28,54,.72),rgba(15,28,54,.58));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);
  padding:38px 42px;
  box-shadow:0 20px 50px rgba(10,22,45,.35);
}
.hero-tags{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em}
.hero-tags .t-white{background:#fff;color:var(--navy);padding:5px 12px;border-radius:100px}
.hero-tags .t-green{background:var(--brand-green);padding:5px 12px;border-radius:100px}
.hero h1{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:60px;line-height:1.45;font-weight:700}
.hero-lead{font-size:16px;line-height:2;max-width:540px;font-weight:400}
.hero-btns{display:flex;gap:14px;margin-top:6px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:800;border-radius:100px;text-align:center;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--vermilion);color:#fff;font-size:15px;padding:16px 32px;box-shadow:0 8px 20px rgba(179,64,46,.30)}
.btn-white{background:#fff;color:var(--navy);font-size:15px;padding:16px 32px}
.btn-lg{font-size:15px;padding:16px 40px}

/* ============ 強みストリップ ============ */
.strength{
  position:relative;margin:-56px var(--pad) 0;background:#fff;
  box-shadow:0 12px 40px rgba(21,42,82,.12);
  border-radius:var(--r-lg);overflow:hidden;
}
/* 何の数字かをここで言い切る。学校名と人数だけだと、
   いつの・何の実績なのかが読み手に分からない。 */
.strength-h{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--navy);color:#fff;padding:13px 24px}
.strength-h .t{font-size:13px;font-weight:800;letter-spacing:.04em}
.strength-h a{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:12.5px;font-weight:800;color:var(--gold-soft)}
.strength-h a span{transition:transform .35s cubic-bezier(.16,.66,.24,1)}
@media (hover:hover){.strength-h a:hover span{transform:translateX(4px)}}
.strength-g{display:grid;grid-template-columns:repeat(4,1fr)}
.strength .cell{padding:26px 20px 28px;text-align:center;border-right:1px solid var(--line)}
.strength .cell:last-child{border-right:none}
.strength .sch{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:8px}
.strength .num{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:36px;font-weight:700;color:var(--gold-deep);line-height:1}
.strength .num em{font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,'Yu Gothic Medium','Yu Gothic',sans-serif;font-size:13px;font-weight:700;font-style:normal;margin-left:3px;color:var(--muted)}

/* ============ カード共通 ============ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:44px}

/* 理念 */
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.concept-grid .card h3{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:24px;font-weight:700;margin-bottom:16px}
.concept-grid .card p{font-size:15.5px;line-height:2;color:var(--text)}

/* 2つの学び方 */
.two-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.way{display:block;border-radius:var(--r-lg);padding:44px;overflow:hidden;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy)}
.way-img{width:100%;height:200px;object-fit:cover;display:block;margin:0 0 28px;border-radius:var(--r-md);background:#e8edf5}
.way.blue{border-top-color:var(--brand-blue)}
.way.green{border-top-color:var(--brand-green)}
.way .k{font-size:12px;font-weight:800;letter-spacing:.06em;margin-bottom:8px}
.way .ttl{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:30px;font-weight:700;margin-bottom:14px}
.way p{font-size:15px;line-height:1.9;color:var(--text);margin-bottom:18px}
/* 選択カードの中の情報パネル（向き・学べる科目）。
   .way は白なので、白の半透明だと見えない。生成りの --bg で面を作る。 */
.way .fit,.way .subjects{margin:0 0 18px;padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)}
.way .fit dt{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.way .fit dt+dd{margin:0 0 12px}
.way .fit dd:last-child{margin-bottom:0}
.way .fit dd{font-size:15px;line-height:1.8;color:var(--text);font-weight:700}
.way .subjects .lb{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--muted);margin-bottom:9px}
.way .subjects .sj{display:flex;flex-wrap:wrap;gap:7px}
.way .subjects .sj span{font-size:13.5px;font-weight:800;padding:5px 13px;border-radius:100px;background:#fff;border:1px solid var(--line)}
.way.blue .subjects .sj span{color:var(--brand-blue);border-color:rgba(41,83,160,.35)}
.way .subjects .free{font-size:14.5px;font-weight:800;line-height:1.75;color:var(--brand-green)}
.way .ttl.h-ic .ic{width:.82em;height:.82em}
.way.blue .ttl.h-ic .ic{color:var(--brand-blue)}
.way.green .ttl.h-ic .ic{color:var(--brand-green)}
.ways-note{text-align:center;font-size:15px;color:var(--muted);margin-top:22px}
.ways-note b{color:var(--navy)}
.way.blue .k{color:var(--brand-blue)}
.way.blue .ttl{color:var(--navy)}
.way.green .k{color:var(--brand-green)}
.way.green .ttl{color:var(--navy)}

/* 夏期講習バナー */
.banner{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;color:#13324e;height:360px}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 28%;transform:scaleX(-1)}
.banner .inner{position:relative;height:100%;width:52%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:0 64px}
.banner .tag{display:inline-block;background:var(--brand-blue);color:#fff;font-size:16px;font-weight:800;letter-spacing:.1em;padding:9px 22px;border-radius:100px;box-shadow:0 6px 16px rgba(41,83,160,.3)}
.banner .big{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:42px;font-weight:700;line-height:1.4}
.banner .more{display:inline-block;margin-top:4px;background:var(--brand-blue);color:#fff;font-size:15px;font-weight:800;padding:13px 28px;border-radius:100px;box-shadow:0 8px 18px rgba(41,83,160,.32);transition:transform .15s}
.banner:hover .more{transform:translateX(4px)}
.banner .desc{font-size:15.5px;font-weight:700;line-height:1.8}

/* 各学年ページへの誘導（トップの集団/個別セクション末尾） */
.to-grade{background:#fff;border-radius:var(--r-lg);padding:28px 32px;margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.to-grade.blue{border:1px solid var(--brand-blue)}
.to-grade.green{border:1px solid var(--brand-green)}
.to-grade .tg-lead{font-size:15.5px;color:var(--text);line-height:1.8}
.to-grade .tg-lead strong{color:var(--navy)}
.to-grade .tg-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.to-grade .tg-links a{font-size:15px;font-weight:800;transition:transform .15s;display:inline-block}
.to-grade.blue .tg-links a{color:var(--brand-blue)}
.to-grade.green .tg-links a{color:var(--brand-green)}
.to-grade .tg-links a:hover{transform:translateX(3px)}
@media (max-width:760px){
  .to-grade{flex-direction:column;align-items:flex-start;padding:22px 22px}
  .to-grade .tg-links{flex-direction:column;gap:10px}
}

/* 学年から選ぶ（トップ→各学部ページ） */
.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--maxw);margin:0 auto}
.grade-card{--gc-pad:34px;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:0 0 var(--gc-pad);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.grade-card>:not(.gc-photo){margin-left:var(--gc-pad);margin-right:var(--gc-pad)}
.gc-photo{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg);margin-bottom:24px}
.gc-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.grade-card:hover .gc-photo img{transform:scale(1.03)}
.gc-photo img{transition:transform .4s ease}
.grade-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(21,42,82,.12);border-color:var(--navy)}
.grade-card .gc-en{font-size:10.5px;letter-spacing:.18em;font-weight:800;color:var(--label);margin-bottom:8px}
.grade-card .gc-ttl{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:30px;font-weight:700;color:var(--navy);line-height:1.3}
.grade-card .gc-range{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gc-ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gc-ways .gw{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;letter-spacing:.02em;padding:5px 12px;border-radius:100px;line-height:1.4}
.gc-ways .gw::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.gc-ways .gw.blue{color:var(--brand-blue);background:transparent;border:1px solid var(--brand-blue)}
.gc-ways .gw.green{color:var(--brand-green);background:transparent;border:1px solid var(--brand-green)}
.grade-card .gc-desc{font-size:15px;line-height:1.95;color:var(--text);margin-top:16px;margin-bottom:22px;flex:1}
.grade-card .gc-more{font-size:14.5px;font-weight:800;color:var(--brand-blue);transition:transform .15s}
.grade-card:hover .gc-more{transform:translateX(4px)}
.grade-card.is-main{border:2px solid var(--brand-blue);background:linear-gradient(180deg,var(--brand-blue-tint) 0%,#fff 42%)}
@media (max-width:860px){
  .grade-grid{grid-template-columns:1fr}
  .grade-card{--gc-pad:26px}
  .gc-photo{aspect-ratio:16/9;margin-bottom:20px}
  .grade-card .gc-ttl{font-size:26px}
}

/* 2027入試変更LP バナー(トップ→LP誘導) */
:root{--lp2027-accent:#b3402e;--lp2027-accent-soft:#f0b7ab;--lp2027-on-navy:#c9d3e8}
.banner-nyushi2027{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;background:linear-gradient(105deg,var(--navy) 0%,var(--navy-deep) 100%);border-radius:var(--r-lg);padding:clamp(20px,3.5vw,28px) clamp(20px,4vw,36px);box-shadow:0 8px 24px rgba(21,42,82,.18);color:#fff}
.banner-nyushi2027:hover{box-shadow:0 10px 28px rgba(21,42,82,.3)}
.banner-nyushi2027 .b-text{flex:1 1 340px;display:flex;flex-direction:column;gap:8px}
.banner-nyushi2027 .b-label{align-self:flex-start;background:var(--lp2027-accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.12em;padding:4px 14px;border-radius:100px}
.banner-nyushi2027 .b-title{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:clamp(19px,3.2vw,26px);font-weight:800;line-height:1.5;color:#fff;text-wrap:pretty}
.banner-nyushi2027 .b-title em{font-style:normal;color:var(--lp2027-accent-soft)}
.banner-nyushi2027 .b-sub{font-size:12.5px;color:var(--lp2027-on-navy)}
.banner-nyushi2027 .b-btn{flex:none;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--navy);font-size:13.5px;font-weight:800;padding:12px 26px;border-radius:100px;transition:transform .2s}
.banner-nyushi2027:hover .b-btn{transform:translateX(4px)}
.banner-nyushi2027 .b-btn .arrow{color:var(--lp2027-accent);font-size:15px}

/* 英検®の表示に必要な注記。
   日本英語検定協会のガイドラインで、®の付記・登録商標の帰属文に加えて
   「協会の承認を受けたものではない」旨の表示が求められている。 */
.tm-note{max-width:var(--maxw);margin:10px auto 0;padding:0 var(--pad);
  font-size:11px;line-height:1.7;color:var(--muted2);text-align:right}
@media (max-width:700px){.tm-note{text-align:left}}

/* 小学生英語 バナー(トップ→LP 誘導) */
.eng-banner{
  position:relative;display:block;height:400px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#ffd9a8 0%,#ffe9cf 46%,#fff8ee 100%);
}
.eng-banner:hover{box-shadow:0 12px 30px rgba(180,120,40,.2)}
.eng-banner .kids{position:absolute;left:-40px;bottom:0;top:0;height:100%;width:auto;object-fit:contain;object-position:bottom left}
.eng-banner .tm{position:absolute;right:16px;top:12px;z-index:3;font-size:10px;color:#9a7a5c}
.eng-banner .copy{
  position:absolute;top:0;right:0;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:flex-end;text-align:right;gap:20px;padding:0 64px;max-width:640px;
}
.eng-banner .copy .title{width:520px;max-width:100%;height:auto}
.eng-banner .cta-row{position:absolute;left:64px;bottom:36px;z-index:3;display:flex;align-items:center;gap:14px}
.eng-banner .more{background:#ef6a2b;color:#fff;font-size:15px;font-weight:800;padding:13px 26px;border-radius:100px;box-shadow:0 8px 18px rgba(239,106,43,.34)}
.eng-banner .get{font-size:22px;font-weight:800;color:#b8541f;text-shadow:0 2px 8px rgba(255,248,238,.95),0 0 2px rgba(255,248,238,1)}
@media (max-width:700px){
  .eng-banner{height:300px;min-height:0}
  .eng-banner .kids{height:100%;top:0;bottom:0;left:-24px;opacity:1}
  .eng-banner .copy{position:absolute;top:0;right:0;align-items:flex-end;text-align:right;justify-content:flex-start;gap:12px;padding:18px 22px 0;max-width:66%}
  .eng-banner .copy .title{width:210px}
  .eng-banner .cta-row{left:auto;right:22px;bottom:20px;flex-direction:column;align-items:flex-end;gap:8px}
  .eng-banner .tm{top:auto;bottom:8px;left:12px;right:auto;max-width:56%}
  .eng-banner .more{font-size:13px;padding:10px 20px}
  .eng-banner .get{font-size:14px}
}

/* セクション見出し(左罫) */
.sec-mark{border-left:5px solid var(--brand-blue);padding-left:20px;margin-bottom:40px}
.sec-mark.green{border-left-color:var(--brand-green)}
.sec-mark .k{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15.5px;font-weight:800;letter-spacing:.06em;margin-bottom:12px}
.sec-mark .k .brand{color:var(--muted)}
.sec-mark .k .cat{font-size:20px;font-weight:800;letter-spacing:.08em;color:#fff;padding:6px 18px;border-radius:100px;line-height:1.2}
.sec-mark.blue .k .cat{background:var(--brand-blue)}
.sec-mark.green .k .cat{background:var(--brand-green)}
.sec-mark.blue .k{color:var(--brand-blue)}
.sec-mark.green .k{color:var(--brand-green)}
.sec-mark .ttl{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:30px;font-weight:700;line-height:1.5}
.sec-mark .ttl small{font-size:18px;color:var(--muted)}
.sec-desc{font-size:15.5px;line-height:2;color:var(--text);max-width:820px;margin:0 0 44px}


/* ── アイコン ────────────────────────────────
   線画SVG。色は親の color を継承（currentColor）。
   スプライトは各HTMLの <body> 直後にインライン埋め込み。 */
.ic{width:1em;height:1em;flex:none;vertical-align:-.14em;display:inline-block}
.ic-lg{width:1.5em;height:1.5em;vertical-align:-.28em}
/* 丸バッジに載せる版（カード見出しの左などに置く） */
.ic-badge{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-tint);color:var(--gold-deep);border:1px solid rgba(184,145,46,.35)}
.ic-badge .ic{width:22px;height:22px}
.ic-badge.on-navy{background:rgba(216,180,92,.14);border-color:rgba(216,180,92,.4);color:var(--gold-soft)}
.ic-badge.blue{background:transparent;border-color:var(--brand-blue);color:var(--brand-blue)}
.ic-badge.green{background:transparent;border-color:var(--brand-green);color:var(--brand-green)}
/* 見出しの左に置く小アイコン */
.h-ic{display:inline-flex;align-items:center;gap:9px}
/* 大見出し用：.sec-head は中央寄せなのでアイコンごと中央に置く。
   見出しが2行になる場合、アイコンは1行目の頭に揃える。 */
.sec-title.h-ic{display:flex;align-items:flex-start;justify-content:center;gap:12px;text-align:left}
.sec-title.h-ic .ic{width:.72em;height:.72em;margin-top:.34em;color:var(--gold-deep);flex:none}
@media (max-width:560px){.sec-title.h-ic{gap:9px}.sec-title.h-ic .ic{width:.66em;height:.66em}}
.gc-ttl.h-ic .ic,.way .ttl.h-ic .ic{width:.78em;height:.78em}
.way.blue .ttl.h-ic .ic{color:var(--brand-blue)}
.way.green .ttl.h-ic .ic{color:var(--brand-green)}
.gc-ttl.h-ic .ic{color:var(--gold-deep)}
.h-ic .ic{color:var(--gold-deep)}

/* 特徴グリッド */
.feat4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:56px}
.feat5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:56px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:28px}
.feat.top-blue{border-top:3px solid var(--gold)}
.feat .no{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:32px;font-weight:700;line-height:1;color:var(--gold-deep)}
.feat.blue .no{color:var(--gold-deep)}
.feat.green .no{color:var(--gold-deep)}
.feat h4{font-weight:700;font-size:15px;margin:6px 0 10px}
.feat p{font-size:14px;line-height:1.8;color:var(--muted)}
.feat5 .feat{border:none;padding:22px}
.feat5 .feat h4{font-size:15.5px}
.feat5 .feat p{font-size:13.5px;line-height:1.75}

.subhead{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:20px;font-weight:700;margin-bottom:20px}

/* 開講コース(集団) */
.course3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.course{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:28px}
.course .tag{font-size:11px;font-weight:700;color:var(--brand-blue);background:var(--brand-blue-tint);display:inline-block;padding:4px 10px;border-radius:var(--r-sm);margin-bottom:10px}
.course .name{font-weight:700;font-size:16px;margin-bottom:8px}
.course p{font-size:14px;line-height:1.8;color:var(--muted);margin-bottom:14px}
.course .price{font-size:14.5px;font-weight:700;color:var(--navy)}
.course .price .yen{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:18px;color:var(--brand-blue)}
.course table{width:100%;border-collapse:collapse;font-size:12px}
.course table td{padding:5px 0}
.course table tr{border-bottom:1px solid var(--line)}
.course table tr:last-child{border-bottom:none}
.course table td:last-child{text-align:right;font-weight:700}
.note{font-size:12.5px;color:var(--label);margin-top:14px}

/* 一覧ページへ送る控えめなリンク（学年ページ共通） */
.more-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--brand-blue)}

/* 料金表（学年ページ共通） */
/* 料金表の幅。
   実測(1350px幅)では、内容の自然幅が2列表で336px・3列表で394pxしかないのに
   コンテナいっぱいの1200pxまで伸びていた（3〜3.6倍）。ラベルと金額が
   画面の端どうしに離れて読み取れないため、列数に応じて上限をかける。
   :has() が効かない環境でも720pxで止まるよう、素の指定を上限側にしてある。 */
.fee-table{width:100%;max-width:720px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fee-table:not(:has(th:nth-child(3))){max-width:520px}
.fee-table th,.fee-table td{padding:14px 18px;font-size:15.5px;border-bottom:1px solid var(--line);text-align:left}
.fee-table th{background:var(--bg);font-size:12.5px;font-weight:800;color:var(--muted)}
.fee-table th+th,.fee-table td+td{text-align:right}
.fee-table td+td{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.fee-table tr:last-child td{border-bottom:none}
.fee-table tr.hi td{color:var(--brand-blue);font-size:15.5px}
.fee-table.green tr.hi td{color:var(--brand-green)}
@media (max-width:560px){.fee-table th,.fee-table td{padding:12px 13px;font-size:14px}}



/* ノコ勉 */
.noko{background:var(--brand-green-tint);border:1px solid var(--brand-green);border-radius:var(--r-lg);padding:40px 44px;margin:28px 0 0}
.noko-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.noko-tag{flex:none;font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--brand-green);padding:6px 14px;border-radius:100px}
.noko-free{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--brand-green);background:#fff;border:1.5px solid var(--brand-green);padding:5px 13px;border-radius:100px}
.noko-price{margin-top:16px;padding-top:16px;border-top:1px dashed var(--brand-green);font-size:14.5px;font-weight:700;color:var(--navy)}
.noko-price b{color:var(--brand-green);font-size:17px}
.noko-ttl{font-size:24px;font-weight:700;color:var(--brand-green);line-height:1.45}
.noko-body p{font-size:15.5px;line-height:2;color:var(--text)}
.noko-body p+p{margin-top:14px}
.noko-body strong{font-weight:800;color:var(--brand-green);border-bottom:2px solid var(--brand-green-tint)}
@media (max-width:600px){
  .noko{padding:28px 22px}
  .noko-ttl{font-size:19px}
}

/* 料金表(個別) */
.price-wrap{background:#fff;border-radius:var(--r-lg);overflow:hidden}
.price-table{width:100%;border-collapse:collapse;font-size:14.5px}
.price-table th small{font-size:11.5px;font-weight:400;opacity:.85;margin-left:1px}
.price-table thead tr{background:var(--navy);color:#fff}
.price-table th{padding:14px 12px;font-weight:700;text-align:right}
.price-table th:first-child{text-align:left;padding-left:18px;font-weight:700}
.price-table th:last-child{padding-right:18px}
.price-table td{padding:12px;text-align:right;color:var(--text)}
.price-table td:first-child{text-align:left;padding-left:18px;font-weight:700;color:var(--navy)}
.price-table td:last-child{padding-right:18px}
.price-table td.komma{font-weight:700;color:var(--brand-green)}
.price-table tbody tr{border-bottom:1px solid var(--line)}
.price-table tbody tr:nth-child(even){background:#fafbfa}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 無料体験CTA */
.trial{padding:80px var(--pad);background:linear-gradient(158deg,var(--vermilion) 0%,var(--vermilion-deep) 100%);color:#fff;text-align:center}
.trial .k{font-size:12px;font-weight:800;letter-spacing:.14em;opacity:.85;margin-bottom:12px}
.trial .big{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:38px;font-weight:700;margin-bottom:14px}
.trial p{font-size:15.5px;line-height:1.9;max-width:560px;margin:0 auto 30px;opacity:.95}
.trial .btn-white{color:var(--vermilion)}
/* 朱地の上では主ボタンの朱が沈むため、白ボタン＋白枠線ボタンの組で使う */
.trial .btn-green{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.5);box-shadow:none}
@media (hover:hover){.trial .btn-green:hover{background:rgba(255,255,255,.24);box-shadow:none}}

/* 実績 */
.results-sakura{position:relative;overflow:hidden;background:linear-gradient(180deg,#fdeef2 0%,#fbe6ee 55%,#fdf1f4 100%)}
.results-sakura .sec-head,.results-sakura .results-2026,.results-sakura .results-more{position:relative;z-index:2}
.results-sakura .sec-title{color:#a8446a}
.results-sakura .eyebrow{color:#cf7d99}
.results-sakura .sec-lead{color:#9a6076}
.petals{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-8%;width:14px;height:12px;background:linear-gradient(135deg,#ffd0df 0%,#f7a8c4 100%);border-radius:12px 2px 12px 2px;opacity:.85;will-change:transform;animation:petal-fall linear infinite}
@keyframes petal-fall{
  0%{transform:translateY(-40px) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:.9}
  100%{transform:translateY(760px) translateX(60px) rotate(420deg);opacity:.9}
}
.petal:nth-child(1){left:4%;animation-duration:9s;animation-delay:0s;transform:scale(.8)}
.petal:nth-child(2){left:11%;animation-duration:12s;animation-delay:2.5s;transform:scale(1.1)}
.petal:nth-child(3){left:19%;animation-duration:10s;animation-delay:1s}
.petal:nth-child(4){left:27%;animation-duration:13s;animation-delay:4s;transform:scale(.7)}
.petal:nth-child(5){left:34%;animation-duration:11s;animation-delay:6s;transform:scale(1.2)}
.petal:nth-child(6){left:42%;animation-duration:9.5s;animation-delay:1.8s}
.petal:nth-child(7){left:49%;animation-duration:14s;animation-delay:3.2s;transform:scale(.9)}
.petal:nth-child(8){left:56%;animation-duration:10.5s;animation-delay:5.5s;transform:scale(1.1)}
.petal:nth-child(9){left:63%;animation-duration:12.5s;animation-delay:0.6s;transform:scale(.75)}
.petal:nth-child(10){left:70%;animation-duration:9s;animation-delay:2.2s}
.petal:nth-child(11){left:77%;animation-duration:13.5s;animation-delay:4.8s;transform:scale(1.15)}
.petal:nth-child(12){left:83%;animation-duration:11s;animation-delay:6.5s;transform:scale(.85)}
.petal:nth-child(13){left:89%;animation-duration:10s;animation-delay:1.4s}
.petal:nth-child(14){left:94%;animation-duration:12s;animation-delay:3.8s;transform:scale(1.05)}
.petal:nth-child(15){left:15%;animation-duration:14.5s;animation-delay:7.2s;transform:scale(.7)}
.petal:nth-child(16){left:66%;animation-duration:15s;animation-delay:8s;transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.petals{display:none}}
.petal:nth-child(2n){width:11px;height:9px;opacity:.75}
.petal:nth-child(3n){width:17px;height:14px}
.petal:nth-child(5n){width:9px;height:8px;opacity:.7}
.results-2026{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;margin-bottom:28px;align-items:start}
.rc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px 34px}
.rc-head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.rc-tag{font-size:11px;font-weight:800;letter-spacing:.06em;color:#fff;padding:5px 12px;border-radius:100px}
.rc-hs .rc-tag{background:var(--brand-blue)}
.rc-univ .rc-tag{background:var(--brand-green)}
.rc-year{font-size:12.5px;font-weight:700;color:var(--muted)}
.rc-hslist{list-style:none;margin:0;padding:0}
.rc-hslist li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.rc-hslist li:last-child{border-bottom:none}
.rc-sub{flex-basis:100%;text-align:right;font-size:11.5px;font-weight:700;color:var(--brand-blue);margin-top:-6px}
.rc-sch{font-size:16px;font-weight:700;color:var(--navy)}
.rc-num{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:26px;font-weight:700;color:var(--gold-deep);line-height:1}
.rc-num em{font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,'Yu Gothic Medium','Yu Gothic',sans-serif;font-size:12px;font-weight:700;font-style:normal;margin-left:2px;color:var(--muted)}
.rc-note{font-size:11.5px;color:var(--muted2);margin-top:16px;line-height:1.6}
.rc-block{margin-bottom:22px}
.rc-block:last-child{margin-bottom:0}
.rc-label{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--brand-green);padding-bottom:8px;margin-bottom:10px;border-bottom:2px solid var(--brand-green-tint)}
.rc-schools{font-size:15.5px;font-weight:700;line-height:2;color:var(--text)}
/* 桜色の背景に沈まないよう、濃紺のベタ塗りにして主導線として立たせる */
.results-more{display:flex;align-items:center;justify-content:center;gap:11px;
  max-width:540px;margin:0 auto;
  color:#fff;background:var(--navy);border:none;border-radius:100px;
  padding:21px 30px;font-weight:800;font-size:16.5px;
  box-shadow:0 10px 26px rgba(21,42,82,.26)}
.results-more .ic{width:21px;height:21px;color:var(--gold-soft);flex:none}
.results-more span{color:var(--gold-soft);transition:transform .35s cubic-bezier(.16,.66,.24,1)}
@media (hover:hover){
  .results-more:hover{background:var(--navy-deep);box-shadow:0 16px 34px rgba(21,42,82,.32);transform:translateY(-3px)}
  .results-more:hover span{transform:translateX(5px)}
}

/* ── 合格体験記を横に流す帯（トップページ） ──────────────
   実績の数字のすぐ後ろに置く。数字と本人の言葉は、片方だけでは足りない。
   流すのは本文から抜いた一文だけ。本文をまるごと流すと、
   読んでいる途中で動いてしまって読めなくなる。
   自動で流れるが、指でもマウスでも自由に動かせる。触れば止まる。 */
.voice-band{background:var(--navy);color:#fff;padding:clamp(54px,7vw,80px) 0;overflow:hidden}
.vb-head{max-width:var(--maxw);margin:0 auto clamp(26px,3.4vw,38px);padding:0 var(--pad);text-align:center}
.vb-eyebrow{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
  font-size:12px;letter-spacing:.32em;font-weight:700;color:var(--gold-soft);margin-bottom:12px}
.vb-title{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
  font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.4}
.vb-lead{font-size:14px;line-height:2;color:#d7deec;margin:12px 0 0}

.vb-track{display:flex;gap:18px;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:4px var(--pad);scrollbar-width:none;-ms-overflow-style:none}
.vb-track::-webkit-scrollbar{display:none}
.vb-card{flex:0 0 min(348px,80vw);display:flex;flex-direction:column;gap:14px;
  background:#fff;border-radius:var(--r-lg);padding:24px 22px 26px;
  transition:transform .35s cubic-bezier(.16,.66,.24,1),box-shadow .35s}
.vb-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.vb-sch{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
  font-size:16.5px;font-weight:700;color:var(--navy);letter-spacing:.02em}
.vb-go{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--gold);
  border-radius:100px;padding:3px 9px}
.vb-who{font-size:12px;font-weight:700;color:var(--muted);margin-left:auto}
.vb-q{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;
  font-size:15.5px;font-weight:700;line-height:1.95;color:var(--navy);margin:0}
@media (hover:hover){
  .vb-card:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(6,14,30,.28)}
}
.vb-foot{text-align:center;margin-top:clamp(24px,3.2vw,34px);padding:0 var(--pad)}
.vb-foot a{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#fff;
  border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:14px 30px}
.vb-foot a span{color:var(--gold-soft);transition:transform .35s cubic-bezier(.16,.66,.24,1)}
@media (hover:hover){
  .vb-foot a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
  .vb-foot a:hover span{transform:translateX(5px)}
}

/* お知らせ */
.news-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:32px}
.news-head .ttl{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:30px;font-weight:700}
.news-head .all{font-size:14.5px;font-weight:700;color:var(--brand-blue)}
.news-list{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.news-item{display:flex;align-items:center;gap:20px;padding:18px 24px;color:var(--ink);border-bottom:1px solid #f0ebe0}
.news-item:last-child{border-bottom:none}
a.news-item:hover{background:#faf8f2}
.news-item .date{font-size:12px;color:var(--label);font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;width:88px;flex:none}
.news-item .cat{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;flex:none}
.news-item .cat.blue{color:var(--brand-blue);background:var(--brand-blue-tint)}
.news-item .cat.green{color:var(--brand-green);background:var(--brand-green-tint)}
.news-item .cat.gold{color:var(--gold-deep);background:var(--gold-tint)}
.news-item .txt{font-size:15.5px;font-weight:700}

/* 電話セクション */
.phone-sec{padding:96px var(--pad);background:var(--navy);color:#fff}
.phone-sec .sec-title{color:#fff}
.phone-sec .eyebrow{color:var(--gold-soft)}
.phone-sec .sub{font-size:13px;color:#cdd6e8;margin-top:14px}
.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.phone-card{border:1px solid rgba(159,178,217,.4);border-radius:var(--r-lg);overflow:hidden}
.phone-card .cap{padding:12px 24px;font-weight:800;font-size:14px}
.phone-card .cap.blue{background:var(--brand-blue)}
.phone-card .cap.green{background:var(--brand-green)}
.phone-card .rows{display:grid;grid-template-columns:1fr 1fr}
.phone-card .rows>div{padding:24px}
.phone-card .rows>div:first-child{border-right:1px solid rgba(159,178,217,.25)}
.phone-card .map{border-radius:var(--r-sm);overflow:hidden;line-height:0;margin-bottom:14px;border:1px solid rgba(159,178,217,.3)}
.phone-card .map iframe{width:100%;height:150px;border:0;filter:saturate(.95)}
.phone-card .place{font-size:13px;font-weight:700;color:#fff}
.phone-card .num{display:inline-block;font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:24px;font-weight:700;color:#fff;margin-top:4px}
.phone-card .addr{font-size:12px;color:#cdd6e8;margin-top:8px;line-height:1.6}
.phone-card .maplink{display:inline-block;font-size:12px;font-weight:700;color:var(--on-navy-dim);margin-top:10px}
.phone-card .maplink:hover{color:#fff}
.phone-addr{margin-top:32px;text-align:center;font-size:13px;color:#cdd6e8}

/* お問い合わせCTA */
.contact-cta{padding:88px var(--pad);background:#fff;text-align:center;border-top:1px solid var(--line)}
.contact-cta .ttl{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:30px;font-weight:700;margin-bottom:12px;color:var(--navy)}
.contact-cta p{font-size:14px;color:var(--muted);line-height:1.9;max-width:560px;margin:0 auto 30px}
.contact-cta .btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.contact-cta .btn-blue{background:var(--brand-blue-tint);color:var(--brand-blue)}

/* フッター */
/* ── フッター ────────────────────────────────
   上段：ロゴ＋一言／サイトマップ2列   下段：4校舎の連絡先   最下段：著作表示 */
.site-footer{padding:0;background:var(--navy-deep);color:#9aa8c6;display:block}
.ft-in{max-width:var(--maxw);margin:0 auto;padding:56px var(--pad) 0}
.ft-top{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-brand .brand-logo-f{height:44px;width:auto;display:block;filter:brightness(0) invert(1);margin-bottom:16px}
.ft-brand .fname{font-size:13.5px;font-weight:800;color:#fff;margin-bottom:10px}
.ft-brand p{font-size:13px;line-height:1.95}
.ft-slogan{display:inline-block;margin-top:14px;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--gold-soft);border:1px solid rgba(216,180,92,.45);border-radius:100px;padding:6px 15px}
.ft-h{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--gold-soft);margin-bottom:16px}
.ft-nav{list-style:none;margin:0;padding:0}
.ft-nav li{margin-bottom:11px}
.ft-nav a{font-size:13.5px;color:#cfd8ea;transition:color .3s ease}
@media (hover:hover){.ft-nav a:hover{color:#fff}}

.ft-campus{padding:36px 0 40px;border-bottom:1px solid rgba(255,255,255,.12)}
.ft-campus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fc .fc-k{font-size:10.5px;font-weight:800;letter-spacing:.08em;margin-bottom:6px}
.fc.blue .fc-k{color:#8fa8dd}
.fc.green .fc-k{color:#63c79a}
.fc .fc-n{font-size:14px;font-weight:800;color:#fff;margin-bottom:8px}
.fc .fc-tel{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:19px;font-weight:700;color:var(--gold-soft);display:inline-block;margin-bottom:6px}
.fc .fc-ad{font-size:12.5px;line-height:1.8}
.ft-hours{font-size:12.5px;color:#8b98b8;margin-top:24px;text-align:center}

.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:22px var(--pad);max-width:var(--maxw);margin:0 auto}
.ft-bottom .links{display:flex;gap:22px;flex-wrap:wrap}
.ft-bottom a{font-size:12.5px;color:#9aa8c6;transition:color .3s ease}
@media (hover:hover){.ft-bottom a:hover{color:#fff}}
.site-footer .copy{font-size:12px;color:#7d8ba9}

@media (max-width:900px){
  .ft-top{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1 / -1}
  .ft-campus-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:560px){
  .ft-in{padding-top:44px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-campus-grid{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}

/* スマホ追従CTA */
.sp-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;grid-template-columns:1fr 1fr;box-shadow:0 -4px 16px rgba(21,42,82,.14)}
.sp-cta a{display:flex;align-items:center;justify-content:center;gap:7px;padding:15px 8px;font-weight:800;font-size:14.5px;color:#fff;line-height:1.3}
.sp-cta a .ic{width:17px;height:17px}
/* 電話＝濃紺（サイト内の基盤色）、無料体験＝朱（行動色）。
   青は集団授業、緑は個別指導の意味色なのでここでは使わない。 */
.sp-cta .tel{background:var(--navy)}
.sp-cta .trial-b{background:var(--vermilion)}

/* ============ 最大幅キャップ(背景は全幅・中身だけ中央) ============ */
/* 個別のセクション定義より後に置き、左右パディングを上書きして中身を中央寄せ */
.utilbar,
.site-header,
.sec-pad,
.stage-wrap,
.trial,
.phone-sec,
.contact-cta{
  padding-left:max(var(--pad), calc((100% - var(--maxw)) / 2));
  padding-right:max(var(--pad), calc((100% - var(--maxw)) / 2));
}
/* 強みストリップはラッパー(.stage-wrap)側で中央寄せするため左右マージンを解除 */
.strength{margin-left:0;margin-right:0}

/* ============ レスポンシブ ============ */
@media (max-width:960px){
  :root{--pad:24px}
  .utilbar{font-size:11px;gap:10px}
  .utilbar .right{gap:14px}
  :root{--hd-h:64px}
  .brand-logo{height:40px}
  .gnav{
    position:fixed;inset:var(--hd-h) 0 auto 0;flex-direction:column;gap:0;background:var(--navy);
    border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(21,42,82,.14);
    transform:translateY(-14px);opacity:0;visibility:hidden;transition:.25s;
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .gnav.is-open{transform:none;opacity:1;visibility:visible}
  .gnav a{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
  .header-cta{display:none}
  .nav-toggle{display:block}
  .sec-pad{padding:72px var(--pad)}
  .hero h1{font-size:40px}
  .strength-g{grid-template-columns:1fr 1fr}
  .strength .cell:nth-child(2){border-right:none}
  .strength .cell:nth-child(1),.strength .cell:nth-child(2){border-bottom:1px solid var(--line)}
  .concept-grid,.two-grid,.phone-grid{grid-template-columns:1fr}
  .feat4{grid-template-columns:1fr 1fr}
  .feat5{grid-template-columns:1fr 1fr}
  .course3{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr 1fr}
  .banner .inner{width:72%;padding:0 32px}
  .table-scroll .price-table{min-width:auto}
}
@media (max-width:600px){
  :root{--pad:18px}
  .site-header .brand-sub{display:none}   /* スマホではキャッチフレーズを非表示(ロゴ＋社名だけ) */
  .utilbar{flex-direction:column;gap:6px;padding:8px 18px}
  .utilbar .left{flex-direction:column;gap:4px;text-align:center}
  /* ヒーローはPCと同じ作り（写真いっぱい＋文字を上に載せる＋貼り付け）。
     以前は写真300pxで文字が下だったが、写真が画面の37%しかなく
     最初の印象が弱かった。
     貼り付けの距離だけは短くする。スマホは1画面ぶんも止まると長い。 */
  .hero-stage{height:calc(var(--hero-h) * 1.45)}
  .stage-wrap{margin-top:calc(var(--hero-h) * -0.45 - 60px)}
  /* 文字を写真の上に載せるので、覆いを濃くして可読性を確保する */
  .hero-overlay{background:linear-gradient(180deg,rgba(10,22,45,.42) 0%,rgba(10,22,45,.30) 38%,rgba(10,22,45,.62) 100%)}
  /* パネルは下寄せ。上下に振り分けると写真の見せ場が両方とも中途半端になる。
     人物や建物は画面の上側に写っていることが多いので、そこをまとめて空ける。 */
  .hero-inner{max-width:none;margin-left:var(--pad);margin-right:var(--pad);
    justify-content:flex-end;padding-top:var(--hd-h,64px);padding-bottom:96px}
  .hero-panel{padding:22px 20px;gap:14px;border-radius:var(--r-md)}
  .hero h1{font-size:clamp(26px,7.2vw,32px);line-height:1.5}
  .hero-lead{font-size:13.5px;line-height:1.9}
  .hero-tags{font-size:11px}
  /* ボタンは横並び。縦積みだと2つで135px使い、そのぶん写真が削られる。
     375px幅でも1つあたり160px以上あり、押しにくくはならない。 */
  .hero-btns{flex-direction:row;flex-wrap:nowrap;gap:10px}
  .hero-btns .btn{flex:1 1 0;min-width:0;width:auto;padding:14px 10px;font-size:13.5px;text-align:center;justify-content:center}
  /* スマホ用の写真は画面比率で切り直してあるので、ほぼ全体が映る。
     拡大と横振りはPCより控えめ（1.10・左右2.5%）。
     ここを小さくしすぎると動いて見えなくなる。 */
  .hs1 img,.hs3 img{animation-name:heroPanRsp}
  .hs2 img{animation-name:heroPanLsp}
  /* 下端のディザは、画面が狭いぶん薄めに */
  .hero::after{height:clamp(72px,11%,120px)}
  .strength{margin-top:20px}
  .strength-g{grid-template-columns:1fr 1fr}
  .strength-h{padding:11px 16px;flex-wrap:wrap;gap:4px 12px}
  .strength-h .t{font-size:12px}
  .strength-h a{font-size:11.5px}
  .strength .cell{padding:18px 10px 20px}
  .strength .sch{font-size:11.5px;margin-bottom:5px}
  .strength .cell:nth-child(odd){border-right:1px solid var(--line)}
  .strength .cell:nth-child(even){border-right:none}
  .strength .cell:nth-child(1),.strength .cell:nth-child(2){border-bottom:1px solid var(--line)}
  .strength .num{font-size:28px}
  .feat4,.feat5{grid-template-columns:1fr}
  .results-2026{grid-template-columns:1fr}
  .banner{height:300px}
  .banner>img{object-position:100% 28%}
  .banner .inner{width:100%;padding:0 24px;background:linear-gradient(90deg,rgba(255,255,255,.9) 42%,rgba(255,255,255,.55) 62%,rgba(255,255,255,0) 82%)}
  .banner .big{font-size:30px}
  .trial .big{font-size:28px}
  .phone-card .num{font-size:22px}
  .phone-card .rows{grid-template-columns:1fr}
  .phone-card .rows>div:first-child{border-right:none;border-bottom:1px solid rgba(159,178,217,.25)}
  .sp-cta{display:grid}
  .site-footer{padding-bottom:76px}
  .sec-title{font-size:26px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover{transform:none}}


/* ============ 理念ブロック（トップ・学年ページ共通） ============ */
/* キラーフレーズ：覚えさせる授業 */
.creed{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(36px,6vw,60px) clamp(24px,5vw,64px);margin:0;text-align:center}
/* 背景写真：濃紺を強めにかぶせて、うっすら透ける程度にする。
   文字は必ず写真の上に来るよう z-index を分けている。 */
.creed-bg{position:absolute;inset:0;z-index:0}
.creed-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
/* 背景をゆっくり横へ流す。ヒーローの heroPanR と同じ手だが、
   理念は読ませる場所なので、振り幅を半分・周期を倍以上にして
   「気づかないが止まってもいない」速さにしてある。
   alternate で往復させ、端で戻る瞬間の飛びを消す。 */
.creed.has-photo .creed-bg img{
  animation:creedPan 40s ease-in-out infinite alternate;
  will-change:transform
}
@keyframes creedPan{
  0%   {transform:scale(1.10) translate3d(-1.6%,0,0)}
  100% {transform:scale(1.10) translate3d(1.6%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .creed.has-photo .creed-bg img{animation:none;transform:none}
}
.creed.has-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(155deg,rgba(21,42,82,.90) 0%,rgba(15,30,61,.94) 60%,rgba(15,30,61,.96) 100%)}
.creed>*:not(.creed-bg){position:relative;z-index:2}
.creed-lead{font-size:11.5px;letter-spacing:.18em;font-weight:800;color:var(--gold-soft);margin-bottom:18px}
.creed-big{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:clamp(26px,5.4vw,44px);font-weight:700;line-height:1.5;margin-bottom:28px}
.creed-body{max-width:680px;margin:0 auto;text-align:left}
.creed-body p{font-size:15.5px;line-height:2.05;color:#dde4f0;margin-bottom:14px}
.creed-body strong{color:var(--gold-soft)}
/* 意味の切れ目で改行した組み（暁学園式）。段落間はゆったり空ける */
.creed-lines{text-align:center}
.creed-lines p{margin-bottom:26px}
.creed-lines p:last-child{margin-bottom:0}
.creed-body+.flow2{margin-top:34px}
.flow2+.creed-body{margin-top:0}
@media (max-width:640px){
  .creed-lines{text-align:left}
  .creed-lines p{margin-bottom:22px}
}
/* 理念ブロック → 理念ページへの導線 */
.creed-more{margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,255,255,.18)}
.creed-more a{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--gold-soft);
  border:1px solid rgba(216,180,92,.5);border-radius:100px;padding:14px 30px;transition:background-color .3s ease,color .3s ease}
.creed-more a .ic{width:18px;height:18px}
@media (hover:hover){.creed-more a:hover{background:var(--gold-soft);color:var(--navy)}}
.creed-more-sub{font-size:13px;color:var(--on-navy-dim);margin-top:14px}

.creed-note{font-size:12.5px!important;color:var(--on-navy-dim)!important;margin:0!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.18)}

/* 図3：教えて終わり／覚えさせる の対比フロー */
.flow2{display:grid;gap:12px;max-width:680px;margin:0 auto 30px;text-align:left}
.fl{border-radius:var(--r-lg);padding:16px 18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05)}
.fl-tag{font-size:13.5px;font-weight:800;letter-spacing:.08em;margin-bottom:13px;color:var(--on-navy-dim)}
.fl-steps{display:flex;align-items:stretch;gap:6px}
.fs{flex:1;display:grid;place-items:center;text-align:center;font-size:clamp(13px,3.1vw,16px);font-weight:800;line-height:1.35;padding:12px 4px;border-radius:var(--r-sm);white-space:nowrap}
.fa{flex:none;display:grid;place-items:center;font-size:13px}
.fl-bad .fs{color:#96a1b6;background:rgba(255,255,255,.05)}
.fl-bad .fs.end{color:#d99a8e;background:rgba(217,154,142,.12)}
.fl-bad .fa{color:#6b7891}
.fl-good{border-color:var(--brand-green);background:rgba(30,143,90,.16)}
.fl-good .fl-tag{color:#63d49e}
.fl-good .fs{color:#fff;background:rgba(255,255,255,.10)}
.fl-good .fs.end{background:var(--brand-green);color:#fff}
.fl-good .fa{color:#63d49e}
@media (max-width:420px){
  .fl{padding:14px 12px}
  .fl-steps{gap:3px}
  .fs{padding:10px 2px;letter-spacing:-.02em}
}


/* ============ 入口（学年から選ぶ）と 解説（2つの学び方）の描き分け ============
   学年から選ぶ＝サイトの主導線。帯で囲い、カード＋ボタンで「押す場所」と分かるようにする。
   2つの学び方＝ただの説明。カード・写真・リンクを持たせず、罫線で仕切るだけにする。   */
.grade-band{background:var(--navy-tint)}
.grade-card .gc-more{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:14px;font-weight:800;color:var(--navy);
  border:1.5px solid var(--navy);border-radius:100px;padding:10px 22px;
  transition:background-color .3s ease,color .3s ease,transform .3s cubic-bezier(.16,.66,.24,1)
}
@media (hover:hover){
  .grade-card:hover .gc-more{background:var(--navy);color:#fff;transform:none}
}

.ways-flat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);max-width:960px;margin:0 auto;position:relative}
.ways-flat::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;background:var(--line)}
/* 写真は入れるが「カードの天面画像」に見せない。
   学年カードが4:3なのに対しこちらは16:7の横長帯にして形で差をつけ、
   枠線・影・ホバーは持たせない。 */
.wf-photo{width:100%;aspect-ratio:16/7;overflow:hidden;border-radius:var(--r-sm);background:var(--bg);margin-bottom:22px}
.wf-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}

.wf-k{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.wf-k .dot{width:9px;height:9px;border-radius:50%;flex:none}
.wf-k .dot.blue{background:var(--brand-blue)}
.wf-k .dot.green{background:var(--brand-green)}
.wf-t{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',YuMincho,serif;font-size:clamp(21px,3vw,27px);font-weight:700;color:var(--navy);margin:10px 0 14px}
.wf p{font-size:15px;line-height:2.05;color:var(--text)}
.ways-foot{text-align:center;font-size:14px;color:var(--muted);margin-top:44px}
.ways-foot strong{color:var(--navy)}
@media (max-width:760px){
  .ways-flat{grid-template-columns:1fr;gap:0}
  .ways-flat::before{display:none}
  .ways-flat .wf+.wf{margin-top:30px;padding-top:30px;border-top:1px solid var(--line)}
  .wf-photo{aspect-ratio:16/8}
}

/* ============ スクロール演出(フェードイン/スライド) ============ */
[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.2s cubic-bezier(.16,.66,.24,1), transform 1.2s cubic-bezier(.16,.66,.24,1);
  will-change:opacity,transform;
}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="scale"]{transform:scale(.955)}
[data-reveal].is-visible{opacity:1;transform:none}
/* 出現し終わったら will-change を外す（合成レイヤーを保持し続けない） */
[data-reveal].is-visible{will-change:auto}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ============ ホバー・インタラクション ============ */
/* カード類：わずかに浮かせて影をつける。上罫の色はそのまま活かす */
.grade-card,.way,.rc,a.news-item,.feat,.pillar,.eb-card,.course{
  transition:transform .45s cubic-bezier(.16,.66,.24,1), box-shadow .45s cubic-bezier(.16,.66,.24,1);
}
@media (hover:hover){
  .grade-card:hover,.rc:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(21,42,82,.12)}
  .feat:hover,.pillar:hover,.eb-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(21,42,82,.08)}
  a.news-item:hover{transform:translateX(3px)}
}
/* ボタン：押せる感じを出す。既存の .btn:hover(translateY) と併用 */
.btn,.header-cta,.more-link,.eb-link,.gc-more,.results-more{
  transition:transform .35s cubic-bezier(.16,.66,.24,1), box-shadow .35s ease, background-color .3s ease, color .3s ease;
}
@media (hover:hover){
  .btn-green:hover{box-shadow:0 12px 26px rgba(179,64,46,.36)}
  .more-link:hover,.eb-link:hover,.gc-more:hover{transform:translateX(4px)}
}
/* リンク矢印：ホバーで少し伸びる */
@media (hover:hover){
  .to-grade .tg-links a:hover{transform:translateX(3px)}
}
.to-grade .tg-links a{transition:transform .35s cubic-bezier(.16,.66,.24,1)}
/* 写真：ゆっくり寄る */
.gc-photo,.dh-photo,.proof-photo{overflow:hidden}
.gc-photo img,.dh-photo img,.proof-photo img{transition:transform 1.1s cubic-bezier(.16,.66,.24,1)}
@media (hover:hover){
  .grade-card:hover .gc-photo img{transform:scale(1.05)}
}
/* カウントアップ中の数字がガタつかないよう桁を固定 */
.rc-num,.proof-list .n,.kv .v{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  .grade-card,.way,.rc,a.news-item,.feat,.pillar,.eb-card,.course,
  .btn,.header-cta,.more-link,.results-more,.eb-link,.gc-more,
  .gc-photo img,.dh-photo img,.proof-photo img{transition:none !important;transform:none !important}
}