チェックボックスCheckbox

「チェックボックス（Checkbox）」を実装してください。

## これは何か
四角い枠を押して入と切を切り替える入力。当てはまるものを何個でも選べる。

## 使いどころ
- 複数選べる選択肢を並べるとき
- 利用規約への同意のように、入か切の一つだけを確認するとき

## 実装の要件
- input[type=checkbox] + label。独自の見た目にするときも、input を消さずに opacity で隠して位置を重ねる
- グループは fieldset > legend でまとめる
- 1つだけ選ばせたいときに使わない。それはラジオボタンの役目
- 四角と丸の使い分けは利用者の学習済みの知識。形を入れ替えない
- チェックを入れた既定値は、同意など重要な項目では使わない

## アクセシビリティの要件
- label でテキストごと囲むか、for / id で結ぶ。文字を押してもチェックが入る状態にする
- グループにするときは fieldset と legend でまとめる
- タッチの当たり判定を 24px 以上（推奨 44px）確保する。四角そのものを大きくしなくても、label の余白で広げられる

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

```html
<fieldset class="x-checkbox">
  <legend class="x-checkbox__lg">受け取る通知</legend>
  <label class="x-checkbox__r">
    <input type="checkbox" name="notify" value="mail" checked>
    メールで受け取る
  </label>
  <label class="x-checkbox__r">
    <input type="checkbox" name="notify" value="app">
    アプリで受け取る
  </label>
</fieldset>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-checkbox,
.x-checkbox *:not([class*="fa-"]),
.x-checkbox *:not([class*="fa-"])::before,
.x-checkbox *: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-checkbox {
  width: 232px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
}
.x-checkbox__lg {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 700;
}
.x-checkbox__r {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 13px;
  cursor: pointer;
}
.x-checkbox__r input {
  width: 17px;
  height: 17px;
  accent-color: #1d4ed8;
}
```

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