/* ==========================================================
   kiddycat/css/style.css
   アルク Kiddy CAT英語教室（共通 / 北山校 / 西府校 の3ページで共有）
   読み込み順： reset.css → tokens.css → このファイル
   ========================================================== */

:root{
  /* このサイトで使う色を汎用名に割り当てる（tokens.css のコメント参照） */
  --main:      var(--kiddycat-main);   /* #0058A8 アルク青 */
  --main-dark: #00417d;
  --main-tint: #e8f0f9;                /* 青のごく薄い面 */
  --sub:       var(--kiddycat-sub);    /* #FFD200 アルク黄 */
  --cream:     #fffaef;                /* 地色（ティザー踏襲） */

  /* 子ども英語教室なので、ティザーと同じ丸ゴシックを既定にする */
  --font-base: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont,
               "Hiragino Maru Gothic ProN", "Zen Kaku Gothic New", sans-serif;
  --font-en:   "Fredoka", var(--font-base);
}

body{ background: var(--cream); }

/* ページ内リンクで飛んだとき、固定ヘッダーに見出しが隠れないように */
[id]{ scroll-margin-top: 5rem; }
.en{ font-family: var(--font-en); }

/* ---------- 共通パーツ ---------- */

.section{ padding: var(--sp-8) 0; }
.section--tint{ background: var(--main-tint); }
.section--white{ background: var(--white); }

.section-head{ text-align: center; margin-bottom: var(--sp-7); }
.section-head .label{
  display: inline-block; font-family: var(--font-en);
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  color: var(--main); background: var(--sub);
  padding: .3rem .9rem; border-radius: 99px; margin-bottom: var(--sp-4);
}
.section-head h2{
  font-size: clamp(1.35rem, 5.4vw, 1.9rem); font-weight: 700;
  color: var(--main-dark); line-height: 1.5;
}
.section-head .lead{
  margin-top: var(--sp-4); font-size: .95rem; color: var(--ink-soft);
}

.lead-text{ font-size: 1rem; }
.lead-text + .lead-text{ margin-top: var(--sp-4); }

.note{ font-size: .82rem; color: var(--ink-soft); line-height: 1.8; }
.note li{ padding-left: 1em; text-indent: -1em; }
.note li + li{ margin-top: .2rem; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .8rem 1.8rem; border-radius: 99px;
  font-weight: 700; font-size: 1rem; text-align: center;
  background: var(--main); color: var(--white);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover{ background: var(--main-dark); transform: translateY(-2px);
            box-shadow: 0 .5rem 1.2rem rgba(0,88,168,.25); }
.btn--sub{ background: var(--sub); color: var(--main-dark); }
.btn--sub:hover{ background: #ffdd3d; }
.btn--ghost{ background: var(--white); color: var(--main);
             box-shadow: inset 0 0 0 2px var(--main); }
.btn--ghost:hover{ background: var(--main-tint); }
/* LINE の友だち追加ボタン（LINE の緑） */
.btn--line{ background: #06C755; color: var(--white); }
.btn--line:hover{ background: #05b14b; box-shadow: 0 .5rem 1.2rem rgba(6,199,85,.25); }
/* マウスで操作するパソコンでは、LINE のボタンは出さない（押しても同じQRコードが出るだけのため）。スマホ・タブレットでは出す。
   .only-touch／.only-mouse は、スマホ用・パソコン用の説明文の切りかえに使う */
.only-mouse{ display: none; }
@media (hover: hover) and (pointer: fine){
  .btn--line, .only-touch{ display: none; }
  .only-mouse{ display: inline; }
}

/* ---------- リンクの下線ルール ----------
   ボタン（.btn など塗りや枠のあるもの）→ 下線なし
   文字だけのリンク（「くわしく見る →」など）→ 下線あり
   ヘッダー・メニュー・フッターのナビゲーション → 下線なし（マウスを乗せたときだけ）
   ---------------------------------------- */
a.btn{ text-decoration: none; }
a.go{ text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a.go:hover{ text-decoration-thickness: 2px; }
.btn svg{ width: 1em; height: 1em; flex: none; }

/* ---------- ヘッダー（Kids Duo を参考にした3段構成） ----------
   ① 上部の細いバー（運営元・グループサイトへの導線）
   ② ロゴ ＋ 申し込みボタン
   ③ メニュー行（スマホでは横スクロール）
   ------------------------------------------------------------ */

.topbar{
  background: var(--main-dark); color: rgba(255,255,255,.9);
  font-size: .72rem; letter-spacing: .02em;
}
.topbar__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: .35rem 0; min-height: 1.9rem;
}
.topbar p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar a{ white-space: nowrap; }
.topbar a:hover{ text-decoration: underline; }

.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--sub);
}
.site-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: .6rem 0;
}
.site-header__logo img{ width: 10.5rem; height: auto; }
.site-header__actions{ display: flex; align-items: center; gap: var(--sp-3); }

/* 教室の切り替え（北山校・西府校） */
.school-switch{ display: none; gap: .4rem; }
.school-switch a{
  font-size: .8rem; font-weight: 700; color: var(--main);
  padding: .4rem .8rem; border-radius: 99px; background: var(--main-tint);
}
.school-switch a:hover{ background: #d8e6f5; }
.school-switch a[aria-current="page"]{ background: var(--main); color: var(--white); }

/* 申し込みボタン */
.header-cta{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--sub); color: var(--main-dark);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
  padding: .6rem 1rem; border-radius: 99px;
  transition: background-color .2s ease, transform .2s ease;
}
.header-cta:hover{ background: #ffdd3d; transform: translateY(-1px); }
.header-cta svg{ width: .75rem; height: .75rem; flex: none; }

/* メニュー行 */
.gnav{ background: var(--white); border-bottom: 1px solid var(--line); }
.gnav__list{
  display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gnav__list::-webkit-scrollbar{ display: none; }
.gnav__list a{
  display: block; white-space: nowrap; font-size: .85rem; font-weight: 700;
  padding: .8rem 1rem; color: var(--ink); position: relative;
}
.gnav__list a::after{
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .35rem;
  height: 3px; border-radius: 2px; background: var(--sub);
  transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.gnav__list a:hover::after,
.gnav__list a[aria-current="page"]::after{ transform: scaleX(1); }

/* ---------- ヒーロー ---------- */

.hero{
  position: relative; overflow: hidden; color: var(--white);
  background: linear-gradient(170deg, #0a6cc4 0%, var(--main) 55%, var(--main-dark) 100%);
  padding: var(--sp-8) 0 calc(var(--sp-8) + 2rem);
}
.hero::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.4rem;
  background: var(--cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* すぐ下が白い背景のセクション（教室ページの「お知らせ」）のときは、カーブも白に */
.hero--to-white::after{ background: var(--white); }
.hero__bubbles{ position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.hero__bubbles span{
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.12); animation: float 9s ease-in-out infinite;
}
.hero__bubbles span:nth-child(1){ width: 7rem; height: 7rem; top: -1.5rem; right: -1.5rem; }
.hero__bubbles span:nth-child(2){ width: 4rem; height: 4rem; top: 9rem; left: -1.2rem; animation-delay: 1.5s; }
.hero__bubbles span:nth-child(3){ width: 2.4rem; height: 2.4rem; top: 4rem; right: 4.5rem;
                                   animation-delay: 3s; background: rgba(255,210,0,.4); }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-1rem); } }
.hero__inner{ position: relative; z-index: 1; }
.hero__badge{
  display: inline-block; background: var(--sub); color: var(--main-dark);
  font-weight: 700; font-size: .8rem; letter-spacing: .08em;
  padding: .4rem 1rem; border-radius: 99px; margin-bottom: var(--sp-5);
}
.hero h1{ font-size: clamp(1.5rem, 6.4vw, 2.4rem); line-height: 1.5; }
.hero h1 .small{
  display: block; font-size: .56em; font-weight: 700;
  opacity: .92; margin-bottom: .4rem;
}
.hero__lead{ margin-top: var(--sp-4); font-size: 1rem; opacity: .95; }
.hero__img{ margin-top: var(--sp-6); border-radius: var(--radius-lg); overflow: hidden; }
.hero__img img{ width: 100%; }

/* ---------- キービジュアル・カルーセル ---------- */

.kv{ position: relative; background: var(--main-tint); padding: var(--sp-6) 0 var(--sp-7); overflow: hidden; }

.kv__viewport{ overflow: hidden; }
.kv__track{
  display: flex; align-items: stretch;
  transition: transform .55s cubic-bezier(.3,.8,.35,1);
}
.kv__slide{ flex: 0 0 100%; padding-inline: .3rem; }
.kv__card{
  position: relative; height: 100%; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--white);
  box-shadow: 0 .4rem 1.4rem rgba(0,88,168,.12);
}
.kv__card img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kv__body{ padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.kv__label{
  display: inline-block; background: var(--sub); color: var(--main-dark);
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .8rem; border-radius: 99px; margin-bottom: var(--sp-3);
}
.kv__card h2, .kv__card h1{
  font-size: clamp(1.15rem, 5vw, 1.6rem); line-height: 1.5; color: var(--main-dark);
  margin-bottom: var(--sp-3);
}
.kv__card p{ font-size: .92rem; }
.kv__card .btn{ margin-top: var(--sp-5); }
@media (max-width: 47.99rem){ .kv__card .btn{ display: flex; width: fit-content; margin-inline: auto; } }   /* スマホではボタンを真ん中に */

/* 前へ／次へ */
.kv__arrow{
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--main);
  box-shadow: 0 .2rem .8rem rgba(0,88,168,.2);
  transition: background-color .2s ease;
}
.kv__arrow:hover{ background: var(--white); }
.kv__arrow svg{ width: 1.1rem; height: 1.1rem; }
.kv__arrow--prev{ left: .4rem; }
.kv__arrow--next{ right: .4rem; }

/* ドット */
.kv__dots{ display: flex; justify-content: center; gap: .6rem; margin-top: var(--sp-5); }
.kv__dots button{
  width: .7rem; height: .7rem; border-radius: 50%; background: #b9d2e9;
  transition: background-color .2s ease, transform .2s ease;
}
.kv__dots button[aria-current="true"]{ background: var(--sub); transform: scale(1.25); }
.kv__dots button:hover{ background: var(--main); }

/* JSが動かないときは横に並べて全部見せる（カルーセルなしでも読める） */
.kv:not(.is-ready) .kv__arrow,
.kv:not(.is-ready) .kv__dots{ display: none; }
.kv:not(.is-ready) .kv__track{ display: grid; gap: var(--sp-5); }
.kv:not(.is-ready) .kv__slide{ padding-inline: 0; }

/* ---------- キービジュアル下の帯 ---------- */

.kv-band{ background: var(--main); color: var(--white); padding: var(--sp-7) 0; text-align: center; }
.kv-band__kicker{
  display: inline-block; font-size: .82rem; font-weight: 700;
  color: var(--sub); margin-bottom: var(--sp-3);
}
.kv-band h2{ font-size: clamp(1.4rem, 6.4vw, 2.2rem); letter-spacing: .04em; line-height: 1.5; }
.kv-band h2 .x{ color: var(--sub); margin-inline: .3em; }
.kv-band p{ margin-top: var(--sp-4); font-size: .92rem; opacity: .92; }
.kv-band .btn{ margin-top: var(--sp-5); background: var(--white); color: var(--main); }
.kv-band .btn:hover{ background: var(--sub); color: var(--main-dark); box-shadow: none; }
/* 見出し「4技能×少人数」は真ん中のまま、キャラクターを見出しのすぐ左に添える */
.kv-band__title{ position: relative; display: table; margin-inline: auto; }   /* 文字の幅だけの箱にして真ん中に置く（イラストの基準にする） */
.kv-band__mascot{
  position: absolute; right: calc(100% + .6rem); top: 50%; transform: translateY(-50%);
  width: 3.6rem; height: auto; margin: 0; pointer-events: none;
}

/* ---------- カード（特長・コースなど） ---------- */

.cards{ display: grid; gap: var(--sp-4); }
.card{
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5);
  display: flex; flex-direction: column;   /* 高さを揃えたときに中身が散らばらないように */
}
.card__num{
  display: inline-block; font-family: var(--font-en);
  font-size: .78rem; font-weight: 600; letter-spacing: .12em;
  color: var(--white); background: var(--main);
  padding: .25rem .75rem; border-radius: 99px; margin-bottom: var(--sp-4);
}
.card h3{ font-size: 1.1rem; color: var(--main-dark); margin-bottom: var(--sp-3); }
.card p{ font-size: .94rem; }
.card__meta{
  margin-top: auto; padding-top: var(--sp-4); border-top: 1px dashed var(--line);
  font-size: .86rem; color: var(--ink-soft);
}
.card__meta dt{ font-weight: 700; color: var(--main); }
.card__meta dd + dt{ margin-top: .5rem; }

/* 写真つきカード */
.card--photo{ padding: 0; overflow: hidden; }
.card--photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }   /* 正方形などの写真でもカードの高さを揃える */
.card--photo .card__body{ padding: var(--sp-5); }

/* カードの上部いっぱいに写真を置く（カードの余白を打ち消して端まで広げる） */
.card__photo{
  width: calc(100% + var(--sp-5) * 2);
  max-width: none;   /* reset.css の max-width:100% を打ち消す（はみ出させたいので） */
  margin: calc(var(--sp-6) * -1) calc(var(--sp-5) * -1) var(--sp-5);
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}

/* ---------- 体験レッスンの流れ（ステップ） ---------- */

.steps{ position: relative; counter-reset: step; }
.steps > li{
  position: relative; padding-left: 3.6rem; padding-bottom: var(--sp-6);
}
.steps > li::before{                      /* 番号のまる */
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-en); font-weight: 600; font-size: 1.05rem;
  background: var(--main); color: var(--white);
}
.steps > li::after{                       /* つなぎの点線 */
  content: ""; position: absolute; left: 1.2rem; top: 2.9rem; bottom: .4rem;
  border-left: 3px dotted #bcd4ea;
}
.steps > li:last-child{ padding-bottom: 0; }
.steps > li:last-child::after{ display: none; }
.steps h3, .steps h4{ font-size: 1.05rem; color: var(--main-dark); margin-bottom: .3rem; }
.steps h3 .time, .steps h4 .time{
  display: inline-block; margin-left: .5rem; vertical-align: .1em;
  font-size: .72rem; font-weight: 700; color: var(--main);
  background: var(--sub); padding: .15rem .6rem; border-radius: 99px;
}
.steps p{ font-size: .92rem; }

.total-time{
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.total-time div{
  flex: 1 1 8rem; background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-4); text-align: center;
  display: flex; flex-direction: column; justify-content: center;   /* 中身を上下の真ん中に */
}
.total-time dt{ font-size: .78rem; color: var(--ink-soft); }
.total-time dd{ font-size: 1.15rem; font-weight: 700; color: var(--main-dark); margin-top: .2rem; }
/* 「全体の所要時間」だけ色を反転（紺の面に白い文字）して目立たせる */
/* 「全体の所要時間」だけ黄色の背景に青い文字で目立たせる */
.total-time .is-total{ background: var(--sub); border-color: var(--sub); }
.total-time .is-total dt{ color: var(--main-dark); font-weight: 700; }
.total-time .is-total dd{ color: var(--main-dark); }


/* ---------- 料金表 ---------- */

.table-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table{
  min-width: 34rem; background: var(--white);
  border-radius: var(--radius); overflow: hidden;
}
.price-table caption{
  text-align: left; font-weight: 700; color: var(--main-dark);
  font-size: 1.05rem; margin-bottom: var(--sp-3);
}
.price-table th, .price-table td{
  padding: .7rem .9rem; font-size: .9rem; border-bottom: 1px solid var(--line);
  text-align: center;
}
.price-table thead th{
  background: var(--main); color: var(--white); font-size: .85rem; font-weight: 700;
}
.price-table tbody th{ text-align: left; font-weight: 500; }
.price-table tbody tr:nth-child(even){ background: #fafbfd; }
.price-table td.price{ font-weight: 700; color: var(--main-dark); white-space: nowrap; }
.table-scroll + .note{ margin-top: var(--sp-4); }

/* スマホでは横スクロールさせず、1行＝1枚のカードとして縦に積む
   （金額が画面の外に隠れないようにするため） */
@media (max-width: 47.99rem){
  .price-table{ min-width: 0; display: block; border-radius: 0; }
  .price-table caption{ display: block; }
  .price-table thead{ display: none; }
  .price-table tbody, .price-table tr, .price-table th, .price-table td{ display: block; }
  .price-table tr{
    background: var(--white); border: 2px solid var(--line);
    border-radius: var(--radius); padding: .6rem 1rem; margin-bottom: var(--sp-3);
  }
  .price-table tbody tr:nth-child(even){ background: var(--white); }
  .price-table tbody th{
    padding: .2rem 0 .5rem; font-weight: 700; font-size: .98rem; color: var(--main-dark);
    border-bottom: 1px dashed var(--line);
  }
  .price-table td{
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .45rem 0; border-bottom: none; text-align: right;
  }
  .price-table td::before{
    content: attr(data-label); flex: none;
    font-size: .8rem; font-weight: 500; color: var(--ink-soft); text-align: left;
  }
  .price-table td.price{ font-size: 1.05rem; }
}

/* ---------- よくある質問 ---------- */

.faq-prep{
  background: var(--white); border: 2px dashed #bcd4ea;
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); text-align: center;
}
.faq-prep p + p{ margin-top: var(--sp-3); font-size: .9rem; color: var(--ink-soft); }

/* ---------- 教室を選ぶ ---------- */

.school-card{
  display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  padding: var(--sp-6) var(--sp-5) 0;
}
/* 地図はカードの下端いっぱいに。
   カードの中に小さく浮かせず、面としてはめ込むことで平らに見せる */
.school-card__map{
  width: calc(100% + var(--sp-5) * 2);
  margin: var(--sp-5) calc(var(--sp-5) * -1) 0;
  aspect-ratio: 16 / 10;
  background: var(--main-tint);
  border-top: 2px solid var(--line);
}
.school-card__map iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* 各教室ページのアクセス欄の地図（横いっぱい） */
.access-map{
  margin-top: var(--sp-5);
  width: 100%; aspect-ratio: 4 / 3;
  border: 2px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--main-tint);
}
.access-map iframe{ width: 100%; height: 100%; border: 0; display: block; }

/* カードの中のリンク（旧：カード全体がリンク） */

.school-card__badge{
  display: inline-block; font-size: .74rem; font-weight: 700;
  padding: .25rem .7rem; border-radius: 99px; margin-bottom: var(--sp-3);
  background: var(--main-tint); color: var(--main);
}
.school-card--open .school-card__badge{ background: var(--sub); color: var(--main-dark); }
.school-card h3{ font-size: 1.2rem; color: var(--main-dark); margin-bottom: .3rem; }
.school-card p{ font-size: .9rem; }
.school-card .go{
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: var(--sp-4); font-size: .88rem; font-weight: 700; color: var(--main);
}
.school-card .go svg{ width: .9rem; height: .9rem; }

/* ---------- 座布団（読みものを幅広の枠に収めるための白い面） ----------
   幅広にすると1行が長くなって読みにくいので、白い面にのせて
   文章を2段組み（左→右）に流す。スマホでは1段のまま
   ------------------------------------------------------------------ */

.panel{
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5);
}

/* ---------- ジグザグ（文章と写真を互い違いに） ----------
   1段目：文章 ｜ 写真　　2段目：写真 ｜ 文章
   スマホでは「文章 → 写真」の順に縦に積む
   -------------------------------------------------------- */

.zigzag{ display: grid; gap: var(--sp-7); }
.zigzag__row{ display: grid; gap: var(--sp-5); align-items: center; }
.zigzag__text{ margin: 0; }
.zigzag__img{
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;   /* 横長 */
  border-radius: var(--radius-lg);
}
/* 上の方に大事なもの（顔など）がある写真は、上寄りで切り抜く */
.zigzag__img.is-top, .card__photo.is-top, .card--photo img.is-top{ object-position: center 20%; }

/* ---------- 左右分割（左：文章／右：横長写真を縦に2枚） ---------- */

.split{ display: grid; gap: var(--sp-6); }
.split__text .lead-text + .lead-text{ margin-top: var(--sp-4); }
/* フォニックスの表：切れないよう全体を見せ、文章と動画の下に大きく置く */
.phonics-chart{
  max-width: 38rem; margin: var(--sp-7) auto 0;
  background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4);
}
.phonics-chart img{ width: 100%; height: auto; }
/* 縦長の動画（スマホで撮影）：縦長のまま、真ん中に置く */
.split__video{ margin: 0; justify-self: center; width: min(100%, 17rem); }
.split__video video{
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg); background: #000;
}

/* ---------- 体験レッスンの流れ：左に所要時間、右にステップ ---------- */

.trial-layout{ display: grid; gap: var(--sp-6); }

/* ---------- お問い合わせ ---------- */

.contact-box{
  display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5);
}
.contact-box__action{ margin-top: auto; padding-top: var(--sp-5); }   /* ボタンは下端で揃える */
@media (max-width: 47.99rem){ .contact-box__action{ text-align: center; } }   /* スマホ（1列）では、LINEのカードと合わせてボタンを真ん中に */
.contact-box h3{ font-size: 1.05rem; color: var(--main-dark); margin-bottom: var(--sp-3); }
.contact-box dl{ font-size: .92rem; }
.contact-box dt{ font-weight: 700; color: var(--main); font-size: .82rem; margin-top: var(--sp-3); }
.contact-box dt:first-child{ margin-top: 0; }
.contact-box a:not(.btn){ text-decoration: underline; text-underline-offset: .2em; }   /* ボタンには下線を付けない */

/* LINEのQRコード（お問い合わせカードの中） */
.contact-box__line{ display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.contact-box__qr{
  flex: none; width: 6.5rem; height: 6.5rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.contact-box__line .btn{ min-height: 2.75rem; padding: .6rem 1.2rem; font-size: .92rem; }
.qr .btn--line{ margin: 0 auto var(--sp-3); }

/* Instagram への案内（西府校） */
.insta{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4);
  margin-top: var(--sp-5); padding: var(--sp-5); text-align: center;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-lg);
}
.insta__icon{ width: 2.6rem; height: 2.6rem; flex: none; color: #d6246e; }
.insta__title{ font-weight: 700; color: var(--main-dark); }
.insta__id{ font-size: .9rem; color: var(--ink-soft); }
@media (min-width: 48rem){ .insta{ text-align: left; gap: var(--sp-5); } }

/* ---------- フッター ---------- */

.site-footer{
  background: var(--main-dark); color: rgba(255,255,255,.85);
  padding: var(--sp-7) 0 var(--sp-6); margin-top: var(--sp-8);
}
/* ロゴは色を変えず、白い面にのせる（濃い青地でもブランドカラーのまま読める） */
.site-footer__logo{
  display: inline-block; background: var(--white);
  padding: .75rem 1.1rem; border-radius: .7rem; margin-bottom: var(--sp-5);
}
.site-footer__logo img{ width: 9.5rem; height: auto; display: block; }
.site-footer nav ul{ display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: .88rem; }
.site-footer nav a:hover{ text-decoration: underline; }
.site-footer .copy{ margin-top: var(--sp-6); font-size: .75rem; opacity: .7; line-height: 1.8; }

/* ---------- キャラクター（アルク公式素材 goody / listeny） ----------
   ※ Webでの使用規定（改変の可否・余白規定・使用範囲）はアルクに確認予定。
      画像は原本のまま、拡大・縮小だけで使っている
   ------------------------------------------------------------------ */

.mascot{ width: 4.5rem; height: auto; margin: 0 auto var(--sp-4); }
.mascot--sm{ width: 3.4rem; }
.mascot--lg{ width: 6.5rem; }

/* 見出しの横に寄り添わせるとき */
/* スマホはほかの見出しと同じくイラストが上。PCは見出しを画面の真ん中に置き、イラストだけ見出しの右に添える */
@media (min-width: 48rem){
  .head-with-mascot > div{ position: relative; display: table; margin-inline: auto; }
  .head-with-mascot .mascot{ position: absolute; left: calc(100% + var(--sp-3)); bottom: 0; margin: 0; }
}

/* 帯・箱の中で、すみっこに置くとき */
.has-mascot{ position: relative; }
.mascot--corner{
  position: absolute; right: .6rem; bottom: 0; width: 4.2rem;
  margin: 0; pointer-events: none;
}

/* カードの中で小さく添えるとき */
.card__mascot{ width: 3rem; height: auto; margin-bottom: var(--sp-3); }

/* スマホでは見出しが窮屈になるので、キャラクターを上に回す */
@media (max-width: 47.99rem){
  .mascot--corner{ width: 3.4rem; bottom: .4rem; right: .4rem; }
}

/* ---------- ふわっと表示 ---------- */

@keyframes pop{ from{ opacity: 0; transform: translateY(1.2rem); } to{ opacity: 1; transform: none; } }
.reveal{ animation: pop .8s cubic-bezier(.2,.8,.3,1) both; }
/* スクロールで見えてきたら、下からふわっと表示（js/scroll-reveal.js が付け外しする） */
.fade-up{ opacity: 0; transform: translateY(1.6rem); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.3,1); }
.fade-up.is-shown{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ animation: none; }
  .hero__bubbles span{ animation: none; }
}

/* ==========================================================
   タブレット以上
   ========================================================== */
@media (min-width: 48rem){
  .mascot--corner{ width: 6.5rem; right: 1.5rem; }
  .kv-band__mascot{ width: 5rem; right: calc(100% + 1.5rem); transform: translateY(-68%); }   /* PCは少し上に */
  .section{ padding: var(--sp-9) 0; }
  .hero{ padding: var(--sp-9) 0 calc(var(--sp-9) + 2rem); }
  .hero::after{ height: 3.4rem; }
  .hero__bubbles span:nth-child(1){ width: 12rem; height: 12rem; top: -3rem; right: -3rem; }
  .hero__bubbles span:nth-child(2){ width: 6rem; height: 6rem; top: 12rem; left: -2rem; }
  .hero__lead{ font-size: 1.08rem; }

  .cards--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .panel{ padding: var(--sp-7) var(--sp-8); }
  .panel--columns{ columns: 2; column-gap: var(--sp-8); }
  .panel--columns .lead-text{ margin-top: 0; margin-bottom: var(--sp-4); }

  .access-map{ aspect-ratio: 16 / 7; }   /* パソコンでは横長に */
  .zigzag{ gap: var(--sp-8); }
  .zigzag__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .zigzag__row--flip .zigzag__text{ order: 2; }   /* 2段目は写真を左、文章を右に */

  .split{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); align-items: center; }
  .news-item{ grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-7); padding: var(--sp-6); }
  .news-item--text{ grid-template-columns: minmax(0, 1fr); }   /* チラシがないお知らせは文章だけ */
  .split--video{ grid-template-columns: minmax(0, 1fr) 15rem; max-width: 54rem; margin-inline: auto; }   /* 右は縦長の動画の幅だけ。全体を少し内側に寄せて1行を短く */
  .split--video .split__video{ width: 15rem; }   /* 文章とだいたい同じ高さに */

  .trial-layout{ grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .trial-layout .total-time{ flex-direction: column; margin-bottom: 0; }
  .trial-layout .steps{ max-width: none; margin-inline: 0; }
  .cards--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards{ gap: var(--sp-5); }   /* 同じ行のカードは高さを揃える（grid の既定 stretch） */

  .site-header__logo img{ width: 13rem; }
  .site-header__links a{ font-size: .85rem; }
  .topbar{ font-size: .78rem; }
  .school-switch{ display: flex; }
  .header-cta{ font-size: .88rem; padding: .7rem 1.4rem; }
  /* 収まるときは中央寄せ、はみ出すときは左端から。
     justify-content:center だと、はみ出したとき左端がスクロールで出せなくなるため
     両端の項目に auto マージンを付けて中央寄せしている */
  .gnav__list > li:first-child{ margin-inline-start: auto; }
  .gnav__list > li:last-child{ margin-inline-end: auto; }
  .gnav__list a{ padding: .9rem 1.1rem; font-size: .88rem; }

  /* 両隣がちらっと見えるカルーセル（Kids Duo と同じ見せ方） */
  .kv{ padding: var(--sp-7) 0 var(--sp-8); }
  .kv__slide{ flex: 0 0 76%; padding-inline: .6rem; }
  .kv__card{ display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
  .kv__card img{ height: 100%; aspect-ratio: auto; }
  .kv__body{ padding: var(--sp-7) var(--sp-6); align-self: center; }
  .kv__arrow{ width: 3.2rem; height: 3.2rem; top: 50%; }
  .kv__arrow--prev{ left: 1rem; }
  .kv__arrow--next{ right: 1rem; }

  .steps{ max-width: 34rem; margin-inline: auto; }
  .price-table{ min-width: 0; width: 100%; }
  .mascot{ width: 6rem; }
}

/* ==========================================================
   教室ページ（北山校 / 西府校）で使うパーツ
   ========================================================== */

/* ---------- パンくず ---------- */
.breadcrumb{ padding: var(--sp-3) 0; font-size: .78rem; color: var(--ink-soft); }   /* 上下同じ余白で真ん中に */
.breadcrumb ol{ display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li::after{ content: "›"; margin-left: .4rem; color: #b9c2cf; }
.breadcrumb li:last-child::after{ content: none; }
.breadcrumb a{ text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 教室ページのヒーロー ---------- */
.hero--school h1{ font-size: clamp(1.7rem, 8vw, 3rem); }
.hero--school .hero__lead{ font-size: .95rem; }

/* ---------- 教室の基本情報 ---------- */
.info-table{ background: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
.info-table th, .info-table td{
  padding: var(--sp-4) var(--sp-5); font-size: .94rem;
  border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.info-table tr:last-child th, .info-table tr:last-child td{ border-bottom: none; }
.info-table th{
  width: 7.5rem; white-space: nowrap;
  font-weight: 700; font-size: .85rem;
  color: var(--white); background: var(--main);   /* ボタンと同じ濃い青に白抜き */
  border-bottom-color: rgba(255,255,255,.25);     /* 青の上の区切り線は白を薄く */
}
.info-table a{ text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 34rem){
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td{ display: block; }
  .info-table th{ width: auto; padding-top: .5rem; padding-bottom: .5rem; border-bottom: none; }
  .info-table td{ padding-top: var(--sp-3); }
}

/* ---------- 講師紹介 ---------- */
.teacher{ text-align: center; }
.teacher__photo{
  width: 11rem; height: 11rem; border-radius: 50%; overflow: hidden;
  margin: 0 auto var(--sp-5); border: 4px solid var(--sub);
}
.teacher__photo img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 14%;  /* 顔が中心に来るよう少し上寄せ */
}
/* 2026-09-27 聡志さん指示：アレックス先生は頭が切れないよう写真を下げる。
   クリスチアン先生は引きの写真なので、顔まわりを拡大してアレックス先生と同じくらいの大きさに */
.teacher__photo img.is-alex{ object-position: center 0; }
.teacher__photo{ position: relative; }
.teacher__photo img.is-christian{
  /* 写真（600×800）を丸の2.5倍の幅で置き、顔（写真の左から45%・上から37%あたり）が丸の真ん中より少し上に来るようずらす
     （2026-09-28 よぽちゃん：もう少しアップ＆上に → さらに少し上に） */
  position: absolute; width: 250%; height: auto; max-width: none; left: -62%; top: -95%;
}
.teacher__role{ font-size: .8rem; font-weight: 700; color: var(--main); }
.teacher h3{ font-size: 1.15rem; margin: .2rem 0 var(--sp-3); }
.teacher__tags{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin-bottom: var(--sp-4);
}
.teacher__tags li{
  font-size: .76rem; padding: .2rem .7rem; border-radius: 99px;
  background: var(--main-tint); color: var(--main);
}
.teacher__msg{ text-align: left; font-size: .94rem; }
.teacher__msg + .teacher__msg{ margin-top: var(--sp-3); }
.teacher__msg--en{ font-family: var(--font-en); font-size: .92rem; color: var(--ink-soft); }

/* ---------- 実績 ---------- */
.result-nums{ display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.result-nums div{
  flex: 1 1 8rem; max-width: 12rem; text-align: center;
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-4);
}
.result-nums dt{ font-size: .85rem; color: var(--ink-soft); }
.result-nums dd{
  font-family: var(--font-en); font-size: 2rem; font-weight: 600;
  color: var(--main); line-height: 1.2; margin-top: .2rem;
}
.result-nums dd .unit{ font-family: var(--font-base); font-size: .9rem; margin-left: .15rem; }

/* ---------- 生徒・保護者の声 ---------- */
.voice{ background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); }
/* 時間割（掲示用の画像をそのまま表示。タップで大きく開く） */
.timetable{ max-width: 40rem; margin: 0 auto; }
.timetable a{ display: block; }
.timetable img{
  width: 100%; height: auto; background: var(--white);
  border: 2px solid var(--line); border-radius: var(--radius-lg);
  transition: box-shadow .2s ease;
}
.timetable a:hover img{ box-shadow: 0 .5rem 1.4rem rgba(0,88,168,.15); }
.timetable figcaption{ margin-top: var(--sp-3); text-align: center; font-size: .82rem; color: var(--ink-soft); }

/* 生徒さんの写真（円形。背景色は写真に入っている） */
.voice__photos{ display: flex; justify-content: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.voice__photo{
  width: 7.5rem; height: 7.5rem; border-radius: 50%;
  object-fit: cover; object-position: center 20%;
}
.voice{ text-align: left; }
@media (min-width: 48rem){
  .voice__photo{ width: 9rem; height: 9rem; }   /* パソコンでは少し大きく */
}
.voice__who{
  display: inline-block; font-size: .78rem; font-weight: 700;
  color: var(--main); background: var(--main-tint);
  padding: .2rem .7rem; border-radius: 99px; margin-bottom: var(--sp-3);
}
.voice blockquote{ font-size: .96rem; }
.voice blockquote::before{ content: "「"; }
.voice blockquote::after{ content: "」"; }
.voice details, .news details, .news-like details{ margin-top: var(--sp-4); border-top: 1px dashed var(--line); padding-top: var(--sp-3); }
.voice summary, .news summary, .news-like summary{
  cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--main);
  list-style: none;
}
.voice summary::-webkit-details-marker, .news summary::-webkit-details-marker, .news-like summary::-webkit-details-marker{ display: none; }
.voice summary::after, .news summary::after, .news-like summary::after{ content: " ＋"; }
.voice details[open] summary::after, .news details[open] summary::after, .news-like details[open] summary::after{ content: " −"; }
.news details .note{ margin-top: var(--sp-3); }
.voice details dl{ margin-top: var(--sp-4); font-size: .9rem; }
.voice details dt{ font-weight: 700; color: var(--main-dark); margin-top: var(--sp-4); }
.voice details dt:first-child{ margin-top: 0; }
.voice details dd{ color: #3c4859; }

/* ---------- お知らせ（西府校）：期限つきのキャンペーン・講座 ---------- */
/* 件数が変わっても崩れないよう、横長カードを縦に並べる（スマホは写真が上） */
/* hidden を付けたもの（準備中のお知らせなど）は、display の指定があっても必ず隠す */
[hidden]{ display: none !important; }
.news{ display: grid; gap: var(--sp-5); }
.news-item{ display: grid; gap: var(--sp-5); align-items: start; }
/* チラシ：縦長なので切り抜かず全体を見せる。押すと大きく開く */
.news-item__flyer{
  display: block; width: min(100%, 16rem); margin-inline: auto;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-item__flyer:hover{ transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0,88,168,.12); }
.news-item__flyer img{ width: 100%; height: auto; }
.news-item__body{ display: flex; flex-direction: column; }
/* 教室ページのいちばん上：「〇〇校」の横にキャラクター */
.hero__title{ display: flex; align-items: flex-end; gap: var(--sp-4); }
.hero__mascot{ flex: none; width: 3.4rem; height: auto; margin-bottom: .3rem; }
.hero__mascot--tall{ width: 2.8rem; }   /* 縦長のイラストは細めにして、見出しと高さをそろえる */
@media (min-width: 48rem){
  .hero__mascot{ width: 5rem; }
  .hero__mascot--tall{ width: 3.8rem; }
}
.news-item__body > p + p{ margin-top: var(--sp-3); }
.news-item__body a:not(.btn){ text-decoration: underline; text-underline-offset: .2em; }
/* コース紹介カードの対象ラベル（タッチタイピング：通常コースの生徒さま向け） */
.card__target{
  display: inline-block; align-self: flex-start; width: fit-content;   /* カードの中でも横に伸ばさない */
  background: var(--sub); color: var(--main-dark);
  font-size: .8rem; font-weight: 700; padding: .25rem .8rem; border-radius: 99px;
  margin-bottom: var(--sp-3);
}
.news__target{ font-size: .82rem; font-weight: 700; color: var(--main); margin-bottom: .2rem; }
.news__block{ margin-top: var(--sp-4); }
.news__block-title{ font-weight: 700; font-size: .9rem; color: var(--main-dark); }
.news__block .note{ margin-top: var(--sp-2); }
.news__contact{
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--main-tint); border-radius: var(--radius); font-size: .9rem;
}
.news__contact-title{ font-weight: 700; color: var(--main-dark); margin-bottom: .2rem; }
/* LINEのQRコード：スマホは文字の下、PCは文字の右 */
.news__qr{
  display: block; width: 5.5rem; height: auto; margin-top: var(--sp-3);
  background: var(--white); border-radius: var(--radius); padding: .3rem;
}
.news__contact .btn--line{ margin-top: var(--sp-3); min-height: 2.75rem; padding: .6rem 1.2rem; font-size: .92rem; }
@media (min-width: 48rem){
  .news__contact:has(.news__qr){ display: flex; align-items: center; gap: var(--sp-7); }   /* QRは文字のすぐ右に */
  .news__qr{ flex: none; margin-top: 0; }
}
.news__period{
  align-self: flex-start; background: var(--main-tint); color: var(--main-dark);
  font-size: .78rem; font-weight: 700; padding: .3rem .8rem; border-radius: 99px;
  margin-bottom: var(--sp-3);
}
.news__point{
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--sub); color: var(--main-dark); border-radius: var(--radius);
  font-weight: 700; font-size: .92rem; line-height: 1.6;
}
.news__point strong{ font-size: 1.15em; }
.news .note{ margin-top: var(--sp-3); }
.news .card__meta{ margin-top: var(--sp-4); }
.news__link{ margin-top: auto; padding-top: var(--sp-4); }

/* ---------- 強調：黄色の下線＋太字（旧サイトで赤字だったところ） ---------- */
.marker{
  font-weight: 700;
  background: linear-gradient(transparent 62%, var(--sub) 62%, var(--sub) 92%, transparent 92%);
}

/* ---------- 下層ページ（コース紹介・タイピング） ---------- */
.hero--page{ padding-bottom: calc(var(--sp-7) + 2rem); }
.hero--page .hero__badge.en{ font-family: var(--font-en); letter-spacing: .14em; }
.hero--page h1 .en{ font-family: var(--font-en); }

/* ページ内の目次：押しやすいタイル */
.page-nav{ margin-top: var(--sp-6); }
.page-nav ul{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.page-nav a{
  display: flex; flex-direction: column; justify-content: center; height: 100%;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--radius);
  padding: .7rem .9rem; font-weight: 700; font-size: .9rem; color: var(--main-dark); line-height: 1.4;
  transition: border-color .2s ease, background-color .2s ease;
}
.page-nav a:hover{ border-color: var(--main); background: var(--main-tint); }
.page-nav a span{ font-size: .74rem; font-weight: 500; color: var(--ink-soft); margin-top: .15rem; }

/* 教材・対象・レッスン時間の帯 */
.course-meta{
  display: grid; gap: var(--sp-2); margin-bottom: var(--sp-6);
  background: var(--white); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--main-tint);
}
.course-meta div{ display: flex; gap: var(--sp-4); font-size: .92rem; }
.course-meta dt{ flex: none; width: 4.5rem; font-weight: 700; color: var(--main); }

.sub-head{
  font-size: 1.1rem; color: var(--main-dark); margin: var(--sp-7) 0 var(--sp-4);
  padding-left: .8rem; border-left: 5px solid var(--sub);
}

/* 英検受験案内（西府校・北山校の「英検の準会場です」） */
.eiken-guide{ margin-top: var(--sp-7); }
.eiken-guide .sub-head{ margin-top: 0; }
.eiken-guide__round{ display: block; margin-top: .3rem; font-size: .88rem; font-weight: 700; color: var(--ink); }
.eiken-guide__status{
  margin-bottom: var(--sp-5); padding: .7rem 1rem; border-radius: var(--radius);
  background: #fff6cc; font-size: .9rem; font-weight: 700; color: var(--main-dark);   /* 黄色のうすい面 */
}
.eiken-guide__h{ font-size: .98rem; color: var(--main-dark); margin: var(--sp-5) 0 var(--sp-3); }
/* 英検受験案内の表は、外側の枠と区切り線をはっきり見せる（角丸の表は border-collapse: separate にしないと外枠が消える） */
.eiken-guide .info-table,
.eiken-guide .price-table{
  width: 100%; border: 1px solid #c3cdd9;
  border-collapse: separate; border-spacing: 0; border-radius: var(--radius);
}
.eiken-guide .info-table th, .eiken-guide .info-table td,
.eiken-guide .price-table th, .eiken-guide .price-table td{ border-bottom-color: #c3cdd9; }
.eiken-guide .info-table th{ border-bottom-color: rgba(255,255,255,.35); }
.eiken-guide tr:last-child th, .eiken-guide tr:last-child td{ border-bottom: none; }
@media (min-width: 48rem){
  /* パソコンでは、列の間にも縦の区切り線 */
  .eiken-guide .price-table th + th, .eiken-guide .price-table th + td, .eiken-guide .price-table td + td{ border-left: 1px solid #c3cdd9; }
  .eiken-guide .price-table thead th + th{ border-left-color: rgba(255,255,255,.35); }
}
@media (max-width: 47.99rem){
  /* スマホは級ごとのカードになるので、表全体の外枠はつけない */
  .eiken-guide .price-table{ border: none; }
}
.course-meta + .sub-head{ margin-top: 0; }
.course-intro{ margin-bottom: var(--sp-5); }
.card .lead-text{ font-size: .96rem; }

/* 学習の目標：チェックつきのリスト */
.goals__title{ font-weight: 700; color: var(--main); margin-bottom: var(--sp-3); }
.goals ul, .check-list{ display: grid; gap: var(--sp-3); }
.check-list{ margin-top: var(--sp-5); }
.card > .check-list:first-child{ margin-top: 0; }
.goals li, .check-list li{ position: relative; padding-left: 1.8rem; font-size: .94rem; }
.goals li::before, .check-list li::before{
  content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: var(--sub);
}
.goals li::after, .check-list li::after{
  content: ""; position: absolute; left: .38rem; top: .5em; width: .38rem; height: .62rem;
  border: solid var(--main-dark); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.details-body{ margin-top: var(--sp-3); font-size: .9rem; }
/* 「各コースでできるようになること」：コース名の下に対象クラスを小さく */
.cando__class{ display: block; margin-top: .2rem; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.card--wide .check-list{ margin-top: 0; }
@media (max-width: 47.99rem){ .card--wide .check-list{ margin-top: var(--sp-3); } }
@media (min-width: 48rem){
  /* PCは2列にして、カードの高さをおさえる。コース名の列はせまくして、リストの幅を広げる */
  .cando .card--wide{ grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-6); }
  .cando .check-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
.check-list li, .goals li{ text-wrap: pretty; }   /* 最後の行が1文字だけにならないように折り返す */

/* 横長カード：PCでは左に見出し（バッジ＋タイトル）、右に文章 */
@media (min-width: 48rem){
  .card--wide{ display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: var(--sp-7); align-items: start; padding: var(--sp-6) var(--sp-7); }
  .card--wide h3{ margin-bottom: 0; }
}
/* YouTube の動画（16:9） */
.yt{ margin: 0; }
.yt__frame{ aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.yt__frame iframe{ width: 100%; height: 100%; border: 0; display: block; }
.yt-single{ max-width: 40rem; margin-inline: auto; }
.yt-list, .yt-single{ margin-top: var(--sp-6); }   /* 見出しがないときも、上のカードとの間をあける */
.sub-head + .yt-list, .sub-head + .yt-single{ margin-top: 0; }

/* ソフトの画面など、1枚だけ大きめに見せる画像 */
.shot{ max-width: 34rem; margin: 0 auto var(--sp-6); }
.shot img{ width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.course-links{ margin-top: var(--sp-6); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3) var(--sp-4); }

/* コース紹介カードの「詳しくはこちら」 */
/* タッチタイピング（おまけのコース）：英会話・英検の下に横長の小さいカードで */
.course-option{ display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.course-option__img{ width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.course-option h3{ margin-bottom: var(--sp-2); }
.course-option h3 .en{ font-size: .8em; margin-left: .3em; }
.course-option__meta{ margin-top: var(--sp-3); font-size: .84rem !important; color: var(--ink-soft); }
.course-option__more{ text-align: center; }
@media (min-width: 48rem){
  .course-option{ grid-template-columns: 13rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-6); }
  .course-option__img{ aspect-ratio: 4 / 3; }
}
.card__more{ margin-top: var(--sp-5); }
@media (max-width: 47.99rem){ .card__more{ text-align: center; } }   /* スマホ（1列）ではボタンを真ん中に */

@media (min-width: 48rem){
  .page-nav ul{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .course-meta{ grid-template-columns: repeat(3, auto); justify-content: start; gap: var(--sp-6); }
}

/* ---------- LINE / 連絡先ボタン ---------- */
.qr{ text-align: center; }
/* 隣のカードと高さが揃うとき、LINEのカードは中身を上下の真ん中に置く */
.contact-box.qr{ justify-content: center; }
.qr img{
  width: 9rem; height: 9rem; margin: 0 auto var(--sp-3);
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--white); padding: .4rem;
}
.qr p{ font-size: .84rem; color: var(--ink-soft); }

/* ---------- 共通ページへの誘導 ---------- */
.to-common{
  background: var(--main); color: var(--white);
  border-radius: var(--radius-lg); padding: var(--sp-6) var(--sp-5); text-align: center;
}
.to-common h2{ font-size: 1.2rem; margin-bottom: var(--sp-3); }
.to-common p{ font-size: .92rem; opacity: .92; margin-bottom: var(--sp-5); }

@media (min-width: 48rem){
  .teacher__photo{ width: 13rem; height: 13rem; }
  .breadcrumb{ font-size: .82rem; }
}

/* ==========================================================
   パソコン（広い画面）
   ========================================================== */
@media (min-width: 64rem){
  .cards--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 駅からの道順のスライド（北山校） ---------- */
/* スマホ：座布団なし（写真を画面いっぱいに）。PC：うすい青の座布団にのせて、横幅を地図とそろえる */
.route-box{ margin-top: var(--sp-7); }
.route__title{ margin: 0 0 var(--sp-5); color: var(--main-dark); text-align: center; font-size: 1.35rem; }
@media (min-width: 48rem){
  .route-box{ padding: var(--sp-7) var(--sp-6) var(--sp-6); background: var(--main-tint); border-radius: var(--radius-lg); }
  .route__title{ font-size: 1.6rem; }
}
.route{ max-width: 44rem; margin-inline: auto; }
.route__track{ display: grid; gap: var(--sp-5); }   /* JS が動かないときは縦に並ぶ */
.route__slide{ position: relative; }
.route__slide img{ width: 100%; aspect-ratio: 1000 / 751; object-fit: cover; border-radius: var(--radius-lg); background: var(--white); }
.route__cap{ margin-top: var(--sp-3); font-weight: 700; font-size: .98rem; line-height: 1.6; }
.route__num{ display: inline-block; margin-right: .4em; color: var(--main); }
/* 写真のすみの「進む向き」のマーク */
.route__dir{
  position: absolute; top: .8rem; right: .8rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .8rem .35rem .55rem; border-radius: 99px;
  background: var(--sub); color: var(--main-dark); font-weight: 700; font-size: .9rem;
  box-shadow: 0 .2rem .6rem rgba(0,0,0,.18);
}
.route__arrow{
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--main); color: var(--white); font-size: 1.05rem; line-height: 1;
}
.route__dir--goal{ background: var(--main); color: var(--white); }
.route__dir--goal .route__arrow{ background: var(--sub); color: var(--main-dark); }
.route__nav, .route__hint{ display: none; }

/* スライドの見た目（JS が動いたとき） */
.route.is-ready .route__viewport{ overflow: hidden; border-radius: var(--radius-lg); }
.route.is-ready .route__track{ display: flex; gap: 0; transition: transform .4s cubic-bezier(.3,.8,.35,1); }
.route.is-ready .route__slide{ flex: 0 0 100%; }
.route.is-ready .route__cap{ min-height: 3.2em; padding-inline: .2rem; }
.route.is-ready .route__nav{ display: flex; align-items: center; justify-content: center; gap: var(--sp-5); margin-top: var(--sp-3); }
.route.is-ready .route__hint{ display: block; text-align: center; margin-top: var(--sp-2); }
.route__btn{
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--main); color: var(--white); transition: background-color .2s ease, opacity .2s ease;
}
.route__btn svg{ width: 1.2rem; height: 1.2rem; }
.route__btn:hover{ background: var(--main-dark); }
.route__btn:disabled{ opacity: .3; cursor: default; }
.route__count{ min-width: 5em; text-align: center; font-weight: 700; color: var(--main-dark); font-family: var(--font-en); font-size: 1.05rem; }

/* ---------- バスでお越しの場合（北山校のアクセス） ---------- */
.access-bus{
  margin-top: var(--sp-5); padding: var(--sp-5); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.access-bus h3{ font-size: 1.05rem; color: var(--main-dark); }
.access-bus__lead{ font-size: .9rem; color: var(--ink-soft); margin-top: .2rem; }
.access-bus dl{ margin-top: var(--sp-3); }
.access-bus dt{ font-weight: 700; color: var(--main); margin-top: var(--sp-3); }
.access-bus dd{ font-size: .95rem; }
.access-bus .note{ margin-top: var(--sp-3); }