@-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: #FFF;
  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%)
}

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

#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: 66.91729% 0%;
  background-size: 910.97561% 100%;
  position: absolute;
  right: 1%;
  bottom: 5%;
  width: 10.677%;
  opacity: 1;
  z-index: 999
}

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

.head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 15.625%;
  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: 33.33333%
}

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

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

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

#searchbox dl dd {
  border: 1px solid #000;
  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;
  padding-right: 20px;
  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: 95%;
  margin: 1% auto 5%
}

footer {
  background: #F0F;
  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: -2%;
  width: 100%;
  height: 3.7%;
  background: url(../images/common/sp/footerbg2.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: 355.71429% 118.84058%;
  width: 27.34375%;
  margin: 0 0 2% 0
}

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

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

footer #copyright:before {
  content: '';
  display: block;
  padding-top: 17.24138%
}

footer #footer_txt {
  content: "";
  display: block;
  background: url("../images/common/sp/footer_txt.png") no-repeat center top;
  background-size: 100% auto;
  width: 83.47222%
}

footer #footer_txt:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-top: 7.15474%
}

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: #FFF
}

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

#contents {
  height: 0;
  visibility: hidden;
  background-image: url(../images/index/sp/banner_bg.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto
}

#background {
  background-color: #FFF
}

#mainimage {
  width: 100%;
  margin-top: 9.76563%;
  z-index: 0
}

ul.nav {
  position: fixed !important;
  background: url(../images/index/sp/header_bg.png) no-repeat center top #FFF;
  background-size: auto 100%;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  z-index: 2
}

ul.nav li {
  display: inline-block;
  width: 25%
}

ul.nav li a {
  display: block;
  width: 100%;
  height: 100%
}

ul.nav li img {
  width: 100%
}

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

.banner li {
  margin-bottom: 2%
}

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

.banner img {
  width: 100%
}

.banner.top {
  margin-top: -9%;
  margin-bottom: 11%
}

.banner .otherspec {
  text-align: center
}

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

.banner .otherspec a+img {
  width: 100%;
  margin-bottom: 2%;
  vertical-align: top
}

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

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

#social_bnr a.twitter {
  float: left
}

#social_bnr a.line {
  float: right
}

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

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

#loadingscreen .box {
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -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 {
  width: 80%;
  top: 50%;
  left: 50%;
  max-width: 303px;
  -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%
}