/* =====================================
作品の紹介パターンの管理用css (test)
======================================= */

/*
<div class="fadeIn-base" data-fadein-image="cover400">
	<img class="fadeIn-image">
</div>

対象の画像にclass="fadeIn-image"をつける
直上の要素にclass="fadeIn-base"とdata属性をセット値は画僧の縦横比に合わせる

※ファーストビューの画像では遅延読み込みの除外を推奨
・classに"fadeIn-image-fv" をつける
・loading="eager"　と
・fetchpriority="high"　も推奨

実際に読み込むJSはframeにある frame外で使うときはjsも持ってくる
*/

/* =====================================
画像読み込みのCLS対策
画像の表示領域を確保し、読み込み完了後にふわっと表示させる。

======================================= */

/* ふわっと表示させる */
.fadeIn-base {
	display: flex;
	justify-content: center;
	background: #f2f2f2;
	position: relative;
}
.fadeIn-base:before {
	content: "";
	display: block;
	height: 0;
	width: 0;
	z-index: 0;
}
.fadeIn-base[data-fadein-image="cover400"]:before {
	padding-bottom: 142.3%;	/* 縦横 281*400を想定 */
}
.fadeIn-base[data-fadein-image="cover200"]:before {
	padding-bottom: 142.3%;	/* 最終的な表示比率 */
}
.fadeIn-base[data-fadein-image="cover400200"]:before {
	padding-bottom: 50%;
}
.fadeIn-base[data-fadein-image="banner989180"]:before {
	padding-bottom: 18.2%;
}
.fadeIn-base[data-fadein-image="banner250250"]:before {
	padding-bottom: 100%;
}
.fadeIn-base[data-fadein-image="banner300250"]:before {
	padding-bottom: 83.3%;
}
.fadeIn-base[data-fadein-image="banner60060"]:before {
	padding-bottom: 10%;
}
.fadeIn-base[data-fadein-image="cover400"]:after {
	content: "";
	display: block;
/*
	height: 16px;
	width: 60px;
	background-image: url(https://en-checkr.ebookrenta.com/renta/img/_en/logo/renta_en_logo.svg);
	filter: grayscale(0.7) brightness(1.1) contrast(0.9);
*/
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -8px;
}
.fadeIn-image {
	width: 100%;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	object-fit: contain;
	z-index: 2;
	max-width: fit-content;
}
.fadeIn-image-loaded {
	opacity: 1;
}