@charset "utf-8";
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html,body{
  width:100%;
  height:100%;
  background-color:#000;
}
body{
}
ol,ul{
  list-style:none;
}
/*--------------------------------------------------*/
/*                                                  */
/*                                                  */
/* horizontal                                       */
/*                                                  */
/*                                                  */
/*--------------------------------------------------*/
#mv #horizontal{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  z-index:90;
  overflow:hidden;
}
#mv #horizontal .parts{
  display:flex;
}
#mv #horizontal .parts .left,
#mv #horizontal .parts .right{
  flex:0 1 50%;
  position:relative;
}
#mv #horizontal .parts .left::before,
#mv #horizontal .parts .right::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  background-repeat:repeat-x;
  background-size:contain;
}
#mv #horizontal .parts .left::before{
  background-position:right center;
}
#mv #horizontal .parts .right::before{
  background-position:right center;
  transform:scale(-1, 1);
}







/*--[ #h1 ]--*/
#mv #horizontal #h11.parts .left::before,
#mv #horizontal #h11.parts .right::before{
  background-image:url(../images/h/11.png);
}
#mv #horizontal #h12.parts .left::before,
#mv #horizontal #h12.parts .right::before{
  background-image:url(../images/h/12.png);
}
#mv #horizontal #h13.parts .left::before,
#mv #horizontal #h13.parts .right::before{
  background-image:url(../images/h/13.png);
}
#mv #horizontal #h14.parts .left::before,
#mv #horizontal #h14.parts .right::before{
  background-image:url(../images/h/14.png);
}
#mv #horizontal .parts.h1.show .left::before{
  animation-duration:2s;
  animation-name:h1l;
}
@keyframes h1l{
  0%{
    margin-right:100%;
  }
  100%{
    margin-right:0;
  }
}
#mv #horizontal .parts.h1.show .right::before{
  animation-duration:2s;
  animation-name:h1r;
}
@keyframes h1r{
  0%{
    margin-left:100%;
  }
  100%{
    margin-left:0;
  }
}
/*--[ #h2 ]--*/
#mv #horizontal #h21.parts .left::before,
#mv #horizontal #h21.parts .right::before{
  background-image:url(../images/h/21.png);
}
#mv #horizontal #h22.parts .left::before,
#mv #horizontal #h22.parts .right::before{
  background-image:url(../images/h/22.png);
}
#mv #horizontal #h23.parts .left::before,
#mv #horizontal #h23.parts .right::before{
  background-image:url(../images/h/23.png);
}
#mv #horizontal #h24.parts .left::before,
#mv #horizontal #h24.parts .right::before{
  background-image:url(../images/h/24.png);
}
#mv #horizontal .parts.h2.show .left::before{
  animation-duration:2s;
  animation-name:h2b;
}
@keyframes h2b{
  0%{
    margin-left:100%;
  }
  100%{
    margin-left:0;
  }
}
#mv #horizontal .parts.h2.show .right::before{
  animation-duration:2s;
  animation-name:h2a;
}
@keyframes h2a{
  0%{
    margin-right:100%;
  }
  100%{
    margin-right:0;
  }
}
/*--[ #h3 ]--*/
#mv #horizontal #h31.parts .left::before,
#mv #horizontal #h31.parts .right::before{
  background-image:url(../images/h/31.png);
}
#mv #horizontal #h32.parts .left::before,
#mv #horizontal #h32.parts .right::before{
  background-image:url(../images/h/32.png);
}
#mv #horizontal .parts.h3.show .left,
#mv #horizontal .parts.h3.show .right{
  animation-duration:0.5s;
  animation-name:h3;
}
@keyframes h3{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
/*--[ #h4 ]--*/
#mv #horizontal #h41.parts .left::before,
#mv #horizontal #h41.parts .right::before{
  background-image:url(../images/h/41.png);
}
#mv #horizontal #h41.parts .left::before{
  animation-duration:2s;
  animation-name:h41l;
}
@keyframes h41l{
  0%{
    margin-left:100%;
    background-position:left center;
  }
  100%{
    margin-left:0;
    background-position:left center;
  }
}
#mv #horizontal #h41.parts .right::before{
  animation-duration:2s;
  animation-name:h41r;
}
@keyframes h41r{
  0%{
    margin-right:100%;
    background-position:left center;
  }
  100%{
    margin-right:0;
    background-position:left center;
  }
}
#mv #horizontal #h42.parts .left::before,
#mv #horizontal #h42.parts .right::before{
  background-image:url(../images/h/42.png);
  background-position:right center;
}
#mv #horizontal #h42.parts .left::before{
  animation-duration:2s;
  animation-name:h42l;
}
@keyframes h42l{
  0%{
    margin-right:100%;
  }
  100%{
    margin-right:0;
  }
}
#mv #horizontal #h42.parts .right::before{
  animation-duration:2s;
  animation-name:h42r;
}
@keyframes h42r{
  0%{
    margin-left:100%;
  }
  100%{
    margin-left:0;
  }
}
/*--[ #h5 ]--*/
#mv #horizontal #h50.parts .left::before,
#mv #horizontal #h50.parts .right::before{
  background-image:url(../images/h/50.png);
}
#mv #horizontal .parts.h5.show .left,
#mv #horizontal .parts.h5.show .right{
  animation-duration:5s;
  animation-name:h5;
}
@keyframes h5{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
/*--[ #h51 ]--*/
#mv #horizontal #h51_1.parts .left::before,
#mv #horizontal #h51_1.parts .right::before{
  background-image:url(../images/h/51_1.png);
}
#mv #horizontal #h51_2.parts .left::before,
#mv #horizontal #h51_2.parts .right::before{
  background-image:url(../images/h/51_2.png);
}
#mv #horizontal #h51_3.parts .left::before,
#mv #horizontal #h51_3.parts .right::before{
  background-image:url(../images/h/51_3.png);
}
#mv #horizontal .parts.h51.stay .left,
#mv #horizontal .parts.h51.stay .right{
  animation-duration:4s;
  animation-name:h51;
  animation-iteration-count:infinite;
}
@keyframes h51{
  0%{
    opacity:0;
  }
  25%{
    opacity:1;
  }
  50%,100%{
    opacity:0;
  }
}
/*--[ #h52 ]--*/
#mv #horizontal #h52_1.parts .left::before,
#mv #horizontal #h52_1.parts .right::before{
  background-image:url(../images/h/52_1.png);
}
#mv #horizontal #h52_2.parts .left::before,
#mv #horizontal #h52_2.parts .right::before{
  background-image:url(../images/h/52_2.png);
}
#mv #horizontal .parts.h52.stay .left,
#mv #horizontal .parts.h52.stay .right{
  animation-duration:0.5s;
  animation-name:h52;
  animation-iteration-count:infinite;
}
@keyframes h52{
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
/*--[ #h53 ]--*/
#mv #horizontal #h53_1.parts .left::before,
#mv #horizontal #h53_1.parts .right::before{
  background-image:url(../images/h/53_1.png);
}
#mv #horizontal #h53_2.parts .left::before,
#mv #horizontal #h53_2.parts .right::before{
  background-image:url(../images/h/53_2.png);
}
#mv #horizontal #h53_3.parts .left::before,
#mv #horizontal #h53_3.parts .right::before{
  background-image:url(../images/h/53_3.png);
}
#mv #horizontal #h53_4.parts .left::before,
#mv #horizontal #h53_4.parts .right::before{
  background-image:url(../images/h/53_4.png);
}
#mv #horizontal .parts.h53.stay .left,
#mv #horizontal .parts.h53.stay .right{
  animation-duration:1s;
  animation-name:h53;
  animation-iteration-count:infinite;
}
@keyframes h53{
  0%{
    opacity:0;
  }
  25%{
    opacity:1;
  }
  50%,100%{
    opacity:0;
  }
}
/*--[ #h54 ]--*/
#mv #horizontal #h54_1.parts .left::before,
#mv #horizontal #h54_1.parts .right::before{
  background-image:url(../images/h/54_1.png);
}
#mv #horizontal #h54_2.parts .left::before,
#mv #horizontal #h54_2.parts .right::before{
  background-image:url(../images/h/54_2.png);
}
#mv #horizontal #h54_3.parts .left::before,
#mv #horizontal #h54_3.parts .right::before{
  background-image:url(../images/h/54_3.png);
}
#mv #horizontal #h54_4.parts .left::before,
#mv #horizontal #h54_4.parts .right::before{
  background-image:url(../images/h/54_4.png);
}
#mv #horizontal #h54_5.parts .left::before,
#mv #horizontal #h54_5.parts .right::before{
  background-image:url(../images/h/54_5.png);
}
#mv #horizontal .parts.h54.stay .left::before,
#mv #horizontal .parts.h54.stay .right::before{
  animation-duration:0.5s;
  animation-name:h54;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes h54{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
/*--[ #h55 ]--*/
#mv #horizontal #h55.parts .left::before,
#mv #horizontal #h55.parts .right::before{
  background-image:url(../images/h/55.png);
  min-width:632px;
}
#mv #horizontal .parts.h55.stay .left::before,
#mv #horizontal .parts.h55.stay .right::before{
  animation-duration:7s;
  animation-name:h55;
  animation-iteration-count:infinite;
}
@keyframes h55{
  0%{
    opacity:0;
  }
  20%{
    opacity:0;
  }
  21%{
    opacity:1;
  }
  22%{
    opacity:0;
  }
  24%{
    opacity:1;
  }
  70%{
    opacity:0;
  }
  71%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
/*--[ #h56 ]--*/
#mv #horizontal #h56.parts .left::before,
#mv #horizontal #h56.parts .right::before{
  background-image:url(../images/h/56.png);
}
#mv #horizontal .parts.h56.stay .left::before,
#mv #horizontal .parts.h56.stay .right::before{
  animation-duration:10s;
  animation-name:h56;
  animation-iteration-count:infinite;
}
@keyframes h56{
  0%{
    opacity:0;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}



















/*--------------------------------------------------*/
/*                                                  */
/*                                                  */
/* center                                           */
/*                                                  */
/*                                                  */
/*--------------------------------------------------*/
#mv #center{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:900px;
  height:900px;
  max-width:90vmin;
  max-height:90vmin;
  margin:auto;
  z-index:100;
}




/*--[ #name ]--*/
#mv #center #name.show{
  animation-duration:3s;
  animation-name:name;
  z-index:200;
}
@keyframes name{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
/*--[ #c1 ]--*/
#mv #center #c1.show{
  animation-duration:4s;
  animation-timing-function:cubic-bezier(.75, 0, .5, 1);
  animation-name:c1;
}
#mv #center #c1 #c10{
  content:'';
  display:block;
  position:absolute;
  top:30%;
  left:30%;
  right:30%;
  bottom:30%;
  background:url(../images/bg.png) repeat;
}
@keyframes c1{
  0%{
    opacity:0;
    top:-300%;
    left:-300%;
    right:-300%;
    bottom:-300%;
    width:600%;
    height:600%;
  }
  30%{
    opacity:1;
    top:-300%;
    left:-300%;
    right:-300%;
    bottom:-300%;
    width:600%;
    height:600%;
  }
  100%{
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
  }
}
/*--[ #c2 ]--*/
#mv #center #c2.show{
  animation-duration:0.5s;
  animation-name:c2;
}
@keyframes c2{
  0%{
    opacity:0;
    top:-100%;
    left:-100%;
    right:-100%;
    bottom:-100%;
    width:200%;
    height:200%;
  }
  100%{
    opacity:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
  }
}
#mv #center #c2.stay img{
  animation-duration:2s;
  animation-timing-function:ease-out;
}
#mv #center #c2.stay #c21{
  animation-name:c21;
}
@keyframes c21{
  0%{
    opacity:0;
  }
  20%{
    opacity:1;
  }
  40%{
    opacity:0;
  }
  60%{
    opacity:0;
  }
  80%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}
#mv #center #c2.stay #c22{
  animation-name:c22;
}
@keyframes c22{
  0%{
    opacity:0;
  }
  20%{
    opacity:0;
  }
  40%{
    opacity:1;
  }
  60%{
    opacity:0;
  }
  80%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}
#mv #center #c2.stay #c23{
  animation-name:c23;
}
@keyframes c23{
  0%{
    opacity:0;
  }
  20%{
    opacity:0;
  }
  40%{
    opacity:0;
  }
  60%{
    opacity:1;
  }
  80%{
    opacity:0;
  }
  100%{
    opacity:0;
  }
}
#mv #center #c2.stay #c24{
  animation-name:c24;
}
@keyframes c24{
  0%{
    opacity:0;
  }
  20%{
    opacity:0;
  }
  40%{
    opacity:0;
  }
  60%{
    opacity:0;
  }
  80%{
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
/*--[ #c3 ]--*/
#mv #center #c31.show,
#mv #center #c32.show{
  animation-duration:0.4s;
  animation-name:c3;
}
@keyframes c3{
  0%{
    opacity:0;
    top:-25%;
    left:-25%;
    right:-25%;
    bottom:-25%;
    width:150%;
    height:150%;
  }
  30%{
    opacity:1;
    top:-25%;
    left:-25%;
    right:-25%;
    bottom:-25%;
    width:150%;
    height:150%;
  }
  100%{
    opacity:1;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
  }
}
#mv #center #c31.stay img,
#mv #center #c32.stay img{
  animation-duration:6s;
}
#mv #center #c31.stay img{
  animation-name:c31s;
}
@keyframes c31s{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(180deg);
  }
}
#mv #center #c32.stay img{
  animation-name:c32s;
}
@keyframes c32s{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(-180deg);
  }
}
/*--[ #c4 ]--*/
#mv #center #c4.show #c40{
  animation-duration:0.25s;
  animation-name:c40;
}
@keyframes c40{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
#mv #center #c4 img.white{
  z-index:10;
}
#mv #center #c421{
  animation-duration:0.15s, 9s;
  animation-name:c42, c421;
  animation-timing-function:steps(2, jump-end), steps(120, jump-start);
}
#mv #center #c422{
  animation-duration:0.15s, 9s;
  animation-name:c42, c421;
  animation-timing-function:steps(2, jump-end), steps(120, jump-start);
  animation-direction:reverse, normal;
}
@keyframes c42{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
@keyframes c421{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
/*--[ #c5 ]--*/
#mv #center #c5.show #c50,
#mv #center #c5.show #c51,
#mv #center #c5.show #c52{
  animation-duration:0.5s;
  animation-name:c5;
}
@keyframes c5{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}
#mv #center #c5.stay #c51{
  animation-duration:10s;
  animation-name:c51;
}
@keyframes c51{
  0%{
    transform:rotate(0deg);
  }
  20%{
    transform:rotate(-60deg);
  }
  40%{
    transform:rotate(120deg);
  }
  60%{
    transform:rotate(30deg);
  }
  80%{
    transform:rotate(180deg);
  }
  100%{
    transform:rotate(0deg);
  }
}
#mv #center #c5.stay #c52{
  animation-duration:10s;
  animation-name:c52;
}
@keyframes c52{
  0%{
    transform:rotate(0deg);
  }
  20%{
    transform:rotate(180deg);
  }
  40%{
    transform:rotate(-30deg);
  }
  60%{
    transform:rotate(60deg);
  }
  80%{
    transform:rotate(-120deg);
  }
  100%{
    transform:rotate(0deg);
  }
}
/*--[ #c6 ]--*/
#mv #center #c6.show img{
  opacity:0.3;
  animation-duration:1.5s;
  animation-name:c6;
}
@keyframes c6{
  0%{
    opacity:0;
  }
  100%{
    opacity:0.3;
  }
}
#mv #center #c6.stay img.wave{
  opacity:0.3;
  animation-duration:0.3s;
  animation-name:c61;
  animation-direction:alternate;
}
@keyframes c61{
  0%{
    opacity:0.3;
  }
  4%{
    opacity:1;
  }
  8%{
    opacity:0.4;
  }
  12%{
    opacity:1;
  }
  16%{
    opacity:0.5;
  }
  20%{
    opacity:1;
  }
  24%{
    opacity:0.4;
  }
  100%{
    opacity:0.3;
  }
}
#mv #center #c6.stay img#c611{
  animation-delay:0.2s;
}
#mv #center #c6.stay img#c612{
  animation-delay:0.4s;
}
#mv #center #c6.stay img#c613{
  animation-delay:0.8s;
}
#mv #center #c6.stay img#c614{
  animation-delay:1s;
}
#mv #center #c6.stay img#c615{
  animation-delay:1.2s;
}
#mv #center #c6.stay img#c616{
  animation-delay:1.4s;
}
#mv #center #c6.stay img#c617{
  animation-delay:1.6s;
}
#mv #center #c6.stay img#c618{
  animation-delay:1.8s;
}
#mv #center #c6.stay img#c619{
  animation-delay:2s;
}
#mv #center #c6.stay img#c6110{
  animation-delay:2.2s;
}
#mv #center #c6.stay img#c6111{
  animation-delay:2.4s;
}
#mv #center #c6.stay img#c6112{
  animation-delay:2.6s;
}
#mv #center #c6.stay img#c6113{
  animation-delay:2.8s;
}
#mv #center #c6.stay img#c6114{
  animation-delay:3s;
}
#mv #center #c6.stay img#c6115{
  animation-delay:3.2s;
}
#mv #center #c6.stay img#c6116{
  animation-delay:3.4s;
}
#mv #center #c6.stay img#c6117{
  animation-delay:3.6s;
}
#mv #center #c6.stay img#c6118{
  animation-delay:3.8s;
}
#mv #center #c6.stay img#c6119{
  animation-delay:4s;
}
#mv #center #c6.stay img#c62{
  opacity:0.4;
  animation-duration:3.6s;
  animation-name:c62;
}
@keyframes c62{
  0%{
    opacity:0.4;
  }
  4%{
    opacity:1;
  }
  6%{
    opacity:0.4;
  }
  39%{
    opacity:0.4;
  }
  43%{
    opacity:1;
  }
  47%{
    opacity:0.4;
  }
  51%{
    opacity:0.4;
  }
  55%{
    opacity:1;
  }
  59%{
    opacity:0.4;
  }
  100%{
    opacity:0.4;
  }
}
/*--[ #c7 ]--*/
#mv #center #c7.stay{
  animation-name:c7s;
  animation-duration:36s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes c7s{
  0%{
    transform:rotate(0deg);
  }
  33.333333%{
    transform:rotate(45deg);
  }
  66.666666%{
    transform:rotate(0);
  }
  100%{
    transform:rotate(-45deg);
  }
}
/*--------------------------------------------------*/
/*                                                  */
/*                                                  */
/* mv                                               */
/*                                                  */
/*                                                  */
/*--------------------------------------------------*/
#mv{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}
#mv .show,
#mv .stay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  margin:auto;
}
#mv img{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:block;
  margin:auto;
  width:100%;
  height:100%;
  vertical-align:middle;
}
#mv .stay img{
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}


























/*--[ movies ]--*/
#movies{
  color:#fff;
}
#movies.show{
  display:block;
}
#movies ul.thumbs{
  display:flex;
  flex-wrap:wrap;
}
#movies ul.thumbs li{
  flex:0 1 25%;
  padding:10px;
}
#movies ul.thumbs li .movie{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
#movies ul.thumbs li .movie img{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#movies ul.thumbs li .movie iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}