/* =========================================================
   View Transitions（ページ間遷移）
   対応ブラウザ（Chrome 126+ 等）では、/service/ → /about/ のような
   ページ移動がクロスフェードになる。未対応ブラウザは通常の遷移に
   自動でフォールバックするため、分岐コードは不要。
   ========================================================= */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: unipeace-vt-out .35s var(--ease) both;
}
::view-transition-new(root) {
	animation: unipeace-vt-in .4s var(--ease) both;
}
@keyframes unipeace-vt-out {
	to { opacity: 0; transform: translateY(-8px); }
}
@keyframes unipeace-vt-in {
	from { opacity: 0; transform: translateY(10px); }
}

/* ヘッダーはページをまたいで同じ要素として扱い、チラつきなく固定され続けているように見せる */
.site-header { view-transition-name: unipeace-header; }
::view-transition-image-pair(unipeace-header) { animation: none; }
::view-transition-old(unipeace-header),
::view-transition-new(unipeace-header) { animation: none; mix-blend-mode: normal; }

/* =========================================================
   UNIPEACE — design tokens
   ========================================================= */
:root {
	/* 背景は段階を明確につける。差が小さいとセクションの区切りが認識できない。 */
	--bg:        #07080e;
	--bg-2:      #0d0f17;
	--bg-3:      #141824;

	/*
	 * 文字色は暗い背景では明るめに振る。
	 * 以前の --fg-dim (#9aa4b8) は本文に使うとコントラストが足りず読みにくかった。
	 */
	--fg:        #f4f6fb;
	--fg-dim:    #bcc5d8;
	--fg-faint:  #8b95ab;

	--line:      rgba(255,255,255,.10);
	--line-2:    rgba(255,255,255,.20);

	/* アクセントは抑えたプロフェッショナルグリーン1色を主役にする。 */
	--neon:      #22c55e;
	--neon-2:    #14b8a6;
	--up:        #34d399;

	/* テキストに乗せるグラデは2色まで。3色だと読みにくくなる。 */
	--grad:      linear-gradient(95deg, var(--neon) 0%, var(--neon-2) 100%);

	--r-sm: 8px;
	--r:    14px;
	--r-lg: 22px;

	--pad:  clamp(20px, 5vw, 40px);
	/* 記事本文は .entry__body 側で 760px に絞るため、ここは一覧やカードの器として広めに取る */
	--maxw: 1280px;

	--ease: cubic-bezier(.22,1,.36,1);
}

/* =========================================================
   base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
	-webkit-text-size-adjust: 100%;
}

/*
 * 横方向のはみ出しを止める。.orbit__ring は円だが回転しているため、
 * レイアウト上の外接矩形が約 1.41 倍に広がり、見た目は変わらないのに
 * 横スクロールが発生していた。clip は hidden と違いスクロールコンテナを
 * 作らないので、position: sticky を壊さない。
 */
html { overflow-x: clip; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	/*
	 * 日本語はウェブフォントを使わず OS 標準の書体に任せる。
	 * Noto Sans JP を4ウェイト読み込んでいた頃は Google Fonts だけで
	 * 約120KiB・1.5秒のレンダリングブロックになっていた。
	 * macOS/iOS は Hiragino Sans、Windows は Yu Gothic、Android は
	 * 端末内の Noto Sans JP が当たるため、品質は保てる。
	 * 欧文だけ Inter をウェブフォントで読み込む（Latin のみで軽い）。
	 */
	font-family: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", Meiryo,
		system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.9;
	font-feature-settings: "palt" 1;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/*
 * グリッドは .flowbg__grid に一本化した。以前はここで
 * 画面上部だけにマスクしていたため、ヒーローを過ぎると全面が
 * ただの黒になり、下のセクションが浮いて見えていた。
 */

img, svg, canvas, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--neon); color: #04060b; }

.container {
	width: min(100% - var(--pad) * 2, var(--maxw));
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.grad {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--neon);
	color: #04060b;
	padding: 10px 18px;
	z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
	outline: 2px solid var(--neon);
	outline-offset: 3px;
	border-radius: 4px;
}

/* 粒状ノイズ */
.grain {
	position: fixed;
	inset: -50%;
	z-index: 2;
	pointer-events: none;
	opacity: .16;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
	animation: grain 7s steps(6) infinite;
	mix-blend-mode: overlay;
}
@keyframes grain {
	0%   { transform: translate(0,0); }
	20%  { transform: translate(-3%, 2%); }
	40%  { transform: translate(2%, -3%); }
	60%  { transform: translate(-2%, -2%); }
	80%  { transform: translate(3%, 1%); }
	100% { transform: translate(0,0); }
}

/* =========================================================
   header / nav
   ========================================================= */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: border-color .4s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck { border-bottom-color: var(--line); }

/*
 * ぼかしは必ずこの疑似要素側に持たせること。
 * .site-header 自身に backdrop-filter を付けると、ヘッダーが position:fixed な
 * 子孫の含有ブロックになってしまい、全画面メニュー（.nav の inset:0）が
 * ヘッダーの高さの中に閉じ込められて表示が壊れる。
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(5,6,10,.72);
	backdrop-filter: blur(14px) saturate(150%);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s var(--ease);
}
.site-header.is-stuck::before { opacity: 1; }

.site-header__inner {
	position: relative;
	z-index: 1;
	width: min(100% - var(--pad) * 2, var(--maxw));
	margin-inline: auto;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.site-header__progress {
	height: 2px;
	background: var(--grad);
	transform-origin: 0 50%;
	transform: scaleX(var(--p, 0));
	transition: transform .1s linear;
}
/*
 * scroll-driven animation に対応しているブラウザでは、ページ全体の
 * スクロール量にそのまま連動する CSS ネイティブのアニメーションに
 * 差し替える。JS の scroll リスナーより滑らかで、メインスレッドの
 * 負荷もかからない。未対応ブラウザは上の JS 制御（--p 変数）のまま。
 */
@supports (animation-timeline: scroll()) {
	.site-header__progress {
		transform: scaleX(0);
		transition: none;
		animation: unipeace-scroll-progress linear;
		animation-timeline: scroll(root);
	}
	@keyframes unipeace-scroll-progress {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; }
/*
 * 旧サイト（Framer版）のロゴが一貫して六角形のアウトラインだったため、
 * 単色の四角マークではなく同じ六角形のシルエットを踏襲している。
 * clip-path を二重に重ねて「線だけ」のリングを作る。
 */
.brand__mark {
	position: relative;
	width: 22px; height: 22px;
	filter: drop-shadow(0 0 8px rgba(34,197,94,.55));
}
/*
 * 光る演出は子要素 <i> に持たせる。以前は .brand__mark 自体の box-shadow を
 * animate していたが、box-shadow は GPU で合成できず毎フレーム描画し直しに
 * なるため、opacity と transform だけで同じ見え方を作っている。
 * ::before / ::after は六角形の描画で使用済みなので子要素を足している。
 */
.brand__mark > i {
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(34,197,94,.5), transparent 70%);
	animation: pulse 3.4s var(--ease) infinite;
	pointer-events: none;
	z-index: -1;
}
.brand__mark::before,
.brand__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.brand__mark::before { background: var(--grad); }
.brand__mark::after {
	inset: 2.5px;
	background: var(--bg);
	clip-path: polygon(50% 4%, 91% 27%, 91% 73%, 50% 96%, 9% 73%, 9% 27%);
}
@keyframes pulse {
	0%, 100% { opacity: .55; transform: scale(1); }
	50%      { opacity: 1;   transform: scale(1.18); }
}
.brand__text { font-size: 17px; }
.brand img { max-height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__list a {
	font-size: 14px;
	color: var(--fg-dim);
	position: relative;
	transition: color .3s var(--ease);
	padding: 4px 0;
}
.nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--grad);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .4s var(--ease);
}
.nav__list a:hover { color: var(--fg); }
.nav__list a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

.burger {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: transparent;
	position: relative;
	cursor: pointer;
}
.burger span {
	position: absolute;
	left: 11px;
	width: 18px; height: 1.5px;
	background: var(--fg);
	transition: transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* =========================================================
   buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	border: 1px solid var(--line-2);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
	white-space: nowrap;
}
.btn svg {
	width: 16px; height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .4s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
	background: var(--grad);
	color: #04060b;
	border-color: transparent;
	box-shadow: 0 10px 34px -12px rgba(34,197,94,.75);
}
.btn--primary::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(95deg, var(--neon-2), var(--neon));
	opacity: 0;
	transition: opacity .45s var(--ease);
}
.btn--primary:hover::before { opacity: 1; }

.btn--ghost { color: var(--fg-dim); }
.btn--ghost:hover { color: var(--fg); border-color: var(--neon); }

.btn--sm { padding: 10px 20px; font-size: 13px; }
.btn--lg { padding: 18px 34px; font-size: 15px; }

/* =========================================================
   hero
   ========================================================= */
/*
 * モックアップを内包するので 100svh の縦センタリングはやめる。
 * 画面を埋めるのは高さではなく中身。
 */
.hero {
	position: relative;
	padding: 150px 0 clamp(70px, 9vw, 110px);
	overflow: hidden;
}
.hero__scroll { display: none; }
.hero__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .55;
	z-index: 0;
}
.hero__glow {
	position: absolute;
	left: 50%; top: -18%;
	width: 900px; aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(20,184,166,.22) 0%, rgba(34,197,94,.12) 38%, transparent 68%);
	filter: blur(30px);
	z-index: 0;
	animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
	from { transform: translate(-52%, -4%) scale(1); }
	to   { transform: translate(-48%, 4%) scale(1.12); }
}
.hero__inner { max-width: 900px; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--fg-dim);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 7px 16px;
	background: rgba(255,255,255,.02);
	backdrop-filter: blur(6px);
	margin-bottom: 26px;
}
.eyebrow__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--neon);
	box-shadow: 0 0 10px var(--neon);
	animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }

.hero__title {
	font-size: clamp(38px, 7.4vw, 88px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.035em;
	margin-bottom: 28px;
}
.hero__title .line { display: block; }

.hero__lead {
	font-size: clamp(15px, 1.6vw, 18px);
	color: var(--fg-dim);
	max-width: 62ch;
	margin-bottom: 40px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 64px; }

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 6vw, 64px);
	padding-top: 32px;
	border-top: 1px solid var(--line);
}
.stat dt { font-size: 12px; color: var(--fg-faint); letter-spacing: .08em; margin-bottom: 2px; }
.stat dd {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}
.stat .unit { font-size: 14px; font-weight: 600; color: var(--neon); }

/* ---------------------------------------------------------
   ヒーローの製品UIモックアップ
   --------------------------------------------------------- */
.hero__visual {
	margin-top: clamp(48px, 7vw, 84px);
	perspective: 1600px;
}
/*
 * .mock が画面を通り過ぎる間、スクロール量に応じてわずかに拡大しながら
 * 傾きが戻っていく視差効果。IntersectionObserver による初回のフェード
 * イン（.reveal）とは別レイヤーで、スクロールし続ける限り効き続ける。
 */
@supports (animation-timeline: view()) {
	.mock {
		animation: unipeace-mock-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 40%;
	}
	@keyframes unipeace-mock-parallax {
		from { transform: rotateX(11deg) scale(.96); }
		to   { transform: rotateX(7deg) scale(1); }
	}
}
.mock {
	border: 1px solid var(--line-2);
	border-radius: clamp(12px, 1.4vw, 18px);
	background: linear-gradient(168deg, #161b27, #0c0f18);
	overflow: hidden;
	box-shadow:
		0 60px 120px -60px rgba(34,197,94,.55),
		0 0 0 1px rgba(255,255,255,.03) inset;
	transform: rotateX(7deg) translateZ(0);
	transform-origin: 50% 0;
}
.mock__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	background: rgba(255,255,255,.035);
}
.mock__bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.mock__bar span:first-child { background: rgba(34,197,94,.75); }
.mock__bar em {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--fg-faint);
}

.mock__body { display: flex; }
.mock__side {
	flex: none;
	width: 58px;
	border-right: 1px solid var(--line);
	padding: 18px 0;
	display: grid;
	gap: 12px;
	justify-items: center;
	align-content: start;
	background: rgba(0,0,0,.2);
}
.mock__side i {
	width: 22px;
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,.12);
}
.mock__side i.is-on { background: var(--neon); box-shadow: 0 0 12px rgba(34,197,94,.7); }

.mock__main { flex: 1; padding: clamp(16px, 2.4vw, 26px); min-width: 0; }

.mock__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(10px, 1.6vw, 18px);
	margin-bottom: clamp(16px, 2.2vw, 24px);
}
.mock__kpi {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: clamp(12px, 1.6vw, 16px);
	background: rgba(255,255,255,.028);
}
/*
 * 直接の子だけに限定すること。単に `.mock__kpi span` にすると
 * <strong> の中のカウントアップ用 .num まで block になり、
 * 「¥ / 48 / .2M」と数値が3行に割れる。
 */
.mock__kpi > span {
	display: block;
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--fg-faint);
	margin-bottom: 6px;
	line-height: 1.4;
}
.mock__kpi strong .num { display: inline; }
.mock__kpi strong {
	display: block;
	font-size: clamp(16px, 2vw, 26px);
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	/* 「¥ / 48 / .2M」のように数字が途中で折り返すのを防ぐ */
	white-space: nowrap;
}
.mock__kpi em {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
}
.mock__kpi em.up { color: var(--up); }

.mock__chart svg { width: 100%; height: clamp(110px, 16vw, 190px); overflow: visible; }
.mock__grid line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.mock__line {
	fill: none;
	stroke: var(--neon);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 9px rgba(34,197,94,.65));
	stroke-dasharray: 1200;
	stroke-dashoffset: 1200;
}
.mock__area { opacity: 0; }
.is-visible .mock__line { animation: draw 2.2s var(--ease) .35s forwards; }
.is-visible .mock__area { animation: fadeIn 1s ease 1.4s forwards; }

.mock__rows { margin-top: clamp(14px, 2vw, 20px); display: grid; gap: 9px; }
.mock__row { height: 7px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.mock__row i {
	display: block;
	height: 100%;
	/* 最終幅を width で確定させ、伸びる動きは scaleX で作る */
	width: var(--w);
	transform: scaleX(0);
	transform-origin: 0 50%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(34,197,94,.8), rgba(20,184,166,.5));
}
.is-visible .mock__row i { animation: barGrow 1.6s var(--ease) .6s forwards; }

/* ターミナル風のタイピング行。JS が data-lines を1文字ずつ流し込む。 */
.mock__terminal {
	margin-top: clamp(14px, 2vw, 20px);
	padding-top: clamp(12px, 1.6vw, 16px);
	border-top: 1px solid var(--line);
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 12.5px;
	color: var(--fg-dim);
	white-space: nowrap;
	overflow: hidden;
}
.mock__prompt { color: var(--neon); flex: none; }
.mock__typed { overflow: hidden; text-overflow: ellipsis; }
.mock__cursor {
	display: inline-block;
	width: 7px; height: 14px;
	background: var(--neon);
	flex: none;
	animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 10px;
	letter-spacing: .3em;
	color: var(--fg-faint);
	z-index: 1;
}
.hero__scroll span {
	width: 1px; height: 44px;
	background: linear-gradient(var(--neon), transparent);
	animation: scrollline 2.2s var(--ease) infinite;
}
@keyframes scrollline {
	0%   { transform: scaleY(0); transform-origin: 0 0; }
	45%  { transform: scaleY(1); transform-origin: 0 0; }
	55%  { transform: scaleY(1); transform-origin: 0 100%; }
	100% { transform: scaleY(0); transform-origin: 0 100%; }
}

/* =========================================================
   marquee
   ========================================================= */
.marquee {
	border-block: 1px solid var(--line);
	background: rgba(255,255,255,.015);
	overflow: hidden;
	padding: 16px 0;
	position: relative;
	z-index: 1;
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
	display: flex;
	align-items: center;
	gap: 22px;
	width: max-content;
	animation: marquee 38s linear infinite;
}
.marquee__track span {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fg-faint);
	white-space: nowrap;
}
.marquee__track i { color: var(--neon); font-size: 8px; font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* =========================================================
   sections
   ========================================================= */
/* 余白は詰める。以前は間延びして黒い空白ばかりが目立っていた。 */
.section {
	padding: clamp(72px, 8.5vw, 112px) 0;
	position: relative;
	z-index: 1;
}
/*
 * セクションの切り替わり。以前は不透明な背景色と上下の境界線で
 * はっきり区切っていたが、それが「箱の積み重ね」に見える原因だった。
 * 半透明の面を敷き、上下端を mask でフェードさせて、隣のセクションと
 * 溶け合うようにしている。背景の .flowbg はそのまま透けて見える。
 */
.section--alt {
	background: linear-gradient(180deg,
		rgba(13,15,23,0) 0%,
		rgba(13,15,23,.72) 18%,
		rgba(13,15,23,.72) 82%,
		rgba(13,15,23,0) 100%);
}
/* 継ぎ目に置く髪の毛のような線。中央だけ見えて両端は消える */
.section--alt::before,
.section--alt::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
	opacity: .5;
}
.section--alt::before { top: 0; }
.section--alt::after { bottom: 0; }

.section__head { max-width: 780px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.section__head--row {
	max-width: none;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.section__title {
	font-size: clamp(28px, 4.4vw, 50px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.24;
	margin-bottom: 20px;
}
.section__lead { color: var(--fg-dim); font-size: clamp(15px, 1.4vw, 17px); max-width: 64ch; }

/* =========================================================
   cards
   ========================================================= */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 18px;
	perspective: 1200px;
}
/* 面としてはっきり浮かせる。背景との差が小さいとカードだと認識されない。 */
.card {
	position: relative;
	padding: 32px 28px 28px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-3);
	overflow: hidden;
	transition: border-color .45s var(--ease), transform .45s var(--ease);
}
.card::before {
	/* カーソル追従のスポットライト */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(34,197,94,.14), transparent 60%);
	opacity: 0;
	transition: opacity .45s var(--ease);
	pointer-events: none;
}
.card:hover { border-color: var(--line-2); transform: translateY(-5px); }
.card:hover::before { opacity: 1; }

/*
 * .tilt: JS がマウス位置から --rx / --ry（傾き角）を計算して当てる。
 * hover の translateY と衝突しないよう、tilt 中は hover 側の transform を上書きする。
 */
.card.tilt {
	transform-style: preserve-3d;
	transition: transform .5s var(--ease), border-color .45s var(--ease);
}
.card.tilt:hover {
	transform: translateY(-5px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) scale(1.015);
}
.card.tilt::after {
	/* 傾きに合わせて動く光沢。奥行きの錯覚を強める。 */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, rgba(255,255,255,.08) 0%, transparent 35%);
	opacity: 0;
	transition: opacity .4s var(--ease);
	pointer-events: none;
	transform: translateZ(1px);
}
.card.tilt:hover::after { opacity: 1; }

.card__no {
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--neon);
	display: block;
	margin-bottom: 18px;
}
.card__title {
	font-size: 21px;
	margin-bottom: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.card__title small { font-size: 12px; font-weight: 600; color: var(--fg-faint); letter-spacing: .08em; }
.card__body { font-size: 14.5px; color: var(--fg-dim); margin-bottom: 22px; }
.card__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.card__tags li {
	font-size: 11.5px;
	padding: 5px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--fg-faint);
}

/* =========================================================
   plans（購入できるパッケージ）
   ========================================================= */
/*
 * 料金プランは6枚。auto-fill だと画面幅によって4列になり、
 * 2行目が2枚だけになって右側に空白ができる。6は3でも2でも割り切れるので、
 * 列数を明示して 3x2 か 2x3 のどちらかに必ず収める。
 */
.plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}
@media (min-width: 1000px) {
	.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.plans { grid-template-columns: minmax(0, 1fr); }
}

.plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--bg-3);
	transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.plan:hover { border-color: var(--line-2); transform: translateY(-4px); }

/* 推しプランはアクセント色の枠で1枚だけ目立たせる */
.plan--featured {
	border-color: rgba(34,197,94,.5);
	box-shadow: 0 30px 70px -50px rgba(34,197,94,.8);
}
.plan__badge {
	position: absolute;
	top: -11px;
	left: 26px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--grad);
	color: #04060b;
}

.plan__cat {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--neon);
	margin-bottom: 12px;
}
.plan__title { font-size: 20px; margin-bottom: 10px; }
.plan__summary {
	font-size: 14px;
	color: var(--fg-dim);
	line-height: 1.75;
	margin-bottom: 20px;
}

.plan__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.plan__yen { font-size: 18px; font-weight: 700; }
.plan__amount {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
/* 金額未確定のときは数字より小さく、目立たせすぎない */
.plan__amount--tbd { font-size: 21px; color: var(--fg-dim); }
/* 「広告費の15%」のような数式表示は文字数が長いので、金額より一段小さくする */
.plan__amount--formula { font-size: 24px; }
.plan__unit { font-size: 12px; color: var(--fg-faint); margin-left: 2px; }

.plan__lead {
	font-size: 12px;
	color: var(--fg-faint);
	margin-top: 4px;
	margin-bottom: 20px;
}

.plan__items {
	display: grid;
	gap: 10px;
	margin-bottom: 26px;
}
.plan__items li {
	position: relative;
	padding-left: 24px;
	font-size: 13.5px;
	color: var(--fg-dim);
	line-height: 1.65;
}
.plan__items li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 6px;
	height: 3px;
	border-left: 1.5px solid var(--neon);
	border-bottom: 1.5px solid var(--neon);
	transform: rotate(-45deg);
}

/* ボタンはカード下端に揃える */
.plan__cta {
	margin-top: auto;
	justify-content: center;
	width: 100%;
}

.plans__note {
	margin-top: 26px;
	font-size: 12.5px;
	color: var(--fg-faint);
	line-height: 1.9;
}

/* =========================================================
   split / accordion / panel
   ========================================================= */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}
.split--rev .orbit { order: 2; }

.acc {
	border-bottom: 1px solid var(--line);
	padding: 4px 0;
}
.acc summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	transition: color .3s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc__num { font-size: 11px; letter-spacing: .18em; color: var(--neon); }
.acc__title { font-size: 17px; font-weight: 700; flex: 1; }
.acc__icon {
	width: 20px; height: 20px;
	position: relative;
	flex: none;
	border: 1px solid var(--line-2);
	border-radius: 50%;
}
.acc__icon::before, .acc__icon::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 9px; height: 1px;
	background: var(--fg-dim);
	transform: translate(-50%, -50%);
	transition: transform .4s var(--ease), background .3s;
}
.acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc[open] .acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc[open] .acc__icon { border-color: var(--neon); }
.acc[open] .acc__icon::before, .acc[open] .acc__icon::after { background: var(--neon); }
.acc__body {
	padding: 0 0 22px 40px;
	color: var(--fg-dim);
	font-size: 14.5px;
	animation: accIn .5s var(--ease);
}
@keyframes accIn { from { opacity: 0; transform: translateY(-6px); } }

.panel {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
	overflow: hidden;
	box-shadow: 0 40px 90px -50px rgba(34,197,94,.5);
}
.panel__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	background: rgba(255,255,255,.025);
}
.panel__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.panel__bar span:first-child { background: rgba(244,114,182,.7); }
.panel__bar em {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--fg-faint);
}
.panel__body { padding: 26px 24px 22px; }

.metric { margin-bottom: 22px; }
.metric__label { font-size: 11.5px; letter-spacing: .12em; color: var(--fg-faint); text-transform: uppercase; }
.metric__value {
	display: block;
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	margin: 2px 0 10px;
}
.metric__value.up   { color: var(--up); }
.metric__value.down { color: var(--neon); }
.bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar i {
	display: block;
	height: 100%;
	/* 最終幅を width で確定させ、伸びる動きは scaleX で作る */
	width: var(--w);
	transform: scaleX(0);
	transform-origin: 0 50%;
	border-radius: inherit;
	background: var(--grad);
}
.is-visible .bar i { animation: barGrow 1.4s var(--ease) forwards; }
/*
 * width ではなく scaleX で伸ばす。width の animate は合成できず、
 * 毎フレームレイアウトが走る。transform-origin を左にして同じ見え方にする。
 */
@keyframes barGrow { to { transform: scaleX(1); } }

.spark { margin: 26px 0 14px; }
.spark svg { width: 100%; height: 90px; overflow: visible; }
.spark__line {
	fill: none;
	stroke: var(--neon);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 7px rgba(34,197,94,.7));
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
}
.spark__area { opacity: 0; }
.is-visible .spark__line { animation: draw 2s var(--ease) .2s forwards; }
.is-visible .spark__area { animation: fadeIn .9s ease 1.1s forwards; }
@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

.panel__note { font-size: 11.5px; color: var(--fg-faint); line-height: 1.7; }

/* =========================================================
   ticks
   ========================================================= */
.ticks { margin-top: 32px; display: grid; gap: 14px; }
.ticks li {
	position: relative;
	padding-left: 32px;
	font-size: 15px;
	color: var(--fg-dim);
}
.ticks li::before {
	content: "";
	position: absolute;
	left: 0; top: 10px;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 1px solid var(--neon);
	box-shadow: 0 0 12px rgba(34,197,94,.4) inset;
}
.ticks li::after {
	content: "";
	position: absolute;
	left: 5px; top: 14px;
	width: 6px; height: 3px;
	border-left: 1.5px solid var(--neon);
	border-bottom: 1.5px solid var(--neon);
	transform: rotate(-45deg);
}

/* =========================================================
   orbit
   ========================================================= */
.orbit {
	position: relative;
	aspect-ratio: 1;
	max-width: 440px;
	margin-inline: auto;
	width: 100%;
	display: grid;
	place-items: center;
}
.orbit__core {
	position: relative;
	z-index: 2;
	width: 128px; height: 128px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	background: radial-gradient(circle at 30% 25%, rgba(34,197,94,.3), rgba(20,184,166,.18));
	border: 1px solid var(--line-2);
	box-shadow: 0 0 60px -10px rgba(34,197,94,.6);
	backdrop-filter: blur(6px);
}
.orbit__ring {
	position: absolute;
	border: 1px solid var(--line);
	border-radius: 50%;
	animation: spin linear infinite;
}
.orbit__ring--1 { inset: 24%; animation-duration: 16s; }
.orbit__ring--2 { inset: 12%; animation-duration: 26s; animation-direction: reverse; }
.orbit__ring--3 { inset: 0;   animation-duration: 36s; }
.orbit__ring span {
	position: absolute;
	top: -13px; left: 50%;
	transform: translateX(-50%);
	width: 26px; height: 26px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	border-radius: 50%;
	background: var(--bg-3);
	border: 1px solid var(--neon);
	color: var(--neon);
	box-shadow: 0 0 14px rgba(34,197,94,.5);
	/*
	 * ラベルはリングと逆向きに回して、常に正立させる。
	 * transform ではなく独立した rotate プロパティを使うのが要点。
	 * transform で回すと translateX(-50%) の中央寄せが上書きされ、
	 * 移動と回転が混ざってラベルが傾いてしまう。
	 */
	animation: orbit-label-ccw linear infinite;
	animation-duration: inherit;
}
/* 逆回転のリング（--2）のラベルだけ、打ち消す向きを反転させる */
.orbit__ring--2 span { animation-name: orbit-label-cw; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes orbit-label-ccw { to { rotate: -360deg; } }
@keyframes orbit-label-cw  { to { rotate: 360deg; } }

/* =========================================================
   steps
   ========================================================= */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}
/* #maker セクション内の「ものづくりの流れ」用に、split の下へ余白を空けて続ける */
.steps--maker { margin-top: clamp(40px, 6vw, 64px); }
.step {
	background: var(--bg);
	padding: 34px 26px;
	position: relative;
	transition: background .45s var(--ease);
}
.step:hover { background: var(--bg-3); }
.step__no {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.04em;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: .55;
	display: block;
	margin-bottom: 14px;
}
.step__title { font-size: 17px; margin-bottom: 10px; }
.step__body { font-size: 14px; color: var(--fg-dim); }

/* =========================================================
   posts
   ========================================================= */
/* auto-fill（auto-fit ではない）。記事が1件のときにカードが全幅まで伸びるのを防ぐ。 */
/*
 * 記事カードは広い画面でも3列までにする。auto-fill のままだと4列になり、
 * 記事が3本のときに右端が1枠空いて間延びして見える。
 */
.posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}
@media (min-width: 1000px) {
	.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.post__thumb {
	aspect-ratio: 16 / 10;
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--line);
	margin-bottom: 16px;
	background: var(--bg-3);
}
.post__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease), filter .8s var(--ease);
	filter: saturate(.75) contrast(1.05);
}
.post__link:hover img { transform: scale(1.06); filter: saturate(1) contrast(1.05); }
/*
 * アイキャッチ未設定時の代替。グラデーションだけだと「画像が入っていない」
 * ように見えるため、細いグリッドを重ねて意図のあるビジュアルとして見せる。
 */
.post__thumb-ph {
	display: block;
	width: 100%; height: 100%;
	background:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
		radial-gradient(circle at 30% 25%, rgba(34,197,94,.26), transparent 55%),
		radial-gradient(circle at 75% 80%, rgba(20,184,166,.22), transparent 55%);
	background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
	transition: transform .8s var(--ease);
}
.post__link:hover .post__thumb-ph { transform: scale(1.06); }

/*
 * アイキャッチ未設定時に PHP 側（unipeace_post_cover_svg）が描くブランドカバー。
 * 記事 ID ごとに図形が変わるので、一覧に並べても同じ絵が続かない。
 */
.post__cover {
	display: block;
	width: 100%; height: 100%;
	transition: transform .8s var(--ease);
}
.post__link:hover .post__cover { transform: scale(1.04); }

/* 記事詳細の冒頭に敷く横長カバー */
.entry__cover { margin-bottom: clamp(30px, 4vw, 48px); }
.post__thumb--wide {
	aspect-ratio: 16 / 6.5;
	margin: 0;
	border-radius: calc(var(--r) * 1.4);
}
@media (max-width: 560px) {
	.post__thumb--wide { aspect-ratio: 16 / 9; border-radius: var(--r); }
}

.post__date {
	font-size: 12px;
	color: var(--fg-faint);
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}
.post__title {
	font-size: 17px;
	margin-top: 6px;
	transition: color .3s var(--ease);
}
.post__link:hover .post__title { color: var(--neon); }

/* =========================================================
   info table
   ========================================================= */
.info { border-top: 1px solid var(--line); }
.info__row {
	display: grid;
	/* 「インボイス登録番号」のような長い項目名でも折り返さない幅にしている */
	grid-template-columns: 210px 1fr;
	gap: 20px;
	padding: 22px 4px;
	border-bottom: 1px solid var(--line);
	transition: background .35s var(--ease);
}
.info__row:hover { background: rgba(255,255,255,.02); }
.info__row dt { font-size: 13px; color: var(--fg-faint); letter-spacing: .06em; }
.info__row dd { font-size: 15px; line-height: 1.8; }

/* =========================================================
   CTA
   ========================================================= */
.cta {
	position: relative;
	padding: clamp(90px, 13vw, 160px) 0;
	text-align: center;
	overflow: hidden;
	z-index: 1;
}
/* 直線で断ち切らず、中央だけ見える線でゆるく区切る */
.cta::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
	opacity: .5;
}
.cta__glow {
	position: absolute;
	left: 50%; bottom: -55%;
	width: 1100px; aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(34,197,94,.2), rgba(20,184,166,.1) 42%, transparent 68%);
	filter: blur(20px);
}
.cta__title {
	font-size: clamp(30px, 5.2vw, 60px);
	font-weight: 800;
	letter-spacing: -.035em;
	margin-bottom: 20px;
}
.cta__lead { color: var(--fg-dim); max-width: 56ch; margin: 0 auto 40px; }
.cta__note { font-size: 12px; color: var(--fg-faint); margin-top: 20px; }

/* =========================================================
   お問い合わせページ（/contact/）
   ページ全体は「フォーム本体」＋「補足情報のサイドバー」の 2 カラム。
   フォーム単体を置くと素人っぽく見えるため、返信目安・流れ・運営会社を
   隣に添えて「会社に問い合わせている」という文脈を作る。
   ========================================================= */
.contact { padding-top: clamp(40px, 6vw, 64px); }
.contact__layout {
	display: grid;
	/* フォーム側を広く取り、サイドバーは固定幅に近い比率にする */
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 48px);
	align-items: start;
}

/* ---- フォームを囲むパネル ---- */
.contact__main {
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * 1.6);
	padding: clamp(24px, 3.2vw, 44px);
	position: relative;
	overflow: hidden;
	text-align: left;
}
/* 上辺にブランドカラーのライン。パネルに「表」の向きを与える */
.contact__main::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: var(--grad);
	opacity: .85;
}

.cf__head {
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--line);
}
.cf__eyebrow {
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--neon);
	margin-bottom: 10px;
	font-weight: 600;
}
.cf__title {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	letter-spacing: -.02em;
	margin-bottom: 8px;
}
.cf__desc { font-size: 14px; color: var(--fg-dim); line-height: 1.75; }

/* ---- 入力欄のレイアウト ---- */
.cf__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 16px;
}
/* 指定のないフィールドは 1 行使う。--half のものだけ 2 列に並べる */
.cf__field { grid-column: 1 / -1; }
.cf__field--half { grid-column: span 1; }

.cf__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--fg);
	margin-bottom: 8px;
}
/* 必須・任意はテキストではなくバッジにして一目で分かるようにする */
.cf__req, .cf__opt {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 4px;
}
.cf__req {
	color: var(--neon);
	background: rgba(34,197,94,.12);
	border: 1px solid rgba(34,197,94,.32);
}
.cf__opt {
	color: var(--fg-faint);
	background: rgba(255,255,255,.04);
	border: 1px solid var(--line);
}
.cf__hint {
	display: block;
	font-size: 12px;
	color: var(--fg-faint);
	margin-top: 7px;
}

/* CF7 は入力欄を span.wpcf7-form-control-wrap で包むため幅を通す */
.contact__main .wpcf7-form-control-wrap { display: block; }

.contact__main input[type="text"],
.contact__main input[type="email"],
.contact__main input[type="tel"],
.contact__main textarea,
.contact__main select {
	width: 100%;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--r);
	color: var(--fg);
	padding: 13px 15px;
	font: inherit;
	font-size: 15px;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.contact__main ::placeholder { color: var(--fg-faint); opacity: 1; }
.contact__main textarea { min-height: 150px; resize: vertical; line-height: 1.8; }

/*
 * select を開いたときのネイティブなドロップダウン一覧は OS/ブラウザ側の描画で、
 * 背景は白になる。color: var(--fg) は明るい色なので、白背景の上では
 * 文字が見えなくなる。color-scheme: dark を指定すると、ブラウザが
 * フォームコントロールをダークテーマとして描画してくれる。
 */
.contact__main select { color-scheme: dark; cursor: pointer; }
/*
 * color-scheme: dark だけではブラウザによってはポップアップに反映されない
 * ことがあるため、option 自体にも明示的に色を指定して確実にする。
 */
.contact__main select option {
	background: #10131c;
	color: var(--fg);
}

/* フォーカスはリングで示す。枠色だけだと押した感が弱い */
.contact__main input:focus,
.contact__main textarea:focus,
.contact__main select:focus {
	border-color: var(--neon);
	box-shadow: 0 0 0 3px rgba(34,197,94,.15);
	background: var(--bg);
	outline: none;
}

/* ---- 送信ボタンと注意書き ---- */
.cf__foot {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}
.contact__main input[type="submit"] {
	width: 100%;
	background: var(--grad);
	color: #04060b;
	border: 0;
	border-radius: 999px;
	padding: 17px 40px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact__main input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -14px rgba(34,197,94,.9);
}
.contact__main input[type="submit"]:disabled { opacity: .6; cursor: progress; transform: none; }
.cf__privacy {
	font-size: 12px;
	line-height: 1.8;
	color: var(--fg-faint);
	margin-top: 16px;
	text-align: center;
}
.cf__privacy a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }
.cf__privacy a:hover { color: var(--neon); }

/* CF7 のバリデーションメッセージ */
.contact__main .wpcf7-not-valid { border-color: #f87171; }
.contact__main .wpcf7-not-valid-tip {
	font-size: 12px;
	color: #fca5a5;
	margin-top: 6px;
}
.contact__main .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: 13.5px;
	line-height: 1.7;
	background: rgba(255,255,255,.03);
}
.contact__main form.sent .wpcf7-response-output {
	border-color: rgba(34,197,94,.4);
	background: rgba(34,197,94,.08);
	color: #86efac;
}
.contact__main form.invalid .wpcf7-response-output,
.contact__main form.failed .wpcf7-response-output,
.contact__main form.spam .wpcf7-response-output {
	border-color: rgba(248,113,113,.4);
	background: rgba(248,113,113,.08);
	color: #fca5a5;
}

/*
 * ハニーポット欄。display:none だと一部のスパムボットが「非表示なら埋めない」
 * 判定をして回避してくることがあるため、画面外へ飛ばす方式にしている。
 */
.cf__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- サイドバー ---- */
/*
 * sticky にはしない。サイドバーが画面の高さより高い場合、追従させると
 * 下側のカードがスクロールしても出てこず読めなくなるため。
 */
.contact__side {
	display: grid;
	gap: 16px;
}
.contact__card {
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * 1.4);
	padding: 24px;
}
.contact__card-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .01em;
	margin-bottom: 16px;
}

/* 対応の流れ */
.contact__flow { list-style: none; display: grid; gap: 14px; }
.contact__flow li { display: flex; gap: 12px; align-items: flex-start; }
.contact__flow-no {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--neon);
	background: rgba(34,197,94,.1);
	border: 1px solid rgba(34,197,94,.28);
	border-radius: 6px;
	padding: 5px 7px;
	line-height: 1;
}
.contact__flow-body { font-size: 13px; line-height: 1.7; color: var(--fg-dim); }
.contact__flow-body strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fg);
	margin-bottom: 2px;
}

/* よくいただくご相談 */
.contact__list { list-style: none; display: grid; gap: 10px; }
.contact__list li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--fg-dim);
}
.contact__list li::before {
	content: "";
	position: absolute;
	left: 4px; top: .55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--neon);
	opacity: .7;
}
.contact__note {
	font-size: 12px;
	line-height: 1.75;
	color: var(--fg-faint);
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

/* 運営会社 */
.contact__company { font-size: 13.5px; font-weight: 700; line-height: 1.7; }
.contact__company span {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--fg-dim);
}
.contact__company-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--neon);
}
.contact__company-link::after {
	content: "→";
	transition: transform .3s var(--ease);
}
.contact__company-link:hover::after { transform: translateX(3px); }

/*
 * Contact Form 7 の既定マークアップ（<p><label>…<br>入力欄</label></p>）向けの
 * フォールバック。管理画面のフォーム定義を .cf__field 構成に更新する前でも
 * 崩れないよう、<p> 区切りのままでも読める体裁を確保しておく。
 */
.contact__main form > p {
	margin-bottom: 18px;
	text-align: left;
}
.contact__main form > p > label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 0;
}
.contact__main form > p > label > br { display: none; }
/* 既定マークアップのハニーポットも必ず画面外へ隠す */
.contact__main form > p:has(input[name="your-hp"]) {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* タブレット以下は 1 カラムにして、フォームを先に読ませる */
@media (max-width: 900px) {
	.contact__layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	/* 狭い画面では 2 列をやめ、1 項目ずつ縦に積む */
	.cf__grid { grid-template-columns: 1fr; gap: 16px; }
	.cf__field--half { grid-column: 1 / -1; }
	.contact__main { padding: 24px 20px 28px; border-radius: var(--r); }
	.contact__card { padding: 20px 18px; }
	/* iOS で入力時に画面がズームしないよう 16px を下回らせない */
	.contact__main input[type="text"],
	.contact__main input[type="email"],
	.contact__main input[type="tel"],
	.contact__main textarea,
	.contact__main select { font-size: 16px; }
}

/* =========================================================
   footer
   ========================================================= */
.site-footer {
	padding: 64px 0 28px;
	position: relative;
	z-index: 1;
	/* 不透明な板にせず、上に向かって消える面にして背景とつなぐ */
	background: linear-gradient(180deg, rgba(13,15,23,0), rgba(13,15,23,.85) 38%);
}
.site-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
	opacity: .5;
}
.site-footer__inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px 48px;
	flex-wrap: wrap;
	padding-bottom: 36px;
}
/*
 * ロゴマークと社名は .brand（inline-flex）にまとめてあるので、
 * ここでは縦の積み方だけを決める。以前は grid で mark と text を
 * 別セルに置いてしまい、タグラインの幅が1列目を広げて社名が
 * 右へ大きくずれていた。
 */
.site-footer__brand { display: grid; gap: 10px; max-width: 360px; }
/* フッターは背景色が --bg-2 なので、六角形の切り抜き色をそれに合わせる */
.site-footer__brand .brand__mark::after { background: var(--bg-2); }
.site-footer__tagline { font-size: 13px; color: var(--fg-faint); line-height: 1.7; }

/* リンクは3件程度なので、縦に間延びさせず横並びにする */
.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: flex-end;
}
.site-footer__list a { font-size: 14px; color: var(--fg-dim); transition: color .3s var(--ease); }
.site-footer__list a:hover { color: var(--neon); }
.site-footer__bottom {
	border-top: 1px solid var(--line);
	padding-top: 24px;
	color: var(--fg-faint);
	font-size: 12px;
}

/* =========================================================
   blog / single / page
   ========================================================= */
.page-hero {
	padding: 150px 0 clamp(40px, 7vw, 80px);
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.page-hero::after {
	content: "";
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
	opacity: .45;
}
/* トップのヒーローと世界観を揃えるための、下層ページ用の控えめなグロー */
.page-hero__glow {
	position: absolute;
	left: 50%;
	top: -60%;
	width: min(900px, 120%);
	aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(34,197,94,.16) 0%, rgba(20,184,166,.07) 40%, transparent 68%);
	filter: blur(26px);
	pointer-events: none;
}
.page-hero__title {
	font-size: clamp(28px, 4.6vw, 52px);
	font-weight: 800;
	letter-spacing: -.03em;
}
.page-hero__meta { color: var(--fg-faint); font-size: 13px; margin-top: 12px; letter-spacing: .06em; }

.entry {
	padding: clamp(50px, 8vw, 90px) 0 clamp(70px, 10vw, 120px);
	position: relative;
	z-index: 1;
}
.entry__body {
	width: min(100% - var(--pad) * 2, 760px);
	margin-inline: auto;
	font-size: 16.5px;
	color: #d5dce8;
}
.entry__body > * + * { margin-top: 1.5em; }

/*
 * 記事冒頭の1段落だけリード文として大きく見せ、本文への入りを作る。
 * :first-of-type ではなく最初の子要素に限定したいので :first-child を使う。
 */
.entry__body > p:first-child {
	font-size: 1.12em;
	line-height: 1.95;
	color: var(--fg);
	padding-left: 18px;
	border-left: 2px solid var(--neon);
}

/* 見出しは区切り線だけだと弱いので、番号インジケーター風の緑のマーカーを付ける */
.entry__body h2 {
	font-size: clamp(22px, 2.6vw, 30px);
	margin-top: 2.4em;
	padding-top: 1.1em;
	border-top: 1px solid var(--line);
	position: relative;
}
.entry__body h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	width: 48px;
	height: 2px;
	background: var(--grad);
}
.entry__body h3 {
	font-size: clamp(18px, 2vw, 22px);
	margin-top: 1.8em;
	padding-left: 14px;
	border-left: 2px solid var(--line-2);
}
.entry__body a { color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }
.entry__body ul, .entry__body ol { padding-left: 1.4em; }
.entry__body ul li { list-style: disc; }
.entry__body ol li { list-style: decimal; }
.entry__body li + li { margin-top: .5em; }
.entry__body img { border-radius: var(--r); border: 1px solid var(--line); }
.entry__body blockquote {
	border-left: 2px solid var(--neon);
	padding-left: 20px;
	color: var(--fg-dim);
	font-style: italic;
}
.entry__body code {
	background: rgba(255,255,255,.07);
	padding: 2px 7px;
	border-radius: 5px;
	font-size: .9em;
}
.entry__body pre {
	background: var(--bg-3);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
	overflow-x: auto;
}

/* 記事下部の前後ナビ。ボタン2つではなく、面のあるカードにして押しやすくする */
.entry-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	padding-bottom: clamp(60px, 9vw, 100px);
}
.entry-nav__link {
	display: grid;
	gap: 8px;
	padding: 22px 24px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--bg-3);
	transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.entry-nav__link:hover { border-color: var(--neon); transform: translateY(-3px); }
.entry-nav__link--next { text-align: right; }
.entry-nav__label {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--neon);
}
.entry-nav__title {
	font-size: 14.5px;
	color: var(--fg-dim);
	line-height: 1.7;
	transition: color .3s var(--ease);
}
.entry-nav__link:hover .entry-nav__title { color: var(--fg); }

/* 記事一覧の列数は .posts の共通ルール（最大3列）に従う */

.archive-list {
	padding: clamp(50px, 8vw, 90px) 0 clamp(70px, 10vw, 120px);
	position: relative;
	z-index: 1;
}

.pagination {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 14px;
	color: var(--fg-dim);
	transition: border-color .3s var(--ease), color .3s var(--ease);
}
.pagination .page-numbers:hover { border-color: var(--neon); color: var(--fg); }
.pagination .current { background: var(--grad); color: #04060b; border-color: transparent; font-weight: 700; }

.notfound { text-align: center; padding: 180px 0 140px; position: relative; z-index: 1; }
.notfound__code {
	font-size: clamp(80px, 18vw, 180px);
	font-weight: 800;
	letter-spacing: -.05em;
	line-height: 1;
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =========================================================
   reveal animation
   ========================================================= */
.reveal {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .9s var(--ease) var(--d, 0s),
		transform .9s var(--ease) var(--d, 0s);
	/*
	 * will-change は指定しない。46 要素すべてに常時付けると合成レイヤーが
	 * 作られ続けてメモリを食うだけで、一度きりのフェードには見合わない。
	 */
}
.reveal.is-visible { opacity: 1; transform: none; }

/* JS が動かない環境ではアニメーションを無効化して常に表示する */
.no-js .reveal { opacity: 1; transform: none; }

/*
 * ヒーロー内だけは JS を待たずに CSS アニメーションで登場させる。
 *
 * .reveal は IntersectionObserver が is-visible を付ける仕組みで、その JS は
 * フッターで読み込まれる。つまり画面を開いた瞬間に見えるべきヒーローの文字が
 * JS の実行完了を待ってから描画されていた。PageSpeed では LCP 要素が
 * .hero__lead と判定され、その「要素のレンダリングの遅延」が 1,370ms あった。
 * ここを CSS だけで動かし、段差も詰めて LCP を早める。
 */
.hero .reveal {
	transition: none;
	animation: unipeace-intro .55s var(--ease) both;
	/* 元の --d をそのまま使うと最大 0.55s 待つので、45% に圧縮する */
	animation-delay: calc(var(--d, 0s) * .45);
}
@keyframes unipeace-intro {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.no-js .hero .reveal { animation: none; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 900px) {
	.split { grid-template-columns: 1fr; }
	.split--rev .orbit { order: -1; }
	.info__row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 780px) {
	.burger { display: block; }

	.nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: 12px;
		background: rgba(5,6,10,.96);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
	}
	.nav.is-open { opacity: 1; visibility: visible; transform: none; }
	.nav__list { flex-direction: column; gap: 8px; text-align: center; }
	.nav__list a { font-size: 22px; font-weight: 700; color: var(--fg); }
	.nav__cta { margin-top: 20px; }
	.burger { position: relative; z-index: 101; }

	.hero { padding-top: 120px; }
	.hero__scroll { display: none; }
}

/* ---------------------------------------------------------
   スマートフォン（〜560px）
   実機幅で崩れやすい箇所をここでまとめて調整しています。
   --------------------------------------------------------- */
@media (max-width: 560px) {
	:root { --pad: 20px; }

	body { font-size: 15px; line-height: 1.8; }

	.site-header__inner { height: 62px; }
	html { scroll-padding-top: 74px; }

	/* ヘッダー内のCTAは狭いと窮屈なので、バーガーメニューの中だけに出す */
	.nav__cta { display: none; }
	.nav.is-open .nav__cta { display: inline-flex; }

	.hero {
		min-height: auto;
		padding: 112px 0 72px;
	}
	.hero__title {
		font-size: clamp(30px, 9.2vw, 42px);
		line-height: 1.18;
		letter-spacing: -.03em;
	}
	.hero__lead { font-size: 14.5px; margin-bottom: 30px; }
	.hero__actions {
		gap: 10px;
		margin-bottom: 44px;
	}
	/* ボタンは指で押しやすいよう全幅・高さ確保 */
	.hero__actions .btn,
	.contact__main .btn {
		width: 100%;
		justify-content: center;
		padding: 16px 22px;
	}

	/* 3つ横並びだと数字が潰れるので2列グリッドにする */
	.hero__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 16px;
		padding-top: 24px;
	}
	.stat dd { font-size: 26px; }

	.eyebrow { font-size: 10.5px; letter-spacing: .12em; padding: 6px 13px; margin-bottom: 20px; }

	.section { padding: 68px 0; }
	.section__head { margin-bottom: 34px; }
	.section__title { font-size: clamp(23px, 6.4vw, 30px); margin-bottom: 16px; }
	.section__lead { font-size: 14.5px; }

	/* 見出しの意図的な改行はスマホだと不自然に切れるので無効化 */
	.section__title br { display: none; }

	.cards { gap: 14px; }
	.card { padding: 26px 22px 24px; border-radius: var(--r); }
	.card__no { margin-bottom: 14px; }
	.card__title { font-size: 19px; }
	.card__body { font-size: 14px; margin-bottom: 18px; }

	.acc summary { padding: 18px 0; gap: 12px; }
	.acc__title { font-size: 15.5px; }
	.acc__body { padding-left: 0; font-size: 14px; }

	.panel { border-radius: var(--r); }
	.panel__body { padding: 20px 18px 18px; }
	.metric__value { font-size: 26px; }

	.ticks li { font-size: 14.5px; padding-left: 28px; }

	/* 円運動は狭い画面では主張が強すぎるので控えめに */
	.orbit { max-width: 260px; }
	.orbit__core { width: 96px; height: 96px; font-size: 10px; }

	.steps { border-radius: var(--r); }
	.step { padding: 26px 22px; }
	.step__no { font-size: 28px; margin-bottom: 10px; }

	.posts { gap: 20px; }
	.post__title { font-size: 16px; }

	.info__row { padding: 18px 2px; }

	.cta { padding: 76px 0; }
	.cta__title { font-size: clamp(26px, 7.6vw, 34px); }
	.cta__lead { font-size: 14.5px; margin-bottom: 30px; }

	.site-footer { padding: 48px 0 24px; }
	.site-footer__inner { gap: 26px; padding-bottom: 28px; }
	/* 画面が狭いときは右寄せをやめ、ブランドと同じ左揃えに戻す */
	.site-footer__list { justify-content: flex-start; gap: 10px 20px; }

	.page-hero { padding: 110px 0 40px; }
	.page-hero__title { font-size: clamp(24px, 6.8vw, 34px); }
	.entry__body { font-size: 15.5px; }
	.entry__body > p:first-child { font-size: 1.05em; padding-left: 14px; }
	.entry__body h2 { margin-top: 2em; }
	.entry-nav__link { padding: 18px 20px; }
	.entry-nav__link--next { text-align: left; }

	.plans { gap: 14px; }
	.plan { padding: 26px 22px 22px; border-radius: var(--r); }
	.plan__title { font-size: 18px; }
	.plan__amount { font-size: 28px; }
	.plan__amount--tbd { font-size: 19px; }
	.plan__items { gap: 8px; margin-bottom: 22px; }
	.plan__items li { font-size: 13px; }
	.plans__note { font-size: 11.5px; }

	/* モックアップはスマホでは要素を削って、図として読める最低限にする */
	.hero__visual { margin-top: 40px; }
	.mock { transform: none; border-radius: 12px; }
	.mock__side { display: none; }
	.mock__bar em { font-size: 9.5px; }
	.mock__kpis { gap: 7px; margin-bottom: 14px; }
	.mock__kpi { padding: 9px 8px; border-radius: 8px; }
	.mock__kpi > span { font-size: 8.5px; letter-spacing: .1em; }
	.mock__kpi strong { font-size: 15px; }
	.mock__kpi em { font-size: 9.5px; }
	.mock__chart svg { height: 96px; }

	/* ノイズとグリッドは低スペック端末で描画コストが高いので切る */
	.grain { display: none; }
	body::before { background-size: 44px 44px; opacity: .6; }
}

/* 横幅の狭い端末で横スクロールが出ないための保険 */
@media (max-width: 380px) {
	.marquee__track span { font-size: 12px; }
	.stat dd { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1; transform: none; transition: none; }
	.hero .reveal { animation: none !important; opacity: 1; transform: none; }
	.marquee__track,
	.orbit__ring,
	.orbit__ring span,
	.grain,
	.hero__glow,
	.hero__scroll span,
	.brand__mark,
	.eyebrow__dot { animation: none !important; }
	.spark__line { stroke-dashoffset: 0; }
	.spark__area { opacity: 1; }
	.bar i,
	.mock__row i { width: var(--w); transform: none; }
	/* 記事の横棒グラフは伸びる演出をやめ、確定幅で描く */
	.fig-bars__fill { animation: none !important; width: var(--w); }
	/*
	 * 背景の漂いとスクロール連動を止める。動きは消えるが、色の面と
	 * グリッドはそのまま残るので、ページ全体の一体感は保たれる。
	 */
	.flowbg__aurora,
	.flowbg__grid,
	.flowbg__vignette { animation: none !important; }
	.flowbg__vignette { opacity: 1; }
	.thread__line { animation: none !important; transform: none; }
	* { transition-duration: .01ms !important; }
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* =========================================================
   記事本文の図解パーツ（functions.php のショートコードが出力）
   ========================================================= */
.fig {
	margin: clamp(32px, 4vw, 48px) 0;
}
.fig__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--fg);
	margin-bottom: 16px;
	padding-left: 12px;
	border-left: 3px solid var(--neon);
	line-height: 1.5;
}
.fig__caption {
	font-size: 12px;
	line-height: 1.7;
	color: var(--fg-faint);
	margin-top: 14px;
}

/* ---- KPI ---- */
.fig-kpi__grid {
	display: grid;
	/* 項目数が変わっても均等に並ぶよう auto-fit で折り返す */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * 1.2);
	overflow: hidden;
}
.fig-kpi__cell {
	background: var(--bg-2);
	padding: 22px 20px;
	display: grid;
	gap: 8px;
	align-content: start;
}
.fig-kpi__value {
	font-size: clamp(24px, 3.4vw, 32px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	color: var(--neon);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.fig-kpi__label {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--fg-dim);
}

/* ---- 横棒グラフ ---- */
.fig-bars {
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * 1.2);
	padding: 24px;
}
.fig-bars .fig__title { margin-bottom: 20px; }
.fig-bars__list { display: grid; gap: 14px; }
.fig-bars__row {
	display: grid;
	grid-template-columns: minmax(84px, 30%) 1fr auto;
	align-items: center;
	gap: 14px;
}
.fig-bars__label {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fg-dim);
}
.fig-bars__track {
	height: 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
	overflow: hidden;
}
.fig-bars__fill {
	display: block;
	height: 100%;
	width: var(--w);
	border-radius: 999px;
	background: var(--grad);
}
.fig-bars__value {
	font-size: 13px;
	font-weight: 700;
	color: var(--fg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/*
 * スクロールで画面に入ったときにバーが伸びる。animation-timeline に
 * 対応しないブラウザでは最初から確定幅で表示されるので情報は欠けない。
 */
@supports (animation-timeline: view()) {
	.fig-bars__fill {
		animation: fig-bar-grow linear both;
		animation-timeline: view();
		animation-range: entry 15% cover 38%;
	}
	@keyframes fig-bar-grow {
		from { width: 0; }
		to   { width: var(--w); }
	}
}

/* ---- 手順 ---- */
.fig-steps__list { list-style: none; display: grid; gap: 2px; counter-reset: none; }
.fig-steps__item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	background: var(--bg-2);
	border: 1px solid var(--line);
	padding: 18px 20px;
}
/* 縦に連結して見せるため、隣接する枠線を重ねて角だけ丸める */
.fig-steps__item + .fig-steps__item { margin-top: -1px; }
.fig-steps__item:first-child { border-radius: calc(var(--r) * 1.2) calc(var(--r) * 1.2) 0 0; }
.fig-steps__item:last-child { border-radius: 0 0 calc(var(--r) * 1.2) calc(var(--r) * 1.2); }
.fig-steps__item:only-child { border-radius: calc(var(--r) * 1.2); }
.fig-steps__no {
	flex: none;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	color: var(--neon);
	background: rgba(34,197,94,.1);
	border: 1px solid rgba(34,197,94,.28);
	border-radius: 6px;
	padding: 6px 8px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.fig-steps__body { font-size: 14px; line-height: 1.8; color: var(--fg-dim); }
.fig-steps__body strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: var(--fg);
	margin-bottom: 3px;
}

/* ---- 注意書き ---- */
.fig-note {
	margin: clamp(28px, 3.4vw, 40px) 0;
	padding: 20px 22px;
	border: 1px solid rgba(34,197,94,.3);
	border-left-width: 3px;
	border-radius: 0 calc(var(--r) * 1.2) calc(var(--r) * 1.2) 0;
	background: rgba(34,197,94,.06);
}
.fig-note--warn {
	border-color: rgba(251,191,36,.32);
	background: rgba(251,191,36,.06);
}
.fig-note__title {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fg);
	margin-bottom: 8px;
	letter-spacing: .02em;
}
.fig-note__body { font-size: 14px; line-height: 1.85; color: var(--fg-dim); }
.fig-note__body > *:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
	.fig-bars { padding: 20px 18px; }
	/* 3列だとラベルとバーが潰れるので、ラベルを上に出して2段にする */
	.fig-bars__row {
		grid-template-columns: 1fr auto;
		gap: 8px 12px;
	}
	.fig-bars__label { grid-column: 1 / -1; }
	.fig-kpi__cell { padding: 18px 16px; }
	.fig-steps__item { padding: 16px 16px; gap: 12px; }
	.fig-note { padding: 18px 18px; }
}

/* =========================================================
   製造工程のフロー（トップページのメーカーセクション）
   ========================================================= */
.flow {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin-top: clamp(44px, 5vw, 64px);
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: calc(var(--r) * 1.4);
	overflow: hidden;
}
.flow__item {
	background: var(--bg-2);
	padding: 26px 22px 24px;
	display: grid;
	gap: 8px;
	align-content: start;
	position: relative;
}
/*
 * 工程の進行方向を示す矢印。最後の項目には付けない。
 * 枠線の上に重ねるため、背景色で線を切ってから描く。
 */
.flow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -7px; top: 38px;
	width: 13px; height: 13px;
	background: var(--bg-2);
	border-top: 1px solid var(--neon);
	border-right: 1px solid var(--neon);
	transform: rotate(45deg);
	opacity: .55;
	z-index: 1;
}
.flow__no {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--neon);
	font-variant-numeric: tabular-nums;
}
.flow__title {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.flow__body {
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--fg-dim);
}

@media (max-width: 900px) {
	.flow { grid-template-columns: 1fr 1fr; }
	/* 2列になると横向きの矢印が列の途中で切れるため隠す */
	.flow__item::after { display: none !important; }
}
@media (max-width: 560px) {
	.flow { grid-template-columns: 1fr; margin-top: 36px; }
	.flow__item { padding: 20px 18px; }
}

/*
 * カバー上に重ねるカテゴリーラベル。SVG の中に文字を置くと枠の縦横比で
 * 切り取られてしまうため、HTML 側で絶対配置している。
 */
.post__thumb { position: relative; }
.post__tag {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 5px;
	color: var(--neon);
	background: rgba(4,6,11,.72);
	border: 1px solid rgba(34,197,94,.34);
	backdrop-filter: blur(6px);
}
.post__thumb--wide .post__tag { top: 16px; left: 16px; font-size: 11.5px; padding: 7px 11px; }

/*
 * reCAPTCHA の浮遊バッジはデザインに合わないため隠し、代わりに
 * page-contact.php が出す帰属表示（.cf__legal）で Google の要件を満たす。
 */
.grecaptcha-badge { visibility: hidden; }
.cf__legal {
	margin-top: 14px;
	font-size: 11.5px;
	line-height: 1.75;
	color: var(--fg-faint);
	text-align: center;
}
.cf__legal a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }
.cf__legal a:hover { color: var(--neon); }

/* =========================================================
   サイト全体を貫く背景（.flowbg）と縦の線（.thread）
   ---------------------------------------------------------
   セクションごとに背景を持たせるのをやめ、ここで 1 枚の面を固定で
   敷いている。スクロールしても同じ面の上を移動しているように見えるため、
   ページ全体が地続きにつながって感じられる。
   ========================================================= */
.flowbg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	/* 下に向かってわずかに沈む。全面が真っ黒の板に見えるのを避ける */
	background:
		radial-gradient(ellipse 120% 80% at 50% -10%, #0c1119 0%, transparent 60%),
		linear-gradient(180deg, #080a11 0%, #06070d 100%);
}

/* ---- グリッド ---- */
.flowbg__grid {
	position: absolute;
	inset: -10% -10% -10% -10%;
	background-image:
		linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
	background-size: 64px 64px;
	/* 中央を濃く、上下端を薄くして、画面の切れ目が出ないようにする */
	mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---- オーロラ ---- */
.flowbg__aurora {
	position: absolute;
	border-radius: 50%;
	/*
	 * filter: blur() は掛けない。radial-gradient の端が既に十分ぼけており、
	 * 60vw 級の要素にブラーを掛けると描画コストだけが増える。
	 */
	will-change: transform;
}
.flowbg__aurora--1 {
	width: 62vw; aspect-ratio: 1;
	top: -22vw; right: -14vw;
	background: radial-gradient(circle, rgba(34,197,94,.26), transparent 66%);
}
.flowbg__aurora--2 {
	width: 54vw; aspect-ratio: 1;
	top: 28vh; left: -20vw;
	background: radial-gradient(circle, rgba(20,184,166,.20), transparent 66%);
}
.flowbg__aurora--3 {
	width: 70vw; aspect-ratio: 1;
	bottom: -30vw; left: 22vw;
	background: radial-gradient(circle, rgba(34,197,94,.15), transparent 68%);
}

/* 端をわずかに締めて、面の中央に視線が向くようにする */
.flowbg__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 100% 80% at 50% 45%, transparent 40%, rgba(4,6,11,.55) 100%);
}

/*
 * 時間による漂い。スクロールしていない間も背景がゆっくり動くので、
 * ページが生きている印象になる。
 */
@keyframes flowbg-drift-1 {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-4vw, 5vh, 0) scale(1.08); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes flowbg-drift-2 {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(5vw, -4vh, 0) scale(1.1); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes flowbg-drift-3 {
	0%   { transform: translate3d(0, 0, 0) scale(1.04); }
	50%  { transform: translate3d(-6vw, -3vh, 0) scale(1); }
	100% { transform: translate3d(0, 0, 0) scale(1.04); }
}
.flowbg__aurora--1 { animation: flowbg-drift-1 26s ease-in-out infinite; }
.flowbg__aurora--2 { animation: flowbg-drift-2 32s ease-in-out infinite; }
.flowbg__aurora--3 { animation: flowbg-drift-3 38s ease-in-out infinite; }

/*
 * スクロールに連動した動き。対応ブラウザではページ送りに合わせて
 * 背景そのものが流れるため、セクションを移動しても同じ面の上を
 * 進んでいる感覚が途切れない。時間による漂いとは別レイヤーで効かせるため、
 * 内側に包み要素を作らず、グリッドと全体の明るさを担当させる。
 */
@supports (animation-timeline: scroll(root)) {
	.flowbg__grid {
		animation: flowbg-grid-shift linear both;
		animation-timeline: scroll(root);
	}
	@keyframes flowbg-grid-shift {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(-32px, -96px, 0); }
	}

	.flowbg__vignette {
		animation: flowbg-vignette linear both;
		animation-timeline: scroll(root);
	}
	@keyframes flowbg-vignette {
		from { opacity: .35; }
		to   { opacity: 1; }
	}
}

/* ---- セクションをつなぐ縦の線 ---- */
.thread {
	position: fixed;
	top: 0; bottom: 0;
	left: 50%;
	width: 1px;
	z-index: 0;
	pointer-events: none;
	transform: translateX(-50%);
	/* 上下端でフェードさせ、画面の外で切れているように見せない */
	mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
	opacity: .5;
}
.thread__line {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg,
		transparent,
		rgba(34,197,94,.5) 30%,
		rgba(20,184,166,.5) 70%,
		transparent);
}
/* 線はスクロール量に応じて下から伸びる */
@supports (animation-timeline: scroll(root)) {
	.thread__line {
		transform-origin: 50% 0;
		animation: thread-grow linear both;
		animation-timeline: scroll(root);
	}
	@keyframes thread-grow {
		from { transform: scaleY(.12); }
		to   { transform: scaleY(1); }
	}
}
/* scroll-timeline 非対応では伸縮させず、控えめな線として出す */
@supports not (animation-timeline: scroll(root)) {
	.thread { opacity: .28; }
}

/* 狭い画面では中央の線が本文と重なって邪魔になるので出さない */
@media (max-width: 900px) {
	.thread { display: none; }
	/* 端末の負荷と電池を考えて、狭い画面では漂いを止めて静止させる */
	.flowbg__aurora { animation: none; }
}

/*
 * 4枚のカードを並べるグリッド（トップと /service/）。
 *
 * 既定の auto-fit だと画面幅によって 3 列になり、4 枚目だけが次の行に
 * 取り残されて右側に大きな空白ができていた。枚数が決まっているので、
 * 列数を明示して「1行に4枚」か「2×2」のどちらかに必ず収める。
 */
.cards--quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*
 * 1枚あたりに十分な幅が取れる画面でだけ1行に並べる。
 * 閾値を下げすぎるとカードが細長くなり、本文が4行以上に折り返して
 * かえって窮屈に見える。
 */
@media (min-width: 1200px) {
	.cards--quad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* 1行4枚のときは左右の内側余白を詰めて、本文の行長を稼ぐ */
	.cards--quad .card { padding: 28px 22px 24px; }
}
/* 2列だとカードが細くなりすぎる幅では1列に */
@media (max-width: 640px) {
	.cards--quad { grid-template-columns: minmax(0, 1fr); }
}