@charset "UTF-8";

/*------------------------------------------------------------------------------- */
.up, .f_blur, .u_blur,.up,.fades, .line_width, .hop {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;
}

.hoping {
animation: slideIns .4s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

/* ----------------------------------------------------------------------------------- */
@-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 {
0% {
opacity: 0;
-ms-filter: blur(40px);
-o-filter: blur(40px);
-moz-filter: blur(40px);
-webkit-filter: blur(40px);
filter: blur(40px);
-webkit-transform: scale(4);
transform: scale(4);
	}
50% {
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 1;
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-transform: scale(1);
transform: scale(1);
}
}

@keyframes scale_Blur {
0% {
opacity: 0;
-ms-filter: blur(40px);
-o-filter: blur(40px);
-moz-filter: blur(40px);
-webkit-filter: blur(40px);
filter: blur(40px);
-webkit-transform: scale(4);
transform: scale(4);
	}
50% {
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-transform: scale(1);
transform: scale(1);
}
	
100% {
opacity: 1;
-ms-filter: blur(0px);
-o-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-filter: blur(0px);
filter: blur(0px);
-webkit-transform: scale(1);
transform: scale(1);
}
}

/* ----------------------------------------------------------------------------------- */
@-webkit-keyframes floating {
    0% {transform:translate(0, 0) rotate(0deg) scale(1)}
    25% {transform:translate(-8px, 6px) rotate(-3deg) scale(1.04)}
    50% {transform:translate(12px, -6px) rotate(6deg) scale(0.98)}
    75% {transform:translate(-6px, 18px) rotate(-2deg) scale(1.03)}
    100% {transform:translate(0, 0) rotate(0deg) scale(1)}
}

@keyframes floating {
  0% {transform:translate(0, 0) rotate(0deg) scale(1)}
    25% {transform:translate(-8px, 6px) rotate(-3deg) scale(1.04)}
    50% {transform:translate(12px, -6px) rotate(6deg) scale(0.98)}
    75% {transform:translate(-6px, 18px) rotate(-2deg) scale(1.03)}
    100% {transform:translate(0, 0) rotate(0deg) scale(1)}
}
@-webkit-keyframes floating2 {
    0% {transform:translate(0, 0) rotate(0deg) scale(1)}
    25% {transform:translate(15px, -7px) rotate(6deg) scale(1.02)}
    50% {transform:translate(-13px, 12px) rotate(-6deg) scale(0.98)}
    75% {transform:translate(16px, -22px) rotate(5deg) scale(1.01)}
    100% {transform:translate(0, 0) rotate(0deg) scale(1)}
}

@keyframes floating2 {
    0% {transform:translate(0, 0) rotate(0deg) scale(1)}
    25% {transform:translate(15px, -7px) rotate(6deg) scale(1.02)}
    50% {transform:translate(-13px, 12px) rotate(-6deg) scale(0.98)}
    75% {transform:translate(16px, -22px) rotate(5deg) scale(1.01)}
    100% {transform:translate(0, 0) rotate(0deg) scale(1)}
}




/* ----------------------------------------------------------------------------------- */
@keyframes loop_infinity {
	0% {background-position: 0 0;}
100% {background-position: -1920px -1080px;}

}

@keyframes loop_infinity02 {
	0% {background-position: 0 0;}
100% {background-position: 1920px 1080px;}
}
 
 /* ----------------------------------------------------------------------------------- */
@keyframes slideIns {
  0% {
    transform: translateY(180px);
    opacity: 0;
  }
 
 100% {
    transform: translateY(0);
  }
 40%,100% {
    opacity: 1;
  }
}