@charset "utf-8";

/*-----------------------------------------------------
　Base Layout Style
------------------------------------------------------*/

/* =========================================================
　◆Link Style
========================================================= */

a:link    { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover   { color: #e62e8b; text-decoration: underline; }
a:active  { color: #666666; text-decoration: none; }
a:hover img { filter: alpha(opacity=80); -moz-opacity:0.80; opacity:0.80;}
img.rollover2 { filter:alpha(opacity=100) !important;-moz-opacity:1.0 !important;opacity:1.0 !important;}
input [type=image]:hover { filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}

/* =========================================================
　◆基本
========================================================= */
body { background:#fff; line-height:1.7;}
img { vertical-align:top; display:block;}
.fill{ z-index: 0;}

/* =========================================================
　◆下層共通
========================================================= */
html,body { height: 100%;}
body #Wrap { position:relative; height: 100%; }
body #Wrap02 { position: relative; z-index: 10;}
body .titstyle_01 { background:#070b0b; height:98px;}
body .titstyle_01_inner { width:980px; margin:0 auto;}

/* popup動画振り分け */
body .yt_html5,
body .mv_cont_tab { display: none;}
body .yt_flash,
body .mv_cont_pc { display: block;}
body.tablet .yt_html5,
body.tablet .mv_cont_tab { display: block;}
body.tablet .yt_flash,
body.tablet .mv_cont_pc { display: none;}

/* タブレット表示時 横幅 */
body.tablet.android #Wrap { width: 1300px;}


/* =========================================================
　◆Head
========================================================= */
#Head { position: fixed; top: 0; left: 0;right: 0; z-index: 100;}
body #Head_inner { width: 100%; margin-bottom: 27px; position: relative;}
body #Head_inner .logo { display: inline; float: left; width: 165px;}
body #Head_inner .category { display: inline; float: left; width: 173px;}
#Head #sns { position: absolute; right: 0; top: 0; z-index: 100;}
#Head #sns .sns_total { display: inline; float: left; width: 166px; height: 35px; margin: 7px 4px 0 0; background: url(../images/bg_sns_total_static.png) no-repeat left top; position: relative;}
#Head #sns .sns_total .total { position: absolute; top: 0; right: 25px;}
#Head.ie #sns .sns_total .total { top: 2px;}
#Head #sns .sns_total.active { background: url(../images/bg_sns_total_active.png) no-repeat left top;}
#Head #sns .sns_total .total p { font-size: 17px; color: #fff; font-weight: bold; line-height: 35px;}
#Head #sns .sns_ac { display: none; width: 156px; height: 54px; background: url(../images/bg_sns_ac.png) no-repeat left top; position: absolute; top: 42px; left: 0;}
#Head #sns .sns_ac p { font-size: 17px; line-height: 26px; color: #fff; font-weight: bold;}
#Head #sns .sns_ac .twitter_count_wrap { position: absolute; top: 0; right: 14px;}
#Head #sns .sns_ac .facebock_count_wrap { position: absolute; top: 27px; right: 14px;}
#Head.ie #sns .sns_ac .twitter_count_wrap { top: 2px;}
#Head.ie #sns .sns_ac .facebock_count_wrap { top: 29px;}
#Head #sns #sns_list { display: inline; float: left;}
#Head #sns #sns_list li { display: inline; float: left; margin-right: 4px;}
#Head #sns #sns_list li:last-child { margin-right: 0;}


/* =========================================================
　◆Main
========================================================= */
#Main { padding-top: 103px; clear:both;}
#Main_inner { width:980px; margin:0 auto;}

#Wrap02 .f_banner_area01 { position: relative; z-index: 500; padding-bottom: 14px; width: 100%;}
#Wrap02 .f_banner_area01.p_fx { position: fixed;bottom: 246px;}
#Wrap02 .f_banner_area01 .f_banner_area01_inner { width: 980px; margin: 0 auto; position: relative; }
#Wrap02 .f_banner_area01 .f_banner_area01_inner ul li { float:left; display:inline; }
#Wrap02 .f_banner_area01_inner ul li:first-child { margin-right:10px; }

/* =========================================================
　◆pageTop
========================================================= */



/* =========================================================
　◆back_btn
========================================================= */
body.top .back_btn_wrap { display: none; }
.back_btn_wrap { width: 119px; position: absolute; z-index: 100; height: 33px; right: 0; bottom: 0; }
.back_btn_wrap .back_btn { }
.back_btn_wrap .back_btn a { display: block;}


/* =========================================================
　◆Gnav
========================================================= */
#Gnav {height:67px; clear: both; background:url(../images/gnav_bg.png) left top repeat-x; position:relative; z-index:1;}
#Gnav_inner {height:67px; width:980px; margin:0 auto; }
#Gnav ul li { float:left; display:inline; position:relative; height:67px; text-indent:-9999px; }
#Gnav ul li span.new { position:absolute; width:36px; height:13px; top:15px; left:-19px; }
#Gnav ul li a,
#Gnav ul li span.soon { display:block; height:67px;}

#Gnav ul li.gnav_01 { background:url(../images/gnav_01_off.png) top left no-repeat; width:134px;}
#Gnav ul li.gnav_01:hover,
.info #Gnav ul li.gnav_01 { background:url(../images/gnav_01_on.png) top left no-repeat;}
#Gnav ul li.gnav_02 { background:url(../images/gnav_02_off.png) top left no-repeat; width:123px;}
#Gnav ul li.gnav_02:hover,
.story #Gnav ul li.gnav_02 { background:url(../images/gnav_02_on.png) top left no-repeat;}
#Gnav ul li.gnav_03 { background:url(../images/gnav_03_off.png) top left no-repeat; width:229px;}
#Gnav ul li.gnav_03:hover,
.break #Gnav ul li.gnav_03 { background:url(../images/gnav_03_on.png) top left no-repeat;}
#Gnav ul li.gnav_04  { background:url(../images/gnav_04_off.png) top left no-repeat; width:191px;}
#Gnav ul li.gnav_04:hover,
.character #Gnav ul li.gnav_04 { background:url(../images/gnav_04_on.png) top left no-repeat;}
#Gnav ul li.gnav_05 { background:url(../images/gnav_05_off.png) top left no-repeat; width:149px;}
#Gnav ul li.gnav_05:hover,
.system #Gnav ul li.gnav_05 { background:url(../images/gnav_05_on.png) top left no-repeat;}
#Gnav ul li.gnav_06 { background:url(../images/gnav_06_off.png) top left no-repeat; width:154px;}
#Gnav ul li.gnav_06:hover,
.special #Gnav ul li.gnav_06 { background:url(../images/gnav_06_on.png) top left no-repeat;}

#Gnav ul li.gnav_05.soon { background:url(../images/gnav_05_soon.png) top left no-repeat; width:149px; }

/* =========================================================
　◆Foot
========================================================= */
footer {}
#Foot_area { clear:both; position:relative; bottom:0; left:0; width:100%; z-index:100;}
#Foot_area.p_fx { position: fixed; bottom: 0;}

#Foot_area .f_banner_area01 { width:472px; position:absolute; top: -114px; left: 50%; margin-left: -490px; }
#Foot_area .f_banner_area01 .f_banner_area01_inner ul li { float:left; display:inline;}
#Foot_area .f_banner_area01_inner ul li:first-child { margin-right:10px;}

#Foot_area #Foot { width:100%; background:url(../images/foot_bg.png) top left repeat; padding-bottom:36px;}
#Foot_area #Foot_inner {;width:980px; margin:0 auto;}
#Foot_area #Foot_inner .f_banner_area02 { margin-bottom:15px;}
#Foot_area #Foot_inner .f_banner_area02 ul li { float:left; display:inline; margin-right:7px; position:relative; width: 134px; height: 68px;}
#Foot_area #Foot_inner .f_banner_area02 ul li span { position:absolute; bottom:-4px; left:-5px;}
#Foot_area #Foot_inner .f_banner_area02 ul li:last-child { margin-right:0;}
#Foot_area #Foot_inner .f_txtarea { width:677px; float:left; display:inline;}
#Foot_area #Foot_inner .f_txtarea .game_txt01 { font-size:12px; color:#FFF; line-height:16.5px;}
#Foot_area #Foot_inner .f_txtarea .game_txt01 span { margin-right:8px;}
#Foot_area #Foot_inner .f_txtarea #Copy,
#Foot_area #Foot_inner .f_txtarea .game_txt02 { font-size:10px; line-height:14px; color:#FFF;}
#Foot_area #Foot_inner .f_txtarea #Copy { margin-bottom:2px;}
#Foot_area #Foot_inner .f_txtarea #Copy span { margin-right:5px;}
#Foot_area #Foot_inner .f_logo_area01 { width:303px; float:left; display:inline;}
#Foot_area #Foot_inner .f_logo_area01 ul li { float:left; display:inline; margin-right:0;}

body.ie .yt_html5 { display:block;}
body.ie .yt_flash { display:none;}


/* =========================================================
　◆CLEARFIX
========================================================= */
#Gnav ul:after,
#Foot ul:after,
#dirPath ul:after,
#Head #headR:after,
#Head ul:after,
#Head:after,
#Main:after,
#Main_inner:after  { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
#Gnav ul,
#Foot ul,
#dirPath ul,
#Head #headR,
#Head ul,
#Head,
#Main,
#Main_inner        { min-height: 1px; }
* html #Gnav ul,
+ html #Foot ul,
* html #dirPath ul,
* html #Head #headR,
* html #Head ul,
* html #Head,
* html #Main,
* html #Main_inner { height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }