.js-hiraku-offcanvas-active {
	position: fixed;
	z-index: 100001;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3)
}
.js-hiraku-offcanvas-open {
	display: block
}
.js-hiraku-offcanvas-body {
	z-index: 0;
	left: 0;
	width: 100%;
	transition: left .3s ease-in-out
}
.js-hiraku-offcanvas-body-right {
	position: fixed;
	left: -70%;
	overflow-y: hidden
}

.js-hiraku-offcanvas-body-moving {
	position: fixed;
	left: 0
}
.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
	position: fixed;
	z-index: 10002;
	top: 0;
	bottom: 0;
	display: block;
	overflow-y: scroll;
	box-sizing: border-box;
	width: 70%;
	max-width: 100%;
	background-color: #FB4454;
	-webkit-overflow-scrolling: touch
}
.js-hiraku-offcanvas:focus {
	background-color: rgba(0,0,0,.3)
}
.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right {
	right: 0;
	left: auto;
	margin-right: -70%;
	transition: margin-right .3s ease-in-out
}

.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar-right.active {
	margin-right: 0;
	transition: margin-right .3s ease-in-out
}

.js-hiraku-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: margin-left .3s ease-in-out
}
.js-hiraku-offcanvas-body-left, .js-hiraku-offcanvas-body-right {
	overflow: hidden
}
.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
	margin-left: -70%
}

.js-hiraku-offcanvas-close-btn {
	position: fixed;
	overflow: hidden;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0
}
.hiraku-open-btn {
	float: left;
	height: 40px;
	width: 30px;
	border: none;
	overflow: hidden;
	margin-right: -30px;
}
.hiraku-open-btn-line {
	position: fixed;
	display: block;
	width: 18px;
	height: 2px;
	margin: 6px 0;
	transition: .1s all;
	border-radius: 1px;
	background-color: #FFEFEF
}
.hiraku-open-btn-line:after, .hiraku-open-btn-line:before {
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	content: '';
	transition: .3s all;
	border-radius: 1px;
	background-color: #FFEFEF
}
.hiraku-open-btn-line:before {
	top: -6px
}
.hiraku-open-btn-line:after {
	bottom: -6px
}
[aria-expanded=true] .hiraku-open-btn-line {
	background-color: transparent
}
[aria-expanded=true] .hiraku-open-btn-line:after, [aria-expanded=true] .hiraku-open-btn-line:before {
	width: 22px
}
[aria-expanded=true] .hiraku-open-btn-line:before {
	-ms-transform: translate(-2px, 6px) rotate(45deg);
	transform: translate(-2px, 6px) rotate(45deg)
}
[aria-expanded=true] .hiraku-open-btn-line:after {
	-ms-transform: translate(-2px, -6px) rotate(-45deg);
	transform: translate(-2px, -6px) rotate(-45deg)
}


@media all and (min-width: 768px) {
	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
	width: 50%;
}
	.js-hiraku-offcanvas-body-right {
	left: -50%;
}
}
@media all and (min-width: 920px) {
	.js-hiraku-offcanvas-active .js-hiraku-offcanvas-sidebar {
	width: 30%;
}
	.js-hiraku-offcanvas-body-right {
	left: -30%;
}
}