@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:#07a3ff;
}

#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;
}

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	
}

div.inside_contents{
	width:980px;
	position:relative;
	margin:0 auto 30px;	
}

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

div#contents{
	background:url(../images/contents_bg.png) #07a3ff repeat-x;
	width:100%;
	position:relative;
	height:auto;
}

div.contents_bg{
	background:url(../images/bg_pattern.png) repeat-y center;
}

div.title{
	margin:0 0 20px;
	position:relative;	
}

div.left {
    background: #ffde11 none repeat;
    float: left;
    height: 92px;
    position: relative;
    width: 50%;
}

div.right {
    background: #07a3ff none repeat;
    float: right;
    height: 92px;
    position: relative;
    width: 50%;
}

div.base{
    background: #ffde11 none repeat;
    height: 92px;
    position: relative;
    width: 100%;
}

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


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

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

div#header_contents{
	width:100%;
	position:relative;
	background:url(../images/header_chara.png) no-repeat center top;
	height:721px;
}

div#header_contents h1{
	height: 271px;
    position: relative;
    width: 587px;
	background:url(../images/header_logo.png) no-repeat;
	margin:0 auto;
	top: 424px;
}

div#header_contents h2{
	height: 254px;
    position: relative;
    width: 392px;
	background:url(../images/header_catch.png) no-repeat;
	margin:0 auto;
	top: -72px;
	left: 284px;
}

div.header_links{
	margin: 0 auto;
    position: relative;
    width: 980px;
	z-index: 10;
}

div.header_links a.steam_link{
	position:absolute;	
}

div.header_links ul#etc_link{
	position:absolute;
	width:328px;
	height:39px;
	display:block;	
	top:0px;
	left:640px;
	background:url(../images/header_lang_bg.png) no-repeat;
}

div.header_links ul#etc_link li{
	display:block;
	float:left;
	position:relative;
	background:url(../images/header_lang_link.png) no-repeat;
	height:11px;
}

div.header_links ul#etc_link li a{
	display:block;
	height:11px;
}

div.header_links ul#etc_link li#o01{
    left: 118px;
    top: 10px;
    width: 32px;
	background-position:0 0;
}

div.header_links ul#etc_link li#o01:hover{
	background-position:0 -11px;
}

div.header_links ul#etc_link li#o01 a{
    width: 32px;
}

div.header_links ul#etc_link li#o02{
    width: 35px;
	background-position: -46px 0;
    left: 132px;
    top: 10px;
}

div.header_links ul#etc_link li#o02:hover{
	background-position:-46px -11px;
}

div.header_links ul#etc_link li#o02 a{
    width: 35px;
}

div.header_links ul#etc_link li#o03{
    background-position: -97px 0;
    left: 148px;
    top: 10px;
    width: 35px;
}

div.header_links ul#etc_link li#o03:hover{
	background-position: -97px -11px;
}

div.header_links ul#etc_link li#o03 a{
    width: 35px;
}

div.header_links ul#etc_link li#o04{
    background-position: -146px 0;
    left: 162px;
    top: 10px;
    width: 36px;
}

div.header_links ul#etc_link li#o04:hover{
	background-position: -146px -11px;
}

div.header_links ul#etc_link li#o04 a{
    width: 36px;
}


div.header_links a.steam_link{
	position:absolute;
	width:113px;
	height:86px;
	display:block;	
	background:url(../images/header_steam.png) no-repeat;
	top: 602px;
	left:832px;
	text-indent:-10000px;
	overflow:hidden;
	z-index:10;
}

div.header_links a.steam_link:hover{
	background-position:0 -86px;
}

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

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



div#menu ul#menu_inside{
	width:970px;
	height:31px;
	position:relative;
	margin:0 auto;
	top: 20px;
}

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

div#menu ul#menu_inside li a{
	display:block;
	text-indent:-10000px;
	overflow:hidden;
	height:31px;
}

div#menu ul#menu_inside li#m01{
    left: 0px;
    width: 61px;
	background-position:0 0;
}

div#menu ul#menu_inside li#m01:hover{
}

div#menu ul#menu_inside li#m01 a{
    width: 61px;
}

div#menu ul#menu_inside li#m02{
    left: 19px;
    width: 107px;
	background-position:-80px 0;
}

div#menu ul#menu_inside li#m02:hover{
}

div#menu ul#menu_inside li#m02 a{
    width: 107px;
}

div#menu ul#menu_inside li#m03{
	background-position:-207px 0;
    left:39px;
    width:94px;
}

div#menu ul#menu_inside li#m03:hover{
}

div#menu ul#menu_inside li#m03 a{
    width: 94px;
}

div#menu ul#menu_inside li#m04{
	background-position: -321px 0;
    left: 59px;
    width: 191px;
}

div#menu ul#menu_inside li#m04:hover{
}

div#menu ul#menu_inside li#m04 a{
    width: 191px;
}

div#menu ul#menu_inside li#m05{
	background-position: -532px 0;
    left:79px;
    width: 235px;
}

div#menu ul#menu_inside li#m05:hover{
}

div#menu ul#menu_inside li#m05 a{
    width: 235px;
}

div#menu ul#menu_inside li#m06{
	background-position: -789px 0;
    left:101px;
    width: 181px;
}

div#menu ul#menu_inside li#m06:hover{
}

div#menu ul#menu_inside li#m06 a{
    width: 181px;
}

/* ------------------------------
TRAILER
------------------------------ */

#trailer{
	padding:30px 0;
}

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

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

#trailer h3{
	float:right;
	position:relative;
	background:url(../images/pv_text.png) no-repeat;
	width:536px;
	height:315px;
}

/* ------------------------------
ABOUT
------------------------------ */

#about{
}

#about h4{
text-indent:-10000px;
overflow:hidden;
margin:0 0 15px;
}

#about p{
text-indent:-10000px;
overflow:hidden;
}

#about h3{
	position:relative;
	background:url(../images/about_title.png) no-repeat;
}

#about div.about_contents{
	position:relative;
}

#about div.about_contents h4.about_topics1{
	position:relative;
	background:url(../images/about_topics01.png) no-repeat;
	width:575px;
	height:164px;
	float:left;
	margin:40px 0 25px;
}

#about div.about_contents p.about_text1{
	position:relative;
	background:url(../images/about_text01.png) no-repeat;
	width:542px;
	height:227px;
	float:left;
}

#about div.about_contents h4.about_topics2{
	position:relative;
	background:url(../images/about_topics02.png) no-repeat;
	width:575px;
	height:186px;
	float:left;
	margin:20px 0 25px;
}

#about div.about_contents p.about_text2{
	position:relative;
	background:url(../images/about_text02.png) no-repeat;
	width:541px;
	height:139px;
	float:left;
}

#about div.about_contents h4.about_topics3{
	position:relative;
	background:url(../images/about_topics03.png) no-repeat;
	width:575px;
	height:188px;
	float:left;
	margin:10px 0 25px;
}

#about div.about_contents p.about_text3{
	position:relative;
	background:url(../images/about_text03.png) no-repeat;
	width:543px;
	height:223px;
	float:left;
}

#about div.about_contents h4.about_topics4{
	position:relative;
	background:url(../images/about_topics04.png) no-repeat;
	width:575px;
	height:188px;
	float:left;
	margin:15px 0 25px;
}

#about div.about_contents p.about_text4{
	position:relative;
	background:url(../images/about_text04.png) no-repeat;
	width:542px;
	height:227px;
	float:left;
}


#about div.about_contents img{
	width:387px;
	height:221px;
	display:block;
	position:relative;
	display:block;
	margin:0 0 20px;	
}

div.text_contents{
	position:relative;
	float:left;
	width:575px;
}

div.ss_contents{
	position:relative;
	float:right;
	width:387px;
}

/* ------------------------------
ONLINE
------------------------------ */

#online{
	position:relative;
	margin:0 auto 40px;
}


#online h3{
	position:relative;
	background:url(../images/online_title.png) no-repeat;
}


#online h4{
	text-indent:-10000px;
	overflow:hidden;
	margin:20px 0 25px;
	position:relative;
	background:url(../images/online_topics.png) no-repeat;
	width:575px;
	height:197px;
}

#online p{
	text-indent:-10000px;
	overflow:hidden;
	position:relative;
}

#online p.online_text1{
	background:url(../images/online_text.png) no-repeat;
	width:542px;
	height:170px;
	position:relative;
	margin:0 0 10px;
}

#online img{
	position:relative;
	display:block;	
}

#online p.online_text2{
	background:url(../images/online_text2.png) no-repeat;
	width:488px;
	height:80px;
	float:right;
	position:relative;
}

/* ------------------------------
BONUS
------------------------------ */

#bonus{
	position:relative;
	margin:0 auto 40px;
}


#bonus h3{
	position:relative;
	background:url(../images/bonus_title.png) no-repeat;
}


#bonus h4{
	text-indent:-10000px;
	overflow:hidden;
	margin:0px auto -5px;
	position:relative;
	background:url(../images/bonus_text.png) no-repeat;
	width:934px;
	height:290px;
	top: -38px;
	z-index:10;
}

#bonus ul#bonnus_link{
	background:url(../images/bonus_item_bg.png) no-repeat;
	width:960px;
	height:203px;
	margin:0 auto 10px;
}

#bonus ul#bonnus_link li{
	display:block;
	float:left;
	position:relative;
	background:url(../images/bonus_item.png) no-repeat;
	height:176px;
	width:248px;
}

#bonus ul#bonnus_link li a{
	display:block;
	position:relative;
	height:176px;
	width:248px;
}

#bonus ul#bonnus_link li#b01{
    left: 63px;
    top: 13px;
	background-position:0 0;
}

#bonus ul#bonnus_link li#b01:hover{
	background-position:0 -176px;
}

#bonus ul#bonnus_link li#b02{
    background-position: -300px 0;
    left: 116px;
    top: 13px;
}

#bonus ul#bonnus_link li#b02:hover{
	background-position: -300px -176px;
}

#bonus ul#bonnus_link li#b03{
    background-position: -600px 0;
    left: 168px;
    top: 13px;
}

#bonus ul#bonnus_link li#b03:hover{
	background-position: -600px -176px;
}


/* ------------------------------
DETAIL
------------------------------ */

#detail{
	position:relative;
	margin:0 auto 40px;
}

#detail h3{
	position:relative;
	background:url(../images/details_title.png) no-repeat;
}

#detail h4.spec{
	position:relative;
	background:url(../images/spec.png) no-repeat;
	width:957px;
	height:201px;
	margin:0 auto;
	text-indent:-10000px;
	overflow:hidden;
}

#detail a.spec_steam_link{
	display: block;
    height: 133px;
    left: 752px;
    overflow: hidden;
    position: absolute;
    text-indent: -10000px;
    top: 40px;
    width: 161px;
	background:url(../images/spec_steam_link.png) no-repeat;
}

#detail a.spec_steam_link:hover{
	background-position:0 -133px;	
}


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

div#footer{
	position:relative;
	background:url(../images/footer_bg.png) repeat-x top;
}

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

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

div#footer a.footer_examu{
	display:block;
	float:left;
	width:138px;
	height:47px;
	position:relative;
	background:url(../images/footer_examu.png);
	text-indent:-10000px;
	overflow:hidden;
	margin-right:12px;
	top:10px;
}

div#footer p{
	color: #fff;
    float: left;
    font-size: 80%;
    position: relative;
    width: 364px;
	top:8px;
}

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

div#footer a#up_bt:hover{
	background-position:0 -26px;
}

div#footer div#game_links{
	float:left;
	position:relative;
	top:0px;
	margin-right:20px;

}

div#footer div#game_links a.ah3{
	display:block;
	text-indent:-10000px;
	overflow:hidden;
	width:180px;
	height:40px;
	position:relative;
	background:url(../images/footer_banner.png);
	margin:0 0 2px;
}

div#footer div#game_links a{
	color:#fff;
	font-size:90%;
	text-decoration:underline;
}