@charset "UTF-8";

.scrollcount{
	position: fixed;
	right: 0;
	top: 0;
	font-size: 10px;
	z-index: 10000;
	background: #fff;
	color: #000;
}

/* splash ---------------------------------------*/

.splash {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 365vh;
	overflow: hidden;
	transition: all .25s ease;
	z-index: 2;
}

.splash::before {
	display:block;
	content:'';
	background: url('../img/splash/sky.jpg') no-repeat center center;
	background-size: cover;
	width:100%;
	height: 100vh;
	position:absolute;
	left: 0;
	top:0;
	z-index: 1;
}

.splash.is-end{
	position: absolute;
}

.splash.is-end::before{
	height: 80vw;
}

.splash img{width:100%;}

/* logo */

.splash-logo {
	position: absolute;
	left: 50%;
	top: 50vh;
	transform: translate(-50%,-50%);
	width: 390px;
	height: 381px;
	transition: all 1.25s ease;
}

.splash-logo.is-bottom {
	top: 120%;
}

.splash-logo.is-center {
	top: 50vh;
	transition: all 3.25s ease;
}

.splash-logo.is-opacity {
	opacity: 0;
}

.splash-logo-60 {
	position: absolute;
	left: 50%;
	top: 59%;
	transform: translate(-50%,-50%);
	z-index: 2;
}

.splash-logo-anniversary {
	position: relative;
	z-index: 1;
	transition: all .75s ease;
}

.splash-logo-anniversary.is-opacity{
	opacity: 0;
}

/* tree */

.splash-tree-left {
	position: absolute;
	left: 0;
	top: 0;
	transition: all .75s ease;
	transform: translate(-5%,0);
	width: 25vw;
	height: 100vh;
}

.splash-tree-left.is-leftout {
	transform: translate(-100%,0);
}

.splash-tree-left-01{
	position: absolute;
	left: -0.8vw;
	top: 0;
	width: 15vw;
	transform-origin: left bottom;
}

.splash-tree-left-02{
	position: absolute;
	left: 0;
	top: 10vh;
	width: 22.6vw;
	transform-origin: left bottom;
}

.splash-tree-left-03{
	position: absolute;
	left: 0;
	top: 42vh;
	width: 8.6vw;
	transform-origin: left bottom;
}

.splash-tree-left-04{
	position: absolute;
	left: -2vw;
	bottom: -6vh;
	width: 22vw;
	transform-origin: left bottom;
}

.splash-tree-right {
	position: absolute;
	right: 0;
	top: 0;
	transition: all .75s ease;
	transform: translate(0,0);
	width: 25vw;
	height: 100vh;
}

.splash-tree-right.is-rightout {
	transform: translate(100%,0);
}

.splash-tree-right-01 {
	position: absolute;
	right: 0;
	top: 0;
	width: 15vw;
	transform-origin: right bottom;
}

.splash-tree-right-02 {
	position: absolute;
	right: 0;
	top: 9vh;
	width: 21vw;
	transform-origin: right bottom;
}

.splash-tree-right-03 {
	position: absolute;
	right: 0;
	top: 42vh;
	width: 8vw;
	transform-origin: right bottom;
}

.splash-tree-right-04 {
	position: absolute;
	right: -2vw;
	bottom: -7vh;
	width: 19vw;
	transform-origin: right bottom;
}

/* cloud bird */

.splash-cloud-left {
	position: absolute;
	left: 26vw;
	top: 3.5vw;
	width: 15vw;
	transition: all .75s ease;
}

.splash-cloud-left.is-opacity{
	opacity: 0;
}

.splash-cloud-right{
	position: absolute;
	right: 24vw;
	top: 6.5vw;
	width: 15vw;
	transition: all .75s ease;
}

.splash-cloud-right.is-opacity{
	opacity: 0;
}

.splash-cloud-left-01{
	position: absolute;
	left: 4.8vw;
	top: 6.1vw;
	width: 14vw;
	transition: all .75s ease;
}
.splash-cloud-left-02{
	position: absolute;
	left: 14vw;
	top: 12.8vw;
	width: 7.2vw;
	transition: all .75s ease;
}
.splash-cloud-left-03{
	position: absolute;
	left: 24vw;
	top: 3.2vw;
	width: 19.6vw;
	transition: all .75s ease;
}
.splash-cloud-right-01{
	position: absolute;
	left: 60.4vw;
	top: 9.5vw;
	width: 15.2vw;
	transition: all .75s ease;
}
.splash-cloud-right-02{
	position: absolute;
	left: 74.6vw;
	top: 14.9vw;
	width: 8.1vw;
	transition: all .75s ease;
}
.splash-cloud-right-03{
	position: absolute;
	left: 76.3vw;
	top: 3.4vw;
	width: 15.2vw;
	transition: all .75s ease;
}

.splash-cloud-left-01.is-opacity,
.splash-cloud-left-02.is-opacity,
.splash-cloud-left-03.is-opacity,
.splash-cloud-right-01.is-opacity,
.splash-cloud-right-02.is-opacity,
.splash-cloud-right-03.is-opacity{
	opacity: 0;
}


.splash-bird {
	position: absolute;
	left: 34.5vw;
	top: 13vw;
	width: 2.4vw;
	transition: all .75s ease;
}

.splash-bird.is-opacity {
	opacity: 0;
}


/* town */

.splash-town {
	position: absolute;
	overflow: hidden;
	left: 0;
	top: 0;
	width: 100vw;
	height: 365vh;
	transition: all .75s ease;
	transform: translate(0,0) scale(1,1);
}

.splash-town.is-opacity {
	opacity: 0;
	transform: translate(0,5vw) scale(1,0.8);
}


/* chara */

.splash-chara {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
}

.splash-chara div{
	position: absolute;
	transition: all .75s ease;
	transform: translate(0,0);
}

.splash-chara div.is-opacity{
	opacity: 0;
	transform: translate(0,10px);
}

.splash-chara-01 {
	left: 40vw;
	top: 45vw;
	width: 20vw;
}

.splash-chara-02 {
	left: 36vw;
	top: 32vw;
	width: 6vw;
}

.splash-chara-03 {
	left: 51vw;
	top: 34vw;
	width: 9vw;
}

.splash-chara-04 {
	left: 37vw;
	top: 35vw;
	width: 12vw;
}

.splash-chara-05 {
	left: 62vw;
	top: 44vw;
	width: 9vw;
}

.splash-chara-06 {
	left: 24vw;
	top: 43vw;
	width: 21vw;
}

.splash-chara-07 {
	left: 9vw;
	top: 51vw;
	width: 15vw;
}

.splash-chara-08 {
	left: 72vw;
	top: 50vw;
	width: 16vw;
}
.splash-chara-09 {
	top: 61vw;
	width: 5.6vw;
	left: 61.6vw;
}

/* mainlogo */

.splash-mainlogo {
	position: absolute;
	left: 50%;
	top: 24vw;
	transform: translate(-50%,-50%);
	width: 33.5vw;
	transition: all 1.25s ease;
}

.splash-mainlogo.is-opacity {opacity: 0;}

.splash-mainlogo.is-topout {
	top: 0;
	opacity: 0;
	transition: all 3.25s ease;
}


/* keyframes */

@keyframes floatAnimation01 {
	0% {transform: translateY(0px);}
	20% {transform: translateY(-15px);}
	60% {transform: translateY(0px);}
}
@keyframes floatAnimation02 {
	0% {transform: translateY(-10px);}
	50% {transform: translateY(0px);}
	100% {transform: translateY(-10px);}
}
@keyframes floatAnimation03 {
	0% {transform: translateY(-5px);}
	25% {transform: translateY(0px);}
	50% {transform: translateY(-5px);}
	75% {transform: translateY(-10px);}
	100% {transform: translateY(-5px);}
}

.is-floating01 {animation: floatAnimation01 5.8s ease-in-out infinite;}
.is-floating02 {animation: floatAnimation01 4s 4.3s ease-in-out infinite;}
.is-floating03 {animation: floatAnimation01 3s 5.3s ease-in-out infinite;}
.is-floating04 {animation: floatAnimation02 5.8s ease-in-out infinite;}
.is-floating05 {animation: floatAnimation03 5.8s ease-in-out infinite;}
.is-floating01_once {animation: floatAnimation01 8s ease-in-out 1 reverse;}
.is-floating02_once {animation: floatAnimation02 8s ease-in-out 1 reverse;}
.is-floating03_once {animation: floatAnimation03 8s ease-in-out 1 reverse;}


@keyframes treeswayLeftAnimation01 {
	0% {transform: translate(0px,0) rotate(3deg);}
	50% {transform: translate(-10px,5px) rotate(0deg);}
	100% {transform: translate(0px,0) rotate(3deg);}
}
@keyframes treeswayLeftAnimation02 {
	0% {transform: translate(-10px,5px) rotate(0deg);}
	50% {transform: translate(0px,0) rotate(2deg);}
	100% {transform: translate(-10px,5px) rotate(0deg);}
}
@keyframes treeswayLeftAnimation03 {
	0% {transform: translate(-5px,0) rotate(0deg);}
	25% {transform: translate(0px,2px) rotate(1deg);}
	50% {transform: translate(-5px,0) rotate(0deg);}
	75% {transform: translate(-10px,2px) rotate(-1deg);}
	100% {transform: translate(-5px,0) rotate(0deg);}
}
@keyframes flowerswayLeftAnimation01 {
	0% {transform: translateX(0px) rotate(3deg);}
	50% {transform: translateX(-10px) rotate(0deg);}
	100% {transform: translateX(0px) rotate(3deg);}
}
@keyframes treeswayRightAnimation01 {
	0% {transform: translate(0px,0) rotate(3deg);}
	50% {transform: translate(10px,5px) rotate(0deg);}
	100% {transform: translate(0px,0) rotate(3deg);}
}
@keyframes treeswayRightAnimation02 {
	0% {transform: translate(10px,5px) rotate(0deg);}
	50% {transform: translate(0px,0) rotate(2deg);}
	100% {transform: translate(10px,5px) rotate(0deg);}
}
@keyframes treeswayRightAnimation03 {
	0% {transform: translate(5px,0) rotate(0deg);}
	25% {transform: translate(0px,2px) rotate(1deg);}
	50% {transform: translate(5px,0) rotate(0deg);}
	75% {transform: translate(10px,2px) rotate(-1deg);}
	100% {transform: translate(5px,0) rotate(0deg);}
}
@keyframes flowerswayRightAnimation01 {
	0% {transform: translateX(0px) rotate(-3deg);}
	50% {transform: translateX(10px) rotate(0deg);}
	100% {transform: translateX(0px) rotate(-3deg);}
}

.is-treeswayleft01 {animation: treeswayLeftAnimation01 8s ease-in-out infinite;}
.is-treeswayleft02 {animation: treeswayLeftAnimation02 8s ease-in-out infinite;}
.is-treeswayleft03 {animation: treeswayLeftAnimation03 8s ease-in-out infinite;}
.is-flowerswayleft01 {animation: flowerswayLeftAnimation01 8s ease-in-out infinite;}
.is-treeswayright01 {animation: treeswayRightAnimation01 8s ease-in-out infinite;}
.is-treeswayright02 {animation: treeswayRightAnimation02 8s ease-in-out infinite;}
.is-treeswayright03 {animation: treeswayRightAnimation03 8s ease-in-out infinite;}
.is-flowerswayright01 {animation: flowerswayRightAnimation01 8s ease-in-out infinite;}


@keyframes balloon {
	0% {transform: translateX(0);}
	30% {transform: translateX(-10px);}
	60% {transform: translateX(0px);}
	90% {transform: translateX(10px);}
}

.is-balloon {animation: balloon 2s ease-in-out infinite;}

.wrapper{
	padding-top: 65vw;
	z-index: 3;
}



@media screen and (max-width: 768px){

	/* splash ---------------------------------------*/

	.splash {height: 366vw;}
	.splash.is-end::before{height: 80vw;}
	.splash img{width:100%;}

	/* logo */

	.splash-logo {
		width: 195px;
		height: 190px;
		top: 40dvh;
	}

	/* tree */

	.splash-tree-left {
		width: 50vw;
		min-height: 600px;
	}

	.splash-tree-left-01{
		width: 25vw;
		top: -2.5vw;
	}

	.splash-tree-left-02{
		top: 5.5vw;
		width: 36vw;
	}

	.splash-tree-left-03,
	.splash-tree-left-04{display: none;}

	.splash-tree-right {
		width: 50vw;
		min-height: 600px;
	}

	.splash-tree-right-01 {width: 25vw;}

	.splash-tree-right-02 {
		top: 5vw;
		width: 35vw;
	}

	.splash-tree-right-03,
	.splash-tree-right-04 {display: none;}

	/* cloud bird */

	.splash-cloud-left {
		left: 14vw;
		top: 13vw;
		width: 34vw;
	}

	.splash-cloud-right{
		right: 6vw;
		top: 24vw;
		width: 33vw;
	}

	.splash-cloud-left-02,
	.splash-cloud-left-03,
	.splash-cloud-right-02,
	.splash-cloud-right-03{
		display: none;
	}
	.splash-cloud-left-01 {
    position: absolute;
		left: 14.8vw;
		top: 15vw;
		width: 36vw;
		transition: all .75s ease;
	}
	.splash-cloud-right-01 {
    position: absolute;
		left: 55vw;
		top: 26.5vw;
		width: 35vw;
    transition: all .75s ease;
	}

	.splash-bird {
		left: 17vw;
		top: 39vw;
		width: 6vw;
	}


	/* town */

	.splash-town {
		width: 100vw;
		height: 366vw;
	}

	.splash-town.is-opacity {transform: translate(0,3vw) scale(1,0.9);}


	/* chara */

	.splash-chara {
		height: 100vh;
		min-height: 670px;
	}

	.splash-chara-01 {
		left: 27vw;
		top: 111vw;
		width: 46vw;
	}

	.splash-chara-02 {
		left: 17vw;
		top: 78vw;
		width: 14vw;
	}

	.splash-chara-03 {
		left: 53vw;
		top: 83vw;
		width: 21vw;
	}

	.splash-chara-04 {
		left: 20vw;
		top: 86vw;
		width: 30vw;
	}

	.splash-chara-05 {
		left: 77vw;
		top: 104vw;
		width: 23vw;
	}

	.splash-chara-06 {
		left: -11vw;
		top: 104vw;
		width: 49vw;
	}

	.splash-chara-07,
	.splash-chara-08 {display: none;}

	.splash-chara-09 {
    top: 144vw;
    width: 13.6vw;
    left: 71.6vw;
	}

	/* mainlogo */

	.splash-mainlogo {
		top: 62vw;
		width: 70vw;
	}

	.wrapper{padding-top: 160vw;}

}