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

.fade0-sp {
	animation-name: fade0-sp;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade0-sp {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade01-1 {
	animation-name: fade01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-2 {
	animation-name: fade01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-3 {
	animation-name: fade01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade01 {
	0% {
		clip-path: inset(0 100% 0% 0);
		opacity: 1;
	}
	30% {
		clip-path: inset(0 0% 0% 0%);
		opacity: 1;
	}
	60% {
		clip-path: inset(0 0% 0% 0%);
		opacity: 1;
	}
	100% {
		clip-path: inset(0 0% 0% 100%);
		opacity: 1;
	}
}

.fade02-1 {
	animation-name: fade02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade02-2 {
	animation-name: fade02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade02-3 {
	animation-name: fade02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade02-4 {
	animation-name: fade02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade02 {
	0% {
		opacity: 1;
		clip-path: inset(0 100% 0% 0%);
	}
	100% {
		clip-path: inset(0 0% 0% 0%);
		opacity: 1;
	}
}



/* body-anime ---------------------------------------------------------------------------------------------- */
.logo-ani01 {
	opacity : 0;
}
.logo-ani01.active{
	opacity : 1;
	animation-name: logo-ani01;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes logo-ani01 {
	from {
		clip-path: inset(0 0% 100% 0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
.logo-ani02 {
	opacity : 0;
}
.logo-ani02.active{
	opacity : 1;
	animation-name: logo-ani02;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes logo-ani02 {
	from {
		clip-path: inset(0% 0% 100% 0);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
.logo-ani03 {
	opacity : 0;
}
.logo-ani03.active{
	opacity : 1;
	animation-name: logo-ani03;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes logo-ani03 {
	0% {
		transform: rotate(-45deg) translateY(-20%);
		opacity: 1;
	}
	50% {
		transform: rotate(-45deg) translateY(0px);
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translateY(0px);
		opacity: 1;
	}
}
.logo-ani04 {
	opacity : 0;
}
.logo-ani04.active{
	opacity : 1;
	animation-name: logo-ani04;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes logo-ani04 {
	0% {
		transform: rotate(45deg) translateY(-20%);
		opacity: 1;
	}
	50% {
		transform: rotate(45deg) translateY(0px);
		opacity: 1;
	}
	100% {
		transform: rotate(0deg) translateY(0px);
		opacity: 1;
	}
}
.logo-ani05 {
	opacity : 0;
}
.logo-ani05.active{
	opacity : 1;
	animation-name: logo-ani05;
	animation-duration: .3s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes logo-ani05 {
	0% {
		transform: translateY(100%);
		opacity: 1;
	}
	100% {
		transform: translateY(0px);
		opacity: 1;
	}
}

.map-ani01 {
	opacity : 0;
}
.map-ani01.active{
	opacity : 1;
	animation-name: map-ani01;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes map-ani01 {
	0% {
		transform: scale(1.05);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.map-ani02 {
	opacity : 0;
}
.map-ani02.active{
	opacity : 1;
	animation-name: map-ani02;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes map-ani02 {
	0% {
		clip-path: inset(0 100% 0% 0);
		opacity: 0;
	}
	100% {
		clip-path: inset(0 0% 0% 0);
		opacity: 1;
	}
}
.map-ani03 {
	opacity : 0;
}
.map-ani03.active{
	opacity : 1;
	animation-name: map-ani03;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes map-ani03 {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}
.map-ani04 {
	opacity : 0;
}
.map-ani04.active{
	opacity : 1;
	animation-name: map-ani04;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes map-ani04 {
	0% {
		clip-path: inset(0 0% 100% 0);
		opacity: 0;
	}
	100% {
		clip-path: inset(0 0% 0% 0);
		opacity: 1;
	}
}

.title-ani01 {
	opacity : 0;
}
.title-ani01.active{
	opacity : 1;
	animation-name: title-ani01;
	animation-duration: .3s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes title-ani01 {
	0% {
		transform: translateX(100%);
		opacity: 1;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

.fadein-up1 {
	opacity : 0;
}
.fadein-up1.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up2 {
	opacity : 0;
}
.fadein-up2.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadein-up3 {
	opacity : 0;
}
.fadein-up3.active{
	opacity : 1;
	animation-name: fadein-up1;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up1 {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0%);
	}
}

.speechBubble-ani01 {
	opacity : 0;
}
.speechBubble-ani01.active{
	opacity : 1;
	animation-name: speechBubble-ani01;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes speechBubble-ani01 {
	0% {
		transform: translateX(10%);
		opacity: 0;
	}
	50% {
		transform: translateX(0);
	}
	65% {
		transform: translateX(1%);
	}
	100% {
		transform: translateX(0);
	}
	20%,100% {
		opacity: 1;
	}
}

.speechBubble-ani02 {
	opacity : 0;
}
.speechBubble-ani02.active{
	opacity : 1;
	animation-name: speechBubble-ani02;
	animation-duration: .7s;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes speechBubble-ani02 {
	0% {
		transform: translateX(-10%);
		opacity: 0;
	}
	50% {
		transform: translateX(0);
	}
	65% {
		transform: translateX(-1%);
	}
	100% {
		transform: translateX(0);
	}
	20%,100% {
		opacity: 1;
	}
}

.fadein-up-zoom {
	opacity : 0;
}
.fadein-up-zoom.active{
	opacity : 1;
	animation-name: fadein-up-zoom;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadein-up-zoom {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

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