@charset "UTF-8";

#btn-check {
	display: none;
}
/*
#sidebar div {
	padding: 16px;
}
*/

@media (max-width: 640px) {
/* ボタンのデザイン */
.css-btn {
	position: fixed;
	top: 8px;
	right: 8px;
	display: flex;
	height: 48px;
	width: 48px;
	align-items: center;
	justify-content: center;
	z-index: 2;
	background-color: #006600;
}
.css-btn span,
.css-btn span:before,
.css-btn span:after {
	content: '';
	position: absolute;
	display: block;
	height: 3px;
	width: 24px;
	border-radius: 3px;
	background-color: #ffffff;
}
.css-btn span:before {
	bottom: 8px;
}
.css-btn span:after {
	top: 8px;
}
/* 三本線のデザイン */
#btn-check:checked ~ .css-btn span {
	background-color: rgba(255, 255, 255, 0);
}
#btn-check:checked ~ .css-btn span::before {
	bottom: 0;
	transform: rotate(45deg);
}
#btn-check:checked ~ .css-btn span::after {
	top: 0;
	transform: rotate(-45deg);
}
/* メニュー部分 */
#sidebar {
	position: fixed;
	top: 0;
	right: 100%;
	/*(左から右へ top: 0; right: 100%;)*/
	/*(下から上へ top: 100%; left: 0;)*/
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: #ffffff;
	transition: all 0.25s;/*アニメーション設定(0.5s)*/
	overflow: auto;
}
#btn-check:checked ~ #sidebar {
	right: 0;
	/*(左から右へ right: 0;)*/
	/*(下から上へ top: 0;)*/
}
}