定義リストDescription list

「定義リスト（Description list）」を実装してください。

## これは何か
「項目名」と「その中身」を対にして並べるリスト。住所や仕様のように、名前と値が対応するものに使う。

## 使いどころ
- 商品の仕様や、申し込み内容の確認画面
- 表にするほど列が無く、1対1で並べたいとき

## 実装の要件
- dl > dt + dd。grid で2列に並べると幅が揃う
- 見出しと段落で代用すると、対応関係が伝わらない
- 項目名が長いと、値との境目が分からなくなる。幅を決めて揃える
- 1つの項目名に複数の値があるときは、dd を複数並べる。カンマで詰め込まない

## アクセシビリティの要件
- dl の中に dt（項目名）と dd（値）を並べてマークアップする
- 項目名と値の対応が、見た目でも読み上げでも崩れないようにする
- 値が空のときは「未設定」と書く。空欄のままにしない

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

```html
<dl class="x-definition-list">
  <dt>お届け先</dt>
  <dd>東京都千代田区1-1-1</dd>
  <dt>お支払い</dt>
  <dd>クレジットカード</dd>
</dl>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-definition-list,
.x-definition-list *:not([class*="fa-"]),
.x-definition-list *:not([class*="fa-"])::before,
.x-definition-list *: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-definition-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  width: 244px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}
.x-definition-list dt {
  color: #606a7b;
  white-space: nowrap;
}
.x-definition-list dd {
  margin: 0;
}
```

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