@charset "UTF-8";
/*
*******************************************************************************************************
# index - /common.scss
  ・index
*******************************************************************************************************
*/
body {
  background-color: #000000;
}

.wrap {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  min-height: 600px;
}

/* コンテンツ */
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 193px;
  height: 217px;
  margin: -146px 0 0 -96px;
}
.loading .moon, .loading .silhouette {
  position: absolute;
  left: 0;
  top: 0;
}
.loading .text {
  width: 193px;
  height: 24px;
  margin-top: 193px;
  background: url(../../img/top/txt_loading.png) no-repeat left top;
}
.loading .text img {
  opacity: 0;
}
.loading .bar {
  height: 24px;
  width: 147px;
  background: url(../../img/top/img_load_bar1.png);
  margin: 15px auto 0;
}
.loading .bar span {
  display: block;
  height: 24px;
  width: 0px;
  overflow: hidden;
}

.slide {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.slide .slide-inner {
  position: relative;
  margin-top: 0;
}
.slide div {
  position: absolute;
  left: 0;
  top: 0;
}
.slide div.slide-1 {
  z-index: 1;
}
.slide div.slide-1 .img-current {
  z-index: 1;
}
.slide div.slide-1 .img-next {
  z-index: 2;
}
.slide div.slide-2 {
  z-index: 3;
}
.slide div.slide-2 .img-current {
  z-index: 3;
}
.slide div.slide-2 .img-next {
  z-index: 4;
}
.slide img {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.slide img.img-current {
  display: block;
}
.slide img.img-next {
  display: block;
}

.movie-area .video {
  position: absolute;
  display: none !important;
  right: 0;
  top: 0;
  z-index: 4;
}
.movie-area .video.show-video {
  display: block !important;
  z-index: 5;
}
.movie-area .video.next-video {
  display: block !important;
  z-index: 7;
}

.video-tile, .slide-tile {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: url(../../img/top/bg_video_ovlay.png) repeat left top;
  z-index: 8;
}

.slide-tile {
  background: url(../../img/top/bg_reel_ovlay.png) repeat left top;
  z-index: 3;
}

.sword {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  z-index: 30;
}
.sword .sword-inner {
  position: relative;
  margin-top: 0;
}
.sword img {
  position: absolute;
  left: 0;
  top: 0;
}

.bg-area {
  width: 100%;
  display: none;
}
.bg-area img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.bg-area img.bg-current {
  z-index: 10;
}
.bg-area img.bg-next {
  z-index: 11;
}
.bg-area img.bg-main {
  opacity: 0;
  z-index: 10;
}
.bg-area img.bg-left {
  display: none;
}

.bg-ie8 {
  width: 100%;
  display: none;
}
.bg-ie8 img {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}
.bg-ie8 img.act {
  display: block;
  z-index: 5;
}

.contents {
  position: absolute;
  left: 0;
  top: 50%;
  display: none;
  width: 50%;
  height: 410px;
  margin-top: -294px;
  text-align: center;
  z-index: 20;
}
.contents .logo {
  position: absolute;
  left: 50%;
  top: 0;
  display: none;
  width: 300px;
  height: 300px;
  margin-left: -140px;
  opacity: 0;
}
.contents .menu {
  position: relative;
  display: none;
  width: 280px;
  height: 191px;
  margin: 0 auto;
  padding-top: 219px;
}
.contents .menu li {
  position: absolute;
  left: 0;
  bottom: 0;
}
.contents .menu li a {
  position: relative;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}
.contents .menu li img {
  position: absolute;
  left: 0;
  bottom: 0;
  filter: alpha(opacity=0);
}
.contents .menu li .over, .contents .menu li .on {
  display: none;
}
.contents .menu li .def {
  display: block;
}
.contents .menu li.act {
  display: block;
}
.contents .menu li.act a {
  background-image: none !important;
}
.contents .menu li.menu1 {
  bottom: 35px;
}
.contents .menu li.menu1 a {
  width: 36px;
  height: 100px;
}
.contents .menu li.menu1.act a {
  height: 156px;
}
.contents .menu li.menu2 {
  left: 61px;
  bottom: 30px;
}
.contents .menu li.menu2 a {
  width: 36px;
  height: 105px;
}
.contents .menu li.menu2.act a {
  height: 161px;
}
.contents .menu li.menu3 {
  left: 122px;
}
.contents .menu li.menu3 a {
  width: 36px;
  height: 135px;
}
.contents .menu li.menu3.act a {
  height: 191px;
}
.contents .menu li.menu4 {
  left: 183px;
  bottom: 50px;
}
.contents .menu li.menu4 a {
  width: 36px;
  height: 85px;
}
.contents .menu li.menu4.act a {
  height: 141px;
}
.contents .menu li.menu5 {
  left: 244px;
  bottom: 50px;
}
.contents .menu li.menu5 a {
  width: 36px;
  height: 85px;
}
.contents .menu li.menu5.act a {
  height: 141px;
}

footer {
  position: absolute;
  left: 0;
  bottom: 4px;
  visibility: hidden;
  width: 50%;
  opacity: 0;
  text-align: center;
  z-index: 20;
}
footer .btn-movie {
  width: 280px;
  height: 45px;
  margin: 0 auto 37px;
}
footer .btn-movie a {
  position: relative;
  display: block;
  width: 280px;
  height: 45px;
}
footer .btn-movie a img {
  position: absolute;
  top: 0;
  left: 0;
}
footer .btn-movie a img.over {
  display: none;
}
footer .sns-area {
  position: relative;
  width: 157px;
  height: 18px;
  margin: 0 auto 20px;
}
footer .sns-area li {
  position: absolute;
  top: 0;
}
footer .sns-area li.sns-fb {
  left: 0;
}
footer .sns-area li.sns-tw {
  right: 0;
}
footer .copy {
  margin-bottom: 4px;
}
footer .footer-logo {
  display: inline-block;
}

.slash {
  width: 100%;
  display: none;
}
.slash img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 400;
  opacity: 0;
}

#canvas-transition {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  text-align: center;
}

#canvas-bg-wrap {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
}

#u_0_0 {
  border: solid 1px #fff;
}

#u_0_6 {
  display: none !important;
}

@media only screen and (max-height: 700px) {
  footer .btn-movie {
    margin-bottom: 30px;
  }
}
.tablet .wrap {
  width: 100%;
  min-height: inherit;
  min-width: inherit;
}
.tablet #debag {
  background-color: #58ce0e;
}
.tablet.portrait .contents, .tablet.portrait footer {
  -moz-transform: scale(0.8, 0.8);
  -webkit-transform: scale(0.8, 0.8);
  transform: scale(0.8, 0.8);
}

.ie8 .bg-area {
  visibility: hidden;
  filter: alpha(opacity=0);
}
.ie8 .bg-area .bg-main {
  filter: inherit;
}
.ie8 .contents h1, .ie8 .contents p {
  filter: alpha(opacity=0);
}
.ie8 .contents .menu img {
  filter: inherit;
}
.ie8 footer {
  filter: alpha(opacity=0);
}
.ie8 footer .sns-area * {
  filter: alpha(opacity=0);
}
.ie8 footer .sns-area .sns-fb .fb-like iframe {
  height: 20px !important;
  width: 69px !important;
}

#mdl-box {
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../img/top/modal_bg.png);
}

#mdl-box #mdl-plr {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -270px;
  margin-left: -480px;
}

#mdl-box.oldie #mdl-plr {
  margin-top: -180px;
  margin-left: -320px;
}

#mdl-box .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -305px;
  margin-left: 485px;
}

#mdl-box.oldie .btn {
  margin-top: -215px;
  margin-left: 325px;
}

#mdl-box .vjs-loading-spinner {
  display: none !important;
}

@media only screen and (min-width: 768px) and (max-width: 1280px) {
  #mdl-box #mdl-plr {
    width: 850px !important;
    height: 478px !important;
    margin-left: -425px !important;
    margin-top: -239px !important;
  }
  #mdl-box .btn {
    margin-top: -295px;
    margin-left: 420px;
  }
}
@media only screen and (max-width: 768px) {
  #mdl-box #mdl-plr {
    width: 700px !important;
    height: 394px !important;
    margin-left: -350px !important;
    margin-top: -197px !important;
  }
  #mdl-box .btn {
    margin-top: -250px;
    margin-left: 315px;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  #mdl-plr #mdl-plr {
    width: 700px !important;
    height: 394px !important;
    margin-left: -350px !important;
    margin-top: -197px !important;
  }
  #mdl-plr .btn {
    margin-top: -230px;
    margin-left: 315px;
  }
}
.cfx {
  *zoom: 1;
}
.cfx:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
}