.menu-checkbox {
 display: none;
}
.drawer-menu{
display: none;
}
@media screen and (max-width: 768px){ 
.drawer-menu{
display: block;
}
		

/* メニューボタンの装飾 */
.menu-button {
display: block;
position:absolute;
top: 10px;
right: 10px;
z-index: 200;
height: 28px;
width: 40px;
cursor: pointer;
}
.menu-button::before,
.menu-button::after {
content: '';
transition: .3s;
}
.menu-button::before,
.menu-button::after,
.menu-button span {
display: block;
position: absolute;
left: 0;
height: 3px;
width: 100%;
margin-top: -1px;
background-color: #1CA23A;
}
.menu-button::before {
  top: 0;
}
.menu-button::after {
bottom: 0;
content: 'menu';
color: #1CA23A;
}
.menu-button span {
top: 50%;
}
/* メニューボタンのアニメーション */
.menu-checkbox:checked ~ .menu-button::before {
top: 50%;
transform: rotate(45deg);

}
.menu-checkbox:checked ~ .menu-button::after {
display: none;
}
.menu-checkbox:checked ~ .menu-button span {
top: 50%;
transform: rotate(-45deg);
}

/* ドロワーメニューの装飾 */
.drawer-menu {
position: fixed;
top: 0;
left: 0;
z-index: 200;
height: 100%;
width: 250px;
transform: translateX(-100%);
transition: .5s;
background-color: #FFFFFF;
}
.drawer-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.drawer-menu li {
border-bottom: 1px dotted #00CED1;
}
.drawer-menu a {
display: block;
padding: 15px;
color: #000000;
text-decoration: none;
}
.drawer-menu a:hover{
background: rgba(0,206,209,0.83);
color: rgba(0,59,60,1.00);
}

/* ドロワーメニューの開閉 */
.menu-checkbox:checked ~ .drawer-menu {
transform: translateX(0);
}

/* ドロワーメニューの背景 */
.menu-background {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
height: 100%;
width: 100%;
background-color: rgba(0,206,209,0.24);
cursor: pointer;
}
.menu-checkbox:checked ~ .menu-background {
display: block;
}
		
	
}