@charset "utf-8";

.contents{opacity: 0;}
@keyframes dispAnimation {
	0% {
		opacity: 0;
	}
	100% {
	  opacity: 1;
	}
}

/* story */
#story{
	position: relative;
	margin: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
#story #ttl{
	position: relative;
	margin: 45px auto 0 auto;
	width: 100%;
	height: 0;
	padding-top: 58.333%;
	background-image:url("../img/story/bg_story.jpg");
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .3s ease-out;
}
#story #ttl h2{
	position: absolute;
	top: 5px;
	left: 5px;
	color: #ffffff;
	font-size: min(3vw, 150%);
	height: 1em;
}
#story #ttl h2 span {opacity: 0;}
@keyframes ttlAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#story #ttl #catch{
	position: absolute;
	bottom: 8%;
	left: 5px;
	width: 64%;
	opacity: 0;
	transition: opacity .8s ease-out;
}
#story #Txt{
	position: relative;
	margin: 20px auto  0 auto;
	padding-bottom: 20px;
	width: calc(100% - 30px);
	opacity: 0;
	text-align:justify;
	transition: opacity .8s ease-out 0.5s;
}

.photoWrap{
	position: relative;
	margin: 2px auto;
	opacity: 0;
}

#cast{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	background: #D6007F;
	background: linear-gradient(180deg,rgba(214, 0, 127, 1) 0%, rgba(127, 16, 132, 1) 50%, rgba(29, 32, 136, 1) 100%);
}
#cast h3{
	position: relative;
	margin: 0 auto 20px auto;
	text-align: center;
	color: #ffffff;
	font-size: min(8vw, .34rem);
	font-weight: 900;
	max-width: 10em;
}
#cast h3 p{
	position: relative;
	margin: 0 auto 10px auto;
	border-bottom: solid 1px #ffffff;
	padding-bottom: 4px;
	font-size: 80%;
}
#cast ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	gap:10px 0;
}
#cast ul li{
	position: relative;
	margin: 0;
	width: 100%;
}


/* ----- pc ----- */
@media screen and (min-width: 799px) and (orientation: landscape) {

	/* story */
	#story #ttl{margin: 0 auto;}
	#story #ttl h2{
		position: absolute;
		top: 2%;
		left: auto;
		right: 2%;
	}
	#story #ttl #catch{
		position: absolute;
		bottom: 18em;
		left: 2%;
		width: 40%;
		line-height: 1.8em;
		font-size: min(1.3vw, .16rem);
	}
	#story #Txt{
		position: relative;
		margin: 0 0 -12.5em 0;
		top: -15em;
		line-height: 1.8em;
		left: 2%;
		padding-bottom: 20px;
		width:90%;
		color: #ffffff;
		z-index: 20;
		height: 11em;
		font-size: min(1.3vw, .16rem);
	}

	#cast{padding: 40px 0;}
	#cast h3{
		margin: 0 auto 30px auto;
		font-size: min(9vw, .38rem);
		max-width: 10em;
	}
	#cast h3 p{
		margin: 0 auto 20px auto;
		padding-bottom: 8px;
		font-size: 80%;
	}
	#cast ul{
		max-width:960px;
		gap:6px;
	}
	#cast ul li{width: calc(33.33% - 5px);}



}