テキストフィールドText field

「テキストフィールド（Text field）」を実装してください。

## これは何か
一行の文字を入れてもらう枠。名前やメールアドレスなど、短い値の入力に使う。

## 使いどころ
- 氏名・メールアドレス・数量など、一行で収まる値を入れてもらうとき
- 入力の形式が決まっているとき（type を指定すると、スマートフォンのキーボードが切り替わる）

## 実装の要件
- label + input を id / for で結ぶ
- autocomplete 属性を指定して、ブラウザの自動入力を効かせる
- ラベルをプレースホルダーで代用しない。入力を始めた瞬間に何の欄か分からなくなる
- 枠線を消したデザインは、どこが入力欄か分からなくなる。下線だけにするなら十分な濃さにする
- 入力の長さに合った幅にする。郵便番号の欄が氏名と同じ幅だと、何桁入れるのか伝わらない

## アクセシビリティの要件
- label 要素を for / id で必ず結ぶ。label を押したときに入力欄へフォーカスが移れば結べている
- type を正しく指定する（email / tel / url）。読み上げと入力支援が変わる。郵便番号やカード番号のような「数字の並び」は type="number" ではなく inputmode="numeric" にする
- 必須は required 属性で示し、色や記号だけに頼らない
- フォーカス時の枠は :focus-visible で明示する。ブラウザ既定を消したまま何も足さない状態にしない

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

```html
<div class="x-text-field">
  <label class="x-text-field__l" for="x-text-field-mail">メールアドレス</label>
  <input class="x-text-field__i" id="x-text-field-mail" type="email" name="email"
         autocomplete="email" placeholder="you@example.com">
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-text-field,
.x-text-field *:not([class*="fa-"]),
.x-text-field *:not([class*="fa-"])::before,
.x-text-field *: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-text-field {
  width: 250px;
}
.x-text-field__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-text-field__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-text-field__i::placeholder {
  color: #6b7482;
}
.x-text-field__i:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
```

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