@charset "utf-8";

.animation,.animation-page {
	overflow: hidden;
	position: relative;
}

.animation h1 {
	position: absolute;
	width: calc(100%/1.04);
	top: calc(100%/1.8);
	left: calc(100%/100);
	display: inline-block;
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
.animation-page h1 {
	position: absolute;
	width: calc(100%/1.7);
	top: calc(100%/20);
	left: calc(100%/2.6);
	display: inline-block;
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}
@media screen and (max-width: 480px){
	.animation-page h1 {
		width: calc(100%/1.05);
		top: calc(100%/1.2);
		left: calc(100%/50);
	}
	.animation h1 {
		top: calc(100%/1.35);
	}
}
/*@media screen and (max-width: 896px){
	.animation h1 {
		position: absolute;
		width: calc(100%/3.2);
		top: calc(100%/70);
		left: calc(100%/100);
		animation: 5s infinite fadein;
	}
}*/
.anime-bg{ margin-top:5px; }
.text01,.text02,.bubble,.bubble02,.mizuha,.mizuha02,.point { position: absolute; }

/*********************ドオオオン*******************************/
.text01 {/*静止*/
	width: calc(100%/4.5);
	top: calc(100%/7.0);
	right: calc(100%/1.95);
}


/*アニメ*/
/*.text01 {
	width: calc(100%/2);
	top: calc(100%/100);
	right: calc(100%/80.8);
	.*animation: ease 20s 1 text01;
	animation-fill-mode:forwards;
}*/

/*********************吹き出し*******************************/
.bubble {
	width: calc(100%/2.9);
	top: calc(100%/100.0);
	left: calc(100%/1.52);
}

/*********************真鍋みずは*******************************/
.mizuha {
	width: calc(100%/3.2);
	top: calc(100%/70.0);
	left: calc(100%/20);
}
/*********************topテキスト(page)*******************************/
.text02 {display:block;
	width: calc(100%/1.7);
	top: calc(100%/5);
	right: calc(100%/35);
}
.bubble02 {
	width: calc(100%/4.7);
	top: calc(100%/15);
	left: calc(100%/28);
}
.mizuha02 {
	width: calc(100%/2.7);
	top: calc(100%/3.5);
	left: calc(100%/15);
}
.point {
	width: calc(100%/3.0);
	top: calc(100%/3.5);
	right: calc(100%/35);
}

.animation .event_logo,
.animation-page .event_logo { display: none; }

@media screen and (max-width: 480px){
	.text02{ 
		width: calc(100%/2.0);
		top: calc(100%/100);
		right: calc(100%/15);
	}
	.text01 {/*静止*/
		display:none;
	}
	.bubble {
		width: calc(100%/2);
		top: calc(100%/10.0);
		left: calc(100%/2.0);
	}
	.mizuha {
		width: calc(100%/2.0);
		top: calc(100%/20);
		left: calc(100%/100);
	}
	
	.text02 {
		width: calc(100%/1.7);
		top: calc(100%/5);
		right: calc(100%/35);
	}
	.bubble02 {
		width: calc(100%/3.7);
		top: calc(100%/7);
		left: calc(100%/50);
	}
	.mizuha02 {
		width: calc(100%/1.7);
		top: calc(100%/2.5);
		left: calc(100%/-20);
	}
	.point {
		width: calc(100%/1.8);
		top: calc(100%/20);
		right: calc(100%/35);
	}
	
	
}

@keyframes fadein {
	0%,
	40% {
	    opacity: 1;
	}
	60%,
	70% {
		opacity: 0;
	}
	90% { opacity: 1; }
}

@keyframes fadein_sp {
	20%,
	80% {
	    opacity: 1;
	}
	90% { opacity: 0; }
}

@keyframes logo {
	50% {
	    opacity: 1;
		left: 5%;
	}
	90% {
		opacity: 0;
		left: 5%;
	}
	100% {
		opacity: 0;
		left: -200%;
	}
}

@keyframes fadeup {
  0% {
	transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cloud {
	100% {
		top: calc(100%/3);
		right: calc(100%/1);
	}
}


@keyframes text01 {
	10%,
	20% {
		top: calc(100%/5);
		right: calc(100%/3.9);
	}
	20% {
		top: calc(100%/100);
		right: calc(100%/3.9);
	}
	100% {
		top: calc(100%/100);
		right: calc(100%/3.9);
	}
}
/*@keyframes text01 {
	40%,
	50% {
		top: calc(100%/5.1);
		right: calc(100%/2.4);
	}
	100% {
		top: calc(100%/1.63);
		right: calc(100%/-3.8);
	}
}*/
@keyframes ball { 
	5% { opacity:1; }
	40% { opacity:1; }
	45% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}
/*************************************************/