@charset "UTF-8";
/* ==========================================================================
   Object / Project / recruit
   ========================================================================== */
.p-recruit {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-tint);
	padding-block: 0;
}

.p-recruit__text{
	margin: 2em auto;
	font-family: var(--font-serif);
}

.p-recruit__image {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80%;
	z-index: 1;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 20%, #000 46%);
	        mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.55) 20%, #000 46%);
}
.p-recruit__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* テキスト（画像より前面・左寄せ） */
.p-recruit__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--inner-max);
	margin-inline: auto;
	padding: 104px var(--inner-pad);
}
.p-recruit__text-area {
	max-width: 46%;
}

@media (min-width: 1921px) {
	.p-recruit__inner {
		max-width: var(--inner-max-xl);
	}
}

/* ---- タブレット以下：テキストが画像に重なってくる ---- */
@media (max-width: 1024px) {
	.p-recruit__inner {
		padding-block: 80px;
	}
	.p-recruit__text-area {
		max-width: 62%;
	}
}

@media (max-width: 767px) {
	.p-recruit__image {
		width: 100%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 14%, #000 40%);
		        mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.6) 14%, #000 40%);
	}
	.p-recruit__inner {
		padding: 60px var(--inner-pad-sp);
	}
	.p-recruit__text-area {
		max-width: 100%;
	}
	.p-recruit__text-area .c-btn--outline {
		width: 100%;
	}
}