.nav_sp{
    position: relative;
    z-index:10 ;
}
.nav_sp .hambager{
    position: relative;
    background-color: #626b71;
    cursor: pointer;
    width: 50px;
    height:50px;
   border-radius: 5px;
   position: absolute;
   /* top:50%; */
    right: 0;
    transform: translate(-50%);
   z-index: 20;
}
.nav_sp .hambager span{
    display: inline-block;
    transition:all .4s;
    position: absolute;
    left:14px;
    height:2px;
    border-radius: 5px;
    background:#fff;
    width:45%;
}
.nav_sp .hambager span:nth-of-type(1){
    top:18px;
}
.nav_sp .hambager span:nth-of-type(2){
    top:24px;
}
.nav_sp .hambager span:nth-of-type(3){
    top:30px;
}
.nav_sp .hambager span:nth-of-type(3)::after{
    content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:10px;
    left: 50%;
    transform: translate(-50%, -50%);
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}



.nav_sp .hambager.active span:nth-of-type(1){
    top:19px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.nav_sp .hambager.active span:nth-of-type(2){
    opacity: 0;
}
.nav_sp .hambager.active span:nth-of-type(3){
    top:31px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}
.nav_sp .hambager.active span:nth-of-type(3)::after{
    content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:5px;
	left:4px;
}