テキストエリアTextarea

「テキストエリア（Textarea）」を実装してください。

## これは何か
改行を含む長い文章を入れてもらう枠。問い合わせ本文や備考に使う。

## 使いどころ
- 自由に書いてもらう欄。文字数の目安が決めにくいとき
- 住所の補足や要望など、決まった形式が無い入力

## 実装の要件
- label + textarea。rows で初期の高さを決める。field-sizing: content を使うときは rows が効かないので、同じ行数ぶんの高さを min-height で持たせる
- resize: vertical にして、横幅はレイアウトを崩さないようにする
- 初期の高さが低すぎると、書く気が失せる。3〜5行ぶんは見せる
- 右下のつまみ（リサイズハンドル）を消すと、長文を書く人が困る。消すなら、書いた量に合わせて伸ばす field-sizing: content と組にする
- resize: none と field-sizing: content は @supports (field-sizing: content) の中でだけ指定し、未対応のブラウザではつまみを残す（Chrome・Edge は 123 から、Safari は 26.2 から、Firefox は 152 から）
- field-sizing: content を使うときは、横幅を width: 100% などで決め（決めないと中身に合わせて横に縮む）、高さは height で固定せず min-height と max-height で下限と上限を付ける（rows は効かない）
- 文字数制限があるなら、入力前に伝える。送信してから怒られるのが最悪

## アクセシビリティの要件
- label を for / id で結ぶ
- 文字数の残りを出すときは aria-live="polite" で控えめに伝える。1文字ごとに読み上げさせない
- 制限を超えたら、何文字超えているかを文字で伝える

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

```html
<div class="x-textarea">
  <label class="x-textarea__l" for="x-textarea-body">お問い合わせ内容</label>
  <textarea class="x-textarea__t" id="x-textarea-body" name="body" rows="3"
            placeholder="ご相談の内容をお書きください"></textarea>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-textarea,
.x-textarea *:not([class*="fa-"]),
.x-textarea *:not([class*="fa-"])::before,
.x-textarea *: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-textarea {
  width: 250px;
}
.x-textarea__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-textarea__t {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  resize: vertical;
}
.x-textarea__t::placeholder {
  color: #6b7482;
}
.x-textarea__t:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
```

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