/* ======================================
横スクロールJS用css 
scrlx_irreg.js
scrlx_irreg.css


<div class="scrlItem_parentWrap"> ← 親要素 左右のpadding値が必要 0でも可

	<div class="recItem-titleWrap">
		<h2 class="recItem-title">Titles You Have Viewed Recently</h2>
	</div>

	<div class="scrlItem_contentWrap"> ← スクロールする枠 ここのID名が必要 ここの横幅が子要素全てを包括していないとsafariで縦スクロールが作動してしまう
		<div class="scrlItem-item">
			<a class="scrlItem-coverLink">
				<img>
				<p class="scrlItem-coverTitle"></p>
			</a>
		</div>
	</div>
</div>

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

/* レコメンド枠 */
.scrlItem_parentWrap {
	overflow: hidden;
}
.scrlItem_contentWrap {
	width: fit-content;
	display: flex;
}
.js-scrlItem-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.scrlItem-coverLink {
	display: block;
	width: 92px;
	overflow: hidden;
}
.scrlItem-coverImage__200 {
	width: 140%;
	margin-left: -20%;
	display: block;
}
.scrlItem-coverTitle {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	color: #442b2d;
	font-size: 12px;
	font-weight: 600;
	height: 32px;
}



/* === ■ クルクル関連 ==================================== */
[data-gra-type="for_you"] {
	position: relative;
	height: 205px;	/* CLS対応 作品表示後の枠の高さ */
}

/* 処理中のクルクル */
[data-gra-type="for_you"] .sk-circle {
	width: 40px;
	height: 40px;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}
[data-gra-type="for_you"] .sk-circle .sk-child {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
[data-gra-type="for_you"] .sk-circle .sk-child:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 15%;
	height: 15%;
	background-color: #f2506d; /* ベースの色 - 可変 */
	border-radius: 100%;
	-webkit-animation: gra-circleBounceDelay 1.2s infinite ease-in-out both;
					animation: gra-circleBounceDelay 1.2s infinite ease-in-out both;
}
[data-gra-type="for_you"] .sk-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
					transform: rotate(30deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
			-ms-transform: rotate(60deg);
					transform: rotate(60deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
					transform: rotate(90deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
			-ms-transform: rotate(120deg);
					transform: rotate(120deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
			-ms-transform: rotate(150deg);
					transform: rotate(150deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
					transform: rotate(180deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
			-ms-transform: rotate(210deg);
					transform: rotate(210deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
			-ms-transform: rotate(240deg);
					transform: rotate(240deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
					transform: rotate(270deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
			-ms-transform: rotate(300deg);
					transform: rotate(300deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
			-ms-transform: rotate(330deg);
					transform: rotate(330deg); }
[data-gra-type="for_you"] .sk-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
					animation-delay: -1.1s; }
[data-gra-type="for_you"] .sk-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
					animation-delay: -1s; }
[data-gra-type="for_you"] .sk-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
					animation-delay: -0.9s; }
[data-gra-type="for_you"] .sk-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
					animation-delay: -0.8s; }
[data-gra-type="for_you"] .sk-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
					animation-delay: -0.7s; }
[data-gra-type="for_you"] .sk-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
					animation-delay: -0.6s; }
[data-gra-type="for_you"] .sk-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
					animation-delay: -0.5s; }
[data-gra-type="for_you"] .sk-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
					animation-delay: -0.4s; }
[data-gra-type="for_you"] .sk-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
					animation-delay: -0.3s; }
[data-gra-type="for_you"] .sk-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
					animation-delay: -0.2s; }
[data-gra-type="for_you"] .sk-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
					animation-delay: -0.1s; }

@-webkit-keyframes gra-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
						transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
						transform: scale(1);
	}
}

@keyframes gra-circleBounceDelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0);
						transform: scale(0);
	} 40% {
		-webkit-transform: scale(1);
						transform: scale(1);
	}
}
/* === クルクル関連 ここまで ==================================== */


/* === メディアクエリ === */
@media screen and (min-width:360px){
}
@media screen and (min-width:600px){	/* ここからTAB想定 */
	[data-gra-type="for_you"] {
		height: 230px;
	}
	.scrlItem-coverLink {
		width: 110px;
	}
}
@media screen and (min-width:900px){	/* ここからPC想定 */

}