HTML,CSSがstyle.cssに更新されない

前提・実現したいこと

CSSがstyle.cssに更新されない→更新されました。
しかし、
navに書いた、こちらが表示されない原因についてお伺いしたく、ご連絡しました！
↓です。

nav
1position: fixed;
2left: 0;
3top: 0;
4width: 100%;
5background-color: #000000CC;
6padding-top: 145px;
7z-index: 1;
8opacity: 0;
9visibility: hidden;
10transition: opacity 0.3s ease;
11opacity: 1;
12visibility: visible;
13transition: opacity 0.3s ease;

###期待したこと
ハンバーガーメニューをクリックすると、上記が表示されるようにしたいです。
何卒よろしくお願いいたします。
最終ゴール↓
→ボタンをクリックすると、_openクラスがつき、ハンバーガメニューで✖印作り、
スマホデバイスバージョンのliを作りたいです（イメージ図）
openをつけて、.lineを回転させ✖
activeをつけて、bg-color:#333;内に縦表示でli作成させたい（まだコードは書いていません。これは自力で行います）
goalを達成させたい！！

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

-open,_activeがツール上ではオンオフになるが、実際には✖印などが動いていない。
コード上では反応するけど、画面上には反映されません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta name="robots" content="noindex">
8    <title>中級編</title>
9
10     <!-- Google Fonts -->
11    <link rel="preconnect" href="https://fonts.googleapis.com">
12    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">
14    <!---->
15    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
16    <link rel="stylesheet" href="./CSS/destyle.css">
17    <link rel="stylesheet" href="CSS/slick.css">
18    <link rel="stylesheet" href="css/slick-theme.css">
19    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
20    <link rel="stylesheet" href="./CSS/style.css">
21    
22</head>
23<body>
24    <header class="header">
25        <div class="inner header-inner">
26            <h1 class="header-ttl">
27                <img class="img-logo" src="./image/Logo.png" alt="">
28                <p class="logo-text">ユアコーディング</p>
29            </h1><!-- /.header-ttl -->
30          
31            <nav class="nav" id="js-nav">
32                <ul class="header-list">
33                    <li class="header-item"><a href="#feauture">特徴</a></li><!-- /.header-item -->
34                    <li class="header-item"><a href="#price">価格</a></li><!-- /.header-item -->
35                    <li class="header-item"><a href="#contact-link">問い合わせ</a></li><!-- /.header-item -->
36                </ul><!-- /.header-list -->
37            </nav><!-- /.nav -->
38            <div class="header-link cmn-link">
39               <a id="js-humberger" href="#contact-link">お問い合わせ</a>
40            </div><!-- /.cmn-link -->
41            
42            <button type="button" id="js-humburger" class="button humburger" aria-controls="js-glabal-menu" aria-expanded="false" area-label="メニューを開閉する">
43                <span class="line"></span ><span class="line"></span><span class="line"></span>
44              </button>
45        </div><!-- /.inner -->
46      <!--   <div class="hum-li_js">
47            <div class="hum-li_white">
48                <ul class="menu-list">
49                    <li class="menu-item"> <a href="#feauture"></a> 特徴</li>
50                    <li class="menu-item"> <a href="#price"></a> 価格</li>
51                    <li class="menu-item"> <a href="#contact"></a> 問い合わせ</li>
52                </ul><!-- /.menu-list -->
53            </div><!-- /.hum-li_white -->
54        
55        </div><!-- /.hum-li_js --> 
56    </header><!-- /.header -->
57     <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
58    
59    <script type="text/javascript" src="js/slick.min.js"></script>
60    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
61    <script type="text/javascript" src="js/script.js"></script>
62</body>
63</html>

mixin.scss
1@charset "UTF-8";
2
3// ブレイクポイント
4$breakpoints: (
5 'sm': 'screen and (max-width: 576px)',
6 'md': 'screen and (max-width: 769px)',
7 'lg': 'screen and (max-width: 992px)',
8 'xl': 'screen and (max-width: 1200px)'
9) !default;
10@mixin mq($breakpoint: md) {
11  @media #{map-get($breakpoints, $breakpoint)} {
12    @content;
13  }
14}
15
16@mixin mr($breakpoint: sm) {
17  @media #{map-get($breakpoints, $breakpoint)} {
18    @content;
19  }
20}
21
22@mixin ms($breakpoint: lg) {
23  @media #{map-get($breakpoints, $breakpoint)} {
24    @content;
25  }
26}
27
28@mixin mt($breakpoint: xl) {
29  @media #{map-get($breakpoints, $breakpoint)} {
30    @content;
31  }
32}

CSS
1.header {
2  background-color: #FFFFFF;
3  height: 94px;
4  position: fixed;
5  top: 0;
6  z-index: 9999;
7  width: 100%;
8  -webkit-box-shadow: 0px 3px 6px #00000029;
9          box-shadow: 0px 3px 6px #00000029;
10}
11
12.header .header-inner {
13  max-width: 1022px;
14  margin: 0 auto;
15  padding: 0 20px;
16  display: -webkit-box;
17  display: -webkit-flex;
18  display: -ms-flexbox;
19  display: flex;
20  -webkit-box-align: center;
21  -webkit-align-items: center;
22      -ms-flex-align: center;
23          align-items: center;
24  -webkit-box-pack: justify;
25  -webkit-justify-content: space-between;
26      -ms-flex-pack: justify;
27          justify-content: space-between;
28  height: 100%;
29}
30
31.header .header-inner .header-ttl {
32  display: -webkit-box;
33  display: -webkit-flex;
34  display: -ms-flexbox;
35  display: flex;
36  -webkit-box-align: center;
37  -webkit-align-items: center;
38      -ms-flex-align: center;
39          align-items: center;
40}
41
42.header .header-inner .header-ttl .img-logo {
43  width: 55px;
44  height: 55px;
45}
46
47.header .header-inner .header-ttl .logo-text {
48  display: block;
49  font-size: 2.4rem;
50  font-weight: bold;
51  margin-left: 16px;
52}
53
54@media screen and (max-width: 1200px) {
55  .header .header-inner .nav {
56position: fixed;
57    left: 0;
58    top: 0;
59    width: 100%;
60    background-color: #000000CC;
61    padding-top: 145px;
62    z-index: 1;
63    opacity: 0;
64    visibility: hidden;
65    -webkit-transition: opacity 0.3s ease;
66    transition: opacity 0.3s ease;
67    
68  }
69}
70
71@media screen and (max-width: 1200px) and (max-width: 1200px) {
72  .header .header-inner .nav._open {
73
74    opacity: 1;
75    visibility: visible;
76    -webkit-transition: opacity 0.3s ease;
77    transition: opacity 0.3s ease;
78  }
79}
80
81.header .header-inner .nav .header-list {
82  display: -webkit-box;
83  display: -webkit-flex;
84  display: -ms-flexbox;
85  display: flex;
86  -webkit-box-pack: justify;
87  -webkit-justify-content: space-between;
88      -ms-flex-pack: justify;
89          justify-content: space-between;
90  -webkit-box-align: center;
91  -webkit-align-items: center;
92      -ms-flex-align: center;
93          align-items: center;
94}
95
96@media screen and (max-width: 1200px) {
97  .header .header-inner .nav .header-list {
98    display: none;
99  }
100}
101
102.header .header-inner .nav .header-list .header-item > a {
103  font-weight: bold;
104}
105
106.header .header-inner .nav .header-list .header-item + .header-item {
107  padding-left: 46px;
108}
109
110.header .header-inner .header-link {
111  width: 155px;
112  height: 37px;
113}
114
115@media screen and (max-width: 769px) {
116  .header .header-inner .header-link {
117    display: none;
118  }
119}
120
121@media screen and (max-width: 1200px) {
122  .header .header-inner .header-link {
123    display: none;
124  }
125}
126
127.header .header-inner .header-link > a {
128  color: #fff;
129  font-size: 1.4rem;
130  text-align: center;
131}

js
1$(function(){
2  $("#js-humburger").on('click', function(){
3   
4    $(this).toggleClass("_open");
5  　$(".nav").toggleClass("_open");
6    $(".header-list").toggleClass("_active");
7    $("body").toggleClass("noscroll");
8    $(".this").fadeToggle(300);
9  
10  }); 
11
12});