header .hanbaga_menu{
    position: absolute;
    top:20px;
    right: 20px;
    z-index: 30;
    width: 50px;
    height:50px;
}
header .hanbaga {
    position: relative;
    background-color: #626b71;
    cursor: pointer;
    width: 50px;
    height:50px;
   border-radius: 5px;
}
header .hanbaga span{
    display: inline-block;
    transition:all .4s;
    position: absolute;
    left:14px;
    height:2px;
    border-radius: 5px;
    background:#fff;
    width:45%;
}

header .hanbaga span:nth-of-type(1){
    top:13px;

}
header .hanbaga span:nth-of-type(2){
    top:19px;
    
}
header .hanbaga span:nth-of-type(3){
    top:25px;
    
}
header .hanbaga span:nth-of-type(3)::after{
    content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-2px;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
    
}
header .hanbaga.active span:nth-of-type(1){
    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
} 
header .hanbaga.active span:nth-of-type(2){
    opacity: 0;
} 
header .hanbaga.active span:nth-of-type(3){
    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
} 
header .hanbaga.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
	top:5px;
	left:4px;
}
@media(min-width:768px){
    header .hanbaga_menu {
       display: none;
    }
}