/* ▼.page-front （/）
* ページクラス：pg-sarafrontcpz
* 識別コード：frontCpZ（section/dept のクラス名, 画像名に使用）
* バリアント：A·Gear（歯車背景 + コーナー枠）
━━━━━━━━━━━━━━━━━━━ */

/* ============================================================
FONT FACES
- BO NX Alt Medium：既存 /gp/font-loader.php?f=BONX-Medium を利用（spinner  で読み込み済み）
- Shippori Mincho：beyond-stylesandscripts.php で読み込み済み
(@sarap422/font-shippori-mincho-otf@1.0.0 + Google Fonts)
- Crimson Text：beyond-stylesandscripts.php で読み込み済み
- YakuHanMP：beyond-stylesandscripts.php の yakuhanjp で読み込み済み
いずれも media="print" → onload で all に切り替えるレンダリングブロック回避方式
======================━━━━━━━━━━━━━━━━━━━ */

/* ============================================================
DESIGN TOKENS（CSS 変数：.pg-sarafrontcpz スコープに閉じる）
handoff/ds/colors_and_type.css をそのまま移植
======================━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz {
	/* --- Primary Nixie Orange（signature accent） --- */
	--c-nixie-25: hsl(28, 100%, 97%);
	--c-nixie-50: hsl(28, 100%, 92%);
	--c-nixie-100: hsl(28, 100%, 84%);
	--c-nixie-200: hsl(28, 100%, 74%);
	--c-nixie-300: hsl(28, 100%, 66%);
	--c-nixie-400: hsl(28, 98%, 58%);
	--c-nixie-500: hsl(28, 98%, 52%);
	/* Nixie signal orange */
	--c-nixie-600: hsl(20, 95%, 45%);
	--c-nixie-700: hsl(15, 90%, 38%);
	--c-nixie-800: hsl(10, 78%, 28%);
	--c-nixie-900: hsl(8, 65%, 18%);
	--c-nixie-950: hsl(8, 55%, 10%);

	--c-nixie-glow: hsl(28, 100%, 60%);
	--c-nixie-ember: #d45424;
	--c-nixie-core: #fff256;

	/* --- Surface（dark fixed） --- */
	--c-line: hsla(0, 0%, 100%, 0.10);
	--c-line-soft: hsla(0, 0%, 100%, 0.06);

	/* --- Shadow / glow tokens --- */
	--glow-nixie-sm: 0 0 .15em var(--c-nixie-glow), 0 0 .35em var(--c-nixie-ember);
	--glow-nixie-md: 0 0 .10em var(--c-nixie-core), 0 0 .30em var(--c-nixie-glow),
		0 0 .60em var(--c-nixie-ember);
	--glow-nixie-lg: 0 0 .05em var(--c-nixie-core), 0 0 .25em var(--c-nixie-glow),
		0 0 .50em var(--c-nixie-ember), 0 0 1.2em var(--c-nixie-ember);

	/* --- Type system --- */
	--ff-nixie: "BO NX Alt Medium", "Share Tech Mono", ui-monospace, monospace;
}




/* 基本設定
─────────────────── */
/* (bg-hackingFog.css) */
.pg-sarafrontcpz {
	position: relative;
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, hsla(20, 80%, 30%, .08), transparent 60%),
		radial-gradient(ellipse 80% 60% at 100% 60%, hsla(20, 80%, 30%, .04), transparent 70%),
		hsl(48, 5%, 5%);
}


/* Paragraph（文字設定）
─────────────────── */
.pg-sarafrontcpz p {
	max-width: 100%;
	line-height: clamp(1.66em, calc(1.66em + ((1vw - 0.225em) * 0.55)), 1.88em);
	letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
	font-size: clamp(calc(var(--⅝fem) * 0.875), calc(calc(var(--⅝fem) * 0.875) + ((1vw - 0.225rem) * 0.1563)), calc(var(--⅝fem) * 0.9375));
	font-weight: var(--fw-base, 400);
}

.pg-sarafrontcpz p[class*="ta-center"] {
	text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}

/* Small（注釈・小字） */
.pg-sarafrontcpz small {
	display: block;
	max-width: 100%;
	line-height: 1.11;
	letter-spacing: 0;
	font-weight: 400;
}

.pg-sarafrontcpz small[class*="ta-center"] {
	text-indent: 0;
}

/* Emphasis（強調・中字） */
.pg-sarafrontcpz em {
	display: block;
	max-width: 100%;
	line-height: clamp(1.44em, calc(1.44em + ((1vw - 0.225em) * 0.275)), 1.55em);
	letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
	font-size: clamp(0.9563rem, calc(0.9563rem + ((1vw - 0.225rem) * 0.26563)), calc(var(--⅝fem) * 1.0625));
	font-weight: 500;
}

.pg-sarafrontcpz em[class*="ta-center"] {
	text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}

/* Strong（強調・大字） */
.pg-sarafrontcpz strong {
	display: block;
	max-width: 100%;
	line-height: 1.11;
	letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
	font-size: clamp(calc(var(--⅝fem) * 1), calc(calc(var(--⅝fem) * 1) + ((1vw - 0.225rem) * 0.4688)), calc(var(--⅝fem) * 1.1875));
	font-weight: 600;
}

.pg-sarafrontcpz strong[class*="ta-center"] {
	text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}

/* small, em, strong（inline-block） */
.pg-sarafrontcpz :is(h1, h2, h3, h4, h5, h6)>:is(small, em, strong) {
	display: inline-block;
	width: auto;
}




/* Headings（h1, h2, h3, h4, h5, h6）
─────────────────── */
.pg-sarafrontcpz :is(h1, h2, h3, h4, h5, h6) {
	position: relative;
	z-index: 10;
	max-width: 100%;
}

/* Headings（.hdg-） */
.pg-sarafrontcpz h1 {
	line-height: 1.11;
	letter-spacing: clamp(0.04em, calc(0.04em + ((1vw - 0.225em) * 0.2)), 0.12em);
	font-size: clamp(1.1375rem, calc(1.1375rem + ((1vw - 0.225rem) * 1.8438)), 1.8750rem);
	font-weight: 500;
}

.pg-sarafrontcpz h1[class*="ta-center"] {
	text-indent: clamp(0.04em, calc(0.04em + ((1vw - 0.225em) * 0.2)), 0.12em);
}

.pg-sarafrontcpz h2 {
	line-height: 1.11;
	letter-spacing: clamp(0.03em, calc(0.03em + ((1vw - 0.225em) * 0.15)), 0.09em);
	font-size: clamp(calc(var(--⅝fem) * 1.05), calc(calc(var(--⅝fem) * 1.05) + ((1vw - 0.225rem) * 1.125)), calc(var(--⅝fem) * 1.5));
	font-weight: 500;
}

.pg-sarafrontcpz h2[class*="ta-center"] {
	text-indent: clamp(0.03em, calc(0.03em + ((1vw - 0.225em) * 0.15)), 0.09em);
}

.pg-sarafrontcpz h3 {
	line-height: 1.11;
	letter-spacing: clamp(0.02em, calc(0.02em + ((1vw - 0.225em) * 0.1)), 0.06em);
	font-size: clamp(calc(var(--⅝fem) * 1), calc(calc(var(--⅝fem) * 1) + ((1vw - 0.225rem) * 0.4688)), calc(var(--⅝fem) * 1.1875));
	font-weight: 500;
}

.pg-sarafrontcpz h3[class*="ta-center"] {
	text-indent: clamp(0.02em, calc(0.02em + ((1vw - 0.225em) * 0.1)), 0.06em);
}

.pg-sarafrontcpz h4 {
	line-height: 1.11;
	letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
	font-size: clamp(0.9563rem, calc(0.9563rem + ((1vw - 0.225rem) * 0.2656)), calc(var(--⅝fem) * 1.0625));
	font-weight: 500;
}

.pg-sarafrontcpz h4[class*="ta-center"] {
	text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}

.pg-sarafrontcpz h5 {
	line-height: 1.11;
	letter-spacing: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
	font-size: clamp(0.8750rem, calc(0.8750rem + ((1vw - 0.225rem) * 0.1563)), calc(var(--⅝fem) * 0.9375));
	font-weight: 500;
}

.pg-sarafrontcpz h5[class*="ta-center"] {
	text-indent: clamp(0.01em, calc(0.01em + ((1vw - 0.225em) * 0.05)), 0.03em);
}

.pg-sarafrontcpz h6 {
	line-height: 1.11;
	letter-spacing: 0;
	font-size: clamp(0.7500rem, calc(0.7500rem + ((1vw - 0.225rem) * 0.1563)), calc(var(--⅝fem) * 0.8125));
	font-weight: 500;
}

.pg-sarafrontcpz h6[class*="ta-center"] {
	text-indent: 0;
}

/* Headings画像（.individ） */
.pg-sarafrontcpz :is(h1, h2, h3, h4, h5, h6):has(>img) {
	width: auto;
}

.pg-sarafrontcpz :is(h1, h2, h3, h4, h5, h6)>img {
	width: auto;
	max-width: 100%;
	object-fit: contain;
}




/* Component
━━━━━━━━━━━━━━━━━━━ */
/* .menu */
.pg-sarafrontcpz .frontmenu1 {
	display: inline-block;
	margin-top: 2rem;
	line-height: 1.77;
	font-size: 1.3125rem;
	text-align: left;
}

/* .button */
.pg-sarafrontcpz .button .pin-rightHalf {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -1.25em;
	display: inline-flex;
	align-items: center;
}

/* .scrollin */
.pg-sarafrontcpz .scroll-countation {
	font-family: var(--ff-nixie);
}

/* フォーカスリング：Nixie オレンジで統一（WCAG） */
.pg-sarafrontcpz :focus-visible {
	outline: calc(var(--⅝fem) * 0.125) solid var(--c-nixie-400);
	outline-offset: calc(var(--⅝fem) * 0.1875);
}

/* セクションヘッダー（§番号 + kanji/latin/sub） */
.pg-sarafrontcpz .cp-section-head {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--⅝fem) * 1.75) calc(var(--⅝fem) * 2.5);
	align-items: end;
	padding-bottom: calc(var(--⅝fem) * 2);
	border-bottom: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	margin-bottom: calc(var(--⅝fem) * 1);
}

.pg-sarafrontcpz .cp-section-title {
	display: flex;
	flex-direction: column;
	gap: calc(var(--⅝fem) * 0.5);
}

.pg-sarafrontcpz .cp-section-title .latin {
	font-style: italic;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-nixie-500);
	text-shadow: var(--glow-nixie-sm);
	margin: 0;
}

.pg-sarafrontcpz .cp-section-title .kanji {
	font-weight: 600;
	font-size: clamp(calc(var(--⅝fem) * 1.625), calc(var(--⅝fem) * 1.3) + 1.5vw, calc(var(--⅝fem) * 2.5));
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

.pg-sarafrontcpz .cp-section-title .sub {
	color: var(--c-base-300, hsl(224, 6%, 74%));
}




/* ============================================================
Utility（このページ内のみ）
━━━━━━━━━━━━━━━━━━━ */
/* 歯車回転は既存 scrollin（.scroll-rotationDext / .scroll-rotationLevo
+ .slowed-N）を使用するため、独自 CSS は不要。
scrollin.js が交差時に .is-scloaded を付与して animation が発火する。
transform-origin だけは保険として中央指定（scrollin 側に未指定のため） */
.pg-sarafrontcpz [class*="scroll-rotation"],
.pg-sarafrontcpz [class*="scroll-clockation"] {
	transform-origin: 50% 50%;
	will-change: transform;
	display: inline-block;
	/* span の transform を効かせるため */
}




/* Pattern
━━━━━━━━━━━━━━━━━━━ */
/* .frame（absolute／中央揃え）
─────────────────── */
.pg-sarafrontcpz [class^="frame-wrapper"] {
	position: relative;
	width: 100%;
	height: 100%;
}

.pg-sarafrontcpz [class^="frame-wrapper"]>.frm-basis {
	width: 100%;
	height: 100%;
}

.pg-sarafrontcpz :is(.frame-wrapper)>:is(.put-center,
	.put-rightWing) {
	position: absolute;
	z-index: 20;
	inset: 0;
	margin: auto;
	width: 100%;
	height: 100%;
}

.pg-sarafrontcpz :is(.frame-wrapper)>:is(.put-center) {
	/* Grid */
	display: grid;
	place-content: center;
}

.pg-sarafrontcpz :is(.frame-wrapper)>:is(.put-rightWing) {
	/* Grid */
	display: grid;
	place-content: start end;
	padding-top: 35%;
	padding-inline: calc(100% - 21.5rem);
}

@media print,
screen and (min-width: 744px) {
	.pg-sarafrontcpz :is(.frame-wrapper)>:is(.put-rightWing) {
		padding-top: 5%;
	}

	/* (@PC)  */
	.pg-sarafrontcpz :is(.frame-wrapper)>:is(.put-rightWing) {
		padding-inline: calc(100% - 70rem);
	}
}




/* Layout
━━━━━━━━━━━━━━━━━━━ */
/* About 以降は calc(var(--⅝fem) * 77.5) max（Hero は full-bleed のため別管理） */
[class^="sect-frontCpZ"] .section__interior {
	position: relative;
	z-index: 1;
	width: calc(var(--⅝fem) * 77.5);
	max-width: 92.5vw;
	margin-inline: auto;
}

[class^="sect-frontCpZ"] .section__leftlane,
[class^="sect-frontCpZ"] .section__centerlane,
[class^="sect-frontCpZ"] .section__rightlane {
	width: 100%;
}

/* SP：縦積み */
@media screen and (max-width: 743.9px) {

	[class^="sect-frontCpZ"] .section__centerlane,
	[class^="sect-frontCpZ"] .section__rightlane {
		margin-top: calc(var(--⅝fem) * 2);
	}
}

/* 歯車背景 */
[class^="sect-frontCpZ"] .gear-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 1;
	z-index: 0;
}

[class^="sect-frontCpZ"] .gear-bg img {
	width: 100%;
	max-width: unset;
	height: 100%;
	object-fit: contain;
}


[class^="sect-frontCpZ"] .gear-bg [class*="gear-small"],
[class^="sect-frontCpZ"] .gear-bg [class*="gear-mid"],
[class^="sect-frontCpZ"] .gear-bg [class*="gear-big"] {
	position: absolute;
	display: block;
	pointer-events: none;
}




/* §Hero — A·Gear（Bleed + Board）
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-Hero {
	position: relative;
	width: 100%;
	min-height: calc(100svh - 6rem);
	isolation: isolate;
	background: hsla(224, 6%, 13%, 0.5);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

/* 歯車背景 */
.sect-frontCpZ-Hero .gear-bg .gear-small {
	bottom: calc(var(--⅝fem) * -8);
	right: calc(var(--⅝fem) * -8);
	width: calc(var(--⅝fem) * 32);
	filter: brightness(0.5);
}

.sect-frontCpZ-Hero .gear-bg .gear-mid {
	top: calc(var(--⅝fem) * 8);
	left: calc(var(--⅝fem) * -8);
	width: calc(var(--⅝fem) * 33);
	filter: brightness(0.5);
}

.sect-frontCpZ-Hero .gear-bg .gear-big {
	top: calc(var(--⅝fem) * -12);
	left: calc(var(--⅝fem) * -28);
	width: calc(var(--⅝fem) * 73);
	filter: brightness(0.5);
}

/* タイトル */
.zaratan:not([disutiled]) .sect-frontCpZ-Hero .fz-xxxl {
	font-size: clamp(1rem, calc(1rem + ((1vw - 3.6px) * 1.8438)), 1.8750rem);
}

.zaratan:not([disutiled]) .sect-frontCpZ-Hero .fz-lg {
	font-size: clamp(0.875rem, calc(0.875rem + ((1vw - 3.6px) * 0.7188)), 1.3125rem);
}

.zaratan:not([disutiled]) .sect-frontCpZ-Hero .fz-ml {
	font-size: clamp(0.8125rem, calc(0.8125rem + ((1vw - 3.6px) * 0.4688)), 1.1875rem);
}

.zaratan:not([disutiled]) .sect-frontCpZ-Hero .fz-xhl {
	font-size: clamp(3rem, calc(3rem + ((1vw - 3.6px) * 6.8750)), 5.25rem);
}

/* コーナー枠（4 隅・Nixie オレンジ） */
.sect-frontCpZ-Hero .corner {
	position: absolute;
	width: calc(var(--⅝fem) * 3.5);
	height: calc(var(--⅝fem) * 3.5);
	border-style: solid;
	border-color: var(--c-nixie-500);
	opacity: .9;
	z-index: 1;
}

.sect-frontCpZ-Hero .corner-tl {
	top: calc(var(--⅝fem) * 1.5);
	left: calc(var(--⅝fem) * 2.5);
	border-width: calc(var(--⅝fem) * 0.0625) 0 0 calc(var(--⅝fem) * 0.0625);
}

.sect-frontCpZ-Hero .corner-tr {
	top: calc(var(--⅝fem) * 1.5);
	right: calc(var(--⅝fem) * 2.5);
	border-width: calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0 0;
}

.sect-frontCpZ-Hero .corner-bl {
	bottom: calc(var(--⅝fem) * 2.5);
	left: calc(var(--⅝fem) * 2.5);
	border-width: 0 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625);
}

.sect-frontCpZ-Hero .corner-br {
	bottom: calc(var(--⅝fem) * 2.5);
	right: calc(var(--⅝fem) * 2.5);
	border-width: 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0;
}

/* コンテンツ（中央配置） */
.sect-frontCpZ-Hero .section__interior {
	height: calc(100svh - 6rem);
}

/* 装飾的な漢字ブロック（電脳記録 / LOG ENTRIES） */
.sect-frontCpZ-Hero .hero-deco {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: calc(var(--⅝fem) * 1.75);
}

.sect-frontCpZ-Hero .hero-deco .kanji {
	font-weight: 600;
	font-size: calc(var(--⅝fem) * 1.375);
	color: var(--c-base-300, hsl(224, 6%, 74%));
}

.sect-frontCpZ-Hero .hero-deco .latin {
	font-style: italic;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-nixie-500);
	margin-top: calc(var(--⅝fem) * 0.5);
}

/* H1 */
.sect-frontCpZ-Hero h1.hero-h1 {
	font-weight: 600;
	text-wrap: balance;
}

.sect-frontCpZ-Hero .h-row-1 {
	display: block;
}

.sect-frontCpZ-Hero .h-row-2 {
	display: block;
}




/* §Picks
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-Picks {
	position: relative;
	padding: calc(var(--⅝fem) * 5) 0 calc(var(--⅝fem) * 3.75);
	background: hsla(224, 6%, 13%, 0.85);
}

/* 歯車背景 */
.sect-frontCpZ-Picks .gear-bg .gear-mid {
	top: calc(var(--⅝fem) * 15);
	right: calc(var(--⅝fem) * -3);
	width: calc(var(--⅝fem) * 38);
	filter: brightness(0.4);
}

.sect-frontCpZ-Picks .gear-bg .gear-big {
	top: calc(var(--⅝fem) * 3);
	right: calc(var(--⅝fem) * -16);
	width: calc(var(--⅝fem) * 64);
	filter: brightness(0.5);
}




/* §About — Lane（leftlane=本文 / rightlane=Nixie タビュラーメタ）
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-About {
	position: relative;
	padding: calc(var(--⅝fem) * 5) 0 calc(var(--⅝fem) * 3.75);
	background: hsla(224, 6%, 13%, 0.5);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

/* 歯車背景 */
.sect-frontCpZ-About .gear-bg .gear-mid {
	top: calc(var(--⅝fem) * 7);
	left: calc(var(--⅝fem) * -0.5);
	width: calc(var(--⅝fem) * 33);
	filter: brightness(0.4);
}

.sect-frontCpZ-About .gear-bg .gear-big {
	top: calc(var(--⅝fem) * -3);
	left: calc(var(--⅝fem) * -11);
	width: calc(var(--⅝fem) * 52);
	filter: brightness(0.5);
}

@media screen and (max-width: 743.9px) {

	/* Lane：区画・横方向 (@SP)  */
	.sect-frontCpZ-About .section__rightlane {
		margin-top: calc(var(--⅝fem) * 1.5);
	}
}

@media print,
screen and (min-width: 744px) {

	/* Lane：区画・横方向 (@PC) */
	.sect-frontCpZ-About .section__leftlane {
		width: 49.5%;
	}

	.sect-frontCpZ-About .section__rightlane {
		width: 46.5%;
	}
}

/* 本文（leftlane） */
.sect-frontCpZ-About .cp-about-body {
	position: relative;
	z-index: 1;
	font-size: var(--fz-md);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

.sect-frontCpZ-About .cp-about-body p {
	margin: 0 0 1.2em;
}

.sect-frontCpZ-About .cp-about-body p:last-of-type {
	margin-bottom: 0;
}

.sect-frontCpZ-About .cp-about-body b {
	font-style: normal;
	color: var(--c-nixie-300);
	border-bottom: calc(var(--⅝fem) * 0.0625) dashed var(--c-nixie-700);
}

/* タグ */
.sect-frontCpZ-About .cp-about-tags {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--⅝fem) * 0.5);
	margin: calc(var(--⅝fem) * 1.5) 0 0;
	padding: 0;
	list-style: none;
}

.sect-frontCpZ-About .cp-tag {
	font-style: italic;
	font-size: var(--fz-xs);
	padding: calc(var(--⅝fem) * 0.25) calc(var(--⅝fem) * 0.625);
	border: calc(var(--⅝fem) * 0.0625) solid hsla(0, 0%, 100%, .18);
	color: var(--c-base-300, hsl(224, 6%, 74%));
}

.sect-frontCpZ-About .cp-tag.cp-tag-orange {
	border-color: hsla(28, 98%, 52%, .4);
	color: var(--c-nixie-300);
}

/* Nixie タビュラーメタ（rightlane） */
.sect-frontCpZ-About .cp-about-meta {
	margin: 0;
	padding: calc(var(--⅝fem) * 0.25) 0;
	border-top: calc(var(--⅝fem) * 0.0625) solid var(--c-nixie-500);
	border-bottom: calc(var(--⅝fem) * 0.0625) solid var(--c-nixie-500);
	background: radial-gradient(ellipse at 50% 50%, hsla(20, 80%, 18%, .18), transparent 70%);
	position: relative;
	z-index: 1;
}

.sect-frontCpZ-About .cp-about-meta .row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: calc(var(--⅝fem) * 1);
	padding: calc(var(--⅝fem) * 1) calc(var(--⅝fem) * 1.125);
	border-bottom: calc(var(--⅝fem) * 0.0625) dashed var(--c-line);
	font-family: var(--ff-nixie);
	font-feature-settings: "tnum";
}

.sect-frontCpZ-About .cp-about-meta .row:last-child {
	border-bottom: none;
}

.sect-frontCpZ-About .cp-about-meta .k {
	font-style: italic;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
	margin: 0;
}

.sect-frontCpZ-About .cp-about-meta .v {
	font-size: calc(var(--⅝fem) * 2.125);
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-md);
	margin: 0;
}

.sect-frontCpZ-About .cp-about-meta .u {
	min-width: 2.75em;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
	text-align: right;
}




/* Responsive：SP（max-width: 743.9px）
━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 743.9px) {

	/* Hero：SP 用調整 */
	.sect-frontCpZ-Hero {
		min-height: clamp(calc(var(--⅝fem) * 35), 100svh - calc(var(--⅝fem) * 3.75), 100svh);
	}

	.sect-frontCpZ-Hero .corner {
		width: calc(var(--⅝fem) * 2.25);
		height: calc(var(--⅝fem) * 2.25);
	}

	.sect-frontCpZ-Hero .corner-tl,
	.sect-frontCpZ-Hero .corner-tr {
		top: calc(var(--⅝fem) * 1);
	}

	.sect-frontCpZ-Hero .corner-tl,
	.sect-frontCpZ-Hero .corner-bl {
		left: calc(var(--⅝fem) * 1);
	}

	.sect-frontCpZ-Hero .corner-tr,
	.sect-frontCpZ-Hero .corner-br {
		right: calc(var(--⅝fem) * 1);
	}

	.sect-frontCpZ-Hero .corner-bl,
	.sect-frontCpZ-Hero .corner-br {
		bottom: calc(var(--⅝fem) * 1);
	}

	/* About：SP 用調整（1 カラム化） */
	.sect-frontCpZ-About {
		padding: calc(var(--⅝fem) * 3.75) 0 calc(var(--⅝fem) * 2.5);
	}

	.sect-frontCpZ-About .cp-section-head {
		grid-template-columns: 1fr;
		gap: calc(var(--⅝fem) * 1);
		margin-bottom: calc(var(--⅝fem) * 2);
		padding-bottom: calc(var(--⅝fem) * 1.5);
	}

	.sect-frontCpZ-About .cp-about-meta .v {
		font-size: calc(var(--⅝fem) * 1.75);
	}
}




/* ============================================================
Phase 2 — Section Head の CTA 拡張（Tools / Picks / Blog 用）
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .cp-section-head_cta {
	grid-template-columns: 1fr auto;
}

.pg-sarafrontcpz .cp-section-cta {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--⅝fem) * 0.5);
	font-size: var(--fz-xs);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--c-nixie-400);
	padding: calc(var(--⅝fem) * 0.625) calc(var(--⅝fem) * 1);
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-nixie-500);
	white-space: nowrap;
	transition: border-color .2s ease, color .2s ease, text-shadow .2s ease;
}

.pg-sarafrontcpz .cp-section-cta:hover,
.pg-sarafrontcpz .cp-section-cta:focus-visible {
	border-color: var(--c-nixie-400);
	color: var(--c-nixie-300);
}

.pg-sarafrontcpz .cp-section-cta .arrow {
	font-family: var(--ff-nixie);
}

/* visually-hidden（SR にのみテキストを渡したいケース） */
.pg-sarafrontcpz .visually-hidden {
	position: absolute !important;
	width: calc(var(--⅝fem) * 0.0625);
	height: calc(var(--⅝fem) * 0.0625);
	padding: 0;
	margin: calc(var(--⅝fem) * -0.0625);
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}




/* §Tools — Bento グリッド + コーナー枠 + 歯車アイコン
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-Tools {
	position: relative;
	padding: calc(var(--⅝fem) * 5) 0 calc(var(--⅝fem) * 3.75);
	background: hsla(224, 6%, 13%, 0.85);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

/* タイトル */
.zaratan:not([disutiled]) .sect-frontCpZ-Tools .fz-gl {
	font-size: clamp(3.1875rem, calc(3.1875rem + ((1vw - 3.6px) * 5.0313)), 4.1250rem);
}

/* 歯車背景 */
.sect-frontCpZ-Tools .gear-bg .gear-small {
	bottom: calc(var(--⅝fem) * 32);
	right: calc(var(--⅝fem) * 5.5);
	width: calc(var(--⅝fem) * 23);
	filter: brightness(0.4);
}

.sect-frontCpZ-Tools .gear-bg .gear-mid {
	top: calc(var(--⅝fem) * 14);
	right: calc(var(--⅝fem) * 29);
	width: calc(var(--⅝fem) * 47);
	filter: brightness(0.4);
}

.sect-frontCpZ-Tools .gear-bg .gear-big {
	bottom: calc(var(--⅝fem) * 16);
	right: calc(var(--⅝fem) * -10);
	width: calc(var(--⅝fem) * 55);
	filter: brightness(0.5);
}

.sect-frontCpZ-Tools .cp-tools-wrap {
	position: relative;
	padding: calc(var(--⅝fem) * 1.5);
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line-soft);
	background: linear-gradient(to bottom, hsla(0, 0%, 100%, .012), transparent 30%);
}

/* コーナー枠（TL/BR は ::before / ::after、TR/BL は <span>） */
.sect-frontCpZ-Tools .cp-tools-wrap::before,
.sect-frontCpZ-Tools .cp-tools-wrap::after,
.sect-frontCpZ-Tools .cp-tools-wrap>.corner-tr,
.sect-frontCpZ-Tools .cp-tools-wrap>.corner-bl {
	position: absolute;
	width: calc(var(--⅝fem) * 1.75);
	height: calc(var(--⅝fem) * 1.75);
	border-style: solid;
	border-color: var(--c-nixie-500);
	opacity: .85;
	pointer-events: none;
}

.sect-frontCpZ-Tools .cp-tools-wrap::before {
	content: "";
	top: calc(var(--⅝fem) * -0.0625);
	left: calc(var(--⅝fem) * -0.0625);
	border-width: calc(var(--⅝fem) * 0.0625) 0 0 calc(var(--⅝fem) * 0.0625);
}

.sect-frontCpZ-Tools .cp-tools-wrap::after {
	content: "";
	bottom: calc(var(--⅝fem) * -0.0625);
	right: calc(var(--⅝fem) * -0.0625);
	border-width: 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0;
}

.sect-frontCpZ-Tools .cp-tools-wrap>.corner-tr {
	top: calc(var(--⅝fem) * -0.0625);
	right: calc(var(--⅝fem) * -0.0625);
	border-width: calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0 0;
}

.sect-frontCpZ-Tools .cp-tools-wrap>.corner-bl {
	bottom: calc(var(--⅝fem) * -0.0625);
	left: calc(var(--⅝fem) * -0.0625);
	border-width: 0 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625);
}

/* Bento グリッド */
.sect-frontCpZ-Tools .cp-tools-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: calc(var(--⅝fem) * 0.5);
}

.sect-frontCpZ-Tools .cp-tool {
	position: relative;
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	padding: calc(var(--⅝fem) * 1.125) calc(var(--⅝fem) * 1.125) calc(var(--⅝fem) * 1);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: calc(var(--⅝fem) * 0.5);
	overflow: hidden;
	transition: border-color .3s ease, transform .3s ease;
}

.sect-frontCpZ-Tools .cp-tool::after {
	/* Nixie オレンジの薄いグロー（ホバーで濃く） */
	content: "";
	position: absolute;
	inset: auto -20% -40% auto;
	width: 70%;
	height: 100%;
	background: radial-gradient(ellipse at 80% 30%, var(--c-nixie-700) 0%, transparent 60%);
	opacity: .15;
	z-index: -1;
	transition: opacity .3s ease;
}

.sect-frontCpZ-Tools .cp-tool:hover,
.sect-frontCpZ-Tools .cp-tool:focus-visible {
	border-color: var(--c-nixie-500);
}

.sect-frontCpZ-Tools .cp-tool:hover::after,
.sect-frontCpZ-Tools .cp-tool:focus-visible::after {
	opacity: .35;
}

/* Bento span（lg = 3x2 / md = 2x1 / sm = 2x1） */
.sect-frontCpZ-Tools .cp-tool--lg {
	grid-column: span 3;
	grid-row: span 2;
	padding: calc(var(--⅝fem) * 1.5);
}

.sect-frontCpZ-Tools .cp-tool--md {
	grid-column: span 3;
}

.sect-frontCpZ-Tools .cp-tool--sm {
	grid-column: span 2;
}

/* Card 内要素 */
.sect-frontCpZ-Tools .cp-tool-no {
	position: absolute;
	top: calc(var(--⅝fem) * 0.75);
	right: calc(var(--⅝fem) * 1);
	font-family: var(--ff-nixie);
	font-size: var(--fz-xs);
	color: var(--c-nixie-400);
	text-shadow: var(--glow-nixie-sm);
}

.sect-frontCpZ-Tools .cp-tool-gear {
	position: absolute;
	bottom: calc(var(--⅝fem) * 1.25);
	right: calc(var(--⅝fem) * 1);
	width: calc(var(--⅝fem) * 1.25);
	height: calc(var(--⅝fem) * 1.25);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: filter .3s ease;
	pointer-events: none;
}

.sect-frontCpZ-Tools .cp-tool:hover .cp-tool-gear>img,
.sect-frontCpZ-Tools .cp-tool:focus-visible .cp-tool-gear>img {
	opacity: 1;
}

.sect-frontCpZ-Tools .cp-tool-title {
	font-weight: 600;
	font-size: calc(var(--⅝fem) * 1.375);
	color: var(--c-base-100, hsl(224, 6%, 93%));
	margin: calc(var(--⅝fem) * 0.25) 0 0;
	display: flex;
	flex-direction: column;
}

.sect-frontCpZ-Tools .cp-tool--lg .cp-tool-title {
	font-size: calc(var(--⅝fem) * 2.5);
}

.sect-frontCpZ-Tools .cp-tool-jp {
	font-weight: 500;
	font-size: var(--fz-sm);
	color: var(--c-nixie-400);
	margin: 0;
}

.sect-frontCpZ-Tools .cp-tool-desc {
	font-size: var(--fz-sm);
	color: var(--c-base-300, hsl(224, 6%, 74%));
	margin: 0;
}

.sect-frontCpZ-Tools .cp-tool--lg .cp-tool-desc {
	font-size: var(--fz-sm);
}

.sect-frontCpZ-Tools .cp-tool-mono {
	margin-top: auto;
	font-family: var(--ff-nixie);
	font-size: var(--fz-xxs);
	color: var(--c-cyan-400, hsl(186, 80%, 56%));
	text-transform: lowercase;
	border-top: calc(var(--⅝fem) * 0.0625) dashed var(--c-line);
}

.sect-frontCpZ-Tools .cp-tool-mono::before {
	content: "$ ";
	color: var(--c-nixie-500);
}

/* Stats strip（Tools の下） */
.sect-frontCpZ-Tools .cp-tools-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--⅝fem) * 0.5);
	margin: calc(var(--⅝fem) * 1.25) 0 0;
	padding: calc(var(--⅝fem) * 0.875) calc(var(--⅝fem) * 0.5);
	border-top: calc(var(--⅝fem) * 0.0625) dashed var(--c-line);
	font-family: var(--ff-nixie);
}

.sect-frontCpZ-Tools .cp-tools-strip .cell {
	display: flex;
	align-items: baseline;
	gap: calc(var(--⅝fem) * 0.75);
	padding: 0 calc(var(--⅝fem) * 0.875);
	margin: 0;
}

.sect-frontCpZ-Tools .cp-tools-strip .k {
	font-style: italic;
	font-size: var(--fz-xxs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
	margin: 0;
}

.sect-frontCpZ-Tools .cp-tools-strip .v {
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 1.125);
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-sm);
	margin: 0;
}


/* §Apps — Tools と同じ Bento グリッド（6枚フラット）
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-Apps {
	position: relative;
	padding: calc(var(--⅝fem) * 5) 0 calc(var(--⅝fem) * 3.75);
	background: hsla(224, 6%, 13%, 0.85);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

/* タイトル */
.zaratan:not([disutiled]) .sect-frontCpZ-Apps .fz-gl {
	font-size: clamp(3.1875rem, calc(3.1875rem + ((1vw - 3.6px) * 5.0313)), 4.1250rem);
}

/* 歯車背景 */
.sect-frontCpZ-Apps .gear-bg .gear-mid {
	top: calc(var(--⅝fem) * 15);
	left: calc(var(--⅝fem) * -3);
	width: calc(var(--⅝fem) * 38);
	filter: brightness(0.4);
}

.sect-frontCpZ-Apps .gear-bg .gear-big {
	top: calc(var(--⅝fem) * 3);
	left: calc(var(--⅝fem) * -16);
	width: calc(var(--⅝fem) * 64);
	filter: brightness(0.5);
}

.sect-frontCpZ-Apps .cp-apps-wrap {
	position: relative;
	padding: calc(var(--⅝fem) * 1.5);
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line-soft);
	background: linear-gradient(to bottom, hsla(0, 0%, 100%, .012), transparent 30%);
}

/* コーナー枠（TL/BR は ::before / ::after、TR/BL は <span>） */
.sect-frontCpZ-Apps .cp-apps-wrap::before,
.sect-frontCpZ-Apps .cp-apps-wrap::after,
.sect-frontCpZ-Apps .cp-apps-wrap>.corner-tr,
.sect-frontCpZ-Apps .cp-apps-wrap>.corner-bl {
	position: absolute;
	width: calc(var(--⅝fem) * 1.75);
	height: calc(var(--⅝fem) * 1.75);
	border-style: solid;
	border-color: var(--c-nixie-500);
	opacity: .85;
	pointer-events: none;
}

.sect-frontCpZ-Apps .cp-apps-wrap::before {
	content: "";
	top: calc(var(--⅝fem) * -0.0625);
	left: calc(var(--⅝fem) * -0.0625);
	border-width: calc(var(--⅝fem) * 0.0625) 0 0 calc(var(--⅝fem) * 0.0625);
}

.sect-frontCpZ-Apps .cp-apps-wrap::after {
	content: "";
	bottom: calc(var(--⅝fem) * -0.0625);
	right: calc(var(--⅝fem) * -0.0625);
	border-width: 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0;
}

.sect-frontCpZ-Apps .cp-apps-wrap>.corner-tr {
	top: calc(var(--⅝fem) * -0.0625);
	right: calc(var(--⅝fem) * -0.0625);
	border-width: calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625) 0 0;
}

.sect-frontCpZ-Apps .cp-apps-wrap>.corner-bl {
	bottom: calc(var(--⅝fem) * -0.0625);
	left: calc(var(--⅝fem) * -0.0625);
	border-width: 0 0 calc(var(--⅝fem) * 0.0625) calc(var(--⅝fem) * 0.0625);
}

/* Bento グリッド */
.sect-frontCpZ-Apps .cp-apps-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: calc(var(--⅝fem) * 0.5);
}

.sect-frontCpZ-Apps .cp-app {
	position: relative;
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	padding: calc(var(--⅝fem) * 1.125) calc(var(--⅝fem) * 1.125) calc(var(--⅝fem) * 1);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: calc(var(--⅝fem) * 0.5);
	overflow: hidden;
	transition: border-color .3s ease, transform .3s ease;
}

.sect-frontCpZ-Apps .cp-app::after {
	/* Nixie オレンジの薄いグロー（ホバーで濃く） */
	content: "";
	position: absolute;
	inset: auto -20% -40% auto;
	width: 70%;
	height: 100%;
	background: radial-gradient(ellipse at 80% 30%, var(--c-nixie-700) 0%, transparent 60%);
	opacity: .15;
	z-index: -1;
	transition: opacity .3s ease;
}

.sect-frontCpZ-Apps .cp-app:hover,
.sect-frontCpZ-Apps .cp-app:focus-visible {
	border-color: var(--c-nixie-500);
}

.sect-frontCpZ-Apps .cp-app:hover::after,
.sect-frontCpZ-Apps .cp-app:focus-visible::after {
	opacity: .35;
}

/* Bento span（lg = 3x2 / md = 2x1 / sm = 2x1） */
.sect-frontCpZ-Apps .cp-app--lg {
	grid-column: span 3;
	grid-row: span 2;
	padding: calc(var(--⅝fem) * 1.5);
}

.sect-frontCpZ-Apps .cp-app--md {
	grid-column: span 3;
}

.sect-frontCpZ-Apps .cp-app--sm {
	grid-column: span 2;
}

/* Card 内要素 */
.sect-frontCpZ-Apps .cp-app-no {
	position: absolute;
	top: calc(var(--⅝fem) * 0.75);
	right: calc(var(--⅝fem) * 1);
	font-family: var(--ff-nixie);
	font-size: var(--fz-xs);
	color: var(--c-nixie-400);
	text-shadow: var(--glow-nixie-sm);
}

.sect-frontCpZ-Apps .cp-app-gear {
	position: absolute;
	bottom: calc(var(--⅝fem) * 1.25);
	right: calc(var(--⅝fem) * 1);
	width: calc(var(--⅝fem) * 1.25);
	height: calc(var(--⅝fem) * 1.25);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: filter .3s ease;
	pointer-events: none;
}

.sect-frontCpZ-Apps .cp-app:hover .cp-app-gear>img,
.sect-frontCpZ-Apps .cp-app:focus-visible .cp-app-gear>img {
	opacity: 1;
}

.sect-frontCpZ-Apps .cp-app-title {
	font-weight: 600;
	font-size: calc(var(--⅝fem) * 1.375);
	color: var(--c-base-100, hsl(224, 6%, 93%));
	margin: calc(var(--⅝fem) * 0.25) 0 0;
	display: flex;
	flex-direction: column;
}

.sect-frontCpZ-Apps .cp-app--lg .cp-app-title {
	font-size: calc(var(--⅝fem) * 2.5);
}

.sect-frontCpZ-Apps .cp-app-jp {
	font-weight: 500;
	font-size: var(--fz-sm);
	color: var(--c-nixie-400);
	margin: 0;
}

.sect-frontCpZ-Apps .cp-app-desc {
	font-size: var(--fz-sm);
	color: var(--c-base-300, hsl(224, 6%, 74%));
	margin: 0;
}

.sect-frontCpZ-Apps .cp-app--lg .cp-app-desc {
	font-size: var(--fz-sm);
}

.sect-frontCpZ-Apps .cp-app-mono {
	margin-top: auto;
	font-family: var(--ff-nixie);
	font-size: var(--fz-xxs);
	color: var(--c-cyan-400, hsl(186, 80%, 56%));
	text-transform: lowercase;
	border-top: calc(var(--⅝fem) * 0.0625) dashed var(--c-line);
}

.sect-frontCpZ-Apps .cp-app-mono::before {
	content: "$ ";
	color: var(--c-nixie-500);
}

/* Stats strip（Tools の下） */
.sect-frontCpZ-Apps .cp-apps-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--⅝fem) * 0.5);
	margin: calc(var(--⅝fem) * 1.25) 0 0;
	padding: calc(var(--⅝fem) * 0.875) calc(var(--⅝fem) * 0.5);
	border-top: calc(var(--⅝fem) * 0.0625) dashed var(--c-line);
	font-family: var(--ff-nixie);
}

.sect-frontCpZ-Apps .cp-apps-strip .cell {
	display: flex;
	align-items: baseline;
	gap: calc(var(--⅝fem) * 0.75);
	padding: 0 calc(var(--⅝fem) * 0.875);
	margin: 0;
}

.sect-frontCpZ-Apps .cp-apps-strip .k {
	font-style: italic;
	font-size: var(--fz-xxs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
	margin: 0;
}

.sect-frontCpZ-Apps .cp-apps-strip .v {
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 1.125);
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-sm);
	margin: 0;
}


/* ─── Apps 固有：stack バッジ（カード右上の種別表示） ─── */
.sect-frontCpZ-Apps .cp-app-stack {
	position: absolute;
	top: calc(var(--⅝fem) * 1.5);
	right: calc(var(--⅝fem) * 1.5);
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 0.7);
	letter-spacing: 0.08em;
	color: var(--c-base-a0\.5, hsla(224, 6%, 53%, 0.55));
	opacity: 0.7;
	pointer-events: none;
}

/* kind 別アクセント（app=オレンジ系 / plugin=WPブルー系の縁取り） */
.sect-frontCpZ-Apps .cp-app.is-kind-app::after {
	border-color: hsla(20, 80%, 50%, 0.22);
}
.sect-frontCpZ-Apps .cp-app.is-kind-plugin::after {
	border-color: hsla(205, 55%, 55%, 0.20);
}
.sect-frontCpZ-Apps .cp-app.is-kind-app:hover .cp-app-stack {
	color: var(--c-nixie-400);
	opacity: 1;
}
.sect-frontCpZ-Apps .cp-app.is-kind-plugin:hover .cp-app-stack {
	color: hsl(205, 60%, 65%);
	opacity: 1;
}

/* ─── Apps 固有：開発の裏側（devnotes） ─── */
.sect-frontCpZ-Apps .cp-apps-devnotes {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(var(--⅝fem) * 0.5) calc(var(--⅝fem) * 1.5);
	margin-top: calc(var(--⅝fem) * 2);
	padding: calc(var(--⅝fem) * 1.5) calc(var(--⅝fem) * 2);
	background: hsla(224, 10%, 8%, 0.4);
	border-radius: 4px;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-label {
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 0.78);
	letter-spacing: 0.1em;
	color: var(--c-base-a0\.5, hsla(224, 6%, 53%, 0.55));
	white-space: nowrap;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-list {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--⅝fem) * 0.5) calc(var(--⅝fem) * 1.25);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-list li {
	margin: 0;
	padding: 0;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-list li::before {
	content: none;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-list a {
	font-family: var(--ff-jp-serif);
	font-size: calc(var(--⅝fem) * 0.82);
	color: var(--c-base-300, hsl(224, 6%, 74%));
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.sect-frontCpZ-Apps .cp-apps-devnotes-list a:hover,
.sect-frontCpZ-Apps .cp-apps-devnotes-list a:focus-visible {
	color: var(--c-nixie-400);
	border-bottom-color: var(--c-nixie-400);
}

/* SP 調整 */
@media (max-width: 47.9375em) {
	.sect-frontCpZ-Apps .cp-apps-devnotes {
		flex-direction: column;
		gap: calc(var(--⅝fem) * 0.75);
	}
	.sect-frontCpZ-Apps .cp-app-stack {
		display: none;
	}
}




/* §Blog — カテゴリ Tile（4 列）+ 最新記事リスト
━━━━━━━━━━━━━━━━━━━ */
.pg-sarafrontcpz .sect-frontCpZ-Blog {
	position: relative;
	padding: calc(var(--⅝fem) * 5) 0 calc(var(--⅝fem) * 3.75);
	background: hsla(224, 6%, 13%, 0.5);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

/* 歯車背景 */
.sect-frontCpZ-Blog .gear-bg .gear-smallL {
	top: calc(var(--⅝fem) * 33.5);
	left: calc(var(--⅝fem) * -4);
	width: calc(var(--⅝fem) * 26);
	filter: brightness(0.3);
}

.sect-frontCpZ-Blog .gear-bg .gear-midL {
	top: calc(var(--⅝fem) * 25);
	left: calc(var(--⅝fem) * -12);
	width: calc(var(--⅝fem) * 43);
	filter: brightness(0.3);
}

.sect-frontCpZ-Blog .gear-bg .gear-bigL {
	top: calc(var(--⅝fem) * 16);
	left: calc(var(--⅝fem) * -20);
	width: calc(var(--⅝fem) * 61);
	filter: brightness(0.4);
}

.sect-frontCpZ-Blog .gear-bg .gear-smallR {
	bottom: calc(var(--⅝fem) * 12.5);
	right: calc(var(--⅝fem) * -4);
	width: calc(var(--⅝fem) * 26);
	filter: brightness(0.3);
}

.sect-frontCpZ-Blog .gear-bg .gear-midR {
	bottom: calc(var(--⅝fem) * 3);
	right: calc(var(--⅝fem) * -12);
	width: calc(var(--⅝fem) * 43);
	filter: brightness(0.3);
}

.sect-frontCpZ-Blog .gear-bg .gear-bigR {
	bottom: calc(var(--⅝fem) * -6);
	right: calc(var(--⅝fem) * -20);
	width: calc(var(--⅝fem) * 61);
	filter: brightness(0.4);
}

/* カテゴリ Tile */
.sect-frontCpZ-Blog .cp-blog-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: calc(var(--⅝fem) * 0.625);
	margin-bottom: calc(var(--⅝fem) * 2.5);
}

.sect-frontCpZ-Blog .cp-cat {
	position: relative;
	padding: calc(var(--⅝fem) * 1.125);
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: calc(var(--⅝fem) * 0.375);
	transition: border-color .25s ease;
}

.sect-frontCpZ-Blog .cp-cat::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 90% 0%, hsla(20, 80%, 30%, .18), transparent 60%);
	opacity: 0;
	z-index: -1;
	transition: opacity .25s ease;
}

.sect-frontCpZ-Blog .cp-cat:hover,
.sect-frontCpZ-Blog .cp-cat:focus-visible {
	border-color: var(--c-nixie-500);
}

.sect-frontCpZ-Blog .cp-cat:hover::before,
.sect-frontCpZ-Blog .cp-cat:focus-visible::before {
	opacity: 1;
}

.sect-frontCpZ-Blog .cp-cat-no {
	position: absolute;
	top: calc(var(--⅝fem) * 0.625);
	right: calc(var(--⅝fem) * 0.875);
	font-family: var(--ff-nixie);
	font-size: var(--fz-xs);
	color: var(--c-nixie-400);
	text-shadow: var(--glow-nixie-sm);
}

.sect-frontCpZ-Blog .cp-cat-label {
	font-style: italic;
	font-size: var(--fz-xxs);
	text-transform: uppercase;
	color: var(--c-nixie-400);
}

.sect-frontCpZ-Blog .cp-cat-jp {
	font-weight: 600;
	font-size: calc(var(--⅝fem) * 1.125);
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

.sect-frontCpZ-Blog .cp-cat-count {
	font-family: var(--ff-nixie);
	font-size: var(--fz-sm);
	color: var(--c-base-500, hsl(224, 6%, 53%));
	margin-top: calc(var(--⅝fem) * 0.25);
}

.sect-frontCpZ-Blog .cp-cat-count b {
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-sm);
	font-style: normal;
	font-size: calc(var(--⅝fem) * 0.875);
}

/* 最新記事リスト */
.sect-frontCpZ-Blog .cp-blog-posts {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--⅝fem) * 0.5);
}

.sect-frontCpZ-Blog .cp-post {
	display: grid;
	grid-template-columns: calc(var(--⅝fem) * 5.5) calc(var(--⅝fem) * 8.125) 1fr auto;
	gap: calc(var(--⅝fem) * 1.75);
	align-items: center;
	padding: calc(var(--⅝fem) * 1) calc(var(--⅝fem) * 1.125);
	border: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	transition: border-color .25s ease, transform .25s ease, background .25s ease;
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

.sect-frontCpZ-Blog .cp-post:hover,
.sect-frontCpZ-Blog .cp-post:focus-visible {
	border-color: var(--c-nixie-600);
	transform: translateX(calc(var(--⅝fem) * 0.1875));
}

.sect-frontCpZ-Blog .cp-post-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--ff-nixie);
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-sm);
}

.sect-frontCpZ-Blog .cp-post-date .y {
	font-size: var(--fz-xxs);
	opacity: .7;
}

.sect-frontCpZ-Blog .cp-post-date .d {
	font-size: calc(var(--⅝fem) * 1.75);
	margin-top: calc(var(--⅝fem) * 0.25);
}

.sect-frontCpZ-Blog .cp-post-cat {
	font-style: italic;
	font-size: var(--fz-xxs);
	text-transform: uppercase;
	color: var(--c-nixie-400);
}

.sect-frontCpZ-Blog .cp-post-body {
	display: flex;
	flex-direction: column;
	gap: calc(var(--⅝fem) * 0.25);
	min-width: 0;
}

.sect-frontCpZ-Blog .cp-post-title {
	font-weight: 600;
	font-size: calc(var(--⅝fem) * 1);
	color: var(--c-base-100, hsl(224, 6%, 93%));
	text-wrap: pretty;
}

.sect-frontCpZ-Blog .cp-post-ex {
	font-size: var(--fz-sm);
	color: var(--c-base-300, hsl(224, 6%, 74%));
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.sect-frontCpZ-Blog .cp-post-chev {
	color: var(--c-nixie-400);
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 1.125);
}

.sect-frontCpZ-Blog .cp-blog-empty {
	color: var(--c-base-300, hsl(224, 6%, 74%));
	text-align: center;
	padding: calc(var(--⅝fem) * 2.5) 0;
}




/* ============================================================
Phase 2 — Responsive overrides for Tools / Picks / Blog
SP（max-width: 743.9px）
━━━━━━━━━━━━━━━━━━━ */
@media screen and (max-width: 743.9px) {

	/* セクション head：CTA を kanji の下に縦積み */
	.pg-sarafrontcpz .cp-section-head_cta {
		grid-template-columns: 1fr;
		gap: calc(var(--⅝fem) * 1);
	}

	.pg-sarafrontcpz .cp-section-cta {
		justify-self: start;
	}

	/* Tools：6→2 列 */
	.sect-frontCpZ-Tools {
		padding: calc(var(--⅝fem) * 3.75) 0 calc(var(--⅝fem) * 2.5);
	}

	.sect-frontCpZ-Tools .cp-tools-wrap {
		padding: calc(var(--⅝fem) * 1.125);
	}

	.sect-frontCpZ-Tools .cp-tools-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sect-frontCpZ-Tools .cp-tool--lg,
	.sect-frontCpZ-Tools .cp-tool--md,
	.sect-frontCpZ-Tools .cp-tool--sm {
		grid-column: span 2;
		grid-row: span 1;
	}

	.sect-frontCpZ-Tools .cp-tool--lg .cp-tool-title {
		font-size: calc(var(--⅝fem) * 1.625);
	}

	.sect-frontCpZ-Tools .cp-tools-strip {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Picks：4→2 列 */
	.pg-sarafrontcpz .sect-frontCpZ-Picks {
		padding: calc(var(--⅝fem) * 3.75) 0 calc(var(--⅝fem) * 2.5);
	}

	.pg-sarafrontcpz .sect-frontCpZ-Picks .cp-picks-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(var(--⅝fem) * 0.75);
	}

	/* Blog：カテゴリ Tile 4→2、記事 grid を圧縮（カテゴリセル非表示） */
	.sect-frontCpZ-Blog {
		padding: calc(var(--⅝fem) * 3.75) 0 calc(var(--⅝fem) * 2.5);
	}

	.sect-frontCpZ-Blog .cp-blog-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.sect-frontCpZ-Blog .cp-post {
		grid-template-columns: calc(var(--⅝fem) * 4) 1fr auto;
		gap: calc(var(--⅝fem) * 0.5);
		padding: calc(var(--⅝fem) * 0.875);
	}

	.sect-frontCpZ-Blog .cp-post-cat-cell {
		display: none;
	}

	.sect-frontCpZ-Blog .cp-post-date .d {
		font-size: calc(var(--⅝fem) * 1.375);
	}
}




/* ============================================================
Phase 3 — Footer（footer-front.php）
既存 footer4efA.php とは別系統。TOP 専用の dark-fixed フッター
━━━━━━━━━━━━━━━━━━━ */
.cp-footer {
	margin-top: calc(var(--⅝fem) * 7.5);
	border-top: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	background: var(--primary-deep, hsl(224, 50%, 23%));
	position: relative;
	overflow: hidden;
	color: var(--c-base-100, hsl(224, 6%, 93%));
}

.cp-footer::before {
	/* huge faint glow in corner — A·Gear bookend */
	content: "";
	position: absolute;
	right: calc(var(--⅝fem) * -7.5);
	bottom: calc(var(--⅝fem) * -7.5);
	width: calc(var(--⅝fem) * 30);
	height: calc(var(--⅝fem) * 30);
	background: radial-gradient(circle, hsla(20, 80%, 30%, .10), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.cp-footer-gear {
	position: absolute;
	right: calc(var(--⅝fem) * -5);
	bottom: calc(var(--⅝fem) * -5);
	width: calc(var(--⅝fem) * 22.5);
	height: calc(var(--⅝fem) * 22.5);
	color: var(--c-base-a0\.5, hsla(224, 6%, 53%, 0.55));
	opacity: .25;
	pointer-events: none;
	z-index: 1;
}

.cp-footer-inner {
	position: relative;
	z-index: 2;
	max-width: calc(var(--⅝fem) * 77.5);
	margin: 0 auto;
	padding: calc(var(--⅝fem) * 3.75) calc(var(--⅝fem) * 2.5) calc(var(--⅝fem) * 2.5);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
	gap: calc(var(--⅝fem) * 3);
	align-items: start;
}

/* 左：ブランド */
.cp-footer-brand img {
	height: calc(var(--⅝fem) * 2);
	display: block;
}

.cp-footer-tag {
	margin: calc(var(--⅝fem) * 1) 0 0;
	font-style: italic;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-nixie-400);
}

.cp-footer-blurb {
	margin: calc(var(--⅝fem) * 0.875) 0 0;
	max-width: 32ch;
	font-size: var(--fz-sm);
	color: var(--c-base-500, hsl(224, 6%, 53%));
}

/* 中央：3 ナビカラム */
.cp-footer-col {
	display: flex;
	flex-direction: column;
	gap: calc(var(--⅝fem) * 0.625);
}

.cp-footer-col h4 {
	font-weight: 600;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-nixie-500);
	margin: 0 0 calc(var(--⅝fem) * 0.25);
	display: flex;
	align-items: center;
	gap: calc(var(--⅝fem) * 0.5);
}

.cp-footer-col h4::before {
	content: "";
	width: calc(var(--⅝fem) * 0.375);
	height: calc(var(--⅝fem) * 0.375);
	background: var(--c-nixie-500);
	box-shadow: var(--glow-nixie-sm);
	flex-shrink: 0;
}

.cp-footer-col a {
	font-size: var(--fz-sm);
	color: var(--c-base-300, hsl(224, 6%, 74%));
	padding: calc(var(--⅝fem) * 0.125) 0;
	transition: color .2s ease;
	text-decoration: none;
}

.cp-footer-col a:hover,
.cp-footer-col a:focus-visible {
	color: var(--c-nixie-300);
}

/* 右：Divergence Meter（コンパクト版） */
.cp-footer-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: calc(var(--⅝fem) * 0.75);
}

.cp-footer-meta .cp-footer-dvm {
	display: inline-flex;
	gap: calc(var(--⅝fem) * 0.25);
	font-family: var(--ff-nixie);
	font-size: calc(var(--⅝fem) * 1);
	color: var(--c-nixie-core);
	text-shadow: var(--glow-nixie-sm);
}

.cp-footer-meta .cp-footer-dvm .d {
	display: inline-grid;
	place-items: center;
	width: calc(var(--⅝fem) * 0.875);
	height: calc(var(--⅝fem) * 1.375);
	background: radial-gradient(ellipse at 50% 60%, hsla(20, 80%, 18%, .55), hsla(0, 0%, 0%, .85) 70%);
	border: calc(var(--⅝fem) * 0.0625) solid hsla(20, 80%, 40%, .35);
}

.cp-footer-meta .cp-footer-dvm .d.dot {
	width: calc(var(--⅝fem) * 0.375);
	background: transparent;
	border: none;
	color: var(--c-nixie-500);
}

.cp-footer-meta-label {
	font-style: italic;
	font-size: var(--fz-xxs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
}

/* 下：copyright + built-with */
.cp-footer-bottom {
	position: relative;
	z-index: 2;
	border-top: calc(var(--⅝fem) * 0.0625) solid var(--c-line);
	padding: calc(var(--⅝fem) * 1.125) calc(var(--⅝fem) * 2.5);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: calc(var(--⅝fem) * 1);
	font-style: italic;
	font-size: var(--fz-xs);
	text-transform: uppercase;
	color: var(--c-base-500, hsl(224, 6%, 53%));
}

.cp-footer-bottom a {
	color: var(--c-base-500, hsl(224, 6%, 53%));
	text-decoration: none;
	transition: color .2s ease;
}

.cp-footer-bottom a:hover,
.cp-footer-bottom a:focus-visible {
	color: var(--c-nixie-400);
}

.cp-footer-bottom .cp-footer-copy,
.cp-footer-bottom .cp-footer-built {
	display: inline-block;
}

/* Footer：印刷時は隠す（既存パターン踏襲） */
@media print {

	.cp-footer,
	.cp-footer-bottom {
		display: none;
	}
}

/* Footer SP（max-width: 743.9px） */
@media screen and (max-width: 743.9px) {
	.cp-footer {
		margin-top: calc(var(--⅝fem) * 5);
	}

	.cp-footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: calc(var(--⅝fem) * 2);
		padding: calc(var(--⅝fem) * 2.5) calc(var(--⅝fem) * 1.25) calc(var(--⅝fem) * 2);
	}

	.cp-footer-brand {
		grid-column: 1 / -1;
	}

	.cp-footer-meta {
		grid-column: 1 / -1;
		align-items: flex-start;
		margin-top: calc(var(--⅝fem) * 0.5);
	}

	.cp-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--⅝fem) * 0.5);
		padding: calc(var(--⅝fem) * 1) calc(var(--⅝fem) * 1.25);
	}

	.cp-footer-gear {
		right: calc(var(--⅝fem) * -7.5);
		bottom: calc(var(--⅝fem) * -7.5);
		width: calc(var(--⅝fem) * 17.5);
		height: calc(var(--⅝fem) * 17.5);
	}
}