@charset "utf-8";

#logoWrap{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 10001;
}
#logoWrap.nodisplay{display: none;}
#logo01, #logo02{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	max-width: 221px;
	z-index: 10002;
	filter: blur(30px);
	opacity: 0;
}
#logo02{z-index: 10003;}
#logo01.disp{animation: blur1 1.2s ease 0s 1 normal forwards;}
#logo02.disp{animation: blur1 1.2s ease 1.2s 1 normal forwards;}
#logo01.disp.LoadOut, #logo02.disp.LoadOut{animation: blur .8s ease-in 0s 1 normal forwards;}

@keyframes blur1 {
	0%{
		opacity: 0;
		filter: blur(30px);
	}
	100% { 
		opacity: 1;
		filter: blur(0);
	}
}

#loading {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	text-align: center;
	overflow: hidden;
	background: #ffffff;
	opacity: 1;
	background-image: url("../../img/loading/bg.jpg");
	background-position: 50% 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
	transition: opacity .3s ease-out;
	z-index: 10000;
}
#loading01 {
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	text-align: center;
	overflow: hidden;
	background: #FFFBF0;
	opacity: 0;
	background-image: url("../../img/loading01/bg.jpg");
	background-position: 50% 0;
	background-size: 100% auto;
	background-repeat: no-repeat;
	transition: opacity .3s ease-out;
	z-index: 10001;
	display: none;
}
#loading01.disp{display: block;animation: blur1 2.4s ease-in-out 0s 1 normal forwards;}
#loading.nodisplay, #loading01.nodisplay{display: none;}
#loading.LoadOut, #loading01.LoadOut{animation: blur .7s ease-out 0s 1 normal forwards;}
@keyframes blur {
	0%{
		opacity: 1;
		filter: blur(0);
	}
	25%{
		opacity: .75;
		filter: blur(15px);
	}
	50%{
		opacity: .4;
		filter: blur(20px);
	}
	75%{
		opacity: .25;
		filter: blur(25px);
	}
	100% { 
		opacity: 0;
		filter: blur(60px);
	}
}

#sakura, #ichou {
	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sakura li, #ichou li {
	width: 60px;
	position: absolute;
	list-style: none;
	top: -50px;
	animation: fall 4s linear infinite, rotate1 2s ease-in-out infinite alternate;
}
#sakura li img, #ichou li img{max-width: 100%;}
@keyframes fall {
	to {
		top: 120%;
		opacity: .2;
	}
}
@keyframes rotate1 {
	from {
		transform: translateX(0px) rotate(0deg);
	}
	to {
		transform: translateX(200px) rotate(-80deg) rotateX(180deg);
	}
}
@keyframes rotate2 {
	from {
		transform: translateX(200px) rotate(-45deg);
	}
	to {
		transform: translateX(0px) rotate(0deg);
		opacity: .2;
	}
}
@keyframes rotate3 {
	from {
		transform: translateX(300px) rotate(-85deg);
	}
	to {
		transform: translateX(0px) rotate(0deg);
		opacity: .2;
	}
}
#sakura li:nth-child(1), #ichou li:nth-child(3) {
	left: 0;
	animation: fall 32s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
#sakura li:nth-child(2), #ichou li:nth-child(4) {
	left: 55vw;
	animation: fall 20s linear infinite, rotate1 5s ease-in-out infinite alternate;
}
#sakura li:nth-child(3), #ichou li:nth-child(5) {
	left: -25vw;
	animation: fall 37s linear infinite, rotate1 4.5s ease-in-out infinite alternate;
}
#sakura li:nth-child(4), #ichou li:nth-child(6) {
	left: 80vw;
	animation: fall 18s linear infinite, rotate2 5s ease-in-out infinite alternate;
}
#sakura li:nth-child(5), #ichou li:nth-child(7) {
	left: -20vw;
	animation: fall 10s linear infinite, rotate1 4s ease-in-out infinite alternate;
}
#sakura li:nth-child(6), #ichou li:nth-child(8) {
	left: -35vw;
	animation: fall 25s linear infinite, rotate2 6s ease-in-out infinite alternate;
}
#sakura li:nth-child(7), #ichou li:nth-child(9) {
	left: 65vw;
	animation: fall 30s linear infinite, rotate2 7.5s ease-in-out infinite alternate;
}
#sakura li:nth-child(8), #ichou li:nth-child(10)  {
	left: -30vw;
	animation: fall 23s linear infinite, rotate1 6s ease-in-out infinite alternate;
}
#sakura li:nth-child(9), #ichou li:nth-child(11)  {
	left: -5vw;
	animation: fall 13s linear infinite, rotate2 3.5s ease-in-out infinite alternate;
}
#sakura li:nth-child(10), #ichou li:nth-child(12)  {
	left: -10vw;
	animation: fall 17s linear infinite, rotate3 9s ease-in-out infinite alternate;
}
#sakura li:nth-child(11), #ichou li:nth-child(1)  {
	left: 10vw;
	animation: fall 9s linear infinite, rotate1 2.7s ease-in-out infinite alternate;
}
#sakura li:nth-child(12), #ichou li:nth-child(2)  {
	left: 40vw;
	animation: fall 8s linear infinite, rotate3 3s ease-in-out infinite alternate;
}

@media screen and (min-width: 769px) {
	#sakura li:nth-child(1), #ichou li:nth-child(3) {left: 0;}
	#sakura li:nth-child(2), #ichou li:nth-child(4) {left: 5vw;}
	#sakura li:nth-child(3), #ichou li:nth-child(5) {left: 15vw;}
	#sakura li:nth-child(4), #ichou li:nth-child(6) {left: 30vw;}
	#sakura li:nth-child(5), #ichou li:nth-child(7) {left: 40vw;}
	#sakura li:nth-child(6), #ichou li:nth-child(8) {left: 55vw;}
	#sakura li:nth-child(7), #ichou li:nth-child(9) {left: 65vw;}
	#sakura li:nth-child(8), #ichou li:nth-child(10) {left: 50vw;}
	#sakura li:nth-child(9), #ichou li:nth-child(11) {left: 75vw;}
	#sakura li:nth-child(10), #ichou li:nth-child(12) {left: 10vw;}
	#sakura li:nth-child(11), #ichou li:nth-child(1) {left: 85vw;}
	#sakura li:nth-child(12), #ichou li:nth-child(2) {left: 40vw;}
}