/* =========================================================
   Swimmy トップページ再構築 - Concept A「オーガニックブロブ」
   有機的な波形（ブロブ）シェイプを全編に使用したビジュアル言語
   ========================================================= */

:root {
  --yellow: #fdc600;
  --yellow-deep: #f59a1f;
  --blue: #3d87c3;
  --blue-light: #87b5da;
  --green: #3d963b;
  --green-light: #79ca77;
  --navy: #1c2a45;
  --navy-deep: #101a2e;
  /* 文字色はブランド炭 DIC-N957 #4e5255 を基準にした中立グレー3段。
     紙地が温かい #fffdf7 なので、青みのあるスレートより馴染む。
     --navy は背景・境界線に残っているため文字用トークンとは分けてある。 */
  --ink-strong: #33373a;   /* 見出し 11.81:1 */
  --ink: #4e5255;          /* 本文   7.76:1 */
  --ink-soft: #666b6f;     /* 副次   5.30:1 */
  --paper: #fffdf7;
  --line: #e7e2d4;

  --grad-yellow: linear-gradient(135deg, #fdc600 0%, #f59a1f 100%);
  --grad-blue: linear-gradient(135deg, #3d87c3 0%, #87b5da 100%);
  --grad-green: linear-gradient(135deg, #3d963b 0%, #79ca77 100%);
  --grad-tri: linear-gradient(120deg, #fdc600 0%, #3d87c3 55%, #3d963b 100%);

  --shadow-soft: 0 14px 34px -18px rgba(28, 42, 69, 0.35);
  /* 楕円の切り抜き。同じ形が並ぶと反復が目立つので 12 種を用意し、
     繰り返す要素には下の :nth-child() で順に配る（カスタムプロパティは継承するので、
     親で --radius-blob を上書きすると中の切り抜きが変わる）。
     コンポーネントごとに開始位置をずらし、1 ページ内で同じ形が再利用されないようにしてある。
     値は 43〜57% の範囲に収め、対角どうしを補数（a と 100-a）にする。
     以前は 30〜70% で振っていたが、涙型に尖った形が混ざって歪んで見えたため、
     円に近い丸みを保ったまま揺らぐ値へ寄せてある。 */
  --radius-blob-1: 57% 47% 43% 53% / 54% 45% 46% 55%;
  --radius-blob-2: 46% 56% 54% 44% / 44% 53% 56% 47%;
  --radius-blob-3: 55% 44% 45% 56% / 47% 57% 53% 43%;
  --radius-blob-4: 44% 54% 56% 46% / 56% 46% 44% 54%;
  --radius-blob-5: 53% 57% 47% 43% / 45% 55% 55% 45%;
  --radius-blob-6: 47% 45% 53% 55% / 57% 44% 43% 56%;
  --radius-blob-7: 56% 46% 44% 54% / 53% 56% 47% 44%;
  --radius-blob-8: 45% 55% 55% 45% / 46% 47% 54% 53%;
  --radius-blob-9: 54% 45% 46% 55% / 55% 54% 45% 46%;
  --radius-blob-10: 46% 57% 54% 43% / 44% 45% 56% 55%;
  --radius-blob-11: 57% 54% 43% 46% / 56% 47% 44% 53%;
  --radius-blob-12: 44% 46% 56% 54% / 45% 56% 55% 44%;
  --radius-blob: var(--radius-blob-1);   /* 既定 */

  /* メンター写真の色影に使う形（写真と同じ番号を使う）。
     半径を 40〜60% に限って楕円らしさは保ったまま、どこが膨らむかだけを
     写真からずらしてある。写真の輪郭 480 点すべてが色影の内側に入ることを
     測って選んであるので、円周上のどこでも色が外側にはみ出す。
     コメントの数値は形の違いの大きさと、そのときの縁の太さ。 */
  --radius-echo-1: 55% 51% 41% 51% / 52% 43% 52% 60%;   /* 写真との差 25% ・ 縁 2.8〜11.6px */
  --radius-echo-2: 47% 52% 60% 42% / 40% 57% 56% 54%;   /* 写真との差 28% ・ 縁 2.4〜13.1px */
  --radius-echo-3: 49% 43% 44% 48% / 46% 58% 49% 42%;   /* 写真との差 23% ・ 縁 3.5〜11.0px */
  --radius-echo-4: 45% 58% 59% 44% / 59% 43% 47% 55%;   /* 写真との差 20% ・ 縁 4.0〜11.4px */
  --radius-echo-5: 46% 50% 50% 42% / 50% 58% 53% 44%;   /* 写真との差 29% ・ 縁 3.0〜12.0px */
  --radius-echo-6: 44% 48% 47% 50% / 58% 40% 42% 54%;   /* 写真との差 25% ・ 縁 4.5〜11.0px */
  --radius-echo-7: 56% 52% 49% 49% / 57% 54% 45% 48%;   /* 写真との差 28% ・ 縁 3.6〜11.5px */
  --radius-echo-8: 42% 52% 49% 49% / 43% 48% 52% 46%;   /* 写真との差 29% ・ 縁 3.4〜12.2px */
  --radius-echo-9: 49% 50% 44% 60% / 56% 52% 50% 43%;   /* 写真との差 28% ・ 縁 3.2〜12.9px */
  --radius-echo-10: 50% 50% 52% 51% / 45% 49% 59% 51%;   /* 写真との差 33% ・ 縁 2.2〜13.1px */
  --radius-echo-11: 57% 59% 53% 47% / 60% 48% 40% 53%;   /* 写真との差 25% ・ 縁 2.0〜11.1px */
  --radius-echo-12: 45% 50% 46% 53% / 45% 50% 58% 41%;   /* 写真との差 28% ・ 縁 2.4〜12.8px */

  /* ボタンの角丸はピル。999px は「高さの半分」に丸められるので、
     ボタンの高さが変わっても常にスタジアム形を保つ。
     大小でトークンを分けてあるのは、ピルをやめるときに
     小（.nav-action 33px）と大（.btn 48px）で別の値が要るため
     （閾値は高さの半分なので、単一の px 値だと丸みの比率が揃わない）。 */
  --radius-btn: 999px;      /* 小さいボタン用（.nav-action / .skip-link） */
  --radius-btn-lg: 999px;   /* .btn（48px 前後）用 */

  /* CTA ボタン。地色は上のブランドトークンを参照する（literal で持つと
     ブランド色を変えたときにボタンだけ取り残されて色が 2 系統に割れる）。
     *-edge は下辺に敷く一段濃い縁で、面に厚みを出すためのもの。
     白文字とのコントラストは緑 3.73:1・青 3.85:1 で AA（4.5:1）には届かない。
     AA を満たしたくなったら、色相・彩度を保ったまま地色を
     #368635（4.55:1）/ #377bb2（4.53:1）に差し替える。 */
  --cta-warm: var(--yellow);   /* 無料体験。黄に白文字は 1.58:1 で読めないため
                                  文字はロゴと同じブランド炭 #4e5255（4.98:1・AA 合格） */
  --cta-warm-edge: #c09600;
  --cta-warm-ink: #4e5255;
  --cta-green: var(--green);   /* 入校お申し込み */
  --cta-green-edge: #2b6a2a;
  --cta-blue: var(--blue);     /* 校舎検索など */
  --cta-blue-edge: #2e6795;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Inter を先頭に置くと、Inter が持つ文字（数字・欧文）だけ Inter で描かれ、
     日本語は次の Noto Sans JP に落ちる。数字だけ差し替える一般的な書き方。 */
  font-family: "Inter", "Noto Sans JP", "Hiragino Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; color: var(--ink-strong); }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -56px;
  z-index: 300;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 16px;
}

/* キーボード操作時だけ見えるフォーカスリング（マウス操作の見た目は変えない） */
:focus {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}


.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* 実績の見出しに差し込む数値。カード側の数字（.stat-number）と字面を揃えたうえで、
   前後の文言よりかなり大きくして数字を主役にする */
.text-accent {
  color: var(--blue);
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.75em;
  line-height: 1;
  /* 大きくしても行の高さを押し広げないよう、はみ出す分は視覚補正で吸収する */
  margin: 0 0.04em;
  vertical-align: -0.06em;
}
.title-mobile { display: none; }

/* -------------------------------------------------
   共通セクション装飾（背景色 / 波形 / 手描き風イラスト）
------------------------------------------------- */

.section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background-color: var(--paper);
  background-repeat: no-repeat;
}

.section-yellow { background-color: #fff8e3; }
.section-green { background-color: #f1f9e8; }

.section-wave { position: absolute; left: 0; width: 100%; height: 70px; z-index: 0; }
.section-wave--top { top: -1px; transform: scaleX(-1); }
.section-wave--bottom { bottom: -1px; }
.section--compact { padding: 64px 0; }
.section-wave path { fill: var(--paper); }
.section-yellow > .section-wave path,
.section-yellow ~ .section-wave path { fill: #fff8e3; }
.section-green > .section-wave path { fill: #f1f9e8; }
.section .container { z-index: 2; }

/* 各セクション固有の手描き風背景装飾イラスト（控えめな不透明度で配置） */
.deco-cloud::before,
.deco-cloud::after,
.deco-gears::before,
.deco-gears::after,
.deco-blocks::before,
.deco-pencil::before,
.deco-sparkle::before,
.deco-sparkle::after,
.deco-controller::before,
.deco-circuit-light::before,
.deco-circuit-dark::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.16;
}

/* ACHIEVEMENT ロケット装飾 */
.rocket-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.rocket-deco__unit {
  position: absolute;
  /* 素材は 1024x1536（2:3）。箱も同じ比率にして実体に沿わせる
     （正方形のままだと左右に空きが出てロケットが内側にずれる）。
     箱が実体に沿ったぶんオフセットは元のままでよい。外へ押すと
     幅 127px に対して 56px が画面外に出て大きく欠ける。
     火花は left: 50% の中央基準なので、幅を変えても位置は保たれる。 */
  opacity: 0.28;
  will-change: transform;
}
.rocket-deco__unit--main {
  top: 22%;
  right: -24px;
  width: 127px;
  height: 190px;
  transform-origin: 50% 60%;
  animation: rocket-main-float 5.5s ease-in-out infinite;
}
.rocket-deco__unit--side {
  top: 34%;
  left: -18px;
  width: 72px;
  height: 108px;
  opacity: 0.22;
  transform-origin: 50% 60%;
  animation: rocket-side-float 7s ease-in-out infinite;
}
.rocket-deco__ship {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rocket-deco__spark {
  position: absolute;
  left: 50%;
  top: 76%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  background: #fdc600;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  transform-origin: center;
  animation: rocket-spark-spray 2.4s ease-out infinite;
}
.rocket-deco__spark--1 { animation-delay: 0s; }
.rocket-deco__spark--2 {
  width: 18px;
  height: 18px;
  margin-left: -9px;
  background: #3d963b;
  animation-name: rocket-spark-spray-2;
  animation-delay: 0.35s;
}
.rocket-deco__spark--3 {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #3d87c3;
  animation-name: rocket-spark-spray-3;
  animation-delay: 0.7s;
}
.rocket-deco__spark--4 {
  width: 20px;
  height: 20px;
  margin-left: -10px;
  background: #fdc600;
  animation-name: rocket-spark-spray-2;
  animation-delay: 1.05s;
}
.rocket-deco__spark--5 {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #3d963b;
  animation-name: rocket-spark-spray-3;
  animation-delay: 1.4s;
}
.rocket-deco__unit--side .rocket-deco__spark {
  animation-duration: 2.8s;
  animation-name: rocket-spark-spray-side;
}
.rocket-deco__unit--side .rocket-deco__spark--1 { animation-delay: 0.2s; }
.rocket-deco__unit--side .rocket-deco__spark--2 { animation-delay: 0.9s; }
.rocket-deco__unit--side .rocket-deco__spark--3 { animation-delay: 1.6s; }

@keyframes rocket-main-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(12deg);
  }
  25% {
    transform: translate3d(-4px, -10px, 0) rotate(8deg);
  }
  50% {
    transform: translate3d(6px, -16px, 0) rotate(14deg);
  }
  75% {
    transform: translate3d(3px, -8px, 0) rotate(10deg);
  }
}

@keyframes rocket-side-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-18deg) scaleX(-1);
  }
  30% {
    transform: translate3d(8px, 12px, 0) rotate(-12deg) scaleX(-1);
  }
  55% {
    transform: translate3d(-6px, -8px, 0) rotate(-22deg) scaleX(-1);
  }
  80% {
    transform: translate3d(4px, 6px, 0) rotate(-15deg) scaleX(-1);
  }
}

@keyframes rocket-spark-spray {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5) rotate(0deg);
  }
  12% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate3d(-28px, 72px, 0) scale(1.15) rotate(120deg);
  }
}

@keyframes rocket-spark-spray-side {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45) rotate(0deg);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(22px, 58px, 0) scale(1.05) rotate(-140deg);
  }
}

@keyframes rocket-spark-spray-2 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  12% { opacity: 0.9; }
  100% {
    opacity: 0;
    transform: translate3d(14px, 68px, 0) scale(1.05) rotate(-90deg);
  }
}

@keyframes rocket-spark-spray-3 {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.45);
  }
  12% { opacity: 0.85; }
  100% {
    opacity: 0;
    transform: translate3d(-40px, 58px, 0) scale(0.95) rotate(80deg);
  }
}
.deco-cloud::before {
  background-image: url("../assets/images/deco-cloud-blue.webp");
  width: 220px;
  height: 160px;
  top: 4%;
  left: -40px;
  opacity: 0.18;
  will-change: transform;
  animation: deco-cloud-drift 12s ease-in-out infinite;
}
.deco-cloud::after {
  background-image: url("../assets/images/deco-cloud-blue.webp");
  width: 150px;
  height: 110px;
  bottom: 8%;
  right: -20px;
  opacity: 0.14;
  will-change: transform;
  animation: deco-cloud-drift-alt 15s ease-in-out infinite;
}
.deco-gears::before {
  background-image: url("../assets/images/deco-gears.svg");
  width: 200px;
  height: 200px;
  bottom: -30px;
  left: -40px;
  opacity: 0.13;
}
.deco-gears::after {
  background-image: url("../assets/images/deco-gears.svg");
  width: 120px;
  height: 120px;
  top: 6%;
  right: 2%;
  opacity: 0.1;
}

/* FEATURES 歯車装飾（それぞれがその場で回転） */
.gears-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.gears-deco__gear {
  position: absolute;
  display: block;
  /* 素材は 1536x1024（3:2）の canvas に正方形のギアが中央配置されている。
     高さだけ指定して width: auto にし、比率どおりに描かせる。
     箱が高さの 1.5 倍に広がるぶん、左右のオフセットは 0.25 x 高さ だけ内側へ補正してある。 */
  object-fit: contain;
  opacity: 0.18;
  will-change: transform;
  transform-origin: 50% 50%;
}
.gears-deco__gear--right-lg {
  top: 8%;
  right: -60px;
  width: auto;
  height: 160px;
  animation: gear-spin 16s linear infinite;
}
.gears-deco__gear--right-sm {
  top: 22%;
  right: 72px;
  width: auto;
  height: 96px;
  opacity: 0.16;
  animation: gear-spin-rev 12s linear infinite;
}
.gears-deco__gear--left-lg {
  bottom: 12%;
  left: -60px;
  width: auto;
  height: 128px;
  opacity: 0.16;
  animation: gear-spin 18s linear infinite;
}
.gears-deco__gear--left-sm {
  bottom: 28%;
  left: 60px;
  width: auto;
  height: 72px;
  opacity: 0.15;
  animation: gear-spin-rev 11s linear infinite;
}

@keyframes gear-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gear-spin-rev {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes deco-cloud-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(18px, -10px, 0);
  }
  50% {
    transform: translate3d(30px, 4px, 0);
  }
  75% {
    transform: translate3d(10px, -6px, 0);
  }
}

@keyframes deco-cloud-drift-alt {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1);
  }
  30% {
    transform: translate3d(-16px, 8px, 0) scaleX(-1);
  }
  55% {
    transform: translate3d(-28px, -4px, 0) scaleX(-1);
  }
  80% {
    transform: translate3d(-8px, 6px, 0) scaleX(-1);
  }
}

@keyframes deco-cloud-drift-sm {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.65);
  }
  25% {
    transform: translate3d(12px, -6px, 0) scale(0.65);
  }
  50% {
    transform: translate3d(20px, 3px, 0) scale(0.65);
  }
  75% {
    transform: translate3d(8px, -4px, 0) scale(0.65);
  }
}

@keyframes deco-cloud-drift-alt-sm {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleX(-1) scale(0.65);
  }
  30% {
    transform: translate3d(-10px, 6px, 0) scaleX(-1) scale(0.65);
  }
  55% {
    transform: translate3d(-18px, -3px, 0) scaleX(-1) scale(0.65);
  }
  80% {
    transform: translate3d(-6px, 4px, 0) scaleX(-1) scale(0.65);
  }
}
.deco-blocks::before {
  background-image: url("../assets/images/deco-blocks.svg");
  width: 160px; height: 176px;
  top: 8%; right: -20px;
}
.deco-pencil::before {
  background-image: url("../assets/images/deco-pencil.svg");
  width: 170px; height: 170px;
  bottom: -20px; right: 0;
  opacity: 0.14;
}
.deco-sparkle::before {
  background-image: url("../assets/images/deco-sparkle.svg");
  width: 170px; height: 170px;
  top: 4%; left: -30px;
}
.deco-sparkle::after {
  background-image: url("../assets/images/deco-sparkle.svg");
  width: 120px; height: 120px;
  bottom: 6%; right: -10px;
  opacity: 0.1;
}
.deco-controller::before {
  background-image: url("../assets/images/deco-controller.svg");
  width: 190px; height: 122px;
  bottom: 4%; left: -30px;
}
.deco-circuit-light::before {
  background-image: url("../assets/images/deco-circuit-light.svg");
  width: 420px;
  height: 160px;
  top: 4%;
  left: -40px;
  opacity: 0.14;
  will-change: transform, opacity;
  animation: deco-circuit-drift 14s ease-in-out infinite;
}
.deco-circuit-light::after {
  background-image: url("../assets/images/deco-circuit-light.svg");
  width: 300px;
  height: 120px;
  bottom: 6%;
  right: -30px;
  opacity: 0.1;
  transform: scaleX(-1);
  will-change: transform, opacity;
  animation: deco-circuit-drift-alt 18s ease-in-out infinite;
}

@keyframes deco-circuit-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.12;
  }
  35% {
    transform: translate3d(28px, -10px, 0);
    opacity: 0.2;
  }
  65% {
    transform: translate3d(12px, 8px, 0);
    opacity: 0.15;
  }
}
@keyframes deco-circuit-drift-alt {
  0%, 100% {
    transform: scaleX(-1) translate3d(0, 0, 0);
    opacity: 0.08;
  }
  40% {
    transform: scaleX(-1) translate3d(-24px, 10px, 0);
    opacity: 0.16;
  }
  70% {
    transform: scaleX(-1) translate3d(-8px, -6px, 0);
    opacity: 0.11;
  }
}
@keyframes deco-circuit-drift-sm {
  0%, 100% {
    transform: scale(0.65) translate3d(0, 0, 0);
    opacity: 0.1;
  }
  35% {
    transform: scale(0.65) translate3d(16px, -6px, 0);
    opacity: 0.16;
  }
  65% {
    transform: scale(0.65) translate3d(8px, 5px, 0);
    opacity: 0.12;
  }
}
@keyframes deco-circuit-drift-alt-sm {
  0%, 100% {
    transform: scaleX(-1) scale(0.65) translate3d(0, 0, 0);
    opacity: 0.08;
  }
  40% {
    transform: scaleX(-1) scale(0.65) translate3d(-14px, 6px, 0);
    opacity: 0.14;
  }
  70% {
    transform: scaleX(-1) scale(0.65) translate3d(-4px, -4px, 0);
    opacity: 0.1;
  }
}
.deco-circuit-dark::before {
  background-image: url("../assets/images/deco-circuit-dark.svg");
  width: 100%; height: 160px;
  bottom: 0; left: 0;
  opacity: 0.5;
}

/* -------------------------------------------------
   セクション見出し
------------------------------------------------- */
.section-header { max-width: 640px; margin-bottom: 48px; }
.section-header--center { max-width: 700px; margin-left: auto; margin-right: auto; text-align: center; }

.section-en {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.24em;
  /* Lighthouse コントラスト: ブランド青 #3d87c3 は薄い背景で 3.79:1 と不足するため、
     色相・彩度を保ったまま明度だけ落とした濃い青にする（紙地上 5.34:1） */
  color: #316ea0;
  /* 行送りを詰めておかないと、下に付く空き（half-leading）で
     見出しとの間隔が指定値より広く見える */
  line-height: 1.2;
  margin-bottom: 6px;
}
.section-title {
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.35;
  margin-bottom: 16px;
}
.section-lead { color: var(--ink-soft); font-size: 15.5px; }

/* -------------------------------------------------
   ボタン
------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: var(--radius-btn-lg);
  font-weight: 700;
  font-size: 15px;
  /* body の 1.8 は本文用。継承するとラベル 1 行に 27px の行ボックスが割り当てられ、
     padding と合わせて 61px の過大なボタンになる */
  line-height: 1.45;
  /* transparent border + gradient causes vertical seam artifacts on pill edges */
  border: none;
  background-clip: padding-box;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: var(--cta-blue);
  color: #fff;
  box-shadow: 0 3px 0 var(--cta-blue-edge);
}
.btn-outline {
  background: #fff;
  border: 2px solid var(--navy);
  /* 2px の枠のぶんだけ padding を減らし、.btn と同じ高さに揃える */
  padding: 11px 26px;
  color: var(--ink-strong);
}
.btn-cta {
  background: var(--cta-warm);
  color: var(--cta-warm-ink);
  box-shadow: 0 3px 0 var(--cta-warm-edge);
}
.btn-cta--enroll {
  background: var(--cta-green);
  color: #fff;
  box-shadow: 0 3px 0 var(--cta-green-edge);
}
.btn-cta--school {
  background: var(--cta-blue);
  color: #fff;
  box-shadow: 0 3px 0 var(--cta-blue-edge);
}
.btn-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

/* -------------------------------------------------
   ヘッダー
------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* ヘッダーは canvas（温かい紙地）ではなく chrome なので白で独立させる。
     背後に #fff8e3 などの温かいセクションが来たとき、同時対比で紙地色だと
     沈んで見える。罫線も --line（#e7e2d4）のままだと白地の下でベージュが浮くため中立にする。 */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(28, 42, 69, 0.10);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo img { height: 56px; width: auto; }

/* グローバルナビは上段（更新系コンテンツ）＋下段（主要導線）の 2 段構成 */
.global-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}
.global-nav ul { display: flex; align-items: center; gap: 22px; }
.global-nav__utility { gap: 18px; }
/* li を flex にして中の a をブロック化する。inline のままだと a の縦 padding が
   行ボックスに算入されず、CTA ボタンだけが行からはみ出して
   ヘッダー下端との余白が潰れる（ロゴ側は 14px 空くので不揃いに見える） */
.global-nav__item { display: flex; align-items: center; }
/* CTA 同士だけ ul の gap(22px) を打ち消して詰め、2 つで 1 組に見せる */
.global-nav__item--action + .global-nav__item--action { margin-left: -14px; }
.global-nav a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-strong);
  position: relative;
  padding: 6px 0;
  /* body の 1.8 は本文用。継承するとナビ 2 段とボタンが縦に伸びて
     ヘッダーの上下余白が消えるため、UI 用の行間に上書きする */
  line-height: 1.45;
}
.global-nav__utility a {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 2px 0;
  transition: color 0.18s ease;
}
.global-nav__utility a:hover { color: var(--ink-strong); }
/* 上段は下線ホバーを出さない（下段の主要導線と役割を分けるため） */
.global-nav__utility a::after { display: none; }
.global-nav a:not(.nav-action)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--blue);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.global-nav a:not(.nav-action):hover::after { transform: scaleX(1); }
.nav-action {
  /* 縦 6px + line-height 21px = 33px。隣のテキストリンクの箱と同じ高さに揃える */
  padding: 6px 18px !important;
  border-radius: var(--radius-btn);
  font-weight: 800 !important;
  white-space: nowrap;
}
.nav-action--trial {
  background: var(--cta-warm);
  color: var(--cta-warm-ink) !important;
  box-shadow: 0 2px 0 var(--cta-warm-edge);
}
.nav-action--enroll {
  background: var(--cta-green);
  color: #fff !important;
  box-shadow: 0 2px 0 var(--cta-green-edge);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 3px;
  border-radius: 3px;
  background: var(--navy);
}

@media (max-width: 1180px) {
  .global-nav ul { gap: 18px; }
  .global-nav__utility { gap: 15px; }
  .global-nav a { font-size: 13.5px; }
  .global-nav__utility a { font-size: 11px; }
}

/* -------------------------------------------------
   ヒーロー
------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hero-bg-tint {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.72) 0%, rgba(16, 26, 46, 0.35) 42%, rgba(28, 42, 69, 0.55) 100%);
}

.hero-blob-float {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.28),
    inset -10px -14px 28px rgba(255, 255, 255, 0.12),
    0 8px 24px rgba(16, 26, 46, 0.08);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 52%),
    var(--grad-tri);
  will-change: transform, border-radius;
  animation:
    hero-bubble-float 18s ease-in-out infinite,
    hero-bubble-morph 11s ease-in-out infinite;
}
.hero-blob-float--a {
  width: 280px;
  height: 280px;
  top: -60px;
  right: -40px;
  opacity: 0.42;
  border-radius: 58% 42% 46% 54% / 52% 48% 55% 45%;
  animation-duration: 18s, 13s;
  animation-delay: 0s, 0s;
}
.hero-blob-float--b {
  width: 140px;
  height: 140px;
  bottom: 22%;
  left: -28px;
  opacity: 0.38;
  border-radius: 46% 54% 58% 42% / 48% 60% 40% 52%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.08) 28%, transparent 52%),
    var(--grad-blue);
  animation-name: hero-bubble-float-alt, hero-bubble-morph-alt;
  animation-duration: 14s, 9s;
  animation-delay: -4s, -2s;
}

@keyframes hero-bubble-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(-18px, 22px, 0) scale(1.04);
  }
  50% {
    transform: translate3d(12px, 40px, 0) scale(0.97);
  }
  75% {
    transform: translate3d(22px, 14px, 0) scale(1.02);
  }
}

@keyframes hero-bubble-float-alt {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(16px, -20px, 0) scale(1.05);
  }
  50% {
    transform: translate3d(-10px, -36px, 0) scale(0.96);
  }
  75% {
    transform: translate3d(-20px, -12px, 0) scale(1.03);
  }
}

@keyframes hero-bubble-morph {
  0%,
  100% {
    border-radius: 58% 42% 46% 54% / 52% 48% 55% 45%;
  }
  20% {
    border-radius: 42% 58% 52% 48% / 44% 56% 40% 60%;
  }
  40% {
    border-radius: 50% 50% 38% 62% / 60% 42% 58% 40%;
  }
  60% {
    border-radius: 62% 38% 55% 45% / 48% 55% 45% 52%;
  }
  80% {
    border-radius: 45% 55% 60% 40% / 55% 45% 52% 48%;
  }
}

@keyframes hero-bubble-morph-alt {
  0%,
  100% {
    border-radius: 46% 54% 58% 42% / 48% 60% 40% 52%;
  }
  25% {
    border-radius: 60% 40% 45% 55% / 55% 45% 58% 42%;
  }
  50% {
    border-radius: 40% 60% 55% 45% / 42% 50% 50% 58%;
  }
  75% {
    border-radius: 55% 45% 42% 58% / 50% 58% 42% 50%;
  }
}

.hero-inner { position: relative; z-index: 2; padding: 140px 0 160px; }
.hero-text { max-width: min(820px, calc(100vw - 48px)); color: #fff; }
.hero-badges { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  box-shadow: var(--shadow-soft);
}
/* 地色はブランド単色。丸い形（999px）はバッジらしさとして残す */
.badge-blue { background: var(--blue); }
.badge-yellow { background: var(--yellow); color: var(--ink-strong); }
.badge-green { background: var(--green); }
.badge-navy { background: var(--navy); color: #fff; }

/* ヒーロースライダー */
.hero-slider { min-height: 92vh; }
.hero-slider__slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.85s ease, visibility 0.85s ease;
  z-index: 0;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.hero-slide__bg { position: absolute; inset: 0; overflow: hidden; }
.hero-slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 9s ease;
}
.hero-slide.is-active .hero-slide__bg img { transform: scale(1); }
.hero-slide .hero-inner {
  position: relative;
  z-index: 2;
  padding-top: clamp(96px, 12vh, 128px);
  padding-bottom: 120px;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
}
.hero-slide .hero-text {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
  max-width: min(820px, calc(100vw - 48px));
  padding-bottom: 12px;
}
.hero-slide.is-active .hero-text {
  opacity: 1;
  transform: translateY(0);
}
.hero-eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px);
}
.hero-slide-heading {
  color: #fff;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.4;
  margin: 0 0 22px;
  font-weight: 800;
  text-shadow: 0 8px 24px rgba(0,0,0,0.25);
  word-break: keep-all;
  overflow-wrap: normal;
}
@media (min-width: 769px) {
  .hero-slide-heading {
    white-space: nowrap;
  }
}
.hero-slide-heading em {
  font-style: normal;
  color: var(--yellow);
}
.hero-slider__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 4;
  pointer-events: none;
}
.hero-cta--in-slide {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}
/* 影は .btn-cta 側の実線の縁に任せる（ここで上書きするとヒーローだけグローになる） */
.hero-slider__controls {
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}
.hero-slider__arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(26, 42, 74, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a2a4a;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(16, 26, 46, 0.45);
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-slider__arrow:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(16, 26, 46, 0.55);
}
.hero-slider__dots { display: flex; gap: 10px; flex: 1; justify-content: center; }
.hero-slider__dot {
  /* 見た目の丸は 10px。タップ領域だけ 24px 以上にする（Lighthouse target-size） */
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(26, 42, 74, 0.22);
  padding: 0;
  background: rgba(26, 42, 74, 0.28);
  box-shadow: 0 1px 2px rgba(16, 26, 46, 0.12);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  box-sizing: content-box;
}
.hero-slider__dot::before {
  content: "";
  position: absolute;
  inset: -7px;
}
.hero-slider__dot.is-active {
  width: 28px;
  border-color: transparent;
  background-color: var(--blue);
  box-shadow: 0 2px 8px rgba(61, 135, 195, 0.35);
}
.hero-slider__progress {
  margin-top: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(26, 42, 74, 0.14);
  overflow: hidden;
  pointer-events: none;
}
.hero-slider__progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide__bg img,
  .hero-slide .hero-text {
    transition: none !important;
  }
  .hero-blob-float {
    animation: none !important;
  }
  .deco-rocket::before,
  .rocket-deco__unit,
  .rocket-deco__spark,
  .deco-cloud::before,
  .deco-cloud::after,
  .deco-circuit-light::before,
  .deco-circuit-light::after,
  .gears-deco__gear {
    animation: none !important;
  }
  .hero-slider__progress { display: none; }
}

.hero-sub {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  margin-bottom: 16px;
}
.hero-desc {
  font-size: 15.5px;
  color: rgba(255,255,255,0.92);
  white-space: pre-line;
  /* body の 1.8 だと 1 行あたり 27.9px になり、複数行のスライドで
     CTA が下端の波にめり込む */
  line-height: 1.7;
}
.hero-slide-link {
  display: flex;
  margin-top: 24px;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
/* 同上 */
.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.22); }

/* z-index 3 でボタンの上に重なるため、pointer-events を切らないと
   装飾の SVG がクリックを奪ってボタンを押せなくなる */
.hero-wave { position: absolute; bottom: -2px; left: 0; width: 100%; height: 130px; z-index: 3; pointer-events: none; }
.hero-wave-fill { fill: var(--paper); }
.hero-wave-line { opacity: 0.9; }

/* -------------------------------------------------
   新着情報スライダー
------------------------------------------------- */
.campaign-banners { padding: 56px 0; }
.news-banners__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}
.banner-scroll-hint {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-soft);
}
.news-banners__all-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a6fa8;
  font-size: 14px;
  font-weight: 800;
}
.news-banners__all-link::after {
  content: "›";
  font-size: 18px;
  line-height: 1;
}
.news-banners__all-link:hover {
  color: var(--ink-strong);
}
.news-banners__frame {
  position: relative;
}
.news-banner-arrow {
  display: inline-grid;
  place-items: center;
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-strong);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 16px 34px -18px rgba(16, 26, 46, 0.55), 0 0 0 1px rgba(22, 163, 225, 0.16);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.news-banner-arrow--prev {
  left: -24px;
}
.news-banner-arrow--next {
  right: -24px;
}
.news-banner-arrow:hover,
.news-banner-arrow:focus-visible {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 18px 38px -18px rgba(22, 163, 225, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.04);
}
.news-banner-arrow:focus-visible {
  outline: 3px solid rgba(22, 163, 225, 0.28);
  outline-offset: 3px;
}
.banner-track {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 0 8px;
}
.banner-track::-webkit-scrollbar { display: none; }
.banner-grid {
  display: flex;
  gap: 22px;
  width: max-content;
  min-width: 100%;
}
.banner-body { display: contents; }
.banner-card {
  position: relative;
  flex: 0 0 min(30vw, 380px);
  scroll-snap-align: start;
}
.banner-card a {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  isolation: isolate;
  background: #fff;
}
.banner-img { display: block; aspect-ratio: 16/9; overflow: hidden; }
.banner-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.banner-card a:hover .banner-img img { transform: scale(1.06); }
/* 写真を暗くするオーバーレイ。
   以前は .banner-card（li）の ::after だったが、内側の a が isolation: isolate で
   別のスタッキングコンテキストを作るため、.banner-label の z-index: 2 は a の中でしか
   効かず、カードごとオーバーレイの下に潜って文字が灰色に沈んでいた。
   a の ::after にして、ラベルと同じコンテキストで前後関係を決める。
   文字が乗るのは下 25% ほどなので、立ち上がりを早めて下端を濃くする。 */
.banner-card a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 26, 46, 0) 30%,
    rgba(16, 26, 46, 0.55) 62%,
    rgba(16, 26, 46, 0.9) 100%);
  z-index: 1;
  pointer-events: none;
}
.banner-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 12px; font-weight: 800; color: #fff;
  padding: 5px 14px; border-radius: 999px;
}
.tone-yellow .banner-tag { background: var(--yellow); color: var(--ink-strong); }
.tone-blue .banner-tag { background: var(--blue); }
.tone-green .banner-tag { background: var(--green); }
.banner-label {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  color: #fff; font-weight: 800; font-size: 16px;
  line-height: 1.5;
  /* 画像は CMS から任意のものが入るため、グラデーションだけでは下限を保証できない。
     画数の多い漢字が明るい部分に重なっても輪郭が残るよう、弱い影を敷く。 */
  text-shadow: 0 1px 3px rgba(16, 26, 46, 0.85);
}
/* 強調カードも影は他と同じ。色付きの影を足すと 1 枚目だけ地色が違って見える */
.banner-card--primary a {
  box-shadow: var(--shadow-soft);
}

/* -------------------------------------------------
   実績 / 校舎
------------------------------------------------- */
/* 繰り返す要素へ 12 種を順に配る。開始位置をコンポーネントごとにずらして、
   同一ページで形が重ならないようにしている。 */
.stats > *:nth-child(12n+1),
.mentor-grid > *:nth-child(12n+1),
.school-mentor-grid > *:nth-child(12n+1) { --radius-blob: var(--radius-blob-1);  --radius-blob-echo: var(--radius-echo-1); }
.stats > *:nth-child(12n+2),
.mentor-grid > *:nth-child(12n+2),
.school-mentor-grid > *:nth-child(12n+2) { --radius-blob: var(--radius-blob-2);  --radius-blob-echo: var(--radius-echo-2); }
.stats > *:nth-child(12n+3),
.mentor-grid > *:nth-child(12n+3),
.school-mentor-grid > *:nth-child(12n+3) { --radius-blob: var(--radius-blob-3);  --radius-blob-echo: var(--radius-echo-3); }
.stats > *:nth-child(12n+4),
.mentor-grid > *:nth-child(12n+4),
.school-mentor-grid > *:nth-child(12n+4) { --radius-blob: var(--radius-blob-4);  --radius-blob-echo: var(--radius-echo-4); }
.stats > *:nth-child(12n+5),
.mentor-grid > *:nth-child(12n+5),
.school-mentor-grid > *:nth-child(12n+5) { --radius-blob: var(--radius-blob-5);  --radius-blob-echo: var(--radius-echo-5); }
.stats > *:nth-child(12n+6),
.mentor-grid > *:nth-child(12n+6),
.school-mentor-grid > *:nth-child(12n+6) { --radius-blob: var(--radius-blob-6);  --radius-blob-echo: var(--radius-echo-6); }
.stats > *:nth-child(12n+7),
.mentor-grid > *:nth-child(12n+7),
.school-mentor-grid > *:nth-child(12n+7) { --radius-blob: var(--radius-blob-7);  --radius-blob-echo: var(--radius-echo-7); }
.stats > *:nth-child(12n+8),
.mentor-grid > *:nth-child(12n+8),
.school-mentor-grid > *:nth-child(12n+8) { --radius-blob: var(--radius-blob-8);  --radius-blob-echo: var(--radius-echo-8); }
.stats > *:nth-child(12n+9),
.mentor-grid > *:nth-child(12n+9),
.school-mentor-grid > *:nth-child(12n+9) { --radius-blob: var(--radius-blob-9);  --radius-blob-echo: var(--radius-echo-9); }
.stats > *:nth-child(12n+10),
.mentor-grid > *:nth-child(12n+10),
.school-mentor-grid > *:nth-child(12n+10) { --radius-blob: var(--radius-blob-10);  --radius-blob-echo: var(--radius-echo-10); }
.stats > *:nth-child(12n+11),
.mentor-grid > *:nth-child(12n+11),
.school-mentor-grid > *:nth-child(12n+11) { --radius-blob: var(--radius-blob-11);  --radius-blob-echo: var(--radius-echo-11); }
.stats > *:nth-child(12n),
.mentor-grid > *:nth-child(12n),
.school-mentor-grid > *:nth-child(12n) { --radius-blob: var(--radius-blob-12);  --radius-blob-echo: var(--radius-echo-12); }
.feature-row:nth-of-type(12n+2) { --radius-blob: var(--radius-blob-6);  --radius-blob-echo: var(--radius-echo-6); }
.feature-row:nth-of-type(12n+3) { --radius-blob: var(--radius-blob-7);  --radius-blob-echo: var(--radius-echo-7); }
.feature-row:nth-of-type(12n+4) { --radius-blob: var(--radius-blob-8);  --radius-blob-echo: var(--radius-echo-8); }
.feature-row:nth-of-type(12n+5) { --radius-blob: var(--radius-blob-9);  --radius-blob-echo: var(--radius-echo-9); }
.feature-row:nth-of-type(12n+6) { --radius-blob: var(--radius-blob-10);  --radius-blob-echo: var(--radius-echo-10); }
.feature-row:nth-of-type(12n+7) { --radius-blob: var(--radius-blob-11);  --radius-blob-echo: var(--radius-echo-11); }
.feature-row:nth-of-type(12n+8) { --radius-blob: var(--radius-blob-12);  --radius-blob-echo: var(--radius-echo-12); }
.feature-row:nth-of-type(12n+9) { --radius-blob: var(--radius-blob-1);  --radius-blob-echo: var(--radius-echo-1); }
.feature-row:nth-of-type(12n+10) { --radius-blob: var(--radius-blob-2);  --radius-blob-echo: var(--radius-echo-2); }
.feature-row:nth-of-type(12n+11) { --radius-blob: var(--radius-blob-3);  --radius-blob-echo: var(--radius-echo-3); }
.feature-row:nth-of-type(12n+12) { --radius-blob: var(--radius-blob-4);  --radius-blob-echo: var(--radius-echo-4); }
.feature-row:nth-of-type(12n) { --radius-blob: var(--radius-blob-5);  --radius-blob-echo: var(--radius-echo-5); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 0; }
.stat-card {
  position: relative;
  --stat-tone: #7c8794;
  background: #fff;
  border-radius: 14px;
  /* アイコンを外したぶん、上下を詰めてカードを低くしてある */
  padding: 24px 16px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.stat-card.tone-blue { --stat-tone: var(--blue); }
.stat-card.tone-yellow { --stat-tone: var(--yellow-deep); }
.stat-card.tone-green { --stat-tone: var(--green); }

/* 数字を挟む月桂樹（左右で別ファイル）。
   SVG は単色の実物トレースなので、mask で抜いて色をトーンに合わせる
   （img だと色を変えられないため）。 */
.stat-value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
/* 素材は片枝 1 つ。右側は反転して使う（縦横比 116.68 : 230.12） */
.stat-laurel {
  flex: 0 0 auto;
  width: 30px;
  height: 59px;
  /* 月桂樹は数字より背が高いので、そのままだと行の高さを押し広げて
     数字と単位の間が開く。見た目の大きさは保ったまま、行の高さへの寄与だけ削る */
  margin-block: -7px;
  background: var(--stat-tone);
  opacity: 0.6;
  pointer-events: none;
  -webkit-mask: url("../assets/images/deco-laurel.svg") center / contain no-repeat;
  mask: url("../assets/images/deco-laurel.svg") center / contain no-repeat;
}
.stat-laurel--right { transform: scaleX(-1); }
.tone-blue .skill-icon-blob, .tone-blue { --tone: var(--blue); }
.tone-yellow .skill-icon-blob, .tone-yellow { --tone: var(--yellow-deep); }
.tone-green .skill-icon-blob, .tone-green { --tone: var(--green); }

/* SVG アイコン。素材そのものがブランド色で塗られているので色は指定しない */
.stat-icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
}
/*
 * 絵柄によって余白の取り方が違うので、見た目の大きさが揃うようにファイル単位で調整する。
 * 賞状とトロフィーは輪郭が大きいので小さめ、人物とキーボードは細いので大きめ。
 * CMS でアイコンを別の画像に差し替えると、この指定は外れて既定の 44px に戻る。
 */
.stat-icon[src*="icon-students"],
.stat-icon[src*="icon-keyboard"] { width: 48px; height: 48px; }
.stat-icon[src*="icon-kentei"],
.stat-icon[src*="icon-contest"] { width: 40px; height: 40px; }
.stat-number {
  position: relative; z-index: 1;
  /* 実績の数字だけ Arial の Bold Italic。Arial が無い環境（Android / Linux）では
     Helvetica → 既定のサンセリフへ落ちる（いずれも斜体を持つ） */
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 42px; font-weight: 700; line-height: 1;
  color: var(--stat-tone);
}

.stat-unit {
  position: relative; z-index: 1;
  display: block;
  margin-top: 4px;
  font-size: 14px; font-weight: 800; color: var(--ink-soft);
}
.stat-label {
  position: relative;
  z-index: 1;
  /* 2 行に折り返してよいので、長いラベルでも字を小さくしない。
     2 行ぶんの高さを確保して、数字の位置をカード間で揃える。
     1 行のラベル（累計生徒数など）は、その枠の上下中央に置く */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * 1.5em);
  /* 点線を外したので、その間隔はラベル側で持つ */
  margin-bottom: 12px;
  color: var(--ink-strong);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  /* 改行はテンプレートが入れる <wbr> の位置だけで起きるようにする。
     <wbr> が無い長い項目名でも溢れないよう、収まらないときだけ任意位置で折る。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.campus-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.campus-card {
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.campus-card-image { aspect-ratio: 340/220; overflow: hidden; }
.campus-card-image img { width: 100%; height: 100%; object-fit: cover; }
.campus-card-body { padding: 18px 20px 22px; }
.campus-card-body h3 { font-size: 16px; margin-bottom: 6px; }
.campus-card-body p { font-size: 13.5px; color: var(--ink-soft); }

/* -------------------------------------------------
   スキル
------------------------------------------------- */
/*
 * 中央に写真、その左右に 3 つずつチカラを並べる。
 * 「６つのチカラ」が写真を囲んで見えるようにするため、写真は中央列で 3 行ぶんを占める。
 * 並び順は HTML のまま（写真 → 1〜6）にしてあるので、スマホでは写真が先頭に来る。
 */
.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 16px 36px;
  /* 文章量が左右で違うので、start にすると同じ段でもカードの下端がずれる。
     stretch で段の高さいっぱいに伸ばして揃える（中央の写真は align-self: center のまま） */
  align-items: stretch;
}
.skills-layout > .skills-image { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.skills-layout > .skill-card:nth-child(2) { grid-column: 1; grid-row: 1; }
.skills-layout > .skill-card:nth-child(3) { grid-column: 1; grid-row: 2; }
.skills-layout > .skill-card:nth-child(4) { grid-column: 1; grid-row: 3; }
.skills-layout > .skill-card:nth-child(5) { grid-column: 3; grid-row: 1; }
.skills-layout > .skill-card:nth-child(6) { grid-column: 3; grid-row: 2; }
.skills-layout > .skill-card:nth-child(7) { grid-column: 3; grid-row: 3; }
.skills-image-frame {
  position: relative;
  /* グリッドが使わない番号を当てて、同一ページで形が重ならないようにする */
  --radius-blob: var(--radius-blob-11);
  border-radius: var(--radius-blob);
  overflow: hidden;
  /* 同じ輪郭のベタ塗りを少しずらして敷く。
     box-shadow は角丸には追従するがブロブ形状では輪郭がずれるため drop-shadow を使う。 */
  filter: drop-shadow(-9px 12px 0 var(--yellow));
}
.skills-image-frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/*
 * 左右の列は幅が狭いので、アイコンを左に置いて高さを抑える。
 * flex にすると見出しと説明まで横に並んでしまうので、
 * 「アイコン列 ＋ 本文列」の 2 列グリッドにして本文は縦に積む。
 */
.skill-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 13px;
  align-items: start;
  background: #fff;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
/* 背景の円は外してある。素材は 3:2 の横長なので、幅だけ決めて高さは比率のまま */
.skill-icon-blob {
  display: block;
  width: 60px;
  /* 見出しと説明の 2 行ぶんにまたがって左に置く */
  grid-row: 1 / span 2;
}
.skill-icon-blob img { width: 100%; height: auto; display: block; }
/*
 * ブランドの 6 色（DIC 指定）を 1 枚ずつ割り当てる。ロゴの 6 色と
 * 「6 つのチカラ」を重ねるため。左列が青→緑→黄、右列が橙→赤→炭で、
 * 左から右へ寒色から暖色へ流れる並びにしてある。
 * 色は rgb の 3 値だけを持ち、濃さ（透明度）はアイコン背景側で決める。
 * 先頭の子は写真なので、カードは 2 番目から数える。
 */
.skills-layout > .skill-card:nth-child(2) { --skill-tone: 61, 135, 195; }  /* 青 DIC-N887 */
.skills-layout > .skill-card:nth-child(3) { --skill-tone: 61, 150, 59; }   /* 緑 DIC-N846 */
.skills-layout > .skill-card:nth-child(4) { --skill-tone: 253, 198, 0; }   /* 黄 DIC-N804 */
.skills-layout > .skill-card:nth-child(5) { --skill-tone: 247, 142, 0; }   /* 橙 DIC-N743 */
.skills-layout > .skill-card:nth-child(6) { --skill-tone: 223, 72, 64; }   /* 赤 DIC-N731 */
.skills-layout > .skill-card:nth-child(7) { --skill-tone: 78, 82, 85; }    /* 炭 DIC-N957 */
.skill-card h3 { font-size: 15px; margin-bottom: 0; line-height: 1.45; }
.skill-card p { font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* -------------------------------------------------
   特徴
------------------------------------------------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px dashed var(--line);
}
.feature-row:last-child { border-bottom: none; }
.feature-row-reverse .feature-text { order: 2; }
.feature-row-reverse .feature-image { order: 1; }

.feature-heading { margin-bottom: 18px; }
.feature-heading h3 { font-size: 21px; }
.feature-text p { color: var(--ink-soft); font-size: 15px; margin-bottom: 12px; }
.feature-text p:last-child { margin-bottom: 0; }

.feature-image {
  border-radius: var(--radius-blob);
  overflow: hidden;
  /* 切り抜きと同じ輪郭のベタ塗りを少しずらして敷く。
     ここは元々 box-shadow を敷いていたが、ベタ塗りと二重にぼやけるので置き換えた。 */
  filter: drop-shadow(-11px 14px 0 var(--blob-echo));
}
.feature-image.tone-blue { --blob-echo: var(--blue); }
.feature-image.tone-yellow { --blob-echo: var(--yellow); }
.feature-image.tone-green { --blob-echo: var(--green); }
.feature-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.feature-image-icon {
  border-radius: 50%;
  aspect-ratio: 1/1;
  max-width: 260px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.feature-image-icon img { aspect-ratio: auto; object-fit: contain; }
.feature-image-icon.tone-blue { background: linear-gradient(135deg, #eaf6fd, #d5edfa); }
.feature-image-icon.tone-yellow { background: linear-gradient(135deg, #fff6d9, #ffedb0); }
.feature-image-icon.tone-green { background: linear-gradient(135deg, #eef8e3, #dcf0c6); }

/* -------------------------------------------------
   カリキュラム
------------------------------------------------- */
.curriculum-card {
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: 30px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-soft);
  border-top: 6px solid transparent;
  overflow: hidden;
}
.curriculum-card:last-child { margin-bottom: 0; }
.curriculum-card.tone-blue { border-top-color: var(--blue); }
.curriculum-card.tone-green { border-top-color: var(--green); }
.curriculum-card.tone-yellow { border-top-color: var(--yellow); }
.curriculum-card.tone-tri { border-image: var(--grad-tri) 1; }

.curriculum-label { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.curriculum-age { font-size: 13px; font-weight: 700; color: var(--ink-soft); background: #f4f2ea; padding: 6px 14px; border-radius: 999px; }
.curriculum-tag { font-size: 18px; font-weight: 800; color: var(--ink-strong); }
.curriculum-tools { display: flex; gap: 8px; margin-left: auto; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  background: #f4f2ea; padding: 6px 12px; border-radius: 999px;
}
.tool-chip img { border-radius: 4px; }

.curriculum-body { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: center; }
.curriculum-thumb { border-radius: var(--radius-blob-3); overflow: hidden; }
.curriculum-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 200/140; }
.curriculum-body p { color: var(--ink-soft); font-size: 14.5px; }

/* -------------------------------------------------
   FAQ
------------------------------------------------- */
.faq-list { width: 100%; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.faq-list details {
  background: #fff;
  border-radius: 24px 24px 24px 8px;
  padding: 20px 26px 20px 68px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.faq-list summary {
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 34px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before {
  content: "Q";
  position: absolute; left: -48px; top: -4px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-blob-1);
  color: #fff; font-weight: 800; font-size: 15px;
}
.faq-list details:nth-child(3n+1) summary::before { background: var(--blue); }
.faq-list details:nth-child(3n+2) summary::before { background: var(--yellow); color: var(--ink-strong); }
.faq-list details:nth-child(3n) summary::before { background: var(--green); }
.faq-list summary::after {
  content: "+";
  position: absolute; right: 0; top: -2px;
  font-size: 22px; font-weight: 800; color: var(--blue);
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
  font-size: 14.5px;
}
.faq-cta {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* -------------------------------------------------
   コラム
------------------------------------------------- */
.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.column-card { position: relative; }
.column-thumb {
  display: block; border-radius: 22px 22px 22px 8px; overflow: hidden; margin-bottom: 14px;
  aspect-ratio: 360/200; position: relative;
}
.column-thumb::before {
  content: attr(data-cat);
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 5px 14px;
  border-radius: 999px;
  color: #fff; font-size: 12px; font-weight: 800;
}
.column-card.tone-blue .column-thumb::before { background: var(--blue); }
.column-card.tone-yellow .column-thumb::before { background: var(--yellow); color: var(--ink-strong); }
.column-card.tone-green .column-thumb::before { background: var(--green); }
.column-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.column-card:hover .column-thumb img { transform: scale(1.05); }
.column-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.column-card h3 a:hover { color: var(--blue); }
.column-card time { font-size: 13px; color: var(--ink-soft); }

/* -------------------------------------------------
   メンター
------------------------------------------------- */
.mentor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 26px; }
.mentor-card { text-align: center; }
/* -------------------------------------------------
   メンター写真の色影

   写真と同じ中心に、一回り大きいブロブを敷いて細い縁のように見せる。
   drop-shadow（他の写真で使っている手法）だと同じ輪郭をずらして敷くので、
   ずらした側にしか色が出ない。ここは全周に縁を出したいので疑似要素にしてある。

   色影は写真とは別の形（--radius-echo-*）。半径を 40〜60% に限って楕円らしさは
   保ったまま、どこが膨らむかを変えてある。どの点でも写真の外側に出ることは
   輪郭 480 点から色影までの距離を測って確かめてある（縁は 3.6〜7.9px）。

   写真の切り抜きは overflow ではなく img 側の border-radius: inherit で行う
   （overflow: hidden だと外側の色影ごと切り取られてしまう）。
------------------------------------------------- */
.mentor-photo-blob {
  position: relative;
  isolation: isolate;   /* ::before の z-index を要素の中に閉じる */
}
.mentor-photo-blob::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--blob-echo-inset, 5px));
  border-radius: var(--radius-blob-echo, var(--radius-blob));
  background: var(--blob-echo);
  z-index: -1;
}
.mentor-photo-blob img {
  border-radius: inherit;
}

/* 校舎ページのメンター写真。写真を囲むリング（padding + トーン背景）は外し、
   背後に敷く色影だけ残す。 */
.mentor-photo-blob {
  display: block;
  width: 148px; height: 148px;
  margin: 0 auto 18px;
  border-radius: var(--radius-blob);
  --blob-echo-inset: 5px;
}
.mentor-photo-blob img { background: #fff; }
.mentor-photo-blob.tone-blue { --blob-echo: var(--blue); }
.mentor-photo-blob.tone-yellow { --blob-echo: var(--yellow); }
.mentor-photo-blob.tone-green { --blob-echo: var(--green); }
.mentor-photo-blob img { width: 100%; height: 100%; object-fit: cover; }
.mentor-card h3 { font-size: 17px; margin-bottom: 4px; }
.mentor-school { font-size: 12.5px; color: var(--blue); font-weight: 700; margin-bottom: 10px; }
.mentor-card p:last-child { font-size: 13.5px; color: var(--ink-soft); text-align: left; }
.mentor-note { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 34px; }

/* -------------------------------------------------
   比較表
------------------------------------------------- */
/* 比較表。アクセントはブランド青の 1 色だけに絞り、
   Swimmy 列は「淡い地 + 上下に伸びる縦罫」で示す（虹色の帯や太い囲みは使わない） */
.table-wrap { position: relative; overflow-x: auto; }
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  min-width: 620px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.comparison-table th,
.comparison-table td {
  padding: 18px 20px;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.comparison-table thead th {
  background: #f6f7f9;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.comparison-table thead th:first-child { text-align: left; }
/* Swimmy 列は白地のまま枠線で囲って強調する。
   青地にするとロゴの中の青い魚が背景と同化するため、地色は変えない */
.comparison-table thead th.th-swimmy {
  background: #fff;
  padding: 16px 20px;
  border-top: 2px solid var(--blue);
  border-left: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}
.comparison-table thead th.th-swimmy img {
  height: 44px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.comparison-table tbody th {
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  background: #fff;
}
.comparison-table tbody td:first-of-type {
  background: rgba(61, 135, 195, 0.06);
  color: var(--ink-strong);
  font-size: 14.5px;
  border-left: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
}
.comparison-table tbody td:first-of-type strong { font-weight: 800; }
.comparison-table tbody td:first-of-type::before {
  content: "\2713";
  display: inline-block;
  margin-right: 10px;
  font-weight: 800;
  color: var(--blue);
}
.comparison-table tbody td:last-child { color: var(--ink-soft); }
.comparison-table tbody tr:last-child td,
.comparison-table tbody tr:last-child th { border-bottom: none; }
.comparison-table tbody tr:last-child td:first-of-type { border-bottom: 2px solid var(--blue); }

/* -------------------------------------------------
   進路
------------------------------------------------- */
.career-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 色分けは下端の色帯ではなく、カード全体の枠線・見出しの印・箇条書きの点・
   用語リンクで示す。地は白のまま。 */
.career-block {
  --career-tone: var(--blue);
  --career-tone-line: rgba(61, 135, 195, 0.4);
  background: #fff;
  border: 1px solid var(--career-tone-line);
  border-radius: 14px;
  padding: 22px 18px;
}
.career-block.tone-yellow {
  --career-tone: #b07c00;
  --career-tone-line: rgba(253, 198, 0, 0.55);
}
.career-block.tone-green {
  --career-tone: var(--green);
  --career-tone-line: rgba(61, 150, 59, 0.38);
}
.career-block h3 {
  font-size: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--career-tone-line);
  line-height: 1.6;
  /* 見出しが 1 行の列と 2 行の列で罫線・大学名の開始位置がずれるので、
     2 行ぶん（16px × 1.6 × 2）を最低の高さにして揃える。box-sizing: border-box
     なので padding-bottom を足した値を指定する */
  min-height: calc(16px * 1.6 * 2 + 14px);
}
/* 用語解説のボタン。カードごとの色を継いで、色分けをここでも示す */
.term-btn {
  background: none; border: none; padding: 0;
  font: inherit; font-weight: 800;
  color: var(--career-tone, var(--blue));
  border-bottom: 2px dotted var(--career-tone, var(--blue));
}
.university-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.university-list li { font-size: 13.5px; color: var(--ink-soft); position: relative; padding-left: 14px; }
.university-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--career-tone, var(--green));
}
.career-note { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin-top: 30px; }

/* -------------------------------------------------
   ASK AI（生成AIに聞いてもらう導線）
   ボタンは各サービスの画面をプロンプト付きで開くだけの外部リンク。
------------------------------------------------- */
.ask-ai {
  /* 直前が FAQ（下端が波線）でもコラムでも成り立つよう、上の余白は詰めすぎない */
  padding-top: 64px;
}
.ask-ai__panel {
  /* 4 つのボタンが 1 行に収まる幅（ボタン 168px × 4 ＋ gap 12px × 3 ＋ 左右余白） */
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 32px 34px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.ask-ai__lead {
  margin: 0 auto 26px;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.ask-ai__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ボタンは各サービスの色に合わせる。枠と押し込みの縁だけをブランド色にして、
   地は白・文字は本文色のまま（4 つ並ぶので塗り分けると賑やかになりすぎる） */
.ask-ai__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 168px;
  padding: 11px 20px;
  border: 2px solid var(--ai-accent);
  border-radius: var(--radius-btn-lg);
  background: #fff;
  box-shadow: 0 3px 0 var(--ai-accent);
  color: var(--ink-strong);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.ask-ai__btn:hover {
  transform: translateY(-2px);
  background: var(--ai-tint);
}
.ask-ai__logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ask-ai__btn--chatgpt    { --ai-accent: #10a37f; --ai-tint: rgba(16, 163, 127, 0.08); }
.ask-ai__btn--gemini     { --ai-accent: #8e75b2; --ai-tint: rgba(142, 117, 178, 0.10); }
.ask-ai__btn--claude     { --ai-accent: #d97757; --ai-tint: rgba(217, 119, 87, 0.10); }
.ask-ai__btn--perplexity { --ai-accent: #20808d; --ai-tint: rgba(32, 128, 141, 0.09); }
.ask-ai__note {
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.7;
}
@media (max-width: 640px) {
  .ask-ai__panel { padding: 30px 18px 26px; }
  .ask-ai__list { flex-direction: column; }
  .ask-ai__btn { width: 100%; min-width: 0; }
}

/* -------------------------------------------------
   クロージングCTA
------------------------------------------------- */
.closing-cta {
  position: relative;
  overflow: hidden;
  --radius-blob: var(--radius-blob-12);   /* ::before 用。::after は別番号を直接指定 */
  background: linear-gradient(135deg, #fff8e3 0%, #fffdf7 55%, #eaf6fd 100%);
  padding: 88px 0;
  text-align: center;
}
.closing-cta::before,
.closing-cta::after {
  content: "";
  position: absolute;
  border-radius: var(--radius-blob);
  opacity: 0.16;
  pointer-events: none;
}
.closing-cta::before {
  width: 280px; height: 280px;
  top: -110px; left: -80px;
  background: var(--grad-yellow);
}
.closing-cta::after {
  width: 220px; height: 220px;
  bottom: -90px; right: -60px;
  /* ::before と同じ形が 2 つ並ぶのを避ける */
  border-radius: var(--radius-blob-5);
  background: var(--grad-blue);
}
.closing-cta h2 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.55;
  margin-bottom: 18px;
}
.closing-cta p { color: var(--ink-soft); font-size: 15px; margin-bottom: 8px; }
.closing-cta .btn-group { margin-top: 30px; }
.sp-only { display: none; }

/* -------------------------------------------------
   フッター
------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: rgba(255,255,255,0.82);
  padding: 64px 0 28px;
}
.footer-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.8fr 2.2fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-logo { margin-bottom: 10px; }
.footer-logo img { height: 44px; width: auto; }
.footer-brand p, .footer-contact p { font-size: 13.5px; margin-bottom: 6px; }
.footer-tel a { font-size: 22px; font-weight: 800; color: var(--yellow); }
.footer-address { margin-top: 10px; line-height: 1.6; color: rgba(255,255,255,0.7); }
/*
 * 均等 4 列だと「コース／カリキュラム」「特定商取引法に基づく表示」が
 * 途中で折り返して読みにくいので、列は内容の幅にして余りを均等に配る。
 */
.footer-nav-grid {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 18px 24px;
}
.footer-nav-heading {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--yellow);
}
.footer-nav ul { display: flex; flex-direction: column; gap: 8px; }
.footer-nav a { font-size: 13px; color: rgba(255,255,255,0.82); white-space: nowrap; }
.footer-nav a:hover { color: var(--yellow); }
.copyright { position: relative; z-index: 1; text-align: center; font-size: 12px; color: rgba(255,255,255,0.5); padding-top: 22px; }

/* -------------------------------------------------
   追従CTA
------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  gap: 10px;
  padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(255, 253, 247, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(16, 26, 46, 0.35);
}
.sticky-cta .btn {
  flex: 1;
  min-width: 0;
  padding: 14px 10px;
  font-size: 14px;
  text-align: center;
}

/* -------------------------------------------------
   モーダル
------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(16, 26, 46, 0.6); }
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
}
.modal-content h3 { font-size: 19px; margin-bottom: 14px; color: var(--blue); }
.modal-content p { font-size: 14.5px; color: var(--ink-soft); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #f4f2ea; border: none;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: #ece7da; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 1024px) {
  .container { padding: 0 20px; }
  /* 幅が狭いときは中央の写真を外してカードを縦に積む。
     grid のままだと、PC 用の配置（.skills-layout > .skill-card:nth-child(N)）のほうが
     詳細度が高くて grid-column を打ち消せず、3 カラムのまま潰れてしまう。
     flex にすれば grid-column / grid-row は無視されるので確実に 1 列になる。 */
  .skills-layout { display: flex; flex-direction: column; gap: 14px; }
  .skills-layout > .skills-image { display: none; }
  .feature-row { grid-template-columns: 1fr; gap: 32px; }
  .feature-row-reverse .feature-text, .feature-row-reverse .feature-image { order: initial; }
  .feature-image-icon { max-width: 200px; }
  .career-blocks { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .mentor-grid { grid-template-columns: repeat(2, 1fr); }
  .campus-cards, .column-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .footer-nav a { white-space: normal; }
}

@media (max-width: 780px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .sp-only { display: inline; }
  .title-desktop { display: none; }
  .title-mobile { display: inline; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .comparison-table thead th.th-swimmy img { height: 34px; }
  .closing-cta { padding: 64px 0; }
  .sticky-cta { display: flex; }
  .global-nav {
    position: fixed;
    top: 84px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 30px -20px rgba(0,0,0,0.3);
    align-items: stretch;
    gap: 4px;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, padding 0.28s ease;
  }
  /* ドロワーでは 2 本の ul を透過させ、li を直接並べ替える。
     並び順は「下段の通常リンク → 上段のリンク → CTA ボタン」。 */
  /* 項目が 11 件に増えたので画面高を超えたらドロワー内でスクロールさせる
     （CTA ボタンが画面外に出て押せなくなるのを防ぐ） */
  .global-nav.is-open {
    max-height: min(820px, calc(100vh - 84px));
    max-height: min(820px, calc(100dvh - 84px));
    padding: 12px 20px 24px;
    overflow-y: auto;
  }
  .global-nav ul { display: contents; }
  /* ドロワーでは a を幅いっぱいのブロックに戻す（デスクトップの flex 指定を解除） */
  .global-nav__item { display: block; order: 1; }
  .global-nav__utility .global-nav__item { order: 2; }
  .global-nav__item--action { order: 3; }
  .global-nav a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .global-nav a::after { display: none; }
  .global-nav__utility a { font-size: 14.5px; color: var(--ink-strong); padding: 12px 4px; }
  /* デスクトップで CTA 同士を詰めるための負マージンを解除する。
     残すと 2 つ目のボタンだけ 14px 広くなる */
  .global-nav__item--action + .global-nav__item--action { margin-left: 0; }
  .global-nav .nav-action {
    display: block;
    margin-top: 8px;
    padding: 14px 16px !important;
    border-bottom: none !important;
    text-align: center;
    font-size: 15px;
  }
  /* 地色と文字色は基底の .nav-action--* が単色で持つのでドロワー側の上書きは不要 */
  .nav-toggle { display: flex; }

  .section { padding: 68px 0; }
  .hero.hero-slider {
    display: block;
    height: var(--hero-sp-height, 28.75rem);
    min-height: var(--hero-sp-height, 28.75rem);
  }
  .hero-slider__slides {
    position: absolute;
    inset: 0;
  }
  .hero-slide,
  .hero-slide.is-active {
    position: absolute;
    inset: 0;
    height: 100%;
  }
  .hero-slide .hero-inner {
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 16px;
    padding-bottom: 58px;
    display: flex;
    align-items: stretch;
  }
  .hero-slide .hero-text {
    max-width: 100%;
    width: 100%;
    height: 100%;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-eyebrow {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 8px;
    max-width: 100%;
    line-height: 1.35;
  }
  .hero-badges {
    gap: 6px;
    margin-bottom: 8px;
  }
  .hero-badges .badge {
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.25;
  }
  .hero-slide-heading {
    font-size: clamp(22px, 6vw, 26px);
    line-height: 1.35;
    margin: 0 0 8px;
    word-break: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .hero-slide-heading em {
    color: var(--yellow);
    /* 写真の上でも読めるよう、SP は影を弱く残す */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  }
  .hero-sub {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }
  .hero-desc {
    display: none;
  }
  .hero-bg-tint {
    background:
      linear-gradient(180deg, rgba(16, 26, 46, 0.52) 0%, rgba(16, 26, 46, 0.22) 42%, rgba(16, 26, 46, 0.46) 100%),
      linear-gradient(90deg, rgba(16, 26, 46, 0.32) 0%, rgba(16, 26, 46, 0.1) 68%, rgba(16, 26, 46, 0.04) 100%);
  }
  .hero-blob-float {
    opacity: 0.18;
    filter: blur(1px);
  }
  .hero-blob-float--a {
    width: min(42vw, 170px);
    height: min(42vw, 170px);
    top: 14%;
    right: -14%;
  }
  .hero-blob-float--b {
    width: min(32vw, 130px);
    height: min(32vw, 130px);
    bottom: 18%;
    left: -16%;
  }
  .hero-slider__ui {
    bottom: 6px;
    padding-bottom: 0;
  }
  .hero-cta--in-slide {
    flex-direction: column;
    align-items: stretch;
    margin-top: auto;
    padding-top: 14px;
    gap: 8px;
  }
  .hero-cta--in-slide .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 46px;
  }
  .hero-slide-link {
    margin-top: auto;
    padding-top: 14px;
  }
  .hero-slide-link .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    min-height: 46px;
  }
  .hero-slider__arrow { display: none; }
  .hero-slider__dots { gap: 8px; }
  .hero-slider__dot {
    width: 9px;
    height: 9px;
  }
  .hero-wave { height: 52px; }

  /* SP向けヒーロー画像の寄り・引き（少し下寄りにして上部テキスト下の画を見せる） */
  .hero-slide[data-slide="0"] .hero-slide__bg img { object-position: 68% 34% !important; }
  .hero-slide[data-slide="1"] .hero-slide__bg img { object-position: 64% 36% !important; }
  .hero-slide[data-slide="2"] .hero-slide__bg img { object-position: 60% 38% !important; }
  .hero-slide[data-slide="3"] .hero-slide__bg img { object-position: 48% 36% !important; }
  .hero-slide[data-slide="4"] .hero-slide__bg img { object-position: center 40% !important; }

  /* 新着情報：横スクロール＋横長カード */
  .campaign-banners { padding: 28px 0 36px; }
  .container--bleed-mobile { padding-left: 0; padding-right: 0; }
  .news-banners__header {
    padding: 0 20px;
    margin-bottom: 12px;
  }
  .banner-scroll-hint {
    font-size: 13px;
  }
  .news-banners__all-link {
    font-size: 12px;
  }
  .news-banner-arrow {
    width: 40px;
    height: 40px;
    font-size: 27px;
  }
  .news-banner-arrow--prev {
    left: 10px;
  }
  .news-banner-arrow--next {
    right: 10px;
  }
  .banner-track {
    padding-bottom: 4px;
  }
  .banner-grid {
    gap: 12px;
    padding: 0 20px;
  }
  /* スナップ位置を左パディングのぶんだけ内側にする。
     指定しないとカードが画面左端に貼り付き、右側だけ余白が残って中心がずれる */
  .banner-track {
    scroll-padding-left: 20px;
  }
  /* 画面に 1 枚ずつ、左右 20px ずつの余白で中央に収まる幅 */
  .banner-card,
  .banner-card.voice-card {
    flex: 0 0 calc(100vw - 40px);
  }
  .banner-card.voice-card .voice-card__img.banner-img,
  .banner-card.voice-card .voice-card__img {
    flex: none;
    max-width: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .banner-card.voice-card .voice-card__body {
    padding: 14px 14px 16px;
  }
  .banner-card.voice-card .voice-card__body p {
    font-size: 12.5px;
    line-height: 1.65;
  }
  .banner-card--primary { flex-basis: calc(100vw - 40px); }
  .banner-card a {
    display: flex;
    align-items: stretch;
    min-height: 108px;
    /* li は一番高いカードに合わせて伸びるので、中の a も同じ高さまで伸ばす。
       指定しないと文字数の少ないカードだけ白い箱が短くなり、高さが不揃いに見える */
    height: 100%;
    border-radius: 14px;
    border-left: 3px solid var(--line);
  }
  .banner-card a::after { display: none; }
  .banner-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    padding: 14px 16px;
    min-width: 0;
  }
  .banner-img {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 108px;
    max-width: 130px;
  }
  .banner-tag {
    position: static;
    align-self: flex-start;
    font-size: 11px;
    padding: 4px 10px;
    margin-bottom: 6px;
  }
  .banner-label {
    position: static;
    color: var(--ink-strong);
    font-size: 14px;
    line-height: 1.45;
    /* 白地の上に移るので、写真用の影は消す（残すと文字が滲んで見える） */
    text-shadow: none;
  }
  .banner-card--primary .banner-label { font-size: 15px; }

  /* 実績：3列コンパクトパネル */
  #achievement .section-header { margin-bottom: 28px; }
  #achievement .section-lead { font-size: 14px; text-align: left; line-height: 1.75; }
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0;
  }
  .stat-card {
    min-height: 152px;
    padding: 16px 8px 14px;
  }
  .stat-card:not(:last-child) { border-right: 0; }
  .stat-icon { width: 32px; height: 32px; margin-bottom: 6px; }
  .stat-icon[src*="icon-students"],
  .stat-icon[src*="icon-keyboard"] { width: 35px; height: 35px; }
  .stat-icon[src*="icon-kentei"],
  .stat-icon[src*="icon-contest"] { width: 29px; height: 29px; }
  .stat-number { font-size: clamp(26px, 7.5vw, 34px); }
  .stat-unit { font-size: 12px; margin-left: 2px; }
  .stat-label {
    min-height: 48px;
    margin-bottom: 8px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .campus-cards { grid-template-columns: 1fr; }
  .curriculum-body { grid-template-columns: 1fr; }
  .curriculum-thumb { max-width: 220px; margin: 0 auto; }
  .curriculum-tools { margin-left: 0; }
  .column-grid { grid-template-columns: 1fr; }
  .mentor-grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer-inner { grid-template-columns: 1fr; text-align: left; gap: 26px; }
  .footer-nav-grid { grid-template-columns: 1fr 1fr; }
  .btn-group { flex-direction: column; align-items: stretch; }
  .btn-group .btn { width: 100%; }
}

@media (max-width: 480px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { font-size: 13px; padding: 13px 8px; }
  .mentor-grid { grid-template-columns: 1fr; }
  .hero-slide .hero-inner {
    padding-top: 14px;
    padding-bottom: 54px;
  }
  .logo img { height: 50px; }
  .header-inner { height: 80px; }
  .global-nav { top: 80px; }
  .hero-slide-heading {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.34;
  }
  .hero-cta--in-slide,
  .hero-slide-link {
    padding-top: 12px;
    gap: 7px;
  }
  .hero-cta--in-slide .btn,
  .hero-slide-link .btn {
    padding: 11px 14px;
    font-size: 13.5px;
    min-height: 44px;
  }
  .hero-wave { height: 44px; }
  .section-title { font-size: 22px; }
  #achievement .section-title { line-height: 1.45; }
  .rocket-deco__unit--main {
    top: 28%;
    right: -24px;
    width: 80px;
    height: 120px;
  }
  .rocket-deco__unit--side {
    top: 42%;
    left: -18px;
    width: 48px;
    height: 72px;
  }
  .deco-cloud::before {
    animation-name: deco-cloud-drift-sm;
    opacity: 0.12;
  }
  .deco-cloud::after {
    animation-name: deco-cloud-drift-alt-sm;
    opacity: 0.1;
  }
  .deco-circuit-light::before {
    animation-name: deco-circuit-drift-sm;
    opacity: 0.1;
  }
  .deco-circuit-light::after {
    animation-name: deco-circuit-drift-alt-sm;
    opacity: 0.08;
  }
  .gears-deco__gear--right-lg {
    width: auto;
    height: 100px;
    right: -53px;
  }
  .gears-deco__gear--right-sm {
    width: auto;
    height: 64px;
    right: 42px;
    top: 18%;
  }
  .gears-deco__gear--left-lg {
    width: auto;
    height: 84px;
    left: -45px;
  }
  .gears-deco__gear--left-sm {
    width: auto;
    height: 52px;
    left: 39px;
  }
  .deco-gears::before, .deco-gears::after,
  .deco-blocks::before,
  .deco-pencil::before, .deco-sparkle::before, .deco-sparkle::after,
  .deco-controller::before { transform: scale(0.65); opacity: 0.1; }
}