html,body{ overflow-x: visible; }
.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-left {
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%;
height: 100%; 
background-color: #fff;
-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-left {
right: auto;
left: 0;
margin-left: -70%;
transition: margin-left .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-offcanvas-active .js-hiraku-offcanvas-sidebar-left.active {
margin-left: 0;
transition: margin-left .3s ease-in-out;
}
.js-hiraku-header-fixed {
display:none;
}
@media screen and (max-width: 720px) {
.js-hiraku-header-fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: margin-left .3s ease-in-out;
display: block;
}
}
.js-hiraku-offcanvas-body-right,
.js-hiraku-offcanvas-body-left {
overflow: hidden;
}
.js-hiraku-offcanvas-body-right .js-hiraku-header-fixed {
margin-left: -70%;
}
.js-hiraku-offcanvas-body-left .js-hiraku-header-fixed {
margin-left: 70%;
}
.js-hiraku-offcanvas-close-btn {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.hiraku-open-btn {
padding: 6px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 3px;
background: transparent;
} .hiraku-open-btn-line {
position: relative;
display: block;
width: 100%;
height: 3px;
margin: 6px 0;
transition: .1s all;
border-radius: 1px;
background-color: #39b500;
}
.hiraku-open-btn-line:before,
.hiraku-open-btn-line:after {
position: absolute;
display: block;
width: 100%;
height: 3px;
content: '';
transition: .3s all;
border-radius: 1px;
background-color: #39b500;
}
.hiraku-open-btn-line:before {
top: -6px;
}
.hiraku-open-btn-line:after {
bottom: -6px;
} .drawerName{ margin: 8px 0 0; color:#39b500; display: block; }
.drawerName:before{ content:'MENU'; font-weight:bold; font-size:12px;  }
.js-hiraku-offcanvas-btn-active .drawerName:before{ content:'CLOSE';  font-size:11px;  }
[aria-expanded='true'] .hiraku-open-btn-line {
background-color: transparent;
} [aria-expanded='true'] .hiraku-open-btn-line:before,
[aria-expanded='true'] .hiraku-open-btn-line:after {
width: 30px;
margin-left:5px;
}
[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);
}