/* ============================================================
     ▼ /service/braze/ ─ Braze運用・構築（このページ固有の追加）
        既存クラスとの衝突チェック済み：braze-hero / ppmap / four / ask /
        cases / case / cind / cbd / cres / kpi2 / pend / dl / dr（§7-1の全数チェックを通過）
     ============================================================ */

  /* FV ── この画像は他4枚より明るい（会議テーブルの俯瞰）。共通の .dhero .scrim は
     上書きせず、ページ側クラスで左側だけ濃くする（SaaTsu_privacy_v1.html の .legal-hero と同じ手法） */
  .braze-hero .scrim{background:
      linear-gradient(90deg, rgba(9,32,55,.68) 0%, rgba(9,32,55,.56) 36%,
                             rgba(9,32,55,.34) 62%, rgba(9,32,55,.12) 86%, rgba(9,32,55,.05) 100%),
      linear-gradient(180deg, rgba(9,32,55,.30) 0%, rgba(9,32,55,.12) 44%, rgba(9,32,55,.36) 100%)}

  /* 面の補足メモ（薄青の帯）── /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)}

  /* 経験領域 ── 数値の許諾が下りるまでの、文字ベースの事例カード（/service/ma-data/ と同一定義） */
  .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)}

  /* 実行体制 ── 提供スタンスの定義リスト（ワイヤーの .dl 相当） */
  .dl{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--n300)}
  .dr{display:grid;grid-template-columns:230px 1fr;gap:clamp(12px,3vw,30px);
      padding:18px 0;border-bottom:1px solid var(--n300)}
  @media (max-width:700px){.dr{grid-template-columns:1fr;gap:6px}}
  .dr .k{font-family:var(--serif);font-size:15.5px;font-weight:700;letter-spacing:.03em;color:var(--n900)}
  .dr .k em{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
      letter-spacing:.12em;color:var(--n500);margin-top:4px}
  .dr p{margin:0;font-size:13.5px;font-weight:500;color:var(--n700);line-height:1.9}

  /* 13 ROI（band-deep）に置く図の色 ── /service/ai-agent/ #s-measure と同一の考え方 */
  #s-roi .fig .s-t{fill:var(--on-dark)}
  #s-roi .fig .s-ts{fill:#CFDFEE}
  #s-roi .fig .s-tf{fill:var(--on-dark-s)}
  #s-roi .fig .s-tb{fill:#8FC1F0}
  #s-roi .fig .s-tg{fill:var(--acc)}
  #s-roi .fig .s-box{fill:rgba(255,255,255,.07);stroke:#4E6E8E}
  #s-roi .fig .s-line{stroke:#7E9AB5}
  #s-roi .fig .s-lined{stroke:#4E6E8E}
  #s-roi .fig .s-lineb{stroke:var(--acc)}

  /* 13 ROI（band-deep）のカルーセル ── 共通の .carou は白カードだが、白地に置くと
     上の #s-roi .fig のダーク配色が読めなくなるため、この節だけ透過にして帯色を継ぐ。
     色は既存のダーク帯の値のみ再利用（#CFDFEE／--on-dark-s／rgba(234,241,248,.2)／
     rgba(255,255,255,.07)／rgba(123,180,234,.5)）。新色は足していない */
  #s-roi .carou{background:transparent;border-color:rgba(234,241,248,.2)}
  #s-roi .carou-head{border-bottom-color:rgba(234,241,248,.2)}
  #s-roi .carou-lbl{color:var(--on-dark-s)}
  #s-roi .carou-lbl::before{background:rgba(234,241,248,.2)}
  #s-roi .carou.auto .carou-lbl::before{background:var(--b300)}
  #s-roi .carou-tabs button{color:var(--on-dark-s)}
  #s-roi .carou-tabs button:hover{color:#fff}
  #s-roi .carou-tabs button.on{background:rgba(255,255,255,.07);border-color:rgba(123,180,234,.5);color:#fff}
  #s-roi .carou-nav button{background:transparent;border-color:rgba(234,241,248,.2);color:var(--on-dark-s)}
  #s-roi .carou-nav button:hover{border-color:var(--b300);color:#fff}
  #s-roi .carou-item h4{color:#fff}
  #s-roi .carou-dots i{background:rgba(234,241,248,.2)}
  #s-roi .carou-dots i.on{background:var(--b300)}
  #s-roi .carou.auto .carou-dots i.on{background-image:linear-gradient(var(--b300),var(--b300));background-color:rgba(234,241,248,.2)}
  @media (prefers-reduced-motion:reduce){#s-roi .carou.auto .carou-dots i.on{background-color:var(--b300)}}

  /* 6マス表の「お客様から見ると」行 ── 元のSVG図の青い帯（--b50＋青モノスペース見出し）を
     そのまま表の行として再現する。.voice は既存クラスと衝突なし（§7-1全数チェック済み） */
  .matrix td.voice{background:var(--b50)}
  .matrix td.voice b{display:inline;font-family:var(--mono);font-size:10px;font-weight:700;
                     letter-spacing:.11em;color:var(--b600);margin:0 12px 0 0}
  .matrix td.voice strong{color:var(--b600);font-weight:700}

  /* 11 TEAM の役割分担表 ── figcapの「金の枠が、私たちが入るところ」に合わせて、
     SaaTsuのセルは元のSVG図と同じ「--b50地＋金の枠」で示す（罫線自体は上書きしない） */
  #s-team .matrix td.hi{background:var(--b50);box-shadow:inset 0 0 0 2px var(--acc)}
  #s-team .matrix td.hi b{color:var(--acc-ink);margin:0}
  #s-team .matrix td{text-align:center;vertical-align:middle}
  #s-team .matrix td.voice{text-align:left}

  /* ============================================================
     ▼ 2026-08-09 永野FB反映 ─ 文字ブロックのビジュアライズ
        図（svg.fig）・matrix表・カルーセル構造は据え置き。
        文字だけのブロックにアイコンを効かせ、遷移段落をカード化する。
        新規クラスは .xlink のみ（crm-design v2 と同名・同定義／§7-1衝突チェック済み）
     ============================================================ */
  /* 症状カード：マス目ラベルにアイコン */
  .chk .k .ic{width:14px;height:14px;margin-right:6px;vertical-align:-3px;color:var(--b500)}
  /* 章末の遷移メモ（.ppmap）：頭にアイコン */
  .ppmap>.ic{width:15px;height:15px;margin-right:8px;vertical-align:-3px;color:var(--b600)}
  /* 実行体制の3行（.dl）：見出しにアイコン */
  .dr .k .ic{width:15px;height:15px;margin-right:7px;vertical-align:-2.5px;color:var(--b600)}
  /* 御社にお願いすること：見出しと各項目の頭にアイコン */
  .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)}
  /* 事例カード：業種ラベルにアイコン */
  .case .cind .ic{width:15px;height:15px;margin-right:6px;vertical-align:-2.5px;color:var(--b600)}
  /* FAQ：各設問にアイコン（Qの右） */
  .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 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)}