/**
 * Page hero / detail — 共通ヒーロー・詳細ページ本文
 *
 * 技術情報・設備情報・会社情報など、画像＋ラベル＋英字ブランドの
 * ヒーローと、それに続く本文まわりの共通スタイルをまとめる
 * （元 .p-tech-hero / .p-techDetail を汎用化）.
 */

/* --------------------------------------------------------------------------
 * .p-page-hero: 画像＋ラベル＋英字ブランドのヒーロー（技術情報一覧・設備情報・会社情報）.
 * -------------------------------------------------------------------------- */
.p-page-hero {
	position: relative;
	background-color: var(--color-bg);
}

.p-page-hero__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-top: var(--space-3);
	padding-bottom: var(--space-3);
}

.p-page-hero__title {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-navy);
}

.p-page-hero__visual {
	position: relative;
	min-height: 160px;
	background-color: var(--color-bg-muted);
}

.p-page-hero__img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.p-page-hero__visualInner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.p-page-hero__brand {
	margin: 0 0 -0.25em;
	font-size: clamp(5rem, 3.6364rem + 6.8182vw, 8.75rem);
	font-weight: 600;
	font-family: var(--font-source-sans-3);
	line-height: 1.1;
	background-image: linear-gradient(90deg, #00a6ea 50%, #b5d219 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (min-width: 768px) {
	/*
	 * 画面の高さが低いディスプレイでは、ヘッダー・見出しと画像だけでファーストビューが埋まらないよう、
	 * 画像の高さを「画面の高さ − ヘッダー・見出しの分」までに抑える（十分高い画面では従来の高さ）.
	 */
	.p-page-hero__visual {
		min-height: clamp(160px, calc(100vh - 440px), 220px);
	}

	.p-page-hero__img {
		height: clamp(160px, calc(100vh - 440px), 220px);
	}
}

@media (min-width: 960px) {
	.p-page-hero__head {
		padding-top: var(--space-4);
		padding-bottom: var(--space-3);
	}
}

@media (min-width: 1200px) {
	.p-page-hero__head {
		padding-top: var(--space-5);
		padding-bottom: var(--space-4);
	}

	.p-page-hero__visual {
		min-height: clamp(160px, calc(100vh - 480px), 320px);
	}

	.p-page-hero__img {
		height: clamp(160px, calc(100vh - 480px), 320px);
	}
}

/* --------------------------------------------------------------------------
 * .p-pageDetail: ヒーロー直後の本文ラッパー（技術情報・設備情報・会社情報で共通）.
 * ページ内に .p-pageDetail があるかどうかで #content の背景（格子模様）を白にする
 * （スラッグに依存しない判定）.
 * -------------------------------------------------------------------------- */
.p-pageDetail {
	padding-top: var(--space-4);
	padding-bottom: var(--section-pad-y);
	background-color: var(--color-white);
}

body:has(.page-company) .p-pageDetail {
	padding-bottom: 0;
	background: transparent;
}

body:has(.p-pageDetail) #content::before {
	background-color: var(--color-white);
}

.p-pageDetail__article {
	margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
 * .p-plain-hero: 背景画像なし・グレー背景・日本語タイトルのみのヒーロー.
 * お問い合わせ／資料ダウンロードなど、画像を使わないユーティリティページ用
 * （.p-works-hero に近い構造から背景画像を除いたもの）.
 * -------------------------------------------------------------------------- */
.p-plain-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 120px;
	max-height: 220px;
	background-color: var(--color-bg-muted);
}

.p-plain-hero__inner {
	width: 100%;
}

/* ヒーロー下の本文にセクションと同じ上下余白をとる（お知らせ詳細は main 側で余白をとるため除く）. */
.p-plain-hero ~ .l-mainContent:not(.p-single-news) .post_content {
	padding-block: var(--section-pad-y);
}

.p-plain-hero__title {
	margin: 0;
	font-size: clamp(1.625rem, 1.1875rem + 2.1875vw, 2.5rem);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-navy);
}

@media (min-width: 768px) {
	.p-plain-hero {
		height: clamp(140px, calc(100vh - 440px), 200px);
	}

	.p-pageDetail__article {
		margin-top: var(--space-5);
	}
}

@media (min-width: 1200px) {
	.p-plain-hero {
		height: clamp(160px, calc(100vh - 480px), 320px);
	}
}