Gnav-modal

<header class="header">
  <div class="inner-layout">
    <a href="/" class="logo">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo.png" srcset="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo.png 1x, <?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png 2x" alt="">
    </a>
    <nav class="gnav">

      <!-- btn-hamburger -->
      <div class="btn-hamburger js-modal-nav-open">
        <div class="btn-hamburger__border"></div>
      </div>

      <!-- modal-nav -->
      <div class="modal-nav">
        <div class="modal-nav__bg js-modal-nav-close"></div>
        <nav class="modal-nav__menu">
          <div class="modal-nav__menu--wrap">
            <ul>
              <li>
                <a href="/">リンク1</a>
              </li>
              <li>
                <a href="/">リンク2</a>
              </li>
              <li>
                <a href="/">リンク3</a>
              </li>
              <li>
                <a href="/">リンク4</a>
              </li>
              <li>
                <a href="/">リンク5</a>
              </li>
              <li>
                <a href="/">リンク6</a>
              </li>
              <li>
                <a href="/">リンク7</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>


    </nav>
  </div><!--/.inner-layout-->
</header>

// modal
//=====================================================
.btn-hamburger {
  width: 8rem;
  height: 8rem;
  cursor: pointer;
  position: absolute;
  top: 1.6rem;
  right: 4rem;
  @include z-index-10;
  @include media(tb-s) {
    width: calc(80px * 0.666);
    height: calc(80px * 0.666);
    top: calc(16px * 0.666);
    right: calc(40px * 0.666);
  }
  &:before {
    content: "";
    background: colors(green);
    display: block;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-1.9rem);
    transition: 0.3s ease;
    @include media(tb-s) {
      height: calc(4px * 0.666);
      transform: translateY(calc(-19px * 0.666));
    }
  }
  &:after {
    content: "";
    background: colors(green);
    display: block;
    width: 100%;
    height: 0.4rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(1.9rem);
    transition: 0.3s ease;
    @include media(tb-s) {
      height: calc(4px * 0.666);
      transform: translateY(calc(19px * 0.666));
    }
  }
  .btn-hamburger__border {
    width: 100%;
    height: 0.4rem;
    background: colors(green);
    position: absolute;
    top: 50%;
    left: 0;
    transition: 0.3s ease;
    opacity: 1;
    @include media(tb-s) {
      height: calc(4px * 0.666);
    }
  }
}

body.fixed {
  position: fixed;
  .btn-hamburger {
    &:before {
      transform: translateY(0rem) rotate(135deg);
    }
    &:after {
      transform: translateY(0rem) rotate(-135deg);
    }
    .btn-hamburger__border {
      opacity: 0;
    }
  }
}

.modal-nav {
  display: none;
  width: 100%;
  height: 100vh; // カスタムプロパティ未対応ブラウザ用のフォールバック
  height: calc((var(--vh, 1vh) * 100) - 12rem);
  position: fixed;
  top: 12rem;
  left: 0;
  @include media(tb-s) {
    height: calc((var(--vh, 1vh) * 100) - 80px);
  }
  @include z-index-4;
  .modal-nav__bg {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh; // カスタムプロパティ未対応ブラウザ用のフォールバック
    height: calc((var(--vh, 1vh) * 100) - 12rem);
    transition: 0.3s;
    background: colors(green-85);
    @include z-index-9;
    @include media(tb-s) {
      height: calc((var(--vh, 1vh) * 100) - 80px);
    }
  }
  .modal-nav__menu {
    @include z-index-9;
    position: fixed;
    width: 100%;
    height: calc(100% - 12rem);
    padding: 8rem 0;
    background: red;
    overflow: scroll;
    .modal-nav__menu--wrap {
      width: 89.333%;
      margin: 0 auto;
      .searchform {
        margin-bottom: 3.5rem;
      }
      ul.menu {
        margin-bottom: 3rem;
        li {
          list-style-type: none;
          border-bottom: solid 1px colors(white);
          &:last-of-type {
            border-bottom: none;
          }
          a {
            display: block;
            color: colors(white);
            font-size: 3rem;
            padding: 2.8rem 0;
          }
        }
      }
      ul.lang {
        list-style-type: none;
        display: flex;
        justify-content: center;
        margin-bottom: 4.8rem;
        &:after {
          order: 2;
          content: "";
          display: block;
          width: 1px;
          height: 3.5rem;
          background: colors(white);
          margin: 0 3.5rem;
        }
        li {
          &:nth-of-type(1) {
            order: 1;
          }
          &:nth-of-type(2) {
            order: 3;
          }
          a {
            display: flex;
            font-size: 3rem;
            color: colors(white);
          }
        }
      }
      .btn-2 {
        margin: 0 auto;
      }
    }
  }
}

.modal-nav {
  .icon-sns-btn.header-pc__top--right {
    justify-content: center;
    margin-top: 3rem;
  }
}

.modal-nav__fadein {
  display: block;
  animation: showIn 0.3s linear 0s;
}
.modal-nav__fadeout {
  display: block;
  animation: showOut 0.3s linear 0s forwards;
}

@keyframes showIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
@keyframes showOut {
  0% {
      opacity: 1;
      display: block;
  }
  99% {
      opacity: 0;
      display: block;
  }
  100% {
      opacity: 0;
      display: none;
  }
}

// sp 100vh
//=====================================================
// リサイズ対応
// 関数定義
function setHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 初期化
setHeight();
// ブラウザのサイズが変更された時・画面の向きを変えた時に再計算する
window.addEventListener('resize', setHeight);

// 1回のみ取得
// 関数定義
function setHeight2() {
  const vh2 = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh2', `${vh2}px`);
}

// g-nav modal
//=====================================================
$(function() {
  var scrollPos;//topからのスクロール位置
  $('body').on( 'click', '.js-modal-nav-open', function() {
    scrollPos = $(window).scrollTop();//topからのスクロール位置を格納
    $('.modal-nav').fadeIn();//モーダルをフェードイン
    $('.modal-nav').addClass('modal-nav__fadein');
    $('.modal-nav').removeClass('modal-nav__fadeout');
    //$('.js-modal-nav-close').fadeIn();//モーダルをフェードイン
    $('body').addClass('fixed').css({ top: -scrollPos });//背景固定
    $('.btn-hamburger.js-modal-nav-open').addClass('js-modal-nav-close');
    $('.btn-hamburger.js-modal-nav-open').removeClass('js-modal-nav-open');
    //return false;//<a>を無効化
  });

  $('body').on( 'click', '.js-modal-nav-close', function() {
    $('.modal-nav').fadeOut();//モーダルをフェードアウト
    $('.modal-nav').addClass('modal-nav__fadeout');
    $('.modal-nav').removeClass('modal-nav__fadein');
    $('body').removeClass('fixed').css({ top: 0 });//背景固定を解除
    $('.btn-hamburger.js-modal-nav-close').addClass('js-modal-nav-open');
    $('.btn-hamburger.js-modal-nav-close').removeClass('js-modal-nav-close');
    $(window).scrollTop(scrollPos);//元の位置までスクロール
    //return false;//<a>を無効化
  });

  // ページ内リンク対策
  //$('body').on( 'click', '.js-modal-nav-close-a', function() {
    //$('.modal-nav').fadeOut();//モーダルをフェードアウト
    //$('.modal-nav').addClass('modal-nav__fadeout');
    //$('.modal-nav').removeClass('modal-nav__fadein');
    //$('body').removeClass('fixed').css({ top: 0 });//背景固定を解除
    //$('.js-ic_menu').removeClass('none');//ハンバーガーアイコン表示
    //$('.js-modal-nav-close').addClass('js-modal-nav-open');
    //$('.js-modal-nav-close').removeClass('js-modal-nav-close');
  //});

});

// scroll モーダル内やタブなど:not指定
// $(function(){
//   $('a[href^="#"]:not(.modal-nav__menu--ul a)').click(function(){
//     var speed = 500;
//     var href= $(this).attr("href");
//     var target = $(href == "#" || href == "" ? 'html' : href);
//     var position = target.offset().top;
//     $("html, body").animate({scrollTop:position}, speed, "swing");
//     return false;
//   });
// });