数値タイルStat tile

「数値タイル（Stat tile）」を実装してください。

## これは何か
1つの数値を大きく見せる小さな箱。前と比べてどう変わったかを添えることが多い。

## 使いどころ
- ダッシュボードで、いちばん見たい数を先に出すとき
- 前月比のように、比較の相手が決まっているとき

## 実装の要件
- ラベル + 大きな値 + 補足（前期比）の3段
- 増減の色は緑と赤に限らず、記号も併せる
- 単位を書かない数は読めない。円・件・%を必ず添える
- 増減を色だけで示さない。矢印と符号を付ける
- 数を並べすぎると、どれが大事か分からなくなる。1画面に4つまで

## アクセシビリティの要件
- 見出し（何の数か）と値を、読み上げで対にして伝わる順に置く
- 増減は「前月比 +12%」のように文字で書く
- 数字は font-variant-numeric: tabular-nums で桁を揃える

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

```html
<div class="x-stat">
  <p class="x-stat__l">今月の申し込み</p>
  <p class="x-stat__v">1,248<span class="x-stat__u">件</span></p>
  <p class="x-stat__c"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i>前月比 +12%</p>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-stat,
.x-stat *:not([class*="fa-"]),
.x-stat *:not([class*="fa-"])::before,
.x-stat *: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-stat {
  width: 178px;
  padding: 13px 15px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
}
.x-stat__l {
  margin: 0 0 4px;
  font-size: 11px;
  color: #606a7b;
}
.x-stat__v {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.x-stat__u {
  margin-left: 3px;
  font-size: 12px;
  font-weight: 400;
  color: #606a7b;
}
.x-stat__c {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  color: #14602f;
}
```

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