/* page-why-japanese.css — Why Japanese? */

/* Head (黒帯 ネオン) */
.why-head {
	background:
		radial-gradient(ellipse at 80% 50%, rgba(255,46,77,0.18), transparent 50%),
		radial-gradient(ellipse at 20% 80%, rgba(0,184,212,0.15), transparent 50%),
		var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--xxl);
	position: relative;
	overflow: hidden;
	border-top: 1px solid rgba(0,184,212,0.3);
	border-bottom: 1px solid rgba(255,46,77,0.3);
}
.why-head::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(0,184,212,0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,184,212,0.08) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: radial-gradient(ellipse at 60% 50%, black 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at 60% 50%, black 20%, transparent 75%);
	pointer-events: none;
}
.why-head__corners {
	position: absolute; inset: 16px;
	pointer-events: none;
	color: var(--wp--preset--color--accent);
	z-index: 1;
}
.why-head__corners::before,
.why-head__corners::after,
.why-head__corners > span::before,
.why-head__corners > span::after {
	content: "";
	position: absolute;
	width: 22px; height: 22px;
	border: 1px solid currentColor;
	opacity: 0.7;
}
.why-head__corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.why-head__corners::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.why-head__corners > span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.why-head__corners > span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.why-head__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
.why-head__vertical {
	font-family: serif;
	font-size: clamp(1.1rem, 2.2vw, 1.6rem);
	font-weight: 700;
	color: var(--wp--preset--color--brand);
	writing-mode: vertical-rl;
	letter-spacing: 0.5em;
	margin: 0;
	align-self: start;
	text-shadow: 0 0 14px rgba(255,46,77,0.8), 0 0 30px rgba(255,46,77,0.5);
}
.why-head__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--md);
	text-shadow: 0 0 12px rgba(0,184,212,0.7);
}
.why-head__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 10vw, 7.5rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--base);
	margin: 0 0 var(--wp--preset--spacing--md);
	text-shadow: 0 0 22px rgba(0,184,212,0.5), 0 0 60px rgba(0,184,212,0.25);
}
.why-head__title .glitch-accent {
	color: var(--wp--preset--color--brand);
	text-shadow: 0 0 22px rgba(255,46,77,0.6), 0 0 60px rgba(255,46,77,0.3);
}
.why-head__lead {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--line);
	max-width: 40em;
	margin: 0;
	line-height: 1.6;
}
.why-head__lead em { color: var(--wp--preset--color--brand); font-style: normal; font-weight: 700; }
@media (min-width: 1025px) {
	.why-head__inner { grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--xl); }
}

/* Context (説明カード3つ並び) — 数字バナーの代わりに使う */
.why-context { background: var(--wp--preset--color--base); padding-block: var(--wp--preset--spacing--xxl); }
.why-context__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.why-context__list {
	list-style: none;
	margin: var(--wp--preset--spacing--xl) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
.why-context__item {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: var(--wp--preset--spacing--md);
}
.why-context__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--brand);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.why-context__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 var(--wp--preset--spacing--sm);
	text-transform: none;
}
.why-context__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	line-height: 1.8;
}
@media (min-width: 768px) {
	.why-context__list { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); }
}

/* Stats (Mega 数字 3つ並び) - 未使用、後方互換のため残す */
.why-stats { background: var(--wp--preset--color--base); padding-block: var(--wp--preset--spacing--xxl); }
.why-stats__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.why-stats__list {
	list-style: none;
	margin: var(--wp--preset--spacing--xl) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}
.why-stats__item {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--md);
}
.why-stats__big {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(4rem, 14vw, 9rem);
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--wp--preset--color--brand);
	margin: 0;
}
.why-stats__unit {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast);
	margin: var(--wp--preset--spacing--xs) 0;
}
.why-stats__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}
@media (min-width: 768px) {
	.why-stats__list { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--md); }
}

/* Compare (subs vs dub) */
.why-compare { background: var(--wp--preset--color--base-2); padding-block: var(--wp--preset--spacing--xxl); }
.why-compare__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.why-compare__split {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}
.why-compare__col {
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
}
.why-compare__col--dub { border-color: var(--wp--preset--color--brand); }
.why-compare__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.15em;
	margin: 0 0 var(--wp--preset--spacing--md);
}
.why-compare__tag--brand { color: var(--wp--preset--color--brand); }
.why-compare__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
}
.why-compare__points li {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink);
	padding-left: 1.5em;
	position: relative;
	line-height: 1.6;
}
.why-compare__col--subs .why-compare__points li::before {
	content: "×";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--ink-soft);
}
.why-compare__col--dub .why-compare__points li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand);
	font-weight: 700;
}
@media (min-width: 768px) {
	.why-compare__split { grid-template-columns: 1fr 1fr; }
}

/* Quality (machine TL vs pro dub) - 黒帯 */
.why-quality {
	background:
		radial-gradient(circle at 30% 50%, rgba(255,46,77,0.12), transparent 50%),
		var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-block: var(--wp--preset--spacing--xxl);
}
.why-quality__inner {
	max-width: var(--wp--style--global--wide-size, 1280px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--md);
}
.why-quality__split {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}
.why-quality__col {
	padding: var(--wp--preset--spacing--lg);
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.03);
}
.why-quality__col--good {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 30px rgba(0,184,212,0.15);
}
.why-quality__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-soft);
	letter-spacing: 0.15em;
	margin: 0 0 var(--wp--preset--spacing--md);
}
.why-quality__tag--brand {
	color: var(--wp--preset--color--accent);
	text-shadow: 0 0 10px rgba(0,184,212,0.6);
}
.why-quality__demo {
	font-family: serif;
	font-size: clamp(1.3rem, 3vw, 2rem);
	color: var(--wp--preset--color--base);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--md);
}
.why-quality__demo.glitch-static span {
	display: inline-block;
	color: var(--wp--preset--color--brand);
	transform: translateY(-2px) translateX(1px);
	opacity: 0.85;
}
.why-quality__caption {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--line);
	margin: 0;
}
@media (min-width: 768px) {
	.why-quality__split { grid-template-columns: 1fr 1fr; }
}