@charset "utf-8";

#bg{
	width:100%;
	height:100vh;
	background: url(../images/cast/bg.jpg)no-repeat;
	background-size:cover;
	position:fixed;
	z-index:0;
}

#container{
	width:100%;
	height:100%;
	position:relative;
	z-index:10;
}

.container_inner{
	width:86%;
	margin:0 auto;
	position:relative;
}



/*--------------------------------------
contents
----------------------------------------*/

#container ul{
	width:80%;
	margin:0 auto;
	position:relative;
  justify-content: left;
  align-items: top;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

#container ul li{
	width:60%;
/*
	width:48%;
	margin-right:4%;
*/
	margin-bottom:6%;
	font-size:3.8vw;
}

#container ul.cast li:nth-child(2n),
#container ul.cast2 li:nth-child(2n) {
	width:40%;
	margin-right:0;
}

#container ul li span{
	font-size:2.6vw;
	color:#eb6d95;
	display:block;
}

#container ul li a span{
	font-size:2.6vw;
	color:#eb6d95;
	display:block;
	line-height:1em;
}

#container ul li a{
	text-decoration:none !important;
	color:#000;
	display:inline-block;
	background: url(../images/cast/icon.png) no-repeat right bottom;
	background-size:auto 64%;
	padding-right:20%;
}

#container ul li:nth-child(2) a{
	padding-right:30%;
}

#container ul.staff li:nth-child(1),
#container ul.staff li:last-child {
	width:100%;
}

#container ul.staff li {
	line-height:1.4;
}

#container ul.staff li p span {
	display:inline;
	color:#000;
	font-size:2.6vw;
}

#container ul.staff {
	padding-bottom:10%;
}

#container ul.staff li:nth-child(3),
#container ul.staff li:nth-child(5),
#container ul.staff li:nth-child(7),
#container ul.staff li:nth-child(9),
#container ul.staff li:nth-child(11),
#container ul.staff li:nth-child(13){
	width:40%;
}



/*--------------------------------------
modal
----------------------------------------*/
#cast01, #cast02, #cast03, #cast04, #cast05, #cast06, #cast07, #cast08, #cast09, #cast10 {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	background-color:#fffdd6;
}


.modal #btn_close{
	top:15px;
	right:15px;
	position:absolute;
	-webkit-transition: all 0.6s ease-out 3.6s;
  transition: all 0.6s ease-out 3.6s;
	width:12%;
}

.modal #btn_close:hover{
	cursor:pointer;
}

.modal .main{
	width:86%;
	margin:0 auto;
	padding-top:24%;
	font-size:3.8vw;
	line-height:1.9;
}

.modal .main .name{
	padding-bottom:2%;
}

.modal .main p{
	color:#8f7ad5;
}

.modal .main span{
	display:block;
	padding-bottom:8%;
}

/*--------------------------------------
animation
----------------------------------------*/
#container h1,
.cast,
.cast2,
#container h2,
.staff{
	opacity:0;
}

.is_loaded #container h1,
.is_loaded .cast,
.is_loaded .cast2,
.is_loaded #container h2,
.is_loaded .staff{
  -webkit-animation-name: fadeInSlide;
          animation-name: fadeInSlide;
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}



.is_loaded #container h1 {
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
}

.is_loaded .cast {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.is_loaded .cast2 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}

.is_loaded #container h2 {
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}

.is_loaded .staff {
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
}