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

#pageWrap {
	padding: 0px 0 0;
}
.notes-area {
    margin: 0% auto 0;
	background-color: #b4b4b5;
}
#sec01 {
	position: relative;
	overflow: hidden;
	background-color: #000;
}
#sec01 .base {
	/*filter: brightness(0%) grayscale(100%);*/
	opacity: 0;
	transform: scale(1.8);
	transition-property: opacity, transform;
	transition-duration: 3s, 3s;
	transition-delay: 1s, 2.5s;
	position: relative;
}
.start #sec01 .base {
	/*filter: brightness(100%) grayscale(0%);*/
	opacity: 1;
	transform: scale(1);
	
}
#sec01 .base .mainTxt {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	transition: 2s 3s;
}
.start #sec01 .base .mainTxt {
	opacity: 1;
}

#sec01 .on01,
#sec01 .on02 {
	position: absolute;
	right: -3.3%;;
	top: -0.4%;
	width: 48%;
	height: auto;
}

#sec01 .on01 {
	opacity: 0;
	transform: translateX(50%) scale(3);
	transition: 0.5s cubic-bezier(.93,.94,.71,1) 5s;
}
.start #sec01 .on01 {
	opacity: 1;
	transform: translateX(0%);
}
#sec01 .and {
	position: absolute;
	width: 27%;
	top: 33%;
	left: 53%;
	opacity: 0;
	transform: translateX(50%) scale(3);
	transition: 0.5s cubic-bezier(.93,.94,.71,1) 5.3s;
}
.start #sec01 .and {
	opacity: 1;
	transform: translateX(0%);
}
#sec01 .on02 {
	top: auto;
	bottom: -0.2%;
	opacity: 0;
	transform: translateX(50%) scale(3);
	transition: 0.5s cubic-bezier(.93,.94,.71,1) 5.6s;
}
.start #sec01 .on02 {
	opacity: 1;
	transform: translateX(0%);
}

#sec02 {
	padding: 6% 0;
	background-color: rgba(35,24,21,0.5);
	color: #fff;
}
#sec02 .h2Box {
	container-type: inline-size;
}
#sec02 .h2Box h2 {
	font-size: 4.4cqw;
	padding-bottom: 0.3em;
	letter-spacing: 0.1em;
}
#sec02 .h2Box h2 span {
	color: #fff000;
}
#sec02 .h2Box p {
	font-size: 1.6cqw;
	line-height: 2;
	letter-spacing: 0.1em;
	padding: 1em 0;
}
#sec03 {
	position: relative;
}
#sec03 .imgBox {
	width: calc(100% / 3);
	position: relative;
}
#sec03 .box01 {
	opacity: 0;
	transform: translateX(100%);
	transition: 1s ease-out 0.5s;
}
#sec03 .box01.active {
	opacity: 1;
	transform: translateX(0%);
}
#sec03 .box02 {
	z-index: 1;
	opacity: 0;
	transition: 1s;
}
#sec03 .box02.active {
	opacity: 1;
}
#sec03 .box03 {
	opacity: 0;
	transform: translateX(-100%);
	transition: 1s ease-out 1s;
}
#sec03 .box03.active {
	opacity: 1;
	transform: translateX(0%);
}
#sec03 .txt01 {
	position: absolute;
	top: 0;
	width: 16.7%;
}
#sec03 .box01 .txt01 {
	left: 0;
}
#sec03 .box02 {}
#sec03 .box03 .txt01 {
	position: absolute;
	right: 0;
	top: 0;
	width: 16.7%;
}
#sec03 .imgBox .ico{
	display: none;
}
#sec03 .ico {
	position: absolute;
	width: 20%;
	border-radius: 100%;
	background-color: rgba(255,240,0,0.85);
	z-index: 1;
	opacity: 0;
	transform: rotateY(-270deg);
}
#sec03 .ico01 {
	left: 14%;
	top: 17%;
	z-index: 2;
	transition: 1s ease-out 1.5s;
}
#sec03.active .ico01 {
	opacity: 1;
	transform: rotateY(0deg);
}
#sec03 .ico02 {
	left: 48%;
	bottom: -3%;
	transition: 1s ease-out 0.5s;
}
#sec03.active .ico02 {
	opacity: 1;
	transform: rotateY(0deg);
}
#sec03 .ico03 {
	right: 5%;
	top: -3%;
	transition: 1s ease-out 2s;
}
#sec03.active .ico03 {
	opacity: 1;
	transform: rotateY(0deg);
}

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

}
@media screen and (max-width: 599px){
	#sec02 .h2Box h2 {
    font-size: 6.4cqw;
	}
	#sec02 .h2Box p {
    font-size: 3.6cqw;
	}
	#sec03 {
		overflow: hidden;
	}
	#sec03 .imgBox {
		width: 100%;
		position: relative;
	}
	#sec03 .imgBox {
		opacity: 0;
		transform: translateX(0%);
	}
	#sec03 .imgBox.active {
		opacity: 1;
		transition: 1s ease-out 0.5s;
	}
	#sec03 > .ico {
		display: none;
	}
	#sec03 .imgBox .ico {
		display: block;
		width: 55vw;
		height: 55vw;
	}
	#sec03 .imgBox .ico {
		transition: 1s ease-out 1.0s;
	}
	#sec03 .imgBox.active .ico {
		opacity: 1;
		transform: rotateY(0deg);
	}
	#sec03 .box01 .ico {
		left: auto;
		left: 12%;
		top: 30%;
	}
	#sec03 .box02 .ico {
		left: auto;
		right: -5%;
		top: 20%;
	}
	#sec03 .box03 .ico {
		left: -2%;
		top: auto;
		bottom: 2%;
	}
	

	#sec03 .box01 .txt01,
	#sec03 .box03 .txt01{
		width: 11.8%;
	}


}