.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
    right:0;
    left:auto;
    min-height:100vh;
    transform:translateX(100%)
}

.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-left {
    left:0;
    right:auto;
    min-height:100vh;
    transform:translateX(-100%)
}

.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right,
.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-left {
    display:block;
    width:70%;
    z-index:10002;
    position:fixed;
    top:0;
    max-width:100%;
    background-image: url(../imgs/bkgr/white_00113.jpg); 
    overflow-y:scroll;
    box-sizing:border-box
}

.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-left {
    left:0
}

.js-hiraku-offcanvas-body-active .js-hiraku-offcanvas-sidebar-right {
    right:0
}

.js-hiraku-offcanvas-open {
    display:block
}

.js-hiraku-offcanvas-body {
    width:100%;
    transition:transform 0.3s ease-in-out;
    z-index:0
}

.js-hiraku-offcanvas:focus {
    background-color:rgba(0,0,0,0.3)
}

.js-hiraku-offcanvas-body-right,.js-hiraku-offcanvas-body-left {
    overflow:hidden
}

.js-hiraku-offcanvas-body-right {
    overflow-y:hidden;
    transform:translateX(-70%)
}

.js-hiraku-offcanvas-body-left {
    overflow-y:hidden;
    transform:translateX(70%)
}

.js-hiraku-offcanvas {
    transition:opacity 0.3s ease-in-out
}

.js-hiraku-offcanvas-body [aria-hidden=false]+.js-hiraku-offcanvas,
.js-hiraku-offcanvas-body [aria-hidden=false]+.js-hiraku-offcanvas {
    display:block;
    position:fixed;
    top:0;
    z-index:100001;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.3);opacity:0
}

.js-hiraku-offcanvas-body-right [aria-hidden=false]+.js-hiraku-offcanvas,
.js-hiraku-offcanvas-body-left [aria-hidden=false]+.js-hiraku-offcanvas {
    opacity:1
}

.js-hiraku-offcanvas-body-right .js-hiraku-offcanvas {
    right:0
}

.js-hiraku-offcanvas-body-left .js-hiraku-offcanvas {
    left:0
}

.js-hiraku-offcanvas-close-btn {
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    overflow:hidden;
    clip:rect(0 0 0 0)
}

.js-hiraku-fixed {
    z-index:1000
}

.js-hiraku-offcanvas-body-ie .js-hiraku-offcanvas-sidebar-right,
.js-hiraku-offcanvas-body-ie .js-hiraku-offcanvas-sidebar-left,
.js-hiraku-offcanvas-body-ie .js-hiraku-fixed {
    transition:transform 0.3s ease-in-out
}

.hiraku-open-btn {
    background:transparent;
    border:1px solid #ccc;
    padding:6px;
    cursor:pointer;
    border-radius:3px
}

.hiraku-open-btn-line {
    display:block;
    position:relative;
    width:24px;
    height:2px;
    margin:6px 0;
    background-color:#111;
    border-radius:1px;
    transition:.1s all
}

.hiraku-open-btn-line:before,.hiraku-open-btn-line:after {
    content:"";
    display:block;
    position:absolute;
    background-color:#111;
    width:100%;
    height:2px;
    border-radius:1px;transition:.3s all
}

.hiraku-open-btn-line:before {
    top:-8px;
}

.hiraku-open-btn-line:after {
    bottom: -8px;
}

[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:22px
}

[aria-expanded="true"] 

.hiraku-open-btn-line:before {
    transform:translate(-2px, 8px) rotate(45deg)
}

[aria-expanded="true"] 

.hiraku-open-btn-line:after {
    transform:translate(-2px, -8px) rotate(-45deg)
}