@charset "UTF-8";
/* line 11, common.scss */
* {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

/* line 16, common.scss */
html,
body {
  color: #333;
  background: #fff;
  font-size: 16px;
  width: 100%;
  height: 100%;
}

/* line 24, common.scss */
body {
  min-width: 1200px;
}

/* line 27, common.scss */
html[lang=en] {
  font-family: Verdana, Geneva, sans-serif;
}

/* line 30, common.scss */
html[lang=ja] {
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

/* line 34, common.scss */
a {
  color: #06f;
}

/* line 35, common.scss */
a:hover {
  text-decoration: none;
}

/* line 36, common.scss */
a, img {
  border: none;
  outline: none;
}

/* line 37, common.scss */
li {
  list-style-type: none;
}

/* line 38, common.scss */
::selection {
  background: #999;
}

/* line 39, common.scss */
::-moz-selection {
  background: #999;
}

/* line 40, common.scss */
.noselect,
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* line 47, common.scss */
.anchor {
  display: block;
  height: 80px;
  margin-top: -80px;
}

/*-----------------------*/
/* pagetop */
/*-----------------------*/
/* line 56, common.scss */
#pagetop {
  width: 80px;
  height: 80px;
  background: url(../img/pagetop.png) 0 0 no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: fixed;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 5000;
}

/* line 69, common.scss */
#pagetop:hover {
  opacity: 0.5;
}

/*-----------------------*/
/* footer */
/*-----------------------*/
/* line 76, common.scss */
footer {
  background: #000;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  padding: 30px 0 50px 0;
}
/* line 84, common.scss */
footer .share {
  font-size: 0;
  margin-bottom: 30px;
}
/* line 87, common.scss */
footer .share iframe {
  margin-right: 10px;
}

/*-----------------------*/
/* container */
/*-----------------------*/
/* line 96, common.scss */
.container {
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
/* line 101, common.scss */
.container article {
  position: relative;
}
/* line 103, common.scss */
.container article > .inner {
  width: 1200px;
  position: relative;
  margin: 0 auto;
  height: 100%;
}

/*-----------------------*/
/* container */
/*-----------------------*/
/* line 115, common.scss */
article.top {
  height: 800px;
  background: url(../img/top_bg.jpg) top center no-repeat;
}
/* line 118, common.scss */
article.top h1 {
  width: 600px;
  height: 420px;
  position: absolute;
  right: 0;
  top: 160px;
  display: block;
}
/* line 125, common.scss */
article.top h1 img {
  display: block;
  width: 600px;
  height: 420px;
}
/* line 131, common.scss */
article.top .language {
  width: 200px;
  height: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
}
/* line 137, common.scss */
article.top .language:after {
  content: " ";
  display: block;
  clear: both;
}
/* line 142, common.scss */
article.top .language a, article.top .language div {
  display: block;
  float: left;
  width: 100px;
  height: 30px;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/language.png);
}
/* line 150, common.scss */
article.top .language div.jp {
  background-position: 0 0;
}
/* line 153, common.scss */
article.top .language a.en {
  background-position: -100px 0;
}
/* line 155, common.scss */
article.top .language a.en:hover {
  background-position: -100px -60px;
}
/* line 159, common.scss */
article.top .language a.jp {
  background-position: 0 -30px;
}
/* line 161, common.scss */
article.top .language a.jp:hover {
  background-position: 0 -60px;
}
/* line 165, common.scss */
article.top .language div.en {
  background-position: -100px -30px;
}
/* line 169, common.scss */
article.top .next {
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -32px;
}
/* line 177, common.scss */
article.top .next img {
  display: block;
  width: 64px;
  height: 64px;
}
/* line 182, common.scss */
article.top .next:hover {
  opacity: 0.5;
}

/*-----------------------*/
/* nav */
/*-----------------------*/
/* line 191, common.scss */
article.nav {
  height: 80px;
  background: #000;
}
/* line 194, common.scss */
article.nav nav {
  position: relative;
  height: 80px;
  background: url(../img/header.jpg) top center no-repeat #000;
}
/* line 198, common.scss */
article.nav nav.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1200px;
  z-index: 5000;
}
/* line 206, common.scss */
article.nav nav > .inner {
  position: relative;
  max-width: 1920px;
  height: 80px;
  margin: 0 auto;
}
/* line 212, common.scss */
article.nav nav ul {
  height: 80px;
  width: 852px;
  margin: 0 auto;
}
/* line 216, common.scss */
article.nav nav ul:after {
  content: " ";
  display: block;
  clear: both;
}
/* line 221, common.scss */
article.nav nav ul li {
  height: 80px;
  display: block;
  float: left;
  margin-right: 25px;
  position: relative;
}
/* line 227, common.scss */
article.nav nav ul li:after {
  content: " ";
  width: 25px;
  height: 80px;
  display: block;
  background: url(../img/nav.png) -400px 0 no-repeat;
  position: absolute;
  top: 0;
  right: -25px;
}
/* line 238, common.scss */
article.nav nav ul li:last-child:after {
  display: none;
}
/* line 242, common.scss */
article.nav nav ul li.nav_home {
  width: 86px;
}
/* line 243, common.scss */
article.nav nav ul li.nav_world {
  width: 88px;
}
/* line 244, common.scss */
article.nav nav ul li.nav_characters {
  width: 156px;
}
/* line 245, common.scss */
article.nav nav ul li.nav_system {
  width: 101px;
}
/* line 246, common.scss */
article.nav nav ul li.nav_media {
  width: 92px;
}
/* line 247, common.scss */
article.nav nav ul li.nav_gamedetails {
  width: 179px;
}
/* line 249, common.scss */
article.nav nav ul li a {
  height: 80px;
  width: 100%;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/nav.png);
}
/* line 256, common.scss */
article.nav nav ul li.nav_home a {
  background-position: 0px 0;
}
/* line 257, common.scss */
article.nav nav ul li.nav_world a {
  background-position: 0px -80px;
}
/* line 258, common.scss */
article.nav nav ul li.nav_characters a {
  background-position: 0px -160px;
}
/* line 259, common.scss */
article.nav nav ul li.nav_system a {
  background-position: 0px -240px;
}
/* line 260, common.scss */
article.nav nav ul li.nav_media a {
  background-position: 0px -320px;
}
/* line 261, common.scss */
article.nav nav ul li.nav_gamedetails a {
  background-position: 0px -400px;
}
/* line 262, common.scss */
article.nav nav ul li.nav_home a:hover {
  background-position: -200px 0;
}
/* line 263, common.scss */
article.nav nav ul li.nav_world a:hover {
  background-position: -200px -80px;
}
/* line 264, common.scss */
article.nav nav ul li.nav_characters a:hover {
  background-position: -200px -160px;
}
/* line 265, common.scss */
article.nav nav ul li.nav_system a:hover {
  background-position: -200px -240px;
}
/* line 266, common.scss */
article.nav nav ul li.nav_media a:hover {
  background-position: -200px -320px;
}
/* line 267, common.scss */
article.nav nav ul li.nav_gamedetails a:hover {
  background-position: -200px -400px;
}
/* line 270, common.scss */
article.nav nav .buynow {
  width: 170px;
  height: 80px;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/buynow.png);
  position: absolute;
  top: 0;
  right: 0;
}
/* line 278, common.scss */
article.nav nav .buynow:hover {
  background-position: 0 -80px;
}
/* line 282, common.scss */
article.nav nav .buysteam {
  width: 200px;
  height: 80px;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/buysteam.png);
  position: absolute;
  top: 0;
  right: 0;
}
/* line 290, common.scss */
article.nav nav .buysteam:hover {
  background-position: 0 -80px;
}

/*-----------------------*/
/* world */
/*-----------------------*/
/* line 300, common.scss */
article.world {
  height: 800px;
  background: url(../img/world_bg.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
/* line 306, common.scss */
article.world > .inner div {
  background: url(../img/world_image.png) center center no-repeat;
  width: 1200px;
  height: 800px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 120%;
  line-height: 1.8em;
  color: #fff;
  text-shadow: 0 0 10px #000,0 0 10px #000,0 0 10px #000;
}

/*-----------------------*/
/* characters */
/*-----------------------*/
/* line 325, common.scss */
article.characters {
  height: 800px;
  background: url(../img/bg1.jpg) top center no-repeat;
}
/* line 328, common.scss */
article.characters nav {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 30px;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* line 337, common.scss */
article.characters nav a {
  width: 100px;
  height: 100px;
  display: block;
  margin: 5px;
  border: 2px solid #eeeeee;
  background: #fff;
}
/* line 344, common.scss */
article.characters nav a div {
  width: 100px;
  height: 100px;
  text-indent: 105%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-image: url(../img/character_nav.jpg);
  opacity: 0.5;
}
/* line 352, common.scss */
article.characters nav a.nav1 div {
  background-position: 0 0;
}
/* line 353, common.scss */
article.characters nav a.nav2 div {
  background-position: -100px 0;
}
/* line 354, common.scss */
article.characters nav a.nav3 div {
  background-position: -200px 0;
}
/* line 355, common.scss */
article.characters nav a.nav4 div {
  background-position: -300px 0;
}
/* line 356, common.scss */
article.characters nav a.nav5 div {
  background-position: -400px 0;
}
/* line 357, common.scss */
article.characters nav a.nav6 div {
  background-position: -500px 0;
}
/* line 358, common.scss */
article.characters nav a.nav7 div {
  background-position: -600px 0;
}
/* line 359, common.scss */
article.characters nav a.nav8 div {
  background-position: -700px 0;
}
/* line 360, common.scss */
article.characters nav a.current, article.characters nav a:hover {
  border-color: #ccc;
}
/* line 363, common.scss */
article.characters nav a.current div, article.characters nav a:hover div {
  opacity: 1;
}
/* line 369, common.scss */
article.characters ul {
  width: 1200px;
  height: 800px;
  display: block;
  position: relative;
}
/* line 374, common.scss */
article.characters ul li {
  width: 1200px;
  height: 800px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 381, common.scss */
article.characters ul li:first-child {
  display: block;
}
/* line 384, common.scss */
article.characters ul li > .inner {
  width: 1200px;
  height: 800px;
  position: relative;
}
/* line 388, common.scss */
article.characters ul li > .inner:after {
  content: " ";
  width: 1200px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}
/* line 399, common.scss */
article.characters ul .image {
  display: block;
  position: absolute;
  top: 0;
  left: -100px;
}
/* line 405, common.scss */
article.characters ul .profile {
  position: absolute;
  width: 600px;
  right: 0;
  top: 190px;
  z-index: 100;
}
/* line 412, common.scss */
article.characters ul h3 {
  display: block;
  width: 440px;
  border-bottom: 1px solid #000;
}
/* line 416, common.scss */
article.characters ul h3 img {
  display: block;
}
/* line 420, common.scss */
article.characters ul .cv {
  width: 440px;
  line-height: 1em;
  padding: 10px 0;
  margin-bottom: 10px;
}
/* line 426, common.scss */
article.characters ul .text {
  width: 440px;
  line-height: 1.6em;
  text-align: justify;
  text-shadow: 0 0 8px #fff,0 0 8px #fff,0 0 8px #fff;
}
/* line 433, common.scss */
article.characters .next,
article.characters .prev {
  display: block;
  width: 64px;
  height: 64px;
  position: absolute;
  top: 300px;
  z-index: 100;
}
/* line 441, common.scss */
article.characters .next img,
article.characters .prev img {
  display: block;
  width: 64px;
  height: 64px;
}
/* line 446, common.scss */
article.characters .next:hover,
article.characters .prev:hover {
  opacity: 0.5;
}
/* line 450, common.scss */
article.characters .next {
  right: 20px;
}
/* line 453, common.scss */
article.characters .prev {
  left: 20px;
}

/*-----------------------*/
/* system */
/*-----------------------*/
/* line 461, common.scss */
article.system {
  height: 800px;
  background: url(../img/bg2.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
/* line 466, common.scss */
article.system nav {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 30px;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* line 475, common.scss */
article.system nav a {
  width: 160px;
  height: 80px;
  display: block;
  margin: 5px;
  padding: 5px;
  border: 2px solid #666666;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 90%;
}
/* line 490, common.scss */
article.system nav a.current {
  background: #33210a;
  color: #ffa533;
  text-shadow: 0 0 10px #ffa533;
}
/* line 497, common.scss */
article.system ul {
  width: 1200px;
  height: 800px;
  display: block;
  position: relative;
}
/* line 502, common.scss */
article.system ul li {
  width: 1200px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 508, common.scss */
article.system ul li:first-child {
  display: block;
}
/* line 511, common.scss */
article.system ul li > .inner {
  width: 1200px;
  padding-top: 50px;
  position: relative;
}
/* line 517, common.scss */
article.system ul .image {
  display: block;
  width: 853px;
  height: 480px;
  margin: 0 auto;
  margin-bottom: 20px;
}
/* line 524, common.scss */
article.system ul .text {
  width: 850px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6em;
  font-size: 90%;
  color: #fff;
}

/*-----------------------*/
/* media */
/*-----------------------*/
/* line 539, common.scss */
article.media {
  height: 800px;
  background: url(../img/bg1.jpg) top center no-repeat;
}
/* line 542, common.scss */
article.media > .inner {
  padding-top: 100px;
}
/* line 545, common.scss */
article.media nav {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* line 551, common.scss */
article.media nav a {
  width: 160px;
  height: 80px;
  display: block;
  margin: 5px;
  padding: 5px;
  border: 2px solid #666666;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 90%;
}
/* line 566, common.scss */
article.media nav a.current {
  background: #33210a;
  color: #ffa533;
  text-shadow: 0 0 10px #ffa533;
}
/* line 573, common.scss */
article.media ul {
  width: 1200px;
  height: 510px;
  display: block;
  position: relative;
}
/* line 578, common.scss */
article.media ul li {
  width: 1200px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
/* line 584, common.scss */
article.media ul li:first-child {
  display: block;
}
/* line 587, common.scss */
article.media ul li > .inner {
  width: 1200px;
  position: relative;
}
/* line 592, common.scss */
article.media ul iframe {
  display: block;
  width: 853px;
  height: 480px;
  margin: 0 auto;
  margin-bottom: 20px;
}

/*-----------------------*/
/* gamedetails */
/*-----------------------*/
/* line 606, common.scss */
article.gamedetails {
  height: 800px;
  background: url(../img/bg2.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
/* line 611, common.scss */
article.gamedetails > .inner {
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* line 617, common.scss */
article.gamedetails .image {
  width: 320px;
  height: 480px;
}
/* line 621, common.scss */
article.gamedetails .text {
  color: #fff;
  width: 480px;
}
/* line 624, common.scss */
article.gamedetails .text dl {
  padding: 30px;
}
/* line 626, common.scss */
article.gamedetails .text dl dt {
  color: #ffa533;
  font-size: 70%;
  background: #000;
  display: inline-block;
  line-height: 1em;
  padding: 4px 5px;
  margin-bottom: 8px;
}
/* line 635, common.scss */
article.gamedetails .text dl dd {
  font-size: 100%;
  line-height: 1.2em;
  margin-bottom: 8px;
}