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

#contents {
	background-color: #000;
	color: #fff;
	padding-top: 5%;
}
#sec01 {
	padding: 5% 0 0;
}
#sec01 #symBox {
	width: 60%;
	max-width: 700px;
	margin: 0 auto;
	position: relative;
	filter: blur(20px);
	opacity: 0;
	transition: 2s;
}
._load #sec01 #symBox {
	filter: blur(0px);
	opacity: 1;
}
#sec01 #symBox .hikari {
	position: absolute;
	width: 70%;
	left: 0;
	top: 0;
	transform: translate(-46%,-17%) scale(0);
	opacity: 0;
	transition: 1s 1.3s;
}

._load #sec01 #symBox .hikari {
	transform:translate(-46%,-17%) scale(1);
	opacity: 1;
}

#sec01 h2 {
	writing-mode: vertical-rl;
	font-size: 46px;
	letter-spacing: 0.2em;
	margin: 2em auto;
}
#sec01 h2 span {
  display: inline-block;
	filter: blur(20px);
  opacity: var(--opacity, 0);
  transition: opacity 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.3s * var(--char-index));
}
#sec01 h2.active span {
	opacity: 1;
	filter: blur(0px);
}
#sec02 {
}
#sec02 .h3Box {
	margin: 0 auto;
	position: relative;
	z-index: 1;
	
}
#sec02 .h3Box h3 {
	text-align: center;
	font-size: 32px;
	padding: 1em 0;
	letter-spacing: 1.4em;
	opacity: 0;
	filter: blur(20px);
	transition: 1.2s;
}
#sec02 .h3Box h3.active {
	letter-spacing: 0.4em;
	opacity: 1;
	filter: blur(0px);
}

#sec02 .h3Box .lead {
	text-align: center;
	font-size: 20px;
	letter-spacing: 0.3em;
	line-height: 2.2;
	
}
#sec02 .h3Box .lead span {
	display: block;
	padding: 0 0.3em;
  opacity: var(--opacity, 0);
  transition: opacity 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.3s * var(--char-index) );
}
#sec02 .h3Box .lead.active span {
	opacity: 1;
}
#sec02 .kusatuBox {
	margin-top: -14%;
}

@media screen and (max-width: 959px) {
	#sec01 h2 {
		font-size: clamp(28px, 3.8vw, 30px);
	}
	#sec02 .h3Box h3 {
		font-size: clamp(20px, 2.7vw, 22px);
	}
	#sec02 .h3Box .lead {
		font-size: clamp(14px, 2vw, 16px);
	}
}
	
	
@media screen and (max-width: 599px) {
	#sec01 h2 {
		font-size: 5.9vw;
		font-size: clamp(21px, 5.9vw, 23px);
	}
	#sec02 .h3Box h3 {
		font-size: 4.6vw;
		font-size: clamp(16px, 4.6vw, 18px);
	}
	#sec02 .h3Box .lead {
		font-size: 3.5vw;
		font-size: clamp(11px, 3.5vw, 14px);
		letter-spacing: 0.1em;
	}
}