Arrow Through Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ホバーすると、ラベル横の矢印が右へ滑って画面外へ抜け、同時に同じ矢印が左から入ってきて元の位置に収まる
- 矢印が一方向に流れ続けているように見える

【品質要件】
- 移動は0.25秒前後。抜ける矢印と入る矢印を完全に同期させる
- はみ出す矢印は隠し、ボタンの外に見えないようにする
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- On hover the arrow beside the label slides right and exits, while an identical arrow enters from the left and lands in its place
- The arrow appears to be flowing continuously in one direction

[Quality requirements]
- The movement takes about 0.25s, with the exiting and entering arrows perfectly in sync
- Clip the overflow so no arrow is ever visible outside the button
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read