@media screen and (max-width: 768px) {
    .drawer--right.drawer-open .drawer-hamburger{
      background: #FFF; /* ドロワーの閉じるボタンの背景 */
    }
}

.drawer-nav {
    position:fixed;
    z-index:2;
    top:0;
    overflow:hidden;
    width:16.25rem; /* ドロワーの横幅 */
    height:100%;
    color:#cccccc; /* ドロワーの一行目見出しの色？？？？？ */
    background-color:#ffffff; /* ドロワーの背景色 */
}

.drawer-menu{margin:0;padding:0;list-style:none}

.drawer-menu-item { /* ドロワー内メニュー項目 */
    font-size:1rem;
    display:block;
    padding:.1rem; /* ドロワー内メニューの行間(ここ以外にもある) */
    padding-right: 90px;
    text-decoration:none;
    color:#222; /* スマホ時ドロワー内の文字色 */
    font-weight: bold;
}

@media screen and (min-width: 769px) {
    .drawer-menu-item { /* PC時メニューの文字色 */
    font-size:0.9rem;
        color:#ffffff;
    }
}

.drawer-menu-item:hover{ /* PC時メニューのhover時 */
    text-decoration:underline;
    color:#222;
    background-color:transparent;
}

.drawer-overlay{position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,.2)}

.drawer-open .drawer-overlay{display:block}

.drawer--top .drawer-nav{top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)}

.drawer--top.drawer-open .drawer-nav{top:0}

.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{right:0}
.drawer--left .drawer-nav{left:-16.25rem;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)}
.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-nav,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{left:0}

.drawer--left.drawer-open .drawer-hamburger{left:16.25rem}

.drawer--right .drawer-nav{right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)}
.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{right:0}
.drawer--right.drawer-open .drawer-hamburger{right:16.25rem}
.drawer-hamburger{position:fixed;z-index:4;top:0;display:block;box-sizing:content-box;width:2rem;padding:0;padding:18px .75rem 30px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);-webkit-transform:translateZ(0);transform:translateZ(0);border:0;outline:0;background-color:transparent}
.drawer-hamburger:hover{cursor:pointer;background-color:transparent}
.drawer-hamburger-icon{position:relative;display:block;margin-top:10px}

.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
    width:100%;height:2px;
    -webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
    transition:all .6s cubic-bezier(.19,1,.22,1);
    background-color:#cfcfcf; /* ハンバーガーの色 */
}

.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
    position:absolute;top:-10px;left:0;content:' ';
}

.drawer-hamburger-icon:after{top:10px}

.drawer-open .drawer-hamburger-icon{background-color:transparent}

.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{top:0}

.drawer-open .drawer-hamburger-icon:before{
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after{
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

/*
.sr-only{
    position:absolute;
    overflow:hidden;
    clip:rect(0,0,0,0);
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0
}
*/