/*
 * heritage-extra.css — 日本物理遺産 X-T9 Child 追加スタイルシート
 * ------------------------------------------------------------------
 * 用途:
 *   theme.json（デザイントークン）だけでは表現しきれない、
 *   「class を付ける実装」を選択できるようにするためのフック用 CSS。
 *
 *   例: DESIGN.md の署名的モチーフ（暗帯の斜めフォールド境界、
 *   工学グリッドの地紋、eyebrow の Cormorant Garamond italic、
 *   reveal アニメーション、heritage-card の状態など）を、
 *   ブロックに付与したユーティリティ class 経由で実装する場合の受け皿。
 *
 * 方針（docs/DESIGN.md 準拠）:
 *   - 角丸は 0 固定（構造要素に border-radius を付けない）。
 *   - 影・光彩で立体を作らない（奥行きは色の層と斜めフォールドで）。
 *   - 彩度の高い色・新しい色相を足さない（パレットは theme.json が全て）。
 *   - 色・余白・フォントは theme.json のプリセット変数
 *     （--wp--preset--color--*, --wp--preset--font-size--* 等）を参照する。
 *   - アニメーションは prefers-reduced-motion: reduce で必ず停止する。
 *
 * class ベースの実装を追加する段階で、このファイルに
 * ユーティリティ／コンポーネント class を追記していく。
 */

/* ==================================================================
 * トークン別名（theme.json のプリセット変数へのローカルエイリアス）
 * ------------------------------------------------------------------
 * public/assets/css/style.css の :root 実装（唯一の見た目の真実）を
 * 移植するにあたり、参照を theme.json のプリセット変数に固定するための
 * 別名。生の16進・px直書きを避け、DESIGN.md のトークンに紐付ける。
 * ================================================================== */
:root {
	--h-ink: var(--wp--preset--color--ink);
	--h-ink-2: var(--wp--preset--color--ink-2);
	--h-ink-3: var(--wp--preset--color--ink-3);
	--h-gold: var(--wp--preset--color--gold);
	--h-gold-2: var(--wp--preset--color--gold-2);
	--h-gold-soft: var(--wp--preset--color--gold-soft);
	--h-paper: var(--wp--preset--color--paper);
	--h-paper-2: var(--wp--preset--color--paper-2);
	--h-paper-3: var(--wp--preset--color--paper-3);
	--h-rule: var(--wp--preset--color--rule);
	--h-rule-gold: var(--wp--preset--color--rule-gold);
	--h-text: var(--wp--preset--color--text);
	--h-text-mute: var(--wp--preset--color--text-mute);
	--h-serif: var(--wp--preset--font-family--noto-serif-jp);
	--h-sans: var(--wp--preset--font-family--noto-sans-jp);
	--h-latin: var(--wp--preset--font-family--cormorant-garamond);
	--h-mono: var(--wp--preset--font-family--jetbrains-mono);
}

/* ==================================================================
 * ベースリセット
 * ------------------------------------------------------------------
 * 親テーマ(X-T9)の :where(body) が font-weight:500 を指定しているため、
 * 一次真実（public/assets/css/style.css の body）に合わせて 400 に戻す。
 * -webkit-font-smoothing:antialiased も一次真実と同様に全体へ適用する。
 * ================================================================== */
body {
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	/* 日本語テキストの折り返しを文字単位ではなく文節（フレーズ）単位にする。
	 * 単語の途中（例:「イベ」「ント」）で改行されるのを防ぐ。 */
	word-break: auto-phrase;
}

/* ==================================================================
 * 外部リンクアイコン（サイト全体共通）
 * ------------------------------------------------------------------
 * target="_blank" が付いたリンクのテキスト直後に、外部リンクであることを
 * 示す小さな矢印アイコンを自動付与する。今後どこに target="_blank" の
 * リンクを追加しても、クラスを個別に付けなくても自動的にアイコンが付く
 * 設計（ヘッダー/フッターの外部リンク・wp:navigation の「新しいタブで
 * 開く」設定を含む）。
 * - 画像だけをリンクにした箇所（:has(img)）ではアイコンを出さない
 *   （画像の上にテキストアイコンが乗るのを避けるため）。
 * - ボタン（core/button＝.wp-element-button）は既存の矢印装飾（.arr）を
 *   持つため対象外にし、二重装飾を避ける。
 * - color は指定せず currentColor 由来（mask-image + background-color:
 *   currentColor）にすることで、暗地・明地どちらのリンク文脈でも
 *   その場のテキスト色にそのまま追従する。
 * ================================================================== */
a[target="_blank"]:not(.wp-element-button):not(:has(img))::after {
	content: "";
	display: inline-block;
	width: .68em;
	height: .68em;
	margin-left: .28em;
	vertical-align: -0.05em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==================================================================
 * ページヒーロー（下層共通の見出し帯：hero の意匠を縮約）
 * DESIGN.md §Components / §Section Boundaries。
 * 直下セクションが白（paper）なので既定の白フォールド（無印）。
 * ================================================================== */
.page-hero {
	position: relative;
	overflow: hidden;
	color: var(--h-paper);
	isolation: isolate;
	/* 署名的グラデ：DESIGN.md 記載の page-hero 地。gradient stop の
	   #0a2e5a は style.css の一次真実からの移植値（意匠固定のため保持）。 */
	background:
		radial-gradient(ellipse at 78% 18%, rgba(78, 119, 160, .25), transparent 55%),
		radial-gradient(ellipse at 8% 85%, rgba(78, 119, 160, .12), transparent 50%),
		linear-gradient(180deg, #0a2e5a 0, var(--h-ink) 60%, #0a2e5a 100%);
}

.page-hero .grid-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}

.page-hero .grid-fine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(245, 243, 238, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 243, 238, .04) 1px, transparent 1px);
	background-size: 16px 16px;
	mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
}

/* .wrap はページごとに文脈スコープされた別定義（.about-main .wrap 等）しか
 * 存在せず、そのままでは .page-hero 単体（.about-main 等の親クラスを持たない
 * ページ、例: /news/・カテゴリー一覧・検索結果・404）では何のスタイルも
 * 効かず、タイトル部分がページ左端に張り付いてしまっていた（左右の余白が
 * 無い状態）。.page-hero 配下で汎用的に効く版を用意し、/about/ と同じ
 * 中央寄せ・最大幅・左右余白にする。 */
.page-hero .wrap {
	position: relative;
	z-index: 2;
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
}

@media (max-width: 720px) {
	.page-hero .wrap {
		padding: 0 var(--wp--custom--spacing--gutter-mobile, 22px);
	}
}

.page-hero .page-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 92px;
	padding-bottom: 104px;
}

/* パンくず（ページヒーロー内） */
.page-hero .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 12px;
	letter-spacing: .06em;
	color: rgba(245, 243, 238, .7);
	margin-bottom: 24px;
}

.page-hero .breadcrumb a {
	color: rgba(245, 243, 238, .7);
	text-decoration: none;
	transition: color .2s;
}

.page-hero .breadcrumb a:hover {
	color: var(--h-gold-soft);
}

.page-hero .breadcrumb .sep {
	opacity: .5;
}

/* 現在地クラム（post-title level 0 → 段落として描画） */
.page-hero .breadcrumb .wp-block-post-title {
	margin: 0;
	font-family: var(--h-sans);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .06em;
	line-height: 1.4;
	color: rgba(245, 243, 238, .55);
}

/* カテゴリ eyebrow（class タクソノミー → post-terms） */
.page-hero .is-style-eyebrow,
.page-hero .is-style-eyebrow.wp-block-post-terms {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	color: var(--h-gold-soft);
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 0 24px;
}

.page-hero .is-style-eyebrow::before {
	content: "";
	width: 48px;
	height: 1px;
	background: var(--h-gold);
	flex: none;
}

.page-hero .is-style-eyebrow a {
	color: var(--h-gold-soft);
	text-decoration: none;
}

.page-hero h1 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.22;
	letter-spacing: .03em;
	margin: 0 0 22px;
	color: var(--h-paper);
}

.page-hero h1 .jp-mark {
	color: var(--h-gold-soft);
	margin-right: 6px;
}

/* /news/ の h1 のみ：折り返し時、装飾（jp-mark）の下ではなく本文テキストの
 * 開始位置に2行目以降を揃える（ぶら下げインデント）。jp-mark と本文テキストを
 * それぞれ独立した flex アイテムにすることで、本文テキスト側の折り返しは
 * 自分のボックス内（jp-markの右）だけで完結する。 */
.news-h1 {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
}

.news-h1__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* post-title ブロックには span を差し込めないため、縦罫 | を擬似要素で付す */
.page-hero h1.wp-block-post-title::before {
	content: "|";
	color: var(--h-gold-soft);
	margin-right: 6px;
}

/* query-title ブロック（/class/ タクソノミーアーカイブ等）も同様に span を
   差し込めないため、同じ擬似要素方式で縦罫 | を付す。 */
.page-hero h1.wp-block-query-title::before {
	content: "|";
	color: var(--h-gold-soft);
	margin-right: 6px;
}

.page-hero .is-style-lede,
.page-hero .is-style-lede .wp-block-post-excerpt__excerpt {
	font-family: var(--h-sans);
	font-size: 15.5px;
	line-height: 2;
	color: rgba(245, 243, 238, .78);
	margin: 0;
}

/* theme.json のグローバルリンク色（gold-2 #3a6291、"On Light" 前提の色）は
 * page-hero の暗いグラデーション背景（radial-gradientのハイライト部分では
 * さらに明るくなる）に対してコントラスト比が実測1.4〜2.2程度しかなく
 * WCAG AA（4.5:1）を満たさない。axeのようなツールは要素個々の背景色
 * （グラデーション最終色や透過レイヤーの合成結果）を正しく評価できない
 * ことがあるため、実際にグラデーションの明部（radial-gradientの78% 18%
 * 付近）を含めて手計算し、そこでも4.5:1を確実に上回る --h-paper（白＋
 * 下線）に上書きする。breadcrumb/eyebrow 等、既存の専用リンク色を持つ
 * 箇所はそちらが優先される（詳細度で上書き済み）。 */
.page-hero a {
	color: var(--h-paper);
}

/* post-excerpt の「続きを読む」リンクは lede では非表示 */
.page-hero .is-style-lede .wp-block-post-excerpt__more-text {
	display: none;
}

/* 英語版（Weglot）では、この英文名称を隠す。
 *
 * 日本語版は「日本語の見出し＋その下に英文名称」という対で意味があるが、
 * 英語版では Weglot が見出し自体を英訳するため、すぐ下の英文名称と
 * ほぼ同じ文言が二重に並んでしまう。
 *
 * 言語の判定は <html lang> で行う（Weglot が英語版で lang="en" に切り替える。
 * 日本語版は lang="ja" のままなので影響しない）。Weglot 管理画面のカスタム CSS
 * ではなくテーマ側に置いているのは、変更履歴が追え、Weglot の設定変更や
 * 将来の乗り換えに左右されないため。 */
html[lang="en"] .page-hero .is-style-lede {
	display: none;
}

/* 斜めフォールド（暗帯下端 → 直下 paper セクションへ折る）。
   単体ページの直下は白なので既定（無印）＝ paper 終端。 */
.page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 64px;
	background: linear-gradient(to bottom right, transparent 0, transparent 49.5%, var(--h-paper) 50%, var(--h-paper) 100%);
	z-index: 1;
}

.page-hero.on-paper-2::after {
	background: linear-gradient(to bottom right, transparent 0, transparent 49.5%, var(--h-paper-2) 50%, var(--h-paper-2) 100%);
}

.page-hero.on-ink::after {
	background: linear-gradient(to bottom right, transparent 0, transparent 49.4%, var(--h-gold) 49.7%, var(--h-gold) 50.1%, var(--h-ink) 50.4%, var(--h-ink) 100%);
}

@media (max-width: 720px) {
	.page-hero .page-hero__inner {
		padding-top: 64px;
		padding-bottom: 76px;
	}
}

/* ==================================================================
 * 単体（認定遺産）本文セクション
 * ================================================================== */

/* セクション上下余白（DESIGN.md §Layout section 130 / mobile 90） */
.heritage-body {
	padding-top: var(--wp--custom--spacing--section);
	padding-bottom: var(--wp--custom--spacing--section);
}

@media (max-width: 720px) {
	.heritage-body {
		padding-top: var(--wp--custom--spacing--section-mobile);
		padding-bottom: var(--wp--custom--spacing--section-mobile);
	}
}

/* ヒーロー画像（アイキャッチ） */
.detail-hero-img {
	margin: 0;
	position: relative;
}

.detail-hero-img img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 1px solid var(--h-rule);
}

.detail-hero-img figcaption {
	font-family: var(--h-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--h-text-mute);
	margin-top: 8px;
}

/* ------------------------------------------------------------------
 * spec-list（<dl>風ブロックスタイル is-style-spec-list）
 * group.is-style-spec-list の直下に「行」group を並べ、各行を
 * ラベル（dt風）／値（dd風）の2カラムで表示する。
 * ------------------------------------------------------------------ */
.is-style-spec-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 48px;
	margin: 0;
	border-top: 1px solid var(--h-rule);
}

.is-style-spec-list > .is-style-spec-row,
.is-style-spec-list > .is-style-spec-row-wide {
	display: grid;
	grid-template-columns: 128px 1fr;
	gap: 16px;
	padding: 14px 0;
	margin: 0;
	border-bottom: 1px solid var(--h-rule);
}

.is-style-spec-list .is-style-spec-row-label {
	margin: 0;
	font-family: var(--h-serif);
	color: var(--h-ink);
	font-size: 13.5px;
	letter-spacing: .04em;
	line-height: 1.5;
}

.is-style-spec-list .is-style-spec-row-value {
	margin: 0;
	font-family: var(--h-sans);
	color: var(--h-text);
	font-size: 13.5px;
	line-height: 1.7;
}

/* 値が複数段落あるときは 1 つのグループにまとめて 2 列グリッドの
   セル数を保つ（3 要素になると次の行のラベル列へ流れ込んで崩れる）。 */
.is-style-spec-list .is-style-spec-row > .wp-block-group,
.is-style-spec-list .is-style-spec-row-wide > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* 範囲と内容・認定理由のような長文は 2 列に押し込めると窮屈になるため、
   行そのものを両カラムにまたがらせる。ブロックスタイルは 1 ブロックに
   1 つしか選べないので、通常行の指定を含んだ独立したスタイルとして定義する。 */
.is-style-spec-list > .is-style-spec-row-wide {
	grid-column: 1 / -1;
}

/* 値が post-terms（類別）の場合のリンク表現 */
.is-style-spec-list .is-style-spec-row-value.wp-block-post-terms a {
	color: var(--h-gold-2);
	text-decoration: none;
	border-bottom: 1px solid var(--h-rule-gold);
}

/* 区分（kind）はフロントではリンクにしない（一覧を出すのは類別だけ、という
   仕様。heritage_jps_core_render_kind_terms が a を外している）。
   一方でコアのエディタ実装は必ず a を描画するため、上の類別向けリンク表現が
   当たって編集画面だけ金色＋下線になってしまう。フロントの見た目に合わせて
   打ち消す。実質エディタ専用の指定だが、front も同じクラス構成に揃えてある
   ため、どちらで評価しても結果は同じになる。 */
.is-style-spec-list .taxonomy-kind.wp-block-post-terms a {
	color: inherit;
	border-bottom: 0;
	pointer-events: none;
}

@media (max-width: 680px) {
	.is-style-spec-list {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------
 * 本文内セクション（解説 / 画像 / 動画 / 所在地）
 * ------------------------------------------------------------------ */
.is-style-detail-section {
	padding: 56px 0;
	border-bottom: 1px solid var(--h-rule);
}

.is-style-detail-section:last-of-type {
	border-bottom: none;
}

/* 汎用セクションラベル（Cormorant Garamond italic の kicker） */
.is-style-section-label {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--h-gold-2);
	text-transform: uppercase;
	margin: 0 0 24px;
}

.is-style-section-label::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--h-gold);
	flex: none;
}

/* 本文中のセクション見出し（h2） */
.is-style-section-heading {
	font-family: var(--h-serif);
	font-weight: 500;
	color: var(--h-ink);
	font-size: clamp(24px, 2.8vw, 32px);
	line-height: 1.4;
	letter-spacing: .03em;
	margin: 0 0 28px;
}

/* リッチ本文（解説） */
.is-style-rich {
	font-family: var(--h-sans);
	font-size: 15px;
	line-height: 2.05;
	color: var(--h-text);
	text-wrap: pretty;
}

.is-style-rich > :first-child {
	margin-top: 0;
}

.is-style-rich p {
	margin: 0 0 1.4em;
}

.is-style-rich h2 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(22px, 2.6vw, 28px);
	color: var(--h-ink);
	letter-spacing: .03em;
	line-height: 1.4;
	margin: 2em 0 .8em;
}

.is-style-rich h3 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 18px;
	color: var(--h-ink);
	letter-spacing: .03em;
	margin: 1.8em 0 .6em;
}

.is-style-rich a {
	color: var(--h-gold-2);
	border-bottom: 1px solid var(--h-rule-gold);
	text-decoration: none;
	transition: border-color .2s;
}

.is-style-rich a:hover {
	border-color: var(--h-gold);
}

.is-style-rich ul,
.is-style-rich ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.is-style-rich li {
	margin-bottom: .5em;
}

/* ------------------------------------------------------------------
 * 画像ギャラリー（core/gallery）— 参照デザインの .gallery を移植
 * ------------------------------------------------------------------ */
.is-style-heritage-gallery.wp-block-gallery {
	gap: 16px;
}

.is-style-heritage-gallery.wp-block-gallery .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--h-rule);
}

.is-style-heritage-gallery.wp-block-gallery figcaption {
	font-family: var(--h-mono);
	font-size: 11px;
	letter-spacing: .05em;
	color: var(--h-text-mute);
	margin-top: 6px;
}

/* ------------------------------------------------------------------
 * 動画枠（core/embed もしくはプレースホルダ）
 * ------------------------------------------------------------------ */
.is-style-video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--h-ink);
	border: 1px solid var(--h-rule);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.is-style-video-frame .ph {
	font-family: var(--h-mono);
	font-size: 11px;
	letter-spacing: .15em;
	color: rgba(245, 243, 238, .5);
	border: 1px dashed rgba(245, 243, 238, .25);
	padding: 10px 18px;
}

/* core/embed（YouTube 等）を 16:9 枠に馴染ませる */
.is-style-detail-section .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--h-rule);
}

.is-style-detail-section .wp-block-embed.is-type-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ------------------------------------------------------------------
 * 所在地マップ（heritage-jps/map-embed のフレーム）
 * ------------------------------------------------------------------ */
.heritage-map-embed .heritage-map-embed__frame {
	border: 1px solid var(--h-rule);
}

/* ------------------------------------------------------------------
 * 一覧へ戻るリンク
 * ------------------------------------------------------------------ */
.back-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--h-serif);
	font-size: 14px;
	color: var(--h-gold-2);
	letter-spacing: .06em;
	text-decoration: none;
	margin-top: 8px;
}

.back-link .arr {
	width: 20px;
	height: 1px;
	background: currentColor;
	position: relative;
	flex: none;
}

.back-link .arr::after {
	content: "";
	position: absolute;
	left: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-bottom: 1px solid currentColor;
	border-left: 1px solid currentColor;
	transform: rotate(45deg);
}

/* ------------------------------------------------------------------
 * TODO 注記（サンプルの但し書き）
 * ブロックスタイル `is-style-todo-note`（core/paragraph）として管理画面の
 * スタイルパネルから選択する。生クラス `.todo-note` の手打ちは全箇所
 * `is-style-todo-note` へ置換済みのため、後方互換用の併記は廃止した。
 * ------------------------------------------------------------------ */
.is-style-todo-note {
	font-family: var(--h-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--h-gold-2);
	background: var(--h-paper-2);
	border: 1px dashed var(--h-rule-gold);
	padding: 6px 12px;
	display: inline-block;
}

/* --- 管理画面（投稿エディタ）でだけ .is-style-todo-note がコンテンツ幅より
 * 左に寄って見える不具合の対策（続報：前回の対策は「ルート要素」と
 * 「その直接の子」のどちらか一方にしか幅を揃えておらず不十分だった。
 * 両方に同じ幅を明示する必要がある）。
 *
 * 原因: 「投稿」エディタ（サイトエディタではない）内では、post-content の
 * ルート要素とその「直接の子」それぞれに対して、幅を決める複数のCSSルールが
 * 別々の変数・値を参照しており、互いに食い違っている:
 *   - ルート要素自身の幅: コアの生成ルール
 *     （`.block-editor-block-list__layout.is-root-container`）は
 *     正しく `max-width: 1080px` を出す。
 *   - ルートの「直接の子」（見出しや段落など）の幅: コアが出す別ルール
 *     （詳細度 0,3,0）は本来テーマ固有の `var(--wp--custom--width--content)`
 *     を参照するが、このテーマの theme.json にはそのカスタムプロパティ自体が
 *     定義されていない（custom.width には wrap-max / wrap-tight のみ存在）ため
 *     無効値になり、次点のルール（詳細度 0,1,0、
 *     `var(--wp--style--global--content-size)`）にフォールバックする。
 *     この変数はエディタの iframe 内では WordPress既定のフォールバック式
 *     （ビューポート幅の80%）に解決されてしまい、ルート要素自身の 1080px
 *     とは異なる値になる。
 * 通常の段落（display:block）は max-width 分だけ自身の幅が決まり、
 * margin:auto で中央寄せされるため、ルート要素・子要素どちらか一方でも
 * 幅がずれていれば、その分だけ全体がずれて見える。
 * .is-style-todo-note は文字数なりの幅（display:inline-block）で
 * margin:auto によるオートセンタリングがそもそも効かない
 * （CSS仕様上、inline-block要素の margin:auto は 0 として扱われる）ため、
 * 常に「自身の直接の親（ルート要素）の左端」に張り付く。したがって
 * ルート要素自身の幅・位置が正しくない限り、子要素側だけを直しても
 * 揃わない。
 *
 * 対策: ルート要素自身と、その直接の子の両方に同じ 1080px を明示し、
 * 基準を完全に一致させる。 */
.editor-styles-wrapper .block-editor-block-list__layout.is-root-container {
	max-width: 1080px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.editor-styles-wrapper .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: 1080px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ==================================================================
 * フロントページ（front-page.html）— hero / about / heritage / news
 * ------------------------------------------------------------------
 * public/index.html の <section class="hero"> 〜 </footer> 直前までの
 * 意匠を、theme.json トークン（--h-* 別名）へ束ねて移植したもの。
 * 実装の一次真実（見た目）は public/assets/css/style.css。
 * ================================================================== */

/* --- コンテナ / セクションリズム --- */
.front-main .wrap {
	max-width: var(--wp--custom--width--wrap-max);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter);
}
.front-main section {
	position: relative;
}
.front-main .section-pad {
	padding: var(--wp--custom--spacing--section) 0;
}
@media (max-width: 720px) {
	.front-main .wrap {
		padding: 0 var(--wp--custom--spacing--gutter-mobile);
	}
	.front-main .section-pad {
		padding: var(--wp--custom--spacing--section-mobile) 0;
	}
}

/* --- セクション見出し（sec-head） --- */
.front-main .sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 64px;
	border-bottom: 1px solid var(--h-rule);
	padding-bottom: 28px;
}
.front-main .sec-head .left {
	max-width: 720px;
}
.front-main .sec-head .is-style-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--h-gold-2);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.front-main .sec-head .is-style-kicker::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--h-gold);
}
.front-main .sec-head h2 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.3;
	margin: 0;
	color: var(--h-ink);
	letter-spacing: .03em;
}
.front-main .sec-head h2 .jp-mark {
	color: var(--h-gold);
	margin-right: 4px;
}
.front-main .sec-head .right {
	flex: none;
	align-self: flex-end;
	font-family: var(--h-latin);
	font-style: italic;
	color: var(--h-text-mute);
	font-size: 14px;
	letter-spacing: .18em;
	padding-bottom: 6px;
}
@media (max-width: 720px) {
	.front-main .sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* ==================================================================
 * HERO
 * ================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	min-height: 760px;
	color: var(--h-paper);
	background:
		radial-gradient(ellipse at 75% 20%, rgba(78, 119, 160, .25), transparent 55%),
		radial-gradient(ellipse at 10% 80%, rgba(78, 119, 160, .12), transparent 50%),
		linear-gradient(180deg, #0a2e5a 0, var(--h-ink) 45%, #0a2e5a 100%);
	isolation: isolate;
}
.hero .grid-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 80%);
}
.hero .grid-fine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(245, 243, 238, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245, 243, 238, .04) 1px, transparent 1px);
	background-size: 16px 16px;
	mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 20%, transparent 70%);
}
.hero .interference {
	position: absolute;
	right: -180px;
	top: 50%;
	transform: translateY(-50%);
	width: 900px;
	height: 900px;
	pointer-events: none;
	opacity: .35;
	background: repeating-radial-gradient(
		circle at center,
		rgba(78, 119, 160, 0) 0,
		rgba(78, 119, 160, 0) 28px,
		rgba(78, 119, 160, .55) 29px,
		rgba(78, 119, 160, 0) 30px,
		rgba(78, 119, 160, 0) 56px
	);
	mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
	-webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 70%);
	animation: hero-pulse 14s ease-in-out infinite;
}
.hero .interference.b {
	left: -260px;
	right: auto;
	width: 700px;
	height: 700px;
	opacity: .18;
	animation-duration: 18s;
	animation-direction: reverse;
}
@keyframes hero-pulse {
	0%, 100% {
		transform: translateY(-50%) scale(1);
		opacity: .35;
	}
	50% {
		transform: translateY(-50%) scale(1.06);
		opacity: .5;
	}
}
.hero .particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hero .particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--h-gold-soft);
	opacity: 0;
	box-shadow: 0 0 8px rgba(138, 176, 204, .7);
	animation: hero-drift linear infinite;
}
@keyframes hero-drift {
	0% {
		transform: translateY(20px);
		opacity: 0;
	}
	10% {
		opacity: .9;
	}
	90% {
		opacity: .9;
	}
	100% {
		transform: translateY(-680px);
		opacity: 0;
	}
}
.hero .wrap {
	max-width: var(--wp--custom--width--wrap-max);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter);
}
@media (max-width: 720px) {
	.hero .wrap {
		padding: 0 var(--wp--custom--spacing--gutter-mobile);
	}
}
.hero .inner {
	position: relative;
	z-index: 2;
	padding: 130px 0 160px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 80px;
	align-items: center;
}
@media (max-width: 980px) {
	.hero .inner {
		grid-template-columns: 1fr;
		padding: 100px 0 130px;
		gap: 60px;
	}
}
.hero .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 14px;
	color: var(--h-gold-soft);
	letter-spacing: .18em;
	margin-bottom: 32px;
}
.hero .is-style-eyebrow::before {
	content: "";
	width: 48px;
	height: 1px;
	background: var(--h-gold);
}
.hero h1 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(38px, 5.6vw, 76px);
	line-height: 1.18;
	margin: 0 0 28px;
	letter-spacing: .02em;
	color: var(--h-paper);
}
.hero h1 .accent {
	color: var(--h-gold-soft);
	font-weight: 400;
}
.hero h1 .small {
	display: block;
	font-size: .42em;
	font-weight: 300;
	color: rgba(245, 243, 238, .7);
	letter-spacing: .18em;
	margin-top: 18px;
}
.hero p.is-style-lede {
	font-size: 16px;
	line-height: 2;
	color: rgba(245, 243, 238, .78);
	max-width: 520px;
	margin: 0 0 44px;
}
.hero .cta-row {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* --- ボタン（hero 内） --- */
.hero .btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-serif);
	font-size: 15px;
	font-weight: 500;
	padding: 16px 28px;
	transition: all .25s ease;
	cursor: pointer;
	border: none;
	letter-spacing: .06em;
	text-decoration: none;
}
.hero .btn .arr {
	width: 22px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width .25s ease;
}
.hero .btn .arr::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
.hero .btn:hover .arr {
	width: 34px;
}
.hero .is-style-btn-primary {
	background: var(--h-gold);
	color: var(--h-paper);
	border: 1px solid var(--h-gold);
}
.hero .is-style-btn-primary:hover {
	background: var(--h-gold-soft);
	border-color: var(--h-gold-soft);
}
.hero .is-style-btn-ghost {
	background: 0 0;
	color: var(--h-paper);
	border: 1px solid rgba(245, 243, 238, .3);
}
.hero .is-style-btn-ghost:hover {
	border-color: var(--h-gold-soft);
	color: var(--h-gold-soft);
}

/* --- hero 制度概要パネル --- */
.hero-panel {
	border: 1px solid rgba(78, 119, 160, .5);
	background: linear-gradient(135deg, rgba(10, 46, 90, .7), rgba(0, 63, 118, .4));
	padding: 36px;
	backdrop-filter: blur(4px);
	position: relative;
	max-width: 100%;
	width: min(400px, calc(100vw - 44px));
	box-sizing: border-box;
}
.hero-panel::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(78, 119, 160, .2);
	pointer-events: none;
}
.hero-panel .is-style-panel-eyebrow {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .22em;
	color: var(--h-gold-soft);
	text-transform: uppercase;
	margin-bottom: 18px;
}
.hero-panel .is-style-panel-title {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 22px;
	color: var(--h-paper);
	margin: 0 0 22px;
	letter-spacing: .04em;
}
.hero-panel .is-style-panel-list {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hero-panel .is-style-panel-list li {
	font-size: 13px;
	color: rgba(255, 255, 255, .8);
	line-height: 1.7;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.hero-panel .type-label {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 11px;
	letter-spacing: .15em;
	color: var(--h-gold-soft);
	border: 1px solid rgba(78, 119, 160, .5);
	padding: 2px 8px;
	white-space: nowrap;
	margin-top: 2px;
	flex-shrink: 0;
}
.hero-panel .is-style-panel-note {
	font-size: 12px;
	letter-spacing: .12em;
	color: var(--h-gold-soft);
	border-top: 1px solid rgba(78, 119, 160, .3);
	padding-top: 16px;
	font-family: var(--h-latin);
	font-style: italic;
}

/* --- スクロールヒント --- */
.hero .scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 3;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 11px;
	letter-spacing: .3em;
	color: rgba(245, 243, 238, .55);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.hero .scroll-hint::after {
	content: "";
	width: 1px;
	height: 36px;
	background: linear-gradient(to bottom, rgba(138, 176, 204, .7), transparent);
	animation: hero-drop 2.4s ease-in-out infinite;
	transform-origin: top;
}
@keyframes hero-drop {
	0%, 100% {
		transform: scaleY(.4);
	}
	50% {
		transform: scaleY(1);
	}
}

/* --- hero 下端フォールド（直下 about が白＝paper なので既定） --- */
.hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 80px;
	background: linear-gradient(
		to bottom right,
		transparent 0,
		transparent 49.5%,
		var(--h-paper) 50%,
		var(--h-paper) 100%
	);
	z-index: 1;
}

/* ==================================================================
 * ABOUT 抜粋
 * ================================================================== */
.about {
	background: var(--h-paper);
	position: relative;
}
.about-intro {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 80px;
	margin-bottom: 80px;
}
@media (max-width: 900px) {
	.about-intro {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}
.about-intro .is-style-quote {
	font-family: var(--h-serif);
	font-weight: 400;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 2;
	color: var(--h-ink);
	letter-spacing: .04em;
	border-left: 2px solid var(--h-gold);
	padding-left: 28px;
}
.about-intro .body {
	font-size: 15px;
	line-height: 2.1;
	color: var(--h-text);
	text-wrap: pretty;
}
.about-intro .body p {
	margin: 0;
}
.about-intro .body p + p {
	margin-top: 1.2em;
}
.about-intro .body .is-style-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	font-family: var(--h-serif);
	font-size: 14px;
	color: var(--h-gold-2);
	letter-spacing: .1em;
	transition: gap .3s ease;
	text-decoration: none;
}
.about-intro .body .is-style-more .arr {
	width: 20px;
	height: 1px;
	background: currentColor;
	position: relative;
}
.about-intro .body .is-style-more .arr::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 6px;
	height: 6px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
.about-intro .body .is-style-more:hover {
	gap: 16px;
}
.types {
	margin-top: 70px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
}
@media (max-width: 800px) {
	.types {
		grid-template-columns: 1fr;
	}
}
.is-style-type-card {
	background: var(--h-paper-2);
	border: 1px solid var(--h-rule);
	padding: 40px;
	position: relative;
	overflow: hidden;
}
.is-style-type-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--h-gold), var(--h-gold-soft), transparent);
}
.is-style-type-card .is-style-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--h-gold-2);
	text-transform: uppercase;
	margin-bottom: 14px;
}
.is-style-type-card .is-style-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--h-gold);
	border-radius: 50%;
}
.is-style-type-card h3,
.is-style-type-card h4 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 24px;
	color: var(--h-ink);
	margin: 0 0 8px;
	letter-spacing: .04em;
}
.is-style-type-card .is-style-sub {
	font-family: var(--h-serif);
	font-size: 14px;
	color: var(--h-text-mute);
	margin-bottom: 22px;
}
.is-style-type-card .is-style-desc {
	font-size: 14px;
	line-height: 2.05;
	color: var(--h-text);
	border-top: 1px solid var(--h-rule);
	padding-top: 20px;
}

/* ==================================================================
 * HERITAGE ピックアップ（暗地・VK post-list カード）
 * ================================================================== */
.front-heritage {
	background: var(--h-ink);
	color: var(--h-paper);
	position: relative;
	overflow: hidden;
}
.front-heritage::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(78, 119, 160, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(78, 119, 160, .05) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.front-heritage .wrap {
	position: relative;
	z-index: 1;
}
.front-heritage .sec-head {
	border-color: rgba(78, 119, 160, .25);
}
.front-heritage .sec-head .is-style-kicker {
	color: var(--h-gold-soft);
}
.front-heritage .sec-head h2 {
	color: var(--h-paper);
}
.front-heritage .sec-head h2 .jp-mark {
	color: var(--h-gold-soft);
}
.front-heritage .sec-head .right {
	color: rgba(245, 243, 238, .55);
}

/* --- カード一覧グリッド（/heritage/ アーカイブと同一の h-card を流用） ---
 * カード本体の意匠（.h-card, .h-card .img/.badge-row/.cat-terms/.reg-no/.body …）は
 * archive-heritage.css の section 非スコープ定義をそのまま再利用する（front でも同 CSS を
 * enqueue 済み・functions.php 参照）。ここではグリッド枠（コンテナ）だけを front 用に補う。
 * archive の `section.heritage .h-grid` は section スコープのため front には効かない。 */
.front-heritage .wp-block-query {
	position: relative;
	z-index: 1;
}
.front-heritage .h-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.front-heritage .h-grid > li {
	display: flex;
	margin: 0;
}
@media (max-width: 980px) {
	.front-heritage .h-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	.front-heritage .h-grid {
		grid-template-columns: 1fr;
	}
}
.front-heritage .wp-block-query-no-results {
	color: rgba(245, 243, 238, .7);
	font-size: 14px;
}

/* --- heritage 一覧への導線 --- */
.front-heritage .is-style-all-link {
	text-align: center;
	margin-top: 60px;
	position: relative;
	z-index: 1;
}
.front-heritage .is-style-all-link a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-serif);
	font-size: 15px;
	color: var(--h-paper);
	border: 1px solid rgba(245, 243, 238, .3);
	padding: 16px 36px;
	transition: all .3s;
	letter-spacing: .1em;
	text-decoration: none;
}
.front-heritage .is-style-all-link a:hover {
	border-color: var(--h-gold);
	color: var(--h-gold-soft);
	background: rgba(78, 119, 160, .06);
}

/* --- heritage 下端フォールド：直下 news は淡灰（paper-2） --- */
.front-heritage::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 60px;
	background: linear-gradient(to bottom right, transparent 49.5%, var(--h-paper) 50%);
}
.front-heritage.on-paper-2::after {
	background: linear-gradient(to bottom right, transparent 49.5%, var(--h-paper-2) 50%);
}

/* ==================================================================
 * ネイティブブロック化ブリッジ（front-page.html → 固定ページ本文）
 * ------------------------------------------------------------------
 * hero の CTA を core buttons（wp:buttons/wp:button）へ、about の「詳しく見る」等を
 * core paragraph 内リンクへ変換したことに伴う意匠ブリッジ。見た目は変換前と 1:1。
 *   - CTA ボタン: theme.json の button 既定（gold・角丸0・padding16/28）を土台に、
 *     .is-style-btn-primary / .is-style-btn-ghost の配色と hover を復元。
 *   - 矢印（.arr）: 旧マークアップの空 <span class="arr"> は RichText 化で失われるため、
 *     リンク末尾の擬似要素（mask SVG）で線＋山形を等価に再構築する。
 * ================================================================== */
.hero .cta-row .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-serif);
	font-size: 15px;
	font-weight: 500;
	padding: 16px 28px;
	border-radius: 0;
	letter-spacing: .06em;
	text-decoration: none;
	transition: all .25s ease;
}
.hero .cta-row .is-style-btn-primary .wp-block-button__link {
	background: var(--h-gold);
	color: var(--h-paper);
	border: 1px solid var(--h-gold);
}
.hero .cta-row .is-style-btn-primary .wp-block-button__link:hover {
	background: var(--h-gold-soft);
	border-color: var(--h-gold-soft);
}
.hero .cta-row .is-style-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--h-paper);
	border: 1px solid rgba(245, 243, 238, .3);
}
.hero .cta-row .is-style-btn-ghost .wp-block-button__link:hover {
	border-color: var(--h-gold-soft);
	color: var(--h-gold-soft);
}
/* CTA 矢印（線＋山形）: currentColor を mask SVG で切り抜く
 * hover で伸びた分だけボタン全体の幅（flexアイテムのレイアウト幅）が変わり、
 * 隣接ボタンの位置がずれてしまっていたため、矢印の最終サイズ(34px)を
 * 常時確保した固定幅の枠として予約し、hover では枠内の見た目（transform）だけを
 * 動かす。ボタンの外形サイズ自体はhoverの前後で一切変化しない。 */
.hero .cta-row .wp-block-button__link::after {
	content: "";
	width: 34px;
	height: 8px;
	background: currentColor;
	transition: transform .25s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat left center / 22px 8px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat left center / 22px 8px;
}
.hero .cta-row .wp-block-button__link:hover::after {
	transform: translateX(12px);
}
/* SP表示: 「制度について知る」「認定遺産を見る」の2ボタンは文言の文字数が異なり、
 * 内容依存の幅（inline-flexの自動幅）のままだと縦積み時にサイズが揃わず不揃いに見える。
 * SP（720px以下、他セクションのSPブレークポイントと統一）では縦積み＋幅100%にして統一する。 */
@media (max-width: 720px) {
	.hero .cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.hero .cta-row .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}
/* about「詳しく見る」リンクの矢印（.is-style-more は p に変換・a を内包） */
.about-intro .body p.is-style-more {
	margin-top: 24px;
}
.about-intro .body .is-style-more a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--h-serif);
	font-size: 14px;
	color: var(--h-gold-2);
	letter-spacing: .1em;
	text-decoration: none;
	transition: gap .3s ease;
}
.about-intro .body .is-style-more a:hover {
	gap: 16px;
}
.about-intro .body .is-style-more a::after {
	content: "";
	width: 20px;
	height: 7px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5h16M13 1l3 2.5-3 2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 7'%3E%3Cpath d='M0 3.5h16M13 1l3 2.5-3 2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ==================================================================
 * NEWS 抜粋（Query Loop を news-item 行として再スタイル）
 * ================================================================== */
.front-news {
	background: var(--h-paper-2);
}
.front-news .sec-head h2 .jp-mark {
	color: var(--h-gold);
}
.front-news .news-list {
	border-top: 1px solid var(--h-rule);
	margin: 0;
	padding: 0;
	list-style: none;
}
.front-news .news-list .wp-block-post-template {
	display: block;
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
}
.front-news .news-list .wp-block-post {
	display: grid;
	grid-template-columns: 160px 130px 1fr 54px;
	gap: 32px;
	align-items: center;
	padding: 26px 6px;
	border-bottom: 1px solid var(--h-rule);
	transition: background .3s ease;
	position: relative;
	margin: 0;
}
.front-news .news-list .wp-block-post::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 70%;
	background: var(--h-gold);
	transition: width .3s ease;
}
.front-news .news-list .wp-block-post:hover {
	background: rgba(78, 119, 160, .04);
}
.front-news .news-list .wp-block-post:hover::before {
	width: 3px;
}
/* 末尾の矢印（線＋山形）。.news-item .arrow と同一構造。 */
.front-news .news-list .arrow {
	width: 36px;
	height: 1px;
	min-height: 1px;
	background: var(--h-rule);
	justify-self: end;
	position: relative;
	transition: width .3s, background .3s;
}
.front-news .news-list .arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--h-text-mute);
	border-right: 1px solid var(--h-text-mute);
	transform: rotate(45deg);
	transition: border-color .3s;
}
.front-news .news-list .wp-block-post:hover .arrow {
	width: 54px;
	background: var(--h-gold);
}
.front-news .news-list .wp-block-post:hover .arrow::after {
	border-color: var(--h-gold);
}
/* date と terms を親グリッドの独立トラック（160px / 130px）へ流し込み、
   style.css の .news-item（date 160 / tag 130 / title 1fr / arrow 54）と一致させる。 */
.front-news .news-list .news-meta {
	display: contents;
}
.front-news .news-list .wp-block-post-date {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 16px;
	color: var(--h-text-mute);
	letter-spacing: .1em;
	white-space: nowrap;
}
.front-news .news-list .wp-block-post-terms {
	font-family: var(--h-sans);
	font-size: 11px;
	letter-spacing: .18em;
	padding: 5px 14px;
	border: 1px solid var(--h-gold);
	color: var(--h-gold-2);
	background: var(--h-paper);
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	/* 下記のストレッチリンク(::after)の下敷きにならないよう独立してクリックできるように持ち上げる */
	position: relative;
	z-index: 1;
}
.front-news .news-list .wp-block-post-terms a {
	color: inherit;
	text-decoration: none;
}
.front-news .news-list .wp-block-post-title {
	font-family: var(--h-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--h-ink);
	letter-spacing: .03em;
	line-height: 1.5;
	margin: 0;
}
.front-news .news-list .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s;
}
/* リストアイテム全体をクリック可能にする（ストレッチリンク）。.news-item と同一方針。 */
.front-news .news-list .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.front-news .news-list .wp-block-post:hover .wp-block-post-title a {
	color: var(--h-gold-2);
}
@media (max-width: 760px) {
	.front-news .news-list .wp-block-post {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 22px 6px;
	}
	.front-news .news-list .wp-block-post::after {
		display: none;
	}
}
.front-news .is-style-all-link {
	text-align: right;
	margin-top: 36px;
}
.front-news .is-style-all-link a {
	font-family: var(--h-serif);
	font-size: 14px;
	color: var(--h-ink);
	letter-spacing: .12em;
	border-bottom: 1px solid var(--h-gold);
	padding-bottom: 4px;
	text-decoration: none;
}

/* ==================================================================
 * reveal アニメーション（スクロール侵入）
 * ================================================================== */
.heritage-js .reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .9s ease, transform .9s ease;
}
/* .heritage-js .reveal と同じ詳細度（0,2,0）の .reveal.in だと、タイの場合の
 * 後勝ちに委ねることになり環境によって不安定になりうるため、確実に上書き
 * できるよう .heritage-js を明示して詳細度を1段上げる（0,3,0）。 */
.heritage-js .reveal.in {
	opacity: 1;
	transform: none;
}
.reveal.delay-1 {
	transition-delay: .08s;
}
.reveal.delay-2 {
	transition-delay: .16s;
}
.reveal.delay-3 {
	transition-delay: .24s;
}
.reveal.delay-4 {
	transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {
	.heritage-js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hero .interference,
	.hero .particles span,
	.hero .scroll-hint::after {
		animation: none !important;
	}
}

/* ==================================================================
 * お知らせ・イベント情報（標準投稿：/news/ 一覧・個別）
 * 参照の一次真実: public/assets/css/style.css の .news / .news-item /
 * .article-head / .pagination / .tag。--h-* トークンで移植する。
 * ================================================================== */

/* ------------------------------------------------------------------
 * タグ pill（カテゴリー：お知らせ=t-news / 認定=t-cert / イベント=t-event）
 * post-terms のラッパー（.wp-block-post-terms）に、functions.php の
 * render_block フィルタが t-{slug} クラスを付与する。色分けはそれで行う。
 * ------------------------------------------------------------------ */
/* .tag はレイアウト用のラッパー（グリッド列幅に合わせて伸縮する箱）のみを
 * 担い、枠線・背景・パディング等「pill」の見た目は中の <a> 側に持たせる。
 * 以前は見た目を .tag（ラッパー）に付けていたため、視覚的なpill全体のうち
 * 実際にクリックできるのはテキスト部分の <a> だけという不整合があった。
 * <a> を display:block; width:100%; height:100%; にすることで、ラッパーが
 * 広がった分だけ <a> も広がり、pillの見た目＝クリック領域が一致する。 */
.tag {
	display: inline-block;
	font-family: var(--h-sans);
	font-size: 11px;
	line-height: 1.6;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.tag a {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 5px 14px;
	border: 1px solid var(--h-gold);
	color: var(--h-gold-2);
	background: var(--h-paper);
	text-decoration: none;
}

.tag.t-news a {
	border-color: var(--h-ink);
	color: var(--h-ink);
}

.tag.t-event a {
	border-color: var(--h-gold);
	color: var(--h-gold-2);
}

/* t-cert の #6f6a55 は style.css（一次真実）固有のセピア系。theme.json の
   パレットに無い意匠固定値のため、忠実性を優先して直値で保持する。 */
.tag.t-cert a {
	border-color: #6f6a55;
	color: #6f6a55;
}

/* ------------------------------------------------------------------
 * 一覧行（Query Loop / post-template = .news-list、各 li 内 .news-item）
 * ------------------------------------------------------------------ */
.news-list.wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--h-rule);
}

.news-list.wp-block-post-template > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.news-item {
	display: grid;
	grid-template-columns: 160px 130px 1fr 54px;
	gap: 32px;
	align-items: center;
	padding: 26px 6px;
	border-bottom: 1px solid var(--h-rule);
	transition: background .3s ease;
	position: relative;
}

.news-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 70%;
	background: var(--h-gold);
	transition: width .3s ease;
}

.news-item:hover,
.news-item:focus-within {
	background: rgba(78, 119, 160, .04);
}

.news-item .date,
.news-item .tag {
	transform: translateX(0);
	transition: transform .3s ease;
}

/* .title だけ transform ではなく margin-left でスライドさせる。
 * transform（translateX(0) も含む）は position:absolute な子孫の containing block を
 * 生成してしまうため、.title に transform を使うと、後述のストレッチリンク（行全体を
 * クリック可能にする ::after）の基準が .news-item ではなく .title 自身に縮小されてしまう。 */
.news-item .title {
	margin-left: 0;
	transition: margin-left .3s ease;
}

.news-item:hover .date,
.news-item:hover .tag,
.news-item:focus-within .date,
.news-item:focus-within .tag {
	transform: translateX(18px);
}

.news-item:hover .title,
.news-item:focus-within .title {
	margin-left: 18px;
}

.news-item:hover::before,
.news-item:focus-within::before {
	width: 3px;
}

/* 日付（年を強調＋「月 . 日」）：post-date 2 つを横並び */
.news-item .date {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 16px;
	color: var(--h-text-mute);
	letter-spacing: .1em;
}

.news-item .date .wp-block-post-date {
	margin: 0;
}

.news-item .date .y {
	color: var(--h-ink);
	font-size: 18px;
	margin-right: 6px;
}

/* タグ pill の配置
 * justify-self を指定せず（既定の stretch のまま）グリッド列幅（130px）いっぱいに
 * 広げることで、トップページの認定遺産ピックアップ（.front-news .news-list
 * .wp-block-post-terms、同じくjustify-self未指定＝stretch）と同様、文字数に関わらず
 * 常に同じサイズの矩形になるようにする（以前は justify-self:start で文字数なりの
 * 幅になっていた）。
 * .title a に行全体を覆うストレッチリンクを敷くため、タグ自身のリンク（カテゴリー
 * アーカイブへのリンク）が下敷きにならないよう z-index で持ち上げて独立してクリック
 * できるようにする。 */
.news-item .tag {
	position: relative;
	z-index: 1;
}

/* タイトル（post-title level 0 → <p>） */
.news-item .title {
	margin: 0;
	font-family: var(--h-serif);
	font-size: 16px;
	font-weight: 500;
	color: var(--h-ink);
	letter-spacing: .03em;
	line-height: 1.5;
}

.news-item .title a {
	color: inherit;
	text-decoration: none;
}

/* リストアイテム全体をクリック可能にする（ストレッチリンク）。
 * public/ の元デザインは .news-item 自体が <a> だったが、コアブロックの
 * post-template/post-title の構造上ネイティブブロックのみで同じマークアップは
 * 作れないため、タイトルリンクの当たり判定を ::after で行全体(.news-item)まで
 * 拡張することで同等のクリック領域を実現する。 */
.news-item .title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.news-item:hover .title,
.news-item:hover .title a,
.news-item:focus-within .title,
.news-item:focus-within .title a {
	color: var(--h-gold-2);
}

/* 末尾の矢印（装飾） */
.news-item .arrow {
	width: 36px;
	height: 1px;
	min-height: 1px;
	background: var(--h-rule);
	justify-self: end;
	position: relative;
	transition: width .3s, background .3s;
}

.news-item .arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--h-text-mute);
	border-right: 1px solid var(--h-text-mute);
	transform: rotate(45deg);
	transition: border-color .3s;
}

.news-item:hover .arrow,
.news-item:focus-within .arrow {
	width: 54px;
	background: var(--h-gold);
}

.news-item:hover .arrow::after,
.news-item:focus-within .arrow::after {
	border-color: var(--h-gold);
}

@media (max-width: 760px) {
	.news-item {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 22px 6px;
	}

	/* デスクトップでは意図的に justify-self:stretch のまま列幅（130px）に
	 * 揃えているが（上部コメント参照）、1カラム化するSPではその列幅が
	 * 行全体の幅になってしまい、タグpillが画面いっぱいに広がってしまう。
	 * SPのみ文字数なりの幅（start）に戻す。 */
	.news-item .tag {
		justify-self: start;
	}

	.news-item .arrow {
		display: none;
	}

	.news-item:hover .date,
	.news-item:hover .tag,
	.news-item:focus-within .date,
	.news-item:focus-within .tag {
		transform: translateX(0);
	}

	.news-item:hover .title,
	.news-item:focus-within .title {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.news-item .date,
	.news-item .tag,
	.news-item .title {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * ページネーション（core/query-pagination）
 * ------------------------------------------------------------------ */
.pagination.wp-block-query-pagination {
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 52px;
}

.pagination .wp-block-query-pagination-numbers a,
.pagination .wp-block-query-pagination-numbers span,
.pagination .wp-block-query-pagination-previous,
.pagination .wp-block-query-pagination-next {
	font-family: var(--h-latin);
	font-style: italic;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--h-rule);
	color: var(--h-text-mute);
	font-size: 14px;
	letter-spacing: .05em;
	text-decoration: none;
	transition: border-color .2s, color .2s, background .2s;
}

/* 親テーマ(X-T9)が `:root .wp-block-query-pagination-numbers .page-numbers{color:#fff}`
 * を持ち（詳細度0,3,0）、上のルール（0,2,1）より詳細度で勝ってしまうため、
 * ページ番号リンクが白文字＝背景に溶けて見えなくなっていた。実際に付与される
 * `.page-numbers` クラスを含めて詳細度を上げ（0,3,1）、確実に上書きする。 */
.pagination .wp-block-query-pagination-numbers a.page-numbers {
	color: var(--h-text-mute);
}

.pagination .wp-block-query-pagination-numbers a:hover,
.pagination .wp-block-query-pagination-previous:hover,
.pagination .wp-block-query-pagination-next:hover {
	border-color: var(--h-gold);
	color: var(--h-gold-2);
}

.pagination .wp-block-query-pagination-numbers a.page-numbers:hover {
	color: var(--h-gold-2);
}

.pagination .wp-block-query-pagination-numbers .current {
	background: var(--h-ink);
	color: var(--h-paper);
	border-color: var(--h-ink);
}

.pagination .wp-block-query-pagination-numbers a.page-numbers.current,
.pagination .wp-block-query-pagination-numbers span.page-numbers.current {
	color: var(--h-paper);
}

/* ------------------------------------------------------------------
 * 検索結果ページ（templates/search.html）
 * ------------------------------------------------------------------
 * 検索結果は固定ページ・投稿・認定遺産が混在しうるため、CPT固有の項目
 * （区分・登録番号等）を前提にしない、汎用的な行コンポーネントとして
 * 実装する（.news-item 等のCPT固有グリッドは流用しない）。
 * ------------------------------------------------------------------ */
/* .is-style-kicker/.sec-head はページごとに文脈スコープされた別定義のため
 * （.front-main .sec-head .is-style-kicker 等）、`.news`クラスを共有する
 * home.html（/news/）・category.html（/news/category/*/）・search.html
 * （検索結果）向けの共通スコープを追加する。背景が明地（paper-2）のため、
 * 暗地用（section.heritage 等）ではなく .front-main と同じ配色
 * （h-ink / h-gold-2）を踏襲する。 */
.news .sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--h-rule);
	padding-bottom: 28px;
}

.news .sec-head .left {
	max-width: 720px;
}

.news .sec-head .is-style-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--h-gold-2);
	text-transform: uppercase;
	margin: 0 0 18px;
}

.news .sec-head .is-style-kicker::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--h-gold);
}

.news .sec-head h2 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.3;
	margin: 0;
	color: var(--h-ink);
	letter-spacing: .03em;
}

.news .sec-head h2 .jp-mark {
	color: var(--h-gold);
	margin-right: 4px;
}

@media (max-width: 720px) {
	.news .sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

.search-list.wp-block-post-template {
	border-top: 1px solid var(--h-rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-item {
	padding: 26px 6px;
	border-bottom: 1px solid var(--h-rule);
	transition: background .3s ease;
}

.search-item:hover {
	background: rgba(78, 119, 160, .04);
}

.search-item__date {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	color: var(--h-text-mute);
	letter-spacing: .1em;
	margin-bottom: 8px;
}

.search-item__title {
	font-family: var(--h-serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--h-ink);
	letter-spacing: .02em;
	line-height: 1.5;
	margin: 0 0 8px;
}

.search-item__title a {
	color: inherit;
	text-decoration: none;
	transition: color .3s;
}

.search-item:hover .search-item__title a {
	color: var(--h-gold-2);
}

.search-item__excerpt {
	font-size: 14px;
	line-height: 1.9;
	color: var(--h-text);
	margin: 0;
}

/* ------------------------------------------------------------------
 * 404ページ（templates/404.html）
 * ------------------------------------------------------------------
 * タイトル部分は .page-hero__inner を使用し、/about/ 等の他ページと
 * 配置・余白を統一する（.wrap 直下の独自 .inner は使わない）。
 * CTAボタン（トップページへ／サイトマップを見る）は暗地のヒーローではなく
 * 白背景のコンテンツセクションに配置し、左右中央揃えにする。ボタンの
 * 見た目自体は front-hero.php の .hero .cta-row と同じ構造（矢印の
 * レイアウトシフト対策込み）を、404ページ専用のスコープで再利用する。
 * ------------------------------------------------------------------ */
.not-found__links.wp-block-buttons {
	gap: 16px;
}

.not-found__links .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-serif);
	font-size: 15px;
	font-weight: 500;
	padding: 16px 28px;
	border-radius: 0;
	letter-spacing: .06em;
	text-decoration: none;
	transition: all .25s ease;
}

.not-found__links .is-style-btn-primary .wp-block-button__link {
	background: var(--h-gold);
	color: var(--h-paper);
	border: 1px solid var(--h-gold);
}

.not-found__links .is-style-btn-primary .wp-block-button__link:hover {
	background: var(--h-gold-soft);
	border-color: var(--h-gold-soft);
}

/* .is-style-btn-ghost はもともと暗地（.hero）向けの配色（白文字＋薄い白枠）だったが、
 * このボタン列は白背景（paper-2）のコンテンツセクションに配置しているため、
 * 白文字のままでは背景に溶けて見えなくなる（コントラスト比1.09、axeで検出）。
 * 明地用に反転した配色（濃色の文字・枠）を使う。 */
.not-found__links .is-style-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--h-ink);
	border: 1px solid var(--h-rule);
}

.not-found__links .is-style-btn-ghost .wp-block-button__link:hover {
	border-color: var(--h-gold);
	color: var(--h-gold-2);
}

.not-found__links .wp-block-button__link::after {
	content: "";
	width: 34px;
	height: 8px;
	background: currentColor;
	transition: transform .25s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat left center / 22px 8px;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") no-repeat left center / 22px 8px;
}

.not-found__links .wp-block-button__link:hover::after {
	transform: translateX(12px);
}

@media (max-width: 720px) {
	.not-found__links.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.not-found__links .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------
 * 記事ヘッダー（個別：日付＋タグ＋タイトル）
 * ------------------------------------------------------------------ */
.article-head {
	border-bottom: 1px solid var(--h-rule);
	padding-bottom: 28px;
	margin-bottom: 40px;
}

.article-head .meta-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.article-head .date {
	font-family: var(--h-latin);
	font-style: italic;
	color: var(--h-text-mute);
	font-size: 15px;
	letter-spacing: .1em;
}

.article-head .date .wp-block-post-date {
	margin: 0;
}

.article-head .date .y {
	color: var(--h-ink);
	font-size: 17px;
	margin-right: 6px;
}

.article-head h1 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(24px, 3vw, 36px);
	line-height: 1.45;
	color: var(--h-ink);
	letter-spacing: .02em;
	margin: 16px 0 0;
}

/* ==================================================================
 * テンプレートパーツ: ヘッダー / util バー / フッター
 * ------------------------------------------------------------------
 * public/index.html の .util / header.site / footer.site を、
 * ブロックテーマのテンプレートパーツ（parts/header.html,
 * parts/footer.html）として 1:1 で再現するための実装 CSS。
 * スティッキー挙動・util バーの2段レイアウト・フッターの4カラム
 * グリッドなど、コアブロック単体では表現できない部分を最小限の
 * クラスで補う。色・フォントは上記トークン別名（--h-*）を参照する。
 * 半透明の暖白（rgba(245,243,238,x)）等の subtle なオーバーレイは、
 * 新規色相ではなく参照実装（style.css）の値をそのまま移植している。
 * ================================================================== */

/* --- util バー（暗地・パンくず＋外部リンク＋Weglot 切替） --- */
.hjps-util {
	background: var(--h-ink-2);
	color: rgba(245, 243, 238, .78);
	font-size: 12px;
	letter-spacing: .06em;
}

.hjps-util__wrap {
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
	min-height: 36px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.hjps-crumbs {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.hjps-crumbs span {
	/* WCAG AA（コントラスト比4.5:1）を満たすため .6 → .8 に調整
	 * （axeアクセシビリティ監査で3.58:1の不足を検出、調整後は約5.1:1）。 */
	opacity: .8;
}

.hjps-lang {
	display: flex;
	gap: 14px;
	align-items: center;
}

/* リンクはネイティブ化で core/paragraph 包みになるため、親テーマの
 * プロースペーシング（body :is(...,.is-layout-flow) + p → margin-block-start,
 * 詳細度 0,1,2）が hjps-sep（is-layout-flow）直後のリンク段落へ漏れる。
 * util バーは flex の gap で間隔を作るので段落の縦マージンは常に 0 にする。
 * 親ルール（0,1,2）に勝つため詳細度 0,2,1 の子孫セレクタで指定する。 */
.hjps-util .hjps-lang p {
	margin: 0;
}

.hjps-lang a {
	/* WCAG AA（コントラスト比4.5:1）を満たすため .7 → .8 に調整
	 * （axeアクセシビリティ監査で4.33:1の不足を検出、調整後は約5.1:1）。 */
	opacity: .8;
	color: inherit;
	text-decoration: none;
	transition: opacity .2s, color .2s;
}

.hjps-lang a:hover {
	opacity: 1;
	color: var(--h-gold-soft);
}

.hjps-sep {
	width: 1px;
	height: 12px;
	background: rgba(245, 243, 238, .2);
	display: inline-block;
}

/* --- スティッキーヘッダー（円形シール＋主要ナビ＋外部CTA） --- */
/* backdrop-filter は仕様上、position:fixed な子孫の containing block を
 * 生成してしまう。.hjps-header 自身に backdrop-filter を持たせると、
 * 内部の SPナビ（.hjps-nav--mobile、コアの position:fixed オーバーレイ）が
 * ビューポート全体ではなく .hjps-header の矩形（高さ84px）内に閉じ込められる
 * 不具合が起きるため、視覚効果のみ ::before 疑似要素へ逃がす。 */
.hjps-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--h-rule);
}

.hjps-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 63, 118, .95);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
}

.hjps-header__wrap {
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
	min-height: 84px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* ブランド（円形シール章＋名称） */
.hjps-brand {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}

.hjps-brand .wp-block-site-logo,
.hjps-brand__mark {
	margin: 0;
	line-height: 0;
}

.hjps-brand .custom-logo {
	height: 48px;
	width: auto;
	object-fit: contain;
	/* 円形シールを暗地に白抜きで載せる（参照実装 header.site 準拠） */
	filter: brightness(0) invert(1);
}

.hjps-brand__name {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	text-decoration: none;
}

.hjps-brand__name .jp {
	font-family: var(--h-serif);
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	letter-spacing: .04em;
}

.hjps-brand__name .en {
	font-family: var(--h-latin);
	font-style: italic;
	font-weight: 400;
	font-size: 11px;
	color: rgba(255, 255, 255, .7);
	letter-spacing: .18em;
	margin-top: 2px;
}

/* 主要ナビ（core/navigation） */
.hjps-nav {
	flex: none;
}

.hjps-nav .wp-block-navigation__container {
	gap: 34px;
	align-items: center;
}

/*
 * core/navigation の style.css は
 * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit; }`
 * とクラスを二重掛けして詳細度 (0,3,0) で color を inherit に固定する。
 * 単一クラスの `.hjps-nav .wp-block-navigation-item__content` (0,2,0) では負けて
 * body の text 色 (#333) を継承してしまうため、コアと同じ二重掛けで詳細度を (0,3,0) に揃える。
 * heritage-extra.css はブロックライブラリより後に読み込まれるため、同詳細度でも後勝ちで白が適用される。
 */
.hjps-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	letter-spacing: .05em;
	position: relative;
	padding: 8px 0;
	text-decoration: none;
}

.hjps-nav .wp-block-navigation-item:not(.nav-cta) .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 1px;
	background: var(--h-gold);
	transition: width .3s ease, left .3s ease;
}

.hjps-nav .wp-block-navigation-item:not(.nav-cta) .wp-block-navigation-item__content:hover::after {
	width: 100%;
	left: 0;
}

/* 外部 CTA（透明地＋白半透明枠、参照実装 header.site .cta 準拠） */
.hjps-nav .nav-cta .wp-block-navigation-item__content {
	font-family: var(--h-sans);
	font-size: 13px;
	padding: 10px 20px;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	background: transparent;
	transition: background .2s, color .2s;
}

.hjps-nav .nav-cta .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, .1);
}

@media (prefers-reduced-motion: reduce) {
	.hjps-nav .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* --- SP表示（720px以下）: .hjps-util の内容 + 主要ナビ + 日本物理学会リンクを
 * ハンバーガーメニューへ格納する。
 * .hjps-nav--mobile（overlayMenu:"always"）はコア標準のトグルボタン・
 * オーバーレイ・Esc/フォーカス管理をそのまま使い、カスタムJSは書かない。
 * デスクトップでは .hjps-nav--mobile を非表示にし、SPでは逆に .hjps-util と
 * .hjps-nav--desktop を非表示にして役割を入れ替える。 */
/* コアの layout support（`body .is-layout-flex { display:flex }`、詳細度0,1,1）に
 * 単純な単一クラスセレクタ（0,1,0）では負けるため、詳細度0,2,0で確実に勝たせる。 */
.hjps-header__wrap .hjps-nav--mobile {
	display: none;
}

@media (max-width: 720px) {
	.hjps-util__wrap,
	.hjps-header__wrap {
		padding: 0 var(--wp--custom--spacing--gutter-mobile, 22px);
	}

	.hjps-util {
		display: none;
	}

	/* コアの layout support（`body .is-layout-flex { display:flex }`、詳細度0,1,1）に
	 * 単純な単一クラスセレクタ（0,1,0）では負けるため、詳細度0,2,0で確実に勝たせる。 */
	.hjps-header__wrap .hjps-nav--desktop {
		display: none;
	}

	.hjps-header__wrap .hjps-nav--mobile {
		display: block;
	}

	/* ハンバーガー／閉じるボタンのアイコン色を暗地ヘッダーに合わせて白に。 */
	.hjps-nav--mobile .wp-block-navigation__responsive-container-open,
	.hjps-nav--mobile .wp-block-navigation__responsive-container-close {
		color: #fff;
	}

	/* オーバーレイ本体（コアの responsive-container が全画面表示になったもの）。
	 * コアの `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color:#fff }`
	 * は詳細度(0,5,0)と高いため、同じ構造に `.hjps-nav--mobile` を足して詳細度(0,6,0)で確実に勝たせる。 */
	.hjps-nav--mobile.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: var(--h-ink-2);
	}

	.hjps-nav--mobile.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		color: #fff;
	}

	.hjps-nav--mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		font-family: var(--h-serif);
		font-weight: 500;
		font-size: 17px;
		color: #fff;
		letter-spacing: .05em;
		padding: 14px 0;
	}

	.hjps-nav--mobile .wp-block-navigation__responsive-container.is-menu-open .nav-cta .wp-block-navigation-item__content {
		border: 1px solid rgba(255, 255, 255, .4);
		padding: 12px 24px;
		margin-top: 8px;
	}
}

/* --- フッター（4カラム：ブランド＋3ナビ＋コピーライト） --- */
.hjps-footer {
	background: var(--h-ink-2);
	color: rgba(245, 243, 238, .75);
	padding: 90px 0 0;
	position: relative;
}

.hjps-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--h-gold), transparent);
}

.hjps-footer__wrap {
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
}

.hjps-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 60px;
	border-bottom: 1px solid rgba(245, 243, 238, .1);
}

/* WordPress のフロー・レイアウト（.is-layout-flow）が注入する
 * margin-block-start（--wp--custom--spacing--gap = 28px）を無効化する。
 * .hjps-footer__top は wp:group（layout: default = flow）のため、コア CSS
 * ":root :where(.is-layout-flow) > *" が各グリッド子へ 28px を付与する。
 * 親テーマの reset は .wp-block-group とその直後要素しか 0 にしないため、
 * .hjps-fbrand（group）直後の 1 列目だけが 0 になり、2・3 列目の nav が
 * 28px 下へずれる。列間隔は grid gap が担うので縦マージンは常に不要。
 * 一次真実 public/index.html の footer.site .top は素の grid で縦マージンを持たない。*/
.hjps-footer .hjps-footer__top > * {
	margin-block: 0;
}

.hjps-fbrand .wp-block-site-logo {
	margin: 0 0 24px;
	line-height: 0;
}

.hjps-fbrand .custom-logo {
	height: 60px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.hjps-fbrand__jp {
	font-family: var(--h-serif);
	font-size: 18px;
	color: var(--h-paper);
	letter-spacing: .05em;
	margin-bottom: 6px;
}

.hjps-fbrand__en {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 12px;
	color: rgba(245, 243, 238, .5);
	letter-spacing: .18em;
	margin-bottom: 22px;
}

.hjps-fbrand__addr {
	font-style: normal;
	font-size: 12.5px;
	line-height: 2;
	color: rgba(245, 243, 238, .6);
}

/* 見出しレベルは本文の見出し階層（h2）からの飛び（axeのheading-order違反）を
 * 避けるため h5 → h3 に変更済み（`.hjps-fcol__heading`）。見た目（フォント
 * サイズ・色等）はh5当時のまま維持するため、タグではなくクラスで指定する。 */
.hjps-fcol__heading {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 13px;
	color: var(--h-gold-soft);
	letter-spacing: .18em;
	margin: 8px 0 22px;
}

.hjps-fcol ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.hjps-fcol li {
	margin-bottom: 12px;
}

.hjps-fcol a {
	font-size: 13px;
	color: rgba(245, 243, 238, .7);
	text-decoration: none;
	transition: color .2s;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.hjps-fcol a:hover {
	color: var(--h-gold-soft);
}

.hjps-fcol a::before {
	content: "";
	width: 6px;
	height: 1px;
	background: var(--h-gold-2);
	flex: none;
}

.hjps-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 28px 0 36px;
	flex-wrap: wrap;
	gap: 16px;
}

.hjps-footer__bottom .copy {
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 12px;
	letter-spacing: .12em;
	/* WCAG AA（コントラスト比4.5:1）を満たすため .5 → .65 に調整
	 * （axeアクセシビリティ監査で3.88:1の不足を検出、調整後は約5.6:1）。 */
	color: rgba(245, 243, 238, .65);
}

@media (max-width: 880px) {
	.hjps-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
}

/* --- SP表示（720px以下）: ブランド行を「シール＋名称＝左／住所＝右」の
 * 2カラムにし、その下にナビ3列を縦積み・余白を詰めて並べる。 */
@media (max-width: 720px) {
	.hjps-footer {
		padding-top: 60px;
	}

	.hjps-footer__top {
		grid-template-columns: 1fr;
		gap: 0;
		padding-bottom: 8px;
	}

	.hjps-fbrand {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 16px;
		padding-bottom: 28px;
		border-bottom: 1px solid rgba(245, 243, 238, .1);
	}

	/* コアの `.hjps-footer .hjps-footer__top > * { margin-block: 0; }`（詳細度0,2,0）
	 * が単純な `.hjps-fbrand { margin-bottom }`（0,1,0）に勝ってボーダー直下の
	 * 余白が消えてしまうため、詳細度0,3,0で確実に上書きする。 */
	.hjps-footer .hjps-footer__top .hjps-fbrand {
		margin-bottom: 20px;
	}

	.hjps-fbrand__info {
		min-width: 0;
	}

	/* コアの flow レイアウト（:root :where(.is-layout-flow) > *）が子要素へ
	 * margin-block-start（28px）を自動付与するため無効化する
	 * （.hjps-footer__top > * と同じ理由。上部コメント参照）。 */
	.hjps-fbrand__info > * {
		margin-block: 0;
	}

	.hjps-fbrand .wp-block-site-logo {
		margin-bottom: 14px;
	}

	.hjps-fbrand__jp {
		font-size: 15px;
		margin-bottom: 4px;
	}

	.hjps-fbrand__en {
		font-size: 10.5px;
		margin-bottom: 0;
	}

	.hjps-fbrand__addr {
		flex: none;
		max-width: 150px;
		font-size: 11.5px;
		line-height: 1.8;
		text-align: right;
	}

	/* ナビ3列は縦積み・上下余白を詰める。各列内のliの余白は0に詰め、
	 * 列（nav）の下と次の見出しの間だけ余白を確保する。 */
	.hjps-fcol__heading {
		margin: 0 0 10px;
	}

	/* .hjps-fbrand と同じ理由（コアのmargin-block:0リセットに0,1,0では負ける）で
	 * 詳細度0,3,0に上げて確実に適用する。 */
	.hjps-footer .hjps-footer__top .hjps-fcol {
		margin-bottom: 28px;
	}

	.hjps-fcol li {
		margin-bottom: 0;
	}
}

/* ==================================================================
 * 物理遺産とは（固定ページ /about/）— about-page パターン固有レイアウト
 * ------------------------------------------------------------------
 * 一次真実: public/about/index.html ＋ public/assets/css/style.css。
 * 署名的コンポーネント（.page-hero / .about-intro / .is-style-type-card /
 * .is-style-rich / .is-style-section-label / .is-style-section-heading / .reveal）は既に本ファイル
 * 上部でグローバル定義済みのため再利用し、ここでは about ページ専用の
 * ラッパ（.about-main 配下）でのみ必要な補完（.wrap / .wrap-tight /
 * .section-pad / .sec-head / .is-style-process-figure / .btn）を追加する。
 * .about-main へスコープすることで他ページ（front / heritage / news）
 * の同名クラスへ干渉しない。
 * ================================================================== */

/* コンテナ（全幅セクションの内側を中央寄せ・最大幅制限） */
.about-main .wrap {
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
}
.about-main .wrap-tight {
	max-width: var(--wp--custom--width--wrap-tight, 1080px);
	margin: 0 auto;
	padding: 0 var(--wp--custom--spacing--gutter, 32px);
}
@media (max-width: 720px) {
	.about-main .wrap,
	.about-main .wrap-tight {
		padding: 0 var(--wp--custom--spacing--gutter-mobile, 22px);
	}
}

/* セクション上下余白（DESIGN.md §Layout section 130 / mobile 90） */
.about-main .section-pad {
	padding: var(--wp--custom--spacing--section) 0;
}
@media (max-width: 720px) {
	.about-main .section-pad {
		padding: var(--wp--custom--spacing--section-mobile) 0;
	}
}

/* page-hero 内側パディング（グローバルは .page-hero__inner を用いる） */
.about-main .page-hero .wrap {
	position: relative;
	z-index: 2;
}

/* sec-head（第1類・第2類：左＝kicker＋見出し／右＝区分ラベル） */
.about-main .sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 64px;
	border-bottom: 1px solid var(--h-rule);
	padding-bottom: 28px;
}
.about-main .sec-head .left {
	max-width: 720px;
}
.about-main .sec-head .is-style-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-latin);
	font-style: italic;
	font-size: 13px;
	letter-spacing: .22em;
	color: var(--h-gold-2);
	text-transform: uppercase;
	margin: 0 0 18px;
}
.about-main .sec-head .is-style-kicker::before {
	content: "";
	width: 36px;
	height: 1px;
	background: var(--h-gold);
	flex: none;
}
.about-main .sec-head h2 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.3;
	margin: 0;
	color: var(--h-ink);
	letter-spacing: .03em;
}
.about-main .sec-head h2 .jp-mark {
	color: var(--h-gold);
	margin-right: 4px;
}
.about-main .sec-head .num {
	flex: none;
	align-self: flex-end;
	font-family: var(--h-latin);
	font-style: italic;
	color: var(--h-text-mute);
	font-size: 13px;
	letter-spacing: .15em;
	margin: 0;
}
@media (max-width: 720px) {
	.about-main .sec-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
}

/* 区分カード群（sec-head 直後の余白）：一次真実 about ソースで .types に
 * インライン style="margin-top:0" が付与され、sec-head→types 間の余白は
 * sec-head 側 margin-bottom:64px のみで担保。global .types{margin-top:70px}
 * を about 文脈で 0 に打ち消す。 */
.about-main .types {
	margin-top: 0;
}

/* intro 本文の段落・リスト間隔（グローバル .about-intro .body p{margin:0} を上書き）*/
.about-main #intro .about-intro {
	margin-bottom: 0;
}
.about-main #intro .about-intro .body p {
	margin: 0 0 1.2em;
}
.about-main #intro .about-intro .body :is(ol, ul) {
	margin: 0 0 1.2em;
}

/* 認定プロセス図 */
.about-main .is-style-process-figure {
	margin: 36px 0 44px;
	border: 1px solid var(--h-rule);
	background: var(--h-paper);
	padding: 24px;
}
.about-main .is-style-process-figure img {
	width: 100%;
	height: auto;
	display: block;
}
.about-main .is-style-process-figure figcaption {
	font-family: var(--h-mono);
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--h-text-mute);
	margin-top: 12px;
	/* コア画像ブロック（.wp-block-image / .wp-element-caption）の
	 * 既定 text-align:center を打ち消し、旧 wp:html 版と同じ左寄せを維持する。 */
	text-align: left;
}

/* 一次アクション（物理遺産 ご提案はこちら） */
.about-main .btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--h-serif);
	font-size: 15px;
	font-weight: 500;
	padding: 16px 28px;
	transition: all .25s ease;
	cursor: pointer;
	border: none;
	letter-spacing: .06em;
	text-decoration: none;
}
.about-main .btn .arr {
	width: 22px;
	height: 1px;
	background: currentColor;
	position: relative;
	transition: width .25s ease;
}
.about-main .btn .arr::after {
	content: "";
	position: absolute;
	right: 0;
	top: -3px;
	width: 7px;
	height: 7px;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	transform: rotate(45deg);
}
.about-main .btn:hover .arr {
	width: 34px;
}
.about-main .is-style-btn-primary {
	background: var(--h-gold);
	color: var(--h-paper);
	border: 1px solid var(--h-gold);
}
.about-main .is-style-btn-primary:hover {
	background: var(--h-gold-soft);
	border-color: var(--h-gold-soft);
}

@media (prefers-reduced-motion: reduce) {
	.about-main .btn,
	.about-main .btn .arr {
		transition: none;
	}
}

/* ==================================================================
 * サイトマップ（固定ページ /sitemap/）— sitemap-page パターン固有レイアウト
 * ------------------------------------------------------------------
 * 一次真実: public/sitemap/index.html ＋ public/assets/css/style.css。
 * 元は patterns/sitemap-page.php 内に scoped な <style> として同梱していたが、
 * ブロックエディタの編集画面（core/html ブロックのサンドボックス）では
 * その <style> が兄弟ブロックへ届かず、編集画面とフロントで見た目が
 * 一致しなかった。add_editor_style で本ファイルを読み込む構成に合わせ、
 * ここへ移設して両コンテキスト（エディタ・フロント）へ一貫適用する。
 *   - page-hero（見出し帯）は他ページ共通の汎用 .page-hero / .wrap /
 *     .page-hero__inner をそのまま使う（以前専用の .sm-page-hero でほぼ同一の
 *     意匠を複製していたが、コンポーネントの分裂を防ぐため統合済み）。
 *     sitemap-tree のみ .sm-section / .is-style-sitemap-tree にスコープして定義。
 *   - 色・フォント・幅は theme.json のプリセット変数を参照。グリッド地紋・
 *     淡いオフホワイト文字などパレット外の装飾値のみ実 CSS 由来のリテラルを
 *     残す（DESIGN.md の意匠を崩さないため）。
 * ================================================================== */

/* 本文セクション（白＝paper） */
.sm-section {
	background: var(--wp--preset--color--paper);
	padding: 130px 0;
}
.sm-section .inner {
	max-width: var(--wp--custom--width--wrap-max, 1240px);
	margin: 0 auto;
	padding: 0 32px;
}
@media (max-width: 720px) {
	.sm-section {
		padding: 90px 0;
	}
	.sm-section .inner {
		padding: 0 22px;
	}
}

/* サイトマップ木構造（2 カラム） */
.is-style-sitemap-tree {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 48px;
}
@media (max-width: 720px) {
	.is-style-sitemap-tree {
		grid-template-columns: 1fr;
	}
}
.is-style-sitemap-tree > li {
	border-top: 1px solid var(--wp--preset--color--rule);
	padding: 22px 0;
}
.is-style-sitemap-tree > li > a {
	font-family: var(--wp--preset--font-family--noto-serif-jp);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--ink);
	letter-spacing: .03em;
	text-decoration: none;
	transition: color .2s;
}
.is-style-sitemap-tree > li > a:hover {
	color: var(--wp--preset--color--gold-2);
}
.is-style-sitemap-tree ul {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}
.is-style-sitemap-tree ul li {
	margin: 8px 0;
}
.is-style-sitemap-tree ul a {
	font-size: 13.5px;
	color: var(--wp--preset--color--text-mute);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color .2s;
}
.is-style-sitemap-tree ul a::before {
	content: "";
	width: 8px;
	height: 1px;
	flex: none;
	background: var(--wp--preset--color--gold-2);
}
.is-style-sitemap-tree ul a:hover {
	color: var(--wp--preset--color--gold-2);
}