@charset "UTF-8";
/* =====================================================
代表メッセージ（page-message.php）

読み込み: header-recruit.php（$page_slug = message）
Figma: 採用HPデザイン node 75:1748
複数ページで使うパーツ（ページタイトル・FAQ・関連資料・インタビュー・次の導線・もっと知る）は recruit-common.css。

PC は Figma（1440px）どおり。SP（768px 未満）はデザインが無いため実装側で組んでいる。
======================================================== */

/* -----------------------------------------------------
ページ全体
-------------------------------------------------------- */
.recruit-msg {
	position: relative;
	overflow-x: clip; /* 左右にはみ出す装飾写真を切る（clip はスクロールコンテナを作らないので上方向の背景は切れない） */
}

/* ページ上部の淡いグラデーション（Figma: img/bg02）
   ヘッダーの裏（半透明）まで敷くため、ヘッダーの高さ＋150px 上にずらす（Figma どおり） */
.recruit-msg::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--recruit--header--height) - 150px);
	left: 0;
	width: 100%;
	aspect-ratio: 1440 / 709;
	background: url("../img/recruit/bg_message-top.jpg") no-repeat left top / 100% auto;
	pointer-events: none;
}

.recruit-msg > * {
	position: relative;
}

/* -----------------------------------------------------
代表メッセージ本文
-------------------------------------------------------- */
.recruit-ceo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 40px var(--recruit--gutter);
}

/* 本文の下部右寄りに敷く淡いグラデーション（Figma: Frame 89）
   画像は白地なので、乗算で重ねて背景になじませる */
.recruit-ceo::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 42px;
	width: min(1150px, 100%);
	aspect-ratio: 1150 / 800;
	background: url("../img/recruit/bg_message-bottom.jpg") no-repeat right bottom / 100% auto;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ---- 散らした写真（装飾） ----
   座標・サイズは page-message.php の $message_photos（Figma 1440px 幅の値）を CSS 変数で受け取る。
   1440px 未満では横位置とサイズを「本文（700px）の外側の余白」に合わせて縮め、本文にかぶらないようにする。
   1440px で余白は左右計 740px → 縮小率 1。PC 最小幅 1180px では 0.65 倍になる。 */
.recruit-ceo__deco {
	--recruit-ceo--scale: min(1px, (100vw - 700px) / 740);
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.recruit-ceo__photo {
	position: absolute;
	top: var(--y);
	display: block;
	width: calc(var(--w) * var(--recruit-ceo--scale));
	height: auto;
	aspect-ratio: var(--ratio);
	object-fit: cover;
	filter: blur(var(--blur));
	transform: translate3d(0, var(--recruit-parallax-y, 0px), 0); /* パララックス（js/recruit-common.js） */
	will-change: transform;
}

/* 重なり順: ぼかした写真（奥）を背面、くっきりした写真（手前）を前面にする */
.recruit-ceo__photo.is-far {
	z-index: 0;
}

.recruit-ceo__photo.is-near {
	z-index: 1;
}

.recruit-ceo__photo.is-left {
	left: calc(var(--x) * var(--recruit-ceo--scale));
}

.recruit-ceo__photo.is-right {
	right: calc(var(--x) * var(--recruit-ceo--scale));
}

.recruit-ceo__photo.is-radius-lg {
	border-radius: var(--recruit--radius--lg);
}

.recruit-ceo__photo.is-radius-xl {
	border-radius: var(--recruit--radius--xl);
}

/* ---- 代表の写真 ---- */
.recruit-ceo__visual {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: var(--recruit--contents--width);
	height: 382px;
	overflow: hidden;
	border-radius: var(--recruit--radius--lg);
}

.recruit-ceo__visual-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-ceo__sign {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	width: 700px;
	max-width: 100%;
	padding: 20px;
}

.recruit-ceo__role {
	margin: 0;
	color: #000000;
}

.recruit-ceo__name {
	display: block;
	width: 198px;
	height: auto;
}

/* ---- 本文 ---- */
.recruit-ceo__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
	font-size: calc(var(--mh--font-size--md) + 2px); /* 本文は読み物なので md より 2px 大きくする */
	width: 1000px;
	max-width: 100%;
	padding: 20px 20px 80px;
	/* 装飾写真（最大 z-index: 1）の上に載せ、半透明の背景で写真の上でも文字を読めるようにする */
	z-index: 2;
	background-color: rgb(255 255 255 / 0.7);
	border-radius: var(--recruit--radius--lg);
}

.recruit-ceo__body p {
	margin: 0;
}

@media (width < 768px) {
	.recruit-ceo {
		gap: 20px;
		padding-block: 0 40px;
	}

	.recruit-ceo::before {
		bottom: 0;
	}

	/* SP は本文の幅いっぱいになるため、装飾の写真は出さない */
	.recruit-ceo__deco {
		display: none;
	}

	.recruit-ceo__visual {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	/* 人物が右寄りなので、SP では右側を残して切り抜く */
	.recruit-ceo__visual-img {
		object-position: 70% center;
	}

	.recruit-ceo__sign {
		gap: 8px;
		padding: 16px;
	}

	.recruit-ceo__name {
		width: 140px;
	}

	.recruit-ceo__body {
		gap: 28px;
		background: none; /* SP は装飾写真が無いので背景は不要 */
		border-radius: 0;
		padding: 0 0 40px; /* PC の下余白 80px の半分 */
	}

	.recruit-ceo__body br {
		display: none;
	}
}