@charset "utf-8";
h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, caption, img, form, blockquote, u, em, i { padding: 0; margin: 0; border: none; font-size: inherit; font-size: 100%; font-style: normal; font-weight: normal; list-style-type: none; }

html { width: 100%; height: 100%; margin: 0; padding: 0; }
body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: "Hiragino Kaku Gothic ProN", sans-serif; background: url(../images/bg_body.jpg) 0 0 repeat-y;}
a { outline: none; }
img { width: 100%; height: auto; vertical-align: top; border: 0; display: block; }
/*----------------------------------------------------
  clearfix
----------------------------------------------------*/
.clearfix:after { content: ""; display: block; clear: both; }


/*----------------------------------------------------
  #loader
----------------------------------------------------*/
#loader { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; background: #fff url(../images/loading1.gif) scroll no-repeat 50% 50%; }


#btn_menu { width: calc(192 / 640 * 100%); position: absolute; top: 0; right: 0; z-index: 10;}

/*----------------------------------------------------
  #container
----------------------------------------------------*/
#container { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
.base_sp { position: relative; width: 100%; text-align: center; margin: 0 auto; }


/*----------------------------------------------------
  #gnavi
----------------------------------------------------*/
#gnav { width: 100%; margin: 0 auto 5.6%; padding: 0; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);}
#gnav:after { content: ""; clear: both; display: block;}
#gnav li { width: 50%; float: left; background: 0 0 / 100% auto no-repeat;}
#gnav li > a { display: block;}
#gnav li.gnav_feature { background-image: url(../images/gnav_feature_on.png);}
#gnav li.gnav_gameflow { background-image: url(../images/gnav_gameflow_on.png);}
#gnav li.gnav_direction { background-image: url(../images/gnav_direction_on.png);}
#gnav li.gnav_spec { background-image: url(../images/gnav_spec_on.png);}
#gnav li.gnav_top { width: 100%; clear: both; background-image: url(../images/gnav_top_on.png); }

/* Coming soon用 公開時削除 */
/*
#gnav li.gnav_direction > a { -ms-pointer-events: none; pointer-events: none; background: url(../images/gnav_direction_cs.png) 0 0 / 100% auto no-repeat;}
#gnav li.gnav_direction > a > img { opacity: 0;}
*/

/*----------------------------------------------------
  #footer
----------------------------------------------------*/
#footer { background: #008cd6; padding: 4.4% 0 3%; }

#footer .foot_bnr { width: calc(530 / 640 * 100%); margin: 0 auto 4.8%;}
#footer .foot_bnr li { margin-bottom: 3.8%;}
#footer .foot_bnr li:last-child { margin-bottom: 0;}

#footer > a { width: calc(600 / 640 * 100%); margin: 0 auto 3%; display: block;}
#footer >.footer_inner { width: calc(600 / 640 * 100%); margin: 0 auto; display: table; }
#footer >.foot_txt { width: calc(100% - 6.25%); margin: 0 auto 3.5%; }

#footer .notes,
#footer .share { display: table-cell; vertical-align: middle; }
#footer .notes { width: 56.6%; padding-right: 3.8%; }
#footer .notes span { font-size: 17px; color: #fff; letter-spacing: -1.2px; padding: 3px 0 3px 5px; border: solid 1px #fff; display: block; }

#footer .share { width: 36.8%; font-size: 0; line-height: 0; text-align: right; }
#footer .share li { width: calc(88% / 4); display: inline-block; }
#footer .share li + li { margin-left: 4%; }
#footer .share a { width: 100%; display: inline-block; }