カウントダウン付きのファーストビュー

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

書き換える項目

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

[キャンペーン名]

例：春の新生活キャンペーン

[見出し]

例：初月の利用料が0円

[終了日時]

例：2026年5月31日 23:59

[ボタン文言]

例：今すぐ申し込む

[使用技術]

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

あなたはWebデザイナー兼フロントエンドエンジニアです。
以下の条件で「カウントダウン付きのファーストビュー」を実装してください。

## 表示内容
- ラベル：[キャンペーン名]
- 見出し：[見出し]
- 「終了まで」の文字と、残り時間（日・時間・分・秒）
- ボタン：[ボタン文言]
- 終了日時：[終了日時]

## レイアウト
- すべて中央揃え。上から ラベル → 見出し → カウントダウン → ボタン
- カウントダウンは、数字の箱を4つ横に並べ、箱の下に「日」「時間」「分」「秒」

## デザイン
- 背景：#1463F0。文字は #FFFFFF
- ラベル：13px、font-weight 700、背景 #FFFFFF、文字 #1463F0、padding 4px 16px、角丸 999px
- 見出し：PC 48px / スマホ 30px、font-weight 800、line-height 1.3
- 数字の箱：幅 72px、高さ 72px（スマホ 56px）、背景 rgba(255, 255, 255, 0.14)、角丸 12px、数字 40px・font-weight 700・tabular-nums
- 単位：12px、不透明度 0.85
- ボタン：高さ 56px、角丸 999px、背景 #FFFFFF、文字 #1463F0・font-weight 700

## 動作
- 1秒ごとに残り時間を更新する。数字は2桁でそろえる（例：05）
- 終了日時は、日本時間（+09:00）を明示して扱う
- 終了したら、カウントダウンを「このキャンペーンは終了しました」に変え、ボタンを通常の申し込みへの案内に切り替える
- 残り時間を偽って表示しない（訪問のたびにリセットされるカウントダウンにしない）

## アクセシビリティ
- 秒ごとに読み上げられないよう、カウントダウンには aria-live を付けない。代わりに「5月31日 23時59分まで」と文字で終了日時を表示する
- 見出しは h1
- 白い文字と #1463F0 のコントラスト比 4.5:1 以上

## 出力形式
- [使用技術]のコードを1つ出力