@-webkit-keyframes textIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
  }
  30% {
    opacity: 0
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@keyframes textIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
    transform: translateX(10px)
  }
  30% {
    opacity: 0
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0)
  }
}

@-webkit-keyframes railUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}

@keyframes railUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  to {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
}

@-webkit-keyframes railDown {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

@keyframes railDown {
  from {
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}

.p-top-mv {
  width: 100%;
  height: 700px;
  position: relative
}
@media screen and (max-width: 599px) {
.p-top-mv {
  height: 332px;
}
.p-top-mv:before {
	content: "";
	/*background: url("img/deco01_sp.png") no-repeat;
	background-size: 100%;*/
	width: 92px;
	height: 113px;
	position: absolute;
	top: 34rem;
	right: 0;
}
}

/*
@media screen and (min-width:1001px) {
  .p-top-mv {
    max-height: 50vw
  }
}
*/

/*
@media screen and (max-width:800px) {
  .p-top-mv {
    height: 740px;
    max-height: 50vh
  }
}
*/

.p-top-mv .p-top-mv__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 120px);
  overflow: hidden;
}

@media screen and (min-width:1001px) {
  .p-top-mv .p-top-mv__wrap {
    max-height: 100%
  }
}

@media screen and (max-width:800px) {
  .p-top-mv .p-top-mv__wrap {
    height: 100%;
    max-height: none
  }
}
@media screen and (max-width: 599px) {
.p-top-mv .p-top-mv__wrap:before {
	content: none;	
}
}

/*角度*/
.p-top-mv .p-top-mv__body {
margin: 0 0 0 auto;
width: 500px;
/*max-width: 45vh;*/
height: 200%;
display: flex;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 10%
}
/**/




@media screen and (max-width:800px) {
  .p-top-mv .p-top-mv__body {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    max-width: none;
    width: 60%;
    min-width: 100px
  }
}

@media screen and (max-width:500px) {
  .p-top-mv .p-top-mv__body {
    position: absolute;
    top: 0;
    left: auto;
    right: -18%;
  }
}

.p-top-mv .p-top-mv__body .p-top-mv__rail {
  position: relative;
  width: calc(33.33% - 24px);
  margin-right: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}
.p-top-mv .p-top-mv__body .rail-left {
z-index: 0;
}
.p-top-mv .p-top-mv__body .rail-center {
z-index: 1;
}
.p-top-mv .p-top-mv__body .rail-right {
z-index: 0;
}

@media screen and (max-width:800px) {
  .p-top-mv .p-top-mv__body .p-top-mv__rail {
    margin-right: 12px;
    width: calc(33.33% - 12px)
  }
}

.p-top-mv .p-top-mv__body .p-top-mv__rail .p-top-mv__rail-inner {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.p-top-mv .p-top-mv__body .p-top-mv__rail.rail-left.is-inview .p-top-mv__rail-inner {
  -webkit-animation: railUp 30s linear infinite;
  animation: railUp 30s linear infinite
}

.p-top-mv .p-top-mv__body .p-top-mv__rail.rail-center .p-top-mv__rail-inner {
  flex-direction: column-reverse
}

.p-top-mv .p-top-mv__body .p-top-mv__rail.rail-center.is-inview .p-top-mv__rail-inner {
  -webkit-animation: railDown 25s linear infinite;
  animation: railDown 25s linear infinite
}

.p-top-mv .p-top-mv__body .p-top-mv__rail.rail-right.is-inview .p-top-mv__rail-inner {
  -webkit-animation: railUp 20s linear infinite;
  animation: railUp 20s linear infinite
}

.p-top-mv .p-top-mv__body .key_tile {
  margin-bottom: 24px;
position: relative;
  -webkit-transform: translateY(50%);
  transform: translateY(50%)
}

@media screen and (max-width:800px) {
  .p-top-mv .p-top-mv__body .key_tile {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    margin-bottom: 12px
  }
}

.p-top-mv .p-top-mv__body .key_tile img {
/*border: 1px solid #333;*/  
display: block;
  width: 100%;
  height: auto;
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 0);
  transform: rotateY(0deg) translate3d(0, 0, 0)
}


body.opening .p-top-mv .p-top-mv__body .key_tile img {
  opacity: 0;
  -webkit-transform: rotateY(50deg) translate3d(0, 0, 0);
  transform: rotateY(50deg) translate3d(0, 0, 0)
}
.p-top-mv .p-top-mv__body .key_tile .posi01 {
border: none;
position: absolute;
top: -25px;
left: -70px;
width: 96px;
z-index: 999;
}
.p-top-mv .p-top-mv__body .key_tile .posi02 {
border: none;
position: absolute;
top: -20px;
right: -50px;
width: 96px;
z-index: 999;
}

@media screen and (max-width: 599px) {
.p-top-mv .p-top-mv__body .key_tile .posi01 {
width: 40px;
left: -30px;
}
.p-top-mv .p-top-mv__body .key_tile .posi02 {
width: 40px;
right: -30px;
}
.p-top-mv .p-top-mv__body .key_tile.tile-center {
  -webkit-transform: translateY(0);
  transform: translateY(0)
}
}
@media screen and (max-width:800px) {
  .p-top-mv .p-top-mv__body .key_tile.tile-center {
    -webkit-transform: translateY(50%);
    transform: translateY(50%)
  }
}


/* オープニング用 */
/*
.p-top-mv .p-top-mv__body .key_tile:nth-child(1) img {
  transition: .7s .6s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(2) img {
  transition: .7s .8s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(3) img {
  transition: .7s 1s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(4) img {
  transition: .7s 1.2s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(5) img {
  transition: .7s 1.4s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(6) img {
  transition: .7s 1.6s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(7) img {
  transition: .7s 1.8s
}

.p-top-mv .p-top-mv__body .key_tile:nth-child(8) img {
  transition: .7s 2s
}
*/