@charset "utf-8";

/*不動産をお探しの方へ（recruitページ）専用の追加スタイル
このファイルはstyle.cssのCSSカスタムプロパティ（--primary-color等）をそのまま利用します。
---------------------------------------------------------------------------*/

/*冒頭の案内ボックス（サイト共通の.box1系の枠デザインをベースにアレンジ）
---------------------------------------------------------------------------*/
.recruit-intro-box {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 4vw;
	padding: 2.5rem 2rem;
	background: rgba(0,0,0,0.03);
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0px 0px 1px 1px #fff inset;
}
.recruit-intro-box .icon-badge {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 1.4rem;
}
.recruit-intro-box h3 {
	margin: 0 0 1rem;
	font-size: 1.3rem;
}
.recruit-intro-box p.lead {
	margin: 0;
	line-height: 2;
}

/*簡易フロー（ピル型ステップチップ）
---------------------------------------------------------------------------*/
.step-track {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	max-width: 900px;
	margin: 0 auto;
}
.step-track .step-node {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 0.4rem 1.2rem 0.4rem 0.4rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.step-track .step-node .circle {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 0.9rem;
}
.step-track .step-node .label {
	font-size: 0.85rem;
	font-weight: bold;
	white-space: nowrap;
}
.step-track .step-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--primary-color);
	font-size: 0.9rem;
	opacity: 0.5;
}

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	.step-track .step-arrow {
		width: 100%;
		transform: rotate(90deg);
		margin: -0.3rem 0;
	}

	}/*追加指定ここまで*/

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	.step-track .step-node {
		width: 100%;
	}
	.step-track .step-node .label {
		white-space: normal;
	}

	}/*追加指定ここまで*/

/*詳しい流れ（番号カードグリッド）
---------------------------------------------------------------------------*/
.recruit-detail-heading {
	text-align: center;
	margin-bottom: 3vw;
}

.step-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem;
	max-width: 1000px;
	margin: 0 auto;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	.step-cards {
		grid-template-columns: 1fr 1fr;
	}

	}/*追加指定ここまで*/

.step-cards .step-card {
	position: relative;
	background: #fff;
	border-radius: 6px;
	padding: 1.6rem 1.4rem 1.4rem;
	box-shadow: 5px 5px 20px rgba(0,0,0,0.1);
	overflow: hidden;
}
.step-cards .step-card .bignum {
	position: absolute;
	top: -0.6rem;
	right: 0.6rem;
	font-size: 3.6rem;
	font-weight: bold;
	color: var(--primary-color);
	opacity: 0.08;
	line-height: 1;
	pointer-events: none;
}
.step-cards .step-card h4 {
	margin: 0 0 0.7rem;
	font-size: 1.05rem;
	letter-spacing: 0.05em;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.step-cards .step-card h4 .badge {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	font-size: 0.8rem;
	font-weight: bold;
}
.step-cards .step-card p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.9;
	position: relative;
}

/*CTA（お問い合わせ／資料ダウンロード）アウトラインカード
---------------------------------------------------------------------------*/
.cta-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}
.cta-grid .cta-box {
	display: block;
	text-decoration: none;
	background: #fff;
	color: #333;
	border: 2px solid var(--primary-color);
	padding: 1.6rem 1.5rem;
	border-radius: 6px;
	text-align: center;
	transition: 0.3s;
}
.cta-grid .cta-box:hover {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}
.cta-grid .cta-box .icon-circle {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.8rem;
	font-size: 1.3rem;
	transition: 0.3s;
}
.cta-grid .cta-box:hover .icon-circle {
	background: #fff;
	color: var(--primary-color);
}
.cta-grid .cta-box .ttl {
	font-weight: bold;
	font-size: 1.1rem;
}
.cta-grid .cta-box .desc {
	font-size: 0.85rem;
	margin-top: 0.4rem;
	opacity: 0.85;
}

	/*画面幅700px以上の追加指定*/
	@media screen and (min-width:700px) {

	.cta-grid {
		grid-template-columns: 1fr 1fr;
	}

	}/*追加指定ここまで*/