/* ==========================================================================
   c-page-header（Figma c-page-header 99:99・SP c-page-header-sp 230:14467）— template-parts/corporate/page-header.php
   - PC: 高さ 400。左に TRUSS ブルーの色面（幅 640/1440）、右に白黒の写真（左端 440/1440 から）と青い「試し塗り」
   - 英字のタイトルは色面から写真へまたがってよい
   - Patch: upper-right／lower-right／center（写真の顔・手に重ならない位置）
   - SP: 上に色面（パンくず・英字・和文）、下に写真（高さ 168）
   ========================================================================== */

.c-page-header {
	position: relative;
	height: 400px; /* Figma の値 */
	overflow: hidden;
	color: var(--color-text-on-brand);
	background: var(--color-bg-canvas);
	--focus-color: var(--neutral-0);
}

.c-page-header__media {
	position: absolute;
	inset: 0 0 0 30.556%; /* 440 / 1440 */
	background: var(--color-bg-inverse);
}

.c-page-header__media picture {
	display: block;
	height: 100%;
}

.c-page-header__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-page-header__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgb(20 33 43 / 0.45), rgb(20 33 43 / 0.05) 50%); /* Figma の値（写真を少し沈める） */
}

.c-page-header__patch {
	position: absolute;
	top: 90px;
	right: 80px;
	width: 200px;
	height: 220px;
	background: var(--color-bg-brand);
	opacity: 0.9;
}

.c-page-header--lower-right .c-page-header__patch {
	top: 180px;
	right: 40px;
}

.c-page-header--center .c-page-header__patch {
	top: 90px;
	right: 420px;
}

/* 色面（左） */
.c-page-header__plane::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 44.444%; /* 640 / 1440 */
	content: "";
	background: var(--color-bg-brand);
}

.c-page-header__inner {
	position: relative;
	padding-top: var(--space-2xl);
}

.c-page-header__en {
	margin-top: 62px; /* Figma の値（パンくずから英字まで） */
	font: 600 112px / 0.95 var(--font-en); /* Figma の値（ページ見出しの英字。テキストスタイルにない大きさ） */
	white-space: nowrap;
}

.c-page-header__jp {
	margin-top: var(--space-sm);
	font: var(--text-h2);
	letter-spacing: var(--ls-h2);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.c-page-header__en {
		font-size: var(--fs-en-h1);
	}

	.c-page-header--center .c-page-header__patch {
		right: 240px;
	}
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.c-page-header {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.c-page-header__plane {
		order: -1;
		background: var(--color-bg-brand);
	}

	.c-page-header__plane::before {
		display: none;
	}

	.c-page-header__inner {
		padding-top: var(--space-md);
		padding-bottom: 28px; /* Figma の値 */
	}

	.c-page-header__en {
		margin-top: 30px; /* Figma の値 */
		font: var(--text-en-h1);
		letter-spacing: var(--ls-en-h1);
		white-space: normal;
	}

	.c-page-header__jp {
		margin-top: 6px; /* Figma の値 */
	}

	.c-page-header__media {
		position: relative;
		inset: auto;
		height: 168px; /* Figma の値 */
	}

	.c-page-header__patch {
		top: var(--space-md);
		right: 32px; /* Figma の値 */
		width: 88px;
		height: 96px;
	}

	.c-page-header--lower-right .c-page-header__patch {
		top: 72px;
		right: var(--space-lg);
	}

	.c-page-header--center .c-page-header__patch {
		top: 36px;
		right: calc(50% - 44px);
	}
}

/* ==========================================================================
   c-breadcrumb（Figma c-breadcrumb 16:135）— template-parts/corporate/breadcrumb.php
   - いまのページは濃い文字。tone=inverse は色面の上（白）
   ========================================================================== */

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) 10px; /* 10 は Figma の値 */
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
}

.c-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 10px; /* Figma の値 */
}

.c-breadcrumb__link,
.c-breadcrumb__current {
	display: inline-flex;
	align-items: center;
	gap: 10px; /* Figma の値 */
}

.c-breadcrumb__link {
	padding-block: 13px; /* 押せる高さを 44px に（見た目と行の高さは変えない。下の margin で打ち消す） */
	margin-block: -13px;
	color: var(--color-text-secondary);
	text-decoration: none;
}

.c-breadcrumb__link:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.c-breadcrumb__current {
	color: var(--color-text-primary);
}

.c-breadcrumb__home {
	width: 16px;
	height: 16px;
}

.c-breadcrumb__sep {
	width: 14px;
	height: 14px;
	color: var(--color-text-secondary);
}

.c-breadcrumb--inverse .c-breadcrumb__link,
.c-breadcrumb--inverse .c-breadcrumb__current,
.c-breadcrumb--inverse .c-breadcrumb__sep {
	color: var(--color-text-on-brand);
}