@charset "UTF-8";
/* ============================================================
   TOA SAPAGI — skin.css
   カスタムCSSはすべてこのファイルに集約する。

   鉄則:
   - セレクタは .tsg- / .is-style-tsg- でスコープする
   - :root へ変数を定義しない（既存サイトと衝突するため）
   - 色・グラデは var(--wp--preset--*) を参照する（インライン色の直書き禁止）
   - unitone は padding / gap / position を var(--unitone--*) + !important で
     出すため、プロパティ側から上書きできない。必ず変数側に渡すこと
   ============================================================ */

/* ------------------------------------------------------------
   1. ベース
   ------------------------------------------------------------ */

/* 行間をソースに合わせる。

   ソースは body に line-height:1.95 を置き、子はそれを継承していた。
   unitone は `*{ line-height: var(--unitone--line-height) }`（フォントサイズに
   応じて詰まる流体行間）を全要素に当てるため、body の値が子へ届かない。
   結果、小さい文字は 1.8、大きい文字は 1.1 前後になり、ソースと1〜2pxずつずれる。

   `*` の詳細度は 0,0,0 なので、変数側に 1.95 を渡せば
   「明示的に line-height を書いた自前のルールは従来どおり勝つ」まま、
   指定していない要素だけがソースと同じ行間になる。
   見出しは theme.json 側の h1〜h6 ルール（0,0,1）が勝つので 1.55 のまま。 */
.wp-site-blocks *,
.editor-styles-wrapper * {
	--unitone--line-height: 1.95;
}

/* 強調用のインライン要素は、親の行間をそのまま継ぐのが素の CSS の挙動。
   unitone の `*` ルールはそれを断ち切り、<em> や <a> が自分の
   フォントサイズ基準の行間を持ってしまう。結果、行間を明示した親の中で
   インライン要素だけ背が高くなり、箱が伸びる
   （実測: 52px の数字を囲む <em> が 101px、26px の見出しの <a> が 51px）。
   親から継がせるだけなので、これ自体は見た目を変えない。 */
.wp-site-blocks :is(em, strong, small, i, b, a, sup, sub, code) {
	line-height: inherit;
}

/* ソースの word-break:auto-phrase / text-wrap:balance を見出しと
   リード文にだけ効かせる。本文全体に掛けると日本語の行末が暴れる。 */
.tsg-balance,
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3 {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* ラベル用の等幅。Space Grotesk は字間を開けて初めて意匠になる。 */
.tsg-mono {
	font-family: var(--wp--preset--font-family--tsg-mono);
	letter-spacing: 0.06em;
}

/* 暗部セクション。背景色はブロック側のプリセットで塗り、
   ここでは「暗部に置かれた子要素の既定色」だけを面倒みる。 */
.tsg-dark {
	color: rgb(240 231 212 / 84%);
}

.tsg-dark :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--tsg-ivory);
}

/* ------------------------------------------------------------
   2. アイブロウ（SIVA AFI — FIRE KNIFE DANCE）
   26px の罫 + 字間 .3em のラベル。暗部では炎色に反転する。
   ------------------------------------------------------------ */
.is-style-tsg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.09em;
	line-height: 1.6;
	color: var(--wp--preset--color--tsg-teal);
	text-transform: uppercase;
}

.is-style-tsg-eyebrow::before {
	content: "";
	flex: none;
	width: 26px;
	height: 1px;
	background: currentColor;
}

/* 先頭の SIVA AFI 部分だけ炎色・字間狭め。パターン側で <strong> を使う。 */
.is-style-tsg-eyebrow strong {
	font-weight: inherit;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-dark .is-style-tsg-eyebrow {
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-dark .is-style-tsg-eyebrow strong {
	color: var(--wp--preset--color--tsg-flame-light);
}

/* ------------------------------------------------------------
   3. タパ柄（鮫歯）罫
   conic-gradient の三角を 20px 幅で敷き詰める。
   ------------------------------------------------------------ */
/* コアは既定スタイルの区切り線を
   `.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}`
   で細くするので、こちらも .wp-block-separator を足して幅を戻す。 */
.wp-block-separator.is-style-tsg-tapa {
	width: 100%;
	max-width: none;
	height: 10px;
	margin-block: 0;
	border: 0;
	opacity: 0.42;
	background: conic-gradient(
			from -45deg at 50% 100%,
			transparent 0 45deg,
			rgb(36 29 20 / 55%) 45deg 135deg,
			transparent 135deg
		)
		bottom / 20px 10px repeat-x;
}

.tsg-dark .wp-block-separator.is-style-tsg-tapa,
.wp-block-separator.is-style-tsg-tapa.tsg-tapa--light {
	opacity: 0.35;
	background: conic-gradient(
			from -45deg at 50% 100%,
			transparent 0 45deg,
			rgb(240 231 212 / 50%) 45deg 135deg,
			transparent 135deg
		)
		bottom / 20px 10px repeat-x;
}

/* ------------------------------------------------------------
   4. ボタン
   コアの .wp-block-button__link は詳細度が高く、色系ユーティリティに
   !important が付く場合があるため、セレクタを .wp-block-button から
   繋いで確実に勝たせる。
   ------------------------------------------------------------ */
.wp-block-button[class*="is-style-tsg-"] > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border-radius: 99px;
	font-family: var(--wp--preset--font-family--tsg-gothic);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.wp-block-button.is-style-tsg-solid > .wp-block-button__link {
	background: var(--wp--preset--color--tsg-ink);
	color: #fff;
	border: 0;
}

.wp-block-button.is-style-tsg-solid > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tsg-flame);
}

.wp-block-button.is-style-tsg-fire > .wp-block-button__link {
	background: var(--wp--preset--gradient--tsg-flame);
	color: var(--wp--preset--color--tsg-noir-deep);
	border: 0;
}

.wp-block-button.is-style-tsg-fire > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tsg-flame);
}

.wp-block-button.is-style-tsg-ghost > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--tsg-ink);
	border: 1px solid var(--wp--preset--color--tsg-ink);
}

.wp-block-button.is-style-tsg-ghost > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tsg-ink);
	color: #fff;
}

.tsg-dark .wp-block-button.is-style-tsg-ghost > .wp-block-button__link {
	color: var(--wp--preset--color--tsg-ivory);
	border-color: var(--wp--preset--color--tsg-ivory);
}

.tsg-dark .wp-block-button.is-style-tsg-ghost > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tsg-ivory);
	color: var(--wp--preset--color--tsg-noir);
}

.wp-block-button.is-style-tsg-line > .wp-block-button__link {
	background: var(--wp--preset--color--tsg-line-green);
	color: #fff;
	border: 0;
}

.wp-block-button.is-style-tsg-line > .wp-block-button__link:hover {
	background: #05a648;
}

/* ------------------------------------------------------------
   5. 注釈
   ------------------------------------------------------------ */
.is-style-tsg-note {
	font-size: 14.5px;
	color: var(--wp--preset--color--tsg-muted);
}

.tsg-dark .is-style-tsg-note {
	color: rgb(240 231 212 / 55%);
}

/* ------------------------------------------------------------
   6. リスト
   ------------------------------------------------------------ */
.is-style-tsg-check {
	list-style: none;
	padding: 0;
	margin: 18px 0;
}

.is-style-tsg-check > li {
	position: relative;
	padding: 9px 0 9px 34px;
	border-bottom: 1px solid rgb(36 29 20 / 7%);
	font-size: 15px;
}

/* チェックの「レ」は border 2辺 + 45度回転で描く（画像もSVGも不要）。 */
.is-style-tsg-check > li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 18px;
	width: 14px;
	height: 8px;
	border-left: 2.5px solid var(--wp--preset--color--tsg-flame);
	border-bottom: 2.5px solid var(--wp--preset--color--tsg-flame);
	transform: rotate(-45deg);
}

.tsg-dark .is-style-tsg-check > li {
	border-bottom-color: rgb(240 231 212 / 10%);
}

.is-style-tsg-triangle {
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
}

/* 隣の .is-style-tsg-check が 15px なので、そちらに揃える。
   同じ「箇条書き」が印だけ違って字の大きさも違うと、まとまりが悪く見える。 */
.is-style-tsg-triangle > li {
	position: relative;
	padding: 8px 0 8px 26px;
	border-bottom: 1px solid rgb(36 29 20 / 7%);
	font-size: 15px;
}

.is-style-tsg-triangle > li::before {
	content: "▲";
	position: absolute;
	left: 2px;
	top: 8px;
	font-size: 13px;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-dark .is-style-tsg-triangle > li {
	border-bottom-color: rgb(240 231 212 / 10%);
}

/* ------------------------------------------------------------
   7. 罫線テーブル
   ------------------------------------------------------------ */
.wp-block-table.is-style-tsg-index table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--wp--preset--color--tsg-ink);
}

.wp-block-table.is-style-tsg-index :is(th, td) {
	padding: 15px 8px;
	border: 0;
	border-bottom: 1px solid rgb(36 29 20 / 15%);
	text-align: left;
	vertical-align: top;
	font-size: 14.5px;
}

.wp-block-table.is-style-tsg-index th {
	width: 30%;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

/* 金額。パターン側で <strong> を使う。 */
.wp-block-table.is-style-tsg-index td strong {
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 17px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.wp-block-table.is-style-tsg-index td small {
	display: block;
	color: var(--wp--preset--color--tsg-muted);
}

/* ------------------------------------------------------------
   8. スクロール進捗バー
   ソースでは JS で width を更新していたが、スクロール駆動アニメーションで
   置き換える。非対応ブラウザではバーが出ないだけで、レイアウトは壊れない。
   ------------------------------------------------------------ */
.tsg-progress {
	position: relative;
	height: 3px;
	background: rgb(240 231 212 / 12%);
	overflow: hidden;
}

.tsg-progress::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--tsg-flame),
		var(--wp--preset--color--tsg-teal)
	);
}

@supports (animation-timeline: scroll()) {
	.tsg-progress::after {
		animation: tsg-progress linear both;
		animation-timeline: scroll(root block);
	}
}

@keyframes tsg-progress {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* ------------------------------------------------------------
   9. レターボックス帯
   FV・page-hero・CTA帯・全幅スチルで反復するシグネチャー。
   ------------------------------------------------------------ */
.tsg-letterbox {
	position: relative;
	overflow: hidden;
}

.tsg-letterbox::before,
.tsg-letterbox::after {
	content: "";
	position: absolute;
	left: 0;
	z-index: 2;
	width: 100%;
	height: var(--tsg-letterbox-size, 12px);
	background: #000;
	pointer-events: none;
}

.tsg-letterbox::before {
	top: 0;
}

.tsg-letterbox::after {
	bottom: 0;
}

/* ------------------------------------------------------------
   10. 編集画面のフォールバック
   プラグインから注入したカラープリセットは、エディターのキャンバス
   （iframe）へ変数として配信されないことがある。そうなると背景が
   透明になって「編集画面だけ文字が読めない」状態になるため、
   .editor-styles-wrapper スコープで同じ値を定義しておく。
   フロントにこのクラスは存在しないので影響はない。
   ------------------------------------------------------------ */
.editor-styles-wrapper {
	--wp--preset--color--tsg-flame: #e06a1f;
	--wp--preset--color--tsg-flame-light: #f49c3c;
	--wp--preset--color--tsg-noir: #151009;
	--wp--preset--color--tsg-noir-soft: #1d1610;
	--wp--preset--color--tsg-noir-deep: #0e0a06;
	--wp--preset--color--tsg-paper: #f3ede2;
	--wp--preset--color--tsg-paper-alt: #eae2d2;
	--wp--preset--color--tsg-card: #fbf7ee;
	--wp--preset--color--tsg-ivory: #f0e7d4;
	--wp--preset--color--tsg-teal: #2e6e7e;
	--wp--preset--color--tsg-teal-deep: #1e4450;
	--wp--preset--color--tsg-ink: #241d14;
	--wp--preset--color--tsg-body: #4c463c;
	--wp--preset--color--tsg-muted: #8a8172;
	--wp--preset--color--tsg-line-green: #06c755;
	--wp--preset--gradient--tsg-flame: linear-gradient(100deg, #e06a1f 0%, #f49c3c 100%);
	--wp--preset--font-family--tsg-mincho: "Shippori Mincho", serif;
	--wp--preset--font-family--tsg-gothic: "Zen Kaku Gothic New", sans-serif;
	--wp--preset--font-family--tsg-mono: "Space Grotesk", monospace;
}

/* ============================================================
   ヘッダー
   ソース .c-hd 系の再現。ブレークポイントもソースに合わせる:
   1080px 以下 = ナビのラベルを落として番号だけ
   760px 以下  = ナビとCTAを畳んでハンバーガー（コアのオーバーレイ）
   ============================================================ */

/* 背景のすりガラスは擬似要素へ逃がす。
   backdrop-filter / filter / transform を持つ要素は position:fixed の
   包含ブロックになる。これを .tsg-header 自身に付けると、中にある
   オーバーレイメニューが「ヘッダーの高さ（61px）」に閉じ込められて
   全画面にならない。擬似要素へ移せば見た目は同じで副作用だけ消える。 */
.tsg-header {
	/* ヘッダー行の高さ。オーバーレイの上端も閉じるボタンの垂直中央も
	   ここから導くので、実数はこの1か所だけに置く。 */
	--tsg-header-h: 64px;

	/* 行 + 進捗バー3px + 下線1px + 管理バー。オーバーレイはこの下から始まる。 */
	--tsg-header-total: calc(
		var(--wp-admin--admin-bar--height, 0px) + var(--tsg-header-h) + 4px
	);

	z-index: 80;
	border-bottom: 1px solid rgb(240 231 212 / 16%);
}

.tsg-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(21 16 9 / 94%);
	backdrop-filter: blur(10px);
}

.tsg-header__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	max-width: 1280px;
	height: var(--tsg-header-h);
	margin-inline: auto;
	padding-inline: 22px;
}

/* メニューを開いているあいだは、ヘッダーの背景を不透明にする。
   ソースはヘッダー(z-index:80)がオーバーレイ(70)の上に重なる作りで、
   すりガラス越しにスラブの色が透けて見えていた。こちらはオーバーレイを
   ヘッダーの下端から始めるので、同じ見え方になるよう地の色を焼き込む
   （そのままだと下の本文やFV写真が透けて、カンプと違う帯になる）。 */
.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)::before {
	background: rgb(21 16 9);
	backdrop-filter: none;
}

/* --- ロゴ ---------------------------------------------------
   炎のドット + ワードマーク + 英字サブの3点。ドットは擬似要素で
   2行ぶんをまたぐので、flex ではなく grid で組む。 */
.tsg-header__logo {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 10px;
	flex: none;
}

.tsg-header__logo::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / 3;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 40% 35%,
		var(--wp--preset--color--tsg-flame-light),
		var(--wp--preset--color--tsg-flame)
	);
	box-shadow: 0 0 14px rgb(244 156 60 / 80%);
}

.tsg-header__wordmark {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	/* ソースの <b> は body の 1.95 を継ぐ。ここを 1.2 にするとロゴの箱が
	   43px → 29px に縮み、英字サブとの間隔が詰まる。 */
	line-height: 1.95;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-header__wordmark a {
	color: inherit;
	text-decoration: none;
}

.tsg-header__sub {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.09em;
	line-height: 1.2;
	color: var(--wp--preset--color--tsg-flame-light);
}

/* --- グローバルナビ -----------------------------------------
   className はコアが <nav> と <ul> の両方に付けるので、
   要素名まで書いて取り違えを防ぐ。

   ソースは .c-hd__in の直下に［ロゴ／ナビ／CTA／バーガー］の4つを並べ、
   justify-content:space-between で配分している。こちらもマークアップの
   並び順がそのまま表示順になる（ハンバーガーは別の core/navigation なので、
   以前のように display:contents と order で組み替える必要はない）。 */
.tsg-header nav.tsg-header__nav,
.tsg-header nav.tsg-menu__nav {
	/* 項目間の隙間。unitone は
	   `.wp-block-navigation{column-gap:var(--unitone--column-gap)!important}` で
	   出すため、blockGap 属性（コアのインラインCSS）でも skin.css の gap でも
	   勝てない。変数側に渡すのが唯一効く経路。
	   <ul> 側はコアが `gap: inherit !important` を当てているので、
	   ここを直せばそのまま伝わる（オーバーレイ時も同じ2pxになる）。 */
	--unitone--column-gap: 2px;
	--unitone--row-gap: 2px;

	flex: none;
}

.tsg-header ul.tsg-header__nav {
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
	/* 01 から始める。オーバーレイ側では -1 に振り直してホームを 00 にする。 */
	counter-reset: tsg-nav 0;
}

/* テーマ／コアが li に付ける margin-inline-start を消す。
   これを忘れると flex の gap に 24px が加算されて間隔が合わない。 */
.tsg-header ul.tsg-header__nav > li {
	margin-inline-start: 0;
	counter-increment: tsg-nav;
}

/* 末尾に .wp-block-navigation-item__content を足しているのは詳細度のため。
   コアが
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`
   を (0,3,0) で出しており、`.tsg-header ul.tsg-header__nav > li > a`（0,2,2）では負ける。
   負けると色は本文色（#4C463C）を継ぎ、暗い帯の上でほとんど読めなくなる。
   現在地（属性セレクター）とホバー（:hover）は元から 0,3,2 以上で効いていたので、
   「現在地のピルは正しいのに通常時だけ暗い」という分かりにくい症状になっていた。 */
.tsg-header ul.tsg-header__nav > li > a.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	/* ソースは 62% だが、それは色が効いている前提の値。実装では上記のとおり
	   ずっと本文色が出ていた。指摘を受けて 80% まで上げている。 */
	color: rgb(240 231 212 / 80%);
	transition: color 0.25s, background 0.25s;
}

/* 番号は CSS カウンター。項目を増減しても振り直す必要がない。 */
.tsg-header ul.tsg-header__nav > li > a::before {
	content: counter(tsg-nav, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--tsg-flame);
	transition: color 0.25s;
}

.tsg-header ul.tsg-header__nav > li > a[aria-current="page"] {
	color: var(--wp--preset--color--tsg-noir);
	background: var(--wp--preset--color--tsg-flame-light);
}

.tsg-header ul.tsg-header__nav > li > a[aria-current="page"]::before {
	color: var(--wp--preset--color--tsg-noir);
}

.tsg-header ul.tsg-header__nav > li > a:not([aria-current="page"]):hover {
	color: var(--wp--preset--color--tsg-ivory);
	background: rgb(240 231 212 / 10%);
}

/* --- お問い合わせピル --------------------------------------- */
.tsg-header__cta {
	flex: none;
	margin: 0;
}

/* ボタンの基本形（.wp-block-button.is-style-tsg-solid > .wp-block-button__link）は
   詳細度 0,3,0 で出しているので、ヘッダー用の上書きは .tsg-header を足して 0,4,0 にする。
   ここを 0,2,0 で書くと「色もサイズも効かない」状態になる。 */
.tsg-header .wp-block-button.is-style-tsg-solid > .wp-block-button__link {
	padding: 9px 18px;
	font-size: 14px;
	line-height: 1.95;
	background: var(--wp--preset--color--tsg-ivory);
	color: var(--wp--preset--color--tsg-noir);
}

.tsg-header .wp-block-button.is-style-tsg-solid > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tsg-flame-light);
}

/* --- スクロール進捗バーの土台 ------------------------------- */
.tsg-header .tsg-progress {
	margin: 0;
}

/* --- 1080px 以下: 横並びナビを畳む --------------------------
   以前はラベルだけ落として「01 02 03 04 05」の番号を残していたが、
   番号だけでは何のページか分からないという指摘を受けて丸ごと畳む。
   番号はラベルの脇にあってはじめて意味を持つ装飾で、単体では
   ナビゲーションとして機能しない。ハンバーガー（別の
   core/navigation）は全幅で出ているので、導線は失われない。

   1080px の根拠: ラベル入りで実測した必要幅は
   ロゴ213 + ナビ568 + CTA120 + バーガー40 + gap18×3 + 左右padding22×2 = 1039px。
   端数を切り上げた値。ナビの項目やラベルを増やしたら測り直すこと。 */
@media (max-width: 1080px) {
	/* コアの .is-layout-flex{display:flex}（0,1,0）に勝つため
	   .tsg-header を足して 0,2,0 にする。 */
	.tsg-header nav.tsg-header__nav {
		display: none;
	}

	/* .tsg-header__in は justify-content:space-between なので、ナビを消すと
	   その桁ぶんの余白が CTA の左右に分配され、ピルが帯の中央に浮いてしまう。
	   ロゴ側に auto マージンを持たせて余白を1か所に集め、
	   CTA をハンバーガーの隣（右端）へ寄せる。 */
	.tsg-header .tsg-header__logo {
		margin-inline-end: auto;
	}
}

/* --- 760px 以下: CTAピルも畳む ------------------------------
   ハンバーガー（別の core/navigation）はそのまま残る。 */
@media (max-width: 759.98px) {
	/* ナビは 1080px の時点で畳んである。ここで消すのは CTA ピルだけ。 */
	.tsg-header .tsg-header__cta {
		display: none;
	}

	.tsg-header {
		--tsg-header-h: 58px;
	}
}

/* ============================================================
   ハンバーガーとオーバーレイメニュー
   コアの core/navigation（overlayMenu:"always"）を着せ替えて作る。
   独自JSは書かない。開閉はコアの Interactivity API がやる。

   ソースは transition で開閉の両方を動かしていたが、コアは閉じている間
   display:none にするため transition が走らない。開くときだけ animation で
   同じ動きを再現する（閉じるのは即時）。

   重ね順の考え方（ここを間違えると閉じるボタンが押せなくなる）:
   コアはオーバーレイに z-index:100000 を当てる。閉じるボタンはその内側に
   あるので、オーバーレイを下げるとボタンも一緒に下がり、ヘッダーより上へは
   出られない。そこでオーバーレイ自体は下げず、上端をヘッダーの下に寄せる。
   こうすると
     - ヘッダー（ロゴ・ナビ・CTA）はオーバーレイの外側なので常に手前に見える
     - 閉じるボタンは position:fixed でヘッダーの帯まで持ち上げられ、
       z-index:100000 のままなのでヘッダーの上に描かれて確実に押せる
   の両方が同時に成立する。
   ============================================================ */

/* --- ハンバーガー -------------------------------------------
   コアのSVGを隠し、1本のバーと box-shadow で3本に見せる。
   overlayMenu:"always" なのでコアが always-shown を付け、全幅で表示される。 */
.tsg-header .wp-block-navigation__responsive-container-open {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* ソースは 3本のバー(2px)+2つの隙間(6px)+上下padding(10px) で 38px。
	   こちらは1本+box-shadow で描くので、箱の高さは明示する。
	   バーの位置は両者とも同じ（ヘッダー上端から 23/31/39px）。 */
	height: 38px;
	padding: 10px 6px;
	background: none;
	border: 0;
	cursor: pointer;
}

.tsg-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.tsg-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--tsg-ivory);
	box-shadow:
		0 -8px 0 var(--wp--preset--color--tsg-ivory),
		0 8px 0 var(--wp--preset--color--tsg-ivory);
}

/* 開いているあいだは閉じるボタン（×）が同じ場所に重なるので、
   display:none ではなく visibility で消して桁を保つ。 */
.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)
	.wp-block-navigation__responsive-container-open {
	visibility: hidden;
}

/* --- 閉じるボタン（×） --------------------------------------
   コアの既定はオーバーレイ右上だが、カンプではハンバーガーと同じ位置。
   position:fixed でヘッダーの帯へ持ち上げる。

   右端の位置は 100vw ではなく % で出す。fixed 要素のパーセンテージは
   初期包含ブロック（＝スクロールバーを含まないビューポート）に対して
   解決されるので、スクロールバーの有無で 7〜8px ずれない。 */
.tsg-header .wp-block-navigation__responsive-container-close {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: max(22px, calc((100% - 1280px) / 2 + 22px));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: var(--tsg-header-h);
	/* コアは margin:16px 16px 0 0 を当てている。消さないと右へ16px・下へ16px
	   ずれて、ハンバーガーの位置と一致しない。 */
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.tsg-header .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.tsg-header .wp-block-navigation__responsive-container-close::before,
.tsg-header .wp-block-navigation__responsive-container-close::after {
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: calc(50% - 14px);
	width: 28px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--tsg-ivory);
}

.tsg-header .wp-block-navigation__responsive-container-close::before {
	transform: rotate(45deg);
}

.tsg-header .wp-block-navigation__responsive-container-close::after {
	transform: rotate(-45deg);
}

/* --- オーバーレイ本体 ---------------------------------------
   コアは白背景と大きな padding を
   `.wp-block-navigation:not(.has-background) …:not(.disable-default-overlay)`
   （詳細度 0,5,0）で出してくる。素直に書くと負けるので、
   こちらも要素名を1つ足して 0,5,1 まで上げてから打ち消す。 */
.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0;
	background: transparent;
	overflow: hidden;
}

/* ヘッダーの下端から始める。これでヘッダーが覆われない。

   animation / transform を切っているのは見た目のためではなく、位置の基準のため。
   コアの overlay-menu__fade-in-animation は translateY を animation-fill-mode:forwards
   で当てるので、閉じたあとも transform が identity のまま残る。transform を持つ要素は
   position:fixed の包含ブロックになるため、中の閉じるボタンがビューポートではなく
   このオーバーレイを基準に配置されてしまい、ヘッダーの帯まで持ち上げられなくなる。
   フェードは自前のスラブ側で作っているので、コアの分は消してよい。 */
.tsg-header .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--tsg-header-total);
	animation: none;
	transform: none;
}

/* 3枚のスキュー版と炎色の斜線。使える擬似要素は4つで、
   position:static な __responsive-close の分も含めて
   いずれも直近の位置指定祖先が fixed の container になる。

   重要なのは割り当ての順番。z-index を持たない配置済み要素は
   ツリー順で描かれるので、実際の描画順は

     container::before → close::before → close::after → container::after

   になる（close は静的要素なので、その ::after は close の中身より後）。
   ソースの s1 → s2 → s3 → bar をこの順に載せる。
   ここを入れ替えると、あとの版が前の版と斜線を覆って
   「斜線だけ消える」という分かりにくい壊れ方をする。
   メニュー本体（dialog）は z-index:1 なので、この4つより常に手前。 */
.tsg-header .wp-block-navigation__responsive-container.is-menu-open::before,
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close::before,
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -20%;
	width: 140%;
	transform: translateX(112%) skewX(-10deg);
	animation: tsg-slab-in 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

/* s1 */
.tsg-header .wp-block-navigation__responsive-container.is-menu-open::before {
	background: var(--wp--preset--color--tsg-teal-deep);
	animation-delay: 0s;
}

/* s2 */
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close::before {
	background: var(--wp--preset--color--tsg-noir-soft);
	animation-delay: 0.08s;
}

/* s3 */
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close::after {
	background: var(--wp--preset--color--tsg-noir-deep);
	animation-delay: 0.16s;
}

/* 炎色の斜線。left:63% と skewX(-10deg) はソースの実数そのまま。 */
.tsg-header .wp-block-navigation__responsive-container.is-menu-open::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 63%;
	width: 7px;
	background: var(--wp--preset--color--tsg-flame);
	transform: skewX(-10deg);
	opacity: 0;
	animation: tsg-fade-in 0.4s ease 0.42s forwards;
}

@keyframes tsg-slab-in {
	from {
		transform: translateX(112%) skewX(-10deg);
	}

	to {
		transform: translateX(0) skewX(-10deg);
	}
}

@keyframes tsg-fade-in {
	to {
		opacity: 1;
	}
}

/* コアは close / dialog に max-width や余白を付けて中央寄せするので、
   画面いっぱいに伸ばし直してから自前の余白を敷く。 */
.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-close {
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* メニュー本体はスラブより上に置く。 */
.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	animation: tsg-fade-in 0.3s ease 0.38s forwards;
}

/* 左カラム。ソースの .c-menu__content は 1.25fr / .75fr の2カラムなので、
   リスト側の幅は 62.5%。padding の 12vh 8vw もソースの実数。

   padding-bottom にヘッダーぶんを足しているのは、上下中央の基準を
   「オーバーレイの箱」ではなく「ビューポート全体」に戻すため。
   ソースのオーバーレイは inset:0 でヘッダーの裏まで伸びていたので、
   これを入れないとリスト全体がヘッダーの高さの半分だけ下がる。 */
.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 62.5%;
	height: 100%;
	padding: 12vh 8vw calc(12vh + var(--tsg-header-total));
}

.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* この <ul> はソースには無く、core/navigation が挟むもの。
	   コンテナ側の justify-content:center で「<ul> が」中央に来ても、
	   <ul> 自身は残りの高さいっぱいに伸びるため、中の項目は上端に張り付く。
	   <ul> にも center を持たせて初めてソースと同じ上下中央になる
	   （リストが箱より高いときは、伸びずにそのまま中央で溢れる）。 */
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	/* ホームを 00 から始める。 */
	counter-reset: tsg-nav -1;
}

/* MENU ラベル。ソースの .c-menu__lbl を擬似要素で作る。 */
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav::before {
	content: "MENU — TOA SAPAGI";
	margin-bottom: 22px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav
	> li {
	align-items: baseline;
	justify-content: flex-start;
	width: 100%;
	margin-inline-start: 0;
	counter-increment: tsg-nav;
}

.tsg-header
	nav.tsg-menu__nav
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav
	> li
	> a {
	display: inline-flex;
	align-items: baseline;
	gap: 18px;
	padding: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(24px, 4.6vw, 50px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--tsg-ivory);
	background: none;
	transition: color 0.2s, padding 0.25s;
}

/* ラベルは <span> に入っているので、行ボックスの高さを決めるのは <a> ではなく
   この span。unitone の `*{line-height:var(--unitone--line-height)}` が
   1.95 を流し込むため、<a> に 1.5 と書くだけでは 50px の行が 98px になる。
   変数側に渡してソースの 75px（50px × 1.5）へ戻す。 */
.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav
	> li
	> a
	.wp-block-navigation-item__label {
	--unitone--line-height: 1.5;

	line-height: 1.5;
}

.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav
	> li
	> a::before {
	content: counter(tsg-nav, decimal-leading-zero);
	/* 番号もフレックスアイテムなので、ラベルが折り返す幅では一緒に縮んで
	   「0」と「3」が上下に割れる。縮小と折り返しの両方を止める。 */
	flex: none;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-header
	.wp-block-navigation__responsive-container.is-menu-open
	ul.tsg-menu__nav
	> li
	> a:hover {
	padding-left: 12px;
	color: var(--wp--preset--color--tsg-flame-light);
	background: none;
}

/* --- 右カラム（SCHOOL / AWARD / CONTACT） --------------------
   コアのオーバーレイの中へ任意のブロックは差し込めないので、
   ヘッダー直下の兄弟として置き、開いているあいだだけ出す。
   z-index はスラブ（100000）より上。 */
.tsg-menu__side {
	display: none;
}

.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)
	.tsg-menu__side {
	/* unitone は decorator に `position: var(--unitone--position)!important` を当て、
	   さらにレンダー時に `-position:relative` を data 属性へ足して
	   `--unitone--position: relative !important` を出す。
	   プロパティ側に fixed と書いても効かないので、変数へ !important で渡す。 */
	--unitone--position: fixed !important;

	position: fixed;
	top: var(--tsg-header-total);
	right: 0;
	bottom: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	width: 37.5%;
	padding: 14vh 4vw calc(14vh + var(--tsg-header-total));
	border-left: 1px solid rgb(240 231 212 / 16%);
	color: var(--wp--preset--color--tsg-ivory);
	opacity: 0;
	animation: tsg-fade-in 0.3s ease 0.38s forwards;
}

.tsg-menu__it-l {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-menu__it-v {
	margin: 4px 0 0;
	font-size: 14.5px;
	line-height: 1.8;
}

/* --- 820px 以下: 1カラム ------------------------------------
   ソースと同じく右カラムを落とし、リストを全幅にする。 */
@media (max-width: 820px) {
	.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.tsg-menu__side {
		display: none;
	}

	.tsg-header
		nav.tsg-menu__nav
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-container-content {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsg-header .wp-block-navigation__responsive-container.is-menu-open::before,
	.tsg-header .wp-block-navigation__responsive-container.is-menu-open::after,
	.tsg-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close::before,
	.tsg-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-close::after,
	.tsg-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog,
	.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.tsg-menu__side {
		animation: none;
		opacity: 1;
		transform: translateX(0) skewX(-10deg);
	}

	.tsg-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__responsive-dialog,
	.tsg-header:has(.wp-block-navigation__responsive-container.is-menu-open)
		.tsg-menu__side {
		transform: none;
	}
}

/* ============================================================
   フッター
   特大マーキー（unitone/marquee）+ 下段のロゴ・ナビ・著作権。
   ============================================================ */

.tsg-footer {
	background: var(--wp--preset--color--tsg-noir-deep);
	color: var(--wp--preset--color--tsg-ivory);
	border-top: 1px solid rgb(240 231 212 / 16%);
	overflow: hidden;
}

/* --- マーキー帯 ---------------------------------------------
   帯全体をお問い合わせへのリンクにする。マーキーの中に <a> を入れると
   入れ子リンクになるので、サブテキストの <a> を擬似要素で帯まで広げる。 */
.tsg-footer__mq {
	position: relative;
	padding: 62px 0 56px;
	border-bottom: 1px solid rgb(240 231 212 / 16%);
}

.tsg-footer__hint {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.09em;
	white-space: nowrap;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-footer__mq [data-unitone-layout~="marquee"] > p {
	display: flex;
	align-items: center;
	gap: 34px;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(60px, 10vw, 120px);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1;
	white-space: nowrap;
	color: var(--wp--preset--color--tsg-ivory);
}

/* 各トークンの後ろに炎のドットを置く（SIVA AFI ● TOA SAPAGI ● …）。 */
.tsg-footer__mq [data-unitone-layout~="marquee"] > p::after {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 40% 35%,
		var(--wp--preset--color--tsg-flame-light),
		var(--wp--preset--color--tsg-flame)
	);
	box-shadow: 0 0 22px rgb(244 156 60 / 65%);
}

/* 白抜き文字。text-stroke だけで塗りは透明。 */
.tsg-footer__mq [data-unitone-layout~="marquee"] > p.tsg-footer__ol {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--wp--preset--color--tsg-ivory);
}

.tsg-footer__mq:hover [data-unitone-layout~="marquee"] > p.tsg-footer__ol {
	color: var(--wp--preset--color--tsg-flame-light);
	-webkit-text-stroke: 1.5px var(--wp--preset--color--tsg-flame-light);
}

/* position を殺しておくのが要点。unitone が app.css の
   :where([data-unitone-block-list~="layout"] …) で position:relative を当てるため、
   このままだと下の a::after（stretched link）の基準がこの段落になり、
   帯ではなく一文ぶんしか押せない。プロパティ側で static と書いても
   unitone は var(--unitone--position) で出すので効かない。変数を上書きする。
   これで ::after の基準が .tsg-footer__mq（position:relative）になり、帯全体が押せる。 */
.tsg-footer__sub {
	--unitone--position: static;

	position: static;
	margin: 32px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: rgb(240 231 212 / 55%);
}

/* この <a> は文中リンクではなく帯全体の stretched link（下の ::after が本体）。
   文全体を包んでいるので、下線や太字を付けると一文がまるごとリンクの見た目になる。
   押せることは上の「— TAP TO CONTACT —」と、帯ホバー時の明度で示す。 */
.tsg-footer__sub a {
	color: inherit;
	transition: color 0.25s;
}

.tsg-footer__mq:hover .tsg-footer__sub a,
.tsg-footer__sub a:focus-visible {
	color: var(--wp--preset--color--tsg-ivory);
}

/* stretched link: リンクの当たり判定を帯全体へ広げる。 */
.tsg-footer__sub a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* --- 下段 --------------------------------------------------- */
/* 下段は行として積む。1行に3分割で詰めると、ナビと著作権が窮屈なうえ
   SNSを足す余地が無い。行ごとの間隔は gap で決める。 */
.tsg-footer__low {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 1240px;
	margin-inline: auto;
	padding: 26px 28px 30px;
}

/* 1行目だけ左右に振り分ける（左=ロゴ／右=SNS）。
   幅が足りなければ折り返して2行になる。 */
.tsg-footer__lowtop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.tsg-footer__logo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-footer__logo::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 40% 35%,
		var(--wp--preset--color--tsg-flame-light),
		var(--wp--preset--color--tsg-flame)
	);
}

/* core/social-links の既定はピル状の背景と、アイコン24px前提の余白を持つ。
   is-style-logos-only で背景は消えるが、余白と大きさは残るのでここで潰す。
   色は currentcolor 経由なので a に指定すればグリフまで届く。 */
.tsg-footer ul.tsg-footer__sns {
	gap: 14px;
	margin: 0;
	padding: 0;
}

.tsg-footer ul.tsg-footer__sns > li {
	margin-inline-start: 0;
	padding: 0;
}

.tsg-footer .tsg-footer__sns .wp-social-link a {
	display: flex;
	align-items: center;
	padding: 0;
	transition: color 0.25s;
}

/* 色だけは is-style-logos-only を選択子に含めて詳細度を上げる必要がある。
   コアは logos-only のときサービス別のブランド色を li に当てており
   （Instagram は #f00075）、その
   .wp-block-social-links.is-style-logos-only .wp-social-link-instagram が
   詳細度 0,3,0。素直に書いた .tsg-footer ul.tsg-footer__sns > li は
   0,2,2 で負ける。display や padding は効いているのに色だけ
   ピンクのまま、という紛らわしい負け方をする。

   li と a の両方に指定する。a 側だけだと、コアやテーマが
   a に color:currentcolor を同詳細度で後から当てたときに
   li のブランド色を拾ってしまう。 */
.tsg-footer .tsg-footer__sns.is-style-logos-only .wp-social-link,
.tsg-footer .tsg-footer__sns.is-style-logos-only .wp-social-link a {
	color: rgb(240 231 212 / 55%);
}

.tsg-footer .tsg-footer__sns.is-style-logos-only .wp-social-link a:hover,
.tsg-footer .tsg-footer__sns.is-style-logos-only .wp-social-link a:focus-visible {
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-footer .tsg-footer__sns .wp-social-link svg {
	width: 19px;
	height: 19px;
	fill: currentcolor;
}

.tsg-footer ul.tsg-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsg-footer ul.tsg-footer__nav > li {
	margin-inline-start: 0;
}

.tsg-footer ul.tsg-footer__nav > li > a {
	font-size: 14px;
	color: rgb(240 231 212 / 55%);
	transition: color 0.25s;
}

.tsg-footer ul.tsg-footer__nav > li > a:hover {
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-footer__cp {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.05em;
	color: rgb(240 231 212 / 45%);
}

@media (prefers-reduced-motion: reduce) {
	.tsg-footer__mq [data-unitone-layout~="marquee"] {
		animation: none;
	}
}

/* ============================================================
   セクションの器
   ソースの .wrap / .sec / .page-section をそのまま持ってくる。

   unitone/section ではなく unitone/decorator を使っているのは、
   section が padding / gap / position を var(--unitone--*) + !important で
   出すためプロパティ側から上書きできず、ソースの実数（104px / 84px など）を
   素直に置けないから。decorator は素の div なので干渉しない。
   ============================================================ */

.tsg-wrap {
	width: min(1120px, calc(100% - 56px));
	margin-inline: auto;
}

/* トップページ用の広いセクション。 */
.tsg-sec {
	position: relative;
	padding-block: 104px;
}

/* 下層ページ用のセクション。 */
.tsg-page-section {
	position: relative;
	padding-block: 84px;
}

.tsg-page-section.tsg-alt {
	background: var(--wp--preset--color--tsg-paper-alt);
}

.tsg-page-section.tsg-dark {
	background: var(--wp--preset--color--tsg-noir-soft);
}

.tsg-sec.tsg-dark {
	background: var(--wp--preset--color--tsg-noir-deep);
}

/* 節の見出し。
   直下（.tsg-page-section > .tsg-wrap > 見出し）だけを見ていたため、
   二段組みの中に置かれた h2 —「ファイヤーナイフダンスとは」「大会実績」
   「こんな方におすすめ」— が既定の 16px のままで、本文とほぼ同じ大きさに
   なっていた。ページによって節見出しが 34px だったり 16px だったりする、
   という見え方の原因。h2 は深さを問わず拾う。

   独自クラスを持つ見出し（カードのタイトル、お知らせの記事タイトル）は
   それぞれの規則があるので除外する。:where() で詳細度を上げないでおくと、
   個別の規則が今までどおり勝つ。 */
.tsg-page-section h2:where(:not([class*="tsg-"])),
.tsg-page-section > .tsg-wrap > .wp-block-heading {
	margin-bottom: 26px;
	font-size: clamp(23px, 3.2vw, 34px);
}

.tsg-page-section h3 {
	margin: 34px 0 12px;
	font-size: clamp(18px, 2.2vw, 22px);
}

/* --- 規約・ポリシーの本文 -----------------------------------
   節を帯で分けず、1つの帯の中で見出しの間隔だけで区切る。
   読み幅は本文だけ 760px に絞る（.tsg-wrap の 1120px は
   14〜15px の文章には広すぎて視線が戻れない）。 */
.tsg-legal > .tsg-wrap {
	max-width: 760px;
}

.tsg-legal > .tsg-wrap > .wp-block-heading {
	margin: 46px 0 12px;
	font-size: clamp(18px, 2.4vw, 22px);
}

.tsg-legal > .tsg-wrap > .wp-block-heading:first-child {
	margin-top: 0;
}

.tsg-legal p {
	font-size: 14.5px;
}

.tsg-legal .is-style-tsg-check {
	margin: 14px 0 0;
}

/* 窓口。フォーム下の注記（.tsg-contact-note）と同じ箱で揃える。 */
.tsg-pp-contact {
	margin-top: 52px;
	padding: 24px 26px;
	background: rgb(46 110 126 / 7%);
	border: 1px solid rgb(46 110 126 / 25%);
	border-radius: 12px;
}

.tsg-legal .tsg-pp-contact .wp-block-heading {
	margin: 0 0 12px;
	font-size: 17px;
}

.tsg-legal .tsg-pp-contact p {
	margin: 0 0 4px;
}

.tsg-legal .tsg-pp-date {
	margin-top: 26px;
	font-size: 14px;
	color: var(--wp--preset--color--tsg-muted);
}

/* --- フォーム下のプライバシーポリシー導線 ------------------- */
.tsg-form-privacy {
	margin-top: 14px;
	font-size: 13px;
	text-align: center;
	color: var(--wp--preset--color--tsg-muted);
}

.tsg-form-privacy a {
	color: var(--wp--preset--color--tsg-teal);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.tsg-form-privacy a:hover {
	color: var(--wp--preset--color--tsg-flame);
}

/* アイブロウ直後の見出しは詰める。 */
.is-style-tsg-eyebrow + .wp-block-heading {
	margin-top: 14px;
}

/* トップページ用の大見出し。 */
.tsg-h2 {
	margin-top: 14px;
	font-size: clamp(26px, 4vw, 44px);
}

@media (max-width: 768px) {
	.tsg-wrap {
		width: calc(100% - 40px);
	}

	.tsg-sec {
		padding-block: 66px;
	}

	.tsg-page-section {
		padding-block: 56px;
	}
}

/* ============================================================
   ページヒーロー
   core/cover の背景スパンに、ソースの2枚重ねグラデーションを載せる。
   写真そのものは cover の img（＝メディアライブラリ管理・srcset つき）。
   ============================================================ */

.tsg-page-hero.wp-block-cover {
	min-height: 0;
	padding: 92px 0 76px;
	color: var(--wp--preset--color--tsg-ivory);
	background-color: var(--wp--preset--color--tsg-noir-deep);
}

/* 覆いは必ずここで作る。ブロック側に customOverlayColor を持たせると
   インラインの background-color が写真を完全に隠してしまう。 */
.tsg-page-hero.wp-block-cover > .wp-block-cover__background {
	background-color: transparent;
	background-image:
		linear-gradient(
			90deg,
			rgb(14 10 6 / 92%) 0%,
			rgb(21 16 9 / 72%) 48%,
			rgb(21 16 9 / 30%) 100%
		),
		linear-gradient(180deg, rgb(14 10 6 / 14%), rgb(14 10 6 / 76%));
	opacity: 1;
}

.tsg-page-hero .wp-block-cover__inner-container {
	width: 100%;
}

/* パンくず。JSON-LD の BreadcrumbList（inc/seo.php）と対。 */
.tsg-page-hero__crumbs {
	margin: 0 0 22px;
	font-size: 13px;
	color: rgb(240 231 212 / 55%);
}

.tsg-page-hero__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s;
}

.tsg-page-hero__crumbs a:hover {
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-page-hero__en {
	display: block;
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-page-hero .tsg-page-hero__title {
	margin: 0;
	font-size: clamp(28px, 4.6vw, 46px);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--tsg-ivory);
}

/* 下層ページの導入文。46px の見出しの直下に 14.5px は落差が大きすぎ、
   しかも .tsg-wrap の 1120px いっぱいに流れるので1行が約77字あった。
   日本語は 35〜45 字/行を超えると行の戻り先を見失う。
   文字を上げ、同時に1行の長さを 38 字で止める。 */
.tsg-page-hero__lead {
	max-width: 38em;
	margin: 14px 0 0;
	font-size: 17px;
	color: rgb(240 231 212 / 82%);
	text-shadow: 0 1px 18px rgb(0 0 0 / 40%);
}

@media (max-width: 768px) {
	.tsg-page-hero.wp-block-cover {
		padding: 60px 0 50px;
	}
}

/* ============================================================
   CTA帯
   ============================================================ */

.tsg-cta.wp-block-cover {
	min-height: 0;
	padding: 96px 0;
	text-align: center;
	color: var(--wp--preset--color--tsg-ivory);
	background-color: var(--wp--preset--color--tsg-noir-deep);
}

.tsg-cta.wp-block-cover > .wp-block-cover__background {
	background-color: transparent;
	background-image: linear-gradient(rgb(14 10 6 / 82%), rgb(14 10 6 / 88%));
	opacity: 1;
}

.tsg-cta .wp-block-cover__inner-container {
	width: 100%;
}

.tsg-cta::before,
.tsg-cta::after {
	--tsg-letterbox-size: 10px;
}

.tsg-cta__en {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-cta .tsg-cta__title {
	margin: 16px 0 14px;
	font-size: clamp(26px, 4.4vw, 44px);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tsg-ivory);
}

/* CTA帯は中央揃えなので、1行を止めたうえで margin:auto で中央へ戻す。 */
.tsg-cta__text {
	max-width: 34em;
	margin: 0 auto;
	font-size: 16px;
	color: rgb(240 231 212 / 78%);
}

.tsg-cta .tsg-cta__buttons {
	gap: 14px;
	margin-top: 30px;
}

/* ============================================================
   about ページ
   ============================================================ */

.tsg-narrow {
	max-width: 860px;
}

/* 読ませる文章の1行を 42 字で止める。860px の器に 16px を流すと
   1行が約54字になり、行の戻り先を見失う（日本語は35〜45字が読みやすい）。

   器そのものを狭めないのは、同じ器に入っている 22px のビジョン文が
   現状ちょうど39字で、器を詰めるとそちらが窮屈になるため。

   :where() で詳細度を 0 に落としてあるので、
   .tsg-update-note のように独自の幅を持つ段落はそちらが勝つ。 */
:where(.tsg-narrow) > p {
	max-width: 42em;
}

/* お知らせ本文も同じ器（860px）なので同じことが起きる。
   ここは段落がコアの .entry-content に包まれていて上の規則が届かない。 */
:where(.tsg-entry .entry-content) > p {
	max-width: 42em;
}

.tsg-divider {
	background: var(--wp--preset--color--tsg-paper);
}

.tsg-about-lead {
	margin-top: 24px;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(19px, 2.8vw, 26px);
	line-height: 2.2;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-about-lead em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame);
}

/* --- 活動内容カード ----------------------------------------- */
.tsg-act-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin-top: 36px;
	counter-reset: tsg-act;
}

.tsg-act {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: 18px;
	padding: 26px;
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 14px;
	counter-increment: tsg-act;
}

.tsg-act::before {
	content: counter(tsg-act, decimal-leading-zero);
	grid-column: 1;
	grid-row: 1 / 3;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-act__title {
	grid-column: 2;
	grid-row: 1;
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: 17.5px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-act__text {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 13.5px;
}

/* --- 写真ストリップ ------------------------------------------ */
.tsg-ph-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-top: 44px;
}

/* テーマが figure を display:table 相当にしていると画像の実寸まで縮むので、
   block + width:100% を明示する。高さは aspect-ratio で確保する
   （height:100% は親が auto だと 0 に潰れる）。 */
.tsg-ph-strip .wp-block-image,
.tsg-two-col > .wp-block-image {
	display: block;
	width: 100%;
	margin: 0;
}

.tsg-ph-strip .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

/* --- 2カラム ------------------------------------------------- */
.tsg-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 44px;
}

.tsg-two-col > .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

@media (max-width: 760px) {
	.tsg-two-col {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.tsg-act-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tsg-ph-strip {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   contact ページ
   ============================================================ */

.tsg-line-card {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	margin-top: 26px;
	padding: 34px 32px;
	background: var(--wp--preset--color--tsg-card);
	border: 1.5px solid var(--wp--preset--color--tsg-line-green);
	border-radius: 16px;
}

.tsg-line-card h3 {
	margin: 0 0 6px;
}

/* 他のカードの説明文（.tsg-plan__lead / .tsg-coach）と同じ 15px に。 */
.tsg-line-card p {
	margin: 0;
	font-size: 15px;
}

.tsg-contact-note {
	margin-top: 26px;
	padding: 20px 24px;
	font-size: 14px;
	background: rgb(46 110 126 / 7%);
	border: 1px solid rgb(46 110 126 / 25%);
	border-radius: 12px;
}

.tsg-contact-note strong {
	color: var(--wp--preset--color--tsg-ink);
}

@media (max-width: 640px) {
	.tsg-line-card {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------
   Snow Monkey Forms の着せ替え
   ソースの .form-grid をそのまま持ってくる。ラベルは項目の上に置き、
   必須／任意のバッジは item に付けたクラスから擬似要素で出す
   （ラベル属性に HTML を混ぜないので、管理画面でも文言が読める）。
   ------------------------------------------------------------ */

.tsg-form {
	margin-top: 24px;
}

.tsg-form .snow-monkey-form {
	display: grid;
	gap: 18px;
	max-width: 640px;
}

/* SMF は既定でラベル列とコントロール列の2カラムを組む。
   ソースは縦積みなので1カラムに戻す。 */
.tsg-form .smf-item {
	display: block;
	padding: 0;
	border: 0;
}

.tsg-form .smf-item__col--label {
	margin-bottom: 6px;
	padding: 0;
	width: auto;
}

.tsg-form .smf-item__label__text {
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-form .smf-item__label__text::after {
	margin-left: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--wp--preset--color--tsg-muted);
}

.tsg-form .tsg-required .smf-item__label__text::after {
	content: "必須";
}

.tsg-form .tsg-optional .smf-item__label__text::after {
	content: "任意";
}

.tsg-form .smf-item__col--controls {
	padding: 0;
	width: auto;
}

.tsg-form :is(
		.smf-text-control__control,
		.smf-select-control__control,
		.smf-textarea-control__control
	) {
	width: 100%;
	padding: 13px 14px;
	font: inherit;
	font-size: 15px;
	color: var(--wp--preset--color--tsg-ink);
	background: #fff;
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 8px;
}

.tsg-form :is(
		.smf-text-control__control,
		.smf-select-control__control,
		.smf-textarea-control__control
	):focus {
	outline: 2px solid var(--wp--preset--color--tsg-flame);
	border-color: var(--wp--preset--color--tsg-flame);
}

/* 送信ボタンは .btn.fire と同じ見た目にそろえる。
   Snow Monkey Forms は `.smf-action .smf-button-control__control`（0,2,0）で
   グレーのグラデーションを当ててくる。こちらも .smf-action を挟んで 0,3,0 にする。
   加えて unitone は submit の padding を var(--unitone--padding-*) 経由で
   出すため、プロパティではなく変数側にも同じ値を渡しておく。 */
.tsg-form .smf-action .smf-button-control__control {
	--unitone--padding-top: 14px;
	--unitone--padding-bottom: 14px;
	--unitone--padding-right: 30px;
	--unitone--padding-left: 30px;
	--unitone--border-radius: 99px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	font-family: var(--wp--preset--font-family--tsg-gothic);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--tsg-noir-deep);
	background-color: transparent;
	background-image: var(--wp--preset--gradient--tsg-flame);
	border: 0;
	border-radius: 99px;
	appearance: none;
	cursor: pointer;
	transition: background-image 0.25s;
}

.tsg-form .smf-action .smf-button-control__control:hover {
	background-image: linear-gradient(
		var(--wp--preset--color--tsg-flame),
		var(--wp--preset--color--tsg-flame)
	);
}

.tsg-form .smf-action {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ============================================================
   VILI ページ
   ============================================================ */

.tsg-can-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 36px;
}

.tsg-can {
	padding: 30px 26px;
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 14px;
}

.tsg-can__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 0 16px;
	font-size: 22px;
	line-height: 1;
	background: rgb(224 106 31 / 12%);
	border-radius: 50%;
}

.tsg-can__en {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-teal);
}

.tsg-page-section .tsg-can h3 {
	margin: 0 0 4px;
	font-size: 18.5px;
}

/* --- プランカード -------------------------------------------
   「人気」の斜めリボンは、カードを overflow:hidden にしたうえで
   右上の角へ 45度回転させた帯を置く。 */
.tsg-plan-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-top: 34px;
}

.tsg-plan {
	position: relative;
	overflow: hidden;
	padding: 34px 30px;
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 16px;
}

.tsg-plan--hot {
	border-color: rgb(224 106 31 / 50%);
	box-shadow: 0 26px 54px -34px rgb(224 106 31 / 45%);
}

/* コーナーリボンは「帯の両端がカードの外へ出ていて、上辺と右辺で切られる」
   状態になってはじめて成立する。どちらかの端がカードの中で終わると、
   長方形の切り口がそのまま見えて中途半端な見た目になる。

   以前は 38度・padding で長さを稼いでいたため、左端の角が
   カード内（上辺から約14px下）に残っていた。角の対角線に対して
   直角になる 45度に直し、長さを width で明示して両端を外へ出す。

   ジオメトリ（カード右上角を原点、W=帯の長さ, H=帯の太さ、right は負の値）:
   - 上辺で切れる条件 : top + H/2 <= 0.707 × (W - H) / 2
   - 右辺で切れる条件 : right <= 0.707 × (W - H) / 2 - W / 2
   - 文字が見えている部分の中央に来る条件 : top = right + W/2 - H/2
     （これを外すと帯は正しく切れていても文字だけ角側にずれて見える）
   W=170 / H≒31 では右辺が 49.1 なので top<=33.6・right<=-35.9。
   3つ目の式と合わせて top:14 / right:-55 とし、角から帯までを約26pxにしている。
   文言を変えても長さが変わらないよう、padding ではなく width で持たせ、
   text-align:center で中央に置く。太さが変わる（font-size や line-height を
   いじる）ときは上の3式で置き直すこと。 */
.tsg-plan__tag {
	position: absolute;
	top: 14px;
	right: -55px;
	width: 170px;
	margin: 0;
	padding: 5px 0;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: 0.05em;
	text-align: center;
	color: #fff;
	background: var(--wp--preset--color--tsg-flame);
	transform: rotate(45deg);
}

.tsg-plan__en {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-teal);
}

.tsg-page-section .tsg-plan h3 {
	margin: 0 0 4px;
	font-size: 20px;
}

.tsg-plan__price {
	margin: 14px 0 2px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-plan__price small {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--tsg-muted);
}

.tsg-plan__lead {
	font-size: 15px;
}

.tsg-plan__note {
	margin: 16px 0 0;
}

/* --- ビジョン ------------------------------------------------ */
.tsg-vision {
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(17px, 2.4vw, 22px);
	line-height: 2.3;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-vision em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-update-note {
	margin-top: 28px;
	padding: 20px 24px;
	/* 1行が長いと目が戻る場所を見失う。日本語は 35〜45 字/行が読みやすい。
	   em は文字サイズと連動するので、字数の上限としてそのまま使える
	   （全角1文字 = 1em）。 */
	max-width: 40em;
	font-size: 14.5px;
	color: rgb(240 231 212 / 85%);
	background: rgb(224 106 31 / 8%);
	border: 1px solid rgb(244 156 60 / 40%);
	border-radius: 12px;
}

.tsg-update-note strong {
	color: var(--wp--preset--color--tsg-flame-light);
}

@media (max-width: 760px) {
	.tsg-can-grid,
	.tsg-plan-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   school ページ
   ============================================================ */

.tsg-narrow--md {
	max-width: 820px;
}

.tsg-philosophy {
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(18px, 2.6vw, 24px);
	line-height: 2.2;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-philosophy em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-signoff {
	margin-top: 26px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--tsg-flame-light);
}

/* この節の写真だけ縦位置。 */
.tsg-page-section .tsg-two-col > .wp-block-image img[src*="backstage"] {
	aspect-ratio: 3 / 4;
}

/* --- レッスンの流れ ------------------------------------------
   縦のグラデーション線 + 丸番号。番号は CSS カウンター。
   丸の外周の抜きは box-shadow で地の色を重ねて作る。 */
.tsg-step-list {
	position: relative;
	margin-top: 30px;
	counter-reset: tsg-step;
}

.tsg-step-list::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(
		var(--wp--preset--color--tsg-teal),
		var(--wp--preset--color--tsg-flame)
	);
}

.tsg-step {
	position: relative;
	padding: 0 0 34px 66px;
	counter-increment: tsg-step;
}

.tsg-step:last-child {
	padding-bottom: 0;
}

.tsg-step::before {
	content: counter(tsg-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ivory);
	background: var(--wp--preset--color--tsg-noir);
	border-radius: 50%;
	box-shadow: 0 0 0 5px var(--wp--preset--color--tsg-paper-alt);
}

.tsg-step__title {
	display: block;
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: 17.5px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-step__text {
	margin: 0;
	font-size: 14.5px;
}

.tsg-step-note {
	margin-top: 20px;
}

/* --- 校舎カード ---------------------------------------------- */
.tsg-campus {
	margin-top: 30px;
	padding: 36px 34px;
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 16px;
}

.tsg-campus__hd {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 6px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--wp--preset--color--tsg-ink);
}

.tsg-page-section .tsg-campus__hd h3 {
	margin: 0;
	font-size: 24px;
}

.tsg-campus__en {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-coach {
	margin-top: 8px;
	padding-top: 18px;
}

.tsg-coach__role {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-coach__name {
	margin: 2px 0 0;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-coach__award {
	margin: 2px 0 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-flame);
}

/* カードの中の説明文は 15px でそろえる（.tsg-plan__lead と同じ）。 */
.tsg-coach p:last-child {
	margin: 0;
	font-size: 15px;
}

/* --- 開催希望状況 -------------------------------------------- */
.tsg-wait {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
}

/* unitone/decorator は min-width を
   `[data-unitone-layout~="decorator"]:not(:root){min-width:var(--unitone--min-width)}`
   （詳細度 0,2,0・既定0）で出す。プロパティ側に書いても負けるので変数へ渡す。
   padding / gap / position も同じ流儀なので、decorator に効かない指定が
   出たらまず「変数経由ではないか」を疑うこと。 */
.tsg-wait__item {
	--unitone--min-width: 180px;

	min-width: 180px;
	padding: 16px 22px;
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 12px;
}

.tsg-wait__name {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: 16px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
}

.tsg-wait__count {
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 14px;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--tsg-teal);
}

.tsg-badge-note {
	display: inline-block;
	margin-top: 10px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-flame);
	background: rgb(224 106 31 / 10%);
	border: 1px solid rgb(224 106 31 / 35%);
	border-radius: 8px;
}

@media (max-width: 640px) {
	.tsg-campus {
		padding: 26px 20px;
	}
}

/* ============================================================
   show ページ
   ============================================================ */

/* --- おすすめシーンのチップ ---------------------------------
   番号は CSS カウンター。項目を増減しても振り直さなくてよい。 */
.tsg-ev-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 30px;
	counter-reset: tsg-ev;
}

.tsg-ev-chip {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 20px 22px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ink);
	background: var(--wp--preset--color--tsg-card);
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 12px;
	counter-increment: tsg-ev;
}

.tsg-ev-chip::before {
	content: counter(tsg-ev, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 14px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-scene-note {
	margin-top: 18px;
}

.tsg-plan-note {
	margin-top: 16px;
}

/* --- 動画プレースホルダー -----------------------------------
   動画URLが支給されたら core/embed に差し替える前提の仮組み。 */
.tsg-movie-slot {
	position: relative;
	overflow: hidden;
	margin-top: 30px;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--tsg-noir-deep);
	border-radius: 14px;
}

.tsg-movie-slot .wp-block-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.tsg-movie-slot .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.55;
}

.tsg-movie-slot__text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 20px;
	text-align: center;
	font-size: 13px;
	color: rgb(240 231 212 / 85%);
}

/* 再生ボタン風の丸。 */
.tsg-movie-slot__text::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 22px solid #fff;
	border-top: 13px solid transparent;
	border-bottom: 13px solid transparent;
	filter: drop-shadow(-27px 0 0 rgb(224 106 31 / 92%));
}

.tsg-movie-slot__note {
	font-size: 13px;
	letter-spacing: 0.08em;
}

/* --- 三つの約束 ---------------------------------------------- */
.tsg-vow-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 34px;
	counter-reset: tsg-vow;
}

.tsg-vow {
	padding-top: 18px;
	border-top: 2px solid var(--wp--preset--color--tsg-flame);
	counter-increment: tsg-vow;
}

.tsg-vow::before {
	content: "VOW " counter(tsg-vow, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-vow__title {
	display: block;
	margin: 8px 0;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: 19px;
	font-weight: 700;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-vow__text {
	margin: 0;
	font-size: 13.5px;
	color: rgb(240 231 212 / 72%);
}

/* --- 主な出演先（2段組） ------------------------------------- */
.tsg-track-list {
	columns: 2;
	column-gap: 44px;
	margin-top: 18px;
}

.tsg-track-list > li {
	break-inside: avoid;
	padding: 10px 0 10px 24px;
	font-size: 15px;
}

/* --- 大会実績 ------------------------------------------------ */
.tsg-award-band {
	display: grid;
	grid-template-columns: 1fr 0.9fr;
	align-items: center;
	gap: 40px;
}

.tsg-award-band > .wp-block-image {
	display: block;
	width: 100%;
	margin: 0;
}

.tsg-award-band > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.tsg-award__big {
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(30px, 4.6vw, 46px);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-award__big em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-award__text {
	margin-top: 14px;
}

@media (max-width: 760px) {
	.tsg-ev-grid {
		grid-template-columns: 1fr 1fr;
	}

	.tsg-award-band {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.tsg-vow-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.tsg-track-list {
		columns: 1;
	}
}

@media (max-width: 480px) {
	.tsg-ev-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   トップページ
   ============================================================ */

/* ------------------------------------------------------------
   FV（OpeningTitle）
   レターボックスが開き、写真がフェードイン、題字の字送りが締まる。
   すべて純CSSの @keyframes で、JSは1行も使っていない。
   ------------------------------------------------------------ */
.tsg-fv {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: calc(100svh - 64px);
	min-height: 580px;
	max-height: 1080px;
	overflow: hidden;
	color: var(--wp--preset--color--tsg-ivory);
	background: var(--wp--preset--color--tsg-noir-deep);
}

/* 上下の黒帯。18%の高さから外へスライドして「開く」。 */
.tsg-fv::before,
.tsg-fv::after {
	content: "";
	position: absolute;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 18%;
	background: #000;
}

.tsg-fv::before {
	top: 0;
	animation: tsg-fv-open-top 1.4s cubic-bezier(0.7, 0, 0.2, 1) 2.4s forwards;
}

.tsg-fv::after {
	bottom: 0;
	animation: tsg-fv-open-bottom 1.4s cubic-bezier(0.7, 0, 0.2, 1) 2.4s forwards;
}

@keyframes tsg-fv-open-top {
	to {
		transform: translateY(-72%);
	}
}

@keyframes tsg-fv-open-bottom {
	to {
		transform: translateY(72%);
	}
}

/* figure は中身の実寸に縮む（shrink-to-fit）ので、幅と高さを明示する。
   これを忘れると 1440px の帯に対して写真が 1034px しか広がらない。 */
.tsg-fv .tsg-fv__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	transform: scale(1.06);
	animation: tsg-fv-photo-in 2.6s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}

.tsg-fv .tsg-fv__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsg-fv .tsg-fv__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(14 10 6 / 72%) 0%,
		rgb(14 10 6 / 42%) 50%,
		rgb(14 10 6 / 82%) 100%
	);
}

@keyframes tsg-fv-photo-in {
	to {
		opacity: 0.94;
		transform: scale(1);
	}
}

/* 空箱。::before がフィルムグレイン、::after が炎の光漏れ。 */
/* unitone/decorator は position を
   `position: var(--unitone--position) !important` で出すため、
   プロパティ側に absolute と書いても既定の relative に戻される。
   打ち消しは必ず変数へ渡すこと。ここを間違えると、本来フローから
   外れるはずの層が flex アイテムとして幅を食い、中央ブロックが
   左に寄る（実測で中心が 26% までずれた）。 */
.tsg-fv__fx {
	--unitone--position: absolute !important;

	position: absolute;
	inset: 0;
	pointer-events: none;
}

.tsg-fv__fx::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 7;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E");
	animation: tsg-fv-flicker 0.42s steps(2) infinite;
}

@keyframes tsg-fv-flicker {
	50% {
		opacity: 0.34;
	}
}

/* 炎の光漏れ（案E）。暖色の面を粗いノイズでマスクし、マスクだけを往復させる。
   明るい部分の形が絶えず変わるので「炎に照らされている」感じが出る。

   alpha は R チャンネル 1 本だけを使う。RGB を平均すると（0.33 0.33 0.33）
   独立したノイズ3本の平均になり、分散が落ちて平坦になる。
   実測でも 1ch なら幅 0.353、3ch平均だと 0.236 まで縮む。
   マスクは「明暗の差」がそのまま効果の見え方なので、ここは潰してはいけない。

   slope/intercept が半端な値なのは実測に合わせたから。feTurbulence の
   fractalNoise は 0〜1 ではなく 0.5 付近に寄った分布（R単独で実測
   p05 0.333 / p50 0.525 / p95 0.686）で、素直に 0+1x と書くと
   中間調にしか振れず、形の変化がほぼ見えない。
   2.04x - 0.40 で p05 0.278 / p95 1.0 に伸ばしてある（幅 0.29 → 0.72）。
   暗い側を 0 まで落とし切らないのは、透明になりきると暖かみが
   周期的に穴になって消えるため。実測で完全透明は 0%、飽和は 5.4%。

   alternate なのは、0%→100% を linear で回すと1周ごとに位置が飛んで
   マスクの模様が一瞬ジャンプするため。往復なら継ぎ目が出ない。

   SVG に preserveAspectRatio='none' が要る。viewBox は正方形なのに貼り付け先は
   横長なので、既定の xMidYMid meet だと中央にレターボックス表示され、
   左右に透明な帯（＝alpha 0）ができて暖色がそこだけ完全に消える。
   画面の左右端に縦の切れ目として見えるのがこれ。none で引き伸ばして埋める。

   合わせて mask-repeat: no-repeat と、位置の移動幅を 12%〜88% に狭めてある。
   マスクは常に要素より大きい（210%）ので、端まで振らなければ
   画像の外周が要素の内側に入ることがなく、切れ目の出方に依存しなくなる。 */
.tsg-fv__fx::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	background:
		radial-gradient(58% 44% at 50% 54%, rgb(224 106 31 / 17%) 0%, transparent 68%),
		linear-gradient(
			0deg,
			rgb(224 106 31 / 26%) 0%,
			rgb(244 156 60 / 11%) 52%,
			transparent 84%
		);
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 320' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='2.04' intercept='-0.40'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
	mask-size: 210% 210%;
	mask-repeat: no-repeat;
	will-change: mask-position;
	animation:
		tsg-fv-appear 2s ease 2.6s forwards,
		tsg-fv-blob 15s ease-in-out infinite alternate;
}

@keyframes tsg-fv-blob {
	from {
		mask-position: 12% 88%;
	}

	to {
		mask-position: 88% 12%;
	}
}

/* 火の粉（案C）。粒のタイルを2枚、別の速さで上へ流す。

   background-position ではなく transform で動かしている。
   全画面の層で background-position を毎フレーム変えると再描画になるが、
   transform ならコンポジット側で処理される。
   タイルの高さちょうど（-520px / -380px）だけ動かすので継ぎ目は出ない。
   そのぶん層を calc(100% + タイル高) だけ縦に伸ばし、
   動かしたあとに下端が空かないようにしてある。 */
.tsg-fv__embers {
	/* unitone は position を変数＋!important で出す。ここも .tsg-fv__fx と同じ扱い。 */
	--unitone--position: absolute !important;

	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	/* 上端に向かって消す。粒が画面の天井で唐突に切れるのを防ぐ。
	   マスクは動かない親側に置く（動く層に置くと消え際も一緒に動いてしまう）。 */
	mask-image: linear-gradient(0deg, #000 0%, #000 40%, transparent 88%);
	opacity: 0;
	animation: tsg-fv-appear 2.4s ease 2.8s forwards;
}

.tsg-fv__embers::before,
.tsg-fv__embers::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	will-change: transform;
}

/* 密度は「粒の数 ÷ タイルの面積」で決まる。1.5 倍にするとき、
   タイルの高さは移動距離（-520px / -380px）と一致していないと継ぎ目が出るので
   触れない。粒を足したうえで幅だけを合わせ、面積比でちょうど 1.5 倍にしてある。
   ::before 5粒/420px → 8粒/448px、::after 3粒/300px → 5粒/333px。 */
.tsg-fv__embers::before {
	height: calc(100% + 520px);
	background-image:
		radial-gradient(2px 2px at 12% 92%, rgb(244 156 60 / 85%), transparent 60%),
		radial-gradient(1.6px 1.6px at 34% 74%, rgb(224 106 31 / 75%), transparent 60%),
		radial-gradient(2.4px 2.4px at 58% 88%, rgb(244 156 60 / 70%), transparent 60%),
		radial-gradient(1.4px 1.4px at 79% 68%, rgb(244 156 60 / 80%), transparent 60%),
		radial-gradient(1.8px 1.8px at 92% 84%, rgb(224 106 31 / 65%), transparent 60%),
		radial-gradient(1.5px 1.5px at 23% 56%, rgb(244 156 60 / 72%), transparent 60%),
		radial-gradient(2.1px 2.1px at 46% 62%, rgb(224 106 31 / 68%), transparent 60%),
		radial-gradient(1.3px 1.3px at 68% 48%, rgb(244 156 60 / 78%), transparent 60%);
	background-size: 448px 520px;
	animation: tsg-fv-ember-a 21s linear infinite;
}

.tsg-fv__embers::after {
	height: calc(100% + 380px);
	background-image:
		radial-gradient(1.2px 1.2px at 22% 40%, rgb(244 156 60 / 55%), transparent 60%),
		radial-gradient(1.6px 1.6px at 66% 30%, rgb(244 156 60 / 45%), transparent 60%),
		radial-gradient(1.1px 1.1px at 47% 82%, rgb(224 106 31 / 50%), transparent 60%),
		radial-gradient(1.4px 1.4px at 8% 62%, rgb(244 156 60 / 48%), transparent 60%),
		radial-gradient(1.2px 1.2px at 85% 56%, rgb(224 106 31 / 52%), transparent 60%);
	background-size: 333px 380px;
	animation: tsg-fv-ember-b 33s linear infinite;
}

/* 横のずれは風のゆらぎ。2層で向きを変えて平行移動に見えないようにする。 */
@keyframes tsg-fv-ember-a {
	to {
		transform: translate3d(24px, -520px, 0);
	}
}

@keyframes tsg-fv-ember-b {
	to {
		transform: translate3d(-30px, -380px, 0);
	}
}

@keyframes tsg-fv-appear {
	to {
		opacity: 1;
	}
}

/* 動きを減らす設定では、点きっぱなしの状態で止める。 */
@media (prefers-reduced-motion: reduce) {
	.tsg-fv__fx::after,
	.tsg-fv__embers,
	.tsg-fv__embers::before,
	.tsg-fv__embers::after {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

.tsg-fv__center {
	position: relative;
	z-index: 6;
	max-height: 74vh;
	padding: 0 6vw;
	text-align: center;
}

.tsg-fv__pres {
	margin: 0 0 28px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.10em;
	/* unitone は流体行間を全要素に当てるため、ソースの素の 1.95 と
	   1px ずれる。FVは位置の一致を優先して明示する。 */
	line-height: 1.95;
	text-transform: uppercase;
	color: rgb(240 231 212 / 60%);
	opacity: 0;
	animation: tsg-fv-rise 1s ease 0.4s forwards;
}

/* 字送りが .6em から .16em へ締まりながら、ぼけが取れて像を結ぶ。 */
.tsg-fv .tsg-fv__title {
	margin: 0;
	font-size: clamp(38px, 7.4vw, 100px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.10em;
	text-indent: 0.6em;
	white-space: nowrap;
	color: var(--wp--preset--color--tsg-ivory);
	opacity: 0;
	animation: tsg-fv-track 2.2s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}

@keyframes tsg-fv-track {
	0% {
		opacity: 0;
		letter-spacing: 0.10em;
		filter: blur(6px);
	}

	35% {
		opacity: 1;
	}

	100% {
		opacity: 1;
		letter-spacing: 0.06em;
		filter: blur(0);
	}
}

.tsg-fv__sub {
	margin: 24px 0 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(13px, 1.5vw, 15px);
	letter-spacing: 0.09em;
	line-height: 1.95;
	color: var(--wp--preset--color--tsg-flame-light);
	opacity: 0;
	animation: tsg-fv-rise 1.1s ease 2.7s forwards;
}

.tsg-fv .tsg-fv__cta {
	justify-content: center;
	margin-top: 32px;
	opacity: 0;
	animation: tsg-fv-rise 1s ease 3s forwards;
}

.tsg-fv .tsg-fv__cta .wp-block-button__link {
	padding: 13px 44px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.95;
	white-space: nowrap;
	color: var(--wp--preset--color--tsg-flame-light);
	background: transparent;
	border: 1px solid var(--wp--preset--color--tsg-flame);
	border-radius: 0;
	transition: background 0.3s, color 0.3s;
}

.tsg-fv .tsg-fv__cta .wp-block-button__link:hover {
	color: var(--wp--preset--color--tsg-noir-deep);
	background: var(--wp--preset--color--tsg-flame);
}

@keyframes tsg-fv-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ------------------------------------------------------------
   FV下部のクレジット

   3つを横並びにすると幅が足りず、SPでは折り返して段が崩れていた。
   1行ぶんの高さに固定し、3面の三角柱を X 軸まわりに回して
   ひとつずつ正面に出す。

   面の枚数 --tsg-credit-n から、角度（360/n）と奥行き
   （正面の面が箱の面と重なる距離）を計算する。
   奥行きは r = (行の高さ/2) / tan(180/n)。n=3 なら tan(60°)=√3。

   n と面の番号は CSS 側に置く。以前は HTML のインライン style で
   渡していたが、**unitone/decorator も core/paragraph も save() が
   style 属性を出さない**ため、エディターが
   「想定されていないか無効なコンテンツ」と判定していた。
   件数を変えるときは、この n・下の :nth-child・@keyframes の3か所を直す。
   keyframes は元から3面決め打ちなので、どのみち1か所では済まない。

   回す向きは正の rotateX。上端が奥へ倒れるので、文字は上から下へ流れ、
   次の面が上から現れる。負にすると逆向きになる。
   ------------------------------------------------------------ */
.tsg-fv__credits {
	--unitone--position: absolute !important;

	/* 1行ぶんの高さ。面の奥行き計算にも使うので実数で持つ。 */
	--tsg-credit-h: 24px;

	position: absolute;
	left: 50%;
	bottom: 5vh;
	z-index: 6;
	width: min(900px, 90vw);
	height: var(--tsg-credit-h);
	/* 立体に見せるための視点距離。小さいほど遠近が強く出る。 */
	perspective: 480px;
	transform: translateX(-50%);
	opacity: 0;
	animation: tsg-fv-credits-rise 1.1s ease 3.1s forwards;
}

.tsg-fv__credits-rot {
	/* 面の枚数。@keyframes tsg-fv-credit-roll と揃えること。 */
	--tsg-credit-n: 3;

	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	animation: tsg-fv-credit-roll 10.5s cubic-bezier(0.65, 0, 0.35, 1) 3.1s infinite;
}

.tsg-fv__credit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.09em;
	line-height: 1;
	white-space: nowrap;
	color: rgb(240 231 212 / 55%);
	/* i 番目の面を (360/n * i) 度ずらし、正面の位置まで押し出す。 */
	transform:
		rotateX(calc(360deg / var(--tsg-credit-n) * var(--tsg-credit-i, 0)))
		translateZ(calc(var(--tsg-credit-h) / 2 / tan(180deg / var(--tsg-credit-n))));
	backface-visibility: hidden;
}

.tsg-fv__credit:nth-child(2) {
	--tsg-credit-i: 1;
}

.tsg-fv__credit:nth-child(3) {
	--tsg-credit-i: 2;
}

/* 1面ぶん回して止まる、を件数ぶん繰り返す。
   1周を n 等分し、各区間の前半で回して後半は静止させる
   （ずっと回り続けると読めない）。3面なら 33.3% 刻み。

   角度は負の方向へ進める。正にすると次の面が下から出てきて
   文字が上へ流れる（実測で確認）。負なら上から入って下へ流れる。 */
@keyframes tsg-fv-credit-roll {
	0%,
	22% {
		transform: rotateX(0deg);
	}

	33.3%,
	55.3% {
		transform: rotateX(-120deg);
	}

	66.6%,
	88.6% {
		transform: rotateX(-240deg);
	}

	100% {
		transform: rotateX(-360deg);
	}
}

@keyframes tsg-fv-credits-rise {
	from {
		opacity: 0;
		transform: translate(-50%, 16px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

@media (max-width: 768px) {
	.tsg-fv {
		height: calc(100svh - 58px);
	}

	.tsg-fv .tsg-fv__title {
		font-size: clamp(30px, 9vw, 44px);
		letter-spacing: 0.08em;
		text-indent: 0.26em;
	}

	/* SPは行が詰まるので少しだけ小さく。高さも合わせて詰める
	   （高さは面の奥行き計算に入るので、片方だけ変えると面がずれる）。 */
	.tsg-fv__credits {
		--tsg-credit-h: 20px;
	}

	.tsg-fv__credit {
		font-size: 12px;
	}
}

/* 演出を切っている環境では完成形で静止させる。 */
@media (prefers-reduced-motion: reduce) {
	.tsg-fv::before {
		animation: none;
		transform: translateY(-72%);
	}

	.tsg-fv::after {
		animation: none;
		transform: translateY(72%);
	}

	.tsg-fv .tsg-fv__title {
		animation: none;
		opacity: 1;
		letter-spacing: 0.06em;
		text-indent: 0.16em;
	}

	.tsg-fv__pres,
	.tsg-fv__sub,
	.tsg-fv .tsg-fv__cta,
	.tsg-fv__credits,
	.tsg-fv__fx::after {
		animation: none;
		opacity: 1;
	}

	.tsg-fv__credits {
		transform: translateX(-50%);
	}

	/* 回転も止める。1面目だけが正面で静止する。
	   残り2件は DOM に残るので読み上げでは読まれる。 */
	.tsg-fv__credits-rot {
		animation: none;
	}

	.tsg-fv .tsg-fv__photo {
		animation: none;
		opacity: 0.94;
		transform: none;
	}

	.tsg-fv__fx::before {
		animation: none;
	}
}

/* ------------------------------------------------------------
   イントロ
   ------------------------------------------------------------ */
.tsg-intro {
	overflow: hidden;
}

.tsg-intro__grid {
	display: grid;
	grid-template-columns: 1fr 0.82fr;
	align-items: center;
	gap: 60px;
}

.tsg-intro .tsg-intro__title {
	margin: 18px 0 26px;
	font-size: clamp(28px, 4.6vw, 52px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-intro__title em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame-light);
}

/* 下層ページの本文が 16px なので、トップの本文もそろえる。
   アイブロウを外すのは、この規則（0,1,1）が
   .is-style-tsg-eyebrow（0,1,0）に勝ってしまい、
   トップの最初のアイブロウだけ 15px になっていたため。
   :where() で包んで詳細度を増やさない（増やすと
   .tsg-intro .tsg-intro__title に勝って見出しまで潰れる）。 */
.tsg-intro p:where(:not(.is-style-tsg-eyebrow)) {
	font-size: 16px;
	color: rgb(240 231 212 / 78%);
}

/* 比率は枠（figure）側で持つ。中身は写真でも動画でもよい。

   中身側に aspect-ratio を書くと動画で効かない。WordPress はレンダー時に
   <video> へ width / height と style="aspect-ratio:952/1428" を
   インラインで付けるため（CLS対策）、外部CSSでは勝てない。
   枠に比率を持たせて中身を width/height 100% にすると、
   幅と高さが両方確定してインラインの aspect-ratio は無視される。
   !important を使わずに済むうえ、読み込み前から箱が確保される。 */
.tsg-intro .tsg-intro__photo {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	aspect-ratio: 3 / 4;
}

.tsg-intro .tsg-intro__photo :is(img, video) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	filter: saturate(1.05);
}

.tsg-intro .tsg-intro__photo::after {
	content: "SIVA AFI — WARRIOR'S DANCE OF SAMOA";
	position: absolute;
	left: 14px;
	bottom: 14px;
	padding: 7px 12px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgb(240 231 212 / 85%);
	background: rgb(14 10 6 / 60%);
	backdrop-filter: blur(6px);
	border-radius: 4px;
}

.tsg-divider--dark {
	background: var(--wp--preset--color--tsg-noir-deep);
}

@media (max-width: 820px) {
	.tsg-intro__grid {
		grid-template-columns: 1fr;
	}

	.tsg-intro .tsg-intro__photo img {
		aspect-ratio: 4 / 3;
	}
}

/* ------------------------------------------------------------
   4つの入口
   ------------------------------------------------------------ */
.tsg-gate {
	background: var(--wp--preset--color--tsg-paper);
}

.tsg-gate__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
	margin-top: 48px;
}

.tsg-gate__card {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--tsg-noir);
	border-radius: 14px;
}

.tsg-gate__card .wp-block-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.tsg-gate__card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.92);
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s;
}

.tsg-gate__card:hover .wp-block-image img {
	transform: scale(1.05);
	filter: saturate(1.1);
}

.tsg-gate__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgb(14 10 6 / 0%) 32%,
		rgb(14 10 6 / 86%) 100%
	);
}

.tsg-gate__body {
	--unitone--position: absolute !important;

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 24px 82px 24px 26px;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-gate__en {
	display: block;
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-gate__title {
	/* position は下の stretched link のため。理由はそちらのコメント参照。 */
	--unitone--position: static;

	display: block;
	position: static;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(19px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.5;
}

/* カード全体を当たり判定にする（入れ子リンクを作らない）。

   ここには落とし穴が2つある。

   1. unitone が app.css でブロックへ position:relative を当てるため、
      何もしないと ::after の基準が .tsg-gate__title 自身になり、
      「タイトルの1行ぶんしか押せない」状態になる（実測で確認済み）。
      unitone は position を var(--unitone--position) で出すので、
      プロパティ側に static と書くだけでは効かない。変数も戻す。
   2. 基準を外しても、次に見つかる位置指定済みの祖先は
      position:absolute の .tsg-gate__body（カード下部の帯）で、
      カードの上半分＝写真の領域には届かない。
      そこで inset の上だけを大きく負に振って body の外へはみ出させ、
      .tsg-gate__card の overflow:hidden に切ってもらう。
      body の高さは文言で変わるので、固定値ではなく十分大きい値を使う。 */
.tsg-gate__title a::after {
	content: "";
	position: absolute;
	inset: -1000px 0 0;
	z-index: 2;
}

.tsg-gate__text {
	display: block;
	margin: 4px 0 0;
	font-size: 14px;
	color: rgb(240 231 212 / 75%);
}

/* 右下の丸い矢印。 */
.tsg-gate__body::after {
	content: "";
	position: absolute;
	right: 26px;
	bottom: 24px;
	display: flex;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(240 231 212 / 40%);
	border-radius: 50%;
	background:
		linear-gradient(45deg, currentcolor, currentcolor) no-repeat center /
		9px 2px,
		linear-gradient(45deg, currentcolor, currentcolor) no-repeat center /
		2px 9px;
	background-position: 18px 21px, 23px 16px;
	transition: background-color 0.3s, border-color 0.3s;
}

.tsg-gate__card:hover .tsg-gate__body::after {
	background-color: var(--wp--preset--color--tsg-flame);
	border-color: var(--wp--preset--color--tsg-flame);
}

@media (max-width: 760px) {
	.tsg-gate__grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------
   数字
   ------------------------------------------------------------ */
.tsg-num {
	overflow: hidden;
	text-align: center;
}

.tsg-num__eyebrow {
	justify-content: center;
	width: 100%;
}

/* 38px の上余白はラッパー側に持たせる。decorator が BFC を作るかどうかに
   関係なく、アイブロウとの相殺のしかたがラッパー導入前と同じになる。 */
.tsg-num__lead {
	margin: 38px 0 0;
}

.tsg-num__main {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(64px, 13vw, 150px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--tsg-flame-light);
}

/* 行ボックスの高さは子それぞれの line-height で決まる。
   親にだけ 1 を書いても、unitone が子に流体行間を当てるので背が伸びる。 */
.tsg-num__main em,
.tsg-num__count,
.tsg-num__count-value,
.tsg-num__unit {
	line-height: 1;
}

/* ------------------------------------------------------------
   カウントアップは assets/js/count-up.js（IntersectionObserver + rAF）。

   以前ここにあった @property <integer> + counter() のCSS実装は
   Chromium 専用だった。WebKit はアニメーション中にカウンターを
   再計算しないため 0 → 最終値に跳ぶ（iOS は全ブラウザが WebKit）。
   CSSだけで済む見た目の技でも、描画系（counter / content）が絡むものは
   実機の WebKit で確認してから採用すること。
   ------------------------------------------------------------ */

.tsg-num__main em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-num__unit {
	font-family: var(--wp--preset--font-family--tsg-mincho);
	font-size: clamp(18px, 3vw, 30px);
	font-weight: 600;
	color: rgb(240 231 212 / 70%);
}

/* ソースの p は `margin: 0 0 1em` を持つ。ここは 1em ぶんの下余白が
   そのまま見た目に出ている箇所なので、実測値に合わせて明示する。 */
.tsg-num__cap {
	margin: 10px 0 1em;
	font-size: 14px;
	color: rgb(240 231 212 / 60%);
}

.tsg-num__subs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(30px, 7vw, 90px);
	margin-top: 56px;
}

.tsg-num__v {
	margin: 0 0 1em;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-num__v em {
	font-style: normal;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-num__l {
	margin: 8px 0 1em;
	font-size: 14px;
	letter-spacing: 0.05em;
	color: rgb(240 231 212 / 55%);
}

/* ------------------------------------------------------------
   全幅スチル
   ------------------------------------------------------------ */
.tsg-still {
	position: relative;
	height: clamp(340px, 56vh, 620px);
	overflow: hidden;
	--tsg-letterbox-size: 10px;
}

.tsg-still .wp-block-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
}

.tsg-still .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsg-still figcaption {
	position: absolute;
	right: 26px;
	bottom: 26px;
	z-index: 2;
	margin: 0;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgb(240 231 212 / 85%);
	background: rgb(14 10 6 / 55%);
	backdrop-filter: blur(6px);
	border-radius: 4px;
}

/* ------------------------------------------------------------
   ギャラリー
   ------------------------------------------------------------ */
/* 縦に長いセクションの中で中身を画面に貼り付け、貼り付いているあいだの
   スクロール量を横の移動量に変える（assets/js/h-scroll.js）。

   固定は position:sticky が担当する。**祖先のどこかに overflow:hidden や
   overflow:clip があると sticky は黙って効かなくなる**ので、
   触るときは実際に貼り付いているかを測って確かめること
   （見た目は普通に流れるだけで、エラーも警告も出ない）。
   overflow:hidden を持つのは貼り付く箱自身なので、これは問題ない。

   貼り付く箱の高さは 100svh ではなく「中身の高さ＋--tsg-hs-pad の上下」。
   100svh にすると、中身（見出し＋写真1段＝実測582px）が画面の真ん中に
   置かれるぶん、上下に139pxずつの空きができる。この空きは
   「貼り付いているあいだ」だけでなく**セクションの入り口と出口にも
   そのまま出る**ので、前後のセクションとの間隔が広く見える。
   箱を中身なりにして画面の中央へ寄せれば、貼り付き中の見た目は変えずに
   入り口と出口の空きだけを詰められる。

   --tsg-hs-travel と --tsg-hs-band は JS が実測して書き込む。
   JSが動かない環境では travel 0 のまま
   ＝ セクションはちょうど1画面分の高さになり、下の -off と同じ見た目になる。 */
.tsg-hscroll {
	--tsg-hs-travel: 0px;
	/* 中身の上下に置く余白。JS はこの値を読んで箱の高さを決める。 */
	--tsg-hs-pad: 70px;
	/* 貼り付く箱の高さ。JS が「中身＋pad×2」（画面高さが上限）を書き込む。 */
	--tsg-hs-band: 100vh;

	height: calc(var(--tsg-hs-band) + var(--tsg-hs-travel));

	/* 高さは自分で決めるので、セクションの上下 padding は要らない。 */
	padding-block: 0;
}

/* position は必ず変数側で指定する。unitone が同じ詳細度で relative を
   当てており、プロパティに sticky と書くだけでは負けて relative のままになる
   （固定されず、ただ縦に長いだけの空きセクションになる）。
   .tsg-gate__body と同じ扱い。 */
.tsg-hscroll__pin {
	--unitone--position: sticky !important;

	position: sticky;
	/* 画面より低い箱なので、貼り付く位置を画面の中央に合わせる。
	   top:0 にすると帯が画面の上端に貼り付いてヘッダーに詰まる。 */
	top: calc((100vh - var(--tsg-hs-band)) / 2);
	top: calc((100svh - var(--tsg-hs-band)) / 2);
	/* grid にすると auto トラックが中身の max-content まで伸び、
	   見出し（margin-inline:auto）が画面の外へ押し出される。
	   flex なら子が溢れてもコンテナの幅は変わらない。 */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 44px;
	height: var(--tsg-hs-band);
	overflow: hidden;
}

.tsg-hscroll__track {
	display: flex;
	/* max-content にしないと、flex の子が縮んで横に溢れなくなる。
	   align-self を指定しないと縦積み flex の stretch が勝ち、幅が親と同じに
	   なる。見た目は子が溢れるので同じだが、**要素の幅が実際の中身より
	   短くなり、JSが測る移動距離が右パディングのぶん足りなくなる**
	   （最後の1枚が画面の右端で切れて止まる）。 */
	align-self: flex-start;
	/* テーマ側のブロック共通の max-width:100% が効いていると、
	   max-content で伸ばした幅がそのまま画面幅まで切り詰められる。
	   中身は溢れて見た目は同じなので気づきにくいが、要素の幅は
	   画面幅のままになり、JSが測る移動距離が 0 になる（＝横に流れない）。 */
	max-width: none;
	width: max-content;
	gap: 22px;
	/* 左端は見出しの左揃えに合わせる。右端は最後の1枚を見終わったときに
	   画面際で切れ落ちないよう余らせる。 */
	padding-inline: max(28px, calc((100% - 1120px) / 2)) 14vw;
	will-change: transform;
}

/* 中身が最初から収まる幅、または「視差効果を減らす」設定のとき。
   固定をやめて素の横並びに戻し、指やトラックパッドで送れるようにする。 */
.tsg-hscroll[data-tsg-hscroll="off"] {
	height: auto;
	padding-block: 104px;
}

.tsg-hscroll[data-tsg-hscroll="off"] .tsg-hscroll__pin {
	--unitone--position: static;

	position: static;
	height: auto;
	overflow: visible;
}

.tsg-hscroll[data-tsg-hscroll="off"] .tsg-hscroll__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	width: auto;
}

.tsg-hscroll[data-tsg-hscroll="off"] .tsg-hscroll__track .wp-block-image {
	scroll-snap-align: center;
}

.tsg-gal {
	background: var(--wp--preset--color--tsg-noir-soft);
}

.tsg-gal .tsg-h2 {
	color: var(--wp--preset--color--tsg-ivory);
}

.tsg-gal .tsg-h2:last-child {
	margin-bottom: 0;
}

/* 01, 02 … の採番。マークアップに番号を持たせると写真の増減でずれる。 */
.tsg-gal__track {
	counter-reset: tsg-gal 0;
}

.tsg-gal__track .wp-block-image {
	position: relative;
	flex: none;
	width: clamp(230px, 27vw, 340px);
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--tsg-noir-deep);
	border-radius: 10px;
	counter-increment: tsg-gal;
}

.tsg-gal__track .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.8);
	transition: filter 0.5s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.tsg-gal__track .wp-block-image:hover img {
	transform: scale(1.04);
	filter: saturate(1.15);
}

.tsg-gal__track .wp-block-image::after {
	content: counter(tsg-gal, decimal-leading-zero);
	position: absolute;
	left: 14px;
	top: 12px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.04em;
	color: rgb(240 231 212 / 82%);
	text-shadow: 0 2px 12px rgb(0 0 0 / 85%);
}

.tsg-gal__track figcaption {
	position: absolute;
	left: 14px;
	bottom: 12px;
	margin: 0;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgb(240 231 212 / 80%);
	text-shadow: 0 1px 8px rgb(0 0 0 / 80%);
}

@media (max-width: 760px) {
	.tsg-hscroll {
		--tsg-hs-pad: 44px;
	}

	.tsg-hscroll__pin {
		gap: 30px;
	}

	.tsg-hscroll__track {
		gap: 16px;
		padding-inline: 28px 16vw;
	}

	.tsg-gal__track .wp-block-image {
		width: min(66vw, 300px);
	}

	.tsg-gal__track .wp-block-image::after {
		font-size: 21px;
	}
}

/* ============================================================
   お知らせ（投稿）
   ソースに該当ページが無いため、既存の罫線リストの語彙
   （.idx-table / .faq-list 系）に合わせて新規に組んでいる。
   ============================================================ */

.tsg-news .tsg-news__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgb(36 29 20 / 15%);
}

.tsg-news .tsg-news__list > li {
	margin: 0;
	padding: 22px 4px;
	border-bottom: 1px solid rgb(36 29 20 / 15%);
}

.tsg-news__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.tsg-news__date {
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-news__cat {
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13.5px;
	letter-spacing: 0.06em;
}

.tsg-news__cat a {
	padding: 3px 10px;
	color: var(--wp--preset--color--tsg-teal);
	background: rgb(46 110 126 / 8%);
	border: 1px solid rgb(46 110 126 / 25%);
	border-radius: 999px;
	text-decoration: none;
}

.tsg-news .tsg-news__title {
	margin: 8px 0 0;
	font-size: 17.5px;
	line-height: 1.7;
}

.tsg-news .tsg-news__title a {
	color: var(--wp--preset--color--tsg-ink);
	transition: color 0.25s;
}

.tsg-news .tsg-news__title a:hover {
	color: var(--wp--preset--color--tsg-flame);
}

.tsg-pagination {
	gap: 10px;
	margin-top: 40px;
	font-family: var(--wp--preset--font-family--tsg-mono);
	font-size: 13px;
}

.tsg-pagination a,
.tsg-pagination .current {
	padding: 6px 12px;
	border: 1px solid rgb(36 29 20 / 15%);
	border-radius: 8px;
}

.tsg-pagination .current {
	color: #fff;
	background: var(--wp--preset--color--tsg-ink);
	border-color: var(--wp--preset--color--tsg-ink);
}

/* --- 投稿詳細 ------------------------------------------------ */
.tsg-single__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 14px;
}

.tsg-page-hero .tsg-news__date {
	color: var(--wp--preset--color--tsg-flame-light);
}

.tsg-page-hero .tsg-news__cat a {
	color: var(--wp--preset--color--tsg-ivory);
	background: rgb(240 231 212 / 10%);
	border-color: rgb(240 231 212 / 30%);
}

.tsg-entry :is(h2, h3, h4) {
	margin-top: 2em;
	margin-bottom: 0.6em;
}

.tsg-entry h2 {
	font-size: clamp(21px, 2.8vw, 28px);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wp--preset--color--tsg-ink);
}

.tsg-entry h3 {
	font-size: clamp(18px, 2.2vw, 22px);
}

.tsg-entry img {
	border-radius: 10px;
}

.tsg-entry a {
	color: var(--wp--preset--color--tsg-teal);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.tsg-post-nav {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 26px;
	font-size: 14px;
}

.tsg-post-nav a {
	color: var(--wp--preset--color--tsg-ink);
	transition: color 0.25s;
}

.tsg-post-nav a:hover {
	color: var(--wp--preset--color--tsg-flame);
}