@charset "utf-8";

/* -------------------------
  1. common
  2. top
  3. story
  4. system
  5. ss
------------------------- */

/* -------------------------
  1. common
------------------------- */

html {
  background: #121010;
}

body {
  color: #fff;
  font: 300 14px/1 "Noto Sans Japanese", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  position: relative;
  min-width: 1100px;
}

body:before {
  background: #121010;
  content: "";
  display: block;
  height: 10px;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

header nav {
  height: 0;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 10px;
  width: 0;
  z-index: 8;
}

header nav ul {
  background: url(../img/nav/bg.png)no-repeat;
  height: 413px;
  margin-left: -554px;
  width: 188px;
}

header nav li {
  margin: 0 16px;
}

header nav li:first-child img {
  margin-top: 16px;
}

header nav p {
  text-align: center;
  margin: 6px 16px 0;
}

section > .inr,
#top .info > .inr,
footer > .inr{
  margin: 0 auto;
  position: relative;
  width: 1100px;
}

section a img,
footer a img {
  transition: all .3s;
}

section a:hover img,
footer a:hover img {
  opacity: .7;
  transition: all .3s;
}

footer {
  padding: 30px 0;
}

footer ul {
  margin: 0 0 0 210px;
  width: 890px;
  zoom: 1;
}

footer ul:before,
footer ul:after {
  content: "";
  display: table;
}

footer ul:after {
  clear: both;
}

footer li {
  float: left;
}

footer li:nth-child(2) {
  margin-left: 18px;
}

footer li:nth-child(3) {
  margin-left: 20px;
}

footer li:nth-child(4) {
  margin-left: 21px;
}

footer ul + p {
  margin: 27px 0 0 210px;
  width: 890px;
}

/* -------------------------
  2. top
------------------------- */

#top {
  background: url(../img/top/bg.jpg) no-repeat 50% 0;
  background-size: cover;
  height: 1010px;
}

#top .inr {
  height: 770px;
}

#top h1 {
  position: absolute;
  right: 180px;
  top: 90px;
}

#top h1 + div {
  display: -weblkit-flex;
  display: flex;
  left: 204px;
  position: absolute;
  top: 24px;
}

#top h1 + div p:not(:first-child) {
  margin-left: 3px;
}

#top h1 + div + p {
  position: absolute;
  right: 2px;
  top: 486px;
}

#top .movie {
  background: url(../img/top/movie-bg.png);
  height: 228px;
  position: absolute;
  right: -7px;
  top: 529px;
  width: 403px;
}

#top .movie p {
  background: url(../img/top/movie-img.jpg);
  height: 195px;
  margin: 16px;
  text-align: center;
  width: 370px;
}

#top .movie p a {
  background: url(../img/top/movie-play-off.png) no-repeat 50% 59px;
  box-sizing: border-box;
  display: block;
  height: 195px;
  width: 370px;
}

#top .movie p a:hover {
  background: url(../img/top/movie-play-on.png) no-repeat 50% 59px;
}

#top .movie p a img {
  margin-top: 115px;
}

#top .info {
  background: #121010;
  height: 240px;
}

#top .info h2,
#top .info h2 + p {
  margin-left: 210px;
}

#top .info h2 img {
  margin: 24px 0 9px;
}

#top .info dl {
  background: #29241a;
  border: 1px solid #332a19;
  box-shadow: 0 0 30px #1d180e inset;
  height: 180px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 30px;
  width: 390px;
}

#top .info dt,
#top .info dd {
  margin: 0 20px;
}

#top .info dt {
  border-bottom: 1px dashed #d5d1b5;
  color: #b19746;
  font-size: 13px;
  margin-top: 14px;
  padding: 0 0 4px;
}

#top .info dd {
  line-height: 1.6;
  margin-top: 5px;
}

#top .info a {
  color: #fff;
}

#top .info a:hover {
  text-decoration: none;
}

/* -------------------------
  3. story
------------------------- */

#story {
  background: url(../img/story/bg.jpg) no-repeat 50% 0;
  background-size: cover;
  padding: 30px 0;
}

#story .box {
  background: url(../img/story/txt-bg.jpg);
  height: 760px;
  margin: 0 0 0 auto;
  text-align: center;
  width: 890px;
}

#story .box h1 img {
  margin-top: 42px;
}

#story .box h1 + p + p {
  margin-top: 37px;
}

#story .box h1 + p + p + p {
  margin-top: 48px;
}

/* -------------------------
  4. system
------------------------- */

#system {
  background: url(../img/system/bg.jpg) no-repeat 50% 0;
  background-size: cover;
  padding-bottom: 39px;
}

#system h1 {
  margin-left: 210px;
  padding-top: 38px;
  text-align: center;
}

#system ul {
  margin: 0 0 0 auto;
  width: 890px;
}

#system li {
  margin-top: 40px;
  padding-bottom: 40px;
  position: relative;
  zoom: 1;
}

#system li:before,
#system li:after {
  content: "";
  display: table;
}

#system li:after {
  clear: both;
}

#system li > div:after {
  background: url(../img/system/line.png);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 890px;
}

#system li h2 {
  text-align: center;
}

#system li:first-child {
  margin-top: 22px;
}

#system li:nth-child(1) > div,
#system li:nth-child(3) > div,
#system li:nth-child(5) > div,
#system li:nth-child(2) > div + p,
#system li:nth-child(4) > div + p {
  float: left;
}

#system li:nth-child(2) > div,
#system li:nth-child(4) > div,
#system li:nth-child(1) > div + p,
#system li:nth-child(3) > div + p,
#system li:nth-child(5) > div + p {
  float: right;
}

#system li:nth-child(1) > div h2,
#system li:nth-child(3) > div h2{
  margin-top: -11px;
}

#system li:nth-child(1) > div p {
  margin: 5px 0 0 -11px;
}

#system li:nth-child(2) > div h2 {
  margin-top: -8px;
}

#system li:nth-child(2) > div p {
  margin: 10px 10px 0 0;
}

#system li:nth-child(3) > div p {
  margin: 9px 0 0 -11px;
}

#system li:nth-child(4) > div h2 {
  margin-top: -10px;
}

#system li:nth-child(4) > div p {
  margin: 6px -9px 0 0;
}

#system li:nth-child(5) > div:after {
  display: none;
}

#system li:nth-child(5) > div h2 {
  margin-top: -9px;
}

#system li:nth-child(5) > div p {
  margin: 8px 0 0 -10px;
}

/* -------------------------
  5. ss
------------------------- */

#ss {
  background: url(../img/ss/bg.jpg) no-repeat 50% 0;
  background-size: cover;
  padding-bottom: 83px;
}

#ss h1 {
  margin-left: 210px;
  padding-top: 40px;
  text-align: center;
}

#ss ul {
  margin: 0 0 0 auto;
  width: 890px;
  zoom: 1;
}

#ss ul:before,
#ss ul:after {
  content: "";
  display: table;
}

#ss ul:after {
  clear: both;
}

#ss li {
  background: url(../img/ss/img-bg.png);
  box-sizing: border-box;
  float: left;
  height: 240px;
  margin-top: 25px;
  padding: 9px;
  width: 426px;
}

#ss li:nth-child(even) {
  margin-left: 38px;
}

#ss li:nth-child(1),
#ss li:nth-child(2) {
  margin-top: 20px;
}