@charset "utf-8";

/* ============================================================
   中途採用 専用スタイル
============================================================ */
/* ─────────────────────────
   下層：最下部導線
───────────────────────── */
.rec-au-foot-item.machinist, .rec-au-foot-item.environment {
	display: none;
}

/* ─────────────────────────
   リード文
───────────────────────── */
.intro-area .contents-catch {
	margin: 0 0 20px;
}

@media screen and (max-width: 768px) {
	.intro-area .contents-catch {
		margin: 0 0 20px;
	}
}

/* ─────────────────────────
   2. 募集中の職種
───────────────────────── */
.rec-cr-occupation-area {
	padding: 60px 0 0;
}

.rec-career-area {
	position: relative;
	border: 1px var(--sub) solid;
	padding: 40px;
	display: flex;
	align-items: center;
	gap: 50px;
}

/* 左：写真 */
.rec-career-area .rec-career-img {
	width: 550px;
	height: 550px;
}

/* 右：テキスト */
.rec-career-area .txt-area {
	flex: 1;
}

.rec-career-area .contents-ttl {
	font-size: 4.2rem;
}

/* 工程 */
.rec-career-area .process {
	position: absolute;
	right: 70px;
	z-index: 1;
}

[data-careerarea="machinist"] .process {
	top: -90px;
}
.rec-career-area .process-ttl {
	display: flex;
	justify-content: center;
	position: relative;
	padding: 3px 10px;
	background: #F1F6F9;
	color: var(--main);
	width: fit-content;
	margin: 0 auto 20px;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 0;
	min-width: 180px;
}


.rec-career-area .process-ttl::before {
	position: absolute;
	bottom: -8px;
	width: 13px;
	height: 8px;
	background-color: #F1F6F9;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: '';
}

.rec-career-area .process-list {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.rec-career-area .process-list li {
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.4;
	transition: background-color 0.5s ease, color 0.5s ease;
	padding: 15px 8px;
	writing-mode: vertical-rl;
	min-height: 120px;
	border: 1px solid var(--sub);
	cursor: pointer;
	width: fit-content;
	background: #fff;
}

[data-careerarea="machinist"] .process-list li:nth-child(n+2):nth-child(-n+7) {
	background: var(--main);
	border: 1px solid var(--main);
	color: #fff;
}

.rec-career-area .rec-btn {}

@media screen and (max-width: 768px) {
	.rec-cr-occupation-area {
		margin: 50px auto 0;
		padding: 50px 20px;
		background: var(--recbg);
	}

	.rec-career-area {
		border: none;
		padding: 0;
		display: block;
	}

	/* 左：写真 */
	.rec-career-area .rec-career-img {
		aspect-ratio: 662/552;
		width: 100%;
		height: auto;
	}

	.rec-career-area .rec-career-img img {}

	/* 右：テキスト */
	.rec-career-area .txt-area {
		width: 100%;
		background: #fff;
		padding: 30px 20px 40px;
	}

	.rec-career-area .contents-ttl {
		font-size: 3.2rem;
	}

	/* 工程 */
	.rec-career-area .process {
		position: static;
		top: auto;
		right: auto;
		padding: 15px 0 20px;
	}

	.rec-career-area .process-ttl {
		margin: 0 auto 15px;
		min-width: 190px;
		background: var(--recbg);
	}

	.rec-career-area .process-ttl::before {
		background-color: var(--recbg);
	}

	.rec-career-area .process-list {
		gap: 10px;
	}

	.rec-career-area .process-list li {
		font-size: 1.5rem;
		padding: 12px 5px;
		min-height: 122px;
	}

	.rec-career-area .rec-btn {
		display: block;
	}
}