@charset "utf-8";
/* CSS Document */

/* 
.ham {
	position: relative;
	width: 30px;
	height: 30px;
	cursor: pointer;
	background-color: aqua;
	z-index: 1000;
}*/
.ham_line {
	position: absolute;
	left: 5px;
	width: 20px;
	height: 1px;
	background-color: #333333;
}
.ham_line1 {
	top: 6px;
}
.ham_line2 {
	top: 14px;
}
.ham_line3 {
	top: 22px;
}
.ham_line {
	transition: all 0.3s;
}

/* 以下はすべて新規行で追加 */

.clicked .ham {
	border: 1px solid #666;
}
.clicked .ham_line1 {
	transform: rotate(45deg);
	top: 14px;
}
.clicked .ham_line2 {
	width: 0px;
}
.clicked .ham_line3 {
	transform: rotate(-45deg);
	top: 14px;
}




	.menu {
	position: fixed;
	width: 300px;
	height: 300px;
	left: -400px;
	background-color: aquamarine;
	transition: all 0.3s;
}
.clicked .menu {
	left: 8px;
	top: 0;
}