縦書きコピーのファーストビュー

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

書き換える項目

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

[キャッチコピー]

2〜3行。例：山あいの湯で、／ととのう。

[屋号]

例：湯宿 ひなた

[ボタン文言]

例：ご予約はこちら

[画像のパス]

例：/images/hero.jpg

[画像の説明]

例：湯けむりの立つ露天風呂

[使用技術]

例：HTML/CSS、React + Tailwind CSS

あなたは日本語の組版に詳しいWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「縦書きコピーのファーストビュー」を実装してください。

## 表示内容
- 背景写真：[画像のパス]（内容：[画像の説明]）
- キャッチコピー（縦書き）：[キャッチコピー]
- 屋号：[屋号]
- ボタン：[ボタン文言]

## レイアウト
- セクションの高さは min-height: 100svh（PC は最大 840px まで）
- 写真はセクション全面に敷く（object-fit: cover）
- キャッチコピーは右上寄りに縦書きで配置（右から PC 12% / スマホ 24px、上から PC 18% / スマホ 96px）
- 屋号とボタンは左下に横書きで配置（左から PC 64px / スマホ 24px、下から PC 64px / スマホ 40px）

## 縦書きの指定
- writing-mode: vertical-rl を使う。行は右から左へ進む
- 改行位置は[キャッチコピー]の指定どおりにし、行の途中で勝手に折り返さないようにする
- 2行目以降は、1行目より1文字ぶん下げて始める
- 文字：clamp(24px, 3.6vw, 40px)、セリフ体（明朝体）、font-weight 500、letter-spacing 0.2em、行間は line-height 2
- 2桁までの半角数字は、1文字ぶんの幅に横並びで収める（text-combine-upright: all）
- 句読点やかっこが縦書き用の向きで表示されることを確認する

## 文字を読ませるための処理
- 写真全体に、暗い半透明の幕（rgba(17,28,48,.35)）を重ねる
- キャッチコピーの後ろ側（右上）は、幕を少し濃くする
- 写真が読み込まれるまでの間も文字が読めるよう、セクションに暗い背景色を指定しておく

## デザイン
- 文字色はすべて #FFFFFF
- 屋号：14px、letter-spacing 0.3em
- ボタン：高さ 48px、左右の padding 28px、角丸 0、背景は透明、1px solid #FFFFFF、文字 14px、letter-spacing 0.1em、屋号の下 20px
- ボタンの hover：背景と枠線を #1463F0 にする
- 表示されたとき、キャッチコピーが1行ずつ、上から下へ 0.8秒かけてふわっと現れる

## 画像の扱い
- 背景画像は img 要素で実装し、PC用とスマホ用を picture 要素で出し分ける
- fetchpriority="high" を付け、width と height を指定する
- スマホで主役が切れないよう object-position を調整できるようにする

## アクセシビリティ
- キャッチコピーは h1。改行は br ではなく、行ごとの span で分ける（読み上げが途切れないようにする）
- 写真が装飾なら alt は空、内容に意味があるなら[画像の説明]を alt に入れる
- prefers-reduced-motion: reduce のときは、現れる動きを無効にする
- 幕を重ねた上で、文字のコントラスト比が 4.5:1 以上になることを確認する

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