@media (max-width: 768px) {

  /* SPではPCナビ非表示 */
  .pc-nav { display:none !important; }

  /* ハンバーガー（右上固定） */
  #spNavBtn.sp-nav-btn{
    position: fixed;
    top: 10px;
    right: 14px;
    width: 44px;
    height: 44px;
    z-index: 2147483647;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* 3本線 */
  #spNavBtn .sp-nav-icon{
    position: relative;
    display:block;
    width: 44px;
    height: 44px;
    background: linear-gradient(#000,#000) center 22px / calc(100% - 16px) 2px no-repeat;
  }
  #spNavBtn .sp-nav-icon::before,
  #spNavBtn .sp-nav-icon::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    height:2px;
    background:#000;
  }
  #spNavBtn .sp-nav-icon::before{ top: 14px; }
  #spNavBtn .sp-nav-icon::after { top: 30px; }

  /* ドロワー（初期：非表示） */
  #spNavDrawer.sp-nav-drawer{
    display:none;
  }

  /* 開いた状態（JSで is-open 付与） */
  #spNavDrawer.sp-nav-drawer.is-open{
    display:block;
    position: fixed;
    inset: 0;
    z-index: 2147483646;
  }

  /* 背景 */
  #spNavDrawer .sp-nav-overlay{
    position:absolute;
    inset:0;
    background: rgba(0,0,0,.55);
  }

  /* パネル（右から出す） */
  #spNavDrawer .sp-nav-panel{
    position:absolute;
    top:0;
    right:0;
    width: min(86vw, 340px);
    height:100%;
    background: rgba(0,0,0,.7);
    padding: 90px 22px 22px;
    overflow:auto;
    transform: translateX(100%);
    transition: transform .25s ease;
  }

  #spNavDrawer.is-open .sp-nav-panel{
    transform: translateX(0);
  }

  #spNavDrawer .c-menu{ display:block !important;padding: 10%; }
  #spNavDrawer .c-menu li{ margin:0 0 18px; }
  #spNavDrawer .c-menu a{
    display:block;
    color:#fff !important;
    font-size:18px;
    text-decoration:none;
    padding: 10px 0;
  }

  /* SPではゴーストヘッダー無効（被り防止。必要なら消してOK） */
  #a-ghost_header{ display:none !important; }
}