/*firstScreen*/
[data-enablefirstscreen="true"] {
	overflow: hidden;
	padding-right: var(--scrollbar-width);
}
.firstScreen {
	position: fixed;
	z-index: 100;
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: #fff;
}
[data-enablefirstscreen="true"] .firstScreen {
	display: block;
}
.firstScreen .titles {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.firstScreen .titles .logo {
	width: 60%;
	max-width: 300px;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
.firstScreen[data-isloading="true"] .titles::before {
	content: "";
	background-image: url(/share/im/prl_ring.png);
	background-position: center center;
	background-size: contain;
	display: inline-block;
	position: absolute;
	width: 2em;
	height: 2em;
	top: 3em;
	right: 3em;
	opacity: 0.8;
}
@media only screen and (max-width:640px) {
	.firstScreen[data-isloading="true"] .titles::before {
		width: 1.2em;
		height: 1.2em;
		top: 2em;
		right: 2em;
	}
}
.firstScreen .ims {
	position: relative;
	height: 100%;
}	
.firstScreen .cast {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 0.5s;
}
.firstScreen .cast[data-enable="true"] {
	opacity: 1.0;
}
.firstScreen .cast .bgi {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*cast*/
.firstScreen .cast.illust {
	transform: scale(2.4);
	transition: all 0.8s ease-in-out;
}
.firstScreen .cast.illust[data-enable="true"] {
	transform: scale(1.8) rotate(-5deg);
}
@media only screen and (max-width:640px) {
	.firstScreen .cast.illust[data-enable="true"] {
		transform: scale(1.9) rotate(-5deg);
	}
}
.firstScreen .cast[data-itemid="illust01"] {
	transition: all 0.6s ease-in-out;
}
.firstScreen .cast[data-itemid="illust02"] {
	transition: all 1.0s ease-in-out;
}
.firstScreen .cast[data-itemid="illust03"] {
	transition: all 0.5s ease-in-out;
}

/*flow*/
.firstScreen .ims {
	transition: all 10.0s;
}
.firstScreen[data-isloading=""] .ims {
	transform: scale(0.92);
}
.firstScreen[data-flowid="hidden"] {
	transition: all 0.8s ease-in;
	opacity: 0.0;
}
.firstScreen[data-flowid="hidden"] .cast.illust {
	transition: all 1.0s ease-in;
	transform: scale(1.2);
}
.firstScreen[data-flowid="hidden"] .cast.illust[data-itemid="illust01"] {
	transition-delay: 0.1s;
}
.firstScreen[data-flowid="hidden"] .cast.illust[data-itemid="illust02"] {
	transition-delay: 0.05s;
}
.firstScreen[data-flowid="hidden"] .cast.illust[data-itemid="illust03"] {
	transition-delay: 0.0s;
}