/* head-anime ---------------------------------------------------------------------------------------------- */
.fade1 {
	animation-name: fade1;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 1;
}
@keyframes fade1 {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.fade2 {
	animation-name: fade2;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade2 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/* body-anime ---------------------------------------------------------------------------------------------- */
.txt-ani{
	opacity : 0;
}
.txt-ani.active{
	animation-name: txt-ani;
	animation-duration: .7s;
	animation-timing-function: ease-in-out;
	animation-delay: .7s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes txt-ani {
	from {
		-webkit-filter: blur(5px);
		-moz-filter: blur(5px);
		-o-filter: blur(5px);
		-ms-filter: blur(5px);
		filter: blur(5px);
		opacity: 0;
	}
	to {
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

.big-img-in {
	opacity : 0;
}
.big-img-in.active{
	animation-name: big-img-in;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes big-img-in {
	from {
		-webkit-filter: blur(10px);
		-moz-filter: blur(10px);
		-o-filter: blur(10px);
		-ms-filter: blur(10px);
		filter: blur(10px);
		opacity: 0;
	}
	to {
		-webkit-filter: blur(0px);
		-moz-filter: blur(0px);
		-o-filter: blur(0px);
		-ms-filter: blur(0px);
		filter: blur(0px);
		opacity: 1;
	}
}

.big-img-out01 {
	opacity : 0;
}
.big-img-out01.active{
	animation-name: big-img-out01;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes big-img-out01 {
	from {
		clip-path: inset(0 0% 0% 100%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.big-img-out02 {
	opacity : 0;
}
.big-img-out02.active{
	animation-name: big-img-out02;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes big-img-out02 {
	from {
		clip-path: inset(0 100% 0% 0%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.big-img-out03 {
	opacity : 0;
}
.big-img-out03.active{
	animation-name: big-img-out03;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-delay: .2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes big-img-out03 {
	from {
		clip-path: inset(0 0% 100% 0%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}


.fadein-txt-l {
	opacity : 0;
}
.fadein-txt-l.active{
	opacity : 1;
	animation-name: fadein-txt-l;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: .3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-txt-l2 {
	opacity : 0;
}
.fadein-txt-l2.active{
	opacity : 1;
	animation-name: fadein-txt-l;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: .7s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-txt-l {
	from {
		clip-path: inset(0 100% 0% 0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.fadein-txt-t {
	opacity : 0;
}
.fadein-txt-t.active{
	opacity : 1;
	animation-name: fadein-txt-t;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: .3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-txt-t {
	from {
		clip-path: inset(100% 0% 0% 0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}

.side-img01 {
	opacity : 0;
}
.side-img01.active{
	opacity : 1;
	animation-name: side-img;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.side-img02 {
	opacity : 0;
}
.side-img02.active{
	opacity : 1;
	animation-name: side-img;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-delay: .8s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.side-img03 {
	opacity : 0;
}
.side-img03.active{
	opacity : 1;
	animation-name: side-img;
	animation-duration: 1.2s;
	animation-timing-function: ease-out;
	animation-delay: 1.1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes side-img {
	from {
		transform: translateX(-10%);
		opacity: 0;
	}
	to {
		transform: translateX(0%);
		opacity: 1;
	}
}

/*//////////////////////////////// for iphone ////////////////////////////*/
@media (min-width:0px) and ( max-width:766px) {

	.big-img-out01 {
		opacity : 0;
	}
	.big-img-out01.active{
		animation-name: big-img-out01;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-delay: .2s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	@keyframes big-img-out01 {
		from {
			clip-path: inset(0 100% 0% 0%);
			opacity: 1;
		}
		to {
			clip-path: inset(0);
			opacity: 1;
		}
	}

	.big-img-out02 {
		opacity : 0;
	}
	.big-img-out02.active{
		animation-name: big-img-out02;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-delay: .2s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-fill-mode: forwards;
		opacity: 0;
	}
	@keyframes big-img-out02 {
		from {
			clip-path: inset(0 0% 0% 100%);
			opacity: 1;
		}
		to {
			clip-path: inset(0);
			opacity: 1;
		}
	}

}