@-webkit-keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1) rotate(0);
    -moz-transform: translate(0, 0) scale(1) rotate(0);
    -ms-transform: translate(0, 0) scale(1) rotate(0);
    -o-transform: translate(0, 0) scale(1) rotate(0);
    transform: translate(0, 0) scale(1) rotate(0);
    opacity: 1
  }
}

@-moz-keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1) rotate(0);
    -moz-transform: translate(0, 0) scale(1) rotate(0);
    -ms-transform: translate(0, 0) scale(1) rotate(0);
    -o-transform: translate(0, 0) scale(1) rotate(0);
    transform: translate(0, 0) scale(1) rotate(0);
    opacity: 1
  }
}

@keyframes fadein {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1) rotate(0);
    -moz-transform: translate(0, 0) scale(1) rotate(0);
    -ms-transform: translate(0, 0) scale(1) rotate(0);
    -o-transform: translate(0, 0) scale(1) rotate(0);
    transform: translate(0, 0) scale(1) rotate(0);
    opacity: 1
  }
}

@-webkit-keyframes fadein2 {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}

@-moz-keyframes fadein2 {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}

@keyframes fadein2 {
  0% {
    opacity: 0
  }
  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    opacity: 1
  }
}

@-webkit-keyframes fadein-only-opacity {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-moz-keyframes fadein-only-opacity {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes fadein-only-opacity {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@-webkit-keyframes flashing {
  0% {
    opacity: 0
  }
  60% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes flashing {
  0% {
    opacity: 0
  }
  60% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes flashing {
  0% {
    opacity: 0
  }
  60% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

html, body {
  background: #000;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0
}

#contents {
  z-index: 2
}

.noDisplay {
  display: none
}

#background, .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0
}

.background {
  -webkit-transition: opacity .3s linear;
  -webkit-transition-delay: 0s;
  -moz-transition: opacity .3s linear 0s;
  -o-transition: opacity .3s linear 0s;
  transition: opacity .3s linear 0s
}

.background.show {
  opacity: 1
}

#loading {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 259px;
  z-index: 99999;
  -webkit-animation: flashing 1s linear 0s infinite;
  -moz-animation: flashing 1s linear 0s infinite;
  animation: flashing 1s linear 0s infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

#loading img {
  width: 100%
}

.whiteflash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 999;
  opacity: 0
}

.whiteflash.start {
  -webkit-animation: whiteflash 2.5s linear 0s;
  -moz-animation: whiteflash 2.5s linear 0s;
  animation: whiteflash 2.5s linear 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

.whiteflash.short.start {
  -webkit-animation: whiteflash2 1.5s linear 0s;
  -moz-animation: whiteflash2 1.5s linear 0s;
  animation: whiteflash2 1.5s linear 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes whiteflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes whiteflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes whiteflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-webkit-keyframes whiteflash2 {
  0% {
    opacity: 0
  }
  5% {
    opacity: 1
  }
  30% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes whiteflash2 {
  0% {
    opacity: 0
  }
  5% {
    opacity: 1
  }
  30% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes whiteflash2 {
  0% {
    opacity: 0
  }
  5% {
    opacity: 1
  }
  30% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.blackflash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 999;
  opacity: 0
}

.blackflash.start {
  -webkit-animation: blackflash 2.5s linear 0s;
  -moz-animation: blackflash 2.5s linear 0s;
  animation: blackflash 2.5s linear 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

@-webkit-keyframes blackflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes blackflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

@keyframes blackflash {
  0% {
    opacity: 0
  }
  30% {
    opacity: 1
  }
  80% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

body {
  -webkit-overflow-scrolling: touch
}

img {
  width: 100%
}

#loading {
  width: 200px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

header {
  content: "";
  display: block;
  background: url("../images/common/sp/headerbg.png") no-repeat center top;
  background-size: 100% auto;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999
}

header:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 15.10417%
}

header #logo {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  font-size: 0;
  background-image: url("../images/common/sp/common-sprite-sp.png");
  background-position: 32.07071% 0%;
  background-size: 447.36842% 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 29.6875%;
  margin-top: 0
}

header #logo:before {
  content: '';
  display: block;
  padding-top: 50%
}

header #logo a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

#menubtn {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  font-size: 0;
  background-image: url("../images/common/sp/common-sprite-sp.png");
  background-position: 53.94737% 0%;
  background-size: 944.44444% 105.55556%;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 14.973958%
}

#menubtn:before {
  content: '';
  display: block;
  padding-top: 100%
}

#menubtn.open {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  font-size: 0;
  background-image: url("../images/common/sp/common-sprite-sp.png");
  background-position: 66.88596% 0%;
  background-size: 944.44444% 105.55556%
}

#menubtn.open:before {
  content: '';
  display: block;
  padding-top: 100%
}

#menuOverlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 998
}

#gnav {
  content: "";
  display: block;
  background: url("../images/common/sp/menubg.png") no-repeat center top;
  background-size: 100% auto;
  width: 100%;
  height: auto;
  margin: 3% 0 5%;
  z-index: 1
}

#gnav:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 72.91667%
}

#gnav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.5% 0 0 0;
  overflow: hidden
}

#gnav li {
  width: 50%;
  height: auto;
  float: left
}

#gnav li a, #gnav li span {
  display: block;
  width: 100%;
  height: 100%
}

#gnav.menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 12.5% 0 0 0;
  opacity: 0;
  z-index: 99
}

#pagetop {
  display: none;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  font-size: 0;
  background-image: url("../images/common/sp/common-sprite-sp.png");
  background-position: 76.79325% 0%;
  background-size: 1416.66667% 158.33333%;
  position: absolute;
  right: 1%;
  bottom: 5%;
  width: 9.375%;
  opacity: 1;
  z-index: 999
}

#pagetop:before {
  content: '';
  display: block;
  padding-top: 100%
}

.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 10.41667%;
  z-index: 2
}

.head .title {
  width: 100%
}

.subnav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 36.45833%;
  text-align: center;
  z-index: 2
}

.subnav li {
  display: inline-block;
  width: 32.2%
}

.subnav li a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.subnav.btm {
  display: none;
  position: static;
  margin-top: 2.60417%;
  margin-bottom: 5.20833%
}

.head+.subnav {
  margin-top: 31.25%
}

#searchbox {
  width: 95%;
  background: #fff;
  margin: 0 auto;
  border: 1px solid #ff0051
}

#searchbox form {
  padding: 3% 0;
  overflow: hidden
}

#searchbox dl {
  width: 70%;
  margin: 0 0 0 2%;
  float: left
}

#searchbox dl dd {
  border: 1px solid #ff004f;
  height: 7vw
}

#searchbox dl dd:nth-of-type(1) {
  margin-bottom: 1.5%
}

#searchbox dl dd select {
  position: relative;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 100%;
  height: auto;
  background: #fff;
  color: 333;
  font-size: 3.5vw;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none
}

#searchbox dl dd select::-ms-expand {
  display: none
}

#searchbox dl dd:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 5px;
  bottom: 0;
  width: 0;
  height: 0;
  margin: auto;
  border-top: 8px solid #333;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent
}

#searchbox input {
  display: block;
  float: right;
  width: 22%;
  margin: 1% 2% 0 0
}

#searchbox+p {
  width: 90%;
  margin: 2% auto 5%
}

footer {
  background: #000;
  width: 100%;
  height: 0;
  padding: 4% 3% 3%;
  visibility: hidden;
  opacity: 0;
  z-index: 99
}

footer:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 15%;
  background: url(../images/common/sp/footerbg.png) repeat-x center top;
  background-size: contain
}

footer #sansei {
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  font-size: 0;
  background-image: url("../images/common/sp/common-sprite-sp.png");
  background-position: 100% 0%;
  background-size: 485.71429% 165.21739%;
  width: 27.34375%;
  margin: 0 0 2% 0
}

footer #sansei:before {
  content: '';
  display: block;
  padding-top: 32.85714%
}

footer #social {
  position: absolute;
  top: 10%;
  right: 3%;
  margin: 0
}

footer #social ul {
  text-align: right
}

footer #social ul li {
  display: inline-block;
  vertical-align: top
}

footer #social ul li#tw {
  margin-top: 1px
}

footer.index {
  display: block
}

html, body {
  background: #000
}

#wrapper {
  min-height: 100%;
  overflow: hidden
}

#contents {
  height: 0;
  visibility: hidden
}

#background {
  background-image: url(../images/index/sp/indexbg.png);
  background-position: center top;
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-color: #000
}

#mainimage {
  width: 100%;
  background: url(../images/index/sp/index_main.png) repeat-y center top #000;
  background-size: 100% auto;
  padding-top: 133.98438%;
  z-index: 0
}

#mainimage img {
  display: block;
  position: absolute;
  width: 100%
}

.banner {
  width: 95%;
  margin: 3% auto 3%
}

.banner.animation {
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  transform: translate(0px, 0px) scale(1);
  -webkit-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -moz-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0
}

.banner li {
  margin-bottom: 2%
}

.banner li:last-of-type {
  margin-bottom: 0
}

.banner img {
  width: 100%
}

.banner.top {
  margin-top: -20%
}

.banner .higanjima {
  text-align: center
}

.banner .higanjima a {
  display: block;
  margin-bottom: 1%
}

.banner .higanjima a+img {
  width: 56.5625%;
  vertical-align: top
}

#gnav {
  margin-top: -7%
}

#gnav.animation {
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  transform: translate(0px, 0px) scale(1);
  -webkit-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -moz-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0
}

#searchbox.animation {
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  transform: translate(0px, 0px) scale(1);
  -webkit-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -moz-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0
}

#searchbox+p.animation {
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  transform: translate(0px, 0px) scale(1);
  -webkit-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -moz-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0
}

#social_bnr {
  width: 95%;
  margin: 3% auto 6%;
  overflow: hidden
}

#social_bnr a {
  display: block;
  width: 48%
}

#social_bnr a.twitter {
  float: left
}

#social_bnr a.line {
  float: right
}

#social_bnr.animation {
  -webkit-transform: translate(0px, 0px) scale(1);
  -moz-transform: translate(0px, 0px) scale(1);
  -ms-transform: translate(0px, 0px) scale(1);
  -o-transform: translate(0px, 0px) scale(1);
  transform: translate(0px, 0px) scale(1);
  -webkit-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -moz-animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  animation: fadein 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 0
}

footer.index {
  height: auto;
  visibility: visible
}

#loadingscreen, #soundscreen {
  display: none;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 99
}

#loadingscreen .box {
  position: relative;
  top: 50%;
  left: 50%;
  background: url(../images/index/loadingbg.png) no-repeat center center;
  background-size: 100% auto;
  width: 60%;
  max-width: 259px;
  padding-top: 62.54826254%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

#loadingscreen .box .nowloading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 259px;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: flashing 1.2s linear 0s infinite;
  -moz-animation: flashing 1.2s linear 0s infinite;
  animation: flashing 1.2s linear 0s infinite;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both
}

#loadingscreen .box .nowloading img {
  width: 100%
}