/* ============================================================ ▼ /service/ai-agent/ ─ レコメンド・AIエージェント開発（このページ固有の追加） 既存クラスとの衝突チェック済み：symq / ppmap / four / ask / cases / case / cind / cbd / cres / kpi2 / pend（§7-1の全数チェックを通過） ============================================================ */ /* 症状の一言 ── 章の頭に置く引用。読者の声をそのまま置く（/service/line/ と同一定義） */ .symq{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--n700); margin:-14px 0 22px;padding:2px 0 2px 14px;border-left:3px solid var(--acc);line-height:1.9} /* 面の補足メモ（薄青の帯）── /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 の前に決めておくこと（/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)} /* 12 MEASURE（band-deep）に置く図の色 ── ワイヤーの .band-deep 用スケールに合わせる */ #s-measure .fig .s-t{fill:var(--on-dark)} #s-measure .fig .s-ts{fill:#CFDFEE} #s-measure .fig .s-tf{fill:var(--on-dark-s)} #s-measure .fig .s-tb{fill:#8FC1F0} #s-measure .fig .s-tg{fill:var(--acc)} #s-measure .fig .s-box{fill:rgba(255,255,255,.07);stroke:#4E6E8E} #s-measure .fig .s-line{stroke:#7E9AB5} #s-measure .fig .s-lined{stroke:#4E6E8E} #s-measure .fig .s-lineb{stroke:var(--acc)} #s-measure .figcap a{color:#8FC1F0;font-weight:700} /* ============================================================ ▼ 2026-08-09 永野FB反映 ─ 文字ブロックのビジュアライズ 図（svg.fig 12点）・matrix表・カルーセル構造は据え置き。 文字だけのブロックにアイコンを効かせ、#s-evidence の裏づけ2ブロックと 遷移段落をカード化する。追加クラスは .xlink（crm-design/braze/line/ma-data v2 と同名・同定義）と .evd（このページ固有／§7-1の全数チェックを通過）のみ ============================================================ */ /* 章末・章内の遷移メモ（.ppmap）：頭にアイコン（braze/line/ma-data v2 と同定義） */ .ppmap>.ic{width:15px;height:15px;margin-right:8px;vertical-align:-3px;color:var(--b600)} /* 症状カード：マス目ラベルにアイコン（crm-design/braze v2 と同定義） */ .chk .k .ic{width:14px;height:14px;margin-right:6px;vertical-align:-3px;color:var(--b500)} /* カルーセル：各スライドの見出しにアイコン（line v2 と同定義） */ .carou .carou-item h4 .ic{width:16px;height:16px;margin-right:7px;vertical-align:-3px;color:var(--b600)} /* 先に決めておくと早いこと（.ask）：見出しと各項目の頭にアイコン（braze/line/ma-data 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/ma-data v2 と同定義） */ .case .cind .ic{width:15px;height:15px;margin-right:6px;vertical-align:-2.5px;color:var(--b600)} /* FAQ：各設問にアイコン（Qの右／braze・line・ma-data 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/ma-data 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)} /* #s-evidence の裏づけ2ブロック：長文の段落を、見出し＋アイコン付き横ストライプに載せ替える （文言・出典・リンクは据え置き。.evd はこのページ固有の新規クラス） */ .evd{background:var(--white);border:1px solid var(--b200);border-left:3px solid var(--b600); padding:20px 22px 14px;margin-top:22px} .evd h4{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:.03em; margin:0 0 6px;line-height:1.7;color:var(--n900)} .evd h4 .ic{width:15px;height:15px;margin-right:7px;vertical-align:-2.5px;color:var(--b600)} .evd ul{margin:0;padding:0;list-style:none} .evd li{display:flex;align-items:flex-start;gap:10px;font-size:13px;font-weight:500; color:var(--n700);line-height:1.9;padding:10px 0;border-bottom:1px solid var(--n300)} .evd li:last-child{border-bottom:0} .evd li>.ic{flex:none;width:14px;height:14px;color:var(--b600);margin-top:5px} .evd li>span{min-width:0} .evd strong,.evd b{color:var(--n900)} .evd .src{margin:6px 0 0;padding-top:10px;border-top:1px solid var(--n300);line-height:1.8} .evd a{color:var(--b600);font-weight:700}