/* ============================================================
 * hero-viewport.css ─ KV / Hero のビューポート高さ補正
 *
 * ページ別CSSの後に読み込み、主要ページのKVをブラウザ枠に収める。
 * コラム / お知らせ archive は旧来の狭いKVを維持する。
 * 対象セクション自体は 100svh 基準で制御し、未対応環境だけ 100vh にフォールバックする。
 * パンくず付き固定ページは、KV単体で 100svh を取ると scroll が初期表示外へ漏れるため、
 * パンくず分を差し引いた高さにする。
 * ============================================================ */

:root {
	--kv-viewport-height: 100svh;
	--kv-main-offset: calc(var(--header-height, 64px) + var(--space-3));
	--page-hero-viewport-height: calc(var(--kv-viewport-height) - var(--breadcrumb-top-offset, calc(var(--header-height, 64px) + var(--space-3))) - var(--breadcrumb-bottom-gap, var(--space-1)) - var(--space-6));
	--page-hero-bg: linear-gradient(
		180deg,
		var(--color-bg-surface) 0%,
		var(--color-bg-surface) 64%,
		rgba(250, 249, 247, 0.74) 100%
	);
	--page-hero-bottom-edge: rgba(6, 123, 123, 0.1);
}

@supports not (height: 100svh) {
	:root {
		--kv-viewport-height: 100vh;
	}
}

@media (min-width: 1024px) {
	:root {
		--kv-main-offset: calc(var(--header-height, 64px) + var(--space-4));
	}
}

:is(
	.hero,
	.about-hero,
	.services-hero,
	.works-hero,
	.error-hero,
	.lp-geo-hero,
	.lp-ig-hero,
	.lp-meo-hero,
	.lp-web-hero,
	.lp-mc-hero,
	.lp-geo-thanks-hero,
	.lp-ig-thanks-hero,
	.lp-meo-thanks-hero,
	.lp-web-thanks-hero,
	.lp-mc-thanks-hero
) {
	min-height: var(--kv-viewport-height);
	box-sizing: border-box;
}

:is(
	.about-hero,
	.services-hero,
	.works-hero,
	.error-hero,
	.lp-geo-hero,
	.lp-ig-hero,
	.lp-meo-hero,
	.lp-web-hero,
	.lp-mc-hero,
	.lp-geo-thanks-hero,
	.lp-ig-thanks-hero,
	.lp-meo-thanks-hero,
	.lp-web-thanks-hero,
	.lp-mc-thanks-hero
) {
	align-items: center;
}

body.page :is(
	.about-hero,
	.services-hero,
	.works-hero,
	.privacy-hero
) {
	background: var(--page-hero-bg);
	box-shadow: inset 0 -1px 0 var(--page-hero-bottom-edge);
}

/* 固定ページKV：パンくず直下から overline までの縦余白を会社概要基準に揃える。
   PCでは breadcrumb がヘッダー分を担うため、KVは上揃えで始める。 */
@media (min-width: 1024px) {
	body.page :is(
		.about-hero,
		.services-hero,
		.works-hero
	) {
		min-height: var(--page-hero-viewport-height);
		align-items: center;
		justify-content: flex-start;
		padding-top: var(--page-hero-top-offset);
	}

	body.page :is(
		.about-hero__inner,
		.services-hero__inner,
		.works-hero__inner,
		.privacy-hero__inner
	) {
		align-self: center;
		margin-top: 0;
	}

	body.page :is(
		.about-hero__overline,
		.services-hero__overline,
		.works-hero__overline,
		.privacy-hero__overline
	) {
		margin-top: 0;
	}
}

@media (min-width: 1024px) and (max-height: 760px) {
	body.page :is(
		.about-hero__scroll,
		.services-hero__scroll,
		.works-hero__scroll
	) {
		bottom: var(--space-3);
	}

	body.page :is(
		.about-hero__scroll-line,
		.services-hero__scroll-line,
		.works-hero__scroll-line
	) {
		height: 24px;
	}
}

:is(
	.error-hero,
	.privacy-hero
) {
	display: flex;
}

:is(
	.error-hero__inner,
	.privacy-hero__inner
) {
	width: 100%;
}

.search-hero {
	display: flex;
	align-items: center;
	min-height: calc(var(--kv-viewport-height) - var(--breadcrumb-top-offset) - var(--breadcrumb-bottom-gap) - 40px);
	box-sizing: border-box;
}

.search-hero__inner {
	width: 100%;
}

:is(
	.archive--ailab .ailab-bento,
	.page--resources .shelf-bento
) {
	min-height: calc(var(--kv-viewport-height) - var(--breadcrumb-top-offset) - var(--breadcrumb-bottom-gap));
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

:is(
	.archive--ailab .ailab-bento__inner,
	.page--resources .shelf-bento__inner
) {
	width: 100%;
}

/* トップKVは固定ヘッダーが重なる前提の全面アートなので、
   セクション自体はブラウザ枠いっぱい、内側だけ余白分を差し引く。 */
body.home .hero--implementation-map {
	min-height: var(--kv-viewport-height);
}

body.error404 .error-hero,
body.single-cpt_lp :is(
	.lp-geo-hero,
	.lp-ig-hero,
	.lp-meo-hero,
	.lp-web-hero,
	.lp-mc-hero,
	.lp-geo-thanks-hero,
	.lp-ig-thanks-hero,
	.lp-meo-thanks-hero,
	.lp-web-thanks-hero,
	.lp-mc-thanks-hero
) {
	min-height: var(--page-hero-viewport-height);
	padding-top: var(--page-hero-top-offset);
}

/* LPは表示用パンくずを出さないため、固定ヘッダー分の余白をHero側で持つ。 */
body.single-cpt_lp {
	--page-hero-top-offset: calc(var(--header-height, 64px) + var(--space-5));
	--page-hero-viewport-height: calc(var(--kv-viewport-height) - var(--header-height, 64px));
}

@media (min-width: 1024px) {
	body.single-cpt_lp {
		--page-hero-top-offset: calc(var(--header-height, 64px) + var(--space-6));
	}
}

:is(.bg-mega-typo, [class*="__bg-typo"]) {
	font-weight: 900;
	letter-spacing: 0;
}

:is(
	.about-hero__picture,
	.services-hero__picture,
	.works-hero__picture
) {
	position: relative;
	z-index: 1;
	display: block;
	width: 128%;
	margin-left: -12%;
	transform: scale(1.08);
	transform-origin: center right;
	filter: drop-shadow(0 28px 60px rgba(6, 79, 79, 0.14));
}

:is(
	.about-hero__picture img,
	.services-hero__picture img,
	.works-hero__picture img
) {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	body.home .hero--implementation-map .hero__inner {
		min-height: calc(var(--kv-viewport-height) - var(--header-height, 64px) - var(--space-6) - var(--space-8));
	}

	:is(
		.about-hero,
		.services-hero,
		.works-hero
	)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.99) 0%,
				rgba(255, 255, 255, 0.98) 30%,
				rgba(255, 255, 255, 0.86) 47%,
				rgba(255, 255, 255, 0.38) 66%,
				rgba(255, 255, 255, 0.10) 84%,
				rgba(255, 255, 255, 0.02) 100%
			),
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0.74) 0%,
				rgba(255, 255, 255, 0) 24%,
				rgba(255, 255, 255, 0) 76%,
				rgba(255, 255, 255, 0.78) 100%
			);
	}

	:is(
		.about-hero__inner,
		.services-hero__inner,
		.works-hero__inner,
		.about-hero__scroll,
		.services-hero__scroll,
		.works-hero__scroll
	) {
		z-index: 3;
	}

	/* 下層ページの全面背景 visual / __picture 系は廃止（tonmana の側面図レイアウトに集約・__picture要素は不使用・2026-06-01） */
}

@media (max-width: 1023px) {
	body.home .hero--implementation-map,
	body.home .hero--implementation-map .hero__inner {
		min-height: 0;
	}

	/* SP/タブレットでは KV を画面高（100svh）に固定しない。
	   コンテンツの長さに任せて自然な高さで表示する。 */
	:is(
		.hero,
		.about-hero,
		.services-hero,
		.works-hero,
		.contact-thanks-hero,
		.privacy-hero,
		.error-hero,
		.lp-geo-hero,
		.lp-ig-hero,
		.lp-meo-hero,
		.lp-web-hero,
		.lp-mc-hero,
		.lp-geo-thanks-hero,
		.lp-ig-thanks-hero,
		.lp-meo-thanks-hero,
		.lp-web-thanks-hero,
		.lp-mc-thanks-hero
	) {
		min-height: 0;
	}

	/* ラボの棚 / AI Lab archive の bento も SP では vh 制約を外す */
	:is(
		.archive--ailab .ailab-bento,
		.page--resources .shelf-bento
	) {
		min-height: 0;
	}

	/* SP・タブレット：KV画像を hero 全体に背景として広げ、
	   白の縦/横グラデオーバーレイでテキストの可読性を確保する。
	   PC（min-width: 1024px）の ::before オーバーレイと同じ手法を SP にも展開。 */
	:is(
		.hero,
		.about-hero,
		.services-hero,
		.works-hero
	) {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}

	/* トップ（.hero）は home.css 側の `.hero--implementation-map::before`（クールホワイト #FAF9F7）を
	   効かせるため、この共通ベールの対象から外す。about/services/works の SP/タブレットKVは
	   PCと同様クールホワイト #FAF9F7 に統一し、白(#FFFFFF)を出さない（でぐ指示・2026-06-02）。 */
	:is(
		.about-hero,
		.services-hero,
		.works-hero
	)::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 247, 0.92) 0%,
				rgba(250, 249, 247, 0.78) 28%,
				rgba(250, 249, 247, 0.62) 60%,
				rgba(250, 249, 247, 0.85) 100%
			);
	}

	body.page :is(
		.about-hero,
		.services-hero,
		.works-hero
	)::before {
		background:
			linear-gradient(
				180deg,
				rgba(250, 249, 247, 0.94) 0%,
				rgba(250, 249, 247, 0.82) 28%,
				rgba(250, 249, 247, 0.66) 60%,
				rgba(250, 249, 247, 0.85) 100%
			);
	}

	:is(
		.hero__visual,
		.about-hero__visual,
		.services-hero__visual,
		.works-hero__visual
	) {
		position: absolute;
		inset: 0;
		top: 0;
		right: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		margin: 0;
		padding: 0;
		transform: none;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}

	:is(
		.hero__visual picture,
		.about-hero__picture,
		.services-hero__picture,
		.works-hero__picture
	) {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		margin: 0;
		transform: none;
		filter: none;
	}

	:is(
		.hero__visual img,
		.about-hero__picture img,
		.services-hero__picture img,
		.works-hero__picture img
	) {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		display: block;
	}

	/* テキスト（hero__inner）はオーバーレイより前面（z-index: 3） */
	:is(
		.hero__inner,
		.about-hero__inner,
		.services-hero__inner,
		.works-hero__inner
	) {
		position: relative;
		z-index: 3;
	}
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
	:is(
		.about-hero__visual,
		.services-hero__visual,
		.works-hero__visual
	) {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	:is(
		.about-hero__picture,
		.services-hero__picture,
		.works-hero__picture
	) {
		transform: translateY(-50%) !important;
	}
}

/* Contact は問い合わせフォームへの入口。KVは about/services/works と同じクールホワイトに統一し、
   パンくず帯〜KV〜本文を同じ地色でつなぐ（水色 brand-100 グラデは廃止・でぐ指示・2026-06-02）。
   ※ この規則（body.page .contact-hero＝特異度0,2,1）が contact.css の .contact-hero より強いので、
      KV地色はここを正本にする。 */
body.page .contact-hero {
	min-height: 0;
	display: block;
	align-items: initial;
	justify-content: initial;
	padding-top: var(--space-5);
	padding-bottom: var(--space-4);
	margin-bottom: 0;
	background: var(--color-bg-primary);
	box-shadow: inset 0 -1px 0 var(--color-border-subtle);
}

body.page .contact-hero::before {
	content: none;
}

body.page .contact-hero__inner {
	position: relative;
	z-index: 1;
	width: auto;
	align-self: auto;
	margin-top: 0;
}

body.page .contact-hero__visual {
	position: static;
	inset: auto;
	width: auto;
	max-width: none;
	height: auto;
	margin: 0;
	padding: 0;
	transform: none;
	overflow: visible;
	opacity: 1;
	animation: none;
}

body.page .contact-hero__visual > svg {
	display: block;
}

@media (min-width: 1024px) {
	body.page .contact-hero {
		padding-top: var(--space-6);
		padding-bottom: var(--space-5);
		margin-bottom: 0;
	}

	body.page .contact-hero__visual {
		width: 100%;
		max-width: 280px;
		aspect-ratio: 1 / 1;
	}
}