スマホ画面のみに現れるようにしたハンバーガーメニューが機能しない。

スマホ等細い画面にしたときにナビゲーションメニューがハンバーガーメニューになるようにしたいのですが、ハンバーガーメニューをクリックしても動作しません。原因がわかりません。
ググって様々なレスポンシブのハンバーガーメニューの実装を試しましたがどれもハンバーガーメニューが開きませんでした。
どなたかご教示お願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8    <link rel="stylesheet" href="css/destyle.css" />
9    <link rel="stylesheet" href="css/stylesheet.css" />
10    <title>ABs WebLabo</title>
11</head>
12
13<body>
14    <header class="g-navi">
15        <div class="g-navi-inner">
16            <h1 class="logo-title">
17                <a href="ABs_WebLabo_index.html">
18                    ABs WebLabo
19                </a>
20            </h1>
21            <nav class="main-menu">
22                <ul class="menu-list">
23                    <li class="selected tab-list">
24                        <a href="ABs_WebLabo_about.html" class="g-navi-tab">
25                            ABOUT
26                        </a>
27                    </li>
28                    <li class="tab-list">
29                        <a href="ABs_WebLabo_works.html" class="g-navi-tab">
30                            WORKS
31                        </a>
32                    </li>
33                    <li class="tab-list">
34                        <a href="ABs_WebLabo_contact.html" class="g-navi-tab">
35                            CONTACT
36                        </a>
37                    </li>
38                    <li class="icon-list">
39                        <img class="sns-icon" src="media/2021 Twitter logo - blue.png" href="">
40                    </li>
41                    <li class="icon-list">
42                        <img class="sns-icon" src="media/Instagram_AppIcon_Aug2017.png" href="">
43                    </li>
44                    <li class="icon-list">
45                        <img class="sns-icon" src="media/LINE_Brand_icon.png" href="">
46                    </li>
47                </ul>
48            </nav>
49            <div class="hamburger">
50                <span class="hamburger-line hamburger-line-1"></span>
51                <span class="hamburger-line hamburger-line-2"></span>
52                <span class="hamburger-line hamburger-line-3"></span>
53            </div>
54            <div class="black-bg" id="js-black-bg">
55            </div>
56        </div>
57    </header>
58
59    <div class="wrapper">
60
61    </div>
62    <script>
63        function toggleNav() {
64            var body = document.body;
65            var hamburger = document.getElementById('js-hamburger');
66            var blackBg = document.getElementById('js-black-bg');
67
68            hamburger.addEventListener('click', function () {
69                body.classList.toggle('nav-open');
70            });
71            blackBg.addEventListener('click', function () {
72                body.classList.remove('nav-open');
73            });
74        }
75        toggleNav();
76    </script>
77</body>
78
79</html>

CSS
1@charset "UTF-8";
2
3.clearfix::after {
4  content: "";
5  display: block;
6  clear: both;
7}
8
9.g-navi{
10    position: fixed;
11    top: 0;
12    z-index: 9999;
13    width: 100%;
14    box-shadow: 0 2px 6px rgba(0,0,0,.16);
15}
16.g-navi-inner{
17    font-family: Orator Std;
18    width: 87.5%;
19    max-width: 1400px;
20    height: 150px;
21    margin: auto;
22    color: #fff;
23    position: relative;
24}
25.logo-title{
26    color: black;
27    width: 122px;
28    height: 32px;
29    position: absolute;
30    top: 50px;
31    left: 36px;
32    font-size: 22px;
33}
34.g-navi .g-navi-inner .main-menu{
35    width: auto;
36    margin: auto auto auto 200px;
37}
38.main-menu{
39    text-align: right;
40}
41.menu-list{
42
43}
44ul{
45    list-style: none;
46}
47li{
48    display: list-item;
49}
50.selected{
51
52}
53.tab-list{
54    float: left;
55    width: 16.6667%;
56}
57.g-navi-tab{
58    position: relative;
59    color: black;
60    height: 80px;
61    top: 67px;
62}
63.g-navi-tab::after{
64    position: absolute;
65    bottom: -4px;
66    left: 0;
67    content: '';
68    width: 100%;
69    height: 2px;
70    background: #333;
71    transform: scale(0, 1);
72    transform-origin: left top;
73    transition: transform .3s;
74}
75.g-navi-tab:hover::after{
76    transform: scale(1,1);
77}
78.icon-list{
79    float: right;
80    width: 8.33333%;
81}
82.sns-icon{
83    width: 25px;
84    height: 25px;
85    top: 39px;
86    position: relative;
87    top: 60px;
88}
89@media only screen and (max-width: 768px) {
90    .main-menu {
91      position: fixed;
92      right: -320px; /* 右から出てくる */
93      top: 0;
94      width: 300px; /* スマホに収まるサイズ */
95      height: 100vh;
96      padding-top: 60px;
97      background-color: #fff;
98      transition: all .6s;
99      z-index: 200;
100      overflow-y: auto; /* メニューが多くなったらスクロールできるように */
101    }
102    .hamburger {
103      position: absolute;
104      right: 15px;
105      top: 8px;
106      width: 40px; /* クリックしやすい幅 */
107      height: 40px; /* クリックしやすい高さ */
108      cursor: pointer;
109      z-index: 300;
110    }
111    .menu-list {
112      margin: 0;
113      padding: 0;
114      list-style: none;
115    }
116    .tab-list {
117      text-align: center;
118      padding: 0 14px;
119    }
120    .tab-list .g-navi-tab .sns-icon{
121      display: block;
122      padding: 8px 0;
123      border-bottom: 1px solid #eee;
124      text-decoration: none;
125      color: #333;
126    }
127    .tab-list .g-navi-tab:hover .sns-icon:hover {
128      background-color: #eee;
129    }
130    .hamburger-line {
131      position: absolute;
132      left: 11px;
133      width: 18px;
134      height: 2px;
135      background-color: #333;
136      transition: all .6s;
137    }
138    .hamburger-line-1 {
139      top: 14px;
140    }
141    .hamburger-line-2 {
142      top: 20px;
143    }
144    .hamburger-line-3 {
145      top: 26px;
146    }
147    .black-bg {
148      position: fixed;
149      left: 0;
150      top: 0;
151      width: 100vw;
152      height: 100vh;
153      z-index: 100;
154      background-color: #333;
155      opacity: 0;
156      visibility: hidden;
157      transition: all .6s;
158      cursor: pointer;
159    }
160   /* 表示された時用のCSS */
161   .nav-open .main-menu {
162      right: 0;
163    }
164    .nav-open .black-bg {
165      opacity: .8;
166      visibility: visible;
167    }
168    .nav-open .hamburger-line-1 {
169      transform: rotate(45deg);
170      top: 20px;
171    }
172    .nav-open .hamburger-line-2 {
173      width: 0;
174      left: 50%;
175    }
176    .nav-open .hamburger-line-3 {
177      transform: rotate(-45deg);
178      top: 20px;
179    }
180  }/* sp */
181  
182  @media only screen and (min-width: 769px) {
183    .g-navi-inner{
184      max-width: 980px;
185      width: 100%;
186      padding: 15px 30px;
187      margin-left: auto;
188      margin-right: auto;
189    }
190    .logo-title{
191      padding: 12px 30px
192    }
193    .menu-list{
194      text-align: right;
195    }
196    .menu-list li{
197      display: inline-block;
198      text-align: right;
199      padding-left: 20px;
200    }
201    .menu-list .tab-list .icon-list .g-navi-tab .sns-icon{
202      color: #000;
203      font-weight: 600;
204    }
205  }/* pc */