/* ============================================================
 * pages/home.css ─ トップページ専用スタイル（v2）
 *
 * 構成：Hero / Trust Bar / Bento / Strengths / Case Study /
 *      AI Lab / News & Column / Final CTA
 * 設計：ライト基盤＋ダーク強調（Case Study / AI Lab）のハイブリッド
 * ============================================================ */

/* ============================================================
 * Hero Section
 * ============================================================ */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding-top: calc(64px + var(--space-7)); /* header高さ＋余白 */
	padding-bottom: var(--space-9);
	overflow: hidden;
	isolation: isolate;
	background: var(--color-bg-primary);
}

/* ─── ヒーロー右側のSVGコンポジション領域（about/services と同一仕様に統一） ─── */
.hero__visual {
	position: absolute;
	top: 50%;
	right: max(var(--space-5), calc((100vw - var(--container-wide)) / 2 + var(--space-5)));
	transform: translateY(-50%);
	width: 46%;
	max-width: 600px;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	animation: hero-visual-in var(--duration-slowest) var(--ease-out-expo) 1.4s forwards;
}

/* SP・タブレット（〜1023px）：KV画像の背景化＋オーバーレイは hero-viewport.css に集約。
   ここではテキスト配置と SCROLL インジケーターの抑制のみ。 */
@media (max-width: 1023px) {
	.hero {
		padding-bottom: var(--space-7);
	}

	/* SP では SCROLL インジケーターを非表示。
	   .hero--implementation-map 配下も specificity を合わせて非表示にする。 */
	.hero__scroll,
	.hero--implementation-map .hero__scroll {
		display: none;
	}
}

.hero__visual img,
.hero__visual svg {
	width: 100%;
	height: auto;
	display: block;
}

@keyframes hero-visual-in {
	from { opacity: 0; transform: translateY(-50%) scale(0.96); }
	to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* SP用：transform は使わず、opacity を 1 までフルに上げる（背景化されたあとも HMR 用に保持） */
@keyframes hero-visual-in-sp {
	from { opacity: 0; transform: scale(0.96); }
	to   { opacity: 1; transform: scale(1); }
}

/* ─── 背景の極薄メガタイポグラフィ「INTELLIGENCE / EMPATHY」 ─── */
.hero__bg-typo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-sans-latin);
	font-size: clamp(5rem, 16vw, 16rem);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	opacity: 0.04;  /* ライト基盤では少し上げて視認 */
	letter-spacing: var(--ls-tight);
	white-space: nowrap;
	z-index: 0;
	user-select: none;
	overflow: hidden;
}

.hero__bg-typo span {
	display: block;
}

.hero__bg-typo span:first-child {
	transform: translateX(-10%);
}

.hero__bg-typo span:last-child {
	transform: translateX(10%);
}

/* ─── インナーコンテナ：左にコピー、右にSVGコンポジション（隣に重ねる） ─── */
.hero__inner {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.hero__inner {
		padding-inline: var(--space-6);
	}
}

/* ─── Content side（テキストを左カラムに） ─── */
.hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	width: 100%;
	max-width: 640px;
}

@media (min-width: 1024px) {
	.hero__content {
		max-width: 600px;
		margin-right: auto;
	}
}

/* タブレット〜SP：コンテンツの max-width を解除し、container--wide 幅いっぱいへ。
   背景の極薄メガタイポは画面幅を超えないようサイズ・寄せを抑制。 */
@media (max-width: 1023px) {
	.hero__content {
		max-width: none;
	}

	.hero__bg-typo {
		font-size: clamp(3rem, 14vw, 6rem);
	}

	.hero__bg-typo span:first-child,
	.hero__bg-typo span:last-child {
		transform: none;
	}
}

/* 巨大な大見出し（キネティック・タイポグラフィ） */
.hero__title {
	font-size: var(--fs-display-lg);
	line-height: 1.15;
	letter-spacing: var(--ls-tighter);
	color: var(--color-text-primary);
	font-weight: var(--fw-extrabold);
	font-feature-settings: "palt";
}

/* SP（〜767px）でメインコピーを一段大きく：40〜44pxの主役級サイズで主張 */
@media (max-width: 767px) {
	.hero__title {
		font-size: clamp(2.5rem, 11vw, 3.25rem);  /* 40〜52px */
		line-height: 1.18;
		letter-spacing: -0.02em;
	}
}

/* PCの句点孤立対策。SPでは text-flow.css 側で折り返しを許可する。 */
.hero__title-line {
	display: inline-block;
	white-space: nowrap;
}

/* 各「語」を inline-block にしてフェードインさせる */
.hero__title .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(24px);
	animation: hero-word-in var(--duration-slowest) var(--ease-out-expo) forwards;
}

.hero__title .word:nth-child(1) { animation-delay: 0.0s; }
.hero__title .word:nth-child(2) { animation-delay: 0.25s; }
.hero__title .word:nth-child(3) { animation-delay: 0.50s; }
.hero__title .word:nth-child(4) { animation-delay: 0.75s; }

/* 強調語（実装する）：スクロール連動シャイン＋動的アンダーライン
   `--hero-shine` (0→1) がスクロールで増えると、グラデが左→右へ走る */
.hero__title .word--accent {
	position: relative;
	display: inline-block;
	padding-bottom: 0.22em; /* アンダーラインとの余白確保 */
	background-image: linear-gradient(
		100deg,
		var(--color-accent) 0%,
		var(--color-accent) 38%,
		var(--color-brand) 50%,
		var(--color-intelligence) 62%,
		var(--color-accent) 100%
	);
	background-size: 280% 100%;
	background-position: calc((1 - var(--hero-shine, 0)) * 100%) 0;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	transition: background-position 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
	.hero__title .word--accent {
		background: none;
		-webkit-text-fill-color: var(--color-accent);
		color: var(--color-accent);
	}
}

/* アクセント語の下にテラコッタ色の線が左→右に伸びる */
.hero__title .word--accent::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0.08em;
	background: var(--color-accent);
	border-radius: var(--radius-full);
	transform: scaleX(0);
	transform-origin: left center;
	animation: hero-accent-underline 1.2s var(--ease-out-expo) 1.4s forwards;
}

@keyframes hero-accent-underline {
	from { transform: scaleX(0); transform-origin: left center; }
	to   { transform: scaleX(1); transform-origin: left center; }
}

@media (prefers-reduced-motion: reduce) {
	.hero__title .word--accent::after {
		animation: none;
		transform: scaleX(1);
	}
}

@keyframes hero-word-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* English overline（タグライン上の極小ラベル） */
.hero__overline {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	opacity: 0;
	animation: hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.2s forwards;
	margin-bottom: calc(var(--space-3) * -1);
}

/* サブキャッチ */
.hero__subtitle {
	font-size: clamp(1.125rem, 2.2vw, 1.5rem);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	opacity: 0;
	animation: hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.0s forwards;
}

.hero__subtitle .x-mark {
	color: var(--color-accent);
	margin-inline: 0.2em;
	font-weight: var(--fw-regular);
}

/* リード文 */
.hero__lead {
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 540px;
	opacity: 0;
	animation: hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.2s forwards;
}

@keyframes hero-fade-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* CTA グループ */
.hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-3);
	opacity: 0;
	animation: hero-fade-in var(--duration-slow) var(--ease-out-expo) 1.4s forwards;
}

@media (min-width: 640px) {
	.hero__cta {
		gap: var(--space-4);
	}
}

/* SP（〜767px）ではCTA2ボタンを画面センターに配置＆主CTAは横幅フル */
@media (max-width: 767px) {
	.hero__cta {
		justify-content: center;
		gap: var(--space-3);
		margin-top: var(--space-5);  /* リード文との余白を広めに */
	}

	/* 主要CTA（btn--primary）はフル幅でタップしやすく、視認性 18px */
	.hero__cta .btn--primary {
		flex: 1 1 100%;
		width: 100%;
		min-height: 56px;
		font-size: var(--fs-lg);
		justify-content: center;
	}

	/* 副CTA（btn--ghost）：横幅フルで読みやすく */
	.hero__cta .btn--ghost {
		flex: 1 1 100%;
		width: 100%;
		min-height: 48px;
		font-size: var(--fs-base);
		justify-content: center;
	}

	/* SP でリード文・サブタイトル・definition のサイズコントラストを強化 */
	.hero__lead {
		font-size: var(--fs-lg);  /* 18px */
		line-height: 1.75;
	}

	.hero__subtitle {
		font-size: 1.25rem;  /* 20px */
		line-height: 1.45;
	}

	.hero__definition {
		font-size: var(--fs-base);  /* 16px */
	}

	.hero__overline {
		font-size: 0.8125rem;  /* 13px：少し見やすく */
	}

	/* hero__content の項目間 gap を広めに：呼吸する余白 */
	.hero__content {
		gap: var(--space-4);
	}

	/* hero セクション全体の上下余白：詰まらず空きすぎない */
	.hero {
		padding-top: calc(64px + var(--space-6));
		padding-bottom: var(--space-8);
	}

	/* SVG ヒーロービジュアル：SPで主役級サイズに */
	.hero__visual {
		max-width: 360px;
		margin-top: var(--space-6);
	}
}

/* ─── Scroll indicator ─── */
.hero__scroll {
	position: absolute;
	bottom: var(--space-5);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-text-muted);
	opacity: 0;
	/* hero-fade-in は translateY のみだが transform プロパティ全体を上書きしてしまうため、SCROLL専用の keyframes を使う */
	animation: hero-scroll-fade-in var(--duration-slow) var(--ease-out-expo) 2.0s forwards;
}

@keyframes hero-scroll-fade-in {
	from { opacity: 0; transform: translate(-50%, 12px); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

.hero__scroll-line {
	width: 1px;
	height: 32px;
	background: linear-gradient(
		to bottom,
		transparent,
		var(--color-brand)
	);
	animation: scroll-line-move 2s var(--ease-in-out-quart) infinite;
}

@keyframes scroll-line-move {
	0%   { transform: scaleY(0); transform-origin: top; }
	50%  { transform: scaleY(1); transform-origin: top; }
	51%  { transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ============================================================
 * Hero 機能定義（タグライン直下の1行）
 * ============================================================ */

.hero__definition {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: var(--fw-semibold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
	opacity: 0;
	animation: hero-fade-in var(--duration-slow) var(--ease-out-expo) 0.85s forwards;
}

/* ============================================================
 * Home KV Variation
 * 生成アート「実装の地図」を、左コピーと同じ紙面上に敷く。
 * ============================================================ */

.hero--implementation-map {
	min-height: 100svh;
	padding-top: calc(64px + var(--space-6));
	padding-bottom: var(--space-8);
	background: var(--color-bg-primary);
	color: var(--color-text-primary);
}


.hero--implementation-map::before,
.hero--implementation-map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* 左：明朝コピーの可読性を守る半透明ベール。右：設計図を濃く見せるため透明寄り。
   ただし図面は左(STRATEGY)→中央(IMPLEMENT)→右(RESULT)の意味の流れを持つため、
   左端も完全には隠さず、製図線が紙に薄く透ける程度に留める。 */
.hero--implementation-map::before {
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(250, 249, 247, 0.9) 0%, rgba(250, 249, 247, 0.82) 36%, rgba(250, 249, 247, 0.42) 58%, rgba(250, 249, 247, 0.04) 82%),
		radial-gradient(circle at 16% 22%, rgba(6, 123, 123, 0.06), transparent 32%),
		linear-gradient(180deg, rgba(250, 249, 247, 0.06) 0%, rgba(250, 249, 247, 0) 18%, rgba(250, 249, 247, 0) 80%, rgba(250, 249, 247, 0.9) 100%);
}

/* フィルムグレイン：軽量なSVGノイズを data-URI でタイル。外部リクエスト 0。
   mix-blend-mode で紙にざらつきを溶け込ませ、デジタルなのに手触りを出す。 */
.hero--implementation-map::after {
	z-index: 2;
	display: block;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
	background-size: 160px 160px;
	/* グレインの自動移動を停止：背景がチラついて動く印象になるため静的グレインにする（でぐ指摘） */
}

/* グレインを微小に動かして“フィルムが回っている”質感に（重くならない transform のみ） */
@keyframes hero-grain-shift {
	0%   { transform: translate3d(0, 0, 0); }
	20%  { transform: translate3d(-2%, 1%, 0); }
	40%  { transform: translate3d(1%, -2%, 0); }
	60%  { transform: translate3d(-1%, 2%, 0); }
	80%  { transform: translate3d(2%, -1%, 0); }
	100% { transform: translate3d(0, 0, 0); }
}

.hero--implementation-map .hero__bg-typo {
	display: none;
}

.hero--implementation-map .hero__inner {
	position: relative;
	z-index: 3;
	min-height: calc(100svh - 64px - var(--space-6));
	align-items: center;
}

.hero--implementation-map .hero__content {
	position: relative;
	max-width: min(900px, 74vw);
	gap: var(--space-6);
	padding-block: var(--space-7);
}

.hero--implementation-map .hero__content::before {
	content: "";
	position: absolute;
	top: calc(var(--space-3) * -1);
	left: 0;
	width: 9rem;
	height: 0.5rem;
	background:
		linear-gradient(90deg, var(--color-brand) 0 36%, var(--color-empathy) 36% 67%, var(--color-action) 67% 100%);
	border-radius: var(--radius-full);
	opacity: 0.9;
	transform: scaleX(0);
	transform-origin: left center;
	animation: hero-accent-line-draw 0.72s var(--ease-out-expo) 1.08s forwards;
}

.hero--implementation-map .hero__overline {
	color: var(--color-brand-700);
}

.hero--implementation-map .hero__title {
	font-size: 5.75rem;
	line-height: 1.07;
	letter-spacing: 0;
	color: var(--color-text-primary);
	text-wrap: balance;
}

.hero--implementation-map .hero__title .word--accent {
	text-shadow: 0 10px 30px rgba(6, 123, 123, 0.14);
}

/* KVタイトル：PCではJSがポインタ追従の transform を当てる（will-change で滑らかに）。
   アクセント語は触らない間も微かに“呼吸”して、組み上がり続ける生命感を出す。 */
.hero--implementation-map .hero__title {
	will-change: transform;
	transition: transform 0.12s ease-out;
}

.hero--implementation-map .hero__title .word--accent {
	will-change: transform;
	transform-origin: center;
	animation:
		hero-accent-breathe 5.2s var(--ease-in-out-quart, ease-in-out) infinite;
}

@keyframes hero-accent-breathe {
	0%, 100% {
		text-shadow: 0 10px 30px rgba(6, 123, 123, 0.14);
		letter-spacing: 0;
	}
	50% {
		text-shadow: 0 14px 38px rgba(6, 123, 123, 0.22);
		letter-spacing: 0.012em;
	}
}

/* PCでJSが word--accent に inline transform を当てると、breathe の transform と
   競合してJS側が勝つ。letter-spacing / text-shadow の呼吸は transform と独立なので
   両立する（JSは translate/rotate のみ操作）。 */

@media (prefers-reduced-motion: reduce) {
	.hero--implementation-map .hero__title,
	.hero--implementation-map .hero__title .word--accent {
		animation: none;
		transition: none;
		transform: none;
		will-change: auto;
	}
}

.hero--implementation-map .hero__definition {
	max-width: none;
	color: var(--color-brand-700);
	font-size: clamp(1.125rem, 1.35vw, 1.25rem);
	font-weight: var(--fw-semibold);
	line-height: 1.72;
	letter-spacing: 0;
}

@media (min-width: 1024px) {
	.hero--implementation-map .hero__definition-line {
		display: inline-block;
		white-space: nowrap;
	}
}

.hero--implementation-map .hero__visual {
	position: absolute;
	inset: 0;
	top: 0;
	right: 0;
	transform: none;
	width: 100%;
	max-width: none;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	/* canvas が自身で「組成」アニメを描くため、コンテナの opacity フェードは行わない。
	   テキスト（h1/リード/CTA）は最前面で即表示し、canvas 初期化遅延は LCP に影響しない。 */
	opacity: 1;
	animation: none;
	filter: none;
}

/* 自己組成マップ canvas：実寸は JS が px 指定（DPR 上限2）。
   CSS は背景レイヤーとして 100% 充填のフォールバックを与える。 */
/* canvas は紙にインクが乗る質感を出すため multiply で合成。
   ティール/コッパーの線が紙地 #FAF9F7 に沈み込み、手描き設計図のように見える。 */
.hero--implementation-map .hero__map-canvas {
	display: block;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}

/* hero__visual / canvas は pointer-events: none のまま。
   ポインタ反応は JS が親 .hero（host）の pointermove を購読する。
   イベントは canvas を素通りして .hero に届くため、テキスト選択やリンク操作を一切奪わない。 */

.hero--implementation-map .hero__scroll {
	z-index: 3;
}

.hero--implementation-map .hero__scene-label,
.hero--implementation-map .hero__visual svg {
	display: none;
}

@keyframes hero-map-art-in {
	from {
		opacity: 0;
		transform: scale(1.025);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.hero--implementation-map .hero__title .word {
	opacity: 1;
	transform: none;
	animation: none;
}

.hero--implementation-map .hero__cta {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(-18px, 14px, 0) rotate(-0.25deg);
	animation: hero-copy-column-in 0.78s var(--ease-out-expo) 1.52s forwards;
	will-change: opacity, transform, filter;
}

.hero--implementation-map .hero__overline,
.hero--implementation-map .hero__title,
.hero--implementation-map .hero__definition {
	opacity: 0;
	filter: blur(6px);
	transform: translate3d(-22px, 18px, 0) rotate(-0.4deg);
	animation: hero-copy-column-in 0.86s var(--ease-out-expo) forwards;
	will-change: opacity, transform, filter;
}

.hero--implementation-map .hero__overline {
	animation-delay: 0.18s;
}

.hero--implementation-map .hero__title {
	animation-delay: 0.32s;
}

.hero--implementation-map .hero__definition {
	animation-delay: 0.58s;
}

@keyframes hero-copy-column-in {
	from {
		opacity: 0;
		filter: blur(6px);
		transform: translate3d(-22px, 18px, 0) rotate(-0.4deg);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
}

@keyframes hero-accent-line-draw {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

@keyframes hero-diagonal-line-draw {
	from {
		background-size: 0% 100%, 100% 100%;
	}
	to {
		background-size: 100% 100%, 100% 100%;
	}
}

@media (min-width: 1280px) {
	.hero--implementation-map .hero__title {
		font-size: 6.6rem;
	}
}

@media (max-width: 1180px) and (min-width: 1024px) {
	.hero--implementation-map .hero__title {
		font-size: 5rem;
	}

	.hero--implementation-map .hero__content {
		max-width: min(860px, calc(100vw - var(--space-8)));
	}
}

@media (max-width: 1023px) {
	.hero--implementation-map {
		min-height: 0; /* SP/タブレットでは vh 固定を解除し、コンテンツの長さに任せる */
		/* ヘッダー（fixed 64px）の下に十分な呼吸を確保（48px） */
		padding-top: calc(64px + var(--space-7));
	}

	/* SP：上部の見出し帯だけ可読を担保し、下半分は設計図が透けて見えるよう薄める。
	   指でスクロールするだけで製図が引かれていく様子を、テキスト下でも見せる。 */
	.hero--implementation-map::before {
		z-index: 0;
		background:
			linear-gradient(180deg, rgba(250, 249, 247, 0.62) 0%, rgba(250, 249, 247, 0.8) 30%, rgba(250, 249, 247, 0.42) 60%, rgba(250, 249, 247, 0.18) 100%),
			radial-gradient(circle at 18% 16%, rgba(6, 123, 123, 0.06), transparent 32%);
	}

	.hero--implementation-map .hero__inner {
		min-height: auto;
		align-items: flex-start;
		order: 1;
	}

	.hero--implementation-map .hero__content {
		max-width: none;
		gap: var(--space-5);
		padding-block: var(--space-5) var(--space-3);
	}

	.hero--implementation-map .hero__title {
		font-size: 4.25rem;
		line-height: 1.05;
	}

	/* SP/タブレット：自己組成マップ canvas を hero 全体に背景として広げ、
	   ::before のオーバーレイ（home.css 459行）でテキスト可読性を保つ。 */
	.hero--implementation-map .hero__visual {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		padding: 0;
		aspect-ratio: auto;
		transform: none;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
		opacity: 0.5; /* SP/タブレット：図を薄くしてコピーの可読性を優先（2026-06-01） */
		animation: none;
	}

	.hero--implementation-map .hero__map-canvas {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* SPはグレインを控えめに（紙の質感は残しつつ視認性を最優先） */
	.hero--implementation-map::after {
		opacity: 0.38;
	}
}

@keyframes hero-map-art-in-sp {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 767px) {
	.hero--implementation-map {
		padding-bottom: var(--space-7);
	}

	.hero--implementation-map .hero__content {
		gap: var(--space-3);
	}

	.hero--implementation-map .hero__content::before {
		width: 6.5rem;
		height: 0.42rem;
	}

	/* SP：ブラウザ幅にできるだけいっぱい（「成果へ実装する。」8文字が画面幅に
	   ぴったり収まる最大サイズ）。font-feature-settings: "palt" による字詰めも考慮。
	   句点「。」が右端で切れないよう 12vw に抑える。 */
	.hero--implementation-map .hero__title {
		font-size: clamp(2.5rem, 11.5vw, 3.5rem);
		line-height: 1.1;
		letter-spacing: -0.04em;
	}

	.hero--implementation-map .hero__visual {
		width: 100%;
		margin-top: 0;
	}

	.hero--implementation-map .hero__visual img {
		object-position: 62% center;
	}
}

/* 380px 以下の特別縮小は廃止：
   SP（767px 以下）の clamp(2.75rem, 12.5vw, 3.75rem) が
   小さい画面でも自動でスケールするので不要。 */


/* ============================================================
 * Section 01.5 ─ Trust Bar（暫定：数＋テキスト名）
 * ============================================================ */

.trust-bar {
	position: relative;
	padding-block: var(--space-6);
	background: var(--color-bg-surface);
	border-block: 1px solid var(--color-border-subtle);
	overflow: hidden;
}

.trust-bar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
	text-align: center;
}

.trust-bar__label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
}

.trust-bar__metrics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	justify-content: center;
	align-items: center;
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
}

.trust-bar__metrics strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-bold);
	font-family: var(--font-sans-latin);
	letter-spacing: var(--ls-tight);
	font-size: 1.05em;
}

.trust-bar__divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: var(--color-border-default);
}

.trust-bar__partners {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-relaxed);
	max-width: 80ch;
}


/* ============================================================
 * Section 01.6 ─ 目的別ルーティング
 * ============================================================ */

.purpose-router {
	position: relative;
	padding-block: var(--space-8);
	background:
		radial-gradient(circle at 8% 14%, rgba(6, 123, 123, 0.06), transparent 28%),
		radial-gradient(circle at 94% 8%, rgba(201, 136, 95, 0.06), transparent 24%),
		linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-surface) 48%, var(--color-bg-primary) 100%);
	overflow: hidden;
	isolation: isolate;
}

.purpose-router::before {
	content: "";
	position: absolute;
	inset: var(--space-5);
	border: 1px solid rgba(6, 123, 123, 0.08);
	border-radius: 4px;
	pointer-events: none;
	z-index: 0;
}

.purpose-router__inner {
	position: relative;
	z-index: 1;
}

.purpose-router__header {
	position: relative;
	margin-bottom: var(--space-6);
}

.purpose-router__title {
	font-size: 3rem;
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	color: var(--color-text-primary);
	letter-spacing: 0;
}

.purpose-router__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
}

.purpose-router__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.purpose-router {
		padding-block: var(--space-9);
	}

	.purpose-router__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-4);
	}
}

@media (min-width: 1120px) {
	.purpose-router__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.purpose-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"kicker arrow"
		"title arrow"
		"desc arrow";
	gap: var(--space-2) var(--space-4);
	min-height: 172px;
	padding: var(--space-5);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.72)),
		radial-gradient(circle at 100% 0%, var(--purpose-accent-soft, rgba(6, 123, 123, 0.10)), transparent 54%);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	color: var(--color-text-primary);
	text-decoration: none;
	box-shadow: none;
	overflow: hidden;
	transition:
		transform var(--duration-base) var(--ease-out-expo),
		border-color var(--duration-base) var(--ease-out-expo),
		box-shadow var(--duration-slow) var(--ease-out-expo),
		background var(--duration-base) var(--ease-out-expo);
}

.purpose-card::before {
	content: "";
	position: absolute;
	top: var(--space-4);
	left: var(--space-4);
	width: 4rem;
	height: 0.28rem;
	border-radius: var(--radius-full);
	background: var(--purpose-accent, var(--color-brand));
	opacity: 0.88;
}

.purpose-card::after {
	content: "";
	position: absolute;
	right: calc(var(--space-5) * -1);
	bottom: calc(var(--space-5) * -1);
	width: 8.5rem;
	height: 8.5rem;
	border-radius: 50%;
	border: 1px solid var(--purpose-accent-border, rgba(6, 123, 123, 0.22));
	opacity: 0.55;
}

.purpose-card:hover {
	transform: translateY(-5px);
	border-color: var(--purpose-accent-border, var(--color-border-brand));
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(234, 243, 241, 0.82)),
		radial-gradient(circle at 100% 0%, var(--purpose-accent-soft, rgba(6, 123, 123, 0.14)), transparent 56%);
	box-shadow: none;
}

.purpose-card__kicker {
	grid-area: kicker;
	align-self: end;
	margin-top: var(--space-4);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--purpose-accent, var(--color-brand));
}

.purpose-card__title {
	grid-area: title;
	display: block;
	font-size: var(--fs-xl);
	line-height: var(--lh-snug);
	font-weight: var(--fw-extrabold);
	letter-spacing: 0;
}

.purpose-card__desc {
	grid-area: desc;
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
}

.purpose-card__arrow {
	grid-area: arrow;
	align-self: end;
	justify-self: end;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-full);
	background: var(--purpose-accent, var(--color-brand));
	color: #ffffff;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: 1;
	transition: transform var(--duration-base) var(--ease-out-expo);
}

.purpose-card:hover .purpose-card__arrow {
	transform: translateX(4px);
}

.purpose-card--ax {
	--purpose-accent: var(--color-brand);
	--purpose-accent-border: rgba(6, 123, 123, 0.38);
	--purpose-accent-soft: rgba(6, 123, 123, 0.13);
}

.purpose-card--geo {
	--purpose-accent: var(--color-brand);
	--purpose-accent-border: rgba(6, 123, 123, 0.38);
	--purpose-accent-soft: rgba(6, 123, 123, 0.16);
}

.purpose-card--meo {
	--purpose-accent: var(--color-brand);
	--purpose-accent-border: rgba(6, 123, 123, 0.34);
	--purpose-accent-soft: rgba(6, 123, 123, 0.13);
}

.purpose-card--instagram {
	--purpose-accent: var(--color-accent);
	--purpose-accent-border: rgba(201, 136, 95, 0.36);
	--purpose-accent-soft: rgba(201, 136, 95, 0.14);
}

.purpose-card--web {
	--purpose-accent: var(--color-accent);
	--purpose-accent-border: rgba(201, 136, 95, 0.38);
	--purpose-accent-soft: rgba(201, 136, 95, 0.16);
}

.purpose-card--marketing {
	--purpose-accent: var(--color-accent);
	--purpose-accent-border: rgba(201, 136, 95, 0.34);
	--purpose-accent-soft: rgba(201, 136, 95, 0.13);
}

.purpose-card--training {
	--purpose-accent: var(--color-brand);
	--purpose-accent-border: rgba(6, 123, 123, 0.36);
	--purpose-accent-soft: rgba(6, 123, 123, 0.13);
}

.owned-service-lane {
	display: grid;
	gap: var(--space-5);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 1024px) {
	.owned-service-lane {
		grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1.8fr);
		align-items: center;
		gap: var(--space-6);
	}
}

.owned-service-lane__eyebrow {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-extrabold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
}

.owned-service-lane__title {
	margin-top: var(--space-2);
	font-size: var(--fs-2xl);
	line-height: var(--lh-tight);
	font-weight: var(--fw-extrabold);
	color: var(--color-text-primary);
	letter-spacing: 0;
}

.owned-service-lane__lead {
	margin-top: var(--space-3);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
}

.owned-service-lane__banners {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	align-items: stretch;
}

@media (min-width: 768px) {
	.owned-service-lane__banners {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.owned-service-banner {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100%;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	color: var(--color-text-primary);
	text-decoration: none;
	overflow: hidden;
	box-shadow: none;
	transition:
		transform var(--duration-base) var(--ease-out-expo),
		border-color var(--duration-base) var(--ease-out-expo),
		box-shadow var(--duration-slow) var(--ease-out-expo);
}

.owned-service-banner:hover {
	transform: translateY(-5px);
	border-color: var(--color-border-brand);
	box-shadow: none;
}

.owned-service-banner img {
	width: 100%;
	aspect-ratio: 1200 / 630;
	height: auto;
	object-fit: cover;
	background: var(--color-bg-elevated);
}

.owned-service-banner__body {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--color-bg-surface);
}

.owned-service-banner__eyebrow {
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	color: var(--color-text-secondary);
}

.owned-service-banner__title {
	font-family: var(--font-serif-jp);  /* 見出しは明朝で世界観統一 */
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text-primary);
	letter-spacing: 0;
}

.owned-service-banner__desc {
	display: block;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
}

.owned-service-banner__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	width: fit-content;
	margin-top: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-brand);
}

.owned-service-banner__cta::after {
	/* Revipo・AIコード健診は外部サービスへのリンク（target="_blank"）。
	   外部リンクの慣例に合わせ矢印は斜め上向き ↗ にする（でぐ指摘・2026-06-03）。 */
	content: "↗";
	font-family: var(--font-sans-latin);
	transform: translateY(-1px);
}

@media (max-width: 767px) {
	.purpose-router::before {
		inset: var(--space-3);
		border-radius: 2px;
	}

	.purpose-router__title {
		font-size: 2rem;
		line-height: 1.16;
	}

	.purpose-card {
		min-height: 156px;
		padding: var(--space-5) var(--space-4);
	}

	.purpose-card__title {
		font-size: var(--fs-lg);
	}

	.purpose-card__arrow {
		width: 44px;
		height: 44px;
	}
}


/* ============================================================
 * Section 02 ─ 3事業 Bento Grid
 * ============================================================ */

.bento {
	position: relative;
	padding-block: var(--space-9);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.bento {
		padding-block: var(--space-10);
	}
}

/* セクションヘッダー（グリッド本体と同じ container--wide で左端を揃える） */
.bento__header {
	margin-bottom: var(--space-8);
	position: relative;
}

.bento__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

.bento__title span {
	display: block;
}

/* h2直下の TL;DR：セクションの問いに自己完結で答える1〜2文（GEO対応） */
.bento__lead {
	margin-top: var(--space-4);
	font-size: var(--fs-base);
	line-height: var(--lh-relaxed);
	color: var(--color-text-secondary);
	max-width: 64ch;
}

.bento__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* グリッド本体 */
.bento__grid {
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.bento__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}
}

/* デスクトップ：5カラム非対称レイアウト */
@media (min-width: 1024px) {
	.bento__grid {
		grid-template-columns: repeat(5, 1fr);
		grid-template-rows: minmax(420px, auto) minmax(360px, auto);
		grid-template-areas:
			"ax    ax    ax    event event"
			"web   web   bridge bridge bridge";
		gap: var(--space-5);
	}

	.bento-cell--ax     { grid-area: ax; }
	.bento-cell--event  { grid-area: event; }
	.bento-cell--web    { grid-area: web; }
	.bento-cell--bridge { grid-area: bridge; }
}

/* ─── Bento Cell 共通 ─── */
.bento-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	overflow: hidden;
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		box-shadow   var(--duration-slow) var(--ease-out-expo);
	isolation: isolate;
}

.bento-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at 100% 0%,
		var(--color-glass-brand) 0%,
		transparent 50%
	);
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out-expo);
}

.bento-cell:hover {
	border-color: var(--color-border-brand);
	transform: translateY(-6px);
	box-shadow: none;
	background: var(--color-bg-elevated);
}

.bento-cell:hover .bento-cell__title {
	color: var(--color-brand);
}

.bento-cell:hover::before {
	opacity: 1;
}

@media (min-width: 1024px) {
	.bento-cell {
		padding: var(--space-7);
	}
}

/* セル内の重ね順 */
.bento-cell > * {
	position: relative;
	z-index: 1;
}

/* アイコン */
.bento-cell__icon {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.bento-cell__icon img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.45;
	transition:
		transform var(--duration-slowest) var(--ease-out-expo),
		opacity   var(--duration-slow) var(--ease-out-expo);
}

.bento-cell:hover .bento-cell__icon img {
	transform: scale(1.05) rotate(-2deg);
	opacity: 0.75;
}

/* AX セル：右下にやや小さめ（SVGがハッキリしてるのでサイズ控えめに） */
.bento-cell--ax .bento-cell__icon {
	width: 40%;
	bottom: -4%;
	right: -2%;
}

/* イベント セル：右下（サイズアップ） */
.bento-cell--event .bento-cell__icon {
	width: 64%;
	bottom: -10%;
	right: -10%;
}

/* Web集客 セル：右下 */
.bento-cell--web .bento-cell__icon {
	width: 50%;
	bottom: -10%;
	right: -8%;
}

/* ラベル */
.bento-cell__label {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.bento-cell--event .bento-cell__label { color: var(--color-empathy); }
.bento-cell--ax .bento-cell__label    { color: var(--color-intelligence); }

.bento-cell__label-ja {
	color: var(--color-text-muted);
	font-family: var(--font-sans-jp);
	letter-spacing: var(--ls-tight);
	text-transform: none;
}

/* タイトル */
.bento-cell__title {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

.bento-cell--ax .bento-cell__title {
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
}

/* リード */
.bento-cell__lead {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 56ch;
}

@media (min-width: 1024px) {
	.bento-cell--ax .bento-cell__lead {
		font-size: var(--fs-base);
		max-width: 50ch;
	}
}

/* 対応領域リスト */
.bento-cell__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: var(--space-2);
}

.bento-cell__list li {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	padding-left: var(--space-4);
	position: relative;
	line-height: var(--lh-relaxed);
}

.bento-cell__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 1px;
	background: var(--color-brand);
}

/* CTA矢印 */
.bento-cell__cta {
	margin-top: auto;
	padding-top: var(--space-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.bento-cell__cta::after {
	content: "→";
	transition: transform var(--duration-fast) var(--ease-spring);
	display: inline-block;
	color: var(--color-brand);
}

.bento-cell__cta:hover {
	color: var(--color-brand);
}

.bento-cell__cta:hover::after {
	transform: translateX(6px);
	color: var(--color-brand);
}

/* ─── Bridge セル（シナジー） ─── */
.bento-cell--bridge {
	background: linear-gradient(
		135deg,
		var(--color-bg-elevated) 0%,
		var(--color-bg-surface) 100%
	);
	border-color: var(--color-border-default);
}

.bento-cell--bridge .bento-cell__label {
	color: var(--color-text-secondary);
}

/* Bridge セルの見出しを大きく（AX と同等） */
.bento-cell__title--bridge {
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
}

/* Bridge セル：右に寄せて配置（3円のシナジーSVG） */
.bento-cell--bridge .bento-cell__icon {
	width: 42%;
	top: 50%;
	right: -4%;
	bottom: auto;
	transform: translateY(-50%);
}

.bento-cell--bridge .bento-cell__icon img {
	opacity: 0.20;
	transition: opacity var(--duration-base) var(--ease-out-expo);
}

.bento-cell--bridge:hover .bento-cell__icon img {
	opacity: 0.45;
}

/* ドット表現：左寄せ（画像が右上なので下部全幅を使う） */
.bento-cell--bridge .bento-cell__synergy {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.bento-cell--bridge .bento-cell__synergy {
		justify-content: center;
	}
}

/* デスクトップ時：指定フレーズを折り返さない（モバイルでは自然折り返し） */
@media (min-width: 1024px) {
	.bento-cell__lead--bridge .nowrap-line {
		white-space: nowrap;
		display: inline-block;
	}
}

.bento-cell__synergy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px dashed var(--color-border-subtle);
}

.bento-cell__synergy .dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	border: 1px solid;
}

.bento-cell__synergy .dot--ax {
	color: var(--color-intelligence);
	border-color: var(--color-intelligence);
}

.bento-cell__synergy .dot--event {
	color: var(--color-empathy);
	border-color: var(--color-empathy);
}

.bento-cell__synergy .dot--web {
	color: var(--color-brand);
	border-color: var(--color-brand);
}

.bento-cell__synergy-plus {
	font-family: var(--font-sans-latin);
	font-weight: var(--fw-bold);
	color: var(--color-text-muted);
}


/* ============================================================
 * Section 05 ─ AI Lab（ラボノート / 動画 / ラボの棚 / 法人相談）
 * ============================================================ */

/* B-5: 全体トーンを抑える方向で、padding と背景強度を縮小 */
.ai-lab {
	position: relative;
	padding-block: var(--space-8);
	/* 背景は override 層で var(--color-bg-dark-primary) に上書きされるため、ここではフォールバックのみ */
	background: var(--color-bg-primary);
	isolation: isolate;
	overflow: hidden;
}

@media (min-width: 1024px) {
	.ai-lab {
		padding-block: var(--space-9);
	}
}

.ai-lab__header {
	margin-bottom: var(--space-7);
	text-align: left;
	position: relative;
}

.ai-lab__header .section-label {
	justify-content: flex-start;
	margin-bottom: var(--space-3);
}

.ai-lab__header-main {
	max-width: 640px;
}

.ai-lab__header-aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-4);
	max-width: 560px;
}

.ai-lab__header-aside .ai-lab__lead,
.ai-lab__header-aside .ai-lab__about-link {
	margin-top: 0;  /* gap で間隔を一元管理 */
}

@media (min-width: 1024px) {
	.ai-lab__header {
		display: grid;
		grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
		gap: var(--space-6);
		align-items: end;  /* 下揃え：h2末尾とabout_link末尾を視覚的に揃える */
	}

	.ai-lab__header-main,
	.ai-lab__header-aside {
		max-width: none;
	}

	.ai-lab__header-aside {
		/* h2 の line-height(1.1) で生じる descender 余白と視覚バランスを取る微調整 */
		padding-bottom: var(--space-1);
	}
}

.ai-lab__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

/* 見出し直下のサブ（emph）。命令形フレーズの強度を活かすため bold＋size up */
.ai-lab__sub {
	display: block;
	margin-top: var(--space-3);
	font-size: clamp(1.125rem, 1.8vw, 1.5rem);
	font-weight: var(--fw-bold);
	color: var(--color-brand);
	letter-spacing: var(--ls-tight);
	font-style: normal;
}

.ai-lab__about-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	transition: color var(--duration-fast) var(--ease-out-expo);
	border-bottom: 1px solid var(--color-border-subtle);
	padding-bottom: 2px;
}

.ai-lab__about-link::after {
	content: "→";
	transition: transform var(--duration-fast) var(--ease-spring);
}

.ai-lab__about-link:hover {
	color: var(--color-brand);
	border-bottom-color: var(--color-brand);
}

.ai-lab__about-link:hover::after {
	transform: translateX(4px);
}

.ai-lab__lead {
	margin-top: var(--space-5);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}

.ai-lab__lead strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* 非対称グリッド（3事業 Bento と同じ思想で「主役+脇役」構成） */
.ai-lab__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

/* iPad 縦・横での縦スクロール過多を緩和：記事は全幅、他3チャネルは3カラム */
@media (min-width: 768px) and (max-width: 1023px) {
	.ai-lab__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}

	.ai-lab__channel--article {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.ai-lab__grid {
		grid-template-columns: 3fr 2fr;
		grid-template-rows: 1fr 1fr 1fr;
		grid-template-areas:
			"article consult"
			"article video"
			"article resource";
		gap: var(--space-4);
	}

	.ai-lab__channel--article  { grid-area: article; }
	.ai-lab__channel--video    { grid-area: video; }
	.ai-lab__channel--resource { grid-area: resource; }
	.ai-lab__channel--consult { grid-area: consult; }
}

/* チャンネルカード（Bento と同じ「画像背景＋テキスト前景」構造） */
.ai-lab__channel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	overflow: hidden;
	isolation: isolate;
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		box-shadow   var(--duration-slow) var(--ease-out-expo);
}

.ai-lab__channel > * {
	position: relative;
	z-index: 1;
}

.ai-lab__channel:hover {
	border-color: var(--color-border-brand);
	transform: translateY(-6px);
	box-shadow: none;
	background: var(--color-bg-elevated);
}

.ai-lab__channel:hover .ai-lab__channel-title {
	color: var(--color-brand);
}

@media (min-width: 1024px) {
	.ai-lab__channel--article {
		padding: var(--space-7);
	}

	/* 小さい3つのカードはコンパクト：余白とギャップを詰める */
	.ai-lab__channel--video,
	.ai-lab__channel--resource,
	.ai-lab__channel--consult {
		padding: var(--space-5);
		gap: var(--space-2);
	}

	/* 小さいカードの本文は少し小さく */
	.ai-lab__channel--video    .ai-lab__channel-desc,
	.ai-lab__channel--resource .ai-lab__channel-desc,
	.ai-lab__channel--consult .ai-lab__channel-desc {
		font-size: var(--fs-xs);
		line-height: var(--lh-relaxed);
	}

	/* 小さいカードの見出しもサイズ調整 */
	.ai-lab__channel--video    .ai-lab__channel-title,
	.ai-lab__channel--resource .ai-lab__channel-title,
	.ai-lab__channel--consult .ai-lab__channel-title {
		font-size: var(--fs-xl);
	}
}

/* 画像（Bento Gridセルと同じスタイル：背景的に配置、ホバーで反応） */
.ai-lab__channel-img {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.ai-lab__channel-img img {
	width: 100%;
	height: auto;
	display: block;
	opacity: 0.45;
	transition:
		transform var(--duration-slowest) var(--ease-out-expo),
		opacity   var(--duration-slow)    var(--ease-out-expo);
}

.ai-lab__channel:hover .ai-lab__channel-img img {
	transform: scale(1.05) rotate(-2deg);
	opacity: 0.75;
}

/* SP（〜767px）：詰まり防止＆タップ精度向上の調整 */
@media (max-width: 767px) {
	/* ─── Bento Cell（3事業セル）：SP で上質さを出すための調整 ─── */
	.bento-cell {
		padding: var(--space-5);   /* 24px：窮屈にならない */
		border-radius: 2px;  /* 18px：親しみやすさ */
		gap: var(--space-3);
	}

	.bento__grid {
		gap: var(--space-4);  /* 16px */
	}

	/* Bento アイコンSVG：SPはセル幅が狭く、右下のSVGがCTAボタン・本文と重なるため
	   サイズを縮小し、opacity を罫線レベルまで下げて干渉を抑える（display:none にはしない） */
	.bento-cell__icon img {
		opacity: 0.14;
	}
	.bento-cell--ax .bento-cell__icon     { width: 34%; }
	.bento-cell--event .bento-cell__icon  { width: 46%; }
	.bento-cell--web .bento-cell__icon    { width: 42%; }
	.bento-cell--bridge .bento-cell__icon { width: 36%; }

	.bento-cell__title {
		font-size: 1.375rem;  /* 22px */
		line-height: 1.4;
	}

	.bento-cell--ax .bento-cell__title {
		font-size: 1.5rem;  /* 24px：AX セルは少し大きく */
	}

	.bento-cell__lead {
		font-size: var(--fs-sm);  /* 14px */
		line-height: 1.75;
	}

	.bento-cell__list li {
		font-size: var(--fs-sm);
		line-height: 1.7;
	}

	.bento-cell__cta {
		padding-top: var(--space-3);
		font-size: var(--fs-sm);
	}

	/* ─── Strength Card：SP で ── 数字＋見出し＋リード のリズム強化 ─── */
	.strengths__grid {
		gap: var(--space-5);
	}

	.strength-card {
		padding: var(--space-5) var(--space-4);
	}

	.strength-card__visual {
		width: 88px;
		height: 88px;
		margin-bottom: var(--space-2);
	}

	.strength-card__title {
		font-size: 1.25rem;  /* 20px */
		line-height: 1.45;
	}

	.strength-card__lead {
		font-size: var(--fs-sm);
		line-height: 1.85;
	}

	/* 中間CTA */
	.strengths__mid-cta {
		gap: var(--space-3);
		margin-top: var(--space-7);
		padding-top: var(--space-6);
	}

	.strengths__mid-cta-text {
		font-size: var(--fs-base);
		line-height: 1.6;
	}

	/* ─── Case Card（ダーク強調）：SP で metrics と padding を最適化 ─── */
	.case-grid {
		gap: var(--space-4);
	}

	/* SP：base .case-card（後方・padding space-7）に同specificityで負けて無効化されていたため、
	   case-study スコープ（0,2,0）で specificity を上げて確実に効かせる。
	   でぐ指示（2026-06-06）でSPは padding 20px に設定。 */
	.case-study .case-card {
		padding: 20px;
		border-radius: 2px;
		gap: var(--space-3);
	}

	.case-card__metrics {
		gap: var(--space-2);
		padding-block: var(--space-4);
	}

	.case-card__metric-value {
		font-size: clamp(1.625rem, 7.5vw, 2.125rem);  /* 26〜34px */
	}

	.case-card__metric-label {
		font-size: var(--fs-xs);  /* 11px→12px：SP実績指標ラベル。最低フォントサイズ確保 */
	}

	.case-card__title {
		font-size: var(--fs-lg);  /* 18px */
		line-height: 1.45;
	}

	.case-card__desc {
		font-size: var(--fs-sm);
		line-height: 1.85;
	}

	/* ─── AI Lab Channel：SP でカード詰まりを軽減 ─── */
	.ai-lab__grid {
		gap: var(--space-4);
	}

	.ai-lab__channel {
		padding: var(--space-5);
		border-radius: 2px;
		gap: var(--space-3);
	}

	.ai-lab__channel-title {
		font-size: 1.25rem;  /* 20px */
		line-height: 1.3;
	}

	.ai-lab__channel-desc {
		font-size: var(--fs-sm);
		line-height: 1.8;
	}

	/* AI Lab CTA バンド：SP で内側余白を最適化 */
	.ai-lab__cta-band {
		padding: var(--space-6) var(--space-4);
		border-radius: 2px;
		margin-top: var(--space-7);
		gap: var(--space-4);
	}

	.ai-lab__cta-band-text {
		font-size: var(--fs-base);
		line-height: 1.7;
	}

	.ai-lab__cta-band-buttons .btn {
		min-height: 52px;
		font-size: var(--fs-base);
	}

	/* ─── News & Column：SP でゆとりあるリスト表現 ─── */
	.news-column__grid {
		gap: var(--space-6);
	}

	.news-list__item {
		padding-block: var(--space-4);
		gap: var(--space-2);
	}

	.news-list__title {
		font-size: var(--fs-base);  /* 16px：本文と同じ可読性 */
		line-height: 1.65;
	}

	.column-grid {
		gap: var(--space-3);
	}

	.column-item {
		padding: var(--space-4);
		border-radius: 2px;
	}

	.column-item__title {
		font-size: var(--fs-base);  /* 16px */
		line-height: 1.55;
	}

	/* ─── AI Lab：見出しサイズ ─── */
	.ai-lab__sub {
		font-size: var(--fs-lg);  /* 18px */
	}

	.ai-lab__lead {
		font-size: var(--fs-base);
		line-height: 1.85;
	}

	/* ─── Bento bridge セル synergy dot：SP で詰めつつ視認性確保 ─── */
	.bento-cell__synergy {
		margin-top: var(--space-4);
		padding-top: var(--space-4);
		gap: var(--space-3);
	}

	.bento-cell__synergy .dot {
		width: 48px;
		height: 48px;
	}
}

/* タッチデバイス（hover不可）では画像が薄いまま終わるので、初期 opacity を上げて視認性を確保
   併せて、hover で transform: translateY(-Npx) が掛かる要素を打ち消し（タップで「飛ぶ」のを防ぐ） */
@media (hover: none) {
	.ai-lab__channel-img img {
		opacity: 0.6;
	}

	.bento-cell:hover,
	.purpose-card:hover,
	.owned-service-banner:hover,
	.ai-lab__channel:hover,
	.case-card:hover,
	.strength-card:hover,
	.column-item:hover {
		transform: none;
		box-shadow: none;
	}

	.bento-cell:hover .bento-cell__icon img,
	.ai-lab__channel:hover .ai-lab__channel-img img,
	.strength-card:hover .strength-card__visual img {
		transform: none;
	}

	.purpose-card:hover .purpose-card__arrow {
		transform: none;
	}
}

/* 各セル：画像位置（Bento の3事業セルと同じく「右下」基本） */
/* 記事セルだけは上下中央に配置（左右は右寄り維持） */
.ai-lab__channel--article .ai-lab__channel-img {
	width: 42%;
	top: 50%;
	right: -6%;
	bottom: auto;
	transform: translateY(-50%);
}

/* 小さい3つのカード：アイコンも小さめでコンパクトに */
.ai-lab__channel--video .ai-lab__channel-img {
	width: 42%;
	bottom: -8%;
	right: -8%;
}

.ai-lab__channel--resource .ai-lab__channel-img {
	width: 45%;
	bottom: -8%;
	right: -8%;
}

.ai-lab__channel--consult .ai-lab__channel-img {
	width: 40%;
	bottom: -6%;
	right: -6%;
}

.ai-lab__channel-en {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
}

.ai-lab__channel-title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
	line-height: 1;
}

.ai-lab__channel-desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
}

.ai-lab__channel-desc strong {
	color: var(--color-text-primary);
	font-weight: var(--fw-semibold);
}

/* 画像未配置時のフォールバック（broken image アイコン非表示） */
.ai-lab__channel-img img:not([src]),
.ai-lab__channel-img img[src=""],
.ai-lab__channel-img img[src$="undefined"] {
	display: none;
}

.ai-lab__channel-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px dashed var(--color-border-subtle);
}

.ai-lab__channel-item {
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	border-bottom: 1px dashed var(--color-border-subtle);
}

.ai-lab__channel-item:last-child {
	border-bottom: none;
}

.ai-lab__channel-item a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-block: var(--space-3);
	color: var(--color-text-primary);
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.ai-lab__channel-item a:hover {
	color: var(--color-brand);
}

.ai-lab__channel-item a:hover .ai-lab__channel-item-meta {
	color: var(--color-brand-500);
}

.ai-lab__channel-item-meta {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	color: var(--color-brand);
	letter-spacing: var(--ls-wide);
}

.ai-lab__channel-note {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	line-height: var(--lh-relaxed);
	padding: var(--space-3) var(--space-4);
	background: var(--color-glass-subtle);
	border-radius: var(--radius-sm);
	border-left: 2px solid var(--color-brand);
	margin-top: var(--space-3);
}

.ai-lab__channel-cta {
	margin-top: auto;
	padding-top: var(--space-4);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.ai-lab__channel-cta::after {
	content: "→";
	transition: transform var(--duration-fast) var(--ease-spring);
	color: var(--color-brand);
	display: inline-block;
}

.ai-lab__channel-cta:hover {
	color: var(--color-brand);
}

.ai-lab__channel-cta:hover::after {
	transform: translateX(6px);
	color: var(--color-brand);
}

.ai-lab__code-check-card {
	position: relative;
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-4);
	padding: var(--space-4);
	/* 編集トーンへ統一：旧amber/ワインのグラデ＋glowを廃し、ダーク面＋コッパー罫線で
	   「featured」を控えめに差別化（角を立てる） */
	border-radius: 2px;
	background: var(--color-bg-dark-surface);
	border: 1px solid var(--color-accent);
	color: var(--color-text-on-brand);
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--duration-base) var(--ease-out-expo), border-color var(--duration-base);
}

.ai-lab__code-check-card:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent-700);
}

.ai-lab__code-check-copy,
.ai-lab__code-check-arrow {
	position: relative;
	z-index: 1;
}

.ai-lab__code-check-eyebrow {
	margin: 0 0 var(--space-1);
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-action);
}

.ai-lab__code-check-title {
	margin: 0 0 var(--space-1);
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xl);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	color: var(--color-text-on-brand);
	letter-spacing: 0;
}

.ai-lab__code-check-desc {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: rgba(255, 255, 255, 0.88);
}

.ai-lab__code-check-visual {
	position: absolute;
	right: -10px;
	bottom: -16px;
	width: min(30vw, 132px);
	opacity: 0.32;
	pointer-events: none;
}

.ai-lab__code-check-visual svg {
	display: block;
	width: 100%;
	height: auto;
}

.ai-lab__code-check-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	color: var(--color-action);
}

.ai-lab__code-check-arrow::after {
	/* AIコード健診は外部サービス（security.colet-lab.jp・target="_blank"）。外部リンクの慣例で ↗（でぐ指摘・2026-06-03） */
	content: "↗";
	transition: transform var(--duration-fast) var(--ease-spring);
}

.ai-lab__code-check-card:hover .ai-lab__code-check-arrow::after {
	/* 斜め矢印に合わせ、ホバーは右上方向へ */
	transform: translate(4px, -4px);
}

@media (min-width: 768px) {
	.ai-lab__code-check-card {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: var(--space-4) var(--space-5);
	}

	.ai-lab__code-check-desc {
		max-width: 58ch;
	}
}

@media (hover: none) {
	.ai-lab__code-check-card:hover {
		transform: none;
	}
}

/* .ai-lab__video-thumb 系スタイル：HTML に該当クラスなし。SVG動画チャネル化済みのため削除（2026-05-02 review）。 */

/* 補助バンド：LINE登録 + AX相談 */
.ai-lab__cta-band {
	margin-top: var(--space-8);
	padding: var(--space-7) var(--space-6);
	background: var(--color-glass-brand);
	border: 1px solid var(--color-border-brand);
	border-radius: 2px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.ai-lab__cta-band {
		padding: var(--space-7) var(--space-8);
	}
}

.ai-lab__cta-band-text {
	font-size: var(--fs-base);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	max-width: 56ch;
}

.ai-lab__cta-band-text strong {
	color: var(--color-brand);
	font-weight: var(--fw-bold);
}

.ai-lab__cta-band-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	width: 100%;
	align-items: stretch;
	max-width: 480px;
}

@media (min-width: 640px) {
	.ai-lab__cta-band-buttons {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-4);
		max-width: none;
		align-items: center;
	}
}

/* LINE ボタン（ブランド統一、LINEアイコンのみ採用） */
.btn--line {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.btn--line svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}


/* ============================================================
 * Section 04 ─ Three Strengths
 * ============================================================ */

.strengths {
	position: relative;
	padding-block: var(--space-9);
	background: var(--color-bg-primary);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.strengths {
		padding-block: var(--space-10);
	}
}

.strengths__header {
	margin-bottom: var(--space-8);
	max-width: var(--container-default);
	position: relative;
}

.strengths__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

.strengths__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

/* タブレット幅は2カラム＋3枚目を全幅に。3カラムは1024px以上 */
@media (min-width: 768px) and (max-width: 1023px) {
	.strengths__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	.strengths__grid > .strength-card:nth-child(3) {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.strengths__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-7);
	}
}

/* 中間CTA：強みセクション末尾に配置（離脱対策） */
.strengths__mid-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-7);
	border-top: 1px solid var(--color-border-subtle);
	text-align: center;
}

.strengths__mid-cta-text {
	font-size: var(--fs-lg);
	color: var(--color-text-secondary);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
}

@media (min-width: 768px) {
	.strengths__mid-cta {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-6);
	}
}

/* 個別カード */
.strength-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6) var(--space-5);
	position: relative;
	isolation: isolate;
}

.strength-card__visual {
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-3);
	position: relative;
	overflow: hidden;
}

.strength-card__visual img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0.85;
	transition:
		transform var(--duration-slowest) var(--ease-out-expo),
		opacity   var(--duration-slow)    var(--ease-out-expo);
}

/* 新版 SVG（POP）は viewBox いっぱいに描かれているので拡大不要 */

.strength-card:hover .strength-card__visual img {
	transform: scale(1.08) rotate(-3deg);
	opacity: 1;
}

.strength-card--synergy:hover .strength-card__visual img {
	transform: scale(1.08) rotate(-3deg);
}

.strength-card__number {
	position: absolute;
	top: 0;
	right: 0;
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	color: var(--color-text-muted);
}

.strength-card__title {
	font-size: var(--fs-2xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

.strength-card__lead {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}

/* 3つのカードでアクセント色を分担 */
.strength-card--synergy     .strength-card__title::before { background: var(--color-brand); }
.strength-card--discipline  .strength-card__title::before { background: var(--color-empathy); }
.strength-card--flexibility .strength-card__title::before { background: var(--color-action); }

.strength-card__title {
	position: relative;
	padding-top: var(--space-3);
}

.strength-card__title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 2px;
	border-radius: var(--radius-full);
}


/* ============================================================
 * Section 05 ─ Case Study Pickup
 * ============================================================ */

.case-study {
	position: relative;
	padding-block: var(--space-9);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1024px) {
	.case-study {
		padding-block: var(--space-10);
	}
}

.case-study__header {
	margin-bottom: var(--space-8);
	max-width: var(--container-default);
}

.case-study__title {
	font-size: var(--fs-display-md);
	font-weight: var(--fw-extrabold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
	font-feature-settings: "palt";
}

.case-study__lead {
	margin-top: var(--space-5);
	font-size: var(--fs-base);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
	max-width: 90ch; /* デスクトップで各行を1行に収める */
}

.case-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 1024px) {
	.case-grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-6);
	}

	.case-grid--3col {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	/* HTML順：AX → Instagram → イベント
	   表示順：AX → イベント → Instagram に並び替え */
	.case-grid--3col > article:nth-child(1) { order: 1; }  /* AX */
	.case-grid--3col > article:nth-child(2) { order: 3; }  /* Instagram → 3番目へ */
	.case-grid--3col > article:nth-child(3) { order: 2; }  /* イベント → 2番目へ */
}

.case-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-7);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	transition:
		border-color var(--duration-base) var(--ease-out-expo),
		transform    var(--duration-base) var(--ease-out-expo),
		box-shadow   var(--duration-slow) var(--ease-out-expo);
}

.case-card:hover {
	border-color: var(--color-border-brand);
	transform: translateY(-6px);
	box-shadow: none;
	background: var(--color-bg-elevated);
}

/* KPI数値出現時のシマー演出 */
.case-card__metric-value {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.case-card__metric-value::after {
	content: "";
	position: absolute;
	top: 0;
	left: -150%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(201, 136, 95, 0.4) 50%,
		transparent 100%
	);
	pointer-events: none;
}

.case-card__metric-value.is-shimmer::after {
	animation: shimmer 1.4s var(--ease-out-expo) forwards;
}

@keyframes shimmer {
	from { left: -150%; }
	to   { left: 250%; }
}

.case-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.case-card__tag {
	font-family: var(--font-sans-jp);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-tight);
	color: var(--color-brand);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border-brand);
	border-radius: var(--radius-full);
}

.case-card__metrics {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
	padding-block: var(--space-4);
	border-block: 1px dashed var(--color-border-subtle);
}

.case-card__metric {
	text-align: center;
}

.case-card__metric-value {
	display: block;
	font-family: var(--font-sans-latin);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: var(--fw-extrabold);
	line-height: 1;
	color: var(--color-action);
	letter-spacing: var(--ls-tighter);
}

.case-card__metric-suffix {
	font-size: 0.6em;
	font-weight: var(--fw-bold);
	margin-left: 2px;
	color: var(--color-action-300);
}

.case-card__metric-label {
	display: block;
	font-size: 0.7rem;          /* 11.2px に微減 */
	color: var(--color-text-secondary);
	margin-top: var(--space-2);
	letter-spacing: -0.02em;    /* Zen Kaku Gothic New の見え方に合わせて微調整 */
	font-feature-settings: "palt"; /* 約物を詰めて1行に収まりやすく */
	line-height: 1.3;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* .case-card__keywords 系：他カードとレイアウト統一のため削除済み（2026-05-02） */

.case-card__title {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-tight);
	color: var(--color-text-primary);
}

.case-card__desc {
	font-size: var(--fs-sm);
	color: var(--color-text-secondary);
	line-height: var(--lh-loose);
}

.case-card__cta {
	margin-top: auto;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text-primary);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	align-self: flex-start;
	transition: color var(--duration-fast) var(--ease-out-expo);
}

.case-card__cta::after {
	content: "→";
	transition: transform var(--duration-fast) var(--ease-spring);
	color: var(--color-brand);
	display: inline-block;
}

.case-card__cta:hover {
	color: var(--color-brand);
}

.case-card__cta:hover::after {
	transform: translateX(6px);
	color: var(--color-brand);
}


/* ============================================================
 * Section 06 ─ News & Column
 * ============================================================ */

.news-column {
	position: relative;
	padding-block: var(--space-9);
	background: var(--color-bg-surface);
	overflow: hidden;
	isolation: isolate;
}

.news-column__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 1024px) {
	.news-column__grid {
		grid-template-columns: 1fr 2fr;
		gap: var(--space-8);
	}
}

.news-column__block-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-subtle);
}

.news-column__block-title {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.news-column__block-title-en {
	font-family: var(--font-sans-latin);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--color-brand);
}

.news-column__block-title-ja {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-text-primary);
	letter-spacing: var(--ls-tight);
}

.news-column__more {
	font-size: var(--fs-xs);
	color: var(--color-text-secondary);
	letter-spacing: var(--ls-tight);
}

.news-column__more::after {
	content: " →";
	transition: transform var(--duration-fast) var(--ease-spring);
	display: inline-block;
}

.news-column__more:hover {
	color: var(--color-brand);
}

.news-column__more:hover::after {
	transform: translateX(4px);
}

/* News List */
.news-list {
	display: flex;
	flex-direction: column;
}

.news-list__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-4);
	border-bottom: 1px solid var(--color-border-subtle);
	transition: background var(--duration-fast) var(--ease-out-expo);
}

.news-list__item:hover {
	background: var(--color-glass-subtle);
}

.news-list__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-tight);
}

.news-list__date {
	font-family: var(--font-sans-latin);
}

.news-list__category {
	color: var(--color-brand);
	padding-inline: var(--space-2);
	border-left: 1px solid var(--color-border-default);
}

.news-list__title {
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-relaxed);
	font-weight: var(--fw-medium);
}

/* Column Grid */
.column-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.column-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.column-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid var(--color-border-subtle);
	border-radius: 2px;
	transition:
		border-color var(--duration-fast) var(--ease-out-expo),
		background   var(--duration-fast) var(--ease-out-expo);
}

.column-item:hover {
	border-color: var(--color-border-brand);
	background: var(--color-glass-brand);
}

.column-item__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
	letter-spacing: var(--ls-tight);
}

.column-item__category {
	font-family: var(--font-sans-latin);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--color-brand);
}

.column-item__date {
	font-family: var(--font-sans-latin);
}

.column-item__title {
	font-size: var(--fs-sm);
	color: var(--color-text-primary);
	line-height: var(--lh-snug);
	font-weight: var(--fw-medium);
}



/* ============================================================
 * Light Mode Override Layer（v2 リニューアル：2026-05-02）
 *
 * 全体ライト基盤の中で、Case Study と AI Lab をダーク強調セクションとして
 * 維持。ファクトの重み・研究室感を担保。
 * ============================================================ */

/* ─── Case Study：ダーク強調セクション ─── */
.case-study {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}

.case-study .case-study__title,
.case-study .case-study__lead,
.case-study .case-study__lead strong,
.case-study .case-card__metric-value,
.case-study .case-card__metric-label,
.case-study .case-card__title,
.case-study .case-card__desc,
.case-study .case-card__cta {
	color: var(--color-text-dark-primary);
}

.case-study .case-study__lead,
.case-study .case-card__desc,
.case-study .case-card__metric-label {
	color: var(--color-text-dark-secondary);
}

.case-study .case-card {
	background: var(--color-bg-dark-surface);
	border: 1px solid var(--color-border-dark-subtle);
}

.case-study .case-card:hover {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
}

.case-study .section-label__num,
.case-study .section-label__en {
	color: var(--color-brand-300);
}

.case-study .case-card__tag {
	background: var(--color-glass-dark-default);
	color: var(--color-text-dark-secondary);
	border: 1px solid var(--color-border-dark-subtle);
}

.case-study .case-card__metric-value {
	color: var(--color-action);  /* アンバー：数字を最も目立たせる */
}


/* ─── AI Lab：ダーク強調セクション ─── */
.ai-lab {
	background: var(--color-bg-dark-primary);
	color: var(--color-text-dark-primary);
}

.ai-lab .ai-lab__title,
.ai-lab .ai-lab__sub,
.ai-lab .ai-lab__lead,
.ai-lab .ai-lab__lead strong,
.ai-lab .ai-lab__channel-title,
.ai-lab .ai-lab__channel-desc,
.ai-lab .ai-lab__channel-desc strong,
.ai-lab .ai-lab__channel-en,
.ai-lab .ai-lab__channel-cta,
.ai-lab .ai-lab__about-link,
.ai-lab .ai-lab__cta-band-text,
.ai-lab .ai-lab__cta-band-text strong {
	color: var(--color-text-dark-primary);
}

.ai-lab .ai-lab__lead,
.ai-lab .ai-lab__channel-desc,
.ai-lab .ai-lab__about-link {
	color: var(--color-text-dark-secondary);
}

.ai-lab .ai-lab__sub {
	color: var(--color-brand-300);
}

.ai-lab .ai-lab__channel {
	background: var(--color-bg-dark-surface);
	border: 1px solid var(--color-border-dark-subtle);
}

.ai-lab .ai-lab__channel:hover {
	background: var(--color-bg-dark-elevated);
	border-color: var(--color-border-dark-default);
}

.ai-lab .section-label__num,
.ai-lab .section-label__en {
	color: var(--color-brand-300);
}

.ai-lab .ai-lab__channel-item a {
	color: var(--color-text-dark-secondary);
}

.ai-lab .ai-lab__channel-item a:hover {
	color: var(--color-brand-300);
}

.ai-lab .ai-lab__channel-item-meta {
	color: var(--color-text-dark-muted);
}

.ai-lab .ai-lab__cta-band {
	background: var(--color-glass-dark-brand);
	border: 1px solid var(--color-border-dark-default);
}

/* CTAバンド内のボタン：ダーク背景上で見えるよう override */
.ai-lab .ai-lab__cta-band .btn--secondary,
.ai-lab .ai-lab__cta-band .btn--line {
	color: var(--color-text-dark-primary);
	border-color: var(--color-border-dark-default);
	background: var(--color-glass-dark-default);
}

.ai-lab .ai-lab__cta-band .btn--secondary:hover,
.ai-lab .ai-lab__cta-band .btn--line:hover {
	background: var(--color-glass-dark-strong);
	border-color: var(--color-border-dark-strong);
	color: var(--color-text-dark-primary);
}

/* Case Study 内のCTAボタンも同様の保護（あれば） */
.case-study .btn--secondary,
.case-study .btn--ghost {
	color: var(--color-text-dark-primary);
	border-color: var(--color-border-dark-default);
}

@media (max-width: 767px) {
	/* トップページ内の主要CTAは、親コンテンツ幅いっぱいで押せる状態にそろえる。 */
	.hero__cta,
	.strengths__mid-cta,
	.ai-lab__cta-band-buttons,
	.about-final-cta .final-cta__buttons {
		width: 100%;
	}

	.ai-lab__cta-band-buttons,
	.about-final-cta .final-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		max-width: 480px;
		margin-inline: auto;
	}

	.hero__cta .btn,
	.strengths__mid-cta .btn,
	.ai-lab__cta-band-buttons .btn,
	.about-final-cta .final-cta__buttons .btn {
		width: 100%;
		flex: 1 1 100%;
	}

	.bento-cell__cta,
	.owned-service-banner__cta,
	.case-card__cta,
	.ai-lab__channel-cta {
		width: 100%;
		min-height: 48px;
		padding: var(--space-3) var(--space-4);
		justify-content: center;
		align-self: stretch;
		text-align: center;
		border: 1px solid var(--color-border-subtle);
		border-radius: 2px;
		background: var(--color-glass-brand);
	}

	.case-study .case-card__cta,
	.ai-lab .ai-lab__channel-cta {
		border-color: var(--color-border-dark-default);
		background: var(--color-glass-dark-default);
	}
}


/* ─── ダーク強調セクション内の bg-mega-typo（背景大文字）の見え方調整 ─── */
.case-study .bg-mega-typo,
.ai-lab .bg-mega-typo {
	color: var(--color-text-dark-primary);
	opacity: 0.04;
}


/* ─── ダーク強調セクション内の section-glow-line：上端の発光ライン ─── */
.case-study .section-glow-line,
.ai-lab .section-glow-line {
	background: linear-gradient(90deg, transparent, var(--color-brand-300), transparent);
	opacity: 0.4;
}


/* ============================================================
 * prefers-reduced-motion 対応の網羅化
 *
 * シマー演出 / Bento ホバー光 / scroll-line / hover transform などを
 * reduce 環境で無効化。アクセシビリティ要件を満たす。
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	/* hero アンダーライン＋ヒーロー周辺アニメ（網羅） */
		.hero__title .word--accent::after,
		.hero--implementation-map::after,
		.hero--implementation-map .hero__content::before,
		.hero--implementation-map .hero__title,
		.hero__title .word,
		.hero__visual,
		.hero__overline,
		.hero__subtitle,
		.hero__lead,
		.hero__cta,
		.hero__definition,
		.hero__scroll,
		.hero__scroll-line {
		animation: none !important;
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}

	/* グレイン：reduce 環境ではアニメだけ止め、薄く静止表示（opacity:1 上書きを是正） */
	.hero--implementation-map::after {
		background-size: 160px 160px !important;
		opacity: 0.34 !important;
	}

	@media (min-width: 1024px) {
		.hero--implementation-map .hero__visual {
			transform: none !important;
		}
	}

	/* Case Study メトリクスのシマー演出 */
	.case-card__metric-value::after {
		animation: none !important;
	}

	/* Bento カードのホバー光 */
	.bento-cell::before {
		transition: none !important;
	}

	/* Bento カード／strength カード／ai-lab チャネル等のホバー transform */
	.bento-cell:hover,
	.purpose-card:hover,
	.owned-service-banner:hover,
	.strength-card:hover,
	.ai-lab__channel:hover,
	.case-card:hover {
		transform: none !important;
	}

	.purpose-card,
	.purpose-card__arrow,
	.owned-service-banner {
		transition: none !important;
	}

	/* SCROLL ラインのアニメ */
	.hero__scroll {
		animation: none !important;
		transform: translateX(-50%) !important;
		opacity: 1 !important;
	}

	/* reveal クラス（IntersectionObserver の段階フェードイン） */
	.reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	/* ai-lab セクション内のホバー transform 系 */
	.ai-lab__channel-img img,
	.bento-cell__icon img {
		transition: none !important;
	}
}