@use "variables" as *;

// ===========================================================================
// 採用 (Recruit, page-recruit.php). Two reference-listing spec tables
// (正社員 / 契約社員・パート, ACF repeaters) + application boxes + a static
// 会社概要 block on the .deco-bg flower background. The `.spec-list` dl
// (label ： value rows with thin rules) is the shared building block.
// ===========================================================================

// --- intro -----------------------------------------------------------------
.recruit-intro__lead {
	margin-bottom: rem(24);
	font-size: rem(20);
	font-weight: 700;
	color: $color-green;
}

.recruit-intro__note {
	font-size: rem(16);
	line-height: 1.75;
}

// --- section heading (sans bold green; 30px gap to the table) --------------
.recruit-heading {
	margin-bottom: rem(30);
	font-family: $font-sans; // override the global serif on h2
	font-size: rem(20);
	font-weight: 700;
	color: $color-green;

	@include sp {
		font-size: rem(18);
	}
}

// --- spec table (dl of label ： value rows; dashed rules) -------------------
.spec-list {
	margin: 0;
	border-top: 1px dashed $color-rule;
}

.spec-row {
	display: grid;
	grid-template-columns: rem(220) 1fr;
	gap: rem(16);
	align-items: start;
	padding-block: rem(18);
	font-size: rem(16);
	line-height: 2;
	border-bottom: 1px dashed $color-rule;

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(2);
		padding-block: rem(20);
	}
}

.spec-row__label {
	display: flex;
	justify-content: space-between; // pushes the ： to the right edge of the column
	flex-shrink: 0;

	&::after {
		content: "：";
	}

	@include sp {
		justify-content: flex-start;
		color: $color-green;
		font-weight: 600;

		&::after {
			content: "";
		}
	}
}

.spec-row__value {
	min-width: 0;
}

// note under a spec table (e.g. ※正社員登用制度あり)
.recruit-caption {
	margin-top: rem(16);
	font-size: rem(16);
	line-height: 1.75;
}

// gap between intro / each spec section
.recruit-spec {
	margin-top: rem(80);

	@include sp {
		margin-top: rem(48);
	}

	// no intro above (求人あり＝イントロ非表示) → drop the leading gap
	&:first-child {
		margin-top: 0;
	}
}

// --- application boxes (履歴書 / メール) ------------------------------------
.recruit-apply {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: rem(40);
	margin-top: rem(80);

	@include sp {
		grid-template-columns: 1fr;
		gap: rem(30);
		margin-top: rem(48);
	}
}

.apply-box {
	background: $color-white;
	border: 1px solid $color-green;
	border-radius: rem(20);
	overflow: hidden;
}

.apply-box__head {
	margin: 0;
	padding: rem(10);
	font-size: rem(16);
	font-weight: 600;
	text-align: center;
	color: $color-white;
	background: $color-green;
}

.apply-box__body {
	padding: rem(30);
	font-size: rem(16);
	line-height: 2;

	@include sp {
		padding: rem(24) rem(20);
	}

	p {
		margin: 0;

		& + p {
			margin-top: rem(20);
		}
	}
}

.apply-box__address a {
	color: inherit;
	text-decoration: underline;
	transition: color 0.2s;

	&:hover {
		color: $color-green;
	}
}

.apply-box__list {
	margin: 0;
	padding: 0;
	list-style: none;

	li {
		position: relative;
		padding-left: rem(18);
		font-size: rem(14);
		line-height: rem(28);

		&::before {
			content: "";
			position: absolute;
			top: rem(11);
			left: 0;
			width: rem(6);
			height: rem(6);
			background: currentColor;
			border-radius: 50%;
		}
	}
}

// --- 会社概要 (always shown, on the flower background) ----------------------
.recruit-company {
	margin-top: 0;
}