グランピング施設（ナチュラル・やさしい／ポップ・元気）

だれに向けたページか

小さな子どものいる家族と、友だち同士で「手ぶらでキャンプ気分」を味わいたい20〜40代。 泊まった気分を先に味わわせ、「夜の森、歩いてみたい」と予約へ進ませる。

色

文字

• 見出し：Zen Maru Gothic 900
• 英字：Fredoka（丸くて元気）
• 本文：Zen Kaku Gothic New 16px

ページの構成と演出

1. メインビジュアル：夕方のドームテントの写真。角丸の大きな窓に収め、白い等高線の模様の上に置く
2. のもりについて（D04）：背景に等高線を2層うっすら敷き、スクロールで違う速さで動かす（不透明度は1割以下）
3. のもりの一日（B01）：画面を止めたまま、15:00 到着→18:00 BBQ→20:00 焚き火→7:00 朝もや、と写真と言葉が入れ替わる。右に時計の目盛り
4. 夜の森を歩く（C06）：暗い森の地図。始める前に操作説明（「ドラッグ・指で動かすと、ランタンの明かりの所だけ見えます」）と「はじめる」ボタン。明かりを施設の札に近づけると札が光り、押すと案内が出る
   • 代わり：同じ施設の案内（テント・サウナ・BBQ・焚き火・星見デッキ・炊事棟）は、いつもカードの一覧として下に置く。JSなし・スマホ・動きを減らす設定でも、この一覧が普通に読める
   • スマホでは暗い森は最初は出さず、「暗い森を歩いてみる」ボタンで全画面に開く（ページのスクロールとぶつけないため）
5. お部屋とプラン：テントの中の写真と2つのプラン
6. ご予約・アクセス
7. フッター

動きの決まり

• JSや GSAP が無いとき：一日の4場面は縦に並ぶ、夜の森は出さずに施設の一覧だけ、等高線は止まる。全部読める
• prefers-reduced-motion のときは、上と同じ「動かない版」（夜の森も出さない）
• 夜の森は画面を動かすのは本人の指だけ。勝手に動き続けない

写真（codex）

全景／到着（昼のデッキ）／BBQ／焚き火／朝もや／テントの中／サウナ、の7枚。人は後ろ姿か手だけ。 夜の森の地図は写真を使わず、インラインSVGで描く。

会員が本物に替えるもの

料金（〇〇,〇〇〇円）・棟数・住所・電話・チェックインの時刻は見本の値。

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

• 見出しは Zen Maru Gothic 900＋Fredoka の小さな英字
• 等高線の模様は若葉色の区切りだけに敷く（写真の上には敷かない）
• 夜（暗い面）は1ページに1回まで