@charset "UTF-8";
/* CSS Document */

#mainWrap {
	position: relative;
	overflow: hidden;

}
#base01 {
	width: 100%;
}

/*#s01 p {
	position: absolute;
	width: 70%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	opacity: 0;
	filter: blur(10px);
	transition: 2s;
}
.s01 #s01 p {
	opacity: 1;
	filter: blur(0px);
}
.s02 #s01 p {
	opacity: 0;
	filter: blur(0px);
}*/
#s02 {
	/*filter: blur(10px);*/
	/*opacity: 0;*/
}
.s02 #s02 {
	/*transition: 3s 0.5s;*/
	/*filter: blur(0px);*/
	/*opacity: 1;*/
}
#s02 #th60 {
	position: absolute;
	width: 20%;
	left: 50%;
	top: 45%;
	transform: translate(-50%,-50%);
	filter: contrast(120%) blur(10px);
	opacity: 0;
}
.s02 #s02 #th60 {
	transition: 3s 0.5s;
	filter: contrast(120%) blur(0px);
	opacity: 1;
}
#th60 .flea {
	position: absolute;
	width: 100%;
	left: 10%;
	top: 11%;
	transform: translate(-50%,-50%);
	z-index: 2;

}
.s02 #th60 .flea {

}
#s02 p {
	position: absolute;
	width: 50%;
	left: 50%;
	top: 65%;
	transform: translate(-50%,-50%) scale(1.2);
	opacity: 0;

}

.s02 #s02 p {
	transition: 2s 1.5s;
	opacity: 1;
	transform: translate(-50%,-50%) scale(1);
}
.s03 #s02 #th60 {
	transition: 2s;
	opacity: 0;

}
#s02-2 {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	
}
#s02-2 #th60-2 {
	position: absolute;
	left: 30px;
	top: 30px;
	width: 10%;
		filter: brightness(120%);
}
/*#s02-2 p {
	position: absolute;
	width: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	filter: brightness(100%);
}*/
.s03 #s02-2 {
	transition: 0.6s ease-out 0.6s;
	opacity: 1;
}
.s03 #s02 p {
	/*filter: brightness(250%);*/
	transition: 2s;
		opacity: 0;
}
/*.s03 #th60 .flea {
transition: 2s;
	opacity: 0;
}
.s03 #s02 p {
	transition: 2s;
		opacity: 0;
}*/
.imgPh p {
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	color: #fff;
	font-size: 2.6vw;
	
	letter-spacing: 0.2em;
	padding-left: 0.2em;
	filter: blur(10px);
	opacity: 0;

}
.s03 #base02 .cap {
	position: absolute;
	color: #fff;
	font-size: 1.2vw;
	display: inline-block;
	top: auto;
	left: 1.2em;
	bottom: 0.6em;
}
.s03 #base02 .cap span {
	font-size: 80%;
}
#base02,#base03,#base04,#base05 {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	
}
#base02,#base03,#base04 {
	opacity: 0;
	/*filter: brightness(100%);*/
}
.s03 #base02,.s04 #base03,.s05 #base04 {
	transition: opacity 2s, filter 3s ease-in;
	/*filter: brightness(60%);*/
	opacity: 1;
}
#base02 img,#base03 img,#base04 img {
	filter: brightness(100%);
}
.s03 #base02 img,.s04 #base03 img,.s05 #base04 img {
	filter: brightness(60%);
}

.s03 #base02 p,.s04 #base03 p,.s05 #base04 p {
	transition: 4s 0s;
	filter: blur(0px);
	opacity: 	1;
}



#base05 {
	opacity: 0;
	transform: scale(1.3);
}
.s06 #base05 {
	transition: 2s ease-out;
	transform: scale(1);
	opacity: 1;
}
#kusatu {
	opacity: 0;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	transform: translateY(50%);
}
.s07 #kusatu {
	transition: 3s ease-out;
	opacity: 1;
	transform: translateY(0%);
	
}

@media screen and (max-width: 959px) {
	#s02-2 {
		width: 100%;
	}
	#s02-2 #th60-2 {
		left: 20px;
		top: 20px;
		width: 15%;
	}
	
}
@media screen and (max-width: 599px) {
	.imgPh p {
		font-size: 4vw;
		letter-spacing: 0.1em;
		padding-left: 0.1em;
	}
	#s02 #th60 {
		width: 40%;
		top: 40%
	}
	#s02 p {
		width: 80%;
		top: 70%;
	}

	#s02-2 #th60-2 {
	left: 10px;
		top: 20px;
		width: 22%;
}
#s02-2 p {
	position: absolute;
	width: 75%;
}
}