最初に表示される画面にハンバーガーメニューが開いたまま表示されてしまいます。

自主勉のために制作しているサイトで不明なところがあったため、質問させていただきます。

レスポンシブ対応でハンバーガーメニューを実装しているのですが、なぜかハンバーガーメニューが最初から表示された状態でサイトが開いてしまいます。

メニューの開閉自体は問題ないのですが、そこだけ不具合が出ています。自分でもほかの方のエラーの対処を見たりしていましたが原因がわかりません。お力を貸していただけますと幸いです。

質問の仕方もわからないので、該当しそうな個所を抜粋します。よろしくお願い致します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width" >
6    <title>雪国食堂</title>
7
8    <link rel="stylesheet" href="css/sanitize.css">
9    <!-- ozwald font -->
10    <link rel="preconnect" href="https://fonts.googleapis.com">
11    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
13
14    <link rel="stylesheet" href="css/style.css">
15    <script>
16        var contentWidth = 1200;
17        var ua = navigator.userAgent;
18        if((ua.indexOf('Android') > 0 && ua.indexOf('Mobile') == -1) || ua.indexOf('iPad') > 0 || ua.indexOf('Kindle') > 0 || ua.indexOf('Silk') > 0){
19          // for tab
20          document.write('<meta name="viewport" content="width=' + contentWidth + '">');
21        } else {
22          // not tab
23          document.write('<meta name="viewport" content="width=device-width">');
24        }
25    </script>
26    <script src="https://kit.fontawesome.com/4f435c9a89.js" crossorigin="anonymous"></script>
27    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
28    <script src="js/script.js"></script><section></section>
29</head>
30<body>
31    <!-- container -->
32    <div class="container index">
33        <!-- site header -->
34        <header id="site-header">
35            <div class="brand">
36                <a href="index.html">
37                    <div class="img">
38                        <img src="img/logo.png" alt="雪国食堂">
39                    </div>
40                </a>
41            </div>
42            <div id="nav-switch">
43                <i class="fas fa-bars"></i> <!-- fontAwesomのアイコンタグ -->
44            </div>
45            <nav class="open">
46                <div id="nav-close">
47                    <i class="far fa-window-close"></i>
48                </div>
49                <ul>
50                    <li>
51                        <a href="#section-1">about</a>
52                    </li>
53                    <li>
54                        <a href="#section-2">menu</a>
55                    </li>
56                    <li>
57                        <a href="#section-3">news</a>
58                    </li>
59                    <li>
60                        <a href="#section-4">acces</a>
61                    </li>
62                    <li class="contact">
63                        <a href="#contact">contact</a>
64                    </li>
65                </ul>
66            </nav>
67        </header>

CSS
1#site-header #nav-switch,
2#site-header #nav-close {
3	display: none;
4}
5@media (max-width: 767px) {
6	#site-header #nav-switch {
7		color: #99cccc;
8		display: block;
9		font-size: 24px;
10		transition: .3s;
11	}
12	#site-header nav {
13		background: #99cccc;
14		bottom: 0;
15		filter: opacity(.9);
16		min-height: 100vh;
17		padding: 40px 20px;
18		position: fixed;
19		right: 0;
20		top: 0;
21		transform: translateY(-100%);
22		transition: .5s;
23		/*width: 50%;*/
24		z-index: 1000;
25	}
26	#site-header #nav-close {
27		color: #fff;
28		display: block;
29		font-size: 24px;
30		position: absolute;
31		right: 12px;
32		top: 8px;
33	}
34
35	/* open */
36	#site-header #nav-switch.open {
37		filter: opacity(0);
38	}
39	#site-header nav.open {
40		transform: translateY(0);
41	}
42}

jquery
1$(function()
2var $nav = $('nav');
3var $switch = $('#nav-switch'); 
4var $close = $('#nav-close');
5
6$switch.on('click', function() { 
7$nav.addClass('open'); 
8});
9
10$close.on('click', function() {
11$nav.removeClass('open'); 
12});
13
14});