パンくずリストBreadcrumb

「パンくずリスト（Breadcrumb）」を実装してください。

## これは何か
トップページから今いるページまでの道すじを、階層順に並べたリンク。童話で道に落としたパンくずが由来。

## 使いどころ
- 階層が2段以上あるサイトで、いまどこにいるかを示したいとき
- 検索から直接下層に来た人に、1つ上の階層を見せたいとき

## 実装の要件
- nav[aria-label] > ol > li の構成。区切りは CSS の ::after で描き、content: "/" / "" で代替テキストを空にする（Safari は 17.4 から、Firefox は 128 から。それより古い版では宣言ごと無視されて区切りが出ない）
- BreadcrumbList の構造化データを併せて出す。Google が検索結果の URL の位置に階層を出すのはパソコンだけで、モバイルは2025年1月からドメインだけになった
- 最後の要素（現在地）はリンクにしない。押しても何も起きないリンクになる
- 区切り記号を本文の文字として入れない。CSS の擬似要素で描き、代替テキストを空にする
- サイトの階層と一致させる。閲覧履歴を並べるものではない

## アクセシビリティの要件
- nav 要素に aria-label="パンくずリスト" を付ける
- 順序があるので ol でマークアップする
- 現在地に aria-current="page" を付ける
- 区切り記号を ::after の content に文字で入れると、環境によっては読み上げられる。content: "/" / "" のように代替テキストを空にするか、border を傾けて描く

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

```html
<nav class="x-breadcrumb" aria-label="パンくずリスト">
  <ol>
    <li><a href="/">ホーム</a></li>
    <li><a href="/guide/">使い方</a></li>
    <li aria-current="page">はじめての設定</li>
  </ol>
</nav>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-breadcrumb,
.x-breadcrumb *:not([class*="fa-"]),
.x-breadcrumb *:not([class*="fa-"])::before,
.x-breadcrumb *: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-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: #606a7b;
}
.x-breadcrumb li::after {
  content: "/" / "";
  margin-left: 6px;
  color: #cfd4dc;
}
.x-breadcrumb li:last-child::after {
  content: none;
}
.x-breadcrumb a {
  color: #606a7b;
  text-decoration: none;
}
.x-breadcrumb a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
```

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