メガメニュー型ドロップダウン付きグローバルナビゲーション

$(".has_sub").children(".subnav").hide();
$(".has_sub > a").on('click', function () {
    if (window.matchMedia('(max-width:767px)').matches) {
        $(this).next(".subnav").stop().slideToggle(100);
        $(this).toggleClass("on");
        return false;
    }
});
$("#gnav a[href*=\"#\"]").click(function () {
    if (window.matchMedia('(max-width:767px)').matches) {
        $("#btn_gnav").removeClass("open");
        $("#gnav").slideUp("100");
    }
});
$(".has_sub").on('mouseenter focusin', function () {
    if (window.matchMedia('(min-width:768px)').matches) {
        $(this).children(".subnav").stop().fadeIn(400);
        $(this).addClass("on");
    }
}).on('mouseleave focusout', function () {
    if (window.matchMedia('(min-width:768px)').matches) {
        $(this).children(".subnav").stop().fadeOut(200);
        $(this).removeClass("on");
    }
});

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  background: #fff;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;

  .logo {
    flex-shrink: 0;
    max-width: 25%;
    padding-left: 2vw;
  }
  @include max-mq() {
    display: block;
    .logo {
      max-width: 100px;
      padding: 10px 10px 10px 25px;
    }
  }
}


#gnav {
  display: block;

  a {
    text-decoration: none;
    display: block;
    transition: .3s;
    padding: 40px 1.5vw;
  }
  ul {
    display: flex;
  }
  li {
    position: relative;
  }

  .subnav {
    background: #333;
    left: 0;
    right: 0;
    top: 101px;
    padding: 40px;
    position: fixed;
    z-index: 1;

    ul {
      display: flex;
      justify-content: center;
      text-align: center;
    }

    a {
      color: #fff;
      display: block;
      padding: 2px;
      transition: background .2s;
    }
  }

  @include max-mq() {
    display: none;
    padding: 20px;
    overflow-y: scroll;
    height: calc(100% - 55px);
    box-sizing: border-box;
    top: 55px;
    left: 0;
    right: 0;
    position: fixed;

    ul {
      display: block;
      padding: 0;
      position: static;
    }

    li {
      display: block;
      border-left: 0;
      padding: 0;
      margin: 0;
    }

    a {
      padding: 0;
    }

    .subnav {
      ul {
        border-top: solid 1px #fff;
        display: block;
        text-align: left;
        width: 100%;
      }

      li {
        max-width: 100%;
      }
    }
  }
}

<header>
    <p class="logo">
        <a href="#">
            <img src="/img/common/header_logo_pc.svg" alt="">
        </a>
    </p>
    <button id="btn_gnav" type="button"><span class="line"></span><span class="line"></span><span class="line"></span><span class="txt">menu</span></button>
    <nav id="gnav">
        <ul>
            <li class="hidden-pc">
            <a href="">トップページ</a>
            <li class="has_sub">
                <a href="">会社概要</a>
                <div class="subnav">
                    <ul>
                        <li class="hidden-pc"><a href="">会社概要</a></li>
                        <li><a href="">代表挨拶</a></li>
                        <li><a href="">アクセス</a></li>
                    </ul>
                </div>
            </li>
            <li class="has_sub">
                <a href="">インフォメーション</a>
                <div class="subnav">
                    <ul>
                        <li class="hidden-pc"><a href="">インフォメーション</a></li>
                        <li><a href="">お知らせ</a></li>
                        <li><a href="">ブログ</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="">お問い合わせ</a>
            </li>
        </ul>
    </nav>
</header>