@charset "UTF-8";
/* ============================================================
   crmstage.css
   統合CRM/CDPプラットフォーム「CRMstage」製品ページ 専用CSS
   対象ページ：/solution/crmstage/crmstage_outline.html（MT index）
   ※ このファイルは当該ページ専用です。他ページへの影響はありません。
   ※ header / footer / breadcrumb 用のスタイルは含みません
     （既存の共通テンプレート側のCSSをそのまま利用してください）
============================================================ */

/* 不足しているフォントウェイトのみ追加読み込み
   （Inter 700/900、Noto Sans JP 900は既存の style.css の @import に
     含まれていないため、本ページの見出し・数字表示用に追加） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&family=Noto+Sans+JP:wght@900&display=swap');

/* ============================================================
   CRMstage カラー変数（水色・ブルー基調 + ピンクアクセント）
============================================================ */
:root{
  --cs-blue:        #1E88E5;
  --cs-blue-dark:   #1257A6;
  --cs-blue-light:  rgba(30,136,229,0.08);
  --cs-blue-grad:   linear-gradient(90deg, #1E88E5 0%, #1257A6 100%);
  --cs-blue-shadow: rgba(30,136,229,0.28);
  --cs-pink:        #BE0161;
  --cs-pink2:       #ff4081;
  --cs-pink-light:  rgba(190,1,97,0.08);
  --cs-pink-grad:   linear-gradient(90deg, #BE0161 0%, #ff4081 100%);
  --cs-pink-shadow: rgba(190,1,97,0.28);
  --cs-navy:        #0d2338;
}

/* FAQのアコーディオン用（ブラウザ標準マーカーを消す） */
.cs-faq-item summary::-webkit-details-marker{display:none;}

/* ============================================================
   このページ専用：サイドバー／ページタイトル背景（MV）の非表示
   ※ 本CSSは crmstage_outline.html にのみ読み込む前提のため、
     他ページに影響しません（「会社案内」カテゴリでの非表示措置と同様の効果を、
     ページ専用CSSで実現しています）。
============================================================ */
/* サイドバー（#sidebar）を非表示にし、本文エリア（.body-wrap）を全幅化 */
#sidebar{display:none !important;}
.body-two{display:block !important;}
.body-two .body-wrap{width:100% !important;max-width:100% !important;}

/* ヘッダー直下のページタイトル背景（.mv）を非表示 */
.mv{display:none !important;}

/* .content-wrap（このページのみ）の上パディングをリセット。
   .mvを非表示にしても親の.content-wrapに元々あるpadding-top:30px（SP時15px）が
   残ってしまい、ヘッダー直下に白い余白ができてしまうため、
   ヒーローを含むcontent-wrapに限定して上パディングを0にする。
   （下部の「導入相談」等、別のcontent-wrapインスタンスには影響しない） */
.content-wrap:has(.cs-hero){padding-top:0!important;}

/* 上記で消した「ヘッダー直下の余白」の代わりに、固定ヘッダーの高さ
   （PC:80px／SP:72px。ref/style.cssのheader-inner基準）を、ヒーロー自身の
   padding-topに直接加算する（下の「① HERO」内、.cs-heroのpadding指定を参照）。
   これにより、ヒーローの背景がヘッダー背面まで届き、白い余白が発生しない。 */

/* ============================================================
   MT本文共通CSS（.body-wrap p / .body-wrap a）による上書き対策
   ※ 本ページはMTの本文エリア(.body-wrap)内に流し込まれるため、
     lower.cssの以下のルール（詳細度 0,1,1）が、本ページの単一クラス指定
     （詳細度 0,1,0）を上書きしてしまう問題への対策。
       .body-wrap p, .body-txt { font-size:16px; line-height:1.8; margin-bottom:30px; }
       .body-wrap a { color:var(--c-pitchblack); text-decoration:underline; }
     → 該当箇所に !important を付与し、意図したデザイン（文字サイズ・行間・
       余白・ボタン文字色）を保持する。
============================================================ */
/* pタグを使用している箇所のフォントサイズ／行間／下マージンを保護 */
.cs-hero-lead{font-size:16px!important;line-height:1.95!important;margin-bottom:36px!important;}
.cs-hero-stat-num{font-size:25px!important;line-height:1.3!important;margin-bottom:0!important;}
.cs-hero-stat-label{font-size:12px!important;margin-bottom:0!important;}
.cs-section-lead{font-size:15.5px!important;line-height:1.9!important;margin-bottom:0!important;}
.cs-problem-ttl{font-size:15px!important;line-height:1.5!important;margin-bottom:8px!important;}
.cs-problem-desc{font-size:13px!important;line-height:1.75!important;margin-bottom:0!important;}
.cs-problem-conclusion-ttl{font-size:21px!important;line-height:1.6!important;margin-bottom:12px!important;}
.cs-problem-conclusion-txt{font-size:14.5px!important;line-height:1.9!important;margin-bottom:0!important;}
.cs-origin-desc{font-size:14px!important;line-height:1.95!important;margin-bottom:0!important;}
.cs-concept-intro p{font-size:15.5px!important;line-height:2!important;margin-bottom:0!important;}
.cs-feature-desc{font-size:13.5px!important;line-height:1.85!important;margin-bottom:0!important;}
.cs-product-sub{font-size:13px!important;margin-bottom:20px!important;}
.cs-product-desc{font-size:13.5px!important;line-height:1.85!important;margin-bottom:20px!important;}
.cs-product-for{font-size:12.5px!important;line-height:1.7!important;margin-bottom:0!important;}
.cs-func-tags-ttl{font-size:15px!important;margin-bottom:18px!important;}
.cs-license-ttl{font-size:15px!important;margin-bottom:18px!important;}
.cs-license-item-ttl{font-size:13.5px!important;margin-bottom:5px!important;}
.cs-license-item-desc{font-size:12px!important;line-height:1.75!important;margin-bottom:0!important;}
.cs-why-desc{font-size:13.5px!important;line-height:1.85!important;margin-bottom:0!important;}
.cs-case-num{font-size:11px!important;margin-bottom:6px!important;}
.cs-case-desc{font-size:13.5px!important;line-height:1.9!important;margin-bottom:16px!important;}
.cs-faq-a p{font-size:14px!important;line-height:1.9!important;margin-bottom:0!important;}
.cs-cta-lead{font-size:15.5px!important;line-height:1.9!important;margin-bottom:24px!important;}
.cs-concept-diagram-caption{font-size:11.5px!important;margin-bottom:0!important;}

/* 画像（.body-wrap img によるセンタリング配置・width:autoの上書き対策） */
.cs-concept-diagram img,.cs-case-img img{
  max-width:100%!important;width:100%!important;margin-bottom:0!important;
  display:block!important;position:static!important;left:0!important;transform:none!important;
}

/* CTAボタン／リンクの文字色・下線装飾を保護（.body-wrap a による黒文字・下線化を防止） */
.cs-hero-btn-primary{color:#fff!important;text-decoration:none!important;}
.cs-hero-btn-secondary{color:var(--cs-blue-dark)!important;text-decoration:none!important;}
.cs-cta-btn-primary{color:var(--cs-pink)!important;text-decoration:none!important;}
.cs-cta-btn-secondary{color:rgba(255,255,255,.85)!important;text-decoration:none!important;}

/* ============================================================
   ① HERO（LPチックな独自ヒーロー）
============================================================ */
.cs-hero{
  position:relative;
  overflow:hidden;
  /* 76px(本来の上パディング) + 72px(SP時の固定ヘッダー高さ) */
  padding:148px 20px 104px;
  background:linear-gradient(135deg, #eaf5ff 0%, #dcedfb 35%, #cfe6fb 65%, #bfe0fb 100%);
}
@media (min-width:900px){
  .cs-hero{
    /* 96px(本来の上パディング) + 80px(PC時の固定ヘッダー高さ) */
    padding:176px 20px 116px;
    min-height:600px;
    display:flex;align-items:center;
    background-image:
      linear-gradient(90deg, rgba(234,245,255,0.97) 0%, rgba(228,242,255,0.9) 32%, rgba(220,238,255,0.35) 52%, rgba(220,238,255,0) 66%),
      url('/images/crmstage_hero_bg.png');
    background-size:cover, cover;
    background-position:center center, center center;
    background-repeat:no-repeat, no-repeat;
  }
}
.cs-hero-inner{
  max-width:1130px;margin:0 auto;position:relative;z-index:1;width:100%;
}
@media (min-width:900px){
  .cs-hero-text{max-width:560px;}
}
.cs-hero-label{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
}
.cs-hero-badge{
  display:inline-block;padding:5px 16px;font-size:12px;font-weight:bold;color:#fff;
  background:var(--cs-blue-grad);border-radius:20px;letter-spacing:.06em;
  box-shadow:0 4px 14px var(--cs-blue-shadow);
}
.cs-hero-en{font-size:12px;font-weight:bold;color:var(--cs-blue-dark);letter-spacing:.18em;font-family:"Inter",sans-serif;}
.cs-hero-ttl{
  font-size:38px;font-weight:900;line-height:1.5;color:var(--cs-navy);
  margin-bottom:22px;font-feature-settings:"palt";
}
.cs-hero-ttl .accent{
  color:var(--cs-pink);
  position:relative;
}
.cs-hero-lead{
  font-size:16px;line-height:1.95;color:#3a4a5c;max-width:520px;margin-bottom:36px;
}
.cs-hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px;}
.cs-hero-btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:16px 38px;font-size:15px;font-weight:bold;
  color:#fff;background:var(--cs-pink-grad);border-radius:50px;box-shadow:0 8px 24px var(--cs-pink-shadow);
  transition:all .3s;
}
.cs-hero-btn-primary:hover{transform:translateY(-3px);opacity:1;box-shadow:0 14px 30px var(--cs-pink-shadow);}
.cs-hero-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;padding:15px 34px;font-size:15px;font-weight:bold;
  color:var(--cs-blue-dark);background:#fff;border:1.5px solid var(--cs-blue);border-radius:50px;
  transition:all .3s;
}
.cs-hero-btn-secondary:hover{transform:translateY(-3px);opacity:1;background:var(--cs-blue-light);}
.cs-hero-trust{display:flex;gap:22px;flex-wrap:wrap;}
.cs-hero-trust-item{
  font-size:12.5px;font-weight:bold;color:var(--cs-blue-dark);
  display:flex;align-items:center;gap:6px;
}
.cs-hero-trust-item svg{flex-shrink:0;color:var(--cs-blue);}

@media (max-width:899px){
  .cs-hero-lead{max-width:100%;}
}

/* ============================================================
   ①-B 実績スタッツバー
============================================================ */
.cs-hero-stats-wrap{max-width:1160px;margin:-46px auto 0;position:relative;z-index:5;padding:0 20px;}
.cs-hero-stats{
  background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(20,60,100,.16);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.cs-hero-stat{padding:26px 18px;text-align:center;position:relative;}
.cs-hero-stat + .cs-hero-stat::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:60%;background:#e5ecf3;
}
.cs-hero-stat-icon{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;
  background:var(--cs-blue-light);color:var(--cs-blue);margin:0 auto 10px;
}
.cs-hero-stat:nth-child(2) .cs-hero-stat-icon{background:var(--cs-pink-light);color:var(--cs-pink);}
.cs-hero-stat:nth-child(3) .cs-hero-stat-icon{background:var(--cs-blue-light);color:var(--cs-blue-dark);}
.cs-hero-stat-num{font-size:25px;font-weight:900;color:var(--cs-navy);line-height:1.3;font-family:"Inter","Noto Sans JP",sans-serif;}
.cs-hero-stat-num small{font-size:13px;font-weight:bold;margin-left:2px;}
.cs-hero-stat-label{font-size:12px;font-weight:bold;color:#889;margin-top:5px;letter-spacing:.02em;}
@media (max-width:640px){
  .cs-hero-stats{grid-template-columns:1fr;}
  .cs-hero-stat + .cs-hero-stat::before{display:none;}
  .cs-hero-stat{border-bottom:1px solid #eef2f7;}
  .cs-hero-stat:last-child{border-bottom:none;}
}

/* ============================================================
   共通セクション設定
============================================================ */
.cs-section{padding:84px 0;}
.cs-section-white{background:#fff;}
.cs-section-gray{background:#f5f9fd;}
.cs-section-navy{background:linear-gradient(135deg,#0b1c2f 0%,#0d2338 45%,#123152 100%);}
.cs-section-inner{max-width:1130px;margin:0 auto;padding:0 20px;}
.cs-section-head{margin-bottom:52px;text-align:center;}
.cs-section-head.align-left{text-align:left;}
.cs-label{
  display:inline-block;padding:5px 18px;margin-bottom:16px;font-size:12px;font-weight:bold;
  color:var(--cs-blue-dark);background:var(--cs-blue-light);border-radius:20px;letter-spacing:.12em;
}
.cs-section-ttl{
  font-size:30px;font-weight:900;color:var(--cs-navy);line-height:1.5;margin-bottom:16px;
  font-feature-settings:"palt";
}
.cs-section-lead{font-size:15.5px;line-height:1.9;color:#667;max-width:820px;margin:0 auto;}
.cs-section-head.align-left .cs-section-lead{margin:0;}
.cs-section-navy .cs-label{color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);}
.cs-section-navy .cs-section-ttl{color:#fff;}
.cs-section-navy .cs-section-lead{color:rgba(255,255,255,.75);}

/* ============================================================
   ② PROBLEM（課題提起）
============================================================ */
.cs-problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;
}
.cs-problem-item{
  background:#fff;border-radius:12px;padding:28px 24px;border:1px solid #e9eef4;
  box-shadow:0 3px 14px rgba(20,60,100,.05);
}
.cs-problem-icon{
  width:42px;height:42px;border-radius:10px;background:var(--cs-blue-light);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--cs-blue);
}
.cs-problem-ttl{font-size:15px;font-weight:bold;color:#1a1a2e;margin-bottom:8px;line-height:1.5;}
.cs-problem-desc{font-size:13px;line-height:1.75;color:#778;}
.cs-problem-conclusion{
  background:var(--cs-navy);border-radius:14px;padding:40px 46px;text-align:center;
  position:relative;overflow:hidden;
}
.cs-problem-conclusion::before{
  content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;
  background:var(--cs-pink);opacity:.15;
}
.cs-problem-conclusion-ttl{font-size:21px;font-weight:bold;color:#fff;margin-bottom:12px;line-height:1.6;position:relative;z-index:1;}
.cs-problem-conclusion-ttl .accent{color:#ffd7e8;border-bottom:2px solid var(--cs-pink2);}
.cs-problem-conclusion-txt{font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.82);max-width:760px;margin:0 auto;position:relative;z-index:1;}

/* ============================================================
   ③ CONCEPT（CRMstageとは・3つの特長）
============================================================ */
.cs-origin-block{
  max-width:820px;margin:0 auto 44px;text-align:center;padding:32px 36px;
  background:var(--cs-blue-light);border-radius:16px;border:1px solid rgba(30,136,229,0.18);
}
.cs-origin-ttl{font-size:17px;font-weight:bold;color:var(--cs-navy);margin-bottom:14px;}
.cs-origin-desc{font-size:14px;line-height:1.95;color:#556;}
.cs-origin-desc + .cs-origin-desc{margin-top:10px;}
.cs-concept-intro{
  max-width:880px;margin:0 auto 52px;text-align:center;
}
.cs-concept-intro p{font-size:15.5px;line-height:2;color:#556;}
.cs-concept-intro strong{color:var(--cs-navy);font-weight:bold;}
.cs-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.cs-feature-item{
  background:#fff;border-radius:14px;padding:32px 26px;border:1px solid #e9eef4;
  box-shadow:0 4px 18px rgba(20,60,100,.05);transition:box-shadow .3s,transform .3s;
}
.cs-feature-item:hover{box-shadow:0 12px 30px rgba(20,60,100,.12);transform:translateY(-3px);}
.cs-feature-num{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  background:var(--cs-blue-grad);color:#fff;font-size:14px;font-weight:bold;margin-bottom:18px;
  box-shadow:0 6px 16px var(--cs-blue-shadow);
}
.cs-feature-ttl{font-size:17px;font-weight:bold;color:#1a1a2e;margin-bottom:10px;line-height:1.5;}
.cs-feature-desc{font-size:13.5px;line-height:1.85;color:#667;}
.cs-concept-diagram{max-width:1120px;margin:0 auto 52px;background:#fff;border-radius:16px;padding:22px;border:1px solid #e9eef4;box-shadow:0 8px 26px rgba(20,60,100,.07);}
.cs-concept-diagram img{border-radius:10px;width:100%;}
.cs-concept-diagram-caption{text-align:center;font-size:11.5px;color:#99a;margin-top:12px;letter-spacing:.02em;}
.cs-concept-diagram-caption span{color:#bbc;}

/* ============================================================
   ④ 製品タイプ比較
============================================================ */
.cs-product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.cs-product-card{
  background:#fff;border-radius:16px;padding:36px 32px;border:1px solid #e9eef4;
  box-shadow:0 6px 22px rgba(20,60,100,.06);position:relative;
}
.cs-product-card.is-main{border:2px solid var(--cs-blue);}
.cs-product-card-badge{
  position:absolute;top:-14px;left:32px;padding:5px 16px;font-size:11px;font-weight:bold;color:#fff;
  background:var(--cs-blue-grad);border-radius:20px;letter-spacing:.05em;
}
.cs-product-card.is-cdp .cs-product-card-badge{background:var(--cs-pink-grad);}
.cs-product-card.is-cdp{border:2px solid var(--cs-pink);}
.cs-product-ttl{font-size:20px;font-weight:bold;color:#1a1a2e;margin:18px 0 8px;}
.cs-product-sub{font-size:13px;color:#889;margin-bottom:20px;}
.cs-product-desc{font-size:13.5px;line-height:1.85;color:#556;margin-bottom:20px;}
.cs-product-tags{display:flex;flex-wrap:wrap;gap:8px;}
.cs-product-tags span{
  padding:5px 13px;font-size:12px;font-weight:bold;color:var(--cs-blue-dark);
  background:var(--cs-blue-light);border-radius:4px;border:1px solid var(--cs-blue);
}
.cs-product-card.is-cdp .cs-product-tags span{color:var(--cs-pink);background:var(--cs-pink-light);border-color:var(--cs-pink);}
.cs-product-for{
  margin-top:22px;padding:14px 16px;background:#f5f9fd;border-radius:8px;font-size:12.5px;
  color:#556;line-height:1.7;
}
.cs-product-card.is-cdp .cs-product-for{background:#fdf0f5;}
.cs-product-for strong{color:var(--cs-navy);}

/* ============================================================
   ⑤ FUNCTION（主な機能・導入・運用）
============================================================ */
.cs-func-wrap{display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:stretch;max-width:1000px;margin:0 auto;}
.cs-func-tags-box{
  background:#fff;border-radius:14px;padding:36px 34px;border:1px solid #e9eef4;box-shadow:0 4px 16px rgba(20,60,100,.05);
}
.cs-func-tags-ttl{font-size:15px;font-weight:bold;color:#1a1a2e;margin-bottom:18px;}
.cs-func-tags{display:flex;flex-wrap:wrap;gap:10px;}
.cs-func-tags span{
  padding:8px 16px;font-size:13px;font-weight:bold;color:var(--cs-blue-dark);
  background:var(--cs-blue-light);border-radius:20px;
}
.cs-license-box{
  background:var(--cs-navy);border-radius:14px;padding:32px 30px;color:#fff;position:relative;overflow:hidden;
}
.cs-license-box::before{
  content:'';position:absolute;bottom:-60px;right:-60px;width:200px;height:200px;border-radius:50%;
  background:var(--cs-pink);opacity:.15;
}
.cs-license-ttl{font-size:15px;font-weight:bold;margin-bottom:18px;position:relative;z-index:1;}
.cs-license-list{display:flex;flex-direction:column;gap:16px;position:relative;z-index:1;}
.cs-license-item{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14);}
.cs-license-item:last-child{border-bottom:none;padding-bottom:0;}
.cs-license-item-ttl{font-size:13.5px;font-weight:bold;color:#fff;margin-bottom:5px;display:flex;align-items:center;gap:7px;}
.cs-license-item-ttl::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--cs-pink2);flex-shrink:0;}
.cs-license-item-desc{font-size:12px;line-height:1.75;color:rgba(255,255,255,.72);}

/* ============================================================
   ⑥ CRMstageが選ばれる理由（WHY CRMstage）— カード3列配置
============================================================ */
.cs-why-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1120px;margin:0 auto;
}
.cs-why-item{
  flex:1 1 300px;max-width:346px;
  background:#fff;border-radius:16px;padding:34px 26px 30px;border:1px solid #e9eef4;
  box-shadow:0 6px 22px rgba(20,60,100,.06);position:relative;overflow:hidden;
  border-top:4px solid var(--cs-blue);transition:transform .3s,box-shadow .3s;
}
.cs-why-item:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(20,60,100,.14);}
.cs-why-item:nth-child(2){border-top-color:var(--cs-pink);}
.cs-why-item:nth-child(3){border-top-color:var(--cs-blue-dark);}
.cs-why-item:nth-child(4){border-top-color:#0d2338;}
.cs-why-item:nth-child(5){border-top-color:var(--cs-pink2);}
.cs-why-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;margin-bottom:18px;
  font-size:18px;font-weight:900;font-family:"Inter",sans-serif;color:#fff;
  background:var(--cs-blue-grad);box-shadow:0 8px 18px var(--cs-blue-shadow);
}
.cs-why-item:nth-child(2) .cs-why-num{background:var(--cs-pink-grad);box-shadow:0 8px 18px var(--cs-pink-shadow);}
.cs-why-item:nth-child(3) .cs-why-num{background:linear-gradient(90deg,#1257A6 0%,#0d2338 100%);box-shadow:0 8px 18px rgba(13,35,56,.28);}
.cs-why-item:nth-child(4) .cs-why-num{background:linear-gradient(90deg,#0d2338 0%,#1E88E5 100%);box-shadow:0 8px 18px rgba(13,35,56,.28);}
.cs-why-item:nth-child(5) .cs-why-num{background:var(--cs-pink-grad);box-shadow:0 8px 18px var(--cs-pink-shadow);}
.cs-why-ttl{font-size:16.5px;font-weight:bold;color:#1a1a2e;margin-bottom:10px;line-height:1.5;}
.cs-why-desc{font-size:13.5px;line-height:1.85;color:#667;}

/* ============================================================
   ⑦ CASE（導入事例）
============================================================ */
.cs-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.cs-case-item{
  background:#fff;border-radius:14px;overflow:hidden;border:1px solid #e9eef4;
  box-shadow:0 5px 20px rgba(20,60,100,.06);transition:box-shadow .3s;
}
.cs-case-item:hover{box-shadow:0 12px 30px rgba(20,60,100,.12);}
.cs-case-img{width:100%;height:210px;overflow:hidden;background:#eef3f8;}
.cs-case-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cs-case-head{padding:22px 28px 16px;border-bottom:1px solid #eef2f7;}
.cs-case-tag{
  display:inline-block;padding:4px 12px;font-size:11px;font-weight:bold;color:var(--cs-blue-dark);
  background:var(--cs-blue-light);border-radius:3px;margin-bottom:12px;letter-spacing:.03em;
}
.cs-case-num{font-size:11px;color:#aab;letter-spacing:.1em;margin-bottom:6px;font-family:"Inter",sans-serif;}
.cs-case-ttl{font-size:18px;font-weight:bold;color:#1a1a2e;line-height:1.55;}
.cs-case-body{padding:20px 28px 26px;}
.cs-case-desc{font-size:13.5px;line-height:1.9;color:#667;margin-bottom:16px;}
.cs-case-tags{display:flex;flex-wrap:wrap;gap:6px;}
.cs-case-tags span{padding:3px 11px;font-size:11px;color:#889;background:#f2f5f9;border-radius:3px;}

/* ============================================================
   ⑧ FAQ
============================================================ */
.cs-faq-list{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.cs-faq-item{background:#fff;border-radius:12px;border:1px solid #e9eef4;overflow:hidden;transition:box-shadow .3s;}
.cs-faq-item:hover{box-shadow:0 6px 22px rgba(20,60,100,.08);}
.cs-faq-q{display:flex;align-items:flex-start;gap:16px;padding:22px 26px;cursor:pointer;list-style:none;user-select:none;}
.cs-faq-q-icon{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--cs-blue-grad);color:#fff;
  font-size:14px;font-weight:bold;display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.cs-faq-q-text{flex:1;font-size:15px;font-weight:bold;color:#1a1a2e;line-height:1.6;padding-top:3px;}
.cs-faq-q-arrow{flex-shrink:0;font-size:17px;color:var(--cs-blue);margin-top:3px;transition:transform .3s;}
details[open] .cs-faq-q-arrow{transform:rotate(180deg);}
.cs-faq-a{padding:0 26px 22px 72px;border-top:1px solid #f1f4f8;}
.cs-faq-a-inner{padding-top:18px;}
.cs-faq-a p{font-size:14px;line-height:1.9;color:#556;}

/* ============================================================
   ⑨ CTA
============================================================ */
.cs-cta{
  padding:88px 0;text-align:center;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 35% 45% at 85% 90%, rgba(190,1,97,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 10% 10%, rgba(30,136,229,0.18) 0%, transparent 70%),
    linear-gradient(135deg, #0b1c2f 0%, #0d2338 45%, #123152 100%);
}
.cs-cta-inner{max-width:1130px;margin:0 auto;padding:0 20px;position:relative;z-index:1;}
.cs-cta-ttl{font-size:30px;font-weight:900;color:#fff;margin-bottom:16px;line-height:1.5;}
.cs-cta-lead{font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.82);max-width:680px;margin:0 auto 24px;}
.cs-cta-needs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:40px;}
.cs-cta-need{padding:8px 20px;font-size:13.5px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:50px;}
.cs-cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.cs-cta-btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:16px 42px;font-size:15.5px;font-weight:bold;
  color:var(--cs-pink);background:#fff;border-radius:50px;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:all .3s;
}
.cs-cta-btn-primary:hover{transform:translateY(-3px);opacity:1;}
.cs-cta-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;padding:16px 42px;font-size:15.5px;font-weight:bold;
  color:rgba(255,255,255,.85);background:transparent;border:1.5px solid rgba(255,255,255,.32);border-radius:50px;transition:all .3s;
}
.cs-cta-btn-secondary:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.6);transform:translateY(-3px);opacity:1;}

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:1024px){
  .cs-problem-grid{grid-template-columns:repeat(2,1fr);}
  .cs-feature-grid{grid-template-columns:1fr;}
  .cs-product-grid{grid-template-columns:1fr;}
  .cs-func-wrap{grid-template-columns:1fr;}
  .cs-case-grid{grid-template-columns:1fr;}
  .cs-why-item{flex:1 1 260px;}
}
@media (max-width:640px){
  .cs-why-item{flex:1 1 100%;max-width:420px;}
}
@media (max-width:767px){
  /* 40px(本来の上パディング) + 72px(SP時の固定ヘッダー高さ) */
  .cs-hero{padding:112px 16px 56px;}
  .cs-hero-ttl{font-size:27px;}
  .cs-hero-lead{font-size:14px!important;}
  .cs-section{padding:56px 0;}
  .cs-section-ttl{font-size:23px;}
  .cs-problem-grid{grid-template-columns:1fr;}
  .cs-problem-conclusion{padding:28px 22px;}
  .cs-problem-conclusion-ttl{font-size:18px!important;}
  .cs-cta-ttl{font-size:23px;}
  .cs-cta-btns{flex-direction:column;align-items:center;}
  .cs-cta-btn-primary,.cs-cta-btn-secondary{width:100%;max-width:320px;justify-content:center;}
  .cs-why-item{padding:28px 22px;}
  .cs-func-wrap{grid-template-columns:1fr;}
}