レイアウト・構造
スプリットスクリーン
画面を左右50/50に割り、片側にビジュアル・片側にテキストを置くヒーロー。枠が狭いと上下に積み替わる、LP冒頭の定番構図。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
flex-wrap と flex-basis(150px) で、枠幅が足りなくなると自動で縦積みに切り替わります。左右比を固定したい場合は各面に width:50% を指定してください。
コード（コピーして使えます）
<div class="stage">
<section class="split">
<div class="split-visual" role="img" aria-label="ビジュアル面"></div>
<div class="split-copy">
<p class="split-eyebrow">NEW</p>
<h2 class="split-title">半分は絵、半分は言葉。</h2>
<p class="split-text">左右で役割を分けると、視線が自然に流れます。</p>
<a class="split-cta" href="#">はじめる</a>
</div>
</section>
</div>