@charset "UTF-8";

/*--------------------------------------------------------------
keyvisial
--------------------------------------------------------------*/
@keyframes keyvisial-fadein-out {
	0% {
		opacity:0;
	}
	40% {
		opacity:1;
	}
	80% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes keyvisial-fadein-out2 {
	0% {
		opacity:0;
	}
	25% {
		opacity:1;
	}
	90% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes keyvisial-fade-up {
	0% {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
		opacity:0;
	}
	30% {
			opacity:1;
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity:1;
	}
	80% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity:1;
	}
	100% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px);
		opacity:0;
	}
}
@keyframes keyvisial-fade-down {
	0% {
		-webkit-transform: translateY(-50px);
		transform: translateY(-50px);
		opacity:0;
	}
	30% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity:1;
	}
	80% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity:1;
	}
	100% {
		-webkit-transform: translateY(50px);
		transform: translateY(50px);
		opacity:0;
	}
}
@keyframes keyvisial-fade-left {
	0% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		opacity:0;
	}
	30% {
			opacity:1;
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity:1;
	}
	80% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity:1;
	}
	100% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		opacity:0;
	}
}
@keyframes keyvisial-fade-right {
	0% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		opacity:0;
	}
	30% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity:1;
	}
	80% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
		opacity:1;
	}
	100% {
		-webkit-transform: translateX(50px);
		transform: translateX(50px);
		opacity:0;
	}
}
@keyframes fadein-zoom {
	0% {
		
		transform: scale(1.3,1.3);
		-webkit-transform: scale(1.3,1.3);
	}
	100% {
		opacity:1;
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
	}
}
/*--------------------------------------------------------------
animation
--------------------------------------------------------------*/
@keyframes anime-fade-out {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
@keyframes anime-fade-in {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes anime-fade-up {
	0% {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
		opacity:0;
	}
	70% {
		opacity:1;
	}
	100% {
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
		opacity:1;
	}
}
@keyframes anime-fade-left {
	0% {
		-webkit-transform: translateX(30px);
		transform: translateX(30px);
		opacity:0;
	}
	70% {
		opacity:1;
	}
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity:1;
	}
}
@keyframes anime-fade-right {
	0% {
		-webkit-transform: translateX(-50px);
		transform: translateX(-50px);
		opacity:0;
	}
	70% {
		opacity:1;
	}
	100% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity:1;
	}
}
@keyframes anime-slide-right-contents{
	0% {
			opacity:1;
	}
	99% {
			opacity:1;
	}
	100% {
			opacity:1;
	}
}
@keyframes anime-slide-right{
	0% {
		width:0%;
		left: 0%;
	}
	100% {
		width:100%;
		left: 0%;
	}
}

@keyframes anime-slide-right-sp{
		0% {
			width:0;
			left:0%;
			right: auto;
		}
		50% {
			width:100%;
			left: 0%;
			right: auto;
		}
		51% {
			width:100%;
			left: auto;
			right:0%;
		}
		100% {
			width:0%;
			left: auto;
			right:0%;
		}
}



*[data-a="fade-in"]{
	opacity:0;
}
*[data-a="fade-up"]{
	opacity:0;
}

*[data-a="fade-left"]{
	opacity:0;
}
*[data-a="fade-right"]{
	opacity:0;
}
*[data-a="fadein-zoom"]{
	opacity:0;
}
*[data-a="slide-right"]>*{
	opacity:1;
	z-index: 30;
	position: relative;
}
*[data-a="slide-right"]::after{
	content:"";
	background: #fff;
	width: 0%;
	height: 100%;
	position: absolute;
	left: 0;
	top:0;
	z-index: 0;
}

.anime-fadein-zoom{
	animation-name:fadein-zoom;
  animation-duration:2s;
  animation-timing-function:ease-out;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.anime-fade-in{
		animation-name:anime-fade-in;
  animation-duration:1s;
  animation-timing-function:ease-out;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.anime-fade-up{
		animation-name:anime-fade-up;
  animation-duration:0.6s;
  animation-timing-function:ease-out;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}


.anime-fade-left{
		animation-name:anime-fade-left;
  animation-duration:1s;
  animation-timing-function:ease-out;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.anime-fade-right{
		animation-name:anime-fade-right;
  animation-duration:1s;
  animation-timing-function:ease-out;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}
.anime-slide-right>*{
		animation-name:anime-slide-right-contents;
  animation-duration:0.8s;
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}

.anime-slide-right::after{
	animation-name:anime-slide-right;
  animation-duration:0.8s;
  transition-timing-function: cubic-bezier(0.070, 0.580, 0.895, 0.370);
		animation-iteration-count:1;
	animation-fill-mode:forwards;
}
@media screen and (max-width: 768px) {
	.anime-slide-right>*{
			animation-name:anime-slide-right-contents;
		animation-duration:0.5s;
			animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
	.anime-slide-right::after{
		animation-name:anime-slide-right;
		animation-duration:0.5s;
		transition-timing-function: cubic-bezier(0.070, 0.580, 0.895, 0.370);
			animation-iteration-count:1;
		animation-fill-mode:forwards;
	}
}
*[data-a="slide-mask"]{
	position: relative;
}
*[data-a="slide-mask"] span{
	opacity:0;
}
*[data-a="slide-mask"]::before{
	content:"";
	width: 0%;
	height: 100%;
	background: #efefef;
	position: absolute;
	left: 0;
	top:0;
}
.anime-slide-mask::before{
	animation:anime-sm-mask 1.4s infinite;
	animation-timing-function:cubic-bezier(.08,.7,.31,.94);
	animation-fill-mode:forwards;
	animation-iteration-count:1;
	z-index: 2;
}
.anime-slide-mask span{
	animation:anime-sm-txt 1.4s infinite;
	animation-timing-function:cubic-bezier(.08,.7,.31,.94);
	animation-fill-mode:forwards;
	animation-iteration-count:1;
	animation-delay:0.7s;
}
@keyframes anime-sm-txt {
	0% {
		opacity:1;
	}
	100% {
		opacity:1;
	}
}
@keyframes anime-sm-mask {
	0% {
		width: 0%;
			left: 0;
	right: auto;
	}
	50% {
		width: 102%;
			left: 0;
	right: auto;
	}
	51% {
		width: 102%;
		left: auto;
		right: -2%;
	}
	100% {
		width: 0%;
		left: auto;
		right: -2%;
	}
}