# よくある質問 — Style Reference
> 紺の帯と生成りの地。質問が高さを測らずになめらかに開き、開いた質問に黄色のマーカーが引かれる。

**Theme:** light  **Series:** PARTS 089  **World:** 小さな町の図書館の利用案内。

## Concept
一覧の質問は罫線で区切るだけ。押すと答えが開き、質問の文字に黄色のマーカーが左から走り、丸いボタンの「+」が紫の「−」に回る。答えは紫の細い左罫を持つ。
主役は開く動き。JS で高さを測らず、CSS の `grid-template-rows` を `0fr → 1fr` に遷移させる。

## Signature Technique
- 開閉: `.a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.7,.2,1)}`、`.open .a{grid-template-rows:1fr}`。中身は `overflow:hidden;min-height:0` の `div` 1 つ。高さの計測もインライン style も不要で、内容量が変わっても追従する。
- 答えの文字は透明度 0 / −6px から、開くときだけ .15 秒遅れて現れる(閉じるときは即座に消える)。
- マーカー: 質問の `span` に `linear-gradient(104deg, transparent 2%, 黄 2% 98%, transparent)` を `background-size: 0% 46%` で敷き、`.open` で `100% 46%`。`box-decoration-break:clone` で折り返しても各行に引かれる。`justify-self:start` で文字幅に収める。
- アイコン: 28px の円に 1.5px の線を 2 本(`::before` / `::after`)。開くと両方 180° 回り、縦線が横線に重なって「−」になる。円は紫で塗る。
- a11y: `<h2><button aria-expanded aria-controls>`、答えは `role="region" aria-labelledby`。上下矢印で質問間を移動。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --cream | #F6F3E8 | 地 |
| --navy | #10284B | 帯の見出し地 |
| --ink | #0E1620 | 質問、アイコンの線 |
| --steel | #5A6472 | 答え、表記 |
| --hair | #DDD9CC | 罫線、アイコンの縁 |
| --violet | #381FD1 | 開いたアイコン、答えの左罫、focus、パーツ表記 |
| --yellow | #FEDB63 | 開いた質問のマーカー |
| --lilac | #E5E0FF | 予備(薄い紫の面) |

## Typography
- Noto Sans JP のみ。帯の見出し 900、`clamp(44px,8vw,112px)`、字間 −.03em、行間 1。
- 質問 500、`clamp(17px,1.6vw,22px)`、行間 1.45。
- 答え 400、`clamp(14px,1.1vw,16px)`、行間 1.75、最大 36 字。
- 表記 11px、字間 .06em。

## Spacing & Layout
- 一覧の最大幅 880px、横余白 `clamp(20px,6vw,88px)`。
- 質問の上下余白 `clamp(18px,2.4vw,26px)`。答えの下余白 `clamp(20px,2.6vw,30px)`、左罫 2px + 内側 18px。
- 帯は `clamp(40px,7vw,96px)` の上余白。見出しから説明文まで `clamp(18px,2.2vw,32px)`(見出しの行間が 1 なので、大きいほど間を空ける)。説明文と答えは `word-break: auto-phrase` で文節ごとに折り返す。
- 質問は `grid-template-columns: 1fr 28px`、間隔 20px(スマホ 12px)。

## Motion
- 開閉 .55s、マーカー .5s(.08s 遅れ)、アイコン回転 .55s、答えの文字 .35〜.45s。
- `prefers-reduced-motion`: すべて切る。

## Components
- 帯: 見出し + 一文。
- 質問: ボタン(文字 + 丸アイコン)。hover で円の縁が紫。focus-visible は紫 2px の outline。
- 答え: 左罫付きの一段落。
- 表記: 下部に `VALE / PARTS 089 / よくある質問` と操作説明 1 行。

## Do / Don't
Do
- 答えは一段落。長くなるなら質問を分ける。
- 黄色は開いた質問にだけ。見出しには使わない。
- 最初の 1 問は開いた状態で置き、動きが分かるようにする。
Don't
- 高さを JS で測って `max-height` を当てない。grid の遷移で足りる。
- 影や塗りのカードにしない。罫線だけ。
- アイコンに矢印画像を使わない。線 2 本で作る。

## Usage
1. `.faq` セクションと `<script>`、`:root` のトークンを切り出す。
2. 1 問は `.item > h2 > button.q` と `.a > div > p` の組。`id` と `aria-controls` / `aria-labelledby` を対応させる。
3. パラメータは `P`:

| パラメータ | 既定 | 意味 |
|---|---|---|
| single | false | true で一度に 1 問だけ開く |

4. 速さは `--dur`、緩急は `--ease`。マーカーの色は `--yellow`、太さは `background-size` の `46%`。
5. 答えに複数段落を入れるときは `.a > div` の中に並べ、`.a p` の下余白を最後の段落にだけ残す。

## References
- Stark: 紺の帯から生成りの面へ落ちる二面構成、900 の壁のような見出し、黄色のマーカーで文中を強調し紫を唯一の操作色にする、という役割分担を抽象化した。対角のグラデーションは水平のマーカーに単純化した。
- Joby Aviation: 生成りの地に近黒の文字、箱で囲まずに細い左罫だけで区切る、角は丸く、という軽さを借りた。写真は使わず、罫線と余白だけで構成した。