@charset "utf-8";

/*--------------------------------------
cast
----------------------------------------*/
#cast{
	width:100vw;
	height:164vw;
	padding-bottom:6%;
	position:relative;
  overflow-y: hidden;
  overflow-x: scroll;
}

#cast_inner{
	position:relative;
	width:130vw;
	height:164vw;
	background: url(../images/cast/cast_bg.jpg) no-repeat center top #fff;
	background-size:contain;
	position:relative;
}

#cast_inner #diagram{
	width:100%;
	height:100%;
	position:relative;
}

#cast_inner #diagram ul li img{
	width:9vw;
}

#cast_inner #diagram ul li:nth-child(1){
	width:41%;
	height:20%;
	position:absolute;
	left:2%;
	top:2%;
}

#cast_inner #diagram ul li:nth-child(1) img{
	position:absolute;
	right:0;
	bottom:0;
}

#cast_inner #diagram ul li:nth-child(2){
	width:41%;
	height:18%;
	position:absolute;
	right:0;
	top:4%;
}

#cast_inner #diagram ul li:nth-child(2) img{
	position:absolute;
	left:-5%;
	bottom:-2%;
}


#cast_inner #diagram ul li:nth-child(3){
	width:46%;
	height:24%;
	position:absolute;
	left:2%;
	top:26%;

}

#cast_inner #diagram ul li:nth-child(3) img{
	position:absolute;
	left:37%;
	bottom:0;
}

#cast_inner #diagram ul li:nth-child(4){
	width:41%;
	height:24%;
	position:absolute;
	right:7%;
	top:26%;
}

#cast_inner #diagram ul li:nth-child(4) img{
	position:absolute;
	left:-3%;
	bottom:-2%;
}

#cast_inner #diagram ul li:nth-child(5){
	width:18%;
	height:27%;
	position:absolute;
	left:5%;
	top:64%;
}

#cast_inner #diagram ul li:nth-child(5) img{
	position:absolute;
	right:-10%;
	bottom:32%;
}

#cast_inner #diagram ul li:nth-child(6){
	width:43%;
	height:24%;
	position:absolute;
	right:26%;
	top:69%;
}

#cast_inner #diagram ul li:nth-child(6) img{
	position:absolute;
	right:-3%;
	bottom:-2%;
}

#cast1, #cast2, #cast3, #cast4, #cast5, #cast6 {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
	background:rgba(255,255,255,0.95);
}

.btn_close{
	width:10%;
	position:fixed;
	right:0;
	top:0;
}

.cast_block{
	width: 100%;
	height:100%;
  overflow-y: scroll;
}

.cast_img{
	width:64% !important;
	margin:0 auto;
	padding-top:18%;
}

.cast_name{
	width:64% !important;
	margin:0 auto;
	padding-top:8%;
}

.profile{
	width:80%;
	margin:0 auto;
	font-size:3.0vw;
	line-height:1.6;
	padding-top:6%;
	border-bottom:2px solid #b9cec0;
	margin-bottom:7%;
	padding-bottom:7%;
}

.comment{
	width:36%;
	margin:0 auto;
}

.cast_message{
	width:80%;
	margin:0 auto;
	font-size:3.2vw;
	line-height:1.6;
	padding-top:6%;
	padding-bottom:10%;
}

/*--------------------------------------
animation
----------------------------------------*/
#cast,
#diagram ul li img{
	opacity:0;
}

.is_loaded #cast{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 1.0s;
          animation-duration: 1.0s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(1) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(2) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 1.0s;
          animation-delay: 1.0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(3) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(4) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(5) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.is_loaded #diagram ul li:nth-child(6) img{
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
          animation-duration: 0.4s;
  -webkit-animation-delay: 1.8s;
          animation-delay: 1.8s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}