都市型ホテル（スタイリッシュ／高級感）

だれに向けたページか

出張のついでに一泊を良くしたい人、記念日に「街の夜景」を目当てに泊まる30〜50代。 朝から夜まで、このホテルで過ごす一日の色の移り変わりを見せて、泊まる時間を想像させる。

色

文字

• 英字：Cormorant Garamond（細く・字間を広く）
• 日本語の見出し：Shippori Mincho（500・700）
• 本文：Noto Sans JP 16px・行の高さ 2.0

ページの構成と演出

1. 開幕（A04）：宵の紫の幕に「YOI」のロゴだけ。幕の下から夜景の写真がぼかし→くっきりとにじみ出て、ロゴは小さくなりながらヘッダーの定位置へ移って溶け込む。1回の訪問で1回だけ（sessionStorage）。2回目・JSなし・動きを減らす設定では幕を出さない
2. メインビジュアル：上層階の窓から見る夜景。下に暗いグラデを敷いて白い見出し
3. コンセプト：短い文と、ロビーの写真
4. ホテルの一日（C03）：PCでは区画を止めて、5枚の場面（ロビー→客室→ダイニング→スイート→バー）が横に流れる。進むにつれて背景が白→薄灰→灰→濃灰→黒に変わり、文字色も一緒に反転する。下に「01 —— 05」の進み具合の線
5. 客室：3タイプ（料金は見本の値）
6. プラン：宵の紫の面に2プランと予約ボタン
7. アクセス・フッター

• 目次（B09）：PCでは画面の左端に縦の目次を固定し、いまいる区切りに紫の線と印が付き続ける。暗い区切り（ホテルの一日の後半・プラン）では目次の文字も白に切り替える。スマホでは目次の代わりに、ヘッダーの下に「いまの区切りの名前」を細い帯で出す

動きの決まり

• JSや GSAP が無いとき：幕は出ない／ホテルの一日は5枚が縦に並び、それぞれ自分の背景色を持つ／目次は普通のリンクとして並ぶ。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」
• 揺らす・回す動きはしない。横の流れは PC（1080px 以上）だけ
• 料金・部屋数・お客様の数字は見本の値（〇〇）。会員が本物に替える

写真（codex）

上層階からの夜景／ロビー／客室／ダイニング／スイートの浴槽／バー／スパ、の7枚。人は写さない。

下層ページを作るときの決まり

• 見出しは「Cormorant Garamond の英字（小）＋明朝の日本語」の2段
• 宵の紫の面は1ページに1回まで。紫の文字は --c-accent-text
• 左の目次（B09）は下層でも使ってよい（区切りが4つ以上あるページだけ）。幕（A04）はトップだけ