/* =========================================================
   英検®対策 LP - stylesheet
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --pink: #e73a77;
  --pink-dark: #d62f6a;
  --blue: #00a5e3;
  --ink: #16202b;
  --muted: #4a5561;
  --gray: #7a848f;
  --line: #e3e7ec;
  --soft: #f7f9fb;
  --pink-pale: #fdebf2;
  --pink-line: #f8c8da;
  --blue-pale: #e9f7fd;
  --blue-line: #bfe7f8;
}

/* ---------- Base / reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* sticky ヘッダー分だけアンカー着地位置を下げる */
[id] { scroll-margin-top: 76px; }

body {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  color: var(--ink);
  background: #ffffff;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--pink); }
img { max-width: 100%; height: auto; display: block; }
.en { font-family: 'Montserrat', 'Noto Sans JP', sans-serif; }

.page { width: 100%; overflow-x: hidden; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.container--slim { max-width: 860px; }

.section { padding: 68px 0 72px; }
.section--white { background: #ffffff; }
.section--soft { background: var(--soft); border-top: 1px solid #e9edf1; }

.eyebrow {
  display: block;
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pink);
}
.eyebrow--white { color: #ffffff; }

.section-title {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.45;
  font-weight: 700;
  margin: 10px 0 0;
}
.section-lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--muted);
  margin: 16px 0 0;
}
.accent { color: var(--pink); }
.accent-blue { color: var(--blue); }
.note { font-size: 11px; color: #9aa4ae; margin-top: 14px; line-height: 1.9; }

/* ---------- 改行コントロール用ユーティリティ ---------- */
.br-sp { display: none; }
@media (max-width: 680px) {
  .br-pc { display: none; }
  .br-sp { display: inline; }
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid #eaeef2;
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(22, 32, 43, 0.28); }
.site-header__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.site-header__logo { display: flex; align-items: center; gap: 12px; }
.site-header__logo img { width: auto; height: 34px; }
.site-header__tag {
  font-size: 13px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.site-header__spacer { flex: 1 1 40px; }
.site-header__cta {
  background: var(--pink);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(231, 58, 119, 0.3);
  white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}
.site-header__cta:hover { background: var(--pink-dark); color: #ffffff; transform: translateY(-1px); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background: linear-gradient(180deg, var(--blue-pale) 0%, #ffffff 100%);
  padding: 56px 0 0;
}
.hero__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}
.hero__col { flex: 1 1 480px; min-width: 0; }
.hero__visual { flex: 1 1 300px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 999px;
  background-color: #fff;
}
.hero__title {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: clamp(26px, 3.3vw, 50px);
  line-height: 1.36;
  font-weight: 700;
  margin: 20px 0 0;
  letter-spacing: 0.01em;
  word-break: keep-all;
}
.hero__title .nb { display: inline-block; }
.hero__lead {
  font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.95;
  color: var(--muted);
  margin: 22px 0 0;
  max-width: 34em;
}
.hero__cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.hero__cta-sub { font-size: 12px; color: #6b7681; text-align: center; }
.hero__photo { border-radius: 16px; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* CTA ボタン（ヒーロー・最終セクション共通） */
.cta {
  display: block;
  text-align: center;
  background: var(--pink);
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.5;
  padding: 18px 22px;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  animation: pulseCTA 2.6s ease-in-out infinite;
}
.cta:hover { background: var(--pink-dark); color: #ffffff; transform: translateY(-2px); }
@keyframes pulseCTA {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(231, 58, 119, 0.55); }
  50%      { box-shadow: 0 16px 40px -6px rgba(231, 58, 119, 0.75); }
}

/* ---------- 合格実績カード ---------- */
.record {
  max-width: 640px;
  margin: 44px auto 0;
  padding: 0 20px;
}
.record__card {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 28px;
  box-shadow: 0 -6px 34px rgba(0, 0, 0, 0.08);
  border: 1px solid #eaeef2;
  border-bottom: none;
  text-align: center;
}
.record__label { font-size: 13px; font-weight: 700; color: #5a6572; letter-spacing: 0.06em; }
.record__num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: clamp(40px, 5.2vw, 60px);
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
  margin-top: 4px;
}
.record__num small { font-size: 0.38em; margin-left: 4px; }
.record__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.record__row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f4f6f8;
  border-radius: 10px;
  padding: 10px 16px;
}
.record__row-grade { flex: 0 0 74px; font-size: 13px; font-weight: 700; color: #5a6572; text-align: left; }
.record__row-count { flex: 1 1 auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; }
.record__row-count strong {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.record__row-count span { font-size: 12px; color: #5a6572; }
.record__row--hl { background: var(--pink-pale); border: 1.5px solid var(--pink); padding: 12px 16px; }
.record__row--hl .record__row-grade { font-size: 15px; font-weight: 900; color: var(--pink); }
.record__row--hl .record__row-count strong { font-size: 34px; font-weight: 800; color: var(--pink); }
.record__row--hl .record__row-count span { font-size: 13px; font-weight: 700; color: var(--pink); }
.record__period { font-size: 11.5px; color: var(--gray); margin-top: 12px; letter-spacing: 0.04em; }

/* =========================================================
   Roadmap（同じ級に、何年早く届くか）
   ========================================================= */
.roadmap-ref {
  display: block;
  margin-top: 22px;
  padding: 13px 18px;
  border: 1px dashed #cfd6dd;
  border-radius: 999px;
  background: var(--soft);
  font-size: 13.5px;
  color: #5a6572;
  text-align: center;
}
.roadmap-ref strong { color: var(--ink); font-weight: 700; }

.achiever-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.achiever-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 15px;
  border: 2px solid var(--pink-line);
  border-radius: 14px;
  background: #ffffff;
}

/* 入塾時の学年：文脈情報なので控えめに */
.achiever-card__from {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #6b7682;
}
.achiever-card__from-label {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8b949e;
}
.achiever-card__arrow {
  align-self: flex-start;
  margin: -3px 0 -3px 12px;
  color: var(--pink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/* 合格学年：カードの主役。ここに視線が最初に落ちるよう最大ウェイト */
.achiever-card__result {
  padding: 11px 13px 13px;
  border-radius: 11px;
  background: var(--blue);
}
.achiever-card__result-label {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--blue);
}
.achiever-card__result-grade {
  display: block;
  margin-top: 5px;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
}

/* 所要年数：数字だけを大きく出して一瞬で読ませる */
.achiever-card__span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  padding: 6px 10px 7px;
  border: 1px solid var(--pink-line);
  border-radius: 10px;
  background: var(--pink-pale);
  color: var(--pink);
  line-height: 1.2;
}
.achiever-card__span-pre { font-size: 13px; font-weight: 700; }
.achiever-card__span-num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1;
}
.achiever-card__span-suf { font-size: 14.5px; font-weight: 700; }

/* 写真と名前は「実在の証拠」として最小限に、カード末尾へ */
.achiever-card__person {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 1px;
  padding-top: 11px;
  border-top: 1px dashed var(--line);
}
.achiever-card__photo {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--soft);
}
/* 正方形の顔アップ素材はそのまま中央でトリミング */
.achiever-card__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 横位置の写真は顔まわりに寄せる（--wide を付けた場合のみ） */
.achiever-card__photo--wide img {
  position: absolute;
  top: -6%;
  left: 50%;
  width: auto;
  max-width: none;
  height: 160%;
  transform: translateX(-50%);
}
.achiever-card__name { font-size: 13px; font-weight: 700; color: #6b7682; }

.roadmap-callout {
  margin-top: 22px;
  background: var(--blue);
  border-radius: 12px;
  padding: 24px;
  color: #ffffff;
}
.roadmap-callout__title { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.roadmap-callout__text { margin: 12px 0 0; font-size: 14.5px; line-height: 2; color: rgba(255, 255, 255, 0.9); }

/* =========================================================
   Compare（丸暗記に頼らず結果を出せる理由）
   ========================================================= */
.compare-head { display: flex; gap: 10px; margin-top: 30px; font-size: 16.5px; font-weight: 700; }
.compare-head__gutter { flex: 0 0 62px; }
.compare-head__spacer { flex: 0 0 132px; }
.compare-head__col { flex: 1 1 0; text-align: center; padding: 10px; }
.compare-head__col--general { color: #2e7d9c; background: #c9ecfa; border-radius: 9px 9px 0 0; }
.compare-head__col--catal { color: #ffffff; background: var(--pink); border-radius: 8px 8px 0 0; }

.compare-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.compare-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.compare-row__label {
  flex: 1 1 132px;
  max-width: 132px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  font-weight: 700;
}
.compare-cell { flex: 1 1 200px; border-radius: 10px; padding: 15px 16px; line-height: 1.85; }
.compare-cell--x {
  background: #e4f5fc;
  border: 1px dashed #a5dcf1;
  font-size: 14.5px;
  color: #2e6478;
}
.compare-cell--o {
  background: #ffffff;
  border: 2px solid var(--pink);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.compare-cell__mark { font-weight: 900; margin-right: 6px; }
.compare-cell--x .compare-cell__mark { color: #4e93b5; }
.compare-cell--o .compare-cell__mark { color: var(--blue); }
.compare-row__media {
  flex: 0 0 auto;
  align-self: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--pink-line);
  background: var(--soft);
}
.compare-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   Teachers
   ========================================================= */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pill {
  background: #ffffff;
  font-size: 15.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
}
.pill--blue { border: 1px solid #9fddf5; color: #10627f; }
.pill--pink { border: 1px solid var(--pink-line); color: var(--pink); }

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.teacher-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.teacher-card__head { display: flex; align-items: center; gap: 14px; }
.teacher-card__photo {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--blue-line);
}
.teacher-card__photo--pink { border-color: var(--pink-line); }
.teacher-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.teacher-card__meta { min-width: 0; }
.teacher-card__name {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.teacher-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.tag { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; }
.tag--blue { background: var(--blue-pale); color: #10627f; }
.tag--pink { background: var(--pink-pale); color: var(--pink); }
.teacher-card__quote {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
  border-left: 3px solid var(--blue);
  padding-left: 13px;
}
.teacher-card__quote--pink { border-left-color: var(--pink); }

/* =========================================================
   Case study
   ========================================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.case-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}
.case-card__media { aspect-ratio: 16 / 10; }
.case-card__media img { width: 100%; height: 100%; object-fit: cover; }
.case-card__body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}
.case-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.case-card__tag { font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #f4f6f8; color: #5a6572; }
.case-card__tag--blue { background: var(--blue); color: #ffffff; }
.case-card__title {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
}
.case-card__text { font-size: 13.5px; line-height: 1.95; color: var(--muted); }
.case-card__link {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--pink);
  border-bottom: 1px solid var(--pink-line);
}
.case-card__link:hover { color: var(--pink-dark); border-bottom-color: var(--pink-dark); }

/* =========================================================
   Price
   ========================================================= */
.price { background: var(--blue); color: #ffffff; }
.price .section-lead { color: rgba(255, 255, 255, 0.9); max-width: 44em; }
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.price-card {
  background: #ffffff;
  color: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 22px;
}
.price-card__label { font-size: 12.5px; font-weight: 700; color: #5a6572; }
.price-card__num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 30px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.2;
}
.price-card__num small { font-size: 14px; margin-left: 2px; font-weight: 700; }
.price-card__note { font-size: 12px; color: var(--gray); margin-top: 8px; line-height: 1.9; }
.price-card--main { grid-column: 1 / -1; }
.price-card--main .price-card__num { font-size: 34px; }
.price-card--main .price-card__num small { font-size: 15px; }
.price-card--main .price-card__note { margin-top: 10px; }
/* 割引表示（旧価格の取り消し線＋エリア限定バッジ） */
.price-card__badge {
  display: inline-block;
  margin-left: 8px;
  background: var(--blue-pale);
  color: #10627f;
  border: 1px solid var(--blue-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  vertical-align: middle;
}
.price-card__was {
  color: var(--gray);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  margin-right: 10px;
}
.price-card__was small { font-weight: 700; }
.price-card__hour {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  border-radius: 8px;
  padding: 12px 14px;
}
.price-card__hour-label { font-size: 12px; font-weight: 700; color: #10627f; }
.price-card__hour-num {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
}
.price-card__hour-num small { font-size: 13px; margin-left: 2px; }
.price-card__hour-note { font-size: 11.5px; color: #10627f; line-height: 1.7; }
.price-card__support { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.price-card__support-text { font-size: 14px; line-height: 1.95; color: var(--muted); }
.price-card__support-text strong { color: var(--ink); }
.price-card__support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.price-card__support-item {
  background: var(--soft);
  border-radius: 9px;
  padding: 12px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: #10627f;
  text-align: center;
}
.price__chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.price__chip {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
}
.price .note { color: rgba(255, 255, 255, 0.72); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.faq-item {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  color: var(--pink);
  font-size: 17px;
  flex: 0 0 auto;
}
.faq-item__question { flex: 1 1 auto; }
.faq-item__toggle { flex: 0 0 auto; color: var(--blue); font-weight: 900; transition: transform 0.2s ease; }
.faq-item[open] .faq-item__toggle { transform: rotate(45deg); }
.faq-item__answer { padding: 0 16px 18px 44px; font-size: 14px; line-height: 2; color: var(--muted); }

/* =========================================================
   Trial（無料体験・校舎選択）
   ========================================================= */
.trial { background: var(--pink); color: #ffffff; padding: 72px 0 80px; }
.trial__head { max-width: 780px; margin: 0 auto; text-align: center; }
.trial__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 999px;
}
.trial__title {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.45;
  font-weight: 700;
  margin: 20px 0 0;
}
.trial__lead {
  font-size: 15px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.92);
  margin: 18px auto 0;
  max-width: 36em;
}
.trial__lead strong { color: #ffffff; border-bottom: 3px solid rgba(255, 255, 255, 0.55); font-weight: 700; }
.trial__time { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); margin-top: 14px; }

.schools__area {
  margin-top: 40px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 8px;
  letter-spacing: 0.06em;
}
.schools__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.school-card {
  background: #ffffff;
  color: var(--ink);
  border-radius: 12px;
  padding: 14px 14px 18px;
  display: flex;
  flex-direction: column;
}
.school-card__media {
  width: 100%;
  aspect-ratio: 16 / 11;
  border-radius: 8px;
  overflow: hidden;
  background: var(--soft);
}
.school-card__media img { width: 100%; height: 100%; object-fit: cover; }
.school-card__name {
  font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
  font-size: 17px;
  font-weight: 700;
  margin: 14px 0 0;
  line-height: 1.4;
}
.school-card__catch { font-size: 14.5px; font-weight: 700; color: var(--pink); margin: 6px 0 0; }
.school-card__desc { font-size: 12.5px; color: var(--muted); line-height: 1.85; margin: 8px 0 16px; flex: 1 1 auto; }
.school-card__cta {
  display: block;
  text-align: center;
  background: var(--blue);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 12px;
  border-radius: 8px;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.school-card__cta:hover { color: #ffffff; transform: translateY(-2px); filter: brightness(1.06); }
.school-card__cta--line { background: #06c755; }
.trial__note { font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 22px; text-align: center; line-height: 2; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.6); padding: 34px 0 44px; }
.site-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.site-footer__logo img { width: auto; height: 30px; }
.site-footer__meta { font-size: 11px; line-height: 1.9; }

/* =========================================================
   モバイル固定 申し込みバー
   ========================================================= */
.apply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(22, 32, 43, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid var(--pink);
  padding: 12px 16px;
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.apply-bar.show { transform: translateY(0); }
.apply-bar__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.apply-bar__copy { flex: 1 1 180px; min-width: 0; }
.apply-bar__sub { font-size: 11px; color: rgba(255, 255, 255, 0.82); letter-spacing: 0.06em; }
.apply-bar__main { font-size: 13px; font-weight: 700; color: #ffffff; margin-top: 2px; }
.apply-bar__cta {
  flex: 0 1 auto;
  background: var(--pink);
  color: #ffffff;
  font-weight: 900;
  font-size: 14px;
  padding: 15px 22px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(231, 58, 119, 0.32);
  transition: transform 0.2s ease, background 0.2s ease;
}
.apply-bar__cta:hover { background: var(--pink-dark); color: #ffffff; transform: translateY(-1px); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 680px) {
  .section { padding: 52px 0 56px; }
  .site-header__tag { display: none; }
  .site-header__logo img { height: 30px; }
  .site-header__cta { font-size: 12px; padding: 10px 14px; }
  .hero { padding-top: 40px; }
  .record__card { padding: 22px 18px; }

  /* ロードマップ：合格者カードは2列に */
  .achiever-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .achiever-card { padding: 14px 12px 12px; gap: 7px; }
  .achiever-card__from { font-size: 12.5px; gap: 6px; }
  .achiever-card__from-label { font-size: 10px; padding: 1px 5px; }
  .achiever-card__arrow { margin-left: 8px; font-size: 11px; }
  .achiever-card__result { padding: 9px 10px 11px; }
  .achiever-card__result-label { font-size: 10px; padding: 1px 7px; }
  .achiever-card__result-grade { font-size: 20px; margin-top: 3px; }
  .achiever-card__span { padding: 5px 7px 6px; gap: 2px; }
  .achiever-card__span-pre { font-size: 11px; }
  .achiever-card__span-num { font-size: 20px; }
  .achiever-card__span-suf { font-size: 12px; }
  .achiever-card__person { gap: 7px; padding-top: 9px; }
  .achiever-card__photo { width: 32px; height: 32px; }
  .achiever-card__name { font-size: 11.5px; }

  /* 比較表：ラベルを上に、セルを縦積みに */
  .compare-head { display: none; }
  .compare-rows { gap: 18px; }
  .compare-row { gap: 8px; }
  .compare-row__label {
    flex: 1 1 100%;
    max-width: none;
    font-size: 14px;
    border-left: 4px solid var(--pink);
    padding-left: 10px;
  }
  .compare-cell { flex: 1 1 100%; }
  .compare-row__media { width: 44px; height: 44px; order: -1; align-self: flex-start; }
  .compare-row__label { flex: 1 1 auto; }
  .compare-cell--x::before { content: "一般的な英検対策塾："; display: block; font-size: 10.5px; font-weight: 700; color: #4e93b5; margin-bottom: 2px; }
  .compare-cell--o::before { content: "キャタル："; display: block; font-size: 10.5px; font-weight: 700; color: var(--pink); margin-bottom: 2px; }

  .price-grid { grid-template-columns: minmax(0, 1fr); }

  .faq-item__answer { padding-left: 16px; }
  .apply-bar__copy { display: none; }
  .apply-bar__cta { flex: 1 1 auto; font-size: 13.5px; padding: 14px 16px; }
  .site-footer__inner { justify-content: center; text-align: center; }
}