/* CSS Document */

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	right: 30px;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 1px;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
    transform: translateX(-50%);
}

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

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

/* 線の描写 */
.scrolldown2:after{
    content: "";
    position: absolute;
    bottom: 26px;
    left: 50%;
    width: 1px;
    height: 80px;
    background: #eee;
    transform: translateX(-50%);
}


@media(max-width:1200px){

	.scrolldown2 {
		right: inherit;
		left: 50%;
		transform: translateX(-50%);
	}
}