@keyframes fade2Top {
	0%{opacity:0;transform:translateY(100%);}
	100%{opacity:1;transform:translateY(0%);}
}

@keyframes fade2TopLight{
	0%{
		filter:brightness(3);
		transform:translateY(100%);
	}
	100%{opacity:1;transform:translateY(0%);filternone}
}


@keyframes fade2Bottom {
	0%{opacity:0;transform:translateY(-100%);}
	100%{opacity:1;transform:translateY(0%);}
}


@keyframes fade2Right {
	0%{opacity:0;transform:translateX(-50%);}
	100%{opacity:1;transform:translateY(0%);}
}

@keyframes fade2Left {
	0%{opacity:0;transform:translateX(50%);}
	100%{opacity:1;transform:translateY(0%);}
}


@keyframes fadeIn {
	0%{	opacity: 0;}
	50%{opacity:.2;}
	100%{opacity:1;}
}



@keyframes turnYaround {
  from {}
  to {transform:rotateY(360deg);}
}

@keyframes scaled {
  from {transform:scale(1);}
  to {transform:scale(.95);}
}


@keyframes maskT2B {
	0%{clip-path: var(--maskTStart);}
	100%{clip-path: var(--maskEnd);opacity:1;}
}

@keyframes maskB2T {
	0%{clip-path: var(--maskBStart);}
	100%{clip-path: var(--maskEnd);opacity:1;}
}

@keyframes maskL2R {
	0%{clip-path: var(--maskLStart);}
	100%{clip-path: var(--maskEnd);opacity:1;}
}






/* used animated tag ****************/

.animated,
.bonusList li,
.gallery .galleryList li>aside,
.gallery .galleryList li>div,
.galleryList li+li:before

{
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-direction: alternate; 
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0, 1.07, 1, 1);
	opacity: 0;
}


/*home*************************************/

/*buffer*/
:root{
	--homeTime: .5s;
}


.fp-viewing-home .man{
	animation-name:fade2Right;
	animation-duration: .5s;
}

.fp-viewing-home .txt>*{
	animation-name:fade2Right;
	animation-duration: .5s;
}

.fp-viewing-home .txt h2{
	animation-delay:calc(.1s + var(--homeTime));
}
.fp-viewing-home .txt h3{
	animation-delay:calc(.2s + var(--homeTime));
}
.fp-viewing-home .txt h4{
	animation-delay:calc(.3s + var(--homeTime));
}
.fp-viewing-home .txt aside{
	animation-delay:calc(.4s + var(--homeTime));
}
.fp-viewing-home .txt .dwns{
	animation-delay:calc(.5s + var(--homeTime));
}

.fp-viewing-home .dwns img{
	animation-name:scaled;
	animation-direction: alternate;  
	animation-iteration-count: infinite;
	animation-duration: .2s;
}


/*bonus*************************************/

/*buffer*/
:root{
	--bonusTime: .9s;
}


.fp-viewing-bonus h2,
.fp-viewing-bonus h3,
.fp-viewing-bonus nav.btnShare,
.fp-viewing-bonus p
{
	animation-name:fade2Top;
}

.fp-viewing-bonus h2{
	animation-delay:calc(var(--bonusTime));
}

.fp-viewing-bonus h3{
	animation-delay:calc(.1s + var(--bonusTime));
}

.fp-viewing-bonus nav.btnShare{
	animation-delay:calc(.2s + var(--bonusTime));
}

.fp-viewing-bonus p{
	animation-delay:calc(.3s + var(--bonusTime));
}


.fp-viewing-bonus .bonusList li,
.fp-viewing-bonus .bonusCaution
{
		animation-name:fade2Right;
		animation-timing-function:cubic-bezier(0.03, 0.87, 0.34, 1.12);
}


.fp-viewing-bonus .bonusList li:nth-child(1) {animation-delay:calc(.3s + var(--bonusTime));}
.fp-viewing-bonus .bonusList li:nth-child(2) {animation-delay:calc(.4s + var(--bonusTime));}
.fp-viewing-bonus .bonusList li:nth-child(3) {animation-delay:calc(.5s + var(--bonusTime));}
.fp-viewing-bonus .bonusList li:nth-child(4) {animation-delay:calc(.6s + var(--bonusTime));}
.fp-viewing-bonus .bonusList li:nth-child(5) {animation-delay:calc(.7s + var(--bonusTime));}

.fp-viewing-bonus .bonusCaution{
	animation-delay:calc(.8s + var(--bonusTime));
}


/*story *************************************/

/*buffer*/
:root{
	--storyTime: .7s;
}

.story h2,
.story h3,
.story p{
	opacity:0; transform:translateY(50%);
}


.story.active h2,
.story.active h3,
.story.active p{
	 transform:translateY(0);
	 opacity:1;
	 transition:all .7s;
	 transition-delay: 1s;
}

.story.active .story1 h3{
	 transition-delay:calc(.1s + var(--storyTime));
}

.story.active .story1 p{
	 transition-delay:calc(.2s + var(--storyTime));
}

.story.active .story2 h3{
	 transition-delay:calc(.3s + var(--storyTime));
}

.story.active .story2 p{
	 transition-delay:calc(.4s + var(--storyTime));
}

/*original *************************************/
.original h2,
.original .cd h3,
.original .cd h4,
.original .cd p,
.original .comic h3,
.original .comic p	
{opacity:0; transform:translateY(50%);}

.fp-viewing-original .original h2{
		animation-name:fade2Top;
		animation-delay:1s;
}

.original.active .cd h3,
.original.active .cd h4,
.original.active .cd p,
.original.active .comic h3,
.original.active .comic p
{
	 transform:translateY(0);
	 opacity:1;
	 transition:all .7s;
	 transition-delay: 1s;
}

.originalArea .txt>div.comic:before{height:0;}
.original.active .originalArea .txt>div.comic:before{
	height: 100%;
	transition:all .7s;
	transition-delay:1s;
}

.original.active .btnMusic{
	animation-name:fade2Right;
	animation-delay:.9s;
}

.original.active .btnComic{
	animation-name:fade2Right;
	animation-delay:1s;
}


/*caution*************************************/


.fp-viewing-caution .cautionArea h2{
	animation-name:fade2Top;
	animation-delay:.3s;
}

.fp-viewing-caution .cautionArea .cautionList {
	animation-name:fade2Top;
	animation-delay:.5s;
}



/*features*************************************/
.fp-viewing-features  h2{
	animation-name: fade2Top;
	animation-duration: .5s;
	animation-delay:.5s;
}

.fp-viewing-features  h3{
	animation-name: fade2Right;
	animation-delay:.6s;
}

.fp-viewing-features .featuresZone .txt{
	animation-name:fade2Top;
	animation-duration: .5s;
	animation-delay:.6s;	
	animation-timing-function: cubic-bezier(0, 1.58, 1, 1)	;

}


/*gallery*************************************/

/*buffer*/
:root{
	--galleryTime: .7s;
}

.fp-viewing-gallery h2{
		animation-name: fade2Left;
		animation-delay:calc(var(--galleryTime));
}

.fp-viewing-gallery .galleryList li + li:before{
		animation-name: maskT2B;
		animation-duration: .7s;
		animation-delay:calc(.4s);
}


.fp-viewing-gallery .galleryList li>aside,
.fp-viewing-gallery .galleryList li>div{
		animation-name: fade2Top;
		animation-duration: .5s;
		animation-timing-function: cubic-bezier(0, 0.52, 0, 1.11);
}

.fp-viewing-gallery .galleryList li.g1>aside{
		animation-delay:calc(var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g2>aside{
	  animation-name: fade2Bottom;
		animation-delay:calc(.1s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g3>aside{
		animation-delay:calc(.2s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g4>aside{
	  animation-name: fade2Bottom;
		animation-delay:calc(.3s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g1>div{
		animation-delay:calc(.4s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g2>div{
		animation-delay:calc(.5s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g3>div{
		animation-delay:calc(.6s + var(--galleryTime));
}

.fp-viewing-gallery .galleryList li.g4>div{
		animation-delay:calc(.7s + var(--galleryTime));
}