動画背景のファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：海まで、歩いて3分の宿。

[ボタン文言]

例：宿泊プランを見る

[動画のパス]

10〜20秒ほどの無音の動画。例：/videos/hero.mp4

[代わりの画像のパス]

動画の最初の場面の画像。例：/images/hero-poster.jpg

[使用技術]

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

あなたは表示速度とアクセシビリティに詳しいフロントエンドエンジニアです。
以下の条件で「動画背景のファーストビュー」を実装してください。

## 表示内容
- 背景動画：[動画のパス]
- 動画の代わりに出す画像：[代わりの画像のパス]
- キャッチコピー：[キャッチコピー]
- ボタン：[ボタン文言]
- 動画の一時停止／再生ボタン

## レイアウト
- セクションの高さは min-height: 100svh（PC は最大 820px まで）
- 動画はセクション全面に敷く（object-fit: cover）
- テキストは中央揃えで、縦方向も中央に置く。左右の余白 24px
- 一時停止ボタンは右下（端から 24px）に置く

## 文字を読ませるための処理
- 動画の上に、暗い半透明の幕（rgba(17,28,48,.45)）を重ねる
- 動画が読み込まれるまでは、同じ位置に代わりの画像（poster）を表示する
- さらにその下に暗い背景色を指定し、何も読み込めなくても文字が読めるようにする

## デザイン
- キャッチコピー：clamp(32px, 6vw, 60px)、font-weight 700、line-height 1.35、色 #FFFFFF
- ボタン：高さ 56px、左右の padding 32px、角丸 9999px、背景 #1463F0、文字 #FFFFFF・16px・font-weight 700、キャッチコピーの下 32px
- 一時停止ボタン：直径 44px の円、背景 rgba(255,255,255,.2)、枠線 1px solid rgba(255,255,255,.6)、白いアイコン

## 動画の扱い
- video 要素に autoplay、muted、loop、playsinline を付ける（音は出さない）
- preload="metadata" にして、最初の読み込みを軽くする
- 画面幅 768px 未満では動画を読み込まず、代わりの画像だけを表示する（通信量を抑えるため）
- 動画が画面の外に出たら自動で一時停止し、戻ってきたら再生する
- 動画ファイルの目安（10〜20秒、5MB以下、MP4とWebMの2形式）をコメントで補足する

## アクセシビリティ
- キャッチコピーは h1
- 一時停止ボタンは button 要素にし、状態に応じたラベル「背景動画を一時停止／再生」を付ける
- prefers-reduced-motion: reduce のときは自動再生せず、代わりの画像を表示する
- 動画は装飾として扱い、aria-hidden="true" を付ける
- 幕を重ねた上で、文字のコントラスト比が 4.5:1 以上になることを確認する

## 出力形式
- [使用技術]のコードを1つ出力
- 幕の濃さを調整する箇所をコメントで説明