@charset 'utf-8';

/* ===================================================================
CSS information
 file name  :shared.css
 style info :共通のcss

=================================================================== */


/* ==========================================================
	BASE
========================================================== */

body {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', Sans-Serif;
}
#wrap {
  min-width: 1040px;
  background: url(../images/shared/bg_repeat.gif) repeat center 0;
  text-align: left;
  overflow: hidden;　/*7/13? 右側に白い隙間 解消用*/
}
.in #contents {
  padding: 106px 0 0;
}
.inner {
  width: 1040px;
  margin: 0 auto;
}

/* ==========================================================
	HEADER
========================================================== */

#header {
  background: url(../images/shared/bg_header_repeat.gif) repeat-x center 0;
}
.header_inner {
  width: 1040px;
  height: 62px;
  margin: 0 auto;
}
h1 {
  float: left;
  padding: 19px 0 0 26px;
}
.logo_3ds {
  float: right;
  padding: 20px 20px 0 0;
}
.bg_logo {
  background: url(../images/shared/bg_logo_repeat.jpg) repeat-x center 0;
}
.bg_logo_inner {
  position: relative;
  height: 190px;
  background: url(../images/shared/bg_logo_inner.jpg) no-repeat center 0;
}
.in h2 {
  position: absolute;
  top: -57px;
  left: 50%;
  margin-left: -132px;
}
.in .bnr_whf {
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: 144px;
}

/* ==========================================================
	GNAVI
========================================================== */

.in #nav {
  position: absolute;
  top: 220px;
  width: 100%;
}
#nav {
  background: url(../images/shared/bg_contents_head_repeat.png) repeat-x center 18px;
}
#nav .btn_snackworld {
  position: absolute;
  top: -107px;
  left: 21px;
}
#nav #gnavi {
  position: relative;
  width: 1040px;
  margin: 0 auto;
}
#nav ul {
  width: 992px;
  margin: 0 auto;
  padding: 24px;
  background: url(../images/shared/bg_navi.png) no-repeat center 0;
}
#nav li {
  float: left;
  position: relative;
  margin: 0 7px 0 0;
}
#nav li:last-child {
  margin: 0;
}
#nav #gnavi li .icon-new {
  display: none;
  position: absolute;
  top: -16px;
  right: 5px;
}
#nav #gnavi li.new .icon-new {
  display: block;
  text-indent: 0;
}

/* ON ------------------------------- */

#top #gnavi .navi_top {
  width: 146px;
  height: 99px;
  background: url(../images/shared/navi_00_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#game.page_01 #gnavi .navi_game01 {
  width: 182px;
  height: 99px;
  background: url(../images/shared/navi_01_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#game:not(.page_01) #gnavi .navi_game {
  width: 140px;
  height: 99px;
  margin: 0 7px 0 0;
  background: url(../images/shared/navi_02_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#character #gnavi .navi_character {
  width: 160px;
  height: 99px;
  margin: 0 7px 0 0;
  background: url(../images/shared/navi_03_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#system #gnavi .navi_system {
  width: 212px;
  height: 99px;
  margin: 0 7px 0 0;
  background: url(../images/shared/navi_04_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#movie #gnavi .navi_movie {
  width: 117px;
  height: 99px;
  background: url(../images/shared/navi_05_on.png) no-repeat 0 0;
  text-indent: -9999px;
}

/* ==========================================================
	Contents
========================================================== */

.in h3 {
  margin: 27px 0 34px 40px;
}
.bg_contents_body {
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  border-radius: 18px;
}
.btn-back-first {
  margin: -110px 60px 34px 0;
  text-align: right;
}

/* ==========================================================
	footer_navi
========================================================== */

#footer_navi {
  width: 960px;
  margin: 40px auto 30px;
}
#footer_navi .btn_snackworld {
  display: block;
  margin: 0 0 24px;
}
#footer_navi ul li {
  float: left;
}

/* ON ------------------------------- */

#top #footer_navi .navi_top {
  width: 157px;
  height: 85px;
  background: url(../images/shared/footer_navi_00_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#game.page_01 #footer_navi .navi_game01 {
  width: 182px;
  height: 85px;
  background: url(../images/shared/footer_navi_01_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#game:not(.page_01) #footer_navi .navi_game {
  width: 133px;
  height: 85px;
  background: url(../images/shared/footer_navi_03_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#character #footer_navi .navi_character {
  width: 152px;
  height: 85px;
  background: url(../images/shared/footer_navi_02_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#system #footer_navi .navi_system {
  width: 203px;
  height: 85px;
  background: url(../images/shared/footer_navi_04_on.png) no-repeat 0 0;
  text-indent: -9999px;
}
#movie #footer_navi .navi_movie {
  width: 133px;
  height: 85px;
  background: url(../images/shared/footer_navi_05_on.png) no-repeat 0 0;
  text-indent: -9999px;
}

/* ==========================================================
	FOOTER
========================================================== */

.footer_bnr .bnr li {
  float: left;
}
.footer_bnr .bnr li:first-child {
  margin: 0 4px 30px 40px;
}
.footer_bnr .sns {
  clear: both;
  font-size: 0;
  text-align: center;
}
.sns li {
  display: inline-block;
  margin: 0 5px;
}
#footer {
  background: url(../images/shared/bg_footer_body.gif) repeat center 30px;
}
.bg_footer_head {
  background: url(../images/shared/bg_footer_head.gif) repeat-x center 0;
}
.bg_footer_bottom {
  padding: 0 0 18px;
  background: url(../images/shared/bg_footer_bottom.gif) repeat-x center bottom;
}
.bg_footer_img {
  padding: 36px 0 0;
  background: url(../images/shared/bg_footer_img.png) no-repeat center 30px;
}
.copyright {
  width: 960px;
  margin: -6px auto 22px;
}
.bnr_portal {
  margin: 0 0 15px 40px;
}
.btn_official {
  margin: 0 0 10px 40px;
}
.copyright_level5 {
  text-align: center;
}
#pageTop {
  position: fixed;
  right: 10px;
  bottom: 62px;
}