/*矢印が縮む*/

.btnarrow6{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	background: #fff;
    padding: 10px 5em 10px 1em;
    display: inline-block;
    text-align: center;
    transition: all .2s linear;
    color: #000;
    text-decoration: none;
    border: #000 2px solid;
    outline: none;
    border-radius: 50px;
}

/*hoverした際のボタンの形状*/
.btnarrow6:hover{
	background:#fff;
	color:#333;
	border-color:#333;
}

/*矢印と線の形状*/

.btnarrow6:before{
	content:"";
    /*絶対配置で線の位置を決める*/
	position: absolute;
	top:50%;
	left:140px;
    /*線の形状*/
	width:20px;
	height:1px;
	background:#fff;
    transition: all .2s linear;
}

/*hoverした際の矢印の形状*/
.btnarrow6:hover::before{
	background:#333;
	left: 140px;
    width: 45px;
}

@media screen and (max-width: 920px) {
    /*hoverした際のボタンの形状*/
.btnarrow6:active{
	background:#fff;
	color:#333;
	border-color:#333;
}

/*hoverした際の矢印の形状*/
.btnarrow6:active::before{
	background:#333;
	left: 140px;
    width: 45px;
}
}