写真が切り替わるスライドショー

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

書き換える項目

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

[キャッチコピー]

例：今日のいちばんを、炭火で。

[ボタン文言]

例：メニューを見る

[画像]

3〜5枚。それぞれのパスと、写っているものの説明

[使用技術]

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

あなたは表示速度とアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「写真が切り替わるスライドショーのファーストビュー」を実装してください。

## 表示内容
- 写真：[画像]
- キャッチコピー：[キャッチコピー]（写真が変わっても固定で表示する）
- ボタン：[ボタン文言]
- 何枚目かを示す印（写真の枚数ぶんの短い線）
- 一時停止／再生ボタン

## レイアウト
- セクションの高さは min-height: 100svh（PC は最大 800px まで）
- 写真はセクション全面に敷く（object-fit: cover）
- テキストは左下に配置。左右の余白は PC 64px / スマホ 24px、下の余白は PC 96px / スマホ 72px
- 印と一時停止ボタンは、下端から 32px の位置に横並びで置く（左右の余白はテキストと揃える）

## 切り替えの動き
- 5秒ごとに、次の写真へ 1.2秒かけてフェードで切り替える（横に流さない）
- 表示中の写真は、5秒かけてごくゆっくり拡大する（1 → 1.05 倍）
- 最後の写真の次は、最初の写真に戻る
- 印を押すと、その写真に切り替わる。スマホでは左右のスワイプでも切り替えられる
- マウスを載せている間と、キーボードでフォーカスしている間は、自動の切り替えを止める

## デザイン
- 写真の上に、左下が濃く右上に向かって透明になる暗色のグラデーションを重ねる
- キャッチコピー：clamp(30px, 5.5vw, 56px)、font-weight 700、line-height 1.35、色 #FFFFFF
- ボタン：高さ 52px、左右の padding 28px、角丸 9999px、背景 #1463F0、文字 #FFFFFF・15px・font-weight 700
- 印：幅 32px・高さ 3px の線、色 rgba(255,255,255,.4)。表示中の印は、5秒かけて左から白く伸びる
- 一時停止ボタン：直径 36px の円、枠線 1px solid rgba(255,255,255,.6)、白いアイコン

## 画像の扱い
- 1枚目だけを最初に読み込み（fetchpriority="high"）、2枚目以降は遅れて読み込む
- すべての写真に width と height を指定する
- 外部のスライダー用ライブラリは使わず、CSSと少量のJavaScriptで実装する

## アクセシビリティ
- キャッチコピーは h1
- スライドショー全体に role="group" と aria-roledescription="カルーセル"、ラベルを付ける
- 印は button 要素にし、「1枚目の写真を表示」のようなラベルと、表示中を示す aria-current="true" を付ける
- 一時停止ボタンには、状態に応じたラベル「スライドショーを一時停止／再生」を付ける
- prefers-reduced-motion: reduce のときは自動で切り替えず、拡大の動きも止める
- 表示中でない写真は、スクリーンリーダーに読み上げられないようにする

## 出力形式
- [使用技術]のコードを1つ出力
- 切り替えの間隔と速さをCSS変数か定数にまとめ、変更箇所をコメントで説明