@charset "utf-8";


/*--------------------------------------
	Other Parts
---------------------------------------*/

.index-hero { 
	width: 100%;
	height: 100svh;
	position: relative;
	overflow: hidden;

	&::before{
		content: "";
		width: 100%;
		height: 100svh;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		left: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 2;
	}
	
	.hero-img{
		padding-bottom: env(safe-area-inset-bottom);
		background: url(../img/KV.png) top center no-repeat;
		background-size: cover;
		transform-origin: center;
		position: fixed;
		width: 100%;
    height: 100vh;
		z-index: 1;
	}

	/**/
	.hero-message{
		position: absolute;
		top: 10%;
		left: 0;
		z-index: 3;
		background: #0033ab;
		color: #fff;
		padding: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem);
		width: 50%;

		@media screen and (max-width: 960px) {
			width: 90%;
		}

		.logo{
			max-width: 300px;
			@media screen and (max-width: 767px) {
				max-width: 200px;
			}
		}
		&.is-animate .logo {
			animation: logo-anim 2.0s ease-out 0.0s forwards;
		}

		.hero-text01{
			font-size: clamp(2.5rem, 1.62rem + 3.76vw, 5rem); /* 40 - 80 */
			font-weight: 300;
			margin: clamp(1.5rem, 1.148rem + 1.5vw, 2.5rem) 0;
			transform:translateX(-20px);
			opacity:0;
		}
		&.is-animate .hero-text01 {
			animation: hero-text01-anim 0.8s ease-out 0.6s forwards;
		}

		.hero-text02{
			font-size: clamp(2rem, 1.648rem + 1.5vw, 3rem); /* 32 - 40 */
			margin-bottom: 0;
			transform:translateX(-20px);
			opacity:0;
		}
		&.is-animate .hero-text02 {
			animation: hero-text02-anim 0.8s ease-out 0.8s forwards;
		}

		.hero-element{
			font-size: 540%; /*8.64rem*/
			width: 0.72em;
			aspect-ratio: 4 / 1;
			background: #fff;
			transform:translateX(-10px);
			opacity:0;

			@media screen and (max-width: 768px) {
				font-size: 2.0vw;
				width: 4em;
			}
		}
		&.is-animate .hero-element {
			animation: hero-element-anim 0.3s ease-out 0.7s forwards;
		}		
	}
}

@keyframes logo-anim {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1.0;
	}
}

@keyframes hero-text01-anim {
	0% {
		transform:translateX(-20px);
		opacity:0;
	}
	100% {
		transform:translateX(0);
		opacity:1.0;
	}
}

@keyframes hero-text02-anim {
	0% {
		transform:translateX(-20px);
		opacity:0;
	}
	100% {
		transform:translateX(0);
		opacity:1.0;
	}
}

@keyframes hero-element-anim {
	0% {
		transform:translateX(-10px);
		opacity: 0;
	}
	100% {
		transform:translateX(0);
		opacity: 1.0;
	}
}


/* ------------------------ 
	scrolldown
------------------------ */
.scrolldown{
	position: fixed;
	bottom: 40px;
	left: 50%;
	z-index: 2;
}
/*Scrollテキストの描写*/
.scrolldown span{
	/*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
	/*テキストの形状*/
	color: #fff;
	font-size: .8rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom:0;
	left:-4px;
	/*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#eee;
	/*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
			0%{bottom:45px;}
		100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
			0%{opacity:0}
		50%{opacity:1;}
		80%{opacity:0.9;}
	100%{opacity:0;}
}

/* 線の描写 */
.scrolldown:after{
	content:"";
		/*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
		/*線の形状*/
	width:2px;
	height: 50px;
	background:#eee;
}

/*
 main
--------------------------------------------------------------------------*/
.main{
	position: relative;
	background: #fff;
	z-index: 3;
}
@media (max-width: 767px) {
}


/*
 footer
--------------------------------------------------------------------------*/
.l-footer{
	position: relative;
	background: #0d2155;
	color: #fff;
	z-index: 3;
}
.l-footer .l-container{
	padding: 2% 15px;
}
.l-footer p{
	margin: 0;
}
@media (max-width: 767px) {
	.l-footer{
	}
	.l-footer .l-container{
		padding: 20px 15px;
	}
}


.mainvisual{
	display: none;
}