書道教室（カッコイイ系・高級感／スタイリッシュ）

だれに向けたページか

30〜50代の働く大人。子どもの習い事の延長ではなく、一人で墨に向かう静かな時間を夜に持ちたい人。 かわいさ・やさしさではなく、黒と墨と紫で「格好いい習い事」に見せる。

色

文字

• 大きな見出し・くり抜き文字：Yuji Boku（筆の太い字）
• 英字：Cinzel（大文字だけの碑文調・字間を広く）
• 本文：Noto Sans JP 400 16px・行の高さ 2.0

ページの構成と演出

1. メインビジュアル（静止画を動かす＋A01）：黒い画面の中央に丸窓。窓の中の「筆を運ぶ写真」が、ゆっくり寄りながら横に流れ続ける（動画のように見える。12秒で往復）。スクロールすると丸窓が広がって全画面になり、縦書きの「黒は、いちばん深い色。」が浮かぶ
2. 教室について：半紙色の区切り。短い文と教室の写真
3. くり抜き文字（E01）：画面いっぱいの筆文字「墨」の形に、墨をする写真をくり抜く。スクロールすると中の写真が流れる
4. コース（Swiper）：大人の書・ペン字・かな・師範の4コース。点・矢印・キーボードで送る。自動送り（6秒）は停止ボタンで止められる
5. 一日の流れ・料金：入会金・月謝は〇〇
6. 体験の申し込み：紫の線の大きなボタン
7. アクセス・フッター

スライドの作り方（Swiper）

• vendor/ の Swiper を使う（CDNに頼らない）。keyboard・a11y・pagination（押せる点）・navigation（矢印）を付ける
• 自動送りは6秒。停止／再開ボタンを付ける。prefers-reduced-motion のときは自動送りしない
• JSなし・Swiperが読めないとき：同じ並びが overflow-x: auto; scroll-snap-type: x mandatory で指で横に送れる

動きの決まり

• JSや GSAP が無いとき・prefers-reduced-motion：丸窓は最初から全画面（写真は止まったまま）、くり抜き文字の中の写真も止まったまま、コースは指で横に送る。どれも全部読める
• 写真のゆっくりした寄り・流れは小さく（1.0→1.12倍）。画面全体を揺らす・回す動きはしない

写真

新しく3枚：筆を運ぶ手（メインビジュアル）／墨をする硯（縦・くり抜き文字の中）／教室。 写真庫から2枚：万年筆で書く手（023・ペン字コース）／明るい和室（006・体験の区切り）。

料金

入会金・月謝・体験料は見本の値（〇〇）。会員が本物に替える。

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

• 大きな見出しは Yuji Boku、英字の添え字は Cinzel
• 区切りは「墨の黒」と「半紙の白」の2色。紫は線と小さな文字だけ
• 演出は1ページに1つまで。丸窓（A01）はトップだけ