Width Expand Button

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

【演出内容】
- 通常時はラベルだけのボタン。ホバーすると右側に隠れていたアイコンの分だけ幅が伸び、アイコンが現れる
- ボタンは中央基準ではなく、増えた分だけ自然に広がる

【品質要件】
- 幅の伸長とアイコンのフェードインを同時に行い、0.3秒前後で完了させる
- 幅が変わってもレイアウトが破綻しないよう、周囲に余裕のある配置で使う
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

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

[Motion]
- At rest the button shows only a label. On hover it widens by exactly the width of a hidden icon, which is revealed on the right
- The button grows by the added amount rather than expanding out from its center

[Quality requirements]
- Run the width growth and the icon fade-in together, finishing in about 0.3s
- Use it where there is room around the button so the changing width does not break the layout
- 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