/**
 * =====================================================
 * 求人詳細ページ：求人区分別HERO
 * -----------------------------------------------------
 * ・画像サイズ：1920 × 600px
 * ・縦横比：16：5
 * ・画像の上下左右を切らない
 * ・画面幅に合わせて高さを自動調整
 * ・職業紹介求人は無限横スライド
 * ・企業へ直接応募求人は固定表示
 * ・スマートフォン～大型PC対応
 * =====================================================
 */

/* =====================================================
 * 共通設定
 * ===================================================== */

:root {
	--mpj-job-hero-ratio: 1920 / 600;
	--mpj-job-hero-duration: 36s;
	--mpj-job-hero-slide-width: 100vw;
}

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

.mpj-job-hero {
	position: relative;
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin: 0;
	margin-left: calc(50% - 50vw);
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	font-size: 0;
	line-height: 0;
}

/* =====================================================
 * 固定HERO・スライダー表示枠
 * -----------------------------------------------------
 * 画面幅に応じて高さを自動計算します。
 * ===================================================== */

.mpj-job-hero__inner,
.mpj-job-hero__viewport {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	aspect-ratio: var(--mpj-job-hero-ratio);
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: #ffffff;
	box-shadow: none;
	font-size: 0;
	line-height: 0;
}

/* =====================================================
 * スライドトラック
 * ===================================================== */

.mpj-job-hero__track {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	height: 100%;
	margin: 0;
	padding: 0;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation:
		mpj-job-hero-slide
		var(--mpj-job-hero-duration)
		linear
		infinite;
}

/* =====================================================
 * 画像グループ
 * ===================================================== */

.mpj-job-hero__group {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: flex-start;
	flex: 0 0 auto;
	gap: 0;
	width: calc(
		var(--mpj-job-hero-slide-width)
		* var(--mpj-job-hero-slide-count)
	);
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
}

/* =====================================================
 * 各スライド
 * ===================================================== */

.mpj-job-hero__slide {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--mpj-job-hero-slide-width);
	width: var(--mpj-job-hero-slide-width);
	min-width: var(--mpj-job-hero-slide-width);
	max-width: var(--mpj-job-hero-slide-width);
	height: 100%;
	aspect-ratio: var(--mpj-job-hero-ratio);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	font-size: 0;
	line-height: 0;
}

/* =====================================================
 * HERO画像
 * -----------------------------------------------------
 * coverを使用せず、画像全体を表示します。
 * 幅に合わせて高さを自動調整します。
 * ===================================================== */

.mpj-job-hero__image {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: top;
	object-fit: contain;
	object-position: center center;
	background: #ffffff;
	transform: none;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* =====================================================
 * 固定HERO
 * ===================================================== */

.mpj-job-hero--static .mpj-job-hero__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--mpj-job-hero-ratio);
}

.mpj-job-hero--static .mpj-job-hero__image {
	position: static;
	width: 100%;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* =====================================================
 * 無限横スライド
 * ===================================================== */

@keyframes mpj-job-hero-slide {

	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(
			calc(
				-1
				* var(--mpj-job-hero-slide-width)
				* var(--mpj-job-hero-slide-count)
			),
			0,
			0
		);
	}

}

/* =====================================================
 * マウスを重ねても停止しない
 * ===================================================== */

.mpj-job-hero--slider:hover .mpj-job-hero__track {
	animation-play-state: running;
}

/* =====================================================
 * 大型PC
 * ===================================================== */

@media (min-width: 1440px) {

	:root {
		--mpj-job-hero-duration: 42s;
	}

}

/* =====================================================
 * 超大型PC・4K画面
 * -----------------------------------------------------
 * 横幅に合わせて自然に拡大します。
 * 高さの上限は設定しません。
 * ===================================================== */

@media (min-width: 1920px) {

	.mpj-job-hero__inner,
	.mpj-job-hero__viewport,
	.mpj-job-hero__slide {
		width: 100%;
		aspect-ratio: var(--mpj-job-hero-ratio);
	}

	.mpj-job-hero__image {
		width: 100%;
		height: auto;
	}

}

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

@media (min-width: 768px) and (max-width: 1023px) {

	:root {
		--mpj-job-hero-duration: 32s;
	}

}

/* =====================================================
 * スマートフォン
 * -----------------------------------------------------
 * 画像を切らず、画面幅に合わせて縮小します。
 * ===================================================== */

@media (max-width: 767px) {

	:root {
		--mpj-job-hero-duration: 27s;
	}

	.mpj-job-hero {
		width: 100vw;
		max-width: 100vw;
		margin: 0;
		margin-left: calc(50% - 50vw);
		padding: 0;
	}

	.mpj-job-hero__inner,
	.mpj-job-hero__viewport,
	.mpj-job-hero__slide {
		width: 100%;
		aspect-ratio: var(--mpj-job-hero-ratio);
		min-height: 0;
		max-height: none;
	}

	.mpj-job-hero__image {
		position: static;
		width: 100%;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: center center;
	}

}

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

@media (max-width: 430px) {

	:root {
		--mpj-job-hero-duration: 24s;
	}

}

/* =====================================================
 * 横向きスマートフォン
 * ===================================================== */

@media (max-width: 900px) and (orientation: landscape) {

	:root {
		--mpj-job-hero-duration: 30s;
	}

}

/* =====================================================
 * アニメーション軽減設定
 * ===================================================== */

@media (prefers-reduced-motion: reduce) {

	.mpj-job-hero__track {
		transform: translate3d(0, 0, 0);
		animation: none;
	}

}