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

html,body,div,ul,ol,li,dl,dt,dd,form,fieldset,input,textarea,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,th,td { margin:0; padding:0;}

body{ background-color: #000; color: #BBB; margin: 0; padding: 0; font-family: ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, メイリオ, Meiryo, Osaka, ＭＳ Ｐゴシック, MS PGothic, sans-serif;}
img { border: 0;}
a {	color: #F00; text-decoration: none; overflow:hidden;}
a:hover{ color: #3399FF;}
a:visited{ color: #C00;}
a:hover img{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )";}

.clear{ clear:both;}

#wrapper{ margin:0 auto; width: 1000px;}
#wrapper h2{ padding:30px 0 0 10px;}
#header{ width: 1000px;	height: 124px; background-image: url(../img/headline.png); background-repeat: no-repeat; background-position: center top; position:relative;}
#header h1 a{ display: block; width: 230px; height: 107px; background-image: url(../img/logo.png); text-indent: -9999px; top: -8px; position: absolute;}
#header h1 a:hover{ background-position:0 -107px;}
#header h5 a{ display:block; width:156px; height:58px; background-image:url(../img/b_shop.png); text-indent: -9999px; top:3px; left:830px; position:absolute;}
#header h5 a:hover{ background-position:0 -58px;}

#header #facebook a{ position:fixed; display:block; width:29px; height:30px; top:150px; z-index:1000; background-image:url(../img/b_fb.gif); right:0; text-indent:-9999px;}
#header #twitter a{ position:fixed; display:block; width:29px; height:30px; top:190px; z-index:1000; background-image:url(../img/b_tw.gif); right:0; text-indent:-9999px;}
#header #facebook a:hover, #header #twitter a:hover{ background-position:0 -30px;}

#navigation{ margin: 0 auto; width:758px; position:relative;}
#navigation ul{	list-style: none; position: absolute;	top: 76px;}
#navigation li{ float:left;  overflow:hidden; background-repeat:no-repeat; z-index:3;}
#navigation li.nv1 a{ display:block; width:121px; height:40px; background-image:url(../img/nv1.png); text-indent:-9999px;}
#navigation li.nv2 a{ display:block; width:91px; height:40px; background-image:url(../img/nv2.png); text-indent:-9999px;}
#navigation li.nv3 a{ display:block; width:159px; height:40px; background-image:url(../img/nv3.png); text-indent:-9999px;}
#navigation li.nv4 a{ display:block; width:124px; height:40px; background-image:url(../img/nv4.png); text-indent:-9999px;}
#navigation li.nv5 a{ display:block; width:169px; height:40px; background-image:url(../img/nv5.png); text-indent:-9999px;}
#navigation li.nv6 a{ display:block; width:94px; height:40px; background-image:url(../img/nv6.png); text-indent:-9999px;}

#navigation li.nv1 a:hover{ background-position:0 -40px;}
#navigation li.nv2 a:hover{ background-position:0 -40px;}
#navigation li.nv3 a:hover{ background-position:0 -40px;}
#navigation li.nv4 a:hover{ background-position:0 -40px;}
#navigation li.nv5 a:hover{ background-position:0 -40px;}
#navigation li.nv6 a:hover{ background-position:0 -40px;}

#navigation li.nv1r { display:block; width:121px; height:40px; background-image:url(../img/nv1.png); background-position:0 -40px; text-indent:-9999px;}
#navigation li.nv2r { display:block; width:91px; height:40px; background-image:url(../img/nv2.png); background-position:0 -40px; text-indent:-9999px;}
#navigation li.nv3r { display:block; width:159px; height:40px; background-image:url(../img/nv3.png); background-position:0 -40px; text-indent:-9999px;}
#navigation li.nv4r { display:block; width:124px; height:40px; background-image:url(../img/nv4.png); background-position:0 -40px; text-indent:-9999px;}
#navigation li.nv5r { display:block; width:169px; height:40px; background-image:url(../img/nv5.png); background-position:0 -40px; text-indent:-9999px;}
#navigation li.nv6r { display:block; width:94px; height:40px; background-image:url(../img/nv6.png); background-position:0 -40px; text-indent:-9999px;}

#navigation li.nv1 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 30px; }
#navigation li.nv2 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 137px; }
#navigation li.nv3 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 260px; }
#navigation li.nv4 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 400px; }
#navigation li.nv5 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 547px; }
#navigation li.nv6 span{width: 60px; height: 26px; position: absolute; top: 25px; left: 682px; }

#navigation li.nv1r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 30px; text-indent:0;}
#navigation li.nv2r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 137px; text-indent:0;}
#navigation li.nv3r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 260px; text-indent:0;}
#navigation li.nv4r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 400px; text-indent:0;}
#navigation li.nv5r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 547px; text-indent:0; }
#navigation li.nv6r span{width: 60px; height: 26px; position: absolute; top: 25px; left: 682px; text-indent:0; }

#overview{ margin:30px auto; width:900px; position:relative;}
#overview p{ width: 830px; color: #FFF;	font-size: 14px; line-height: 160%;	padding: 15px 0 30px 0;}
#overview .pp ul{ list-style:none; margin:10px 0;}
#overview .pp span{ color:#FFF; font-size:14px; line-height:160%; padding-top:100px; width:830px;}
#overview .pp li{ float:left; margin-right:18px; }
#overview .pp li img{ border:solid 1px #CC0000; width:430px;}
#overview .pp li span{ color:#FFF; font-size:14px; line-height:160%; padding-top:100px; width:430px;}

#overview .p1{ margin: 15px 0 5px 0;}
#overview .p2{ color:#FFF; font-size:14px; line-height:160%; padding-bottom:10px; width:880px;}
#overview .p3{ color:#FFF; font-size:14px; line-height:160%; padding-bottom:10px; padding-top:5px; width:430px;}
#overview .p4{ color:#FFF; font-size:14px; line-height:160%; padding-bottom:15px; width:880px;}
#overview .p5{ color: #FFF; font-size: 14px; line-height: 160%;	padding-bottom: 10px; width: 880px;}

#overview #flow a{ position: absolute; display: block; width: 336px; height: 87px; left: 557px; top: -90px; background-image:url(../img/btn_flow.png); text-indent:-9999px;}
#overview #flow a:hover{ background-position:0 -87px;}
#overview #flow2 a{ position: absolute; display: block; width: 206px; height: 71px; left: 695px; top: -80px; background-image:url(../img/btn_flow2.png); text-indent:-9999px;}
#overview #flow2 a:hover{ background-position:0 -71px;}

#overview #navi { padding:0 0 5px 0;}
#overview #navi ul{ list-style:none;}
#overview #navi li { float:left; margin:0; text-indent:-9999px; overflow:hidden;}
#overview #navi li.n1 a{ display:block; width:178px; height:58px; background-image:url(../overview/n1.png); margin:0;}
#overview #navi li.n2 a{ display:block; width:175px; height:58px; background-image:url(../overview/n2.png); margin:0;}
#overview #navi li.n3 a{ display:block; width:176px; height:58px; background-image:url(../overview/n3.png); margin:0;}
#overview #navi li.n4 a{ display:block; width:176px; height:58px; background-image:url(../overview/n4.png); margin:0;}
#overview #navi li.n5 a{ display:block; width:177px; height:58px; background-image:url(../overview/n5.png); margin:0;}
#overview #navi li.n1 a:hover{ background-position:0 -58px;}
#overview #navi li.n2 a:hover{ background-position:0 -58px;}
#overview #navi li.n3 a:hover{ background-position:0 -58px;}
#overview #navi li.n4 a:hover{ background-position:0 -58px;}
#overview #navi li.n5 a:hover{ background-position:0 -58px;}
#overview #navi li.n1r { display:block; width:178px; height:58px; background-image:url(../overview/n1.png); margin:0; background-position:0 -58px;}
#overview #navi li.n2r { display:block; width:175px; height:58px; background-image:url(../overview/n2.png); margin:0; background-position:0 -58px;}
#overview #navi li.n3r { display:block; width:176px; height:58px; background-image:url(../overview/n3.png); margin:0; background-position:0 -58px;}
#overview #navi li.n4r { display:block; width:176px; height:58px; background-image:url(../overview/n4.png); margin:0; background-position:0 -58px;}
#overview #navi li.n5r { display:block; width:177px; height:58px; background-image:url(../overview/n5.png); margin:0; background-position:0 -58px;}

#overview #direction {width:245px; margin:30px auto 0 auto;}
#overview #direction ul{ list-style:none; height:36px;}
#overview #direction li.prev{ float:left; }
#overview #direction li.next{ float:right; }
#overview #direction li.prev a{ display:block; width:89px; height:26px; margin:0; background-image:url(../img/ov_btn_prev.gif); text-indent:-9999px;}
#overview #direction li.next a{ display:block; width:89px; height:26px; margin-left:45px; background-image:url(../img/ov_btn_next.gif); text-indent:-9999px;}
#overview #direction li.prev a:hover{ background-position:0 -26px;}
#overview #direction li.next a:hover{ background-position:0 -26px;}
#overview #direction li.prevr{ display:block; width:89px; height:26px; margin:0; background-image:url(../img/ov_btn_prev.gif); float:left; text-indent:-9999px; opacity:0.4; filter:alpha(opacity=40); -ms-filter: "alpha( opacity=40 )";}
#overview #direction li.nextr{ display:block; width:89px; height:26px; margin-left:45px; background-image:url(../img/ov_btn_next.gif); float:right; text-indent:-9999px; opacity:0.4; filter:alpha(opacity=40); -ms-filter: "alpha( opacity=40 )";}

#overview #gentou{ padding-bottom:20px;}
#overview #gentou ul{ list-style:none;}
#overview #gentou li{ float:left; margin-left:3px;}
#overview #gentou li img{ border:solid 1px #CC0000; }

#hen{ width:910px; height:125px; margin:0 auto; background-image:url(../img/story_change.png)}
#hen ul{ list-style:none;width:412px; margin:0 auto; padding-top:28px; height:66px;}
#hen li{float:left;}
#hen li a{float:left;}
#hen li.densetsu a{ display:block; width:168px; height:66px; background-image:url(../img/btn_story_d.png); text-indent:-9999px;}
#hen li.gentou a{ margin-left:76px; display:block; width:168px; height:66px; background-image:url(../img/btn_story_g.png); text-indent:-9999px;}
#hen li.densetsur{ float:left; display:block; width:168px; height:66px; background-image:url(../img/btn_story_d.png); text-indent:-9999px; background-position:0 -66px;}
#hen li.gentour{ margin-left:76px; display:block; width:168px; height:66px; background-image:url(../img/btn_story_g.png); text-indent:-9999px; background-position:0 -66px;}
#hen li.densetsu a:hover{ background-position:0 -66px;}
#hen li.gentou a:hover{ background-position:0 -66px;}

#gentou{ width:900px; margin:0px auto; background-image:url(../img/story_line_gentou.png); color:#FFF; line-height:180%; font-size:14px; background-repeat:no-repeat;}
#gentou p{ padding: 0px 27px 20px 27px;}
#gentou .section{ width: 845px;	margin: 0 auto 30px auto;}
#gentou .left{width:408px; float:left;}
#gentou .right{width:408px; float:right;}
#gentou .titlename{ text-align:center; padding:15px 0 15px 0;}
#gentou #clan{margin:30px auto 10px auto; text-align:center;}

#features{ width:900px; margin:20px auto 50px auto; background-image:url(../img/story_line_features.png); color:#FFF; line-height:180%; font-size:14px; background-repeat:no-repeat;}
#features h3{ margin-top:15px;}
#features p{ width: 830px; color: #FFF;	font-size: 14px; line-height: 160%;	padding: 15px 0 30px 0;}
#features .pp{ margin-bottom:20px;}
#features .pp ul{ list-style:none; margin:10px 0;}
#features .pp span{ color:#FFF; font-size:14px; line-height:160%; padding-top:100px; width:830px;}
#features .pp li{ float:left; margin-right:18px; }
#features .pp li img{ border:solid 1px #CC0000; width:430px;}
#features .pp li span{ color:#FFF; font-size:14px; line-height:160%; padding-top:100px; width:430px;}
#features .p2{ color: #FFF;	font-size: 14px; line-height: 160%;	padding-bottom: 10px; padding-top: 5px;	width: 900px;}
#features .p3{ color:#FFF; font-size:14px; line-height:160%; padding-bottom:10px; padding-top:5px; width:430px;}
#features .pp li .p3 span,#features .p2 span{ color:#F00; font-weight:bold;}
#features .pp li .notice{ color:#999; font-size:12px; width:430px;}

#features_serect{ width:912px; margin:10px auto;}
#features_serect ul{ list-style: none;}
#features_serect li{ float:left;  overflow:hidden; }
#features_serect li.sec1 a{ display:block; width:305px; height:82px; background-image:url(../features/btn_01.png); text-indent:-9999px;}
#features_serect li.sec2 a{ display:block; width:305px; height:82px; background-image:url(../features/btn_02.png); text-indent:-9999px;}
#features_serect li.sec3 a{ display:block; width:302px; height:82px; background-image:url(../features/btn_03.png); text-indent:-9999px;}
#features_serect li.sec1 a:hover, #features_serect li.sec2 a:hover, #features_serect li.sec3 a:hover{ background-position:0 -82px;}
#features_serect li.sec1r { display:block; width:305px; height:82px; background-image:url(../features/btn_01.png); text-indent:-9999px; background-position:0 -82px;}
#features_serect li.sec2r { display:block; width:305px; height:82px; background-image:url(../features/btn_02.png); text-indent:-9999px; background-position:0 -82px;}
#features_serect li.sec3r { display:block; width:302px; height:82px; background-image:url(../features/btn_03.png); text-indent:-9999px; background-position:0 -82px;}

#movies{ width: 830px; margin: 70px auto 40px auto; position: relative;}
#movies ul{ list-style:none;}
#movies li{ float: left; margin: 10px;}
#movies li a{ width:256px; height:142px;}
#movies li span{ position:absolute; width:32px; height:19px; background-image:url(../story/new.png); text-indent:-9999px; margin: 2px 0 0 -254px; }
#movies li div{	color: #FFF; font-size: 12px; width: 256px;	text-align: center;	margin: 5px 0 0 0;}

#container { width: 940px; padding: 40px 10px 100px 10px; margin: 0 auto; position: relative; z-index: 0;}
#example { width: 940px; height: 450px; position: relative;}

#slides { position: absolute; top: 0px;	left: 0px; z-index: 100;}
.slides_container {	width: 940px; height: 450px; overflow: hidden; position: relative;	display: none;}
#slides .slide { width: 940px; height: 450px; display: block;}
#slides .next,#slides .prev { position: absolute; top: 202px; left: -35px; width: 24px;	height: 43px; display: block; z-index: 101;}
#slides .next {	left: 951px;}

.pagination { margin:15px auto 0; width:110px;}
.pagination li { float:left; margin:0 1px; list-style:none;}
.pagination li a { display:block;	width:12px;	height:0; padding-top:12px; background-image:url(../img/pagination.png); background-position:0 0; float:left; overflow:hidden;}
.pagination li.current a {	background-position:0 -12px;}

#screen{}	
#screen ul{list-style:none;}
#screen li{ float:left; margin:0 10px 20px 10px; width:168px; height:96px;}
#screen li span{ position: absolute; width:32px; height:19px; background-image:url(../story/new.png); text-indent:-9999px; margin: 2px 0 0 -166px; }

#footer{ margin: 0 auto; text-align:center;}
#footer #copy{ margin: 0 auto; font-size: 11px; margin-top: 10px; width: 955px; color: #999; height: 17px;}
#footer #copy #left{float:left;}
#footer #copy #right{float:right;}
#footer #copy a{ color:#999;}
#footer #copy a:hover{ color: #F00;}

#copyright{	position: absolute;	text-align: center;	background-image: url(../img/footer.jpg); margin: 0 auto;	width: 100%; background-repeat: no-repeat; background-position: center top;}

#tabmenu{ padding: 0px; margin:10px auto 0 auto; color: #333; font-size: 11px; width: 960px;	background-repeat: no-repeat;}
#tabmenu div#tab{ position: absolute; width: 970px;	background-image: url(../img/non_chara.png); height: 145px;	background-repeat: no-repeat;}
#tabmenu div#tab a{	float: left; height: 43px; text-align: center; width: 44px; display: block; margin-top: 4px}
#tabmenu div#tab a span{ position: relative; width: 23px; height: 11px;	display: block;	background-image: url(../characters/new.png); text-indent: -9999px;	margin: -14px 0 0 10px; z-index: 5;}
#tabmenu div#tab a p{ position: relative; width: 41px; height: 11px; display: block; background-image: url(../characters/update.png); text-indent: -9999px;	margin: -14px 0 0 1px; z-index: 6;}

div#tab_contents{ width: 960px;	overflow: hidden; clear: both;}
div#tab_contents ul{ width:63360px; padding:0px; margin:0px; }
div#tab_contents ul li{ float: left; width:960px; height:890px; list-style-type:none;}
div#tab_contents ul li h4{ margin-top: 200px; }
div#tab_contents ul li h5{ margin-top: 20px; color:#FFF; font-size:14px; margin-left: 5px; font-weight:normal;}
div#tab_contents ul li p{ color: #FFF; font-size: 14px; line-height: 165%; margin-top: 20px; margin-left: 5px;}

.get_characte{width:131px;}
.get_characte a{ display:block; width:126px; height:32px; background-image:url(../characters/b_get.jpg); text-indent:-9999px; margin:25px 0 0 5px;}
.get_characte a:hover{ background-position:0 -32px;}

.get_movie{width:131px; }
.get_movie a{ display:block; width:126px; height:32px; background-image:url(../characters/b_mov.jpg); text-indent:-9999px; margin:15px 0 0 5px;}
.get_movie a:hover{ background-position:0 -32px;}

.get_movie2{width:131px; }
.get_movie2 a{ display:block; width:146px; height:42px; background-image:url(../characters/b_mov.png); text-indent:-9999px; margin:5px 0 0 5px;}
.get_movie2 a:hover{ background-position:0 -42px;}

#gettop { text-align:right; font-size:12px; }
#gettop a{ text-decoration:none; font-weight:bold; }
#gettop a:hover{ text-decoration:underline; }

#trial{ margin:15px auto 30px auto; width:900px; position:relative; color:#FFF;}
#trial p{ width: 830px; color: #FFF; font-size: 14px; line-height: 160%; padding: 0 0 30px 0;}
#trial .outline{ border-top:solid #b20000 1px; border-bottom:solid #b20000 1px; font-size:14px; line-height:250%;}
#trial .outline td{ border-bottom:dotted #600 1px;}
#trial .notice{ margin-top:20px; color:#ccc; font-size:12px; margin-bottom:35px;}
#trial span{ color:#F00; font-size:12px;}

.switch{ width:900px; margin:0 auto 20px auto;}
.switch ul{ list-style:none;}
.switch li{ float:left;}
.switch li a{ display:block; width:442px; height:50px; text-indent:-9999px;}
.switch li.ps3 a{ background-image:url(../dlc/btn_ps3.png);}
.switch li.wii a{ background-image:url(../dlc/btn_wiiu.png); margin-left:16px;}
.switch li.ps3 a:hover{ background-position:0 -50px;}
.switch li.wii a:hover{ background-position:0 -50px;}
.switch li.ps3r{ display:block; width:442px; height:50px; text-indent:-9999px; background-image:url(../dlc/btn_ps3.png); background-position:0 -50px;}
.switch li.wiir{ display:block; width:442px; height:50px; text-indent:-9999px; background-image:url(../dlc/btn_wiiu.png); background-position:0 -50px; margin-left:16px;}