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

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

    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 8888;

    /* ハンバーガーのラインの長さに影響 */
    padding-left: 6px;
    padding-right: 6px;
}

.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: translateY(0);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ドロワー コンテナ */
.spdrawer_container.preload {
    transition: none;
}
.spdrawer_container {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 100vh;
    transform: translateY(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;
}


/******************************************************************************
  spdrawer内コンテンツ
******************************************************************************/


/******************************************************************************
  クラスの上書き ／ bootstrapの上書き
******************************************************************************/
.spdrawer button:focus {
    outline: unset;
}

.spdrawer a,
.spdrawer a:active,
.spdrawer a:visited
{
    color: #333;
    text-decoration: none;
}
.spdrawer a:hover {
    color: #333;
    text-decoration: none;
}