@charset 'utf-8';

/* ==========================================================
  スナックワールドとは
========================================================== */

#about h4 {
  margin: 0 0 27px;
}
#about h5 {
  margin: 0 0 21px;
}
.mB44 {
  margin-bottom: 44px;
}
.mB70 {
  margin: 0 0 70px;
}

/* クロスワールドファンタジー */

#about .information {
  margin: 0 0 60px;
  padding: 13px 0;
  background: url(../images/about/bg_info.jpg) repeat-x center 0;
}

/* 今後のクロスメディア展開 */

#about .x_media_area {
  text-align: center;
}

/* ==========================================================
  キャラクター
========================================================== */

.bg_butako {
  position: absolute;
  left: 50%;
  margin: 1px 0 0 -629px;
}

/* ==========================================================
  ゲーム紹介
========================================================== */

#game.in h3 {
  margin: 17px 0 36px 40px;
}
#game h4 {
  padding: 0 0 30px;
  text-align: center;
}
#game .game_navi {
  overflow: hidden;
  margin: 0 0 0 40px;
}
#game .game_navi li {
  float: left;
  position: relative;
}
#game .game_navi .icon-new {
  display: none;
  position: absolute;
  right: 37px;
  bottom: 123px;
}
#game .game_navi .new .icon-new {
  display: block;
}

/* サブナビ ------------------------------------------------ */

#game .sub-navi {
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 928px;
  height: 368px;
  margin: 32px auto 0;
  padding: 7px 0 0 35px;
  background: url(../images/game/bg-sub-navi.png) no-repeat center 0;
}
#game .sub-navi ul li {
  float: left;
  position: relative;
  padding: 0 17px 0 0;
}
#game .sub-navi ul li .icon-new {
  display: none;
  position: absolute;
  top: -10px;
  right: 19px;
}
#game .sub-navi ul li.new .icon-new {
  display: block;
}
#game .sub-navi ul .sub-navi_01 .icon-new, #game .sub-navi ul .sub-navi_11 .icon-new {
  top: -24px;
}
#game .sub-navi ul .sub-navi_10 .icon-new {
  right: 10px;
}
#game .sub-navi .btn-back {
  margin: 0 8px 34px 0;
  text-align: right;
}

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

.page_01 .sub-navi_01 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_01_on.png) no-repeat 0 0;
}
.page_02 .sub-navi_02 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_02_on.png) no-repeat 0 0;
}
.page_03 .sub-navi_03 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_03_on.png) no-repeat 0 0;
}
.page_04 .sub-navi_04 {
  width: 205px;
  height: 79px;
  background: url(../images/game/sub-navi_04_on.png) no-repeat 0 0;
}
.page_05 .sub-navi_05 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_05_on.png) no-repeat 0 0;
}
.page_06 .sub-navi_06 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_06_on.png) no-repeat 0 0;
}
.page_07 .sub-navi_07 {
  width: 205px;
  height: 79px;
  background: url(../images/game/sub-navi_07_on.png) no-repeat 0 0;
}
.page_08 .sub-navi_08 {
  width: 205px;
  height: 79px;
  background: url(../images/game/sub-navi_08_on.png) no-repeat 0 0;
}
.page_10 .sub-navi_10 {
  width: 205px;
  height: 79px;
  background: url(../images/game/sub-navi_10_on.png) no-repeat 0 0;
}
.page_11 .sub-navi_11 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_11_on.png) no-repeat 0 0;
}
.page_12 .sub-navi_12 {
  width: 205px;
  height: 86px;
  background: url(../images/game/sub-navi_12_on.png) no-repeat 0 0;
}
.page_01 .sub-navi_01 a, .page_02 .sub-navi_02 a, .page_03 .sub-navi_03 a, .page_04 .sub-navi_04 a, .page_05 .sub-navi_05 a, .page_06 .sub-navi_06 a, .page_07 .sub-navi_07 a, .page_08 .sub-navi_08 a, .page_10 .sub-navi_10 a, .page_11 .sub-navi_11 a, .page_12 .sub-navi_12 a {
  visibility: hidden;
}

/* スナックワールドトレジャラーズとは */

#game.page_01 .icon-new {
  position: absolute;
  top: -17px;
  right: 77px;
}
#game .section-list {
  overflow: hidden;
  width: 988px;
  margin: 46px auto 33px;
}
#game .section-list li {
  float: left;
}
#game .section-list li:not(:first-child) {
  margin: 0 0 0 17px;
}
#game .sec {
  overflow: hidden;
  position: relative;
  width: 100%;
}
#game .bg-icon {
  position: absolute;
  top: 41px;
  left: 50%;
  margin: 0 0 0 -523px;
}
#game .relative {
  display: block;
  position: relative;
}
#game .parts_left {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -472px;
}
#game .parts_right {
  position: absolute;
  top: 0;
  right: 50%;
  margin: 0 -486px 0 0;
}
#sec_03 .parts_left, #sec_04 .parts_left {
  margin: 0 0 0 -670px;
}
#sec_03 .parts_right, #sec_04 .parts_right {
  margin: 0 -699px 0 0;
}
#game.page_01 .btn {
  position: absolute;
  top: 1104px;
  right: 0;
  left: 0;
  margin: 0 auto;
}
#game.page_01 #sec_03 .btn {
  top: 743px;
}
#game.page_01 #sec_04 .btn {
  top: 898px;
}

/* ジャラのブランド */

#game .bg-brand {
  background: url(../images/game/05/bg-brand.png) repeat-x center 170px;
}
#game .read-jara {
  padding: 13px 0 41px;
}
#game .brand-list {
  width: 932px;
  margin: 0 auto 20px;
  font-size: 0;
  text-align: center;
}
#game .brand-list li {
  display: inline-block;
  position: relative;
  margin: 0 6px 12px 0;
}
#game .brand-list .icon-new {
  position: absolute;
  top: -8px;
  right: 17px;
}
#game .left-block {
  float: left;
  position: relative;
  text-align: left;
}
#game .right-block {
  float: right;
  position: relative;
  text-align: left;
}
#game .left-block .icon-new {
  position: absolute;
  top: 26px;
  left: 254px;
}
#game .right-block .icon-new {
  position: absolute;
  top: 26px;
  left: 224px;
}
#game #brand_01 .left-block .bg-btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 172px;
  padding: 16px 0 0 73px;
  background: url(../images/game/05/brand_01_02.png) no-repeat 0 0;
}
#game #brand_01 .right-block .bg-btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 172px;
  padding: 16px 0 0 42px;
  background: url(../images/game/05/brand_02_02.png) no-repeat 0 0;
}
#game #brand_02 .left-block .bg-btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 165px;
  padding: 16px 0 0 73px;
  background: url(../images/game/05/brand_03_02.png) no-repeat 0 0;
}
#game #brand_02 .right-block .bg-btn {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 165px;
  padding: 16px 0 0 42px;
  background: url(../images/game/05/brand_04_02.png) no-repeat 0 0;
}
#game.page_06 .btn {
  line-height: 1;
  padding: 0 0 14px;
  text-align: center;
}
#game.page_06 .btn li {
  display: inline-block;
  position: relative;
  margin: 0 5px;
}
#game.page_06 .btn .icon-new {
  position: absolute;
  top: -9px;
  right: 3px;
}
#game.page_06 .parts_right {
  margin: 0 -490px 0 0;
}
#game.page_08 .img {
  position: relative;
}
#game.page_08 .img span {
  position: absolute;
  top: 388px;
  left: -16px;
  z-index: 5;
}
#game.page_12 .parts_left {
  margin: 0 0 0 -601px;
}
#game.page_12 .parts_right {
  margin: 0 -519px 0 0;
}

/* ==========================================================
  ジャラやスナックとの連動
========================================================== */

#system.in h3 {
  margin: 17px 0 0 40px;
}
#system .btn_play {
  padding: 2px 0 0 42px;
}
#system .img0205 {
  overflow: auto;
  margin: 0 0 40px;
  padding: 0 109px 85px;
  background: url(../images/system/bg0205.jpg) no-repeat center 0;
}
#system .img0205 li {
  float: left;
}
#system .img0205 li:not(:last-child) {
  margin: 0 30px 0 0;
}
#system .brand_a {
  width: 461px;
  height: 366px;
  margin: 0 auto;
  padding: 231px 0 0 503px;
  background: url(../images/system/img_11_a.jpg) no-repeat 0 0;
}
#system .brand_b {
  width: 461px;
  height: 366px;
  margin: 0 auto;
  padding: 194px 0 0 503px;
  background: url(../images/system/img_11_b.jpg) no-repeat 0 0;
}
#system .brand_c {
  width: 461px;
  height: 366px;
  margin: 0 auto;
  padding: 203px 0 0 503px;
  background: url(../images/system/img_11_c.jpg) no-repeat 0 0;
}
#system .brand_d {
  width: 461px;
  height: 366px;
  margin: 0 auto 30px;
  padding: 194px 0 0 503px;
  background: url(../images/system/img_11_d.jpg) no-repeat 0 0;
}

/* ==========================================================
  MOVIE
========================================================== */

#movie h4 {
  margin: 0 0 16px;
  text-align: center;
}
#movie .movie_list {
  width: 954px;
  margin: 0 auto;
}
#movie .movie_list li {
  float: left;
  position: relative;
  width: 298px;
  height: 394px;
  margin: 0 30px 30px 0;
  background: url(../images/movie/bg-list.png) no-repeat 0 0;
  text-align: center;
}
#movie .movie_list li:nth-child(3n) {
  margin: 0 0 30px;
}
#movie .movie_list .title {
  padding: 0 0 14px;
}
#movie .movie_list .ss {
  padding: 0 0 10px;
}
#movie .btn_list {
  display: inline-block;
}
#movie .movie_list .icon-new {
  display: none;
  position: absolute;
  top: -7px;
  right: 7px;
}
#movie .movie_list .new .icon-new {
  display: block;
}

/* ==========================================================
  TOPICS
========================================================== */

#topics h4 {
  margin: -24px 0 20px;
}
#topics .bg_btn {
  position: relative;
  padding: 38px 0 42px;
  background: url(../images/topics/whf17summer/img_06.jpg) no-repeat center 0;
}
#topics .relative {
  position: relative;
}
#topics .img_left {
  position: absolute;
  top: 279px;
  left: -15px;
}
#topics .img_right {
  position: absolute;
  top: -22px;
  right: 14px;
}
#topics .click_map {
  display: block;
  position: absolute;
  top: 262px;
  left: 500px;
  width: 270px;
  height: 20px;
}
#topics #newslist {
  padding: 0 68px 2px;
  background: url(../images/topics/bg-body.jpg) repeat-y center 0;
}
#topics #newslist li {
  overflow: hidden;
  margin: 0 0 20px;
  padding: 20px;
  -webkit-box-shadow: 0 2px 0 #594e28;
  box-shadow: 0 2px 0 #594e28;
  border: 2px solid #3f3609;
  background: #fff;
  color: #663018;
}
#topics #newslist dt {
  float: left;
  margin: 0 20px 0 0;
  color: #f28f24;
}
#topics #newslist dd {
  float: left;
  width: 740px;
}

/* 販売店オリジナル特典 */

#topics .list_tokuten {
  overflow: hidden;
}
#topics .list_tokuten li {
  float: left;
  margin: 0 0 46px 44px;
  vertical-align: top;
}
#topics .list_tokuten li:nth-child(even) {
  float: right;
  margin: 0 44px 46px 0;
}
#topics .list_tokuten .bg_btn {
  height: 88px;
  padding: 12px 0 0;
  background: url(../images/topics/tokuten/bg-btn.jpg) no-repeat 0 0;
}

/* TVCM */

#topics .mTn8 {
  margin: -8px auto 0;
}
#topics .relative .btn_tvcm {
  position: absolute;
  top: 369px;
  right: 0;
  left: 0;
  margin: auto;
}
#topics .mB16 {
  margin: 0 auto 16px;
}