@charset "UTF-8";

/* ===== 下層ページの見出し画像（FV） =====
 * 固定ページの編集画面で登録した画像（header.php の .page-heading-wrap.has-fv > .page--fv）
 * 画像は切り抜かずにそのままの比率で表示する。角は CSS で丸める（登録する画像は角丸なしの四角でよい）
 * 見え方は、これまでのアイキャッチの見出し画像と同じにする
 * ・992px 以上：見出しの文字の下に画像
 * ・991px 以下：画像の上に見出しの文字を重ねる */
.page-background-image .page-heading-wrap.has-fv {
	display: block;
}
.page-background-image .page--fv img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 992px) {
	/* 見出しの下 70px に画像、画像の下はパンくずとの間（30px）だけにする */
	.page-background-image .page-heading-wrap.has-fv {
		margin-bottom: 0;
	}
	.page-background-image .page--fv {
		margin-top: 70px;
	}
	.page-background-image .page--fv img {
		border-radius: 10px;
	}
}

@media (max-width: 991px) {
	.page-background-image .page-heading-wrap.has-fv {
		position: relative;
	}
	.page-background-image .page--heading.has-fv {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0;
		text-shadow: 0 0 5px rgba(0, 0, 0, 1);
	}
	.page-background-image .page--fv img {
		border-radius: 6px;
	}
}