@charset "UTF-8";
/*
Fadein/out
*/

#move{width: 100%;min-width: 1200px;position: relative;overflow: hidden;background: #333;}
#move #loader{background: #333;position: absolute;left: 0;top: 0;width: 100%;height: 100%; z-index: 5;}
#move .fade1{display: block;position: relative;z-index: 1;width: 100%}
#move .fade0,
#move .fade2,
#move .fade3,
#move .fade4,
#move .fade5,
#move .fade6,
#move .fade7,
#move .line1,
#move .line2,
#move .line3,
#move .line4,
#move .line5
{display: none; position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 1}
#move .fade5{display:none; height: 100%;}


#move #loader img{position:absolute;left: 0;top: 0; width: 100%;height: auto;}
#move .fade0 img,
#move .fade1 img,
#move .fade2 img,
#move .fade3 img,
#move .fade4 img,
#move .fade6 img,
#move .fade7 img,
#move .line1 img,
#move .line2 img,
#move .line3 img,
#move .line4 img,
#move .line5 img{width: 100%;height: auto;}

#move .fade1 img{position: relative;z-index: 3}
#move .fade6{height: 100%}



@media screen and (max-width: 767px) {
#move{min-width: 100%; }
#move #loader{min-width: 100%;}

}
.p-hikari {
  position: absolute;
  width: 8%;
  height: 73%;
  left: 38%;
  top: 0%;
  z-index: 10;
  opacity: 0;
  transition: opacity 2s;
}
.p-hikari {
  opacity: 1;
}

.p-hikari > div {
  mask-image: linear-gradient(to bottom, transparent 20%, #000 70%, #000 70%, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 70%, #000 70%, transparent 80%);
  opacity: 1;
  width: 100%;
  height: 100%;
}
.p-hikari > div > div {
  width: 100%;
  height: 100%;
  background: url(masktag.png) repeat-y center center/100%;
  background-size: cover;
  -webkit-animation-name: hikari;
          animation-name: hikari;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
@media (max-width: 767px) {
  .p-hikari {    width: 10%;    left: 25%;	 height: 65%;  }
}



@-webkit-keyframes hikari {
  0% {
    background-position: 0 -100%;
  }
  100% {
    background-position: 0 100%;
  }
}
@keyframes hikari {
  0% {
    background-position: 0 -100%;
  }
  100% {
    background-position: 0 100%;
  }
}

.shutter{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  
  z-index:2;
  height: 100%;width: 100%;
transform: scale(4)  rotate(45deg);
 
}
.shutter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color: #ccc;
  width: 0;
  height: 1px;
}
.shutter.act {
  -webkit-animation: byeShutter 5s forwards;
          animation: byeShutter 5s forwards;
}
.shutter.act::before {
  -webkit-animation: shutterOpen 5s forwards;
          animation: shutterOpen 5s forwards;
}

@keyframes byeShutter {
  70% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    display: none;
    z-index: -1;
  }
}
@keyframes shutterOpen {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}


.shutter2{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  
  z-index:2;
  height: 100%;width: 100%;
 transform: scale(4)  rotate(-45deg);
 
}
.shutter2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background-color:#80a1cd;
  width: 0;
  height: 1px;
	
}
.shutter2.act {
  -webkit-animation: byeShutter2 5s forwards;
          animation: byeShutter2 5s forwards;
}
.shutter2.act::before {
  -webkit-animation: shutterOpen2 5s forwards;
          animation: shutterOpen2 5s forwards;
}

@keyframes byeShutter2 {
  70% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
    display: none;
    z-index: -1;
  }
}
@keyframes shutterOpen2 {
  0% {
    width: 0;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  90% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

