イタリアン（綺麗系・シンプル）

だれに向けたページか

記念日の前に「落ち着いて食事ができる店」を探す30〜50代の二人連れ。 写真1枚と短いコピーで「静かでおいしそう」を伝え、すぐ予約できるようにする。

色

D01 で背景が変わる区切りは、.tone-bg・.tone-sand・.tone-dark のクラスで文字色も一緒に切り替える（style 属性に書かない）。

文字

• 見出し：Hina Mincho（細い明朝）。大きなコピーは 細い明朝を大きく、字間を広く
• 英字：Gilda Display（細いセリフ）
• 本文：Noto Sans JP 300/400・16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（A03）：全面の写真（窓辺の手打ちパスタ）の左に、大きなコピー「ひと皿の、静けさを。」と予約ボタン。スクロールすると写真が余白のある角丸のカードに縮み、ページの地色が見えてくる
2. ごあいさつ：細い線と短い文。余白を広く
3. 手打ちパスタ：縦長の写真と文
4. コース（Swiper）：前菜・魚・パスタ・肉・ドルチェの5皿をスライドで送る。ここに入るとページ全体の背景が砂色に変わる（D01）
5. ワインと夜（D05）：ページ全体が暗くなり、煙の写真の上に金属調の店名ロゴ。結びで小さなロゴが格子に並び、少しずつ違う向きで光る
6. ご予約：背景が生成りに戻る（D01）。コース2つと予約ボタン
7. 店の情報・フッター

動きの決まり

• JS・GSAP が無いとき：写真は全面のまま、背景色は区切りごとの色の帯（.tone-*）で並ぶ。スライドは指で横に送れる並び。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」。スライドの自動送りもしない
• 動きはゆっくり（0.8〜1.4秒）。弾む・揺れる動きは使わない

スライドの作り方

Swiper（MIT・vendor/swiper-bundle.min.js）。自動送りは6秒ごと、「一時停止」ボタンで止められる。JS なしは scroll-snap で指で送れる横並び。

写真

新しく作る：窓辺の手打ちパスタ（メインビジュアル）／パスタを切る手、の2枚。 写真庫から：前菜・魚・肉・ドルチェ・ワイン蔵（012）／煙（023）。

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

• 見出しは Hina Mincho、英字は Gilda Display の小さな添え字
• 区切りは「生成り」「砂色」の2色を交互に。暗い区切りは1ページに1回まで
• 演出は1ページに1つまで。動きはゆっくり
• 料金・席数・営業時間は見本の値（〇〇）。会員が本物に替える