.spdrawer {
/*
*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

/* ドロワーボタン */
.spdrawer_toggle {
    width: 48px;
    height: 50px;
  
    background-color: transparent;
    border-color: transparent;

    position: fixed;
    top: 0;
    right: 20px;
    z-index: 9999;
}

.spdrawer_toggle span {
    width: 100%;
    height: 1px;
    background-color: #000;
    position: relative;
    transition: ease .4s;
    display: block;
}
.spdrawer_toggle span:nth-child(1) {
    top: 0;
}
  
.spdrawer_toggle span:nth-child(2) {
    margin: 8px 0;
}
  
.spdrawer_toggle span:nth-child(3) {
    top: 0;
}

/* ドロワーボタンクリック後 */
.spdrawer_toggle.active span:nth-child(1) {
    top: 5px;
    transform: rotate(45deg);
}

.spdrawer_toggle.active span:nth-child(2) {
    opacity: 0;

}

.spdrawer_toggle.active span:nth-child(3) {
    top: -13px;
    transform: rotate(-45deg);
}

.spdrawer_container.active {
    transform: translateX(0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ドロワー コンテナ */
.spdrawer_container.preload {
    transition: none;
}
.spdrawer_container {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 100vh;
    transform: translateX(100%);
    background-color: #fff;
    transition: ease .4s;
    z-index: 901;
}

/* ドロワー オーバーレイ */
.spdrawer_overlay {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
}

.spdrawer.active .spdrawer_overlay {
    display: block;
}