トグルスイッチSwitch

「トグルスイッチ（Switch）」を実装してください。

## これは何か
つまみを左右に動かして入と切を切り替える部品。押した瞬間に設定が反映される場面で使う。

## 使いどころ
- 押した瞬間に効果が出る設定（通知の入切、ダークモード）
- 保存ボタンを押させずに、その場で反映したいとき

## 実装の要件
- input[type=checkbox] role="switch" + label
- つまみの動きは transform で作り、prefers-reduced-motion では止める
- フォームの送信で確定する項目には使わない。押した瞬間に変わると誤解される。そこはチェックボックス
- 入と切がどちらなのか、つまみの位置だけでは色覚や明度の差で伝わらないことがある。文字も添える
- 反映に時間がかかるなら、切り替え中の状態を見せる。無反応だと二度押しされる

## アクセシビリティの要件
- input[type=checkbox] に role="switch" を付けるのが確実。独自の div では状態が伝わらない
- ラベルは「通知」のように対象の名前にする。「オン」を名前にしない
- キーボードの Space で切り替えられること
- 色だけで状態を示さない

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<label class="x-switch">
  <input class="x-switch__i" type="checkbox" role="switch" checked>
  <span class="x-switch__track" aria-hidden="true"><span class="x-switch__knob"></span></span>
  <span class="x-switch__t">新着のお知らせを受け取る</span>
</label>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-switch,
.x-switch *:not([class*="fa-"]),
.x-switch *:not([class*="fa-"])::before,
.x-switch *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
}
.x-switch__i {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.x-switch__track {
  position: relative;
  width: 44px;
  height: 26px;
  flex: none;
  border-radius: 999px;
  background: #7f8a99;
}
.x-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.x-switch__i:checked + .x-switch__track {
  background: #1d4ed8;
}
.x-switch__i:checked + .x-switch__track .x-switch__knob {
  transform: translateX(18px);
}
.x-switch__i:focus-visible + .x-switch__track {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .x-switch__knob {
    transition: none;
  }
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。