アイコンボタンIcon button

「アイコンボタン（Icon button）」を実装してください。

## これは何か
文字を持たず、アイコンだけで操作を表すボタン。閉じる・共有・お気に入りなど、場所を取りたくないところで使う。

## 使いどころ
- ツールバーやカードの隅など、文字を置く幅が無いとき
- 閉じる（×）・検索（虫眼鏡）・メニュー（三本線）のように、意味が広く共有されている記号を使うとき

## 実装の要件
- button 要素に aria-label を付ける。アイコンは aria-hidden="true"
- 押せる領域を 24×24px 以上（指で押す画面は 44×44px を目安）
- 意味が伝わるアイコンはごく少ない。迷うものは文字を併記する
- アイコンだけのボタンは押せることに気づかれにくい。枠線か背景で領域を見せる
- 隣り合うアイコンボタンの間隔を詰めすぎると、指で誤爆する

## アクセシビリティの要件
- aria-label か視覚的に隠したテキストで、必ず名前を付ける
- アイコン自体は aria-hidden="true" にして、読み上げを二重にしない
- title 属性だけに頼らない。タッチ環境では表示されない

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

```html
<div class="x-icon-button">
  <button class="x-icon-button__b" type="button" aria-label="お気に入りに追加">
    <i class="fa-regular fa-heart" aria-hidden="true"></i>
  </button>
  <button class="x-icon-button__b" type="button" aria-label="共有する">
    <i class="fa-solid fa-share-nodes" aria-hidden="true"></i>
  </button>
  <button class="x-icon-button__b" type="button" aria-label="閉じる">
    <i class="fa-solid fa-xmark" aria-hidden="true"></i>
  </button>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-icon-button,
.x-icon-button *:not([class*="fa-"]),
.x-icon-button *:not([class*="fa-"])::before,
.x-icon-button *: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-icon-button {
  display: flex;
  gap: 8px;
}
.x-icon-button__b {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font-size: 15px;
  cursor: pointer;
}
.x-icon-button__b:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.x-icon-button__b:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}
```

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