プレースホルダーPlaceholder

「プレースホルダー（Placeholder）」を実装してください。

## これは何か
入力欄が空のときだけ薄く出ている文字。入力の見本を示すもので、ラベルの代わりではない。

## 使いどころ
- 書式の見本を見せたいとき（例: 090-1234-5678）
- 入力欄の使い方がラベルだけでは伝わらないとき

## 実装の要件
- label（常時表示）+ input placeholder（見本）+ 補足文（aria-describedby）の3点で構成する
- ラベルの代わりに使わない。入力を始めた瞬間に消えるので、何の欄か分からなくなる
- 薄い灰色は背景とのコントラストが足りなくなりやすい。4.5:1 を確保する
- 「必須」「8文字以上」などの条件をここに書かない。消えて見えなくなる

## アクセシビリティの要件
- ラベルは label 要素で別に置く。placeholder は補助に留める
- 文字色のコントラストを 4.5:1 以上にする
- 条件や注意は入力欄の下に常時表示し、aria-describedby で結ぶ

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

```html
<div class="x-placeholder">
  <label class="x-placeholder__l" for="x-placeholder-tel">電話番号</label>
  <input class="x-placeholder__i" id="x-placeholder-tel" type="tel"
         placeholder="090-1234-5678" aria-describedby="x-placeholder-help">
  <p class="x-placeholder__h" id="x-placeholder-help">ハイフンありで入力してください。</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-placeholder,
.x-placeholder *:not([class*="fa-"]),
.x-placeholder *:not([class*="fa-"])::before,
.x-placeholder *: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-placeholder {
  width: 250px;
}
.x-placeholder__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-placeholder__i {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
}
.x-placeholder__i::placeholder {
  color: #6b7482;
}
.x-placeholder__h {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #606a7b;
}
```

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