@charset "UTF-8";
/*========================================
Re:vite
Date : 20200918
URL : 
Style : TOP items animation css
Filename : anime.css
========================================*/

/* about */
.about-anime-01 {
	animation-name: move-06;
  animation-duration: 6s;
	animation-timing-function: ease-in-out infinite alternate;
  animation-iteration-count: infinite;
	/*animation-fill-mode: both;*/
}
.about-anime-02 {
	animation-name: move-07;
  animation-duration: 4.5s;
	animation-timing-function: ease-in-out infinite alternate;
  animation-iteration-count: infinite;
	/*animation-fill-mode: both;*/
}

/* service */
.service-item-image-01 .s-i-image-01-2 {
  animation-name: move-03;
  animation-duration: 5s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-iteration-count: infinite;
}
.service-item-image-01 .s-i-image-01-3 {
  animation-name: move-02;
  animation-duration: 5s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-iteration-count: infinite;
}
.service-item-image-01 .s-i-image-01-4 {
  animation-name: move-01;
  animation-duration: 5s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
  animation-iteration-count: infinite;
}
.service-item-image-02 .s-i-image-02-2 {
  animation-name: rotation-02;
  animation-duration: 4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
  animation-iteration-count: infinite;
}
.service-item-image-03 .s-i-image-03-1 {
  animation-name: move-04;
  animation-duration: 6s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
  animation-iteration-count: infinite;
}
.service-item-image-03 .s-i-image-03-2 {
  animation-name: fadein-01;
  animation-duration: 6s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-iteration-count: infinite;
}
.service-item-image-04 .s-i-image-04-2 {
  animation-name: move-05;
  animation-duration: 6s;
	animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* animation */
@keyframes rotation-01 {
  70% { transform: rotateY(-30deg) rotateX(-5deg) rotateZ(5deg);}
  100% { transform: rotateY(330deg) rotateX(-5deg) rotateZ(5deg);}
}
@keyframes rotation-02 {
  70% { transform: rotateY(-30deg);}
  100% { transform: rotateY(330deg);}
}

@keyframes move-01 {
  0% { transform: translateX(240px) translateY(5px) rotateZ(-1deg) scale(1, 1.04);}
  10% { transform: translateX(240px) translateY(5px) rotateZ(-1deg) scale(1, 1.04);}
	16% { transform: translateX(0);}
}
@keyframes move-02 {
  0% { transform: translateX(148px) translateY(0) rotateZ(1deg);}
  10% { transform: translateX(148px) translateY(0) rotateZ(1deg);}
  16% { transform: translateX(0);}
}
@keyframes move-03 {
  0% { transform: translateX(20px);}
  10% { transform: translateX(20px);}
  16% { transform: translateX(0);}
}
@keyframes move-04 {
	0% { transform: rotateZ(180deg); transform-origin: left bottom;}
	20% { transform: rotateZ(0);}
}
@keyframes move-05 {
	0% { transform: translate(0,0);}
	25% { transform: translate(4px,-4px) rotateZ(-1deg);}
	50% { transform: translate(0,0);}
	75% { transform: translate(-4px,4px) rotateZ(1deg);}
}
@keyframes move-06 {
  0% { transform:translate3d(1.5vw,0,0); }
  50% { transform:translate3d(-1.5vw,0,0); }
  100% { transform:translate3d(1.5vw,0,0); }
}
@keyframes move-07 {
  0% { transform:translate3d(0,10px,0); }
  50% { transform:translate3d(0,-10px,0); }
  100% { transform:translate3d(0,10px,0); }
}


@keyframes fadein-01 {
	0% {
		opacity: 0;
		transform: scale(.5, .5) rotateZ(-17deg);
	}
	20% {
		opacity: 0;
		transform: scale(.5, .5) rotateZ(-17deg);
	}
	25% {
		opacity: 1;
		transform: scale(1.05, 1.05) rotateZ(-17deg);
	}
	27% {
		opacity: 1;
		transform: scale(1, 1) rotateZ(-17deg);
	}
}















/*
.bg-fadein_1 {
	animation-name: bg-fin;
  animation-duration: .4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.bg-fadeout_1 {
	animation-name: bg-fout;
  animation-duration: .4s;
	animation-delay: 3s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
*/


@keyframes bg-fin {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes bg-fout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		display: none;
	}
}

@keyframes logo-mv_top {
	0% {
		top: 0%;
		opacity: 0;
	}
	90% {
		top: 50.5%;
		opacity: .4;
	}
	100% {
		top: 50%;
		opacity: 1;
	}
}
@keyframes logo-mv_bottom {
	0% {
		top: 100%;
		opacity: 0;
	}
	90% {
		top: 49.5%;
		opacity: .4;
	}
	100% {
		top: 50%;
		opacity: 1;
	}
}
@keyframes logo-mv_left {
	0% {
		top: 50%;
		left: 0%;
		opacity: 0;
	}
	90% {
		top: 50%;
		left: 50.5%;
		opacity: .4;
	}
	100% {
		top: 50%;
		left: 50%;
		opacity: 1;
	}
}
@keyframes logo-mv_right {
	0% {
		top: 50%;
		left: 100%;
		opacity: 0;
	}
	90% {
		top: 50%;
		left: 49.5%;
		opacity: .4;
	}
	100% {
		top: 50%;
		left: 50%;
		opacity: 1;
	}
}
@keyframes bg-w {
	0% {
		width: 100%;
		right: 0;
		opacity: 1;
	}
	100% {
		width: 0;
		right: 0;
		opacity: 1;
	}
}
@keyframes mask-bg_h {
	0% {
		height: 0;
		opacity: .8;
	}
	100% {
		height: 100%;
		opacity: 1;
	}
}











.loading-fadein_logo {
	animation-name: bg-fin;
  animation-duration: .5s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.loading-line_w1 {
	animation-name: loading-line_w;
  animation-duration: .3s;
	animation-delay: .8s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.loading-line_h1 {
	animation-name: loading-line_h;
  animation-duration: .3s;
	animation-delay: 1s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.loading-line_w2 {
	animation-name: loading-line_w;
  animation-duration: .3s;
	animation-delay: 1.2s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.loading-line_h2 {
	animation-name: loading-line_h;
  animation-duration: .3s;
	animation-delay: 1.4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.loading-bg_1 {
	animation-name: loading-bg_h;
  animation-duration: .5s;
	animation-delay: 2s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}








.text-fadein_t-1 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: 3s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_t-2 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: 4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_t-3 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: 5s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}

.text-fadein_1 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_2 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: .4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_3 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: .8s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_4 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: 1.2s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.text-fadein_5 {
	animation-name: bg-fin;
  animation-duration: 1.2s;
	animation-delay: 1.6s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}

.title-line_w1 {
	animation-name: title-line_w;
  animation-duration: .4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}
.title-line_h1 {
	animation-name: title-line_h;
  animation-duration: .4s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}

.image-fadein_1 {
	animation-name: item-up;
  animation-duration: .5s;
	animation-delay: 1s;
	animation-timing-function: cubic-bezier(.74,0,1,.9);
	animation-fill-mode: both;
}

@keyframes bg-fin {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes txt-fin {
	0% {
		top: 80px;
		opacity: 0;
	}
	100% {
		top: 0px;
		opacity: 1;
	}
}
@keyframes txt-fin_2 {
	0% {
		top: 40px;
		opacity: 0;
	}
	100% {
		top: 0px;
		opacity: 1;
	}
}
@keyframes title-line_w {
	0% {
		width: 0;
		opacity: 1;
	}
	100% {
		width: 100%;
		opacity: 1;
	}
}
@keyframes title-line_h {
	0% {
		height: 0;
		opacity: 1;
	}
	100% {
		height: 160px;
		opacity: 1;
	}
}
@keyframes item-up {
	0% {
		opacity: 0;
		transform: scale(.7);
	}
	95% {
		opacity: 1;
		transform: scale(1.05);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes loading-line_w {
	0% {
		width: 0;
		opacity: 1;
	}
	100% {
		width: calc(100% + 16px);
		opacity: 1;
	}
}
@keyframes loading-line_h {
	0% {
		height: 0;
		opacity: 1;
	}
	100% {
		height: calc(100% + 16px);
		opacity: 1;
	}
}
@keyframes loading-bg {
	0% {
		width: 0;
		height: 0;
		opacity: .8;
	}
	100% {
		width: 100%;
		height: 100%;
		opacity: .8;
	}
}
@keyframes loading-bg_w {
	0% {
		width: 0;
		opacity: .8;
	}
	100% {
		width: 100%;
		opacity: 1;
	}
}
@keyframes loading-bg_h {
	0% {
		height: 0;
		opacity: .8;
	}
	100% {
		height: 100%;
		opacity: 1;
	}
}