ラジオボタンRadio button

「ラジオボタン（Radio button）」を実装してください。

## これは何か
丸い印を押して1つだけ選ぶ入力。古いカーラジオの選局ボタン（1つ押すと他が戻る）が由来。

## 使いどころ
- 選択肢が2〜5個で、1つだけ選ばせたいとき
- 選択肢を全部見せたまま比べさせたいとき

## 実装の要件
- input[type=radio] を同じ name でまとめ、fieldset > legend で囲む
- 既定で1つ選んでおくかどうかを決める。既定なしなら required を付ける
- 一度選ぶと、標準では「何も選んでいない」状態に戻せない。戻せる必要があるなら「指定しない」を選択肢に足す
- 同じ name を付け忘れると、全部選べてしまう。グループの単位は name で決まる
- 選択肢が6個以上になったらセレクトボックスを検討する

## アクセシビリティの要件
- 同じグループに同じ name を付ける。これが無いと支援技術にもグループとして伝わらない
- fieldset と legend でグループの見出しを与える
- 矢印キーでグループ内を移動できるのは標準の挙動。独自実装で壊さない

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

```html
<fieldset class="x-radio">
  <legend class="x-radio__lg">お支払い方法</legend>
  <label class="x-radio__r">
    <input type="radio" name="pay" value="card" checked>
    クレジットカード
  </label>
  <label class="x-radio__r">
    <input type="radio" name="pay" value="bank">
    銀行振込
  </label>
</fieldset>
```

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

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