縦書き、横スクロールのページに固定で右上にハンバーガーメニューを設置したい

前提・実現したいこと

縦書き、右から左への横スクロールのページに固定で右上にハンバーガーメニューを設置したいのですが、iOSで正しく表示されません。
PCでは正しく表示されます。
ページを開いてすぐはボタンをクリックしナビゲーションを表示できるのですが、スクロールすると、ボタンは表示されているのですが、クリックしても反応しません。
よろしくお願いいたします。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
6<title>無題ドキュメント</title>
7<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
8</head>
9
10<style>
11body {
12	background-color: black;
13	writing-mode: vertical-rl;
14}
15.nav-wrap {
16	position: fixed;
17	top: 0;
18	right: 0;
19	height: 100vh;
20height: calc(var(--vh, 1vh) * 100);
21	right: 0;
22	padding: 0 20px 30px 30px;
23	margin-right: 0;
24	flex-direction: row;
25	justify-content: space-between;
26	display: flex;
27}
28.nav-wrap.open {
29	height: 100vh;
30height: calc(var(--vh, 1vh) * 100);
31	color: #ac5d38;
32	background-color: rgba(0, 0, 0, 0.3);
33	display: flex !important;
34	z-index: 40;
35}
36.nav-wrap.close {
37	display: none;
38}
39.nav-button, .nav-button span {
40	display: inline-block;
41	transition: all 0.4s;
42	box-sizing: border-box;
43}
44.nav-button {
45	z-index: 9999;
46	position: fixed;
47	width: 60px;
48	height: 60px;
49	right: 0;
50	top: 0;
51	cursor: pointer;
52	display: block;
53	padding: 30px;
54}
55.nav-button span {
56	position: absolute;
57	left: 0;
58	width: 30px;
59	height: 2px;
60	background-color: brown;
61	z-index: 9999;
62	cursor: pointer;
63}
64.nav-button span:nth-of-type(1) {
65	top: 20px;
66}
67.nav-button span:nth-of-type(2) {
68	top: 33px;
69}
70.nav-button span:nth-of-type(3) {
71	bottom: 12px;
72}
73.nav-button.active span:nth-of-type(1) {
74	-webkit-transform: translateY(10px) rotate(-45deg);
75	transform: translateY(10px) rotate(-45deg);
76}
77.nav-button.active span:nth-of-type(2) {
78	opacity: 0;
79}
80.nav-button.active span:nth-of-type(3) {
81	-webkit-transform: translateY(-15px) rotate(45deg);
82	transform: translateY(-15px) rotate(45deg);
83}
84.drawer-menu {
85	margin-top: 45vh;
86	padding: 0;
87	list-style: none;
88	text-align: right;
89	-ms-writing-mode: tb-rl;
90	writing-mode: horizontal-tb;
91	direction: ltr;
92}
93.drawer-menu-item {
94	font-size: 1rem;
95	display: block;
96	padding: .75rem;
97	text-decoration: none;
98	color: #ac5d38;
99	font-family: 'Open Sans', sans-serif;
100	-webkit-text-combine: horizontal;
101	-ms-text-combine-horizontal: all;
102	text-combine-upright: all;
103}
104.box {
105	background-color: black;
106	height: 100vh;
107height: calc(var(--vh, 1vh) * 100);
108	display: flex;
109	flex-direction: column;
110	color: white;
111}
112.section {
113	width: 100vw;
114	height: 100vh;
115height: calc(var(--vh, 1vh) * 100);
116}
117</style>
118<body>
119<main role="main"> 
120<div class="box">
121    <div  class="top section" id="top">
122      <div class="top_bg"> top </div>
123    </div>
124    <div  class="concept section" id="concept"> <a href=""  class="anchor"></a>
125      <div class="concept_bg"> concept </div>
126    </div>
127    <div  class="products section"> <span class="anchor" id="products"></span> products </div>
128    <div class="shop section" > <span class="anchor" id="shop"></span> shop </div>
129    <div class="section" > <span class="anchor" id="about"></span> about </div>
130    <footer> </footer>
131  </div>
132</main>
133<p class="nav-button"> <span></span> <span></span> <span></span> </p>
134<nav class="nav-wrap close">
135  <ul class="drawer-menu">
136    <li><a class="drawer-menu-item pager" href="#top">TOP</a></li>
137    <li><a class="drawer-menu-item pager" href="#concept">CONCEPT</a></li>
138    <li><a class="drawer-menu-item pager" href="#products">PRODUCTS</a></li>
139    <li><a class="drawer-menu-item pager" href="#shop">SHOP</a></li>
140    <li><a class="drawer-menu-item pager" href="#about">ABOUT</a></li>
141  </ul>
142  <ul class="sns_btn">
143    <li><a href=""><img src="images/facebook.png" width="24" height="24" alt=""/></a></li>
144    <li><a href=""><img src="images/instagram.png" width="24" height="24" alt=""/></a></li>
145  </ul>
146</nav>
147</body>
148<script>/* nav */
149$('.nav-button').on('click',function(){
150  if( $(this).hasClass('active') ){
151    
152    $(this).removeClass('active');
153    $('.nav-wrap').addClass('close').removeClass('open');
154
155  }else {
156    $(this).addClass('active');
157
158    $('.nav-wrap').addClass('open').removeClass('close'); 
159  }
160});</script>
161</html>
162