@charset "utf-8";

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

/* cast */
#cast{
	position: relative;
	margin: 0;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
#cast #ttl{
	position: relative;
	margin: 45px auto 0 auto;
	width: 100%;
	height: 0;
	padding-top: 44.20%;
	background-image:url("../img/cast/bg_cast.jpg");
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity .3s ease-out;
}
#cast #ttl h2{
	position: absolute;
	bottom: 20px;
	right: 10px;
	color: #ffffff;
	font-size: min(3vw, 150%);
	height: 1em;
}
#cast #ttl h2 span {opacity: 0;}
@keyframes ttlAni {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#cast h3{
	position: relative;
	margin: 20px auto 30px auto;
	text-align: center;
	color: #000000;
	font-size: min(6vw, .24rem);
	font-weight: 900;
}
#cast ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	gap:50px 0;
}
#cast ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#cast ul li .chara, #cast ul li .Img, #cast ul li .Txt{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 530px;
}
#cast ul li .chara img{
	position: relative;
	margin: 0 auto;
}
#cast ul li .chara p{
	position: relative;
	margin: 8px auto;
	line-height: 1.3em;
	font-weight: bold;
	font-size: 105%;
}
#cast ul li .Txt p{
	font-size: 90%;
	line-height: 1.6em;
}
#cast ul li .Txt .name{
	padding: 10px 0;
	font-weight: bold;
	font-size: 100%;
}


#staff{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
}
#staff h3{
	position: relative;
	margin: 70px auto 30px auto;
	text-align: center;
	color: #000000;
	font-size: min(6vw, .24rem);
	font-weight: 900;
}
#staff ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	gap:50px 0;
}
#staff ul li{
	position: relative;
	margin: 0 auto 30px auto;
	width: 100%;
}
#staff ul li .Txt{position: relative;margin: 0 auto;width: 100%;}
#staff ul li .Txt p{
	position: relative;
	margin: 8px auto;
	font-size: 90%;
	line-height: 1.6em;
}
#staff ul li .Txt .name{
	padding:  20px 0 0 0;
	font-weight: bold;
	font-size: 105%;
	border-bottom: solid 1px #000000;
}
#staff ul li.rev{flex-direction: column-reverse;}

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

	/* cast */
	#cast #ttl{margin: 0 auto;}
	#cast #ttl h2{
		position: absolute;
		top: 2%;
		left: auto;
		right: 2%;
	}

	#cast h3{
		margin: 50px auto 70px auto;
		font-size: min(5vw, .34rem);
	}
	#cast ul{
		width: calc(100% - 60px);
		max-width: 1100px;
		gap:50px 20px;
	}
	#cast ul li{
		margin: 0;
		width: calc(50% - 10px);
	}
	#cast ul li.order1{order: 1;}
	#cast ul li.order2{order: 2;}
	#cast ul li.order3{order: 3;}
	#cast ul li.order4{order: 4;}
	#cast ul li.order5{order: 5;}
	#cast ul li.order6{order: 6;}
	#cast ul li.order7{order: 7;}
	#cast ul li.order8{order: 8;}
	#cast ul li .chara p{
		margin: 8px auto;
		line-height: 1.3em;
		font-size: min(1.05vw, 102%);
	}
	#cast ul li .Txt p{
		font-size: 86%;
		line-height: 1.7em;
	}
	#cast ul li .Txt .name{
		padding: 10px 0;
		font-weight: bold;
		font-size: min(1.15vw, 102%);
	}

	#staff{padding-bottom: 60px;}
	#staff h3{
		margin:100px auto 70px auto;
		font-size: min(5vw, .34rem);
	}
	#staff ul{width: calc(100% - 60px);max-width: 1100px;}
	#staff ul li{margin: 0 auto;gap:0 30px;}
	#staff ul li .Img{
		position: relative;
		margin: 0;
		width: 40%;
	}
	#staff ul li .Txt{margin: 0;width: calc(60% - 30px);}
	#staff ul li .Txt p{
		font-size: 86%;
		line-height: 1.6em;
		padding: 0 0 50px 0;
	}
	#staff ul li .Txt p.name{margin: 0 auto;padding: 0;}
	#staff ul li.rev{flex-direction: row;}

}