/*
Theme Name: piyopiyo-alpha
Theme URI: https://piyopiyotheme.com/
Author: hogehoge.co.jp
Author URI: https://hogehoge.co.jp/
Description: piyopiyo テーマα版
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.158
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: piyopiyo-alpha
Tags: one-column, full-site-editing, block-patterns, editor-style, featured-images, custom-logo, wide-blocks
*/

/* ==========================================================================
   レイアウト（theme.json で表現できないもの）
   ========================================================================== */

/* フッターを画面下端へ貼り付ける
   ==========================================================================

   コンテンツが画面より短いページで、フッターが画面の途中で終わって
   下に地の色が残る状態を防ぐ。ページが画面より長いときは通常どおり
   コンテンツの下へ流れる（min-height なので伸びる方向にしか効かない）。

   ビューポート高を使う指定は theme.json に無いため CSS で持つ
   （docs/renewal/theme.md 3節「CSS を使うのは theme.json で表現できないもの」）。 */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	/* 管理バーぶんを引く。--wp-admin--admin-bar--height はコアが html へ出す
	   （32px / 782px 以下で 46px）。未ログイン時は変数が無いので 0px に落とす。 */
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	/* svh はブラウザ UI（アドレスバー等）が出ている状態の高さ。vh だけだと
	   モバイルで画面より高くなり、短いページでも縦スクロールが出る。
	   未対応ブラウザはこの行を捨てて上の vh を使う。 */
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
}

/* 余った高さは main が吸う。header / footer の高さは変えない。
   全テンプレートが header パーツ → main → footer パーツの3つで出来ている。 */
.wp-site-blocks > main {
	flex-grow: 1;
}

/* 右へはみ出した装飾を画面内で切る
   ==========================================================================

   スライダーの「画面端まで広げる」は、スライド枠を `calc(50% - 50vw)` の負のマージンで
   右へ伸ばす。`50vw` はスクロールバーを含むため、スクロールバーが場所を取る環境
   （Windows の多く）では右へはみ出す。**`oih` で実測すると 8px**（スクロールバー 15px の半分。
   2026-09-10・Chrome・ビューポート 1920px）。

   **`body` ではなく `html` に置く。** `body` の `overflow` はビューポートへ伝播すると
   言われるが、`clip` では伝播しなかった。`body` だけに書いた状態では 8px の横スクロールが
   残る（同日実測）。`html` に置くと 0 になり、縦スクロールと `position: sticky` は効いたままだった。

   値が `hidden` ではなく `clip` なのはユーザーの決定（2026-09-10）。`clip` はスクロール
   コンテナを作らない。ブラウザの対応条件はスライダー本体と同じ
   （`view.js` が `CSS.supports('overflow','clip')` を見て動かすかどうかを決めている）。 */

html {
	overflow-x: clip;
}


/* ==========================================================================
   ブロックスタイル
   ========================================================================== */

/* 見出しの既定の装飾（見出しブロックの「デフォルト」）
   ==========================================================================

   スタイル未指定の見出しブロックに h1〜h5 の装飾を当てる（2026-09-23 ユーザー依頼）。
   外すのはブロックスタイル「装飾なし」（is-style-plain。登録は functions.php）。
   決定と理由は docs/renewal/theme/heading-labels.md「見出しの既定のデザインと「装飾なし」（2026-09-23 決定）」、
   カンプの実測と em への換算は docs/renewal/records/heading-default-2026-09-23.md。

   **選択子は「is-style-* を持たない」か「is-style-default」。** 「装飾なし」のための規則は書かず、
   「装飾なし」やほかのスタイル（点つきなど）を選んだ見出しがここから外れるようにしてある。
   「デフォルト」はコアが補う選択肢で、選び直すと is-style-default が付く（WordPress 7.1.1 で実読）。
   `[class*="is-style-"]` 1 つにしないのは、`this-style-*` のようなクラスにも部分一致するため。

   **:where() で包み、詳細度を h2.wp-block-heading（0,1,1）に留める。** エディターで選んだ文字色・背景色
   （has-*-color は !important、手で選んだ色はインライン style）と余白（インライン style）が勝つ。
   コアの h2.has-background の余白（0,1,1）には後勝ちで勝つので、背景色を変えても帯の余白は同じ。

   **寸法は em で持つ。** 文字サイズは theme.json の見出しの値のまま変えないと決めたので、
   カンプ（文字サイズの推定 h1 30.7px・h2 24px・h3 21px・h4 18px・h5 18px）から比率だけを写した。
   線の太さは px（文字を大きくしても太らせない）。

   **左右に余白を持つ h2・h4・h5 は box-sizing: border-box。** テーマは content-box のままなので、
   本文の制約レイアウトの max-width（840px）が中身の幅にかかり、余白の分だけ箱が広がって
   中央寄せの左右へはみ出す（2026-09-23 に Playground で実測。h2 の帯が本文の左右へ 14px ずつ出ていた）。

   **擬似要素は ::before だけを使う。** 空の見出しのプレースホルダー「見出し」はコアの RichText が
   ::after で描くので、::after を使うと編集画面でプレースホルダーが消える（「下に点」で踏んだ。
   docs/renewal/records/heading-dots-2026-09-14.md）。

   h6 はカンプに無いので装飾しない。 */

/* h1: 下に灰色の線。線の色はカンプの #B4B4B4 ではなく枠線のトークンに寄せた（ユーザー決定）。
   字の墨の下端（複数行なら最終行）から線まで、カンプで 0.814em（Chrome で測って合わせた）。 */
h1.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default) {
	padding-bottom: 0.6em;
	border-bottom: 1px solid var(--wp--custom--color--border);
}

/* h2: 紺の帯に白い文字。帯の高さはカンプで 52px（2.17em）。カンプの字は帯の中心よりわずかに上にあるので、
   上の余白を下より小さくしてある（帯の上端から字の墨まで 0.585em、字の墨から帯の下端まで 0.627em、
   左端から字の墨まで 0.585em。Chrome で字の墨を測って合わせた）。 */
h2.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default) {
	box-sizing: border-box;
	padding: 0.24em 0.43em 0.31em;
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--navy);
}

/* 帯の中のリンクは文字と同じ白にする。テーマのリンク色（brand-blue）は紺の上でコントラストが足りない。
   **エディターでリンクの色を選んだ見出し（has-link-color）には当てない。** この規則（0,1,2）は
   コアがブロックごとに出すリンク色（.wp-elements-* a、0,1,1）に勝ってしまうため。 */
h2.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default):where(:not(.has-link-color)) a {
	color: inherit;
}

/* h3: 下に灰色の線と、その左端に緑の線（カンプで 80px ＝ 3.8em）。緑の線は灰色の線の上に重ねる。
   字の墨の下端から線まで、カンプで 1.003em（Chrome で測って合わせた）。 */
h3.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default) {
	position: relative;
	padding-bottom: 0.73em;
	border-bottom: 1px solid var(--wp--custom--color--border);
}

h3.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default)::before {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 3.8em;
	height: 1px;
	background-color: var(--wp--preset--color--action);
}

/* 緑の線は文字揃え（中央・右）に追従する。クラスは物理的な「右」なので、右は物理プロパティで寄せる。 */
h3.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default).has-text-align-center::before {
	right: 0;
	margin-inline: auto;
}

h3.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default).has-text-align-right::before {
	right: 0;
	left: auto;
}

/* h4: 左に緑の縦線 3px。**縦線は行の高さではなく字の高さ**（カンプで 21px ＝ 1.17em。行は 1.7em）。
   複数行のときは 1 行目の字の上端から最終行の字の下端まで伸びる（上下を行の箱から同じだけ詰める）。
   カンプの縦線は字の墨より上へ 0.056em・下へ 0.111em はみ出す。行の中心から 0.03em 下へずらすと合う
   （Chrome で字の墨を測って合わせた）。lh が使えないブラウザは既定の行送り 1.7 で計算した固定値へ落ちる。
   文字揃えには追従しない（縦線は複数行にまたがるため。2026-09-23 に仮定として示し、異論なし）。 */
h4.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default) {
	position: relative;
	box-sizing: border-box;
	/* 縦線の右端から字の墨まで、カンプで 0.724em（縦線 3px を含めた値。Chrome で測って合わせた）。 */
	padding-inline-start: 0.77em;
}

h4.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default)::before {
	content: "";
	position: absolute;
	top: 0.295em;
	top: calc((1lh - 1.17em) / 2 + 0.03em);
	bottom: 0.235em;
	bottom: calc((1lh - 1.17em) / 2 - 0.03em);
	left: 0;
	width: 3px;
	background-color: var(--wp--preset--color--action);
}

/* h5: 左に緑の点と、緑の文字。点はカンプで直径 10px（0.56em）、点の右端から字の墨まで 0.613em
   （最初の字の墨は箱より 0.06em 左へ出るので、箱までは 0.67em。Chrome で測って合わせた）。
   点は行の中の inline-block なので、文字揃え（中央・右）に文字と一緒に動く。
   2 行目以降は点の後ろの字に揃える（padding と負の text-indent のぶら下げ）。
   縦位置は vertical-align: middle（ベースライン + x ハイトの半分）で、カンプの点の中心
   （ベースラインの 0.30em 上）にほぼ重なる。 */
h5.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default) {
	box-sizing: border-box;
	padding-inline-start: 1.23em;
	color: var(--wp--preset--color--action);
	text-indent: -1.23em;
}

h5.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default)::before {
	content: "";
	display: inline-block;
	width: 0.56em;
	height: 0.56em;
	margin-inline-end: 0.67em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--action);
	vertical-align: middle;
}

/* 中央・右揃えではぶら下げをやめる。残すと 2 行目以降だけが点の幅の半分ずれる。 */
h5.wp-block-heading:where(:not([class^="is-style-"], [class*=" is-style-"]), .is-style-default):where(.has-text-align-center, .has-text-align-right) {
	padding-inline-start: 0;
	text-indent: 0;
}

/* 英字ラベルの点の装飾（見出しのブロックスタイル「左に点（英大文字）」）
   ==========================================================================

   3 × 2 の点を見出しの左へ置く。登録は functions.php、見た目はここ
   （CSS は style.css 1 本という 3 節の決定に合わせる）。

   **点は 6 つで、1 つずつ色が違う**（上段が朱・紫・水、下段が黄・青・黄緑）。
   2026-09-09 にユーザーから受け取ったカンプの切り出し画像に合わせた。
   それまでは 3 × 3 の 9 点・黄緑 1 色だったが、これは概算で置いた仮の値。

   色と形を分けて持つ。**色は横 3 等分の帯 2 枚**（background の linear-gradient）、
   **形は 3 × 2 の円**（data URI の SVG マスク）。帯の境目は点と点の間に来るので、
   マスクで抜くと 1 点ずつ違う色になる。点ごとに background を並べるより短く、
   色は theme.json のトークンのまま残せる（SVG へ fill を書くとトークンから外れる）。

   **寸法は em で持つ。** 見出しの文字サイズは挿入後にエディターで変える前提のため
   （theme-implementation.md「トップページのお知らせセクション（2026-09-05）」）、
   px で固定すると大きい見出しで点だけ取り残される。
   カンプ実測（画像 1135 × 209px）は点の直径 13px・中心の間隔 32px・
   全体 77 × 45px・文字との間 75px・キャップハイト 100px。
   Oswald のキャップハイトは 0.81em（Oswald[wght].ttf の OS/2 sCapHeight 810 / unitsPerEm 1000）
   なので文字サイズは 100 ÷ 0.81 ＝ 約 123.5px。各値をこれで割って em にした。

   **英字ラベルの体裁（字間・行送り・ウェイト・大文字化）もここに持つ。** パターン側へ値を書かず、
   型としてまとめるため（docs/renewal/theme.md 5節「パターンは既定値で作る」）。
   書体と文字サイズは入れない。エディターの操作（インスペクター）で選べる状態に残すため。

   text-transform は、原稿が小文字や大文字小文字混じりで入っても表示を大文字へ揃える
   （2026-09-09 ユーザー指示）。文字そのものは変えないので、コピーや読み上げは原稿のまま。

   ウェイト 600 は見た目の好みではなく制約。theme.json の見出しは 700 だが、
   Oswald は 400 / 500 / 600 しか読み込んでいないため 700 だと合成ボールドになる（保留 #83）。

   **和文用の「左に点」（is-style-dot-label-jp）は点だけを共有し、英字の体裁を持たない**
   （2026-09-14 ユーザー依頼）。「左に点（英大文字）」を和文へ当てると、行送り 0.667 で
   2 行目が重なり、字間 0.145em で和文が間延びする。和文はテーマの見出しの既定
   （ウェイト 700・行送り 1.6・字間 heading）のままにする。
   点は 2 行に折り返しても **1 行目の中心**に留める（align-items: center だと 2 行の中央へ落ちる）。

   **文字揃えに点ごと追従する（2 つとも。2026-09-14 ユーザー依頼）。** flex コンテナなので text-align では
   点も文字も動かない。中央・右のクラス（has-text-align-*）が付いたときは justify-content で寄せる。
   クラスは物理的な「右」なので flex-end ではなく、書字方向に依らず右へ寄る値にはできない
   （flex の主軸は書字方向に従う）。このサイトは日英（左書き）だけなので flex-end で右になる。 */

.wp-block-heading.is-style-dot-label {
	display: flex;
	align-items: center;
	/* カンプの見た目上の間隔 75px から、Oswald の左サイドベアリング 7px を引いた 68px
	   （68 ÷ 123.5）。gap は箱の間、カンプで測れるのは字の墨の間なので、その差を引く。
	   ベアリングは大文字 15 字のうち 11 字が 7px（実測）。 */
	gap: 0.551em;
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
}

.wp-block-heading.is-style-dot-label-jp {
	display: flex;
	align-items: flex-start;
	/* 和文のカンプは無いので仮値（英字の 0.551em に近い丸い値）。カンプが来たら合わせる。 */
	gap: 0.5em;
}

/* 1 行目の中心に点を置く。(行の高さ − 点の高さ) ÷ 2。
   lh が使えないブラウザは既定の行送り 1.6 で計算した固定値へ落ちる
   （エディターで行送りを変えるとずれるが、点が消えたり重なったりはしない）。 */
.wp-block-heading.is-style-dot-label-jp::before {
	margin-top: 0.618em;
	margin-top: calc((1lh - 0.364em) / 2);
}

.wp-block-heading.is-style-dot-label.has-text-align-center,
.wp-block-heading.is-style-dot-label-jp.has-text-align-center {
	justify-content: center;
}

.wp-block-heading.is-style-dot-label.has-text-align-right,
.wp-block-heading.is-style-dot-label-jp.has-text-align-right {
	justify-content: flex-end;
}

.wp-block-heading.is-style-dot-label::before,
.wp-block-heading.is-style-dot-label-jp::before {
	content: "";
	/* 縮まないように。見出しが長いと点が潰れるため。 */
	flex: 0 0 auto;
	/* 77px ÷ 123.5px / 45px ÷ 123.5px */
	width: 0.623em;
	height: 0.364em;
	/* 上段（朱・紫・水）と下段（黄・青・黄緑）。横の区切りは点と点の間に落ちる。 */
	background-image:
		linear-gradient(
			to right,
			var(--wp--preset--color--brand-coral) 0 33.333%,
			var(--wp--preset--color--brand-purple) 33.333% 66.667%,
			var(--wp--preset--color--brand-aqua) 66.667% 100%
		),
		linear-gradient(
			to right,
			var(--wp--preset--color--brand-yellow) 0 33.333%,
			var(--wp--preset--color--brand-blue) 33.333% 66.667%,
			var(--wp--preset--color--brand-lime) 66.667% 100%
		);
	background-repeat: no-repeat;
	background-size: 100% 50%;
	background-position: 0 0, 0 100%;
	/* viewBox はカンプ実測の 2 倍（直径 26・中心の間隔 64）。整数で書くため。 */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154 90'%3E%3Cg fill='%23000'%3E%3Ccircle cx='13' cy='13' r='13'/%3E%3Ccircle cx='77' cy='13' r='13'/%3E%3Ccircle cx='141' cy='13' r='13'/%3E%3Ccircle cx='13' cy='77' r='13'/%3E%3Ccircle cx='77' cy='77' r='13'/%3E%3Ccircle cx='141' cy='77' r='13'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154 90'%3E%3Cg fill='%23000'%3E%3Ccircle cx='13' cy='13' r='13'/%3E%3Ccircle cx='77' cy='13' r='13'/%3E%3Ccircle cx='141' cy='13' r='13'/%3E%3Ccircle cx='13' cy='77' r='13'/%3E%3Ccircle cx='77' cy='77' r='13'/%3E%3Ccircle cx='141' cy='77' r='13'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* contain だと丸め差で端が欠けることがあるので、箱いっぱいに伸ばす
	   （箱の縦横比 1.7115 と viewBox の 1.7111 の差は 0.03% で、円の歪みは見えない）。 */
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

/* 見出しの下の点（見出しのブロックスタイル「下に点」）
   ==========================================================================

   見出しの下へ、横 1 列の点 6 つ（朱・紫・水・黄・青・黄緑の順）を置く。
   2026-09-14 にユーザーから受け取ったカンプの切り出し画像（996 × 185px）に合わせた。
   実測と換算は docs/renewal/records/heading-dots-2026-09-14.md。

   作りは「左に点（英大文字）」と同じ（色は linear-gradient の帯、形は SVG マスク、寸法は em）。
   帯は横 6 等分で、境目はどれも点と点の間に落ちる（viewBox 880 のうち点は幅 60・間隔 164）。

   英字の体裁は持たない。和文の見出しに使う前提で、書体・サイズ・字間・行送りは
   テーマの見出しの既定とエディターの操作に任せる。

   **文字の寄せに追従する。** 点は display: block の擬似要素なので text-align では動かない。
   中央寄せ・右寄せのクラス（has-text-align-*）が付いたときはマージンで寄せる。
   クラスは物理的な「右」なので、右寄せは margin-inline-start（書字方向で向きが変わる）ではなく
   margin-left で寄せる（2026-09-14 レビューで修正）。 */

.wp-block-heading.is-style-dot-below::after {
	/* カンプ実測（文字サイズ 40px 相当）: 文字の行の箱から点まで 21px（21 ÷ 40）。 */
	margin-top: 0.525em;
}

/* 英字版（is-style-dot-below-en）。英字ラベルの体裁は「左に点（英大文字）」と同じ値
   （理由もそこに書いてある）。行送り 0.667 では行の箱が字より低く、字の下端（ベースライン）が
   箱の外へ出るため、点までの間隔は和文版と同じ値では詰まる。和文版と同じ「ベースラインから点まで」
   になる値に合わせた（実測は docs/renewal/records/heading-dots-2026-09-14.md）。 */
.wp-block-heading.is-style-dot-below-en {
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	line-height: var(--wp--custom--line-height--display);
	text-transform: uppercase;
}

.wp-block-heading.is-style-dot-below-en::after {
	/* 和文版はベースラインから点まで 0.9em（40px で 36px、字の墨からは 32px）。
	   英字版は行の箱（0.667em）の下端がベースラインの 0.108em 上にあるので、
	   ベースラインの 0.825em 下（墨からは同じ 32px 相当）に点が来る値 = 0.108 + 0.825。 */
	margin-top: 0.933em;
}

.wp-block-heading.is-style-dot-below::after,
.wp-block-heading.is-style-dot-below-en::after {
	content: "";
	display: block;
	/* カンプ実測（文字サイズ 40px 相当）: 点の全体 88 × 6px。88 ÷ 40 / 6 ÷ 40 */
	width: 2.2em;
	height: 0.15em;
	background-image:
		linear-gradient(
			to right,
			var(--wp--preset--color--brand-coral) 0 16.667%,
			var(--wp--preset--color--brand-purple) 16.667% 33.333%,
			var(--wp--preset--color--brand-aqua) 33.333% 50%,
			var(--wp--preset--color--brand-yellow) 50% 66.667%,
			var(--wp--preset--color--brand-blue) 66.667% 83.333%,
			var(--wp--preset--color--brand-lime) 83.333% 100%
		);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* viewBox はカンプ実測の 10 倍（直径 60・中心の間隔 164）。整数で書くため。 */
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3Ccircle cx='194' cy='30' r='30'/%3E%3Ccircle cx='358' cy='30' r='30'/%3E%3Ccircle cx='522' cy='30' r='30'/%3E%3Ccircle cx='686' cy='30' r='30'/%3E%3Ccircle cx='850' cy='30' r='30'/%3E%3C/g%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 60'%3E%3Cg fill='%23000'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3Ccircle cx='194' cy='30' r='30'/%3E%3Ccircle cx='358' cy='30' r='30'/%3E%3Ccircle cx='522' cy='30' r='30'/%3E%3Ccircle cx='686' cy='30' r='30'/%3E%3Ccircle cx='850' cy='30' r='30'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	/* 箱の縦横比 14.667 と viewBox の 14.667 は一致する。 */
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}

.wp-block-heading.is-style-dot-below.has-text-align-center::after,
.wp-block-heading.is-style-dot-below-en.has-text-align-center::after {
	margin-inline: auto;
}

.wp-block-heading.is-style-dot-below.has-text-align-right::after,
.wp-block-heading.is-style-dot-below-en.has-text-align-right::after {
	margin-left: auto;
}

/* 段落の 1 字下げ（段落ブロックのブロックスタイル「1字下げ」）
   ==========================================================================

   段落の 1 行目を 1 字（1em）下げる。和文の段落の頭の字下げを、全角の空白を打たずに見た目で持つ
   （2026-09-28 ユーザー依頼。docs/renewal/theme/paragraph-indent.md）。登録は functions.php。

   text-indent は 1 行目にだけ効くので、段落の中の改行（Shift+Enter の <br>）の後の行は下げない。
   **中央揃え・右揃えの段落には当てない。** 下げた分だけ 1 行目が右へずれ、揃えの位置から外れるため。
   **ドロップキャップ（has-drop-cap）の段落にも当てない。** 浮かせた 1 文字目ごと右へずれ、その横の本文が
   1 行目だけ 1 字ぶん右へ出る（2026-09-28 に Chrome で実測。2 行目の先頭 164px に対し、1 行目の 2 文字目が 180px）。

   **詳細度は p.is-style-indent（0,1,1）に留める。** コアの「タイポグラフィ → 行インデント」（WordPress 7.0）で
   段落ごとに入れた値はインラインの style なので、こちらより勝つ（1 か所だけ幅を変えられる）。 */
p.is-style-indent:where(:not(.has-text-align-center, .has-text-align-right, .has-drop-cap)) {
	text-indent: 1em;
}

/* ==========================================================================
   追加 CSS クラスで組む部品
   ========================================================================== */

/* 沿革のタイムライン（timeline / timeline-item / timeline-item__year / timeline-item__content）
   ==========================================================================

   コアのグループ・段落・見出しだけで年表を組む。独自ブロックもカスタム HTML も使わない。
   使い方はパターン「セクション: 沿革（HISTORY）」（patterns/section-history.php）。
   決定と理由は docs/renewal/theme.md 3 節「沿革タイムライン（2026-09-13）」。

   構造（クラス名はブロックの「追加 CSS クラス」）:
     .timeline                     グループ。項目を縦に並べる
       .timeline-item              グループ。1 項目。複製して増やす
         .timeline-item__year      段落。年
         .timeline-item__content   グループ。出来事の見出し（h3）と本文（段落）

   **年と出来事は CSS Grid で横に並べる**（列 1 が年、列 2 が出来事）。
   subgrid が使えるブラウザでは .timeline 側の 2 列を項目が共有するので、
   年の幅が項目ごとに違っても出来事の左端が揃う。使えないブラウザは項目ごとの auto 幅。

   **線と丸は擬似要素。** 縦線は項目（.timeline-item::before）、丸は年（.timeline-item__year::before）。
   丸を年に付けるのは、年の文字サイズをエディターで変えても 1 行目の中心に追従させるため（em で置く）。
   線を項目に付けるのは、年より背の高い出来事の分まで線を通すため。
   線は項目の上端から下端まで引くので、項目の境目で継ぎ目なくつながる。
   最初の項目は丸の中心から下へ、最後の項目は上から丸の中心までにして、年表の外へはみ出さない
   （項目が 1 つなら線は長さ 0）。装飾なので読み上げへ出さない（content は空）。

   **項目の間隔はフロー配置のブロック間隔ではなく、項目の下パディングで取る。**
   ブロック間隔（margin）だと線がそのぶん途切れる。.timeline のブロック間隔の設定は効かない。

   **いちばん下の項目の丸だけ塗りつぶし（action）。** 最新の出来事の印。並びが古い順である前提で、
   クラスの付け替えは要らない（複製して増やすだけで最新が塗られる）。
   「最後」は :last-child ではなく :nth-last-child(1 of .timeline-item)。編集画面の追加ボタンを数えないため。
   丸の中は白（base）で塗る。線が丸の後ろを通るため、透明だと輪の中に線が見える。

   **年・見出し・本文のサイズは型としてここに持つ。** 年は Oswald 20px / 600 / 行送り 1.4、
   出来事の見出しは本文サイズ（h3 の既定 28px では年表に見えない）、本文は補助サイズ・補助文字色。
   エディターでサイズや色を選べば、プリセットのクラス（!important）が勝つので、ここは既定値。
   ウェイト 600 は Oswald の読み込み範囲（400 / 500 / 600）に合わせた（保留 #83）。
   「年」の字は Oswald に無いので後続の書体へ落ちる。

   **782px 未満では年の下に出来事を積む**（列 1 つ）。コアのカラムが縦積みになる幅と揃えた。
   出来事の列は minmax(0, 1fr) なので横スクロールは出ない。

   丸の直径と、線の端の高さ（年の 1 行目の中心 = 文字サイズ × 行送り ÷ 2）はカスタムプロパティで持つ。
   線の端は年の文字サイズを読めない（親から子の値は見えない）ので、年の既定サイズから計算する。
   年のサイズをエディターで変えると、丸は追従するが、最初と最後の線の端だけ数 px ずれる。 */

.timeline {
	--piyopiyo-timeline-dot: 14px;
	--piyopiyo-timeline-axis: calc(var(--wp--preset--font-size--medium) * var(--wp--custom--line-height--tight) / 2);
	--piyopiyo-timeline-gap: var(--wp--preset--spacing--lg);
}

/* 項目と、項目の中の年・出来事のブロック間隔（margin）を消す。
   コアはフロー配置の子へ `:root :where(.is-layout-flow) > *` （詳細度 0,1,0）で
   間隔を当てる。編集画面ではこの規則がテーマの CSS より後に来るため、同じ詳細度だと負ける
   （2026-09-13 実測: 項目と出来事が 24px ずつ下がった）。子を名指しして 0,2,0 以上にする。 */
.timeline > .timeline-item {
	margin-block: 0;
}

.timeline > .timeline-item > * {
	margin-block: 0;
}

.timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--piyopiyo-timeline-gap);
	/* 左は丸の直径 + 丸と年の間。下は次の項目との間隔。 */
	padding-left: calc(var(--piyopiyo-timeline-dot) + var(--wp--preset--spacing--md));
	padding-bottom: var(--wp--preset--spacing--lg);
}

/* 最初・最後の項目は :first-child / :last-child ではなく「項目の中で最初・最後」で選ぶ。
   編集画面ではグループを選ぶと末尾にブロック追加ボタン（.block-list-appender）が入り、
   :last-child だと最後の項目の丸が白に戻って線が下へ伸びる（2026-09-13 実測）。
   :nth-child(n of S) は Chrome 111 / Safari 9 / Firefox 113 から。:where() で詳細度を上げない。 */
.timeline-item:where(:nth-last-child(1 of .timeline-item)) {
	padding-bottom: 0;
}

/* 縦線。丸の中心を通るように、丸の直径の半分の位置へ 1px で引く。 */
.timeline-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--piyopiyo-timeline-dot) / 2 - 0.5px);
	width: 1px;
	background: var(--wp--custom--color--border);
}

.timeline-item:where(:nth-child(1 of .timeline-item))::before {
	top: var(--piyopiyo-timeline-axis);
}

.timeline-item:where(:nth-last-child(1 of .timeline-item))::before {
	bottom: calc(100% - var(--piyopiyo-timeline-axis));
}

/* 年 */
.timeline-item__year {
	position: relative;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: var(--wp--custom--line-height--tight);
}

/* 丸。年の 1 行目の中心に合わせ、項目の左パディングの中（線の上）へ置く。 */
.timeline-item__year::before {
	content: "";
	position: absolute;
	box-sizing: border-box;
	top: calc(1em * var(--wp--custom--line-height--tight) / 2 - var(--piyopiyo-timeline-dot) / 2);
	left: calc(-1 * (var(--piyopiyo-timeline-dot) + var(--wp--preset--spacing--md)));
	width: var(--piyopiyo-timeline-dot);
	height: var(--piyopiyo-timeline-dot);
	border: 2px solid var(--wp--preset--color--deep-blue);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

.timeline-item:where(:nth-last-child(1 of .timeline-item)) > .timeline-item__year::before {
	border-color: var(--wp--preset--color--action);
	background: var(--wp--preset--color--action);
}

/* 出来事 */
.timeline-item__content > .wp-block-heading {
	font-size: var(--wp--preset--font-size--body);
}

.timeline-item__content > p {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-sub);
}

/* 年の列を項目どうしで共有する（subgrid）。項目以外の子（編集画面の追加ボタン）は 2 列にまたがせる。 */
@supports (grid-template-columns: subgrid) {
	.timeline {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: var(--piyopiyo-timeline-gap);
	}

	.timeline > :where(:not(.timeline-item)) {
		grid-column: 1 / -1;
	}

	.timeline-item {
		grid-column: 1 / -1;
		grid-template-columns: subgrid;
	}
}

/* 782px 未満: 年の下に出来事を積む。 */
@media (max-width: 781px) {
	.timeline {
		grid-template-columns: minmax(0, 1fr);
	}

	.timeline-item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--xs);
	}
}

/* ステップの流れ（steps / steps-item / steps-item__label）
   ==========================================================================

   カードを横に等幅で並べ、カードの間に右向きの三角の矢印を置く。
   782px 未満では縦に積み、矢印は下向きになる。
   2026-09-14 にユーザーから受け取ったカンプ（STEP01〜04 のご利用の流れ）から起こした。
   コアのグループ・段落・見出しだけで組む。独自ブロックもカスタム HTML も使わない。
   決定と理由は docs/renewal/theme.md 3 節「ステップの流れ（2026-09-14）」。

   構造（クラス名はブロックの「追加 CSS クラス」）:
     .steps                  グループ。カードを並べる
       .steps-item           グループ。1 枚のカード。複製して増やす
         .steps-item__label  段落。「STEP01」
         見出し（h3）         ステップの名前
         段落                説明

   **カードの見た目（白地・罫線・角丸・余白）はブロックの設定で持つ**（背景色・枠線・角丸・パディング）。
   ここが持つのは並び・矢印・文字の型だけ。カードの色や枠をエディターで変えられるようにするため。

   **並びは flex。** 枚数を CSS が知らなくても、`flex: 1 1 0` で全カードが等幅になる。
   カードの間隔（--piyopiyo-steps-gap）の真ん中に矢印を置くので、間隔は矢印が収まる幅にしておく。

   **矢印は 2 枚目以降のカードの擬似要素**（`.steps-item + .steps-item::before`）。
   カードの左の間隔の中央に、カードの高さの中央で置く。三角は clip-path で作り、色は action。
   装飾なので読み上げへ出さない（content は空）。編集画面の追加ボタン（.block-list-appender）は
   `.steps-item` ではないので矢印が付かず、幅も取らない（flex: none）。

   **ブロック単位の「追加 CSS」ではなくテーマに置くのは、メディアクエリが要るから。**
   コアの `WP_Theme_JSON::process_blocks_custom_css()` は `&` の入れ子だけを解釈し、`@media` を書けない
   （WP 7.1 を実読）。782px 未満で縦に積み、矢印を回す指定はここでしか持てない。

   **文字の型はここに持つ。** ラベルは Oswald 14px / 600 / 字間 en / 大文字 / action 色、
   名前の見出しは本文サイズ（h3 の既定 28px ではカードに見えない）、説明は補助サイズ。
   エディターでサイズや色を選べば、プリセットのクラス（!important）が勝つので、ここは既定値。
   ウェイト 600 は Oswald の読み込み範囲（400 / 500 / 600）に合わせた（保留 #83）。 */

.steps {
	--piyopiyo-steps-gap: var(--wp--preset--spacing--lg);
	--piyopiyo-steps-arrow: 12px;
	display: flex;
	align-items: stretch;
	gap: var(--piyopiyo-steps-gap);
}

/* フロー配置のブロック間隔（margin）を消す。flex では gap と二重になる。
   コアの `:root :where(.is-layout-flow) > *`（0,1,0）が編集画面ではテーマの CSS より後に来るため、
   子を名指しして 0,2,0 にする（沿革のタイムラインと同じ）。 */
.steps > .steps-item {
	margin-block: 0;
}

.steps > :where(:not(.steps-item)) {
	flex: none;
	margin-block: 0;
}

.steps-item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* 矢印。左の間隔の中央、カードの高さの中央。幅 12px・高さ 16px（カンプ実測）。 */
.steps-item + .steps-item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--piyopiyo-steps-gap) / 2);
	width: var(--piyopiyo-steps-arrow);
	height: calc(var(--piyopiyo-steps-arrow) * 4 / 3);
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--action);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ラベル「STEP01」 */
.steps-item__label {
	font-family: var(--wp--preset--font-family--en);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	line-height: var(--wp--custom--line-height--tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--action);
}

/* 名前と説明 */
.steps-item > .wp-block-heading {
	font-size: var(--wp--preset--font-size--body);
}

.steps-item > :where(p:not(.steps-item__label)) {
	font-size: var(--wp--preset--font-size--small);
}

/* 782px 未満: 縦に積み、矢印は上の間隔の中央で下向き。 */
@media (max-width: 781px) {
	.steps {
		flex-direction: column;
	}

	.steps-item + .steps-item::before {
		top: calc(-1 * var(--piyopiyo-steps-gap) / 2);
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
	}
}

/* 概要の表（overview）
   ==========================================================================

   ラベル列＋値列の定義表。コアのテーブルブロック（core/table）に「追加 CSS クラス」で
   .overview を付けて使う。ラベルは th[scope="row"]、値は td。
   2026-09-13 にグループの入れ子で組んだものを、2026-09-15 にテーブルブロックへ作り替えた。
   決定と理由は docs/renewal/theme.md 3 節「概要の表をテーブルブロックへ作り替えた（2026-09-15）」。

   構造（クラス名はブロックの「追加 CSS クラス」）:
     figure.wp-block-table.overview
       > table.has-fixed-layout
           > tbody > tr > th[scope="row"]（ラベル）＋ td（値）

   **ブロック単位の「追加 CSS」ではなくテーマに置くのは、詳細度で勝てないから。**
   ブロックの追加 CSS は `:root :where(.wp-custom-css-xxxxxxxx th) { … }` として出力され、
   `:where()` が 0 なので (0,1,0) にしかならない。コアの
   `.wp-block-table td, .wp-block-table th { border: 1px solid; padding: 0.5em; }` は (0,1,1) なので、
   **セルの余白と罫線だけがコアに負ける**（WP 7.1 で実測）。ここは `.wp-block-table.overview th` の
   (0,2,1) で書いて、読み込み順に関係なく勝たせる。編集画面ではコアの CSS がテーマより後に来るため、
   順序には頼れない（沿革のタイムライン・ステップの流れと同じ理由）。

   **縦罫線は引かない。** ラベルは navy の塗り、値は base の塗りで、あいだに線を置かないのがカンプ
   （2026-09-13）。セルの border を 0 にして下だけ引き、外枠は table 側で持つ
   （border-collapse: collapse はコアが指定済みなので、最終行の下と外枠は 1 本に重なる）。

   **文字寄せだけは詳細度を下げて書く。** セルのツールバーで中央・右へ変えられるように、
   コアの `.has-text-align-*`（0,1,0）に負ける (0,0,1) で指定する。 */

.wp-block-table.overview {
	--piyopiyo-overview-label-width: 9em;
}

.wp-block-table.overview > table {
	border: 1px solid var(--wp--custom--color--border);
}

.wp-block-table.overview th,
.wp-block-table.overview td {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 0;
	border-bottom: 1px solid var(--wp--custom--color--border);
	vertical-align: top;
}

.wp-block-table.overview th {
	width: var(--piyopiyo-overview-label-width);
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.wp-block-table.overview td {
	background-color: var(--wp--preset--color--base);
}

/* 文字寄せはセルのツールバーで変えられるようにする（has-text-align-* に負ける詳細度）。 */
:where(.wp-block-table.overview) th {
	text-align: left;
}

/* 782px 未満: セルを縦に積む（見出し → 中身 → 見出し → 中身）。
   2026-09-15 ユーザー依頼「スマホのときにずっと 2 列になってしまうので」。
   ブレイクポイントは沿革のタイムライン・ステップの流れと同じ 781px。

   **見た目（overview）と切り離してある**（0.2.59。2026-09-15 ユーザー決定）。
   0.2.56 では `.wp-block-table.overview` に同居していたが、navy のラベル列が要らない表でも
   縦積みだけ使えるように分けた。クラスの付け外しは表のサイドバーの
   「狭い画面での並び → 狭い画面で縦に積む」（`src/table-sp-stack/editor.jsx`。2026-09-24 に「スマートフォンで…」から改名）。
   **既定はオフ＝積まない**（オプトイン）。3 列以上の表を積むと読めなくなるため、
   ボタン（`is-sp-keep-row`）とは向きが逆になっている。

   **詳細度で overview に勝たせる。** `.wp-block-table.overview th` の `width: 9em` は (0,2,1)。
   同じ (0,2,1) で書くと `style.css` 内の前後関係に結果が左右されるので、
   `> table th` として (0,2,2) にする。最終行の罫線消しも同じ理由で (0,3,2)。

   **表の意味は失われる。** table 系要素の display を変えると、ブラウザは暗黙の role
   （table / row / cell）を出さなくなることが知られている。role 属性で戻す手はあるが、
   core/table の save() が出す markup に属性を足すと編集画面で「無効なブロック」になるため採れない
   （テーマの render_block で足す手は未検討）。支援技術での実測はしていない → 保留 #117。
   編集画面では、オンにすると必ず警告が出る。

   **border-collapse が効かなくなる。** 積んだあとは最後のセルの下の線と外枠が重ならず 2px になるので、
   最後のセルの下だけ自分で消す。box-sizing はコアが `.wp-block-table` へ指定していないので明示する
   （content-box のままだと width: 100% と外枠 1px が足されて右へはみ出す）。 */
@media (max-width: 781px) {
	.wp-block-table.is-sp-stack > table,
	.wp-block-table.is-sp-stack thead,
	.wp-block-table.is-sp-stack tbody,
	.wp-block-table.is-sp-stack tfoot,
	.wp-block-table.is-sp-stack tr,
	.wp-block-table.is-sp-stack th,
	.wp-block-table.is-sp-stack td {
		display: block;
	}

	.wp-block-table.is-sp-stack > table {
		box-sizing: border-box;
	}

	/* overview の `th { width: 9em }`（0,2,1）に、順序に頼らず勝つ（0,2,2）。 */
	.wp-block-table.is-sp-stack > table th {
		width: auto;
	}

	/* 表全体の最後のセルの下だけ消す（0.2.60 で直した。それまでは `tr:last-child td`）。
	   **`overview` と組んだときだけの補正。** `overview` は外枠を table 側に持つので、
	   積むと最後の線が外枠と重なって 2px になる。コア既定の表はセルが四辺に罫線を持つため、
	   同じことをすると最後の箱が下だけ開いて見える。
	   **`tr:last-child` では節ごとの最終行に当たる。** `:last-child` は親（thead / tbody / tfoot）に
	   対する判定なので、3 つの節を持つ表では節の境目でも罫線が消える。
	   「最後の節 → 最後の行 → 最後のセル」を名指しして、表で 1 か所だけに当てる。 */
	.wp-block-table.overview.is-sp-stack > table > :last-child > tr:last-child > :last-child {
		border-bottom: 0;
	}
}

/* 幅を指定したボタンは狭い画面で縦に積む（wp-block-button__width-*）
   ==========================================================================

   2026-09-15 ユーザー依頼「ボタンブロックで方向→の場合はスマホでも横並びになってレイアウトが崩れます。
   ある程度幅が狭まったら縦並びにできないでしょうか？」。

   **原因は「方向」ではなく幅の指定。** ボタンに幅（25% など）を設定すると、コアは
   `.wp-block-buttons > .wp-block-button[class*=wp-block-button__width]` へ
   `width: calc(var(--wp--block-button--width) * 1% - …)` を当てる。**％なので画面が狭くなっても割合は変わらず、
   `flexWrap: wrap` が働かない**（25% が 4 つなら何 px でも 1 行に収まる）。375px では 1 つ約 85px になる。
   幅を設定していないボタンはコアの折り返しで足りるので、ここでは触らない。

   **詳細度。** コアの上の規則は (0,3,0)。`:not(.is-vertical)` を足して (0,4,0) で勝たせる。
   縦並び（`is-vertical`）のときはコアの規則が別に在る（(0,4,0)）ので、当てにいかず除外する
   （2026-09-15 時点で、幅を設定した縦並びのボタンはサイトに無い）。

   ブレイクポイントは沿革のタイムライン・ステップの流れ・概要の表と同じ 781px。

   **`is-sp-keep-row` が付いたまとまりは対象外**（0.2.58。2026-09-15 ユーザー決定）。
   ボタンのまとまりのサイドバーにある「狭い画面で縦に積む」（既定オン）を切ると、このクラスが付く
   （`src/buttons-sp-stack/editor.jsx`。表示名は 0.2.59 で反転、2026-09-24 に「スマートフォンで…」から改名）。切るとコアの素の挙動へ戻り、
   375px では潰れる。`:not()` を足しても詳細度は (0,5,0) で、コアの (0,3,0) に勝つ。 */

@media (max-width: 781px) {
	.wp-block-buttons:not(.is-vertical):not(.is-sp-keep-row) > .wp-block-button[class*="wp-block-button__width"] {
		flex-basis: 100%;
		width: 100%;
	}
}

/* 狭い画面でカラムの並び順を逆にする（core/columns の is-sp-reverse）
   ==========================================================================

   2026-09-24 ユーザー依頼「カラムブロックでスマートフォンでの表示のときに右のカラムを上にしたい」。
   クラスの付け外しはカラムのサイドバーの「狭い画面での並び → 狭い画面で並び順を逆にする」
   （`src/columns-sp-reverse/editor.jsx`。2026-09-24 に「スマートフォンで…」から改名。タブレットの縦向きにも効くため）。
   **既定はオフ**（オプトイン）。3 つ以上なら右から順に上へ積む。

   **コアの縦積みのまま、折り返した行を積む向きだけを逆にする（`flex-wrap: wrap-reverse`）。**
   コアは 782px 未満で、各カラムを `flex-basis: 100% !important` にし、親の `flex-wrap: wrap !important` で
   1 行に 1 つずつ折り返して積む（WordPress 7.1.2 の `blocks/columns/style.css`）。`wrap-reverse` はその行を下から上へ積む。
   **並べる向きは横のままなので、幅・高さ・間隔はコアの縦積みと同じで、全体が上下に裏返るだけ**（0.2.120。2026-09-24 ユーザー決定）。
   - カラム間の縦の間隔は、どちらでも `row-gap`（ブロックの「ブロックの間隔」の縦）。
   - 行の中の上下も裏返る。行の高さはふつうカラムの高さと同じなので見えないが、**親に余分な高さがあるとき**
     （「追加 CSS」の `min-height` など。カラムのブロックに最低の高さの設定欄は無い）は、「縦の配置: 上」のカラムが
     自分の行の下端に、「下」が上端に寄る。補正の規則は足さない（下の 0.2.118〜0.2.119 の反省）。

   **`!important` は、コアの `flex-wrap: wrap !important` を上書きするためだけに使う。** `!important` どうしは詳細度で決まり、
   こちらは (0,2,0)（`:where()` の中は数えない）、コアは (0,1,0)。`flex-wrap` を変える手はこれしか無い。
   利用者の CSS を詳細度で潰すための `!important` ではない（`vendor/vk-agents-public/rules/css.md` の「原則使用禁止」の例外。2026-09-24 ユーザー決定）。

   **0.2.118〜0.2.119 は `flex-direction: column-reverse`（縦向き）で逆にしていた。** 向きを変えると伸び方と配置の意味が入れ替わり、
   コアの縦積みとずれた。複数行の flex を縦向きにすると行の幅が中身から決まり、スライダーの入ったカラムが 33,554,432px まで広がった
   （2026-09-24。0.2.119 で `width: 100%` を当てて止めた）。親に最低の高さがあると「縦の配置: 中央」のカラムが引き伸ばされた。
   ずれが見つかるたびに補正を足すことになるので、向きを変えない作りに替えた（docs/renewal/theme/columns-sp-reverse.md）。

   **「モバイルでは縦に並べる」をオフにしたカラム（`is-not-stacked-on-mobile`）は対象外。** コアはそれを
   `flex-wrap: nowrap !important`（(0,2,0)）で横並びに保つ。同じ詳細度でぶつけると読み込み順で勝ち負けが決まり、
   勝つと狭い画面でだけ折り返して横並びが崩れる。

   **変わるのは見た目の順だけ。** 読み上げと Tab の順は HTML の順（左のカラムから）のまま
   （編集画面では、オンにすると注記が出る）。

   ブレイクポイントはコアのカラムが縦積みになる幅（781px）。沿革・概要の表・ボタンの縦積みと同じ。 */

@media (max-width: 781px) {
	.wp-block-columns.is-sp-reverse:where(:not(.is-not-stacked-on-mobile)) {
		flex-wrap: wrap-reverse !important;
	}
}

/* カラムを縦に積む幅を 1280px 未満まで広げる（core/columns の is-stack-below-1280）
   ==========================================================================

   2026-09-25 ユーザー依頼「トップページのヘッダーのカラムブロックがいま781pxで落ちる形なのですが、
   782～1200pxくらいまで左カラムがとても窮屈になっている印象です。このカラムブロックだけ落ちる幅を1280pxあたりに
   することはできますか？」。**「追加 CSS クラス」に `is-stack-below-1280` を付けたカラムは、コアの縦積み（781px 以下）に
   加えて、782〜1279px でも縦に積む。** 1280px はテーマの幅広（`theme.json` の `layout.wideSize`）と同じ。
   決定と理由は docs/renewal/theme/columns-sp-reverse.md。

   **ブロック単位の「追加 CSS」ではなくテーマに置くのは、`@media` が要るから**（docs/renewal/theme/css.md）。

   **やることはコアの 781px 以下の縦積みと同じ 2 つだけ**（WordPress 7.1.2 の `blocks/columns/style.css`）:
   親を `flex-wrap: wrap`、各カラムを `flex-basis: 100%`。`!important` は、コアが 782px 以上で当てる
   `flex-wrap: nowrap !important` と、カラムの幅（インラインの `flex-basis`）を上書きするためだけに使う（上の節と同じ例外）。
   - **「並び順を逆にする」（`is-sp-reverse`）も付いていれば、この幅でも逆にする**（781px 以下と同じ `wrap-reverse`）。
     縦に積むのに逆にならない幅がはさまると、幅を変えるたびに上下が入れ替わって見えるため。
   - 「モバイルでは縦に並べる」をオフにしたカラム（`is-not-stacked-on-mobile`）は対象外（上の節と同じ理由）。
   - 編集画面にも効く（`style.css` はキャンバスへも入る）。キャンバスが 1280px より狭いと、編集画面でも縦に積んで見える。
   - **1280px の境目は範囲の書き方（`width < 1280px` / `width >= 1280px`）で書く**（この節と下の 3 つの節）。
     `max-width: 1279px` と `min-width: 1280px` だと、1279.5px のような端数の幅（ブラウザの拡大率で出る）で
     どちらにも当たらず、題字の画像が 2 つとも出た（2026-09-25 のレビューで直した。テーマ 0.2.147）。
     コアのブロックの「表示」設定も同じ書き方（`width <= 781px` など）。下端の 782px はコアのカラムが横並びに戻る
     `min-width: 782px` と同じ。 */

@media (782px <= width < 1280px) {
	.wp-block-columns.is-stack-below-1280:where(:not(.is-not-stacked-on-mobile)) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.is-stack-below-1280:where(:not(.is-not-stacked-on-mobile)) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.is-stack-below-1280.is-sp-reverse:where(:not(.is-not-stacked-on-mobile)) {
		flex-wrap: wrap-reverse !important;
	}
}

/* 1280px を境に出し分ける（is-only-below-1280 / is-only-from-1280）
   ==========================================================================

   2026-09-25 ユーザー依頼「mv-ttl.svg と osakainnovationhub-sp.svg の切り替えをいまコアの表示非表示を使っているのですが、
   カラムブロックが落ちるclassに変更できますか？」。上の `is-stack-below-1280` でカラムが縦に積まれる幅と同じ境目で、
   ブロックを出し分ける追加 CSS クラス。**コアの「表示」設定の区切り（480px / 781px）では 1280px を指定できない**ため。
   - `is-only-below-1280`: 1280px 未満だけ出す（縦に積んだとき用。トップページの 1 行の題字）
   - `is-only-from-1280`: 1280px 以上だけ出す（左右に並んだとき用。トップページの縦 3 行の題字）

   **編集画面では効かせない**（`:not(.block-editor-block-list__block)`）。編集画面の幅で片方が消えると、選んで直せなくなるため。
   編集画面では両方が見える。
   **`!important` はコアの「表示」設定（`wp-block-hidden-*` の `display: none !important`）と同じ扱い。** 隠す指定は、
   ブロック自身の `display`（画像やグループのレイアウト）に負けてはいけないため。 */

@media (width >= 1280px) {
	.is-only-below-1280:not(.block-editor-block-list__block) {
		display: none !important;
	}
}

@media (width < 1280px) {
	.is-only-from-1280:not(.block-editor-block-list__block) {
		display: none !important;
	}
}

/* 700〜1279px で左右に余白を取り、中身を中央に寄せる（is-inset-700-1279）
   ==========================================================================

   2026-09-25 ユーザー依頼（デザイナーと相談のうえ）「700～1279 の間は左右にマージンもしくはパディングがついて
   真ん中にギュッと表示されるようにできないでしょうか？この左右の余白も幅によって可変するものであるとうれしいです。」。
   トップページのメインビジュアルで、縦に積んだカラム（is-stack-below-1280）のスライダーが幅いっぱいに広がり、
   1279px で約 1125 × 750px になっていたため。スライダーの入ったカラムに付ける。
   **1 行の題字の画像（`osakainnovationhub-sp.svg`）にも付ける**（2026-09-25 ユーザー依頼「osakainnovationhub-sp.svg も
   スライダーと同じ余白がつくようにできますか？」）。縦に積んだときは左右のカラムが同じ幅なので、同じ式の余白で
   スライダーと左右の端がそろう。**カラムに限らず、どのブロックにも付けられる**（0.2.144 で `.wp-block-column` の限定を外した）。

   **余白は画面幅に比例して増やす**（`20vw - 92px`。700px で 48px、1000px で 108px、1260px 以上で 160px に止める）。
   メインビジュアルのカラムの中身の幅（画面幅から左右 6vw を引いたもの）では、スライダーの幅は 700px で約 520px、
   1000px で約 664px、1279px で約 806px。数値はデザイナーの確認で変えてよい（下限・傾き・上限の 3 つ）。

   - **`padding`（内側の余白）で取る。** `margin` だとカラムの幅（コアの `flex-basis: 100%`）の外へはみ出す。
     テーマは `content-box` のままなので `box-sizing: border-box` を足し、余白を幅の中へ収める。
   - 画像に付けたときは `figure` の内側に余白が付き、画像はその内側の幅に収まる（題字の画像は、ブロックの
     「追加 CSS」で `img` を `width: 100%` にしてあるので、内側の幅いっぱいに広がる）。
   - 699px 以下（スマホ）と 1280px 以上（左右に並ぶ）では何もしない。 */

@media (700px <= width < 1280px) {
	.is-inset-700-1279 {
		box-sizing: border-box;
		padding-inline: clamp(48px, 20vw - 92px, 160px);
	}
}

/* 1280px 以上だけ幅 77%、それより狭いと幅いっぱい（is-width-77-from-1280）
   ==========================================================================

   2026-09-25 ユーザー決定。トップページのメインビジュアルの「OIHについて詳しくみる」のリンク（グループ）は、
   PC 用（ブロックの「追加 CSS」で `width: 77%`）とスマホ用（幅いっぱい）の 2 つをコアの「表示」設定（781px）で
   出し分けていた。1 つにまとめ、左右に並ぶ 1280px 以上（is-stack-below-1280 の境目）でだけ 77% にする
   （ユーザー回答「PCは77%にしたいのですが、折り返し後は100%になってもいいです」）。

   - **中身より狭くしない（`min-width: max-content`）。** 1280px で左のカラムは約 420px しかなく、77%（約 320px）では
     「OIHについて詳しくみ／る」「MOR／E」と折れていた。中身の幅までは広がる。
   - 1279px 以下では何もしない（グループは幅いっぱいのまま）。スマホの狭い幅で中身が入りきらないときは、
     文言の方が折り返す（`min-width` を当てないので、はみ出さない）。 */

@media (width >= 1280px) {
	.is-width-77-from-1280 {
		width: 77%;
		min-width: max-content;
	}
}

/* 781px 以下で横並びにする（is-row-below-782）
   ==========================================================================

   2026-09-25 ユーザー依頼「このカラムの下の Informationと　ALL→　について、1列になったときに横並びにできないでしょうか？」。
   縦並びのグループ（レイアウト: フレックス・縦）に付けると、カラムが 1 列になる 781px 以下で横並びにし、
   両端に寄せて（`space-between`）縦は中央にそろえる。トップページの INFORMATION の見出しと「ALL →」を包むグループに付けた。

   **コアの「画面幅ごとのスタイル」では作れない**（WordPress 7.1.2 の不具合）。縦並びのグループに、タブレット・モバイルで
   向きを「横」にする上書きを入れても、コアは `flex-direction: row` を出さず、縦並び（基本の `flex-direction: column`）の
   ままになる（`wp-includes/block-supports/layout.php` の flex の枝: 縦のときだけ `flex-direction` を出し、横は既定だとして
   出さない。2026-09-25 に `oih` で実読・実測）。逆向き（横 → 縦）は効く。

   詳細度はコアのレイアウトの規則（`.wp-container-core-group-is-layout-…`＝(0,1,0)）に勝つ (0,2,0)。 */

@media (max-width: 781px) {
	.is-row-below-782.is-layout-flex {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

/* よくある質問（core/accordion のブロックスタイル「よくある質問」）
   ==========================================================================

   2026-09-15 ユーザー依頼「アコーディオンブロックをよくある質問ブロックのように使えるのが一番うれしい」。
   **コアのアコーディオンをそのまま使い、見た目だけをこのスタイルで足す。独自ブロックは作らない**
   （2026-09-15 決定 → docs/renewal/records/faq-accordion-2026-09-15.md）。
   独自化すると、開閉（Interactivity API）・`aria-expanded` / `aria-controls` / `role="region"`・
   閉じているときの `hidden="until-found"`（Ctrl+F で見つかって自動で開く）・
   閉じた項目の画像へ付く `fetchpriority="low"` を、すべて書き直すことになる。

   コアが出すマークアップ（`wp-includes/blocks/` の accordion 系 4 ブロックを 2026-09-15 に oih で実読）:

	 div.wp-block-accordion[role="group"]
	   └ div.wp-block-accordion-item
		   ├ h3.wp-block-accordion-heading.has-icon.has-icon-right
		   │   └ button.wp-block-accordion-heading__toggle
		   │       ├ span.wp-block-accordion-heading__toggle-title（質問文）
		   │       └ span.wp-block-accordion-heading__toggle-icon[aria-hidden]（中身は「+」の文字）
		   └ div.wp-block-accordion-panel[role="region"]（回答）

   **「Q」「A」は本文に書かず擬似要素で出す**（2026-09-15 決定）。本文へ手で入れると表記が割れ
   （実際に `Q` と `Q.` が混ざっていた）、Bogo の翻訳対象にも入る。
   `content` の `/ ""` は代替テキストを空にする指定で、読み上げから外れる。質問は見出し＋ボタン、
   回答は `role="region"` として読まれるので、Q/A は音では情報を足さない。
   **`content` を 2 行書いてあるのは削らない。** `/ ""` を解さないブラウザは宣言ごと捨てるため、
   1 行だと「Q」「A」が消える。1 行目が保険で、解せるブラウザだけが 2 行目で上書きする。 */

.wp-block-accordion.is-style-faq {
	/* 「Q」「A」を置く左の幅を、**質問と回答で別々に持ってから広い方を採る。**
	   ラベルは片側ずつ変えられる（「Q」のままで回答だけ「回答」にできる）ので、
	   幅を 1 本で持つと狭い方に合わせたときに文字がはみ出す。
	   `max()` で束ねておけば、**質問文と回答文の左端は必ずそろう**（2026-09-16 決定）。
	   片側を「表示しない」にしても列は残り、**両方を消したときだけ 0 になる。**

	   **`rem` で持つ。** `em` にすると文字サイズを変えたラベル自身の上で解決され、幅が変わる。
	   値はカンプの目視で、実測ではない（DS02 が来たら見直す）。
	   **`0rem` と書く箇所がある**（下の「表示しない」）。`max()` の中では単位の無い `0` を混ぜられない。 */
	--piyopiyo-faq-width-q: 2.25rem;
	--piyopiyo-faq-width-a: 2.25rem;
	--piyopiyo-faq-label-width: max(var(--piyopiyo-faq-width-q), var(--piyopiyo-faq-width-a));

	/* ラベルと開閉アイコンの色。**2 か所を 1 本で持つ**ので、片方だけ色が残ることが起きない。
	   エディターで色を選ぶと `inc/faq-labels.php` が `--piyopiyo-faq-color` をインライン style へ書く。

	   **差し込みは別の変数で受けて、ここで fallback を付ける。** 直に上書きさせると、
	   選んだ色が `theme.json` から消えた場合（パレットの入れ替え・別サイトからのコピー）に
	   `var(--wp--preset--color--<slug>)` が解決できず、**この変数ごと無効**になる。
	   そうなると `color` は継承（黒）、`background-color` は初期値（透明）へ落ち、
	   **緑の丸が黙って消える**（2026-09-16 に Chrome で再現）。1 段はさむと既定の緑へ戻る。 */
	--piyopiyo-faq-accent: var(--piyopiyo-faq-color, var(--wp--preset--color--action));
}

/* 項目。区切り線は項目の下端へ引く（カンプは最後の項目の下にも線がある）。
   コアのレイアウトが入れる項目どうしの間隔（`blockGap` = 24px）は消す。間隔は開閉ボタン自身の
   上下パディング（コア既定の 1em）で作り、線が上下の中央へ来るようにするため。 */
.wp-block-accordion.is-style-faq > .wp-block-accordion-item {
	border-bottom: 1px solid var(--wp--custom--color--rule);
}

.wp-block-accordion.is-style-faq > * + * {
	margin-block-start: 0;
}

/* 開閉ボタン。コアが `display: flex` にしているので、擬似要素の「Q」がそのまま 1 つ目の項目になる。
   **`align-items: baseline`** にすると、「Q」の文字サイズを変えても質問文の 1 行目と文字の下端が揃う
   （コア既定の `center` だと大きい方へ引きずられてずれる）。
   アイコンだけは行の中央へ置く。質問が 2 行になったときに上へ寄らないようにするため。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-heading__toggle {
	align-items: baseline;
	/* **コア既定の上下パディングは 1em ではない。** コアは `var(--wp--preset--spacing--20, 1em)` と
	   書いているが、`--wp--preset--spacing--20`（コア既定の 0.44rem）は `defaultSpacingSizes: false`
	   でも CSS 変数として残るため、予備の 1em は使われず **7.04px** になる（2026-09-15 実測）。
	   行の間隔はここで決める。区切り線が上下の中央へ来る。 */
	padding-block: var(--wp--preset--spacing--md);
}

/* 「Q」。**幅は `flex-basis` で固定せず、`min-width` で下限だけ決める。**
   固定すると、文字サイズを大きくしたときにラベルが箱からあふれて質問文へ重なる。
   下限にしておけば、あふれる代わりに箱が広がる（そろわなくなるだけで、読めなくはならない）。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-heading__toggle::before {
	flex: 0 0 auto;
	min-width: var(--piyopiyo-faq-label-width);
	color: var(--piyopiyo-faq-accent);
	font-size: 1.2em;
	font-weight: 700;
	content: "Q";
	content: "Q" / "";
}

/* アイコン。コアは「+」の文字を `aria-hidden` の span で出し、開くと 45 度回して × にする
   （`wp-includes/blocks/accordion-item/style.css`）。**回転はコアのまま**で、丸と色だけを足す。
   丸は `em`（質問の文字サイズ基準）。カンプの比率を、文字サイズを変えても保つため。
   **アイコンへ `font-size` を書かない。** 書くと `width` の `em` がその値の上で解決され、丸の大きさが狂う。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-heading__toggle-icon {
	flex: 0 0 auto;
	align-self: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background-color: var(--piyopiyo-faq-accent);
	color: var(--wp--preset--color--base);
	font-weight: 400;
	line-height: 1;
}

/* 回答。左の余白へ「A」を置く。
   **パネルの `display` は変えない。** 中に入るのは任意のブロックなので、グリッドや flex にすると
   段落・リスト・画像の並びまで巻き込む。位置指定だけで済ませる。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-panel {
	position: relative;
	padding-left: var(--piyopiyo-faq-label-width);
}

.wp-block-accordion.is-style-faq .wp-block-accordion-panel::before {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--piyopiyo-faq-accent);
	font-size: 1.2em;
	font-weight: 700;
	content: "A";
	content: "A" / "";
}

/* 下の余白は開いているときだけ付ける。
   **閉じているパネルへ縦の余白を付けてはいけない。** コアは閉じたパネルを `display: none` ではなく
   `hidden="until-found"`（= `content-visibility: hidden`）で隠す。中身は描かれないが**箱は残る**ので、
   縦の余白があるとその分の帯が閉じたまま見える。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-panel:where(:not([hidden])) {
	padding-bottom: var(--wp--preset--spacing--md);
}

/* ラベルの選び直し（和文・表示しない）
   ==========================================================================

   2026-09-16 ユーザー要望「Q や A をアイコンや他の文字に変更したい」。
   インスペクターの「質問のラベル」「回答のラベル」が追加 CSS クラスを付け外しし、
   ここがその見た目を持つ（`src/faq-labels/editor.jsx`）。

   **選べるものが決まっているので、CSS に静的に書ける**（2026-09-16 決定）。
   PHP が差し込むのは、値が無限にあるもの（アイコンの形）とパレットの色だけ。
   アイコンにしたときのマスクは `src/faq-labels/base.css`。

   **`content` は必ず 2 行書く**（上の節と同じ理由）。`/ ""` を解さないブラウザは宣言ごと捨てるので、
   1 行だと文字が消える。1 行目が保険で、解せるブラウザだけが 2 行目で上書きする。 */

/* 和文のラベル（「質問」「回答」）。**こちらは `font-size` を上げない。**
   全角 2 文字を 1.2em で出すと、質問文より目立ってしまう。 */
.wp-block-accordion.is-style-faq.is-faq-q-jp .wp-block-accordion-heading__toggle::before {
	font-size: 1em;
	content: "質問";
	content: "質問" / "";
}

.wp-block-accordion.is-style-faq.is-faq-a-jp .wp-block-accordion-panel::before {
	font-size: 1em;
	content: "回答";
	content: "回答" / "";
}

/* 和文は全角 2 文字ぶん広げる。質問の文字サイズ（既定 28px）で 2 文字＝56px に、
   文字と本文の間隔を足した値。**カンプの目視で、実測ではない**（DS02 で見直す）。 */
.wp-block-accordion.is-style-faq.is-faq-q-jp {
	--piyopiyo-faq-width-q: 4.5rem;
}

.wp-block-accordion.is-style-faq.is-faq-a-jp {
	--piyopiyo-faq-width-a: 4.5rem;
}

/* 表示しない。**箱は残して中身だけ空にする。** `content: none` にすると箱ごと消え、
   もう片方のラベルが残っているときに質問文と回答文の左端がずれる。 */
.wp-block-accordion.is-style-faq.is-faq-q-none .wp-block-accordion-heading__toggle::before {
	content: "";
	content: "" / "";
}

.wp-block-accordion.is-style-faq.is-faq-a-none .wp-block-accordion-panel::before {
	content: "";
	content: "" / "";
}

/* 幅の要求は 0 にする。**もう片方が残っていれば `max()` がそちらを採る**ので列は消えず、
   両方を「表示しない」にしたときだけ左の余白そのものが無くなる。 */
.wp-block-accordion.is-style-faq.is-faq-q-none {
	--piyopiyo-faq-width-q: 0rem;
}

.wp-block-accordion.is-style-faq.is-faq-a-none {
	--piyopiyo-faq-width-a: 0rem;
}

/* 開閉アイコンの丸を外す（is-faq-icon-plain）
   ==========================================================================

   2026-09-16 ユーザー要望「開くボタンのレイアウトも変更したい」。
   **コアの「＋」はそのまま**で、丸（面）だけを外して線の色をラベルとそろえる。
   大きさはコアの既定（1.2em）へ戻す。丸が無いのに 1.75em のままだと、余白だけが残る。 */
.wp-block-accordion.is-style-faq.is-faq-icon-plain .wp-block-accordion-heading__toggle-icon {
	width: 1.2em;
	height: 1.2em;
	border-radius: 0;
	background-color: transparent;
	color: var(--piyopiyo-faq-accent);
}

/* コアの「アイコンの位置」が左のとき（has-icon-left）
   ==========================================================================

   コアは位置を変えると**出力の順番ごと入れ替える**（`accordion-heading` の save）。
   何もしないと `Q → アイコン → 質問文` になり、左の列に 2 つ並んで見える。
   **アイコンを列の外側（いちばん左）へ出す**（2026-09-16 決定）。
   `order` は擬似要素にも効くので、アイコンだけを前へ送れば並びが直る。 */
.wp-block-accordion.is-style-faq .wp-block-accordion-heading.has-icon-left .wp-block-accordion-heading__toggle-icon {
	order: -1;
	/* 右に置くときはコアのレイアウト（質問文が `flex: 1`）が間隔を作るが、左では作らない。
	   アイコンと「Q」が触れて見えるので、ここで間隔を持つ（2026-09-16 実測）。 */
	margin-inline-end: var(--wp--preset--spacing--xs);
}

/* アコーディオンの開閉ボタンのフォーカスリング
   ==========================================================================

   コアは `:not(:focus-visible)` のときに outline を消すだけで、フォーカス時はブラウザ既定のまま
   （`wp-includes/blocks/accordion-heading/style.css`）。`theme.json` の
   `styles.elements.button:focus` は `.wp-element-button` にしか当たらず、開閉ボタンは素の
   `<button>` なので当たらない。同じ値をここで当てて、ページ内のボタンと見え方をそろえる
   （2026-09-15 決定。**コアの挙動は変えず CSS を足すだけ**）。

   **「よくある質問」スタイルの中だけに閉じない。** 閉じると、FAQ 以外でアコーディオンを使ったときだけ
   枠が変わって不統一になる。 */
.wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* カード（core/group のブロックスタイル「カード（枠つき）」）
   ==========================================================================

   2026-09-15。カンプ（よくあるご質問）の白い角丸の枠。**値はカンプの目視で、実測ではない**
   （DS02 が来たら見直す → docs/renewal/records/faq-accordion-2026-09-15.md）。

   **ブロックスタイルが持つのは角丸・枠線・内側の余白まで。** パターンへ実値を書かずに同じ見た目を
   配れる（docs/renewal/theme-implementation.md「パターンは既定値で作る」）。
   エディターで角丸・枠線・余白を変えるとインラインスタイルになるので、そちらが勝つ。 */
.wp-block-group.is-style-card {
	border: 1px solid var(--wp--custom--color--border);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--xl);
}

/* 背景だけは詳細度 0 で当てる。`:where()` の中は詳細度に加算されないため、エディターで背景色を
   選ぶと付く `has-*-background-color`（0,1,0）がこちらに勝つ。選ばなければ白になる。 */
:where(.wp-block-group.is-style-card) {
	background-color: var(--wp--preset--color--base);
}

/* 782px 未満: 内側の余白を詰める。64px のままだと中身の幅が残らない。
   ブレイクポイントは沿革のタイムライン・ステップの流れ・概要の表と同じ 781px。 */
@media (max-width: 781px) {
	.wp-block-group.is-style-card {
		padding: var(--wp--preset--spacing--md);
	}
}

/* チップ（core/post-terms のブロックスタイル「チップ」）
   ==========================================================================

   2026-09-19。お知らせの一覧のカンプ（日付｜色つきのカテゴリーチップ｜タイトル）から起こした。
   ターム 1 つずつを角丸の札にする。決定と理由は docs/renewal/theme.md
   「投稿カテゴリーの色とお知らせ一覧のチップ（2026-09-19 決定）」。

   **色はここでは決めない。** `inc/term-chip.php` が、描画後のリンクへ `--piyopiyo-chip-bg` と
   `--piyopiyo-chip-fg` を差し込む（色はサイト専用プラグインがタームのメタとして持つ）。
   **差し込みが無ければ面グレーに黒文字**になる。色が未設定のカテゴリー、プラグインが無効なとき、
   編集画面のキャンバス（JS が描くので差し込みを通らない）がこれに当たる。

   **幅の下限をそろえて文字を中央へ寄せる。** 名前の長さが違うカテゴリーが縦に並んでも、
   チップの左右の端とタイトルの書き出しが揃う（カンプどおり）。長い名前は下限を越えて伸びる。

   寸法は **カンプの目視による仮値**（実測ではない）。デザインシステム 02 が来たら見直す（保留 #60）。
   em で持つので、エディターで文字サイズを変えるとチップも一緒に伸び縮みする。 */
.wp-block-post-terms.is-style-chip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

/* 区切りの文字は出さない。チップどうしの間隔は上の gap が持つ。 */
.wp-block-post-terms.is-style-chip .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms.is-style-chip a {
	display: inline-block;
	box-sizing: border-box;
	min-width: 9.5em;
	padding: 0.35em 1em;
	border-radius: 999px;
	background-color: var(--piyopiyo-chip-bg, var(--wp--preset--color--surface));
	color: var(--piyopiyo-chip-fg, var(--wp--preset--color--contrast));
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	/* 名前は 1 行で出す前提だが、`white-space: nowrap` にはしない。行の幅より長い名前（320px の画面に 24 文字など）が
	   来たときに、チップごと横へはみ出すため（2026-09-20 に Playground で実測）。横並びの子は「中身の幅」を
	   基準に置かれるので、**行に収まるあいだは折り返さず**、収まらないときだけチップの中で折り返す。 */
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* チップの修飾: ハッシュタグ（is-chip-hashtag）と四角（is-chip-square）
   ==========================================================================

   2026-09-25。イベントの個別ページのカンプ（開催日の右に紫の丸い札「#レイター」、その右に角の小さい
   四角の札「ピッチ」「OIH主催」）から起こした。決定は docs/renewal/theme/event-single.md
   「成長フェーズとイベントタグ（2026-09-25 決定・grilling）」決定 6・12。

   ブロックスタイル「チップ」に**追加 CSS クラスで足す**修飾。ブロックスタイルは 1 つしか選べず、
   `inc/term-chip.php` の色の差し込みは「チップ」を目印にしているため、スタイルは分けない。
   **タクソノミー名はここに書かない。** どのタームに付けるかはテンプレートが決める。

   - `is-chip-hashtag`: 名前の前に「#」を付け、幅は名前に合わせる（成長フェーズ）。
     「#」は見た目の記号なので読み上げさせない（`content` の代替テキストを空にする。
     代替テキストの書き方を知らないブラウザは、1 つ目の宣言で「#」だけを出す）。
   - `is-chip-square`: 角を小さくし（4px。板・CTA カードと同じ）、幅は名前に合わせる（イベントのカテゴリー）。
     **形で成長フェーズと見分ける。** ピックアップのカレンダーの色（#F8B400）がプレシードの色（brand-yellow）と同じため。

   詳細度は `:where()` で「チップ」の節（0,2,1）とそろえ、後ろに置いて勝たせる。 */
.wp-block-post-terms.is-style-chip:where(.is-chip-hashtag, .is-chip-square) a {
	min-width: 0;
}

.wp-block-post-terms.is-style-chip:where(.is-chip-hashtag) a::before {
	content: "#";
	content: "#" / "";
}

.wp-block-post-terms.is-style-chip:where(.is-chip-square) a {
	border-radius: 4px;
}

/* ターム名の色の点（core/term-name のブロックスタイル「色の点」）
   ==========================================================================

   2026-09-23。お知らせの個別ページのカンプ（サイドバーの「カテゴリー」）から起こした。
   名前の左に、カテゴリーの色の丸い点を置く。決定は docs/renewal/theme/news.md「お知らせの個別ページ（2026-09-23）」。

   **色はここでは決めない。** チップと同じく `inc/term-chip.php` が、外側の要素へ `--piyopiyo-chip-bg` を差し込む。
   **差し込みが無ければ枠線の灰色**（面グレーの `surface` は白地で見えないため、チップの既定とは変えた）。
   色が未設定のカテゴリー、サイト専用プラグインが無効なとき、編集画面のキャンバスがこれに当たる。

   点は飾りなので擬似要素で描き、読み上げには出さない（`content` は空）。寸法はカンプの目視による仮値（保留 #60）。 */
.wp-block-term-name.is-style-color-dot {
	display: flex;
	align-items: center;
	gap: 0.6em;
}

.wp-block-term-name.is-style-color-dot::before {
	content: "";
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background-color: var(--piyopiyo-chip-bg, var(--wp--custom--color--border));
}

/* ブロックの文字揃え（中央・右）に追従させる。横並びにしたので `text-align` は効かない
   （コアは `has-text-align-center` などを外側の要素に付ける。WordPress 7.1.1 で実測）。 */
.wp-block-term-name.is-style-color-dot.has-text-align-center {
	justify-content: center;
}

.wp-block-term-name.is-style-color-dot.has-text-align-right {
	justify-content: flex-end;
}

/* ターム名のチップ（core/term-name のブロックスタイル「チップ」）
   ==========================================================================

   2026-09-23。イベントの個別ページのカンプ（サイドバーの「カテゴリー」）から起こした。Terms Query のタームを
   色つきの角丸の札で並べる。決定は docs/renewal/theme/event-single.md 決定 15・16。
   札の形はカテゴリーのチップ（core/post-terms の「チップ」）と同じにし、**幅の下限は持たない**（カンプは名前の長さなり）。

   **色はここでは決めない。** 色の点と同じく `inc/term-chip.php` が外側の要素へ `--piyopiyo-chip-bg` と `--piyopiyo-chip-fg` を
   差し込み、中のリンクが継ぐ。差し込みが無ければ面グレーに黒文字（チップの既定と同じ）。
   **札になるのはリンクだけ。** ブロックの「リンクにする」を切ると、名前は札にならない。
   並べ方（横並び・折り返し・間隔）は、親の Term Template のレイアウトの設定が持つ。 */
.wp-block-term-name.is-style-chip {
	margin: 0;
}

.wp-block-term-name.is-style-chip a {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.35em 1em;
	border-radius: 999px;
	background-color: var(--piyopiyo-chip-bg, var(--wp--preset--color--surface));
	color: var(--piyopiyo-chip-fg, var(--wp--preset--color--contrast));
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.wp-block-term-name.is-style-chip a:hover {
	text-decoration: underline;
}

/* 絞り込みのチップ（piyopiyo-filter-chips）と、その見出し（filter-label）
   ==========================================================================

   2026-09-23。起業家ライブラリの一覧のカンプから起こした。一覧（タームのアーカイブなど）への
   リンクを白地に枠線の角丸の札で並べ、いま表示中の一覧を緑で塗る。**絞り込みの仕組みは持たない**
   （ただのリンク。2026-09-23 ユーザー要件）。決定は docs/renewal/theme/library-archive.md（決定 2・9）。
   **2026-09-25 からイベントの一覧（`patterns/hidden-event-archive.php`）も使う**（docs/renewal/theme/event-archive.md）。
   **同じ日に、表示中の塗りを紺から緑（`action`）へ変えた**（イベントの一覧のカンプの色。起業家ライブラリも緑にしたいと
   ユーザーが決めたので、共通の指定を変えた。同文書の決定 18・21）。

   **印は追加 CSS クラス `piyopiyo-filter-chips`。** チップを並べるグループへ付ける。
   塗りは `aria-current="page"` で当てる。この属性は `inc/filter-chips.php` が描画のたびに足す
   （コアは表示中のタームに印を付けないため）。見た目と支援技術への伝達を 1 つの印で兼ねる。
   お知らせやイベントのカテゴリーにも使えるよう、クラス名に投稿タイプを入れていない。

   **編集画面では塗られない。** 属性を足すのはフロントの描画だけなので、キャンバスではどれも白い札に見える。

   寸法はカンプの目視による仮値（保留 #60）。 */

/* **「すべて」とタームのチップを 1 つの並びに流す。** Terms Query は `div > ul > li` で出すので、
   そのままでは「すべて」の横に ul が 1 つの塊として置かれ、折り返した 2 行目が「すべて」の幅だけ字下げされる。
   div と ul を `display: contents` にして、li をグループ（横並び・折り返し）の直下の子として並べる。
   **コアの年別アーカイブ（`core/archives` の `ul`）も同じ形で並べる**（2026-09-23。お知らせのサイドバー。
   `ul` の点と字下げはブラウザの既定なので、li をグループの直下へ出すと一緒に消える）。 */
.piyopiyo-filter-chips > .wp-block-terms-query,
.piyopiyo-filter-chips .wp-block-term-template,
.piyopiyo-filter-chips > .wp-block-archives {
	display: contents;
}

/* li は ul のブロックの間隔（is-layout-flow の margin）を持ち込むので消す。点も出さない。
   **`role="list"` は `inc/filter-chips.php` が ul に足す**（点を消したリストを Safari + VoiceOver に読ませるため）。 */
.piyopiyo-filter-chips .wp-block-term,
.piyopiyo-filter-chips > .wp-block-archives > li {
	margin: 0;
	list-style: none;
}

/* 「すべて」の段落とターム名の段落。間隔はグループの gap が持つ。 */
.piyopiyo-filter-chips p {
	margin: 0;
}

.piyopiyo-filter-chips a {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.35em 1em;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	line-height: 1.6;
	text-decoration: none;
}

.piyopiyo-filter-chips a:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* いま表示中の一覧。白文字と緑（#0B8520）の比は 4.78:1 で、4.5:1 を満たす（2026-09-25 に theme.json の値から計算）。 */
.piyopiyo-filter-chips a[aria-current="page"] {
	border-color: var(--wp--preset--color--action);
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

/* チップの並びの見出し。右へ罫線を伸ばす（カンプの「テーマで探す ────」）。 */
.filter-label {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	font-weight: 700;
}

.filter-label::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid var(--wp--custom--color--border);
}

/* 画面サイズ毎の改行（`piyopiyo-br`）
   ==========================================================================

   2026-09-16。文中の `<span class="piyopiyo-br"><br></span>` を、画面の幅によって改行にしたり
   しなかったりする。挿入と切り替えはツールバーの「画面サイズ毎の改行」
   （`src/responsive-br/editor.jsx`。リッチテキストのフォーマットなので、どのブロックの文中でも使える）。
   unitone の同じ機能に倣い、**「改行しない画面」のクラスを付ける向き**。何も付いていなければ
   素の `<br>` と同じで、どこでも改行する。クラシック HTML の本文に手で書いても効く。

   境界はテーマの他の部品と同じ（2026-09-16 ユーザー決定）。PC は 1024px 以上、タブレットは
   782px 以上 1024px 未満、スマートフォンは 782px 未満（スライダーの `breakpoints` の 782 / 1024 と、
   ボタンの縦積み・沿革・概要の表の 781px）。

   `add_editor_style()` で編集画面のキャンバスへも入るので、モバイルプレビューでも幅どおりに切り替わる。
   キャンバスで改行の場所を示す印は `src/responsive-br/editor.css`（フロントには入れない）。 */

/* 1024px 以上（PC）で改行しない */
@media (min-width: 1024px) {
	.piyopiyo-br--no-pc br {
		display: none;
	}
}

/* 782px 以上 1024px 未満（タブレット）で改行しない */
@media (min-width: 782px) and (max-width: 1023px) {
	.piyopiyo-br--no-tablet br {
		display: none;
	}
}

/* 782px 未満（スマートフォン）で改行しない */
@media (max-width: 781px) {
	.piyopiyo-br--no-sp br {
		display: none;
	}
}

/* 改行可能位置（`piyopiyo-wbr` / `has-piyopiyo-wbr`）
   ==========================================================================

   2026-09-16。文中の `<span class="piyopiyo-wbr"><wbr></span>` が「ここで折り返してよい」の印。
   挿入はツールバーの「改行可能位置」（`src/wbr/editor.jsx`。段落と見出しだけ）。

   **`<wbr>` は単独では日本語に効かない**（どの文字の間でも折り返せるため）。改行可能位置を 1 つでも含む
   段落・見出しには編集画面が `has-piyopiyo-wbr` を自動で付け外しし、ここで `word-break: keep-all`
   （文字の間で折り返さない）を当てる。これで改行可能位置と空白の位置だけで折り返す。
   `overflow-wrap: anywhere` は保険。1 つの区切りが枠より長いときに、はみ出さず文字の途中で折る
   （unitone の「自動改行」と同じ組み合わせ。`word-break: auto-phrase` は Chrome 以外が未対応なので使わない）。

   手で付けるトグルは無い（2026-09-16 ユーザー決定）。`add_editor_style()` で編集画面のキャンバスでも同じ位置で折り返す。
   キャンバスで改行可能位置を示す印は `src/wbr/editor.css`（フロントには入れない）。 */
.has-piyopiyo-wbr {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* 本文の長い語（URL など）の折り返し
   ==========================================================================

   2026-09-19。本文の長い URL（リンクの文字）が、スマホで本文の幅からはみ出していた
   （イベント 8170 / 8364 / 11257 / 12950。375px で 416〜628px。保留 #133）。
   URL には折り返せる位置が無いので、文字の大きさをそろえても直らない（4 件中 2 件は本文と同じ 16px）。
   `overflow-wrap: break-word` は、1 つの語が行に収まらないときだけ途中で折る。収まる語と和文の折り返しは変えない。
   `anywhere` と違って最小幅（表の列の幅の計算）には効かないので、表やカラムの見た目は変わらない。
   継承するので、本文の段落・見出し・リスト・リンクのすべてに効く。詳細度は 0（ブロックの設定で上書きできる）。
   `.is-root-container` は編集画面のキャンバスの本文（`add_editor_style()` で入る）。

   **表の値のセル（`td`）だけは `anywhere`。** 表の列の幅は中身の最小幅から決まり、`break-word` は最小幅に効かないので、
   セルの中の長い URL で表ごと本文の幅を超えた（イベント 4383 の開催場所。375px で 395px）。
   見出しのセル（`th`）には当てない（英語の項目名が語の途中で折れ、列が細くなるため）。
   差し込みで測ると、ほかの表の見出しの列の幅は 3px 以内しか動かない（15332 / 2035 / 10266 / 9554 / 8657）。 */
:where(.wp-block-post-content, .is-root-container) {
	overflow-wrap: break-word;
}

:where(.wp-block-post-content, .is-root-container) td {
	overflow-wrap: anywhere;
}

/* 本文の画像を本文の幅へ収める
   ==========================================================================

   2026-09-19。旧サイトから移したクラシック本文の `<img>` は、クラスが無いと元の幅のまま出て、本文からはみ出していた
   （起業家ライブラリ 14050 で 1000px の画像が 840px の本文から 160px。保留 #131）。
   コアが縮めるのは `wp-image-*` の付いた画像（`:where(img[class*=wp-image-])`）と、画像・ギャラリーなどのブロックの中だけ。
   2026-09-19 に `oih` の公開記事を数えると、それ以外の画像ではみ出す記事は PC で 133 件・幅 375px で 205 件あった。
   `height: auto` は縦横比を保つため。`width` / `height` 属性のある画像が、幅だけ縮んで縦に伸びないようにする
   （対象の画像に、高さだけの指定や元の画像と違う比の属性は無い。2026-09-19 に数えて 0 件）。
   詳細度は `img` の分だけ（ブロックの設定と、クラスを持つコアの指定が勝つ）。`.is-root-container` は編集画面のキャンバスの本文。 */
:where(.wp-block-post-content, .is-root-container) img {
	max-width: 100%;
	height: auto;
}

/* 改行禁止（`piyopiyo-nowrap`）
   ==========================================================================

   2026-09-16。ツールバーの「改行禁止」（`src/nowrap/editor.jsx`）で選択した範囲を
   `<span class="piyopiyo-nowrap">…</span>` で包み、途中で折り返さないようにする
   （固有名詞・数値と単位など）。VK Blocks の「No wrap」（`span.text-nowrap` ＋ Bootstrap）と同じ仕組み。

   **長い範囲を包むと、狭い画面で枠からはみ出す**（絶対に折り返さないため）。使う側が短い語に限る前提。
   `!important` は付けない（テーマの規約。ブロック単位の「追加 CSS」で上書きできる）。
   `add_editor_style()` で編集画面のキャンバスでも同じに見える。キャンバスの目印（点線の下線）は
   `src/nowrap/editor.css`（フロントには入れない）。 */
.piyopiyo-nowrap {
	white-space: nowrap;
}

/* お知らせの外部リンク（`piyopiyo-external-link`）
   ==========================================================================

   2026-09-17。一覧のタイトルが掲載元の外部サイトを指しているとき、`inc/news-external-link.php` が
   リンクへこのクラスと `--piyopiyo-external-link-after*` を差し込み、リンクの中に印の `<span>` を足す。
   **別タブで開くので印を出す**（2026-09-17 ユーザー決定 `Q3: 1` / `Q5: 1` →
   docs/renewal/records/news-external-url-2026-09-17.md）。2026-09-24 からイベントの一覧にも出る。

   同じ一覧の中に「サイト内へ行くリンク」と「外部へ飛ぶリンク」が混ざるため、
   見分けが付かないと不意打ちになる。**読み上げには、リンクの中に隠した一文の側が伝える**
   （`screen-reader-text`）。ここは見た目だけで、印の要素は装飾（`aria-hidden`）。

   **印は `::after` ではなく中の要素で描く**（2026-09-24 に変えた）。カード全体のリンク
   （`piyopiyo-card-link`。`src/card/link.css`）はタイトルのリンクの `::after` をカード全体の覆いに使うので、
   同じ擬似要素に印の幅・高さ・マスクを重ねると、覆いが印の大きさへ縮んでカードの大半が押せなくなる。
   印の要素は、アイコンの形が取れたときだけ PHP が足す（取れなければ黒い四角も余白も出ない）。

   大きさは **仮値**。見出しの文字（`large` / h3）より小さくしないと矢印が目立ちすぎる。
   デザインシステム 02 で一覧のカードが決まったら見直す（保留 #60）。 */
.piyopiyo-external-link__mark {
	display: inline-block;
	/* 幅は縦横比から出す。FontAwesome の viewBox は高さ 512 固定で幅が 9 種類ある。 */
	width: calc(0.8em * var(--piyopiyo-external-link-after-ratio, 1));
	height: 0.8em;
	margin-inline-start: 0.35em;
	/* 文字のベースラインへ合わせる。行の高さは変えない。 */
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask-image: var(--piyopiyo-external-link-after);
	mask-image: var(--piyopiyo-external-link-after);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* お知らせの一覧の行（news-row）
   ==========================================================================

   2026-09-19。パターン「お知らせ一覧（日付・チップ・タイトル）」（patterns/template-news-list.php）の 1 行。
   行はコアのグループ（横並び・折り返しあり）で、中は「日付＋チップのグループ」と「タイトル」の 2 つ。

   **タイトルの `flex-basis` が折り返しを決める。** 横並びの子は既定で「中身の幅」を要求するので、
   そのままでは**長いタイトルだけが次の行へ落ち、短いタイトルは同じ行に残る**（行ごとに並びが変わる）。
   基準の幅を 20em に固定すると、残りの幅が 20em を切る画面では**どの行もそろって** 2 行
   （1 行目が日付＋チップ、2 行目がタイトル）になり、広い画面では残りの幅いっぱいに伸びる
   （2026-09-19 ユーザー回答 `Q12: 1`）。`@media` が要らないので、置かれた場所の幅で決まる。

   上下の余白はカンプの目視による仮値（保留 #60）。狭い画面では 2 行になって行が高くなるので詰める。 */
.news-row {
	padding-block: clamp(var(--wp--preset--spacing--sm), 2.5vw, var(--wp--preset--spacing--lg));
}

.news-row > .wp-block-post-title {
	flex: 1 1 20em;
	min-width: 0;
}

/* 「日付＋チップ」のグループが折り返したとき（長い名前のカテゴリーが狭い画面に来たとき）の縦の間隔。
   グループの間隔（blockGap）は横の 40px で、そのまま縦にも当たると日付とチップが離れすぎる。
   コアが出す gap はクラス 1 つぶんの詳細度なので、クラス 2 つで勝てる。 */
.news-row > .wp-block-group {
	row-gap: var(--wp--preset--spacing--xs);
}

/* 日付は桁の幅をそろえる。日によって幅が変わると、縦に並んだチップの左端が揃わない。 */
.news-row .wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

/* 一覧のいちばん上にも罫線を引く（行が持つのは下の罫線だけ）。 */
.wp-block-post-template > :first-child > .news-row {
	border-top: 1px solid var(--wp--custom--color--rule);
}

/* ページ送り（core/query-pagination）
   ==========================================================================

   2026-09-19。お知らせの一覧のカンプから起こした。**サイト全体のページ送りに当てる**
   （2026-09-19 ユーザー回答 `Q10: 1`。一覧ごとに見た目を変える理由が無い）。
   番号と前後のリンクを四角い枠にし、現在のページをアクション色で塗る。
   中央寄せはブロックの設定（パターン側の `justifyContent`）が持つ。ここには書かない。

   寸法はカンプの目視による仮値（保留 #60）。**枠の 44px は指で押せる大きさの下限**として置いた。
   現在のページの白文字とアクション色（#0B8520）の比は 4.5:1 を満たす。 */
.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small);
}

/* コアは前後のリンクと番号に右と下のマージンを持たせている。間隔は gap が持つので消す
   （残すと中央寄せが右のマージンの分だけ左へずれる）。 */
.wp-block-query-pagination > .wp-block-query-pagination-previous,
.wp-block-query-pagination > .wp-block-query-pagination-numbers,
.wp-block-query-pagination > .wp-block-query-pagination-next {
	margin: 0;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75em;
	border: 1px solid var(--wp--custom--color--border);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-query-pagination-numbers a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* 現在のページ */
.wp-block-query-pagination-numbers .page-numbers.current {
	border-color: var(--wp--preset--color--action);
	background-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--base);
}

/* 省略の「…」は枠にしない（押せないため）。 */
.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: 0;
	padding: 0 0.25em;
	border-color: transparent;
	background-color: transparent;
}

/* 前後のリンクの矢印。枠線 2 本を 45 度回して「＞」にする（装飾なので読み上げには出ない）。
   **ブロックの設定でコアの矢印を出したときは、こちらを出さない**（二重になるため）。 */
.wp-block-query-pagination-previous::before,
.wp-block-query-pagination-next::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.wp-block-query-pagination-previous::before {
	margin-inline-end: 0.75em;
	transform: rotate(-135deg);
}

.wp-block-query-pagination-next::after {
	margin-inline-start: 0.75em;
	transform: rotate(45deg);
}

.wp-block-query-pagination-previous:has(.wp-block-query-pagination-previous-arrow)::before,
.wp-block-query-pagination-next:has(.wp-block-query-pagination-next-arrow)::after {
	content: none;
}

/* 狭い画面で一覧の件数を減らす（is-sp-limit-3 / is-sp-limit-4 / is-sp-limit-6）
   ==========================================================================

   2026-09-25 ユーザー依頼「トップページの起業家ライブラリのクエリーループは PC だと 12 記事を表示するようにしているが、
   スマホだと 12 記事だとスクロール量が多すぎる。スマホだと 6 記事くらいにしたい」。
   決定は docs/renewal/theme/top-page.md「起業家ライブラリのセクション：スマホの件数と ALL（2026-09-25 決定・grilling）」。

   **クエリーループの「追加 CSS クラス」に付ける**（投稿テンプレートの側に付けても効かない）。
   数字より後ろの投稿を、600px 以下で隠す。
   取得する件数は変わらない（件数は PHP が決めるので、画面幅では変えられない）。

   **600px はコアが投稿テンプレートのグリッドを 1 列にする幅**（`wp-includes/blocks/post-template/style.css` の
   `@media (max-width: 600px)`）。テーマの他の狭い画面の指定（781px）に合わせると、601〜781px ではグリッドが
   4 列のままなので「4 枚＋2 枚」の半端な並びになる。

   **ブロックの「追加 CSS」ではなくテーマに置くのは、`@media` が要るから**（→ ステップの流れと同じ理由）。
   件数を増やしたくなったら、2 つの規則の両方へ同じ形で 1 行ずつ足す。

   **フロントと編集画面で規則を分けている**（2026-09-25 のレビューで、編集画面のスマホ表示で効いていないのを見つけた）。
   - 編集画面は、選んでいる投稿（既定は先頭）の `li` を 2 つ描く。1 つは編集用、もう 1 つは `style="display: none;"` の
     隠れたプレビュー（`core/post-template` の編集側）。ただ `nth-child` で数えると隠れた分も数え、1 件少なく見える。
     編集画面の規則は `nth-child(… of :not([style*="display: none"]))` で、隠れた `li` を数えない。
   - 編集画面では、カードの高さの規則（`src/card/layout.css` の `.piyopiyo-card-height > li:has(…):not(:has(…))`。
     詳細度 (0,4,1)）が `display: flex` を当てる。編集画面の規則は `.block-editor-block-list__block` を足して (0,5,1) にしてある。
   - フロントの規則は、`of` を使わない形のまま（`of` を読めない古いブラウザでも効く）。編集画面の `ul` が持つ
     `.block-editor-block-list__block` を `:not()` で外し、編集画面では当てない。
   - `of` を読めないブラウザでは、編集画面の規則だけが捨てられ、編集画面で全件が見える（フロントには響かない）。
     **そのため 2 つを 1 つの規則にまとめない**（まとめると、読めないブラウザでフロントの規則も捨てられる）。 */

@media (max-width: 600px) {
	.is-sp-limit-3 > .wp-block-post-template:not(.block-editor-block-list__block) > li:nth-child(n + 4),
	.is-sp-limit-4 > .wp-block-post-template:not(.block-editor-block-list__block) > li:nth-child(n + 5),
	.is-sp-limit-6 > .wp-block-post-template:not(.block-editor-block-list__block) > li:nth-child(n + 7) {
		display: none;
	}

	.is-sp-limit-3 > .wp-block-post-template.block-editor-block-list__block > li:nth-child(n + 4 of :not([style*="display: none"])),
	.is-sp-limit-4 > .wp-block-post-template.block-editor-block-list__block > li:nth-child(n + 5 of :not([style*="display: none"])),
	.is-sp-limit-6 > .wp-block-post-template.block-editor-block-list__block > li:nth-child(n + 7 of :not([style*="display: none"])) {
		display: none;
	}
}

/* 起業家ライブラリの一覧のカード（library-card）
   ==========================================================================

   2026-09-23。パターン `patterns/hidden-library-archive.php`（`templates/archive-library.html` が読む）が使う。
   枠線・余白・並びはブロックの設定で持ち、ここには設定で表せないものだけを置く。
   決定は docs/renewal/theme/library-archive.md。 */

/* 会社名は値が入っていない記事もありうるので、空なら行ごと消す（「同じテーマの記事」と同じ扱い）。 */
.library-card__company:empty {
	display: none;
}

/* カードのタームのチップ。お知らせの一覧のチップ（幅の下限つき）より詰め、黄緑（brand-lime）で塗る。
   黄緑の上の黒文字の比は約 10:1。**`--piyopiyo-chip-bg` はブロックに置き、リンクへ継がせる。**
   `inc/term-chip.php` が色を差し込むのは、サイト専用プラグインが色を持つタクソノミー（`IOC_Category_Color::TAXONOMIES`）だけ。
   起業家ライブラリのカテゴリー（`library-category`）は入っていないので、ここで上書きされることは無い
   （**入れると、リンクへ直接書かれる色がこの黄緑に勝つ**）。
   詳細度はチップの節（0,2,1）と同じなので、後ろに置いて勝たせる。

   **文字はチップの既定（700）より 1 段細い 500**（2026-09-25 ユーザー「このカテゴリのフォントのウェイトを少し落としたい」）。
   Noto Sans JP の読み込みは 400 / 500 / 700（`functions.php`）なので、500 は合成ではなく実物の太さ。
   お知らせのチップ（色つき）は 700 のまま。

   **トップページの LIBRARY のカードも同じクラスを使う**（2026-09-25。同じ見た目を 2 か所で使うのでクラスにしてある）。
   付け方はパターンと同じで、`core/post-terms` にブロックスタイル「チップ」、追加 CSS クラス `library-card__terms`、文字サイズ「注釈」（`x-small`＝13px）。 */
.library-card__terms.is-style-chip {
	--piyopiyo-chip-bg: var(--wp--preset--color--brand-lime);
	gap: var(--wp--preset--spacing--xxs);
}

.library-card__terms.is-style-chip a {
	min-width: 0;
	padding: 0.15em 0.9em;
	font-weight: 500;
}

/* イベントの一覧のカード（event-card）
   ==========================================================================

   2026-09-25。パターン `patterns/hidden-event-archive.php`（`templates/archive-event.html` が読む）が使う。
   枠線・角丸・余白・並びはブロックの設定で持ち、ここには設定で表せないものだけを置く。
   決定は docs/renewal/theme/event-archive.md。 */

/* 開催日は「開催日」の語と日付を太字で並べ、間を 1 字あける（カンプの「開催日　2026.00.00」）。
   語は開催日ブロックの接頭辞（`prefix`）。ブロックの外枠に追加 CSS クラス `event-card__date` を付けてある。 */
.event-card__date {
	font-weight: 700;
}

.event-card__date .wp-block-piyopiyo-alpha-event-date__prefix {
	margin-inline-end: 1em;
}

/* 起業家ライブラリの個別ページ（page-eyebrow / lead-rule / lead-sub / cta-card）
   ==========================================================================

   テンプレート `templates/single-library.html` とテンプレートパーツ
   `parts/sidebar-library.html` が使う。決定と理由は
   docs/renewal/theme/library-single.md。

   **複数の箇所で使う見た目なので、追加 CSS クラスとしてここに置く**
   （AGENTS.md「見た目の CSS の持ち方は「何か所で使うか」で決める」）。
   お知らせ・イベントの個別ページも同じ形にする予定があるため、
   クラス名に投稿タイプを入れていない。**2026-09-23 からお知らせの個別ページ**
   （`templates/single-post.html` と `parts/sidebar-news.html`）も `panel` / `sidebar-section` / `cta-card` を使う。 */

/* 投稿タイプの名前の帯（パンくずの上）。
   **見出しではなく段落で組む。** `h1` は記事タイトルの 1 つだけにする
   （docs/renewal/theme/library-single.md 決定 6）。 */
.page-eyebrow {
	font-weight: 700;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	line-height: var(--wp--custom--line-height--heading);
}

/* キャッチコピー（`catch_copy` をバインディングで出す見出し）。左に太い縦線。
   カンプでは 2 行に折り返るので、縦線は行数にあわせて伸びる（`border-inline-start`）。 */
.lead-rule {
	padding-inline-start: 0.75em;
	border-inline-start: 4px solid var(--wp--preset--color--action);
}

/* キャッチコピーの下の一文（`sub_catch`）。**公開 72 件のうち 25 件にしか値が無い。**
   バインディングは値が無くても空の `<p>` を出すので、空なら行ごと消す
   （docs/renewal/theme/library-single.md 決定 5）。 */
.lead-sub:empty {
	display: none;
}

/* サイドバーの CTA バナー。 */
.cta-card {
	border: 1px solid var(--wp--preset--color--action);
	border-radius: 4px;
}

.cta-card__eyebrow {
	margin-bottom: 0;
	color: var(--wp--preset--color--action);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	text-transform: uppercase;
}

/* ボタンはカードの幅いっぱいに伸ばす。
   **ブロックの「幅」の設定（`wp-block-button__width-100`）は使わない。**
   カードの内側の固定の見た目で、編集者が 25 / 50 / 75% を選ぶ場面が無いため。 */
.cta-card .wp-block-buttons.is-vertical > .wp-block-button {
	width: 100%;
}

.cta-card .wp-block-buttons.is-vertical > .wp-block-button > .wp-block-button__link {
	width: 100%;
	justify-content: space-between;
}

/* 目次のリンクで飛んだとき、いきなり切り替わらずにスクロールする
   （docs/renewal/theme/library-single.md 決定 20）。
   **「動きを減らす」設定の人には効かせない**（`prefers-reduced-motion`）。
   ヘッダーは追従していないので `scroll-margin-top` は要らない。
   将来ヘッダーを追従させるなら、そのときに足す。 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* サイドバーの節の見出し（sidebar-section / sidebar-card）
   ==========================================================================

   カンプの「同じテーマの記事 ⟷ RELATED」のように、和文の見出しが左・英字ラベルが右・
   下に罫線、という形。**目次の節（③で足す）も同じ形**なので、ブロック側ではなく
   ここへクラスとして置く（docs/renewal/theme/library-single.md 決定 22）。 */

.sidebar-section__head {
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
}

.sidebar-section__head > * {
	margin: 0;
}

.sidebar-section__label {
	color: var(--wp--preset--color--action);
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	text-transform: uppercase;
}

/* 「同じテーマの記事」のカード。サムネイルを左、会社名と記事名を右へ。 */
.sidebar-card {
	align-items: flex-start;
}

.sidebar-card__image {
	flex: 0 0 auto;
	margin: 0;
}

.sidebar-card__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* 会社名は値が入っていない記事もありうるので、空なら行ごと消す
   （キャッチコピーの下の一文と同じ扱い）。 */
.sidebar-card__company:empty {
	display: none;
}

/* **関連記事が 0 件のときは、節ごと出さない**（見出しだけ残さない。
   docs/renewal/theme/library-single.md 決定 29）。
   件数が足りなくても新着では埋めないので、0 件になる記事がある
   （タームが `番外編` だけ、または 1 件しかないタームだけの記事）。

   コアはクエリーループが空のとき `.wp-block-post-template` を出さないので、
   **「クエリーループを含むのに投稿テンプレートが無い節」** を隠せばよい。 */
/* **クエリーループの有無に頼らない。** サイト専用プラグインが無いときは
   `inc/library-related.php` がクエリーループごと出さないので、
   `:has(> .wp-block-query)` で見ると節だけが残ってしまう。節の印で判定する。 */
.sidebar-section--related:not(:has(.wp-block-post-template)) {
	display: none;
}

/* **目次が 0 件のときも、節ごと出さない**（決定 21。`h2` が 0 個の記事が 9 件ある）。
   目次ブロックは見出しが無いと何も描かないので、`nav` が無ければ隠す。 */
.sidebar-section--toc:not(:has(.wp-block-piyopiyo-alpha-toc)) {
	display: none;
}

/* **開催予定のイベントが 0 件のときも、節ごと出さない**（イベントのサイドバーの「最近のイベント」。
   docs/renewal/theme/event-single.md 決定 14）。関連記事と同じく、投稿テンプレートが無ければ隠す。 */
.sidebar-section--upcoming:not(:has(.wp-block-post-template)) {
	display: none;
}

/* イベントの個別ページのカード（event-outline-card / event-contact-card）
   ==========================================================================

   2026-09-23。イベントの個別ページのカンプから起こした。決定は docs/renewal/theme/event-single.md。
   中身（行・ボタン）は独自ブロックが描き、その見た目はブロックの CSS（`src/event-outline/style.css` ほか）が持つ。
   ここが持つのは、パターンのコアブロックで組んだカードの枠の手当てだけ。

   **開催概要のカードは 2 か所に置く**（PC はサイドバー、スマホ・タブレットは本文の上。決定 17）ので、クラスとしてここに置く。 */

/* 開催概要。緑の見出しの帯をカードの角丸の内側で切る（帯の背景が角からはみ出さないように）。 */
.event-outline-card {
	overflow: hidden;
}

/* 見出しの帯の中の和文と英字。帯の上下の余白は見出しのグループが持つので、段落と見出しの余白を落とす。
   **文字色は帯のグループ（`base`）を継ぐ。** 見出しは `theme.json` の見出しの色が当たるので、継がせ直す
   （見出しブロックに文字色を持たせると、帯の色を変えたときに 2 か所を直すことになる）。 */
.event-outline-card__head > * {
	margin: 0;
	color: inherit;
}

.event-outline-card__label {
	font-weight: 600;
	letter-spacing: var(--wp--custom--letter-spacing--en);
	text-transform: uppercase;
}

/* 問い合わせ先。**名前も URL も無いイベントでは、カードごと出さない**（決定 6）。
   独自ブロックは値が無いと何も描かないので、ブロックが無ければカード（見出しを含む）を隠す。 */
.event-contact-card:not(:has(.wp-block-piyopiyo-alpha-event-contact)) {
	display: none;
}

/* セクション型の下地（panel）
   ==========================================================================

   本文とサイドバーの各節を白（`base`）の板で載せる
   （2026-09-22 ユーザー依頼「Lightning テーマのセクションベースのように」）。

   **板の外（`main`）に背景色は置かない**（2026-09-22 ユーザー指示
   「コンテンツエリア・サイドバー以外の背景色は透明のままにしておいていただきたい」）。
   **サイトの地は `theme.json` の `styles.color.background` ＝ `base`（白）**なので、
   いまは板と地が同じ色で、角丸だけが手がかりになる。**地の色はサイト側で決める前提。**

   **背景色と内側の余白はブロックの設定で持つ**（`theme.json` のトークンから選べる形にし、
   サイトエディターで調整できるようにするため）。ここが持つのは角丸だけ。

   左カラムは **880px**。880 ＋ 間隔 40 ＋ サイドバー 360 ＝ 1280 ＝ `wideSize`。

   **内側の余白は画面幅で変わる**（2026-09-23 決定。docs/renewal/theme/library-single.md 決定 44）。値は `theme.json` の
   `settings.custom.spacing` の 2 つで、ブロックの余白の設定がそれを指す（`var:custom|spacing|…`）:
   - `panel-inline`（本文の板の左右）: 画面 800px 以下で 24px、1600px 以上で 64px。1920px の画面で本文は 752px。
   - `panel-block`（本文とサイドバーの板の上下）: 800px 以下で 24px、1600px 以上で 40px。
     **本文とサイドバーで同じ値にして、PC で書き出しの位置をそろえる。** サイドバーの板の左右は 24px（`md`）のまま。 */

/* **幅に内側の余白を含める**（`border-box`）。テーマは `content-box` のままなので、これが無いと
   カラムの `flex-basis: 880px` が余白を除いた幅として扱われ、余白のぶん左カラムが膨らんでサイドバーを押す
   （2026-09-23 に Playground で実測。余白 64px の画面でサイドバーが 360 → 323px に縮んでいた）。
   幅を持たない節の板（サイドバー）は、どちらでも同じ。 */
.panel {
	box-sizing: border-box;
	border-radius: 4px;
}

/* 板の中では、先頭と末尾のブロックの余白を落とす（板の内側の余白と二重にしない）。 */
.panel > :first-child {
	margin-block-start: 0;
}

.panel > :last-child {
	margin-block-end: 0;
}

/* カラムが縦に並ぶ幅では、見えない板の左右の余白を外す
   ==========================================================================

   2026-09-27 ユーザー依頼「起業家ライブラリ投稿タイプとレポート投稿タイプのスマホのときの左右余白が少し広いみたいです。
   … https://oih.hogehogecojp.com/facility/ をスマホで表示したときと同じくらいの左右の余白にしたいです。」。
   781px 以下（コアのカラムが縦に積む幅）では、板は `main` の幅いっぱいに縦に並び、地と同じ白なので見えない。
   その内側の左右の余白（本文 `panel-inline`・サイドバーの節 `md`。どちらも 24px）が `main` の余白（`gutter`）に足され、
   固定ページより左右が 24px ずつ広かった（幅 375px で文字の書き出しが 20px → 44px）。

   - **本文の板は、トークン `panel-inline` をこの幅だけ 0 にする。** ブロックの余白の設定がトークンを指しているので、
     テンプレート（DB にある起業家ライブラリの個別ページのテンプレートも）を直さずに効き、`!important` も要らない。
   - **サイドバーの節（`sidebar-section`）は、余白をプリセット `md` で直に持つ**ので、ブロックの `style` 属性に勝つために
     `!important` を使う（コアの「画面幅ごとのスタイル」が出す規則と同じ）。
   - **枠線のある CTA カード（`cta-card`）は外さない。** 枠でカードとして見えているので、内側の余白が要る。
   - 上下の余白（`panel-block`）は変えない。**地の色を白以外にして板が見えるようになったら、この節を見直す。** */
@media (max-width: 781px) {
	.panel {
		--wp--custom--spacing--panel-inline: 0px;
	}

	.sidebar-section.panel {
		padding-inline: 0 !important;
	}
}


/* ==========================================================================
   スマホのメニュー（モーダル）
   ==========================================================================

   ヘッダーのスマホの行にあるナビ（「オーバーレイ: 常に」）を押すと開く全画面のメニュー
   （2026-09-25 決定。docs/renewal/theme/header-nav.md）。中身はテンプレートパーツ
   「モーダル（日本語）」「モーダル（英語）」（area `navigation-overlay`。`parts/navigation-overlay-*.html`）で、
   **開閉・フォーカスの移動・Esc で閉じる・背景のスクロール止めはコアが持つ**（テーマは JS を持たない）。

   コアはテンプレートパーツを使うモーダルに `disable-default-overlay` を付け、**背景色も余白も付けない**
   （「中身の側が自分で持つ」という作り。`wp-includes/blocks/navigation.php`）。背景色はパーツの
   いちばん外のグループが持つ（ブロックの設定で選べるようにするため）。ここでは、そのグループが
   画面の高さまで伸びるようにだけする。

   **高さは画面の高さ（`100vh` / `100dvh`）で持つ。** `min-height: 100%` では伸びなかった。コアのモーダルは
   `position: fixed` の外枠の中に何段も入れ子があり、途中の段が高さを持たないため。中身が画面より短いと
   下のページが透けて見えた（2026-09-25 に `oih` で実測。PC の幅でモーダルを開いて確認）。 */

.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__overlay-container > :first-child {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
}

/* 閉じるボタンは右端（カンプ）。ロゴと両端揃えで並べてあるが、ロゴが未設定のサイトでは
   相手がいないので左へ寄る（2026-09-25 に Playground で確認）。
   **行の最後に置いたときだけ寄せる。** サイトエディターで閉じるボタンを行の先頭（ロゴより前）へ
   移したときに、ロゴごと右へ押し出さないため（2026-09-25 のレビューで直した）。 */
.wp-block-navigation__overlay-container .wp-block-navigation-overlay-close:last-child {
	margin-inline-start: auto;
}

/* ブロックスタイル「モーダルのメニュー」（`is-style-drawer`。登録は functions.php）
   ==========================================================================

   モーダルの中のメニューを縦 1 列にし、項目ごとに区切り線と右向きの矢印を付ける（カンプ 360px）。
   **下の階層は親の下へ字下げして常に並べる**（ナビの「サブメニュー: 常に表示」＝ `submenuVisibility: always`）。
   コアは下の階層を、親の下に重ねて出す（`position: absolute` のドロップダウン）ので、
   このスタイルの中では流れの中へ戻す。

   **タップで開閉する形にはしていない。** WordPress 7.1 のコアは、モーダルが開いている間、
   中の下の階層を常に「開いた」扱いにする（`navigation/view.js` の `isSubmenuOpen` が外側のモーダルの
   `overlayOpenedBy` を引き継ぐ）。「クリックで開く」にしても `aria-expanded` が `true` のまま動かない
   （2026-09-25 に Playground で確認）。カンプも開いた状態だった。

   **矢印はコアのアイコン（下向きの山形の SVG）を使わず、線 2 本で描く。** リンクの項目（右向き）と
   下の階層を持つ項目（下向き。カンプ）を同じ形にそろえるため。 */

.wp-block-navigation.is-style-drawer,
.wp-block-navigation.is-style-drawer .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-block-navigation.is-style-drawer .wp-block-navigation-item {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid var(--wp--custom--color--rule);
}

.wp-block-navigation.is-style-drawer .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	width: 100%;
	box-sizing: border-box;
	padding-block: var(--wp--preset--spacing--sm);
	padding-inline: 0 var(--wp--preset--spacing--xxs);
	text-align: start;
	text-decoration: none;
}

/* 矢印（右向き）。文字の大きさに合わせ、行の右端へ寄せる。 */
.wp-block-navigation.is-style-drawer .wp-block-navigation-item__content::after {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	margin-inline-start: auto;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* 下の階層を持つ項目は下向き（カンプ）。 */
.wp-block-navigation.is-style-drawer .has-child > .wp-block-navigation-item__content::after {
	transform: rotate(135deg);
}

/* コアの下向きのアイコンは出さない（上の矢印と二重になる）。 */
.wp-block-navigation.is-style-drawer .wp-block-navigation__submenu-icon {
	display: none;
}

/* 下の階層。親の下へ字下げして並べる。 */
.wp-block-navigation.is-style-drawer .has-child .wp-block-navigation__submenu-container {
	display: flex;
	position: static;
	visibility: visible;
	opacity: 1;
	width: 100%;
	min-width: 0;
	height: auto;
	overflow: visible;
	padding: 0 0 var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 0;
	background: transparent;
	box-sizing: border-box;
}

/* 下の階層の項目どうしには区切り線を引かない（カンプ）。 */
.wp-block-navigation.is-style-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.wp-block-navigation.is-style-drawer .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: var(--wp--preset--spacing--xs);
}