@charset "utf-8";
	
	
		.badge-area.top{
			margin: -8em auto 3em;
		}
		
		#information_area{
			max-width:860px;
			letter-spacing:-.40em;
			margin:auto;
			vertical-align:bottom;
			margin-bottom:50px;
		}
			#information_area > *{
				letter-spacing:normal;
				display:inline-block;
				*display:inline;
				*zoom:1;
			}
			#information_area .right_box{
				float:right;
				width:60%;
			}
			#information_area .left_box{
				float:left;
				width:40%;
			}
@media screen and (max-width:767px){
		.badge-area.top{
			margin: 1em auto 2em;
		}

		#information_area{
			
		}
			#information_area .right_box , #information_area .left_box{
				float:none;
				display:block;
				width:auto;
			}
}


			
		a.notice_btn{
			display:block;
			border:1px solid #fff;
			width:80%;
			max-width: 500px;
			margin:0 auto 1.2em;
			box-shadow:1px 1px 2px #000;
			background:#fff;
		}
			.notice_btn img{
				width:100%;
				display:block;
			}
			a.notice_btn:hover img{
				opacity:0.8;
				transition: 0.2s;
			}
@media screen and (max-width:767px){
		#btn_area{
			margin:auto 1em 1em;
			padding:0;
		}
			#btn_area a{
				width: 47%;
				margin: .5em 1.5%;
			}
	
}


		#movie_area{
			position:relative;
			max-width:860px;
			text-align:center;
			margin:auto auto 20px;
		}
			#movie_area dl{
				width:40%;
				margin: auto 5%;
				display:inline-block;
				*display:inline;
				*zoom:1;
			}
			#movie_area dl dt{
				font-size:90%;
				color:#ff0;
				background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
				background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
				background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 );
				padding:3px 0;
			}
			#movie_area dl dd{
				padding:6px;
			}
			#movie_area a{
				display:block;
				border:2px solid #fff;
				margin:auto;
				box-shadow:0px 0px 5px #0055ff , 0px 0px 10px #0055ff;
			}
				#movie_area a img{
					width:100%;
					display:block;
				}
				#movie_area a:hover img{
					box-shadow:0px 0px 10px #00ffff , 0px 0px 15px #00ffff;
					-webkit-transition: 0.2s;
					-moz-transition: 0.2s;
					-o-transition: 0.2s;
					transition: 0.2s;
				}
@media screen and (max-width:767px){
		#movie_area{
			width:auto;
			margin:auto auto 10px;
			padding:0 10px;
		}
		#movie_area dl{
			background:rgba(0,0,0,0.2);
			display:block;
			width:auto;
			letter-spacing:-.40em;
			margin-bottom:5px;
			padding:2px;
		}
		#movie_area dl dt{
			float:right;
			width:55%;
			letter-spacing:normal;
			text-align:left;
			background:none;
			font-size:80%;
			padding-top:10%;
		}
		#movie_area dl dd{
			float:left;
			width:40%;
			letter-spacing:normal;
		}
		#movie_area dl.no-title{
			display: inline-block;
			*display:inline;
			*zoom:1;
			width:40%;
			margin:auto 3%;
		}
		#movie_area dl.no-title dd{
			float:none;
			width:100%;
			text-align:center;
		}
}


		#topics_banner{
			background:url(../images/common/topics_bk.png) center center no-repeat;
			background-size:cover;
			text-align:center;
			box-shadow:0px 5px 5px rgba(0,0,0,0.7) inset , 0px -5px 5px rgba(0,0,0,0.7) inset;
			margin-bottom:20px;
		}
			#topics_banner > ul{
				padding:15px 0;
				max-width:860px;
				margin:auto;
			}
			#topics_banner > ul li{
				margin:5px 1.6%;
				width:45%;
				display:inline-block;
			}
			#topics_banner > ul li a{
				display:block;
				border:1px solid #fff;
				background:#fff;
				box-shadow:1px 1px 2px #000;
			}
				#topics_banner > ul li a img{
					display:block;
					width:100%;
				}
				
				#topics_banner > ul li a:hover{
					-webkit-transition: 0.2s;
					-moz-transition: 0.2s;
					-o-transition: 0.2s;
					transition: 0.2s;
					box-shadow:none;
					box-shadow:0px 0px 5px #0ff , 0px 0px 10px #0ff , 0px 0px 20px #0ff;
				}
				#topics_banner > ul li a:hover img{
					opacity:0.7;
					-webkit-transition: 0.2s;
					-moz-transition: 0.2s;
					-o-transition: 0.2s;
					transition: 0.2s;
					
				}
@media screen and (max-width:767px){ /*- SP -*/
			#topics_banner > ul li{
				width:90%;
			}
}
		#update_area{
			margin-left:10px;
		}
			#update_area h2{
				background:url(../images/common/update_title_bk.png) right bottom no-repeat;
				border-top:1px solid #0eadff;
				border-left:1px solid #0eadff;
				font-size:100%;
				font-weight:bold;
				padding-left:10px;
				line-height:37px;
				margin-bottom:8px;
			}
			#update_area ul{
				margin-right:10px;
			}


/*- top news list-*/
.top-list > .news-list{
	font-size: .8em;
}
	.top-list > .news-list li > *{
		padding: .7em 8em .5em 7.5em;
		line-height: 1.4em;
		box-sizing: border-box;
		min-height: 2.5em;
	}
	.top-list > .news-list li > * span.ctg{
		position: absolute;
		left: 1.2em;  top: 1.2em;
	}
	.top-list > .news-list li > * time{
		position: absolute;
		right: .8em;  top: .5em;
	}
	.top-list > .news-list li > a:hover span.ctg{
		
		transition: .3s;
	}


			#update_area div.more{
				background:url(../images/common/update_more_bk.png) left top no-repeat;
				line-height:26px;
				padding-left:15px;
			}
				#update_area div.more a{
					color:#0eadff;
					font-size:80%;
					text-decoration:none;
				}
				#update_area div.more a:hover{
					color:#fff;
				}
@media screen and (max-width:767px){
		#update_area{
			margin:auto 10px 20px;
			padding:0;
		}

}


		#sns_area{
			margin-right:10px;
		}
			#sns_area dl dt{
				border-top:1px solid #0eadff;
				border-left:1px solid #0eadff;
				border-right:1px solid #0eadff;
				background:rgba(0,0,0,0.5);
				text-align:center;
				padding:2px 2px;
			}
				#sns_area dl dt h2{
					font-weight:bold;
					background:url(../images/common/sns_title_bk.png) bottom center no-repeat;
					padding:5px;
				}
			#sns_area dl dd.include{
				border-left:1px solid #0eadff;
				border-right:1px solid #0eadff;
				background:rgba(0,0,0,0.5);
				height:330px;
				overflow:hidden;
			}
			#sns_area dl dd.include .twitterArea{
				border:none;
			}
			#sns_area dl dd.more{
				border-left:1px solid #0eadff;
				background:url(../images/common/sns_bottom_bk.png) right bottom no-repeat;
				padding:0 3px 3px 2px;
			}
				#sns_area dl dd.more div{
					background:url(../images/common/sns_more_bk.png) top center no-repeat;
					text-align:center;
				}
				#sns_area dl dd.more div a{
					color:#0eadff;
					font-size:80%;
					text-decoration:none;
				}
					#sns_area dl dd.more div a:hover{
						color:#fff;
					}
@media screen and (max-width:767px){
		#sns_area{
			margin:auto 10px 20px;
			padding:0;
		}
}


		#game_overview{
			background:rgba(0,0,0,0.5);
			text-align:center;
			/*padding-bottom:300px;*/
		}
			#game_overview section{
				padding:50px 0;
				background:url(../images/top/game_overview_border.png) center bottom no-repeat;
			}
				#game_overview section:last-child{
					background:none;
				}
			#game_overview h2{
				background:url(../images/top/game_overview_title_bk.png) center top no-repeat;
				height:70px;
				line-height:55px;
				font-weight:bold;
				font-size:110%;
			}
			#game_overview div.ov_link{
				background:url(../images/top/ov_link_bk.png) center top no-repeat;
			}
			#game_overview div.ov_link a{
				background:url(../images/top/ov_link_btn_bk.png) center top no-repeat;
				display:inline-block;
				width:386px;
				height:80px;
				line-height:84px;
				color:#fff;
				font-weight:bold;
				text-decoration:none;
				font-size:140%;
			}
			#game_overview div.ov_link a:hover{
				background:url(../images/top/ov_link_btn_bk_hover.png) center top no-repeat;
				text-shadow:0px 0px 5px #00ffff;
				-webkit-transition: 0.3s ease-in-out;
				-moz-transition: 0.3s ease-in-out;
				-o-transition: 0.3s ease-in-out;
				transition: 0.3s ease-in-out;
			}
@media screen and (max-width:767px){
		#game_overview h2{
			line-height:40px;
			background-size:1500px 52px;
		}
		#game_overview section img{
			width:100%;
		}
		#game_overview div.ov_link a{
			max-width:300px;
			background-size:contain;
			font-size:3vw;
			line-height:66px;
		}
		#game_overview div.ov_link a:hover{
			background:url(../images/top/ov_link_btn_bk.png) center top no-repeat;
			background-size:contain;
		}
}


	.campaign-banner{
		text-align: center;
		margin: auto auto 1.5em;
		max-width: 980px;
		/*display: flex;*/
	}
		.campaign-banner a{
			display: inline-block;
			background: #fff;
			border-radius: .5em;
			width: 73%;
			margin: auto;
		}
		.campaign-banner a img{
			vertical-align: bottom;
			box-shadow: 0 0 0 3px #00c8ff , 4px 4px 0 3px rgba(0,0,0,0.5) ;
			border-radius: .5em;
			max-width: 100%;
			
		}
		.campaign-banner a img:hover{
			opacity: .8;
			transition: .3s;
		}
@media screen and (max-width:767px){
	.campaign-banner{
		display: block;
	}
	.campaign-banner a{
		width: 95%;
		margin-bottom: 1em;
	}
}


	.youtube_embed{
		position: relative;
		z-index: 5;
		margin: auto auto 1.5em;
		border-radius: .5em;
		text-align: center;
	}
	.youtube_embed iframe{
		width: 640px;
		height: 360px;
		width: 720px;
		height: 405px;
		border-radius: .5em;
		box-shadow: 0 0 0 1px #fff , 0 0 .7em 0 #0cf;
	}
@media screen and (max-width:767px){
	.youtube_embed{
		margin: -1em auto 2em;
		position: relative;
		padding-top: 54%;
		height: 0;
		border-radius: 0;
	}
		.youtube_embed iframe{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow:none;
			border-radius: 0;
		}
}