@charset "UTF-8";

/* リセット */
.drawer_button * {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	font: inherit;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	text-decoration: none;
	list-style: none;
}

/* ボタンのサイズ */
.drawer_button {
	display: block;
	padding: 0;
	width: 36px;
	height: 24px;
	position: relative;
	background: none;
	border: none;
	text-align: center;
	letter-spacing: 0.1em;
	cursor: pointer;
	outline: none;
}

/* ボタン線のサイズ */
.drawer_button .drawer_bar {
	display: block;
	width: 36px;
	height: 3px;
	transition: all 0.2s;
	transform-origin: 0% 0%;
	transform: translateY(-50%);
	position: absolute;
	left: 0;
}

.drawer_button .drawer_bar1 {
	top: 0;
}

.drawer_button .drawer_bar2 {
	top: 50%;
}

.drawer_button .drawer_bar3 {
	top: 100%;
}

/* 数字を変えたら要変更 */
.drawer_button.active .drawer_bar {
	width: 33.94px;
	left: 6px
}

/* 数字を変えたら要変更 */
.drawer_button.active .drawer_bar1 {
	transform: rotate(0.7853981633974483rad) translateY(-50%);
	top: 0px
}

.drawer_button.active .drawer_bar2 {
	opacity: 0;
}

/* 数字を変えたら要変更 */
.drawer_button.active .drawer_bar3 {
	transform: rotate(-0.7853981633974483rad) translateY(-50%);
	top: calc(100% - 0px)
}

.drawer_button.active .drawer_menu_text {
	display: none;
}

.drawer_button.active .drawer_close {
	display: block;
}

/* ボタンの文字 */
.drawer_text {
	width: 100%;
	position: absolute;
	bottom: -20px;
	left: 0;
	text-align: center;
	font-size: 10px;
}

.drawer_close {
	letter-spacing: 0.08em;
	display: none;
}

/* ボタンの色 */
.drawer_button {
	color: #000000;
}

/* ボタン線の色 */
.drawer_button .drawer_bar {
	background-color: #000000;
}

/* ボタンの配置 */
.drawer_menu .drawer_button {
	margin: 0 32px 0 auto;
	z-index: 1001;
}


/* ドロワー内リンク */
.drawer_menu a {
	color: inherit;
	text-decoration: none;
}

.drawer_menu a:visited {
	color: inherit;
}

/* オーバーレイ */
.drawer_menu .drawer_bg {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.25);
	display: none;
	top: 0;
	left: 0;
}

/* ドロワー内 */
.drawer_menu .drawer_nav_wrapper {
	width: 90%;
	max-width: 360px;
	height: 100%;
	transition: all 0.2s;
	transform: translate(360px);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	background-color: #ffffff;
}

.drawer_menu .drawer_nav_wrapper.open {
	transform: translate(0);
}

/* 左配置 */
.drawer_menu.left .drawer_button {
	right: auto;
	left: 32px;
}

/* 左配置 */
.drawer_menu.left .drawer_nav_wrapper {
	transform: translate(-360px);
	right: auto;
	left: 0;
}

/* 左配置 */
.drawer_menu.left .drawer_nav_wrapper.open {
	transform: translate(0);
}

/* ドロワー内 */
.drawer_menu .drawer_nav {
	padding: 7em 1.5em;
}

/* ドロワー内リスト */
.drawer_menu .drawer_nav li {
	display: block;
	font-size: 1em;
	margin-bottom: 1em;
}