コンテンツ・LP部品
フィーチャーセクション
3つの特徴を、アイコンタイル・見出し・短い説明の組で並べる紹介セクション。プロダクトの強みを一目で伝えるLPの定番ブロックです。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
コード（コピーして使えます）
<div class="stage">
<div class="feats">
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/></svg>
</span>
<div class="feat-body">
<p class="feat-title">とにかく速い</p>
<p class="feat-desc">操作に待たされない設計。思いついた瞬間に手が動きます。</p>
</div>
</div>
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<div class="feat-body">
<p class="feat-title">安心のセキュリティ</p>
<p class="feat-desc">通信は暗号化し、権限管理と監査ログで守ります。</p>
</div>
</div>
<div class="feat">
<span class="feat-icon" aria-hidden="true">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="1.8"/><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M16 6a3 3 0 010 6M18 19c0-2.4-1-4-2.5-4.6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
</span>
<div class="feat-body">
<p class="feat-title">チームで一緒に</p>
<p class="feat-desc">招待して権限を分け、リアルタイムで共同編集できます。</p>
</div>
</div>
</div>
</div>