カツプロ（ホーム）
カツプロチャットAI
カツプロ AI SEO
サイト診断
サーバーウォッチ
SNSアカウント診断
MoteRaku
デザインギャラリー
画像ツール
ファビコン生成
OGPの見え方チェック
文字の読みやすさチェック
カツプロPR
SNS文字数カウント
Instagram画像分割
QRコード作成
レビュー
名刺スキャン
見積書・請求書
電子印鑑作成
| 業種 | 宿泊・観光（ブティックホテル） |
| 系統 | カッコイイ系（横に広い太い英字・極太の明朝・白と黒と灰色だけ・直線） |
| 骨組み | K03 全画面を1枚ずつ送る：1区切り＝1画面（6枚）。html { scroll-snap-type: y mandatory }＋各区切りに scroll-snap-align: start。ヘッダーに「03 / 06」を出す（IntersectionObserver） |
| 形 | スマホのまま横に延長：PCでも1列。写真・黒い面は端から端まで、文字の列だけ 620px |
| スライド | Swiper（vendor/swiper-bundle.min.js・MIT）：館内の写真4枚。点・矢印・キーボード・自動送り（「止める」で止まる）。JSなしは overflow-x: auto; scroll-snap の横並び |
| メインビジュアル | 静止画を動かす（動画風）：白黒の写真1枚が、丸窓から全面にひらき、ゆっくり寄って流れ、隅の「REC 00:00:07」の時刻が進む |
| 演出の型 | A01（丸窓が広がって全画面になる。ただし縦スクロールではなく、読み込み時に1回）／B05（客室カードの白→灰→黒の重なり。K03 の1画面に収めるため、sticky でなく重ねた見た目で動かさない）／F03（破った紙の縁。黒い2枚の下の縁だけ） |
| 外した型 | なし（A01・B05 は動かし方を骨組みに合わせて変えた） |
| 動きの主役 | メインビジュアルの動画風（丸窓がひらく2.6秒＋ゆっくり寄る）。ほかは動かさない。GSAP・ScrollTrigger なし（vendor/ には Swiper だけ）。「下からふわっと」は使っていない |
| 架空の宿 | 「HOTEL GRAPHITE」— 古い印刷所を直した、客室12室のホテル |
6枚の順番
01 メインビジュアル（黒・下の縁を破る）→ 02 はじめに（白）→ 03 客室（灰。白・灰・黒のカードが重なる）→ 04 館内（黒・Swiper・下の縁を破る）→ 05 ご利用の決まり（白）→ 06 ご予約・フッター（黒）
色と書体（共通の変数名13個だけ）
--c-bg --c-bg-alt --c-text --c-sub --c-line --c-accent（黒の面とボタン）--c-accent-text --c-on-accent --font-ja（Noto Sans JP）--font-head（Noto Serif JP 900）--font-en（Syncopate 700＋日本語の書体）。
区切りは .t-white .t-gray .t-char（濃い灰）.t-black が同じ名前の変数をすべて上書きする（ヘッダーは .t-black）。色は白・灰・黒だけ。script.js に色は無い。
動かないとき
JSなし・prefers-reduced-motion：丸窓は最初から全画面、写真は止まったまま、時刻は「00:00:07」のまま、館内は指で送れる横並び（自動送りもしない）。scroll-snap は CSS なのでそのまま効く。
スライドの作り方
Swiper。slidesPerView: 1.12（PC 1.6）で次の写真をのぞかせる。ページ送りの点は押せる高さ 44px に広げた。自動送りは4.2秒。
写真の出どころ
新しく作った：hero（雨の夜の窓辺の客室・顔の1枚）。
写真庫から（画像を開いて確かめた）：051 ロビー（客室・バーは窓の外に実在の塔に似た塔が写るので使わない）／051 屋内プール／012 食卓／053 灰色の客室／053 コンクリートの建物の入口。写真は CSS（grayscale(1) contrast(1.1)）で白黒にそろえた。会員が自分の写真に替えたら、この処理は消してよい。
使わなかった：006 の客室（木と和室で、白黒の配色に合わない）。前の版の「らせん階段」は新しく作らない。
会員が本物に替えるもの
料金・広さ・築年・時刻・キャンセルの決まり・電話番号・住所は見本の値（〇〇）。会員が本物に替える。
下層ページを作るときの決まり
- 1区切り＝1画面（
min-height: 100svh）。文字は短く、あふれるなら区切りを分ける。枚数は5〜7 - PCでも段組みにしない。文字の列は 620px、写真と黒い面は端から端まで
- 色は白・灰・黒だけ。写真も白黒にそろえる。区切りは破った紙の縁か直線。丸い角は使わない
- 動きは1ページに1つまで
