@charset "utf-8";
/*
.scrolldown4{
position:absolute;
left:45%;
bottom:10px;
animation: arrowmove 1s ease-in-out infinite;
}
*/


.scrolldown4{
position: absolute;
right:30px;
animation: arrowmove 2s ease-in-out infinite;
z-index: 99
}

/*下からの距離が変化して全体が下→上→下に動く*/

@keyframes arrowmove{
0%{bottom:1px;}
50%{bottom:28px;}
100%{bottom:1px;}
}
.scrolldown4 span{
position: relative;
left: 0;
top:50px;
color: #ccc;
font-size: 0.6875rem;
font-weight: bold;
letter-spacing: 0.05em;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
padding-bottom: 4.17vw;/*80px*/
}
.scrolldown4:before {
content: "";
position: absolute;
bottom: -73px;
left:5px;
width: 1px;
height: 15px;
background: #ccc;
transform: skewX(-31deg);
margin-bottom: 4.17vw;/*80px*/

}

.scrolldown4:after{
content: "";
position: absolute;
bottom: -74px;
left: 0;
width: 1px;
height: 70px;
background: #ccc;
margin-bottom: 4.17vw;/*80px*/

}


/*@media screen and (max-width:1380px) {
.scrolldown4:before {
left: 46%;
}
}*/



/*========= レイアウトのためのCSS ===============*/

@media screen and (max-width:599px) {
.scrolldown4{
display: none;
}
}