CSS　メディアクエリ　レスポンシブ　効かない

前提

お世話になっております。
非常に初歩的な質問で申し訳ございません。

WEBサイトのレスポンシブ対応作業を行っています。
CSSをスマホ・タブレット・PCで分けようと思ったのですが1023px以下からCSSが読み込まれません。

色々調べたのですが誤字等も見つけられず、何が原因なのかわかりません。
検証ツールで見てみても1023px以下からcssが読み込まれていないようです。
エラーは特に出ていません。

こちらがディレクトリです。

間違った記述をしているようでしたら教えていただきたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2
3<html>
4
5<head>
6    <meta charset="utf-8" name="Officialsite" content="">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Officialsite</title>
9    
10    <link rel="stylesheet" href="css/reset.css">
11    <link rel="stylesheet" href="css/sp.css" media="screen and(max-width:639px)">
12    <link rel="stylesheet" href="css/tb.css" media="screen and(min-width:640px)and(max-width:1023px)">
13    <link rel="stylesheet" href="css/style.css" media="screen and (min-width:1024px)">
14    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
15    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
16    <script src="script.js"></script>
17
18</head>
19
20<body>
21
22    <div class="firstview sp_none" >
23        <video class="bg-video" src="img/TOP/topmovie.mp4" poster="img/PROFILE/profile1.jpg" muted autoplay loop playsinline></video>
24    </div>
25
26    <header class="header pc_none">
27        <nav class="global-nav">
28            <ul class="global-nav__list">
29                <li class="global-nav__item"><a href="">メニュー1</a></li>
30                <li class="global-nav__item"><a href="">メニュー2</a></li>
31                <li class="global-nav__item"><a href="">メニュー3</a></li>
32                <li class="global-nav__item"><a href="">メニュー4</a></li>
33                <li class="global-nav__item"><a href="">メニュー5</a></li>
34            </ul>
35        </nav>
36
37        <div class="hamburger" id="js-hamburger">
38            <span class="hamburger__line hamburger__line--1"></span>
39            <span class="hamburger__line hamburger__line--2"></span>
40            <span class="hamburger__line hamburger__line--3"></span>
41        </div>
42        <div class="black-bg" id="js-black-bg"></div>
43    </header>
44
45   
46    <div class="sidenav sp_none">
47        <nav sp_none>
48            <ul class="sidemenu">
49                <li><a href="index.html">HOME<br><span>ホーム</span></a></li>
50                <li><a href="profile.html">PROFILE<br><span>プロフィール</span></a></li>
51                <li><a href="access.html">ACCESS<br><span>住所</span></a></li>
52                <li><a href="courses.html">COURSES<br><span>コース・料金</span></a></li>
53                <li><a href="reservation/reservation.html">RESERVATI<br><span>ご予約</span></a></li>
54                <li><a href="">CONTACT<br><span>お問い合わせ</span></a></li>
55            </ul>
56            <h1><a href="index.html"><img src="img/TOP/logo1.jpg" alt="HALUロゴ"></a></h1>
57        </nav>
58    </div>
59
60</body>
61</html>
62

tb.css

css
1* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5}
6
7p {
8    word-break: break-all;
9}
10
11a {
12    text-decoration: none;
13}
14
15li {
16    list-style: none;
17}
18
19.pc_none {
20    display: block;
21}
22
23.sp_none {
24    display: none;
25}
26
27.clearfix:after {
28    content: "";
29    display: block;
30    clear: both;
31}
32
33
34.header {
35    position: fixed;
36    left: 0;
37    top: 0;
38    width: 100%;
39    height: 52px;
40    background-color: #fff;
41    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
42}
43
44.header_logo{
45    padding:1px 0 1px 0;
46    width: 100px;
47    height: 52px;
48    margin: 0 auto;
49}
50
51.header_logo a{
52    display: block;
53    width: 100%;
54}
55
56.header_logo img{
57  max-width: 100%;
58
59}
60
61
62.global-nav {
63    position: fixed;
64    right: -40vw;
65    /* これで隠れる */
66    top: 0;
67    width: 40vw;
68    /* スマホに収まるくらい */
69    height: 100vh;
70    padding-top: 40px;
71    background-color: #fff;
72    transition: all .6s;
73    z-index: 200;
74    overflow-y: auto;
75    /* メニューが多くなったらスクロールできるように */
76}
77
78.hamburger {
79    position: absolute;
80    right: 0;
81    top: 0;
82    width: 52px;
83    /* クリックしやすいようにちゃんと幅を指定する */
84    height: 50px;
85    /* クリックしやすいようにちゃんと高さを指定する */
86    cursor: pointer;
87    z-index: 300;
88}
89
90.global-nav__list {
91    margin: 0;
92    padding: 0;
93    list-style: none;
94}
95
96.global-nav__item {
97    text-align: center;
98    padding: 0 14px;
99}
100
101.global-nav__item a {
102    display: block;
103    padding: 8px 0;
104    border-bottom: 1px solid #eee;
105    text-decoration: none;
106    color: #111;
107}
108
109.global-nav__item a:hover {
110    background-color: #eee;
111}
112
113.hamburger__line {
114    position: absolute;
115    left: 11px;
116    width: 18px;
117    height: 1px;
118    background-color: #111;
119    transition: all .6s;
120}
121
122.hamburger__line--1 {
123    top: 18px;
124}
125
126.hamburger__line--2 {
127    top: 26px;
128}
129
130.hamburger__line--3 {
131    top: 34px;
132}
133
134.black-bg {
135    position: fixed;
136    left: 0;
137    top: 0;
138    width: 100vw;
139    height: 100vh;
140    z-index: 100;
141    background-color: #000;
142    opacity: 0;
143    visibility: hidden;
144    transition: all .6s;
145    cursor: pointer;
146}
147
148/* 表示された時用のCSS */
149.nav-open .global-nav {
150    right: 0;
151}
152
153.nav-open .black-bg {
154    opacity: .8;
155    visibility: visible;
156}
157
158.nav-open .hamburger__line--1 {
159    transform: rotate(45deg);
160    top: 20px;
161}
162
163.nav-open .hamburger__line--2 {
164    width: 0;
165    left: 50%;
166}
167
168.nav-open .hamburger__line--3 {
169    transform: rotate(-45deg);
170    top: 20px;
171}
172
173
174
175
176
177

style.css

css
1@charset "utf-8";
2
3* {
4    margin: 0;
5    padding: 0;
6    box-sizing: border-box;
7}
8
9p {
10    word-break: break-all;
11}
12
13a {
14    text-decoration: none;
15}
16
17li {
18    list-style: none;
19}
20
21.pc_none{
22    display: none;
23}
24
25.clearfix:after {
26    content: "";
27    display: block;
28    clear: both;
29}
30
31
32/* ホーム */
33html,
34body {
35    height: 100%;
36    font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "HGS明朝E", "ヒラギノ明朝 Pro W3", "小塚明朝 Pro EL", "Kozuka Mincho Pro", Century, "Times New Roman", Times, "ＭＳ 明朝", serif;
37}
38
39
40
41
42
43div.sidenav {
44    height: 100vh;
45    width: 20%;
46    position: fixed;
47    top: 0;
48    background-color: #fff;
49    overflow: hidden;
50}
51
52div.sidenav nav {
53    margin-top: 10vh;
54    margin-bottom: 6vh;
55    height: 84vh;
56    padding-right: 10%;
57}
58
59div.sidenav ul.sidemenu {
60    width: auto;
61    float: right;
62    overflow: hidden;
63
64}
65
66div.sidenav ul.sidemenu li {
67    list-style: none outside none;
68    width: 100%;
69    float: left;
70    overflow: hidden;
71    margin: 0 0 15% 0;
72    text-align: right;
73}
74
75div.sidenav nav ul.sidemenu li a {
76    float: right;
77    overflow: hidden;
78    text-align: right;
79    font-size: 18px;
80    font-weight: 400;
81    line-height: 2em;
82    letter-spacing: 1.5px;
83    text-decoration: none;
84    color: #343232;
85    width: 100%;
86    position: relative;
87    line-height: 1;
88}
89
90div.sidenav nav ul.sidemenu li a::after {
91    position: absolute;
92    left: 0;
93    bottom: 0;
94    display: block;
95    content: "";
96    width: 0%;
97    height: 1px;
98    background: #404040;
99    transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
100}
101
102div.sidenav nav ul.sidemenu li a:hover::after {
103    width: 100%;
104}
105
106div.sidenav nav ul.sidemenu li a:hover {
107    color: #746be8;
108}
109
110div.sidenav nav ul.sidemenu li a span {
111    font-size: 13px;
112}
113
114
115div.sidenav h1 {
116    display: block;
117    width: 150px;
118    float: right;
119}
120
121div.sidenav h1 a {
122    display: block;
123}
124
125div.sidenav h1 a img {
126    width: 100%;
127}
128
129