バリデーションメッセージValidation message

「バリデーションメッセージ（Validation message）」を実装してください。

## これは何か
入力の内容が条件に合わないときに、入力欄のそばに出す説明。何が違うのか、どう直せばよいのかを書く。

## 使いどころ
- 必須の欄が空のまま送信されたとき
- 形式が合わないとき（メールアドレスに @ が無いなど）

## 実装の要件
- input[aria-invalid][aria-describedby] + メッセージ要素の id を対にする
- エラーの赤い枠は :invalid・:user-invalid ではなく [aria-invalid="true"] に付け、メッセージと同時に出し入れする。:invalid は読み込んだ直後の空の必須欄にも当たる。:user-invalid は、何も入れずに離れた欄には当たらず、一度入力して離れた欄では打ち直している途中からメッセージより先に当たる
- 「エラーが発生しました」だけでは直せない。何が、どうであるべきかを書く
- 送信ボタンを押すまで何も言わないのも、入力中にずっと赤いのも、どちらも使いにくい。欄を離れたときに出すのが無難
- 色だけで示さない。赤い枠だけでは、色が見えにくい人に伝わらない

## アクセシビリティの要件
- エラーの欄に aria-invalid="true" を付ける
- メッセージを aria-describedby で入力欄に結ぶ。フォーカスしたときに読み上げられる
- まとめてエラーを出すときは、先頭のエラー欄へフォーカスを移す
- アイコン・文言・色の3つで示す

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

```html
<div class="x-validation">
  <label class="x-validation__l" for="x-validation-mail">メールアドレス</label>
  <input class="x-validation__i" id="x-validation-mail" type="email" value="sample.example.com"
         aria-invalid="true" aria-describedby="x-validation-err">
  <p class="x-validation__e" id="x-validation-err">
    <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
    @ が入っていません。you@example.com の形で入力してください。
  </p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-validation,
.x-validation *:not([class*="fa-"]),
.x-validation *:not([class*="fa-"])::before,
.x-validation *: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-validation {
  width: 250px;
}
.x-validation__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-validation__i {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 2px solid #7f8a99;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
/* 赤い枠はエラーを出している間だけ付ける。:invalid だと、読み込んだ直後の空の必須欄まで赤くなる */
.x-validation__i[aria-invalid="true"] {
  border-color: #b91c1c;
}
.x-validation__e {
  display: flex;
  gap: 7px;
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #b91c1c;
}
```

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