@charset "UTF-8";



/*-------------------------------------------------------------------
	header
---------------------------------------------------------------------*/
#header .logo_xenoblade{
	top: 11px;
	right: 197px;
}



/*-------------------------------------------------------------------
	main
---------------------------------------------------------------------*/
#main{
	position: relative;
	width: 100%;
	min-width: 960px;
	height: 454px;
	overflow: hidden;
	margin: 0 auto;
	background: url(../img/common/main_bg.jpg) no-repeat center top;
	background-size: cover;
}
#main .body{
	position: relative;
	width: 960px;
	height: 454px;
	margin: 0 auto;
}
#main .page_title{
	position: absolute;
	top: 64px;
	left: 146px;
}
#main .text01{
	position: absolute;
	top: 212px;
	left: 159px;
}
#main .text02 {
	position: absolute;
	top: 288px;
	left: 160px;
}



/*-------------------------------------------------------------------
	nav
---------------------------------------------------------------------*/
#nav{
	position: relative;
	z-index: 1;
	width: 100%;
	min-width: 960px;
	margin: -44px auto 0 auto;
}
#nav .body{
	position: relative;
	width: 960px;
	height: 46px;
	margin: 0 auto;
}
#nav .nav01{
	position: absolute;
	top: 0;
	left: 18px;
}
#nav .nav02{
	position: absolute;
	top: 0;
	left: 251px;
}
#nav .nav03{
	position: absolute;
	top: 0;
	left: 485px;
}
#nav .nav04{
	position: absolute;
	top: 0;
	left: 718px;
}



/*-------------------------------------------------------------------
	contents
---------------------------------------------------------------------*/
#contents{
	width: 100%;
	min-width: 960px;
	margin: -2px auto 0 auto;
	background: url(../img/common/contents_bg.png) center center repeat;
	border-top: 2px solid #302c28;
	overflow: hidden;
}
#contents .body{
	position: relative;
	width: 960px;
	margin: 0 auto;
}
#contents .body .category{
	position: absolute;
	top: 31px;
	left: 1px;
}



/*-------------------------------------------------------------------
	movie_area
---------------------------------------------------------------------*/
#contents .movie_area{
	position: absolute;
	background: url(../img/common/movie_bg.png) no-repeat center center;
	width: 582px;
	height: 337px;
}
#contents .movie_area .movie_box{
	position: absolute;
	top: 11px;
	left: 11px;
	width: 560px;
	height: 315px;
}
#contents .movie_area .movie_box #movieframe{
	display: none;
}
#contents .movie_area .movie_box .movie_noscript{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 498px;
	height: 92px;
	margin: auto;
}



/*-------------------------------------------------------------------
	toppage_btn
---------------------------------------------------------------------*/
.toppage_btn {
	width: 100%;
	min-width: 960px;
	margin: 0 auto;
	background: url(../../img/bonus_bg_pattern.png);
}
.toppage_btn_in {
	background: url(../../img/bonus_bg.png) center -350px no-repeat;
}
.toppage_btn .body {
	width: 960px;
	height: 146px;
	position: relative;
	margin: 0 auto;
}
.toppage_btn .body .btn {
	position: absolute;
	top: 49px;
	left: 373px;
}



/*-------------------------------------------------------------------
	mouseover
---------------------------------------------------------------------*/
#nav .body li a,
.toppage_btn .body .btn{
	-webkit-transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#nav .body li a:hover,
.toppage_btn .body .btn:hover{
	opacity: 0.85;
	filter: alpha(opacity=85);
	ms-filter: "alpha(opacity=85)";
}