@charset "UTF-8";

/*------------------------------------------------------------------------------- */
.up, .f_blur, .u_blur, .fades, .line_width, .s_big {position: relative;z-index: 1;opacity: 0;}

/*-------------------------------------------------------------------------------------------------------------------------*/
.slides{
opacity: 0;
animation-duration: .4s;
animation-timing-function: linear;
animation-fill-mode:both;
animation-name: slideLeft;
animation-delay: .5s;
}

.moveup {
opacity: 0;
animation-name: slideTop;
animation-duration: .4s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay: .5s;
}

.linedown {
animation-name: lineHeight;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}

.lineleft {
animation-name: lineWidth;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}


.fadeIn {
animation-name: fade;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}

.linedown02 {
animation-name: lineHeight02;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}


.in_left {
opacity: 0;
animation-name: slideLeft;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.3s;
}

.in_right {
opacity: 0;
animation-name: slideRight;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.3s;
}

.up_blur {
opacity: 0;
animation-name: upBlur;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}


.fade_blur {
animation-name: fadeBlur;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-fill-mode:both;
animation-delay:.2s;
}

.scale_big {
animation-name: scale_Blur;
animation-duration:0.5s;
animation-timing-function: ease;
animation-fill-mode:both;
}


/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(20%);
-moz-transform: translateX(20%);
-o-transform: translateX(20%);
-ms-transform: translateX(20%);
transform:translateX(20%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}

@keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(20%);
-moz-transform: translateX(20%);
-o-transform: translateX(20%);
-ms-transform: translateX(20%);
transform:translateX(20%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes slideTop {
0% {
opacity: 0;
-webkit-transform:translateY(20%);
-moz-transform:translateY(20%);
-o-transform:translateY(20%);
-ms-transform:translateY(20%);
transform:translateY(20%);
	}
100% {
opacity: 1;
	-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform: translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}
}

@keyframes slideTop {
0% {
opacity: 0;
-webkit-transform:translateY(20%);
-moz-transform:translateY(20%);
-o-transform:translateY(20%);
-ms-transform:translateY(20%);
transform:translateY(20%);
	}
100% {
opacity: 1;
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform: translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20%);
-moz-transform: translateX(-20%);
-o-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform:translateX(-20%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}

@keyframes slideLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20%);
-moz-transform: translateX(-20%);
-o-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform:translateX(-20%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}


/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes slideRight {
0% {
opacity: 0;
-webkit-transform: translateX(60%);
-moz-transform: translateX(60%);
-o-transform: translateX(60%);
-ms-transform: translateX(60%);
transform:translateX(60%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}

@keyframes slideRight {
0% {
opacity: 0;
-webkit-transform: translateX(60%);
-moz-transform: translateX(60%);
-o-transform: translateX(60%);
-ms-transform: translateX(60%);
transform:translateX(60%);
	}
100% {
opacity: 1;
	-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform:translateX(0);
}
}


/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes lineHeight {
0% {opacity: 1;height: 0;	}
100% {opacity: 1;height: 100%;}
}

@keyframes lineHeight {
0% {opacity: 1;height: 0;	}
100% {opacity: 1;height: 100%;}
}



/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes lineWidth {
0% {opacity: 1;width: 0;	}
100% {opacity: 1;width: 100%;}
}

@keyframes lineWidth {
0% {opacity: 1;width: 0;	}
100% {opacity: 1;width: 100%;}
}



/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes fade {
0% {opacity: 0;}
100% {opacity: 1;}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes fadeout {
0% {opacity: 1;}
100% {opacity: 0;}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes fade02 {
0% {opacity: 1;}
50% {opacity: .7;}
100% {opacity: 1;}
}

@keyframes fade02 {
0% {opacity: 1;}
50% {opacity: .7;}
100% {opacity: 1;}
}



/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes skew {
0% {transform:skewX(0deg);}
19.9% {transform:skewX(86deg);}
20% {transform:skewX(0deg);}
100% {transform:skewX(0deg);}
}

@keyframes skew {
0% {transform:skewX(0deg);}
19.9% {transform:skewX(86deg);}
20% {transform:skewX(0deg);}
100% {transform:skewX(0deg);}
}




/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes lineHeight02 {
0% {opacity: 1;height: 0;	}
100% {opacity: 1;height: 90%;}
}

@keyframes lineHeight02 {
0% {opacity: 1;height: 0;	}
100% {opacity: 1;height: 90%;}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes zoomUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}

@keyframes zoomUp { /* 1.15倍させる指定 */
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
}


/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes fadeBlur {
0% {
opacity: 0;
-webkit-transform:translateY(20%);
-moz-transform:translateY(20%);
-o-transform:translateY(20%);
-ms-transform:translateY(20%);
transform:translateY(20%);

-ms-filter: blur(10px);
-o-filter: blur(10px);
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
filter: blur(10px);
	}
100% {
opacity: 1;
	-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform: translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);

-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
}
}

@keyframes fadeBlur {
0% {
opacity: 0;
-webkit-transform:translateY(20%);
-moz-transform:translateY(20%);
-o-transform:translateY(20%);
-ms-transform:translateY(20%);
transform:translateY(20%);

-ms-filter: blur(10px);
-o-filter: blur(10px);
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
filter: blur(10px);
	}
100% {
opacity: 1;
	-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform: translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);

-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);

}
}


/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes Blur {
0% {
opacity: 0;
-ms-filter: blur(10px);
-o-filter: blur(10px);
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
filter: blur(10px);
	}
100% {
opacity: 1;
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
}
}

@keyframes Blur {
0% {
opacity: 0;
-ms-filter: blur(10px);
-o-filter: blur(10px);
-moz-filter: blur(10px);
-webkit-filter: blur(10px);
filter: blur(10px);
	}
100% {
opacity: 1;
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes scale_Blur {
from {transform: scale(0.6) translate(-50%,-50%); }
to {transform: scale(1) translate(-50%,-50%);opacity: 1;}
}

@keyframes scale_Blur{
from {transform: scale(0.6) translate(-50%,-50%); }
to {transform: scale(1) translate(-50%,-50%);opacity: 1;}
}

/* ----------------------------------------------------------------------------------- */
/*
@keyframes grad {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
*/
@keyframes grad {
0%{background-image: url('../img/bg_header.jpg');}
50%{background-image: url('../img/bg_header02.jpg');}
100%{background-image: url('../img/bg_header.jpg');}

/* ----------------------------------------------------------------------------------- */
@keyframes move {
0% {
-webkit-transform:scale(1) skewX(0deg);
transform:scale(1) skewX(0deg);
opacity:.6;
}

50% {
-webkit-transform:scale(1.03) skewX(0deg);
transform:scale(1.03) skewX(0deg);
opacity:.9;
}


100% {
-webkit-transform:scale(1) skewX(0deg);
transform:scale(1) skewX(0deg);
opacity:.6;
}
}



@keyframes glitch-text{
	0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100%{
		transform    : skewX(0deg);
	}
	41%{
		transform    : skewX(1deg);
	}
	42%{
		transform    : skewX(-1deg);
	}
	59%{
		transform    : skewX(2deg) skewY(2deg);
	}
	60%{

		transform    : skewX(-2deg) skewY(-2deg);
	}
	63%{
transform    : skewX(2deg) skewY(-1deg);
	}
	70%{
		transform    : skewX(-2deg) skewY(-1deg);
	}
	71%{
		transform    : skewX(1deg) skewY(-1deg);
	}
}