/**
 * トップページのファーストビュースタイルを管理する。
 *
 * ヘッダーとファーストビューの既存配置を維持し、
 * トップページだけへ適用する。
 * ファーストビューの意味クラスを使用し、
 * 管理バーに依存しない高さを維持する。
 */

.front-page-slider {
	background: #f8f4f6 url("../../../img/home/hero/main-01.jpg") center / cover no-repeat;
}

@media screen and (max-width: 768px) {
	.front-page-slider {
		background-image: url("../../../img/home/hero/main-01-mobile.jpg");
	}
}

@media screen and (min-width: 961px) {
	body.home .front-page-hero .front-page-slider-area,
	body.front-page .front-page-hero .front-page-slider-area,
	body.page-template-front-page .front-page-hero .front-page-slider-area {
		top: calc(var(--shs-header-large) - 24px);
		height: calc(100vh - var(--shs-header-large) + 24px);
		height: calc(100svh - var(--shs-header-large) + 24px);
	}

	body.home .front-page-slider,
	body.front-page .front-page-slider,
	body.page-template-front-page .front-page-slider {
		height: calc(100vh - var(--shs-header-large) + 24px);
		height: calc(100svh - var(--shs-header-large) + 24px);
	}

	body.home .front-page-hero::before,
	body.front-page .front-page-hero::before,
	body.page-template-front-page .front-page-hero::before {
		top: calc(var(--shs-header-large) - 24px);
		height: calc(100vh - var(--shs-header-large) + 24px);
		height: calc(100svh - var(--shs-header-large) + 24px);
	}
}

@media screen and (min-width: 961px) and (max-width: 1360px) {
	body.home .front-page-hero .front-page-slider-area,
	body.front-page .front-page-hero .front-page-slider-area,
	body.page-template-front-page .front-page-hero .front-page-slider-area,
	body.home .front-page-hero::before,
	body.front-page .front-page-hero::before,
	body.page-template-front-page .front-page-hero::before {
		top: calc(var(--shs-header-large) - 20px);
		height: calc(100vh - var(--shs-header-large) + 20px);
		height: calc(100svh - var(--shs-header-large) + 20px);
	}

	body.home .front-page-slider,
	body.front-page .front-page-slider,
	body.page-template-front-page .front-page-slider {
		height: calc(100vh - var(--shs-header-large) + 20px);
		height: calc(100svh - var(--shs-header-large) + 20px);
	}
}