@charset "utf-8";
/* CSS Document */
.arrow{
	width: 38px;
    height: 7px;
    display: block;
    opacity: 1;
}
.arrow::after{
	width: 100%;
    height: 0;
    border-bottom: 1px solid #1a1a1a;
    position: absolute;
    top: 3px;
    left: 0;
    content: "";
    display: block;
    opacity: 1;
}
.arrow img{
	position: absolute;
    display: block;
    right: 0;
    width: 7px;
    height: 7px;
	top: 0;
    z-index: 100;
}
.arrow2{
	width: 50px;
    height: 7px;
    display: block;
	position: relative;
    opacity: 1;
	margin-top: 20px;
	transition: .5s ease;	
}
.arrow2:hover{
	transform: translate(30%,0);
}
.arrow2::after{
	width: 100%;
    height: 0;
    border-bottom: 1px solid #1a1a1a;
    position: absolute;
    top: 3px;
    left: 0;
    content: "";
    display: block;
    opacity: 1;
}
.arrow2 svg{
	position: absolute;
    display: block;
    right: 0;
    width: 7px;
    height: 7px;
	top: 0;
    z-index: 100;
}
/* smartPhone */
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/
.arrow{
	width: 0px;
}
.arrow2{
	display: none;
}
}