@charset "utf-8";

#top .gloNav_bg #gloNav {
  height: 39px;
}
#top #gloNav .top,
#top #gloNav .navi li {
  -webkit-transform: translate(0,-130%);
  -ms-transform: translate(0,-130%);
  transform: translate(0,-130%);
}
#top #contents main {
  height: 975px;
}
#top h1 {
  width: 453px;
  padding: 46px 0 0px 7px;
}
#top .release {
    position: absolute;
    top: 844px;
    right: 0px;
    width: 750px;
  opacity: 0;
  -webkit-transform: rotate(900deg) scale(0);
  -ms-transform: rotate(900deg) scale(0);
  transform: rotate(900deg) scale(0);
  /*-webkit-transform-origin: 30% 300%;
  -ms-transform-origin: 30% 300%;
  transform-origin: 30% 300%;*/
  -webkit-transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
  -o-transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
  transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}
body.packageEnd#top .release {
  opacity: 1;
  -webkit-transform: rotate(0) scale(1);
  -ms-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  -webkit-transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s;
  -o-transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s;
  transition: all .8s cubic-bezier(0.075, 0.82, 0.165, 1) 0.1s;
}
#top .release img {
  width: 100%;
}
#topNav {
 /* width: 258px; */
 width: 285px;
}
#topNav ul {
}
#topNav li {
  opacity: 0;
  -webkit-transform: translate(-25px,0);
  -ms-transform: translate(-25px,0);
  transform: translate(-25px,0);
  margin: 0 0 5px;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#topNav li:nth-child(1) {
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  transition-delay: 0s;
}
#topNav li:nth-child(2) {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
#topNav li:nth-child(3) {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
#topNav li:nth-child(4) {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
#topNav li:nth-child(5) {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
#topNav li:nth-child(6) {
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
body.loaded #topNav li {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}
#topNav li a,
#topNav li span,
#topNav li a img {
  display: block;
  width: 100%;
}
#topNav li a:hover {
  -webkit-animation: swing 0.2s linear;
  animation: swing 0.2s linear;
}
#topNav li a img {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#topNav li a:hover img {
  opacity: 1;
}


#topNav .about {
  background: 38px 0 no-repeat;
}
#topNav .about img {
  background: 38px 100% no-repeat;
}

#topNav .character {
  background: 0px 0 no-repeat;
}
#topNav .character img {
  background: 0px 100% no-repeat;
}


#topNav .system {
  background: 18px 0 no-repeat;
}

#topNav .system img {
  background: 18px 100% no-repeat;
}

#topNav .movie {
  background: 0px 0 no-repeat;
}
#topNav .movie img {
  background: 0px 100% no-repeat;
}

#topNav .movie img {
  background: 0px 100% no-repeat;
}

#topNav .story {
  background: 35px 0 no-repeat;
}

#topNav .special {
  background: 23px 0 no-repeat;
}

#topNav .story img {
  background: 35px 100% no-repeat;
}

#topNav .special img {
  background: 23px 100% no-repeat;
}
#topNav .about,
#topNav .about img {
  height: 96px;
  background-image: url(../img/top_nav_about.png);
}
#topNav .story,
#topNav .story img {
  height: 89px;
  background-image: url(../img/top_nav_story.png);
}
#topNav .character,
#topNav .character img {
  height: 95px;
  background-image: url(../img/top_nav_character.png);
}
#topNav .system,
#topNav .system img {
  height: 86px;
  background-image: url(../img/top_nav_system.png);
}
#topNav .movie,
#topNav .movie img {
  height: 81px;
  background-image: url(../img/top_nav_movie.png);
}
/*
#topNav .movie.gray {
  background-image: url(../img/top_nav_movie_gray.png);
}
*/

#topNav .gray {
  background-image: url(../img/top_nav_movie_gray.png);
  display: block;
  cursor: default;
}

#topNav .gray img:hover{
  opacity: 0;
  animation-duration: 0s !important;
}

#topNav .special,
#topNav .special img {
  height: 84px;
  background-image: url(../img/top_nav_special.png);
}
#top footer .banner {
  height: 150px;
  opacity: 1;
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* タブレット */
@media screen and (min-width: 641px) and (max-width: 1410px) {
  
}