@charset "UTF-8";
/* =====================================================
働く環境を知る（page-recruit-benefit.php）

読み込み: header-recruit.php（$page_slug = benefit）
Figma: 採用HPデザイン node 364:3792（recruit/benefit）
複数ページで使うパーツ（ページタイトル・社長メッセージ・関連資料・インタビュー・次の導線）は recruit-common.css。

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

/* -----------------------------------------------------
ページ全体
-------------------------------------------------------- */
.recruit-benefit {
	position: relative;
}

/* ページ上部の淡いグラデーション（Figma: img/bg02。代表メッセージと同じ画像）
   ヘッダーの裏（半透明）まで敷くため、ヘッダーの高さ＋150px 上にずらす（Figma どおり） */
.recruit-benefit::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-benefit > * {
	position: relative;
}

/* -----------------------------------------------------
アーティサンで働く魅力（Figma: Why Artisan）
-------------------------------------------------------- */
.recruit-charm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: var(--recruit--inner--width);
	margin-inline: auto;
	padding: 80px var(--recruit--gutter);
}

.recruit-charm__lead {
	max-width: 960px;
	margin: 0;
}

/* 2列（Figma: カード 665px × 2・間 30px） */
.recruit-charm__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recruit-charm-item {
	overflow: hidden;
	border: 1px solid rgb(51 51 51 / 20%);
	border-radius: var(--recruit--radius--lg);
	background: var(--recruit--color--white);
}

.recruit-charm-item__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 663 / 261;
	object-fit: cover;
}

.recruit-charm-item__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
}

.recruit-charm-item__ttl,
.recruit-charm-item__txt {
	margin: 0;
}

.recruit-charm-item__ttl {
	font-size: 1.7rem;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

.recruit-charm-item__em {
	color: var(--recruit--color--red);
	letter-spacing: 0.04em;
}

/* -----------------------------------------------------
制度・環境（ワークスタイル）
-------------------------------------------------------- */
.recruit-env {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: var(--recruit--inner--width);
	margin-inline: auto;
	padding: 40px var(--recruit--gutter);
}

.recruit-env__lead {
	margin: 0;
	text-align: center;
}

/* 2列（Figma: カード 650px × 2・間 60px） */
.recruit-env__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 写真（279px）＋ 本文（341px）。PC 最小幅 1180px でも同じ比率で縮める */
.recruit-env-item {
	display: grid;
	grid-template-columns: minmax(0, 279fr) minmax(0, 341fr);
	gap: 30px;
	align-items: start;
}

.recruit-env-item__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 279 / 329;
	object-fit: cover;
	border-radius: var(--recruit--radius--lg);
}

.recruit-env-item__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.recruit-env-item__ttl,
.recruit-env-item__txt {
	margin: 0;
}

@media (width < 768px) {
	.recruit-charm {
		gap: 30px;
		padding-block: 40px;
	}

	.recruit-charm__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.recruit-env {
		gap: 30px;
		padding-block: 20px 40px;
	}

	.recruit-env__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	/* SP は写真を上、本文を下に積む */
	.recruit-env-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.recruit-env-item__img {
		aspect-ratio: 16 / 10;
	}

	.recruit-env-item__body {
		gap: 12px;
	}
}