/* ============================================================
     ▼ /service/ma-data/ ─ MA用データ開発（このページ固有の追加）
        既存クラスとの衝突チェック済み：ppmap / ask / four / cases / case /
        cind / cbd / cres / kpi2 / pend（§7-1の全数チェックを通過）
     ============================================================ */

  /* 面の補足メモ（薄青の帯）── /service/line/ と同一定義 */
  .ppmap{background:var(--b50);border:1px solid var(--b200);border-left:3px solid var(--b600);
         padding:15px 18px;margin-top:22px;font-size:13px;font-weight:500;color:var(--n700);line-height:1.9}
  .ppmap strong,.ppmap b{color:var(--n900)}
  .ppmap a{color:var(--b600);font-weight:700}
  .band-tint .ppmap{background:var(--white)}

  /* 進め方 ── 共通の .steps は3カラムなので、このページの4STEPだけ広げる（/service/line/ と同一定義） */
  .steps.four{grid-template-columns:repeat(4,1fr)}
  @media (max-width:880px){.steps.four{grid-template-columns:1fr 1fr}}
  @media (max-width:560px){.steps.four{grid-template-columns:1fr}}

  /* STEP 1 でお持ちいただくもの（/service/line/ と同一定義） */
  .band-deep .figcap{color:#A8C0D6}
  .ask{background:var(--white);border:1px solid var(--n300);border-top:2px solid var(--acc);
       padding:22px 24px;margin-top:26px;color:var(--n900)}
  .ask h4{font-family:var(--serif);font-size:16px;font-weight:700;margin:0 0 10px;
          letter-spacing:.03em;color:var(--n900)}
  .ask ul{margin:0;padding-left:1.3em;color:var(--n700)}
  .ask li{margin-bottom:6px;font-size:13.5px;font-weight:500;line-height:1.9}
  .ask li::marker{color:var(--acc-ink)}
  .ask b{color:var(--n900)}

  /* 経験領域 ── 数値の許諾が下りるまでの、文字ベースの事例カード */
  .cases{display:grid;gap:12px;margin-top:6px}
  .case{background:var(--white);border:1px solid var(--n300);padding:22px 24px;
        display:grid;grid-template-columns:150px 1fr 210px;gap:clamp(14px,3vw,28px);align-items:start}
  @media (max-width:820px){.case{grid-template-columns:1fr;gap:10px}}
  .case .cind{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.03em;margin:0}
  .case .cind em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
        letter-spacing:.12em;color:var(--n500);margin-top:4px}
  .case .cbd{font-size:12.5px;font-weight:500;color:var(--n700);margin:0;line-height:1.9}
  .case .cbd b{display:block;font-size:13px;color:var(--n900);margin-bottom:3px}
  .case .cres{background:var(--b50);border-left:3px solid var(--acc);padding:12px 14px;margin:0}
  .case .cres .kpi2{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
        color:var(--acc-ink);display:block;margin-bottom:4px}
  .case .cres .pend{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--slot)}

  /* 05 ASSET（band-deep）に置く図の色 ── ワイヤーの .band-deep 用スケールに合わせる */
  #s-asset .fig .s-t{fill:var(--on-dark)}
  #s-asset .fig .s-ts{fill:#CFDFEE}
  #s-asset .fig .s-tf{fill:var(--on-dark-s)}
  #s-asset .fig .s-tb{fill:#8FC1F0}
  #s-asset .fig .s-tg{fill:var(--acc)}
  #s-asset .fig .s-line{stroke:#7E9AB5}
  #s-asset .fig .s-lined{stroke:#4E6E8E}
  #s-asset .fig .s-lineb{stroke:var(--acc)}
  #s-asset .figcap a{color:#8FC1F0;font-weight:700}

  /* 図5（#s-asset）の指示線 ── 共通の reduced-motion ルールが .lead1 を含まないため、このページで補完 */
  @media (prefers-reduced-motion:reduce){.fig .lead1{opacity:1 !important;animation:none !important}}

  /* ============================================================
     ▼ 2026-08-09 永野FB反映 ─ 文字ブロックのビジュアライズ
        図（svg.fig 7点）は永野版のまま据え置き。文字だけのブロックに
        アイコンを効かせ、対応リストと遷移段落をカード化する。
        追加クラスは .exl（/service/line/ v2 と同名・同定義）と
        .xlink（crm-design/braze/line v2 と同名・同定義）のみ（§7-1の全数チェックを通過）
     ============================================================ */
  /* 章末の遷移メモ（.ppmap）：頭にアイコン（line v2 と同定義） */
  .ppmap>.ic{width:15px;height:15px;margin-right:8px;vertical-align:-3px;color:var(--b600)}
  /* 「4つの部品 → 各サービスの入力」の対応リスト（.exl）── /service/line/ v2 と同名・同定義 */
  .exl{margin:30px 0 0}
  .exl .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
          color:var(--b600);margin:0 0 4px}
  .exl h4{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.03em;margin:0 0 8px}
  .exl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;
          gap:0 clamp(14px,3vw,34px)}
  .exl li{font-size:12.5px;font-weight:500;color:var(--n700);padding:10px 0 10px 16px;
          border-bottom:1px solid var(--n300);position:relative;line-height:1.8}
  .exl li::before{content:"";position:absolute;left:0;top:19px;width:6px;height:6px;background:var(--b600)}
  .exl li b{color:var(--n900);font-weight:700}
  @media (max-width:760px){.exl ul{grid-template-columns:1fr}}
  /* このページの .exl は各項目にアイコンとサービスへのリンクを持つ */
  .exl li .ic{width:13px;height:13px;margin-right:6px;vertical-align:-2px;color:var(--b600)}
  .exl li a{color:var(--b600);font-weight:700}
  /* STEP 1 の持ち物（.ask）：見出しと各項目の頭にアイコン（braze/line v2 と同定義） */
  .ask h4 .ic{width:15px;height:15px;margin-right:7px;vertical-align:-2.5px;color:var(--acc-ink)}
  .ask li .ic{width:13px;height:13px;margin-right:6px;vertical-align:-2px;color:var(--b600)}
  /* 事例カード：業種ラベルにアイコン（braze v2 と同定義） */
  .case .cind .ic{width:15px;height:15px;margin-right:6px;vertical-align:-2.5px;color:var(--b600)}
  /* FAQ：各設問にアイコン（Qの右／braze・line v2 と同定義） */
  .faq summary .ic{width:15px;height:15px;margin-right:8px;vertical-align:-2.5px;color:var(--b400)}
  /* 関連カード：サービスごとのアイコン（.ic-card は共通定義の20px） */
  .rel a .ic-card{margin-bottom:2px}
  /* 本文中の遷移段落を、アイコンつきのカードに載せ替える（文言は据え置き）
     ── crm-design/braze/line v2 の .xlink と同名・同定義 */
  .xlink{display:flex;align-items:flex-start;gap:12px;
         background:var(--b50);border:1px solid var(--n300);border-left:3px solid var(--b600);
         padding:16px 18px}
  .xlink>.ic{flex:none;width:18px;height:18px;color:var(--b600);margin-top:4px}
  .xlink>span{min-width:0}
  .band-tint .xlink{background:var(--white)}