アバターグループ

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「アバターグループ」の効果を追加してください。

# 追加してほしい効果
アバターグループ（バッジ & アバター）
重なり合って並ぶメンバーのアバター群と、隠れた人数を示す「+3」バッジ。カーソルを乗せると各アバターが扇状にふわっと広がり、全員の顔が見えるようになります。

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

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- アバターグループ: 重なったアバター群+残数バッジ。hover/focusで扇状に広がる -->
<div class="stage">
  <div class="stack" tabindex="0" aria-label="このプロジェクトのメンバー6名">
    <span class="stack__item stack__item--1">
      <img src="https://picsum.photos/id/64/200/200" alt="メンバーのアバター写真" width="56" height="56">
    </span>
    <span class="stack__item stack__item--2">
      <img src="https://picsum.photos/id/91/200/200" alt="メンバーのアバター写真" width="56" height="56">
    </span>
    <span class="stack__item stack__item--3">
      <img src="https://picsum.photos/id/1027/200/200" alt="メンバーのアバター写真" width="56" height="56">
    </span>
    <span class="stack__item stack__item--4 stack__item--more" aria-hidden="true">+3</span>
  </div>
  <p class="hint">カーソルを乗せる（またはTabで選択）とメンバーが広がります</p>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  font-family: "Hiragino Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 78% 14%, rgba(251, 191, 36, .16) 0%, transparent 40%),
    radial-gradient(circle at 14% 90%, rgba(239, 68, 68, .12) 0%, transparent 45%),
    #171310;
  color: #f1e9df;
}

.stage {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.stack {
  display: flex;
  padding: 10px;
  border-radius: 999px;
  outline-offset: 6px;
}

.stack__item {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2622;
  border: 3px solid #171310;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.stack__item + .stack__item {
  margin-left: -18px;
}

.stack__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stack__item--more {
  display: grid;
  place-items: center;
  background: linear-gradient(155deg, #64748b 0%, #1e293b 100%);
  color: #f1f5f9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* hoverまたはキーボードフォーカスで扇状に広がる（各アイテムを個別の角度・距離へ） */
.stack:hover .stack__item--1,
.stack:focus-visible .stack__item--1 { transform: translate(-24px, -12px) rotate(-12deg); }
.stack:hover .stack__item--2,
.stack:focus-visible .stack__item--2 { transform: translate(-7px, -18px) rotate(-4deg); }
.stack:hover .stack__item--3,
.stack:focus-visible .stack__item--3 { transform: translate(10px, -18px) rotate(4deg); }
.stack:hover .stack__item--4,
.stack:focus-visible .stack__item--4 { transform: translate(27px, -10px) rotate(11deg); }

.hint {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(241, 233, 223, .5);
  text-align: center;
  max-width: 280px;
}

@media (prefers-reduced-motion: reduce) {
  .stack__item { transition: none; }
  .stack:hover .stack__item,
  .stack:focus-visible .stack__item { transform: none; }
}

@media (max-width: 420px) {
  .stack__item { width: 46px; height: 46px; }
  .stack__item + .stack__item { margin-left: -14px; }
}

【JavaScript】
// 扇状に広がる演出はCSSのhover/focus-visibleのみで完結するためJSは不要です。

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

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