/* =========================================================================
   client-tweaks.css — 打ち合わせで決まった意匠の変更（2026-08-19 レビューMTG）

   置き場所の約束（CLAUDE.md）:
     original-fixes.css … 原本CSSの「不具合」の打ち消し専用
     dark-theme.css     … 黒地・白文字の「配色」専用
     client-tweaks.css  … クライアント指示による「意匠の変更」← このファイル

   読み込みは全シートの最後（inc/assets.php 優先度100）。
   1件ごとに [番号] と docs/11 の項目IDを書く。理由の無い指定は置かない。
   ========================================================================= */


/* -------------------------------------------------------------------------
   [1] FONT-1 … サイト全体を「英字 = Cormorant / 日本語 = 游明朝」に統一

   font-family は1文字ずつ先頭から探すので、英字用の書体を先に置けば
   ラテン文字と数字はそこから、日本語はその後ろの和文書体から取られる。
   実際の値は inc/fonts.php が `--tz-font-canon` として <head> に書き出す
   （サイト設定→フォントで差し替え可能。既定は Cormorant + 游明朝）。

   既存のフォント変数はすべてここで1本に寄せる。各パーツのCSSは
   これらの変数を参照しているので、指定を1つずつ書き換える必要はない。

   ■ 2026-08-19 やり直し（実測で「効いていない」と分かったため）
   変数を `:root` にだけ書いても届かない箇所が大量に残っていた。実WordPress
   （localhost:8931）で全ページの computed font-family を数えたところ、
   canon 以外が **7種類** 走っていた:
     "Abhaya Libre", 游明朝 …… OUR MISSION の見出し / 下層ページのヒーロー見出し
     "Cormorant", sans-serif … OUR MISSION の英字・BONSAI ARTIST・肩書き（← ART-3）
     "Times New Roman", … …… 再生プロセスの見出し・実績リストの見出し・パンくず
     Arial, 游明朝 …………… ボタン・作品カードの見出し・経歴本文のインライン指定
     "Zen Old Mincho" / "Hina Mincho" / "Shippori Mincho B1" / kepler-std
                     …………… 共通CTA・フッター（taizan-tokyo 由来の chrome）
   原因は3つ。
     ① patterns.css は変数を **`.tz-p` 自身**に定義している。カスタムプロパティは
        「より近い要素の定義」が勝つので、`:root` の上書きは `.tz-p` の中まで届かない
     ② sections/mission.css・common-cta-footer.css・original-fixes.css は
        変数を使わず実体を直書きしている（しかも一部は `!important` 付き）
     ③ 原本ヘッダーの `<style id="wp-custom-css">` に旧サイトの
        `*{font-family:"Abhaya Libre",…!important}` が生きていて、
        ここで書いた指定を上から潰していた。`*` は詳細度ゼロなので、
        **こちらも `!important` を付ければ**どんなセレクタでも勝てる（[1-B]）。
        ただし勝てるのは「名指しした要素」だけ。名指ししていない要素は
        `*` の指定が直接当たってしまうので、BudouX が挿入する `<budoux-ja>` の
        ようなカスタム要素も [1-B] の一覧に必ず入れておくこと
        （これを落とすと見出しだけ書体が変わる。実測で踏んだ）

   なお ART-3「肩書きと BONSAI ARTIST でフォントが違う」の正体は ② の
   `Cormorant, sans-serif`。ラテン文字は Cormorant、**和文だけ sans-serif＝ゴシック**へ
   落ちるので、英字の見出しと日本語の肩書きが並ぶと書体が食い違って見える。
   ---------------------------------------------------------------------- */

/* [1-A] 変数の定義元と同じセレクタで上書きする。
   `:root` だけでは patterns.css の `.tz-p` に負けるので、定義元を1つずつ並べる。
   （このシートは最後に読まれるので、同じ詳細度ならこちらが勝つ） */
:root,
.tz-p,
.tz-mission,
.tz-cf {
	/* `--tz-font-canon` は inc/fonts.php が <head> に書き出す（選択中の書体）。
	   このシートは最後に読まれるので、ここで --tz-font-canon 自体を定義すると
	   サイト設定の値を打ち消してしまう。**定義せず**、参照側にだけ保険の既定を置く。 */
	--tz-font-canon-fallback:
		"Cormorant", serif,
		"Yu Mincho", "游明朝", YuMincho, "游明朝体",
		"Hiragino Mincho ProN", "ヒラギノ明朝 ProN", "MS PMincho", "ＭＳ Ｐ明朝", serif;

	/* base.css の3変数 */
	--tz-font-body: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-font-en-display: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-font-en: var(--tz-font-canon, var(--tz-font-canon-fallback));

	/* patterns.css の5変数 */
	--tz-p-font-body: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-p-font-en: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-p-font-display: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-p-font-jp-serif: var(--tz-font-canon, var(--tz-font-canon-fallback));
	--tz-p-font-mincho: var(--tz-font-canon, var(--tz-font-canon-fallback));
}

/* [1-B] 取りこぼしを作らない網。
   原本（Elementor / TCD rikyu）と共通chromeは変数を使っていないので、
   **文字を持ちうる素の要素をまとめて** canon に寄せる。
   `body :is(…)` の詳細度は要素セレクタぶんの (0,0,2) しかないので、
   下の [1-C] のアイコン例外（クラスセレクタ＝(0,1,0)）が確実に勝つ。 */
body,
body :is(
	h1, h2, h3, h4, h5, h6,
	p, span, div, a, li, dt, dd, td, th, caption,
	ul, ol, dl, table, thead, tbody, tfoot, tr,
	section, article, header, footer, nav, aside, main, figure, figcaption,
	label, button, input, select, textarea, option, optgroup, legend, fieldset,
	small, strong, b, em, i, cite, time, address, blockquote, q,
	details, summary, dialog, output, mark,
	/* BudouX が本文を包むカスタム要素。素の要素名の一覧に入れておかないと
	   原本の `*{…!important}` に直接持っていかれる（見出しだけ書体が変わる） */
	budoux-ja
) {
	font-family: var(--tz-font-canon, var(--tz-font-canon-fallback)) !important;
}

/* [1-C] 例外: 字形そのものが意味を持つアイコンフォント。
   実測（preview/_tz-probe3 相当）では現状のアイコンは全部 `::before` に載っていて
   [1-B] は当たらないが、検索ボタン・カート等を後から出したときのために、
   要素へ直接載る流儀のものだけ実体を書き戻しておく。

   2026-08-21 修正（COM-7 の作業中に発見）: **アイコンフォントの割り当てが原本と違っていた。**
   原本は `.c-icon` = 'Material Symbols Rounded' / `.c-icon--dp` = 'design_plus' の2本立て
   （company/4hjrs(2).css）。ここで `.c-icon` まで design_plus にしていたため、
   Material の字番号（U+E5CC ＝ パンくずの「＞」、U+E5CE ＝ ページ上部へ戻るボタン）が
   **design_plus に無く、字が出ないまま**だった。実測で出ていた3つのうち2つが空。
     22x22 U+E88A 家     … design_plus にも家があったので偶然出ていた
     24x24 U+E5CC ＞     … 空（パンくずの区切りが見えない）
       0x0 U+E5CE 上矢印 … 空（ページ上部へ戻るボタン）
   Material Symbols Rounded の @font-face は原本の Google Fonts CSS（assets/original/top/css2）に
   あり、当てるだけで出る。 */
.c-icon {
	font-family: "Material Symbols Rounded" !important;
}

[class*="c-icon--"],
.l-header__search-button label,
.l-header__search-button button {
	font-family: "design_plus" !important;
}

.dashicons,
.dashicons-before {
	font-family: dashicons !important;
}

[class^="fa-"],
[class*=" fa-"] {
	font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome !important;
}

.material-icons {
	font-family: "Material Icons" !important;
}

/* [1-C'] 例外その2: 原本の書体をそのまま出すパーツ。ここには書かない（値は1か所に持つ）。
   現在は「流れるテキスト」の `.tz-p-flowtext .tz-p-flowtext__text` = "Anton", sans-serif
   （2026-08-22 クライアント指示）。実体は assets/css/patterns.css 側に `!important` 付きで
   あり、クラス2つ (0,2,0) なので [1-B] の (0,0,2) に勝つ。canon が当たらない箇所を
   探すときの手がかりとして名前だけ残す */

/* [1-D] `!important` 付きで直書きされている指定を打ち消す。
   [1-B] は `!important` なので、`!important` を持たない相手（common-cta-footer.css の
   `-w-font_*`・original-fixes.css の見出し・Elementor の書き出し・
   経歴本文のインライン style）は詳細度に関係なく全部そちらが負ける。
   ここに書くのは **相手も `!important` を持っている** ものだけ＝
   sections/mission.css（全宣言が `!important`）。同じ詳細度で後から書いて勝たせる。 */
.tz-mission.tz-mission,
.tz-mission.tz-mission :where(h1, h2, h3, h4, h5, h6, p, span, div, a, li),
.tz-mission .tz-mission__en,
.tz-mission .tz-mission__title,
.tz-mission .tz-mission__text {
	font-family: var(--tz-font-canon, var(--tz-font-canon-fallback)) !important;
}


/* -------------------------------------------------------------------------
   [2] ART-1 / ART-2 / ART-4 … BONSAI ARTIST（原本 top / band-14・band-15）

   ■ どちらの帯がPCなのか（2026-08-19 実測で修正）
   原本は同じ内容を2つの帯で持ち、Elementor の表示切替クラスで出し分けている。
   実測（localhost:8931）:
     band-14（見出し 536c8f8 / 写真 6cf1918 / 本文 1a95da4）… **1280pxで表示**
     band-15（見出し 4512a17 / 写真 d03bee3 / 本文 78e056a）… 375px・768pxで表示
                                                   （外枠 a906432 が elementor-hidden-desktop）
   これまでこの2つを取り違えていて、ART-2 の 600px は**一度も効いていなかった**
   （PC幅では d03bee3 の帯自体が非表示）。

   ■ 詳細度も足りていなかった
   抽出CSS（original-sections/designer.css）は
     .elementor-tzorig .elementor-element.elementor-element-6cf1918 img { height:500px }
   と **同じ要素に2つのクラス**を並べて書くので (0,3,1)。
   こちらは (0,2,1) しかなく、`!important` も無かったので負けていた。同じ書き方に揃える。

   ART-1「line-height: 1.6」… プロフィール本文の行送り（両方の帯に当てる）
   ART-2「画像の高さを600pxに」… PCで見えている band-14 の写真
   ART-4「経歴テキストの文字量が多い。16px → 14px前後」…
     文字サイズだけ先に14pxへ。**原稿の短縮はクライアント判断**（docs/11 要確認3）なので
     こちらでは文章を削らない。本文中の <span style="font-size:16px"> が効いているので
     `!important` で揃える（インラインstyleに勝たせるため）
   ---------------------------------------------------------------------- */
.elementor-tzorig .elementor-element-1a95da4 .p-body,
.elementor-tzorig .elementor-element-78e056a .p-body,
.elementor-tzorig .elementor-element-1a95da4 .p-body p,
.elementor-tzorig .elementor-element-78e056a .p-body p {
	line-height: 1.6;
}

/* PC（band-14 が見えている幅）だけ 600px。
   タブレット・SPは原本のまま（240px / 382px / 500px）にしておく */
@media (min-width: 1025px) {
	.elementor-tzorig .elementor-element.elementor-element-6cf1918 img {
		height: 600px;
		object-fit: cover;
	}
}

/* ART-4: 経歴本文を 14px に。インラインの font-size 指定にも勝たせる */
@media (min-width: 768px) {
	.elementor-tzorig .elementor-element-1a95da4 .p-body,
	.elementor-tzorig .elementor-element-78e056a .p-body,
	.elementor-tzorig .elementor-element-1a95da4 .p-body :is(p, span),
	.elementor-tzorig .elementor-element-78e056a .p-body :is(p, span) {
		font-size: 14px !important;
	}
}


/* -------------------------------------------------------------------------
   [3] COM-6 … プロダクト同士のあいだに余白を入れる
   「プロダクトとプロダクトの間はちょっと空白欲しい」（若干だけ広げる指示）
   ---------------------------------------------------------------------- */
.tz-grid--products {
	gap: 2.5rem 1.75rem;
}

@media (min-width: 1024px) {
	.tz-grid--products {
		gap: 3rem 2rem;
	}
}


/* -------------------------------------------------------------------------
   [5] FV-1 … FVがヘッダーに被っているのを直す
       「ヘッダーの下に収まり、かつ画像全体が映るように調整する」

   ■ 何が起きていたか（実WordPress・localhost:8931 実測）
   原本は body に `is-header-transparency` が付き、768px以上でヘッダーを
   `position: absolute` にして FV の上へ重ねる作りだった。実測すると
     375px … ヘッダー sticky・FVは60pxから  → 被っていない
     768px … ヘッダー absolute(0〜70px)・FVは0から   → 上70pxが隠れる
     1280px… ヘッダー absolute(0〜131px)・FVは0から  → 上131pxが隠れる
   写真の上端がヘッダーの下に潜っていた。

   ■ 直し方
   ① ヘッダーを流し込みに戻す（`position: relative`）。重ならなくなるかわりに
      透過の地色が無くなるので、サイトの地色（黒）を敷く
   ② FVの高さを「画面の高さ − ヘッダーの高さ」にする。こうすると
      **ヘッダーの下に収まり、かつ帯の全体が最初の画面に入る**
      ヘッダー高は幅とナビの折り返しで変わるので定数で引かず、
      assets/js/header-offset.js が実測して `--tz-header-h` に入れる
      （JSが動かないときは var() の既定 70px に落ちる）

   375px以下は元から被っていないので触らない（原本の `calc(100vh - 60px)` のまま）。
   ---------------------------------------------------------------------- */
@media (min-width: 768px) {
	/* (0,3,1) — 原本の `body.is-header-transparency .l-header`(0,2,1) に勝つ。
	   `position` は下の [9]（ヘッダー追従）で sticky にする。
	   sticky は **流し込みの場所を占めたまま**貼り付くので、
	   「FVがヘッダーの下から始まる」という FV-1 の直しはそのまま生きる。 */
	body.front-page.is-header-transparency .l-header {
		background: #000;
	}

	/* (0,4,2) — 原本の `body.is-header-transparency .l-header--type2+div .p-fp-slider`(0,3,2) に勝つ */
	body.front-page.is-header-transparency .l-header--type2 + div .p-fp-slider,
	body.front-page.is-header-transparency .p-fp-slider {
		height: calc(100vh - var(--tz-header-h, 70px));
		height: calc(100svh - var(--tz-header-h, 70px));
	}
}


/* -------------------------------------------------------------------------
   [5-B] FV-1（追随・2026-08-24 クライアント指摘）
         … 写真の上が切れて「ヘッダーに潜っている」ように見えるのを直す

   ■ 何が起きていたか（ライブ実測 https://taizan-bonsai.y-nishi.com/）
   帯とヘッダーの**重なりは [5] で解消済み**（1280 / 768 / 375px × 窓の高さ
   900〜400px の12通りすべてで FV上端 == ヘッダー下端、隙間 0px）。
   残っていたのは重なりではなく**写真の切れ**だった。

   スライドの背景は原本DOMのインライン style（`background-size:cover`）で、
   帯の形（幅 × `100svh − ヘッダー高`）と写真の形（1600×1067 = 3:2 が2枚 /
   1450×820 = 1.77:1 が1枚）の差を切り落とす。
   **窓が低いほど帯は横長になり、切り落とすのは上下**なので、
   1280×400px の窓では 1280×853px に伸びた写真から**上下 291px ずつ**が消える。
   被写体の頭が欠けるため「FVがヘッダーの下に潜っている」ように見えていた。

   ■ 直し方 … `auto 100%`（＝「縦は必ず全部入れる／横だけ切る」）
   `background-size` の2値は「横 縦」。縦に `100%` を置くと写真の高さは
   必ず帯にぴったり収まり、**上下は1pxも切られない**。横は `auto` なので
   比率のぶんだけはみ出す（＝切れる）か、余る。
     窓が低い（帯が横長）  … 写真は帯より細くなる → 左右に黒地が出る（`contain` と同じ結果）
     縦長の画面（SP・タブレット縦）… 写真は帯より広くなる → 左右が切れる（`cover` と同じ結果）

   ■ なぜ `contain` そのものにしなかったか（2026-08-24 実測）
   `contain` は縦長の帯でも「まるごと」入れようとするため、
   **375×812px で写真が 375×250px に縮み、上下 251px ずつが黒地**になる
   （768×1024px でも上下 221px ずつ）。FVがほぼ空の黒帯になり、
   固定見出しの文字だけが浮く。今回の指摘は「窓を低くすると上が切れる」なので、
   切らせたくないのは**上下だけ**。`auto 100%` はそこだけを直し、
   縦長の画面はいままで（`cover`）と同じ見え方のまま変えない。
   → 縦長の画面でも余白を出して1枚まるごと見せたいなら `contain` に変えるだけ。

   帯の余りは dark-theme.css [2] の `.p-fp-slider__item { background:#000 }`
   ＝サイトの地色が出るので継ぎ目は見えない。
   相手がインライン style なので `!important` が要る（詳細度では勝てない）。

   帯の高さは [5] のまま（`100svh − ヘッダー高`）＝ページ全高は1pxも動かない。
   ---------------------------------------------------------------------- */
.p-fp-slider__images-item__bg {
	background-size: auto 100% !important;
}


/* -------------------------------------------------------------------------
   [5-C] FV-3（2026-08-26 クライアント指摘 / docs/11 §46）
         … スマホで2枚目・3枚目の盆栽が画面に収まらないのを直す

   ■ 何が起きていたか（375×667px で実測）
   スマホの帯は 375×607px の**縦長**（= 100vh − ヘッダー60px）なのに、
   写真は3枚とも 1450×820px の**横長**。[5-B] の `auto 100%`
   （＝縦を全部入れて横を切る）だと写真は 1073×607px に拡大され、
   **375px の窓に映るのは横方向の中央35%だけ**（左右それぞれ349pxが画面外）。
     1枚目 … 盆栽が写真のほぼ中央にあるので中央35%にちょうど収まる（問題なし）
     2枚目 … 幹が写真の左から31%。窓に入るのは鉢の右端と枝だけ
     3枚目 … 被写体が左から5〜48%。窓はほぼ壁しか映らない

   ■ 直し方 … スライドごとに「引き」と「左右位置」を持たせる
   写真のどこに何が写っているかは1枚ずつ違うので、CSSに数値を焼かず
   **投稿画面の入力欄**（スライドの「スマホでの拡大」「スマホでの左右位置」）から受け取る。
   値は `parts/sections-original/section-hero.php` が CSS変数として
   背景のインライン style に置く（`tz_hero_sp_view_style()`）。ここはそれを差し込むだけ。

     --tz-hero-sp-size … 未設定なら [5-B] と同じ `auto 100%`（＝いまのまま）
     --tz-hero-sp-pos  … 未設定なら原本と同じ `center`

   初期値は inc/section-content/hero.php（2枚目 256%/22% ・ 3枚目 250%/8%）。
   写真の横幅を画面幅の256%まで引くと 960×543px になり、盆栽がまるごと入って
   上下に32pxずつ地色が出る（サイトが黒地なので継ぎ目は見えない）。

   ■ 効かせる範囲は768px以下だけ
   769px以上は帯が横長になり [5-B] の `auto 100%` で過不足なく収まっているので触らない。
   768px（タブレット縦）は帯が 768×954px でスマホと同じ問題が起きるため含める
   （同じ値で黒地が出ず、上下がわずかに切れるだけになる。2026-08-26 実測）。
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.p-fp-slider__images-item__bg {
		background-size: var(--tz-hero-sp-size, auto 100%) !important;
		background-position: var(--tz-hero-sp-pos, center) !important;
	}
}


/* -------------------------------------------------------------------------
   [6] COM-2 … ページ上部の白い線を無くす

   実測で見つかった「上部の明るい横線」は3本。いずれも原本テーマ（TCD rikyu）が
   白地サイト前提で引いている 1px の区切り線で、黒地にすると白い線として目立つ。
     .l-header__top    border-bottom: 1px solid #ddd
     .l-header__bottom border-bottom: 1px solid #ddd
                       （透過ヘッダー時は rgb(221 221 221 / 30%)）
     .c-breadcrumb     border-bottom: 1px solid #ddd  ← 下層ページの見出し直下
   ---------------------------------------------------------------------- */
body .l-header__top,
body .l-header__bottom,
body.is-header-transparency .l-header__top,
body.is-header-transparency .l-header__bottom,
body .c-breadcrumb {
	border-bottom: 0;
}

/* 2026-08-21 クライアント指示「パンくずは上と下のボーダーの色を薄くして」

   COM-2 で3本とも消したので、いまは**線が1本も無い**状態。指示は「無くす」ではなく
   「薄くする」なので、パンくずの帯の上下に **黒地でぎりぎり見える太さの線**を戻す。
   位置は原本と同じ（上＝ヘッダー下端の線、下＝パンくず下端の線）だが、
   上の線は `.l-header__bottom` ではなく **パンくず側**の border-top として引く。
   ヘッダーは [9] で sticky なので、ヘッダーに付けるとスクロール中も画面上端に
   線が残り「パンくずの枠」に見えなくなるため。

   色は dark-theme.css の `--tzd-line-faint`（配色は dark-theme.css に集約する規約）。
   濃さを変えたいときはそのトークン1か所。線ごと消すなら下の2行を消せば COM-2 の状態に戻る。 */
body .c-breadcrumb {
	border-top: 1px solid var(--tzd-line-faint, #ddd);
	border-bottom: 1px solid var(--tzd-line-faint, #ddd);
}


/* -------------------------------------------------------------------------
   [7] FLOW-1 / FLOW-2 / FLOW-3 … お問い合わせまでの流れ

     FLOW-1 各ステップを四角い枠で囲い、間に矢印を入れる（横並びのままで。
            「縦にすると縦が長くなる」ため）
     FLOW-2 「ステップ1」「ステップ2」…の番号を付ける
     FLOW-3 管理画面から縦・横のレイアウトを切り替えられるようにする
            （投稿画面の「並べ方」。パーツ側が .tz-flow--row / --column を出す）
     FLOW-4 文字は元から投稿画面で編集できる（見出し・各ステップの見出し/説明）

   ■ なぜこのファイルなのか
   `.tz-flow` の従来のスタイルは sections.css（クリーン版ページ用）と
   original-fixes.css（原本DOMページ用）に**同じものが2つ**ある。
   どちらか一方に書くと、もう一方のページ種別で効かない。
   このシートは両方で・いちばん最後に読まれるので、ここ1か所で上書きする。

   ■ 番号はCSSカウンター
   テキストとして持たせると、ステップを足す・並べ替えるたびに手で振り直すことになる。
   カウンターなら 1,2,3… が必ず揃う。ラベルの「ステップ」だけCSS側に持つ。

   ■ 矢印は枠の「あいだ」
   最後以外の枠の ::after を、gap のぶんだけ外へ伸ばして置く。
   `--tz-flow-gap` が余白と矢印の長さを同時に決めるので、間隔はここだけ直せばよい。
   ---------------------------------------------------------------------- */
.tz-flow {
	--tz-flow-gap: 34px;
	--tz-flow-line: #858585;
	--tz-flow-label-bg: #000;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--tz-flow-gap);
	max-width: 1140px;
	margin-inline: auto;
	/* ラベルは枠の上辺にまたがるので、その半分ぶんの逃げを作る（親で切れないように） */
	margin-top: 14px;
	padding: 0;
	counter-reset: tz-flow;
	list-style: none;
}

/* 従来の「左に番号を置く縦リスト」を打ち消す。
   sections.css / original-fixes.css の指定は (0,1,0) なのでここで上書きできる */
/* 幅は中身に合わせる（`flex:1 1 0` で均等割りすると、長いステップ名が
   「予算・/納期・/ご希望イメ/ージを」のように読めない位置で折り返す。
   グローバル規約「変な位置で折り返さない」）。
   折り返す場合も BudouX が入れた <wbr> の位置だけで折れる */
.tz-flow .tz-flow__step {
	counter-increment: tz-flow;
	position: relative;
	/* 伸びる（余った横幅を分け合う）が、中身より狭くはならない。
	   `flex-basis: auto` なので長いステップほど広く取る */
	flex: 1 1 auto;
	/* 文節（BudouX が入れた区切り）より狭くしない。
	   これが無いと「ご/購/入」のように1文字ずつ折れる */
	min-width: min-content;
	margin: 0;
	padding: 2.2em 1.1em 1.4em;
	border: 1px solid var(--tz-flow-line);
	text-align: center;
	word-break: keep-all;
	/* `anywhere` は **min-content 幅も1文字まで縮める**（仕様）。
	   枠の最小幅が1文字になり「ご/購/入」と縦に割れる原因になるので、
	   flex で幅を決めるこの帯では `break-word` を使う（見た目の折り返しは同じ） */
	overflow-wrap: break-word;
}

/* 「ステップ1」…（FLOW-2）。枠の上辺にまたがせて置く */
.tz-flow .tz-flow__step::before {
	content: "ステップ" counter(tz-flow);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 0.7em;
	background: var(--tz-flow-label-bg);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.4;
	white-space: nowrap;
	/* Cormorant は既定が古典的な数字（ベースラインから下がる）なので、
	   番号が沈んで見える。ラベルの数字だけ現代的な字形に揃える */
	font-variant-numeric: lining-nums;
	color: var(--tz-flow-line);
}

/* 枠と枠のあいだの矢印（FLOW-1）。最後の枠には出さない。
   線 + 矢じりを1つの図形として clip-path で切り出す */
.tz-flow .tz-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: var(--tz-flow-gap);
	height: 14px;
	transform: translateY(-50%);
	background: var(--tz-flow-line);
	clip-path: polygon(
		0 45%, calc(100% - 9px) 45%, calc(100% - 9px) 0,
		100% 50%, calc(100% - 9px) 100%, calc(100% - 9px) 55%, 0 55%
	);
}

/* 縦並び（FLOW-3）。矢印は下向き */
.tz-flow.tz-flow--column {
	flex-direction: column;
	max-width: 720px;
}

.tz-flow.tz-flow--column .tz-flow__step {
	flex: 0 0 auto;
}

.tz-flow.tz-flow--column .tz-flow__step:not(:last-child)::after {
	top: 100%;
	left: 50%;
	width: 14px;
	height: var(--tz-flow-gap);
	transform: translateX(-50%);
	clip-path: polygon(
		45% 0, 45% calc(100% - 9px), 0 calc(100% - 9px),
		50% 100%, 100% calc(100% - 9px), 55% calc(100% - 9px), 55% 0
	);
}

/* SPは「横に並べる」を選んでいても縦積み。
   5ステップを375pxに横並びすると1枠60px弱になって読めないため */
@media (max-width: 767px) {
	.tz-flow,
	.tz-flow.tz-flow--row {
		--tz-flow-gap: 32px;
		flex-direction: column;
		max-width: 420px;
	}

	.tz-flow .tz-flow__step {
		flex: 0 0 auto;
	}

	.tz-flow .tz-flow__step:not(:last-child)::after {
		top: 100%;
		left: 50%;
		width: 14px;
		height: var(--tz-flow-gap);
		transform: translateX(-50%);
		clip-path: polygon(
			45% 0, 45% calc(100% - 9px), 0 calc(100% - 9px),
			50% 100%, 100% calc(100% - 9px), 55% calc(100% - 9px), 55% 0
		);
	}
}

.tz-flow .tz-flow__heading {
	margin: 0;
	font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.5;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* BudouX（assets/js/budoux.js）は挿し込んだ <budoux-ja> に
   `overflow-wrap: anywhere` を**インラインstyleで**当てる。
   これは「はみ出さない」ための保険だが、**min-content 幅も1文字まで縮める**ので、
   幅が中身で決まるこの帯では枠が1文字幅まで潰れて「ご/購/入」と縦に割れる（実測）。
   この帯の中だけ `break-word` に戻す（インライン指定に勝たせるため !important）。
   折り返しの位置は BudouX の文節どおりのまま変わらない。 */
.tz-flow budoux-ja {
	overflow-wrap: break-word !important;
}

.tz-flow .tz-flow__text {
	margin: 0.5em 0 0;
	font-size: 0.875rem;
	line-height: 1.8;
	word-break: keep-all;
	overflow-wrap: break-word;
}


/* -------------------------------------------------------------------------
   [8] LANG-1 … 言語の切替UI（日本語 / English）

   DOMは inc/multilingual.php の tz_lang_switch() が出す。
   **Polylang が入っていない・言語が1つだけ のときは1バイトも出ない**ので、
   ここの指定も当たる相手がいない（原本の見た目は変わらない）。

   置き場所は2つ。
     .tz-lang--header … ヘッダー右上。PCはハンバーガーが display:none なので右端に来る
     .tz-lang--drawer … SPメニューの中。原本が持つ空の p-drawer-menu__item を使っている

   SPのヘッダーは ロゴ + キャッチ + ハンバーガー で既に詰まっているため、
   **狭い幅ではヘッダー側を出さずドロワー側だけ**にする（767px で切り替え）。
   ------------------------------------------------------------------------- */

.tz-lang {
	display: flex;
	align-items: center;
	line-height: 1;
	/* 「日本語」「English」は短いので、狭い幅でも絶対に折り返させない */
	white-space: nowrap;
	word-break: keep-all;
}

.tz-lang__item {
	display: inline-flex;
	align-items: center;
	color: var(--tzd-ink, #fff);
	font-size: clamp(11px, 1.1vw, 13px);
	letter-spacing: 0.06em;
	text-decoration: none;
}

.tz-lang__item:hover,
.tz-lang__item:focus-visible {
	color: var(--tzd-ink, #fff);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* いま見ている言語。押せないことを薄さで示す（消すと「どちらにいるか」が分からなくなる） */
.tz-lang__item.is-current {
	opacity: 0.45;
	cursor: default;
	text-decoration: none;
}

/* 区切りの縦線。
   border-left にすると **タップ領域（min-height 44px）いっぱいの長さ**になり、
   文字1行に対して線だけが不自然に長く見える（実測で確認）。
   疑似要素にして文字の高さに合わせる。 */
.tz-lang__item + .tz-lang__item {
	position: relative;
	margin-left: 0.75em;
	padding-left: 0.75em;
}

.tz-lang__item + .tz-lang__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 1.15em;
	transform: translateY(-50%);
	background: currentColor;
	opacity: 0.5;
}

/* --- ヘッダー（PCのみ） --- */
.tz-lang--header {
	/* ハンバーガーの左。SPで出すと 3要素が潰れるので 768px 以上だけ */
	display: none;
	margin-right: 16px;
}

@media (min-width: 768px) {
	.tz-lang--header {
		display: flex;
	}
	/* PCではハンバーガーが消えるため、アイコン置き場が空にならないよう右端に寄せる */
	.l-header__icons {
		justify-content: flex-end;
	}
}

/* ヘッダーは行が詰まっているのでタップ領域を縦に確保する */
.tz-lang--header .tz-lang__item {
	min-height: 44px;
}

/* --- SPメニューの中 --- */
.tz-lang--drawer {
	justify-content: center;
	margin: 24px 0 8px;
}

.tz-lang--drawer .tz-lang__item {
	/* 指で押す前提。44px 角を下回らせない */
	min-height: 44px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-size: 15px;
}

.tz-lang--drawer .tz-lang__item + .tz-lang__item {
	margin-left: 1em;
	padding-left: 1em;
}


/* -------------------------------------------------------------------------
   [9] HDR-1 … ヘッダーを追従（スクロールしても上に貼り付く）
   2026-08-20 クライアント指示「ヘッダーは追従にして」

   ■ 元の状態（実測 / localhost:8951）
     375px  … sticky（原本が `@media (max-width:767px)` で指定済み）→ 既に追従していた
     768px  … relative → スクロールで流れて消える
     1280px … relative → 同上
   つまり **PC・タブレットだけ追従していなかった**。原本テーマ（TCD rikyu）は
   広い画面用の追従ヘッダーを持っていないので、ここで足す。

   ■ fixed ではなく sticky を使う
   `fixed` にすると流し込みから外れ、直後の要素がヘッダーの下へ潜る。
   FV-1（FVをヘッダーの下から始める）と真っ向からぶつかるうえ、
   下層ページでも先頭がヘッダーぶん隠れる。
   `sticky` は**場所を占めたまま**貼り付くので、先頭の見え方は今までと同じまま
   スクロール時だけ追従する。ヘッダー高を打ち消すための負のマージンも要らない。

   ■ 詳細度
   原本は `body.is-header-transparency .l-header`(0,2,1) で `position` を指定する。
   `.l-header` だけ(0,1,0)では負けるので、同じ形を並べて後出しで勝たせる。

   ■ ページ内リンクの行き先が隠れる件
   追従ヘッダーの下に見出しが潜るので、`:target` に scroll-margin を持たせる
   （原本の作家紹介 `#profile` などが対象）。高さは header-offset.js の実測値。
   ------------------------------------------------------------------------- */
body .l-header,
body.is-header-transparency .l-header,
body.front-page.is-header-transparency .l-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* 原本が z-index:100 を持つが、`position` を後から付ける以上ここでも保証する */
	z-index: 100;
}

/* 追従中は本文がヘッダーの背面を通る。透過だと文字が重なって読めないので地色を敷く。
   実際に効いているのは dark-theme.css の `.l-header{background-color:#000!important}`
   （配色はあちらの担当）。ここは **dark-theme.css を切ったときの保険**で、
   `!important` を持たないので通常はあちらに譲る。
   なお同ファイルにあった「最上部だけ透過」の `!important` は 2026-08-20 に撤去した
   （前提が誤りで、TOPのヘッダーが常時透過になっていた）。 */
body .l-header,
body.is-header-transparency .l-header {
	background: #000;
}

/* ページ内リンクで飛んだ時点ではヘッダーは**縮んでいる**（[11] HDR-2）ので、
   縮んだ高さがあるならそちらを使う。1200px以下は縮まないので実測値のまま */
:target {
	scroll-margin-top: calc(var(--tz-header-h-compact, var(--tz-header-h, 70px)) + 16px);
}


/* -------------------------------------------------------------------------
   [10] NEWS-1 … お知らせを「日付 + タイトル」の1行リストにする
   2026-08-20 クライアント指示
   「ニュースはアイキャッチを無くして日付とタイトルの横並びの縦に並ぶリストにして」

   写真はマークアップごと出さない（parts/card-news.php）。ここは並べ方だけ。
   TOPのお知らせ帯・お知らせ一覧ページの**両方**がこのクラスを使う。

   置き場所がこのシートなのは FLOW と同じ理由。`.tz-grid--news` の指定は
   sections.css と original-fixes.css に二重にあり、原本DOMのページと
   クリーン版のページで読まれるシートが違う。両方で読まれるのはこの1枚だけ。
   ------------------------------------------------------------------------- */
.tz-newslist {
	display: flex;
	flex-direction: column;
	/* 1件目の上にも罫線を引くので、帯の上端と重ならないよう少し空ける */
	margin-top: 1.5rem;
	border-top: 1px solid var(--tz-newslist-rule, rgb(255 255 255 / 18%));
}

.tz-newslist__item {
	display: flex;
	/* 日付とタイトルの文字の下端を揃える（タイトルが2行になっても1行目に揃う） */
	align-items: baseline;
	gap: clamp(0.9rem, 3vw, 2rem);
	padding: clamp(0.9rem, 2.4vw, 1.25rem) 0;
	border-bottom: 1px solid var(--tz-newslist-rule, rgb(255 255 255 / 18%));
	color: inherit;
	text-decoration: none;
}

.tz-newslist__date {
	/* 日付は縮めない。桁を揃えて、タイトルの開始位置を全行で同じにする */
	flex: 0 0 auto;
	font-size: clamp(0.75rem, 2.6vw, 0.875rem);
	letter-spacing: 0.06em;
	line-height: 1.6;
	opacity: 0.65;
	white-space: nowrap;
	font-variant-numeric: lining-nums tabular-nums;
}

.tz-newslist__title {
	/* min-width:0 が無いと、長いタイトルが flex 項目の min-content 幅で
	   押し広げて横スクロールを作る */
	flex: 1 1 auto;
	min-width: 0;
	font-size: clamp(0.875rem, 3.2vw, 1rem);
	line-height: 1.7;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* BudouX は `overflow-wrap: anywhere` をインラインで書く。そのままだと
   文節の切れ目を無視して1文字ずつ割れることがある（.tz-flow で踏んだのと同じ）。
   文節どおりの折り返しに戻す */
.tz-newslist budoux-ja {
	overflow-wrap: break-word !important;
}

.tz-newslist__item:hover .tz-newslist__title,
.tz-newslist__item:focus-visible .tz-newslist__title {
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* -------------------------------------------------------------------------
   [11] HDR-2 … 追従ヘッダーをスクロール中だけ縮める（C案）
   2026-08-21 クライアント判断（docs/11 §17「ヘッダーの高さについて」の A〜D から C）

   ■ なぜ要るのか
   [9] で追従にしたぶん、その高さが**常に画面を占める**。実測（画面高800px）:
     375px  60px（8%） / 768px 70px（9%） / **1280px 130px（16%）**
   PC幅だけ突出しているのは、ヘッダーが2段（上＝ロゴ＋キャッチ / 下＝グローバルナビ）だから。

   ■ やること（C案 = 全体を縮める）
   スクロールしたら**ロゴを小さくして2段を1段に寄せ**、130px → 64px にする。
   ロゴもナビも残るので、Bのように「スクロール中はロゴが消える」ことがない。

   ■ 2段になるのは 1201px 以上だけ
   原本が `@media (max-width:1200px){ .l-header__bottom{display:none!important} }` で
   ナビ帯を消しているので、1200px以下は元から1段（60〜70px＝画面の8〜9%）。
   **縮めるのは 1201px 以上だけ**にして、スマホ・タブレットの見え方は一切変えない。

   ■ 2026-08-26 [14] HDR-3 で前提が変わった（縮み幅は 130→64px ではなく 70→64px）
   ヘッダーは**1201px 以上でも1段**になった（左=ナビ / 中央=ロゴ / 右=ボタン）ので、
   「PC幅だけ130pxで突出」という上の前提はもう当てはまらない。先頭でも70pxしかない。
   それでも縮める指示（C案）は生きているので、**組み方の指定は [14] に任せて**、
   ここは「行の高さを 70 → 64px にする」「ロゴを小さくする」だけを持つ。
   以前ここにあった次の3つは [14] に移った／不要になった:
     ・`display:flex` + `flex-wrap` で2段を1段に寄せる  → [14] のグリッドが常に1行
     ・キャッチを compact で隠す                      → [14] が 1201px 以上では常に隠す
     ・`.l-header__top{position:static}`               → [14] が常に static にする
   `.l-header__bottom{padding-right:150px}`（ナビと言語切替の重なり避け）も**外した**。
   ナビは左の列に居て、右端のかたまりは別の列に乗るので、重なりようが無い。

   ■ FVの高さを巻き込まない
   `--tz-header-h` は FV-1 が `calc(100svh - var(--tz-header-h))` で使っている。
   スクロールのたびに値が変わるとFVが伸び縮みしてしまうので、
   assets/js/header-offset.js は **縮んでいる間は測らない**（＝常に元の高さが入る）。
   ページ内リンクの `scroll-margin-top` だけは、縮んだ状態で飛ぶので `--tz-header-h-compact` を見る。
   ------------------------------------------------------------------------- */
@media (min-width: 1201px) {
	/* 縮んだときの高さ。`:target`（ページ内リンクの逃げ）も読むので :root に置く */
	:root {
		--tz-header-h-compact: 64px;
	}

	/* 段の高さは**アニメーションさせない**。
	   帯（64px）＋下の余白（元の高さ − 64px）の合計をいつも元の高さに保ちたいのに、
	   高さだけ 0.2s かけて縮めると、その間だけ合計がずれて本文が上下する（実測）。
	   動きを見せるのは**ロゴの大きさだけ**にする（こちらは行の高さに影響しない）。 */
	body .l-header .c-logo__image {
		transition: max-height 0.2s ease;
	}

	/* --- 縮んだ状態 --- */

	/* ■ 流し込みの高さは変えない（本文を跳ねさせないため）
	   ヘッダーは sticky ＝ 流し込みの中に居るので、**箱ごと縮めると下の全部が上へ寄る**。
	   スクロール位置は変わらないので、縮んだ瞬間に本文がジャンプして見える。
	   JSでスクロール量を相殺する手もあるが、**スムーススクロールの途中で `scrollTo` すると
	   ブラウザのスクロールを打ち切ってしまう**（実測: y=400 へ動いている最中に止まって y=161）。

	   ■ 2026-08-22 クライアント指示「header の padding-bottom を 0 に」
	   当初は縮んだぶんをヘッダー自身の `padding-bottom` で埋め、そこは
	   `background: transparent` にして本文を透かすつもりだった。**これが効いていなかった**。
	   dark-theme.css [10] が `.l-header{background-color:#000!important}` を持っており、
	   `!important` の付いていないこちらの transparent は詳細度に関係なく負ける。
	   結果、縮んだ帯の下に**黒い帯が残って見えていた**（実測）。

	   いまは `padding-bottom: 0` ＝ ヘッダーの箱は縮んだ帯そのもの。
	   流し込みで失われた高さは、**次の要素（`#js-container`）の上余白**で埋める。
	   ヘッダー −6px / 次の要素 +6px で差し引きゼロなので、
	   文書の全高も本文の位置も1pxも変わらない（＝跳ねない・スクロール補正も要らない）。 */
	body .l-header.is-tz-compact {
		padding-bottom: 0;
	}

	/* `#js-header` の**次**は全ページで必ず `#js-container`（原本chrome・混成chrome・
	   生成物のどれも `</header>` の直後に開く）。実測で11ページぶん確認している。 */
	body .l-header.is-tz-compact + #js-container {
		margin-top: max(0px, calc(var(--tz-header-h, 70px) - var(--tz-header-h-compact)));
	}

	/* 行の高さと地色。[14] のグリッドは1行なので、両方の列を同じ高さに落とすだけでよい
	   （地色の値そのものは dark-theme.css の `--tz-header-bg` が持つ） */
	body .l-header.is-tz-compact .l-header__top,
	body .l-header.is-tz-compact .l-header__bottom {
		height: var(--tz-header-h-compact);
		background-color: var(--tz-header-bg, #000);
	}

	body .l-header.is-tz-compact .l-header__logo {
		height: var(--tz-header-h-compact);
	}

	/* ロゴは「TAIZAN」＋下段「BONSAI」の2段組（tools/build-logo.py）。
	   小さくしすぎると下段が読めなくなるので、64pxの帯に収まる範囲でいちばん大きく取る。
	   幅も比率ぶん縮むが、[14] のグリッドが中央列を測り直すのでロゴは中央のまま */
	body .l-header.is-tz-compact .c-logo__image {
		max-height: 44px;
	}
}

/* 動きを減らす設定の人には縮む動きを見せない（縮むこと自体は同じ） */
@media (prefers-reduced-motion: reduce) {
	body .l-header .c-logo__image {
		transition: none;
	}
}


/* -------------------------------------------------------------------------
   [12] ORD-2 … 空間ディスプレイ・オーダーメイド帯の流れ図を縦にも並べられるようにする
   （2026-08-22 クライアント指示 / docs/11 §22）

   対象は原本 band-11 の中の静的な流れ図（`parts/sections-original/section-order.php`）。
   ●を線でつないだ図で、原本は「PCは横並び / 600px以下は縦」で固定だった。
   投稿画面の「流れの並べ方」で **PCでも縦** を選べるようにする
   （パーツ側が `.flow--column` を足す。「横に並べる」＝原本のまま＝クラス無し）。

   ■ なぜ詳細度を1段上げてあるのか（ここを削ると全部効かなくなる）
   打ち消す相手は**同じ帯の中に埋まっている `<style>`**（原本DOMの一部なので改変しない）。
   body 側のインラインstyleは <head> のどのシートよりも**後**に来るので、
   詳細度が同じだと必ず向こうが勝つ。そこで `.flow.flow--column …` と
   クラスを2つ重ねて (0,3,2) にし、原本の `.flow li:not(…)::…` (0,2,2) より上に置く。

   ■ 中身は原本の「600px以下」の指定と同じもの
   縦積みの見た目を2種類持ちたくないので、原本のSP用ブロックをそのまま持ち上げている。
   原本側を直したときはこちらも合わせること。
   ------------------------------------------------------------------------- */

/* 縦に並べたときは**項目のまとまりごと帯の中央**に置く
   （2026-08-22 クライアント指示。原本は帯の左端に貼り付いていた）。

   ●を1本の縦線でつなぐので、li どうしは左そろえのままでないと点がジグザグになる。
   そこで li は `align-items: flex-start` のまま、**ol の箱だけ**を中身の幅
   （＝いちばん長いステップ名の幅）に縮めて左右 auto で中央へ寄せる。
   入りきらない幅では `max-width: 100%` で元どおり全幅＝原本と同じ折り返しになる。

   打ち消す相手は帯の中に埋まっている <style> なので、この節の他の指定と同じく
   クラス2つ（.flow.flow--column）で詳細度を1段上げてある。 */
.flow.flow--column ol {
	flex-direction: column;
	align-items: flex-start;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;
}

/* 「横に並べる」を選んでいても原本は 600px 以下で縦積みになる（帯の中の <style>）。
   そちらも同じ見た目にする — 縦積みの姿を2種類持たない、がこの節の方針。
   原本の `.flow ol` (0,1,1) は <head> のシートより後に来るので、
   `div.flow > ol` (0,1,2) で詳細度を上げて勝たせる */
@media (max-width: 600px) {
	div.flow > ol {
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
	}
}

.flow.flow--column li {
	display: flex;
	line-height: 40px;
	align-items: flex-start;
	position: relative;
	padding-left: 30px; /* ●の位置を空ける */
	text-align: left;
}

.flow.flow--column li .label {
	margin: 0;
	line-height: 3em;
}

.flow.flow--column li .dot {
	position: absolute;
	left: 6px;
	top: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

/* ●と●をつなぐ縦線。
   原本は `z-index: -1` だが、黒地の帯ではその裏に回って消える（dark-theme.css [15] 参照）。
   ここは新しく書く指定なので、最初から `auto` にしておく */
.flow.flow--column li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 10px; /* ●の中心 */
	top: 20px;
	width: 2px;
	height: calc(100% + 5px); /* 下の●まで伸ばす */
	z-index: auto;
}

/* 横並び用の線は出さない。
   打ち消す相手は `.flow li:not(:first-child)::before` = (0,2,2)。
   `:not(:first-child)` を**省くと (0,2,2) で並んでしまい**、後勝ちのインラインstyleに負ける
   （実測: ステップ名の下に横線の切れ端が5本残った）。同じ形で書いて (0,3,2) にする */
.flow.flow--column li:not(:first-child)::before {
	content: none;
}

.flow.flow--column li:first-child::after {
	left: 10px;
	width: 2px;
}

/* 縦に並べているあいだはPC限定の改行（原本の `<br class="pc">`）を出さない。
   1行が「予算・納期・ご希望イメージを / ヒアリング」と2行に割れると、
   ●の位置（top:14px 固定）と行の中心がずれる */
.flow.flow--column li .label br.pc {
	display: none;
}


/* -------------------------------------------------------------------------
   [13] BC-1 / BC-2 … パンくずの HOME を文字にする／アイコンと文字を上下中央で揃える
   （2026-08-22 クライアント指示「ホームはアイコンなしで文字で HOME を表示させて」
     ＋「product などで上下中央に整列していない」）

   ■ ずれていた理由（`align-items: center` は付いているのに効かない）
   原本の HOME は「家のアイコン + 隠し文字 HOME」という作りで、DOM はこう:

     li.c-breadcrumb__item.u-flex-align-center   ← display:flex; align-items:center
       └ a.c-breadcrumb__item-link               ← ここが**ただのブロック**
           ├ span.c-breadcrumb__item--home.c-icon   font-size:22px / line-height:1
           └ span[itemprop=name] style="display:none"  HOME（隠し）

   `align-items:center` が中央に置くのは**flexアイテムである `<a>` の箱**であって、
   その中のアイコンではない。`<a>` の中は通常のインライン整列なので、22px の
   inline-block が 14px/28px の strut のベースラインに乗り、箱の下に約10px の
   余りができる。実測（375px / 商品一覧）:

     li の中心            86.5px
     アイコンの箱の中心   81.5px   ← **5px 上**
     「＞」と下層ページ名 86.5px   ← こちらは最初から中央（`<li>` の直下＝flexアイテム）

   つまり「ホームアイコンだけが上にずれている」状態だった。`<a>` 自身を flex に
   すれば、中の要素も align-items の対象になって揃う（下の BC-2）。

   ■ なぜ CSS でやるのか（PHP を書き換えない）
   パンくずの `<li>` を出しているのは2系統ある:
     - 手書き  … inc/breadcrumb.php（混成ページ。product / concept / gallery / お知らせ / 404 …）
     - 生成物  … parts/sections-original/raw/{company,contact,casestudy,about-us}/prelude.php
   生成物は直接編集しない規約なので、片方だけ直すと **company だけ家アイコン**という
   食い違いになる。DOM は原本のまま（タグ・クラスを削らない規約）にして、
   見え方だけをこの1か所で決める。

   ■ microdata は壊れない
   出す文字は CSS の `content` ではなく、**もともと DOM にある**
   `<span itemprop="name">HOME</span>`（原本が `style="display:none;"` で隠していたもの）。
   構造化データ（BreadcrumbList / inc/seo.php の JSON-LD）の中身は1文字も変わらない。
   相手がインラインstyleなので、打ち消しには `!important` が要る。
   ------------------------------------------------------------------------- */

/* BC-2 リンクの中身（アイコン・文字）を上下中央に置く。
   `<li>` 側の `align-items:center` が届かない**内側**を揃えるための1行。
   中間の項目（COMPANY 等のリンク）にも同じように効く */
body .c-breadcrumb__item-link {
	display: flex;
	align-items: center;
}

/* BC-1 家のアイコンは出さない（DOM は残す。戻すならこの1ブロックを消すだけ） */
body .c-breadcrumb__item--home {
	display: none;
}

/* BC-1 隠し文字だった "HOME" を表に出す。
   相手は原本DOMのインラインstyle（`style="display:none;"`）なので `!important` が必要。
   `<a>` を flex にしたので、この span は flex アイテム＝ブロックになる */
body .c-breadcrumb__item-link > span[itemprop="name"] {
	display: block !important;
}


/* -------------------------------------------------------------------------
   [14] HDR-3 … ヘッダーを「左にメニュー / 真ん中にロゴ / 右にボタン」にする
   2026-08-26 クライアント指示（参考画像 = taizan の別サイト。docs/11 §41）
     「ヘッダーの構成を左にメニュー、真ん中にロゴ、右に Contact の形にしたい」
     「右の Contact は管理画面から自由にカスタマイズできるようにしたい」

   ■ DOM は足していない（ボタン以外）
   原本のヘッダーは2段:
     .l-header__top    … ロゴ / キャッチ / 右端のかたまり（.l-header__icons）
     .l-header__bottom … グローバルナビ（原本CSSが 1200px 以下では display:none）
   この2つを**グリッドの1行に並べ替える**だけで「左 = ナビ / 中央 = ロゴ」になる。
   右端は原本からある `.l-header__icons`（position:absolute / right:40px）がそのまま使えるので、
   ボタン（`tz_header_cta()`）はその中、言語切替とハンバーガーのあいだに入れてある
   （tools/split-original-sections.py の insert_header_cta）。
   つまり**幅ごとの分岐はCSSだけ**で、原本DOMのタグ・クラスは1つも動かしていない。

   ■ 並べ替えるのは 1201px 以上だけ
   1200px 以下は原本が `.l-header__bottom{display:none!important}` でナビ帯を消していて、
   元から1段（ロゴ + ハンバーガー）。ここは触らない ＝ スマホ・タブレットの
   見え方は「ボタンが1つ増える」以外は今までどおり。

   ■ ロゴが「だいたい真ん中」になる仕組み
   列は `1fr auto 1fr`。ナビが左右の取り分（＝(幅 − ロゴ幅) ÷ 2）に収まっているあいだは
   ロゴが**ぴったり中央**に来る。収まらない幅ではナビ側の列が伸びてロゴが少し右に寄るが、
   **重なりは起きない**（`minmax(0,1fr)` にすると逆に、はみ出したナビがロゴに重なる）。
   実測（製品版ロゴ 285×146 ＝ 器の幅237px・ナビ4項目 ＝ 2026-08-26 の §44 でTOPとCONTACTを外した後）:
   **1201 / 1280 / 1440 / 1920px のどの幅でもロゴがぴったり中央**。
   項目を増やすと右へ寄っていくので、間隔は下の [14-C] で幅に連動させてある。

   ■ キャッチ（サイト設定の1行）は 1201px 以上では出さない
   1行に「ナビ / ロゴ / ボタン」を並べる以上、ロゴの右に文章を置く場所が無い。
   768〜1200px では今までどおり出る（＝入力欄が無駄にならない）。
   ------------------------------------------------------------------------- */

/* [14-A] ボタンそのもの（全幅共通）。DOM は inc/original.php の tz_header_cta()。
   原本に無い要素なので**ここが唯一の見た目の定義元**（言語切替 [8] と同じ扱い）。
   色は dark-theme.css のトークンを引く（あちらを切っても白のまま読める既定値を持たせる） */
.l-header__cta {
	display: flex;
	align-items: center;
	/* 言語切替（[8] が margin-right:16px を持つ）とハンバーガーのあいだ */
	margin-left: 4px;
}

.l-header__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	/* 指で押す前提。44px 角を下回らせない（[8] の切替UIと同じ考え方） */
	min-height: 44px;
	padding: 0 clamp(14px, 1.4vw, 26px);
	border: 1px solid var(--tzd-line-strong, rgba(255, 255, 255, 0.42));
	border-radius: 999px;
	color: var(--tzd-ink, #fff);
	font-size: clamp(11px, 0.95vw, 14px);
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	/* 「お問い合わせ」のような日本語を途中で折らない（CJKは任意の位置で割れる） */
	white-space: nowrap;
	word-break: keep-all;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.l-header__cta-link:hover,
.l-header__cta-link:focus-visible {
	color: var(--tzd-ink, #fff);
	border-color: var(--tzd-ink, #fff);
	opacity: 0.75;
}

/* アイコンは Material Symbols Rounded（[1-C] が書体を当てる）。
   文字と同じ大きさだと線が細くて沈むので少しだけ大きく取る */
.l-header__cta-icon {
	font-size: 1.25em;
	line-height: 1;
}

/* [14-B] スマホ（767px 以下）ではボタンを出さない。
   SPのロゴは横長のワードマーク（396×86 を高さ50pxで表示 ＝ 幅230px）で、
   375px ではロゴ + ハンバーガーだけで 330px を使う。**残り45pxにボタンは入らない**
   （実測。入れると必ずロゴに重なる）。言語切替 [8] を 768px で切っているのと同じ理由。
   スマホの導線はハンバーガー内のメニューが受け持つ */
@media (max-width: 767px) {
	.l-header__cta {
		display: none;
	}
}

/* [14-C] 1201px 以上 … 1行に「ナビ / ロゴ / ボタン」を並べる */
@media (min-width: 1201px) {
	body .l-header {
		display: grid;
		/* 中央列＝ロゴ。左右は等分（ナビが取り分を超えたときだけ左が伸びる） */
		grid-template-columns: 1fr auto 1fr;
		align-items: stretch;
	}

	/* 左: グローバルナビ。原本の `.u-flex-center`（中央寄せ）を左寄せに変える */
	body .l-header__bottom {
		grid-column: 1;
		grid-row: 1;
		justify-content: flex-start;
		padding-left: clamp(16px, 2vw, 40px);
		/* 項目を増やしてナビが左右の取り分を超えたとき、列がナビの実寸まで伸びて
		   ロゴが**すぐ隣**に来る。そのときのための最低限の隙間
		   （2026-08-26 に6項目で実測したとき、1201px では隙間が0pxになっていた） */
		padding-right: clamp(12px, 1.5vw, 32px);
	}

	/* 中央: ロゴ。`.l-header__top` はロゴだけを持つ箱になる（キャッチは下で消す）。
	   `position: static` にして、右端のかたまり（`.l-header__icons` ＝ 絶対配置）の
	   基準を**ヘッダー全体**へ移す。これをしないとボタンがロゴのすぐ右に来る */
	body .l-header__top {
		grid-column: 2;
		grid-row: 1;
		position: static;
	}

	body .l-header__catch {
		display: none;
	}

	/* 右: ボタン + 言語切替。原本の `right: 40px` のまま、高さいっぱいに収める */
	body .l-header__icons {
		grid-column: 3;
		grid-row: 1;
	}

	/* ナビの項目間。原本は `padding: 0 30px` 固定で、これだと左の列が
	   左右の取り分（1280px で521px）を超えてロゴが中央に来ない幅がある。
	   幅に応じて詰め、広い画面では原本と同じ 30px まで戻す。
	   **文字の大きさは原本のまま（16px）**触らない。

	   ■ 何項目まで中央に収まるか（実測・製品版ロゴ 幅237px）
	   いまの4項目（COMPANY / PRODUCT / CONCEPT / GALLERY）は
	   **1201px 以上のどの幅でもロゴがぴったり中央**に来る。
	   外観→メニュー で項目を増やすと左の列が伸び、そのぶんロゴが右へ寄る
	   （重なりはしない ─ 上の `1fr auto 1fr` の説明を参照）。
	   6項目 758px は 1280px では**どう詰めても中央に来ない**ので、
	   増やしたら「ラベルを短くする」か「この clamp の上限を下げる」で調整する。 */
	body .l-header .p-global__nav > li > a {
		padding: 0 clamp(12px, 1.5vw, 30px);
	}
}

/* ---------------------------------------------------------
   [15] TTL-1 … タイトル帯（`.p-single__header`）は全ページで出さない
   （2026-08-26 クライアント指示 / docs/11 §44
    「Galleryのヒーローを削除すると現れるタイトルのブロックは全ページ共通で削除」）

   原本の下層ページも同じ状態（ページ名はヒーロー帯 band-00 だけが出す）だが、
   その `display:none` は原本の <style id="tcd-single-custom-css"> が持っていて、
   **読み直しているのは company だけ**だった（inc/assets.php の INLINE_SINGLE_CSS_PAGES）。
   代わりを pagehero-fixes.css [7] が持っていたが、あのシートは
   **ヒーローを置いたページでしか読まれない**ので、投稿画面からヒーローを消した瞬間に
   パンくずの下へ素のページ名が現れていた（Gallery で発覚）。

   混成ページ（prelude-generic.php）は 2026-08-26 に DOM ごと持たなくなったので、
   ここで隠す相手は**生成物の原本prelude**（parts/sections-original/raw/{company,contact,
   casestudy,about-us}/prelude.php）だけ。生成物は原本DOMを削らない約束なので、
   原本と同じやり方＝CSSで隠す。このシートは全ページで読まれる（優先度100）。

   `-title` ではなく帯ごと消すのは、帯自体の余白（`*+.p-single__margin` の 50px）まで
   落とすため。原本は帯を残して文字だけ消していたが、その余白は
   pagehero-fixes.css [8] が別途 0 にしていた＝結局どちらも見えない。 */
.p-single__header {
	display: none;
}


/* ---------------------------------------------------------
   [16] BLK-1 … 投稿画面で挿入したコアブロックの「配置」を効かせる
   （2026-08-26 クライアント指摘 / docs/11 §45
    「デフォルトの画像ブロックを挿入した際に左右中央揃えが効かない」
     → 続報「figure内のimgが左に寄っています」）

   ■ なぜ効かないか
   WordPress は `aligncenter` / `alignleft` / `alignright` の**見た目そのもの**を
   ブロックのCSSでは配らない。実際に出ているのは「レイアウトを持つ入れ物の直下」だけ:
     .wp-site-blocks > .aligncenter { … }           ← ブロックテーマの本文直下
     .is-layout-flow > .aligncenter { …!important } ← group / columns などの中
     .is-layout-constrained > .aligncenter { … }
   このテーマはクラシックテーマで、本文は `the_content()` の出力を原本chromeの中へ
   そのまま流し込む。**本文の直下にはこの3つのどれも無い**ので、そこに置いたブロックだけ
   配置が1つも効かない。group の中に入れたブロックは `.is-layout-flow` が付くので
   昔から効いていた ── クライアントの「画像ブロック以外でも起こりそう」は正しく、
   **効かないのはブロックの種類ではなく置いた深さ**で決まる。

   原本CSS（`assets/original/top/4hpe3.css`）が同じ指定を `.p-body` の中にだけ持っていて、
   `.p-body` を持たないテンプレート（`front-page.php` ＝ TOP）で露見していた。

   ■ 器を名指ししない
   初版は `.p-body` と `.elementor-tzorig` の2つを名指ししていたが、それだと
   **本文がその2つの中に無いテンプレート**（`front-page-parts.php` のクリーン版chrome等）や
   パーツの中へ入れ子にした場合を取りこぼす。クラシックテーマの流儀どおり
   **サイト全体に配る**。値は原本CSSと同じなので、いま効いているページは何も変わらない。

   ★ `:where()` で全体を包んではいけない。詳細度0になると原本のリセット
     （`html, body, div, … figure, … { margin: 0 }` ＝ 要素セレクタの (0,0,1)）に負けて
     `margin-inline: auto` が当たらない。クラス1つぶんの (0,1,0) のままにしておくこと。
   ---------------------------------------------------------- */
.aligncenter {
	margin-inline: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

/* 図が中の画像より広いときは、画像そのものも真ん中へ。
   帯（figure）は `display:table` で中身の幅に縮むのが既定だが、**縦並びの flex/grid の中**に
   置かれると `align-items: stretch` で器いっぱいに伸びる（パーツの中に画像ブロックを
   足した場合など）。そのとき中の `<img>` が左に貼り付く ── クライアント続報の症状。
     - `<img>` が inline のまま … `text-align: center` で寄る（コアと同じ指定。
       コアのブロックCSSが読まれていない環境でも効くように、こちらでも持っておく）
     - `<img>` が block になっている（`patterns.css` の `.tz-p :where(img){display:block}` 等）
       … `text-align` では寄らないので余白を auto にする */
.wp-block-image.aligncenter {
	text-align: center;
}

.wp-block-image.aligncenter > :is(img, a, picture) {
	margin-inline: auto;
}

/* 左寄せ・右寄せは float なので、器が回り込みを閉じないと次の帯へはみ出す。
   混成ページの本文は `.p-body u-clearfix` の中なので原本が閉じてくれるが、
   TOPの本文の器（`prelude-top.php` の `.elementor-tzorig`）には何も無い。
   原本の `.u-clearfix::after`（`assets/original/top/4hpe3.css`）と同じ形で閉じる。

   ★ `[data-elementor-type]` で**ページの器だけ**に絞ること。`.elementor-tzorig` は
     パーツ1つにつき1つ出る（`tz_original_part_wrapper()` / inc/original.php）ので、
     絞らずに書くと1ページに10個以上できて**全高が変わる**
     （実測 2026-08-26: パーツ確認ページが +32px / 1280pxで +64px）。 */
.elementor-tzorig[data-elementor-type]::after {
	display: table;
	clear: both;
	content: "";
}


/* -------------------------------------------------------------------------
   [17] PRD-1 / PRD-2 / PRD-3 … 商品一覧（/product/）のカテゴリーカード
        （2026-08-26 クライアント指示 / docs/11 §44）

     PRD-1 横並びの枚数を管理画面から選べるように
     PRD-2 ホバーしたときだけ「VIEW MORE」が出るレイアウトに
     PRD-3 カテゴリー名をもう少し大きく

   ■ PRD-1 枚数
   枚数そのものは サイト設定 →「商品一覧ページ」→「横並びの枚数」で決まり、
   `archive-product.php` が CSS 変数 `--tz-cat-cols`（パソコン・タブレット）と
   `--tz-cat-cols-sp`（スマホ）にして器へ出す。ここは**幅ごとにどちらを使うか**だけを持つ。
   `minmax(0, 1fr)` にしてあるのは、長いカテゴリー名（＝ min-content 幅）が
   列を押し広げて列幅がそろわなくなるのを防ぐため。

   ★ 打ち消している相手は `base.css` の `.tz-grid{grid-template-columns:1fr}` と
     `@media(min-width:768px){.tz-grid--categories{repeat(2,1fr)}}`（どちらも詳細度 0,1,0）。
     このシートは最後に読まれるので同点で後勝ちする。**詳細度を上げてはいけない** —
     上げると原本DOMページ側の指定との勝ち負けが変わる。

   ■ PRD-2 VIEW MORE
   `parts/card-product.php` で「VIEW MORE」を `figure.tz-card__image` の**中**へ移した。
   写真の上に暗幕（`::after`）＋中央のピルを重ね、既定は `opacity:0`。
   ホバー（とキーボードの `:focus-visible`）で両方を出す。
   指で触る端末には hover が無いので**出ない**ままだが、カード全体がリンクなので
   タップで同じ場所へ飛ぶ（クライアント添付のスマホ画面と同じ見え方）。

   ★ 暗幕とピルは `pointer-events:none`。どちらもカードの `<a>` の中なので押せなくなる
     わけではないが、写真いっぱいに広がるものを当たり判定から外しておく
     （リンクのホバー・クリックは常に `<a>` 本体で受ける）。
   ★ **ピルには `z-index` が要る**（2026-08-26 クライアント指摘「View more の視認性が悪い」で実測）。
     暗幕は `figure` の `::after` ＝ **生成される位置は最後の子**なので、DOM上は手前にある
     `.tz-card__more`（実在の `<span>`）より**あとに塗られる**。どちらも `z-index:auto` だと
     文字の上に黒55%が重なり、白が `#737373` 相当まで沈む。ピルを1段上げて素の白に戻す。
     `isolation:isolate` で figure を積み重ねの単位にし、この `z-index:1` を写真の中だけで閉じる。
   ★ カテゴリー名の上の余白は `.tz-card__body` の `padding-top` を 0 にして消す
     （2026-08-26 クライアント指示）。原本CSSが `figure` に `margin-bottom:32px` を配っていて、
     間隔はそれだけで足りる（padding を残すと 16px ぶん二重になる）。

   ■ PRD-3 カテゴリー名
   `original-fixes.css [7]` の末尾が `.tz-card .tz-card__title.tz-card__title{font-size:1rem}`
   （詳細度 0,3,0）で原本の `.p-body h3` を打ち消しているので、**同じ 0,3,0 で後から**
   書かないと勝てない（`.tz-card--product .tz-card__title` の 0,2,0 では負ける）。
   商品カードだけを対象にするので、お知らせ・作品のカードは 16px のまま動かない。
   ---------------------------------------------------------------------- */

/* PRD-1 … スマホ（〜767px） */
.tz-grid--categories {
	grid-template-columns: repeat(var(--tz-cat-cols-sp, 2), minmax(0, 1fr));
}

@media (min-width: 768px) {
	/* PRD-1 … タブレット・パソコン（768px〜） */
	.tz-grid--categories {
		grid-template-columns: repeat(var(--tz-cat-cols, 2), minmax(0, 1fr));
	}
}

/* PRD-2 … 写真を「重ねる土台」にする */
.tz-card--product .tz-card__image {
	position: relative;
	isolation: isolate;
}

.tz-card--product .tz-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.tz-card--product .tz-card__more {
	position: absolute;
	z-index: 1; /* 暗幕（figure の ::after）より上に塗らせる。理由は上の ★ */
	top: 50%;
	left: 50%;
	/* 下からすこし持ち上げながら出す。`translate(-50%,-50%)` が中央ぞろえ本体 */
	transform: translate(-50%, calc(-50% + 6px));
	margin: 0;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.tz-card--product:hover .tz-card__image::after,
.tz-card--product:focus-visible .tz-card__image::after,
.tz-card--product:hover .tz-card__more,
.tz-card--product:focus-visible .tz-card__more {
	opacity: 1;
}

.tz-card--product:hover .tz-card__more,
.tz-card--product:focus-visible .tz-card__more {
	transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
	.tz-card--product .tz-card__image::after,
	.tz-card--product .tz-card__more {
		transition: none;
	}

	.tz-card--product .tz-card__more,
	.tz-card--product:hover .tz-card__more,
	.tz-card--product:focus-visible .tz-card__more {
		transform: translate(-50%, -50%);
	}
}

/* PRD-3 … カテゴリー名。

   ★ 大きさは**画面幅ではなくカードの幅**から出す（コンテナクエリ単位 `cqi`）。
     枚数を選べるようになったので、同じ 1280px でも1枚の幅は 390px（2列）〜255px（4列）と
     変わる。画面幅で決めると4列にしたとたんに名前が溢れ、
     日本語は「検証用カテゴリ／ー」のように**任意の位置で割れる**（実測）。
     カード幅の 12% にすると、375px2列（155px）で 18.7px・1280px2列で上限の 26px になり、
     8文字の名前でも1行に収まる。
   ★ `cqi` を解さないブラウザでは clamp() ごと無効になるので、**先に画面幅版を1行置く**
     （後の行が読めなければ前の行が残る、というCSSの素の挙動を使う）。
   ★ BudouX が入った要素なので `keep-all` はこの1要素だけに掛ける
     （画面全体に掛けると句読点だけが次行へ落ちる。CLAUDE.md / docs/06 2026-08-22）。
     `overflow-wrap: anywhere` は最後の逃げ道（溢れて横スクロールになるよりはマシ、の意味）。 */
.tz-card--product .tz-card__body {
	container-type: inline-size;
	/* 間隔は原本CSSが figure に配る `margin-bottom` が持つ（2026-08-26 クライアント指示） */
	padding-top: 0;
}

.tz-card--product .tz-card__title.tz-card__title {
	font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* cqi 非対応ブラウザ用 */
	font-size: clamp(1rem, 12cqi, 1.625rem);
	line-height: 1.6;
	word-break: keep-all;
	overflow-wrap: anywhere;
}


/* -------------------------------------------------------------------------
   [18] CTA-3 … スマホで共通CTAの上下の逃げを詰める（2026-08-26 クライアント指摘 / docs/11 §47）

   > 「スマホ版、盆栽買取CTAのした余白が大きすぎ」

   TOPの最後は盆栽買取CTA（`.tz-p-recycle`）で、その**下に続くのが全ページ共通のCTA**
   （`parts/common/cta.php` / 原本 data-lib=27288）。指摘の「余白」は共通CTAの
   上側の逃げで、375px の実測は次のとおり ─ 買取カードの中の逃げ 20px ＋ 帯の逃げ 10px ＋
   **共通CTAの外の逃げ 37.5px ＋ 枠の中の逃げ 45px** で、
   買取ボタンの下から「Contact us」まで **111px** が地色（暗い写真）だけになっていた。

   原本の指定は
     `padding: 10% 5%`（768px以下。**10% は画面幅に対する割合**なので狭い画面ほど厚くなる）
     `.-w-cont-wrap { padding: 5vh 0 7vh }`（**画面の高さ**に対する割合。スマホは縦に長いので厚い）
   の2つで、どちらも「画面が小さいほど厚くなる」向きに効いていた。ここでスマホだけ実寸に置く。

   ★ 範囲は原本のSP指定とぴったり同じ **768px 以下**（PCの `4% 0` / `5vh 0 7vh` は原本のまま）。
     767px にすると 768px ちょうどだけ 10%（＝76.8px）が残り、そこだけ厚いままになる。
   ★ 左右の 5% は原本のまま残す（詰めるのは上下だけ。枠の左右の位置は動かさない）。
   ★ 盆栽買取CTA そのものの逃げ（カード内 20px / 帯 10px）は**触らない** ─ 上側と対称で、
     原本の帯の高さ（375px で 781px）をそのまま保つため。
   実測（375px）: ボタンの下から「Contact us」まで 111px → **83px**、
   共通CTAの帯の高さ 361px → 281px。文字とボタンの位置関係は変わらない。
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
	.tz-cf--cta [data-lib="27288"] {
		padding: 20px 5%;
	}

	.tz-cf--cta [data-lib="27288"] .-w-cont-wrap {
		padding: 32px 0 36px;
	}
}


/* -------------------------------------------------------------------------
   [15] §45 … ヘッダー／フッターを「外観 → デザイン」で組み替えられるようにしたぶんの後始末
   2026-08-26 クライアント指示「ヘッダーとフッターは管理画面の外観→デザインから
   ノーコードツールのように修正できるようにして」

   中身をブロック（テンプレートパーツ）にしたので、原本の器
   `.l-header__top` / `.l-header__icons` / `.l-header__bottom` は
   **コアの group ブロック**が出すようになった。原本のクラスはそのまま付くので
   見た目の指定はすべて効くが、**コアが勝手に足す2つ**だけ打ち消しが要る。

   ■ 24px の縦の隙間
   コアは `:where(.is-layout-flow) > :not(:first-child) { margin-block-start: 24px }` を
   全ブロックに配る（theme.json で blockGap を有効にしていないときの既定値）。
   ヘッダー上段は `u-flex` の横並びなので、2つ目以降＝キャッチと右端のかたまりに
   **24px の上マージンが付いて下へずれる**（実測: 768〜1200px でキャッチが24px下がる）。
   相手は `:where()` ＝ 詳細度ゼロなので、実クラス1つで確実に勝てる。

   ■ blockGap を theme.json で切らない理由
   `settings.spacing.blockGap` を触ると**固定ページ本文の全ブロック**の既定の隙間が変わる。
   ヘッダーの器3つのために全ページの余白を動かすほうが危ないので、ここで名指しで消す。
   ------------------------------------------------------------------------- */
.l-header__top,
.l-header__icons,
.l-header__bottom {
	/* 器そのものに付く隙間（ブロック同士の間隔）を出さない */
	--wp--style--block-gap: 0;
}

.l-header__top > *,
.l-header__icons > *,
.l-header__bottom > * {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* -------------------------------------------------------------------------
   [19] PAD-1 … 下層ページの本文の器から「上の 120px」を消す
   2026-08-26 クライアント指摘
   「スマホ版のGalleryページの上のpaddingが大きすぎるので無しにして」
   （指摘の実体は `.l-container__inner { padding-top: 120px }`）

   ■ 120px の出どころ
   共通chrome（header-original.php）が配る `<style id="tcd-single-custom-css">` は
   **TOPページ版**で、その中に
     .l-container__inner { padding: 120px 0 0px }
   がある。原本の下層ページは自分のページ版の同じ <style> で
     body.page.page-template-default:not(.home) .l-container__inner { padding-top: 0 }
   と打ち消しているが、こちらはTOP版しか配っていないので**下層ページに残る**。
   実測（2026-08-26 / localhost:8901）: 375px で 120px・1280px で 60px。

   ■ なぜ今まで見えなかったか
   同じ打ち消しは pagehero-fixes.css [8] にもあったが、あのシートは
   **ヒーロー（band-00）を置いたページでしか読まれない**。ヒーローのあるページでは 0 に
   なり、ヒーローを外したページ（Gallery・404 など）でだけ 120px が現れていた。
   [7]（タイトル帯）とまったく同じ事故なので、[15] と同様に
   **全ページで読まれるこのシートへ移す**（pagehero-fixes.css 側からは撤去した）。

   ■ 範囲
   `.is-sidebar--none` は混成chrome（prelude-generic.php）の器だけが持つ。
   TOPは `is-sidebar--`（末尾が空）なので当たらない ＝ TOPの余白は原本のまま。
   打ち消す相手 `body.page.page-template-default:not(.home) .l-container__inner`（0,4,1）が
   高く、こちらは body のクラスを当てにできないので `!important` で確実に勝たせる
   （相手は `!important` ではないので、これで決まる）。
   ------------------------------------------------------------------------- */
.is-sidebar--none .l-container__inner {
	padding-top: 0 !important;
}

/* ページ名の帯（`.p-single__header`）を出していた頃の名残。[15] TTL-1 で帯ごと
   出さなくなったので今は当たらないが、帯を戻したときに余白が復活しないよう
   打ち消しごと連れてくる（元は pagehero-fixes.css [8]）。 */
* + .p-single__margin {
	margin-top: 0;
}


/* -------------------------------------------------------------------------
   [20] HDR-4 … スマホのヘッダーを低くする
   2026-08-26 クライアント指摘「スマホのヘッダーの大きさが大きいので小さくして」

   原本のSP（767px以下）は 帯 60px・ロゴ `max-height: 50px`。
   2026-08-26 の §50（SPロゴの左右の余白を切り落とす）でロゴの**インクが 50px いっぱい**に
   なったため、60px の帯の 83% を文字が占めて重く見えていた。
   帯 48px・ロゴ 38px（＝ §50 の前の見え方 37.8px とほぼ同じ字の大きさ）に落とす。

   ■ 3か所を同じ値で動かす（1つでも欠けると帯とロゴの高さがずれる）
     .l-header__top   … 帯そのもの
     .l-header__logo  … ロゴの器（原本は帯と同値）
     .c-logo__image   … ロゴ画像の上限
   ■ ハンバーガーは**逃げ（padding）で**高さを合わせる
   3本線（1px × 3 ＝ 内側 20px）は padding の内側に置かれているので、
   60px − 20px×2 = 20px と同じになるよう 48px − 14px×2 = 20px にする。
   ＝ アイコンの大きさも線の間隔も1pxも変えずに帯だけ低くなる。
   幅（原本 `.l-header__nav--sp{width:60px}`）は触らない（タップ領域は 60×48px）。
   ■ FVの高さは自動で追従する
   `--tz-header-h` は header-offset.js が**実測して**渡すので、
   `100svh − ヘッダー高` のFV（[5] FV-1）が 12px ぶん高くなるだけで補正は要らない。
   ■ [11] HDR-2（スクロール中に縮む）は 1201px 以上だけなので無関係。
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	body .l-header__top,
	body .l-header__logo {
		height: 48px;
	}

	body .l-header .c-logo__image {
		max-height: 38px;
	}

	body button.p-menu-button {
		height: 48px;
		padding: 14px 20px;
	}
}


/* -------------------------------------------------------------------------
   [21] FTR-1 … スマホのフッター（コピーライトの下の逃げ・文字の大きさ / リンク一覧の並び）
   2026-08-28 クライアント指示「SP版フッターの修正」（docs/11 §57）
     ・copyright の padding-bottom を消す
     ・copyright のフォントサイズを 12px に
     ・リストを text-align: center に、
       `.-w-fnav ul li:nth-child(n+5) { margin-top: 10px }` を無くす

   原本（withers.jp の共通フッター ＝ common-cta-footer.css）のSP指定は
     .-w-copyright { padding: 0 0 80px }   … 画面下の固定バーぶんの逃げ（本サイトに固定バーは無い）
     .-w-copyright { font-size: 14px }     … 全幅共通
     .-w-fnav ul li { width: calc(50% - 5px) }  … 2列。文字は各列の左端（text-align は継承の start）
     .-w-fnav ul li:nth-child(n+5) { margin-top: 10px }
        … 全幅共通。PCの4列で2段目以降を離すための指定が、SPでは 1024px 以下の
          `ul { gap: 10px }` と重なって **3段目からだけ 20px 空く**（1〜2段目の間は 10px）
   ロゴ・SNS・コピーライトはSPで全部中央なのに、リンクだけ左寄せだった。

   ★ 範囲は原本のSP指定と同じ **768px 以下**（PC・タブレット横は原本のまま1pxも動かさない）。
   ★ common-cta-footer.css は**生成物**（tools/extract-cta-footer-css.mjs）なので直接触らず、
     ここで同じ詳細度のセレクタを**後から**当てて勝つ。nth-child の1本は同じ nth-child で
     打ち消す（`.-w-fnav ul li` で書くと詳細度が1つ足りずに負ける）。
   ★ 低くなるのは コピーライトの 80px ＋ 3段目以降の 10px × 段数。
     フッター自身の `padding-bottom: 33px`（原本）は残す。
   検証: node preview/verify-footer-sp-wp.mjs http://localhost:<port>
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.tz-cf--footer [data-lib="25730"] .-w-copyright {
		padding-bottom: 0;
		font-size: 12px;
	}

	.tz-cf--footer [data-lib="25730"] .-w-fnav ul li {
		text-align: center;
	}

	.tz-cf--footer [data-lib="25730"] .-w-fnav ul li:nth-child(n+5) {
		margin-top: 0;
	}
}