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

#move{width: 100%;min-width: 1200px; position: relative;overflow: hidden;background: #fff;}
#move #loader{background: #000;width: 100%;min-width: 1200px;}
#move .fade1{display: block;position: relative;z-index: 1}
#move img.fade2{position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 2}
#move .fade3{opacity: 0; position: absolute;left: 0;top: 0;width: 50%;height: auto;z-index: 2}
#move .fade4{opacity: 0;position: absolute;left: 50%;top: 0;width: 50%;height: auto;z-index: 2}

#move .fade5{opacity: 0;position: absolute;left: 0%;top: 0;width: 50%;height: auto;z-index: 2;transform: scale(1.3);}
#move .fade6{opacity: 0;position: absolute;left: 50%;top: 0;width: 50%;height: auto;z-index: 2;transform: scale(1.3);}
#move .fade7,
#move .fade8{display: none; position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 2}
#move .fade9{opacity: 0;position: absolute;left: 0;top: 0;width: 100%;height: auto;z-index: 2;filter: brightness(200%);}

#move #loader img{position:absolute;left: 0;top: 0; width: 100%;height: auto;}
#move .fade1 img,

#move .fade3 img,
#move .fade4 img,
#move .fade5 img,
#move .fade6 img,
#move .fade7 img,
#move .fade8 img,

#move .fade10 img{width: 100%;height: auto;}

#move .fade3.on{
    max-width: 100%;
    animation-name: anime_top_to_bottom;
    animation-fill-mode: forwards;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
}
#move .fade4.on{
    max-width: 100%;
    animation-name: anime_bottom_to_top;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-direction: normal;
}
@keyframes anime_top_to_bottom {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
		opacity: 0
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		opacity: 1
    }
}
@keyframes anime_bottom_to_top {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
		opacity: 0
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		opacity: 1
    }
}

#move .fade5.on{animation:kakudai 1s ease-out forwards;}
#move .fade6.on{animation:kakudai 1s ease-out forwards;}

#move .fade9.on{animation:hikari 1.5s ease-out infinite;animation-delay: 2s;}
#move .fade10.on{animation:hikari 1.8s ease-out infinite;}

@keyframes kakudai{
from {
        transform: scale(1.3);
		opacity: 0
      }
 to {
        transform: scale(1);
		opacity: 1
}
}
@keyframes hikari{
0% {
		opacity: 0.6;
		
      }
50% {
		opacity: 1;
		
}
100% {
		opacity: 0.6;
		
}
}


@media screen and (max-width: 767px) {
#move{min-width: 100%; }
#move #loader{min-width: 100%;}
#move .fade3{opacity: 0; position: absolute;left: 0;top: 0;width: 100%;height: 50%;z-index: 2}
#move .fade4{opacity: 0;position: absolute;left: 0%;top: 50%;width: 100%;height: 50%;z-index: 2}
#move .fade5{opacity: 0;position: absolute;left: 0%;top: 0;width: 100%;height:50%;z-index: 2;transform: scale(1.3);}
#move .fade6{opacity: 0;position: absolute;left: 0%;top: 50%;width: 100%;height: 50%;z-index: 2;transform: scale(1.3);}

}
@media print {

}