/* ===== PC共通 ===== */
.global-nav { margin: 8px 0; }
.global-nav .gnav-root{ list-style:none; margin:0; padding:0; display:flex; gap:16px; flex-wrap:wrap; }
.global-nav .gnav-root>li{ position:relative; }
.global-nav .gnav-root>li>a{ color:#f5f5f5; text-decoration:none; padding:6px 4px; display:inline-block; }

/* Mega base */
.global-nav .has-sub>.mega{
  display:none; position:absolute; top:34px; left:50%;
  transform: translateX(-50%);
  background:#111; color:#fff;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  z-index:200; padding:14px; min-width:280px;
  max-width:min(95vw, 1000px);
  max-height:70vh; overflow:auto; border-radius:12px;
}
.global-nav .has-sub:hover>.mega{ display:block; }
.global-nav .mega h4{ margin:6px 0 8px; font-size:14px; color:#b84b65; }
.global-nav .mega .mega-col{ min-width:220px; padding:0 10px; }
.global-nav .mega .link-list{ list-style:none; margin:0; padding:0; }
.global-nav .mega .link-list li a{ color:#ddd; text-decoration:none; display:block; padding:6px 0; }
.global-nav .mega .link-list li a:hover{ color:#fff; text-decoration:underline; }
.global-nav .link-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap:10px 18px; }
.global-nav .link-grid li a{ color:#ddd; text-decoration:none; }
.global-nav .link-grid li a:hover{ color:#fff; text-decoration:underline; }
@media (max-width:1024px){ .global-nav .link-grid{ grid-template-columns: repeat(2, minmax(140px,1fr)); } }

/* シリーズのメガ */
.global-nav .mega-series{ width:auto; }
.global-nav .mega-series .series-columns{
  display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
  gap:16px;
}
.global-nav .series-block{ background:#151515; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:10px; }
.global-nav .series-head{ font-weight:700; margin-bottom:8px; }
.global-nav .series-cards{ display:grid; grid-auto-rows: 1fr; gap:8px; }
.global-nav .series-cards .card{ display:block; background:#0b0b0b; border:1px solid rgba(255,255,255,0.08); border-radius:8px; overflow:hidden; text-decoration:none; color:#eee; }
.global-nav .series-cards .card img{ width:100%; height:120px; object-fit:cover; display:block; }
.global-nav .series-cards .card span{ display:block; padding:8px 10px; font-size:13px; }

/* ===== 表示切替（PC/ SP） ===== */
.pc-nav { display:block; }
.sp-only { display:none; }
@media (max-width: 767px){
  .pc-nav { display:none; }
  .sp-only { display:block; }
}

/* ====== SPドロワー ====== */
@media (max-width: 767px){
  /* ハンバーガー */
  #sp-menu-btn {
    width: 32px; height: 26px; display:flex; flex-direction:column; justify-content:space-between;
    cursor: pointer; position: relative; z-index: 2001;
  }
  #sp-menu-btn span { display:block; height:3px; background:#fff; border-radius:3px; transition:.25s; }
  #sp-menu-btn.open span:nth-child(1){ transform: translateY(11px) rotate(45deg); }
  #sp-menu-btn.open span:nth-child(2){ opacity:0; }
  #sp-menu-btn.open span:nth-child(3){ transform: translateY(-11px) rotate(-45deg); }

  /* ドロワー本体 */
  .sp-drawer {
    position: fixed; inset: 0 auto 0 0; width: 86vw; max-width: 360px;
    background: #111; border-right: 1px solid rgba(255,255,255,.08);
    transform: translateX(-100%); transition: transform .25s ease; z-index: 2000;
    overflow-y: auto; padding: 20px 14px 40px;
  }
  .sp-drawer.open { transform: translateX(0); }

  /* 背景暗転（bodyにクラス） */
  body.drawer-open::after{
    content:""; position: fixed; inset:0; background: rgba(0,0,0,.45); z-index: 1500;
  }

  /* SPメニュー */
  .sp-nav{ list-style:none; margin:0; padding:0; }
  .sp-nav>li{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .sp-nav a, .sp-nav span{ display:block; padding:12px 4px; color:#f5f5f5; text-decoration:none; font-size:15px; }

  /* アコーディオン */
  .sp-acc .sp-sub{
    max-height:0; overflow:hidden; transition:max-height .25s ease; background:#0c0c0c;
  }
  .sp-acc.open .sp-sub{ max-height: 600px; }
  .sp-sub li a{ padding:10px 10px 10px 18px; font-size:14px; color:#ddd; }
  .sp-sub li a:hover{ color:#fff; }
}

/* ======= override: mgs.php と完全一致させるメガメニュー設定 ======= */

/* メガメニュー全体を中央寄せ・丸み・影つき・スクロール対応 */
header .global-nav .has-sub > .mega {
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(95vw, 1000px) !important;
  max-height: 70vh !important;
  overflow: auto !important;
  border-radius: 12px !important;
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  padding: 14px !important;
  min-width: 280px !important;
  display: none;
  z-index: 200;
}
header .global-nav .has-sub:hover > .mega {
  display: block !important;
}

/* ジャンル等のグリッド配置 */
header .global-nav .mega .link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px 20px;
  word-break: break-word;
}

/* シリーズ型メガメニュー用 */
header .global-nav .mega-series {
  width: auto !important;
}
header .global-nav .mega-series .series-columns {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}

/* ホバー時のカード効果を統一 */
header .global-nav .series-cards .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
  border-color: rgba(184, 75, 101, 0.4);
}

/* スマホ対応 */
@media (max-width: 767px) {
  header .global-nav .gnav-root {
    flex-direction: column;
    gap: 8px;
  }
  header .global-nav .has-sub > .mega {
    position: static !important;
    display: none !important;
    border: none;
    box-shadow: none;
    padding: 8px 4px;
  }
  header .global-nav .has-sub.open > .mega {
    display: block !important;
  }
}