パンくずリスト

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「パンくずリスト」の効果を追加してください。

# 追加してほしい効果
パンくずリスト（ヘッダー & ナビ）
「›」区切りで階層をたどるパンくずリスト。画面が狭いときは中間の階層を「…」にまとめ、クリックすると展開。リンクはホバーで下線がすっと伸びます。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 区切り記号付きパンくずリスト。狭い幅では中間階層を「…」に省略し、クリックで展開できる -->
<div class="nbc-frame">
  <div class="nbc-stage">
    <p class="nbc-eyebrow">現在地</p>
    <nav class="nbc-crumbs" aria-label="パンくずリスト" id="nbcCrumbs">
      <ol>
        <li><a href="#" onclick="return false">ホーム</a></li>
        <li class="nbc-mid"><a href="#" onclick="return false">家電</a></li>
        <li class="nbc-mid"><a href="#" onclick="return false">キッチン家電</a></li>
        <li class="nbc-ellipsis">
          <button type="button" id="nbcEllipsis" aria-expanded="false" aria-label="省略された中間の階層を表示">…</button>
        </li>
        <li><a href="#" onclick="return false">コーヒーメーカー</a></li>
        <li aria-current="page"><span>全自動ドリップ式 PRO-500</span></li>
      </ol>
    </nav>
    <h2 class="nbc-title">全自動ドリップ式コーヒーメーカー PRO-500</h2>
    <p class="nbc-note">画面が狭いと中間階層が「…」に折りたたまれます。クリックすると展開して表示します。</p>
  </div>
</div>

【CSS】
* { box-sizing: border-box; }
body { margin: 0; display: block; background: #f7f7fa; font-family: "Hiragino Sans", "Segoe UI", system-ui, sans-serif; }

/* ルート: width:100% + height:100vh。中身は flex の margin:auto で常に中央に収める */
.nbc-frame { position: relative; width: 100%; height: 100vh; overflow: hidden; background: #f7f7fa; display: flex; }
.nbc-stage { margin: auto; width: 100%; max-width: 560px; padding: 0 28px; }

.nbc-eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #9096a8; text-transform: uppercase; }

.nbc-crumbs ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 0; gap: 2px 4px;
}
.nbc-crumbs li { display: flex; align-items: center; gap: 2px 4px; }
.nbc-crumbs li + li::before { content: "›"; color: #b7bccb; font-size: 13px; margin-right: 2px; }

.nbc-crumbs a {
  position: relative; font-size: 13.5px; font-weight: 600; color: #565f78;
  text-decoration: none; padding: 3px 2px;
}
.nbc-crumbs a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nbc-crumbs a:hover { color: #4338ca; }
.nbc-crumbs a:hover::after { transform: scaleX(1); }
.nbc-crumbs li[aria-current="page"] span { font-size: 13.5px; font-weight: 700; color: #1c2033; }

.nbc-crumbs li.nbc-ellipsis { display: none; }
.nbc-ellipsis button {
  font: inherit; font-size: 13px; font-weight: 700; color: #565f78;
  background: #eceef5; border: none; border-radius: 999px; cursor: pointer;
  width: 26px; height: 22px; line-height: 1; padding: 0;
  transition: background .18s ease, color .18s ease;
}
.nbc-ellipsis button:hover { background: #dfe2ee; color: #4338ca; }

.nbc-title { margin: 18px 0 6px; font-size: 20px; font-weight: 800; color: #1c2033; line-height: 1.4; }
.nbc-note { margin: 0; font-size: 12.5px; color: #8b91a5; line-height: 1.8; }

/* 狭幅：中間階層を隠して「…」を出す。展開時は「…」クリックで中間階層を戻す */
@media (max-width: 620px) {
  .nbc-crumbs li.nbc-mid { display: none; }
  .nbc-crumbs li.nbc-ellipsis { display: inline-flex; }
  .nbc-crumbs.is-expanded li.nbc-mid { display: flex; }
  .nbc-crumbs.is-expanded li.nbc-ellipsis { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nbc-crumbs a::after { transition: none; }
}

【JavaScript】
// 「…」クリックで省略された中間階層を展開/折りたたみ（狭幅のときのみ表示・null安全）
(() => {
  const crumbs = document.getElementById('nbcCrumbs');
  const btn = document.getElementById('nbcEllipsis');
  if (!crumbs || !btn) return;

  btn.addEventListener('click', () => {
    const open = crumbs.classList.toggle('is-expanded');
    btn.setAttribute('aria-expanded', String(open));
  });
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。