Safariと、スマホからのみハンバーガーメニューが開きません…

前提・実現したいこと

Safariと、スマホからのみハンバーガーメニューが開きません…
パソコンで可変にサイズを変えて見ると、google,firefoxでは正常に動きます。
しかしスマホで見ると、googleであってもハンバーガーメニューが開きません。
（Safariはスマホ・パソコンからの可変両方でハンバーガーメニューが開きません。）
ハンバーガーボタンは動いていますが、上部からメニューがフェードイン（スクロールイン）してきません…

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

特になし


### 該当のソースコード

HTML
<header>
    <div class="header-contaier">
      <a href="index.html"><img src="images/logo.png" rel="ロゴ画像" class="header-left"></a>
    <div class="global-nav">
      <ul>
        <li><a href="instructor.html">講師紹介</a></li>
        <li><a href="achievement.html">大会実績</a></li>
        <li><a href="training.html">トレーニング</a></li>
        <li><a href="club.html">クラブ概要</a></li>
      </ul>
    </div><!--global-nav-->
    <div class="header-right">
      <p class="icon">お問い合わせ</p>
      <h1>070-4539-8593</h1>
    </div><!--header-right-->
     <div id="nav-toggle">
    <div>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div> <!--nav-toggle-->  
   </div><!--header-contaier-->   
</header> 

CSS
@media screen and (max-width:960px){
  
  /*ハンバーガーメニュー*/ 
  header {
    height: auto;
  }
  header .header-contaier {
    width:100%;
    height: auto;
  }
  .header-right {
    display: none;
  }
  
  header .global-nav {
  position: fixed;
  display: none;
  margin:0 0 0 0;  
  top:100px;
  width: 100%;
  height: 300px;
  background: #eeeeee; 
  z-index: 400;
  text-align: center;
  padding: 30px 0;
  box-sizing: border-box;
  }
  
  header global-nav ul {
    list-style: none;
    display: block;
    margin: 0 auto;
    width:100%;
  }
  
  header .global-nav ul li {
    float:none;
    margin: 10px auto;
    text-align: center;
    height:50px;
    line-height: 50px;
    letter-spacing: 1px;
  }
  header .global-nav ul li:last-child {
    border: none;
  } 
  header .global-nav ul li a {
    display: block;
  }
  header .global-nav ul li a:hover {
    border: none;
    background-color: #00479d;
    color: #ffffff;
  }
  #nav-toggle {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top:45px;
    float: right;
    margin-right: 30px;
    z-index: 100;
    
  }
  #nav-toggle div {
    position: relative;
  }
  #nav-toggle span {
    display: block;
    height: 4px;
    background-color: #000;
    position: absolute;
    width:100%;
    left:10px;
    -webkit-transition:0.5s ease-in-out;
    -moz-transition:0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }
  
  #nav-toggle span:nth-child(1){
    top:0px;
  }
  #nav-toggle span:nth-child(2){
    top:12px;
  }
  #nav-toggle span:nth-child(3){
    top:24px;
  }
  .open #nav-toggle span:nth-child(1){
    top:12px;
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    -moz-transform:rotate(135deg);
  }
    .open #nav-toggle span:nth-child(2){
    width:0px;
    left:50%;
  }
  .open #nav-toggle span:nth-child(3){
  top:12px;
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    -moz-transform:rotate(-135deg);
}
}

JS
$(function(){
   //ハンバーガーナビ　
 $(function(){
    $("#nav-toggle").click(function(){
      $("header").toggleClass("open");
      $(".global-nav").slideToggle(500);
    });
  });
  
//フェードイン
   $(window).scroll(function (){
    $('.fadein').each(function(){
        var elemPos = $(this).offset().top,
            scroll = $(window).scrollTop(),
            windowHeight = $(window).height();
          if (scroll > elemPos - windowHeight + 100){
              $(this).addClass('scrollin');
            }
        });
    });
 
 });

### 試したこと
全く同じソースコードを使った他サイトは正常に動いていますが、今回のサイト（https://perceive.sakura.ne.jp/）のみ以上のような状況になっています。
サーバーの問題なのでしょうか…？

### 補足情報（FW/ツールのバージョンなど）