カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 宿泊・観光（キャンプ場） |
| 系統 | 可愛い系（Potta One の丸い太字・3px の線と右下の影・吹き出し・シール型のタブ・弾まない穏やかな動き） |
| 骨組み | K01 1画面完結：PC は100%の高さに「ヘッダー＋面＋下のタブ」を収め、下に並んだ5つのシール型タブ（はじめに・サイト・あそび・流れ料金・予約案内）か「ご予約」ボタンで面を切り替える。縦に長く積まない。スマホ・JSなしは5つの面が縦に並ぶ |
| 形 | ふつうの縦長 |
| スライド | Swiper：「サイトの種類」の面。点（押せる大きさ44px）・矢印・キーボード・自動送り（「自動で送る：切る」のボタンで止められる。触ると止まる）。prefers-reduced-motion では自動送りなし。JSなしは overflow-x: auto で指で横に送れる |
| メインビジュアル | イラスト・図形：SVG の太陽・丸い山・テント・木・川（面0いっぱい）。写真は脇（面2・面4） |
| 演出の型 | D03 ぼかした色の雲（黄・空色・若葉）がページ全体の背景でゆっくり形を変える／F01 面2の「昼は川で／夜はたき火で」の2色の面の境目をまたいで写真が置かれる |
| 動きの主役 | D03 の色の雲（CSS の @keyframes。位置と大きさだけ動かす）。面の切り替えは透明度だけ（0.3秒）。GSAP・ScrollTrigger 不使用（vendor には Swiper だけ）。「下からふわっと」は使っていない |
| 架空のキャンプ場 | 「もりのこキャンプ場」 |
面
0 イラストのメインビジュアル → 1 サイトの種類（Swiper）→ 2 あそびと手ぶらプラン（F01）→ 3 一日の流れと料金 → 4 よくある質問・ご予約・アクセス（3列）
色と書体（共通の変数名13個だけ）
--c-bg（淡い若葉）--c-bg-alt（クリーム）--c-text／--c-line（深い森の緑）--c-sub --c-accent（若葉）--c-accent-text --c-on-accent --c-2（太陽の黄）--c-3（空色）--font-ja（M PLUS Rounded 1c）--font-head（Potta One）--font-en（Grandstander 800＋日本語の書体）。全面が明るい地なので区切りでの変数の上書きは無い。木の濃い緑は color-mix で作る。
動かないとき
JS なし：雲は動くが（CSS）、面は全部縦に並び、タブは出ない。Swiper は指で横に送れる並び。prefers-reduced-motion：雲・面の切り替え・自動送りを止める。1画面モードは幅1080px以上かつ高さ680px以上のときだけ。
写真の出どころ
新しく作る：tent（川辺の黄色いテント・顔の1枚。面4に置く）。写真庫から（画像を開いて確かめた）：bbq（048 夕方のデッキのバーベキュー）。同じ048の fire・morning も合うが、1ページ1枚の写真で足りるので使わない。メインビジュアルは写真ではなくイラスト。
下層ページを作るときの決まり
- 見出しは Potta One、英字は Grandstander。線は 3px の深い緑、影は右下 5px
- 面は5つまで。タブは下に並べる。色の雲は背景の1か所だけ
- 料金・区画数・時間・電話・住所は見本の値（〇〇）。会員が本物に替える
