レスポンシブ対応のHTMLを作りたいのですがうまくいきません

前提・実現したいこと

PC画面では画像左側のようにナビを表示させ、スマホ表示ではハンバーガーメニューを使い表示させたいのですがナビが消えてしまいます。
原因がわからないのでご教授ください。

※HTMLが2つあるのはSample.htmlにnav.htmlを読み込ませてるためです。

発生している問題・エラーメッセージ

スマホ表示でハンバーガーメニュー・ナビが表示されない

該当のソースコード

nav.html

HTML
1<body>
2
3    <div class="pc">
4        <div id="nav">
5            <ul>
6                <li><a href="top.html">TOPページ</a></li>
7                <li><a href="booking.html">会議室予約</a></li>
8                <li><a href="bookingChange.html">予約変更・削除</a></li>
9                <li><a href="list.html">予約状況一覧</a></li>
10                <li><a href="userEdit.html">ユーザー情報変更</a></li>
11            </ul>
12        </div>
13    </div>
14
15
16    <div class="sp">
17        <header>
18            <div id="nav-drawer">
19                <input id="nav-input" type="checkbox" class="nav-unshown">
20                <label id="nav-open" for="nav-input"><span></span></label>
21                <label class="nav-unshown" id="nav-close" for="nav-input">
22                    <div id="nav-content">
23                        <ul>
24                            <li><a href="top.html">TOPページ</a></li>
25                            <li><a href="booking.html">会議室予約</a></li>
26                            <li><a href="bookingChange.html">予約変更・削除</a></li>
27                            <li><a href="list.html">予約状況一覧</a></li>
28                            <li><a href="userEdit.html">ユーザー情報変更</a></li>
29                        </ul>
30                    </div>
31                </label>
32            </div>
33        </header>
34    </div>
35
36
37</body>

Sample.html

HTML
1<body>
2    <header>
3        <div id="header"></div>
4        <!-- header.html -->
5    </header>
6
7    <!-- PC版 -->
8    <div class="pc">
9        <nav>
10            <div id="nav"></div>
11            <!-- nav.html -->
12        </nav>
13        <!-- ここから内容記述 -->
14        <div id="contents">
15            <h1 id="title">現在の予約状況</h1>
16            <div class="box">
17                <table id="tab">
18                    <tr>
19                        <td id="td_ao">●</td>
20                        <!-- 赤丸か青丸 -->
21                        <td id="td_room">301会議室</td>
22                        <!-- 会議室名 -->
23                        <td id="td_time">空室</td>
24                        <!-- 予約がないなら空室 -->
25                    </tr>
26                    <tr>
27                        <td id="td_ao">●</td>
28                        <!-- 赤丸か青丸 -->
29                        <td id="td_room">401会議室</td>
30                        <!-- 会議室名 -->
31                        <td id="td_time">空室</td>
32                        <!-- 予約がないなら空室 -->
33                    </tr>
34                    <tr id="tr_bottom">
35                        <td id="td_aka" class="table_last">●</td>
36                        <!-- 赤丸か青丸 -->
37                        <td id="td_room" class="table_last">501会議室</td>
38                        <!-- 会議室名 -->
39                        <td id="td_time" class="table_last">12:00~13:30（○○学科）</td>
40                        <!-- 予約がないなら空室 -->
41                    </tr>
42                </table>
43            </div>
44        </div>
45    </div>
46
47
48
49    <!-- スマホ版 -->
50    <div class="sp">
51        <nav>
52            <div id="nav"></div>
53            <!-- nav.html -->
54        </nav>
55        <!-- ここから内容記述 -->
56        <div id="contents">
57            <h1 id="title">現在の予約状況</h1>
58            <div class="box">
59                <table id="tab">
60                    <tr>
61                        <td id="td_ao">●</td>
62                        <!-- 赤丸か青丸 -->
63                        <td id="td_room">301会議室</td>
64                        <!-- 会議室名 -->
65                    </tr>
66                    <tr>
67                        <td></td>
68                        <td id="td_time">空室</td>
69                        <!-- 予約がないなら空室 -->
70                    </tr>
71
72                    <tr>
73                        <td id="td_ao">●</td>
74                        <!-- 赤丸か青丸 -->
75                        <td id="td_room">401会議室</td>
76                        <!-- 会議室名 -->
77                    </tr>
78                    <tr>
79                        <td></td>
80                        <td id="td_time">空室</td>
81                        <!-- 予約がないなら空室 -->
82                    </tr>
83
84                    <tr id="tr_bottom">
85                        <td id="td_aka" class="table_last">●</td>
86                        <!-- 赤丸か青丸 -->
87                        <td id="td_room" class="table_last">501会議室</td>
88                    </tr>
89                    <tr>
90                        <td></td>
91                        <!-- 会議室名 -->
92                        <td id="td_time" class="table_last">12:00~13:30（○○学科）</td>
93                        <!-- 予約がないなら空室 -->
94                    </tr>
95                </table>
96            </div>
97        </div>
98    </div>
99
100    <!-- end -->
101
102</body>

nav.css

CSS
1/* PC版 */
2@media screen and (min-width: 1024px) {
3    
4    .sp {
5        display: none;
6    }
7
8    nav {
9        width: 150px;
10        height: 100vh;
11        background-color: #71b3ab;
12        position: fixed;
13        left: 0;
14        top: 50px;
15        z-index: 2;
16    }
17
18    #nav ul {
19        margin-top: 30px;
20        color: #fff;
21        font-size: 14px;
22    }
23
24    #nav ul li {
25        width: 150px;
26        height: 60px;
27        display: inline-block;
28    }
29
30    #nav ul li:hover {
31        background-color: #4c857f;
32    }
33
34    #nav ul li a {
35        width: inherit;
36        height: inherit;
37        display: table-cell;
38        text-align: center;
39        vertical-align: middle;
40    }
41}
42
43
44
45/* スマホ版 */
46@media screen and (max-width: 760px) {
47
48    .pc {
49        display: none;
50    }
51
52
53    header {
54        padding: 10px;
55        background: skyblue;
56    }
57
58    #nav-drawer {
59        position: relative;
60    }
61
62    /*チェックボックス等は非表示に*/
63    .nav-unshown {
64        display: none;
65    }
66
67    /*アイコンのスペース*/
68    #nav-open {
69        display: inline-block;
70        width: 30px;
71        height: 22px;
72        vertical-align: middle;
73    }
74
75    /*ハンバーガーアイコンをCSSだけで表現*/
76    #nav-open span,
77    #nav-open span:before,
78    #nav-open span:after {
79        position: absolute;
80        height: 3px;
81        /*線の太さ*/
82        width: 25px;
83        /*長さ*/
84        border-radius: 3px;
85        background: #555;
86        display: block;
87        content: '';
88        cursor: pointer;
89    }
90
91    #nav-open span:before {
92        bottom: -8px;
93    }
94
95    #nav-open span:after {
96        bottom: -16px;
97    }
98
99    /*閉じる用の薄黒カバー*/
100    #nav-close {
101        display: none;
102        /*はじめは隠しておく*/
103        position: fixed;
104        z-index: 99;
105        top: 0;
106        /*全体に広がるように*/
107        left: 0;
108        width: 100%;
109        height: 100%;
110        background: black;
111        opacity: 0;
112        transition: .3s ease-in-out;
113    }
114
115    /*中身*/
116    #nav-content {
117        overflow: auto;
118        position: fixed;
119        top: 0;
120        left: 0;
121        z-index: 9999;
122        /*最前面に*/
123        width: 90%;
124        /*右側に隙間を作る（閉じるカバーを表示）*/
125        max-width: 330px;
126        /*最大幅（調整してください）*/
127        height: 100%;
128        background: #fff;
129        /*背景色*/
130        transition: .3s ease-in-out;
131        /*滑らかに表示*/
132        -webkit-transform: translateX(-105%);
133        transform: translateX(-105%);
134        /*左に隠しておく*/
135    }
136
137    /*チェックが入ったらもろもろ表示*/
138    #nav-input:checked ~ #nav-close {
139        display: block;
140        /*カバーを表示*/
141        opacity: .5;
142    }
143
144    #nav-input:checked ~ #nav-content {
145        -webkit-transform: translateX(0%);
146        transform: translateX(0%);
147        /*中身を表示（右へスライド）*/
148        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
149    }
150}