/*
 * Hiraku Ver.1.0.2 (https://www.appleple.com)
 * Copyright appleple | MIT License
 *
 */

.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 !important; 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%; 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 { top: 0; left: 0; width: 100%; transition: margin-left .3s ease-in-out; position: fixed; }

@media (min-width:767px) {
.js-hiraku-header-fixed { position: inherit; }
}
.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; }
/* ŽO */
.hiraku-open-btn-line { position: relative; display: block; width: 30px; height: 3px; margin: 6px 0; transition: .1s all; border-radius: 1px; background-color: #666; }
.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: #666; }
.hiraku-open-btn-line:before { top: -6px; }
.hiraku-open-btn-line:after { bottom: -6px; }
/*menu*/
.drawerName { color: #666; }
.drawerName:before { content: 'MENU'; font-size: 10px; letter-spacing: 0; font-family: "ƒqƒ‰ƒMƒm–¾’© Pro W3", "Hiragino Mincho Pro", "‚l‚r ‚o–¾’©", "MS PMincho", serif; }
.js-hiraku-offcanvas-btn-active .drawerName:before { content: 'CLOSE'; font-size: 10px; }
[aria-expanded='true'] .hiraku-open-btn-line { background-color: transparent; }
/* X */
[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); }