/**
 * =====================================================
 * みつピタジョブ
 * 職業紹介求人応募ページ
 * 上部HERO
 * -----------------------------------------------------
 * ・画像全体を切らずに表示
 * ・2048×768の比率を維持
 * ・スマホ〜PC大画面まで自動リサイズ
 * ・横幅いっぱいに表示
 * ・高さの固定、強制トリミングなし
 * =====================================================
 */

/* -----------------------------------------------------
 * HERO全体
 * ----------------------------------------------------- */

.mpj-referral-entry__hero {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

/* -----------------------------------------------------
 * HERO画像の表示領域
 * ----------------------------------------------------- */

.mpj-referral-entry__hero-inner {
	width: 100%;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

/* -----------------------------------------------------
 * HERO画像
 * ----------------------------------------------------- */

.mpj-referral-entry__hero-image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;

	/**
	 * 画像全体を表示し、
	 * 切り抜きは行いません。
	 */
	object-fit: contain;
	object-position: center;

	/**
	 * 画像本来の比率を維持します。
	 */
	aspect-ratio: 8 / 3;
}

/* -----------------------------------------------------
 * PC大画面
 * ----------------------------------------------------- */

@media (min-width: 1440px) {

	.mpj-referral-entry__hero-image {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

}

/* -----------------------------------------------------
 * 通常PC
 * ----------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1439px) {

	.mpj-referral-entry__hero-image {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

}

/* -----------------------------------------------------
 * タブレット
 * ----------------------------------------------------- */

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

	.mpj-referral-entry__hero-image {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

}

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

@media (max-width: 767px) {

	.mpj-referral-entry__hero {
		background: #ffffff;
	}

	.mpj-referral-entry__hero-inner {
		width: 100%;
		overflow: hidden;
	}

	.mpj-referral-entry__hero-image {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
		aspect-ratio: auto;
	}

}

/* -----------------------------------------------------
 * 超小型スマートフォン
 * ----------------------------------------------------- */

@media (max-width: 430px) {

	.mpj-referral-entry__hero-image {
		width: 100%;
		height: auto;
		object-fit: contain;
		object-position: center;
	}

}