# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクロールトリガー」（Scroll Trigger）と呼ばれる動きです。

# 作ってほしい動き
Scroll Trigger（ある位置を過ぎたら切り替わる）。セクションが画面の決まった線（画面のまん中）を越えたら、ページの背景の色をそのセクションの色に切り替える。

# 動き
- きっかけ：IntersectionObserver の rootMargin を "-50% 0px -50% 0px" にして、線を越えたセクションを見つける
- IntersectionObserver に root: document を付ける（iframe の中や埋め込みでも、線どおりに動くように。付けないと rootMargin が無視されることがある）
- セクションごとの色は HTML の data-bg に書き、html の CSS 変数（--stg-bg）に入れる
- 背景の色は transition: background-color 0.6秒 で切り替える
- 上へ戻ったときも、線の上にあるセクションの色に戻す

# 付ける場所
- 縦に長いページのセクション

# 守ってほしいこと
- scroll イベントで位置を計算しない（IntersectionObserver を使う）
- 文字の色と背景の色の差（コントラスト）は、どの色に切り替わっても 4.5:1 以上にする

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクロールトリガー」（Scroll Trigger）と呼ばれる動きです。

# 作ってほしい動き
Scroll Trigger（ある位置を過ぎたら切り替わる）。セクションが画面の決まった線（画面のまん中）を越えたら、ページの背景の色をそのセクションの色に切り替える。

# 動き
- きっかけ：IntersectionObserver の rootMargin を "-50% 0px -50% 0px" にして、線を越えたセクションを見つける
- IntersectionObserver に root: document を付ける（iframe の中や埋め込みでも、線どおりに動くように。付けないと rootMargin が無視されることがある）
- セクションごとの色は HTML の data-bg に書き、html の CSS 変数（--stg-bg）に入れる
- 背景の色は transition: background-color 0.6秒 で切り替える
- 上へ戻ったときも、線の上にあるセクションの色に戻す

# 付ける場所
- 縦に長いページのセクション（表示例：「つくる」「とどける」「ささえる」の3つのセクション）

# 守ってほしいこと
- scroll イベントで位置を計算しない（IntersectionObserver を使う）
- 文字の色と背景の色の差（コントラスト）は、どの色に切り替わっても 4.5:1 以上にする

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「背景色トランジション」（Background Color Transition）と呼ばれる動きです。

# 作ってほしい動き
Background Color Transition（地の色と文字の色が、セクションごとに入れ替わる）。セクションが画面の線（画面のまん中）を越えたら、ページの地の色・文字の色・アクセントの色を、そのセクションの組（テーマ）に 0.8秒かけて切り替える。

# 動き
- 色の組は CSS に名前を付けて書く（例：html[data-bt-theme="night"] に --bt-bg・--bt-fg・--bt-accent の3つ）。各セクションには data-theme で、どの組を使うかだけを書く
- きっかけ：IntersectionObserver（root: document、rootMargin: "-50% 0px -50% 0px"）で線を越えたセクションを見つけ、html の data-bt-theme をそのセクションの data-theme にする
- body の background-color と color、アクセントを使う要素の color に transition: 0.8秒 ease を付ける
- 上へ戻ったときも、線の上にあるセクションの組に戻す

# 付ける場所
- 明るい章と暗い章が交互に来る、縦に長いページ

# 守ってほしいこと
- どの組でも、文字の色と地の色の差（コントラスト）を 4.5:1 以上にする。地の色だけを替えて、文字の色を置いていかない
- セクション自身には背景の色を付けない（地の色はページ全体で1つ。セクションに色を付けると、切り替わりの途中で境目が見える）
- scroll イベントで位置を計算しない
- 動きを控える設定では transition を外し、色はすぐに切り替える

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「背景色トランジション」（Background Color Transition）と呼ばれる動きです。

# 作ってほしい動き
Background Color Transition（地の色と文字の色が、セクションごとに入れ替わる）。セクションが画面の線（画面のまん中）を越えたら、ページの地の色・文字の色・アクセントの色を、そのセクションの組（テーマ）に 0.8秒かけて切り替える。

# 動き
- 色の組は CSS に名前を付けて書く（例：html[data-bt-theme="night"] に --bt-bg・--bt-fg・--bt-accent の3つ）。各セクションには data-theme で、どの組を使うかだけを書く
- きっかけ：IntersectionObserver（root: document、rootMargin: "-50% 0px -50% 0px"）で線を越えたセクションを見つけ、html の data-bt-theme をそのセクションの data-theme にする
- body の background-color と color、アクセントを使う要素の color に transition: 0.8秒 ease を付ける
- 上へ戻ったときも、線の上にあるセクションの組に戻す

# 付ける場所
- 明るい章と暗い章が交互に来る、縦に長いページ（表示例：「朝の店」（白）→「夜の店」（濃紺）→「季節の品」（生成り）の3つのセクション）

# 守ってほしいこと
- どの組でも、文字の色と地の色の差（コントラスト）を 4.5:1 以上にする。地の色だけを替えて、文字の色を置いていかない
- セクション自身には背景の色を付けない（地の色はページ全体で1つ。セクションに色を付けると、切り替わりの途中で境目が見える）
- scroll イベントで位置を計算しない
- 動きを控える設定では transition を外し、色はすぐに切り替える

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクロールスパイ」（Scrollspy）と呼ばれる動きです。

# 作ってほしい動き
Scrollspy（目次の、いま読んでいる位置が光る）。横に置いた目次のうち、いま読んでいる見出しの項目に印を付け、スクロールに合わせて移す。

# 動き
- きっかけ：IntersectionObserver の rootMargin を "-30% 0px -65% 0px"（画面の上から3割）にして、その線にかかったセクションを「読んでいる」とする
- IntersectionObserver に root: document を付ける（iframe の中や埋め込みでも、線どおりに動くように。付けないと rootMargin が無視されることがある）
- 目次の項目に aria-current="location" を付け、CSS で文字を濃く・太くし、先頭に小さな丸い点を出す
- 印の色は 0.2秒で切り替える

# 付ける場所
- 長い記事・マニュアル・規約などの目次

# 守ってほしいこと
- 目次と本文は2列（目次 180px・本文の残り）に並べ、目次は position: sticky で画面に留める。SP（画面幅 640px 以下）では1列にして目次を本文の上に置き、留めない
- 印は aria-current="location" で付ける（読み上げでも、いまの位置が伝わる）
- scroll イベントで位置を計算しない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクロールスパイ」（Scrollspy）と呼ばれる動きです。

# 作ってほしい動き
Scrollspy（目次の、いま読んでいる位置が光る）。横に置いた目次のうち、いま読んでいる見出しの項目に印を付け、スクロールに合わせて移す。

# 動き
- きっかけ：IntersectionObserver の rootMargin を "-30% 0px -65% 0px"（画面の上から3割）にして、その線にかかったセクションを「読んでいる」とする
- IntersectionObserver に root: document を付ける（iframe の中や埋め込みでも、線どおりに動くように。付けないと rootMargin が無視されることがある）
- 目次の項目に aria-current="location" を付け、CSS で文字を濃く・太くし、先頭に小さな丸い点を出す
- 印の色は 0.2秒で切り替える

# 付ける場所
- 長い記事・マニュアル・規約などの目次（表示例：左に「はじめに」「準備するもの」「手順」「よくある失敗」の目次、右に本文）

# 守ってほしいこと
- 目次と本文は2列（目次 180px・本文の残り）に並べ、目次は position: sticky で画面に留める。SP（画面幅 640px 以下）では1列にして目次を本文の上に置き、留めない
- 印は aria-current="location" で付ける（読み上げでも、いまの位置が伝わる）
- scroll イベントで位置を計算しない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクラブ」（Scrub）と呼ばれる動きです。

# 作ってほしい動き
Scrub（スクロールした量に合わせて進む）。制作の流れの横にある縦の線が、スクロールした分だけ上から伸びていく。止めれば止まり、戻れば縮む。

# 動き
- CSS の scroll-driven animations で作る。流れ全体の箱に view-timeline-name: --sb を付け、線に animation-timeline: --sb
- 伸びる区間：animation-range: cover 20% cover 80%（画面の中ほどを通る間）
- @keyframes：from は transform: scaleY(0)、to は scaleY(1)。transform-origin: top
- animation-timing-function は linear

# 付ける場所
- 制作の流れ・沿革・ステップの一覧

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは線をはじめから全部見せる
- 線は height ではなく transform: scaleY() で伸ばす
- 薄い灰色の線を下に敷き、伸びる線の行き先が見えるようにする

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクラブ」（Scrub）と呼ばれる動きです。

# 作ってほしい動き
Scrub（スクロールした量に合わせて進む）。制作の流れの横にある縦の線が、スクロールした分だけ上から伸びていく。止めれば止まり、戻れば縮む。

# 動き
- CSS の scroll-driven animations で作る。流れ全体の箱に view-timeline-name: --sb を付け、線に animation-timeline: --sb
- 伸びる区間：animation-range: cover 20% cover 80%（画面の中ほどを通る間）
- @keyframes：from は transform: scaleY(0)、to は scaleY(1)。transform-origin: top
- animation-timing-function は linear

# 付ける場所
- 制作の流れ・沿革・ステップの一覧（表示例：「ご相談」から「お引き渡し」までの5つの段階）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは線をはじめから全部見せる
- 線は height ではなく transform: scaleY() で伸ばす
- 薄い灰色の線を下に敷き、伸びる線の行き先が見えるようにする

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「プログレスバー」（Scroll Progress）と呼ばれる動きです。

# 作ってほしい動き
Scroll Progress（読んだ量を示すバー）。画面の上の端に細いバーを固定し、ページを読み進めた分だけ左から伸ばす。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: scroll(root)
- @keyframes：from は transform: scaleX(0)、to は scaleX(1)。transform-origin: left
- バー：position: fixed、上の端、太さ 4px、色 #2563eb（青）

# 付ける場所
- ブログ・コラムなどの長い記事のページ

# 守ってほしいこと
- @supports (animation-timeline: scroll()) の中に書き、使えないブラウザではバーを出さない
- 固定のヘッダーがあるときは、ヘッダーの下の端に置く（ヘッダーに重ねない）
- バーは飾り。aria-hidden="true" を付ける

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「プログレスバー」（Scroll Progress）と呼ばれる動きです。

# 作ってほしい動き
Scroll Progress（読んだ量を示すバー）。画面の上の端に細いバーを固定し、ページを読み進めた分だけ左から伸ばす。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: scroll(root)
- @keyframes：from は transform: scaleX(0)、to は scaleX(1)。transform-origin: left
- バー：position: fixed、上の端、太さ 4px、色 #2563eb（青）

# 付ける場所
- ブログ・コラムなどの長い記事のページ（表示例：記事の見出しと本文の段落）

# 守ってほしいこと
- @supports (animation-timeline: scroll()) の中に書き、使えないブラウザではバーを出さない
- 固定のヘッダーがあるときは、ヘッダーの下の端に置く（ヘッダーに重ねない）
- バーは飾り。aria-hidden="true" を付ける

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「テキストフィル」（Text Fill on Scroll）と呼ばれる動きです。

# 作ってほしい動き
Text Fill on Scroll（読み進めると文字が濃くなる）。薄い灰色の大きな文が、スクロールに合わせて1行ずつ左から濃い色（#1f2937）に塗られていく。

# 動き
- 行は HTML で span に分ける（1行＝1つの span。display: block、width: fit-content）
- 文字の色：color: transparent にして、background: linear-gradient(to right, #1f2937 50%, #878e99 50%)、background-size: 200% 100%、background-clip: text
- 塗る前の灰色（#878e99）は、白い背景との差を 3:1 以上にする（大きな太字が読める差）
- @keyframes：background-position-x を 100% から 0% へ
- animation-timeline: view()、animation-range: cover 20% cover 50%（行ごとに、その行の位置で進む）

# 付ける場所
- ブランドの考え方・代表のことばなど、短い大きな文

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザと動きを控える設定では、はじめから濃い色（#1f2937）で見せる
- 本文には使わない。塗られる前の薄い文字は読みにくい

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「テキストフィル」（Text Fill on Scroll）と呼ばれる動きです。

# 作ってほしい動き
Text Fill on Scroll（読み進めると文字が濃くなる）。薄い灰色の大きな文が、スクロールに合わせて1行ずつ左から濃い色（#1f2937）に塗られていく。

# 動き
- 行は HTML で span に分ける（1行＝1つの span。display: block、width: fit-content）
- 文字の色：color: transparent にして、background: linear-gradient(to right, #1f2937 50%, #878e99 50%)、background-size: 200% 100%、background-clip: text
- 塗る前の灰色（#878e99）は、白い背景との差を 3:1 以上にする（大きな太字が読める差）
- @keyframes：background-position-x を 100% から 0% へ
- animation-timeline: view()、animation-range: cover 20% cover 50%（行ごとに、その行の位置で進む）

# 付ける場所
- ブランドの考え方・代表のことばなど、短い大きな文（表示例：「家は、建てて終わりではなく、住みながら育てていくもの。」の3行）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザと動きを控える設定では、はじめから濃い色（#1f2937）で見せる
- 本文には使わない。塗られる前の薄い文字は読みにくい

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「パララックス」（Parallax）と呼ばれる動きです。

# 作ってほしい動き
Parallax（奥と手前で動く速さが変わる）。写真の枠が画面を通るあいだ、枠の中の写真だけがまわりより少しゆっくり動く。

# 動き
- 枠：高さを決める（例：320px。写真は position: absolute で重ねるので、高さがないと枠が 0 になる）。overflow: clip（hidden にしない。hidden だと枠がスクロールの箱になり、view() が動かない）。中の写真は上下に 60px ずつ大きくしておく（inset: -60px 0）
- CSS の scroll-driven animations で作る：写真に animation-timeline: view()、animation-range: cover 0% cover 100%
- @keyframes：from は translateY(-60px)、to は translateY(60px)。linear

# 付ける場所
- ページの区切りに置く横長の写真

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは動かさない
- background-attachment: fixed を使わない（iOS の Safari で効かず、描き直しも重い）
- 動きを控える設定では動かさない（酔いやすい人がいる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「パララックス」（Parallax）と呼ばれる動きです。

# 作ってほしい動き
Parallax（奥と手前で動く速さが変わる）。写真の枠が画面を通るあいだ、枠の中の写真だけがまわりより少しゆっくり動く。

# 動き
- 枠：高さを決める（例：320px。写真は position: absolute で重ねるので、高さがないと枠が 0 になる）。overflow: clip（hidden にしない。hidden だと枠がスクロールの箱になり、view() が動かない）。中の写真は上下に 60px ずつ大きくしておく（inset: -60px 0）
- CSS の scroll-driven animations で作る：写真に animation-timeline: view()、animation-range: cover 0% cover 100%
- @keyframes：from は translateY(-60px)、to は translateY(60px)。linear

# 付ける場所
- ページの区切りに置く横長の写真（表示例：空と地面の写真と、上下の文章）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは動かさない
- background-attachment: fixed を使わない（iOS の Safari で効かず、描き直しも重い）
- 動きを控える設定では動かさない（酔いやすい人がいる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクロールズーム」（Scale on Scroll）と呼ばれる動きです。

# 作ってほしい動き
Scale on Scroll（写真が近づいて広がる）。小さめの写真が、画面に入ってからスクロールに合わせて大きくなり、元の大きさ（画面の幅いっぱい）になる。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: view()、animation-range: entry 0% cover 50%
- @keyframes：from は transform: scale(0.7)、to は scale(1)。linear

# 付ける場所
- セクションの切り替わりに置く大きな写真

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでははじめから元の大きさで見せる
- width ではなく transform: scale() で大きくする（まわりの要素を押さない）
- 動きを控える設定では動かさない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクロールズーム」（Scale on Scroll）と呼ばれる動きです。

# 作ってほしい動き
Scale on Scroll（写真が近づいて広がる）。小さめの写真が、画面に入ってからスクロールに合わせて大きくなり、元の大きさ（画面の幅いっぱい）になる。

# 動き
- CSS の scroll-driven animations で作る：animation-timeline: view()、animation-range: entry 0% cover 50%
- @keyframes：from は transform: scale(0.7)、to は scale(1)。linear

# 付ける場所
- セクションの切り替わりに置く大きな写真（表示例：「完成した住まい」の写真と、その上の見出し）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでははじめから元の大きさで見せる
- width ではなく transform: scale() で大きくする（まわりの要素を押さない）
- 動きを控える設定では動かさない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スティッキースクロール」（Sticky Scroll）と呼ばれる動きです。

# 作ってほしい動き
Sticky Scroll（片側は留めて、もう片側が流れる）。2列のセクションで、左の見出しと写真は画面に留め、右の説明だけが流れる。

# 動き
- 左の列：position: sticky、top: 32px、align-self: start
- 右の列：ふつうに流れる。セクションの終わりで、左の列も一緒に流れ去る
- JavaScript は使わない

# 付ける場所
- 特長・サービス内容を、見出し1つと説明いくつかで見せるセクション

# 守ってほしいこと
- 固定のヘッダーがあるときは、top をヘッダーの高さ＋余白にする
- 左の列が画面の高さより高くならないようにする（下が切れて読めなくなる）
- SP では1列にして、留めない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スティッキースクロール」（Sticky Scroll）と呼ばれる動きです。

# 作ってほしい動き
Sticky Scroll（片側は留めて、もう片側が流れる）。2列のセクションで、左の見出しと写真は画面に留め、右の説明だけが流れる。

# 動き
- 左の列：position: sticky、top: 32px、align-self: start
- 右の列：ふつうに流れる。セクションの終わりで、左の列も一緒に流れ去る
- JavaScript は使わない

# 付ける場所
- 特長・サービス内容を、見出し1つと説明いくつかで見せるセクション（表示例：左に「選ばれる理由」と写真、右に4つの理由）

# 守ってほしいこと
- 固定のヘッダーがあるときは、top をヘッダーの高さ＋余白にする
- 左の列が画面の高さより高くならないようにする（下が切れて読めなくなる）
- SP では1列にして、留めない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクロールテリング」（Scrollytelling）と呼ばれる動きです。

# 作ってほしい動き
Scrollytelling（読み進めると、留めた図が段ごとに替わる）。左に留めた棒グラフと大きな数字が、右の文章の段を読み進めるたびに、その段の年の数字へ描き替わる。

# 動き
- 並べ方：2列（図 1fr・文章 1fr）。図の列は position: sticky、top: 0、height: 100vh で画面に留め、中の図を上下のまん中に置く
- きっかけ：文章の各段（4段。各段の高さは画面の 70% 以上）を IntersectionObserver（root: document、rootMargin: "-50% 0px -50% 0px"）で見張り、画面のまん中にかかった段を「いまの段」にする
- 棒：transform: scaleY() で伸ばす（transform-origin: bottom）。いまの段の年までの棒を伸ばし、まだの年は scaleY(0)。いまの年の棒だけアクセントの色にする
- 大きな数字：段の数だけ同じ場所に重ねて置き、いまの段のものだけ opacity: 1（ほかは 0）
- 文章の段：いまの段のほかは opacity: 0.4 にして、読んでいる段を目立たせる
- 描き替えは 0.6秒の transition（transform と opacity だけ）

# 付ける場所
- 数字の移り変わりを説明する記事・事業の報告

# 守ってほしいこと
- 数字と年は文章の段にも書く。図は aria-hidden="true" にして、読み上げでは文章だけを読む
- JavaScript が動かないときは、図に最後の段の状態（棒は全部・数字は最後の年）を出す。最初に隠す指定は、JavaScript が html に付ける class の下に書く
- 動きを控える設定では transition を外し、段が替わったらすぐに描き替える
- scroll イベントで位置を計算しない

# SP（画面幅 640px 以下）
- 1列にし、図を画面の上に留める（position: sticky、top: 0、高さ 42vh、地の色を付ける）。文章の段はその下を流れる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクロールテリング」（Scrollytelling）と呼ばれる動きです。

# 作ってほしい動き
Scrollytelling（読み進めると、留めた図が段ごとに替わる）。左に留めた棒グラフと大きな数字が、右の文章の段を読み進めるたびに、その段の年の数字へ描き替わる。

# 動き
- 並べ方：2列（図 1fr・文章 1fr）。図の列は position: sticky、top: 0、height: 100vh で画面に留め、中の図を上下のまん中に置く
- きっかけ：文章の各段（4段。各段の高さは画面の 70% 以上）を IntersectionObserver（root: document、rootMargin: "-50% 0px -50% 0px"）で見張り、画面のまん中にかかった段を「いまの段」にする
- 棒：transform: scaleY() で伸ばす（transform-origin: bottom）。いまの段の年までの棒を伸ばし、まだの年は scaleY(0)。いまの年の棒だけアクセントの色にする
- 大きな数字：段の数だけ同じ場所に重ねて置き、いまの段のものだけ opacity: 1（ほかは 0）
- 文章の段：いまの段のほかは opacity: 0.4 にして、読んでいる段を目立たせる
- 描き替えは 0.6秒の transition（transform と opacity だけ）

# 付ける場所
- 数字の移り変わりを説明する記事・事業の報告（表示例：「みどり町図書館の来館者」2016年 3.2万人／2019年 5.1万人／2022年 4.0万人（改修で半年休館）／2025年 7.8万人）

# 守ってほしいこと
- 数字と年は文章の段にも書く。図は aria-hidden="true" にして、読み上げでは文章だけを読む
- JavaScript が動かないときは、図に最後の段の状態（棒は全部・数字は最後の年）を出す。最初に隠す指定は、JavaScript が html に付ける class の下に書く
- 動きを控える設定では transition を外し、段が替わったらすぐに描き替える
- scroll イベントで位置を計算しない

# SP（画面幅 640px 以下）
- 1列にし、図を画面の上に留める（position: sticky、top: 0、高さ 42vh、地の色を付ける）。文章の段はその下を流れる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スティッキー見出し」（Sticky Section Headers）と呼ばれる動きです。

# 作ってほしい動き
Sticky Section Headers（見出しが上に留まり、次の見出しに押し上げられる）。頭文字ごとに分けた一覧で、各段の見出しがその段を読んでいるあいだ画面の上（上から 0px）に留まり、次の段の見出しが来ると押し上げられて入れ替わる。

# 動き
- 一覧は頭文字ごとに section で分け、見出し（h2）を section の中の最初に置く
- 見出し：position: sticky、top: 0px。sticky は親（section）の中でしか留まらないので、段の終わりで見出しは段と一緒に上へ流れ、次の見出しと入れ替わる（押し上げる処理を JavaScript で書かない）
- JavaScript は使わない

# 付ける場所
- 頭文字や日付で区切った長い一覧

# 守ってほしいこと
- 見出しには背景の色を付ける（透明だと、下を流れる項目の文字と重なる）
- 見出しの高さは 48px くらいまで。高いと、読める範囲がせまくなる
- 固定のヘッダーがあるときは、top をヘッダーの高さにする（重ならないように）
- 祖先の要素に overflow: hidden を付けない（sticky が効かなくなる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スティッキー見出し」（Sticky Section Headers）と呼ばれる動きです。

# 作ってほしい動き
Sticky Section Headers（見出しが上に留まり、次の見出しに押し上げられる）。頭文字ごとに分けた一覧で、各段の見出しがその段を読んでいるあいだ画面の上（上から 0px）に留まり、次の段の見出しが来ると押し上げられて入れ替わる。

# 動き
- 一覧は頭文字ごとに section で分け、見出し（h2）を section の中の最初に置く
- 見出し：position: sticky、top: 0px。sticky は親（section）の中でしか留まらないので、段の終わりで見出しは段と一緒に上へ流れ、次の見出しと入れ替わる（押し上げる処理を JavaScript で書かない）
- JavaScript は使わない

# 付ける場所
- 頭文字や日付で区切った長い一覧（表示例：用語集。「A」に API・Alt 属性、「B」にバナー・パンくずリスト、「C」に CMS・CTA、「D」に DNS・ドメイン）

# 守ってほしいこと
- 見出しには背景の色を付ける（透明だと、下を流れる項目の文字と重なる）
- 見出しの高さは 48px くらいまで。高いと、読める範囲がせまくなる
- 固定のヘッダーがあるときは、top をヘッダーの高さにする（重ならないように）
- 祖先の要素に overflow: hidden を付けない（sticky が効かなくなる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スタッキングカード」（Stacked Scroll）と呼ばれる動きです。

# 作ってほしい動き
Stacked Scroll（カードが上に重なっていく）。カードが1枚ずつ画面の上の方で止まり、次のカードがその上に重なっていく。

# 動き
- 各カード：position: sticky、top: calc(24px + 何枚目 × 16px)
- 何枚目かは CSS 変数 --i に入れる（HTML の style 属性で 0, 1, 2…）
- JavaScript は使わない

# 付ける場所
- 3〜5枚の手順・プラン・事例のカード

# 守ってほしいこと
- カードには背景の色を付ける（透明だと、下のカードの文字が透けて重なる）
- カードの高さは画面の高さより低くする
- 重なりのずれは 8〜24px。止まったカードの見出しが少し見えるくらい

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スタッキングカード」（Stacked Scroll）と呼ばれる動きです。

# 作ってほしい動き
Stacked Scroll（カードが上に重なっていく）。カードが1枚ずつ画面の上の方で止まり、次のカードがその上に重なっていく。

# 動き
- 各カード：position: sticky、top: calc(24px + 何枚目 × 16px)
- 何枚目かは CSS 変数 --i に入れる（HTML の style 属性で 0, 1, 2…）
- JavaScript は使わない

# 付ける場所
- 3〜5枚の手順・プラン・事例のカード（表示例：「01 ご相談」から「04 お引き渡し」の4枚）

# 守ってほしいこと
- カードには背景の色を付ける（透明だと、下のカードの文字が透けて重なる）
- カードの高さは画面の高さより低くする
- 重なりのずれは 8〜24px。止まったカードの見出しが少し見えるくらい

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ピン留め」（Pin）と呼ばれる動きです。

# 作ってほしい動き
Pin（画面に留めたまま、中身が入れ替わる）。セクションが画面に留まったまま、スクロールに合わせて中の3枚の文が1枚ずつ入れ替わる。

# 動き
- 外側の箱：height: 300vh（画面 3枚分スクロールするあいだ留める）。view-timeline-name: --pn
- 内側の箱：position: sticky、top: 0、height: 100vh。3枚の文を同じ場所に重ねる（grid-area: 1 / 1）
- 3枚の文：animation-timeline: --pn。animation-range を contain 0%〜33%・33%〜66%・66%〜100% に分ける
- 1枚目は消えるだけ、3枚目は出るだけ、2枚目は出て消える（opacity と translateY 24px）。linear

# 付ける場所
- 3つの考え方・3つの手順を1つずつ見せたいセクション

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは留めずに3枚を縦に並べる
- 動きを控える設定でも、3枚を縦に並べて見せる
- 留める長さは画面3枚分くらいまで。長いと「スクロールしても進まない」と感じる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「ピン留め」（Pin）と呼ばれる動きです。

# 作ってほしい動き
Pin（画面に留めたまま、中身が入れ替わる）。セクションが画面に留まったまま、スクロールに合わせて中の3枚の文が1枚ずつ入れ替わる。

# 動き
- 外側の箱：height: 300vh（画面 3枚分スクロールするあいだ留める）。view-timeline-name: --pn
- 内側の箱：position: sticky、top: 0、height: 100vh。3枚の文を同じ場所に重ねる（grid-area: 1 / 1）
- 3枚の文：animation-timeline: --pn。animation-range を contain 0%〜33%・33%〜66%・66%〜100% に分ける
- 1枚目は消えるだけ、3枚目は出るだけ、2枚目は出て消える（opacity と translateY 24px）。linear

# 付ける場所
- 3つの考え方・3つの手順を1つずつ見せたいセクション（表示例：「1. 聞く」「2. 描く」「3. 建てる」）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザでは留めずに3枚を縦に並べる
- 動きを控える設定でも、3枚を縦に並べて見せる
- 留める長さは画面3枚分くらいまで。長いと「スクロールしても進まない」と感じる

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「横スクロール」（Horizontal Scroll）と呼ばれる動きです。

# 作ってほしい動き
Horizontal Scroll（縦のスクロールで横に進む）。セクションが画面に留まり、縦にスクロールした分だけ、カードの列が横へ流れる。

# 動き
- 外側の箱：height: 300vh。view-timeline-name: --hs
- 内側の箱：position: sticky、top: 0、height: 100vh、overflow: hidden、container-type: inline-size
- カードの列：display: flex、width: max-content。animation-timeline: --hs、animation-range: contain 0% contain 100%
- @keyframes：to は transform: translateX(calc(-100% + 100cqw))（列の右端が内側の箱の右端に来るまで。100vw にすると、箱が画面の左端から始まらないときや、スクロールバーのある画面で、最後のカードの右側が切れる）。linear

# 付ける場所
- 施工事例・作品・商品の一覧

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザではふつうの横スクロール（overflow-x: auto）にする
- 動きを控える設定でも、ふつうの横スクロールにする
- カードは5〜8枚まで。多いと、縦にいくらスクロールしても終わらない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「横スクロール」（Horizontal Scroll）と呼ばれる動きです。

# 作ってほしい動き
Horizontal Scroll（縦のスクロールで横に進む）。セクションが画面に留まり、縦にスクロールした分だけ、カードの列が横へ流れる。

# 動き
- 外側の箱：height: 300vh。view-timeline-name: --hs
- 内側の箱：position: sticky、top: 0、height: 100vh、overflow: hidden、container-type: inline-size
- カードの列：display: flex、width: max-content。animation-timeline: --hs、animation-range: contain 0% contain 100%
- @keyframes：to は transform: translateX(calc(-100% + 100cqw))（列の右端が内側の箱の右端に来るまで。100vw にすると、箱が画面の左端から始まらないときや、スクロールバーのある画面で、最後のカードの右側が切れる）。linear

# 付ける場所
- 施工事例・作品・商品の一覧（表示例：「施工事例」の見出しと5枚のカード）

# 守ってほしいこと
- @supports (animation-timeline: view()) の中に書き、使えないブラウザではふつうの横スクロール（overflow-x: auto）にする
- 動きを控える設定でも、ふつうの横スクロールにする
- カードは5〜8枚まで。多いと、縦にいくらスクロールしても終わらない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スクロールスナップ」（Scroll Snap）と呼ばれる動きです。

# 作ってほしい動き
Scroll Snap（1枚ずつぴたっと止まる）。横に並べたカードを送ると、途中で止まらず、1枚ずつ左の端にぴたっと止まる。

# 動き
- 一覧：display: flex、overflow-x: auto、scroll-snap-type: x mandatory、scroll-padding-inline: 24px
- カード：scroll-snap-align: start、幅は一覧の 80%（次のカードの端が見えるようにする）
- 止まる位置は CSS だけで決める（JavaScript で位置を計算しない）
- 一覧の下に「前へ」「次へ」のボタンを置く。押したら一覧を scrollBy({ left: ±カード1枚分の幅 }) で送るだけ（止まる位置は scroll-snap が合わせる）。端まで来たら、その向きのボタンを disabled にし、そのボタンにフォーカスがあったら反対のボタンへ移す

# 付ける場所
- SP で横にスワイプして見る、お客さまの声・商品・事例のカード

# 守ってほしいこと
- 次のカードの端を見せる（横に続きがあることがわかるように）
- PC のマウスのホイールでは横に送れないので、ボタンを必ず置く
- キーボードでも送れるようにする（一覧に tabindex="0" と aria-label を付ける）
- mandatory を縦長のページ全体に付けない（読みたい場所で止まれなくなる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スクロールスナップ」（Scroll Snap）と呼ばれる動きです。

# 作ってほしい動き
Scroll Snap（1枚ずつぴたっと止まる）。横に並べたカードを送ると、途中で止まらず、1枚ずつ左の端にぴたっと止まる。

# 動き
- 一覧：display: flex、overflow-x: auto、scroll-snap-type: x mandatory、scroll-padding-inline: 24px
- カード：scroll-snap-align: start、幅は一覧の 80%（次のカードの端が見えるようにする）
- 止まる位置は CSS だけで決める（JavaScript で位置を計算しない）
- 一覧の下に「前へ」「次へ」のボタンを置く。押したら一覧を scrollBy({ left: ±カード1枚分の幅 }) で送るだけ（止まる位置は scroll-snap が合わせる）。端まで来たら、その向きのボタンを disabled にし、そのボタンにフォーカスがあったら反対のボタンへ移す

# 付ける場所
- SP で横にスワイプして見る、お客さまの声・商品・事例のカード（表示例：5枚のお客さまの声）

# 守ってほしいこと
- 次のカードの端を見せる（横に続きがあることがわかるように）
- PC のマウスのホイールでは横に送れないので、ボタンを必ず置く
- キーボードでも送れるようにする（一覧に tabindex="0" と aria-label を付ける）
- mandatory を縦長のページ全体に付けない（読みたい場所で止まれなくなる）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「スムーススクロール」（Smooth Scroll）と呼ばれる動きです。

# 作ってほしい動き
Smooth Scroll（ページ内のリンクで、なめらかに移動する）。ページの上の固定メニューのリンクから、同じページの見出しへ、なめらかにスクロールして移動する。

# 動き
- html に scroll-behavior: smooth。ただし @media (prefers-reduced-motion: no-preference) の中だけ
- 移動先の各セクションに scroll-margin-top: 72px（固定のヘッダーの高さ＋余白。見出しがヘッダーに隠れないように）
- JavaScript は使わない

# 付ける場所
- 1枚のページに複数のセクションがあるサイト

# 守ってほしいこと
- ページ全体のスクロールを乗っ取って慣性を付けるライブラリ（いわゆるスムーススクロールのライブラリ）は使わない。ふだんのスクロールの操作感が変わり、読みにくくなる
- 動きを控える設定では、なめらかにせず、すぐに移動する

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「スムーススクロール」（Smooth Scroll）と呼ばれる動きです。

# 作ってほしい動き
Smooth Scroll（ページ内のリンクで、なめらかに移動する）。ページの上の固定メニューのリンクから、同じページの見出しへ、なめらかにスクロールして移動する。

# 動き
- html に scroll-behavior: smooth。ただし @media (prefers-reduced-motion: no-preference) の中だけ
- 移動先の各セクションに scroll-margin-top: 72px（固定のヘッダーの高さ＋余白。見出しがヘッダーに隠れないように）
- JavaScript は使わない

# 付ける場所
- 1枚のページに複数のセクションがあるサイト（表示例：上に「特長」「料金」「よくある質問」のメニュー、下にその3つのセクション）

# 守ってほしいこと
- ページ全体のスクロールを乗っ取って慣性を付けるライブラリ（いわゆるスムーススクロールのライブラリ）は使わない。ふだんのスクロールの操作感が変わり、読みにくくなる
- 動きを控える設定では、なめらかにせず、すぐに移動する

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ベロシティスキュー」（Velocity Skew）と呼ばれる動きです。

# 作ってほしい動き
Velocity Skew（速くスクロールすると傾く）。スクロールの勢いに合わせて写真の列が斜めに傾き、止まるとまっすぐに戻る。

# 動き
- JavaScript：スクロールしているあいだだけ requestAnimationFrame で回す。1コマごとの scrollY の差を「勢い」にする
- 傾き：勢い（1コマに進んだ px）× 0.06 を、-6〜6度に収めて目標の角度にする（1コマに 100px 進めば 0.06 × 100 度）。動かなかったコマでは目標を 0 にせず、0.85倍ずつ減らす（ホイールは1ノッチで一気に動くので、0 にするとならされてほとんど傾かない）
- いまの傾きから目標へ 15% ずつ近づける（なめらかに戻すため）
- 写真の列に transform: skewY(角度) を付ける。傾きがほぼ 0 になったら回すのをやめる
- will-change: transform は、回している間だけ付ける（止まったら外す）

# 付ける場所
- 作品・写真の一覧

# 守ってほしいこと
- 動きを控える設定では、何もしない（傾けない）
- いちばん傾いたときでも 6度まで。文字のある要素には付けない
- スクロールしていないときは requestAnimationFrame を止める（電池を減らさない）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「ベロシティスキュー」（Velocity Skew）と呼ばれる動きです。

# 作ってほしい動き
Velocity Skew（速くスクロールすると傾く）。スクロールの勢いに合わせて写真の列が斜めに傾き、止まるとまっすぐに戻る。

# 動き
- JavaScript：スクロールしているあいだだけ requestAnimationFrame で回す。1コマごとの scrollY の差を「勢い」にする
- 傾き：勢い（1コマに進んだ px）× 0.06 を、-6〜6度に収めて目標の角度にする（1コマに 100px 進めば 0.06 × 100 度）。動かなかったコマでは目標を 0 にせず、0.85倍ずつ減らす（ホイールは1ノッチで一気に動くので、0 にするとならされてほとんど傾かない）
- いまの傾きから目標へ 15% ずつ近づける（なめらかに戻すため）
- 写真の列に transform: skewY(角度) を付ける。傾きがほぼ 0 になったら回すのをやめる
- will-change: transform は、回している間だけ付ける（止まったら外す）

# 付ける場所
- 作品・写真の一覧（表示例：縦に並んだ6枚の写真）

# 守ってほしいこと
- 動きを控える設定では、何もしない（傾けない）
- いちばん傾いたときでも 6度まで。文字のある要素には付けない
- スクロールしていないときは requestAnimationFrame を止める（電池を減らさない）

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする

# 動かすもの（ここを書き換える）
- 動かす要素：〈例：各セクションの見出しとカード、商品の写真〉
- 今あるページ：〈今のページに付けるなら、その HTML と CSS を貼る。新しく作るなら空ける〉

# 動きの呼び名
一般に「ベロシティマーキー」（Scroll Velocity Marquee）と呼ばれる動きです。「スクロールで加速するテキストループ」とも呼ばれます。

# 作ってほしい動き
Scroll Velocity Marquee（スクロールの勢いで速くなる、流れる帯）。大きな文字の帯を秒速 50px で右から左へ流し続け、スクロールした勢いの分だけ速くする（いちばん速くて 5倍）。スクロールを止めると、なめらかに元の速さへ戻る。

# 動き
- 帯：文の1組（ul）を、帯の幅を埋めて1組ぶん余る数だけ複製して横に並べる。並べた全体を transform: translate3d(x, 0, 0) で動かし、x が1組の幅を超えて進んだら1組の幅だけ戻す（継ぎ目なく続く）
- 進め方：requestAnimationFrame で、1コマごとに x を「秒速 × 倍率 × 経過秒」だけ進める（経過秒を掛けるので、画面の書き換えの回数が違っても速さは同じ）
- 倍率：1コマごとの scrollY の差を経過秒で割った「スクロールの速さ（px/秒）」から、目標の倍率 = 1 + スクロールの速さ × 0.003 を決め、5倍で頭打ちにする。動かなかったコマでは、目標を 1 へ向けて 0.9倍ずつ近づける（ホイールは1ノッチで一気に動き、間のコマは止まっているため）
- いまの倍率から目標の倍率へ、1コマごとに 10% ずつ近づける（なめらかに速くなり、なめらかに戻る）
- scroll イベントでは位置を測らない。scrollY は requestAnimationFrame の中で読む

# 付ける場所
- ページの区切りに置く、大きな文字の帯

# 守ってほしいこと
- 帯の上に「止める」ボタン（button）を置く。押すと止まり、文字と aria-label を「再開する」に替える（5秒を超えて動き続けるため）
- 帯にマウスを重ねている間は止める
- 帯が画面の外にある間は requestAnimationFrame を止める（IntersectionObserver。root: document を付ける）。will-change は流している間だけ付ける
- 複製した組は aria-hidden="true" にし、読み上げで同じ文を2回たどらせない
- 動きを控える設定では流さず、複製を外して文を折り返して並べる。止めるボタンも出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- 足す CSS と JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする
- 今あるページを渡したときは、HTML に足す class や属性だけを書き、ほかの見た目は変えない

# 動きの呼び名
一般に「ベロシティマーキー」（Scroll Velocity Marquee）と呼ばれる動きです。「スクロールで加速するテキストループ」とも呼ばれます。

# 作ってほしい動き
Scroll Velocity Marquee（スクロールの勢いで速くなる、流れる帯）。大きな文字の帯を秒速 50px で右から左へ流し続け、スクロールした勢いの分だけ速くする（いちばん速くて 5倍）。スクロールを止めると、なめらかに元の速さへ戻る。

# 動き
- 帯：文の1組（ul）を、帯の幅を埋めて1組ぶん余る数だけ複製して横に並べる。並べた全体を transform: translate3d(x, 0, 0) で動かし、x が1組の幅を超えて進んだら1組の幅だけ戻す（継ぎ目なく続く）
- 進め方：requestAnimationFrame で、1コマごとに x を「秒速 × 倍率 × 経過秒」だけ進める（経過秒を掛けるので、画面の書き換えの回数が違っても速さは同じ）
- 倍率：1コマごとの scrollY の差を経過秒で割った「スクロールの速さ（px/秒）」から、目標の倍率 = 1 + スクロールの速さ × 0.003 を決め、5倍で頭打ちにする。動かなかったコマでは、目標を 1 へ向けて 0.9倍ずつ近づける（ホイールは1ノッチで一気に動き、間のコマは止まっているため）
- いまの倍率から目標の倍率へ、1コマごとに 10% ずつ近づける（なめらかに速くなり、なめらかに戻る）
- scroll イベントでは位置を測らない。scrollY は requestAnimationFrame の中で読む

# 付ける場所
- ページの区切りに置く、大きな文字の帯（表示例：「暮らしに、ちょうどいい家を。」「見学会 毎週土曜」をくり返す帯）

# 守ってほしいこと
- 帯の上に「止める」ボタン（button）を置く。押すと止まり、文字と aria-label を「再開する」に替える（5秒を超えて動き続けるため）
- 帯にマウスを重ねている間は止める
- 帯が画面の外にある間は requestAnimationFrame を止める（IntersectionObserver。root: document を付ける）。will-change は流している間だけ付ける
- 複製した組は aria-hidden="true" にし、読み上げで同じ文を2回たどらせない
- 動きを控える設定では流さず、複製を外して文を折り返して並べる。止めるボタンも出さない

# 軽さと配慮（どの動きでも守る）
- 動かすのは transform と opacity だけにする（top・left・width・height・margin は動かさない）
- 動きを控える設定（prefers-reduced-motion: reduce）のときは動かさず、最後の状態で表示する
- 画面に入ったかは IntersectionObserver で見る。scroll イベントで毎回位置を測らない
- JavaScript が動かない環境でも中身が見えるようにする（最初に隠す指定は、JavaScript が付ける class の下に書く）
- will-change を付けるなら動いている間だけにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 時間・距離・速さの変わり方は CSS 変数にまとめ、あとから変えやすくする