/**
 * 求人掲載ページ
 * HERO
 *
 * 新しいHERO画像を画面幅いっぱいに表示し、
 * ライラック株式会社の白・薄紫デザインに統一します。
 */

/* =====================================================
 * HERO全体
 * ===================================================== */

.lilac-recruitment-page .lilac-job-posting-hero {
	position: relative;
	display: flex;
	width: 100vw;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
	background:
		radial-gradient(
			circle at 8% 15%,
			rgba(145, 111, 190, 0.14) 0,
			rgba(145, 111, 190, 0) 34%
		),
		radial-gradient(
			circle at 92% 78%,
			rgba(202, 187, 231, 0.22) 0,
			rgba(202, 187, 231, 0) 35%
		),
		linear-gradient(
			135deg,
			#fbf9ff 0%,
			#ffffff 48%,
			#f7f3ff 100%
		);
	isolation: isolate;
}

/* 下部の薄紫ライン */
.lilac-recruitment-page .lilac-job-posting-hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	height: 1px;
	background:
		linear-gradient(
			90deg,
			rgba(118, 83, 166, 0) 0%,
			rgba(118, 83, 166, 0.22) 50%,
			rgba(118, 83, 166, 0) 100%
		);
	content: "";
	pointer-events: none;
}

/* =====================================================
 * picture要素
 * ===================================================== */

.lilac-recruitment-page .lilac-job-posting-hero__picture,
.lilac-recruitment-page .lilac-page-hero__picture {
	position: relative;
	z-index: 1;
	display: block;
	width: min(100%, 1536px);
	max-width: 1536px;
	margin: 0 auto;
	padding: 0;
}

/* =====================================================
 * HERO画像
 * ===================================================== */

.lilac-recruitment-page .lilac-job-posting-hero__image,
.lilac-recruitment-page
	.lilac-job-posting-hero
	.lilac-page-hero__image {
	display: block;
	width: 100%;
	max-width: 1536px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: center center;
}

/* =====================================================
 * Lightning側の幅・余白解除
 * ===================================================== */

.lilac-recruitment-page .lilac-recruitment-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.lilac-recruitment-page
	.lilac-recruitment-main
	> .container,
.lilac-recruitment-page
	.lilac-recruitment-main
	> .container-fluid {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* =====================================================
 * タブレット
 * ===================================================== */

@media (max-width: 991px) {

	.lilac-recruitment-page .lilac-job-posting-hero {
		width: 100vw;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	.lilac-recruitment-page .lilac-job-posting-hero__picture,
	.lilac-recruitment-page .lilac-page-hero__picture {
		width: 100%;
		max-width: none;
	}

	.lilac-recruitment-page .lilac-job-posting-hero__image,
	.lilac-recruitment-page
		.lilac-job-posting-hero
		.lilac-page-hero__image {
		width: 100%;
		max-width: none;
		height: auto;
	}
}

/* =====================================================
 * スマートフォン
 * ===================================================== */

@media (max-width: 767px) {

	.lilac-recruitment-page .lilac-job-posting-hero {
		width: 100vw;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
		overflow: hidden;
		background:
			linear-gradient(
				180deg,
				#fbf9ff 0%,
				#ffffff 52%,
				#f7f3ff 100%
			);
	}

	.lilac-recruitment-page .lilac-job-posting-hero__picture,
	.lilac-recruitment-page .lilac-page-hero__picture {
		display: block;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.lilac-recruitment-page .lilac-job-posting-hero__image,
	.lilac-recruitment-page
		.lilac-job-posting-hero
		.lilac-page-hero__image {
		display: block;
		width: 100%;
		max-width: none;
		height: auto;
		margin: 0;
		object-fit: contain;
		object-position: center center;
	}
}

/* =====================================================
 * 小型スマートフォン
 * ===================================================== */

@media (max-width: 480px) {

	.lilac-recruitment-page .lilac-job-posting-hero__image,
	.lilac-recruitment-page
		.lilac-job-posting-hero
		.lilac-page-hero__image {
		width: 100%;
		height: auto;
	}
}