/*
 * case-study.css — 導入事例 詳細ページ 固定デザイン SSOT（2026-06-02 / claude-opus-4-8）
 *
 * 社長指示「全ての事例ページのデザインがダメ→良いデザインに／流れも固定／毎回同じにしたいので外部CSSに出す」。
 *  - 事例詳細(single-case_study)の全装飾はこの1ファイルが唯一の真実(SSOT)。本文HTMLはインラインstyle禁止・cs-* クラスのみ。
 *  - 設計言語はサービスページ(svc-pages.css)と統一：ブランドブルー #0057D9 / ネイビー #08152C / Inter+Noto Sans JP / 角丸・ソフト影。
 *  - 固定フロー: HERO → 成果オーバービュー → [本文: 痛み→KPI表→導入前の課題→支援内容→導入後の変化→顧客の声→定着理由→FAQ] → 関連サービス → 監修 → 無料相談CTA。
 *  - 新クラスが必要なときはこのファイルに追加→version追記→社長承認。本文に新規inline styleを足すのは禁止（毎回同じデザインを壊すため）。
 */

:root{
  --cs-blue:#0057D9; --cs-blue-d:#003FA3; --cs-navy:#08152C; --cs-ink:#0F172A;
  --cs-text:#3B4656; --cs-sub:#64748B; --cs-line:#E5EAF1; --cs-soft:#F4F8FF; --cs-bg:#FAFBFD;
}

/* ====== 全体ラッパ ====== */
.cs-page{ font-family:'Noto Sans JP',sans-serif; color:var(--cs-text); background:#fff; -webkit-font-smoothing:antialiased; }
.cs-wrap{ max-width:880px; margin:0 auto; padding:0 24px; }

/* ====== HERO ====== */
.cs-hero{ position:relative; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; background:var(--cs-navy); }
.cs-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.42; }
.cs-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,21,44,.45) 0%,rgba(8,21,44,.82) 100%); }
.cs-hero__inner{ position:relative; z-index:2; max-width:880px; width:100%; margin:0 auto; padding:64px 24px 56px; }
.cs-hero__badge{ display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.06em; color:#fff; background:var(--cs-blue); padding:7px 16px; border-radius:999px; margin-bottom:20px; }
.cs-hero__badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); }
.cs-hero__title{ font-size:clamp(25px,4vw,40px); font-weight:900; line-height:1.42; color:#fff; letter-spacing:-.01em; margin:0 0 18px; }
.cs-hero__company{ font-size:15px; font-weight:700; color:rgba(220,233,255,.92); margin:0; }
.cs-hero__kicker{ display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; color:#7DB0FF; text-transform:uppercase; margin-bottom:14px; }

/* ====== 成果オーバービュー（HERO直下・一瞬で信頼） ====== */
.cs-overview{ background:linear-gradient(180deg,var(--cs-navy) 0%,var(--cs-navy) 38%,#fff 38%,#fff 100%); }
.cs-overview__card{ max-width:880px; margin:0 auto; transform:translateY(0); background:#fff; border:1px solid var(--cs-line); border-radius:20px; box-shadow:0 24px 60px -28px rgba(0,87,217,.35); padding:14px 8px; display:grid; grid-template-columns:repeat(3,1fr); }
.cs-ov__item{ padding:22px 26px; text-align:center; position:relative; }
.cs-ov__item + .cs-ov__item::before{ content:''; position:absolute; left:0; top:18%; height:64%; width:1px; background:var(--cs-line); }
.cs-ov__label{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.04em; color:var(--cs-sub); margin-bottom:10px; }
.cs-ov__value{ display:block; font-size:16px; font-weight:800; color:var(--cs-ink); line-height:1.5; }
.cs-ov__item--result .cs-ov__value{ font-size:21px; font-weight:900; color:var(--cs-blue); letter-spacing:-.01em; }

/* ====== 本文ボディ ====== */
.cs-body{ padding:62px 0 8px; }
.cs-body .cs-wrap > *{ }
.cs-lead{ font-size:17px; line-height:2.0; color:var(--cs-ink); font-weight:500; margin:0 0 16px; }
.cs-body p{ font-size:15.5px; line-height:1.96; color:var(--cs-text); margin:0 0 22px; }
.cs-body a{ color:var(--cs-blue); font-weight:700; text-decoration:none; border-bottom:1px solid rgba(0,87,217,.35); }
.cs-body a:hover{ border-bottom-color:var(--cs-blue); }

/* セクション見出し */
.cs-section{ margin-top:58px; }
.cs-h2{ font-size:clamp(21px,2.6vw,27px); font-weight:900; color:var(--cs-ink); line-height:1.5; letter-spacing:-.01em; margin:0 0 26px; padding-bottom:16px; border-bottom:2px solid var(--cs-line); position:relative; }
.cs-h2::after{ content:''; position:absolute; left:0; bottom:-2px; width:64px; height:2px; background:var(--cs-blue); }
.cs-h3{ font-size:18.5px; font-weight:800; color:var(--cs-ink); line-height:1.6; margin:38px 0 18px; padding-left:14px; border-left:4px solid var(--cs-blue); }

/* ====== KPI比較表 ====== */
.cs-kpi{ margin:34px 0; border-radius:16px; overflow:hidden; border:1px solid var(--cs-line); box-shadow:0 10px 30px -20px rgba(15,23,42,.3); }
.cs-kpi table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.cs-kpi thead th{ background:var(--cs-navy); color:#fff; font-weight:800; padding:16px 18px; text-align:left; font-size:13.5px; letter-spacing:.02em; }
.cs-kpi thead th:not(:first-child){ text-align:center; }
.cs-kpi tbody td{ padding:15px 18px; border-bottom:1px solid var(--cs-line); color:var(--cs-text); }
.cs-kpi tbody tr:last-child td{ border-bottom:none; }
.cs-kpi tbody tr:nth-child(even){ background:var(--cs-bg); }
.cs-kpi tbody td:first-child{ font-weight:800; color:var(--cs-ink); }
.cs-kpi td.cs-kpi__before{ text-align:center; color:var(--cs-sub); text-decoration:line-through; text-decoration-thickness:1px; }
.cs-kpi td.cs-kpi__after{ text-align:center; color:var(--cs-blue); font-weight:800; }
.cs-kpi td.cs-kpi__rate{ text-align:center; color:var(--cs-blue-d); font-weight:900; }

/* ====== Before / After 2カラム ====== */
.cs-ba{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:34px 0; }
.cs-ba__col{ border-radius:16px; padding:26px 24px; border:1px solid var(--cs-line); }
.cs-ba__col--before{ background:#F8FAFC; }
.cs-ba__col--after{ background:linear-gradient(160deg,var(--cs-soft) 0%,#fff 75%); border-color:#D6E6FB; }
.cs-ba__label{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.04em; padding:5px 13px; border-radius:999px; margin-bottom:16px; }
.cs-ba__col--before .cs-ba__label{ background:#E9EDF3; color:#64748B; }
.cs-ba__col--after .cs-ba__label{ background:var(--cs-blue); color:#fff; }
.cs-ba__list{ list-style:none; margin:0; padding:0; }
.cs-ba__list li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.7; color:var(--cs-text); margin-bottom:13px; }
.cs-ba__list li:last-child{ margin-bottom:0; }
.cs-ba__col--before .cs-ba__list li::before{ content:''; position:absolute; left:4px; top:9px; width:10px; height:2px; background:#94A3B8; }
.cs-ba__col--after .cs-ba__list li::before{ content:''; position:absolute; left:2px; top:3px; width:15px; height:15px; background:var(--cs-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/9px no-repeat; border-radius:5px; }

/* ====== 支援ステップ ====== */
.cs-steps{ margin:34px 0; counter-reset:cs-step; }
.cs-step{ display:flex; gap:18px; align-items:flex-start; position:relative; padding-bottom:22px; }
.cs-step:not(:last-child)::before{ content:''; position:absolute; left:21px; top:46px; bottom:-2px; width:2px; background:var(--cs-line); }
.cs-step__num{ flex-shrink:0; width:44px; height:44px; border-radius:50%; background:var(--cs-blue); color:#fff; font-family:'Inter',sans-serif; font-weight:800; font-size:17px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px -6px rgba(0,87,217,.6); z-index:1; }
.cs-step__body{ flex:1; background:var(--cs-bg); border:1px solid var(--cs-line); border-radius:14px; padding:18px 22px; }
.cs-step__title{ font-size:16px; font-weight:800; color:var(--cs-ink); margin:0 0 7px; }
.cs-step__desc{ font-size:14.5px; line-height:1.75; color:var(--cs-text); margin:0; }

/* ====== 成果スタッツ（大きな数字） ====== */
.cs-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:34px 0; }
.cs-stat{ background:linear-gradient(160deg,var(--cs-soft) 0%,#fff 72%); border:1px solid #D6E6FB; border-radius:16px; padding:28px 18px; text-align:center; }
.cs-stat__num{ display:block; font-family:'Inter',sans-serif; font-size:38px; font-weight:900; color:var(--cs-blue); line-height:1; letter-spacing:-.02em; margin-bottom:10px; }
.cs-stat__label{ display:block; font-size:13px; font-weight:600; color:var(--cs-sub); line-height:1.5; }

/* ====== 顧客の声 ====== */
.cs-voice{ position:relative; background:linear-gradient(160deg,#F6F9FE 0%,#fff 100%); border:1px solid var(--cs-line); border-radius:18px; padding:34px 36px 30px; margin:38px 0; box-shadow:0 14px 36px -24px rgba(0,87,217,.4); }
.cs-voice::before{ content:'“'; position:absolute; top:6px; left:24px; font-family:'Inter',serif; font-size:78px; font-weight:900; color:rgba(0,87,217,.13); line-height:1; }
.cs-voice__quote{ position:relative; font-size:16.5px; line-height:1.95; color:var(--cs-ink); font-weight:500; margin:0 0 16px; padding-left:6px; }
.cs-voice__author{ display:block; text-align:right; font-size:13.5px; font-weight:700; color:var(--cs-sub); font-style:normal; }

/* ====== ポイント / 注記ボックス ====== */
.cs-point{ background:linear-gradient(135deg,var(--cs-soft) 0%,#fff 100%); border:1px solid #D6E6FB; border-left:4px solid var(--cs-blue); border-radius:0 12px 12px 0; padding:20px 24px; margin:30px 0; }
.cs-point__label{ display:block; font-size:13px; font-weight:800; color:var(--cs-blue); margin-bottom:8px; }
.cs-point p{ margin:0; font-size:14.5px; line-height:1.8; color:var(--cs-text); }

/* ====== FAQ ====== */
.cs-faq{ margin:24px 0; }
.cs-faq__item{ border:1px solid var(--cs-line); border-radius:13px; margin-bottom:14px; overflow:hidden; background:#fff; }
.cs-faq__q{ display:flex; gap:11px; padding:18px 22px; background:var(--cs-bg); font-size:15.5px; font-weight:800; color:var(--cs-ink); line-height:1.6; }
.cs-faq__q::before{ content:'Q'; font-family:'Inter',sans-serif; color:var(--cs-blue); flex-shrink:0; }
.cs-faq__a{ display:flex; gap:11px; padding:18px 22px; font-size:14.5px; line-height:1.85; color:var(--cs-text); }
.cs-faq__a::before{ content:'A'; font-family:'Inter',sans-serif; color:var(--cs-blue-d); font-weight:800; flex-shrink:0; }

/* ====== 関連サービス導線 ====== */
.cs-related{ background:var(--cs-bg); border-top:1px solid var(--cs-line); padding:64px 0; margin-top:60px; }
.cs-related__head{ text-align:center; margin-bottom:34px; }
.cs-related__kicker{ display:inline-block; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--cs-blue); text-transform:uppercase; margin-bottom:10px; }
.cs-related__title{ font-size:22px; font-weight:900; color:var(--cs-ink); margin:0; }
.cs-related__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cs-svc{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--cs-line); border-radius:16px; padding:26px 24px; text-decoration:none; transition:transform .3s,box-shadow .3s,border-color .3s; }
.cs-svc:hover{ transform:translateY(-5px); box-shadow:0 18px 40px -22px rgba(0,87,217,.5); border-color:#C9DEFB; }
.cs-svc__name{ font-size:16px; font-weight:900; color:var(--cs-ink); margin:0 0 8px; }
.cs-svc__desc{ font-size:13.5px; line-height:1.7; color:var(--cs-sub); margin:0 0 18px; flex:1; }
.cs-svc__more{ font-size:13px; font-weight:800; color:var(--cs-blue); display:inline-flex; align-items:center; gap:6px; }
.cs-svc__more::after{ content:'→'; transition:transform .3s; }
.cs-svc:hover .cs-svc__more::after{ transform:translateX(4px); }

/* ====== 監修者 ====== */
.cs-author{ max-width:880px; margin:48px auto 0; padding:26px 24px; background:var(--cs-bg); border:1px solid var(--cs-line); border-radius:16px; }
.cs-author__role{ font-size:12.5px; font-weight:700; color:var(--cs-blue); margin:0 0 12px; letter-spacing:.02em; }
.cs-author__name{ font-size:17px; font-weight:900; color:var(--cs-ink); margin:0 0 4px; }
.cs-author__title{ font-size:13px; color:var(--cs-sub); margin:0 0 10px; }
.cs-author__desc{ font-size:13.5px; line-height:1.75; color:var(--cs-text); margin:0; }
.cs-date{ max-width:880px; margin:14px auto 0; font-size:12px; color:#9AA6B5; text-align:right; }

/* ====== 最終CTA ====== */
.cs-cta{ position:relative; background:linear-gradient(135deg,var(--cs-navy) 0%,#0C2A5E 100%); color:#fff; padding:74px 24px; overflow:hidden; }
.cs-cta::before{ content:''; position:absolute; top:-160px; right:-120px; width:480px; height:480px; background:radial-gradient(circle,rgba(0,87,217,.4) 0%,transparent 65%); border-radius:50%; }
.cs-cta__inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; text-align:center; }
.cs-cta__title{ font-size:clamp(22px,3vw,30px); font-weight:900; line-height:1.5; color:#fff; margin:0 0 16px; }
.cs-cta__title em{ font-style:normal; color:#7DB0FF; }
.cs-cta__lead{ font-size:15px; line-height:1.9; color:rgba(226,238,255,.88); margin:0 0 32px; }
.cs-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cs-btn{ display:inline-flex; align-items:center; gap:10px; padding:17px 36px; border-radius:999px; font-size:15.5px; font-weight:800; text-decoration:none; transition:transform .25s,box-shadow .25s; }
.cs-btn--primary{ background:#fff; color:var(--cs-blue-d); box-shadow:0 14px 34px -12px rgba(0,0,0,.5); }
.cs-btn--primary:hover{ transform:translateY(-2px); }
.cs-btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(180,210,255,.5); }
.cs-btn--ghost:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.cs-cta__note{ font-size:12.5px; color:rgba(200,218,245,.6); margin:22px 0 0; }

/* ====== レスポンシブ ====== */
@media(max-width:820px){
  .cs-hero{ min-height:340px; }
  .cs-overview__card{ grid-template-columns:1fr; gap:0; padding:6px; }
  .cs-ov__item{ padding:18px; }
  .cs-ov__item + .cs-ov__item::before{ display:none; }
  .cs-ov__item:not(:last-child){ border-bottom:1px solid var(--cs-line); }
  .cs-ba{ grid-template-columns:1fr; }
  .cs-stats{ grid-template-columns:1fr; }
  .cs-related__grid{ grid-template-columns:1fr; }
  .cs-body{ padding:44px 0 4px; }
}

/* ===================================================================
 * v3 進化（2026-06-02 PM・CODEXレビュー反映）: ヒーロー成果チップ／
 *   冒頭スペック表(cs-spec)／成果カード(cs-wins)／本文画像(cs-figure)。
 *   cs-overview(3項目)は cs-spec(プロフィール表)へ格上げ。
 * =================================================================== */

/* HERO 改善：背景アイキャッチを少し明るく＋成果チップ */
.cs-hero__bg{ opacity:.5; }
.cs-hero::after{ background:linear-gradient(180deg,rgba(8,21,44,.4) 0%,rgba(8,21,44,.86) 100%); }
.cs-hero__result{ display:inline-flex; align-items:center; gap:11px; margin-top:22px; background:rgba(255,255,255,.09); border:1px solid rgba(150,195,255,.42); border-radius:13px; padding:11px 18px; backdrop-filter:blur(4px); }
.cs-hero__result-label{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#9EC6FF; text-transform:uppercase; }
.cs-hero__result-val{ font-size:16px; font-weight:900; color:#fff; letter-spacing:-.01em; }

/* 冒頭スペック表（読者が"自社に近いか"を一瞬で判断） */
.cs-spec-wrap{ background:#fff; padding:42px 0 4px; }
.cs-spec{ max-width:880px; margin:0 auto; background:#fff; border:1px solid var(--cs-line); border-radius:18px; box-shadow:0 22px 56px -30px rgba(0,87,217,.4); overflow:hidden; }
.cs-spec__cap{ display:flex; align-items:center; gap:9px; padding:16px 24px; background:var(--cs-navy); }
.cs-spec__cap span{ font-family:'Inter',sans-serif; font-size:11.5px; font-weight:800; letter-spacing:.14em; color:#9EC6FF; text-transform:uppercase; }
.cs-spec table{ width:100%; border-collapse:collapse; }
.cs-spec th{ width:32%; text-align:left; vertical-align:top; padding:15px 24px; background:var(--cs-bg); font-size:12.5px; font-weight:800; color:var(--cs-sub); border-bottom:1px solid var(--cs-line); letter-spacing:.02em; }
.cs-spec td{ padding:15px 24px; vertical-align:top; font-size:14.5px; font-weight:600; color:var(--cs-ink); line-height:1.7; border-bottom:1px solid var(--cs-line); }
.cs-spec tr:last-child th, .cs-spec tr:last-child td{ border-bottom:none; }
.cs-spec tr.cs-spec--result td{ color:var(--cs-blue); font-weight:800; }

/* 成果カード（4点の証拠サマリー） */
.cs-wins{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:34px 0; }
.cs-win{ display:flex; gap:13px; align-items:flex-start; background:linear-gradient(150deg,var(--cs-soft) 0%,#fff 80%); border:1px solid #D6E6FB; border-radius:14px; padding:18px 20px; }
.cs-win__ico{ flex-shrink:0; width:26px; height:26px; border-radius:8px; background:var(--cs-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat; margin-top:1px; }
.cs-win__txt{ font-size:14.5px; font-weight:700; color:var(--cs-ink); line-height:1.55; }

/* 本文画像（アイキャッチ等を本文に普通に入れる） */
.cs-figure{ margin:36px 0; }
.cs-figure img{ width:100%; height:auto; display:block; border-radius:16px; border:1px solid var(--cs-line); box-shadow:0 16px 40px -24px rgba(15,23,42,.4); }
.cs-figure figcaption{ margin-top:10px; font-size:12.5px; color:var(--cs-sub); text-align:center; }

@media(max-width:820px){
  .cs-spec th{ width:38%; padding:13px 16px; }
  .cs-spec td{ padding:13px 16px; }
  .cs-wins{ grid-template-columns:1fr; }
}

/* ===================================================================
 * v4 進化（2026-06-03 社長フィードバック）:
 *   「ヒーロー背景にアイキャッチを薄く敷くのは違う／顔つきの既存アイキャッチを
 *    ちゃんと綺麗に見せたい／生成画像は使わない／AI臭を消す」。
 *   → ヒーローは既存 featured アイキャッチ(実写真・顔つき)をそのまま大きく鮮明に表示。
 *     暗幕wash・別タイトルoverlay・生成画像・kicker を全廃。タイトルはアイキャッチが担い
 *     H1 は SEO 用に視覚非表示(cs-sr)で保持。
 * =================================================================== */
.cs-hero{ position:static; min-height:0; display:block; overflow:visible; background:#fff; padding:36px 0 0; }
.cs-hero::before, .cs-hero::after{ display:none !important; content:none; }
.cs-hero__media{ margin:0; line-height:0; }
.cs-hero__media img{ width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 24px 60px -30px rgba(15,23,42,.5); }
.cs-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:20px; }
.cs-hero__meta .cs-hero__badge{ position:static; margin:0; }
.cs-hero__company{ color:var(--cs-sub); font-size:14px; font-weight:700; margin:0; }
.cs-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* スペック表は写真の直後に自然に続く */
.cs-spec-wrap{ padding:34px 0 4px; }

/* ===================================================================
 * v5 進化（2026-06-03 社長「ヒーローは元の演出の方がよかった／おまかせ」）:
 *   白地ベタ置き(v4)をやめ、ネイビーのステージに既存アイキャッチ(顔つき実写真)を
 *   大きく鮮明に見せる"演出ヒーロー"へ。タイトル二重なし・暗幕washなし・生成画像なし。
 * =================================================================== */
.cs-hero{ background:linear-gradient(158deg,#08152C 0%,#0C2046 56%,#102A50 100%); padding:50px 0 46px; position:relative; overflow:hidden; }
.cs-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 12%,rgba(82,158,255,.16),transparent 60%); pointer-events:none; }
.cs-hero::after{ display:none !important; content:none; }
.cs-hero .cs-wrap{ position:relative; z-index:1; max-width:940px; }
.cs-hero__media{ margin:0; }
.cs-hero__media img{ width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 36px 80px -30px rgba(0,0,0,.65); }
.cs-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px; margin-top:24px; }
.cs-hero__meta .cs-hero__badge{ position:static; margin:0; }
.cs-hero__company{ color:rgba(220,233,255,.94); font-size:14.5px; font-weight:700; margin:0; }
.cs-spec-wrap{ padding:40px 0 4px; }

/* ===================================================================
 * v6 進化（2026-06-03 社長「ヒーローは元々の演出デザインが良い／背景は別に／
 *   アイキャッチ画像は別の場所(本文)に貼る」）:
 *   ヒーロー＝ネイビー演出背景＋タイトル文字(svc/archiveと統一)。アイキャッチは
 *   ヒーロー背景にせず、ヒーロー直下に "featured画像" として配置(別のところ)。
 * =================================================================== */
.cs-hero{ position:relative; display:block; min-height:0; overflow:hidden; padding:86px 0 82px;
  background:linear-gradient(158deg,#08152C 0%,#0C2046 56%,#102A50 100%); }
.cs-hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 14%,rgba(82,158,255,.18),transparent 60%),
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/46px 46px; }
.cs-hero::after{ display:none !important; content:none; }
.cs-hero .cs-wrap{ position:relative; z-index:1; max-width:880px; }
.cs-hero__kicker{ display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.16em; color:#7DB0FF; text-transform:uppercase; margin-bottom:16px; }
.cs-hero__badge{ position:static; display:inline-flex; align-items:center; gap:7px; font-family:'Inter',sans-serif; font-size:12px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--cs-blue); padding:7px 16px; border-radius:999px; margin:0 0 18px; }
.cs-hero__badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.85); }
.cs-hero__title{ font-size:clamp(26px,4vw,40px); font-weight:900; line-height:1.45; color:#fff; letter-spacing:-.01em; margin:0 0 18px; }
.cs-hero__company{ font-size:15px; font-weight:700; color:rgba(220,233,255,.92); margin:0; }
.cs-hero__result{ display:inline-flex; align-items:center; gap:11px; margin-top:24px; background:rgba(255,255,255,.09); border:1px solid rgba(150,195,255,.42); border-radius:13px; padding:11px 18px; }
.cs-hero__result-label{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:.1em; color:#9EC6FF; text-transform:uppercase; }
.cs-hero__result-val{ font-size:16px; font-weight:900; color:#fff; letter-spacing:-.01em; }

/* アイキャッチ＝ヒーロー直下の featured 画像（別のところに配置・顔つき実写真を鮮明に） */
.cs-featured{ background:#fff; padding:0; }
.cs-featured .cs-wrap{ max-width:940px; margin-top:-40px; position:relative; z-index:2; }
.cs-figure--featured{ margin:0; line-height:0; }
.cs-figure--featured img{ width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 34px 78px -30px rgba(0,0,0,.55); }
.cs-spec-wrap{ padding:38px 0 4px; }
@media(max-width:820px){ .cs-hero{ padding:60px 0 58px; } .cs-featured .cs-wrap{ margin-top:-28px; } }

/* ===================================================================
 * v7（2026-06-03 社長「ここのデザインAI臭がする」＝cs-point囲み）:
 *   水色グラデ＋青左枠の"AI生成記事に多い典型のtipボックス"を廃し、
 *   編集的な強調（青アクセント線＋ラベル＋大きめの断言文・囲みなし）へ。
 * =================================================================== */
.cs-point{ background:none !important; border:none !important; border-radius:0 !important; padding:0 !important; margin:42px 0; position:relative; }
.cs-point__label{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--cs-blue); margin-bottom:12px; }
.cs-point__label::before{ content:''; width:24px; height:2px; background:var(--cs-blue); }
.cs-point p{ font-size:18px; line-height:1.85; color:var(--cs-ink); font-weight:700; margin:0; }
@media(max-width:820px){ .cs-point p{ font-size:16.5px; } }

/* ===================================================================
 * v8（2026-06-03 社長「ヒーロー背景に別の画像を入れて／CSS外部に／事例記事全部一緒」）:
 *   ヒーローの背景に "事例共通の演出用背景画像"(アイキャッチとは別・文字なし抽象/濃紺)を
 *   外部CSSで適用。全事例で同一(CSS1枚=SSOT)。タイトル可読性のため濃紺グラデを上に重ねる。
 * =================================================================== */
.cs-hero{
  background:
    linear-gradient(158deg, rgba(8,21,44,.90) 0%, rgba(12,32,70,.82) 55%, rgba(16,42,80,.76) 100%),
    url('https://boostx-inc.com/wp-content/uploads/2026/06/eyecatch_case-study-hero-ai.jpg') center/cover no-repeat,
    #08152C;
}