@charset "UTF-8";

/************************************************** 
	
	Scrolldown
	
**************************************************/
.scrolldown {
	position: absolute;
	bottom: 10px;
	left: 50%;
}

.scrolldown span {
	position: absolute;
	left: 10px;
	bottom: 10px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	font-family: poppins, sans-serif;
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
}

.scrolldown:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	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: #fff;
}




/************************************************** 
	
	Bubble
	
**************************************************/
/* 見た目 */
.bubble {
	position: absolute;
	bottom: -50px;
	background-color: transparent;
	border-radius: 50%;
	pointer-events: none;
	box-shadow: inset 0 0 10px rgba(255,255,255, 0.2);
	animation: bubble 8s linear infinite;
}

/* 泡の一番明るい部分を疑似要素で表現 */
.bubble:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	transform: scale(0.25) translate(-70%, -70%);
	background: radial-gradient(rgba(255,255,255 0.5) transparent);
	border-radius: 50%;
}

/* 泡が上に浮かび上がっていくアニメーション */
@keyframes bubble {
	
	0% {
		transform: translateY(0);
		opacity: 1;
	}
	
	99% {
		opacity: 1;
	}
	
	100% {
		transform: translateY(-100vh);
		opacity: 0;
	}
}


/************************************************** 
	
	ふわっと
	
**************************************************/
.box {
	opacity: 0;
}

.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes fadeUpAnime {
	
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	
	to {
		opacity: 1;
		transform: translateY(0);
	}
}