Swiper実装中のサイトにハンバーガーメニューを実装したが、クリックしても何も変化がない

■■■　実現したいこと　■■■
スライドショーSwiperを設置したサイトに、768px以下でハンバーガーメニューが表示されるようにしたい。

■■■　起きている問題　■■■
実装まではできたのですが、ハンバーガーメニューをクリックしても何も起こらない（マウスをハンバーガーメニューに合わせても手のかたちにならない、つまりリンクになっていないのでクリックしても何も起こらない）。
Swiperのメインビジュアルにハンバーガーメニューが重なっている時はクリックできず、Swiperとハンバーガーメニューの重なりがないところにスクロールすればハンバーガーメニューをクリックでき、メニューも表示される。

■■■　試してみたこと　■■■
header内にメニューはすべて記述しているので、headerのz-indexの値を大きくしましたが変わりませんでした。
どなたかわかる方、ご教示お願いいたします。

※下記ファイルのほかにswiper.min.js、swiper.min.cssを読み込んでいます。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4	<title>test</title>
5	<link rel="stylesheet" href="./css/normalize.css">
6	<link rel="stylesheet" href="./css/style.css">
7	<link rel="stylesheet" href="./css/swiper.min.css">
8	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">
9</head>
10<body>
11	<header>
12		<div class="pc_menu">
13			<nav>
14				<ul>
15					<li><a href="#">menu1</a></li>
16					<li><a href="#contentA">menu2</a></li>
17					<li><a href="#contentB">menu3</a></li>
18					<li><a href="#contentC">menu4</a></li>
19					<li><a href="#contentD">menu5</a></li>
20				</ul>
21			</nav>
22		</div>
23		<div class="sp_menu"><!----- ハンバーガーメニュー ----->
24			<div class="hamburger">
25				<span></span>
26				<span></span>
27				<span></span>
28			</div>
29			<nav class="globalMenuSp">
30				<ul>
31					<li><a href="#">menu1</a></li>
32					<li><a href="#contentA">menu2</a></li>
33					<li><a href="#contentB">menu3</a></li>
34					<li><a href="#contentC">menu4</a></li>
35					<li><a href="#contentD">menu5</a></li>
36				</ul>
37			</nav>
38		</div>
39	</header>
40	<!------------------- main visual SWIPER -------------------->
41	<div class="flex_center_logotext">
42		<img src="./images/ロゴマーク.png" alt="ロゴ">
43		<h1 class="h1_font">テストサイト</h1>
44	</div>
45	<div class="swiper-container z_index1">
46		<div class="swiper-wrapper">
47			<div class="swiper-slide">
48				<div class="slide-img"><img src="./images/1600*1050の画像_01.jpg" alt="スライダー画像1"></div>
49			</div>
50			<div class="swiper-slide">
51				<div class="slide-img"><img src="./images/1600*1050の画像_02.jpg" alt="スライダー画像2"></div>
52			</div>
53			<div class="swiper-slide">
54				<div class="slide-img"><img src="./images/1600*1050の画像_03.jpg" alt="スライダー画像3"></div>
55			</div>
56			<div class="swiper-slide">
57				<div class="slide-img"><img src="./images/1600*1050の画像_04.jpg" alt="スライダー画像3"></div>
58			</div>
59		</div>
60	</div>
61<!------------------- /SWIPER -------------------->
62<!--------------------------------------------- メインコンテンツ ------------------------------------------------>
63	<main>
64		<section id="contentA">
65			コンテンツA
66		</section>
67
68		<section id="contentB">
69			コンテンツB
70		</section>
71
72		<section id="contentC">
73			コンテンツC
74		</section>
75
76		<section id="contentD">
77			コンテンツD
78		</section>
79	</main>
80	<!------------------- SWIPER -------------------->
81	<script src="./js/swiper.min.js"></script>
82	<script>
83		let swipeOption = {
84			loop: true,
85			effect: 'fade',
86			autoplay: {
87				delay: 3000,
88				disableOnInteraction: false,
89			},
90			speed: 2000,
91		}
92		new Swiper('.swiper-container', swipeOption);
93	</script>
94	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
95	<script src="./js/humm_menu_05.js"></script>
96</body>
97</html>
98

css
1@charset "UTF-8";
2
3@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
4
5
6body{
7	margin:0;
8	font-family: "Sawarabi Mincho"; 
9}
10body{
11	margin:0;
12	font-family: "Sawarabi Mincho"; 
13}
14a{
15	text-decoration:none;
16	color:#000;
17}
18header{
19
20}
21header ul{
22	list-style:none;
23	text-align:right;
24}
25header nav ul li{
26	margin:50px auto;
27	text-align:center;
28}
29.flex_center_logotext{/* ロゴとタイトル */
30	height:50vw;/**** ウィンドウ幅に合わせて高さも変える（ロゴとタイトルの位置を変更するため） ****/
31	width:83vw;
32	display:flex;
33	flex-direction:column;
34	justify-content:center;
35	align-items:center;
36    z-index:100;
37    position:absolute;
38}
39.flex_center_logotext img{
40	max-width:20%;
41}
42.h1_font{
43	font-family: 'Pinyon Script';
44	font-size:5vw;
45	margin:0;
46	padding:0;
47	color:#fff;
48}
49.swiper-container{
50	position:absolute;
51	left:0
52	top:0;
53	z-index:1;
54}
55/*.swiper-container>.swiper-wrapper>.swiper-slide>.slide-img img{/* ロゴとタイトル */
56.flex_center_swiper{
57	max-width: 100%;
58	max-height: 100%;
59	height: 90vh;
60	object-fit:cover;
61	margin:0 auto;
62}
63main{
64	width:70%;
65	padding:100px;
66}
67.sp_menu{
68	display:none;
69}
70.pc_menu{
71	display:block;
72	z-index:99;
73	width:16vw;
74	height:100vh;
75	position:fixed;
76	right:0;
77	background-color:#fff;
78}
79/*-------------------▽▽▽ コンテンツA ▽▽▽-------------------*/
80#contentA{
81	max-width:1300px;
82	height:400px;
83	margin:auto;
84}
85/*-------------------▽▽▽ コンテンツB ▽▽▽-------------------*/
86#contentB{
87	max-width:1300px;
88	height:400px;
89	margin:auto;
90}
91/*-------------------▽▽▽ コンテンツC ▽▽▽-------------------*/
92#contentC{
93	max-width:1300px;
94	height:400px;
95	margin:auto;
96}
97/*-------------------▽▽▽ コンテンツD ▽▽▽------------------*/
98#contentD{
99	max-width:1300px;
100	height:400px;
101	margin:auto;
102}
103/***********************▽▽▽ SWIPER ▽▽▽**********************/
104@keyframes zoomUp {
105  0% {
106    transform: scale(1);
107  }
108  100% {
109    transform: scale(1.3);
110  }
111}
112
113.swiper-slide-active .slide-img,
114.swiper-slide-duplicate-active .slide-img,
115.swiper-slide-prev .slide-img{
116  animation: zoomUp 7s linear 0s 1 normal both;  
117}
118
119/*imgタグだと下に隙間ができるのでblockに。*/
120
121.slide-img img{
122  display: block;
123}
124.z_index1{
125	z-index:1;
126}
127/* レスポンシブ時にもSwiperが左寄せで画像全体が表示されるようウィンドウサイズによって調整 */
128.swiper-container>.swiper-wrapper>.swiper-slide>.slide-img img{
129	width:83vw;
130}
131/***********************△△△ SWIPER △△△**********************/
132
133/*###############################################################*/
134/*####################### 768px or less #########################*/
135/*###############################################################*/
136@media screen and (max-width:768px){
137	main{
138	    width:60%;
139	}
140	.sp_menu{
141		display:block;
142
143	}
144	.pc_menu{
145		display:none;
146	}
147	.humburger>span{
148		z-index:300;
149	}
150	.globalMenuSp{
151		z-index:200;
152	}
153	.swiper-container>.swiper-wrapper>.swiper-slide>.slide-img img{
154		width:100vw;
155	}
156	.flex_center_logotext{/* ロゴとタイトル */
157		height:65vw;/**** ウィンドウ幅に合わせてSwiper高さも変える（ロゴとタイトルの位置を変更するため） ****/
158		width:100vw;/**** ウィンドウ幅に合わせてSwiper幅も変える（ロゴとタイトルの位置を変更するため） ****/
159		margin:0 auto;
160		z-index:99;
161	}
162	
163
164/*************　ハンバーガーボタン　***********/
165.hamburger {
166  display : block;
167  position: fixed;
168  z-index : 3;
169  right : 13px;
170  top   : 12px;
171  width : 42px;
172  height: 42px;
173  cursor: pointer;
174  text-align: center;
175  -webkit-transition: 0.5s all;
176  -moz-transition   : 0.5s all;
177  transition        : 0.5s all;
178}
179.hamburger span {
180  display : block;
181  position: absolute;
182  width   : 30px;
183  height  : 2px ;
184  left    : 6px;
185  background : #000;
186}
187.hamburger span:nth-child(1) {
188  top: 10px;
189}
190.hamburger span:nth-child(2) {
191  top: 20px;
192}
193.hamburger span:nth-child(3) {
194  top: 30px;
195}
196
197/* ナビ開いてる時のボタン */
198.hamburger.active{
199  -webkit-transform: rotate(360deg);
200  transform: rotate(360deg);
201}
202.hamburger.active span:nth-child(1) {
203  top : 16px;
204  left: 6px;
205  background : #fff;
206  -webkit-transform: rotate(-45deg);
207  -moz-transform   : rotate(-45deg);
208  transform        : rotate(-45deg);
209}
210.hamburger.active span:nth-child(2) {
211  top: 16px;
212  background : #fff;
213  -webkit-transform: rotate(45deg);
214  -moz-transform   : rotate(45deg);
215  transform        : rotate(45deg);
216}
217.hamburger.active span:nth-child(3) {
218  opacity: 0;
219}
220
221nav.globalMenuSp {
222  position: fixed;
223  z-index : 2;
224  top  : 0;
225  left : 0;
226  color: #fff;
227  background: rgba(0,0,0,1);
228  text-align: center;
229  width: 100%;
230  opacity: 0;
231  transition: opacity .6s ease, visibility .6s ease;
232}
233
234nav.globalMenuSp ul {
235  margin: 0 auto;
236  padding: 0;
237  width: 100%;
238}
239
240nav.globalMenuSp ul li {
241  list-style-type: none;
242  padding: 0;
243  width: 100%;
244  transition: .4s all;
245}
246nav.globalMenuSp ul li:last-child {
247  padding-bottom: 0;
248}
249nav.globalMenuSp ul li:hover{
250  background :#ddd;
251}
252
253nav.globalMenuSp ul li a {
254  display: block;
255  color: #fff;
256  padding: 1em 0;
257  text-decoration :none;
258}
259
260/* このクラスを、jQueryで付与・削除する */
261nav.globalMenuSp.active {
262  opacity: 100;
263}
264/*************　ハンバーガーボタン終わり　***********/
265}

javascript
1$(function() {
2    $('.hamburger').click(function() {
3        $(this).toggleClass('active');
4 
5        if ($(this).hasClass('active')) {
6            $('.globalMenuSp').addClass('active');
7        } else {
8            $('.globalMenuSp').removeClass('active');
9        }
10    });
11});