@charset "utf-8";

:root {

}

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

		--KeyImage_Figure_aspect_ratio: 16 / 9;
		--KeyImageBefore_background-size: 60px;

	}
}

@media screen and (min-width:426px) and (max-width: 768px) {
	:root {

		--KeyImage_Figure_aspect_ratio: 16 / 9;
		--KeyImageBefore_background-size: 120px;

	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		--KeyImage_Figure_aspect_ratio: 3 / 1;
		--KeyImageBefore_background-size: 120px;

	}
}

@media screen and (min-width:1025px) and ( max-width:1440px) {
	:root {

		--KeyImage_Figure_aspect_ratio: 3 / 1;
		--KeyImageBefore_background-size: 120px;

	}
}

@media screen and (min-width:1441px) and ( max-width:2560px) {
	:root {

		--KeyImage_Figure_aspect_ratio: 3 / 1;
		--KeyImageBefore_background-size: 120px;

	}
}

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

		--KeyImage_Figure_aspect_ratio: 3 / 1;
		--KeyImageBefore_background-size: 120px;

	}
}








/**
 * キービジュアル
 */
div#KeyImage {
	position: relative;
	display: flex;
	margin: var(--Margin_M);
	width: 100%;
	border-bottom: var(--Border2_N100);
	& figure {
		position: relative;
		display: block;
		padding: 0;
		width: 100%;
		overflow: hidden;
		aspect-ratio: var(--KeyImage_Figure_aspect_ratio);
		& img {
			width: 100%;
		}
		& video {
			width: 100%;
		}
	}
}
div#KeyImage:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('https://rokuten.jp/wp-content/themes/Rokuten/svg/mon_ff.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: var(--KeyImageBefore_background-size);
	z-index: 1900;
}