/**
 * 関西限定
 * 企業紹介ページ制作・運営プラン
 * HERO
 */

.lilac-company-profile-hero {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
	overflow: hidden;
}

.lilac-company-profile-hero__inner {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.lilac-company-profile-hero__image-wrap {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	background:
		linear-gradient(
			135deg,
			#faf8ff 0%,
			#ffffff 55%,
			#f5f9ff 100%
		);
	overflow: hidden;
}

/**
 * 関西限定ラベル
 */
.lilac-company-profile-hero__area-label {
	position: absolute;
	z-index: 2;
	top: clamp(16px, 2.2vw, 34px);
	left: clamp(16px, 4vw, 72px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	margin: 0;
	padding: 10px 22px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: rgba(92, 61, 132, 0.94);
	box-shadow:
		0 8px 24px rgba(55, 38, 75, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.18);
	color: #ffffff;
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.12em;
	white-space: nowrap;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.lilac-company-profile-hero__image {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0 auto;
	object-fit: contain;
	object-position: center;
}

body.admin-bar .lilac-company-profile-hero {
	margin-top: 32px;
}

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

	body.admin-bar .lilac-company-profile-hero {
		margin-top: 46px;
	}
}

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

	.lilac-company-profile-hero__area-label {
		top: 14px;
		left: 14px;
		min-width: 96px;
		padding: 8px 16px;
		font-size: 12px;
		letter-spacing: 0.08em;
	}

	.lilac-company-profile-hero__image {
		width: 100%;
		min-height: 250px;
		object-fit: cover;
		object-position: center;
	}
}

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

	.lilac-company-profile-hero__area-label {
		top: 10px;
		left: 10px;
		min-width: 88px;
		padding: 7px 14px;
		font-size: 11px;
	}
}

@media screen and (min-width: 1600px) {

	.lilac-company-profile-hero__image-wrap {
		display: flex;
		justify-content: center;
	}

	.lilac-company-profile-hero__image {
		width: 100%;
		max-width: 1920px;
	}
}