追従するページ内目次

選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。

書き換える項目

プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。

[対象の見出し]

目次に載せる見出し。例：h2とh3

[使用技術]

例：HTML/CSS/JavaScript、React + Tailwind CSS

あなたはフロントエンドエンジニアです。
以下の条件で、記事ページ用の「追従するページ内目次」を実装してください。

## 表示内容
- 見出し「目次」
- 記事本文の中の[対象の見出し]を集めた、ページ内リンクのリスト

## レイアウト
- 1024px以上：本文の右側に幅 240px のカラムを作り、目次を position: sticky で固定（上から 96px の位置）
- 本文と目次の間隔 48px
- 目次が画面の高さを超えるときは、目次の中だけスクロールする
- 1024px未満：本文の最初の見出しの前に、開閉できる枠（details 要素）として表示する。最初は閉じておく

## デザイン
- 見出し「目次」：13px、font-weight 700、色 #1B2A44、下に 12px の余白
- リスト全体の左端に 2px の線（#E2E8F0）
- 項目：14px、line-height 1.5、色 #5F6D84、上下の padding 6px、左の padding 16px
- 下の階層の見出し（h3）は、左の padding を 28px にして 13px で表示
- hover：文字色 #1B2A44
- いま読んでいる項目：文字色 #1463F0、font-weight 700、左端の線をその項目の高さぶんだけ #1463F0 にする

## 動作
- 見出しに id がない場合は、自動で重複しない id を付ける
- 目次の項目をクリックすると、その見出しまでなめらかにスクロールする。固定ヘッダーに隠れないよう、見出しの上に 88px の余白をとる（scroll-margin-top）
- いま読んでいる見出しの判定には IntersectionObserver を使う（スクロールのたびに計算しない）
- ページの一番下まで来たら、最後の項目に印をつける

## アクセシビリティ
- nav 要素に aria-label="目次" を付け、リストは ol / li でマークアップする
- いま読んでいる項目に aria-current="location" を付ける
- prefers-reduced-motion: reduce のときは、なめらかなスクロールを無効にする
- focus-visible のスタイルを用意する

## 出力形式
- [使用技術]のコードを1つ出力
- 見出しが2つ以下のページでは目次を表示しない処理を入れる