/*scrollreveal_pattern*/

/*========= スクロールダウンのためのCSS ===============*/
/*スクロールダウン全体の場所*/
.scrolldown {
	/*描画位置*/
	position:absolute;
	right: 20px;
	bottom: 8vh;
	/*全体の高さ*/
	height:100px;
	z-index: 2;
}

/*Scrollテキストの描写*/
.scrolldown span {
	/*描画位置*/
	position: absolute;
	left:0;
	top: 0;
	content: "";
	/*描画位置*/
	top: 0;
	/*線の形状*/
	width: 1px;
	height: 100px;
	background: #A5DEFF;
}

/* 線の描写 */
.scrolldown::after{
	content: "";
	/*描画位置*/
	position: absolute;
	top: 60px;
	/*線の形状*/
	width: 1px;
	height: 100px;
	background: #0655A4;
	/*線の動き1.4秒かけてループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height:0;
		top: 0;
		opacity: 0;
	}
	30%{
		height: 60px;
		opacity: 1;
	}
	100%{
		height:0;
		top: 100px;
		opacity: 0;
	}
}
/*========= スクロールアップのためのCSS ===============*/
/*スクロールアップ全体の場所*/
.scrollup {
	/*描画位置*/
	position:absolute;
	right: 20px;
	bottom: 60px;
	/*全体の高さ*/
	height: 60px;
	z-index: 999999;
}

/*Scrollテキストの描写*/
.scrollup span {
	/*描画位置*/
	position: absolute;
	right: -1px;
	bottom: 0;
	content: "";
	/*線の形状*/
	width: 1px;
	height: 100px;
	background: #A5DEFF;
}

/* 線の描写 */
.scrollup::after{
	content: "";
	/*描画位置*/
	position: absolute;
	/*線の形状*/
	width: 1px;
	height: 60px;
	background: #0655A4;
	/*線の動き1.4秒かけてループ*/
	animation: pathmove2 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove2{
	0%{
		height:0;
		bottom: 0;
		opacity: 0;
	}
	30%{
		height: 60px;
		opacity: 1;
	}
	100%{
		height:0;
		bottom: 100px;
		opacity: 0;
	}
}