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

/* ------------------------------
フォント指定
------------------------------ */

body {
font-family:"メイリオ","Meiryo","Hiragino Kaku Gothic","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
input {
font-family:"メイリオ","Meiryo","Hiragino Kaku Gothic","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}
textarea {
font-family:"メイリオ","Meiryo","Hiragino Kaku Gothic","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Lucida Grande",Geneva,Arial,Verdana,sans-serif;
}

/* ------------------------------
Clearfix
------------------------------ */

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* ------------------------------
サイト共通
------------------------------ */

html{
}

body{
	background:#1e0317;
}

#wrapper{
}

.inside{
	height:auto;
	position:relative;
	width:980px;
	margin:0 auto;
}

h1,h2,h3{
text-indent:-10000px;
overflow:hidden;
}

a{
color:#004c77;
}

a:hover{
color:#e60012;
}

a:hover{
}

p{
line-height:150%;
color:#ffffff;
}

strong{
	font-weight:bold;
}

h3,h4{
}

div.left {
    background:#500e11;
    float: left;
    height: 47px;
    position: relative;
    width: 50%;
}

div.right {
    background:#ffffff;
    float: right;
    height: 47px;
    position: relative;
    width: 50%;
}

h2{
    margin: 0 auto -48px;
    min-height: 48px;
    position: relative;
    width: 980px;
    z-index: 10;
}

a.page_top{
	display:block;
	position:relative;
	width:146px;
	height:27px;
	text-indent:-10000px;
	overflow:hidden;
	background:url(../images/page_top.png) no-repeat;
	margin:0 0 15px;
}

a.page_top:hover{
	background-position:0 -27px	
}

/* ------------------------------
Header
------------------------------ */

div#header{
	background:url(../images/header_bg.png) repeat-x top;
	height:693px;
	width:100%;
	position:relative;
}

div#header_contents{
	background:url(../images/header_img.png) top center no-repeat;
	height:693px;
	position:relative;
}

div#header_inside{
	width:980px;
	position:relative;
	margin:0 auto;
}

div#header_inside h1{
	height: 389px;
    left: 464px;
    position: relative;
    top: 78px;
    width: 507px;
	background:url(../images/header_logo.png) no-repeat;
}

div#header_inside p.catch{
	text-indent:-10000px;
	overflow:hidden;
	height: 187px;
    left: 506px;
    position: relative;
    top: 70px;
    width: 461px;
	background:url(../images/header_catch.png) no-repeat;
}

div#header_inside a.steam_link{
	background:url(../images/header_steam_link.png) no-repeat;
	width:113px;
	height:89px;
	position:relative;
	display:block;
	top: -22px;
	left: 46px;
	text-indent:-10000px;
	overflow:hidden;
}

div#header_inside a.steam_link:hover{
	background-position:-113px 0;	
}

div#header_inside a.jp_link{
	background:url(../images/header_jp_link.png) no-repeat;
	width:146px;
	height:26px;
	position:absolute;
	display:block;
	top: 42px;
	left: 805px;
	text-indent:-10000px;
	overflow:hidden;
}

div#header_inside a.jp_link:hover{
	background-position:0 -26px;	
}

div#header_inside ul#etc_link{
	width:179px;
	height:26px;
	position:absolute;
	display:block;
	top: 32px;
	left: 780px;
}

div#header_inside ul#etc_link li{
	background:url(../images/header_other_link.png) no-repeat;
	display:block;
	float:left;
	width:38px;
	height:26px;
	margin-right:9px;
}

div#header_inside ul#etc_link li#o01{
	background-position:0 0;	
}

div#header_inside ul#etc_link li#o01:hover{
	background-position:0 -26px;	
}

div#header_inside ul#etc_link li#o02{
	background-position:-47px 0;	
}

div#header_inside ul#etc_link li#o02:hover{
	background-position:-47px -26px;	
}

div#header_inside ul#etc_link li#o03{
	background-position:-94px 0;	
}

div#header_inside ul#etc_link li#o03:hover{
	background-position:-94px -26px;	
}

div#header_inside ul#etc_link li#o04{
	background-position:-141px 0;	
}

div#header_inside ul#etc_link li#o04:hover{
	background-position:-141px -26px;	
}

div#header_inside ul#etc_link li a{
	display:block;
	width:38px;
	height:26px;
}

div#header_inside ul#etc_link li.end{
	margin-right:0px;	
}


/* ------------------------------
Menu
------------------------------ */

div#menu{
	background:url(../images/menu_bg.png) repeat-x;
	height:57px;
	width:100%;
}

.fixed{
	position:fixed;
	top:0;
	z-index:200;
}

div#menu ul#menu_inside{
	width:988px;
	height:35px;
	position:relative;
	margin:0 auto;
	background:url(../images/menu_back.png) no-repeat;
	top:12px;
}

div#menu ul#menu_inside li{
	display:block;
	float:left;
	position:relative;
	background:url(../images/menu.png) no-repeat;
}

div#menu ul#menu_inside li a{
	display:block;
}

div#menu ul#menu_inside li#m01{
	height: 33px;
    left: 41px;
    width: 57px;
	background-position:-41px 0;
}

div#menu ul#menu_inside li#m01:hover{
	background-position:-41px -35px;
}

div#menu ul#menu_inside li#m01 a{
	height: 33px;
    width: 57px;
}

div#menu ul#menu_inside li#m02{
	height: 33px;
    left: 68px;
    width: 105px;
	background-position:-125px 0;
}

div#menu ul#menu_inside li#m02:hover{
	background-position:-125px -35px;
}

div#menu ul#menu_inside li#m02 a{
	height: 33px;
    width: 105px;
}

div#menu ul#menu_inside li#m03{
	background-position: -255px 0;
    height: 33px;
    left: 93px;
    width: 87px;
}

div#menu ul#menu_inside li#m03:hover{
	background-position: -255px -35px;
}

div#menu ul#menu_inside li#m03 a{
	height: 33px;
    width: 87px;
}

div#menu ul#menu_inside li#m04{
	background-position: -367px 0;
    height: 33px;
    left: 118px;
    width: 156px;
}

div#menu ul#menu_inside li#m04:hover{
	background-position: -367px -35px;
}

div#menu ul#menu_inside li#m04 a{
	height: 33px;
    width: 156px;
}

div#menu ul#menu_inside li#m05{
	background-position: -550px 0;
    height: 33px;
    left: 145px;
    width: 202px;
}

div#menu ul#menu_inside li#m05:hover{
	background-position: -550px -35px;
}

div#menu ul#menu_inside li#m05 a{
	height: 33px;
    width: 202px;
}

div#menu ul#menu_inside li#m06{
	background-position: -779px 0;
    height: 33px;
    left: 172px;
    width: 168px;
}

div#menu ul#menu_inside li#m06:hover{
	background-position: -779px -35px;
}

div#menu ul#menu_inside li#m06 a{
	height: 33px;
    width: 168px;
}

/* ------------------------------
Trailer
------------------------------ */

div#trailer{
	background:url(../images/trailer_bg.png) repeat-x;
	position:relative;
}

div#trailer div.inside{
	background:url(../images/contents_bg.png) top center no-repeat;
}
div#trailer div.spry{
	background:url(../images/intro_spray.png) bottom center no-repeat;
	width:980px;
	margin:0 auto;
	height:auto;
	padding:35px 0;
	position:relative;
}

div#trailer a.pv{
	width:428px;
	height:302px;
	position:relative;
	background:url(../images/pv.png) top;
	text-indent:-10000px;
	overflow:hidden;
	display:block;
	float:left;
	left: 35px;
	top: 18px;
}

div#trailer a.pv:hover{
	background-position:0 -302px;
}

div#trailer p.text{
	width:461px;
	height:336px;
	position:relative;
	background:url(../images/intro_catch.png);
	text-indent:-10000px;
	overflow:hidden;
	float:right;
	right:12px;
}

/* ------------------------------
About
------------------------------ */

div#about{
	background:url(../images/about_bg.png) repeat-x #ac1e24;
	position:relative;
}

div#about div.inside{
	padding:45px 0;
	background:url(../images/about_spray.png) top center no-repeat;
}


div#about div.title div.left {
	border-bottom:1px solid #6d0b0e;
}

div#about div.title div.right {
	border-bottom:1px solid #6d0b0e;
}

div#about div.ch01{
	text-indent:-10000px;
	overflow:hidden;
	width:522px;
	height:937px;
	position:absolute;
	background:url(../images/ch01.png);
	left: 583px;
	top: -14px;
}

div#about div.ch02{
	text-indent:-10000px;
	overflow:hidden;
	width:600px;
	height:939px;
	position:absolute;
	background:url(../images/ch02.png);
	left: -116px;
	top: 952px;
}

div#about h2{
	background:url(../images/about_title.png) no-repeat;
}

div#about h3.about_img01{
	background:url(../images/about_img01.png) no-repeat;
	width:654px;
	height:430px;
	position:relative;
	left: 29px;
	float:left;
	margin:0 0 34px;
}

div#about h3.about_img02{
	background:url(../images/about_img02.png) no-repeat;
	width:647px;
	height:399px;
	position:relative;
	float:left;
	margin:0 0 12px;
	left: 20px;
}

div#about h3.about_img03{
	background:url(../images/about_img03.png) no-repeat;
	width:627px;
	height:442px;
	position:relative;
	float:right;
	right:1px;
	margin:0 0 49px;
	right:22px;
}

div#about h3.about_img04{
	background:url(../images/about_img04.png) no-repeat;
	width:627px;
	height:342px;
	position:relative;
	float:right;
	right:22px;
	margin:0 0 19px;
}

div#about a.page_top{
	float:right;	
}


/* ------------------------------
Online
------------------------------ */

div#online{
	background:url(../images/online_bg.png) repeat-x #500e11;
	position:relative;
}

div#online div.title div.left {
	border-bottom:1px solid #3e0609;
}

div#online div.title div.right {
	border-bottom:1px solid #3e0609;
}

div#online div.inside{
	padding:45px 0 60px;
	background:url(../images/online_spray.png) top center no-repeat;
}

div#online div.ch03{
	text-indent:-10000px;
	overflow:hidden;
	width:711px;
	height:651px;
	position:absolute;
	background:url(../images/ch03.png);
	top: 0;
	left: -90px;
}

div#online h2{
	background:url(../images/online_title.png) no-repeat;
}

div#online h3.online_img01{
	background:url(../images/online_img.png) no-repeat;
	width:524px;
	height:497px;
	position:relative;
	float:right;
	margin:0 auto 15px;
	right:22px;
}

div#online a.page_top{
	float:right;	
}

/* ------------------------------
Bonus
------------------------------ */

div#bonus{
	background:url(../images/bonus_bg.png) repeat-x #30334f;
	position:relative;
}

div#bonus div.title div.left {
	border-bottom:1px solid #111438;
}

div#bonus div.title div.right {
	border-bottom:1px solid #111438;
}

div#bonus div.inside{
	padding:40px 0 45px;
	background:url(../images/bonus_spray.png) top center no-repeat;
}

div#bonus h2{
	background:url(../images/bonus_title.png) no-repeat;
}

div#bonus h3.bonus_img01{
	background:url(../images/bonus_img.png) no-repeat;
	width:939px;
	height:320px;
	position:relative;
	margin:0 auto 15px;
}

div#bonus a.page_top{
	float:right;	
}

/* ------------------------------
Spec
------------------------------ */

div#spec{
	background:url(../images/spec_bg.png) repeat-x #ba7617;
	position:relative;
}

div#spec div.title div.left {
	border-bottom:1px solid #6e3700;
}

div#spec div.title div.right {
	border-bottom:1px solid #6e3700;
}

div#spec div.inside{
	padding:45px 0 60px;
}

div#spec h2{
	background:url(../images/spec_title.png) no-repeat;
}

div#spec h3.spec_img01{
	background:url(../images/spec_img.png) no-repeat;
	width:937px;
	height:201px;
	position:relative;
	margin:0 auto 30px;
}


div#spec a.spec_steam_link{
	width:161px;
	height:143px;
	position:absolute;
	background:url(../images/steam_link.png);
	text-indent:-10000px;
	overflow:hidden;
	display:block;
	left:745px;
	top:78px;
}

div#spec a.page_top{
	float:right;	
}

/* ------------------------------
Footer
------------------------------ */

div#footer{
	background:#1e0317;
	position:relative;
}

div#footer div.inside{
	padding:45px 0;
}

div#footer a.footer_ci{
	display:block;
	float:left;
	width:56px;
	height:62px;
	position:relative;
	background:url(../images/footer_arc.png);
	text-indent:-10000px;
	overflow:hidden;
	margin-right:18px;
}

div#footer p{
	float:left;
	width:526px;
	position:relative;
	top:1px;
}

div#footer div#social_bt{
	float:right;
	position:relative;
	top:18px;
}