スクロールしたらヘッダーの色を変えたいが反応しない

前提・実現したいこと

ATOMエディタでHP作成中です。
タイトル通り、ある程度下にスクロールしていったら
ヘッダーの背景色を透明から赤に変えるよう設定したいのですが
反応がない状態です。

ご存じの方がいましたらご教授いただけると幸いです。よろしくお願いいたします。

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">

    <!-- swiperのCSSファイルの読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

　　<!-- jqueryのファイルの読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


    <title></title>
  </head>




<body>

  <header>
    <div class="headerBody">
        <div class="headerLeft-logo">
            <a href="index.html"><img src="./image/rogo.gif" alt="ロゴマーク"></a>
        </div>

  　　  <div class="headerRight">
  　　　   <nav class="global">
    　　      <ul class="globalList">
      　      　<li><a href="index.html">HOME</a></li>
      　      　<li><a href="#Corporate Date">会社概要</a></li>
      　 　     <li><a href="#Access">アクセス</a></li>
　　　　　　  </ul>
  　　　   </nav>
  　  　</div>
   　 </div>
  　</header>

    <!-- 画像の読み込み -->
    <div class="mainVisual">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./image/buildings.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/1.jpg.webp"></div>
          <div class="swiper-slide"><img src="./image/bala.webp"></div>
          <div class="swiper-slide"><img src="./image/sosu.webp"></div>
         </div>
            <!-- スライダー上の文字-->
        　  <div class="mainVisual_overRay">
        　  <p></p>
        　 </div>
      　 </div>

  　</div>

    <!-- swiperのJavaScriptファイルの読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- main.jsの読み込み -->
    <script src="main.js"></script>

<main>
     <p class="border"></p>

<div class="wrapper">
<h3>　企業理念
<span class="super">Corporate Philosophy</span></h3>

 <div class="space">

　<p></p>
  
 </div>

<h3 id="Corporate Date">　会社概要
  <span class="super">Corporate Date</span></h3>

<table>
  <tbody>
    <div class="space">

      <p class="hutoji">社名</p>
      <p></p><br>

      <p class="hutoji">TEL</p>
      <p></p><br>

      <p class="hutoji">設立</p>
      <p></p><br>

      <p class="hutoji">本社</p>
      <p>〒</p>
      <p></p><br>


     </div>
   </tbody>
 </table>

<h3>　事業内容
<span class="super">Our Business</span></h3>
 <div class="space">
  <p></p>
  <p></p>
 </div>


<h3 id="Access">　アクセス
<span class="super">Access</span></h3>
 <div>
  <h4>&emsp; 本社</h4>
   <div class="space">
    <p>〒<br />
       <br /></div>
    <div class="p-map">
      <iframe src="https://www.google.com/maps/embed?"
       frameborder="0" style="border:0" allowfullscreen></iframe></div>
    </div>

<p class="border"></p>
</main>
    <div class="footer">
      <div class="space">
        <div class="CopyRight" style="text-align: right">
           <p><a href="index.html">&copy; 2021 Inc.</p>
        </div>
      </div>
    </div>

  </div>
 </body>
</html>

CSS

@charset "UTF-8";



body {
   margin: 0;
   background-color: #e6e6e6;
}
/*　ヘッダー　*/
header {
  width: 100%;
  height: 20px;/*ヘッダー背景高さ*/
  background-color: transparent;/*背景透明*/
  position: fixed;/*固定ヘッダー*/
  z-index: 3;     /*画像の上にロゴ・メニュー置く*/


}
.change-color {
  background-color: red;
  /* （画像よりも下までスクロールした時に変えたい文字色） */
}
.headerBody{
  display: flex;
  max-width: 1200px;
  margin: auto;
  height: 70px;/*ヘッダー高さ*/
  align-items: center;/*ヘッダー上下中央寄せ*/
　 position: relative;
}
.headerLeft-logo{
   width: 0px;     /*width: 100px;*/
   height: 0px;    /*width: 100px;*/
max-height: 100px;
  padding: 0 15px;  /*ロゴ右間隔*/
  top: 7;
  margin-right: auto;
}
.headerLeft-logo img{
  width: 7vw;         /*ロゴサイズ　width: 148px; */
  height: 7vw;         /*height: 50px; */
                        /*max-height: 60px; */
}


.globalList{
  margin: 0;
  list-style: none;
  display: flex;
  justify-content:flex-end;
}
.globalList > li{
  position: relative;
  padding: 0 10px;     /*ヘッダー中 間隔*/
border-right: none;

}
.globalList > li > a:hover{
  opacity: 0.9;
}
a {
   text-decoration: none;  /*下線消去*/
   color: #ffffff;
   font-size: 15px;
}






/*　スライド　*/
.mainVisual{
  /* position:relativeで位置の基準にする */
  position: relative;
  overflow: hidden;　　　　/*横スクロール停止*/
}
.swiper-wrapper{
  position: relative;
  background-color: #000000;
}
.swiper-slide img{
  width: 100%;
  height: 30%;
  max-height: 650px;
  z-index: 1;

  display: block;
  opacity: 0.5;/*スライダー曇りの色*/

  vertical-align: bottom; /* imgの下、隙間防止のため*/
}


.mainVisual_overRay p{
  position: absolute;
  z-index: 2;
  top: 30%;
  left: 40%;
  color: #fff;
  font-size: 30px;
  font-family: 'IM Fell DW Pica SC', serif;
}



/*本文左の余白*/
.space{
  margin: 30px;　
 text-align: justify;
}

/*h3右の小文字*/
.super{
  font-size: 5px;
  color: #708090;
  vertical-align:baseline;
}


h3 {
  font: #000000;
  font-size: 30px;
  background-color: #dcdcdc;
  padding: 0.5em 0 0.5em 0;
  margin: 0 0 0 0;
}
.hutoji{
   font-weight: bold;
}
h4 {
   font-size: 20px;
   background-color: #f0f0f0;
}




/*　地図　*/
.p-map{
 height: 0;
 overflow: hidden;
 padding-bottom: 56.25%;/*マップ幅*/
 position: relative;
}
 .p-map iframe{
  position: absolute;
  left: 0;
  top: 0;
  height: 80%;/*マップ高さ*/
  width: 100%;
 }



/*　スマホ対応　*/
@media screen and (min-width:0px) and (max-width:480px){
  p{}
}
/*　タブレット対応　*/
@media screen and (min-wigth:481px) and (max-wight:1024px){
  p{}
}
/*　パソコン対応　*/
@media screen and (min-wight:1025) {
  p{}
}
/*　スマホ縦向き　*/
@media screen and (orientation:portrait){
  p {font-size:1em;}
}
/*　スマホ横向き　*/
@media screen and(orientation:landscape){
  p{font-size:1.2em;}
}





/*　CSSラインアニメーション　*/
.border{
	position: relative;
	font-size: 15px;
  color: #696969;
}
.border:before{
  color: #696969;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	border-bottom: solid 2px #696969;
	animation: border_anim 8s linear forwards;/*アニメーションかかる時間*/
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}




.wrapper{

  height: 100%;
  min-height: 100vh; /*プラウザの高さ100vhを基準のヘッダー高さ*/
  position: relative;/*相対位置*/
  padding-bottom: 80px;/*フッター高さ*/
  box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}
.footer{
  width: 100%;
  background-color: #dcdcdc;
  font: #000000;/**/
  padding: 10px 0;

}
.CopyRight{
  padding: 10px 0;
  background-color: #dcdcdc;
  font-family: 'IM Fell DW Pica SC', serif;
}

javascript


  //Swiper設定
const mvSwiper = new Swiper ('.swiper-container',{


loop:true,
autoplay:{　　　　//自動再生
  delay:5000,　　//画僧表示時間
},
speed:500,      //スライダー切り替え速度 0.5s
});


// headerをスクロールすると、色が変わる

jQuery(window).on('scroll', function () {
    if (400 < jQuery(this).scrollTop()) {
        jQuery('header').addClass('change-color');
    } else {
        jQuery('header').removeClass('change-color');
    }
});