/* =====================================================================
   キャタル 英検®2級LP（lp-base.css）
   - デザイン案v2（ボタン色ピンク）をベースに、色・幅・書体は現行LP（catal.jp/eiken/）に合わせる
   - スマホは1カラム。PC（900px〜）は幅1120pxの多段レイアウト
   ===================================================================== */

:root{
  /* 色（catal.jp/eiken/ と同じ値） */
  --ink:#16202b; --text:#2a3440; --sub:#4a5561; --gray:#7a848f;
  --line:#e3e7ec; --bg:#f7f9fb; --white:#ffffff;
  --blue:#00a5e3; --blue-soft:#e9f7fd; --blue-line:#bfe7f8;
  --pink:#e73a77; --pink-dark:#d62f6a; --pink-soft:#fdebf2; --pink-line:#f8c8da;
  --line-green:#06c755;
  --cta:var(--pink); --cta-shadow:rgba(231,58,119,.32);
  /* カードの面：セクションの背景と反対の色にする */
  --card:var(--white); --card-in:var(--bg);
  --shadow:0 18px 40px -28px rgba(22,32,43,.35);
  --r-card:16px; --r-inner:10px; --r-panel:20px; --r-pill:999px;
  --wrap:560px;
  --en:"Montserrat","Noto Sans JP",sans-serif;
}

/* ===== 基本 ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:76px}
body{background:var(--bg);color:var(--text);font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.85;letter-spacing:.02em;-webkit-font-smoothing:antialiased;padding-bottom:88px}
img{display:block;max-width:100%;height:auto}
.num{font-family:var(--en);font-weight:800;letter-spacing:0}
.nb{display:inline-block}
/* 【注】text-wrap:pretty は使わない。iPhone（WebKit）では行を大きく手前で折り返すため。見出しは .nb で文節ごとに区切る */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
section{padding:64px 0}
.sec-white{background:var(--white);--card:var(--bg);--card-in:var(--white)}
.sec-accent{background:linear-gradient(180deg,var(--pink-soft) 0%,#fff6f9 100%)}

/* ===== 見出し ===== */
.label{display:inline-block;font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--pink);margin-bottom:8px}
h1,h2,h3,h4,.ask > b,.fv .sub,.k3 > div b,.k3 > div span,.journey li > div b,.st b{word-break:auto-phrase}
h2{font-size:clamp(21px,6.1vw,23px);line-height:1.5;font-weight:700;margin-bottom:18px;letter-spacing:.02em;color:var(--ink)}
h2 .hl{color:var(--blue)}
h3{font-size:18px;line-height:1.55;font-weight:700;color:var(--ink)}
h4{font-size:16px;line-height:1.55;font-weight:700;color:var(--ink)}
.sub-h{font-size:19px;margin:44px 0 16px}
.lead{font-size:15.5px;line-height:1.95;color:var(--sub);margin-bottom:28px}
p+p{margin-top:12px}
.small{font-size:13px;color:var(--sub);line-height:1.7}
.note{font-size:12px;color:var(--gray);line-height:1.8;margin-top:14px}

/* ===== ヘッダー ===== */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid #eaeef2}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
header.site img{height:24px;width:auto}
header.site .tag{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--blue)}
.hd-cta{display:none}

/* ===== 予約ボタン ===== */
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:60px;padding:14px 20px;border-radius:var(--r-pill);background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:16px;line-height:1.4;box-shadow:0 10px 24px -8px var(--cta-shadow);transition:transform .15s,filter .15s}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.cta:active{transform:translateY(1px)}
.cta .free{background:#fff;color:var(--cta);font-size:12px;font-weight:900;border-radius:var(--r-pill);padding:2px 8px;flex-shrink:0}
.cta .arrow{font-size:18px}
.cta .t{display:flex;flex-direction:column;align-items:center;line-height:1.35}
.cta .t b{font-size:17px;font-weight:700}
.cta .t small{font-size:12px;font-weight:700;opacity:.95;margin-top:2px;white-space:nowrap}
.cta.narrow{padding:12px 10px;gap:6px}
.ask .cta{margin-top:14px}
.mid-cta{margin-top:36px;text-align:center}
.mid-cta-t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px;word-break:auto-phrase}
.cta-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:12px;font-size:13px;color:var(--sub)}
.cta-meta > span::before{content:"✓ ";color:var(--blue);font-weight:700}

/* ===== FV ===== */
.fv{padding:0 0 44px;background:linear-gradient(180deg,var(--blue-soft) 0%,#fff 100%)}
.fv-photo{position:relative}
/* スマホのFVは写真を16:9に抑え、予約ボタンを最初の画面に入れる */
.fv-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 30%}
.fv-photo .ribbon{position:absolute;left:16px;bottom:-14px;background:var(--pink);color:#fff;font-size:13px;font-weight:700;padding:5px 14px;border-radius:var(--r-pill);box-shadow:0 6px 14px -6px var(--cta-shadow)}
.fv .eyebrow{display:inline-block;font-size:12px;font-weight:700;color:var(--pink);border:1px solid var(--pink-line);background:#fff;border-radius:var(--r-pill);padding:3px 12px;margin:26px 0 10px}
.fv h1{font-size:26px;line-height:1.45;font-weight:900;letter-spacing:.01em;margin-bottom:12px;color:var(--ink)}
.fv h1 em{font-style:normal;color:var(--blue)}
.fv .sub{font-size:15px;color:var(--sub);margin-bottom:20px}
/* 実績の丸3つ */
.badges3{display:grid;grid-template-columns:repeat(3,clamp(86px,25vw,100px));justify-content:center;gap:clamp(14px,5vw,22px);margin:26px 0 8px}
.bd{width:100%;aspect-ratio:1/1;border-radius:50%;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 24px -14px rgba(0,165,227,.8)}
.bd span{font-size:12px;font-weight:700;line-height:1.35}
.bd b{font-size:30px;line-height:1.1;margin-top:2px}
.bd b small{font-family:"Noto Sans JP",sans-serif;font-size:13px;margin-left:1px}
.bd b.long{font-size:clamp(19px,5.4vw,24px)}   /* 4桁以上の数字（2,624名など）は円に収まるよう小さく */
.bd.text b{font-size:17px;font-weight:900;margin-top:4px}
.bd.text b small{display:block;font-size:12px;font-weight:700;margin-left:0}
.badges-note{font-size:11px;color:var(--gray);line-height:1.6}

/* ===== セクションのメイン写真 ===== */
.sec-photo{border-radius:var(--r-card);overflow:hidden;margin:0 0 28px}
.sec-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ===== アイコン ===== */
.ico{flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;position:relative}
.ico svg{width:26px;height:26px}
.ico.sm{width:36px;height:36px}
.ico.sm svg{width:20px;height:20px}
.ico.accent{background:var(--pink-soft);color:var(--pink)}
.ico i{position:absolute;top:-4px;left:-4px;width:20px;height:20px;border-radius:50%;background:var(--pink);color:#fff;font-style:normal;font-family:var(--en);font-weight:800;font-size:12px;display:grid;place-items:center}

/* ===== カード共通：白い面＋細い線（現行LPと同じ） ===== */
.wall,.fact,.grade,.msg,.concern,.cmp,.cycle,.road,.story,.principal,.teacher-intro,.teacher,.offer,.faq details{border:1px solid var(--line)}

/* ===== 課題カード（壁） ===== */
.wall{display:flex;gap:14px;background:var(--card);border-radius:var(--r-card);padding:20px 18px;margin-bottom:14px}
.wall .k{display:block;font-family:var(--en);font-size:12px;font-weight:700;color:var(--pink);letter-spacing:.1em}
.wall h3{margin-bottom:6px;font-size:17px}
.wall p{font-size:15px;color:var(--sub)}

/* ===== 因果（▼でつなぐ） ===== */
.cause{margin-top:10px;text-align:center}
.down{width:0;height:0;margin:14px auto;border-left:16px solid transparent;border-right:16px solid transparent;border-top:18px solid var(--blue)}
.fact{background:var(--card);border-radius:var(--r-card);padding:22px 16px}
.fact-t{font-weight:700;font-size:16px;color:var(--ink);margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{border-radius:var(--r-inner);background:var(--card-in);padding:12px 4px 10px}
.tile span{display:block;font-size:14px;font-weight:700}
.tile b{display:block;font-size:22px;color:var(--ink)}
.tile small{font-size:12px;color:var(--gray)}
.tile.hot{background:var(--pink);color:#fff}
.tile.hot b,.tile.hot small{color:#fff}
.tile.hot small{font-weight:700}
.fact-s{font-size:14px;margin-top:12px;color:var(--sub)}
.fact-s strong{color:var(--pink)}
.so{background:var(--blue);color:#fff;border-radius:var(--r-card);padding:22px 18px;box-shadow:0 18px 36px -24px rgba(0,165,227,.9)}
.so .so-l{display:inline-block;font-size:12px;font-weight:700;background:#fff;color:var(--blue);border-radius:var(--r-pill);padding:1px 12px;margin-bottom:8px}
.so p{font-size:18px;font-weight:700;line-height:1.65;word-break:auto-phrase}

/* ===== 写真つきカード（学年） ===== */
.grade{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:16px}
.grade img{width:100%;aspect-ratio:16/9;object-fit:cover}
.grade .body{padding:18px 18px 22px}
.tag-pill{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--blue);border-radius:var(--r-pill);padding:1px 12px;margin-bottom:8px}
.tag-pill.accent{background:var(--pink)}
.grade h3{margin-bottom:8px}
.grade p{font-size:14.5px;color:var(--sub)}
/* 補足の呼びかけ */
.ask{margin-top:24px;background:var(--blue-soft);border:1px solid var(--blue-line);border-radius:var(--r-card);padding:18px;font-size:15px;color:var(--sub)}
/* 見出しの<b>だけに効かせる（中の予約ボタンの<b>は白のまま） */
.ask > b{display:block;font-size:clamp(14px,calc((100vw - 80px) / 17.8),16px);white-space:nowrap;margin-bottom:4px;color:var(--ink)}

/* ===== 代表メッセージ ===== */
.msg{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:56px}
.msg .photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 20%}
.msg .body{padding:24px 20px 28px}
.msg .kicker{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--pink)}
.msg h2{font-size:20px;line-height:1.6;margin:6px 0 16px}
.msg p{font-size:15px;line-height:2;color:var(--sub)}
.msg .sign{margin-top:18px;text-align:right;font-size:14px;color:var(--ink)}
.msg .sign b{font-size:17px;margin-left:6px}
.msg .prof{font-size:12px;color:var(--gray);line-height:1.7;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}

/* ===== お悩みカード ===== */
.concern{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:18px}
.concern .head{display:flex;gap:12px;align-items:center;padding:18px 18px 0}
.concern .head .illust{width:64px;height:64px;flex-shrink:0}
.concern h3{font-size:17px}
.concern .ans{padding:14px 18px 22px;font-size:15px;line-height:1.95;color:var(--sub)}
.concern .ans strong{color:var(--blue);font-weight:700}

/* ===== 比較カード（一般的なやり方 → キャタル） ===== */
.cmp{background:var(--card);border-radius:var(--r-card);margin-bottom:14px;overflow:hidden}
.cmp .t{background:var(--blue);color:#fff;font-weight:700;font-size:15px;padding:8px 18px}
.cmp .row{padding:14px 18px}
.cmp .row + .row{border-top:1px dashed var(--line)}
.cmp .who{font-size:12px;font-weight:700;display:block;margin-bottom:2px}
.cmp .other .who{color:var(--gray)}
.cmp .other p{font-size:14px;color:var(--gray)}
.cmp .catal .who{color:var(--pink)}
.cmp .catal p{font-size:15px;font-weight:500;color:var(--ink)}
.cmp .catal img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-inner);margin-top:10px}
.cycle{background:var(--card);border-radius:var(--r-card);padding:24px 18px;margin-top:24px;text-align:center}
.cycle svg{width:100%;max-width:380px;margin:0 auto}
.cycle p{font-size:14px;margin-top:10px;color:var(--ink);font-weight:500}

/* ===== 事例：入塾 → 合格 ===== */
.road{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:16px;display:flex;flex-direction:column}
.road img{width:100%;aspect-ratio:16/10;object-fit:cover}
.road img.pos-top{object-position:50% 0}
.road .body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.road .who{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
.road .flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.road .flow .box{border-radius:var(--r-inner);padding:8px 6px;font-size:13px;line-height:1.5}
.road .flow .from{background:var(--card-in);color:var(--sub)}
.road .flow .to{background:var(--pink-soft);color:var(--pink);font-weight:700;border:1px solid var(--pink-line)}
.road .flow .box b{display:block;font-size:17px}
.road .flow .mid{font-size:12px;color:var(--blue);font-weight:700;line-height:1.3}
.road .flow .mid .num{font-size:18px;display:block}
.road .before{font-size:14px;color:var(--sub);margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.road .before::before{content:"入塾したとき｜";font-weight:700;color:var(--ink)}
.story{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:16px}
.story img{width:100%;aspect-ratio:16/9;object-fit:cover}
.story .body{padding:16px 18px 18px}
.story .tag-pill{margin-bottom:6px}
.story .who{font-size:12px;color:var(--gray)}
.story h4{margin:4px 0 8px}
.story details summary{list-style:none;cursor:pointer;display:inline-block;color:var(--blue);font-size:14px;font-weight:700;padding:10px 0}
.story details summary::-webkit-details-marker{display:none}
.story details[open] summary{display:none}
.story .teaser,.story details p{font-size:14.5px;color:var(--sub)}
.tally{text-align:center;font-size:13px;color:var(--gray);margin-top:28px;line-height:1.8}
.tally .num{font-size:17px;color:var(--pink)}

/* ===== 校長の伴走 ===== */
.principal{background:var(--card);border-radius:var(--r-card);padding:22px 18px;margin-bottom:28px;overflow:hidden}
.head-photo{margin:-22px -18px 18px;position:relative}
.head-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 15%}
.head-photo figcaption{padding:14px 18px 16px;border-bottom:1px dashed var(--line)}
.role{display:block;font-size:12px;font-weight:700;color:var(--pink)}
.head-photo b{display:block;font-size:19px;color:var(--ink);margin-bottom:6px}
.head-photo .q{display:block;font-size:13.5px;line-height:1.8;color:var(--sub)}
.principal > p{color:var(--sub);font-size:15px}
.journey{list-style:none;margin-top:18px}
.journey li{display:flex;gap:14px;position:relative;padding-bottom:18px}
.journey li:not(:last-child)::after{content:"";position:absolute;left:23px;top:50px;bottom:4px;border-left:2px dotted var(--blue)}
.journey .ico{width:48px;height:48px}
.journey .ico svg{width:24px;height:24px}
.journey li > div b{display:block;font-size:15px;color:var(--ink)}
.journey li > div span{font-size:14px;color:var(--sub);line-height:1.7}

/* ===== 教師 ===== */
.teacher-intro{background:var(--card);border-radius:var(--r-card);padding:20px 18px;margin-bottom:20px}
.teacher-intro p{font-size:15px;color:var(--sub)}
.feat{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.feat span{background:var(--blue-soft);color:var(--blue);font-size:13px;font-weight:700;border-radius:var(--r-pill);padding:4px 12px}
/* スマホは小さな正方形の写真を左に置き、縦の長さを抑える。PCは3列の縦型 */
.teacher{background:var(--card);border-radius:var(--r-card);overflow:hidden;margin-bottom:12px;display:grid;grid-template-columns:88px 1fr;column-gap:14px;padding:16px 18px 18px}
.teacher img{width:88px;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-inner);grid-row:1/3;align-self:start}
.teacher .body{display:contents}
.teacher b{grid-column:2;align-self:end;line-height:1.4;font-size:18px;color:var(--ink)}
.teacher .prof{grid-column:2;align-self:start}
.teacher .bg,.teacher .say{grid-column:1/-1}
.teacher .bg{margin-top:12px}
.teacher .prof{font-size:13px;color:var(--blue);font-weight:700;line-height:1.6;margin:2px 0 8px}
.teacher .bg{font-size:12.5px;background:var(--card-in);border-radius:var(--r-inner);padding:4px 10px;margin-bottom:10px;line-height:1.6;color:var(--sub)}
.teacher .say{font-size:14.5px;line-height:1.85;color:var(--sub)}

/* ===== 料金：現行LPと同じく青い面 ===== */
#price{background:var(--blue);color:#fff;--card:var(--white);--card-in:var(--bg)}
#price .label{color:#fff}
#price h2{color:#fff}
#price h2 .hl{color:#fff;background:linear-gradient(transparent 62%,rgba(255,255,255,.28) 62%)}
#price .down{border-top-color:#fff}
.stack-t{font-size:15px;font-weight:700;margin:4px 0 12px}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st{background:var(--card);border-radius:var(--r-card);overflow:hidden;color:var(--text)}
.st img{width:100%;aspect-ratio:16/9;object-fit:cover}
.st div{padding:10px 12px 12px}
.st b{display:block;font-size:14px;line-height:1.5;color:var(--ink)}
.st span{display:block;font-size:12px;color:var(--sub);line-height:1.6;margin-top:4px}
.price-card{background:var(--card);border-radius:var(--r-card);padding:24px 18px;color:var(--text);box-shadow:0 24px 48px -30px rgba(22,32,43,.55)}
.fee{width:100%;border-collapse:collapse}
.fee th,.fee td{padding:14px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.fee th{width:7.5em;white-space:nowrap;font-size:13.5px;font-weight:700;padding-top:18px;color:var(--sub)}
.fee td b{font-size:16px;color:var(--ink)}
.fee td b .num{font-size:30px;line-height:1.2}
.fee td small{display:block;font-size:12.5px;color:var(--gray);line-height:1.6;margin-top:2px}
.nofee-t{font-size:13px;font-weight:700;color:var(--ink);margin-top:16px}
.cond{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cond span{font-size:13px;border:1px solid var(--pink-line);background:var(--pink-soft);color:var(--pink);font-weight:700;border-radius:var(--r-pill);padding:2px 12px}

/* ===== 無料体験（オファー） ===== */
.offer{background:var(--card);border-radius:var(--r-card);overflow:hidden}
.offer img{width:100%;aspect-ratio:16/9;object-fit:cover}
.offer .body{padding:20px 16px 24px}
.offer h3{font-size:16px;margin-bottom:12px}
.offer-lead{font-size:15px;color:var(--sub);margin-bottom:18px}
.offer-lead b{color:var(--ink)}
.offer-meta{text-align:center;margin-bottom:18px}
.know3{display:grid;gap:10px;margin-bottom:18px}
.k3{display:flex;gap:14px;align-items:center;background:var(--card-in);border-radius:var(--r-inner);padding:14px}
.k3 > div b{display:block;font-size:16px;color:var(--ink)}
.k3 > div span{font-size:13.5px;color:var(--sub);line-height:1.6}
.flow3{display:flex;align-items:flex-start;justify-content:space-between;position:relative;margin:6px 4px 14px}
.flow3::before{content:"";position:absolute;left:12%;right:12%;top:9px;border-top:2px solid var(--blue)}
.flow3 div{position:relative;flex:1;text-align:center;font-size:12.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.flow3 div::before{content:"";display:block;width:18px;height:18px;margin:0 auto 6px;border-radius:50%;background:var(--white);border:4px solid var(--blue)}
.assure{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:14px;line-height:1.7;color:var(--sub)}
.assure b{color:var(--blue)}
.to-form{font-size:12.5px;color:var(--gray);text-align:center;margin-top:10px}

/* ===== FAQ ===== */
.faq details{background:var(--card);border-radius:var(--r-card);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:center;padding:14px 16px;font-weight:700;font-size:15px;line-height:1.6;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary img{width:44px;height:44px;border-radius:var(--r-inner);object-fit:cover;flex-shrink:0}
.faq summary .pm{margin-left:auto;color:var(--pink);font-size:20px;font-weight:500;flex-shrink:0}
.faq .a{padding:0 16px 16px 72px;font-size:15px;color:var(--sub)}

/* ===== 最終CTA：現行LPと同じくピンクの面 ===== */
.final{background:var(--pink);color:#fff;text-align:center}
.final h2,.final .lead{color:#fff}
.final .lead{font-weight:700;line-height:1.75}
.final .cta-meta{font-weight:700;color:#fff}
.final-photo{border-radius:var(--r-card);overflow:hidden;margin:0 0 26px}
.final-photo img{width:100%;aspect-ratio:16/8;object-fit:cover}
/* ピンクの面の上のボタンは白抜き */
.final .cta{background:#fff;color:var(--pink);box-shadow:0 14px 30px -12px rgba(22,32,43,.4)}
.final .cta .free{background:var(--pink);color:#fff}
.final .cta-meta > span::before{color:#fff}
.schools{background:var(--white);color:var(--text);border-radius:var(--r-panel);padding:22px 16px 24px;margin-top:40px;text-align:left}
.schools h3{font-size:18px;margin-bottom:8px}
.schools .small{margin-bottom:6px}
/* 校舎カード（写真つき） */
.school-grid{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.school-card{display:flex;flex-direction:column;height:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--r-inner);overflow:hidden;color:var(--text);text-decoration:none;transition:transform .15s,box-shadow .15s}
.school-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.school-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sc-body{display:flex;flex-direction:column;flex:1;padding:10px 12px 12px}
.sc-area{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em}
.school-card .sh-name{font-size:14.5px}
.school-card .sh-meta{font-size:12px;margin-bottom:8px}
.sc-go{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--pink)}
footer{background:var(--white);font-size:11.5px;color:var(--gray);padding:28px 0 36px;line-height:1.8}

/* ===== 校舎選択（ボトムシート） ===== */
.sh-area{font-size:12.5px;font-weight:700;color:var(--blue);margin:18px 0 8px}
.sh-list{list-style:none;border-radius:var(--r-inner);overflow:hidden;border:1px solid var(--line);background:var(--white)}
.sh-list li+li{border-top:1px solid var(--line)}
.sh-list a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;color:var(--text);text-decoration:none;min-height:56px}
.sh-list a:hover,.sh-list a:active{background:var(--blue-soft)}
.sh-name{display:block;font-weight:700;font-size:15px;line-height:1.4;color:var(--ink)}
.sh-meta{display:block;grid-column:1;font-size:12.5px;color:var(--sub);line-height:1.5}
.sh-go{grid-column:2;grid-row:1/3;color:var(--cta);font-size:22px;font-weight:700}
.sh-line{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;background:var(--line-green);border-radius:var(--r-pill);padding:0 7px;vertical-align:2px}
.sheet{position:fixed;inset:0;z-index:60}
.sheet[hidden]{display:none}
.sheet-bg{position:absolute;inset:0;background:rgba(22,32,43,.5);animation:fade .2s}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:86vh;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-panel) var(--r-panel) 0 0;animation:up .25s ease-out;padding-bottom:env(safe-area-inset-bottom)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 4px}
.sheet-head p{font-weight:900;font-size:17px;color:var(--ink)}
.sheet-x{border:0;background:var(--white);width:44px;height:44px;border-radius:50%;font-size:22px;line-height:1;color:var(--text);cursor:pointer}
.sheet-sub{font-size:12.5px;color:var(--sub);padding:0 18px 4px;line-height:1.7}
.sheet-body{overflow-y:auto;padding:0 18px 22px;-webkit-overflow-scrolling:touch}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
body.sheet-open{overflow:hidden}

/* ===== 追従CTA（スマホのみ） ===== */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .25s}
.sticky.on{transform:none}
.sticky .cta{min-height:52px;font-size:15px;max-width:var(--wrap);margin:0 auto}
.sticky .m{display:block;text-align:center;font-size:12px;color:var(--sub);margin-top:4px}

/* ===== タブレット ===== */
@media (min-width:600px) and (max-width:899px){
  .fv-photo img{max-height:380px}
  .stack{grid-template-columns:repeat(4,1fr)}
  .school-grid{grid-template-columns:repeat(3,1fr)}
}

/* =====================================================================
   PC（900px〜）：幅1120pxの多段レイアウト
   ===================================================================== */
@media (min-width:900px){
  :root{--wrap:1120px}
  body{padding-bottom:0}
  section{padding:96px 0}
  .wrap{padding:0 24px}
  h2{font-size:clamp(28px,2.9vw,38px);line-height:1.45;margin-bottom:22px}
  .label{font-size:13px}
  .lead{font-size:16px;max-width:760px;margin-bottom:40px}
  .sub-h{font-size:24px;margin:64px 0 22px}

  /* ヘッダー */
  header.site .wrap{height:68px}
  header.site img{height:30px}
  header.site .tag{margin-right:auto;margin-left:16px;font-size:12.5px}
  .hd-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:14px;border-radius:var(--r-pill);padding:10px 20px;box-shadow:0 8px 18px -8px var(--cta-shadow);transition:transform .15s}
  .hd-cta:hover{transform:translateY(-1px)}
  .hd-cta .free{background:#fff;color:var(--cta);font-size:11px;font-weight:900;border-radius:var(--r-pill);padding:1px 7px}
  .sticky{display:none}

  /* FV：文章を左、写真を右に（現行LPと同じ並び） */
  .fv{padding-bottom:88px}
  .fv-grid{display:grid;grid-template-columns:1.1fr .9fr;max-width:1120px;margin:0 auto;gap:56px;align-items:center;padding:64px 24px 0}
  .fv-grid .wrap{padding:0;max-width:none;order:-1}
  .fv-photo img{border-radius:24px;aspect-ratio:4/3.3;box-shadow:0 30px 60px -36px rgba(22,32,43,.5)}
  .fv-photo .ribbon{left:24px;bottom:-16px;font-size:14px;padding:7px 18px}
  .fv .eyebrow{margin-top:0;font-size:13px}
  .fv h1{font-size:clamp(34px,3.1vw,44px);line-height:1.4;margin-bottom:18px}
  .fv .sub{font-size:16px;margin-bottom:26px}
  .fv .cta{max-width:520px}
  .fv .cta-meta{justify-content:flex-start;max-width:520px}
  .badges3{grid-template-columns:repeat(3,124px);justify-content:start;gap:22px;margin-top:30px}
  .bd span{font-size:13px}
  .bd b{font-size:36px}
  .bd b.long{font-size:28px}
  .bd.text b{font-size:19px}

  /* 見出しと写真を横に並べるセクション（2級の壁・学び方）
     見出し3行（ラベル・h2・導入文）を左、写真を右。写真の高さは導入文の行で吸収する */
  #wall .wrap,#method .wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:56px}
  #wall .wrap > .label,#wall .wrap > h2,#wall .wrap > .lead,
  #method .wrap > .label,#method .wrap > h2,#method .wrap > .lead{grid-column:1;justify-self:start}
  #wall .sec-photo,#method .sec-photo{grid-column:2;grid-row:1/4;margin:0 0 40px;align-self:start}
  #wall .sec-photo img,#method .sec-photo img{aspect-ratio:4/3}
  #wall .lead,#method .lead{max-width:none}

  /* 2級の壁：3列 */
  #wall .walls,#wall .cause{grid-column:1/-1}
  .walls{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .wall{flex-direction:column;margin:0;padding:26px 24px 28px}
  .wall h3{font-size:18px}
  .cause{max-width:760px;margin:16px auto 0;width:100%}
  .fact{padding:28px}
  .tile b{font-size:28px}
  .so{padding:26px 32px}
  .so p{font-size:20px}

  /* 学年：3列 */
  .grades{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .grade{margin:0}
  .grade .body{padding:22px 24px 26px}
  .ask{display:grid;grid-template-columns:1fr 380px;gap:8px 32px;align-items:center;padding:26px 32px;margin-top:32px}
  .ask > b{font-size:19px;white-space:normal;grid-column:1}
  .ask .cta{grid-column:2;grid-row:1/3;margin:0}

  /* 代表メッセージ：写真を左、文章を右 */
  .msg{display:grid;grid-template-columns:400px 1fr;margin-bottom:96px}
  .msg .photo{height:100%}
  .msg .photo img{height:100%;aspect-ratio:auto;object-position:center top}
  .msg .body{padding:44px 48px}
  .msg h2{font-size:28px}
  /* ご相談：2列 */
  #concerns .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
  #concerns .msg,#concerns .wrap > .label,#concerns .wrap > h2,#concerns .wrap > .lead{grid-column:1/-1;justify-self:start}
  .concern{margin-bottom:20px}
  .concern .head{padding:24px 26px 0}
  .concern .ans{padding:16px 26px 26px}

  /* 学び方：比較カードは2×2、サイクル図は横長 */
  #method .cmp{margin:0 0 24px}
  #method .cmp .catal img{aspect-ratio:16/7}
  #method .cycle{grid-column:1/-1;display:grid;grid-template-columns:380px 1fr;align-items:center;gap:40px;text-align:left;padding:32px 48px;margin-top:8px}
  #method .cycle p{font-size:18px;margin:0}

  /* 合格までの道のり：4列、その先は3列 */
  .roads{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .road{margin:0}
  .stories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
  .story{margin:0}
  .story img{aspect-ratio:16/10}
  .story .body{padding:20px 22px 22px}
  .tally{margin-top:36px;font-size:13.5px}
  .mid-cta{max-width:560px;margin-left:auto;margin-right:auto;margin-top:40px}

  /* 校長：写真を左、文章とタイムラインを右 */
  .principal{display:grid;grid-template-columns:420px 1fr;grid-template-rows:auto 1fr;column-gap:48px;padding:0;margin:0}
  .head-photo{margin:0;grid-row:1/3;background:var(--card-in)}
  .head-photo img{aspect-ratio:1/1}
  .head-photo figcaption{border-bottom:0;padding:20px 26px 24px}
  .principal > p{padding:40px 48px 0 0;font-size:16px}
  .journey{padding:0 48px 32px 0;margin-top:24px}

  /* 教師：カードは3列の縦型 */
  .teacher-intro{padding:28px 32px;margin-bottom:28px}
  .teacher-intro p{max-width:900px}
  .teachers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .teacher{margin:0;display:block;padding:0}
  .teacher img{width:100%;border-radius:0;aspect-ratio:4/3.4;object-position:center 25%}
  .teacher .body{display:block;padding:20px 24px 24px}
  .teacher .bg{margin-top:0}

  /* 料金：左にサポート4つ、右に料金表 */
  #price .wrap{display:grid;grid-template-columns:1fr 480px;grid-template-rows:auto auto auto 1fr;column-gap:48px}
  #price .label,#price h2{grid-column:1/-1;justify-self:start}
  #price h2{font-size:34px;margin-bottom:36px}
  #price .stack-t{grid-column:1;grid-row:3;margin-top:0}
  #price .stack{grid-column:1;grid-row:4;gap:16px;align-content:start}
  #price .down{display:none}
  #price .price-card{grid-column:2;grid-row:3/5;padding:32px;align-self:start}
  .st div{padding:14px 16px 16px}
  .st b{font-size:15px}
  .st span{font-size:13px}

  /* 無料体験：写真を左、内容を右 */
  .offer{display:grid;grid-template-columns:.9fr 1.1fr}
  .offer img{height:100%;aspect-ratio:auto;object-position:center 35%}
  .offer .body{padding:40px 44px 44px}
  .offer h3{font-size:18px}
  .know3{grid-template-columns:repeat(3,1fr)}
  .k3{flex-direction:column;text-align:center;padding:18px 12px}

  /* FAQ：読みやすい幅に */
  .faq .wrap{max-width:900px}
  .faq details{margin-bottom:12px}
  .faq summary{padding:16px 20px;font-size:16px}
  .faq .a{padding:0 20px 20px 76px}

  /* 最終CTA：見出しを左、写真を右。校舎は4列 */
  .final .wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto auto auto auto 1fr auto;column-gap:56px;text-align:left}
  .final-photo{grid-column:2;grid-row:1/7;margin:0}
  .final-photo img{aspect-ratio:4/3}
  .final h2{grid-column:1;grid-row:2}
  .final .lead{grid-column:1;grid-row:3;margin-bottom:28px}
  .final .cta{grid-column:1;grid-row:4;max-width:520px}
  .final .cta-meta{grid-column:1;grid-row:5;justify-content:flex-start}
  .schools{grid-column:1/-1;grid-row:7;margin-top:64px;padding:40px 40px 44px}
  .schools h3{font-size:24px}
  .school-grid{grid-template-columns:repeat(4,1fr);gap:16px}
  .sc-body{padding:14px 16px 16px}
  .school-card .sh-name{font-size:16px}

  /* 校舎選択はPCでは中央のダイアログ */
  .sheet-panel{left:50%;right:auto;bottom:auto;top:50%;width:560px;max-height:84vh;transform:translate(-50%,-50%);border-radius:var(--r-panel);animation:fade .2s}
}

/* PCの狭い幅（900〜1099px）：4列・2列の詰まりをゆるめる */
@media (min-width:900px) and (max-width:1099px){
  .roads{grid-template-columns:repeat(2,1fr)}
  #price .wrap{grid-template-columns:1fr 400px;column-gap:32px}
  .msg{grid-template-columns:320px 1fr}
  .principal{grid-template-columns:340px 1fr;column-gap:36px}
  #method .cycle{grid-template-columns:300px 1fr;padding:28px 32px}
}