@charset "utf-8";

/* -----------------------------------------------------------
TOP オープニングアニメーション
-------------------------------------------------------------- */
.topsvg-on {
	opacity: 0;
	transition: 3s;
}

.topsvg-on.is-open {
	opacity: 1;
}

#load {
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 9999999999999999999999999999;
}

#load.is-open {
	display: none;
}

#load .load-inner {
	position: relative;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: #fff;
	gap: 30px;
}

#load.is-open .load-inner {
	transition: 1.5s;
	opacity: 0;
}

#load .load-block {
	transition: 1.5s;
	text-align: center;
	opacity: 1;
}

#load .load-block--2 {
	align-items: center;
	display: flex;
	justify-content: center;
}

#load .load-block--1.is-open, #load .load-block--2.is-open {
	opacity: 0;
}

@media screen and (max-width: 768px) {
	#load .load-inner {
		padding: 0 20px;
		gap: 20px;
	}
	#load .load-block--2 {
		display: block;
	}
}

/*--------------------------------------------
  svg
--------------------------------------------*/
#open_ani_logo {
	width: 660px;
	margin: 0 auto;
}

#load path, #load polygon, #load rect {
	stroke: #0068b7;
	stroke-width: 0.5px;
	stroke-dasharray: 400px;
	animation: svg 1.3s linear both;
}

@keyframes svg {
	0% {
		fill: transparent;
		stroke-dashoffset: 400px;
	}

	60% {
		fill: transparent;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

@media screen and (max-width: 768px) {
	#open_ani_logo {
		width: 100%;
		max-width: 660px;
	}
}


/*--------------------------------------------
  ロード　文字アニメーション
--------------------------------------------*/

.load-text span {
	display: inline-block;
	font-size: 3.5rem;
	font-weight: bold;
	letter-spacing: .03em;
	opacity: 0;
}

.txt-open.load-text span,
.txt-open.load-text__2 span{
	opacity: 1;
	transition: opacity .8s;
}

.load-text__1 span:nth-child(2) {
	transition-delay: 0s;
}

.load-text__1 span:nth-child(3) {
	transition-delay: 0.10s;
}

.load-text__1 span:nth-child(4) {
	transition-delay: 0.14s;
}

.load-text__1 span:nth-child(5) {
	transition-delay: 0.18s;
}

.load-text__1 span:nth-child(6) {
	transition-delay: 0.22s;
}

.load-text__1 span:nth-child(7) {
	transition-delay: 0.26s;
}

.load-text__1 span:nth-child(8) {
	transition-delay: 0.30s;
}

.load-text__1 span:nth-child(9) {
	transition-delay: 0.34s;
}

.load-text__1 span:nth-child(10) {
	transition-delay: 0.38s;
}

.load-text__2 span:nth-child(1) {
	transition-delay: 0.42s;
}

.load-text__2 span:nth-child(2) {
	transition-delay: 0.46s;
}

.load-text__2 span:nth-child(3) {
	transition-delay: 0.50s;
}

.load-text__2 span:nth-child(4) {
	transition-delay: 0.54s;
}

.load-text__2 span:nth-child(5) {
	transition-delay: 0.58s;
}

.load-text__2 span:nth-child(6) {
	transition-delay: 0.62s;
}

.load-text__2 span:nth-child(7) {
	transition-delay: 0.66s;
}

.load-text__2 span:nth-child(8) {
	transition-delay: 0.70s;
}

.load-text__2 span:nth-child(9) {
	transition-delay: 0.74s;
}

.load-text__2 span:nth-child(10) {
	transition-delay: 0.78s;
}

.load-text__2 span:nth-child(11) {
	transition-delay: 0.84s;
}

.load-text__2 span:nth-child(12) {
	transition-delay: 0.92s;
}

.load-text__2 span:nth-child(13) {
	transition-delay: 0.96s;
}

.load-text__2 span:nth-child(14) {
	transition-delay: 0.100s;
}

@media screen and (max-width: 768px) {
	
	.load-text {
		line-height: 1.7;
		letter-spacing: .03em;
		white-space: pre-line;
	}
	.load-text span {
		font-size: 2.3rem;
	}
}