ナビ・リスト操作
ステッパー
カート→配送→決済→完了など手順の進捗を示すインジケータ。次へ/戻るボタンで進められる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="stp-root">
<div class="stp-track">
<div class="stp-step is-done" data-index="0">
<div class="stp-circle"><span class="stp-check">✓</span><span class="stp-num">1</span></div>
<span class="stp-label">カート</span>
</div>
<div class="stp-line"></div>
<div class="stp-step is-active" data-index="1">
<div class="stp-circle"><span class="stp-check">✓</span><span class="stp-num">2</span></div>
<span class="stp-label">配送</span>
</div>
<div class="stp-line"></div>
<div class="stp-step" data-index="2">
<div class="stp-circle"><span class="stp-check">✓</span><span class="stp-num">3</span></div>
<span class="stp-label">決済</span>
</div>
<div class="stp-line"></div>
<div class="stp-step" data-index="3">
<div class="stp-circle"><span class="stp-check">✓</span><span class="stp-num">4</span></div>
<span class="stp-label">完了</span>
</div>
</div>
<div class="stp-desc">
<p class="stp-msg">配送先を入力してください</p>
</div>
<div class="stp-actions">
<button class="stp-back" disabled>← 戻る</button>
<button class="stp-next">次へ →</button>
</div>
</div>