@charset "UTF-8";

body {
    margin: 0;
    background: #fff;
    font-size: 13px;
    line-height: 1.2em;
	font-family: "メイリオ","Meiryo","ＭＳ Ｐゴシック","MS P Gothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,verdana,arial,clean,sans-serif;
}
.hide_text {
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
}
.clear {
	clear: both;
}
#contents_wrapper {
	width: 986px;
	padding-top: 7px;
	margin: 0 auto 17px;
	position: relative;
}

/*----------------------------------------------
	navi 
------------------------------------------------*/
nav ul {
	width: 936px;
	height: 40px;
	background: url('../img/navi_flame.png') top center no-repeat;
	padding: 18px 0 0 50px;
}
nav li {
	float: left;
	position: relative;
}
nav li a {
	display: block;
	height: 23px;
}
nav li:nth-child(1) { left:0px; }/* トップ */
nav li:nth-child(2) { left:45px; }/* ストーリー */
nav li:nth-child(3) { left:80px; }/* キャラクター */
nav li:nth-child(4) { left:115px; }/* システム */
nav li:nth-child(5) { left:145px; }/* ムービー */
nav li:nth-child(6) { left:180px; }/* スペシャル */

nav li:nth-child(1), nav li:nth-child(1) a {
	width: 68px;
	height: 23px;
	background: url('../img/navi_top.png') top center no-repeat;
}
nav li:nth-child(2), nav li:nth-child(2) a {
	width: 100px;
	height: 23px;
	background: url('../img/navi_story.png') top center no-repeat;
	cursor: default;
	/*opacity: 0.6;*/
}
nav li:nth-child(3), nav li:nth-child(3) a {
	width: 175px;
	height: 23px;
	background: url('../img/navi_character.png') top center no-repeat;
	cursor: default;
	/*opacity: 0.6;*/
}
nav li:nth-child(4), nav li:nth-child(4) a {
	width: 115px;
	height: 23px;
	background: url('../img/navi_system.png') top center no-repeat;
	cursor: default;
	/*opacity: 0.6;*/
}
nav li:nth-child(5), nav li:nth-child(5) a {
	width: 100px;
	height: 23px;
	background: url('../img/navi_movie.png') top center no-repeat;
	cursor: default;
	/*opacity: 0.6;*/
}
nav li:nth-child(6), nav li:nth-child(6) a {
	width: 140px;
	height: 23px;
	background: url('../img/navi_purchase.png') top center no-repeat;
}
nav li:hover {
	display: block;
	background-position: 0 100%;
}
/*
nav li:nth-child(3):hover {
	display: block;
	background-position: 0 0;
}
*/
nav li.selected {
	display: block;
	background-position: 0 100%;
}

span.new {
	position: absolute;
	background: url(../img/new.png) no-repeat top center;
	width: 42px;
	height: 18px;
	text-indent: -9999em;
}

span.cs {
	position: absolute;
	background: url(../img/comingsoon.png) no-repeat top center;
	width: 84px;
	height: 16px;
	text-indent: -9999em;
}

span.cs.story {
	top: 13px;
	left: 204px;
	z-index: 10;
}

span.cs.character {
	top: 13px;
	left: 408px;
	z-index: 10;
}

span.cs.system {
    top: 13px;
    left: 561px; 
    z-index: 10;
}
span.cs.movie {
	top: 13px;
	left: 693px; 
	z-index: 10;
}

span.new.story {
    top: 0px;
    left: 234px;
    z-index: 10;
	/*visibility: hidden;*/
}
span.new.character {
    top: 0px;
    left: 444px;
    z-index: 10;
	/*visibility: hidden;*/
}
span.new.system {
    top: 0px;
    left: 596px; 
    z-index: 10;
	/*visibility: hidden;*/
}
span.new.movie {
	top: 0px;
	left: 726px; 
	z-index: 10;
	/*visibility: hidden;*/
}
span.new.special {
	top: 0px;
	left: 910px; 
	z-index: 10;
	/*visibility: hidden;*/
}


/*----------------------------------------------
	frame 
------------------------------------------------*/
.frame {
	margin-top: 14px;
}
.frame_header {
	width: 986px;
	height: 18px;
	background: url('../img/frame_header.png');
}
.frame_middle {
	width: 966px;
	padding: 0 10px;
	background: url('../img/frame_middle.png') repeat-y;
	position: relative;
}
.frame_footer {
	width: 986px;
	height: 17px;
	background: url('../img/frame_footer.png');
}


/*----------------------------------------------
	footer 
------------------------------------------------*/
#main_footer {
	width: 100%;
	min-width: 1050px;
}
footer {
	width: 100%;
	position: relative;
}
.footer_line01 {
	width: 100%;
	height: 40px;
	background: url('../img/footer_bg.png') top center repeat-x;	
}
.footer_bg {
	background: url('../img/footer_bg_all.png') 140px 0;	
}
.footer_container {
	width: 986px;
	margin: 0 auto;
	position: relative;
}
/*---- SPEC ----*/
#spec {
	width: 657px;
	/*height: 209px;*/
	/*Before ESRB*/
	/*height: 240px;*/
	height: 470px;
	/*background: url('../img/footer_spec.png') top center no-repeat;*/
	position: relative;
	top: -18px;
	left: 180px;	
	z-index: 1;
}
#spec dl {
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}
#spec dt {
	color: #ffdb31;
	font-size: 18px;
	float:left;
	font-weight: bold;
}
#spec dd {
	color: #fff;
	font-size: 18px;
    margin-bottom: 5px;
    padding-left: 9rem;
    padding-bottom: 5px;
}
#spec .social-icons {
	text-align: center;
}
#spec a {
	background-color: #111;
	width: 40px;
	height: 40px;
	display: inline-block;
	transition: background-color .3s ease;
}
#spec i {
	width: 100%;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    color: #fff;
	transition: color .3s ease;
}
#spec a:hover {
	background-color: #000;
	transition: background-color .3s ease;
}
#spec a:hover i {
	color: #ffdb31;
	transition: color .3s ease;
}
.esrb {
	margin-top:15px;
	margin-bottom: 15px;
}
.esrb img {
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    /* position: relative; */
    display: block;
}
/*---- LINK ----*/
#link_area {
	width: 986px;
	background: url('../img/footer_line.png') top center no-repeat;
	padding-top: 13px;
	position: relative;
	z-index: 2;
}
#link_area ul {
	width: 600px;
	height: 30px;
}
#link_area li {
	float: left;
}
#link_area li:nth-child(1) {
	width: 160px;
	height: 27px;
	background: url('../img/footer_navi_slash.png') top right no-repeat;
}
#link_area li:nth-child(2) {
	width: 200px;
	height: 27px;
	background: url('../img/footer_navi_slash.png') top right no-repeat;
	margin: 0 14px;
}
#link_area li:nth-child(1) a {
	display: block;
	width: 132px;
	height: 27px;
	background: url('../img/footer_navi_blog.png') top center no-repeat;
	margin-bottom: 11px;
}
#link_area li:nth-child(2) a {
	display: block;
	width: 169px;
	height: 25px;
	background: url('../img/footer_navi_twitter.png') top center no-repeat;
	margin-right: 11px;
}
#link_area li:nth-child(3) a {
	display: block;
	width: 182px;
	height: 25px;
	background: url('../img/footer_navi_facebook.png') top center no-repeat;
}
#link_area li a:hover {
	display: block;
	background-position: 0 100%;
}
/*---- copyright ----*/
/*
#copyright ul {
	width: 190px;
	position: absolute;
	top: 222px;
	left: 800px;
	z-index: 3;
}
#copyright li {
	float: left;
}
#copyright li:nth-child(1) {
	margin-right: 8px;
}
*/

#copyright img {
	margin-bottom: 15px;
}

#copyright ul {

}
#copyright li {

}

#copyright p {
	text-align: center;
	color: #fff;
	font-size: 10px;
	font-weight: normal;
	/*margin-top: -10px;*/
	padding-bottom : 10px;
}

/*----------------------------------------------
	to_pagetop 
------------------------------------------------*/
#to_pagetop{
    width: 76px;
    height: 135px;
    position: fixed;
    bottom: -100px;
    right: 30px;    
    z-index:600;
    opacity:0;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
	opacity: 0;
}

#to_pagetop a {
    display: block;
    width: 76px;
    height: 135px;
    background: url("../img/btn_to_top.png");
}

#to_pagetop a:hover {
    background: url("../img/btn_to_top.png") 100% 0;
}

/*----------------------------------------------
	dialog 
------------------------------------------------*/
.pop_image {
	cursor: pointer;
	-webkit-transition: opacity 0.3s linear;
	transition: opacity 0.3s linear;
}
.pop_image:hover {
	opacity: 0.7;
}
#dialog{
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    position: fixed;
    z-index: 8000;
}
#dialog .dialog_contain{
    position: absolute;
    z-index: 9000;
	background: red;
}
#dialog .dialog_close{
}
.dialog_close_box{
    width: 34px;
    height: 34px;
    background-image:url(../img/close.png);
    z-index: 300;
    opacity: 0.9;
    cursor: pointer;
    margin: auto 74px 5px auto;
	-webkit-transition: opacity 1s linear;
	transition: opacity 1s linear;
}
.dialog_close_box:hover {
    opacity: 1;
}
#dialog .dialog_box{
    display:box;
    display:-webkit-box;
    display:-ms-flexbox;
}
.dialog_back {
    width: 74px;
	display: block;
}
.dialog_next {
    width: 74px;
	display: block;
}

#dialog .dialog_prev_box,#dialog .dialog_next_box{
    width: 34px; 
    z-index: 300;
    opacity: 0.8;
    cursor: pointer; 
	-webkit-transition: opacity 1s linear; 
	transition: opacity 1s linear;  
	margin: auto 20px
}
#dialog .dialog_back:hover {
	opacity: 1;
}
#dialog .dialog_next:hover {
	opacity: 1;
}
.dialog_bg {
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
    background-color: #000;
    background:rgba(0,0,0,0.8);
    //opacity: 1;
    position: fixed;
    z-index: 3000;
}