導入事例カード
写真の代わりのグラデーション・引用・成果の数字（問い合わせ対応時間 −42%）・担当者名を1枚にまとめた事例カード3枚。ホバーで少し持ち上がります。
プレビュー
ホバー
操作カーソルを乗せると動きます（スマホはタップ）。
デザインの要点
- 成果は「−42%」のように差分の数字1つに絞る。3つ並べると読み手はどれが本題か分からない
- 引用は担当者の言葉を1文だけ。長い体験談はリンク先に置き、カードでは「結果と一言」で止める
- 写真が無いときは色面で代える。人物写真を無理に使うと、素材感で嘘っぽくなる
- 担当者は名前と肩書きを添える（架空でも形式は本番と同じに）。名前のない声は証言にならない
コード（コピーして使えます）
<section class="csc">
<h2 class="csc-h">導入事例</h2>
<p class="csc-lead">業種も規模も違う 3 社が、同じ道具でどう変わったか。</p>
<div class="csc-grid">
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--a"><span class="csc-co">ミナト工房</span><span class="csc-ind">製造業 · 従業員 48 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>−42%</b><span>問い合わせ対応時間</span></p>
<blockquote class="csc-quote">「電話で聞かれていたことが、画面を見れば分かるようになりました」</blockquote>
<p class="csc-who"><span class="csc-av">田</span>田村 沙織 <small>総務部 マネージャー</small></p>
</div>
</a>
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--b"><span class="csc-co">Aoi Analytics</span><span class="csc-ind">SaaS · 従業員 120 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>3.5日 → 半日</b><span>月次締めにかかる時間</span></p>
<blockquote class="csc-quote">「締め作業の待ち時間が消えて、分析に使える日が増えました」</blockquote>
<p class="csc-who"><span class="csc-av">高</span>高橋 悠 <small>経理責任者</small></p>
</div>
</a>
<a class="csc-card" href="#">
<div class="csc-cover csc-cover--c"><span class="csc-co">つむぎ商事</span><span class="csc-ind">卸売 · 従業員 310 名</span></div>
<div class="csc-body">
<p class="csc-result"><b>+18%</b><span>請求書の期日内回収率</span></p>
<blockquote class="csc-quote">「催促の連絡が自動になった分、営業が営業に戻れました」</blockquote>
<p class="csc-who"><span class="csc-av">中</span>中野 健 <small>営業企画部</small></p>
</div>
</a>
</div>
</section>