フォームのラベルと必須マークForm label / Required indicator

「フォームのラベルと必須マーク（Form label / Required indicator）」を実装してください。

## これは何か
入力欄に「何を入れるか」を示す名前と、埋めないと送れない欄の印。「必須」「任意」は文字で書き、色だけで区別させない。

## 使いどころ
- すべての入力欄。ラベルの無い入力欄は作らない
- 必須と任意が混ざるフォームで、送信前にどこを埋めればよいかを伝えるとき

## 実装の要件
- label[for] + input[id][required]。必須の印は label の中に「必須」の文字で置く
- 補足文は p[id] に書き、input[aria-describedby] で結ぶ
- ブラウザ既定の吹き出しを出したくないときは form に novalidate を付ける。required は外さない（必須であることが読み上げで伝わらなくなる）
- 赤い文字色だけで必須を示さない。色が見分けにくい人には全部同じに見える。「必須」と文字で書く
- 「*」を使うなら、フォームの冒頭に「* は必須項目です」と書く。記号の意味は説明しないと伝わらない
- 必須が大半のフォームでは、少ない側（任意）に印を付けたほうが見る場所が減る。どちらに付けるかはフォームの中で統一する
- ラベルを入力欄の左に置くと、狭い画面で入力欄が細くなる。上に置くのが無難

## アクセシビリティの要件
- label 要素を for / id で入力欄と結ぶ。label を押して入力欄にフォーカスが移れば結べている
- 必須は required 属性で示す。読み上げが「必須」と伝える。標準の input なら aria-required="true" を重ねる必要はなく、required を持てない独自部品（input ではなく div などで作った role="combobox" や role="listbox" の要素）で使う
- 「必須」の文字は label の中に入れる。外に置くと、入力欄にフォーカスしたときに読み上げられない
- 入力の形式や用途などの補足は入力欄の下に常に出し、aria-describedby で入力欄と結ぶ
- 「*」は読み上げで「アスタリスク」などと読まれる。required を付けたうえで、「*」だけを aria-hidden="true" の span にしてもよい

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

```html
<div class="x-form-label">
  <div class="x-form-label__f">
    <label class="x-form-label__l" for="x-form-label-name">
      お名前<span class="x-form-label__req">必須</span>
    </label>
    <input class="x-form-label__i" id="x-form-label-name" type="text" name="name"
           autocomplete="name" required>
  </div>
  <div class="x-form-label__f">
    <label class="x-form-label__l" for="x-form-label-tel">
      電話番号<span class="x-form-label__opt">任意</span>
    </label>
    <input class="x-form-label__i" id="x-form-label-tel" type="tel" name="tel"
           autocomplete="tel" aria-describedby="x-form-label-tel-help">
    <p class="x-form-label__h" id="x-form-label-tel-help">日中につながる番号。ハイフンはあってもなくても構いません。</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-form-label,
.x-form-label *:not([class*="fa-"]),
.x-form-label *:not([class*="fa-"])::before,
.x-form-label *: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-form-label {
  display: grid;
  gap: 14px;
  width: 260px;
}
.x-form-label__l {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #1b2028;
  font-size: 12px;
  font-weight: 700;
}
/* 「必須」「任意」は文字で書く。色は補助で、色だけでは区別させない */
.x-form-label__req,
.x-form-label__opt {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
}
.x-form-label__req {
  border: 1px solid #b91c1c;
  background: #b91c1c;
  color: #fff;
}
.x-form-label__opt {
  border: 1px solid #5b6472;
  background: #fff;
  color: #3f4753;
}
.x-form-label__i {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
}
.x-form-label__i:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
.x-form-label__h {
  margin: 6px 0 0;
  color: #5b6472;
  font-size: 11px;
  line-height: 1.6;
}
```

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