@media all and (max-width:900px) {
    .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-left,
    .js-hiraku-offcanvas-body-right {
        position: fixed;
        left: -70%;
        overflow-y: hidden
    }

    .js-hiraku-offcanvas-body-left {
        left: 70%
    }

    .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 {
        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-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;
        width: auto;
        background: 0 0
    }

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

    .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: #000
    }

    .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)
    }
}