/**
 * お問い合わせページ
 * HERO
 *
 * スマートフォンから大画面PCまで、
 * 画面の端から端へ画像を表示します。
 */

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

.lilac-contact-hero {
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 0 -50vw;
	padding: 0;
	overflow: hidden;
	background: #ffffff;
	line-height: 0;
}

/* =====================================================
 * HERO内部
 * ===================================================== */

.lilac-contact-hero__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}

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

.lilac-contact-hero__image,
.lilac-contact-hero img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: center;
}

/* =====================================================
 * テーマ側の画像余白を解除
 * ===================================================== */

.lilac-contact-hero figure,
.lilac-contact-hero picture {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	line-height: 0;
}

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

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

	.lilac-contact-hero {
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		margin-left: -50vw;
	}

	.lilac-contact-hero__inner {
		width: 100%;
		max-width: none;
	}

	.lilac-contact-hero__image,
	.lilac-contact-hero img {
		width: 100% !important;
		height: auto !important;
	}
}

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

@media screen and (max-width: 767px) {

	.lilac-contact-hero {
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		margin-left: -50vw;
		overflow: hidden;
	}

	.lilac-contact-hero__inner {
		width: 100%;
		max-width: none;
	}

	.lilac-contact-hero__image,
	.lilac-contact-hero img {
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		object-fit: contain;
		object-position: center;
	}
}