/* ============================================
   HERO'S 延岡校 — 共通CSS v4
   プロトタイプベース・全9ページ共通
   ============================================ */

/* --- CSS変数 --- */
:root {
  /* ========== 既存（保持・互換性のため） ========== */
  --nv: #1A237E;
  --nvl: #283593;
  --nvd: #0D1442;
  --vr: #C73E3A;
  --vrh: #A83230;
  --gd: #D4A853;
  --gdd: #B8923F;
  --ws: #F5F0E6;
  --tx: #272d3d;          /* ★ #2C2C2C → #272d3d (濃紺寄りグレー・現代的な本文色) */
  --tl: #5b6781;          /* ★ #666 → #5b6781 (補足テキスト・濃紺寄り) */
  --tll: #7f89a4;         /* ★ #999 → #7f89a4 */
  --wh: #fff;
  --ln: #06C755;
  --r: 8px;
  --rl: 14px;
  --sh: 0 2px 12px rgba(0,0,0,.06);
  --sl: 0 8px 32px rgba(0,0,0,.1);
  --sm: 0 5px 0 rgba(0,0,0,.18);  /* ピル型ボタンの真下 5px shadow */
  --fb: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif;
  --fh: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fn: "Outfit", "Roboto", system-ui, sans-serif;  /* ★ 数字強調用フォント */

  /* ========== 10階層トークン（コノ塾流） ========== */
  /* Vermillion (赤・HEROS主軸) */
  --vr-50:  #fdf2f1;
  --vr-100: #fbdcd9;
  --vr-200: #f6b3ad;
  --vr-300: #ec8077;
  --vr-400: #e25e54;
  --vr-500: #C73E3A;       /* main = --vr */
  --vr-600: #b13632;
  --vr-700: #A83230;       /* hover = --vrh */
  --vr-800: #8b2522;
  --vr-900: #5e1816;

  /* Navy (青・HEROS副軸) */
  --nv-50:  #eef0fa;
  --nv-100: #d4d8f0;
  --nv-200: #a3aae0;
  --nv-300: #7079ce;
  --nv-400: #4451b4;
  --nv-500: #283593;       /* lighter = --nvl */
  --nv-600: #1A237E;       /* main = --nv */
  --nv-700: #131a66;
  --nv-800: #0D1442;       /* dark = --nvd */
  --nv-900: #060a26;

  /* Gold (金・アクセント) */
  --gd-50:  #fdf8ed;
  --gd-100: #faedc8;
  --gd-200: #f3da97;
  --gd-300: #e7c167;
  --gd-400: #D4A853;       /* main = --gd */
  --gd-500: #B8923F;       /* dark = --gdd */
  --gd-600: #957430;
  --gd-700: #6e5522;

  /* Highlight Marker (gold うっすら) */
  --hl-marker: #f3da97;    /* ハイライトマーカー専用色（gd-200・視認性UP 20260507） */

  /* Gray (濃紺寄りグレー・コノ塾流) */
  --gr-50:  #ebecf1;
  --gr-100: #dbdfe8;
  --gr-200: #b2b9cd;
  --gr-300: #959eb6;
  --gr-400: #7f89a4;
  --gr-500: #6a7592;
  --gr-600: #5b6781;
  --gr-700: #4a536b;
  --gr-800: #3a4155;
  --gr-900: #272d3d;
}

/* --- リセット --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; scroll-padding-top: 80px; }
body { font-family: var(--fb); font-size: 16px; line-height: 1.85; color: var(--tx); background: var(--wh); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nv); text-decoration: none; }

/* --- レイアウト --- */
.ctn { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.ctn-w { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }
.sec { padding: 4.5rem 1.5rem; }
.sec-ws { background: var(--ws); }
.sec-nv { background: var(--nv); color: var(--wh); }

/* --- 【中学生コース】実力テスト対策セクション（期間限定） --- */
.exam-prep { background: linear-gradient(135deg, #fff8f0 0%, #fffdf9 100%); border-bottom: 3px solid var(--gd); position: relative; text-align: center; }
.exam-prep::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--vr), var(--gd), var(--vr)); }
.exam-badge { display: inline-block; background: var(--vr); color: #fff; padding: .4rem 1rem; border-radius: 100px; font-size: .78rem; font-weight: 700; margin-bottom: 1.2rem; letter-spacing: .05em; box-shadow: 0 2px 6px rgba(199,62,58,.28); }
.exam-prep .st { color: var(--nv); margin-bottom: .8rem; }
.exam-prep .sld { font-size: .95rem; color: var(--tx); margin-bottom: 2.2rem; line-height: 1.85; max-width: 720px; margin-left: auto; margin-right: auto; }
.exam-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 680px; margin: 0 auto 2.4rem; text-align: left; }
.exam-card { background: var(--wh); border-radius: var(--rl); padding: 1.6rem 1.4rem; box-shadow: var(--sh); border-left: 4px solid var(--vr); }
.exam-card h4 { font-family: var(--fh); color: var(--nv); font-size: 1.02rem; margin-bottom: .9rem; font-weight: 800; }
.exam-card ul { list-style: none; padding: 0; margin: 0; }
.exam-card li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; font-size: .88rem; line-height: 1.7; color: var(--tx); }
.exam-card li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--vr); font-weight: 800; font-size: 1rem; }
.exam-cta { max-width: 680px; margin: 0 auto; }
.exam-sub { font-size: .95rem; color: var(--tx); margin-bottom: 1.4rem; line-height: 1.8; }
.exam-sub strong { color: var(--vr); font-size: 1.08rem; font-weight: 800; }
.exam-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.exam-btns .btn-outline { display: inline-block; padding: .85rem 1.8rem; border: 2px solid var(--nv); color: var(--nv); text-decoration: none; border-radius: var(--r); font-weight: 700; font-size: .92rem; transition: background .15s, color .15s; background: transparent; }
.exam-btns .btn-outline:hover { background: var(--nv); color: var(--wh); }
@media (max-width: 640px) {
  .exam-grid { grid-template-columns: 1fr; gap: 1rem; }
  .exam-btns { flex-direction: column; }
  .exam-btns a { width: 100%; text-align: center; }
  .exam-prep .sld br { display: none; }
}

/* --- タイポグラフィ --- */
.sl { font-size: .72rem; letter-spacing: .08em; color: var(--tll); text-align: center; margin-bottom: .8rem; font-weight: 500; }
.st { font-family: var(--fh); font-size: clamp(1.3rem, 3.5vw, 1.7rem); font-weight: 700; line-height: 1.6; text-align: center; color: var(--nv); margin-bottom: 1rem; }
.st-wh { color: var(--wh); }
.sld { text-align: center; font-size: .92rem; color: var(--tl); line-height: 1.85; max-width: 600px; margin: 0 auto 2rem; }
.sld-wh { color: rgba(255,255,255,.85); }

/* --- ボタン --- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .85rem 2rem; border-radius: var(--r); font-size: .92rem; font-weight: 700; text-decoration: none; transition: all .2s; cursor: pointer; border: none; font-family: var(--fb); }
.bp { background: var(--vr); color: var(--wh); box-shadow: 0 3px 12px rgba(199,62,58,.25); }
.bp:hover { background: var(--vrh); transform: translateY(-1px); }
.bl { background: var(--ln); color: var(--wh); box-shadow: 0 3px 12px rgba(6,199,85,.2); }
.bl:hover { opacity: .9; transform: translateY(-1px); }
.bo { background: transparent; color: var(--nv); border: 1.5px solid var(--nv); }
.bo:hover { background: var(--nv); color: var(--wh); }
.bw { background: var(--wh); color: var(--vr); border: 1.5px solid var(--wh); }
.bw:hover { background: rgba(255,255,255,.9); }
.cg { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.cn { text-align: center; font-size: .75rem; color: var(--tll); margin-top: .8rem; }
.cn-wh { color: rgba(255,255,255,.95); }

/* --- キャンペーンバー --- */
.camp { background: linear-gradient(90deg, #1a237e 0%, #2563eb 100%); color: var(--wh); text-align: center; padding: .55rem 1rem; font-size: .82rem; font-weight: 500; }
.camp strong { font-weight: 800; }
.camp a { color: var(--wh); text-decoration: underline; margin-left: .5rem; font-weight: 700; }

/* --- 期間限定キャンペーン告知ストリップ --- */
.announce-bar { background: linear-gradient(90deg, #1a237e 0%, #2563eb 100%); color: #fff; font-size: 1rem; line-height: 1.4; box-shadow: 0 2px 6px rgba(0,0,0,.12); border-bottom: 2px solid #ffd56b; }
.announce-in { max-width: 1040px; margin: 0 auto; padding: .95rem 1.5rem; display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex-wrap: wrap; }
.announce-ico { font-size: 1.35rem; line-height: 1; }
.announce-msg { color: rgba(255,255,255,.98); font-weight: 600; letter-spacing: .01em; }
.announce-msg strong { color: #ffe5a3; font-weight: 800; }
.announce-msg .sp-only-br { display: none; }
.announce-msg .pc-sep { display: inline; }
@media (max-width: 640px) {
  .announce-msg .sp-only-br { display: inline; }
  .announce-msg .pc-sep { display: none; }
  .announce-msg strong { display: inline-block; }
}
.announce-cta { background: #fff; color: #c73e3a; font-weight: 800; padding: .5rem 1.1rem; border-radius: 8px; text-decoration: none; white-space: nowrap; font-size: .92rem; transition: transform .15s, background .15s, box-shadow .15s; box-shadow: 0 2px 6px rgba(0,0,0,.18); animation: announce-pulse 2.4s ease-in-out infinite; }
.announce-cta:hover { background: #fff8ec; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.24); }
@keyframes announce-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 0 rgba(255, 213, 107, .55); }
  50%      { box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 8px rgba(255, 213, 107, 0); }
}
@media (max-width: 640px) {
  .announce-bar { font-size: .78rem; border-bottom-width: 1px; }
  .announce-in { padding: .5rem 1rem; gap: .5rem; }
  .announce-msg { text-align: center; width: 100%; font-size: .78rem; font-weight: 500; }
  .announce-ico { font-size: 1.05rem; }
  .announce-cta { font-size: .76rem; padding: .3rem .75rem; animation: none; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
}

/* --- 第3の道セクション（Cプラン v4-index.html）--- */
.third-way-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.8rem 0 2rem; align-items: stretch; }
@media (min-width: 760px) { .third-way-grid { grid-template-columns: 1fr auto 1fr auto 1fr; gap: .8rem; align-items: center; } }
.third-way-card { background: rgba(255,255,255,.97); border-radius: var(--rl); padding: 1.5rem 1.4rem; box-shadow: 0 4px 18px rgba(0,0,0,.08); border-top: 4px solid var(--gd); }
.third-way-card h3 { font-family: var(--fh); color: var(--nv); font-size: 1.05rem; line-height: 1.5; margin: 0 0 .8rem; font-weight: 700; }
.third-way-card p { font-size: .92rem; color: var(--tx); line-height: 1.85; margin: 0; }
.third-way-card .num { display: inline-block; background: var(--nv); color: #fff; font-weight: 800; padding: .2rem .65rem; border-radius: 100px; font-size: .76rem; margin-bottom: .7rem; }
.third-way-times { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: var(--gd); padding: .8rem 0; }
@media (max-width: 759px) { .third-way-times { padding: .2rem 0; } }

/* --- ヘッダー --- */
.hdr { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.06); }
.hdr-in { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding-top: .25rem; padding-bottom: .25rem; }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; text-decoration: none; color: var(--nv); line-height: 1.15; }
.logo-m { font-family: var(--fh); font-size: 1.25rem; font-weight: 800; letter-spacing: .02em; }
.logo-s { font-size: .82rem; font-weight: 700; color: var(--nv); letter-spacing: .02em; }
@media (max-width: 480px) {
  .logo-m { font-size: 1.1rem; }
  .logo-s { font-size: .72rem; }
}

/* PCナビ */
.nav { display: flex; align-items: center; gap: .3rem; }
.nav a { font-size: .78rem; font-weight: 500; color: var(--tx); transition: color .15s; padding: .3rem .6rem; border-radius: var(--r); }
.nav a:hover { color: var(--vr); }
.nav a.active { color: var(--vr); font-weight: 700; border-bottom: 2px solid var(--vr); padding-bottom: 3px; }
.nc { background: var(--vr) !important; color: var(--wh) !important; padding: .45rem 1rem !important; font-weight: 700 !important; }

/* --- キャンペーンナビ（朱色アクセント） --- */
.nav a.nav-cp {
  background: rgba(199,62,58,.08);
  color: var(--vr) !important;
  padding: .3rem .7rem .3rem .55rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(199,62,58,.25);
  transition: background .2s, transform .15s;
}
.nav a.nav-cp:hover { background: rgba(199,62,58,.18); transform: translateY(-1px); }
.nav a.nav-cp .nav-cp-badge {
  background: var(--vr);
  color: var(--wh);
  font-size: .62rem;
  padding: .08rem .35rem;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .02em;
}
/* モバイルドロワーのキャンペーンリンク */
.mdr a.mdr-cp {
  display: block;
  background: linear-gradient(135deg, rgba(199,62,58,.08), rgba(199,62,58,.14));
  color: var(--vr);
  padding: .9rem 1rem;
  border-radius: var(--r);
  font-weight: 700;
  border: 1px solid rgba(199,62,58,.25);
  margin: .5rem 0;
}
.mdr a.mdr-cp .mdr-cp-badge {
  display: inline-block;
  background: var(--vr);
  color: var(--wh);
  font-size: .65rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-weight: 800;
  margin-right: .4rem;
  letter-spacing: .02em;
}
.nc:hover { background: var(--vrh) !important; }

/* ドロップダウン */
.dd { position: relative; }
.dd > span { font-size: .78rem; font-weight: 500; color: var(--tx); padding: .3rem .6rem; cursor: pointer; border-radius: var(--r); }
.dd > span:hover { color: var(--vr); }
.dd-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--wh); border-radius: var(--r); box-shadow: var(--sl); padding: .5rem 0; min-width: 180px; z-index: 50; }
.dd:hover .dd-menu { display: block; }
.dd-menu a { display: block; padding: .5rem 1rem; font-size: .78rem; color: var(--tx); white-space: nowrap; }
.dd-menu a:hover { background: var(--ws); color: var(--vr); }

/* ハンバーガー */
.mbtn { display: none; background: none; border: 1.5px solid var(--nv); font-size: .82rem; font-weight: 700; color: var(--nv); cursor: pointer; padding: .35rem .8rem; border-radius: var(--r); font-family: var(--fb); }
@media (max-width: 768px) {
  .nav { display: none; }
  .mbtn { display: block; }
}

/* モバイルドロワー */
.mov { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; }
.mov.open { display: block; }
.mdr { position: fixed; top: 0; right: -300px; width: 280px; height: 100%; background: var(--nvd); z-index: 201; transition: right .3s; padding: 1.5rem; overflow-y: auto; }
.mdr.open { right: 0; }
.mdr .cls { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: rgba(255,255,255,.7); font-size: 1.3rem; cursor: pointer; }
.mdr h3, .mdr .mdr-h { color: var(--wh); font-family: var(--fh); font-size: 1rem; margin: 1.5rem 0 .5rem; font-weight: 700; }
.mdr ul { list-style: none; }
.mdr li a { display: block; padding: .5rem 0; color: rgba(255,255,255,.95); font-size: .85rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.mdr li a:hover { color: var(--wh); }
.mdr .mc { display: block; margin-top: 1.2rem; background: var(--vr); color: var(--wh); text-align: center; padding: .7rem; border-radius: var(--r); font-weight: 700; font-size: .88rem; }
.mdr .ml { display: block; margin-top: .6rem; background: var(--ln); color: var(--wh); text-align: center; padding: .7rem; border-radius: var(--r); font-weight: 700; font-size: .88rem; }

/* --- ヒーローセクション --- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; padding-bottom: 3.2rem; }
@media (max-width: 640px) { .hero { min-height: 100vh; padding-bottom: 2.4rem; } .hero .hbadges { display: none; } }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 10%; will-change: transform; }
.hero-bg-home { background-image: url('hero-home-mobile.webp'); }
@media (min-width: 769px) { .hero-bg-home { background-image: url('hero-home.webp'); } }
.hero-c { position: relative; z-index: 2; text-align: center; color: var(--wh); padding: 3rem 1.5rem; max-width: 700px; }
/* PCレイアウト：女子の視線方向（左上）と整列するため、テキストを左寄せ・上下中央に配置 */
@media (min-width: 768px) {
  .hero { align-items: center; justify-content: flex-start; padding: 0 0 0 max(4vw, 2.5rem); }
  .hero-c { padding: 1rem 1.5rem 1rem 0; max-width: 540px; text-align: left; margin: 0; }
  .hero-bg-home { background-position: 70% center; }
  .hero-empathy { margin: .3rem 0 1.1rem; padding: 1rem 1.1rem .55rem; max-width: 460px; }
  .hero-c .hero-sub { margin-bottom: 1.1rem; }
  .hbadges { justify-content: flex-start; margin-bottom: 1.4rem; }
  .hero .cg { justify-content: flex-start; }  /* ヒーロー内のみ左寄せ・他の.cg(最終CTA等)は中央寄せのまま */
  .htrust { text-align: left; margin-top: 1rem; }
}
.hero-main { font-family: var(--fh); font-size: clamp(1.5rem, 5.4vw, 2.8rem); font-weight: 800; line-height: 1.5; margin-bottom: 1rem; text-shadow: 0 0 18px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,1), 0 1px 2px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,.9); }
.hero-main .sp-br { display: none; }
@media (max-width: 640px) { .hero-main .sp-br { display: inline; } }
.hero-main .hl { color: #ffd56b; font-weight: 900; display: inline-block; padding: 0 .12em; text-shadow: 0 0 8px rgba(255,220,130,.85), 0 0 18px rgba(255,213,107,.55), 0 0 30px rgba(255,200,90,.3), 0 2px 4px rgba(0,0,0,.85); animation: hl-glow 2.6s ease-in-out infinite, hl-sparkle 3.4s ease-in-out infinite; position: relative; }
.hero-main .hl::before, .hero-main .hl::after { content: '✦'; position: absolute; font-size: .55em; color: #fff8d8; text-shadow: 0 0 8px rgba(255,240,180,1), 0 0 16px rgba(255,213,107,.7); animation: hl-twinkle 2s ease-in-out infinite; pointer-events: none; }
.hero-main .hl::before { top: -.05em; left: -.4em; animation-delay: 0s; }
.hero-main .hl::after { bottom: 0; right: -.4em; animation-delay: .9s; }
@keyframes hl-glow {
  0%, 100% { text-shadow: 0 0 8px rgba(255,220,130,.85), 0 0 16px rgba(255,213,107,.5), 0 0 26px rgba(255,200,90,.28), 0 2px 4px rgba(0,0,0,.85); }
  50% { text-shadow: 0 0 12px rgba(255,240,180,1), 0 0 24px rgba(255,220,130,.85), 0 0 40px rgba(255,200,90,.55), 0 0 58px rgba(255,213,107,.3), 0 2px 4px rgba(0,0,0,.85); }
}
@keyframes hl-sparkle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1px) scale(1.02); }
}
@keyframes hl-twinkle {
  0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-main .hl, .hero-main .hl::before, .hero-main .hl::after { animation: none; }
  .hero-main .hl::before, .hero-main .hl::after { opacity: 1; }
}
.hero-sub { font-size: clamp(.9rem, 2vw, 1.05rem); line-height: 1.8; color: #fff; margin-bottom: 1.8rem; font-weight: 500; text-shadow: 0 0 12px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,1); }
.hero-c .hero-sub + .hero-sub { margin-top: -1rem; }
.hero-c .hero-sub-strong { font-size: clamp(1rem, 2.3vw, 1.18rem); margin-top: .4rem; }
.hero-c .hero-sub-strong strong { background: linear-gradient(transparent 60%, rgba(199,62,58,.55) 60%); padding: 0 .15em; font-weight: 800; }
.hero-empathy { background: rgba(0,0,0,.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(255,213,107,.4); border-radius: 14px; padding: 1.4rem 1.2rem .8rem; margin: .4rem auto 1.6rem; max-width: 480px; box-shadow: 0 4px 18px rgba(0,0,0,.2); }
.hero-empathy .hero-sub { margin-bottom: .9rem; }
.hero-empathy .hero-sub:last-child { margin-bottom: 0; }
.hero-empathy .hero-sub + .hero-sub { margin-top: 0; padding-top: .9rem; border-top: 1px dashed rgba(255,213,107,.28); }
@media (max-width: 640px) {
  .hero-bg { background-position: center 3%; }
  .hero-c { padding-top: 40vh; }
  .hero-empathy { padding: 1.2rem 1rem .6rem; }
}
.hbadges { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hb { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); padding: .4rem 1rem; border-radius: 20px; font-size: .8rem; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); backdrop-filter: blur(2px); }
.htrust { margin-top: 1.5rem; font-size: .78rem; color: rgba(255,255,255,1); text-shadow: 0 1px 4px rgba(0,0,0,.9); }

/* 初回面談スタイル選択セクション */
.meeting-style { padding: 4.5rem 1.5rem 5rem; background: #fdfaf3; }
.meeting-style .ms-list { display: grid; gap: 1.4rem; max-width: 980px; margin: 2.4rem auto 1.8rem; }
.meeting-style .ms-item { background: #fff; border-radius: 14px; padding: 1.9rem 1.5rem 1.5rem; border: 1px solid #e9e0cb; position: relative; }
.meeting-style .ms-item.ms-recommended { border: 2px solid #1a237e; box-shadow: 0 6px 20px rgba(26,35,126,.12); }
.meeting-style .ms-tag { position: absolute; top: -0.7rem; right: 1.2rem; background: #c73e3a; color: #fff; font-size: 0.74rem; font-weight: 700; padding: 0.28rem 0.95rem; border-radius: 14px; box-shadow: 0 2px 6px rgba(199,62,58,.3); letter-spacing: .04em; }
.meeting-style .ms-title { font-family: var(--fh); font-size: 1.08rem; font-weight: 800; color: #1a237e; margin-bottom: 0.9rem; line-height: 1.4; }
.meeting-style .ms-lead { font-size: .9rem; color: #c73e3a; font-weight: 700; margin: -0.4rem 0 .8rem 0; letter-spacing: .02em; }
.meeting-style .ms-bullet { list-style: none; padding: 0; margin: 0 0 .6rem 0; }
.meeting-style .ms-bullet li { font-size: 0.93rem; line-height: 1.85; color: #2c3e50; padding: 0.12rem 0; }
.meeting-style .ms-tail { font-size: 0.86rem; color: #6b6b6b; margin-top: 0.5rem; font-style: italic; }
.meeting-style .ms-bottom { text-align: center; font-size: 0.95rem; line-height: 1.85; color: #1a1a1a; margin-top: 2rem; }
@media (min-width: 720px) {
  .meeting-style .ms-list { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .meeting-style .ms-item { display: flex; flex-direction: column; }
  .meeting-style .ms-item.ms-recommended { transform: scale(1.03); }
}
@media (max-width: 640px) {
  .meeting-style { padding: 3.4rem 1.2rem 3.8rem; }
}

/* サブページヒーロー */
.page-hero { position: relative; padding: 5rem 1.5rem; text-align: center; color: var(--wh); overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.3); }
.page-hero > * { position: relative; z-index: 2; }
.page-hero .st { color: var(--wh); font-size: clamp(1.4rem, 4vw, 2rem); }
.page-hero p { color: rgba(255,255,255,.95); font-size: .92rem; max-width: 560px; margin: 0 auto; }

/* --- 数字ダッシュボード --- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; }
.stat-card { background: var(--wh); border-radius: var(--rl); padding: 1.8rem 1.1rem 1.5rem; text-align: center; box-shadow: var(--sh); border-top: 3px solid var(--nv); transition: transform .3s ease, box-shadow .3s ease; }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.stat-icon { width: 40px; height: 40px; margin: 0 auto .8rem; color: var(--nv); opacity: .85; }
.stat-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-num { font-family: var(--fh); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; color: var(--vr); line-height: 1.1; margin-bottom: .4rem; letter-spacing: -.01em; }
.stat-unit { font-family: var(--fb); font-size: .85rem; font-weight: 600; color: var(--nv); margin-left: .25rem; letter-spacing: 0; }
.stat-label { font-size: .88rem; font-weight: 700; color: var(--nv); margin-bottom: .55rem; line-height: 1.5; }
.stat-desc { font-size: .75rem; color: var(--tl); line-height: 1.7; }

.stat-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .stat-grid-3 { grid-template-columns: 1fr; gap: .8rem; }
  .stat-card { padding: 1.4rem .9rem 1.2rem; }
}

/* --- コスト構造比較 --- */
.cost-cmp-wrap { background: var(--wh); border-radius: var(--rl); padding: 2rem 1.5rem; box-shadow: var(--sh); margin: 2rem 0; }
.cost-cmp-wrap h3 { font-family: var(--fh); font-size: clamp(1.1rem, 3vw, 1.35rem); color: var(--nv); text-align: center; margin-bottom: 1.5rem; line-height: 1.6; }
.cost-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.cost-cmp-card { padding: 1.2rem; border-radius: var(--rl); border: 2px solid #e5e5e5; background: #fafafa; }
.cost-cmp-card-hero { border-color: var(--vr); background: linear-gradient(135deg, #fff7f5, #ffecec); position: relative; }
.cost-cmp-card-hero::before { content: 'HERO\'S'; position: absolute; top: -12px; right: 14px; background: var(--vr); color: var(--wh); font-size: .7rem; font-weight: 800; padding: .2rem .8rem; border-radius: 20px; letter-spacing: .05em; }
.cost-cmp-label { font-size: .78rem; font-weight: 700; color: var(--tl); margin-bottom: .5rem; line-height: 1.5; }
.cost-cmp-label-hero { color: var(--vr); }
.cost-cmp-price { font-size: .9rem; color: var(--tx); margin-bottom: 1rem; line-height: 1.4; }
.cost-cmp-price strong { font-family: var(--fh); font-size: 1.5rem; color: var(--nv); font-weight: 800; margin: 0 .1rem; }
.cost-cmp-card-hero .cost-cmp-price strong { color: var(--vr); }
.cost-cmp-bar-box { background: #f0f0f0; border-radius: 20px; overflow: hidden; position: relative; height: 36px; margin-bottom: .6rem; }
.cost-cmp-bar { height: 100%; background: linear-gradient(90deg, #9ca3af, #6b7280); border-radius: 20px; }
.cost-cmp-bar-hero { background: linear-gradient(90deg, var(--vr), var(--gd)); }
.cost-cmp-hrs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: .82rem; font-weight: 800; color: var(--wh); text-shadow: 0 1px 2px rgba(0,0,0,.4); white-space: nowrap; }
.cost-cmp-per { font-size: 1rem; font-weight: 700; color: var(--nv); text-align: center; margin-bottom: .3rem; }
.cost-cmp-card-hero .cost-cmp-per { color: var(--vr); }
.cost-cmp-note { font-size: .72rem; color: var(--tl); text-align: center; line-height: 1.5; }
.cost-cmp-conclusion { text-align: center; font-size: .95rem; line-height: 1.8; color: var(--tx); margin-top: 1rem; padding: .9rem 1rem; background: #fffaf0; border-left: 4px solid var(--gd); border-radius: var(--r); }
.cost-cmp-conclusion strong { color: var(--vr); font-size: 1.1rem; }
.cost-cmp-footnote { font-size: .7rem; color: var(--tll); text-align: center; margin-top: .6rem; line-height: 1.6; }

@media (max-width: 680px) {
  .cost-cmp-wrap { padding: 1.5rem 1rem; }
  .cost-cmp-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cost-cmp-bar-box { height: 32px; }
}

/* --- 高校3年間ロードマップ --- */
.roadmap-wrap { margin: 2rem 0; position: relative; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rm-card { background: var(--wh); border-radius: var(--rl); padding: 1.5rem 1.2rem; box-shadow: var(--sh); border-top: 4px solid var(--nv); position: relative; transition: transform .3s ease, box-shadow .3s ease; }
.rm-card:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.rm-card-1 { border-top-color: #0d9488; }
.rm-card-2 { border-top-color: var(--nv); }
.rm-card-3 { border-top-color: var(--vr); }
.rm-year-badge { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; padding: .2rem .7rem; border-radius: 20px; color: var(--wh); margin-bottom: .5rem; }
.rm-card-1 .rm-year-badge { background: #0d9488; }
.rm-card-2 .rm-year-badge { background: var(--nv); }
.rm-card-3 .rm-year-badge { background: var(--vr); }
.rm-title { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--nv); margin-bottom: .3rem; line-height: 1.5; }
.rm-subtitle { font-size: .82rem; color: var(--tl); margin-bottom: 1rem; line-height: 1.6; }
.rm-section { margin-top: .9rem; }
.rm-section-title { font-size: .78rem; font-weight: 700; color: var(--nv); margin-bottom: .4rem; display: flex; align-items: center; gap: .4rem; }
.rm-section-icon { width: 16px; height: 16px; color: var(--nv); flex-shrink: 0; }
.rm-section-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rm-card-1 .rm-section-icon, .rm-card-1 .rm-section-title { color: #0d9488; }
.rm-card-3 .rm-section-icon, .rm-card-3 .rm-section-title { color: var(--vr); }
.rm-list { list-style: none; padding: 0; margin: 0; }
.rm-list li { font-size: .78rem; line-height: 1.75; color: var(--tx); padding-left: 1rem; position: relative; margin-bottom: .25rem; }
.rm-list li::before { content: '•'; position: absolute; left: .2rem; color: var(--gd); font-weight: 700; }
.rm-goal { background: var(--ws); padding: .7rem .8rem; border-radius: var(--r); margin-top: 1rem; border-left: 3px solid var(--gd); }
.rm-goal-label { font-size: .68rem; font-weight: 700; color: var(--gdd); letter-spacing: .05em; margin-bottom: .2rem; }
.rm-goal-text { font-size: .82rem; font-weight: 600; color: var(--nv); line-height: 1.5; }

.rm-note { text-align: center; font-size: .82rem; color: var(--tl); line-height: 1.8; margin-top: 1.5rem; padding: .9rem 1rem; background: #fffaf0; border-radius: var(--r); border-left: 3px solid var(--gd); }
.rm-note strong { color: var(--nv); }

@media (max-width: 840px) {
  .roadmap-grid { grid-template-columns: 1fr; }
  .rm-card { padding: 1.3rem 1rem; }
}

/* --- 料金シミュレーター --- */
.sim-wrap { background: var(--wh); border-radius: var(--rl); padding: 2rem 1.5rem; box-shadow: var(--sh); margin: 2rem 0; border-top: 4px solid var(--nv); }
.sim-title { font-family: var(--fh); font-size: clamp(1.1rem, 2.8vw, 1.3rem); color: var(--nv); text-align: center; margin-bottom: .4rem; font-weight: 700; }
.sim-sub { text-align: center; font-size: .82rem; color: var(--tl); margin-bottom: 1.5rem; line-height: 1.7; }
.sim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.sim-inputs { display: flex; flex-direction: column; gap: 1.2rem; }
.sim-group { }
.sim-label { font-size: .82rem; font-weight: 700; color: var(--nv); margin-bottom: .5rem; display: block; }
.sim-grade-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.sim-grade-btn { padding: .45rem .8rem; border-radius: 20px; border: 1.5px solid #ddd; background: var(--wh); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all .15s ease; color: var(--tl); }
.sim-grade-btn:hover { border-color: var(--nv); color: var(--nv); }
.sim-grade-btn.active { background: var(--nv); color: var(--wh); border-color: var(--nv); }
.sim-plan-list { display: flex; flex-direction: column; gap: .5rem; }
.sim-plan-item { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1.5px solid #e5e5e5; border-radius: var(--r); cursor: pointer; transition: all .15s ease; background: var(--wh); }
.sim-plan-item:hover { border-color: var(--nv); background: #fafbff; }
.sim-plan-item.selected { border-color: var(--vr); background: #fff9f8; box-shadow: 0 0 0 2px rgba(199,62,58,0.1); }
.sim-plan-item input[type="radio"] { margin: 0; accent-color: var(--vr); }
.sim-plan-name { flex: 1; font-size: .82rem; font-weight: 600; color: var(--tx); }
.sim-plan-price { font-size: .88rem; font-weight: 800; color: var(--nv); }
.sim-opts-list { display: flex; flex-direction: column; gap: .4rem; max-height: 220px; overflow-y: auto; padding-right: .3rem; }
.sim-opt-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border: 1px solid #eee; border-radius: var(--r); cursor: pointer; transition: all .15s ease; background: var(--wh); }
.sim-opt-item:hover { border-color: var(--nv); }
.sim-opt-item.checked { background: #f0f9f0; border-color: #0d9488; }
.sim-opt-item input[type="checkbox"] { margin: 0; accent-color: #0d9488; }
.sim-opt-name { flex: 1; font-size: .76rem; color: var(--tx); }
.sim-opt-info { font-size: .68rem; font-weight: 600; color: var(--nv); text-decoration: underline; padding: .1rem .3rem; border-radius: 3px; opacity: .7; transition: opacity .15s ease, background .15s ease; }
.sim-opt-info:hover { opacity: 1; background: rgba(26,35,126,.08); }
.sim-opt-price { font-size: .76rem; font-weight: 700; color: var(--nv); }
.sim-included { font-size: .72rem; color: #0d9488; font-weight: 600; background: #e6f5f3; padding: .5rem .7rem; border-radius: var(--r); margin-bottom: .5rem; border-left: 3px solid #0d9488; line-height: 1.9; }
.sim-included a.tool-link { color: #0d9488; text-decoration: underline; font-weight: 700; }
.sim-included a.tool-link:hover { color: #065f57; }

.sim-output { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); color: var(--wh); padding: 1.5rem 1.3rem; border-radius: var(--rl); position: sticky; top: 100px; }
.sim-out-label { font-size: .72rem; opacity: .75; margin-bottom: .2rem; letter-spacing: .05em; }
.sim-out-main-price { font-family: var(--fh); font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; margin-bottom: .2rem; line-height: 1.1; }
.sim-out-unit { font-size: .8rem; opacity: .85; margin-bottom: 1rem; }
.sim-out-divider { height: 1px; background: rgba(255,255,255,.2); margin: .8rem 0; }
.sim-out-line { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; margin-bottom: .3rem; opacity: .92; }
.sim-out-line-sum { font-size: .88rem; font-weight: 700; opacity: 1; padding-top: .4rem; border-top: 1px dashed rgba(255,255,255,.3); margin-top: .4rem; }
.sim-out-subhead { font-size: .7rem; font-weight: 700; letter-spacing: .08em; opacity: .7; margin: .8rem 0 .4rem; text-transform: none; }
.sim-out-sep-block { background: rgba(255,255,255,.07); border-radius: var(--r); padding: .7rem .8rem; margin-bottom: .5rem; }
.sim-out-sep-title { font-size: .78rem; font-weight: 700; margin-bottom: .15rem; display: flex; justify-content: space-between; }
.sim-out-sep-note { font-size: .68rem; opacity: .65; line-height: 1.6; }
.sim-out-fees-small { margin-top: .8rem; padding-top: .6rem; border-top: 1px dashed rgba(255,255,255,.2); opacity: .75; }
.sim-out-fees-row { display: flex; justify-content: space-between; align-items: center; font-size: .68rem; line-height: 1.6; margin-bottom: .15rem; }
.sim-out-fees-row span:first-child { font-weight: 600; opacity: .85; }
.sim-out-fees-row span:last-child { opacity: .85; }
.sim-out-first { background: rgba(212,168,83,0.2); border: 1px solid var(--gd); padding: .7rem .9rem; border-radius: var(--r); margin-top: .8rem; }
.sim-out-first-label { font-size: .7rem; font-weight: 700; color: var(--gd); letter-spacing: .05em; margin-bottom: .2rem; }
.sim-out-first-price { font-family: var(--fh); font-size: 1.2rem; font-weight: 800; color: var(--wh); }
.sim-out-note { font-size: .68rem; opacity: .7; margin-top: 1rem; line-height: 1.6; }

@media (max-width: 720px) {
  .sim-wrap { padding: 1.5rem 1rem; }
  .sim-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .sim-output { position: static; }
  .sim-grade-btn { font-size: .74rem; padding: .4rem .7rem; }
}

/* --- 悩みカード --- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.pcard { background: var(--ws); border-radius: var(--rl); padding: 1.5rem; border-left: 3px solid var(--gd); }
.pcard p { font-size: .9rem; line-height: 1.75; }

/* ブリッジ */
.bridge { text-align: center; max-width: 560px; margin: 2rem auto 0; font-size: .95rem; line-height: 1.9; }
.bridge strong { color: var(--nv); font-weight: 700; }

/* --- 原因再定義セクション --- */
.rdf { background: var(--nv); color: var(--wh); position: relative; overflow: hidden; }
.rdf::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .12; }
.rdf .st { color: var(--wh); }
.rdf-b { position: relative; max-width: 600px; margin: 0 auto; font-size: .95rem; line-height: 2; text-align: center; color: rgba(255,255,255,.88); }
.rdf-e { position: relative; margin: 2rem auto 0; padding: 1rem 1.5rem; background: rgba(255,255,255,.08); border-radius: var(--r); border-left: 3px solid var(--gd); font-size: .8rem; line-height: 1.7; color: rgba(255,255,255,.7); max-width: 560px; }

/* --- 柱カード（画像+テキスト） --- */
.plgrid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.plc { background: var(--wh); border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh); transition: transform .2s, box-shadow .2s; }
.plc:hover { transform: translateY(-2px); box-shadow: var(--sl); }
.pli { width: 100%; height: 220px; object-fit: cover; }
.plb { padding: 1.5rem; }
.pln { font-size: .72rem; font-weight: 700; color: var(--gdd); letter-spacing: .05em; margin-bottom: .3rem; }
.plt { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; color: var(--nv); margin-bottom: .5rem; line-height: 1.5; }
.pltx { font-size: .85rem; line-height: 1.8; color: var(--tl); }
.pll { display: inline-block; margin-top: .8rem; font-size: .82rem; font-weight: 600; color: var(--nv); }
.pll:hover { color: var(--vr); }
@media (min-width: 700px) {
  .plgrid { grid-template-columns: repeat(3, 1fr); }
  .pli { height: 180px; }
}

/* --- コースカード --- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.feat-card { background: var(--wh); border-radius: var(--rl); padding: 1.5rem; box-shadow: var(--sh); border-top: 3px solid var(--nv); }
.feat-card h4 { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--nv); margin-bottom: .4rem; }
.feat-card p { font-size: .82rem; line-height: 1.75; color: var(--tl); }
.feat-card[style*="text-align:center"] .feat-icon { margin-left: auto; margin-right: auto; }

/* --- SVGアイコン（feat-card用） --- */
.feat-icon {
  width: 52px;
  height: 52px;
  margin-bottom: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(37,99,235,.10));
  border-radius: 14px;
  color: var(--nv);
}
.feat-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feat-icon.ic-gd { color: var(--gdd); background: linear-gradient(135deg, rgba(212,168,83,.10), rgba(212,168,83,.18)); }
.feat-icon.ic-vr { color: var(--vr); background: linear-gradient(135deg, rgba(199,62,58,.08), rgba(199,62,58,.14)); }
.feat-icon.ic-tl { color: #0d9488; background: linear-gradient(135deg, rgba(13,148,136,.08), rgba(13,148,136,.14)); }
.feat-icon.ic-bl { color: #2563eb; background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(37,99,235,.14)); }

/* --- 料金サマリーカード（v4-price.html TOP用） --- */
.price-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}
@media (max-width: 700px) { .price-summary { grid-template-columns: 1fr; } }
.psum-card {
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.6rem 1.2rem;
  text-align: center;
  box-shadow: var(--sh);
  border-top: 4px solid var(--nv);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.psum-card:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.psum-card.ic-gd { border-top-color: var(--gd); }
.psum-card.ic-vr { border-top-color: var(--vr); }
.psum-icon { width: 48px; height: 48px; margin-bottom: .8rem; color: var(--nv); display: flex; align-items: center; justify-content: center; }
.psum-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.psum-card.ic-gd .psum-icon { color: var(--gdd); }
.psum-card.ic-vr .psum-icon { color: var(--vr); }
.psum-grade { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--nv); margin-bottom: .3rem; }
.psum-plan { font-size: .72rem; color: var(--tll); margin-bottom: .8rem; letter-spacing: .05em; }
.psum-price { display: flex; align-items: baseline; justify-content: center; gap: .2rem; margin-bottom: .3rem; }
.psum-price .pv { font-size: 1.8rem; font-weight: 900; color: var(--vr); line-height: 1; font-family: var(--fh); }
.psum-price .pu { font-size: .78rem; color: var(--tl); font-weight: 600; }
.psum-price .pf { font-size: .75rem; color: var(--tl); margin-left: .1rem; }
.psum-note { font-size: .72rem; color: var(--tl); margin-bottom: .8rem; line-height: 1.6; }
.psum-link { font-size: .78rem; color: var(--nv); font-weight: 700; margin-top: auto; }

/* --- FAQカテゴリ見出し（旧 v3/v4 用 .fq-cat-* は廃止。v6 定義は下方の FAQ セクション参照） --- */

/* --- 入塾までの流れ（4ステップ） --- */
.flow-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem auto;
  max-width: 900px;
  position: relative;
}
@media (max-width: 760px) { .flow-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .flow-wrap { grid-template-columns: 1fr; } }
.flow-step {
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.4rem 1rem;
  text-align: center;
  box-shadow: var(--sh);
  position: relative;
  z-index: 1;
}
.flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nv);
  color: var(--wh);
  font-family: var(--fh);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: .8rem;
}
.flow-step:nth-child(2) .flow-num { background: #2563eb; }
.flow-step:nth-child(3) .flow-num { background: var(--gdd); }
.flow-step:nth-child(4) .flow-num { background: var(--vr); }
.flow-icon { width: 40px; height: 40px; margin: 0 auto .6rem; color: var(--nv); }
.flow-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-step:nth-child(2) .flow-icon { color: #2563eb; }
.flow-step:nth-child(3) .flow-icon { color: var(--gdd); }
.flow-step:nth-child(4) .flow-icon { color: var(--vr); }
.flow-title { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--nv); margin-bottom: .4rem; }
.flow-desc { font-size: .78rem; color: var(--tl); line-height: 1.7; }

/* --- 学習ピラミッド（v4-method.html 用） --- */
.lp-wrap {
  max-width: 720px;
  margin: 2rem auto 0;
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.6rem 1.4rem 1.2rem;
  box-shadow: var(--sh);
}
.lp-title {
  text-align: center;
  font-size: .85rem;
  color: var(--nv);
  font-weight: 700;
  margin-bottom: 1.1rem;
  font-family: var(--fh);
}
.lp-item { display: flex; align-items: center; margin-bottom: .55rem; gap: .8rem; }
.lp-label { width: 140px; font-size: .76rem; color: var(--tx); text-align: right; font-weight: 500; flex-shrink: 0; }
.lp-bar-wrap { flex: 1; background: #f0eee8; border-radius: 4px; position: relative; height: 24px; overflow: hidden; }
.lp-bar {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 .7rem;
  color: var(--wh);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.lp-bar.lp-low { background: #b8b1a3; }
.lp-bar.lp-mid { background: #c9a870; }
.lp-bar.lp-high { background: linear-gradient(90deg, var(--nv), var(--vr)); box-shadow: 0 2px 8px rgba(199,62,58,.3); }
.lp-item.featured .lp-label { color: var(--vr); font-weight: 700; }
.lp-source { font-size: .68rem; color: var(--tll); text-align: right; margin-top: .8rem; }
@media (max-width: 560px) {
  .lp-wrap { padding: 1.2rem .9rem 1rem; }
  .lp-label { width: 90px; font-size: .68rem; }
  .lp-bar { font-size: .66rem; padding: 0 .4rem; }
}

/* --- 3サイクル図（SHIFT演習の能動学習サイクル） --- */
.cycle-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: .6rem;
  align-items: stretch;
  max-width: 760px;
  margin: 2rem auto;
}
@media (max-width: 720px) { .cycle-wrap { grid-template-columns: 1fr; gap: .8rem; } .cycle-arrow { display: none; } }
.cycle-step {
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.2rem 1rem;
  text-align: center;
  box-shadow: var(--sh);
  border-top: 3px solid var(--nv);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cycle-step:nth-child(3) { border-top-color: var(--gdd); }
.cycle-step:nth-child(5) { border-top-color: var(--vr); }
.cycle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nv);
  color: var(--wh);
  font-family: var(--fh);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .6rem;
}
.cycle-step:nth-child(3) .cycle-num { background: var(--gdd); }
.cycle-step:nth-child(5) .cycle-num { background: var(--vr); }
.cycle-icon { width: 38px; height: 38px; margin: 0 auto .5rem; color: var(--nv); }
.cycle-step:nth-child(3) .cycle-icon { color: var(--gdd); }
.cycle-step:nth-child(5) .cycle-icon { color: var(--vr); }
.cycle-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cycle-title { font-family: var(--fh); font-size: .92rem; font-weight: 700; color: var(--nv); margin-bottom: .35rem; }
.cycle-desc { font-size: .76rem; color: var(--tl); line-height: 1.65; }
.cycle-arrow { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--tll); font-weight: 700; }

/* --- 役割分担ビジュアル（3列・価格ページの「なぜこの料金」用） --- */
.role-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 820px;
  margin: 2rem auto;
}
@media (max-width: 720px) { .role-wrap { grid-template-columns: 1fr; } }
.role-card {
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.5rem 1.2rem;
  text-align: center;
  box-shadow: var(--sh);
  border-top: 4px solid var(--nv);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.role-card.r-ai { border-top-color: #2563eb; }
.role-card.r-room { border-top-color: var(--gdd); }
.role-card.r-teacher { border-top-color: var(--vr); }
.role-icon { width: 52px; height: 52px; margin-bottom: .8rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(37,99,235,.14)); border-radius: 14px; color: #2563eb; }
.role-card.r-room .role-icon { color: var(--gdd); background: linear-gradient(135deg, rgba(212,168,83,.10), rgba(212,168,83,.18)); }
.role-card.r-teacher .role-icon { color: var(--vr); background: linear-gradient(135deg, rgba(199,62,58,.08), rgba(199,62,58,.14)); }
.role-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.role-label { font-size: .7rem; font-weight: 700; color: var(--tll); margin-bottom: .3rem; letter-spacing: .08em; }
.role-actor { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--nv); margin-bottom: .4rem; }
.role-card.r-room .role-actor { color: var(--gdd); }
.role-card.r-teacher .role-actor { color: var(--vr); }
.role-desc { font-size: .78rem; color: var(--tl); line-height: 1.7; }

/* --- ポモドーロ ビジュアル（price.html SHIFT演習とは用） --- */
.pomo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 2rem auto;
  background: var(--wh);
  padding: 1.4rem 1.2rem;
  border-radius: var(--rl);
  box-shadow: var(--sh);
}
.pomo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .8rem 1.2rem;
  border-radius: 10px;
  min-width: 120px;
}
.pomo-block.pomo-focus { background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(26,35,126,.14)); border: 2px solid rgba(26,35,126,.15); }
.pomo-block.pomo-break { background: linear-gradient(135deg, rgba(212,168,83,.08), rgba(212,168,83,.16)); border: 2px solid rgba(212,168,83,.2); }
.pomo-min { font-family: var(--fh); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.pomo-focus .pomo-min { color: var(--nv); }
.pomo-break .pomo-min { color: var(--gdd); }
.pomo-unit { font-size: .72rem; color: var(--tl); font-weight: 600; margin-top: .15rem; }
.pomo-label { font-size: .8rem; font-weight: 700; margin-top: .4rem; }
.pomo-focus .pomo-label { color: var(--nv); }
.pomo-break .pomo-label { color: var(--gdd); }
.pomo-connect { font-size: 1.5rem; color: var(--tll); font-weight: 700; }
.pomo-note { width: 100%; text-align: center; font-size: .78rem; color: var(--tl); margin-top: .6rem; }

/* --- 悩みアイコン（index pcard用） --- */
.pcard .pcard-icon { width: 42px; height: 42px; margin: 0 auto .6rem; color: var(--tll); display: flex; align-items: center; justify-content: center; }
.pcard .pcard-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --- 教室情報アイコンリスト（access.html用） --- */
.info-list { max-width: 500px; margin: 0 auto 2rem; background: var(--wh); border-radius: var(--rl); padding: 1.4rem 1.2rem; box-shadow: var(--sh); }
.info-row { display: flex; align-items: flex-start; gap: .9rem; padding: .7rem 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.info-row:last-child { border-bottom: none; }
.info-ic { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(37,99,235,.10)); border-radius: 10px; color: var(--nv); }
.info-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.info-content { flex: 1; }
.info-label { font-size: .7rem; color: var(--tll); font-weight: 600; margin-bottom: .15rem; letter-spacing: .05em; }
.info-value { font-size: .92rem; color: var(--tx); font-weight: 500; line-height: 1.6; }
.info-value a { color: var(--nv); font-weight: 700; }

/* --- ダーク背景での2列対比カード（rdfセクション用） --- */
.dark-contrast {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: stretch;
  max-width: 760px;
  margin: 2rem auto 1.5rem;
}
@media (max-width: 680px) { .dark-contrast { grid-template-columns: 1fr; } .dark-contrast-plus { display: none !important; } }
.dark-contrast-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius: var(--rl);
  padding: 1.4rem 1.2rem;
  text-align: center;
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dark-contrast-card.dc-ai { border-top: 3px solid #7ab8ff; }
.dark-contrast-card.dc-human { border-top: 3px solid var(--gd); }
.dark-contrast-icon { width: 48px; height: 48px; margin-bottom: .7rem; color: var(--wh); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border-radius: 12px; }
.dark-contrast-card.dc-ai .dark-contrast-icon { color: #7ab8ff; background: rgba(122,184,255,.15); }
.dark-contrast-card.dc-human .dark-contrast-icon { color: var(--gd); background: rgba(212,168,83,.15); }
.dark-contrast-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dark-contrast-label { font-size: .72rem; color: rgba(255,255,255,.65); font-weight: 600; margin-bottom: .25rem; letter-spacing: .08em; }
.dark-contrast-role { font-family: var(--fh); font-size: 1.05rem; font-weight: 700; color: var(--wh); margin-bottom: .5rem; }
.dark-contrast-list { font-size: .82rem; color: rgba(255,255,255,.85); line-height: 1.8; text-align: left; margin: 0; padding-left: 1.2rem; }
.dark-contrast-list li { margin-bottom: .2rem; }
.dark-contrast-plus { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--gd); font-weight: 700; }

/* --- 記憶定着の5つの仕掛け（v4-method.html） --- */
.retention-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .8rem;
  max-width: 1040px;
  margin: 2.2rem auto 1.5rem;
}
@media (max-width: 980px) { .retention-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .retention-grid { grid-template-columns: 1fr; } }
.retention-card {
  background: var(--wh);
  border-radius: var(--rl);
  padding: 1.4rem 1rem 1.2rem;
  box-shadow: var(--sh);
  border-top: 3px solid var(--nv);
  position: relative;
  display: flex;
  flex-direction: column;
}
.retention-card:nth-child(1) { border-top-color: var(--nv); }
.retention-card:nth-child(2) { border-top-color: var(--vr); }
.retention-card:nth-child(3) { border-top-color: var(--gdd); }
.retention-card:nth-child(4) { border-top-color: #0d9488; }
.retention-card:nth-child(5) { border-top-color: #2563eb; }
.retention-num {
  position: absolute;
  top: -14px;
  left: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--wh);
  font-family: var(--fh);
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.retention-card:nth-child(1) .retention-num { background: var(--nv); }
.retention-card:nth-child(2) .retention-num { background: var(--vr); }
.retention-card:nth-child(3) .retention-num { background: var(--gdd); }
.retention-card:nth-child(4) .retention-num { background: #0d9488; }
.retention-card:nth-child(5) .retention-num { background: #2563eb; }
.retention-time {
  font-size: .65rem;
  color: var(--tll);
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .35rem;
  margin-top: .3rem;
}
.retention-title {
  font-family: var(--fh);
  font-size: .95rem;
  font-weight: 700;
  color: var(--nv);
  margin-bottom: .5rem;
  line-height: 1.45;
}
.retention-desc {
  font-size: .76rem;
  color: var(--tl);
  line-height: 1.75;
}
.retention-bonus {
  max-width: 760px;
  margin: 1.2rem auto 0;
  padding: 1rem 1.3rem;
  background: linear-gradient(135deg, rgba(26,35,126,.05), rgba(199,62,58,.06));
  border: 1px solid rgba(26,35,126,.15);
  border-radius: var(--rl);
  font-size: .86rem;
  color: var(--tx);
  line-height: 1.85;
  text-align: center;
}
.retention-bonus strong { color: var(--vr); }

/* --- Monoxer機能詳細リスト --- */
.mono-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .8rem;
}
@media (max-width: 500px) { .mono-features { grid-template-columns: 1fr; } }
.mono-feat {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .6rem;
  background: rgba(26,35,126,.04);
  border-radius: 8px;
  font-size: .72rem;
  line-height: 1.55;
  color: var(--tx);
}
.mono-feat-ic {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--nv);
  margin-top: .15rem;
}
.mono-feat-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* --- キャンペーン：15名限定バナー（青基調・2026-04-28） --- */
.camp-limit {
  max-width: 640px;
  margin: 2rem auto 1.5rem;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #1a237e 100%);
  border: 1px solid rgba(212,168,83,.4);
  border-radius: var(--rl);
  color: var(--wh);
  text-align: center;
  box-shadow: 0 4px 18px rgba(26,35,126,.3);
  position: relative;
}
.camp-limit-badge {
  display: inline-block;
  background: var(--gd);
  color: var(--nv);
  font-size: .72rem;
  font-weight: 800;
  padding: .25rem .7rem;
  border-radius: 20px;
  letter-spacing: .1em;
  margin-bottom: .6rem;
}
.camp-limit-text {
  font-family: var(--fh);
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: .4rem;
}
.camp-limit-text strong {
  color: var(--gd);
  font-size: 1.3em;
}
.camp-limit-sub {
  font-size: .82rem;
  opacity: .95;
}

/* --- 先着10名×2枠 --- */
.camp-dual-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  max-width: 580px;
  margin: 1rem auto;
}
@media (max-width: 600px) {
  .camp-dual-slots { grid-template-columns: 1fr; }
}
.camp-slot {
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: var(--r);
  padding: .8rem .6rem;
  text-align: center;
}
.camp-slot-primary {
  background: rgba(212,168,83,.25);
  border-color: var(--gd);
}
.camp-slot-label {
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .3rem;
  opacity: .95;
}
.camp-slot-num {
  font-family: var(--fh);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .3rem;
}
.camp-slot-num strong {
  color: var(--gd);
  font-size: 1.5em;
}
.camp-slot-detail {
  font-size: .68rem;
  line-height: 1.4;
  opacity: .9;
}
.camp-upgrade {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .5rem 0 .4rem;
  padding: .5rem .4rem;
  background: rgba(0,0,0,.25);
  border-radius: var(--r);
  font-size: .68rem;
  line-height: 1.4;
}
.camp-upgrade-old {
  text-decoration: line-through;
  opacity: .7;
}
.camp-upgrade-arrow {
  color: var(--gd);
  font-weight: 800;
  font-size: 1rem;
}
.camp-upgrade-new {
  font-weight: 700;
}
.camp-upgrade-new strong {
  color: var(--gd);
  font-size: 1.05em;
}

/* --- キャンペーン：最大お得額ハイライト --- */
.camp-savings-hero {
  max-width: 640px;
  margin: 2rem auto 1rem;
  padding: 1.5rem 1.2rem;
  background: linear-gradient(135deg, #FFF8E7, #FFE9B3);
  border: 2px solid var(--gd);
  border-radius: var(--rl);
  text-align: center;
  box-shadow: 0 4px 14px rgba(212,168,83,.22);
}
.camp-savings-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gdd);
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.camp-savings-amount {
  font-family: var(--fh);
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  font-weight: 700;
  color: var(--nv);
  line-height: 1.3;
  margin-bottom: .4rem;
}
.camp-savings-num {
  font-size: 1.6em;
  color: var(--gd);
  font-weight: 900;
}
.camp-savings-sub {
  font-size: .76rem;
  color: var(--tl);
}

/* --- キャンペーン：お得額テーブル行（青基調・2026-04-28） --- */
.camp-savings-row td {
  background: linear-gradient(135deg, rgba(212,168,83,.15), rgba(212,168,83,.05)) !important;
  font-weight: 800 !important;
  color: var(--nv) !important;
  font-size: 1.02em;
  border-top: 2px solid var(--gd);
}
.camp-savings-row td:first-child {
  color: var(--nv) !important;
  background: linear-gradient(135deg, rgba(212,168,83,.22), rgba(212,168,83,.1)) !important;
}

/* --- フォトストリップ --- */
.ps { width: 100%; height: 260px; object-fit: cover; }
@media (max-width: 768px) { .ps { height: 180px; } }

/* --- 保護者の声 --- */
.vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .srj4-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .exam4-grid { grid-template-columns: 1fr !important; } }
.vc { background: var(--ws); border-radius: var(--rl); padding: 1.5rem; }
.vc-meta { font-size: .72rem; font-weight: 600; color: var(--gdd); margin-bottom: .6rem; }
.vc p { font-size: .85rem; line-height: 1.8; }

/* --- 料金表 --- */
.ptbl-wrap { overflow-x: auto; margin-bottom: 1.5rem; }
.ptbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ptbl th { background: var(--nv); color: var(--wh); padding: .7rem .8rem; font-weight: 600; text-align: center; white-space: nowrap; }
.ptbl td { padding: .7rem .8rem; text-align: center; border-bottom: 1px solid #eee; }
.ptbl .hl { background: rgba(199,62,58,.06); }
.ptbl .hl-head { background: var(--vr); }
.ptbl td strong { font-weight: 800; }
.ptbl-note { font-size: .75rem; color: var(--tll); margin-top: .5rem; line-height: 1.6; }

/* 付帯内容比較表 */
.cmp-wrap { overflow-x: auto; margin-bottom: 2rem; }
.cmp { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cmp th { background: var(--nv); color: var(--wh); padding: .6rem .8rem; font-weight: 600; text-align: center; white-space: nowrap; }
.cmp td { padding: .6rem .8rem; text-align: center; border-bottom: 1px solid #eee; vertical-align: middle; }
.cmp td:first-child { text-align: left; font-weight: 600; }
.cmp .hl { background: rgba(199,62,58,.06); }
.cmp .hl-head { background: var(--vr); }

/* --- 保証カード --- */
.gg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.gc { background: var(--wh); border-radius: var(--rl); padding: 1.5rem; text-align: center; box-shadow: var(--sh); }
.gc-num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--wh); font-size: .85rem; margin-bottom: .8rem; }
.gc-vr { background: var(--vr); }
.gc-nv { background: var(--nv); }
.gc-gd { background: var(--gd); }
.gc h4, .gc h3 { font-family: var(--fh); font-size: .95rem; font-weight: 700; color: var(--nv); margin-bottom: .4rem; }
.gc p { font-size: .8rem; line-height: 1.7; color: var(--tl); }

/* --- FAQ --- */
.fql { max-width: 640px; margin: 0 auto; }
.fqi { background: var(--wh); border-radius: var(--r); box-shadow: var(--sh); margin-bottom: .6rem; overflow: hidden; }
.fqq { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; cursor: pointer; font-size: .88rem; font-weight: 600; gap: 1rem; }
.fqq::after { content: '+'; font-size: 1.1rem; font-weight: 300; color: var(--tl); transition: transform .2s; flex-shrink: 0; }
.fqi.open .fqq::after { content: '\00d7'; transform: rotate(90deg); }
.fqa { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.fqa-in { padding: 0 1.2rem 1rem; font-size: .82rem; line-height: 1.8; color: var(--tl); }
.fqi.open .fqa { max-height: 800px; }

/* --- フロアカード --- */
.flgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.flc { background: var(--ws); border-radius: var(--rl); overflow: hidden; }
.flc img { width: 100%; height: 140px; object-fit: cover; }
.flc-b { padding: 1rem; }
.flc h4 { font-family: var(--fh); font-size: .88rem; font-weight: 700; color: var(--nv); margin-bottom: .3rem; }
.flc p { font-size: .78rem; line-height: 1.7; color: var(--tl); }

/* --- 最終CTAセクション --- */
.fnl { position: relative; padding: 5rem 1.5rem; text-align: center; color: var(--wh); overflow: hidden; }
.fnl::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.25); }
.fnl::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,35,126,.85), rgba(13,20,66,.9)); }
.fnl > * { position: relative; z-index: 2; }
.fnl .st { color: var(--wh); }
.fnl-b { font-size: .92rem; line-height: 2; color: rgba(255,255,255,.85); max-width: 500px; margin: 0 auto 2rem; }
.fnl-tel { display: inline-block; margin-top: 1.5rem; font-size: 1.1rem; font-weight: 700; color: var(--wh); }
.fnl-tel:hover { opacity: .8; }

/* --- 延岡市内の対応学校（ローカルSEO/AEO） --- */
.school-list { background: var(--nv); color: rgba(255,255,255,.85); padding: 1.8rem 1rem 1.6rem; }
.school-list-in { max-width: 1100px; margin: 0 auto; }
.school-list-title { font-family: var(--fh); font-size: 1.02rem; font-weight: 700; color: #d4a853; text-align: center; margin-bottom: .5rem; letter-spacing: .03em; }
.school-list-desc { font-size: .76rem; line-height: 1.65; opacity: .82; text-align: center; margin: 0 auto 1.2rem; max-width: 720px; }
.school-list-grid { display: grid; grid-template-columns: 1fr; gap: .9rem 1.4rem; }
@media (min-width: 720px) { .school-list-grid { grid-template-columns: repeat(2, 1fr); } }
.school-list-cat h3 { font-size: .8rem; font-weight: 700; color: #ffd56b; margin-bottom: .3rem; letter-spacing: .03em; }
.school-list-cat p { font-size: .72rem; line-height: 1.75; opacity: .82; word-break: keep-all; overflow-wrap: anywhere; }

/* --- フッター --- */
.footer { background: var(--nvd); color: rgba(255,255,255,.7); padding: 3rem 1.5rem 2rem; }
.footer-in { max-width: 800px; margin: 0 auto; }
.footer-brand { font-family: var(--fh); font-size: 1.1rem; font-weight: 800; color: var(--wh); margin-bottom: .3rem; }
.footer-sub { font-size: .72rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-bottom: 1.5rem; }
.footer-links a { font-size: .78rem; color: rgba(255,255,255,.6); }
.footer-links a:hover { color: var(--wh); }
.footer-info { font-size: .72rem; line-height: 1.8; color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.footer-copy { font-size: .65rem; color: rgba(255,255,255,.35); }

/* --- スティッキーCTA（モバイル） --- */
.sticky { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--wh); border-top: 1px solid rgba(0,0,0,.08); padding: .6rem 1rem; box-shadow: 0 -2px 12px rgba(0,0,0,.06); }
.sticky-in { display: flex; gap: .45rem; max-width: 540px; margin: 0 auto; }
.sticky .btn { flex: 1; padding: .65rem .35rem; font-size: .78rem; white-space: nowrap; }
@media (max-width: 768px) { .sticky { display: block; } body { padding-bottom: 72px; } }
@media (max-width: 380px) { .sticky-in { gap: .3rem; } .sticky .btn { padding: .65rem .25rem; font-size: .72rem; } }

/* --- 電話CTA（朱色・stickyバー用） --- */
.btn.btel { background: var(--vr); color: #fff; border-color: var(--vr); }
.btn.btel:hover { filter: brightness(1.08); }

/* --- スクロールアニメーション --- */
.fi { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.fi.vis { opacity: 1; transform: translateY(0); }

/* --- 安心メッセージ --- */
.saf { text-align: center; font-size: .82rem; color: var(--tl); border: 1px solid #eee; border-radius: var(--r); padding: 1rem 1.5rem; max-width: 500px; margin: 2rem auto 0; line-height: 1.7; }

/* --- メソッドページ用 --- */
.method-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--rl); margin-bottom: 1.5rem; }
.method-box { max-width: 700px; margin: 0 auto; }
.method-box h3 { font-family: var(--fh); font-size: 1.1rem; font-weight: 700; color: var(--nv); margin-bottom: .5rem; line-height: 1.5; display: flex; align-items: center; gap: .6rem; }
.method-box h3::before { content: ""; flex-shrink: 0; width: 6px; height: 22px; background: linear-gradient(180deg, var(--nv), var(--vr)); border-radius: 3px; }
.method-box h3 + p { margin-top: .3rem; }
.method-box p { font-size: .88rem; line-height: 1.85; color: var(--tl); margin-bottom: 1rem; }
.method-ev { background: var(--ws); border-left: 3px solid var(--gd); border-radius: var(--r); padding: 1rem 1.5rem; font-size: .8rem; line-height: 1.7; color: var(--tl); margin: 1.5rem 0; }

/* タイムライン */
.tl-wrap { max-width: 500px; margin: 0 auto; background: var(--ws); border-radius: var(--rl); padding: 1.5rem 2rem; }
.tl-item { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(0,0,0,.05); font-size: .85rem; }
.tl-item:last-child { border-bottom: none; }
.tl-time { font-weight: 700; color: var(--nv); white-space: nowrap; min-width: 50px; }
.tl-desc { color: var(--tl); }

/* --- 料金ページ用 --- */
.price-note { background: var(--ws); border-radius: var(--r); padding: 1.2rem 1.5rem; font-size: .82rem; line-height: 1.8; color: var(--tl); margin: 2rem 0; }

/* --- キャンペーンページ用（青基調・2026-04-28統一） --- */
.camp-hero { background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #1a237e 100%); color: var(--wh); padding: 4rem 1.5rem; text-align: center; border-bottom: 4px solid var(--gd); position: relative; overflow: hidden; }
.camp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(255,213,107,0.15), transparent 60%); pointer-events: none; }
.camp-hero > * { position: relative; z-index: 2; }
.camp-hero .st { color: var(--wh); font-size: clamp(1.5rem, 4vw, 2.2rem); }
.camp-hero p { color: rgba(255,255,255,.92); font-size: 1rem; }
.camp-schedule { max-width: 500px; margin: 0 auto; }
.camp-step { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--wh); border-radius: var(--r); margin-bottom: .5rem; box-shadow: var(--sh); border-left: 4px solid var(--nv); }
.camp-month { font-weight: 800; color: var(--nv); font-size: 1.1rem; min-width: 50px; }
.camp-free { font-weight: 800; color: var(--gd); }

/* --- お問い合わせフォーム --- */
.form-wrap { max-width: 600px; margin: 0 auto; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--tx); }
.form-group .req { color: var(--vr); font-size: .72rem; margin-left: .3rem; }
.form-group input,
.form-group select,
.form-group textarea { width: 100%; padding: .7rem 1rem; border: 1.5px solid #ddd; border-radius: var(--r); font-size: .88rem; font-family: var(--fb); transition: border-color .2s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--nv); }
.form-group textarea { height: 120px; resize: vertical; }
/* 教材ツール名リンク（本文中から教材紹介セクションへジャンプ） */
.tool-link {
  color: var(--nv);
  text-decoration: none;
  border-bottom: 1px dotted var(--nv);
  transition: color .15s, border-color .15s;
}
.tool-link:hover,
.tool-link:focus {
  color: var(--vr);
  border-bottom-color: var(--vr);
}

.form-check { display: flex; flex-wrap: wrap; gap: .8rem; }
.form-check label { display: flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 400; cursor: pointer; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--nv); }
.form-check.meeting-radio { flex-direction: column; flex-wrap: nowrap; gap: .55rem; align-items: stretch; }
.form-check.meeting-radio label { display: flex; align-items: center; gap: .6rem; padding: .7rem .95rem; background: #fff; border: 1px solid #e5dccc; border-radius: 8px; font-size: .92rem; transition: background .15s, border-color .15s; }
.form-check.meeting-radio label:hover { background: #fdfaf3; border-color: #1a237e; }
.form-check.meeting-radio input[type="radio"] { width: 18px; height: 18px; accent-color: var(--nv); flex-shrink: 0; margin: 0; }
.form-submit { text-align: center; margin-top: 1.5rem; }

/* 無料体験 第1〜第3希望日時 */
.trial-pref {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .5rem;
}
.trial-pref-label {
  flex: 0 0 64px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--nv);
  letter-spacing: .02em;
}
.trial-pref-fields {
  display: flex;
  gap: .5rem;
  flex: 1;
  min-width: 0;
}
.trial-pref-fields input[type="date"],
.trial-pref-fields input[type="time"] {
  flex: 1;
  min-width: 0;
  padding: .55rem .7rem;
  font-size: .85rem;
}
@media (max-width: 480px) {
  .trial-pref {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .8rem;
  }
  .trial-pref-label {
    flex: none;
  }
  .trial-pref-fields {
    width: 100%;
  }
}

/* --- Googleマップ --- */
.map-wrap { position: relative; width: 100%; border-radius: var(--rl); overflow: hidden; margin-bottom: 1.5rem; }
.map-wrap iframe { width: 100%; height: 350px; border: 0; display: block; }

/* 教室位置を目立たせるオーバーレイ（パルスマーカー＋吹き出し） */
.map-pin-overlay { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; width: 20px; height: 20px; }
.map-pin-dot { width: 20px; height: 20px; background: var(--vr); border-radius: 50%; border: 3px solid var(--wh); box-shadow: 0 2px 12px rgba(0,0,0,0.5); position: relative; z-index: 3; }
.map-pin-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 3px solid var(--vr); border-radius: 50%; animation: pinRing 2s ease-out infinite; z-index: 2; }
.map-pin-ring2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 3px solid var(--vr); border-radius: 50%; animation: pinRing 2s ease-out 0.8s infinite; z-index: 1; }
@keyframes pinRing { 0% { width: 20px; height: 20px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } }
.map-callout { position: absolute; bottom: 16px; right: 16px; z-index: 10; pointer-events: none; }
.map-callout-box { background: var(--vr); color: var(--wh); padding: 0.7rem 1.2rem; border-radius: 10px; text-align: left; box-shadow: 0 4px 20px rgba(199,62,58,0.4); pointer-events: auto; animation: calloutPulse 3s ease-in-out infinite; }
.map-callout-name { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap; }
.map-callout-addr { font-size: 0.7rem; opacity: 0.92; margin-top: 3px; line-height: 1.5; }
@keyframes calloutPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(199,62,58,0.4); } 50% { box-shadow: 0 4px 30px rgba(199,62,58,0.75); } }
@media (max-width: 600px) {
  .map-callout-box { padding: 0.45rem 0.8rem; }
  .map-callout-name { font-size: 0.72rem; }
  .map-callout-addr { font-size: 0.6rem; }
}

/* --- details/summary --- */
details { margin: 1rem 0; }
details summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--nv); padding: .5rem 0; }
details summary:hover { color: var(--vr); }

/* --- プランカード --- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.plan-card { background: var(--wh); border-radius: var(--rl); padding: 1.5rem; box-shadow: var(--sh); border-top: 3px solid var(--nv); position: relative; }
.plan-card.recommended { border-top: 3px solid var(--vr); box-shadow: var(--sl); }
.plan-card.recommended::before { content: 'おすすめ'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vr); color: var(--wh); font-size: .68rem; font-weight: 700; padding: .2rem .8rem; border-radius: 10px; }
.plan-name { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--nv); text-align: center; margin-bottom: .3rem; }
.plan-sub { font-size: .72rem; color: var(--tl); text-align: center; margin-bottom: 1rem; }
.plan-features { list-style: none; padding: 0; margin: 0; }
.plan-features li { font-size: .78rem; color: var(--tl); padding: .35rem 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; }
.plan-features li:last-child { border-bottom: none; }
.plan-features .label { color: var(--tx); font-weight: 500; }
.plan-features .value { font-weight: 600; color: var(--nv); }
.plan-note { font-size: .72rem; color: var(--tll); text-align: center; margin-top: 1.5rem; line-height: 1.7; }

/* --- プラン名ラベル（テーブル上に飛び出す） --- */
.cmp { position: relative; margin-top: 2.5rem; }
.cmp thead th { padding-top: 1.2rem; vertical-align: bottom; }
.plan-label { position: absolute; top: -1.4rem; transform: translateX(-50%); background: var(--nv); color: var(--wh); font-size: .82rem; font-weight: 700; padding: .4rem 1.2rem; border-radius: 8px 8px 0 0; white-space: nowrap; z-index: 1; }
.plan-label.recommended { background: var(--vr); }
.rec-badge { display: inline-block; background: var(--gd); color: var(--wh); font-size: .58rem; font-weight: 700; padding: .12rem .5rem; border-radius: 10px; margin-bottom: .2rem; }
.ptbl { position: relative; margin-top: 2.5rem; }
.ptbl thead th { padding-top: 1.2rem; vertical-align: bottom; }
.ptbl .plan-label { position: absolute; top: -1.4rem; }
/* テーブルヘッダー内のおすすめバッジを独立した行として表示 */
.ptbl thead th .rec-badge,
.cmp thead th .rec-badge {
  display: block;
  margin: 0 auto .35rem;
  width: fit-content;
  font-size: .62rem;
  padding: .15rem .6rem;
}
.ptbl thead th.hl-head .rec-badge,
.cmp thead th.hl-head .rec-badge {
  background: var(--gd);
  color: var(--nv);
  position: static;
  transform: none;
}
/* cmp thead th の白文字改行を許可 */
.cmp thead th { white-space: normal; line-height: 1.4; }
.cmp.unified-tbl { min-width: 560px; }

/* --- ユーティリティ --- */
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.tx-c { text-align: center; }
.tx-s { font-size: .82rem; }

/* ===================================
   料金ページ用 追加スタイル（2026-04-16）
   =================================== */

/* 諸経費・入塾金ボックス（各料金表の下に配置） */
.fee-box {
  background: var(--ws);
  border-left: 3px solid var(--gd);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0 0;
  font-size: .82rem;
  line-height: 1.85;
  color: var(--tl);
}
.fee-box .fee-title {
  font-family: var(--fh);
  font-size: .92rem;
  font-weight: 700;
  color: var(--nv);
  margin-bottom: .4rem;
}
.fee-box p { margin: 0.2rem 0; }
.fee-box strong { color: var(--tx); font-weight: 700; }

/* おすすめバッジ（テーブルヘッダから半分欄外に浮かせる） */
.cmp thead th.hl-head {
  position: relative;
  overflow: visible;
}
.cmp thead th.hl-head .rec-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vr);
  color: var(--wh);
  font-size: .72rem;
  font-weight: 800;
  padding: .35rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(199,62,58,.35);
  z-index: 2;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1.2;
}
.cmp { margin-top: 2.5rem; }

/* スマホ段ズレ対策（バッジ絶対配置で全列のヘッダ高さが揃う） */
@media (max-width: 768px) {
  .cmp { margin-top: 2.2rem; font-size: .76rem; }
  .cmp th, .cmp td { padding: .5rem .4rem; }
  .cmp thead th.hl-head .rec-badge {
    font-size: .64rem;
    padding: .25rem .7rem;
    top: -11px;
  }
  /* 項目列を固定して横スクロール時も行ラベルが見えるように */
  .cmp th:first-child,
  .cmp td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,.15);
  }
  .cmp td:first-child {
    background: var(--wh);
  }
  .cmp th:first-child {
    z-index: 2;
  }
  /* 横スクロール可能であることを示すヒント */
  .cmp-wrap {
    position: relative;
  }
  .cmp-wrap::after {
    content: "← 横にスクロールできます →";
    display: block;
    text-align: center;
    font-size: .65rem;
    color: var(--tll);
    margin-top: .3rem;
  }
}

/* 中3年間プラン カードグリッド（スマホで縦並び） */
.year-plan-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .5rem;
  align-items: center;
}
.year-plan-grid .arrow {
  font-size: 1.5rem;
  color: var(--nv);
  font-weight: 900;
  text-align: center;
}
@media (max-width: 480px) {
  .year-plan-grid {
    grid-template-columns: 1fr;
  }
  .year-plan-grid .arrow {
    transform: rotate(90deg);
    padding: .3rem 0;
  }
}

/* 中3年間プラン 横軸タイムライン（月×講習×プラン） */
.yp-card {
  margin-top: 1.5rem;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #fef2f2, #fee8e8);
  border: 2px solid var(--vr);
  border-radius: var(--rl);
  padding: 2rem 1.2rem 1.5rem;
  position: relative;
}
.yp-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--vr);
  color: var(--wh);
  font-size: .75rem;
  padding: .3rem 1.2rem;
  border-radius: 20px;
  font-weight: 700;
  white-space: nowrap;
}
.yp-title {
  font-family: var(--fh);
  font-size: 1.05rem;
  text-align: center;
  margin: .5rem 0 .6rem;
  color: var(--vr);
}
.yp-lead {
  font-size: .82rem;
  color: var(--tl);
  text-align: center;
  line-height: 1.7;
  margin-bottom: 1.3rem;
}
.yp-scroll {
  background: var(--wh);
  border-radius: 12px;
  padding: .9rem .6rem 1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.yp-timeline {
  min-width: 580px;
}
.yp-months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin-bottom: .45rem;
}
.yp-month {
  text-align: left;
  font-size: .65rem;
  color: var(--tll);
  font-weight: 600;
  padding: .1rem 0 .2rem .2rem;
  border-left: 1px dashed rgba(100,116,139,.18);
  border-bottom: 1px dashed rgba(100,116,139,.25);
}
.yp-month:first-child {
  border-left: none;
}
.yp-seasonals {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin-bottom: .4rem;
  min-height: 5.2rem;
}
.yp-seasonal {
  background: linear-gradient(135deg, var(--vr), #a83330);
  color: var(--wh);
  border-radius: 8px;
  padding: .5rem .3rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(199,62,58,.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .12rem;
}
.yp-s-label {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.yp-s-date {
  font-size: .58rem;
  opacity: .9;
  letter-spacing: .01em;
}
.yp-s-strike {
  font-size: .58rem;
  opacity: .75;
  text-decoration: line-through;
}
.yp-s-price {
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}
.yp-plans {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}
.yp-plan {
  border-radius: 6px;
  padding: .5rem .3rem;
  text-align: center;
}
.yp-plan-sub {
  background: rgba(100,116,139,.08);
  border: 1px solid rgba(100,116,139,.3);
}
.yp-plan-main {
  background: linear-gradient(135deg, rgba(26,35,126,.08), rgba(26,35,126,.15));
  border: 1.5px solid var(--nv);
}
.yp-p-period {
  font-size: .62rem;
  color: var(--tll);
  font-weight: 600;
}
.yp-plan-main .yp-p-period {
  color: var(--nv);
  font-weight: 700;
}
.yp-p-name {
  font-size: .76rem;
  font-weight: 700;
  color: var(--tx);
  margin: .1rem 0;
}
.yp-plan-main .yp-p-name {
  color: var(--nv);
}
.yp-p-price {
  font-size: .66rem;
  color: var(--tll);
}
.yp-savings {
  margin-top: .9rem;
  text-align: center;
  background: var(--nv);
  color: var(--wh);
  border-radius: 8px;
  padding: .8rem;
}
.yp-savings-amount {
  font-size: 1.2rem;
  font-weight: 900;
  margin: 0 .3rem;
}
.yp-scroll-hint {
  display: none;
  text-align: center;
  font-size: .65rem;
  color: var(--tll);
  margin-top: .4rem;
}
@media (max-width: 620px) {
  .yp-scroll-hint {
    display: block;
  }
}

/* 比較グラフ（年間プラン vs 週2フリー継続） */
.yp-compare {
  background: var(--wh);
  border-radius: 12px;
  padding: 1.3rem 1rem;
  margin-bottom: 1rem;
}
.yp-c-row {
  margin-bottom: 1.4rem;
}
.yp-c-row:last-child {
  margin-bottom: 0;
}
.yp-c-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  flex-wrap: wrap;
}
.yp-c-badge-win {
  background: var(--vr);
  color: var(--wh);
  font-size: .65rem;
  font-weight: 700;
  padding: .22rem .6rem;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.yp-c-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--tx);
  flex: 1;
  min-width: 0;
}
.yp-c-row.yp-c-win .yp-c-name {
  color: var(--vr);
}
.yp-c-total {
  font-size: 1.1rem;
  font-weight: 900;
  white-space: nowrap;
}
.yp-c-row.yp-c-win .yp-c-total {
  color: var(--vr);
}
.yp-c-row.yp-c-lose .yp-c-total {
  color: #64748b;
}
.yp-c-bar-container {
  width: 100%;
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 2px;
  box-sizing: border-box;
  margin-bottom: .55rem;
}
.yp-c-bar {
  display: flex;
  gap: 2px;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
}
.yp-c-seg {
  min-width: 0;
}
.yp-c-w2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.yp-c-w6 { background: linear-gradient(135deg, var(--nv), #1e3a8a); }
.yp-c-ks { background: linear-gradient(135deg, var(--vr), #a83330); }
.yp-c-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  font-size: .72rem;
  color: var(--tl);
  padding-left: .1rem;
}
.yp-c-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.yp-c-dot {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .yp-c-name { font-size: .76rem; }
  .yp-c-total { font-size: .98rem; }
  .yp-c-breakdown { font-size: .66rem; gap: .3rem .65rem; }
  .yp-c-bar { height: 28px; }
}

/* --- パンくずリスト（BreadcrumbList可視化・SEO対応） --- */
.bcr {
  padding: .7rem 1.5rem;
  font-size: .8rem;
  color: var(--tl);
  background: rgba(245, 240, 230, .5);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  line-height: 1.6;
}
.bcr-in {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}
.bcr a {
  color: var(--nv);
  text-decoration: none;
  transition: color .15s;
}
.bcr a:hover { color: var(--vr); text-decoration: underline; }
.bcr-sep {
  margin: 0 .15rem;
  color: var(--tll);
  opacity: .65;
  font-size: .75rem;
}
.bcr-current {
  color: var(--tx);
  font-weight: 600;
}
@media (max-width: 480px) {
  .bcr { padding: .55rem 1rem; font-size: .74rem; }
  .bcr-sep { margin: 0 .1rem; }
}

/* --- 延岡の高校受験ガイド（フッター直前・控えめテキストリンク） --- */
.local-links-mini {
  padding: 1.6rem 1.5rem 1.4rem;
  background: rgba(245, 240, 230, .35);
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.local-links-mini-title {
  font-family: var(--fh);
  font-size: .96rem;
  color: var(--nv);
  text-align: center;
  margin: 0 0 .55rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.local-links-mini-text {
  font-size: .8rem;
  color: var(--tx);
  line-height: 2.1;
  text-align: center;
  margin: 0 0 .5rem;
}
.local-links-mini-text a {
  color: var(--nv);
  text-decoration: underline;
  text-decoration-color: rgba(26, 35, 126, .3);
  text-underline-offset: 3px;
  white-space: nowrap;
  margin: 0 .35rem;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.local-links-mini-text a:hover {
  color: var(--vr);
  text-decoration-color: var(--vr);
}
.local-links-mini-note {
  font-size: .7rem;
  color: var(--tll);
  text-align: center;
  margin: 0;
  line-height: 1.75;
}
@media (max-width: 480px) {
  .local-links-mini { padding: 1.3rem 1rem 1.1rem; }
  .local-links-mini-title { font-size: .9rem; }
  .local-links-mini-text { font-size: .75rem; line-height: 2; }
  .local-links-mini-text a { margin: 0 .25rem; }
  .local-links-mini-note { font-size: .66rem; }
}

/* ============================================
   v6 再設計クラス（筋書き再設計書 v1 準拠）
   ============================================ */

/* --- コアメッセージ反復（各ページ冒頭の15-30字） --- */
.coremsg { max-width: 760px; margin: 1.2rem auto 1.6rem; padding: .9rem 1.2rem; background: linear-gradient(135deg, rgba(26,35,126,.04), rgba(212,168,83,.06)); border-left: 3px solid var(--gd); border-radius: 8px; font-family: var(--fh); font-size: .98rem; font-weight: 600; color: var(--nv); text-align: center; line-height: 1.7; letter-spacing: .01em; }
@media (max-width: 640px) { .coremsg { font-size: .9rem; padding: .8rem 1rem; } }

/* --- パンくず --- */
.brd { font-size: .82rem; color: var(--tl); margin-bottom: 1rem; padding: 0; }
.brd a { color: var(--tl); text-decoration: none; transition: color .15s; }
.brd a:hover { color: var(--vr); }
.brd .brd-cur { color: var(--nv); font-weight: 700; }
.brd .brd-sep { margin: 0 .45rem; color: var(--tll); }

/* --- ミニエピソード（トップ用：中3 自信ない→行きたい） --- */
.mini-ep { background: var(--ws); border-radius: var(--rl); padding: 1.6rem 1.4rem; max-width: 720px; margin: 2rem auto; border-left: 4px solid var(--nv); position: relative; }
.mini-ep::before { content: ''; position: absolute; top: -10px; left: 1.4rem; background: var(--nv); color: #fff; font-size: .68rem; font-weight: 800; padding: .15rem .65rem; border-radius: 12px; letter-spacing: .04em; }
.mini-ep.ep-top::before { content: '教室で起きた、ある変化'; }
.mini-ep p { font-size: .94rem; line-height: 2.05; color: var(--tx); margin-bottom: .7rem; }
.mini-ep p:last-child { margin-bottom: 0; }
.mini-ep .ep-quote { font-family: var(--fh); color: var(--nv); font-weight: 700; }
.mini-ep .ep-link { display: inline-block; margin-top: .6rem; color: var(--vr); font-weight: 700; font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--vr); padding-bottom: 1px; }
.mini-ep .ep-link:hover { color: var(--vrh); }
.mini-ep .ep-anon { font-size: .76rem; color: var(--tll); margin-top: .8rem; }

/* --- 招待カード（トップ・5枚） --- */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; max-width: 1040px; margin: 1.6rem auto 1rem; }
.inv-card { background: #fff; border-radius: var(--rl); padding: 1.5rem 1.3rem; box-shadow: var(--sh); border-top: 3px solid var(--gd); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; text-decoration: none; color: inherit; }
.inv-card:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.inv-card-tag { font-size: .68rem; letter-spacing: .08em; font-weight: 800; color: var(--vr); margin-bottom: .5rem; text-transform: uppercase; }
.inv-card h3 { font-family: var(--fh); font-size: 1.05rem; color: var(--nv); margin-bottom: .55rem; line-height: 1.5; font-weight: 800; }
.inv-card p { font-size: .85rem; color: var(--tx); line-height: 1.85; margin-bottom: .9rem; flex-grow: 1; }
.inv-card-go { font-size: .85rem; color: var(--vr); font-weight: 700; margin-top: auto; }
.inv-card-go::after { content: ' →'; }
.inv-card-1 { border-top-color: var(--nv); }
.inv-card-2 { border-top-color: var(--gd); }
.inv-card-3 { border-top-color: var(--vr); }
.inv-card-4 { border-top-color: #0d9488; }
.inv-card-5 { border-top-color: var(--ln); }

/* --- 3本柱の予告（トップ・1段落・各柱1行） --- */
.pill-preview { max-width: 760px; margin: 1.5rem auto; }
.pill-preview-list { list-style: none; padding: 0; margin: 1.2rem 0; }
.pill-preview-list li { padding: .8rem 0 .8rem 2.6rem; border-bottom: 1px solid #e9e0cb; font-size: .96rem; line-height: 1.85; color: var(--tx); position: relative; }
.pill-preview-list li:last-child { border-bottom: none; }
.pill-preview-list li::before { content: counter(pill-i); counter-increment: pill-i; position: absolute; left: 0; top: 1rem; width: 2rem; height: 2rem; background: var(--nv); color: #fff; border-radius: 50%; font-family: var(--fh); font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center; }
.pill-preview-list { counter-reset: pill-i; }
.pill-preview-list li strong { color: var(--nv); font-weight: 800; }

/* --- 共通テンプレ：保護者の悩み --- */
.worry-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 760px; margin: 1.4rem auto; }
@media (min-width: 720px) { .worry-grid { grid-template-columns: 1fr 1fr; } }
.worry-card { background: #fff; border-radius: var(--rl); padding: 1.3rem 1.2rem; border-left: 4px solid var(--vr); box-shadow: var(--sh); }
.worry-card .wq { font-family: var(--fh); font-size: .98rem; color: var(--nv); font-weight: 700; line-height: 1.65; margin-bottom: .55rem; }
.worry-card .wa { font-size: .9rem; color: var(--tx); line-height: 1.85; margin: 0; }
.worry-card .wa strong { color: var(--vr); }

/* --- 共通テンプレ：このコースの特徴（3行） --- */
.feat3 { display: grid; grid-template-columns: 1fr; gap: .8rem; max-width: 720px; margin: 1.4rem auto; }
@media (min-width: 760px) { .feat3 { grid-template-columns: repeat(3, 1fr); } }
.feat3-item { background: var(--ws); border-radius: var(--r); padding: 1.1rem 1rem; text-align: center; }
.feat3-item h4 { font-family: var(--fh); font-size: .96rem; color: var(--nv); font-weight: 800; margin-bottom: .35rem; line-height: 1.5; }
.feat3-item p { font-size: .82rem; color: var(--tx); line-height: 1.7; margin: 0; }

/* --- 関連ページへの誘導（共通テンプレ末尾） --- */
.relpages { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 760px; margin: 2rem auto 1rem; }
@media (min-width: 700px) { .relpages { grid-template-columns: repeat(3, 1fr); } }
.rel-card { background: #fff; border: 1px solid #e9e0cb; border-radius: var(--r); padding: 1rem 1.1rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; display: block; }
.rel-card:hover { border-color: var(--vr); transform: translateY(-1px); }
.rel-card .rl-l { font-size: .68rem; color: var(--tll); letter-spacing: .06em; margin-bottom: .25rem; }
.rel-card .rl-t { font-size: .92rem; font-weight: 700; color: var(--nv); }
.rel-card .rl-t::after { content: ' →'; color: var(--vr); }

/* --- 「なぜこの変化が起きたか」ブリッジ（保護者の声） --- */
.ep-bridge { font-size: .82rem; color: var(--tl); line-height: 1.8; margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed rgba(26,35,126,.18); }
.ep-bridge::before { content: 'なぜこの変化が起きたか：'; color: var(--gdd); font-weight: 800; }

/* --- 成長記録（共通） --- */
.growth-list { max-width: 800px; margin: 1.4rem auto; padding: 0; list-style: none; }
.growth-list li { background: #fff; border-radius: var(--r); padding: 1rem 1.2rem; margin-bottom: .7rem; border-left: 3px solid var(--gd); font-size: .9rem; line-height: 1.85; color: var(--tx); }
.growth-list li strong { color: var(--nv); font-weight: 800; }
.growth-list-note { font-size: .76rem; color: var(--tll); text-align: center; margin-top: .8rem; }

/* --- 1週間の例（共通） --- */
.week-table { max-width: 800px; margin: 1.4rem auto; overflow-x: auto; }
.week-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); font-size: .85rem; }
.week-table th, .week-table td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid #f0e9d8; line-height: 1.6; }
.week-table th { background: var(--ws); font-weight: 700; color: var(--nv); white-space: nowrap; min-width: 4rem; }
.week-table td { color: var(--tx); }
.week-table tr:last-child td, .week-table tr:last-child th { border-bottom: none; }
.week-table .wd-off td { color: var(--tll); font-style: italic; }

/* --- 月額料金概要表（コースページ用・短縮版） --- */
.price-mini { max-width: 760px; margin: 1.4rem auto; }
.price-mini-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.price-mini-table th, .price-mini-table td { padding: .8rem 1rem; text-align: center; border-bottom: 1px solid #f0e9d8; font-size: .9rem; }
.price-mini-table th { background: var(--nv); color: #fff; font-weight: 700; font-size: .85rem; }
.price-mini-table td:first-child { text-align: left; font-weight: 700; color: var(--nv); }
.price-mini-table tr:last-child td { border-bottom: none; }
.price-mini-table tr.recommended td { background: rgba(212,168,83,.1); }
.price-mini-note { font-size: .8rem; color: var(--tl); text-align: center; margin-top: .8rem; line-height: 1.7; }
.price-mini-link { text-align: center; margin-top: 1rem; }
.price-mini-link a { color: var(--vr); font-weight: 700; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }

/* --- 入塾までの流れ（共通） --- */
.steps { max-width: 800px; margin: 1.4rem auto; counter-reset: step-i; }
.steps-item { background: #fff; border-radius: var(--r); padding: 1.1rem 1.2rem 1.1rem 4rem; margin-bottom: .8rem; box-shadow: var(--sh); position: relative; }
.steps-item::before { content: counter(step-i); counter-increment: step-i; position: absolute; left: 1.1rem; top: 1.1rem; width: 2.2rem; height: 2.2rem; background: var(--vr); color: #fff; border-radius: 50%; font-family: var(--fh); font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; }
.steps-item h4 { font-family: var(--fh); font-size: 1rem; color: var(--nv); font-weight: 800; margin-bottom: .35rem; line-height: 1.5; }
.steps-item p { font-size: .88rem; color: var(--tx); line-height: 1.85; margin: 0; }

/* --- 教材カタログ8種（メソッド SSOT） --- */
.tools-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 1.4rem auto; }
@media (min-width: 720px) { .tools-grid { grid-template-columns: 1fr 1fr; } }
.tool-card { background: #fff; border-radius: var(--rl); padding: 1.4rem 1.3rem; box-shadow: var(--sh); border-top: 3px solid var(--nv); }
.tool-card h4 { font-family: var(--fh); font-size: 1.05rem; color: var(--nv); font-weight: 800; margin-bottom: .25rem; line-height: 1.4; }
.tool-card .tool-cat { font-size: .7rem; letter-spacing: .06em; color: var(--vr); font-weight: 700; margin-bottom: .55rem; }
.tool-card p { font-size: .88rem; color: var(--tx); line-height: 1.85; margin-bottom: .55rem; }
.tool-card .tool-meta { font-size: .78rem; color: var(--tl); margin-top: .55rem; padding-top: .55rem; border-top: 1px solid #f0e9d8; line-height: 1.7; }
.tool-card .tool-meta strong { color: var(--nv); }
.tool-card-cat-video { border-top-color: #0d9488; }
.tool-card-cat-video .tool-cat { color: #0d9488; }
.tool-card-cat-ai { border-top-color: var(--vr); }
.tool-card-cat-ai .tool-cat { color: var(--vr); }
.tool-card-cat-train { border-top-color: var(--gd); }
.tool-card-cat-train .tool-cat { color: var(--gdd); }

/* --- 1日の流れ（メソッド SSOT） --- */
.day-flow { max-width: 760px; margin: 1.4rem auto; padding: 1.4rem 1.2rem; background: #fff; border-radius: var(--rl); box-shadow: var(--sh); border-left: 4px solid var(--gd); }
.day-flow-row { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #f0e9d8; align-items: start; }
.day-flow-row:last-child { border-bottom: none; }
.day-flow-time { font-family: var(--fh); font-size: .92rem; font-weight: 800; color: var(--vr); white-space: nowrap; }
.day-flow-act { font-size: .9rem; color: var(--tx); line-height: 1.85; }
.day-flow-act strong { color: var(--nv); }

/* --- 記憶定着5仕掛け（メソッド SSOT） --- */
.retent-list { max-width: 760px; margin: 1.4rem auto; counter-reset: rt-i; padding: 0; list-style: none; }
.retent-list li { padding: .8rem 0 .8rem 3rem; border-bottom: 1px solid #e9e0cb; font-size: .92rem; line-height: 1.85; color: var(--tx); position: relative; }
.retent-list li:last-child { border-bottom: none; }
.retent-list li::before { content: counter(rt-i); counter-increment: rt-i; position: absolute; left: 0; top: 1rem; width: 2.2rem; height: 2.2rem; background: var(--gd); color: #fff; border-radius: 50%; font-family: var(--fh); font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; }
.retent-list li strong { color: var(--nv); }
.retent-family { background: rgba(212,168,83,.12); padding: 1rem 1.2rem; border-radius: var(--r); margin-top: 1rem; font-size: .9rem; line-height: 1.85; color: var(--tx); border-left: 3px solid var(--gd); }
.retent-family strong { color: var(--nv); }

/* --- 入試タイプ別サポート（高校生コース） --- */
.exam-types { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 1.4rem auto; }
@media (min-width: 700px) { .exam-types { grid-template-columns: 1fr 1fr; } }
.exam-type-card { background: #fff; border-radius: var(--rl); padding: 1.3rem 1.2rem; box-shadow: var(--sh); border-top: 3px solid var(--nv); }
.exam-type-card h4 { font-family: var(--fh); font-size: 1rem; color: var(--nv); font-weight: 800; margin-bottom: .55rem; line-height: 1.4; }
.exam-type-card p { font-size: .88rem; color: var(--tx); line-height: 1.85; margin: 0; }

/* --- 5月キャンペーン3ヶ月段階表（campaign） --- */
.cp-tier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .6rem; max-width: 860px; margin: 1.5rem auto; }
@media (max-width: 720px) { .cp-tier-grid { grid-template-columns: 1fr 1fr; } }
.cp-tier { background: #fff; border-radius: var(--r); padding: 1.1rem .8rem; text-align: center; box-shadow: var(--sh); border-top: 3px solid var(--nv); }
.cp-tier-month { font-family: var(--fh); font-size: 1rem; color: var(--nv); font-weight: 800; margin-bottom: .3rem; }
.cp-tier-rate { font-family: var(--fh); font-size: 1.4rem; font-weight: 800; color: var(--vr); line-height: 1.2; margin-bottom: .25rem; }
.cp-tier-note { font-size: .74rem; color: var(--tl); line-height: 1.55; }
.cp-tier-may { border-top-color: var(--vr); background: linear-gradient(135deg, #fff8e8, #fef3d8); }
.cp-tier-may .cp-tier-rate { color: var(--vr); font-size: 1.6rem; }
.cp-tier-aug { border-top-color: var(--tll); }
.cp-tier-aug .cp-tier-rate { color: var(--tl); font-size: 1.1rem; }

/* --- 学年別キャンペーン価格表 --- */
.cp-price-table { width: 100%; max-width: 760px; margin: 1.4rem auto; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.cp-price-table th, .cp-price-table td { padding: .7rem .8rem; text-align: center; border-bottom: 1px solid #f0e9d8; font-size: .85rem; }
.cp-price-table th { background: var(--nv); color: #fff; font-weight: 700; }
.cp-price-table td:first-child { text-align: left; font-weight: 700; color: var(--nv); }

/* --- 一般塾との対比表（料金ページ集約） --- */
.vs-table { width: 100%; max-width: 880px; margin: 1.4rem auto; border-collapse: collapse; background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); }
.vs-table th, .vs-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid #f0e9d8; font-size: .88rem; line-height: 1.7; }
.vs-table th { background: var(--ws); font-weight: 700; color: var(--nv); }
.vs-table td:first-child { font-weight: 700; color: var(--nv); }
.vs-table .vs-hero { background: rgba(212,168,83,.1); }
.vs-table .vs-hero td { color: var(--vr); font-weight: 600; }

/* --- 8段階の旅（おまけ・必要なら） --- */
.journey-strip { background: var(--ws); padding: 1rem 1.2rem; border-radius: var(--r); margin: 1.4rem auto; max-width: 760px; font-size: .82rem; color: var(--tl); line-height: 1.85; text-align: center; }

/* --- 一般共通：補助テキストエンプティ --- */
.sub-eyebrow { font-size: .72rem; letter-spacing: .08em; color: var(--tll); text-align: center; margin-bottom: .8rem; font-weight: 500; text-transform: uppercase; }

/* --- vgrid（保護者の声） --- */
.vgrid { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 960px; margin: 1.4rem auto; }
@media (min-width: 760px) { .vgrid { grid-template-columns: 1fr 1fr; } }
.vc { background: #fff; border-radius: var(--rl); padding: 1.4rem 1.3rem; box-shadow: var(--sh); border-left: 4px solid var(--nv); }
.vc-meta { font-size: .76rem; color: var(--vr); font-weight: 700; letter-spacing: .04em; margin-bottom: .55rem; }
.vc p { font-size: .9rem; color: var(--tx); line-height: 1.95; margin: 0; }

/* --- method-box（記事用） --- */
.method-box { background: #fff; border-radius: var(--rl); padding: 1.3rem 1.4rem; border-left: 4px solid var(--gd); box-shadow: var(--sh); font-size: .92rem; line-height: 1.95; color: var(--tx); }
.method-box strong { color: var(--nv); font-weight: 800; }

/* --- 3本柱グリッド（メソッド・トップ） --- */
.plgrid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; max-width: 960px; margin: 1.5rem auto; }
@media (min-width: 760px) { .plgrid { grid-template-columns: repeat(3, 1fr); } }
.plc { background: #fff; border-radius: var(--rl); overflow: hidden; box-shadow: var(--sh); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.plc:hover { transform: translateY(-3px); box-shadow: var(--sl); }
.pli { width: 100%; height: 180px; object-fit: cover; }
.plb { padding: 1.4rem 1.3rem; flex-grow: 1; display: flex; flex-direction: column; }
.pln { font-family: var(--fh); font-size: .76rem; letter-spacing: .08em; color: var(--vr); font-weight: 800; margin-bottom: .55rem; text-transform: uppercase; }
.plt { font-family: var(--fh); font-size: 1.05rem; color: var(--nv); font-weight: 800; line-height: 1.5; margin-bottom: .55rem; }
.pltx { font-size: .88rem; color: var(--tx); line-height: 1.85; margin-bottom: .8rem; flex-grow: 1; }
.pll { font-size: .85rem; color: var(--vr); font-weight: 700; text-decoration: none; margin-top: auto; }
.pll:hover { color: var(--vrh); }

/* --- 悩みカード（トップ用・既存） --- */
.pgrid { display: grid; grid-template-columns: 1fr; gap: .9rem; max-width: 760px; margin: 1.4rem auto; }
@media (min-width: 700px) { .pgrid { grid-template-columns: 1fr 1fr; } }
.pcard { background: #fff; border-radius: var(--r); padding: 1.1rem 1.1rem 1.1rem 3rem; box-shadow: var(--sh); position: relative; font-size: .9rem; line-height: 1.85; color: var(--tx); }
.pcard-icon { position: absolute; left: 1rem; top: 1.1rem; width: 1.5rem; height: 1.5rem; color: var(--vr); }
.pcard-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --- bridge ブロック（悩み→解決の橋渡し） --- */
.bridge { max-width: 720px; margin: 1.6rem auto; padding: 1.2rem 1.3rem; background: rgba(212,168,83,.08); border-left: 4px solid var(--gd); border-radius: var(--r); }
.bridge p { font-size: .92rem; line-height: 1.95; color: var(--tx); margin-bottom: .55rem; }
.bridge p:last-child { margin-bottom: 0; }

/* --- 最終CTA（fnl） --- */
.fnl { position: relative; padding: 4rem 1.5rem; text-align: center; color: var(--wh); overflow: hidden; }
.fnl > .ctn { position: relative; z-index: 2; }
.fnl-b { max-width: 600px; margin: 0 auto 1.5rem; }
.fnl-b p { color: rgba(255,255,255,.95); font-size: .95rem; line-height: 1.95; margin-bottom: .55rem; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.fnl-tel { display: inline-block; margin-top: 1.4rem; color: var(--wh); font-family: var(--fh); font-size: 1.3rem; font-weight: 800; text-decoration: none; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* --- footer --- */
.footer { background: var(--nvd); color: rgba(255,255,255,.85); padding: 3rem 1.5rem 2rem; }
.footer-in { max-width: 1040px; margin: 0 auto; text-align: center; }
.footer-brand { font-family: var(--fh); font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: .2rem; }
.footer-sub { font-size: .8rem; color: rgba(255,255,255,.6); margin-bottom: 1.5rem; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-links a { color: rgba(255,255,255,.85); font-size: .8rem; text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #fff; }
.footer-info { font-size: .78rem; line-height: 1.95; color: rgba(255,255,255,.7); margin-bottom: 1.2rem; }
.footer-copy { font-size: .72rem; color: rgba(255,255,255,.5); }

/* --- スティッキーCTA（モバイル） --- */
.sticky { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid rgba(0,0,0,.08); padding: .55rem .8rem; z-index: 90; box-shadow: 0 -4px 12px rgba(0,0,0,.08); }
.sticky-in { display: flex; gap: .5rem; max-width: 600px; margin: 0 auto; }
.sticky .btn { flex: 1; padding: .65rem .5rem; font-size: .82rem; }
.sticky .btel { background: var(--nv); color: #fff; }
.sticky .btel:hover { background: var(--nvl); }
@media (min-width: 769px) { .sticky { display: none; } }

/* --- 小さい補助 --- */
.tool-link { color: var(--vr); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.tool-link:hover { color: var(--vrh); }

/* --- FAQ --- */
.fqi { background: #fff; border-radius: var(--r); margin-bottom: .7rem; box-shadow: var(--sh); overflow: hidden; }
.fqq { padding: 1rem 3rem 1rem 1.2rem; cursor: pointer; font-weight: 700; color: var(--nv); position: relative; font-size: .95rem; line-height: 1.65; }
.fqq::after { content: '+'; position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--vr); transition: transform .2s; }
.fqi.open .fqq::after { transform: translateY(-50%) rotate(45deg); }
.fqa { padding: 0 1.2rem; max-height: 0; overflow: hidden; transition: max-height .3s, padding .2s; font-size: .9rem; line-height: 1.95; color: var(--tx); }
.fqi.open .fqa { padding: 0 1.2rem 1.1rem; max-height: 1000px; }
.fqa p { margin-bottom: .55rem; }
.fqa p:last-child { margin-bottom: 0; }
.fq-cat { max-width: 760px; margin: 1.6rem auto 0; }
.fq-cat-title { font-family: var(--fh); font-size: 1rem; color: var(--nv); font-weight: 800; margin-bottom: .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--gd); }

/* --- 保証カード（guarantee） --- */
.guar-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; max-width: 880px; margin: 1.5rem auto; }
@media (min-width: 760px) { .guar-grid { grid-template-columns: repeat(3, 1fr); } }
.guar-card { background: #fff; border-radius: var(--rl); padding: 1.5rem 1.4rem; box-shadow: var(--sh); border-top: 3px solid var(--vr); display: flex; flex-direction: column; }
.guar-card h3 { font-family: var(--fh); font-size: 1.05rem; color: var(--nv); font-weight: 800; margin-bottom: .55rem; line-height: 1.5; }
.guar-card .guar-tag { display: inline-block; background: var(--vr); color: #fff; font-size: .68rem; font-weight: 800; padding: .15rem .6rem; border-radius: 12px; letter-spacing: .04em; margin-bottom: .8rem; align-self: flex-start; }
.guar-card p { font-size: .88rem; color: var(--tx); line-height: 1.85; margin-bottom: .55rem; }
.guar-card .guar-cond { font-size: .76rem; color: var(--tl); margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed #e9e0cb; line-height: 1.7; }

/* --- フォーム --- */
.form-wrap { max-width: 600px; margin: 1.4rem auto; background: #fff; border-radius: var(--rl); padding: 1.8rem 1.6rem; box-shadow: var(--sh); }
.form-row { margin-bottom: 1.1rem; }
.form-row label { display: block; font-size: .85rem; font-weight: 700; color: var(--nv); margin-bottom: .35rem; }
.form-row label .req { color: var(--vr); margin-left: .25rem; font-size: .76rem; }
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea { width: 100%; padding: .7rem .9rem; border: 1.5px solid #e0d8c2; border-radius: var(--r); font-size: .95rem; font-family: var(--fb); color: var(--tx); background: #fff; transition: border-color .15s; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--vr); }
.form-row textarea { min-height: 100px; resize: vertical; }
.form-submit { background: var(--vr); color: #fff; font-weight: 800; padding: .9rem 2rem; border: none; border-radius: var(--r); font-size: .95rem; cursor: pointer; width: 100%; transition: background .15s; }
.form-submit:hover { background: var(--vrh); }
.form-note { font-size: .8rem; color: var(--tl); text-align: center; line-height: 1.85; margin-top: 1rem; }

@media (max-width: 640px) {
  .inv-grid { grid-template-columns: 1fr; gap: .9rem; }
  .day-flow-row { grid-template-columns: 4rem 1fr; }
  .pli { height: 160px; }
}

/* ============================================================ */
/* Week3 改善：ナビゲーション CTA 強化 + 中学生コース強調 */
/* ============================================================ */

/* 無料体験 CTA ボタン化（独立感を強化） */
.nc {
  background: var(--vr) !important;
  color: var(--wh) !important;
  padding: .55rem 1.1rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  margin-left: .35rem !important;
  box-shadow: 0 2px 6px rgba(199, 62, 58, .25) !important;
  transition: all .18s ease;
}
.nc:hover {
  background: var(--vrh) !important;
  box-shadow: 0 4px 10px rgba(199, 62, 58, .35) !important;
  transform: translateY(-1px);
}

/* コースドロップダウン内 中学生コース最上位強調 */
.dd-menu a.dd-pri {
  font-weight: 800 !important;
  color: var(--vr) !important;
  background: #fff8e8 !important;
  border-bottom: 1px solid #f0e6c8 !important;
  padding-bottom: .55rem !important;
  margin-bottom: .25rem !important;
}
.dd-menu a.dd-pri::after {
  content: " ★";
  font-size: .8em;
  color: var(--gd);
  margin-left: .15rem;
}
.dd-menu a.dd-pri:hover {
  background: #fff0d6 !important;
  color: var(--vrh) !important;
}

/* ============================================================ */
/* Phase B+ 全面刷新：Layer 1-2 ビジュアル＆コンポーネント */
/* ============================================================ */

/* ----- 1. Klee One 教育系フォント（見出し・引用に使用） ----- */
.coremsg, .hero-main, .ep-quote, .st, .sub-eyebrow, .pln, .plt {
  font-family: 'Klee One', 'Shippori Mincho', 'Noto Serif JP', serif;
  letter-spacing: .02em;
}
.hero-main { font-weight: 600; }

/* ----- 2. 招待カード5枚 強化（ホバー・タグ色分け・微シャドウ） ----- */
.inv-card {
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
  position: relative;
  overflow: hidden;
}
.inv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--card-accent, var(--nv));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.inv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}
.inv-card:hover::before { transform: scaleX(1); }
.inv-card-1 { --card-accent: var(--nv); }
.inv-card-2 { --card-accent: var(--gd); }
.inv-card-3 { --card-accent: var(--vr); }
.inv-card-4 { --card-accent: #0d9488; }
.inv-card-5 { --card-accent: var(--ln, #006b20); }

/* タグの色分けでカード差別化 */
.inv-card-tag {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .03em;
  margin-bottom: .8rem;
}
.inv-card-1 .inv-card-tag { background: rgba(26,35,126,.1); color: var(--nv); }
.inv-card-2 .inv-card-tag { background: rgba(212,168,83,.18); color: #b8830f; }
.inv-card-3 .inv-card-tag { background: rgba(199,62,58,.1); color: var(--vr); }
.inv-card-4 .inv-card-tag { background: rgba(13,148,136,.12); color: #0d9488; }
.inv-card-5 .inv-card-tag { background: rgba(0,107,32,.1); color: var(--ln, #006b20); }

/* go ボタン部分の矢印アニメ */
.inv-card-go {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 700;
  color: var(--card-accent, var(--nv));
  margin-top: .9rem;
  transition: transform .25s ease, gap .25s ease;
}
.inv-card-go::after {
  content: '→';
  font-weight: 700;
  transition: transform .25s ease;
}
.inv-card:hover .inv-card-go::after { transform: translateX(4px); }

/* ----- 3. ボタン全体の微強化（btn 系統） ----- */
.btn {
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, background .18s ease;
}
.btn.bp:hover, .btn.bo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(199, 62, 58, .3);
}
.btn.bl:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(6, 199, 85, .25);
}
.btn.bw:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}

/* ----- 4. 招待カード hero 装飾（カードに対応する hero 画像をうっすら） ----- */
.inv-card { background-position: center; background-size: cover; background-repeat: no-repeat; }
/* 通常時：白レイヤー 78-85% で画像が約 15-22% うっすら透ける */
.inv-card-1 { background-image: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.85) 100%), url('hero-engine.webp'); }
.inv-card-2 { background-image: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.85) 100%), url('hero-method.webp'); }
.inv-card-3 { background-image: linear-gradient(135deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.84) 100%), url('hero-junior.webp'); }
.inv-card-4 { background-image: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.85) 100%), url('hero-home.webp'); }
.inv-card-5 { background-image: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.85) 100%), url('hero-parents.webp'); }
/* hover 時：白レイヤー 60-70% で画像をさらに強調 */
.inv-card-1:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.72) 100%), url('hero-engine.webp'); }
.inv-card-2:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.72) 100%), url('hero-method.webp'); }
.inv-card-3:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.70) 100%), url('hero-junior.webp'); }
.inv-card-4:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.72) 100%), url('hero-home.webp'); }
.inv-card-5:hover { background-image: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.72) 100%), url('hero-parents.webp'); }

/* ----- 5. 微マイクロインタラクション ----- */
.btn, .inv-card, .nc, .vc, .feat3-item, .method-box, .rel-card {
  will-change: transform;
}

/* セクションのフェードイン強化 */
@media (prefers-reduced-motion: no-preference) {
  .fi { animation: fadeUp .6s ease both; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* リンク全体の hover 強化 */
a:not(.btn):not(.nc):not(.dd-menu a):not(.inv-card):not(.rel-card):not(.tool-link) {
  transition: color .18s ease;
}

/* 関連ページカード（rel-card）の hover */
.rel-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }

/* method-box の hover 微強化 */
.method-box {
  transition: box-shadow .25s ease;
}
.method-box:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* vc（保護者の声カード）の hover */
.vc {
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.vc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,.1);
}

/* ----- 6. 教室写真ギャラリー（v6-access.html section 2） ----- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  max-width: 920px;
  margin: 1.8rem auto 0;
}
.photo-card {
  margin: 0;
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  background: #fff;
}
.photo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.15);
}
.photo-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.photo-card:hover img {
  transform: scale(1.04);
}
.photo-card figcaption {
  padding: .6rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--nv);
  background: var(--ws);
  font-family: 'Klee One', 'Shippori Mincho', serif;
  letter-spacing: .02em;
}
@media (max-width: 480px) {
  .photo-gallery { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .photo-card img { height: 130px; }
  .photo-card figcaption { font-size: .72rem; padding: .4rem .55rem; }
}

/* ============================================================ */
/* Phase B++ コノ塾流デザイン言語：装飾モチーフ + ユーティリティ */
/* ============================================================ */

/* ----- 1. ハイライトマーカー（gold うっすら手書き風） ----- */
.highlight {
  position: relative;
  display: inline;
}
.highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -.05em;
  left: -.15em;
  width: calc(100% + .25em);
  height: .65em;
  border-radius: 2px;
  opacity: .55;
  background-color: var(--hl-marker);
}
.highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -.05em;
  right: -.18em;
  width: .55em;
  height: .65em;
  transform: rotate(5deg);
  border-radius: 20%;
  background-image: linear-gradient(90deg, rgba(250,237,200,0), var(--hl-marker) 94%, var(--hl-marker));
}

/* ----- 2. 二重赤アンダーライン（vermillion 手書き感） ----- */
.underline {
  position: relative;
  display: inline-block;
}
.underline::before, .underline::after {
  content: "";
  position: absolute;
  border-radius: 0 20% 20% 0;
  opacity: .75;
  background: var(--vr-700);
}
.underline::before {
  bottom: 2px;
  left: 0;
  width: 103%;
  height: 1.8px;
  transform: rotate(359.7deg);
}
.underline::after {
  bottom: -1.5px;
  left: -2px;
  width: 105%;
  height: 2.4px;
  transform: rotate(179.6deg);
}

/* ----- 3. 数字強調（Outfit フォント・欧文で目立たせる） ----- */
.num-emp {
  font-family: var(--fn);
  font-weight: 900;
  font-size: 1.18em;
  letter-spacing: -.01em;
  color: inherit;
  display: inline-block;
  line-height: 1;
}

/* ----- 4. ¥0 バッジ（赤の小要素・心理的ハードル下げ） ----- */
.zero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  margin-right: .35rem;
  border-radius: 4px;
  background-color: var(--vr-700);
  color: #fff;
  font-size: .82em;
  font-weight: 800;
  font-family: var(--fn);
  letter-spacing: -.02em;
  font-style: normal;
  vertical-align: middle;
  line-height: 1;
}

/* ----- 5. ピル型ボタン（完全楕円化・コノ塾流） ----- */
.btn.pill, .pill-btn, a.btn.bp, a.btn.bo, a.btn.bw, a.btn.bl {
  border-radius: 999em !important;
}

/* ピル型ボタンの押し込み感（hover で 2px 沈んで shadow なし） */
.btn.pill:hover, .pill-btn:hover {
  transform: translateY(2px);
  box-shadow: none;
}

/* ----- 6. ドットグリッド背景（極薄ベージュで方眼紙感） ----- */
.grid-bg {
  background-image:
    linear-gradient(rgba(245, 240, 230, 1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 240, 230, 1) 1px, transparent 1px);
  background-position: -10px -10px;
  background-size: 20px 20px;
}

/* ----- 7. 日本語タイポグラフィ強化（コノ塾流） ----- */
body {
  text-rendering: optimizeLegibility;
  hanging-punctuation: first allow-end last;
  word-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----- 8. Klee One を見出しに、本文は今までどおり ----- */
.coremsg, .hero-main, .ep-quote, .st, .sub-eyebrow, .pln, .plt {
  /* 既存セレクタの上書き（Klee One ＋ 字間調整） */
  letter-spacing: .025em;
}

/* ============================================================ */
/* Phase C：学ぶ生徒キャラクター画像 (Hero's Journey 視覚化)       */
/* ============================================================ */

.student-img-wrap {
  display: block;
  margin: 1.8rem auto;
  text-align: center;
}
.student-img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(26, 35, 126, 0.08);
}
.student-img--sm { max-width: 200px; }
.student-img--md { max-width: 240px; }
.student-img--lg { max-width: 320px; }

/* ヒーロー内の場合は背景透明に馴染ませる（淡く） */
.hero .student-img,
.page-hero .student-img,
.fnl .student-img {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* PC で「文章左・画像右」レイアウトする場合用 */
@media (min-width: 768px) {
  .student-img-wrap--side {
    float: right;
    margin: 0 0 1.2rem 1.6rem;
    max-width: 280px;
  }
  .student-img-wrap--side .student-img { max-width: 280px; }
}

/* モバイルではすべて中央寄せ */
@media (max-width: 767px) {
  .student-img-wrap {
    margin: 1.4rem auto;
  }
  .student-img {
    max-width: 220px;
  }
}