@charset "UTF-8";
/* Clearfix */
.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block;
  min-height: 1%; }

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

/* End hide from IE-Mac */
html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  color: #ffffff;
  text-align: center;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;
  background: #212ba7;
  letter-spacing: 0.025em;
  -webkit-text-size-adjust: 100%; }

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

#wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }

.page-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0; }

.bg-main {
  width: 100%;
  position: fixed;
  left: 0;
  top: 170px; }
  .bg-main img {
    width: 100%;
    position: relative; }

.bg-color {
  width: 100%;
  position: absolute;
  left: 0;
  background: #131c95; }

.bg-chara {
  position: absolute;
  left: 50%;
  transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5); }
  .bg-chara img {
    position: relative; }

.bg-foot {
  position: absolute;
  width: 100%;
  height: 382px;
  background: #0c5eaa;
  left: 0;
  bottom: 0; }

.nav-btn {
  width: 15.4%;
  position: absolute;
  right: 4%;
  top: 15px;
  z-index: 10; }

.nav {
  width: 100%;
  height: 720px;
  position: absolute;
  left: 0;
  top: -720px;
  z-index: 99;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  overflow: hidden; }
  .nav.open {
    top: 0; }
  .nav__line {
    width: 100%;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #bf000f; }
  .nav-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../image/common/menu/bg.gif) repeat 0 0;
    background-size: 125px 126px;
    -webkit-background-size: 125px 126px;
    -webkit-animation: navbg 3.5s linear infinite 0s;
    animation: navbg 3.5s linear infinite 0s; }
  .nav-chara {
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 100%; }
    .nav-chara li {
      width: 36%;
      position: absolute;
      bottom: 0; }
      .nav-chara li img {
        opacity: 0;
        filter: alpha(opacity=0);
        transform: scaleY(0);
        -webkit-transform: scaleY(0);
        position: absolute;
        left: 0;
        bottom: 0; }
    .nav-chara1 {
      right: 72%; }
    .nav-chara2 {
      left: 9%; }
    .nav-chara3 {
      left: 26%; }
    .nav-chara4 {
      left: 43%; }
    .nav-chara5 {
      left: 60%; }
    .nav-chara6 {
      left: 77%; }
  .nav-global {
    position: relative;
    padding-top: 25px; }
    .nav-global li {
      margin-bottom: 5px; }
    .nav-global li.limited {
      width: 100%;
      text-align: center;
    }
    .nav-global li.limited a {
      display: inline-block;
      width: 62%;
    }
    .nav-global li.limited a img {
      width: 100%;
    }
      .nav-global li a, .nav-global li p {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
        display: block;
        overflow: hidden;
        position: relative;
        width: 65.6%;
        margin-left: 7.7%; }
        .nav-global li a.nav-global__ticket, .nav-global li p.nav-global__ticket {
          width: 74.9%; }
    .nav-global__break {
      opacity: 0.5;
      filter: alpha(opacity=50); }
    .nav-global__hover {
      width: 0;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      -webkit-transition: all 0.2s ease-out 0s;
      -moz-transition: all 0.2s ease-out 0s;
      -o-transition: all 0.2s ease-out 0s;
      transition: all 0.2s ease-out 0s; }
      .nav-global__hover img {
        position: absolute;
        left: 0;
        bottom: 0; }
  .nav__close {
    width: 16.5%;
    position: absolute;
    right: 4%;
    top: 15px; }

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  position: relative;
  overflow: hidden; }
  .footer-bg {
    width: 100%;
    height: 382px;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
   }
    .footer-bg__main {
      width: 100%;
      height: 1980px;
      position: absolute;
      left: 0;
      top: 0; }
      .footer-bg__main img {
        position: relative; }
  .footer-share {
    letter-spacing: -.40em;
    margin-bottom: 30px;
    position: relative; }
    .footer-share li {
      width: 17.8%;
      letter-spacing: normal;
      display: inline-block;
      vertical-align: top;
      margin: 0 10px; }
  .footer-official {
    width: 44.5%;
    margin: 0 auto;
    margin-bottom: 23px;
    position: relative; }
  .footer-copy {
    font-size: 10px;
    position: relative; }

    .l-footer__userdata {
      display: block;
      text-align: center;
      margin-bottom: 20px;
      font-size: 10px;
      z-index: 10;
    }
    
    .l-footer__userdata-link {
      color: #fff;
      text-decoration: underline;
    }

.layout {
  width: 1200px;
  position: absolute;
  left: 50%;
  top: -2px;
  margin-left: -600px;
  z-index: -1;
  text-align: center; }

.pagetop {
  width: 98px;
  height: 85px;
  position: absolute;
  right: 0;
  overflow: hidden;
  z-index: 10; }
  .pagetop-btn {
    width: 70px;
    height: 85px;
    position: absolute;
    left: 14px;
    top: 0;
    overflow: hidden; }
    .pagetop-btn img {
      position: absolute;
      left: 0;
      top: 0;
      -webkit-transition: all 0.1s ease-out 0s;
      -moz-transition: all 0.1s ease-out 0s;
      -o-transition: all 0.1s ease-out 0s;
      transition: all 0.1s ease-out 0s; }
  .pagetop-chara {
    width: 98px;
    height: 92px;
    position: absolute;
    right: 0;
    top: 85px; }
  .pagetop.scroll {
    overflow: visible; }
    .pagetop.scroll .pagetop-btn img {
      top: 85px; }

@-webkit-keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  6.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
    transform: translate(1px, 1px) rotate(0.5deg); }
  12.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
    transform: translate(-1px, 0) rotate(-0.5deg); }
  18.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0deg);
    transform: translate(-1px, 1px) rotate(0deg); }
  24% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
    transform: translate(-1px, 1px) rotate(-0.5deg); }
  31.25% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
    transform: translate(0, 1px) rotate(0.5deg); }
  37.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
    transform: translate(-1px, 0) rotate(-0.5deg); }
  43.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
    transform: translate(-1px, 1px) rotate(0.5deg); }
  50% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  56.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
    transform: translate(1px, 1px) rotate(0.5deg); }
  62.5% {
    -webkit-transform: translate(-1px, -1px) rotate(-0.5deg);
    transform: translate(-1px, -1px) rotate(-0.5deg); }
  68.75% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
    transform: translate(0, 1px) rotate(0.5deg); }
  74% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
    transform: translate(-1px, 1px) rotate(-0.5deg); }
  81.25% {
    -webkit-transform: translate(1px, 0) rotate(0.5deg);
    transform: translate(1px, 0) rotate(0.5deg); }
  87.5% {
    -webkit-transform: translate(0, -1px) rotate(-0.5deg);
    transform: translate(0, -1px) rotate(-0.5deg); }
  93.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
    transform: translate(-1px, 1px) rotate(0.5deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); } }

@keyframes buruburu {
  0% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  6.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
    transform: translate(1px, 1px) rotate(0.5deg); }
  12.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
    transform: translate(-1px, 0) rotate(-0.5deg); }
  18.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0deg);
    transform: translate(-1px, 1px) rotate(0deg); }
  24% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
    transform: translate(-1px, 1px) rotate(-0.5deg); }
  31.25% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
    transform: translate(0, 1px) rotate(0.5deg); }
  37.5% {
    -webkit-transform: translate(-1px, 0) rotate(-0.5deg);
    transform: translate(-1px, 0) rotate(-0.5deg); }
  43.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
    transform: translate(-1px, 1px) rotate(0.5deg); }
  50% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); }
  56.25% {
    -webkit-transform: translate(1px, 1px) rotate(0.5deg);
    transform: translate(1px, 1px) rotate(0.5deg); }
  62.5% {
    -webkit-transform: translate(-1px, -1px) rotate(-0.5deg);
    transform: translate(-1px, -1px) rotate(-0.5deg); }
  68.75% {
    -webkit-transform: translate(0, 1px) rotate(0.5deg);
    transform: translate(0, 1px) rotate(0.5deg); }
  74% {
    -webkit-transform: translate(-1px, 1px) rotate(-0.5deg);
    transform: translate(-1px, 1px) rotate(-0.5deg); }
  81.25% {
    -webkit-transform: translate(1px, 0) rotate(0.5deg);
    transform: translate(1px, 0) rotate(0.5deg); }
  87.5% {
    -webkit-transform: translate(0, -1px) rotate(-0.5deg);
    transform: translate(0, -1px) rotate(-0.5deg); }
  93.75% {
    -webkit-transform: translate(-1px, 1px) rotate(0.5deg);
    transform: translate(-1px, 1px) rotate(0.5deg); }
  100% {
    -webkit-transform: translate(0, 0) rotate(0deg);
    transform: translate(0, 0) rotate(0deg); } }

@-webkit-keyframes navbg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -125px -126px; } }

@keyframes navbg {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -125px -126px; } }