ハンバーガーメニューを閉じるときのボタンが押せない

###【前提・実現したいこと】
ハンバーガーアイコンをクリックしてドロワーメニューを開いた後、
ハンバーガーアイコンをクリックしてドロワーメニューを閉じたい。

###【発生している問題・エラーメッセージ】
ハンバーガーアイコンをクリックしてドロワーメニューを開いた後、
ハンバーガーアイコンをクリック出来ないためドロワーメニューが閉じません。

###【該当のソースコード】
(html)

html
1<!DOCTYPE html>
2<html lang="ja" prefix="og: サイトURL#">
3
4<head>
5  <meta charset="UTF-8" />
6  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7  <title>サイトタイトル</title>
8  <meta name="description" content="" />
9  <!--PC：１２０文字以内 スマホ：70文字以内-->
10  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
12  <link rel="preconnect" href="https://fonts.gstatic.com">
13  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
14  <link rel="stylesheet" href="./css/reset.css">
15  <link rel="stylesheet" href="./css/animate.css">
16  <link rel="stylesheet" href="./css/style.css">
17</head>
18
19
20<body>
21
22  <!--============================================
23                  # header
24  ==============================================-->
25  <header id="header" class="header">
26    <div class="inner header__inner"></div>
27    <div class="header-nav">
28      <ul>
29        <li><a href="#news">News</a></li>
30        <li><a href="#service">Service</a></li>
31        <li><a href="#results">Results</a></li>
32        <li><a href="#price">Price</a></li>
33        <li><a href="#comments">Comments</a></li>
34        <li><a href="#qa">FAQs</a></li>
35        <li><a href="#contact">Contact</a></li>
36      </ul>
37      <div class="header-sp">
38        <h2 class="header-sp-text">Sample Corp.</h2>
39      </div>
40    </div>
41
42    <!--hamburgerボタンー-->
43    <div class="hamburger-btn"><span></span></div>
44  </header>
45  
46
47  <!--hamburgerメニュー-->
48  <div class="hamburger-back"></div>
49  <nav class="hamburger">
50    <ul class="hamburger__lists">
51      <li class="hamburger__list">
52        <a class="hamburger__link" href="#news">news</a>
53      </li>
54      <li class="hamburger__list">
55        <a class="hamburger__link" href="#service">service</a>
56      </li>
57      <li class="hamburger__list">
58        <a class="hamburger__link" href="#results">results</a>
59      </li>
60      <li class="hamburger__list">
61        <a class="hamburger__link" href="#price">price</a>
62      </li>
63      <li class="hamburger__list">
64        <a class="hamburger__link" href="#comments">comments</a>
65      </li>
66      <li class="hamburger__list">
67        <a class="hamburger__link" href="#qa">FAQS</a>
68      </li>
69      <li class="hamburger__list">
70        <a class="hamburger__link" href="#contact">contact</a>
71      </li>
72    </ul>
73  </nav>
74
75 <script src="./js/drawer.js"></script>
76</body>
77</html>
78

css
1@charset "UTF-8";
2
3.header {
4  height: 83px;
5  line-height: 83px;
6  background-color: rgba(255, 255, 255, 0.1);
7  position: fixed;
8  top: 0;
9  // right: 0;
10  width: 100%;
11  // z-index: 40;
12  // &.is-checker{
13  //   visibility: hidden;
14  //   z-index: 30;
15  // }
16  @include mq(sp) {
17    line-height: 1.6;
18    z-index: 30;
19  }
20}
21
22// *{
23//   outline: 1px solid;
24// }
25
26.header-nav {
27  ul {
28    display: flex;
29    justify-content: center;
30    li {
31      margin-right: 40px;
32      font-family: "Montserrat", sans-serif;
33      &:last-child {
34        margin-right: 0;
35      }
36      a {
37        font-weight: bold;
38        position: relative;
39
40        &::after{
41          content: "";
42          position: absolute;
43          display: block;
44          width: calc(100% + 10px);
45          height: 1px;
46          background-color: #707070; 
47          bottom: -5px; 
48          left: -5px;
49          display: none;
50        }
51        &:hover{
52          &::after{
53
54            display: block;
55          }
56        }
57      }
58    }
59    @include mq(sp) {
60      display: none;
61    }
62  }
63  @include mq(sp) {
64    padding: 0;
65  }
66}
67
68.header-sp {
69  display: none;
70  font-size: 29px;
71  position: fixed;
72  margin-top: 16px;
73  margin-left: 20px;
74  @include mq(sp) {
75    display: block;
76  }
77}
78.header-sp-text {
79  font-weight: bold;
80  @include mq(sp) {
81    font-size: 28px;
82  }
83}
84/*============================================
85                hamburger
86==============================================*/
87
88.hamburger-btn {
89  width: 50px;
90  height: 50px;
91  position: relative;
92  position: fixed;
93  top: 15px;
94  right: 30px;
95  transition: all 0.5s ease 0s;
96  cursor: pointer;
97  display: none;
98  z-index: 40;
99  @include mq(sp){
100    display: block;
101  }
102
103  span {
104    position: absolute;
105    background-color: $color-main;
106    border-radius: 4px;
107    display: block;
108    width: 84%;
109    height: 16%;
110    left: 50%;
111    top: 50%;
112    margin: -8% 0 0 -42%;
113    transition: all 0.5s ease 0s;
114
115    &::before,
116    &::after {
117      content: "";
118      position: absolute;
119      border-radius: 4px;
120      display: block;
121      width: 100%;
122      height: 100%;
123      top: 50%;
124      left: 50%;
125      margin: -8% 0 0 -50%;
126      background-color: $color-main;
127    }
128    &::before {
129      margin-top: -38%;
130    }
131    &::after {
132      margin-top: 19%;
133    }
134  }
135}
136
137// .is-chekerが付いた時
138.hamburger-btn {
139  &.is-checker {
140    right: 75%;
141    // z-index: 100;
142    // @include mq(sp){
143      
144    //   display: block;
145    // }
146
147    span {
148      background-color: transparent;
149      &::before,
150      &::after {
151        content: "";
152        display: block;
153        height: 100%;
154        left: 50%;
155        margin: -8% 0 0 -42%;
156        position: absolute;
157        top: 50%;
158        width: 100%;
159        background-color: #fff;
160      }
161      &::before{
162        transform: rotate(45deg);
163        transition: all 0.5s ease 0s;
164        
165      }
166      &::after{
167        transform: rotate(-45deg);
168        transition: all 0.5s ease 0s;
169      }
170    }
171  }
172}
173
174.hamburger-back {
175  display: none;
176  background-color: #000;
177  position: fixed;
178  top: 0;
179  width: 100%;
180  height: 100%;
181  z-index: 38;
182  opacity: 0;
183  &.is-checker {
184    opacity: 0.5;
185    display: block;
186  }
187}
188
189.hamburger {
190  z-index: map-get($layer, "drawer");
191  position: fixed;
192  width: 70%;
193  top: 0;
194  background-color: rgba(224, 226, 226, 1);
195  right: 0;
196  height: 100%;
197  font-size: 20px;
198  transition: all 0.5s ease 0s;
199  transform: translateX(105%);
200  &.is-checker {
201    transform: translateX(0);
202  }
203}
204
205
206.hamburger__lists {
207  text-align: center;
208  margin-top: 100px;
209}
210
211.hamburger__list {
212  padding-top: 20px;
213  padding-bottom: 20px;
214}
215

jquery
1$(".hamburger-btn").click(function(){
2  $(".header").toggleClass("is-checker");
3  $(".hamburger").toggleClass("is-checker");
4  $(".hamburger-back").toggleClass("is-checker");
5  $(".hamburger-btn").toggleClass("is-checker");
6  return false;
7});

###【自分で調べたことや試したこと】
おそらく、ドロワーメニューを開いた時に現れる、背景の暗い画面とドロワーメニューの下に（z-index）来てしまっているので見えているけどクリック出来ないのだとは思ったのですが、z-indexを変更してもクリック出来ないままです。

###【使っているツールのバージョンなど補足情報】
windows10を使用。
vscode
###【ここにより詳細な情報を記載してください】