写真を全面に敷いたファーストビュー

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

書き換える項目

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

[キャッチコピー]

例：暮らしに、静かな余白を。

[英字ラベル]

例：SINCE 2012。不要なら削除

[ボタン文言]

例：コレクションを見る

[画像のパス]

例：/images/hero.jpg

[画像の説明]

写真に写っているもの。例：朝の光が入るリビング

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「写真を全面に敷いたファーストビュー」を実装してください。

## 表示内容
- 背景写真：[画像のパス]（内容：[画像の説明]）
- 英字ラベル：[英字ラベル]
- キャッチコピー：[キャッチコピー]
- ボタン：[ボタン文言]

## レイアウト
- セクションの高さは min-height: 100svh（PC は最大 800px まで）
- 写真はセクション全面に敷く（object-fit: cover）
- テキストは左下に配置。左右の余白は PC 64px / スマホ 24px、下の余白は PC 80px / スマホ 48px
- 上から 英字ラベル → キャッチコピー → ボタン の順

## 文字を読ませるための処理
- 写真の上に、テキスト側（左下）が濃く、反対側に向かって透明になる暗色のグラデーションを重ねる
  （例：左 rgba(17,28,48,0.8) → 右 rgba(17,28,48,0.1)）
- 文字に text-shadow は使わず、グラデーションだけでコントラストを確保する
- 写真が読み込まれるまでの間も文字が読めるよう、セクションに暗い背景色を指定しておく

## デザイン
- 英字ラベル：12px、letter-spacing 0.25em、色 rgba(255,255,255,0.85)
- キャッチコピー：clamp(32px, 6vw, 64px)、セリフ体、line-height 1.3、色 #FFFFFF
- ボタン：高さ 48px、角丸 9999px、背景は透明、1px solid #FFFFFF、文字 #FFFFFF
- ボタンの hover：背景と枠線を #1463F0、文字 #FFFFFF

## 画像の扱い
- 背景画像はCSSではなく img 要素で実装し、PC用とスマホ用を picture 要素で出し分ける
- fetchpriority="high" を付け、loading="lazy" は付けない（最初に見える画像のため）
- width と height を指定してレイアウトのずれを防ぐ
- スマホで主役が切れないよう object-position を調整できるようにする

## アクセシビリティ
- キャッチコピーは h1
- 写真が雰囲気づくりのための装飾なら alt は空、内容に意味があるなら[画像の説明]を alt に入れる
- 写真上の文字のコントラスト比が 4.5:1 以上になることを確認する

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