/* scroll */
/*=== 9-1-2 丸が動いてスクロールを促す ====*/
/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:5%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: var(--color-primary);
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  font-family: var(--font-title);
  letter-spacing: 0.1em;
}

@media (max-width: 768px) {
	.scrolldown2 span{
		left:4px;
		bottom:10px;
		font-size: 12px;
		letter-spacing: 0.05em;
		letter-spacing: 0.1em;
	}
}

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

@media (max-width: 768px) {
	/* 丸の描写 */
	.scrolldown2:before {
		bottom:0;
		left:-4x;
		/*丸の形状*/
		width:12px;
		height:12px;
		background: linear-gradient(  to bottom,  var(--color-primary),  color-mix(in srgb, var(--color-primary) 23%, white));
		/*丸の動き1.6秒かけて透過し、永遠にループ*/
		animation:
			circlemove 3s ease-in-out infinite,
			cirlemovehide 3s ease-out infinite;
	}
}


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

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

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:1px;
	height: 70px;
	background:var(--color-primary);
}

@media (max-width: 768px) {
	/* 線の描写 */
	.scrolldown2:after{
		/*描画位置*/
		bottom:0;
		left:2;
		/*線の形状*/
		width:1px;
		height: 60px;
	}
}