.menu-ani-button{
	cursor: pointer;
	position: absolute;
	width:40px;/*---線の長さ---*/
	height:36px;/*---線の太さ長さによって調整---*/
	margin-top:3px;
}
.bar,.bar:before,.bar:after{
	height: 4px;/*---線の太さ---*/
	border-radius:3px;
	width: 100%;
	background-color:#ce323a;
	transition: all .25s;
	position: absolute;
}
.bar {
	left: 0;
	top: 10px;
}
.bar:before {
	content: "";
	left: 0;
	top: -12px;
}
.bar:after {
	content: "";
	left: 0;
	top: 12px;
}

.menu-animated .bar {
	background-color: transparent;
	transition: all .25s;
}
.menu-animated .bar:before {
	transition: all .25s;
	content: "";
	transform: rotate(45deg);
	top: 0px;
}
.menu-animated .bar:after {
	transition: all .25s;
	content: "";
	transform: rotate(-45deg);
	top: 0px;
}

@media screen and (max-width:650px){
	.menu-ani-button{
		cursor: pointer;
		position: absolute;
		right:12px;
		width:30px;/*---線の長さ---*/
		height:25px;/*---線の太さ長さによって調整---*/
		margin-top:5px;
	}
	.bar,.bar:before,.bar:after{
		height: 3px;/*---線の太さ---*/
		border-radius:3px;
		width: 100%;
		background-color: #ce323a;
		transition: all .25s;
		position: absolute;
	}
	.bar {
		left: 0;
		top: 10px;
	}
	.bar:before {
		content: "";
		left: 0;
		top: -10px;
	}
	.bar:after {
		content: "";
		left: 0;
		top: 10px;
	}
}