/*1*/
.kv__bottom{
	z-index:10;
}
.main-title {
	opacity: 0;
	transition-duration: 0.7s;
	transition-delay: 0s;
	transition-property: opacity, transform;
	transform: scale(0.2);
transition-delay:0s;
	transition-timing-function:cubic-bezier(.66,.39,.39,1.43);
}

/*2*/

.kv-left-flag {
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 1.6s;
	transition-property: opacity, margin;
	margin-top:-40%;
}

.kv-right-flag {
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 1.6s;
	transition-property: opacity, margin;
	margin-top:-40%;
}

.confetti-center {
	opacity: 0;
	transition-duration: 1.2s;
	transition-delay: 0.8s;
	transition-property: opacity, transform;
	transform: translate(-50%, 0) scale(0.2);
transition-timing-function:cubic-bezier(.66,.39,.39,1.43);
}

.confetti-top-left01 {
	opacity: 0;
	transition-duration: 1.6s;
	transition-delay: 1.2s;
	transition-property: opacity, transform;
	transform: translate(-30%, -40%);
}

.confetti-top-left02 {
	opacity: 0;
	transition-duration: 1.6s;
	transition-delay: 1.2s;
	transition-property: opacity, transform;
	transform: translate(-30%, -40%);
}

.confetti-top-right01 {
	opacity: 0;
	transition-duration: 1.6s;
	transition-delay: 1.7s;
	transition-property: opacity, transform;
	transform: translate(30%, -40%);
}

.confetti-top-right02 {
	opacity: 0;
	transition-duration: 1.6s;
	transition-delay: 1.7s;
	transition-property: opacity, transform;
	transform: translate(30%, -40%);
}

.confetti-bottom-left01 {
	opacity: 0;
	transition-duration: 1.8s;
	transition-delay: 1.1s;
	transition-property: opacity, transform;
	transform: translate(30%, -0%) scale(0.8);
}

.confetti-bottom-left02 {
	opacity: 0;
	transition-duration: 1.8s;
	transition-delay: 1.2s;
	transition-property: opacity, transform;
	transform: translate(30%, -10%) scale(0.8);
}

.confetti-bottom-right01 {
	opacity: 0;
	transition-duration: 1.8s;
	transition-delay: 1.1s;
	transition-property: opacity, transform;
	transform: translate(-30%, -10%) scale(0.8);
}

.confetti-bottom-right02 {
	opacity: 0;
	transition-duration: 1.8s;
	transition-delay: 1.2s;
	transition-property: opacity, transform;
	transform: translate(-30%, -10%) scale(0.8);
}

/*4*/

.kv-center {
	opacity: 0;
	transition-duration: 2.5s;
	transition-delay: 2.0s;
	transition-property: opacity, transform;
	transform: translateY(20%) scale(1.1);

}

/*5*/
.kv-bottom__bg {
	opacity: 0;
	transition-duration: 0.9s;
	transition-delay: 1.7s;
	transition-property: opacity, transform;
	transform: translateY(20%) scale(1.1);

}

/*7*/


.kv-left-character img{
	opacity: 0;
	transition-duration: 0.8s;
	transition-delay: 2.2s;
	transition-property: opacity, transform;
	transform: none;
}



.kv-right-character img{
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 2.4s;
	transition-property: opacity, transform;
	transform: none;
}


/*8*/
/*h1 {
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 2.5s;
	transition-property: opacity, transform;
	transform: scale(1.4, 0);
}*/

h1{
	opacity: 0;
	transition-duration: 0.7s;
	transition-delay: 2.5s;
	transition-property: opacity, transform;
	transform: scale(0.2);
	transition-timing-function:cubic-bezier(.66,.39,.39,1.43);
}
.on h1{
	transform:none;
	opacity:1;
}


/*9*/
.hand-left img {
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 3.1s;
	transition-property: opacity, transform;
	transform: translate(-10%, 10%) scale(1.2);
	animation-name: lefthandanim;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
	/*animation-delay: 3.8s;*/
}

.hand-right img {
	opacity: 0;
	transition-duration: 0.6s;
	transition-delay: 3.1s;
	transition-property: opacity, transform;
	transform: translate(10%, 10%) scale(1.2);
	animation-name: righthandanim;
	animation-iteration-count: infinite;
	animation-duration: 1.5s;
	/*animation-delay: 3.8s;*/
}

@keyframes lefthandanim {
	0% {
		transform: rotate(-5deg) translate(10%, -10%);
		transform-center: 10% 90%;
	}

	50% {
		transform: rotate(5deg);
		transform-center: 10% 90%;
	}

	100% {
		transform: rotate(-5deg) translate(10%, -10%);
		transform-center: 10% 90%;
	}
}

@keyframes righthandanim {
	0% {
		transform: rotate(-5deg) translate(10%, 10%);
		transform-center: 90% 90%;
	}

	50% {
		transform: rotate(5deg);
		transform-center: 10% 90%;
	}

	100% {
		transform: rotate(-5deg) translate(10%, 10%);
		transform-center: 90% 90%;
	}
}


.on .main-title,
.on .confetti>*,
.on .kv-left-character>*,
.on .kv-right-character>*,

.on .kv-center,
.on .kv-top__decorations-left>*,
.on .kv-top__decorations-right>*,


.on .kv__bottom>*,
.on .hand-left img,
.on .hand-right img {
	opacity: 1;
	transform: none;
	
}

.on .kv-flag>*{
	opacity:1;
	margin-top:0;
}

.on .confetti-center {
	transform: translateX(-50%);
}

.confetti>*:nth-child(n+2)>img {
	animation-name: glitter;
	animation-iteration-count: infinite;
	animation-duration:8s;
}

@keyframes glitter {
	0% {
		filter: none;
	}

	49.1% {
		filter: none;
	}

	49.7% {
		filter: brightness(1.5);
	}

	50.3% {
		filter: none;
	}
	
	50.9% {
		filter: none;
	}

	51.5% {
		filter: brightness(1.5);
	}

	52.1% {
		filter: none;
	}

	100% {
		filter: none;
	}
}

.confetti>*:nth-child(2)>* {
	animation-delay: 0s;
}

.confetti>*:nth-child(3)>* {
	animation-delay: 3s;
}

.confetti>*:nth-child(4)>* {
	animation-delay: 0s;
}

.confetti>*:nth-child(5)>* {
	animation-delay: 1s;
}

.confetti>*:nth-child(6)>* {
	animation-delay: 4s;
}

.confetti>*:nth-child(7)>* {
	animation-delay: 6s;
}

.confetti>*:nth-child(8)>* {
	animation-delay: 5s;
}

.confetti>*:nth-child(9)>* {
	animation-delay: 7s;
}

.kv-top__decorations-left img,
.kv-top__decorations-right img {
	transition-duration: 0.6s;
	transition-property: transform;
	transform: none;
}

.kv-top__decorations-left img.on,
.kv-top__decorations-right img.on {
	transform: translateY(-4%) scale(1.01);
}

/*.nav-deco-right,
.nav-deco-left,
.anniversary-comic>img,
.stamp-card-campaign>img,
.howto-apply>img,
.apply-requirements>img,
.share-deco {
	opacity: 0;
	animation-duration: 1s;

}

.nav-deco-right.on,
.nav-deco-left.on,
body .anniversary-comic>img.on,
.stamp-card-campaign>img.on,
.howto-apply>img.on,
.apply-requirements>img.on,
.video-support-campaign>img.on {
	animation-name: showimganim;
	animation-fill-mode: both;
	animation-timing-function: linear;
	opacity: 1;
	transform: none;
}*/

.comic-flag-left,
.comic-flag-right
 {
	opacity: 0;
	animation-name: none !important;
	transition-duration: 0.8s;
	margin-top: -20%;
	transition-property:opacity,margin;
}

.comic-flag-left.on,
.comic-flag-right.on
 {
	opacity: 1;
	margin-top:0;
}

/*center*/
body .anniversary-comic>img:nth-child(3).on,
.stamp-card-campaign>img:nth-child(1).on,
.apply-requirements>img.on,
.share-deco.on {
	animation-name: showimganimc;
	animation-fill-mode: both;
}

@media screen and (max-width: 900px) {
	body .anniversary-comic>img:nth-child(8).on {
		animation-name: showimganimc;

	}
}

@keyframes showimganim {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}

	10% {
		transform: scale(1.1);
	}

	20% {

		transform: scale(1.2);
	}

	30% {
		opacity: 1;
		transform: scale(1.1);
	}

	40% {
		transform: scale(0.5);
	}

	50% {
		transform: scale(1.0);
	}

	60% {
		transform: scale(1.1);
	}


	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes showimganimc {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.5);
	}

	10% {
		transform: translateX(-50%) scale(1.1);
	}

	20% {

		transform: translateX(-50%) scale(1.2);
	}

	30% {
		opacity: 1;
		transform: translateX(-50%) scale(1.1);
	}

	40% {
		transform: translateX(-50%) scale(0.5);
	}

	50% {
		transform: translateX(-50%) scale(1.0);
	}

	60% {
		transform: translateX(-50%) scale(1.1);
	}


	100% {
		opacity: 1;
		transform: translateX(-50%);
	}
}
.anniversary-comic .comic__content,
.stamp-card-campaign .card__content,
.video-support-campaign .section__inner,
.apply-requirements__contents,
.howto-step {
	opacity: 0;
	/*transform: translateY(5em);*/
	transition-duration: 0.7s;
	z-index: 100;
	
	transform: scale(0.6);
	transition-delay:0s;
	transition-timing-function:cubic-bezier(.66,.39,.39,1.43);
}

h3 {
	opacity: 0;
	transition-duration: 0.7s;
	transform:none;
	
	transition-delay:0s;
	
}



.nav .inner a::before
{
	opacity: 0;
	transition-duration: 0.9s;
	pointer-events:none;
	transition-delay:0.6s;

}
.nav.on .inner a::before{
	opacity: 1;
}
.nav .inner li
{
	opacity: 0;
	transform: translateY(5em);
	transition-duration: 0.7s;

}
.nav .inner li:nth-child(2)
{
	transition-delay: 0.3s;

}
.nav .inner li:nth-child(3)
{
	transition-delay: 0.6s;

}

.nav.on .inner li
{
	opacity: 1;
	transform: translateY(0);

}

h2.section__heading {
	opacity: 0;
	/*transform: translate(-50%, 5em);*/
	transition-duration: 0.7s;
}

body .section__inner.on,
.howto-step.on,
.apply-requirements__contents.on,
.nav.on .inner,
h3.on ,
.anniversary-comic .on .comic__content,
.stamp-card-campaign .on .card__content
{
	transform: none;
	opacity: 1;
}

h2.on {
	transform: translateX(-50%);
	opacity: 1;
}

.nav .inner {
	position: relative;
	z-index: 19;
}

.pagetop{
	pointer-events:none;
	opacity:0;
	transition-property:opacity;
	transition-duration:0.4s;
}

.on.pagetop{
	pointer-events:all;
	opacity:1;
}

.howto-steps::after{
	opacity:0;
	transition-property:opacity;
	transition-duration:0.6s;
	transition-delay:0.25s;
}
.howto-steps.on::after{
	opacity:1;
}
.howto-steps li:nth-child(2){
	transition-delay:0.5s;
}
.nav.is-fixed{
	display:block;
	opacity:0;
	pointer-events:none;
	transform:translateY(-50%);
	transition-property:transform,opacity;
	transition-duration:0.5s;
	z-index:10000;
}
.nav.is-fixed.vis{
	opacity:1;
	pointer-events:all;
	transform:none;
}

html{
	scroll-behavior: smooth;
}