/* ============================================
   bridge★ LP v11.0 — 日本LP UX/UI最適化版
   モバイルファースト / 高視認性 / メリハリ重視
   
   ■ 設計方針（日本LPプロ基準）
   ・本文 17px（日本語スマホ最適値、16px以下は離脱率増）
   ・見出しは40px〜 で本文との差を2.3倍以上に
   ・サブ見出し 22px〜 で中間層を作りメリハリ確保
   ・行間 本文1.95 / カード内1.85〜1.9（漢字・ひらがな混在最適）
   ・補助テキスト（ラベル・注記）最低14px
   ・セクション余白 108px（モバイル）、140px（デスクトップ）
   ・カード内padding を潤沢に（36px〜）
   ・ボタン文字 18px〜（タップ領域含め十分な大きさ）
   ============================================ */

/* === VARIABLES === */
:root {
    /* Primary */
    --navy: #1a2f5a;
    --navy-dark: #0d1b3e;
    --blue: #2563eb;
    --blue-light: #3b82f6;
    --sky: #e8f4fd;
    --sky-deep: #dbeafe;

    /* Accent */
    --orange: #f97316;
    --orange-dark: #ea580c;
    --orange-light: #fff7ed;
    --yellow: #facc15;
    --yellow-light: #fef9c3;
    --red: #ef4444;
    --red-light: #fef2f2;
    --green: #06C755;
    --green-dark: #05a647;
    --purple: #7c3aed;

    /* Neutral */
    --white: #ffffff;
    --offwhite: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-500: #64748b;
    --gray-700: #334155;
    --gray-900: #0f172a;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
    --shadow-color: 0 4px 16px rgba(37,99,235,0.15);

    /* Radius */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;

    /* Font */
    --font: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
    --font-accent: 'Poppins', 'Noto Sans JP', sans-serif;
}

/* === RESET === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    color: var(--gray-700);
    line-height: 1.95;
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    padding-bottom: 92px;
    font-size: 17px;
    letter-spacing: 0.02em;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: all .25s ease; }
.container { max-width: 540px; margin: 0 auto; padding: 0 28px; }
.center { text-align: center; }


/* ============================
   BACKGROUNDS — セクション色切替
   ============================ */
.bg-white       { background: var(--white); }
.bg-offwhite    { background: var(--offwhite); }
.bg-lightblue   { background: var(--sky); }
.bg-lightorange { background: var(--orange-light); }
.bg-navy        { background: linear-gradient(180deg, var(--navy-dark), var(--navy)); }
.bg-blue        { background: linear-gradient(135deg, var(--blue), #1d4ed8); }
.bg-gradient-blue { background: linear-gradient(180deg, var(--navy-dark) 0%, #162652 100%); }
.bg-dark-gradient { background: linear-gradient(180deg, #1e3a5f 0%, #2a5298 100%); }
.bg-bright-gradient { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%); }
.bg-bright-cta  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }


/* ============================
   WAVE DECORATIONS — 波形区切り
   ============================ */
.wave-top, .wave-bottom {
    position: relative; width: 100%; overflow: hidden;
    line-height: 0;
}
.wave-top { margin-top: -1px; }
.wave-bottom { margin-bottom: -1px; }
.wave-top svg, .wave-bottom svg { width: 100%; height: 50px; display: block; }
.wave-white     { color: var(--white); }
.wave-offwhite  { color: var(--offwhite); }
.wave-lightblue { color: var(--sky); }
.wave-lightorange { color: var(--orange-light); }
.wave-navy      { color: var(--navy-dark); }
.wave-dark      { color: #1e3a5f; }
.wave-blue      { color: var(--blue); }


/* ============================
   HEADER
   ============================ */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--white);
    padding: 14px 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.header-inner {
    max-width: 540px; margin: 0 auto; padding: 0 28px;
    display: flex; justify-content: space-between; align-items: center;
}
.logo {
    font-family: var(--font-accent);
    font-size: 30px; font-weight: 800; color: var(--navy);
}
.logo span { color: var(--orange); }
.header-line-btn {
    display: flex; align-items: center; gap: 8px;
    background: var(--green); color: var(--white);
    padding: 13px 26px; border-radius: 50px;
    font-size: 16px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(6,199,85,0.3);
    white-space: nowrap;
}
.header-line-btn:hover { background: var(--green-dark); transform: translateY(-1px); }


/* ============================
   FIXED CTA BAR
   ============================ */
.fixed-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: var(--white); padding: 14px 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
    transform: translateY(100%); transition: transform .3s ease;
}
.fixed-cta.visible { transform: translateY(0); }
.fixed-cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--green); color: var(--white);
    padding: 20px; border-radius: 50px;
    font-size: 17px; font-weight: 700;
    max-width: 540px; margin: 0 auto;
    box-shadow: 0 4px 16px rgba(6,199,85,0.4);
    white-space: nowrap;
}
.fixed-cta-btn i { font-size: 26px; }


/* ============================
   HERO — ファーストビュー
   ============================ */
.hero {
    position: relative;
    background: linear-gradient(135deg, #fff8f0 0%, #fef3e2 30%, var(--sky) 100%);
    padding-top: 72px;
    overflow: hidden;
}
.hero-inner {
    max-width: 540px; margin: 0 auto; padding: 0 28px;
}
.hero-photo {
    margin: 0 -28px;
    overflow: hidden;
}
.hero-photo img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    object-position: top center;
}
.hero-text {
    padding: 40px 0 72px;
    text-align: center;
}
.hero-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--red); color: var(--white);
    padding: 11px 26px; border-radius: 50px;
    font-size: 15px; font-weight: 700;
    margin-bottom: 32px;
    animation: fadeInDown .5s ease;
    white-space: nowrap;
}
.hero-text h1 {
    font-size: 40px; font-weight: 900;
    color: var(--gray-900);
    line-height: 1.55;
    letter-spacing: -0.02em;
    animation: fadeInUp .5s ease .15s both;
}
.hero-em {
    color: var(--red);
    background: linear-gradient(transparent 60%, rgba(239,68,68,0.2) 60%);
    padding: 0 4px;
}
.hero-sub {
    font-size: 22px; color: var(--gray-500);
    margin-top: 28px; line-height: 2;
    animation: fadeInUp .5s ease .3s both;
}

/* Hero Trust Bar */
.hero-trust {
    display: flex; justify-content: center; align-items: center; gap: 18px;
    margin: 36px 0 8px;
    padding: 22px;
    background: var(--white);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    animation: fadeInUp .5s ease .35s both;
}
.hero-trust-item { text-align: center; flex: 1; }
.hero-trust-num {
    font-family: var(--font-accent);
    font-size: 38px; font-weight: 900; color: var(--blue);
    line-height: 1;
}
.hero-trust-unit {
    font-family: var(--font-accent);
    font-size: 17px; font-weight: 700; color: var(--blue);
}
.hero-trust-label {
    display: block; font-size: 15px; font-weight: 700; color: var(--blue); margin-top: 4px;
    letter-spacing: 0.5px;
}
.hero-trust-divider {
    width: 1px; height: 40px; background: var(--gray-200); flex-shrink: 0;
}

.hero-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 32px;
    color: var(--blue);
    font-size: 19px; font-weight: 700;
    animation: fadeInUp .5s ease .45s both;
}
.hero-cta i { animation: bounce 1.5s infinite; }
.hero-cta:hover { color: var(--orange); }


/* ============================
   SECTION COMMON
   ============================ */
.section { padding: 108px 0; position: relative; }

/* Labels — セクションラベル */
.label {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 14px; font-weight: 800; letter-spacing: 3px;
    padding: 9px 24px; border-radius: 50px;
    margin-bottom: 20px;
}
.label-red    { background: var(--red-light); color: var(--red); }
.label-blue   { background: var(--sky-deep); color: var(--blue); }
.label-orange { background: #fff2e0; color: var(--orange); }
.label-yellow { background: rgba(250,204,21,0.2); color: #b45309; }

/* Headings — 見出し（メリハリの鍵） */
.heading-xl {
    font-size: 36px; font-weight: 900;
    color: var(--gray-900);
    line-height: 1.55;
    text-align: center; margin-bottom: 24px;
    letter-spacing: -0.03em;
}
.heading-xl.white { color: var(--white); }
.heading-lg {
    font-size: 32px; font-weight: 900;
    color: var(--gray-900);
    line-height: 1.6;
    text-align: center; margin-bottom: 24px;
    letter-spacing: -0.02em;
}
.sub-text {
    text-align: center; font-size: 19px;
    color: var(--gray-500); margin-bottom: 48px;
    line-height: 1.9;
}
.sub-heading {
    font-size: 24px; font-weight: 800; color: var(--gray-900);
    text-align: center; margin: 44px 0 28px;
}

/* Markers — 多色ハイライト */
.red-marker {
    background: linear-gradient(transparent 55%, rgba(239,68,68,0.25) 55%);
    font-weight: 900; color: var(--red);
}
.blue-marker {
    background: linear-gradient(transparent 55%, rgba(37,99,235,0.2) 55%);
    font-weight: 900; color: var(--blue);
}
.orange-marker {
    background: linear-gradient(transparent 55%, rgba(249,115,22,0.25) 55%);
    font-weight: 900; color: var(--orange);
}
.yellow-marker {
    background: linear-gradient(transparent 55%, rgba(250,204,21,0.35) 55%);
    font-weight: 900;
}

/* Color text */
.red-text    { color: var(--red) !important; }
.blue-text   { color: var(--blue) !important; }
.orange-text { color: var(--orange) !important; }
.yellow-text { color: var(--yellow) !important; }
.green-text  { color: var(--green) !important; }
.white       { color: var(--white) !important; }
.red-big {
    color: var(--red); font-size: 130%; font-weight: 900;
}
.hl-yellow { color: var(--yellow); }


/* ============================
   SHOCK — 衝撃の数字
   ============================ */
.stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin: 40px 0;
}
.stat-card {
    background: var(--white); border-radius: var(--r-md);
    padding: 36px 18px; text-align: center;
    box-shadow: var(--shadow-md);
}
.stat-card-red { border-top: 5px solid var(--red); }
.stat-num {
    font-family: var(--font-accent);
    font-size: 54px; font-weight: 900;
    color: var(--red); line-height: 1.1; margin-bottom: 14px;
}
.stat-num small { font-size: 24px; font-weight: 700; }
.stat-card p { font-size: 17px; line-height: 1.8; }
.stat-card strong { color: var(--gray-900); }

/* Fact Detail - Progress Bar */
.fact-detail {
    background: var(--offwhite);
    border-radius: var(--r-md);
    padding: 36px 28px;
    margin: 36px 0;
}
.fact-detail h3 {
    font-size: 20px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 28px; text-align: center;
}
.fact-detail h3 i { color: var(--blue); margin-right: 8px; }
.fact-compare { display: flex; flex-direction: column; gap: 20px; }
.fact-row { display: flex; align-items: center; gap: 14px; }
.fact-label {
    font-size: 15px; font-weight: 700; color: var(--gray-700);
    min-width: 68px; text-align: right;
}
.fact-bar {
    flex: 1; background: var(--gray-200); border-radius: 8px; height: 44px;
    overflow: hidden; position: relative;
}
.fact-fill {
    height: 100%; border-radius: 8px;
    display: flex; align-items: center; padding: 0 14px;
    transition: width 1.5s ease;
}
.fact-fill span { font-size: 14px; font-weight: 700; color: var(--white); white-space: nowrap; }
.fact-fill-gray { background: var(--gray-500); }
.fact-fill-red { background: linear-gradient(90deg, var(--red), var(--orange)); }
.fact-note { font-size: 15px; color: var(--gray-500); text-align: center; margin-top: 18px; }

.callout {
    display: flex; gap: 18px; align-items: flex-start;
    border-radius: var(--r-md); padding: 32px 28px;
}
.callout i { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.callout p { font-size: 19px; line-height: 1.85; font-weight: 500; }
.callout-red {
    background: var(--red-light); border: 2px solid #fecaca;
}
.callout-red i { color: var(--red); }
.callout-red-fill {
    background: var(--red); color: var(--white);
}
.callout-red-fill i { color: var(--yellow); }
.callout-red-fill strong { color: var(--white); }
.callout-blue {
    background: var(--sky); border: 2px solid var(--sky-deep);
}
.callout-blue i { color: var(--blue); }


/* ============================
   FEAR — 保護者の不安
   ============================ */
.fear-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin-bottom: 40px;
}
.fear-card {
    background: var(--white); border-radius: var(--r-md);
    padding: 32px 20px; text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}
.fear-emoji { font-size: 48px; margin-bottom: 16px; }
.fear-card p { font-size: 17px; line-height: 1.85; color: var(--gray-700); }
.fear-card strong { color: var(--gray-900); }

.alert-box {
    border-radius: var(--r-lg); padding: 40px 32px;
    text-align: center;
}
.alert-orange {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 2px solid #fed7aa;
}
.alert-orange p { font-size: 24px; font-weight: 700; color: var(--gray-900); line-height: 1.75; }


/* ============================
   COMMON MISTAKE — よくある間違い
   ============================ */
.mistake-list { display: flex; flex-direction: column; gap: 22px; }
.mistake-card {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--red-light);
    border: 1px solid #fecaca;
    border-radius: var(--r-md);
    padding: 32px 28px;
}
.mistake-icon {
    flex-shrink: 0; font-size: 34px; color: var(--red);
    margin-top: 2px;
}
.mistake-body h3 {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 10px; line-height: 1.5;
}
.mistake-body p {
    font-size: 17px; color: var(--gray-700); line-height: 1.9;
}


/* ============================
   TRAP — 落とし穴
   ============================ */
.trap-list { display: flex; flex-direction: column; gap: 22px; }
.trap-item {
    display: flex; align-items: flex-start; gap: 20px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--r-md);
    padding: 36px 28px;
}
.trap-number {
    font-family: var(--font-accent);
    font-size: 44px; font-weight: 900;
    color: var(--orange); line-height: 1;
    flex-shrink: 0; min-width: 56px;
}
.trap-body h3 {
    font-size: 22px; font-weight: 800;
    color: var(--white); line-height: 1.55;
    margin-bottom: 12px;
}
.trap-body p {
    font-size: 17px; color: rgba(255,255,255,0.75); line-height: 1.85;
}


/* ============================
   DEADLINE — タイムリミット
   ============================ */
.deadline-hero { text-align: center; margin-bottom: 56px; }
.deadline-icon {
    font-size: 64px; color: var(--red);
    margin-bottom: 28px;
    animation: pulse-icon 2s infinite;
}
@keyframes pulse-icon {
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.timeline-v {
    position: relative; padding-left: 48px; margin-bottom: 44px;
}
.timeline-v::before {
    content: ''; position: absolute; left: 16px; top: 8px; bottom: 8px;
    width: 4px; border-radius: 2px;
    background: linear-gradient(180deg, var(--red), var(--orange), var(--gray-300));
}
.tl-step { position: relative; padding-bottom: 44px; }
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
    content: ''; position: absolute; left: -38px; top: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    border: 3px solid var(--white);
}
.tl-red::before { background: var(--red); box-shadow: 0 0 0 4px rgba(239,68,68,0.2); }
.tl-orange::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(249,115,22,0.2); }
.tl-gray::before { background: var(--gray-300); box-shadow: 0 0 0 4px rgba(203,213,225,0.3); }

.tl-badge {
    display: inline-block; font-family: var(--font-accent);
    font-size: 15px; font-weight: 800;
    background: var(--sky-deep); color: var(--blue);
    padding: 7px 18px; border-radius: 50px; margin-bottom: 10px;
}
.tl-red .tl-badge { background: var(--red-light); color: var(--red); }
.tl-content h4 { font-size: 21px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; line-height: 1.55; }
.tl-content p { font-size: 17px; color: var(--gray-500); line-height: 1.85; }
.tl-step p { font-size: 19px; line-height: 1.85; }


/* ============================
   DATA PROOF — データカード
   ============================ */
.data-cards {
    display: grid; grid-template-columns: 1fr; gap: 20px;
    margin-bottom: 16px;
}
.data-card {
    background: var(--white); border-radius: var(--r-md);
    padding: 36px 28px; text-align: center;
    box-shadow: var(--shadow-md);
    border-left: 5px solid var(--red);
}
.data-icon { font-size: 34px; color: var(--gray-300); margin-bottom: 16px; }
.data-num {
    font-family: var(--font-accent);
    font-size: 58px; font-weight: 900; line-height: 1.1;
    margin-bottom: 12px;
}
.data-num small { font-size: 28px; }
.data-card p { font-size: 17px; line-height: 1.8; color: var(--gray-700); }
.data-text { font-size: 19px; font-weight: 600; line-height: 1.8; margin-top: 10px; color: var(--gray-700); }


/* ============================
   LEVELS
   ============================ */
.level-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.level-row {
    display: flex; align-items: stretch;
    border-radius: var(--r-md); overflow: hidden;
    box-shadow: var(--shadow-sm); background: var(--white);
}
.level-tag {
    font-family: var(--font-accent);
    font-size: 30px; font-weight: 900; color: var(--white);
    display: flex; align-items: center; justify-content: center;
    min-width: 64px;
}
.level-s .level-tag { background: var(--purple); }
.level-a .level-tag { background: var(--red); }
.level-b .level-tag { background: var(--blue); }
.level-c .level-tag { background: var(--orange); }

.level-info { padding: 22px 20px; flex: 1; }
.level-info h3 { font-size: 20px; font-weight: 800; color: var(--gray-900); margin-bottom: 6px; }
.level-info p { font-size: 17px; color: var(--gray-500); line-height: 1.75; }
.level-info strong { color: var(--gray-900); }
.level-detail {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.level-detail span {
    font-size: 14px; font-weight: 600; color: var(--gray-500);
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--gray-100); padding: 5px 14px; border-radius: 50px;
}
.level-detail i { font-size: 11px; color: var(--blue); }

.conclusion-box {
    background: var(--navy-dark); border-radius: var(--r-lg);
    padding: 44px 32px; text-align: center;
}
.conclusion-box-bright {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 3px solid var(--orange);
}
.conclusion-small { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 14px; }
.conclusion-small-dark { font-size: 17px; color: var(--gray-500); margin-bottom: 14px; }
.conclusion-big {
    font-size: 26px; font-weight: 900; color: var(--white); line-height: 1.75;
}
.conclusion-big-dark {
    font-size: 26px; font-weight: 900; color: var(--gray-900); line-height: 1.75;
}
.conclusion-note {
    font-size: 17px; color: var(--gray-500); margin-top: 18px; line-height: 1.9;
}


/* ============================
   MINI CTA
   ============================ */
.mini-cta { padding: 64px 0; }
.mini-cta-text {
    font-size: 20px; font-weight: 700; color: var(--white);
    margin-bottom: 28px;
    white-space: nowrap;
}
.mini-cta .cta-note { margin-top: 18px; }


/* ============================
   BRIDGE QUESTION
   ============================ */
.section-bridge-q { padding: 80px 0; }
.section-bridge-q h2 { margin-bottom: 36px; }
.bubble-wrap { display: flex; flex-direction: column; gap: 20px; }
.bubble {
    background: var(--white); border-radius: var(--r-lg);
    padding: 36px 32px; box-shadow: var(--shadow-md);
    position: relative; text-align: center;
    border: 2px solid var(--sky-deep);
}
.bubble::before {
    content: ''; position: absolute; top: -12px; left: 50%;
    transform: translateX(-50%);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid var(--white);
}
.bubble p { font-size: 26px; font-weight: 700; color: var(--gray-900); line-height: 1.7; }
.bubble-gray { background: var(--gray-100); border-color: var(--gray-200); }
.bubble-gray::before { border-bottom-color: var(--gray-100); }


/* ============================
   ANSWER
   ============================ */
.bg-blue .container { padding-top: 28px; padding-bottom: 28px; }
.answer-small {
    font-size: 24px; font-weight: 500;
    color: rgba(255,255,255,0.65); margin-bottom: 28px;
}
.answer-big {
    font-size: 34px; font-weight: 900;
    color: var(--white); line-height: 1.65;
    margin-bottom: 44px;
}

/* Answer Formula */
.answer-formula {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; flex-wrap: wrap;
    padding: 32px 18px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,0.15);
}
.formula-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 16px 12px;
}
.formula-item i { font-size: 34px; color: var(--yellow); }
.formula-item span { font-size: 16px; font-weight: 700; color: var(--white); text-align: center; line-height: 1.45; }
.formula-op {
    font-family: var(--font-accent);
    font-size: 28px; font-weight: 900; color: var(--yellow);
}
.formula-result {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 16px 18px;
    background: var(--yellow);
    border-radius: var(--r-sm);
}
.formula-result i { font-size: 34px; color: var(--navy); }
.formula-result span { font-size: 16px; font-weight: 900; color: var(--navy); text-align: center; line-height: 1.45; }


/* ============================
   BEFORE & AFTER
   ============================ */
.ba-image {
    border-radius: var(--r-lg); overflow: hidden;
    margin-bottom: 44px; box-shadow: var(--shadow-md);
}
.ba-case {
    background: var(--offwhite);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.ba-header {
    padding: 20px 28px;
    display: flex; align-items: center; gap: 16px;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}
.ba-badge {
    font-size: 14px; font-weight: 800; color: var(--white);
    padding: 6px 18px; border-radius: 50px;
}
.badge-blue { background: var(--blue); }
.badge-orange { background: var(--orange); }
.ba-name { font-size: 18px; font-weight: 700; color: var(--gray-900); }

.ba-grid {
    display: grid; grid-template-columns: 1fr auto 1fr;
    padding: 28px 24px; gap: 12px;
}
.ba-before, .ba-after { padding: 0 4px; }
.ba-label {
    display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 1px;
    padding: 5px 14px; border-radius: 4px; margin-bottom: 14px;
}
.ba-label-gray { background: var(--gray-200); color: var(--gray-500); }
.ba-label-blue { background: var(--sky-deep); color: var(--blue); }
.ba-before ul, .ba-after ul { list-style: none; }
.ba-before li, .ba-after li {
    font-size: 16px; color: var(--gray-700); line-height: 1.85;
    padding: 4px 0;
}
.ba-before li strong { color: var(--red); font-size: 19px; }
.ba-after li strong { font-size: 19px; }
.ba-arrow {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    color: var(--orange); font-size: 24px;
}
.ba-arrow span { font-size: 14px; font-weight: 700; white-space: nowrap; }


/* ============================
   ROADMAP
   ============================ */
.rm-steps { display: flex; flex-direction: column; align-items: center; }
.rm-card {
    width: 100%; border-radius: var(--r-md); overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.rm-head {
    padding: 22px 28px; color: var(--white);
    display: flex; align-items: center; gap: 18px;
}
.rm-blue .rm-head { background: linear-gradient(135deg, var(--blue), var(--blue-light)); }
.rm-orange .rm-head { background: linear-gradient(135deg, var(--orange-dark), var(--orange)); }
.rm-red .rm-head { background: linear-gradient(135deg, #dc2626, var(--orange)); }

.rm-period { font-size: 24px; font-weight: 900; }
.rm-phase { font-size: 17px; opacity: 0.85; }
.rm-body {
    padding: 28px; background: var(--white);
    border: 1px solid var(--gray-200); border-top: none;
}
.rm-badge {
    display: inline-block; background: var(--sky-deep); color: var(--blue);
    padding: 7px 20px; border-radius: 50px;
    font-size: 16px; font-weight: 700; margin-bottom: 14px;
}
.rm-badge-orange { background: #fff2e0; color: var(--orange); }
.rm-body > p { font-size: 18px; line-height: 1.9; }
.rm-body strong { color: var(--gray-900); }
.rm-arrow { text-align: center; padding: 12px 0; color: var(--blue-light); font-size: 24px; }

.rm-detail {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px dashed var(--gray-200);
}
.rm-detail span {
    font-size: 16px; color: var(--gray-500);
    display: flex; align-items: center; gap: 8px;
}
.rm-detail i { color: var(--green); font-size: 14px; }

.rm-cta {
    background: linear-gradient(135deg, var(--blue), #1d4ed8);
    border-radius: var(--r-lg); padding: 48px 32px;
    text-align: center; margin-top: 48px;
}
.rm-cta p {
    color: var(--white); font-size: 24px; font-weight: 700;
    line-height: 1.7; margin-bottom: 32px;
}
.rm-cta strong { color: var(--yellow); }


/* ============================
   1日のスケジュール
   ============================ */
.schedule-wrap {
    position: relative;
    border-left: 4px solid var(--sky-deep);
    padding-left: 28px;
    margin-bottom: 32px;
}
.sch-item {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 0;
    position: relative;
}
.sch-item::before {
    content: '';
    position: absolute; left: -34px; top: 50%;
    transform: translateY(-50%);
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--sky-deep);
}
.sch-time {
    font-family: var(--font-accent);
    font-size: 17px; font-weight: 800;
    color: var(--gray-500);
    min-width: 58px;
}
.sch-content {
    font-size: 17px; font-weight: 600;
    padding: 12px 18px; border-radius: 10px;
    flex: 1;
}
.sch-content i { margin-right: 8px; }
.sch-bridge {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--blue); border: 1px solid var(--sky-deep);
}
.sch-school {
    background: var(--offwhite); color: var(--gray-700);
    border: 1px solid var(--gray-200);
}
.sch-normal { background: transparent; color: var(--gray-500); }

.sch-legend {
    display: flex; gap: 28px; justify-content: center;
    font-size: 15px; color: var(--gray-500);
    margin-top: 24px;
}
.sch-leg-item { display: flex; align-items: center; gap: 8px; }
.sch-dot { width: 12px; height: 12px; border-radius: 4px; }
.sch-dot-bridge { background: var(--blue); }
.sch-dot-school { background: var(--gray-300); }


/* ============================
   NUMBERS （セクション自体は削除済だがCSS残し）
   ============================ */
.number-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.number-card {
    background: var(--white); border-radius: var(--r-md);
    padding: 36px 18px; text-align: center;
    box-shadow: var(--shadow-md);
}
.number-big {
    font-family: var(--font-accent);
    font-size: 50px; font-weight: 900; line-height: 1.1; margin-bottom: 12px;
}
.number-big small { font-size: 24px; }
.number-card p { font-size: 16px; color: var(--gray-500); line-height: 1.7; }
.note { text-align: center; font-size: 16px; color: var(--gray-500); margin-top: 32px; }


/* ============================
   BUTTONS — LINE
   ============================ */
.btn-line {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    background: var(--green); color: var(--white);
    padding: 20px 28px; border-radius: 14px;
    font-size: 18px; font-weight: 800;
    box-shadow: 0 6px 24px rgba(6,199,85,0.35);
    white-space: nowrap;
}
.btn-line i:first-child { font-size: 26px; }
.btn-line:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(6,199,85,0.5); }

.btn-line-xl {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    background: var(--green); color: var(--white);
    padding: 24px 32px; border-radius: 16px;
    box-shadow: 0 8px 32px rgba(6,199,85,0.45);
    margin-top: 44px; max-width: 400px; margin-left: auto; margin-right: auto;
    white-space: nowrap;
}
.btn-line-xl i { font-size: 42px; }
.btn-line-xl small { display: block; font-size: 15px; font-weight: 500; opacity: 0.9; }
.btn-line-xl strong { display: block; font-size: 22px; font-weight: 900; }
.btn-line-xl:hover { background: var(--green-dark); transform: translateY(-2px); }


/* ============================
   SERVICE — bridge★
   ============================ */
.mission-box {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-lg); padding: 40px 32px;
    text-align: center; margin-bottom: 44px;
}
.mission-flag {
    font-family: var(--font-accent); font-size: 16px; font-weight: 700;
    color: var(--yellow); display: block; margin-bottom: 18px;
}
.mission-box > p { font-size: 26px; font-weight: 700; line-height: 1.8; color: var(--white); }

.service-photo {
    border-radius: var(--r-lg); overflow: hidden;
    margin-bottom: 52px; box-shadow: var(--shadow-lg);
}
.pillars-heading {
    text-align: center; font-size: 28px; font-weight: 900;
    margin-bottom: 36px;
}
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pillar-card {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-md); padding: 32px 18px;
    text-align: center; transition: transform .2s ease;
}
.pillar-card:hover { transform: translateY(-4px); background: rgba(255,255,255,0.16); }
.pillar-icon { font-size: 44px; color: var(--yellow); margin-bottom: 16px; }
.pillar-card h4 { font-size: 19px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.pillar-card p { font-size: 16px; color: rgba(255,255,255,0.65); line-height: 1.75; }


/* ============================
   LEVEL TASKS — 志望校別やることリスト
   ============================ */
.level-block {
    margin-bottom: 40px;
}
.level-tasks {
    background: var(--white);
    border-radius: 0 0 var(--r-md) var(--r-md);
    border: 1px solid var(--gray-200);
    border-top: none;
    padding: 32px 28px;
    margin-top: -8px;
    box-shadow: var(--shadow-sm);
}
.level-tasks h4 {
    font-size: 20px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 24px; padding-bottom: 16px;
    border-bottom: 2px dashed var(--gray-200);
}
.level-tasks h4 i {
    color: var(--blue); margin-right: 8px;
}
.task-timeline {
    display: flex; flex-direction: column; gap: 28px;
}
.task-phase {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--blue-light);
}
.level-s-block .task-phase { border-left-color: var(--purple); }
.level-a-block .task-phase { border-left-color: var(--red); }
.level-b-block .task-phase { border-left-color: var(--blue); }
.level-c-block .task-phase { border-left-color: var(--orange); }

.task-period {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 15px; font-weight: 800;
    color: var(--white); background: var(--blue);
    padding: 5px 18px; border-radius: 50px;
    margin-bottom: 14px;
}
.level-s-block .task-period { background: var(--purple); }
.level-a-block .task-period { background: var(--red); }
.level-b-block .task-period { background: var(--blue); }
.level-c-block .task-period { background: var(--orange); }

.task-phase ul {
    list-style: none; padding: 0;
}
.task-phase li {
    font-size: 17px; color: var(--gray-700); line-height: 1.85;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    position: relative;
    padding-left: 22px;
}
.task-phase li:last-child { border-bottom: none; }
.task-phase li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 12px;
    color: var(--green);
    position: absolute;
    left: 0; top: 14px;
}
.task-phase li strong {
    color: var(--gray-900); font-weight: 700;
}


/* ============================
   FEATURE DETAIL — 学習日報 & コーチング
   ============================ */
.feature-box {
    display: flex; flex-direction: column; gap: 28px;
}
.feature-point {
    display: flex; gap: 20px; align-items: flex-start;
}
.feature-point > i {
    font-size: 28px; color: var(--blue);
    flex-shrink: 0; margin-top: 4px;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sky); border-radius: 50%;
}
.feature-point h3 {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 8px;
}
.feature-point p { font-size: 17px; color: var(--gray-500); line-height: 1.85; }

/* Diary Sample Mock */
.diary-sample {
    margin-top: 44px;
    background: var(--white); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
.diary-sample h4 {
    background: var(--blue); color: var(--white);
    padding: 18px 28px; font-size: 19px; font-weight: 700;
}
.diary-sample h4 i { margin-right: 10px; }
.diary-mock { padding: 28px; }
.diary-date {
    font-size: 17px; font-weight: 700; color: var(--gray-900);
    padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); margin-bottom: 18px;
}
.diary-entry { margin-bottom: 24px; }
.diary-row {
    display: flex; gap: 16px; padding: 10px 0;
    font-size: 17px;
}
.diary-key {
    font-weight: 700; color: var(--gray-500);
    min-width: 84px; flex-shrink: 0;
}
.diary-val { color: var(--gray-900); }
.diary-coach {
    background: var(--sky); border-radius: var(--r-sm);
    padding: 24px;
}
.diary-coach-label {
    font-size: 16px; font-weight: 700; color: var(--blue);
    margin-bottom: 12px;
}
.diary-coach-label i { margin-right: 6px; }
.diary-coach p { font-size: 17px; color: var(--gray-700); line-height: 1.85; }


/* ============================
   COACH TEAM — 経歴カード
   ============================ */
.coach-team { margin-bottom: 48px; }
.coach-credential-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.coach-credential-card {
    background: var(--offwhite); border-radius: var(--r-md);
    padding: 32px 20px; text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
    transition: transform .2s ease, box-shadow .2s ease;
}
.coach-credential-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.credential-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    color: var(--white); font-size: 28px;
}
.coach-credential-card h4 {
    font-size: 18px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 12px; line-height: 1.55;
}
.coach-credential-card p {
    font-size: 16px; color: var(--gray-500); line-height: 1.75;
}
.coach-note {
    margin-top: 28px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border: 2px solid var(--sky-deep);
    border-radius: var(--r-md);
    padding: 28px;
    text-align: center;
}
.coach-note p {
    font-size: 18px; color: var(--gray-700); line-height: 1.85;
}
.coach-note i {
    color: var(--blue); margin-right: 8px;
}
.coach-note strong { color: var(--blue); }


/* ============================
   TEST CYCLE — 縦型レイアウト（スマホ最適）
   ============================ */
.test-cycle-v {
    display: flex; flex-direction: column;
    gap: 0;
    margin: 36px 0 28px;
}
.cycle-step-v {
    display: flex; align-items: center; gap: 20px;
    background: var(--white);
    border-radius: var(--r-md);
    padding: 24px 24px;
    box-shadow: var(--shadow-sm);
}
.cycle-num-v {
    font-family: var(--font-accent);
    font-size: 36px; font-weight: 900;
    color: var(--white);
    width: 56px; height: 56px; min-width: 56px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    border-radius: 50%;
}
.cycle-body-v { flex: 1; }
.cycle-body-v h4 { font-size: 20px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.cycle-body-v p { font-size: 16px; color: var(--gray-500); line-height: 1.7; }
.cycle-arrow-v {
    display: flex; align-items: center; justify-content: center;
    color: var(--orange); font-size: 20px; padding: 8px 0;
}
.cycle-note {
    text-align: center; font-size: 18px; font-weight: 700; color: var(--gray-900);
    padding: 20px 28px; background: var(--white);
    border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
.cycle-note i { color: var(--orange); margin-right: 8px; }


/* ============================
   COMPARE TABLE
   ============================ */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -28px; padding: 0 28px; }
.compare-table {
    width: 100%; min-width: 440px;
    border-collapse: collapse; font-size: 16px;
}
.compare-table th, .compare-table td {
    padding: 16px 12px; text-align: center;
    border-bottom: 1px solid var(--gray-200);
}
.compare-table th {
    font-size: 15px; font-weight: 800; color: var(--gray-700);
    background: var(--gray-100); white-space: nowrap;
}
.compare-table td:first-child {
    text-align: left; font-weight: 600; color: var(--gray-900); font-size: 15px;
}
.compare-highlight {
    background: rgba(37,99,235,0.04) !important;
    color: var(--blue) !important;
    font-weight: 800 !important;
}
th.compare-highlight {
    background: var(--blue) !important;
    color: var(--white) !important;
}
.compare-best {
    font-weight: 900; font-size: 20px; color: var(--blue);
}


/* ============================
   SCHOOLS
   ============================ */
.school-grid { display: flex; flex-direction: column; gap: 32px; }
.school-area h3 {
    font-size: 20px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 16px;
}
.school-area h3 i { color: var(--blue); margin-right: 6px; font-size: 17px; }
.school-tags {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.material-tags { justify-content: center; }
.school-tag {
    display: inline-block;
    background: var(--white); color: var(--gray-700);
    padding: 9px 18px; border-radius: 50px;
    font-size: 16px; font-weight: 600;
    border: 1px solid var(--gray-200);
}
.tag-material { background: var(--sky); color: var(--blue); border-color: var(--sky-deep); }
.tag-more { background: var(--gray-100); color: var(--gray-500); font-style: italic; }
.school-count-box {
    background: var(--white); border-radius: var(--r-md);
    padding: 24px 28px; margin-top: 32px; margin-bottom: 8px;
    text-align: center; box-shadow: var(--shadow-sm);
    border: 1px solid var(--sky-deep);
}
.school-count-box p { font-size: 18px; color: var(--gray-700); line-height: 1.8; }
.school-count-box i { color: var(--blue); margin-right: 6px; }


/* ============================
   REASONS
   ============================ */
.reason-list { display: flex; flex-direction: column; gap: 28px; }
.reason-card {
    background: var(--white); border-radius: var(--r-lg);
    padding: 44px 32px; box-shadow: var(--shadow-md);
    text-align: center;
    border-left: 6px solid var(--blue);
}
.reason-num {
    font-family: var(--font-accent);
    font-size: 60px; font-weight: 900;
    color: var(--sky-deep); line-height: 1; margin-bottom: 14px;
}
.reason-card h3 {
    font-size: 26px; font-weight: 900; color: var(--gray-900);
    margin-bottom: 18px; line-height: 1.55;
}
.reason-card p { font-size: 18px; color: var(--gray-500); line-height: 2; }


/* ============================
   VOICE — 体験談
   ============================ */
.voice-card {
    background: var(--white); border-radius: var(--r-lg);
    overflow: hidden; margin-bottom: 28px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
}
.voice-top {
    display: flex; align-items: center; gap: 18px;
    padding: 24px 28px; background: var(--offwhite);
    border-bottom: 1px solid var(--gray-200);
}
.voice-photo {
    width: 68px; height: 68px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    border: 3px solid var(--white); box-shadow: var(--shadow-sm);
}
.voice-icon { font-size: 56px; color: var(--gray-300); flex-shrink: 0; }
.voice-meta { flex: 1; }
.voice-name { font-size: 17px; font-weight: 800; color: var(--gray-900); display: block; }
.voice-role { font-size: 15px; color: var(--gray-500); }
.voice-result { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.voice-badge {
    font-size: 14px; font-weight: 700; color: var(--white);
    padding: 5px 14px; border-radius: 50px;
}
.voice-body { padding: 28px; }
.voice-title {
    font-size: 22px; font-weight: 800; color: var(--gray-900);
    line-height: 1.65; margin-bottom: 16px;
}
.voice-body > p { font-size: 17px; color: var(--gray-700); line-height: 2; }


/* ============================
   PARENT MESSAGE
   ============================ */
.parent-msg-box {
    background: var(--white); border-radius: var(--r-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
}
.parent-msg-img {
    width: 100%; max-height: 300px;
    object-fit: cover;
}
.parent-msg-text {
    padding: 40px 32px;
}
.parent-msg-text p {
    font-size: 19px; line-height: 2.1;
    color: var(--gray-700); margin-bottom: 22px;
}
.parent-msg-text p:last-child { margin-bottom: 0; }
.parent-msg-strong {
    font-size: 24px; font-weight: 900; color: var(--gray-900);
    line-height: 1.85;
}


/* ============================
   PRICING — 6プラン横スクロール
   ============================ */
.price-admission {
    text-align: center; font-size: 16px; color: var(--gray-500);
    margin-bottom: 32px;
}
.price-admission i { color: var(--blue); margin-right: 6px; }
.price-admission span { display: block; font-size: 14px; color: var(--gray-300); margin-top: 4px; }

.price-scroll-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 0 -28px; padding: 0 28px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}
.price-scroll-wrap::-webkit-scrollbar { height: 6px; }
.price-scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.price-scroll-wrap::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }

.price-grid-new {
    display: flex; gap: 16px;
    min-width: max-content;
}

.plan-card {
    width: 200px; min-width: 200px;
    border: 2px solid var(--gray-200); border-radius: var(--r-md);
    padding: 24px 18px 20px; position: relative;
    background: var(--white);
    display: flex; flex-direction: column;
    transition: transform .2s ease;
}
.plan-card:hover { transform: translateY(-3px); }

/* RECOMMENDED カード */
.plan-card-recommended {
    border-color: var(--orange);
    box-shadow: 0 4px 20px rgba(249,115,22,0.15);
}
.plan-recommended-badge {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--orange); color: var(--white);
    padding: 5px 18px; border-radius: 50px;
    font-family: var(--font-accent); font-size: 12px; font-weight: 800;
    letter-spacing: 1px; white-space: nowrap;
}

/* プランタグ */
.plan-tag {
    display: inline-block;
    background: var(--gray-100); color: var(--gray-700);
    padding: 5px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 700;
    margin-bottom: 10px; white-space: nowrap;
}
.plan-tag-highlight {
    background: var(--orange-light); color: var(--orange);
}

/* プラン名 */
.plan-name {
    font-size: 20px; font-weight: 900; color: var(--gray-900);
    margin-bottom: 4px; line-height: 1.3;
}
.plan-subtitle {
    font-size: 12px; color: var(--gray-500);
    margin-bottom: 14px; min-height: 16px;
}

/* 料金（非表示） */
.plan-price-hidden {
    background: var(--offwhite); border-radius: 8px;
    padding: 12px 8px; text-align: center;
    margin-bottom: 16px;
}
.plan-price-hidden span {
    font-size: 14px; font-weight: 700; color: var(--gray-500);
}

/* サービス内容リスト */
.plan-features {
    list-style: none; padding: 0; margin: 0 0 16px;
    flex: 1;
}
.plan-feat {
    font-size: 14px; color: var(--gray-700);
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-100);
    display: flex; align-items: center; gap: 8px;
    line-height: 1.5;
}
.plan-feat:last-child { border-bottom: none; }
.plan-icon-on { color: var(--orange); font-size: 15px; flex-shrink: 0; }
.plan-feat-off { color: var(--gray-300); }
.plan-dash {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; font-size: 16px; font-weight: 700; color: var(--gray-300);
    flex-shrink: 0;
}

/* 集団ボックス */
.plan-group-box {
    background: var(--orange-light); border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px; font-weight: 600; color: var(--gray-700);
    line-height: 1.6; margin-bottom: 12px;
    text-align: center;
}
.plan-group-box i { color: var(--orange); margin-right: 4px; }

/* 学校フォロー */
.plan-school-follow {
    font-size: 13px; font-weight: 700; color: var(--green);
    display: flex; align-items: center; gap: 6px;
    padding-top: 8px;
}
.plan-school-follow i { font-size: 14px; }

.price-note-box {
    text-align: center; margin-top: 28px;
    background: var(--offwhite); border-radius: var(--r-md);
    padding: 24px;
}
.price-note-box p {
    font-size: 16px; color: var(--gray-500); margin-bottom: 10px;
}
.price-note-box p:last-child { margin-bottom: 0; }
.price-note-box i { margin-right: 6px; }


/* ============================
   FLOW
   ============================ */
.flow-list { max-width: 420px; margin: 0 auto; }
.flow-card {
    display: flex; align-items: center; gap: 24px;
    background: var(--white); border-radius: var(--r-md);
    padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.flow-card-highlight {
    border: 2px solid var(--green);
    box-shadow: 0 4px 16px rgba(6,199,85,0.15);
}
.flow-num {
    font-family: var(--font-accent);
    font-size: 36px; font-weight: 900; color: var(--blue);
    flex-shrink: 0; width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
    background: var(--sky-deep); border-radius: 50%;
}
.flow-card h3 { font-size: 22px; font-weight: 800; color: var(--gray-900); }
.flow-card p { font-size: 17px; color: var(--gray-500); margin-top: 6px; line-height: 1.75; }
.flow-card small { font-size: 15px; color: var(--gray-500); }
.flow-arrow { text-align: center; color: var(--blue-light); font-size: 26px; padding: 12px 0; }


/* ============================
   LINE CTA
   ============================ */
.cta-tag {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--orange); color: var(--white);
    padding: 13px 30px; border-radius: 50px;
    font-size: 16px; font-weight: 700; margin-bottom: 36px;
    white-space: nowrap;
}
.cta-heading {
    color: var(--white); font-size: 34px; font-weight: 900;
    line-height: 1.55; margin-bottom: 48px;
    letter-spacing: -0.02em;
}
.benefit-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--r-md); padding: 36px 28px;
    text-align: left; margin-bottom: 22px;
}
.benefit-tag {
    display: inline-block; background: var(--orange); color: var(--white);
    padding: 6px 18px; border-radius: 50px;
    font-size: 15px; font-weight: 700; margin-bottom: 16px;
}
.benefit-card h3 { font-size: 24px; font-weight: 800; color: var(--white); margin-bottom: 12px; line-height: 1.55; }
.benefit-card h3 i { color: var(--yellow); margin-right: 8px; }
.benefit-card > p { font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.8; }
.benefit-detail {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.benefit-detail span {
    font-size: 16px; color: rgba(255,255,255,0.6);
    display: flex; align-items: center; gap: 8px;
}
.benefit-detail i { font-size: 12px; color: var(--green); }

.cta-note { color: rgba(255,255,255,0.45); font-size: 16px; margin-top: 22px; }
.cta-note i { margin-right: 6px; }

.cta-urgency {
    margin-top: 36px; padding: 28px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.25);
    border-radius: var(--r-md);
}
.cta-urgency p {
    font-size: 18px; color: var(--white); line-height: 1.8; text-align: center;
}
.cta-urgency i { color: var(--yellow); margin-right: 6px; }


/* ============================
   FAQ
   ============================ */
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item { border: 2px solid var(--gray-200); border-radius: var(--r-md); overflow: hidden; }
.faq-q {
    padding: 26px 28px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: var(--offwhite); transition: background .2s ease;
}
.faq-q:hover { background: var(--gray-100); }
.faq-q span { font-size: 19px; font-weight: 700; color: var(--gray-900); flex: 1; padding-right: 18px; line-height: 1.6; }
.faq-q i { color: var(--blue); font-size: 20px; transition: transform .3s ease; flex-shrink: 0; }
.faq-q.active i { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a.open { max-height: 600px; }
.faq-a p { padding: 28px; font-size: 18px; color: var(--gray-700); line-height: 2; background: var(--white); }


/* ============================
   GUARANTEE
   ============================ */
.guarantee-icon {
    font-size: 64px; color: var(--orange);
    margin-bottom: 24px;
}
.guarantee-list { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }
.guarantee-item {
    background: var(--white); border-radius: var(--r-lg);
    padding: 36px 32px; text-align: center;
    box-shadow: var(--shadow-sm);
}
.guarantee-num {
    font-family: var(--font-accent);
    font-size: 44px; font-weight: 900; color: var(--orange);
    line-height: 1; margin-bottom: 14px;
}
.guarantee-item h3 {
    font-size: 23px; font-weight: 800; color: var(--gray-900);
    margin-bottom: 12px;
}
.guarantee-item p { font-size: 17px; color: var(--gray-500); line-height: 1.85; }


/* ============================
   SATISFACTION BARS (deleted section, CSS kept for safety)
   ============================ */
.satisfaction-grid {
    display: flex; flex-direction: column; gap: 28px;
}
.sat-item p {
    font-size: 17px; font-weight: 600; color: var(--gray-700);
    margin-top: 10px;
}
.sat-bar {
    height: 24px; background: var(--gray-200);
    border-radius: 12px; overflow: hidden;
    position: relative;
}
.sat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--blue), var(--blue-light));
    border-radius: 12px;
    transition: width 1.5s ease;
}


/* ============================
   FINAL
   ============================ */
.section-final { padding: 88px 0; }
.final-img { border-radius: var(--r-lg); margin: 0 auto 40px; box-shadow: var(--shadow-md); max-width: 400px; }
.section-final h2 { margin-bottom: 24px; }
.section-final > .container > p { font-size: 21px; color: var(--gray-500); margin-bottom: 18px; }
.final-strong {
    font-size: 24px; font-weight: 900; color: var(--gray-900);
    margin-bottom: 32px; line-height: 1.75;
}
.final-last-chance {
    background: var(--red-light); border: 2px solid #fecaca;
    border-radius: var(--r-md); padding: 32px 28px;
    margin-bottom: 36px;
}
.final-last-chance p {
    font-size: 19px; color: var(--gray-900); line-height: 1.85; text-align: center;
}
.final-last-chance i { color: var(--red); margin-right: 6px; }


/* ============================
   FOOTER
   ============================ */
.footer {
    background: #1e293b; padding: 48px 0 108px;
}
.footer-logo { color: var(--white); margin-bottom: 12px; }
.footer-logo span { color: var(--yellow); }
.footer-desc { font-size: 16px; color: rgba(255,255,255,0.45); margin-bottom: 24px; }
.footer-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 22px; margin-bottom: 24px;
}
.footer-links a {
    font-size: 16px; color: rgba(255,255,255,0.45);
    transition: color .2s ease;
}
.footer-links a:hover { color: var(--white); }
.footer-copy { font-size: 15px; color: rgba(255,255,255,0.25); }


/* ============================
   ANIMATIONS
   ============================ */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}
.pulse { animation: pulse 2.5s infinite; }
@keyframes pulse {
    0%   { box-shadow: 0 8px 28px rgba(6,199,85,0.35); }
    50%  { box-shadow: 0 8px 28px rgba(6,199,85,0.6), 0 0 0 14px rgba(6,199,85,0.08); }
    100% { box-shadow: 0 8px 28px rgba(6,199,85,0.35); }
}
.anim {
    opacity: 0; transform: translateY(36px);
    transition: opacity .6s ease, transform .6s ease;
}
.anim.show { opacity: 1; transform: translateY(0); }


/* ============================
   RESPONSIVE — タブレット以上
   ============================ */
@media (min-width: 768px) {
    body { padding-bottom: 0; font-size: 18px; }
    .container { max-width: 720px; padding: 0 48px; }
    .header-inner { max-width: 720px; padding: 0 48px; }
    .hero-inner { max-width: 720px; padding: 0 48px; }
    .fixed-cta { display: none; }
    .hero-text h1 { font-size: 52px; }
    .hero-sub { font-size: 24px; }
    .hero-photo img { max-height: 500px; }
    .hero-trust-label { font-size: 17px; }
    .hero-tag { font-size: 17px; }
    .section { padding: 140px 0; }
    .heading-xl { font-size: 44px; }
    .heading-lg { font-size: 38px; }
    .sub-text { font-size: 21px; }
    .sub-heading { font-size: 28px; }
    .answer-small { font-size: 26px; }
    .answer-big { font-size: 46px; }
    .cta-heading { font-size: 44px; }
    .stat-num { font-size: 64px; }
    .stat-card p { font-size: 18px; }
    .callout p { font-size: 20px; }
    .fear-card p { font-size: 18px; }
    .alert-orange p { font-size: 26px; }
    .mistake-body h3 { font-size: 24px; }
    .mistake-body p { font-size: 18px; }
    .trap-body h3 { font-size: 24px; }
    .trap-body p { font-size: 18px; }
    .tl-content h4 { font-size: 23px; }
    .tl-content p { font-size: 18px; }
    .plan-card { width: 220px; min-width: 220px; }
    .plan-name { font-size: 22px; }
    .plan-feat { font-size: 15px; }
    .wave-top svg, .wave-bottom svg { height: 70px; }
    .data-cards { grid-template-columns: 1fr 1fr 1fr; }
    .number-grid { grid-template-columns: repeat(4, 1fr); }
    .ba-grid { gap: 16px; }
    .ba-before li, .ba-after li { font-size: 17px; }
    .reason-card h3 { font-size: 28px; }
    .reason-card p { font-size: 19px; }
    .bubble p { font-size: 30px; }
    .mission-box > p { font-size: 30px; }
    .rm-cta p { font-size: 26px; }
    .rm-body > p { font-size: 19px; }
    .feature-point h3 { font-size: 24px; }
    .feature-point p { font-size: 18px; }
    .voice-title { font-size: 24px; }
    .voice-body > p { font-size: 18px; }
    .parent-msg-text p { font-size: 20px; }
    .parent-msg-strong { font-size: 26px; }
    .faq-q span { font-size: 20px; }
    .faq-a p { font-size: 19px; }
    .guarantee-item h3 { font-size: 25px; }
    .guarantee-item p { font-size: 18px; }
    .flow-card h3 { font-size: 24px; }
    .flow-card p { font-size: 18px; }
    .benefit-card h3 { font-size: 26px; }
    .benefit-card > p { font-size: 18px; }
    .conclusion-big { font-size: 30px; }
    .conclusion-big-dark { font-size: 30px; }
    .mini-cta-text { font-size: 24px; }
    .btn-line { font-size: 20px; padding: 24px 40px; }
    .btn-line-xl strong { font-size: 26px; }
    .section-final > .container > p { font-size: 22px; }
    .final-strong { font-size: 26px; }
    .final-last-chance p { font-size: 20px; }
    .diary-sample h4 { font-size: 20px; }
    .coach-credential-card h4 { font-size: 20px; }
    .coach-credential-card p { font-size: 17px; }
    .coach-note p { font-size: 19px; }
    .school-area h3 { font-size: 22px; }
    .school-tag { font-size: 17px; padding: 10px 20px; }
    .school-count-box p { font-size: 19px; }
    .task-phase li { font-size: 18px; }
    .level-info h3 { font-size: 22px; }
    .level-info p { font-size: 18px; }
    .cycle-body-v h4 { font-size: 22px; }
    .cycle-body-v p { font-size: 17px; }
    .cycle-note { font-size: 19px; }
    .compare-table { font-size: 17px; }
    .compare-table th { font-size: 16px; }
    .cta-urgency p { font-size: 19px; }
}

/* ============================
   RESPONSIVE — 大画面（1024px+）
   ============================ */
@media (min-width: 1024px) {
    .container { max-width: 800px; padding: 0 56px; }
    .header-inner { max-width: 800px; padding: 0 56px; }
    .hero-inner { max-width: 800px; padding: 0 56px; }
    .hero-text h1 { font-size: 56px; }
    .heading-xl { font-size: 48px; }
    .heading-lg { font-size: 42px; }
    .answer-big { font-size: 50px; }
    .cta-heading { font-size: 48px; }
}

@media print {
    .header, .fixed-cta, .btn-line, .btn-line-xl { display: none; }
    body { padding-bottom: 0; }
}