.kodai_top #header .content {
 border-style: none; 
 border-color: #ffffff; 
 border-top-width: 0px; 
 border-bottom-width: 0px; 
max-width: 100%;
}
.kodai_top .content {
    background: #00909e;
}
.kodai_top_bg {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}

.zidai_icon_layer {
    position: absolute;
    z-index: 500;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
.zidai_icon_layer img {

}
.zidai_icon_layer img.zidai_bg_front,
.zidai_icon_layer img.zidai_bg_m {
    position: absolute;
    width: 100%;;
    height: 100%;
    left: 0;
    top: -1%;
}
.zidai_icon_layer img[src*="zidai_kodai_01"] {
    position: absolute;
    width: auto;
    height: 52%;
    left: 43.3%;
    top: 2%;
}

.zidai_icon_layer img[src*="zidai_kodai_01"] {
  animation: animationFrames1 linear 0.7s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames1 linear 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames1 linear 0.7s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames1 linear 0.7s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_02"] {
    position: absolute;
    width: auto;
    height: 34%;
    right: 34%;
    top: 27%;
}
.zidai_icon_layer img[src*="zidai_kodai_02"] {
  animation: animationFrames2 linear 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames2 linear 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames2 linear 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames2 linear 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_03"] {
    position: absolute;
    width: auto;
    height: 22%;
    left: 28.8%;
    top: 40.5%;
}
.zidai_icon_layer img[src*="zidai_kodai_03"] {
  animation: animationFrames3 linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames3 linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames3 linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames3 linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_04"] {
    position: absolute;
    width: auto;
    height: 34%;
    right: 23%;
    top: 29%;
}
.zidai_icon_layer img[src*="zidai_kodai_04"] {
  animation: animationFrames4 linear 1.2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames4 linear 1.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames4 linear 1.2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames4 linear 1.2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_05"] {
    position: absolute;
    width: auto;
    height: 13%;
    left: 32.5%;
    top: 66%;
    z-index: 550;
}
.zidai_icon_layer img[src*="zidai_kodai_05"] {
  animation: animationFrames5 linear 1.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames5 linear 1.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames5 linear 1.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames5 linear 1.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_06"] {
    position: absolute;
    width: auto;
    height: 14%;
left: 49.7%;
top: 58.5%;
z-index: 560;
}
.zidai_icon_layer img[src*="zidai_kodai_06"] {
  animation: animationFrames6 linear 1.6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames6 linear 1.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames6 linear 1.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames6 linear 1.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_07"] {
    position: absolute;
    width: auto;
    height: 13%;
    left: 46.5%;
    top: 76%;
}
.zidai_icon_layer img[src*="zidai_kodai_07"] {
  animation: animationFrames7 linear 1.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames7 linear 1.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames7 linear 1.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: animationFrames7 linear 1.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

/* --------------------------------------------------------- 01 animation*/
@keyframes animationFrames1{
  0% {
    transform:  translate(0px,-700px)  ;
  }
  60% {
    ¥transform:  translate(0px,-700px)  ;
  }
  65% {
    -¥transform:  translate(0px,-700px)  ;
  }
  70% {
    -transform:  translate(0px,0px)  ;
  }
  75% {
    transform:  translate(0px,-20%)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  90% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames1{
  0% {
    -moz-transform-style:  translate(0px,-700px)  ;
  }
  60% {
    -moz-transform:  translate(0px,-700px)  ;
  }
  65% {
    -moz-transform:  translate(0px,-700px)  ;
  }
  70% {
    -moz-transform:  translate(0px,0px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  90% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames1 {
  0% {
    -webkit-transform:  translate(0px,-700px)  ;
  }
  60% {
    -webkit-transform:  translate(0px,-700px)  ;
  }
  65% {
    -webkit-transform:  translate(0px,-700px)  ;
  }
  70% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  90% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}


@-ms-keyframes animationFrames1 {
  0% {
    -ms-transform:  translate(0px,-700px)  ;
  }
  60% {
    -ms-transform:  translate(0px,-700px)  ;
  }
  65% {
    -ms-transform:  translate(0px,-700px)  ;
  }
  70% {
    -ms-transform:  translate(0px,0px)  ;
  }
  75% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  90% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 02 animation*/
@keyframes animationFrames2{
  0% {
    transform:  translate(0px,-500px)  ;
  }
  50% {
    transform:  translate(0px,-500px)  ;
  }
  75% {
    transform:  translate(0px,-400px)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames2{
  0% {
    -moz-transform-style:  translate(0px,-500px)  ;
  }
  50% {
    -moz-transform:  translate(0px,-500px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-400px)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames2 {
  0% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-400px)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}


@-ms-keyframes animationFrames2 {
  0% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  50% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  75% {
    -ms-transform:  translate(0px,-400px)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 03 animation*/
@keyframes animationFrames3{
  0% {
    transform:  translate(0px,-500px)  ;
  }
  50% {
    transform:  translate(0px,-500px)  ;
  }
  75% {
    transform:  translate(0px,-400px)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames3{
  0% {
    -moz-transform-style:  translate(0px,-500px)  ;
  }
  50% {
    -moz-transform:  translate(0px,-500px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-400px)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames3 {
  0% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-400px)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames3 {
  0% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  50% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  75% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 04 animation*/
@keyframes animationFrames4{
  0% {
    transform:  translate(0px,-500px)  ;
  }
  50% {
    transform:  translate(0px,-500px)  ;
  }
  75% {
    transform:  translate(0px,-400px)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames4{
  0% {
    -moz-transform-style:  translate(0px,-500px)  ;
  }
  50% {
    -moz-transform:  translate(0px,-500px)  ;
  }
  75% {
    -moz-transform:  translate(0px,-400px)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames4 {
  0% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-500px)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-400px)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames4 {
  0% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  50% {
    -ms-transform:  translate(0px,-500px)  ;
  }
  75% {
    -ms-transform:  translate(0px,-400px)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 05 animation*/
@keyframes animationFrames5{
  0% {
    transform:  translate(0px,-700%)  ;
  }
  50% {
    transform:  translate(0px,-700%)  ;
  }
  75% {
    transform:  translate(0px,-700%)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames5{
  0% {
    -moz-transform-style:  translate(0px,-700%)  ;
  }
  50% {
    -moz-transform:  translate(0px,-700%)  ;
  }
  75% {
    -moz-transform:  translate(0px,-700%)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames5 {
  0% {
    -webkit-transform:  translate(0px,-700%)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-700%)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-700%)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames5 {
  0% {
    -ms-transform:  translate(0px,-700%)  ;
  }
  50% {
    -ms-transform:  translate(0px,-700%)  ;
  }
  75% {
    -ms-transform:  translate(0px,-700%)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 06 animation*/
@keyframes animationFrames6{
  0% {
    transform:  translate(0px,-600%)  ;
  }
  50% {
    transform:  translate(0px,-600%)  ;
  }
  75% {
    transform:  translate(0px,-600%)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames6{
  0% {
    -moz-transform-style:  translate(0px,-600%)  ;
  }
  50% {
    -moz-transform:  translate(0px,-600%)  ;
  }
  75% {
    -moz-transform:  translate(0px,-600%)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames6 {
  0% {
    -webkit-transform:  translate(0px,-600%)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-600%)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-600%)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames6 {
  0% {
    -ms-transform:  translate(0px,-600%)  ;
  }
  50% {
    -ms-transform:  translate(0px,-600%)  ;
  }
  75% {
    -ms-transform:  translate(0px,-600%)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}
/* --------------------------------------------------------- 06 animation*/
@keyframes animationFrames7{
  0% {
    transform:  translate(0px,-1000%)  ;
  }
  50% {
    transform:  translate(0px,-1000%)  ;
  }
  75% {
    transform:  translate(0px,-1000%)  ;
  }
  80% {
    transform:  translate(0px,0px)  ;
  }
  85% {
    transform:  translate(0px,-20%)  ;
  }
  90% {
    transform:  translate(0px,0px)  ;
  }
  95% {
    transform:  translate(0px,-5px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames7{
  0% {
    -moz-transform-style:  translate(0px,-1000%)  ;
  }
  50% {
    -moz-transform:  translate(0px,-1000%)  ;
  }
  75% {
    -moz-transform:  translate(0px,-1000%)  ;
  }
  80% {
    -moz-transform:  translate(0px,0px)  ;
  }
  85% {
    -moz-transform:  translate(0px,-20%)  ;
  }
  90% {
    -moz-transform:  translate(0px,0px)  ;
  }
  95% {
    -moz-transform:  translate(0px,-5px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames7 {
  0% {
    -webkit-transform:  translate(0px,-1000%)  ;
  }
  50% {
    -webkit-transform:  translate(0px,-1000%)  ;
  }
  75% {
    -webkit-transform:  translate(0px,-1000%)  ;
  }
  80% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  85% {
    -webkit-transform:  translate(0px,-20%)  ;
  }
  90% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  95% {
    -webkit-transform:  translate(0px,-5px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames7 {
  0% {
    -ms-transform:  translate(0px,-1000%)  ;
  }
  50% {
    -ms-transform:  translate(0px,-1000%)  ;
  }
  75% {
    -ms-transform:  translate(0px,-1000%)  ;
  }
  80% {
    -ms-transform:  translate(0px,0px)  ;
  }
  85% {
    -ms-transform:  translate(0px,-20%)  ;
  }
  90% {
    -ms-transform:  translate(0px,0px)  ;
  }
  95% {
    -ms-transform:  translate(0px,-5px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

.zidai_title {
    width: 100%;
    height: auto;
    top: 8%;
    left: 3%;
}

.zidai_title{
    position: absolute;
  animation: right_to_left linear 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: right_to_left linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: right_to_left linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: right_to_left linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes right_to_left{
  0% {
    transform:  translate(311px,0px)  ;
  }
  100% {
    transform:  translate(-288px,0px)  ;
  }
}

@-moz-keyframes right_to_left{
  0% {
    -moz-transform:  translate(311px,0px)  ;
  }
  100% {
    -moz-transform:  translate(-288px,0px)  ;
  }
}

@-webkit-keyframes right_to_left {
  0% {
    -webkit-transform:  translate(1000%,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0%,0px)  ;
  }
}

@-ms-keyframes right_to_left {
  0% {
    -ms-transform:  translate(311px,0px)  ;
  }
  100% {
    -ms-transform:  translate(-288px,0px)  ;
  }
}



.zidai_arrow {
    position: absolute;
    width: 100%;
    height: auto;
    top: 90%;
    right: 3%;
    z-index: 5;
}
.zidai_arrow{
  animation: left_to_right linear 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: left_to_right linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: left_to_right linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: left_to_right linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes left_to_right{
  0% {
    transform:  translate(-1000%,0px)  ;
  }
  100% {
    transform:  translate(0,0px)  ;
  }
}

@-moz-keyframes left_to_right{
  0% {
    -moz-transform:  translate(-395px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0,0px)  ;
  }
}

@-webkit-keyframes left_to_right {
  0% {
    -webkit-transform:  translate(-1000%,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0,0px)  ;
  }
}

@-ms-keyframes left_to_right {
  0% {
    -ms-transform:  translate(-1000%,0px)  ;
  }
  100% {
    -ms-transform:  translate(0,0px)  ;
  }
}


.timeslip_zidaitop {
position: absolute;
width: 17%;
height: auto;
top: 17%;
right: 4%;
z-index: 3000;
}
.timeslip_zidaitop{
  animation: right_Down ease-out 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: right_Down ease-out 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: right_Down ease-out 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: right_Down ease-out 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes right_Down{
  0% {
    transform:  translate(303px,-254px)  ;
  }
  100% {
    transform:  translate(-49px,0px)  ;
  }
}

@-moz-keyframes right_Down{
  0% {
    -moz-transform:  translate(303px,-254px)  ;
  }
  100% {
    -moz-transform:  translate(-49px,0px)  ;
  }
}

@-webkit-keyframes right_Down {
  0% {
    -webkit-transform:  translate(303px,-254px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes right_Down {
  0% {
    -ms-transform:  translate(303px,-254px)  ;
  }
  100% {
    -ms-transform:  translate(-49px,0px)  ;
  }
}
.arrow_box{
    position:relative;
    width:300px;
    height:70px;
    background:#FFFFFF;
    text-align:center;
    border:5px solid #0000FF;
    color:#000000;
    font-size:20px;
    font-weight:bold;
    border-radius:40px;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
}
.arrow_box:after,.arrow_box:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}
.arrow_box:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:15px;
    border-right-width:15px;
    margin-left: -15px;
    border-top-color:#FFFFFF;
}
.arrow_box:before{
    border-color: rgba(0, 0, 255, 0);
    border-top-width:26px;
    border-bottom-width:26px;
    border-left-width:20px;
    border-right-width:20px;
    margin-left: -20px;
    margin-top: 5px;
    border-top-color:#0000FF;
}
.character_zidaitop_box {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    width: 18%;
    height: auto;
    left: 1%;
    bottom: 3%;
    cursor: pointer;
    z-index: 8000;
}
.character_zidaitop {
    width: 100%;
    height: auto;
    padding-top: 14%;
    cursor: pointer;
    z-index: 8010;
}
.character_zidaitop[src*="character_01"] {
    width: 115%;
    margin-left: -10%;
}
.character_zidaitop_move {
    animation-name: character_move01;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}
.fukidashi1,
.fukidashi2,
.fukidashi3,
.fukidashi4,
.fukidashi5 {
  display: none;
}
.fukidashi10,
.fukidashi20,
.fukidashi30,
.fukidashi40,
.fukidashi50{
    display: block;
    width:auto;
    height:auto;
    background:#FFFFFF;
    text-align:center;
    line-height: 1.2em;
    padding: 1em;
    color:#000000;
    font-size:1.4rem;
    font-weight:bold;
    border-radius:40px;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    z-index: 8000;
}

.fukidashi10:after,
.fukidashi10:before,
.fukidashi20:after,
.fukidashi20:before,
.fukidashi30:after,
.fukidashi30:before,
.fukidashi40:after,
.fukidashi40:before,
.fukidashi50:after,
.fukidashi50:before{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    top:100%;
    left:50%;
}

.fukidashi10:after,
.fukidashi20:after,
.fukidashi30:after,
.fukidashi40:after,
.fukidashi50:after{
    border-color: rgba(255, 255, 255, 0);
    border-top-width:20px;
    border-bottom-width:20px;
    border-left-width:15px;
    border-right-width:15px;
    margin-left: -15px;
    border-top-color:#FFFFFF;
}
.fukidashi10,
.fukidashi20,
.fukidashi30,
.fukidashi40,
.fukidashi50{
  animation: fadeindown ease 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: fadeindown ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: fadeindown ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -ms-animation: fadeindown ease 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes fadeindown{
  0% {
    opacity:0;
    transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes fadeindown{
  0% {
    opacity:0;
    -moz-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes fadeindown {
  0% {
    opacity:0;
    -webkit-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes fadeindown {
  0% {
    opacity:0;
    -ms-transform:  translate(0px,-25px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}










.zidai_name_card{
    position: absolute;
    width: 6%;
    height: auto;
    z-index: 600;
}

.zidai_icon_layer img[src*="zidai_kodai_name_01"] {
    left: 40%;
    top: 22%;
}

.zidai_icon_layer img[src*="zidai_kodai_name_01"] {
  animation: tadaaction linear 3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_name_02"] {
    right: 40%;
    top: 35%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_02"] {
  animation: tadaaction linear 3.2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 3.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 3.2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 3.2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_name_03"] {
    left: 28.8%;
    top: 30.5%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_03"] {
  animation: tadaaction linear 3.4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 3.4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 3.4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 3.4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_04"] {
    right: 27%;
    top: 42%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_04"] {
  animation: tadaaction linear 3.6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 3.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 3.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 3.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_05"] {
    left: 28%;
    top: 62%;
    z-index: 550;
}
.zidai_icon_layer img[src*="zidai_kodai_name_05"] {
  animation: tadaaction linear 3.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 3.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 3.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 3.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

.zidai_icon_layer img[src*="zidai_kodai_name_06"] {
right: 35%;
top: 59%;
z-index: 560;
}
.zidai_icon_layer img[src*="zidai_kodai_name_06"] {
  animation: tadaaction linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_07"] {
    left: 43.5%;
    top: 70%;
}
.zidai_icon_layer img[src*="zidai_kodai_name_07"] {
  animation: tadaaction linear 4.2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 4.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 4.2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 4.2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}




/*
.zidai_name_card{
  animation: tadaaction linear 4s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: tadaaction linear 4s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: tadaaction linear 4s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -ms-animation: tadaaction linear 4s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}*/

@keyframes tadaaction{
  0% {
    opacity:0;
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  72% {
    opacity:0;
    transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  75% {
    opacity:1;
    transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  77% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  79% {
    transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  82% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  84% {
    transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  87% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  89% {
    transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  92% {
    transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
/*  94% {
    transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  97% {
    transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }*/
  100% {
    opacity:1;
    transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
}

@-moz-keyframes tadaaction{
  0% {
    opacity:0;
    -moz-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  72% {
    opacity:0;
    -moz-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  75% {
    opacity:1;
    -moz-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  77% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  79% {
    -moz-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  82% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  84% {
    -moz-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  87% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  89% {
    -moz-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  92% {
    -moz-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
/*  94% {
    -moz-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  97% {
    -moz-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }*/
  100% {
    opacity:1;
    -moz-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
}

@-webkit-keyframes tadaaction {
  0% {
    opacity:0;
    -webkit-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  72% {
    opacity:0;
    -webkit-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  75% {
    opacity:1;
    -webkit-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  77% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  79% {
    -webkit-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  82% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  84% {
    -webkit-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  87% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  89% {
    -webkit-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  92% {
    -webkit-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
/*  94% {
    -webkit-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  97% {
    -webkit-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }*/
  100% {
    opacity:1;
    -webkit-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
}

@-ms-keyframes tadaaction {
  0% {
    opacity:0;
    -ms-transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) ;
  }
  72% {
    opacity:0;
    -ms-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  75% {
    opacity:1;
    -ms-transform:  rotate(-3deg) scaleX(0.81) scaleY(0.81) ;
  }
  77% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  79% {
    -ms-transform:  rotate(-3deg) scaleX(0.80) scaleY(0.80) ;
  }
  82% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  84% {
    -ms-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  87% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
  89% {
    -ms-transform:  rotate(-3deg) scaleX(1) scaleY(1) ;
  }
  92% {
    -ms-transform:  rotate(3deg) scaleX(1.2) scaleY(1.2) ;
  }
/*  94% {
    -ms-transform:  rotate(-3deg) scaleX(1.20) scaleY(1.20) ;
  }
  97% {
    -ms-transform:  rotate(3deg) scaleX(1.20) scaleY(1.20) ;
  }*/
  100% {
    opacity:1;
    -ms-transform:  rotate(0deg) scaleX(1) scaleY(1) ;
  }
}

























@media screen and (min-width: 1680px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 736px) {}
@media screen and (max-width: 568px) {}
@media screen and (max-width: 480px) {}
@media screen and (max-width: 414px) {}
@media screen and (max-width: 360px) {}