/**
 * トップページのスマートフォン向けファーストビュー微調整。
 *
 * PC・タブレットの既存レイアウトを一切変更せず、横幅600px以下だけで
 * 見出し位置と Follow Us の可読性を調整する。
 */

@media screen and (max-width: 600px) {
	body.home .front-page-hero::before,
	body.front-page .front-page-hero::before,
	body.page-template-front-page .front-page-hero::before {
		background: radial-gradient(
			ellipse 95% 58% at 14% 62%,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.82) 34%,
			rgba(255, 255, 255, 0.46) 56%,
			rgba(255, 255, 255, 0.16) 72%,
			rgba(255, 255, 255, 0) 88%
		);
	}

	/**
	 * トップページのスマートフォン表示は、FV見出しだけ左揃えとし、
	 * 補足コピーとCTAは画面中央を基準にする。
	 */
	body.home .front-hero-copy,
	body.front-page .front-hero-copy,
	body.page-template-front-page .front-hero-copy {
		top: calc(var(--shs-header-large) + clamp(202px, 31svh, 242px));
		left: 50%;
		width: calc(100% - 40px);
		text-align: left;
		transform: translateX(-50%);
	}

	/* 「未来へ共に歩むサポート校」もFV見出しと同じ左基準に揃える。 */
	body.home .front-hero-copy__support,
	body.front-page .front-hero-copy__support,
	body.page-template-front-page .front-hero-copy__support {
		margin-right: 0;
		margin-left: 0;
		text-align: left;
	}

	/* CTAは従来どおり中央揃えを維持する。 */
	body.home .front-hero-copy__button,
	body.front-page .front-hero-copy__button,
	body.page-template-front-page .front-hero-copy__button {
		margin-right: auto;
		margin-left: auto;
	}

	/* Follow Usは見出しと同じく左基準に固定する。 */
	body.home .front-page-hero dl,
	body.front-page .front-page-hero dl,
	body.page-template-front-page .front-page-hero dl {
		left: 16px;
		right: auto;
		width: max-content;
		max-width: calc(100% - 32px);
		isolation: isolate;
		margin: 0;
		padding: 0;
		background: transparent;
		text-align: left;
		transform: none;
	}

	body.home .front-page-hero dl::before,
	body.front-page .front-page-hero dl::before,
	body.page-template-front-page .front-page-hero dl::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset: -30px -46px -28px -34px;
		pointer-events: none;
		background: radial-gradient(
			ellipse 95% 58% at 50% 50%,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.82) 34%,
			rgba(255, 255, 255, 0.46) 56%,
			rgba(255, 255, 255, 0.16) 72%,
			rgba(255, 255, 255, 0) 88%
		);
	}
}

@media screen and (max-width: 600px) and (max-height: 680px) {
	body.home .front-page-hero::before,
	body.front-page .front-page-hero::before,
	body.page-template-front-page .front-page-hero::before {
		background: radial-gradient(
			ellipse 95% 58% at 14% 60%,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.82) 34%,
			rgba(255, 255, 255, 0.46) 56%,
			rgba(255, 255, 255, 0.16) 72%,
			rgba(255, 255, 255, 0) 88%
		);
	}

	body.home .front-hero-copy,
	body.front-page .front-hero-copy,
	body.page-template-front-page .front-hero-copy {
		top: calc(var(--shs-header-large) + clamp(185px, 30svh, 205px));
	}
}