/* ◆intoroduction◆ */
.intro-box{
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #fff;
	z-index: 5;
	transition: opacity 800ms 0s ease;
}
.intro-box>.inner{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}
.intro-box .main-logo{
	width: 100%;
	height: 100%;
}
.intro-box .main-logo>div{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.intro-box .main-logo>div>.l-1,
.intro-box .main-logo>div>.l-2,
.intro-box .main-logo>div>.l-3{
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.intro-box .main-logo>div>.l-1>img{
	display: block;
	max-width: 5%;
	min-width: 80px;
	padding-top: 30px;
	transform: translateY(100px);
	animation-name:introanime3;
	animation-duration:150ms;
	animation-delay: 1400ms;
	animation-timing-function:cubic-bezier(0.14, 1.15, 0.46, 1.28);
	animation-fill-mode:forwards;
}
@keyframes introanime3{
	0%{
		transform: translateY(100px);
	}
	100%{
		transform: translateY(0px);
	}
}
.intro-box .main-logo>div>.l-3{
	
}
.intro-box .main-logo>div>.l-2>img{
	display: block;
	max-width: 10%;
	min-width: 160px;
	transform: translateY(-100px);
	animation-name:introanime4;
	animation-duration:200ms;
	animation-delay: 1400ms;
	animation-timing-function:cubic-bezier(0.14, 1.15, 0.46, 1.28);
	animation-fill-mode:forwards;
}
.intro-box .main-logo>div>.l-3>div{
	display: block;
	text-align: center;
	padding-top: 2rem;
	transform: translateY(-100px);
	animation-name:introanime4;
	animation-duration:200ms;
	animation-delay: 1400ms;
	animation-timing-function:cubic-bezier(0.14, 1.15, 0.46, 1.28);
	animation-fill-mode:forwards;
}
@keyframes introanime4{
	0%{
		transform: translateY(-100px);
	}
	100%{
		transform: translateY(0px);
	}
}
.intro-box .main-logo>div>.l-3>div>.l-3-1{
	font-size: 1.2rem;
	font-weight: 500;
	color: #e6017c;
	line-height: 1em;
	text-align: center;
	margin-bottom: 0.6rem;
}
.intro-box .main-logo>div>.l-3>div>.l-3-2{
	font-size: 1.7rem;
	font-weight: 600;
	color: #e6017c;
	margin: 0;
	line-height: 1em;
}
.intro-box .main-logo>div>.l-3>div>.l-3-2>span{
	font-size: 0.8em;
}
.intro-box .line{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.intro-box .line-anime{
	display: block;
	position: absolute;
	width: 2px;
	background-color: var(--key-color);
	animation-timing-function:ease;
	animation-fill-mode:forwards;
}
.intro-box .line>.l-1{
	height: 100%;
	top: -20%;
	left: -7%;
	transform: rotateZ(45deg) translateY(-150%);
	transform-origin: left bottom;
	animation-name:introanime1;
	animation-duration:900ms;
}
.intro-box .line>.l-2{
	height: 80%;
	top: 2%;
	right: 12%;
	transform: rotateZ(45deg) translateY(-150%);
	transform-origin: right top;
	animation-name:introanime1;
	animation-duration:800ms;
	animation-delay: 200ms;
}
.intro-box .line>.l-3{
	height: 70%;
	top: -22%;
	left: 37%;
	transform: rotateZ(45deg) translateY(150%);
	animation-name:introanime2;
	transform-origin: left bottom;
	animation-duration:1000ms;
	animation-delay: 100ms;
}
.intro-box .line>.l-4{
	height: 95%;
	bottom: -6%;
    right: 44%;
	transform: rotateZ(45deg) translateY(150%);
	animation-name: introanime2;
	transform-origin: right bottom;
	animation-duration: 900ms;
	animation-delay: 300ms;
}
@keyframes introanime1{
	0%{
		transform: rotateZ(45deg) translateY(-150%);
	}
	60%{
		transform: rotateZ(45deg) translateY(150%);
	}
	61%{
		transform: rotateZ(45deg) translateY(-150%);
	}
	100%{
		transform: rotateZ(45deg) translateY(0%);
	}
}
@keyframes introanime2{
	0%{
		transform: rotateZ(45deg) translateY(150%);
	}
	60%{
		transform: rotateZ(45deg) translateY(-150%);
	}
	61%{
		transform: rotateZ(45deg) translateY(150%);
	}
	100%{
		transform: rotateZ(45deg) translateY(0%);
	}
}
@media screen and (max-width:768px){
	.intro-box .main-logo>div>.l-3>div>.l-3-1{
		font-size: 1rem;
	}
	.intro-box .main-logo>div>.l-3>div>.l-3-2{
		font-size: 1.6rem;
	}
	.intro-box .line>.l-1{
		top: 0%;
		left: -6%;
	}
	.intro-box .line>.l-2{
		top: -11%;
		right: 5%;
	}
	.intro-box .line>.l-3{
		height: 72%;
		top: -38%;
		left: 31%;
	}
	.intro-box .line>.l-4{
		bottom: 9%;
		right: 37%;
	}
}