:root {
    --brand: #0ABAB5;
    --brand-dark: #089e99;
    --brand-light: #e6fafa;
}

/* Hero */
.hero-section { background: linear-gradient(135deg, #f0fffe 0%, #e8f8f8 50%, #f8f9fa 100%); padding: 140px 0 80px; }
.hero-badge { display: inline-block; background: rgba(10,186,181,.1); color: #0ABAB5; border: 1px solid rgba(10,186,181,.3); border-radius: 99px; padding: 4px 16px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
.hero-title { font-size: 48px; font-weight: 800; line-height: 1.3; margin-bottom: 16px; color: #1a1a1a; }
.hero-sub { font-size: 18px; color: #666; margin-bottom: 12px; line-height: 1.7; }
.hero-note-small { font-size: 12px; color: #aaa; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { font-size: 12px; color: #aaa; margin-top: 12px; }
.btn-consult { background: #fff; color: #0ABAB5 !important; border: 2px solid #0ABAB5; font-weight: 600; }
.btn-consult:hover { background: #f0fffe; }

/* Trust bar */
.trust-bar { background: #fff; border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; padding: 16px 0; }
.trust-bar-text { font-size: 13px; color: #888; text-align: center; }
.trust-icons { display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.trust-icon-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; font-weight: 500; }

/* 課題提起 */
.problem-section { padding: 80px 0; background: #fff; }
.section-title { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 8px; color: #1a1a1a; }
.section-sub { text-align: center; color: #888; font-size: 15px; margin-bottom: 48px; }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.problem-card { background: #f8f9fa; border-radius: 12px; padding: 20px 24px; display: flex; align-items: flex-start; gap: 12px; }
.problem-emoji { font-size: 24px; flex-shrink: 0; }
.problem-text { font-size: 14px; color: #555; line-height: 1.6; }

/* ビフォーアフター */
.ba-section { padding: 80px 0; background: linear-gradient(135deg, #f0fffe, #e8f8f8); }
.ba-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 800px; margin: 0 auto; }
.ba-col { background: #fff; border-radius: 12px; padding: 24px; }
.ba-col.before { border-top: 3px solid #dc3545; }
.ba-col.after { border-top: 3px solid #0ABAB5; }
.ba-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; margin-bottom: 12px; }
.ba-label.before { color: #dc3545; }
.ba-label.after { color: #0ABAB5; }
.ba-item { font-size: 13px; color: #555; padding: 6px 0; border-bottom: 1px solid #f0f0f0; line-height: 1.5; }
.ba-item:last-child { border-bottom: none; }
.ba-arrow { font-size: 32px; color: #0ABAB5; text-align: center; }

/* 機能 */
.features-section { padding: 80px 0; background: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.feature-card { background: #f8f9fa; border-radius: 12px; padding: 28px 24px; transition: box-shadow .2s; }
.feature-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); background: #fff; }
.feature-icon { font-size: 32px; margin-bottom: 12px; }
.feature-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 13px; color: #666; line-height: 1.7; margin: 0; }

/* ターゲット */
.target-section { padding: 80px 0; background: #f8f9fa; }
.target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.target-card { background: #fff; border-radius: 16px; padding: 32px; border-top: 4px solid #0ABAB5; }
.target-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #1a1a1a; }
.target-list { list-style: none; padding: 0; margin: 0; }
.target-list li { font-size: 14px; color: #555; padding: 6px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.6; }
.target-list li::before { content: "✓"; color: #0ABAB5; font-weight: 700; flex-shrink: 0; }
.target-list li:last-child { border-bottom: none; }

/* 比較 */
.compare-section { padding: 80px 0; background: #fff; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 800px; margin: 0 auto 32px; }
.compare-table th { padding: 14px 16px; text-align: center; font-weight: 600; border-bottom: 2px solid #e9ecef; }
.compare-table th.siscan { background: #0ABAB5; color: #fff; border-radius: 8px 8px 0 0; }
.compare-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; text-align: center; }
.compare-table td:first-child { text-align: left; font-weight: 500; color: #555; }
.compare-table .check { color: #0ABAB5; font-size: 18px; font-weight: 700; }
.compare-table .cross { color: #ccc; }
.compare-table .siscan-col { background: #f0fdfc; font-weight: 600; }
.compare-quote { background: #f0fffe; border-left: 4px solid #0ABAB5; padding: 20px 24px; border-radius: 0 8px 8px 0; max-width: 700px; margin: 0 auto; font-size: 15px; color: #333; line-height: 1.8; }

/* セットアップ */
.setup-section { padding: 80px 0; background: #1a1a2e; color: #fff; }
.setup-section .section-title { color: #fff; }
.setup-section .section-sub { color: #aaa; }
.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }
.setup-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 24px; }
.setup-card-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #0ABAB5; margin-bottom: 8px; }
.setup-card-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.setup-card-price { font-size: 24px; font-weight: 700; color: #0ABAB5; margin-bottom: 12px; font-family: 'Inter', sans-serif; }
.setup-card-list { list-style: none; padding: 0; margin: 0; }
.setup-card-list li { font-size: 12px; color: #aaa; padding: 4px 0; display: flex; align-items: flex-start; gap: 6px; }
.setup-card-list li::before { content: "✓"; color: #0ABAB5; flex-shrink: 0; }

/* 料金ミニ */
.pricing-section { padding: 80px 0; background: #f8f9fa; }
.mini-plan-card { background: #fff; border-radius: 12px; padding: 24px 20px; text-align: center; border: 1.5px solid #e9ecef; height: 100%; }
.mini-plan-card.recommended { border-color: #0ABAB5; background: #f0fffe; }
.mini-plan-name { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.mini-plan-price { font-size: 28px; font-weight: 700; margin-bottom: 4px; font-family: 'Inter', sans-serif; }
.mini-plan-price span { font-size: 13px; font-weight: 400; color: #888; }
.mini-plan-desc { font-size: 12px; color: #888; }

/* FAQ */
.faq-section { padding: 80px 0; background: #fff; }
.faq-item { background: #f8f9fa; border-radius: 10px; padding: 20px 24px; margin-bottom: 12px; cursor: pointer; }
.faq-q { font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.faq-a { font-size: 13px; color: #666; line-height: 1.7; margin-top: 12px; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-arrow { transition: transform .2s; }

/* CTA */
.cta-section { background: linear-gradient(135deg, #0ABAB5, #089e99); padding: 80px 0; color: #fff; text-align: center; }
.cta-section h2 { font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.cta-section p { font-size: 15px; opacity: .85; margin-bottom: 32px; }
.btn-white { background: #fff; color: #0ABAB5 !important; font-weight: 700; border: none; }
.btn-white:hover { background: #f0fffe; color: #089e99 !important; }
.btn-white-outline { background: transparent; color: #fff !important; border: 2px solid rgba(255,255,255,.6); font-weight: 600; }
.btn-white-outline:hover { background: rgba(255,255,255,.1); }

/* Suggest Box */
.suggest-box { background: #fff; border-radius: 16px; padding: 28px 32px; max-width: 600px; margin: 32px auto 0; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.suggest-label { font-size: 13px; color: #888; margin-bottom: 12px; }
.suggest-count-badge { background: #0ABAB5; color: #fff; font-size: 11px; padding: 2px 10px; border-radius: 99px; margin-left: 8px; }
.suggest-input-wrap { display: flex; gap: 8px; }
.suggest-input { flex: 1; border: 1.5px solid #e9ecef; border-radius: 8px; padding: 10px 16px; font-size: 15px; outline: none; transition: border-color .2s; font-family: 'Noto Sans JP', sans-serif; }
.suggest-input:focus { border-color: #0ABAB5; }
.suggest-btn { background: #0ABAB5; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: 'Noto Sans JP', sans-serif; }
.suggest-btn:hover { background: #089e99; }
.suggest-results { margin-top: 16px; text-align: left; }
.suggest-result-item { padding: 8px 12px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 8px; }
.suggest-result-item:hover { background: #f0fffe; color: #0ABAB5; }
.suggest-result-item::before { content: "🔍"; font-size: 12px; }
.suggest-remaining { font-size: 12px; color: #aaa; margin-top: 12px; text-align: right; }
.suggest-limit-msg { text-align: center; padding: 20px 0 8px; }
.limit-icon { font-size: 36px; margin-bottom: 8px; }
.limit-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
.limit-desc { font-size: 13px; color: #666; line-height: 1.7; }
.suggest-note { font-size: 11px; color: #aaa; margin-top: 8px; }

@media (max-width: 768px) {
    .hero-title { font-size: 32px; }
    .hero-sub { font-size: 15px; }
    .suggest-box { padding: 20px 16px; }
    .suggest-input-wrap { flex-direction: column; }
    .ba-grid { grid-template-columns: 1fr; }
    .ba-arrow { transform: rotate(90deg); }
    .target-grid { grid-template-columns: 1fr; }
    .setup-grid { grid-template-columns: 1fr; }
    .section-title { font-size: 24px; }
}

/* Stats bar */
.stats-bar { background: #fff; border-bottom: 1px solid #e9ecef; padding: 32px 0; }
.stats-grid { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr; align-items: center; max-width: 900px; margin: 0 auto; padding: 0 24px; }
.stat-item { text-align: center; padding: 0 16px; }
.stat-number { font-size: 20px; font-weight: 700; color: #1a1a1a; font-family: 'Inter', sans-serif; line-height: 1.2; margin-bottom: 4px; }
.stat-number span { color: #0ABAB5; font-size: 30px; }
.stat-label { font-size: 12px; color: #888; }
.stat-divider { width: 1px; height: 48px; background: #e9ecef; }

/* feature-icon SVG */
.feature-icon { width: 52px; height: 52px; background: #e6fafa; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.feature-card { border: 1.5px solid #f0f0f0; }
.feature-card:hover { border-color: #0ABAB5; }

/* trust-icon SVG */
.trust-icon-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; font-weight: 500; background: #f8f9fa; border-radius: 99px; padding: 6px 16px; }

@media (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stat-divider { display: none; }
}

/* タイムラインセクション */
.timeline-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; align-items:stretch; }
.timeline-col { border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.timeline-head { padding:12px 16px; font-size:13px; font-weight:500; }
.timeline-head-before { background:#FCEBEB; color:#A32D2D; }
.timeline-head-after { background:#E1F5EE; color:#0F6E56; }
.timeline-body { padding:16px; background:#fff; border:0.5px solid #eee; border-top:none; border-radius:0 0 12px 12px; flex:1; }
.timeline-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.timeline-row:last-child { margin-bottom:0; }
.timeline-time { font-size:11px; color:#999; width:36px; flex-shrink:0; padding-top:2px; }
.timeline-bubble { border-radius:8px; padding:8px 10px; font-size:13px; line-height:1.5; flex:1; }
.timeline-bubble-before { background:#FCEBEB; color:#791F1F; }
.timeline-bubble-after { background:#E1F5EE; color:#085041; }

/* 比較表 */
.ba-visual-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* 料金カード バッジ */
.mini-plan-badge { font-size:10px; font-weight:600; color:#fff; background:#185FA5; border-radius:20px; padding:2px 8px; display:inline-block; margin-bottom:4px; }
.mini-plan-desc { font-size:12px; color:#666; line-height:1.6; margin-top:4px; }

/* ===== スマホ追加対応 ===== */
@media (max-width: 768px) {
    /* ヒーロー */
    .hero-section { padding: 40px 16px 32px; }
    .hero-badge { font-size: 11px; }
    .hero-title { font-size: 28px !important; line-height: 1.3; }
    .hero-sub { font-size: 14px; }
    .hero-cta { flex-direction: column; align-items: center; gap: 10px; }
    .hero-cta .btn, .hero-cta a { width: 100%; max-width: 280px; text-align: center; }

    /* Stats bar */
    .stats-bar { padding: 20px 0; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 16px; padding: 0 16px; }
    .stat-divider { display: none; }
    .stat-number { font-size: 20px; white-space: normal; }
    .stat-number .badge { display: block; margin-top: 4px; font-size: 10px; width: fit-content; }
    .stat-item { text-align: center; padding: 8px; }
    .stat-label { font-size: 12px; line-height: 1.5; }

    /* Trust bar */
    .trust-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
    .trust-icon-item { white-space: nowrap; font-size: 13px; }

    /* タイムライン */
    .timeline-grid { grid-template-columns: 1fr !important; }

    /* 比較表 */
    .ba-visual-grid { grid-template-columns: 1fr !important; }
    .compare-section .container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .compare-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    .compare-table thead, .compare-table tbody, .compare-table tr { display: table; width: 100%; }
    .compare-table th, .compare-table td { white-space: normal; min-width: 90px; font-size: 11px; padding: 6px 4px; }
    .compare-table th:first-child, .compare-table td:first-child { min-width: 60px; }
    .compare-scroll-note { font-size: 12px; color: #aaa; text-align: center; margin-bottom: 8px; }

    /* 月曜セクションタイトル */
    .monday-section .section-title { font-size: 18px !important; }

    /* ターゲットセクション */
    .target-section .section-title { font-size: 17px !important; line-height: 1.4; }
    .target-section .section-sub { font-size: 13px; }
    .target-card-title { font-size: 14px; }
    .target-card h3 { font-size: 15px; line-height: 1.4; }

    /* CTAセクション */
    .cta-section { margin-top: 0; }

    /* セクション共通 */
    .section-title { font-size: 22px !important; }
    .container { padding-left: 16px; padding-right: 16px; }

    /* ナビ */
    .lp-nav .container { padding: 0 16px; }
    .lp-nav .btn { font-size: 12px; padding: 4px 10px; }

    /* 料金カード */
    .plan-card { margin-bottom: 16px; }
    .pricing-toggle { scale: 0.9; }

    /* フッター */
    .lp-footer .container { flex-direction: column !important; gap: 8px; text-align: center; }
}

/* ===== 月曜の朝セクション ===== */
.monday-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:32px; align-items:stretch; }
.monday-col { border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.monday-head { padding:12px 16px; font-size:13px; font-weight:500; }
.monday-head-before { background:#FCEBEB; color:#A32D2D; }
.monday-head-after { background:#E1F5EE; color:#0F6E56; }
.monday-body { padding:16px; background:#fff; border:0.5px solid #eee; border-top:none; border-radius:0 0 12px 12px; flex:1; }
.monday-row { display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; }
.monday-row:last-child { margin-bottom:0; }
.monday-time { font-size:11px; color:#999; width:36px; flex-shrink:0; padding-top:2px; }
.monday-bubble { border-radius:8px; padding:8px 10px; font-size:13px; line-height:1.5; flex:1; }
.monday-bubble-before { background:#FCEBEB; color:#791F1F; }
.monday-bubble-after { background:#E1F5EE; color:#085041; }

@media (max-width: 768px) {
    .monday-grid { grid-template-columns:1fr !important; }
    .monday-bubble { font-size:12px; }
    .monday-time { width:28px; font-size:10px; }
}

/* ===== ティーザーオーバーレイ ===== */
.teaser-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(10,15,30,0.92); backdrop-filter:blur(6px); align-items:center; justify-content:center; }
.teaser-box { background:#fff; border-radius:16px; padding:40px 36px; max-width:420px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.teaser-emoji { font-size:32px; margin-bottom:12px; }
.teaser-label { font-size:11px; font-weight:600; letter-spacing:0.1em; color:#0ABAB5; text-transform:uppercase; margin-bottom:8px; }
.teaser-title { font-size:22px; font-weight:700; margin-bottom:8px; }
.teaser-desc { font-size:14px; color:#666; margin-bottom:24px; }
.teaser-input-wrap { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; justify-content:center; }
.teaser-input { flex:1; min-width:200px; padding:10px 14px; border:1.5px solid #ddd; border-radius:8px; font-size:14px; outline:none; }
.teaser-btn { padding:10px 20px; background:#0ABAB5; color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; min-width:60px; }
.teaser-error { color:#ef4444; font-size:13px; display:none; }
.teaser-note { font-size:12px; color:#aaa; margin-top:20px; margin-bottom:0; }

/* ===== スクリーンショットセクション ===== */
.ss-section { background:#f8f9fa; padding:60px 0; }
.ss-section-title { font-size:1.8rem; font-weight:700; margin-bottom:12px; }
.ss-section-sub { color:#666; font-size:15px; }
.ss-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.08); cursor:pointer; transition:transform 0.2s,box-shadow 0.2s; }
.ss-card:hover { transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.12); }
.ss-img-wrap { overflow:hidden; height:140px; background:#f0f0f0; }
.ss-img-wrap img { width:100%; height:auto; object-fit:cover; object-position:top; }
.ss-card-body { padding:12px; }
.ss-card-label { font-size:11px; font-weight:600; color:#0ABAB5; margin-bottom:2px; }
.ss-card-desc { font-size:12px; color:#666; }
.ss-card-hint { font-size:11px; color:#aaa; margin-top:4px; }

/* ===== スクリーンショットモーダル ===== */
.ss-modal { display:none; position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.8); align-items:center; justify-content:center; padding:20px; }
.ss-modal-inner { background:#fff; border-radius:16px; max-width:900px; width:100%; overflow:hidden; position:relative; }
.ss-modal-close { position:absolute; top:12px; right:12px; background:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:18px; cursor:pointer; z-index:1; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.ss-modal-img { width:100%; display:block; }
.ss-modal-footer { padding:16px 20px; border-top:1px solid #eee; }
.ss-modal-label { font-size:13px; font-weight:600; color:#0ABAB5; margin-bottom:2px; }
.ss-modal-desc { font-size:14px; color:#333; }

/* ===== Before/After ===== */
.ba-col-flex { display:flex; flex-direction:column; justify-content:flex-start; }

/* ===== 比較表 ===== */
.compare-th-left { text-align:left; }
.compare-small { font-weight:400; font-size:11px; }
.siscan-price { font-weight:700; color:#0ABAB5; }
.siscan-time { color:#0ABAB5; font-weight:700; }

/* ===== CTAカード ===== */
.cta-card { background:#f0fffe; border-left:4px solid #0ABAB5 !important; }

/* ===== セールストーク ===== */
.sales-text { font-size:13px; color:#666; margin-bottom:12px; }

@media (max-width: 768px) {
    .ss-section { padding:32px 0; }
    .ss-section-title { font-size:1.4rem; }
    .teaser-box { padding:28px 20px; }
    .ss-modal-inner { border-radius:10px; }
}

/* ===== 料金ミニカード追加 ===== */
.mini-plan-hint { font-size:11px; color:#888; }
.mini-plan-badge-block { width:100%; text-align:center; display:block; }
.mini-plan-badge-pro { background:#BA7517; color:#fff; width:100%; text-align:center; display:block; }
.mini-plan-name-standard { color:#185FA5; }
.mini-plan-name-pro { color:#854F0B; }
.setup-card-brand { border-color:#0ABAB5; }
.cta-note { color:#aaa !important; }
.faq-wrap { max-width:700px; margin:0 auto; }

/* ===== 追加クラス ===== */
.text-brand { color:#0ABAB5; }
.cta-body-text { font-size:14px; color:#444; line-height:1.8; }
.monday-section { padding:60px 0; }
.mini-plan-badge-free { background:#888780; color:#fff; width:100%; text-align:center; display:block; border-radius:4px; }
.mini-plan-name-start { color:#0ABAB5; }

/* ===== 比較表 おすすめバッジ ===== */
.compare-rec-badge {
    display: inline-block;
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    margin-bottom: 4px;
    letter-spacing: .02em;
}

/* ===== ヒーロー セットアップ相談リンク ===== */
.hero-consult-link {
    margin-top: 10px;
    font-size: 13px;
}
.hero-consult-link a {
    text-decoration: none;
}
.hero-consult-link a:hover {
    text-decoration: underline;
}

/* 導入事例セクション */
.case-section {
    padding: 80px 0;
    background: #f8f9fa;
}
.case-label {
    font-size: 11px;
    font-weight: 500;
    color: #185FA5;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.case-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
}
.case-sub {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 40px;
}
.case-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}
.case-metric-card {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #e9ecef;
}
.case-metric-label {
    font-size: 12px;
    color: #6c757d;
    margin-bottom: 8px;
}
.case-metric-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}
.case-metric-before {
    font-size: 12px;
    color: #adb5bd;
}
.case-metric-arrow {
    font-size: 13px;
    color: #adb5bd;
}
.case-metric-after {
    font-size: 26px;
    font-weight: 700;
    color: #185FA5;
}
.case-metric-badge {
    font-size: 12px;
    font-weight: 600;
    color: #0F6E56;
}
.case-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #6c757d;
}
.case-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.case-legend-line {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}
.case-chart-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    margin-bottom: 6px;
}
.case-chart-note {
    font-size: 11px;
    color: #adb5bd;
    margin-bottom: 28px;
}
.case-comment {
    background: #E6F1FB;
    border-radius: 12px;
    padding: 20px 24px;
    font-size: 14px;
    color: #0C447C;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .case-metrics {
        grid-template-columns: 1fr;
    }
    .case-title {
        font-size: 22px;
    }
}

/* Hero subtitle */
.hero-title-sub {
    font-size: 1.15rem;
    color: #444;
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

/* Problem section 2カラム */
.problem-col-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--brand);
}
.problem-col-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    /* 「こんな画面で…」セクションタイトル */
    .ss-section-title { font-size: 16px; }

    /* 本文テキスト 句点後改行ルール */
    .hero-desc, .problem-text, .feature-desc, .step-desc, .faq-a, .lp-lead, .ss-desc, .ba-subhead {
        word-break: normal;
        overflow-wrap: break-word;
        line-height: 1.9;
    }

    /* セクションタイトル全般 */
    .section-title, .ss-section-title, .ba-headline, .feature-title { font-size: 20px; line-height: 1.5; }
    /* ビフォーアフタータイトル */
    .ba-headline { font-size: 18px !important; }

    /* コンテナ左右余白 */
    .container { padding-left: 16px !important; padding-right: 16px !important; }

    /* ヒーローエリア */
    .hero-title { font-size: 28px; }
    .hero-price-right { font-size: 12px; }
}

.lp-brand-si { font-family: Georgia, serif; color: #0ABAB5; }
.lp-brand-scan { font-family: Georgia, serif; color: #1a1a1a; }

/* ターゲットカード内キャンペーン価格 */
.price-campaign {
    color: #e53935;
    font-weight: 700;
}