@charset "UTF-8";
/* =========================================================
   patterns.css — 純コアブロックのパーツ（docs/09 §3 第2段階）

   対象は inc/patterns.php の tz_core_patterns() に載っているパーツだけ。
   マークアップは patterns/{name}.php（コアブロックの group / heading /
   paragraph / image / buttons）で、このファイルが**唯一の見た目の情報源**。

   守っていること:
   - 原本CSS（assets/original/ = Elementorのページ別CSS）に一切依存しない。
     どのページ・どの順序に置いても同じ見た目になる（docs/05 §1 条件2・3）。
     そのため `.tz-p` 配下は継承に頼らず、値を自分で持つ
   - 逆に `.tz-p` の外へは漏らさない。素の要素セレクタは使わない
   - 値は原本の実測（docs/09 §3-5 の測定 / assets/css/original-sections/*.css）に合わせる。
     意図して変えた点は各所のコメントに理由を書く
   - モバイルファースト。複数カラムはSPで1カラムに畳む（CLAUDE.md）
   ========================================================= */

/* ---------------------------------------------------------
   共通トークン + 器の打ち消し
   --------------------------------------------------------- */

.tz-p {
	/* 色（原本の実測値。#848383 = 英字見出しのグレー / #d2d2d2 = 帯の地色） */
	--tz-p-ink: #000;
	--tz-p-stone: #848383;
	--tz-p-rule: #636363;
	--tz-p-panel: #d2d2d2;

	/* 書体（原本の computed font-family と同一連鎖。inc/patterns.php が Google Fonts を読む。
	   フォールバックまで原本に合わせる: compare-section の font-family 突き合わせを素通しにするため */
	--tz-p-font-body: Arial, "Yu Mincho", "游明朝", "游明朝体", "Hiragino Mincho Pro", serif;
	--tz-p-font-en: "Abhaya Libre", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS 明朝", "MS Mincho", serif;
	--tz-p-font-display: "Cormorant", sans-serif;
	--tz-p-font-jp-serif: "Noto Serif JP", sans-serif;
	/* 原本テーマの既定の明朝連鎖（アコーディオンの見出し・実績リスト・事業紹介の本文）。
	   原本の computed をそのまま写している */
	--tz-p-font-mincho: "Times New Roman", times, "Yu Mincho", "游明朝", "游明朝体", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;

	/* 帯の左右の逃げ（原本は 10px 固定。SPで詰まらないよう下限だけ確保する） */
	--tz-p-gutter: 10px;

	box-sizing: border-box;
	width: 100%;
	font-family: var(--tz-p-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tz-p-ink);
	text-align: start;
}

.tz-p *,
.tz-p *::before,
.tz-p *::after {
	box-sizing: border-box;
}

/* コアブロック側の既定余白（wp-block-library の `.wp-block-image{margin:0 0 1em}` 等）と、
   載せる先のテーマが持つ素の要素余白の両方を、ここで一度ゼロに戻す */
.tz-p :where(h1, h2, h3, h4, h5, h6, p, figure, ul, ol, li, div) {
	margin: 0;
	padding: 0;
}

.tz-p :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.tz-p :where(a) {
	color: inherit;
	text-decoration: none;
}

/* コアのレイアウト既定を打ち消す。theme.json があると WordPress が
   `:root :where(.is-layout-flow) > * { margin-block-start: var(--wp--style--block-gap, 24px) }`
   を出すので、そのままだとパーツの中に24pxの隙間が勝手に入る。
   帯の中の間隔は下の各パーツの指定だけが持つようにする（詳細度 (0,2,0) で確実に勝たせる） */
.tz-p.is-layout-flow > *,
.tz-p .is-layout-flow > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* 日本語の文節改行（BudouX が <wbr> を入れる。assets/js/budoux.js） */
.tz-p .tz-budoux {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 英字のサブラベル（「枯れた盆栽 Withered bonsai」の後半） */
.tz-p .tz-p-sub {
	font-size: 0.5em;
}

/* ---------------------------------------------------------
   ブロックスタイル（右サイドバーの「スタイル」/ inc/patterns.php で登録）

   クライアントが自分で足した見出し・段落・ボタンに、サイトの書式を当てるためのもの。
   パーツの中ではなく本文のどこにでも付くので、`.tz-p` 配下ではなく単独で成立させる。
   --------------------------------------------------------- */

.is-style-tz-en {
	font-family: "Cormorant", serif;
	font-weight: 600;
	line-height: 1.1;
	color: #848383;
	text-align: center;
}

.is-style-tz-en-solid {
	font-family: "Abhaya Libre", "游明朝", "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
}

.is-style-tz-lead {
	line-height: 2;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.is-style-tz-underline .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	font-size: 18px;
	line-height: 1;
	color: #000;
	text-transform: uppercase;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid #000;
	border-radius: 0;
	box-shadow: none;
}

.is-style-tz-underline .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

/* ---------------------------------------------------------
   OUR MISSION
   実測: 英字見出し Cormorant 46px/600/#848383（SP 31px）、
         本文 Abhaya Libre 16px/38.4px（SP 12px/19.2px）、
         地色は左右で塗り分けたグラデーション
   --------------------------------------------------------- */

.tz-p.tz-p-mission {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 原本は 帯 →(10px)→ inner →(10px)→ head/body の二重の逃げ。
	   inner に当たる要素はコアブロックに無いので、左右 20px をまとめて帯が持つ */
	padding: 20px calc(var(--tz-p-gutter) * 2);
	background-image: linear-gradient(90deg, #f3f3f3 50%, #e0e0e0 50%);
}

/* 実測の内容幅: 375px→335 / 769px→729 / 1280px→1120（＝原本の inner 1140 − 逃げ20） */
.tz-p-mission > .tz-p-mission__head,
.tz-p-mission > .tz-p-mission__body {
	width: 100%;
	max-width: min(100%, 1120px);
}

.tz-p-mission > .tz-p-mission__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-block: 10px;
	margin-bottom: 20px;
}

.tz-p-mission .tz-p-mission__en {
	font-family: var(--tz-p-font-display);
	font-size: 31px;
	font-weight: 600;
	line-height: 1;
	color: var(--tz-p-stone);
	text-align: center;
}

/* 原本は幅140pxの空 <span> に4辺ボーダー（＝見た目2pxの罫線）。
   コアブロックに空要素が無いので疑似要素で描く（実測 140×2px） */
.tz-p-mission .tz-p-mission__en::after,
.tz-p-mission .tz-p-mission__title::after {
	content: "";
	display: block;
	width: 140px;
	height: 2px;
	background: var(--tz-p-rule);
}

.tz-p-mission .tz-p-mission__en::after {
	margin: 20px auto 0;
}

/* 原本の項目内の罫線は見出しとのあいだが gap 5px（SP）/ 20px（PC） */
.tz-p-mission .tz-p-mission__title::after {
	margin-top: 5px;
}

.tz-p-mission .tz-p-mission__lead {
	font-size: 16px;
	line-height: 2;
	text-align: center;
}

/* 原本のSPは項目が横並び2カラム（実測 152.5px×2）で、図版がその上に全幅で載る。
   1カラムには畳まない（reference一致が正・2026-08-16 ユーザー指摘による是正） */
.tz-p-mission > .tz-p-mission__body {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: center;
	/* 縦20px（図版の行→項目の行）・横30px（実測: 335 - 152.5×2） */
	gap: 20px 30px;
}

.tz-p-mission .tz-p-mission__item {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 5px;
	/* 2カラムを保てる下限（320px幅でも (300-20)/2=140px は確保できる） */
	min-width: 140px;
	padding-block: 10px;
}

.tz-p-mission .tz-p-mission__title {
	font-family: var(--tz-p-font-jp-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1; /* 実測 16px */
	color: var(--tz-p-stone);
}

.tz-p-mission .tz-p-mission__text {
	font-family: var(--tz-p-font-en);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tz-p-ink);
}

.tz-p-mission .tz-p-mission__figure {
	order: -1; /* SPは原本どおり項目より上 */
	flex: 0 0 100%; /* 横並びの行を独占して全幅（項目2カラムの上に載る） */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tz-p-mission .tz-p-mission__figure img {
	width: 130px;
	height: auto;
}

@media (min-width: 768px) {
	.tz-p.tz-p-mission {
		padding-block: 80px;
	}

	.tz-p-mission .tz-p-mission__en {
		font-size: 46px;
	}

	/* 原本の3カラム比率（実測 1280px: 項目399 / 図版319 / 項目402）を
	   「図版だけ固定比率・項目は残りを等分」で再現する。項目が1件でも5件でも同じ規則で割れる */
	.tz-p-mission > .tz-p-mission__body {
		flex-direction: row;
		flex-wrap: wrap;
		/* 原本は3カラムとも同じ高さ（実測 769px: 項目・図版とも 407.5px）で上端が揃う。
		   center にすると文量の違う項目が縦にずれて原本と見た目が変わる */
		align-items: stretch;
		justify-content: center;
		/* PCのカラム間は原本実測でほぼ0（項目側の padding-inline 10px が見た目の間隔） */
		gap: 20px 0;
	}

	.tz-p-mission .tz-p-mission__item {
		flex: 1 1 0;
		gap: 20px;
		padding-inline: 10px;
		/* 日本語本文が読める下限。これを下回るときだけ次の行へ折り返す */
		min-width: min(100%, 12.5rem);
		/* 折り返した最終行に1件だけ残ったとき、行いっぱいに伸びて幅が揃わなくなるのを防ぐ */
		max-width: 50%;
	}

	.tz-p-mission .tz-p-mission__figure {
		order: 0; /* PCは原本どおり項目1と項目2のあいだ */
		flex: 0 1 28%;
		padding: 10px;
	}

	.tz-p-mission .tz-p-mission__figure img {
		width: 100%;
	}

	.tz-p-mission .tz-p-mission__title {
		font-family: var(--tz-p-font-en);
		font-size: 28px;
		line-height: 1; /* 実測 28px */
	}

	/* 原本のPCは 見出し →(gap20+wrapper pad10)→ 罫線 →(pad10+gap20)→ 本文。
	   疑似要素の margin 30px/10px + 項目の gap 20px で同じ間隔（30/30）を再現する */
	.tz-p-mission .tz-p-mission__title::after {
		margin: 30px 0 10px;
	}

	/* margin-block は原本の行送り補正（半行分を詰める実測値 -(lh-1em)/2） */
	.tz-p-mission .tz-p-mission__text {
		font-size: 16px;
		line-height: 2.2;
		margin-block: -9.6px;
	}
}

@media (min-width: 1280px) {
	.tz-p-mission .tz-p-mission__text {
		line-height: 2.4;
		margin-block: -11.2px;
	}
}

/* ---------------------------------------------------------
   写真の帯
   実測: 高さ PC 310px / SP 90px、2枚を等分、object-fit: cover
   --------------------------------------------------------- */

.tz-p.tz-p-photos {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
}

.tz-p-photos > .tz-p-photos__item {
	flex: 1 1 0;
	min-width: 0; /* flex の既定 min-width:auto で画像がはみ出すのを防ぐ */
}

.tz-p-photos .tz-p-photos__item img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	object-position: center center;
}

@media (min-width: 768px) {
	.tz-p-photos .tz-p-photos__item img {
		height: 310px;
	}
}

/* 写真が1枚だけのときは「背景固定の帯」にする（2026-08-19 クライアント指示 / docs/11 TOP-1）。
   原本 company / band-02（027ce30）と同じ作り: 高さ SP 190px / PC 400px、cover、
   1025px以上でだけ background-attachment: fixed（原本のブレークポイントに合わせた。
   iOS は fixed をスクロールとして扱い写真が引き伸ばされて見えるため、SPでは掛けない）。

   ★ 1024px以下は **JSが同じ絵を作る**（2026-08-26 クライアント指摘 / docs/11 §45）。
     `fixed` を使わずに、ビューポートを cover する実寸と座標を assets/js/parallax.js が
     `background-size` / `background-position` へ px で入れ直すので、見え方は fixed と同じで
     iOS の描き直し不具合を踏まない。**しきい値 1025px はJS側の `DESKTOP_MQ` と対。
     片方だけ変えない。**

   背景画像は assets/js/parallax.js が <img> の src から流し込む。JSが動かなければ
   data-tz-parallax が付かず、下の指定は当たらないまま写真が普通に表示される。 */
.tz-p-photos[data-tz-parallax="on"] {
	display: block;
	min-height: 190px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tz-p-photos[data-tz-parallax="on"] .tz-p-photos__item {
	/* 背景で見せるので <img> 自体は場所を取らない。alt はDOMに残す（読み上げ・SEO） */
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

@media (min-width: 768px) {
	.tz-p-photos[data-tz-parallax="on"] {
		min-height: 400px;
	}
}

@media (min-width: 1025px) {
	.tz-p-photos[data-tz-parallax="on"] {
		background-attachment: fixed;
	}
}

/* JSが座標を入れている間（1024px以下）は fixed を掛けない。
   JS側は毎フレーム px を書き込むので、両方掛かると二重にずれる。
   幅を広げると parallax.js がインラインを消し、上の fixed に戻る。 */
.tz-p-photos[data-tz-parallax-mode="js"] {
	background-attachment: scroll;
}

/* ---------------------------------------------------------
   ページリンク帯
   実測: 帯 PC 550px / SP 320px、テキスト列 40%・#d2d2d2、写真列 60%、
         見出し Abhaya Libre 50px/500（SP 30px）、ボタン 18px（SP 14px）下線つき
   --------------------------------------------------------- */

.tz-p.tz-p-pagelink {
	display: flex;
	flex-wrap: wrap;
	min-height: 320px;
}

/* 直前の帯と地続きにならないよう、帯の上に余白を置く
   （2026-08-25 クライアント指示「conceptと空間ディスプレイパーツの間に余白を作って」）。
   TOPでは原本の band-11（空間ディスプレイ・オーダーメイド）の直後に CONCEPT が
   隙間ゼロで始まっており、地色（黒）と帯の地色が接して1つの塊に見えていた。

   値はサイトの節の刻み `--tz-p-section-pad`（clamp(56px, 9vw, 110px)）をそのまま使う。
   TOPのお知らせ帯の上下パディングと同じ値なので、ページの縦のリズムが揃う。

   ★ `:not(.tz-p-spot)` は GALLERY の拠点を外すため。拠点（galleryspots.php）は
     同じ `tz-p-pagelink` のクラスで2分割バナーを作っており、
     並べたパネルの間に余白が入ると交互配置の構図が崩れる。
   ★ 隣り合う帯（CONCEPT → PRODUCT）は原本どおり隙間なしで重ねる。
     余白は「ひとつながりの2枚組の外側」にだけ要る。 */
.tz-p.tz-p-pagelink:not(.tz-p-spot) {
	margin-top: var(--tz-p-section-pad);
}

.tz-p-pagelink:not(.tz-p-spot) + .tz-p.tz-p-pagelink:not(.tz-p-spot) {
	margin-top: 0;
}

.tz-p-pagelink > .tz-p-pagelink__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	min-height: 128px;
	padding: 20px var(--tz-p-gutter);
	background-color: var(--tz-p-panel);
}

.tz-p-pagelink .tz-p-pagelink__title {
	font-family: var(--tz-p-font-en);
	font-size: 30px;
	font-weight: 500;
	line-height: 1;
	color: var(--tz-p-ink);
	text-align: center;
}

.tz-p-pagelink .tz-p-pagelink__actions {
	display: flex;
	justify-content: center;
}

/* コアの `.wp-block-button__link`（丸ボタン・塗り）を打ち消して、原本の下線リンクにする */
.tz-p-pagelink .tz-p-pagelink__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
	font-family: var(--tz-p-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	color: var(--tz-p-ink);
	text-transform: uppercase;
	text-decoration: none;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--tz-p-ink);
	border-radius: 0;
	box-shadow: none;
}

/* 原本は Font Awesome の chevron。外部フォントに依存しないようCSSで描く */
.tz-p-pagelink .tz-p-pagelink__button .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}

/* 写真は「枠の高さを決めて、その中を cover で埋める」。
   img に height:100% だけ置くと親に高さが無いぶん auto に落ちて写真の実寸で伸びるため、
   枠を position:relative にして img を absolute で敷き詰める */
.tz-p-pagelink > .tz-p-pagelink__photo {
	position: relative;
	width: 100%;
	height: 192px;
}

.tz-p-pagelink .tz-p-pagelink__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

@media (min-width: 768px) {
	.tz-p.tz-p-pagelink {
		flex-wrap: nowrap;
		min-height: 550px;
	}

	.tz-p-pagelink > .tz-p-pagelink__text {
		flex: 0 0 40%;
		width: 40%;
		min-height: 0;
		gap: 25px;
	}

	.tz-p-pagelink > .tz-p-pagelink__photo {
		flex: 0 0 60%;
		align-self: stretch; /* 帯の高さ（min-height:550px）いっぱいに伸ばす */
		width: 60%;
		height: auto;
	}

	.tz-p-pagelink .tz-p-pagelink__title {
		font-size: 50px;
	}

	.tz-p-pagelink .tz-p-pagelink__button .wp-block-button__link {
		font-size: 18px;
	}

	/* 写真を左に置く版（原本 PRODUCT 帯 = row-reverse）。SPは原本と同じく常に「文字→写真」 */
	.tz-p.tz-p-pagelink--reverse {
		flex-direction: row-reverse;
	}
}

/* [SP] タブレット以下（768px以下）は「写真を背景にして、その上に文字」のカードにして
   CONCEPT と PRODUCT を**横2列**に並べる
   （2026-08-26 クライアント指示「CONCEPT, PRODUCTパーツはタブレット以下の時は
     背景画像で表示させてその上にテキスト出して2列表示させたいです」/ docs/11 §49）

   ねらい: 縦積み（文字パネル + 写真）× 2帯 で 375px のとき 640px 使っていたところを、
   横2列の1段に畳む。

   ★ この帯だけ **max-width** で書く。すぐ上の `min-width: 768px` と
     **768px ちょうどで両方当たる**が、後に書いたこちらが勝つ
     （クライアントの言う「タブレット以下」は 768px を含む）。
     上のブロックを `769px` 始まりに書き換えないのは、GALLERY の拠点（`.tz-p-spot`）が
     同じ `tz-p-pagelink` のクラスで 768px から2分割になっており、
     **そちらの切り替え点を1pxも動かさない**ため。

   ★ `:not(.tz-p-spot)` は GALLERY の拠点を外すため。拠点は
     `inc/section-patterns/galleryspots.php` が同じ `tz-p-pagelink*` のクラスで
     2分割バナーを作っている（外枠は `tz-p tz-p-spot tz-p-pagelink`）。
     指示は「TOPの CONCEPT / PRODUCT」なので拠点は縦積みのまま。

   ★ 横に並べるのは **2枚が隣り合っているときだけ**。挿入パネルから1枚だけ置いた
     固定ページが半分の幅にならないようにする（1枚のときは全幅のまま重ねるだけ）。
     並べ方は「1枚目を float、2枚目はそのまま」。`.tz-p-pagelink` は `display: flex` で、
     **フレックスコンテナには float が入り込まない**ので2枚目は float の隣に収まる。
     この作りだと clearfix が要らない ─ 2枚目は通常フローに居るので、
     親の高さも後ろの要素の位置も2枚目が決め、float がその外へはみ出せない。 */
@media (max-width: 768px) {
	/* --- 写真を背景に、文字をその上に（1枚でも2枚でも同じ） --- */
	.tz-p.tz-p-pagelink:not(.tz-p-spot) {
		position: relative; /* 写真を敷き詰めるための枠 */
	}

	/* 原本の「高さを決めて cover で埋める」枠を、そのまま帯いっぱいへ広げる
	   （img 側は既に `position:absolute; inset:0; object-fit:cover`） */
	.tz-p-pagelink:not(.tz-p-spot) > .tz-p-pagelink__photo {
		position: absolute;
		inset: 0;
		z-index: 0;
		flex: none;
		width: 100%;
		height: 100%;
	}

	/* 文字は写真の上。暗幕は **写真が真っ白でも** 本文が 4.5:1 を超える濃さにする
	   （白 #fff の上に rgb(0 0 0 / 55%) = 実効 rgb(115,115,115) → 白文字で 4.76:1）。
	   黒地・白文字テーマでは dark-theme.css [17-B] が**同じ狙いのまま**
	   サイトの面と同じ色相（#1f2529 の66%）へ差し替える。 */
	.tz-p-pagelink:not(.tz-p-spot) > .tz-p-pagelink__text {
		--tz-p-ink: #fff; /* 見出し・リンク文字・リンクの下線がまとめて白になる */

		position: relative;
		z-index: 1;
		flex: 1 1 100%;
		gap: 14px;
		width: 100%;
		min-height: 0;
		padding: 16px 12px;
		background-color: rgb(0 0 0 / 55%);
	}

	/* 半分の幅に収める。文言はクライアントが変えるので、固定値ではなく clamp で上限を抑える
	   （CLAUDE.md「フォントサイズはコンテナ幅に収まるサイズにする」） */
	.tz-p-pagelink:not(.tz-p-spot) .tz-p-pagelink__title {
		/* 実測: 375px で 27px（見出し「CONCEPT」= 123px / 収まる幅 164px）、768px で 40px。
		   長い見出しに変えられたときに枠から出さないよう、単語の途中でも折る */
		font-size: clamp(24px, 7.2vw, 40px);
		overflow-wrap: anywhere;
	}

	.tz-p-pagelink:not(.tz-p-spot) .tz-p-pagelink__button .wp-block-button__link {
		gap: 6px;
		/* 下限12px は「TAIZAN BONSAIについて」が 375px の半分の幅に1行で収まる最小
		   （実測 149px / 収まる幅 164px）。これ以上小さくすると読みにくい */
		font-size: clamp(12px, 3.1vw, 16px);
		line-height: 1.4; /* 長い文言が2行になったときに行が重ならないように */
	}

	/* --- 2枚が隣り合っているときだけ横2列 --- */
	.tz-p-pagelink:not(.tz-p-spot):has(+ .tz-p-pagelink:not(.tz-p-spot)) {
		float: left;
	}

	.tz-p-pagelink:not(.tz-p-spot):has(+ .tz-p-pagelink:not(.tz-p-spot)),
	.tz-p-pagelink:not(.tz-p-spot) + .tz-p.tz-p-pagelink:not(.tz-p-spot) {
		/* 実測: 375px → 187.5×225 / 768px → 384×461。写真が主役になるので縦長に取る */
		aspect-ratio: 5 / 6;
		width: 50%;
		min-height: 0;

		/* 2枚の頭を揃える（縦に積んでいたときは2枚目の上余白を0にしていた） */
		margin-top: var(--tz-p-section-pad);
	}
}

/* ---------------------------------------------------------
   特徴（写真 + 見出し + 本文）
   実測: 帯 padding 25/80px（SP 40/40）、見出し 22px（SP 20px）、
         行は左右交互（原本は data-id ごとの flex-direction）
   --------------------------------------------------------- */

.tz-p.tz-p-features {
	padding: 40px var(--tz-p-gutter);
}

.tz-p-features > .tz-p-features__en {
	font-family: var(--tz-p-font-display);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
}

.tz-p-features > .tz-p-features__lead {
	margin-top: 12px;
	font-size: 16px;
	line-height: 2;
	text-align: center;
}

.tz-p-features > .tz-p-features__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1140px;
	margin-inline: auto;
}

.tz-p-features .tz-p-features__item {
	display: flex;
	/* SPは原本どおり「写真が上・テキストが下」（原本は column-reverse） */
	flex-direction: column-reverse;
	gap: 16px;
	padding-block: 10px;
}

.tz-p-features .tz-p-features__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
}

.tz-p-features .tz-p-features__title {
	font-family: var(--tz-p-font-en);
	font-size: 20px;
	font-weight: 400;
	/* 原本は line-height:0.6em で文字が上下に切れていた。読めるように 1.4 へ直した（意図した変更） */
	line-height: 1.4;
	text-transform: uppercase;
}

.tz-p-features .tz-p-features__body {
	font-size: 16px;
	line-height: 2.2;
}

.tz-p-features .tz-p-features__figure img {
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.tz-p.tz-p-features {
		padding: 25px var(--tz-p-gutter) 80px;
	}

	.tz-p-features .tz-p-features__item {
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}

	/* 偶数行はテキストと写真を左右入れ替え（原本の row-reverse）。
	   項目を足しても交互が続く＝件数可変（docs/05 §1 条件4） */
	.tz-p-features .tz-p-features__item:nth-child(even) {
		flex-direction: row-reverse;
	}

	.tz-p-features .tz-p-features__text,
	.tz-p-features .tz-p-features__figure {
		flex: 1 1 0;
		min-width: 0;
	}

	.tz-p-features .tz-p-features__title {
		font-size: 22px;
	}
}

/* ---------------------------------------------------------
   背景・ストーリー
   実測: 帯 min-height 500px（SP 180px）・padding 80/40px（SP 40/40）、
         見出し Cormorant 22px/300 uppercase・下に3pxの罫線、本文は中央寄せ
   --------------------------------------------------------- */

.tz-p.tz-p-background {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 180px;
	padding: 40px var(--tz-p-gutter);
}

.tz-p-background > .tz-p-background__en {
	width: fit-content;
	margin-inline: auto;
	padding-bottom: 4px;
	font-family: var(--tz-p-font-display);
	font-size: 22px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	border-bottom: 3px solid var(--tz-p-ink);
}

.tz-p-background > .tz-p-background__body {
	max-width: 760px;
	margin: 24px auto 0;
	font-size: 16px;
	font-weight: 300;
	line-height: 2.4;
	text-align: center;
}

@media (min-width: 768px) {
	.tz-p.tz-p-background {
		min-height: 500px;
		padding: 80px var(--tz-p-gutter) 40px;
	}
}

/* =========================================================
   concept / gallery のパーツ（docs/10 工程J）

   これらは原本（withers.jp）に対応する帯が無い新規パーツなので、
   「原本の実測に合わせる」のではなく clean版（assets/css/sections.css の
   .tz-concept / .tz-scatter / .tz-spot / .tz-exphotos / .tz-band-divider）と
   同じ見た目を、.tz-p 配下で自己完結させたもの。値はそちらから移設した。
   ========================================================= */

/* clean版の base.css トークンに当たるもの。.tz-p は継承に頼らないので自分で持つ */
.tz-p {
	--tz-p-gray: #848383;
	--tz-p-dark: #0c0c0c;
	--tz-p-placeholder: #f2f2f2;
	--tz-p-container: 1140px;
	/* theme.json の settings.layout.wideSize と同値。編集画面の「配置 → 幅広」で使う */
	--tz-p-container-wide: 1400px;
	--tz-p-container-narrow: 760px;
	--tz-p-page-gutter: clamp(20px, 4vw, 40px);
	--tz-p-section-pad: clamp(56px, 9vw, 110px);
	--tz-p-fs-en-h2: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);
	--tz-p-fs-ja-mid: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
}

/* 帯の共通の器（clean版の .tz-section + .tz-container 相当）

   **拠点（.tz-p-spots）はここに含めない**（2026-08-22 / docs/11 §23 GAL-5）。
   TOPの CONCEPT / PRODUCT と同じ全幅のバナーにするため、器を持たず自分で全幅になる
   （下の「galleryspots」の節）。

   **散らし写真（.tz-p-scatter）の幅もここでは決めない**（2026-08-25 / docs/11 §34 SCT-1）。
   混成ページ（CONCEPT など）の器は 900px なので、`100%` を基準にすると
   1140px に届かず 820px で頭打ちになる。自分でビューポートを基準に測る
   （下の「scatterphotos」の節）。 */
.tz-p-concept,
.tz-p-scatter,
.tz-p-exphotos {
	padding-block: var(--tz-p-section-pad);
}

.tz-p-concept > *,
.tz-p-exphotos > * {
	width: min(100% - var(--tz-p-page-gutter) * 2, var(--tz-p-container));
	margin-inline: auto;
}

/* ---------------------------------------------------------
   concept — 英字リード + キャッチ + 本文 + メイン写真
   --------------------------------------------------------- */

/* ページ見出し「Concept」は prelude-generic.php の h1 が出す。
   その直下に来るので、h1 と競合しないよう一段小さめに置く */
.tz-p-concept .tz-p-concept__en {
	margin-bottom: clamp(24px, 4vw, 40px);
	font-family: var(--tz-p-font-en);
	font-size: var(--tz-p-fs-en-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.08em;
	color: var(--tz-p-gray);
	text-align: center;
}

.tz-p-concept .tz-p-concept__lead {
	max-width: var(--tz-p-container-narrow);
	margin-inline: auto;
}

/* サイト共通のキャッチ token（最大39px）だと23文字がPC幅でも1行に収まらず
   「現代の / ラグジュアリーへ」と中途半端に折れる。上限は
   「23文字 x 字送り1.06em <= リード幅760px」から逆算した30pxに抑え、
   PC・タブレットは1行、SPだけ読点で2行に折れるようにする（CLAUDE.md 日本語の改行品質） */
.tz-p-concept .tz-p-concept__catch {
	font-size: clamp(1.25rem, 0.95rem + 1.5vw, 1.875rem);
	line-height: 1.8;
	letter-spacing: 0.06em;
	text-align: center;
}

/* 本文は左揃え。7行の文を中央揃えにすると行頭が揃わず日本語が読みにくくなる */
.tz-p-concept .tz-p-concept__body {
	margin-top: clamp(20px, 3.5vw, 32px);
	font-size: 0.9375rem;
	line-height: 2.4;
}

.tz-p-concept .tz-p-concept__visual {
	margin-top: clamp(40px, 7vw, 80px);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--tz-p-placeholder);
}

.tz-p-concept .tz-p-concept__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------
   scatterphotos — 画像バラバラ配置（2026-08-19 クライアント指示 / docs/11 GAL-1）

   参照: reference/taizan-tokyo-top の #top_img_parts
   （data-lib="43266" / data-lib-uuid="3874d0a6-e11b-4c40-b8bb-11d02c02e4f9"）。
   参照サイトのCSSコメントは「画像バラバラ配置_org」。

   7枚で1周する配置を :nth-child(7n-6) 〜 :nth-child(7n) がそのまま持つ。
   幅・縦横比・負のマージンはすべて参照サイトの実測値。8枚目からは同じ並びが続く
   （件数可変 / docs/05 §1 条件4）。

   参照サイトは html{font-size:62.5%}（1rem = 10px）なので、余白はpxに換算した
   （#top_img_parts の padding 0 0 18rem → 180px、768px以下 6rem → 60px）。
   --------------------------------------------------------- */

/* concept の直後に置くときは1つの構図として続けたいので、余白の二重取りをやめる */
.tz-p-concept + .tz-p-scatter {
	padding-top: 0;
}

.tz-p.tz-p-scatter {
	display: block;
	padding-bottom: 60px;
}

/* 幅は**編集画面の「配置」**で選ぶ（2026-08-25 クライアント指示 / docs/11 §34 SCT-1）。
   WordPress は theme.json の layout から、この帯（core/group）のツールバーに
   すでに「なし＝最大1140px ／ 幅広＝最大1400px ／ 全幅」を出していたが、
   **テーマ側にその見た目が無かった**ので、どれを選んでも器なりの幅のままだった。
   混成ページ（CONCEPT など）の器は 900px なので「なし」でも 820px で頭打ちになる。

   `100%`（＝器）ではなく**ビューポート**を基準に測り、器を抜けて中央にそろえる。
   `margin-inline` の `50%` は器の半分、`min(50vw - 逃げ, 上限/2)` は帯の半分なので、
   器がビューポートの中央にあるかぎり帯もビューポートの中央に来る
   （混成ページの `.l-container__inner` は左右 auto で中央。サイドバーは使っていない）。

   ★ 器（`.l-container__inner` の 900px）は広げないこと（docs/11 §23 GAL-5）。
     広げると同じページの他の帯まで巻き込む。
   ★ 上限は `--tz-p-scatter-max` の1トークンで決まる。既定は theme.json の
     contentSize と同じ 1140px なので、「配置」の表示（Max 1140px wide）と一致する。 */
.tz-p.tz-p-scatter {
	--tz-p-scatter-max: var(--tz-p-container);
	width: min(100vw - var(--tz-p-page-gutter) * 2, var(--tz-p-scatter-max));
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--tz-p-page-gutter), var(--tz-p-scatter-max) / 2));
}

/* 配置 → 幅広（theme.json の wideSize と同値） */
.tz-p.tz-p-scatter.alignwide {
	--tz-p-scatter-max: var(--tz-p-container-wide);
}

/* 配置 → 全幅。左右の逃げも取ってビューポートいっぱいにする
   （拠点 `.tz-p-spots` と同じ抜け方） */
.tz-p.tz-p-scatter.alignfull {
	width: auto;
	margin-inline: calc(50% - 50vw);
}

.tz-p-scatter .tz-p-scatter__item {
	/* 負のマージンで前の写真に食い込ませるので、重なり順を安定させる */
	position: relative;
}

.tz-p-scatter .tz-p-scatter__image {
	overflow: hidden;
	margin: 0;
	background: var(--tz-p-placeholder);
}

.tz-p-scatter .tz-p-scatter__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 7枚1組の配置（参照サイトの実測値そのまま） --- */
.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 6) {
	width: 50%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 6) .tz-p-scatter__image {
	aspect-ratio: 3 / 2;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 5) {
	width: 30%;
	margin-left: auto;
	margin-top: -10%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 5) .tz-p-scatter__image {
	aspect-ratio: 5 / 8;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 4) {
	width: 20%;
	margin-left: auto;
	margin-right: 25%;
	margin-top: -25%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 4) .tz-p-scatter__image {
	aspect-ratio: 2 / 3;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 3) {
	width: 35%;
	margin-left: 3%;
	margin-top: -20%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 3) .tz-p-scatter__image {
	aspect-ratio: 4 / 3;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 2) {
	width: 45%;
	margin-left: auto;
	margin-right: 10%;
	margin-top: -3%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 2) .tz-p-scatter__image {
	aspect-ratio: 5 / 4;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 1) {
	width: 40%;
	margin-top: -25%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n - 1) .tz-p-scatter__image {
	aspect-ratio: 1 / 1;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n) {
	width: 40%;
	margin-left: auto;
	margin-right: 5%;
	margin-top: -10%;
}

.tz-p-scatter .tz-p-scatter__item:nth-child(7n) .tz-p-scatter__image {
	aspect-ratio: 5 / 4;
}

.tz-p-scatter .tz-p-scatter__caption {
	margin-top: 0.7em;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	color: var(--tz-p-gray);
}

@media (min-width: 769px) {
	.tz-p.tz-p-scatter {
		padding-bottom: 180px;
	}
}

/* ---------------------------------------------------------
   scatterphotos の配置パターン（2026-08-22 クライアント指示 / docs/11 §22 GAL-3）

   議事録（2026-08-19）にあった「上揃え／段々／逆段々などのパターンを複数用意して
   管理画面から選択式に」を実装したもの。GAL-1 で採用セクションが確定したとき
   いったん1パターンに絞ったが、改めて選択式にする指示が出た。

   選ぶのは**投稿画面の右サイドバー**「写真の配置」（assets/js/editor-scatter-layout.js）。
   帯の外枠に付くクラスは4種類:
     （無印）              … バラバラ（既定。上の :nth-child(7n…) の配置がそのまま効く）
     .tz-p-scatter--top    … 上揃え
     .tz-p-scatter--stairs … 段々（左上から右下へ下がる）
     .tz-p-scatter--zigzag … 逆段々（左下から右上へ上がる）

   ■ 既定に印を付けていない理由
   すでに保存済みのページ（CONCEPT）は `tz-p tz-p-scatter` のまま入っている。
   既定を無印にしておけば**移行スクリプトが要らない**（開いた瞬間から選択式になる）。

   ■ 詳細度
   打ち消す相手は同じシートの上にある `:nth-child()` 付きの指定（最大 (0,4,0)）。
   ここは同じ (0,4,0) を後から書いて勝たせている。セレクタを短くすると
   バラバラ配置の幅・比率・負のマージンが残って重なるので、削らないこと。
   --------------------------------------------------------- */

/* --- 3パターン共通の土台（グリッドに組み替える） --- */
.tz-p.tz-p-scatter.tz-p-scatter--top,
.tz-p.tz-p-scatter.tz-p-scatter--stairs,
.tz-p.tz-p-scatter.tz-p-scatter--zigzag {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: clamp(12px, 3vw, 28px);
}

/* バラバラ配置の幅・食い込みを全部消す（`margin: 0` だけだと width が残る） */
.tz-p-scatter.tz-p-scatter--top .tz-p-scatter__item,
.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item,
.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item {
	width: auto;
	margin: 0;
}

/* 比率もそろえる（バラバラ配置は1枚ごとに違う比率だった） */
.tz-p-scatter.tz-p-scatter--top .tz-p-scatter__item .tz-p-scatter__image,
.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item .tz-p-scatter__image,
.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item .tz-p-scatter__image {
	aspect-ratio: 4 / 3;
}

/* --- 段々／逆段々の段差 ---
   段差は「列の位置」で決まる。列数が変わっても同じ書き方で済むよう、
   1段ぶんの高さを変数にしてある（--tz-scatter-step）。
   逆段々は同じ段差を逆順に当てるだけ（左が深く、右へ行くほど浅い）。 */
.tz-p-scatter.tz-p-scatter--stairs,
.tz-p-scatter.tz-p-scatter--zigzag {
	--tz-scatter-step: clamp(18px, 5vw, 56px);
}

/* SP（2列）: 左列は基準、右列を1段ぶん下げる／上げる */
.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item:nth-child(2n) {
	margin-top: var(--tz-scatter-step);
}

.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item:nth-child(2n - 1) {
	margin-top: var(--tz-scatter-step);
}

@media (min-width: 769px) {
	/* PCは3列。7枚なら 3 + 3 + 1 に並ぶ（枚数可変・docs/05 §1 条件4） */
	.tz-p.tz-p-scatter.tz-p-scatter--top,
	.tz-p.tz-p-scatter.tz-p-scatter--stairs,
	.tz-p.tz-p-scatter.tz-p-scatter--zigzag {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(20px, 2.5vw, 36px);
	}

	/* SP用（2列）の段差を打ち消してから3列ぶんを当て直す */
	.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item:nth-child(2n),
	.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item:nth-child(2n - 1) {
		margin-top: 0;
	}

	.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item:nth-child(3n - 1) {
		margin-top: var(--tz-scatter-step);
	}

	.tz-p-scatter.tz-p-scatter--stairs .tz-p-scatter__item:nth-child(3n) {
		margin-top: calc(var(--tz-scatter-step) * 2);
	}

	.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item:nth-child(3n - 2) {
		margin-top: calc(var(--tz-scatter-step) * 2);
	}

	.tz-p-scatter.tz-p-scatter--zigzag .tz-p-scatter__item:nth-child(3n - 1) {
		margin-top: var(--tz-scatter-step);
	}
}

/* ---------------------------------------------------------
   galleryspots — 拠点（TAIZAN表参道 / 移動式ギャラリー）

   2026-08-22 クライアント指示（docs/11 §22 GAL-4）で、TOPの
   「CONCEPT / TAIZAN BONSAIについて」＝**ページリンク帯と同じ2分割バナー**にした。

   骨格（40%の地色パネル + 60%の全面写真 / 見出し / 下線ボタン / 左右交互）は
   上の「ページリンク帯」の節がそのまま効く。パーツ側（inc/section-patterns/
   galleryspots.php）が `tz-p-pagelink*` のクラスも一緒に付けているため。
   **ページリンク帯を直すとこの帯も変わる**（同じ見た目を2か所に書かないための作り）。

   ここに残すのは拠点だけが持つもの（小見出し・住所の行）と、
   バナーとして成立させるための差分だけ。
   --------------------------------------------------------- */

/* 幅もTOPのCONCEPT/PRODUCTと同じ「画面いっぱい」にする（2026-08-22 / docs/11 §23 GAL-5）。

   TOPは器（`.l-container__inner`）自体がビューポート幅だが、GALLERYは混成ページで
   **器が 900px**（原本CSSの `.is-sidebar--none .l-container__inner{max-width:900px}`）。
   実測 1440px幅で 帯820px / 左右に310pxの余白 と、TOPの1440pxに対して明らかに細かった。

   器を広げるのではなく、**帯だけを器から抜けさせる**（器を広げると同じページの
   EXHIBITIONS まで一緒に広がってしまう）。やり方は原本のFVと同じ負のマージン
   （`original-fixes.css` [8]）。原本CSSが `html{overflow-x:hidden}` を持つので
   スクロールバーぶんのはみ出しも出ない。TOPのように器が既に全幅なら
   `50% - 50vw` は 0 になり**何も変わらない**。

   帯どうしの隙間と上下の余白は 0（TOPのCONCEPT→PRODUCTと同じく、
   バナーが隙間なく積み重なる見え方にそろえる）。 */
.tz-p.tz-p-spots {
	display: grid;
	gap: 0;
	width: auto;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding-block: 0;
}

/* 拠点の名前は日本語なので、pagelink の英字見出し（Abhaya Libre 50px）のままでは大きすぎる。
   書体と大きさだけ和文向けに戻す（配置・地色・左右交互はページリンク帯のまま） */
.tz-p-spots .tz-p-spot .tz-p-spot__name {
	margin: 0;
	font-family: var(--tz-p-font-body);
	font-size: var(--tz-p-fs-ja-mid);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.08em;
}

.tz-p-spots .tz-p-spot__label {
	margin: 0;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	color: var(--tz-p-stone);
	text-align: center;
}

/* 住所・営業時間。pagelink には無い行なので、文字列パネルの中央寄せに合わせる */
.tz-p-spots .tz-p-spot__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 2;
	color: var(--tz-p-ink);
	text-align: center;
}

/* 文字列パネルは項目数が拠点ごとに違う（住所なしの拠点もある）ので、
   pagelink の `gap: 25px` では空きすぎる。行間の詰めだけ上書きする。
   左右は器（`--tz-p-page-gutter`）ぶん空ける: 帯を全幅にしたぶん、
   パネルの中の文字が画面の端に寄りすぎないようにするため */
.tz-p-spots .tz-p-spot > .tz-p-pagelink__text {
	gap: 14px;
	padding-block: clamp(28px, 5vw, 48px);
	padding-inline: var(--tz-p-page-gutter);
}

/* クライアントが「＋」で足したブロックの既定の見た目（2026-08-22 / docs/11 §23 GAL-5）。

   パネルの中は自由にブロックを足せる（`inc/section-patterns/galleryspots.php` が
   `templateLock: false`）。足した段落には `tz-p-spot__text` のようなクラスが付かないので、
   素のままだと `.tz-p` の既定（16px / 行間1.6 / `text-align: start`）で
   **1行だけ左寄せ**になる。ここで既定値を配って、住所の行と同じ見え方にする。

   **セレクタ全体を `:where()` に入れて詳細度を0にしてある**。
   こうするとクラス付きの行（`.tz-p-spot__name` など (0,3,0)）は必ず勝ち、
   足したブロックにだけこの値が当たる。見出し（h2〜h6）の大きさには触らない
   （ブラウザ既定の大小をそのまま活かす。整えたい場合は右の「スタイル」から選べる）。 */
:where(.tz-p-spots .tz-p-spot > .tz-p-pagelink__text) > * {
	max-width: 100%;
	text-align: center;
}

:where(.tz-p-spots .tz-p-spot > .tz-p-pagelink__text) > :where(p, ul, ol, dl, figcaption) {
	font-size: 0.9375rem;
	line-height: 2;
}

/* リストは中黒が枠の外に出てしまうので、中身ごと中央に寄せる */
:where(.tz-p-spots .tz-p-spot > .tz-p-pagelink__text) > :where(ul, ol) {
	padding-inline-start: 1.4em;
	text-align: start;
}

/* 並びを**DOMの順番に依存させない**。
   拠点の帯は 2026-08-22 より前は「写真 → 文字」の順で保存されており、
   既存ページ（DBに入っている本文）はその順のまま残る。`order` で見た目の順を
   決めておけば、**既存ページはクラスを足すだけ**で新しい見た目になる
   （並べ替えの移行が要らない ＝ tools/migrate-galleryspots-2026-08-22.php が軽い）。 */
.tz-p-spots .tz-p-spot > .tz-p-pagelink__text {
	order: 1;
}

.tz-p-spots .tz-p-spot > .tz-p-pagelink__photo {
	order: 2;
}

@media (min-width: 768px) {
	/* 偶数番目は写真を左へ（ワイヤーの左右交互。件数が変わっても自動で交互になる。
	   pagelink の `--reverse` と同じ入れ替えを `order` で当てている） */
	.tz-p-spots .tz-p-spot:nth-child(even) > .tz-p-pagelink__text {
		order: 2;
	}

	.tz-p-spots .tz-p-spot:nth-child(even) > .tz-p-pagelink__photo {
		order: 1;
	}
}

/* ---------------------------------------------------------
   divider — 区切りのダークバー
   --------------------------------------------------------- */

.tz-p.tz-p-divider {
	height: clamp(40px, 7vw, 88px);
	background: var(--tz-p-dark);
}

/* ---------------------------------------------------------
   exhibitionphotos — 写真 + 国名キャプションのグリッド
   --------------------------------------------------------- */

.tz-p-exphotos .tz-p-exphotos__head {
	margin-bottom: clamp(24px, 4vw, 40px);
	text-align: center;
}

.tz-p-exphotos .tz-p-exphotos__en {
	font-family: var(--tz-p-font-en);
	font-size: var(--tz-p-fs-en-h2);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: var(--tz-p-gray);
}

.tz-p-exphotos .tz-p-exphotos__ja {
	margin-top: 0.6em;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	color: var(--tz-p-gray);
}

.tz-p-exphotos .tz-p-exphotos__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px);
}

/* 多数のサムネイルを並べる箇所なので、こちらは比率を揃えて切り抜く */
.tz-p-exphotos .tz-p-exphotos__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tz-p-placeholder);
}

.tz-p-exphotos .tz-p-exphotos__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tz-p-exphotos .tz-p-exphotos__label {
	margin-top: 0.7em;
	font-size: 0.875rem;
	line-height: 1.6;
	letter-spacing: 0.08em;
	text-align: center;
}

.tz-p-exphotos .tz-p-exphotos__note {
	font-size: 0.8125rem;
	color: var(--tz-p-gray);
	text-align: center;
}

@media (min-width: 768px) {
	.tz-p-exphotos .tz-p-exphotos__grid {
		grid-template-columns: repeat(3, 1fr); /* ワイヤーどおり3列 */
	}
}

/* ---------------------------------------------------------
   角丸ボタン（枠線だけ）— 原本の「商品ページ / お問い合わせ」ボタン
   実測: 140x41px / 角丸30px / 枠と文字 #858585 / 15px / 背景なし
   --------------------------------------------------------- */

.is-style-tz-pill .wp-block-button__link {
	display: inline-block;
	min-width: 140px;
	padding: 12px 24px;
	font-size: 15px;
	line-height: 15px;
	color: #858585;
	text-align: center;
	background-color: transparent;
	border: 1px solid #858585;
	border-radius: 30px;
	box-shadow: none;
}

/* ---------------------------------------------------------
   盆栽買取CTA（原本 band-22）

   実測（1280px）: 帯 padding 0 10px / カード 1140px・地色 #f1f1f1 /
   写真列 422px・写真 402x380 cover / 英字 Cormorant 103px 白（絶対配置・右上）/
   ラベル Abhaya Libre 26px 白（絶対配置・写真の上）/ リード 23px・下線 /
   本文 16px・行送り 38.4px・行送り補正 -11.2px / ボタン行 gap 20px / LINE 42x42
   --------------------------------------------------------- */

.tz-p.tz-p-recycle {
	/* 実測: 帯 = カード + 上下10px（原本は e-con-inner が持っている分） */
	padding: 10px var(--tz-p-gutter);
}

.tz-p-recycle .tz-p-recycle__card {
	position: relative; /* 白抜き文字2つの絶対配置の基準 */
	display: flex;
	flex-direction: column;
	max-width: 1140px;
	margin-inline: auto;
	gap: 20px; /* 実測: 写真とテキストのあいだ（SP・PC共通） */
	overflow: hidden; /* はみ出した英字を帯の中に収める（原本と同じ見え方） */
	background-color: #f1f1f1;
}

.tz-p-recycle .tz-p-recycle__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.tz-p-recycle .tz-p-recycle__photo img {
	width: 100%;
	height: 219px; /* SPの実測 */
	object-fit: cover;
}

/* 実測（375px）: 上下の逃げ 20px。見出し→本文 23.2px / 本文→ボタン行 11.2px */
.tz-p-recycle .tz-p-recycle__text {
	position: relative;
	padding: 20px;
}

/* 大きな英字。原本は絶対配置で、カードの上辺から少しはみ出して右へ抜ける */
.tz-p-recycle .tz-p-recycle__en {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--tz-p-font-display);
	font-size: 57px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-align: center;
	pointer-events: none; /* 下のテキストを選択できるように */
}

/* 「盆栽買取」の白い小ラベルは出さない（2026-08-26 クライアント指示 / docs/11 §47）。
   PC は原本が白地に白文字で置いていて元から見えていなかったが、SP は原本どおり
   写真の右下に重ねていたため「なぜか見えている」（しかも右端で切れる）状態だった。
   パーツはもう出力しない（inc/section-patterns/recycle.php）。ここで伏せるのは
   **保存済みのページに残っているぶん**のため（本文からの除去は inc/seed-sections.php の
   後入れ tz_backfill_recycle_label が行うが、管理画面を一度も開かないうちは残る）。
   `position: absolute` の装飾なので、消しても帯の高さは1pxも動かない */
.tz-p-recycle .tz-p-recycle__label {
	display: none;
}

/* 下線は**行ごとに1本**引く（2026-08-26 クライアント指示 / docs/11 §54）。
   原本（withers.jp band-22 / ff1e6af）は widget-container の border ＝「まとまりの下に1本」
   だが、クライアントの指示は「行ごとに1本ずつ」なので text-decoration で引く。

   折り返したときに**下線が次の行の字面へ食い込まない**ように、スマホの行送りを
   1.3（23.4px）→ 1.6（28.8px）へ広げる。字面の実測（Cormorant 18px / 「処分に悩んで〜」）は
   ベースラインから上へ 15.23px・下へ 1.48px なので:

     下線の上（自分の行の字面 → 下線） = 6 − 1.48       = 4.52px
     下線の下（下線 → 次の行の字面）   = 28.8 − 16.23 − 6 = 6.57px

   **下線の下 > 下線の上** ＝ 下線が自分の行に属して見える、が値の決め方。
   行送りだけ広げてオフセットを 12px のままにすると（23.4px では 3.84px 食い込んでいた）
   下線が次の行に寄って見えるので、オフセットも 12px → 6px にする。
   PC（1行）は原本のまま ─ 下の @media で行送り1・オフセット12px に戻す */
.tz-p-recycle .tz-p-recycle__lead {
	font-family: var(--tz-p-font-en);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.6; /* 28.8px。原本の 1.3（23.4px）では下線が次の行に食い込む */
	color: var(--tz-p-ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.tz-p-recycle .tz-p-recycle__body {
	/* 原本の <p> は行送り補正で上下 -8.4px の負マージンを持つが、ここでは
	   「見た目の間隔」を実測値でそのまま指定する（負マージンの相殺を当てにしない）。
	   リードの行送りを 1.3（23.4px）→ 1.6（28.8px）に広げたぶん、最後の行の字面の下にも
	   半分の 2.7px が増える。**見出しの字面 → 本文の字面**の距離を実測どおりに保つため、
	   増えた 2.7px をここから引く（23.2 − 2.7） */
	margin-top: 20.5px;
	font-family: var(--tz-p-font-en);
	font-size: 14px;
	line-height: 2.2;
	letter-spacing: -1.1px;
}

.tz-p-recycle .tz-p-recycle__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center; /* SPは中央寄せ（原本 elementor-mobile-align-center） */
	gap: 20px;
	height: 42px; /* 実測。ボタン41px + LINE42px を収める行 */
	margin-top: 11.2px; /* 実測の間隔 */
	line-height: 1;
}

.tz-p-recycle .tz-p-recycle__line img {
	width: 42px;
	height: 42px;
}

@media (min-width: 768px) {
	.tz-p-recycle .tz-p-recycle__card {
		flex-direction: row;
		align-items: stretch;
	}

	/* 実測の列: 写真 422 + 逃げ20 + テキスト 698 = カード 1140 */
	.tz-p-recycle .tz-p-recycle__card {
		gap: 20px;
	}

	.tz-p-recycle .tz-p-recycle__photo {
		flex: 0 0 37.02%;
	}

	.tz-p-recycle .tz-p-recycle__photo img {
		height: 380px;
	}

	/* 実測（1280px）: 上60 / 下50。見出し→本文 20px / 本文→ボタン行 8.7px */
	.tz-p-recycle .tz-p-recycle__text {
		flex: 1 1 auto;
		padding: 60px 0 50px;
	}

	.tz-p-recycle .tz-p-recycle__en {
		font-size: 103px;
	}

	/* PC は原本のまま（1行に収まる幅がある）。行送り1・下線は字面から 12px 下 */
	.tz-p-recycle .tz-p-recycle__lead {
		font-size: 23px;
		line-height: 1; /* 実測 23px */
		text-underline-offset: 12px; /* 原本の実測。SPの 6px を上書きする */
	}

	.tz-p-recycle .tz-p-recycle__body {
		margin-top: 20px; /* 実測の間隔（PCは行送りを変えていないのでそのまま） */
		font-size: 16px;
		line-height: 2.2; /* 実測 769px: 35.2px */
		letter-spacing: normal;
	}

	.tz-p-recycle .tz-p-recycle__actions {
		justify-content: flex-start;
		margin-top: 8.7px; /* 実測の間隔 */
	}
}

@media (min-width: 1280px) {
	/* 実測 1280px: 本文の行送りが 38.4px（769pxの 35.2px から広がる） */
	.tz-p-recycle .tz-p-recycle__body {
		line-height: 2.4;
	}
}

/* ---------------------------------------------------------
   再生プロセス Q&A（原本 band-03 / docs/10 工程I ③）

   原本はチェックボックス方式のアコーディオンを直書きしたHTMLウィジェット。
   コアブロック版は `<details>`（core/details）に置き換え、見え方はここで再現する。

   実測（1280px）: 帯 padding 60 / 90px・内容幅 1140px（375px は 355 / 769px は 749）/
   グループ 122.8px・下線 1px #707070 / 見出し 23px・行送り 1.3em・
   padding 30px 30px 30px 4.5em・色 #707070・太字 /
   番号 3em 斜体 #c4a568（ラベル上端から 45px。2026-08-26 に撤去）/ ＋アイコン 15×2px #707070（右 15px）/
   中身 padding 0 20px 20px / アイコン列 16.67%・テキスト列 33.33%（＝2組で1行）/
   項目見出し 20px・本文 16px・行送り 1.5em（375px は 16 / 14px、アイコン 150px）
   --------------------------------------------------------- */

.tz-p.tz-p-process {
	/* 原本の縦の逃げ = 帯 inner 10px + ウィジェット 20px/40px（SP）・50px/80px（PC） */
	--tz-p-process-font: var(--tz-p-font-mincho);

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px var(--tz-p-gutter) 50px;
}

.tz-p-process .tz-p-process__group {
	position: relative;
	width: 100%;
	/* 実測の内容幅: 375px→355 / 769px→749 / 1280px→1140 */
	max-width: min(100%, 1140px);
	font-family: var(--tz-p-process-font);
	font-size: 18px;
	border-bottom: 1px solid #707070;
}

/* 金色の番号（1/2/3/4）は 2026-08-26 クライアント指示で撤去した（docs/11 §38）。
   番号ぶんの左の逃げ（SP 2.5em / PC 4.5em）も一緒に外し、見出しは右と同じ 30px から始める。
   ※ 2026-08-19 の MIS-1「斜めじゃなければいい」＝ font-style: normal も一緒に退役 */

.tz-p-process .tz-p-process__group > summary {
	position: relative;
	/* 下だけ厚いのは、原本のラベルが「行送り23pxのstrut + 行送り1.3emのspan」の
	   二重構造で2行分 46.8→47.8px（SP）/ 59.8→61.8px（PC）になっているぶんの実測差
	   （負マージンの相殺は当てにせず、見た目の間隔を実測値でそのまま指定する方針） */
	padding: 30px 30px 31px;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
	color: #707070;
	list-style: none;
	cursor: pointer;
}

.tz-p-process .tz-p-process__group > summary::-webkit-details-marker {
	display: none;
}

/* 見出し2行目の日本語（原本の <small>。実測 18.4/23 = 14.4/18 = 0.8em） */
.tz-p-process .tz-p-process__group > summary small {
	font-size: 0.8em;
}

/* ＋ / − アイコン。閉じているときは縦棒が立って ＋、開くと寝て − になる */
.tz-p-process .tz-p-process__group > summary::before,
.tz-p-process .tz-p-process__group > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 15px;
	height: 2px;
	background: #707070;
	transform: translateY(-50%);
}

.tz-p-process .tz-p-process__group > summary::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.5s;
}

.tz-p-process .tz-p-process__group[open] > summary::after {
	transform: translateY(-50%) rotate(0deg);
}

/* 中身。原本の .contents（flex-wrap で「アイコン + テキスト」が2組ずつ1行） */
.tz-p-process .tz-p-process__items {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20px 20px;
	font-family: var(--tz-p-font-en);
}

.tz-p-process .tz-p-process__item {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.tz-p-process .tz-p-process__icon {
	flex: 0 0 100%;
	padding: 20px 10px;
	text-align: center;
}

.tz-p-process .tz-p-process__icon img {
	width: 150px;
	margin-inline: auto;
}

/* 原本 .item2 { margin: auto 0 }（アイコンの高さに対して縦中央） */
.tz-p-process .tz-p-process__text {
	flex: 0 0 100%;
	padding: 20px 10px;
	margin-block: auto;
	text-align: left;
}

.tz-p-process .tz-p-process__title {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.tz-p-process .tz-p-process__body {
	font-size: 14px;
	line-height: 1.5;
}

/* 原本の <button>（padding 10px 20px / 角丸30px / 枠 #9999 = rgba(153,153,153,.6)） */
.tz-p-process .tz-p-process__buttons {
	margin-top: 20px;
}

.tz-p-process .tz-p-process__buttons .wp-block-button__link {
	min-width: 0;
	padding: 10px 20px;
	font-size: 16px;
	color: var(--tz-p-ink);
	border-color: rgba(153, 153, 153, 0.6);
}

@media (min-width: 768px) {
	.tz-p.tz-p-process {
		padding: 60px var(--tz-p-gutter) 90px;
	}

	.tz-p-process .tz-p-process__group {
		font-size: 23px;
	}

	.tz-p-process .tz-p-process__group > summary {
		padding-bottom: 32px;
	}

	.tz-p-process .tz-p-process__item {
		width: 50%;
	}

	.tz-p-process .tz-p-process__icon {
		flex: 0 0 33.3333%;
	}

	.tz-p-process .tz-p-process__icon img {
		width: 200px;
	}

	.tz-p-process .tz-p-process__text {
		flex: 0 0 66.6667%;
	}

	.tz-p-process .tz-p-process__title {
		font-size: 20px;
	}

	.tz-p-process .tz-p-process__body {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------
   会社概要（表 + SNS）（原本 company / band-01 前半 / docs/10 工程K ①）

   実測（1280px）: 表 429.8px・中央寄せ / 見出し列 142px・地色 #f9f9f9 /
   内容列 #fff / セル padding 10px 15px / 行 border-bottom 1px #333 /
   文字 16px・行送り 32px / 表の下 32px /
   SNS 40×40・gap 20px・中央寄せ・上下 10px
   （375px は 表 337.4px・見出し列 114px・文字 12px・行送り 24px）
   --------------------------------------------------------- */

.tz-p.tz-p-companyprofile {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 原本の帯の縦の逃げ（実測: 帯の上端 → 表の上端が 375px で 50 / 1280px で 100）。
	   下側は「表の下端 → 実績見出しの上端 222px」を
	   62(表の下) + 60(SNS行) + 62(ここ) + 20(実績の上) + 10(見出しマージン) + 8(SNS行の余白) で作る */
	padding: 50px var(--tz-p-gutter) 62px;
}

/* 会社名（表の上の見出し）。参照元 taizan-tokyo は表の行ではなく見出しで出す
   （2026-08-19 クライアント指示 docs/11 NEW-2） */
.tz-p-companyprofile .tz-p-companyprofile__name {
	margin: 0 0 28px;
	font-family: var(--tz-p-font-en);
	font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.tz-p-companyprofile .tz-p-companyprofile__table {
	width: 100%;
	max-width: min(100%, 430px); /* 原本の実測幅。狭い画面では 100% に収まる */
	margin-inline: auto;
	margin-bottom: 62px;
}

.tz-p-companyprofile .tz-p-companyprofile__table table {
	width: 100%;
	/* 原本は `style="height:350px"` を素で持っており、余った高さを行に配分している
	   （1行あたり +7px ほど）。行を増やせば table の height は最小値として働くので、
	   件数可変にしたまま原本と同じ縦の見え方になる */
	min-height: 350px;
	border-collapse: collapse;
	font-size: 12px;
	line-height: 24px;
}

.tz-p-companyprofile .tz-p-companyprofile__table tr {
	border-bottom: 1px solid #333;
}

.tz-p-companyprofile .tz-p-companyprofile__table th,
.tz-p-companyprofile .tz-p-companyprofile__table td {
	padding: 10px 15px;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	vertical-align: middle;
	border: 0;
}

.tz-p-companyprofile .tz-p-companyprofile__table th {
	width: 114px;
	text-align: center;
	background-color: #f9f9f9;
	/* 項目名は語の途中で折らない（「店舗 / 本社所在地」が「…所在／地」と割れるのを防ぐ）。
	   参照元 taizan-tokyo は項目名が旧参照元より長いため、列幅も少し広げる
	   （2026-08-19 / docs/11 NEW-2） */
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.tz-p-companyprofile .tz-p-companyprofile__table th {
		width: 170px;
	}
}

.tz-p-companyprofile .tz-p-companyprofile__table td {
	text-align: start;
	background-color: #fff;
}

/* SNSアイコン。原本は LINE と Instagram の2つ（gap 20px・中央寄せ） */
.tz-p-companyprofile .tz-p-companyprofile__sns {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 10px;
}

.tz-p-companyprofile .tz-p-companyprofile__sns-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.tz-p.tz-p-companyprofile {
		padding-top: 100px; /* 実測: 帯の上端 → 表の上端 */
	}

	.tz-p-companyprofile .tz-p-companyprofile__table table {
		font-size: 16px;
		line-height: 32px;
	}

	.tz-p-companyprofile .tz-p-companyprofile__table th {
		width: 142px;
	}
}

/* ---------------------------------------------------------
   実績リスト（原本 company / band-01 後半 / docs/10 工程K ①）

   実測: 見出し 20px・行送り 30px・太字600・中央寄せ・上下 10px /
   箇条書き 16px・行送り 35.2px（1280px は 38.4px）・マーカー circle・左 20.8px
   --------------------------------------------------------- */

.tz-p.tz-p-achievements {
	/* 実測の間隔: 直前の箇条書きの下端 → 次の見出しの上端が 80px、
	   最後の箇条書きの下端 → 次の帯の上端が 50px。
	   20(上) + 50(下) + 見出しの margin 10 で両方を満たす */
	padding: 20px 20px 50px;

	/* 器（2026-08-24 クライアント指示「実績・ワークショップのインナーは
	   PCサイズでは1140px、タブレット以下は左右にpaddingをつけて100%表示」）。

	   このパーツは中に器を持つ要素が無く（見出し + 箇条書きの2つが直下にあるだけ）、
	   帯そのものに地色も持たないので、**帯＝器**として幅を持たせるのがいちばん短い。
	   `.tz-p` が `box-sizing: border-box; width: 100%` を持っているので、
	   max-width だけ足せば 1140px 以下では自動的に 100%（左右 20px の逃げ付き）になる。
	   メディアクエリを足さないのは、切り替え幅を1か所（この 1140px）に閉じるため。

	   company ページは原本DOMの器（.p-body）が全幅（実測 1280px で 1280px）なので、
	   ここを入れる前は箇条書きが画面いっぱいに伸びていた */
	max-width: 1140px;
	margin-inline: auto;
}

.tz-p-achievements .tz-p-achievements__heading {
	margin-block: 10px;
	font-family: var(--tz-p-font-mincho);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}

.tz-p-achievements .tz-p-achievements__list {
	/* 実測: 見出しの下端 → 箇条書きの上端が 31px（原本は 見出しの margin 10 + flex gap 20）。
	   こちらは通常フローなので見出しの margin-bottom と相殺される。相殺後の値をそのまま書く */
	margin-top: 31px;
	margin-left: 20.8px;
	font-size: 16px;
	line-height: 2.2; /* 実測 35.2px */
	list-style: circle outside;
}

.tz-p-achievements .tz-p-achievements__list li {
	margin: 0;
	padding: 0;
}

@media (min-width: 1280px) {
	/* 実測 1280px: 行送りが 38.4px に広がる（原本の本文と同じ挙動） */
	.tz-p-achievements .tz-p-achievements__list {
		line-height: 2.4;
	}
}

/* ---------------------------------------------------------
   事業紹介（参照元 taizan-tokyo.com /company の data-lib="43992"）

   ■ 2026-08-22 並べ方を参照元と突き合わせ直した
   旧参照元（withers.jp / company band-01）は**どの幅でも非表示**の帯で実寸が測れず、
   文字の指定だけ computed から取り、並べ方は同ページの他の帯に揃えていた。
   参照元が taizan-tokyo.com に変わって（docs/11 NEW-2）ページの主役になったので、
   reference/taizan-tokyo-top/company を実測して並べ方ごと合わせ直す。

   実測（[data-lib="43992"] / 1280px・768px）:
     帯      padding-top 0 / padding-bottom 20vh
     器      幅 88%（SP）→ 95%（769px〜）・max-width 1000px・中央寄せ
             ＝1280px で x=140・w=1000、768px で x=46・w=676（実測と一致）
     見出し  42px・行送り1・字送り.05em・中央、下に 90px（ttl_wrap 80 + span 10）
             SP は 7vw・下 60px
     一覧    flex + wrap / gap 30px（PC）・50px（SP）/ align-items: stretch
             ＝**行の中でカードの高さが揃い、余りはカードの下に残る**
     カード  幅 calc(50% - 15px)（PC）・100%（SP）／地 #fff ／縦積み
             （原本は column-reverse + order:-1 で結局「写真が上・文面が下」）
     写真    幅100%・アスペクト比 10/7・カードの上端いっぱい（周りに余白を作らない）
     文面    padding 50px（PC）・50px 30px（SP）／文字 #313131
     番号    20px・行送り1.8・字送り.09em・下10px
             ＋**右へ伸びる1pxの罫線**（原本 h3::after を flex-grow で余白いっぱいに）
     見出し  Hina Mincho 20px/400・行送り1.8・下 29px（原本 .-w-title 20px + h2 の 1vh=9px）
     本文    16px・行送り1.8
     リンク  中央寄せ・上 2vh・下線1px・padding-bottom 10px

   ■ 参照元と**わざと変えている**点
   ・文字サイズはSPでも上の値のまま。原本はSPだけ 5vw / max(4.8vw,23px) / max(3.7vw,20px) の
     ビューポート追従で、768px では本文20px・見出し36.9px と**PCより大きく**なる。
     サイト内の他パーツと桁が合わなくなるので、幅による揺れは持たせない
     （CLAUDE.md「本文の最小可読サイズを下回らせない」は16pxで満たす）
   ・リンクの矢印（is-style-tz-underline の ::after）は残す。サイト共通の下線リンクの作法で、
     原本の「下線だけ」に合わせるとこの帯だけ作法が変わる
   ・書体は現行のまま（原本は Shippori Mincho B1 / Zen Old Mincho。どちらも明朝で、
     テーマは同じ役割に --tz-p-font-mincho / Hina Mincho を持っている）
   ・カードの地色は #fff・文字は #313131（原本の実測値）。
     2026-08-24 クライアント指示「事業概要パーツの背景色は原本通り白で黒文字に」で、
     dark-theme.css [5] の面1（#141414）への反転をやめ、**この帯だけ原本のまま白いカード**に戻した。
     黒地の中で白いカードを保つための打ち消し（dark-theme の一括白文字を戻す）は
     dark-theme.css [16] が持つ（このシートは配色の打ち消しを持たない約束）
   --------------------------------------------------------- */

.tz-p.tz-p-businesses {
	/* 原本は padding-block: 100px 20vh を padding-top: 0 で上書きしている */
	padding: 0 0 20vh;
}

/* 器（原本の .-w-wrapper[data-w-width="1"]）。
   帯ではなく中身が幅を持つので、見出しと一覧の両方に同じ器を与える */
.tz-p-businesses .tz-p-businesses__heading,
.tz-p-businesses .tz-p-businesses__list {
	width: 88%;
	max-width: 1000px;
	margin-inline: auto;
}

/* 「事業概要」の見出し（2026-08-19 / docs/11 NEW-2）。
   参照元 taizan-tokyo は一覧の上に英字見出しと同じ字面で置く */
.tz-p-businesses .tz-p-businesses__heading {
	/* 原本は 768px で 7vw（=53.8px）とPCの42pxを追い越す。上限を42pxで止める */
	margin-bottom: 60px;
	font-family: var(--tz-p-font-en);
	font-size: clamp(26px, 7vw, 42px);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	text-align: center;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.tz-p-businesses .tz-p-businesses__list {
	display: flex;
	flex-wrap: wrap;
	/* 行の中でカードの高さを揃える（原本の見た目の要。余りはカードの下に残る） */
	align-items: stretch;
	gap: 50px;
}

.tz-p-businesses .tz-p-businesses__item {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
}

.tz-p-businesses .tz-p-businesses__figure {
	width: 100%;
}

.tz-p-businesses .tz-p-businesses__figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 10 / 7;
	object-fit: cover;
}

.tz-p-businesses .tz-p-businesses__text {
	padding: 50px 30px;
	color: #313131; /* 白いカードの上の文字（原本の実測） */
}

.tz-p-businesses .tz-p-businesses__number {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-family: var(--tz-p-font-mincho);
	font-size: 20px;
	letter-spacing: 0.09em;
	line-height: 1.8;
}

/* 番号の右へ伸びる罫線（原本 .-w-contents h3.-w-general::after）。
   文字色に追従させる（dark-theme が文字を白にすると罫線も白になる） */
.tz-p-businesses .tz-p-businesses__number::after {
	content: "";
	flex: 1 1 auto;
	margin-left: 1em;
	border-bottom: 1px solid currentColor;
}

.tz-p-businesses .tz-p-businesses__title {
	margin-bottom: 29px;
	font-family: "Hina Mincho", var(--tz-p-font-en);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.8;
	/* 原本（参照元 43992）の項目名は `h2.-w-general { letter-spacing: 0 }` で字送りを持たない。
	   ここを書かずに置くと、company の原本DOMが埋め込んでいる <style>
	   （parts/sections-original/raw/company/band-04.php の `.p-body h3 { letter-spacing: .2em }`）が
	   そのまま当たり、**20px × .2em = 4px** 空いていた（2026-08-24 クライアント指摘・実測）。
	   `.p-body h3`(0,1,1) より詳細度が高いのでここの1行で戻せる（!important は要らない）。
	   番号（__number）の .09em は原本にある指定なのでそのまま残す */
	letter-spacing: normal;
}

.tz-p-businesses .tz-p-businesses__body {
	font-family: var(--tz-p-font-mincho);
	font-size: 16px;
	line-height: 1.8; /* 実測 28.8px */
}

.tz-p-businesses .tz-p-businesses__buttons {
	/* コアの .wp-block-buttons は flex だが、載せる先に依存しないよう自分で持つ */
	display: flex;
	justify-content: center;
	margin-top: 2vh;
}

.tz-p-businesses .tz-p-businesses__buttons .wp-block-button__link {
	padding: 0 0 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
}

/* 原本の切り替えは 768/769px（max-width: 768px のメディアクエリ） */
@media (min-width: 769px) {
	.tz-p-businesses .tz-p-businesses__heading,
	.tz-p-businesses .tz-p-businesses__list {
		width: 95%;
	}

	.tz-p-businesses .tz-p-businesses__heading {
		margin-bottom: 90px;
	}

	.tz-p-businesses .tz-p-businesses__list {
		gap: 30px;
	}

	.tz-p-businesses .tz-p-businesses__item {
		width: calc(50% - 15px);
	}

	.tz-p-businesses .tz-p-businesses__text {
		padding: 50px;
	}
}

/* ---------------------------------------------------------
   お問い合わせフォーム（原本 contact / band-01 / docs/10 工程K ②）

   原本はこのCSSを contact ページの**生バンドにインライン**で持っていた（band-03 の <style>）。
   それだとフォームを別ページに置けない（docs/05 §1 条件3）ので、ここへ移して
   `.tz-p-contactform` の中に閉じた。値は原本のインラインCSSと実測のまま。

   実測（1280px）: 帯 padding 80/50px + 左右10px / 内容の左右にさらに24px /
   リード文 14px・行送り 33.6px（375px は 30.8px）・段落間 15px /
   フォーム最大幅 900px・中央寄せ / ラベル 14px / 入力欄 padding .5em 1em・枠 1px #ccc /
   「必須」バッジ 36px・#b30024・11px / 各行の下 20px / 送信行の上 3em /
   送信ボタン 225×48・#333・白文字
   --------------------------------------------------------- */

.tz-p.tz-p-contactform {
	/* 原本: 帯 padding 30px 10px（SP）/ 80px 10px 50px（PC）+ 内側の逃げ 24px */
	padding: 30px calc(var(--tz-p-gutter) + 24px);
	font-family: var(--tz-p-font-mincho);
	font-size: 14px;
}

.tz-p-contactform .tz-p-contactform__lead {
	margin-bottom: 15px;
	font-size: 14px;
	line-height: 2.2; /* 実測 30.8px */
}

.tz-p-contactform .tz-p-contactform__form {
	margin-top: 20px;
}

/* --- ここから下は CF7 が出すマークアップ（原本と同じクラス構成）に当てる --- */

.tz-p-contactform .form__wrap {
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	font-size: 16px;
}

.tz-p-contactform .form__wrap p {
	margin-bottom: 0;
	font-size: 14px;
}

.tz-p-contactform .form__wrap a {
	color: inherit;
	text-decoration: underline;
	transition: opacity 0.25s;
}

.tz-p-contactform .form__wrap a:hover {
	opacity: 0.5;
}

.tz-p-contactform .form__row {
	margin: 0;
	padding: 0;
}

.tz-p-contactform .form__label,
.tz-p-contactform .form__body {
	margin: 0;
	padding: 0;
}

.tz-p-contactform .form__body {
	margin-bottom: 20px;
}

/* 原本どおり label はインライン。ブロックにすると「必須」バッジが行の右端まで飛ぶ */
.tz-p-contactform .form__label label {
	position: relative;
	display: inline;
	margin: 0;
	padding: 0;
}

.tz-p-contactform .form__label.is-required label {
	padding-right: 40px;
}

/* 赤い「必須」バッジ（原本の実測: 36px幅・#b30024・11px） */
.tz-p-contactform .form__label.is-required label::after {
	content: "必須";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 36px;
	margin-top: -5px;
	padding: 0 5px;
	font-size: 11px;
	color: #fff;
	text-align: center;
	background-color: #b30024;
}

.tz-p-contactform .form__row.row-privacy,
.tz-p-contactform .form__row.row-submit {
	text-align: center;
}

.tz-p-contactform .form__row.row-submit {
	margin-top: 3em;
}

.tz-p-contactform input[type="text"],
.tz-p-contactform input[type="tel"],
.tz-p-contactform input[type="email"],
.tz-p-contactform input[type="url"],
.tz-p-contactform input[type="date"],
.tz-p-contactform input[type="number"],
.tz-p-contactform select,
.tz-p-contactform textarea {
	width: 100%;
	margin: 0;
	padding: 0.5em 1em;
	font: inherit;
	font-size: 14px;
	color: inherit;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 0;
	box-shadow: none;
	appearance: none;
}

.tz-p-contactform select {
	width: auto;
	max-width: 100%;
	background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

.tz-p-contactform input::placeholder,
.tz-p-contactform textarea::placeholder {
	color: #ccc;
}

.tz-p-contactform input:focus,
.tz-p-contactform select:focus,
.tz-p-contactform textarea:focus {
	outline: 0;
	border: 1px solid #080808;
}

.tz-p-contactform textarea {
	min-height: 240px;
}

.tz-p-contactform input[type="submit"] {
	width: 225px;
	max-width: 100%;
	padding: 8px;
	font-family: inherit;
	font-size: 14px;
	color: #fff;
	background-color: #333;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: opacity 0.25s;
}

.tz-p-contactform input[type="submit"]:hover {
	opacity: 0.7;
}

/* CF7 が無い環境で管理者にだけ出す案内 */
.tz-p-contactform .tz-p-contactform__notice {
	padding: 20px;
	font-size: 14px;
	text-align: center;
	background-color: #f6f6f6;
}

@media (max-width: 768px) {
	/* 原本: SPではラジオ・チェックの選択肢を縦に積む */
	.tz-p-contactform span.wpcf7-list-item {
		display: block;
	}
}

@media (min-width: 768px) {
	.tz-p.tz-p-contactform {
		padding-block: 80px 50px;
	}

	.tz-p-contactform .tz-p-contactform__lead {
		line-height: 2.4; /* 実測 33.6px */
	}
}

/* ---------------------------------------------------------
   納品・ディスプレイ実績（原本 casestudy / band-01 / docs/10 工程K ③）

   原本は Elementor の `e-grid` だが、列数を決めるページCSSが保存原本に無く、
   375px で列が潰れてページに横スクロール 358px が出ていた（既知バグ）。
   グリッドをここで持つことで解消する。

   写真は縦長（819×1024）と横長（1024×740）が混在するので 4:5 に切り抜いて揃える。
   列数は SP1列 / 768px以上2列 / 1280px以上3列（件数可変・docs/05 §1 条件4）
   --------------------------------------------------------- */

.tz-p.tz-p-pastworks {
	padding: 30px var(--tz-p-gutter) 50px;
}

.tz-p-pastworks .tz-p-pastworks__en {
	margin-bottom: 10px;
	font-family: var(--tz-p-font-display);
	font-size: 31px;
	font-weight: 600;
	line-height: 1;
	color: var(--tz-p-stone);
	text-align: center;
}

.tz-p-pastworks .tz-p-pastworks__lead {
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 2;
	text-align: center;
}

/* 写真だけのグリッドなので、SPも2列にする（1列だと18件で縦12,000px を超えて実用にならない）。
   その他展示実績（.tz-p-exphotos）と同じ列数の決め方に揃えている */
.tz-p-pastworks .tz-p-pastworks__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 24px);
	max-width: 1140px;
	margin-inline: auto;
}

.tz-p-pastworks .tz-p-pastworks__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tz-p-pastworks .tz-p-pastworks__image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.tz-p-pastworks .tz-p-pastworks__title {
	font-family: var(--tz-p-font-mincho);
	font-size: 17px; /* 原本の作品名の実測 */
	font-weight: 400;
	line-height: 1.6;
}

.tz-p-pastworks .tz-p-pastworks__place {
	font-family: var(--tz-p-font-mincho);
	font-size: 13px; /* 原本の納入先の実測 */
	line-height: 1.6;
	color: #555;
}

@media (min-width: 768px) {
	.tz-p.tz-p-pastworks {
		padding-block: 60px 80px;
	}

	.tz-p-pastworks .tz-p-pastworks__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------
   流れるテキスト（2026-08-19 クライアント指示 / docs/11 NEW-1）

   参照: reference/taizan-tokyo-top の data-lib="43398"
   （data-lib-uuid="916d0158-9f02-4b33-8540-a9e5325044c3"）。

   参照サイトは html{font-size:62.5%}（1rem = 10px）なので、実測値をpxに換算して移植:
     帯の上下余白  30rem → 300px（768px以下 17rem → 170px）
     写真          max-width 480px・中央に絶対配置（768px以下 58%）
     流れる文字    100px（768px以下 50px）/ 間隔 50px（同 40px）
     書体          "Anton", sans-serif / weight 400（原本どおり。下の [書体] を参照）
     アニメーション linear infinite（速さは --tz-p-flowtext-speed ＝ px/秒）
   色は #fff + mix-blend-mode: difference。写真に重なった部分だけ反転して見える。

   ■ 文言は「1本書けば自動でくり返す」（2026-08-26 クライアント指摘）
   投稿本文に入るのは**クライアントが書いた文言だけ**。画面を埋める複製と、
   継ぎ目なく戻るための後半のコピーは inc/flowtext.php が描画時に作り、
   実測に合わせた微調整（幅が足りなければ足す・秒数を出す）は
   assets/js/flowtext.js が行う。編集画面では複製も動きも無し（下の [編集画面]）。
   --------------------------------------------------------- */

.tz-p.tz-p-flowtext {
	position: relative;
	display: block;
	padding: 170px 0;
	overflow: hidden;

	/* [速さ] px/秒。**ここが唯一の速さの入力**（2026-08-26）。
	   秒数は assets/js/flowtext.js が「半周の実測幅 ÷ この値」で出して
	   `--tz-p-flowtext-duration` にインラインで書き込む。
	   こう置くと**文言を書き換えても速さが変わらない**（長い文言にしたら
	   そのぶん1周が長くなるだけ）。

	   値は原本の実測（2026-08-22 / docs/11 §26）:
	     原本は `left: 0 → var(--left-pos)` で -5302.5px を 40s ＝ **132.6px/秒**。
	     その -5302.5px は帯の幅の**半分**（同じ文言6本のうち3本ぶん）＝
	     継ぎ目なく先頭へ戻れる位置で、つまり原本も「半分だけ流して戻す」作り。
	   768px以下は文字が半分（100px → 50px）なので、見た目の速さを合わせて半分にする。 */
	--tz-p-flowtext-speed: 67.4;

	/* JSが動かないときの秒数（＝既定の文言・半周3本ぶんの実測に一致）。
	   375px: 2696px / 67.4 = 40.0s ／ 1280px: 5301px / 132.6 = 40.0s。
	   どちらの幅でも 40s になるので1つの値でよい */
	--tz-p-flowtext-duration: 40s;
}

/* 中央の写真。帯の高さは padding が決めるので、写真は絶対配置で中央に置く */
.tz-p-flowtext .tz-p-flowtext__image {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 58%;
	margin: 0;
	transform: translate(-50%, -50%);
}

.tz-p-flowtext .tz-p-flowtext__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 文字の帯。**同じ並びを2つつなげて、その半分だけ流す**（2026-08-26）。
   後半が前半の居た場所へぴったり収まるので、1周しても文字が途切れない。

   2026-08-19〜08-26 は文言6本を1並びとして `translateX(-100%)`＝帯の幅まるごと
   流していた。これだと後ろに続きが無いので、1周の終わりで帯が右から順に空になり、
   最後は**まっさらになってから先頭へ飛ぶ**（実測で 1280px は 80秒のうち最後の9.7秒、
   375px は5.6秒が欠けていた ＝ クライアント指摘「途中できれてしまっている」）。

   後半（と、前半の2本目以降）は inc/flowtext.php が描画時に複製する。
   投稿本文に入っているのは**クライアントが書いた文言だけ**なので、
   同じ文を6回書き直す必要はない。 */
.tz-p-flowtext .tz-p-flowtext__track {
	position: relative;
	display: flex;
	gap: 40px;
	width: max-content;
	padding-right: 40px;
	animation: tz-p-flowtext-scroll var(--tz-p-flowtext-duration, 40s) linear infinite;
}

.tz-p-flowtext .tz-p-flowtext__text {
	margin: 0;
	width: max-content;
	white-space: nowrap;

	/* [書体] 原本と同じ Anton（2026-08-22 クライアント指示）。
	   サイト共通の英字フォント（--tz-p-font-en）ではなく、この帯だけ原本の書体を使う。
	   `!important` が要るのは client-tweaks.css [1-B] の網
	   （`body :is(p, …){font-family:var(--tz-font-canon)!important}`）に勝つため。
	   あちらは詳細度 (0,0,2) なので、クラス2つ (0,2,0) のこの指定が勝つ
	   （[1-C] のアイコン例外と同じ理屈）。Webフォントは inc/patterns.php の
	   tz_enqueue_core_pattern_styles() が `tz-font-anton` で読む */
	font-family: "Anton", sans-serif !important;
	font-size: 50px;
	font-weight: 400;
	line-height: 1.2;
	color: #fff;
	mix-blend-mode: difference;
}

/* 半分（＝後半の先頭が前半の先頭の位置に来るところ）まで流して戻る。
   トラックは前半・後半が**同じ内容**なので、戻った瞬間の画面は1フレーム前と同じになる */
@keyframes tz-p-flowtext-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (min-width: 769px) {
	.tz-p.tz-p-flowtext {
		padding: 300px 0;
	}

	.tz-p-flowtext .tz-p-flowtext__image {
		max-width: 480px;
	}

	.tz-p-flowtext .tz-p-flowtext__track {
		gap: 50px;
		padding-right: 50px;
	}

	.tz-p-flowtext .tz-p-flowtext__text {
		font-size: 100px;
	}

	/* 文字が倍（50px → 100px）なので、見た目の速さを合わせて px/秒も倍にする */
	.tz-p.tz-p-flowtext {
		--tz-p-flowtext-speed: 132.6;
	}
}

/* 動きを減らす設定の端末では流さない（WCAG 2.3.3 / OSの「視差効果を減らす」） */
@media (prefers-reduced-motion: reduce) {
	.tz-p-flowtext .tz-p-flowtext__track {
		animation: none;
	}
}

/* [編集画面] 2026-08-26 クライアント指摘「編集しづらい」
   キャンバスでは**流さない**。流れたままだと文字を追いかけてクリックすることになり、
   狙った文言を選べない（使い方ガイドのレッスンも、押せないので
   わざわざリスト表示から選ばせていた）。
   複製もしない（複製するのは描画時＝inc/flowtext.php だけ）ので、
   ここに見えている文言がそのまま保存される内容になる。 */
.editor-styles-wrapper .tz-p-flowtext {
	/* 文字の大きさはフロントと同じなので、長い文言は帯からはみ出す。
	   編集中だけ横に送れるようにして行末まで確かめられるようにする
	   （フロントは overflow: hidden のまま） */
	overflow-x: auto;
}

.editor-styles-wrapper .tz-p-flowtext .tz-p-flowtext__track {
	animation: none;

	/* 文言を増やしたとき、2本目以降が帯の外に出て触れなくならないように
	   編集中だけ縦に積む（フロントは1行に並べて流す）。
	   ブロックエディタの入力欄は `white-space: pre-wrap` なので、
	   1本が長いときはキャンバスの幅で折り返して全文が見える（フロントは1行のまま） */
	width: auto;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------
   展示実績（2026-08-19 クライアント指示 / docs/11 ACH-1）

   原本 top / band-21 は全幅非表示で、ONにしても素の <ul> しか出なかった。
   クライアント指示により **原本 top / band-05（Our Works）と同じカード構成**にする。

   原本 Our Works の実測: h2 + 直下に 140px の罫線（border: 1px solid #636363）
   + 3カード（写真 / Title・品番 / 仕様テキスト / 「商品ページ」ボタン）。
   罫線はブロックを増やさずに済むよう見出しの ::after で出す。

   2026-08-22 クライアント指示: **並べ方も原本と同じにする**。
   3列のカード並びをやめ、原本と同じ「1枚 = 横1行」に作り替えた。

   ■ 原本 band-05 の実測（1140px の器 / reference/original-site/top）
     - 写真は器の外へ 100px はみ出す大判（原本は画像ウィジェットに margin-left:-120px。
       器の内側 10px と相殺して実質 100px）。幅 738px = 56% + はみ出し分 / 高さ 500px 固定・
       object-fit: cover・object-position: left center・影 20px 20px 10px rgba(0,0,0,.5)
     - 文字（Title / 仕様 / ボタン）は写真の横に幅 398px ≒ 36%、**上下中央**
       （原本 --justify-content:center）
     - **2枚目だけ左右反転**（原本 --flex-direction:row-reverse）。以降は交互にする
     - SPは写真 280×195px を中央寄せにして縦積み

   ■ 原本と意図して変えた点
     - はみ出しは 120px → 100px。原本は 1280px 幅で**横スクロールが 30px 出る**
       （実測 scrollWidth 1310）。帯を overflow-x: clip にして画面の外へは出さない
     - SPの写真は原本の 280×195px 固定をやめ、器いっぱい（比率は原本と同じ 280:195）に。
       CLAUDE.md「画像は width:100% で可変に」

   ■ DOMは変えていない（写真 / 見出し / 本文 / ボタンの平置きのまま）。
     写真だけ position:absolute で左（偶数枚目は右）の列に置き、文字は残りの余白に流す。
     入れ物 __grid の templateLock は外したままなので**件数は可変**で、
     増やしても減らしても偶数枚目が右写真になるだけで崩れない
   --------------------------------------------------------- */

.tz-p.tz-p-exhibition {
	/* 大判写真の高さ（原本 500px） */
	--tz-works-h: 500px;
	/* 写真が器の外へはみ出す量（原本 -120px 相当） */
	--tz-works-bleed: 100px;
	/* 文字列の幅（原本 1140px の器で 398px） */
	--tz-works-text: 36%;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60px var(--tz-p-gutter);
	/* はみ出した写真を画面の外まで出さない（横スクロールを作らない / CLAUDE.md）。
	   `hidden` ではなく `clip` にするのは、縦方向を visible のままにするため
	   （`hidden` だと縦が auto になり、スクロール連動のフェードが別スクローラ扱いになる） */
	overflow-x: clip;
}

.tz-p-exhibition .tz-p-exhibition__heading {
	margin: 0;
	font-family: var(--tz-p-font-display);
	font-size: clamp(1.75rem, 5vw, 2.5rem);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: center;
}

/* 原本の <div class="hr">（幅140px・#636363）に相当する罫線 */
.tz-p-exhibition .tz-p-exhibition__heading::after {
	content: "";
	display: block;
	width: 140px;
	max-width: 100%;
	margin: 24px auto 0;
	border-top: 1px solid var(--tz-p-rule, #636363);
}

.tz-p-exhibition .tz-p-exhibition__grid {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 5vw, 40px);
	width: 100%;
	max-width: 1140px;
	margin-top: clamp(32px, 5vw, 56px);
}

.tz-p-exhibition .tz-p-exhibition__item {
	display: flex;
	flex-direction: column;
}

/* 写真。SPは縦積みの1枚目（原本は 280×195px を中央寄せ。比率だけ借りて幅は可変にする） */
.tz-p-exhibition .tz-p-exhibition__image {
	margin: 0;
	overflow: hidden;
	background: var(--tz-p-placeholder);
	aspect-ratio: 280 / 195;
	/* 原本の影。黒地では見えないが、地色を変えたときに原本と同じになる。
	   写真を切り抜く overflow:hidden に潰されないよう **図版側**に置く */
	box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.5);
}

.tz-p-exhibition .tz-p-exhibition__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 原本の object-position。横長の写真は左側を残す */
	object-position: left center;
}

.tz-p-exhibition .tz-p-exhibition__title {
	margin: 1.2em 0 0;
	font-family: var(--tz-p-font-en);
	/* 原本 SP 21px / PC 27px */
	font-size: clamp(1.3125rem, 1.05rem + 1.1vw, 1.6875rem);
	font-weight: 600;
	line-height: 1.4;
}

.tz-p-exhibition .tz-p-exhibition__body {
	margin: 0.8em 0 0;
	font-family: var(--tz-p-font-en);
	/* 原本 SP 14px / PC 16px */
	font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
	line-height: 2.2;
}

/* `margin-top: auto` は3列カード時代に高さを揃えるためのもの。
   横1行になった今は**文字のまとまりを上下中央に置く**（下記 justify-content）ので、
   下端へ押しやると中央から外れる */
.tz-p-exhibition .tz-p-exhibition__buttons {
	margin-top: 1.4em;
}

@media (min-width: 768px) {
	.tz-p.tz-p-exhibition {
		padding: 80px var(--tz-p-gutter);
	}

	/* 1枚 = 横1行。写真は絶対配置で左の列を占め、文字は右の余白に上下中央で流す。
	   外側の 10px は原本の文字コンテナの padding（器がいっぱいの幅のとき、
	   文字が画面の端に貼り付かないための逃げ） */
	.tz-p-exhibition .tz-p-exhibition__item {
		position: relative;
		justify-content: center;
		min-height: var(--tz-works-h);
		padding-left: calc(100% - var(--tz-works-text));
		padding-right: var(--tz-p-gutter);
	}

	/* 偶数枚目は左右反転（原本 band-05 の2枚目 = row-reverse） */
	.tz-p-exhibition .tz-p-exhibition__item:nth-child(even) {
		padding-left: var(--tz-p-gutter);
		padding-right: calc(100% - var(--tz-works-text));
	}

	.tz-p-exhibition .tz-p-exhibition__image {
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(-1 * var(--tz-works-bleed));
		width: calc(56% + var(--tz-works-bleed));
		/* 高さは上下の指定で決まるので、SP用の比率固定は外す */
		aspect-ratio: auto;
	}

	.tz-p-exhibition .tz-p-exhibition__item:nth-child(even) .tz-p-exhibition__image {
		left: auto;
		right: calc(-1 * var(--tz-works-bleed));
	}

	.tz-p-exhibition .tz-p-exhibition__title {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------
   空間ディスプレイ・オーダーメイド（原本 top / band-11。2026-08-28 クライアント指示 / docs/11 §59）

   原本は Elementor の縦並びコンテナ（要素の間 20px）に
   区切り線 → 見出し → 過去の実績リンク → 区切り線 → 流れ図の見出し → 流れ図 → 注意書き
   の順で並ぶ。コアブロック版も同じ並びの group（flex 縦・gap 20px）で組む。
   流れ図（tz/orderflow）は自分の <style> を持っているので、ここでは幅だけ配る。

   実測（1280px）: 帯 padding 80/10/10/10・内容幅 1140 / 区切り線 1px（上下 15px の逃げ）/
   見出し 39px・600・行送り1・中央 / リンク 22px・600・下線・器の上下 −7px /
   流れ図の見出し 23px・600・下 25px / 注意書き 12px・行送り 1.8・「※」・中身の幅で中央。
   767px以下: 帯 20/10/0・区切り線の逃げ 5px・見出し 20px・行送り 1.3 /
   リンク 15px・行送り 1.3・上下 −11px / 流れ図の見出し 16px・下 0。
   帯の高さは 375 / 768 / 1280px で 591.2 / 561.6 / 522.6px（tz/order と同値）。
   --------------------------------------------------------- */
.tz-p.tz-p-order {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 80px var(--tz-p-gutter) 10px;
	font-family: var(--tz-p-font-mincho);
	font-size: 16px;
	line-height: 1;
	color: var(--tz-p-ink);
	text-align: center;
}

/* 原本の e-con-inner（1140px・中央）。中に置いたどのブロックも同じ幅に収める
   （クライアントが足したブロックも同じ器に入る） */
.tz-p-order > * {
	width: 100%;
	max-width: 1140px;
}

/* 区切り線。コアの separator は既定で幅100px・不透明度0.4・下ボーダー2px（wp-block-library）
   なので全部打ち消し、原本の「1pxの線 + 上下15pxの逃げ」にする。
   逃げは margin で持つ（padding にすると線が箱の上端に寄る）。色は dark-theme.css [18] */
.tz-p-order .tz-p-order__rule {
	flex: none;
	height: 0;
	margin: 15px 0;
	border: 0;
	border-top: 1px solid var(--tz-p-rule);
	background: none;
	opacity: 1;
}

.tz-p-order .tz-p-order__heading {
	font-size: 39px;
	font-weight: 600;
	line-height: 1;
}

/* 過去の実績リンク。原本は h2（22px）の中の <a><u>。器の上下が −7px なので
   前後の要素との間隔は 20 − 7 = 13px になる */
.tz-p-order .tz-p-order__link {
	margin-block: -7px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1;
}

.tz-p-order .tz-p-order__link a {
	color: inherit;
	text-decoration: underline;
}

.tz-p-order .tz-p-order__flow-heading {
	margin-bottom: 25px; /* 原本の器の下 25px。流れ図との間は 20 + 25 = 45px */
	font-size: 23px;
	font-weight: 600;
	line-height: 1;
}

/* 注意書き。原本の <ul class="notes2"> と同じ「※」の箇条書き。
   器（原本は align-self:center のウィジェット）は中身の幅で中央に置き、入りきらなければ全幅。
   混成ページの原本CSS `.p-body ul{margin-left:1.3em;list-style:circle}` (0,1,1) より
   詳細度を上げてある (0,2,0) */
.tz-p-order .tz-p-order__notes {
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 12px;
	line-height: 1.8;
	list-style: none;
	text-align: left;
}

.tz-p-order .tz-p-order__notes li {
	position: relative;
	margin: 0;
	padding: 0 0 0 1.5em; /* マーカー分の余白 */
}

.tz-p-order .tz-p-order__notes li::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}

@media (max-width: 767px) {
	.tz-p.tz-p-order {
		padding: 20px var(--tz-p-gutter) 0;
	}

	.tz-p-order .tz-p-order__rule {
		margin: 5px 0;
	}

	.tz-p-order .tz-p-order__heading {
		font-size: 20px;
		line-height: 1.3;
	}

	/* 原本の器は上下 −11px だが、器の高さ（19.5 − 22 < 0）が 0 に切り詰められるぶん
	   下だけ 2.5px 広い（実測: 上 9px / 下 11.5px）。同じ位置にするため下は −8.5px */
	.tz-p-order .tz-p-order__link {
		margin-block: -11px -8.5px;
		font-size: 15px;
		line-height: 1.3;
	}

	.tz-p-order .tz-p-order__flow-heading {
		margin-bottom: 0;
		font-size: 16px;
	}
}