区切り線Divider

「区切り線（Divider）」を実装してください。

## これは何か
内容の切れ目を示す細い線。余白だけでは足りないときに、1本引いて話題が変わったことを伝える。

## 使いどころ
- 一覧の項目と項目の間を区切るとき
- 話題が変わることを、見出しを置くほどではない形で示したいとき

## 実装の要件
- 意味のある区切り: hr。装飾: border-top か ::after
- 余白で足りるなら線を引かない。線が増えるほど画面が細切れに見える
- 濃い線は区切りより分断に見える。背景との差を小さくする
- 飾りとして左右に模様を付けない。意味の無い装飾は古びる

## アクセシビリティの要件
- 意味のある区切りなら hr 要素を使う（暗黙で separator として扱われる）。装飾だけなら border で引き、読み上げ対象にしない
- 縦の区切りに使うときだけ aria-orientation="vertical" を付ける

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

```html
<div class="x-divider">
  <p class="x-divider__p">前回のご注文</p>
  <hr class="x-divider__hr">
  <p class="x-divider__p">お気に入り</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-divider,
.x-divider *:not([class*="fa-"]),
.x-divider *:not([class*="fa-"])::before,
.x-divider *: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-divider {
  width: 234px;
  padding: 12px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-divider__hr {
  height: 1px;
  margin: 10px 0;
  border: 0;
  background: #e3e6ea;
}
.x-divider__p {
  margin: 0;
  font-size: 12px;
}
```

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