` の 14px 等）が消え、行間が詰まる／空く
- `p, h1, …, li, a, span { font-size: .8rem; line-height: 1.8; color: #000 }`
→ 採寸トークン `--color-text: #404040`・`line-height: 1.6`
（`docs/design-teardown.md` §1）が素タグ経由で #000 / 1.8 に置き換わる
- `.ex_listContainer { margin: 32px 0 }` / `.ex_listCol { margin: 0 0 20px }` /
`.ex_listCategory { display: inline-block; background: #fff; padding: 2px 5px }` …
→ **本家も Form_v2 と同じクラス名を使っている**（Form_v2 の採寸元が本家なので当然）。
`experience.css` が宣言していないプロパティは素通しで漏れる。実測では
カードの行間隔が gap 20px ＋ margin 20px の **二重で40px**になり、カテゴリ表示が
白背景のピル型に変わっていた
- とくに `.ex_listCol` 周りは `experience.css` に
「320×3 + gap20×2 = ちょうど1000px で**余白は1pxも無い**。margin/border/padding が
1pxでも増えると即座に2カラムへ落ちる」という警告が書かれている箇所で、
本家CSSの margin がここへ無審査で入る状態は事故待ちだった
読み込み順（後勝ち）だけでは、**片方しか宣言していないプロパティ**を止められない。
詳細度を上げる方法も使えない（`main.site-main p` は `.ex_hero__desc` より強くなってしまい、
今度は Form_v2 自身のクラス指定を潰す）。カスケードレイヤーは
「サードパーティCSSを自分のコンポーネントへ漏らさない」ために用意された標準機能で、
**詳細度に関係なくレイヤー間の優先順位が決まる**ため、この用途にちょうど合う。
---- 効き方 ----
優先順位は vendor < neutralize < レイヤー無し（＝`experience.css`・`booking.css`）。
「レイヤーに属さないスタイルは、どのレイヤーよりも強い」のがCSSの規定。
- ヘッダー(.header)/フッター(.footer): `neutralize` の対象外なので `vendor` がそのまま効く
＝**本家とまったく同じ見た目**になる
- 本文領域: `all: revert` が `vendor` を打ち消してブラウザ既定へ戻し、その上に
`experience.css`（レイヤー無し）が乗る ＝ **本PR以前とまったく同じ**描画になる
（実測: 上記125か所の差分が0件になることを確認）
`all` は**カスタムプロパティ（`--color-text` 等）を含まない**ので、`:root` のトークンは
そのまま継承される。
---- ★`!important` はこの隔離を破る（PR#114レビュー N-2）----
`!important` 宣言では**レイヤーの優先順位が反転する**（CSS Cascade 5 の規定）。つまり
`vendor` レイヤーの `!important` は、上位の `neutralize` の `all: revert`（非important）も、
レイヤー無しの `experience.css` も**両方とも破る**。`all: revert` で止められるのは
非important宣言だけで、ここだけは隔離が効かない。
`original_style.css` の `!important` は 180ルール・119クラスある。うち **Form_v2 の本文領域で
使ってはいけないクラス名**（そのクラス名を本文に付けた瞬間に隔離が破れるもの）の代表:
.ex_listTitle → font-family: YuMincho … !important（`original_style.css` L1922 と L7186 の2か所）
.ex_infoList li → list-style-type: disc !important（同 L2046 と L7283）
`ex_` 接頭辞は Form_v2 の採寸元が本家なので**衝突しやすい**。本文のマークアップへ新しい
`ex_` クラスを足すときは、必ず `original_style.css` に同名の `!important` ルールが無いか見ること。
すでに本文が使っているが**祖先クラスの条件で救われている**ものもある（＝油断できない例）:
.bl_col … 危険なのは `.sc_listCol > .bl_container .bl_col`（width:48% !important）等で、
祖先 `.sc_listCol` / `.feature_summer_page` / `.event_gc` が要る。本文には無い
.bl_container… 上と同じ理由で現状セーフ
.wp-pagenavi … 危険なのは `.page_nav .wp-pagenavi span/a`（padding !important）で、
祖先 `.page_nav` が要る。**本文に `page_nav` クラスを足したら即座に効いてしまう**
これは目視で守るものではないので `tests/php/VendorCssSnapshotTest.php` の **F節**が機械的に固定
している（vendor の `!important` ルールを全走査し、そのセレクタが要求するクラス／IDが本文領域の
ソースにすべて揃ったら失敗する）。落ちたらクラス名を変えるか、`neutralize` に
`!important` 付きの打ち消しを足すこと。
---- ★取り込み時に削除した行（本家との差分）----
本家CSSは「取得したバイト列そのまま」を原則とするが、**外部ホストへの実行時参照だけは
例外として削る**（ADR-023 決定7）。本家のサーバー障害・DNS障害が Form_v2 の障害になるのを
避けるためで、決定6「外部ホストへのブロッキングな依存を作らない」の延長。
取り込み直すときは、次の6行を**再び削ること**:
1) `original_style.css` 冒頭2行（Google Fonts。**レンダリングブロッキング**）
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");
CSSの `@import` はCSSOM構築を止めるため、fonts.googleapis.com が遅い/落ちると
予約フォームの描画も止まる。訪問者IPがGoogleへ渡る点も予約フォームでは論点になる。
**どちらのフォントも Form_v2 では使われていない**: Kosugi Maru は CSS 内に参照ゼロ、
Shippori Mincho は `.mina_concept p`（同 L4818）だけ＝Form_v2 に存在しないセレクタ。
2) `.store_list_categories ul li:nth-of-type(1)〜(4)` の背景画像4行
background: url(https://takumishuku.jp/images/store/img_{tableware,livingware,interior,fashion}.jpg) …
本家ストアページ専用で Form_v2 のDOMには一致しない（＝実リクエストは飛ばない）が、
仮環境（takumishuku.xsrv.jp）には `/images/` が無く、ADR-020 の「設置場所を選ばない」にも反する。
削除跡はCSSコメントで残してある。
同梱CSS内に外部ホストの `@import` / `url()` が**1件も無い**ことは
`tests/php/AssetPathTest.php` の **H節**が固定している（取り込み直しで復活したら落ちる）。
---- 変更するとき ----
本家CSSを取り込み直したら、`?v=` のトークン（各ファイル内容のsha256先頭8桁）も更新すること。
`tests/php/VendorCssSnapshotTest.php` が一致を検証しており、更新し忘れると失敗する
（`@import` のURLは `asset()` を通らないので、ここを変えないとブラウザが古いCSSを使い続ける）。 */
@layer sitebase, vendor, neutralize;
@import url("vendor/destyle.css?v=666b5ea2") layer(vendor);
@import url("vendor/original_style.css?v=7d759715") layer(vendor);
@layer sitebase {
/* ★本家 `/experience/` の見た目は、`destyle.css` ＋ `original_style.css` だけでは再現しない。
本家はWordPressで動いており、テーマの
`web/wp-content/themes/takumishuku/style.css:519` にある
img { height: auto; max-width: 100%; }
が**ヘッダー/フッターのSNSアイコンの高さを決めている**。
実測（本家 `/experience/` と本実装を同一オリジンの iframe に並べて計算値を突き合わせ）:
SNSアイコンは `original_style.css` の `.navSns li a img { width: 20px }` で幅だけが決まり、
高さは HTML の `height="30"` 属性ではなくこの `height: auto`（→ 20px）になる。
この1行が無いと 20x30 に伸び、本家（20x20）とずれる。
一方でロゴは `.headerLogo img { height: 30px }`（詳細度 0,1,1）が勝つので 86x30 のまま。
＝**`vendor` より下のレイヤー**に置くのが正しい。上のレイヤーやレイヤー無しに置くと
レイヤー優先度が詳細度を上書きしてロゴまで `height:auto` になり、96x33 に崩れる（実測）。
テーマCSS全体（16KB）は本家の記事本文向けルールを多く含み、持ち込むとまた別の漏れを生むため、
ヘッダー/フッターの描画に実際に効いているこの1ルールだけを再現する。 */
img {
height: auto;
max-width: 100%;
}
}
@layer neutralize {
/* Form_v2 が自分で組み立てた領域。ここでは本家CSSを一切効かせない。
`#cart-widget` は `