@charset "utf-8";
/* CSS Document */

#MenuContents{margin-top:10px;}

#MovieContents{width:100%; height:100%; z-index:100; position:absolute; top:0px;}

#AnimationArea{width:100%; height:100%; position:absolute; top:0px;}

#WrapperMainContents{

}
#Navigation{position:absolute; top:14px; left:10px;}

#MainContents{min-height:1180px;width:1200px; margin:0 auto;}

#TwitterContents{
		background-image:url(../image/common/TitleTwitterSide.png), url(../image/common/BgFooterSideContents.png);
		background-repeat:no-repeat;
		background-position:left top, left bottom;
		padding:91px 0 23px;
		font-size:85%;
		margin-top:15px;
		position:absolute; top:0; right:10px;
		z-index: 100;
	}
		#TwitterContents div{background:url(../image/common/BgSideContents.png) repeat-y; padding:5px 30px 0; height:650px;}
		.TwitterContentsLowPage div{height:180px !important;}
		.TwitterContentsLowPage iframe{height:170px !important; min-height:170px !important;}


#FooterIndex{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,f01288+51&0+0,1+51 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(240,18,136,1) 51%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(240,18,136,1) 51%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(240,18,136,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f01288',GradientType=0 ); /* IE6-9 */ }


	* { position: relative; }
	body {

	}
	
	#BG {
		width:100%;
		min-height:1000px;
		z-index:1;
		background-image: url(../image/common/BgWrapper.gif);
		background-size:100%;
		top:0;
		left:0;
		position:absolute;
	}
	#FrontBG {
		background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(240,18,136,1) 51%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(240,18,136,1) 51%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(240,18,136,1) 51%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f01288',GradientType=0 ); /* IE6-9 */ padding:100px 0 0;
		z-index: 100000000;
		left: 0;
		top: 870px;
		position: absolute;
		height: 200px;
		width: 100%;
	}
		#canvas {
			z-index:5;
		}
.mainImg{padding-top: 20px;}
	#MainContents {
		min-height: 970px;
		position: absolute;
		top: 0;
		width: 1076px;
		left: 0;
		right: 0;
		margin: auto;
	}
		#MainContents .logo,
		#MainContents .times,
		#MainContents .logoTvAnime {
			position:absolute;
			display:block;
		}
			#MainContents .logo{
				left: 205px;
 				bottom: 200px;
			}
			#MainContents .times{
				right: 0;
			    bottom: 225px;
			}
			#MainContents .logoTvAnime {
				left: 0;
				right: 0;
				top: 638px;
				margin: auto;
				z-index: 999;
			}
			/* for LogoAnimation */
			#MainContents .logoChange {
				left: 0;
				right: 0;
				top: 755px;
				width: 552px;
				height: 195px;
				position: absolute;
				margin: auto;
			}
				#MainContents .logoChange > img{
					position:absolute;
					top:0;
					left:0;
					animation-duration: 15s;
					animation-timing-function: ease;
					animation-iteration-count: infinite;
					animation-delay: 5s;
				}
				@keyframes fadeAnime1 {
					0%    { opacity:0; }
					16.5% { opacity:1; }
					33%   { opacity:0; }
					49.5% { opacity:0; }
					66%   { opacity:0; }
					82.5% { opacity:0; }
					100%  { opacity:0; }
				}
				@keyframes fadeAnime2 {
					0%    { opacity:0; }
					16.5% { opacity:0; }
					33%   { opacity:1; }
					49.5% { opacity:0; }
					66%   { opacity:0; }
					82.5% { opacity:0; }
					100%  { opacity:0; }
				}

				@keyframes fadeAnime3 {
					0%    { opacity:0; }
					16.5% { opacity:0; }
					33%   { opacity:0; }
					49.5% { opacity:1; }
					66%   { opacity:0; }
					82.5% { opacity:0; }
					100%  { opacity:0; }
				}

				@keyframes fadeAnime4 {
					0%    { opacity:0; }
					16.5% { opacity:0; }
					33%   { opacity:0; }
					49.5% { opacity:0; }
					66%   { opacity:1; }
					82.5% { opacity:0; }
					100%  { opacity:0; }
				}

				@keyframes fadeAnime5 {
					0%    { opacity:0; }
					16.5% { opacity:0; }
					33%   { opacity:0; }
					49.5% { opacity:0; }
					66%   { opacity:0; }
					82.5% { opacity:1; }
					100%  { opacity:0; }
				}
				

	#Navigation {
		position:relative;
		z-index:100;
	}
	#AnimationArea {
		padding-left:200px;
		text-align: center;
		z-index: 2;
		overflow:hidden;
	}
	#FooterIndex {
		width: 100%;
		z-index: 5;
	}
		#FooterContents {
			width:980px;
		}
	
	#fuwafuwa {
		display: block;
		width: 89px;
		height: 80px;
		background: url(../image/common/BGbtnTopPage.png) no-repeat;
		text-align: center;
		padding-top: 31px;
		cursor: pointer;
		position: fixed;
		bottom: 35px;
		right: 30px;
		z-index: 9999;
		position: fixed;
	}

	#MovieContents {
		background-color: rgba(0,0,0,0.7);
		z-index: 10000;
	}

		#MovieContents .MovieContentsInner{
			width:853px;
			height:920px;
			margin: 40px auto;
		}
		#MovieContents .controls {
			/*min-height:112px;*/
			min-height:46px;
			padding:20px;
		}
			#MovieContents .controls .logos {
				margin:auto;
				display:block;
			}
			#MovieContents .controls .btnClose {
				width:59px;
				height:24px;
				position:absolute;
				right:0;
				bottom:10px;
				z-index:100;
			}
._animation {
  -webkit-animation: animation 500ms linear both;
  animation: _animation 500ms linear both;
}
@keyframes _animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -20, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -20, 0, 1); }
  2.7% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -12.226, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -12.226, 0, 1); }
  5.41% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.685, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.685, 0, 1); }
  8.11% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.048, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.048, 0, 1); }
  10.71% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.513, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 8.513, 0, 1); }
  13.71% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.119, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 6.119, 0, 1); }
  16.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.537, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.537, 0, 1); }
  19.62% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.264, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.264, 0, 1); }
  22.52% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.481, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.481, 0, 1); }
  28.43% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.598, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.598, 0, 1); }
  34.33% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.423, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.423, 0, 1); }
  46.05% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.582, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.582, 0, 1); }
  57.86% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.238, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.238, 0, 1); }
  69.57% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.097, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.097, 0, 1); }
  81.38% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04, 0, 1); }
  93.19% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.016, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.016, 0, 1); }
  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@media screen and (max-width: 1290px) {
  #MainContents{
	left: auto;
	margin-left:200px;
  }
}

.bnr{display:inline-block; vertical-align:bottom; margin-bottom:10px;}
	.bnr img{border:1px solid #000;}

#wrapperRightBnr{
	position: absolute;
    top: 20px;
    right: 10px;
}


/* POPUP処理 */
.btnPopUp{cursor: pointer; color:#f01288; text-decoration: underline;}
.btnPopUp:hover{ text-decoration: none;}
#popUpContents {
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.7);
		position: fixed;
		top: 0px;
		z-index: 1000;
		transition: all .4s;
	}
#popUpContents section{width: 852px; position: absolute; padding: 30px 35px; left: 0; right: 0; margin: auto;}
#popUpContents section h2{font-size: 150%; text-align: center; padding: 5px 0; font-weight: bold; background: #f01288; color: #fff; margin-bottom: 20px;}
#popUpContents section p{margin-bottom: 15px;}
#popUpContents section h3{padding-bottom: 5px; margin: 20px 0 10px; border-bottom: 1px solid;}

#btnClose{padding: 10px; background: #000;color: #fff; text-align: center; margin: 30px auto 0; width: 300px; position: relative; cursor: pointer;transition: all .4s;}
#btnClose:after {
		content: "\f105";
		font-family: FontAwesome;
		position: absolute;
		right: 7px;
		top: 0;
		height: 24px;
		bottom: 0;
		margin: auto;
		font-size: 1.2rem;
}
#btnClose:hover{opacity: 0.6;}