@charset "UTF-8";
/* ==========================================================================
   採用情報ページ(Figma VD 7/28 > ★採用 準拠)
   このページ群だけアクセントがコーポレートの赤ではなく青
   ========================================================================== */

:root {
	--color-recruit: #0988be;
	--color-recruit-bg: #f5f3f3;
	--color-card-line: #e6e8ea;
}

.page-hero__sub {
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   会社を知る / 事業を知る / 募集要項 の3カード
   -------------------------------------------------------------------------- */
.recruit-guide {
	padding-block: 80px;
}

.guide-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.guide-card {
	background: #ffffff;
	border: 1px solid var(--color-card-line);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.guide-card a {
	display: block;
	height: 100%;
}

.guide-card__img {
	width: 100%;
	aspect-ratio: 297 / 170;
	object-fit: cover;
}

.guide-card__body {
	padding: 20px;
}

.guide-card__label {
	font-family: var(--font-en);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.12em;
	color: #8a9095;
}

.guide-card__title {
	margin-top: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 29px;
	color: var(--color-heading);
}

.guide-card__text {
	margin-top: 12px;
	font-size: 13px;
	line-height: 22px;
	color: #56595c;
}

.guide-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-heading);
}

.guide-card__more::after {
	content: "→";
}

/* 募集要項カードはダーク */
.guide-card--dark {
	background: var(--color-dark);
	border-color: var(--color-dark);
}

.guide-card--dark .guide-card__title,
.guide-card--dark .guide-card__more {
	color: #ffffff;
}

.guide-card--dark .guide-card__label {
	color: #b3b8bc;
}

.guide-card--dark .guide-card__text {
	color: #d5d8da;
}

/* --------------------------------------------------------------------------
   数字でみるTYJ
   -------------------------------------------------------------------------- */
.recruit-numbers {
	padding-block: 80px;
	background: var(--color-recruit-bg);
}

/* 和文が主・英文が従の見出し(他セクションの heading-en とは主従が逆) */
.heading-jp {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-heading);
}

.heading-jp .accent {
	color: var(--color-recruit);
}

.heading-en-sub {
	margin-top: 4px;
	font-family: var(--font-en);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.06em;
	color: #6b7075;
}

.number-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 40px;
}

.number-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 28px 20px 32px;
	background: #ffffff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
	text-align: center;
}

.number-card__label {
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: var(--color-heading);
}

/* アイコンは縦横比がまちまちなので、96px角に収める形で中央寄せする */
.number-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
}

.number-card__icon img {
	width: auto;
	max-width: 96px;
	max-height: 96px;
}

.number-card__value {
	font-family: var(--font-en);
	font-size: 60px;
	font-weight: 700;
	line-height: 1;
	color: var(--color-recruit);
}

.number-card__value span {
	font-size: 30px;
}

/* --------------------------------------------------------------------------
   福利厚生
   -------------------------------------------------------------------------- */
.recruit-welfare {
	padding-block: 80px;
}

.recruit-welfare .heading-en .accent {
	color: var(--color-recruit);
}

/* 住宅面のサポート(不動産会社ならではの制度をまとめた枠) */
.welfare-housing {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 40px;
	padding: 28px;
	background: var(--color-recruit-bg);
	border-radius: 12px;
}

.welfare-housing__icon {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--color-recruit);
	border-radius: 50%;
}

.welfare-housing__icon img {
	width: 28px;
	height: 28px;
}

.welfare-housing__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	color: var(--color-heading);
}

.welfare-housing__title span {
	margin-left: 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-recruit);
}

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

.welfare-housing__points {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.welfare-housing__points li {
	padding: 7px 16px;
	background: #ffffff;
	border: 1px solid var(--color-recruit);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--color-recruit);
}

.welfare-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 20px;
}

.welfare-card {
	padding: 24px 18px 26px;
	background: #ffffff;
	border: 1px solid var(--color-card-line);
	border-radius: 8px;
	text-align: center;
}

/* 住宅アイコンと同じく、青丸の中に白のアイコンを置く */
.welfare-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-inline: auto;
	background: var(--color-recruit);
	border-radius: 50%;
}

.welfare-card__icon img {
	width: 28px;
	height: 28px;
}

.welfare-card__title {
	margin-top: 16px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--color-heading);
}

.welfare-card__highlight {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	color: var(--color-recruit);
}

.welfare-card__text {
	margin-top: 8px;
	font-size: 13px;
	line-height: 22px;
	color: #56595c;
}

/* --------------------------------------------------------------------------
   エントリーCTA
   -------------------------------------------------------------------------- */
.recruit-cta {
	padding-block: 80px;
	background: var(--color-recruit-bg);
}

.recruit-cta__banner {
	position: relative;
	border-radius: 8px;
	min-height: 260px;
	overflow: hidden;
}

.recruit-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recruit-cta__inner {
	position: relative;
	z-index: 2;
	padding: 56px 24px 60px;
	text-align: center;
}

.recruit-cta__title {
	font-size: 26px;
	font-weight: 700;
	line-height: 38px;
	color: #ffffff;
}

.recruit-cta__text {
	margin-top: 10px;
	font-size: 14px;
	line-height: 24px;
	color: #ffffff;
}

.recruit-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 28px;
}

.btn-entry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: 220px;
	height: 52px;
	padding-inline: 24px;
	background: #ffffff;
	border: 1px solid #ffffff;
	border-radius: 2px;
	font-family: var(--font-en);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-heading);
}

/* ENTRYは直線矢印、募集要項を見るはシェブロン(デザイン準拠) */
.btn-entry::after {
	content: "→";
	font-size: 16px;
}

.btn-entry--dark {
	background: var(--color-dark);
	border-color: #ffffff;
	font-family: var(--font-jp);
	font-size: 14px;
	color: #ffffff;
}

.btn-entry--dark::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='%23ffffff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.guide-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.number-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.welfare-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.recruit-guide,
	.recruit-numbers,
	.recruit-welfare,
	.recruit-cta {
		padding-block: 48px;
	}

	.guide-cards {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.guide-card__img {
		aspect-ratio: 16 / 9;
	}

	.heading-jp {
		font-size: 24px;
	}

	.number-cards,
	.welfare-cards {
		gap: 16px;
		margin-top: 28px;
	}

	.number-card {
		padding: 22px 14px 26px;
	}

	.number-card__icon {
		width: 60px;
		height: 60px;
	}

	.number-card__value {
		font-size: 38px;
	}

	.number-card__value span {
		font-size: 20px;
	}

	/* アイコンを上に出した縦積みに */
	.welfare-housing {
		flex-direction: column;
		gap: 16px;
		margin-top: 28px;
		padding: 20px;
	}

	.welfare-housing__title {
		font-size: 17px;
		line-height: 26px;
	}

	/* 「― 不動産会社ならでは ―」は横に置くと窮屈なので改行する */
	.welfare-housing__title span {
		display: block;
		margin-left: 0;
	}

	/* SPは画像が中央でトリミングされ、明るい部分に白文字が重なって読みにくくなる。
	   支給画像に焼き込まれた暗幕だけでは足りないので、SPのみ薄く足す */
	.recruit-cta__banner::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(26, 26, 26, 0.35);
	}

	.recruit-cta__inner {
		padding: 40px 20px 44px;
	}

	.recruit-cta__title {
		font-size: 20px;
		line-height: 30px;
	}

	.recruit-cta__text {
		font-size: 13px;
	}

	.recruit-cta__actions {
		gap: 12px;
	}
}

@media (max-width: 560px) {
	.number-cards,
	.welfare-cards {
		grid-template-columns: 1fr;
	}

	.btn-entry {
		width: 100%;
		min-width: 0;
	}
}