/* ドロワーのCss設定。gsr_drawer.jsと一緒に使用します */

/*-----------------
    左からスライドインするドロワーのcss
*/
.drawer-box-left {
    position: fixed;
    left: -320px; /* ドロワーの初期の隠している位置。widthの値より大きくします */
    top: 0;
    width: 300px; /* スマホに収まるくらい */
    height: 100vh;
    padding-top: 40px;
    background-color: #e9f1ed;
    transition: all .6s;
    z-index: 9999;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
/*-----------------
    左からスライドインしたドロワー以外のバックグラウンドcss
    このcssを配置する要素は id="drawer-background"とします(jsと連動)
*/
.drawer-bg {
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
}
/*-----------------
    左からスライドインした状態のドロワー
    id="drawer-btn"をクリックするとjsで設定されます。
*/
.drawer-box-left-open .drawer-box-left {
    left: 0 /* drawer-box-left の左の位置を0にして見えるようにします */
}
/*-----------------
    左からスライドインした状態のドロワー外のバックグラウンド
    id="drawer-btn"をクリックするとjsで設定されます。
*/
.drawer-box-left-open .drawer-bg {
    opacity: .8;
    visibility: visible;
}
/*-----------------
    ドロワー内にあるリスト要素
*/
.drawer-box-left li {
    background-color: #e9f1ed;
}