/**
 * 校長挨拶ページの下層ヒーロー画像位置を調整する。
 *
 * 人物が文字領域と重ならないよう、画面幅ごとに画像の表示位置とグラデーション範囲を切り替える。
 * 下層ヒーロー本体の寸法や文字組みはassets/css/shared/lower-pages/components.cssを正とする。
 */

@media screen and (min-width: 821px) {
	.shs-lower-hero--principal {
		--lower-hero-image-position: 50% 30%;
	}

	.shs-lower-hero--principal .shs-lower-hero__visual {
		inset: 0 0 0 50%;
		display: block;
		background: transparent;
	}

	.shs-lower-hero--principal .shs-lower-hero__visual::before {
		width: 30%;
		background: linear-gradient( 90deg, #fff 0%, rgba(255, 255, 255, 0.76) 32%, transparent 100% );
	}

	.shs-lower-hero--principal .shs-lower-hero__visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

@media screen and (max-width: 820px) {
	.shs-lower-hero--principal {
		--lower-hero-image-position: 52% 24%;
	}

	.shs-lower-hero--principal .shs-lower-hero__visual img {
		object-fit: cover;
	}
}

@media screen and (max-width: 600px) {
	.shs-lower-hero--principal {
		--lower-hero-image-position: 52% 20%;
	}

	.shs-lower-hero--principal .shs-lower-hero__visual {
		min-height: 360px;
	}
}