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

/* --- CSS変数 --- */
:root {
  --nv: #1A237E;
  --nvl: #283593;
  --nvd: #0D1442;
  --vr: #C73E3A;
  --vrh: #A83230;
  --gd: #D4A853;
  --gdd: #B8923F;
  --ws: #F5F0E6;
  --tx: #2C2C2C;
  --tl: #666;
  --tll: #999;
  --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);
  --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;
}

/* --- リセット --- */
*, *::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); }

/* --- タイポグラフィ --- */
.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,.6); }

/* --- キャンペーンバー --- */
.camp { background: var(--vr); 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; }

/* --- ヘッダー --- */
.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; }
.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 { color: var(--wh); font-family: var(--fh); font-size: 1rem; margin: 1.5rem 0 .5rem; }
.mdr ul { list-style: none; }
.mdr li a { display: block; padding: .5rem 0; color: rgba(255,255,255,.8); 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: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.5); }
.hero-c { position: relative; z-index: 2; text-align: center; color: var(--wh); padding: 3rem 1.5rem; max-width: 700px; }
.hero-main { font-family: var(--fh); font-size: clamp(1.9rem, 5.4vw, 2.8rem); font-weight: 800; line-height: 1.5; margin-bottom: 1rem; text-shadow: 0 2px 16px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.8); }
.hero-sub { font-size: clamp(.88rem, 2vw, 1rem); line-height: 1.8; color: rgba(255,255,255,.92); margin-bottom: 1.8rem; font-weight: 400; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
.hbadges { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; }
.hb { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: .4rem 1rem; border-radius: 20px; font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.9); }
.htrust { margin-top: 1.5rem; font-size: .75rem; color: rgba(255,255,255,.6); }

/* サブページヒーロー */
.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,.8); 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カテゴリ見出し --- */
.fq-cat {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 2.4rem 0 1rem;
  padding: .6rem 1rem;
  background: linear-gradient(90deg, rgba(26,35,126,.06), transparent);
  border-left: 4px solid var(--nv);
  border-radius: 4px;
}
.fq-cat:first-of-type { margin-top: 0; }
.fq-cat-icon { width: 28px; height: 28px; color: var(--nv); }
.fq-cat-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fq-cat-text { font-family: var(--fh); font-size: 1rem; font-weight: 700; color: var(--nv); }
.fq-cat-count { font-size: .72rem; color: var(--tll); margin-left: auto; font-weight: 600; }

/* --- 入塾までの流れ（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名限定バナー --- */
.camp-limit {
  max-width: 640px;
  margin: 2rem auto 1.5rem;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, var(--vr), #a83230);
  border-radius: var(--rl);
  color: var(--wh);
  text-align: center;
  box-shadow: 0 4px 18px rgba(199,62,58,.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(--vr);
  font-weight: 900;
}
.camp-savings-sub {
  font-size: .76rem;
  color: var(--tl);
}

/* --- キャンペーン：お得額テーブル行 --- */
.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(--vr) !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 { 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: 300px; }

/* --- フロアカード --- */
.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; }

/* --- フッター --- */
.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; }
.sticky-in { display: flex; gap: .5rem; max-width: 500px; margin: 0 auto; }
.sticky .btn { flex: 1; padding: .65rem .5rem; font-size: .8rem; }
@media (max-width: 768px) { .sticky { display: block; } body { padding-bottom: 70px; } }

/* --- スクロールアニメーション --- */
.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; }

/* --- キャンペーンページ用 --- */
.camp-hero { background: var(--vr); color: var(--wh); padding: 4rem 1.5rem; text-align: center; }
.camp-hero .st { color: var(--wh); font-size: clamp(1.5rem, 4vw, 2.2rem); }
.camp-hero p { color: rgba(255,255,255,.85); 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); }
.camp-month { font-weight: 800; color: var(--vr); font-size: 1.1rem; min-width: 50px; }
.camp-free { font-weight: 800; color: var(--vr); }

/* --- お問い合わせフォーム --- */
.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-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; }
}