@charset "utf-8";

/* -------------------------
  全ページ共通
------------------------- */

/* ベース */

html {
  background: #000;
  min-width: 1000px;
}

body {
  background: url(../img/header-bg.jpg) no-repeat 50% 0;
  color: #fff;
  font: 14px/1 "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* ヘッダー */

header {
  height: 310px;
  margin: 0 auto;
  position: relative;
  width: 1000px;
}

header > h1 {
  left: -4px;
  position: absolute;
  top: 66px;
}

header p.console {
  left: 0;
  position: absolute;
  top: 16px;
}

header p.btn {
  left: 188px;
  position: absolute;
  top: 252px;
}

/* ナビゲーション */

body > nav {
  background: url(../img/nav/bg.png) no-repeat 50% 0;
  position: relative;
  z-index: 1000;
}

body > nav:before {
  background: url(../img/nav/shadow.png) repeat-x 0 0;
  content: "";
  display: block;
  height: 5px;
  position: absolute;
  top: -5px;
  width: 100%;
  z-index: 1000;
}

body > nav ul {
  margin: 0 auto;
  width: 1000px;
  zoom: 1;
}

body > nav ul:before,
body > nav ul:after {
  content: "";
  display: table;
}

body > nav ul:after {
  clear: both;
}

body > nav li {
  float: left;
  width: 250px;
}

body > nav li:first-child {
  background: url(../img/nav/system.png) no-repeat 0 0;
}

body > nav li:first-child + * {
  background: url(../img/nav/story.png) no-repeat 0 0;
}

body > nav li:first-child + * + * {
  background: url(../img/nav/character.png) no-repeat 0 0;
}

body > nav li:first-child + * + * + * {
  background: url(../img/nav/special.png) no-repeat 0 0;
}

/* コンテンツ */

#contents {
  background: #000 url(../img/contents-bg.png) no-repeat 0 0;
  border: 1px solid #260000;
  border-top: 0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 40px 0 40px;
  position: relative;
  text-align: center;
  width: 1000px;
}

#contents p {
  margin: 20px 0 0;
}

/* ページ内ナビゲーション */

#contents section > nav {
  background: url(../img/nav-line.png) no-repeat 50% 100%;
  left: 0;
  padding: 0 0 19px;
  position: absolute;
  right: 0;
  top: 20px;
}

#contents section > nav li {
  background: url(../img/nav-icon.gif) no-repeat 0 5px;
  display: inline-block;
  margin: 0 0 0 25px;
  padding: 0 0 0 15px;
}

/* リンク */

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* フッター */

footer {
  background: url(../img/footer-bg.jpg) no-repeat 50% 0;
  margin: 20px 0 0;
  padding: 0 0 20px;
}

footer ul {
  margin: 0 auto;
  padding: 30px 0 0 0;
  width: 1000px;
  zoom: 1;
}

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

footer ul:after {
  clear: both;
}

footer li {
  float: left;
}

footer ul > *:first-child { /* twitter */
  margin: 12px 0 0;
  width: 105px;
}

footer ul > *:first-child iframe {
  width: 105px !important;
}

footer ul > *:first-child + * { /* facebook */
  margin: 12px 0 0 5px;
  width: 98px;
}

footer ul > *:first-child + * + * {
  margin: 1px 0 0 41px;
}

footer ul > *:first-child + * + * + * {
  margin: 1px 0 0 19px;
}

footer ul > *:first-child + * + * + * + * {
  margin: 0 0 0 35px;
}

footer ul > *:first-child + * + * + * + * a {
  display: block;
  height: 44px;
  -webkit-transition: .3s;
  transition: .3s;
  width: 297px;
}

footer ul > *:first-child + * + * + * + * a:hover {
  background: #fff;
}

footer ul > *:first-child + * + * + * + * a:hover img {
  opacity: .9 !important;
}

footer .copy {
  margin: 4px auto 0;
  text-align: right;
  width: 1000px;
}

/* ページトップ */

p#totop {
  bottom: 20px;
  height: 60px;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  width: 60px;
}

p#totop img {
  margin: 0 0 0 555px;
}

/* -------------------------
  トップ
------------------------- */

/* メインビジュアル */

#top {
  background: url(../img/top/visual-bg.jpg) no-repeat 50% 0;
}

#top header {
  height: 645px;
  margin: 0 auto;
  position: relative;
  width: 1000px;
}

#top header .frame {
  background: url(../img/top/visual-header.png) no-repeat 50% 0;
  display: block;
  height: 79px;
  margin: 0 -140px;
  position: absolute;
  width: 1280px;
  z-index: 10;
}

#top header .frame p {
  margin: 0 auto;
  width: 1000px;
}

#top header .frame p img {
  margin: 16px 0 0 0;
}

#top header > h1 {
  left: 3px;
  position: absolute;
  top: 129px;
  z-index: 100;
}

#top header p.nos {
  position: absolute;
  left: 110px;
  top: 439px;
  z-index: 110;
}

#top header p.img {
  position: absolute;
  right: -62px;
  top: 14px;
  z-index: 20;
}

/* What's new */

#top header > section {
  background: rgba(0, 0, 0, .9);;
  bottom: 20px;
  height: 110px;
  left: 0;
  position: absolute;
  width: 500px;
  z-index: 50;
}

#top header > section h1 {
  background: url(../img/top/whatsnew-line.png) no-repeat 50% 100%;
  padding: 10px 0 9px 14px;
}

#top header > section dl {
  font-size: 13px;
  height: 77px;
  line-height: 1.2;
  margin: 0 0 0 14px;
  /*overflow-y: scroll;*/
  width: 486px;
}

#top header > section dt {
  clear: both;
  color: #e60000;
  float: left;
  width: 70px;
}

#top header > section dd {
  float: left;
  width: 380px;
}

#top header > section dt,
#top header > section dd {
  border-top: 1px dotted #303030;
  padding: 8px 0;
	padding-bottom: 6px\0; /* IE8以上 */
	padding-bottom: 6px\9; /* IE10以下 */
	padding-top: 10px\0; /* IE8以上 */
	padding-top: 10px\9; /* IE10以下 */
}

#top header > section dl *:first-child,
#top header > section dl *:first-child + * {
  border: 0;
}

#top header > section dd a {
  color: #fff73d;
}

/* コンテンツ */

#top #contents {
  background: none;
  border: 0;
  padding: 20px 0 0;
  zoom: 1;
}

#top #contents:before,
#top #contents:after {
  content: "";
  display: table;
}

#top #contents:after {
  clear: both;
}

#top #contents p {
  margin: 0;
}

#top .lb {
  float: left;
  width: 325px;
}

/* ムービー */

#top #cboxContent {
  background: #000 !important;
  height: 410px !important;
}

#top #cboxClose {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* アンケート */

#top .lb > *:first-child + * {
  margin: 10px 0 0 !important;
  /*opacity: .3;*/
}

/* 製品情報 */

#top .rb {
  background: #120000 url(../img/top/product-bg.png) no-repeat 100% 100%;
  float: right;
  padding: 7px 0 5px;
  width: 659px;
  zoom: 1;
}

#top .rb:before,
#top .rb:after {
  content: "";
  display: table;
}

#top .rb:after {
  clear: both;
}

#top .rb > section {
  float: left;
  width: 358px;
}

#top .rb > section > *:first-child + * img {
  margin: 3px 0 -5px;
}

#top .rb table {
  float: right;
  margin: 0 6px 0 0;
  width: 291px;
}

#top .rb th,
#top .rb td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

#top .rb th {
  background: #870000;
  border-top: 5px solid #120000;
  font-size: 12px;
  padding-top: 10px;
}

#top .rb td {
  padding-top: 11px;
}

/* -------------------------
  ゲーム紹介
------------------------- */

/* コンテンツ */

#system #contents {
  padding-top: 90px;
}

/* 脱出アドベンチャーとは */

#system #about {
  margin: 40px 0 0;
}

#system #about h1 {
  margin: 0 0 30px;
}

#system #about .fig {
  margin: 26px 0 0 19px;
}

#system #about .last {
  margin: -40px 0 0;
}

#system #adventure {
  margin: 68px 0 0;
}

#system #adventure > *:first-child + * + * {
  margin-top: 15px;
}

/* 探索パート */

#system #search h2 {
  margin: 28px 0 0;
}

#system #search > ul {
  margin: 0 0 0 49px;
  zoom: 1;
}

#system #search > ul:before,
#system #search > ul:after {
  content: "";
  display: table;
}

#system #search > ul:after {
  clear: both;
}

#system #search > ul li {
  float: left;
}

#system #search > ul.search li {
  margin: 0 0 0 18px;
}

#system #search > ul.item li {
  margin: 0 0 10px 8px;
}

#system #search > ul.search li:first-child,
#system #search > ul.item li:first-child {
  margin: 0;
}

/* 分解・パズルパート */

#system #puzzle {
  margin: 80px 0 0;
}

#system #puzzle > ul {
  margin: 41px 0 0 84px;
  zoom: 1;
}

#system #puzzle > ul:before,
#system #puzzle > ul:after {
  content: "";
  display: table;
}

#system #puzzle > ul:after {
  clear: both;
}

#system #puzzle > ul li {
  float: left;
  margin: 0 0 0 20px;
  width: 266px;
}

#system #puzzle > ul li:first-child {
  margin: 0;
}

#system #puzzle > ul li img {
  margin: 0 0 3px;
}

#system #puzzle > ul li span img {
  margin: 5px 0 0;
}

/* -------------------------
  ストーリー
------------------------- */

/* コンテンツ */

#story #contents > section h1 {
  margin: 0 0 50px;
}

#story #contents > section p {
  position: relative;
  z-index: 10;
}

#story #contents > section > *:first-child + * + *,
#story #contents > section > *:first-child + * + * + * {
  margin: 30px 0 0;
}

#story #contents > section > *:first-child + * + * + * + * {
  margin: 26px 0 0;
}

#story #contents > section > *:first-child + * + * + * + * + * {
  margin: 12px 0 0;
}

/* コンテンツ背景数字 */

#story #contents ul.num li {
  position: absolute;
}

#story #contents ul.num > *:first-child { /* num00 */
  left: 50px;
  top: 338px;
}

#story #contents ul.num > *:first-child + * { /* num01 */
  left: 771px;
  top: 522px;
}

#story #contents ul.num > *:first-child + * + * { /* num02 */
  left: 186px;
  top: 100px;
}

#story #contents ul.num > *:first-child + * + * + * { /* num03 */
  left: 829px;
  top: 657px;
}

#story #contents ul.num > *:first-child + * + * + * + * { /* num04 */
  left: 930px;
  top: 399px;
}

#story #contents ul.num > *:first-child + * + * + * + * + * { /* num05 */
  left: -36px;
  top: 565px;
}

#story #contents ul.num > *:first-child + * + * + * + * + * + * { /* num06 */
  left: 734px;
  top: 163px;
}

#story #contents ul.num > *:first-child + * + * + * + * + * + * + * { /* num07 */
  left: 118px;
  top: 646px;
}

#story #contents ul.num > *:first-child + * + * + * + * + * + * + * + * { /* num08 */
  left: 153px;
  top: 316px;
}

#story #contents ul.num > *:first-child + * + * + * + * + * + * + * + * + * { /* num09 */
  left: 796px;
  top: 270px;
}

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

/* コンテンツ */

#character #contents {
  padding: 90px 0 0;
}

#character #contents p {
  margin: 0;
}

#character #contents > section > div {
  height: 470px;
  margin: 40px 0 0;
  position: relative;
  width: 998px;
}

#character #contents > section > div > *:first-child {
  height: 470px;
  left: 0;
  position: absolute;
  top: 0;
  width: 998px;
}

#character #contents > section > div > *:first-child + * {
  bottom: 0;
  position: absolute;
}

#character #contents #wakaru > *:first-child + * {
  left: 26px;
}

#character #contents #yurika > *:first-child + * {
  right: -20px;
}

#character #contents #hikomichi > *:first-child + * {
  left: -51px;
}

#character #contents #shunosuke > *:first-child + * {
  right: -109px;
}

#character #contents #kyogo > *:first-child + * {
  left: -11px;
}

/* -------------------------
  スペシャル
------------------------- */

/* コンテンツ */

#special #contents {
  padding: 90px 0 11px;
}

#special #contents > section > section h1 {
  margin: 52px 0 23px;
}

#special #contents section p {
  line-height: 2;
  margin: 10px auto 0;
  text-align: left;
  width: 820px;
}

#special #contents section .img {
  margin: 30px auto;
  text-align: center;
}

#special #contents section .img img {
  border: 1px solid #6d0000;
}

#special #contents section .author {
  text-align: right;
}

/* シリーズディレクター 福田 */

#special #fukuda {
  margin: 40px 0 0;
}

#special #fukuda h1 {
  margin-top: 40px !important;
}

#special #iwata .img img {
  margin-top: 7px;
}

/* numbers */

#special #numbers {
  background: url(../img/special/numbers-line.png) no-repeat 50% 0;
  margin: 82px 0 0;
  padding: 4px 0 0;
}

#special #numbers p {
  text-align: center !important;
}