@charset "UTF-8";
/* ==========================================================================
   募集要項ページ(Figma VD 7/28 > 募集要項 準拠)
   カラートークン(--color-recruit 等)は recruit.css 側で定義
   ========================================================================== */

.requirements {
	padding-block: 64px 80px;
}

.requirements__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 40px;
	color: var(--color-heading);
	text-align: center;
}

/* --------------------------------------------------------------------------
   職種タブ(各職種セクションへのアンカー)
   -------------------------------------------------------------------------- */
.job-nav {
	margin-top: 40px;
	border: 1px solid var(--color-card-line);
}

.job-nav ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.job-nav li + li {
	border-left: 1px solid var(--color-card-line);
}

.job-nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 12px;
	background: #ffffff;
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color-heading);
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}

/* ホバー・フォーカス時のみ反転表示にする
   (共通の a:hover の opacity は反転が濁るので打ち消す) */
.job-nav a:hover,
.job-nav a:focus-visible {
	background: var(--color-heading);
	color: #ffffff;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   職種ごとの募集要項
   -------------------------------------------------------------------------- */
.job {
	/* アンカージャンプ時に追従ヘッダー(73px)分の余白を確保 */
	scroll-margin-top: 90px;
	padding-top: 56px;
}

.job + .job {
	margin-top: 56px;
	border-top: 1px solid var(--color-card-line);
}

.job__name {
	font-size: 22px;
	font-weight: 700;
	line-height: 32px;
	color: var(--color-recruit);
}

.job__lead {
	margin-top: 8px;
	font-size: 14px;
	line-height: 24px;
	color: #56595c;
}

.job__table {
	margin-top: 24px;
	border-top: 1px solid var(--color-card-line);
}

.job__row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--color-card-line);
}

.job__row dt {
	flex: 0 0 172px;
	padding: 16px 20px;
	background: #f2f4f5;
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	color: var(--color-heading);
}

.job__row dd {
	flex: 1;
	min-width: 0;
	padding: 16px 20px;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-text-sub);
}

/* 給与などの但し書き。本文より一段小さく薄く */
.job__note {
	margin-top: 4px;
	font-size: 11px;
	line-height: 18px;
	color: #8a9095;
}

.job__action {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.btn-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 190px;
	height: 48px;
	padding-inline: 24px;
	background: #ffffff;
	border: 1px solid var(--color-heading);
	border-radius: 2px;
	font-size: 14px;
	font-weight: 700;
	color: var(--color-heading);
}

.btn-apply::after {
	content: "";
	width: 6px;
	height: 11px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%231a1a1a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   相談CTA
   -------------------------------------------------------------------------- */
.requirements-cta {
	padding-block: 56px;
	background: #f5f6f7;
}

.requirements-cta .container {
	display: flex;
	justify-content: center;
}

.btn-consult {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 300px;
	height: 60px;
	padding-inline: 32px;
	background: #ffffff;
	border: 1px solid var(--color-card-line);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	font-size: 16px;
	font-weight: 700;
	color: var(--color-heading);
}

.btn-consult::after {
	content: "";
	width: 6px;
	height: 11px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='12' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%231a1a1a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.job__row dt {
		flex-basis: 140px;
	}
}

@media (max-width: 768px) {
	.requirements {
		padding-block: 40px 48px;
	}

	.requirements__title {
		font-size: 22px;
		line-height: 32px;
	}

	/* 4つ横並びは1つが狭すぎるので2×2に */
	.job-nav {
		margin-top: 28px;
	}

	.job-nav ul {
		grid-template-columns: repeat(2, 1fr);
	}

	.job-nav li:nth-child(n + 3) {
		border-top: 1px solid var(--color-card-line);
	}

	.job-nav li:nth-child(odd) {
		border-left: 0;
	}

	.job-nav a {
		min-height: 48px;
		font-size: 14px;
	}

	.job {
		scroll-margin-top: 72px;
		padding-top: 40px;
	}

	.job + .job {
		margin-top: 40px;
	}

	.job__name {
		font-size: 19px;
		line-height: 28px;
	}

	/* 項目名を上、内容を下の縦積みに(横並びだと内容側が狭すぎる) */
	.job__row {
		flex-direction: column;
	}

	.job__row dt {
		flex: none;
		padding: 10px 14px;
	}

	.job__row dd {
		padding: 12px 14px 16px;
		font-size: 13px;
		line-height: 22px;
	}

	.requirements-cta {
		padding-block: 40px;
	}

	.btn-apply,
	.btn-consult {
		width: 100%;
		min-width: 0;
	}

	.btn-consult {
		height: 56px;
		font-size: 15px;
	}
}