body {
  margin: 0;
  padding: 0;
  background-attachment: fixed;
  background-size: cover;
}
 
/*  動画を背景に設定するスタイルシート  */

/* 
#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 1920px; 
  min-height: 1080px;
  width: auto; 
  height: auto;
  z-index: -100;
}
*/
#video-background {
  position: fixed;
  min-width:100%; 
  min-height:100%;
  width: 100%; 
  height: 100%;
  z-index: -100;
}

#timeout{
    position: fixed;
	z-index:9999;
	width:100vw;
	height:100vh;
    top:0;
    left:0px;
	color:#FFF;
    background:#000;
}


	.top_logo{
		position: fixed;
		z-index:999999;
		width:100vw;
		height:100vh;
		display:block;
		background:url(../image/index/logo.png) no-repeat center center rgba(0,0,0,1.00);
	}

	.top_txt{
		position: fixed;
		z-index:99999;
		width:100vw;
		height:100vh;
		display:block;
		background: url(../image/index/top_txt.png) no-repeat center center;
	}


	@media only screen and (max-width:780px) {
#timeout{
	display:none !important;
    background:none !important;
}


	.top_logo{
		display:none !important;
		background:none !important;
	}

	.top_txt{
		display:none !important;
		background:none !important;
	}



	#video-background {
		display:none !important;
	}
	#video-background2 {
		display:none !important;
	}
	.top_logo{
		background-size: 90% auto;
	}

	.top_txt{
		background-size: 90% auto;
	}
/*
#globalnav{ display:none;}
#globalnav{ animation-delay:9s;}
*/
#globalnav{ animation-delay:0.5s;}

	.sp_btn_box{
		position:relative;
	}

	.sp_btn{
		position: absolute;
		width:100%;
		display:block;
		top:0px;
		left:0px;
		padding:10px;
	}


#globalnav_top{
	/*
	margin:0;
	display:block;
	float: none;
	*/
	width: auto;
	display: table-cell;
	vertical-align:middle;
	float:right;
	height:auto;
	text-align:right;

}
#gnav_btn_top{
	max-width:65px;
	width:100%;
	background: none;
	margin:0px;
	display:block;
	float:right;
	}
	/*
#gnav_btn a {
	display: block;
	color:#FFF;
	padding:0px 0px;
}
*/
	#gnav_btn_top img{
		width:100%;
		height:auto;
	}



#globalnav_in_top{
	width: 100%;
	height:auto;
	position:absolute;
	display:block;
	top:100%;
	left: 0;
	z-index: 9999;
}
#globalnav_top ul{
	width:100%;
	display: block;
	display: none;
	background: rgba(0,0,0,0.85);
	padding:10px 0px;
	}


#globalnav_top li{
	width:50%;
	float:left;
	display:block;
}

	#globalnav_top li img{
		width:100%;
		height:auto;
		display:block;
	}
	

	#globalnav_top li:nth-child(7){
		width:100%;
	}
	#globalnav_top li:nth-child(8){
		width:100%;
	}
	#globalnav_top li:nth-child(9){
		width:100%;
	}
	#globalnav_top li:nth-child(10){
		width:100%;
	}



	}




/*audio*/
.soundBox{
	/*
	position: fixed;
	bottom:20px;
	right:20px;
	z-index:99999;
	*/
position:fixed;
top:100px;
right:20px;
z-index:999;

}
.soundBtn a{
	display:block;
}

.soundBtn a.sound_current{
	display:none;
}

@media only screen and (max-width:780px) {

.soundBox{
	display:none !important;
}


audio{
	display:none !important;
}

}


.audio	{
	position: fixed;
	bottom:20px;
	right:20px;
	z-index:99999;
}

.volume-off	{
	background: url(../image/index/audio_on.png) no-repeat center center;
	display:block;
	width:104px;
	height:33px;
}

.volume-up	{
	background: url(../image/index/audio.png) no-repeat center center;
	display:block;
	width:104px;
	height:33px;
}

/*layout*/
/*------------------------------------------------------------------------------*/
main{
	/*
	background: url(../image/news/bg.jpg) no-repeat center center fixed;
	background-size: cover ;
	*/

	background: none;


}


#main{
	padding:150px 0px 0px;
	background: url(../image/common/bg_container_index.png);
}



.cvp_box{
	padding-top:30px;
	background:rgba(0,0,0,1.00);
}


	@media only screen and (max-width:780px) {
			main{
				/*
				background-size: auto 100vh;
				*/
			}
#main{
	padding:0px 0px 0px;
}

#main .sp img{
	width:100%;
	height:auto;
	display:block;
}

#main .sp .sp_box{
	width:90%;
	display:table;
	margin: auto;
	margin-bottom: 2em;
}

#main .sp .sp_box_in{
	display:table-cell;
}
#main .sp .sp_box_in:first-child{width: 52%;}
#main .sp .sp_box_in:first-child a{
	margin-right: 8%;
	display: block;
}
#main .sp .sp_box_in:nth-child(3){
	display: table-row;
}
#main .sp .sp_box_in:nth-child(3) a{
	display: block;
}
.cvp_box{
	padding-top:30px;
}



	}
	
@media only screen and (min-width:781px) and (max-width:1024px){
	#main{
		padding-top:90px;
	}
}



h2{
	text-align:center;
	display:block;
	margin-bottom:100px;
}
	@media only screen and (max-width:780px) {
		h2{
			width:100%;
			height:auto;
			margin:0px auto 10px;
		}
		h2 img{
			width:100%;
			height:auto;
		}
	}





.frame{
	width:1000px;
	display:block;
	padding:0px;
	margin:0px auto 30px;
	background: rgba(255,255,255,0.80);
	color: #000;
}

	
	.frame_body{
		padding:50px;
	}

	.frame_body h3{
		font-size:160%;
		font-weight:bold;
	}

	.frame_body h4{
		font-size:120%;
		font-weight:bold;
	}


	.frame_img{
		margin:0 0 20px;
	}

	.frame_img img{
		width:100%;
		height:auto;
	}



	.frame_txt p{
		padding-bottom:20px;
	}
	
	
	@media only screen and (max-width:780px) {
	
	.frame{
		width:90%;
		margin:0px auto 30px;
	}

	
	.frame_body{
		padding:20px;
		position:relative;
	}

	
	}


/*index_main*/
/*------------------------------------------------------------------------------*/

.index_main{
	width:100%;
	min-height:100%;
	height:auto;
	display:block;
	padding-bottom:20px;
	position:relative;
}

.index_arr{
	width:100%;
	display:block;
	text-align:center;
	padding:0px 0px ;
}

	.index_logo{
		padding:90px 0px 30px;
		text-align:center;
		width:100%;
	}
		.index_logo img{
			margin:0px auto;
		}
	@media only screen and (min-width:781px) and (max-width:1024px) {
		.index_logo{
			padding-top:300px;
		}
		.index_arr{padding-top: 2em;}
	}
.index_main_box{
	width:1000px;
	margin:0px auto;
	display: block;
	position: relative;
}



	.index_main_left{
		/*padding-top:30px;*/
		width:649px;
		float:left;
		display: block;
		text-align:left;
	}
	
	
	.index_main_box_mini{
		width:100%;
		margin:0px auto;
		display: block;
		/*margin-bottom: 0.5em;*/
	}
	
		
		.index_main_left_mini{
			width:320px;
			display: block;
			float:left;
			position: relative;
			/*padding-left:15px;*/
		}
		.index_main_left_mini .yt{
			position: absolute;
			top: 0;
			bottom: 21px;
			right: 0;
			left: 0;
			margin: auto;
		}
/*
		.index_main_left_mini_link{
			padding-bottom:20px;
		}
*/	
		

		
			.index_main_news{
				display:block;
				background:url(../image/index/news_tit.png) no-repeat 10px center rgba(0,0,0,0.8);
				padding:10px 10px 10px 35px;
				height:85px;
				overflow: auto;
				border:1px solid #565656;
				border-radius:5px;
				width: 1000px;
				margin: auto;
				margin-top: 2em;
			}

			.index_main_news dl{
				padding:5px 0px;
				border-bottom:1px solid #565656;
					color: rgba(255,255,255,1.00);
				display: table;
				width:100%;
			}
				.index_main_news dt{
					width:90px;
					display:table-cell;
				}
				.index_main_news dd{
					display:table-cell;
				}
				.index_main_news dd a{
					color: rgba(255,255,255,1.00);
				}
				.index_main_news dd a:hover{
					color:rgba(183,183,183,0.70);
				}
		
	@media only screen and (min-width:781px) and (max-width:1024px) {
		.index_main{
			padding-bottom: 0px;
		}
		.index_main_box{
			width:946px;
			/*overflow: hidden;*/
		}
		.index_main_right{
			width: 440px !important;
			float: left;
		}
		.index_main_left{
			width: 580px;
		}
		.index_main_left_mini{
			width: 49% !important;
		}
		.index_main_right_mini{
			width: 48.5% !important;
		}
		.index_main_left_mini img,.index_main_right_mini img{
			width: 100%;
    		height: auto;
		}
		.index_main_left_mini img.yt,.index_main_right_mini img.yt{
			width: 20%;
		}
		.index_main_right img{
			width: 100%;
		}
		.banner_box{
			padding-top: 0px !important;;
		}
		.banner_box ul{
			width: 1000px !important;
		}
		.banner_box_in{
			width: 1024px !important;
		}
		.banner_box li:nth-child(1){
			left: 143px !important;
		}
		.banner_box li:nth-child(2){
			left: 424px !important;
		}
		.banner_box li:nth-child(3) {
    		left: 705px !important;
		}
		#video-background2{
			min-width: 1024px !important;
		}
		.system_img01{
			left: -10px !important;
		}
		.system_box01,.system_box02{
			width: 1024px !important;
			overflow: hidden;
		}
		.system_box01{height: 800px!important;;}
		.pc{
			overflow: hidden;
		}
		.system_img05{left: 0px !important;}
		.system_img04{left: 508px !important;}
		.system_img03{left: 433px !important;}
		.system_img06{left: 467px !important;}
		.system_img07{left: 592px !important;}
	}
	@media only screen and (max-width:780px) {
	
	
		
			.index_main_news{
				width:90%;
				display:block;
				margin:10px auto 20px;
				background:url(../image/index/news_tit_sp.png) no-repeat 10px center rgba(0,0,0,0.8);
				padding:10px 10px 10px 45px;
				height:100px;
				border:1px solid rgba(255,255,255,1.00);
				border-radius:5px;
			}

			.index_main_news dl{
				border-bottom:1px dotted rgba(142,142,142,1.00);
			}
			.sp_box_in{
				position: relative;
			}
			.sp_box_in img.yt{
				width: 20% !important;;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
			}
	}

		
		.index_main_right_mini{
			width:320px;
			display: block;
			float:right;
			position: relative;
		}
		.index_main_right_mini .yt{
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			margin: auto;
		}
		
	.index_main_right{
		width:440px;
		display:block;
		float:right;
		position:relative;
	}

		.index_main_right ul{
			width:349px;
			position:absolute;
			top:198px;
			left:45px;
		}
		.index_main_right li a{
			display: block;
			width:50%;
			float:left;
			height:87px;
			background:url(../image/index/cvp_btn.png) no-repeat 0 0;
			text-indent:-9999px;
		}

		.index_main_right li:nth-child(1) a{
			width:100%;
		}
		.index_main_right li:nth-child(2) a{
			background-position:left -87px;
			height:81px;
		}
		.index_main_right li:nth-child(3) a{
			background-position:right -87px;
			height:81px;
		}
		
		.index_main_right li a:hover{
			background:url(../image/index/cvp_btn.png) no-repeat 0 -165px;
		}
		.index_main_right li:nth-child(2) a:hover{
			background-position:left bottom;
		}
		.index_main_right li:nth-child(3) a:hover{
			background-position:right bottom;
		}



.campaign_btn a{
	width:400px;
	height:90px;
	text-indent:-9999px;
	background: url(../image/entry/campaign01_btn.png) no-repeat center top;
	margin:0px auto;
	display:block;
}

	.campaign_btn a:hover{
		background: url(../image/entry/campaign01_btn.png) no-repeat center 100%;
	}
	
	

/*privacy*/
/*------------------------------------------------------------------------------*/

main#privacy{
	background: url(../image/privacy_bg.jpg) no-repeat center center fixed;
	background-size: cover ;
}

	@media only screen and (max-width:780px) {
			main#privacy{
				background-size: auto 100vh;
		}
	}
	
#privacy h2{
	width:100%;
	height:88px;
	background:url(../image/privacy_tit.png) no-repeat center center;
}

	#privacy h2 img{
		display: none;
	}


	@media only screen and (max-width:780px) {
		#privacy h2{
			height: auto;
			background: none;
		}
		
			#privacy h2 img{
				display: block;
			}
	}

/*banner*/
/*------------------------------------------------------------------------------*/
.banner_box{
	background: #000;
	display: block;
	padding:20px 0px 30px 0px;
	clear:both;
}

.banner_box_in{
	width:1049px;
	height:136px;
	display: block;
	margin:0px auto;
	clear:both;
	background: url(../image/index/frame.png) no-repeat center center;
}



.banner_box ul{
	width:1049px;
	height:136px;
	display: block;
	margin:0px auto;
	clear:both;
	position:relative;
	}


.banner_box li{
	position:absolute;
	top:33px;
}

.banner_box li:nth-child(1){
	left:169px;
}
.banner_box li:nth-child(2){
	left:453px;
}

.banner_box li:nth-child(3){
	left:737px;
}


/*system*/
/*------------------------------------------------------------------------------*/
#controlBar_bgndVideom{
	display:none;
}

.system{
	width:100%;
	overflow:hidden;
	position:relative;
	/*
	background: url(../image/index/pc_img11.png) no-repeat center center fixed;
	background-size:cover;
	*/
	/*background:url(../image/common/bg_container_index.png);*/
	background-image: url('../image/system/system_battle_back.jpg');
	background-size: 110%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: #000;
	background-position: center;
}

.system_box{
	position:relative;
	padding:30px 0px;
}
/*
#video-background2 {
  position: absolute;
  top: 0;
  left:-20%;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -10;
  margin:0px auto;

}
*/
#video-background2 {
  position: fixed;
  top: 0;
  left:0%;
  min-width: 1920px; 
  min-height: 1080px;
  width: auto; 
  height: auto;
  z-index: -10;
  margin:0px auto;

}
	.system_box01{
		position:relative;
		width:1093px;
		height:865px;
		margin:0px auto 20px;
		display:block;
	}
	
	.system_box02{
		position:relative;
		width:1093px;
		height:528px;
		margin:0px auto;
		display:block;
	}

	.system_img01{
		position: absolute;
		left:1px;
		top:65px;
		z-index:2;
	}
	.system_img02{
		position: absolute;
		left:14px;
		top:406px;
		z-index:3;
	}
	.system_img03{
		position: absolute;
		left:459px;
		top:2px;
		z-index:4;
	}
	.system_img04{
		position: absolute;
		left:585px;
		top:183px;
		z-index:1;
	}
	.system_img05{
		position: absolute;
		left:16px;
		top:28px;
		z-index:3;
	}
	.system_img06{
		position: absolute;
		left:492px;
		top:0px;
		z-index:4;
	}
	.system_img07{
		position: absolute;
		left:612px;
		top:157px;
		z-index:2;
	}
	.system_img08{
		position: absolute;
		left:16px;
		top:391px;
		z-index:1;
	}

	.system_img08 a{
		background:url(../image/index/system_img08.png) no-repeat 0 0;
		display:block;
		width:434px;
		height:120px;
		text-indent:-9999px;
		background-size: 100% !important;
	}


	.system_img08 a:hover{
		background:url(../image/index/system_img08.png) no-repeat 0 100%;
	}


/*story*/
/*------------------------------------------------------------------------------*/

.story{
	width:100%;
	background: url(../image/index/srory_img01.png) no-repeat center center, url(../image/index/srory_bg.png) no-repeat center center #FFFFFF;
}

.story_box{
	width:1000px;
	min-height:920px;
	margin:0px auto;
	position:relative;
	padding:50px 0px;
}

	.story_01{
		position:absolute;
		top:50px;
		right:0;
		display:block;
	}

	.story_02{
		position:absolute;
		top:300px;
		right:170px;
		display:block;
	}
	.story_03{
		position:absolute;
		top:730px;
		right:0;
		display:block;
	}

	.story_03 a{
		background:url(../image/index/srory_img04.png) no-repeat 0 0;
		display:block;
		width:434px;
		height:120px;
		text-indent:-9999px;
	}


	.story_03 a:hover{
		background:url(../image/index/srory_img04.png) no-repeat 0 100%;
	}


/*cast*/
/*------------------------------------------------------------------------------*/



.cast{
	width:100%;
	background: url(../image/index/pc_img06.png) no-repeat center top #000000;
	padding-bottom:30px;
}

.cast_box{
	width:1000px;
	min-height:896px;
	margin:0px auto;
	position:relative;
	padding:50px 0px;
}

	.cast_01{
		position:absolute;
		top:50px;
		display:block;
	}

	.cast_02{
		position:absolute;
		top:584px;
		display:block;
	}

	.cast_02 a{
		background: url(../image/index/pc_img08.png) no-repeat 0 0;
		display:block;
		width:434px;
		height:120px;
		text-indent:-9999px;
	}


	.cast_02 a:hover{
		background:url(../image/index/pc_img08.png) no-repeat 0 100%;
	}


/*entry*/
/*------------------------------------------------------------------------------*/

.entry{
	width:100%;
	background: #000000;
	padding-bottom:30px;
}

.entry_box{
	padding:30px 0px 30px;
}
@media only screen and (min-width:781px) and (max-width:1024px) {
	.entry_box{
		padding-top:0px;
	}
	.entry_box h2{
		margin-bottom: 0px;
	}
	.entry{
		padding-bottom: 0px
	}
}

.anime{
	
	opacity:0;
}



.effect {
	bottom: -500px;
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
	
	opacity:0;
}




/*campaign*/
/*------------------------------------------------------------------------------*/

.campaign{
	width:100%;
	background: #000000;
	padding-bottom:30px;
}

.campaign img{
	display:block;
}


.campaign_box{
	width:1000px;
	position:relative;
	margin:0px auto;
}

	.campaign_btn01,
	.campaign_btn02{
		position:absolute;
		top:136px;
	}

	.campaign_btn01{
		left:26px;
	}

	.campaign_btn02{
		left:503px;
	}

.campaign_btn01 a,
.campaign_btn02 a{
	width:476px;
	height:211px;
	background:url(../image/index/campaign_btn01.png) no-repeat center top;
	display:block;
	text-indent:-9999px;
}

	.campaign_btn02 a{
		background-image:url(../image/index/campaign_btn02.png);
	}
	
	.campaign_btn01 a:hover,
	.campaign_btn02 a:hover{
		background-position: center bottom;
	}


/*
.news_sns{
	display:table;
	position:absolute;
	bottom:20px;
	right:50px;
}

	.news_sns ul{
		width:auto;
		display:table;
		margin:0px auto;
	}
	.news_sns li{
		display: table-cell;
	}
	.news_sns li a{
		width:30px;
		height:30px;
		background:url(../image/common/line_btn.png) no-repeat center center;
		background-size:cover;
		display:block;
		text-indent:-9999px;
		margin-right:20px;
	}
		.news_sns li:nth-child(2) a{
			background-image:url(../image/common/fb_btn.png);
		}
		.news_sns li:nth-child(3) a{
			background-image:url(../image/common/tw_btn.png);
			margin-right:0px;
		}

		.news_sns li a:hover{
			opacity:0.7;
		}
	
	
	
	@media only screen and (max-width:690px) {
	
.frame{
	width:90%;
	padding:10px 0px 5px;
	margin:0px auto 30px;
	background-size:100% auto;
}

	
	.frame_body{
		padding:10px 20px 70px;
		background: url(../image/news/share_img_sp.png) no-repeat 20px bottom;
		background-size:150px auto;
		position:relative;
	}

.news_sns{
	right:20px;
}

	.news_sns li a{
		margin-right:10px;
	}


	
	}





.news_page{
	display: block;
	width:100%;
	padding:50px 0px;
	text-align:center;
}

	.news_page li{
		display: inline-block;
	}

	.news_page li a{
		color:#FFFFFF;
		font-size:200%;
		text-shadow:0px 0px 5px #000000;
		padding:10px;
	}
	.news_page li a:hover,
	.news_page li a.active{
		text-decoration:underline;
	}

	@media only screen and (max-width:690px) {
	.news_page{
		width:90%;
		margin:0px auto;
		padding:30px 0px;
		text-align:center;
	}
	.news_page li a{
		font-size:150%;
		padding:5px;
	}


	}
*/



.index_friend_box{
	margin:30px auto 10px;
	position:relative;
}
@media only screen and (min-width:781px) and (max-width:1024px) {
	.index_friend_box{
		margin-top: 20px;
	}
}
.index_friend_btn{
	position: absolute;
	top:66px;
	left:371px;
}

/*0401更新*/
#tvbadge{
	width: 1089px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px auto;
    top: 0px;
}
#tvbadge img{
	position: absolute;
	display: block;
	top:-50px;
}
@media only screen and (min-width:781px) and (max-width:1024px) {
	#tvbadge{
		top:80px;
	}
}
@media only screen and (max-width:780px) {
	#tvbadge{
		width: 95%;
	    position: absolute;
	    left: 0;
	    right: 0;
	    margin: 0px auto;
	    top: 0px;
	}
	#main #tvbadge img{
		position: absolute;
		display: block;
		top: 2px;
		width: 17%;
	}
}
@media only screen and (max-width:690px) {
	#main #tvbadge img{width: 90px;}
}
.ipadbgi01{
	background: url(../image/tab_img_b.png) no-repeat center 0;
}
.ipadbgi02{
	background: url(../image/system/pc_img11.png) no-repeat center bottom 0;
}