/* =====================================================================
   ページ: 求人 募集要項（single-recruit.php）  Figma 76:27401
   MV=components/mv.css(.c-mv／.c-mv__fig) / CTA=components/recruit-cta を共通利用。
   本ファイルは導入文・波・募集要項テーブルの差分のみ。
   ===================================================================== */

/* --- セクション内 z-index 基準ユーティリティ（紙テクスチャ廃止） --------------- */
.has-texture { position: relative; }
.has-texture > * { position: relative; z-index: 1; }

/* base.css の section{margin-block:48} を無効化（本ページは padding で余白制御）。 */
.recruit > * { margin-block: 0; }

/* --- 導入文 ------------------------------------------------------------- */
.recruit-lead {
	/* 背景：ライトイエローのテクスチャ（Figma 76:27401。色を焼き込んだ紙テクスチャを
	   346.8×327.8px で直接フィル。multiply は使わない＝下の波と継ぎ目を出さない）。 */
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40);
}
.recruit-lead__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	gap: 0;
	text-align: center;
	color: var(--color-brown-text);
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-body);
}
.recruit-lead p { margin: 0; }
.recruit-lead p + p { margin-top: var(--space-32); }

/* 動画ありバージョン：テキスト（左）＋動画（右）の2カラム */
.recruit-lead--video { padding-block: var(--space-64); }
.recruit-lead--video .recruit-lead__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-40);
	text-align: left;
}
.recruit-lead__text { flex: 0 1 auto; min-width: 0; }
.recruit-lead__video {
	flex: 0 0 auto;
	width: 640px;
	max-width: 55%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-gray-light);
}
.recruit-lead__video iframe,
.recruit-lead__video video,
.recruit-lead__video img {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/* 導入文 → テーブルへの波（薄黄→オフホワイト）。波の上端＝導入文と同じテクスチャを継ぐ。 */
.recruit-lead-wave {
	line-height: 0;
	background-color: var(--color-bg-light-yellow);
	background-image: url("../../images/common/tex-yellow.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}
.recruit-lead-wave img { display: block; width: 100%; height: auto; }

/* --- 募集要項テーブルセクション ---------------------------------------- */
.recruit-table-sec {
	/* 背景：オフホワイトのテクスチャ（Figma 76:27401）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-120);
}
.recruit-table-sec__inner {
	max-width: var(--layout-max);
	margin-inline: auto;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}
.recruit-table__heading {
	margin: 0;
	text-align: center;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-base);
	color: var(--color-brown-text);
}

/* 勤務地別ページ：パンくず（テーブル上）。inner の gap が上下余白を担う。 */
.recruit-breadcrumb {
	align-self: stretch;
}

/* テーブル本体：角丸16pxで切り抜き、行間4pxはセクション地が透けて罫線に見える */
.recruit-table {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.recruit-table__row {
	display: flex;
	align-items: stretch;
}
.recruit-table__label {
	flex: 0 0 22rem; /* 352px */
	display: flex;
	align-items: center;
	padding: var(--space-16) var(--space-24);
	/* フッターと同じイエローのクレヨン紙テクスチャ（346.8×327.8px タイル）。 */
	background-color: var(--color-bg-yellow);
	background-image: url("../../images/common/tex-yellow-deep.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
}
.recruit-table__value {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-16) var(--space-24);
	background: var(--color-white);
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-body);
}

/* 勤務地別ページ：配属に関する注記。inner の gap が上下余白を担う。 */
.recruit-table__note {
	margin: 0;
	color: var(--color-brown-sub);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-body);
}

/* --- レスポンシブ ------------------------------------------------------- */
@media (max-width: 768px) {
	.recruit-lead--video { padding-block: var(--space-24); }
	.recruit-lead__inner { padding-inline: var(--space-16); font-size: var(--font-size-body); }
	.recruit-table-sec { padding-bottom: var(--space-64); }
	.recruit-table-sec__inner { padding-inline: var(--space-16); gap: var(--space-24); }
	.recruit-table__row { flex-direction: column; }
	.recruit-table__heading { font-size: var(--font-size-h3); }
	.recruit-table__label { flex-basis: auto; font-size: var(--font-size-h5); padding: var(--space-8) var(--space-16); }
	.recruit-table__value { font-size: var(--font-size-h6); padding: var(--space-8) var(--space-16) var(--space-16); }

	/* 動画ありバージョン：縦積み（テキスト→動画）に */
	.recruit-lead--video .recruit-lead__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-24);
	}
	.recruit-lead__video { width: 100%; max-width: none; }

	/* SP：導入文テキストは改行を無効化し、h5サイズに */
	.recruit-lead__text { font-size: var(--font-size-h5); }
	.recruit-lead__text br { display: none; }
}