/*
 * サイトのデザイン — core（全ページ。読み込みは lib/nettoge/design/inc/assets.php）
 *
 * サイトの外枠の見た目の正本。値は build/css/tokens-nettoge.css の --ntg2-*（ライト/ダーク）だけを使い、
 * ここに生の色は書かない（ナビのゲームのカードは写真の上なので例外）。セレクタは #body_wrap から始める（SWELL の body クラスは #body_wrap に付く）。
 *
 *  1 土台           2 骨組み         3 ヘッダー        4 グローバルナビ
 *  5 スマホメニュー・検索           6 テーマ切り替え   7 パンくず・ページの題
 *  8 記事一覧        9 ページ送り・並び順               10 サイドバー
 * 11 フッター・固定ボタン・モーダル  12 共通部品（節見出し・カード・行・チップ・ラベル）
 * 13 ゲームの帯（ハブ導線）         14 スマホの目次
 */

/* ==========================================================================
   1 土台
   ========================================================================== */

body {
  background: var(--ntg2-bg);
}

#body_wrap {
  background: var(--ntg2-bg);
  color: var(--ntg2-text);
}

#body_wrap :focus-visible {
  outline: 2px solid var(--ntg2-teal);
  outline-offset: 2px;
}

/* ==========================================================================
   2 骨組み
   ========================================================================== */

#body_wrap .l-content {
  margin-bottom: 72px;
  padding-top: 28px;
}

#body_wrap .l-mainContent {
  background: transparent;
  box-shadow: none;
}

@media (min-width: 960px) {
  #body_wrap {
    --swl-sidebar_width: var(--ntg2-side-w);
    --swl-sidebar_margin: var(--ntg2-col-gap);
  }

  /* 読み込み途中で本文が右へ動かないように（CLS。docs/運用/フロントパフォーマンス.md） */
  #body_wrap:not(.-sidebar-off) #content > #main_content {
    margin-left: auto;
  }
}

@media (max-width: 959px) {
  #body_wrap .l-content {
    padding-top: 20px;
  }

  #body_wrap #sidebar {
    margin-top: 56px;
  }
}

/* ==========================================================================
   3 ヘッダー（帯だけ sticky。ナビの行は一緒にスクロールして消える）
   ========================================================================== */

#body_wrap .l-header.ntg2-header {
  position: sticky;
  top: var(--swl-adminbarH, 0px);
  z-index: 1000;
  background: var(--ntg2-bg);
  border-bottom: 1px solid var(--ntg2-line);
  box-shadow: none;
  color: var(--ntg2-text);
}

#body_wrap .ntg2-header__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--ntg2-header-h);
  min-height: 0;
  color: var(--ntg2-text);
}

#body_wrap .ntg2-header__logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
  padding: 0;
}

/* ロゴ（N マーク + ettoge.com + タグライン）。帯の上下中央に置く */
#body_wrap .c-headLogo {
  display: flex;
  align-items: center;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: 1;
}

#body_wrap .nettoge-logo__link {
  display: inline-flex;
  align-items: center;
  color: var(--ntg2-text);
  text-decoration: none;
}

#body_wrap .nettoge-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}

#body_wrap .nettoge-logo__illust,
#body_wrap .nettoge-logo__illust-img {
  display: block;
  width: 34px;
  height: 34px;
}

#body_wrap .nettoge-logo__body {
  display: flex;
  align-items: center;
  gap: 12px;
}

#body_wrap .nettoge-logo__word {
  color: var(--ntg2-text);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

#body_wrap .nettoge-logo__tld {
  color: var(--ntg2-accent);
}

#body_wrap .nettoge-logo__sub {
  width: 13em;
  max-width: 13em;
  padding-left: 12px;
  border-left: 1px solid var(--ntg2-line);
  color: var(--ntg2-muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 検索欄（PC） */
#body_wrap .ntg2-header__search {
  flex: 0 1 280px;
  min-width: 180px;
}

#body_wrap .ntg2-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin: 0;
  padding: 0 14px;
  background: var(--ntg2-paper);
  border: 1px solid var(--ntg2-line);
  border-radius: 19px;
  color: var(--ntg2-muted);
}

#body_wrap .ntg2-search:focus-within {
  border-color: var(--ntg2-teal);
}

#body_wrap .ntg2-search__icon {
  flex: none;
}

#body_wrap .ntg2-search__input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  font: inherit;
  font-size: 13px;
  outline: 0;
}

#body_wrap .ntg2-search__input::placeholder {
  color: var(--ntg2-muted);
}

#body_wrap .ntg2-search__input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* ヘッダーの丸いボタン（テーマ切り替え・スマホの検索とメニュー） */
#body_wrap .l-header__themeBtn,
#body_wrap .l-header__customBtn,
#body_wrap .l-header__menuBtn {
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
}

#body_wrap .ntg2-header .c-iconBtn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  box-shadow: none;
  color: var(--ntg2-text);
  cursor: pointer;
}

#body_wrap .ntg2-header .c-iconBtn:hover {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap .ntg2-header .c-iconBtn__icon {
  margin: 0;
  font-size: 16px;
  line-height: 1;
}

#body_wrap .ntg2-header .c-iconBtn__label {
  display: none;
}

/* ==========================================================================
   4 グローバルナビ（ゲームの一覧。PC は1行、スマホは横スクロール）
   ========================================================================== */

#body_wrap .ntg2-gnav {
  position: relative;
  z-index: 999;
  display: block;
  padding: 0;
  background: var(--ntg2-bg);
  border-bottom: 1px solid var(--ntg2-line);
  box-shadow: none;
}

#body_wrap .ntg2-gnav__in {
  display: block;
  max-width: calc(var(--container_size, 1200px) + var(--swl-pad_container, 0px) * 2);
  height: auto;
  margin: 0 auto;
  padding: 0 calc(var(--swl-pad_container, 0px) - 12px);
  background: transparent;
}

#body_wrap .ntg2-gnav .c-gnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  height: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* 2段組みの指定（ntg-menu-row2）や説明のピル（.desc）は使わない */
#body_wrap .ntg2-gnav .c-gnav::after {
  content: none;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item {
  order: 0;
  height: auto;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item > a {
  display: block;
  height: auto;
  padding: 11px 12px 9px;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--ntg2-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item > a::after,
#body_wrap .ntg2-gnav .c-gnav > .menu-item > a::before {
  content: none;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item > a .ttl {
  font-size: inherit;
  line-height: inherit;
}

#body_wrap .ntg2-gnav .c-gnav .desc,
#body_wrap .ntg2-gnav .c-gnav .c-smallNavTitle {
  display: none;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item > a:hover,
#body_wrap .ntg2-gnav .c-gnav > .menu-item:focus-within > a {
  border-bottom-color: var(--ntg2-teal);
  color: var(--ntg2-text);
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item.ntg2-is-current > a,
#body_wrap .ntg2-gnav .c-gnav > .menu-item.-current > a,
#body_wrap .ntg2-gnav .c-gnav > .menu-item.current-menu-item > a {
  border-bottom-color: var(--ntg2-accent);
  color: var(--ntg2-text);
}

/* ==== ゲームのカード（inc/header.php。斜めに切った写真のカードを重ねて並べ、乗せたカードが弾むように広がる） ==== */
#body_wrap .ntg2-gnav .c-gnav {
  gap: 0;
  padding: 10px 0 10px var(--ntg2-g-overlap);
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard {
  --g-accent: var(--ntg2-g-default);
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--ntg2-g-width-max);
  margin-left: calc(var(--ntg2-g-overlap) * -1);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  transition: flex-grow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), max-width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current {
  z-index: 3;
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:focus-within {
  z-index: 5;
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a {
  position: relative;
  display: block;
  width: 100%;
  height: var(--ntg2-g-height);
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: #16181c;
  border: 0;
  clip-path: polygon(var(--ntg2-g-slant) 0, 100% 0, calc(100% - var(--ntg2-g-slant)) 100%, 0 100%);
  color: #ffffff;
}

/* 写真（暗く沈め、下からゲームの色をにじませる） */
#body_wrap .ntg2-gcard__art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 16, 0.2) 0%, rgba(10, 12, 16, 0.62) 100%),
    var(--ntg2-img, none) var(--ntg2-img-pos, center 30%) / cover no-repeat;
  filter: saturate(0.8) brightness(0.86);
  transform: scale(1.02);
  transition: filter 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--g-accent);
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

#body_wrap .ntg2-gcard__logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  max-width: min(var(--ntg2-g-logo-w), 100% - var(--ntg2-g-slant) * 2 - 4px);
  height: auto;
  max-height: var(--ntg2-g-logo-h);
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ゲーム名の文字は HTML に残し、見た目はロゴに任せる */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a .ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ロゴの無いゲームは文字をロゴ代わりに（明朝の大文字） */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard--text > a .ttl {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 calc(var(--ntg2-g-slant) + 6px);
  overflow: hidden;
  clip: auto;
  color: #f3ead6;
  font-family: Georgia, "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 乗せたカード: 弾むように広がり（隣が少し詰まる）、写真が明るくなる */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:focus-within {
  flex-grow: var(--ntg2-g-grow-open);
  max-width: var(--ntg2-g-width-max-open);
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover .ntg2-gcard__art,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a:focus-visible .ntg2-gcard__art {
  filter: saturate(1.05) brightness(1);
  transform: scale(1.08);
}

/* ロゴ（ロゴの無いゲームは文字）は、どのゲームも同じ倍率（--ntg2-g-logo-zoom）で大きくなる。
   ロゴの箱はカードの幅に引きずられないので、横長のロゴだけ大きく広がることはない */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover .ntg2-gcard__logo,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a:focus-visible .ntg2-gcard__logo,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard--text:hover > a .ttl,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard--text > a:focus-visible .ttl {
  transform: scale(var(--ntg2-g-logo-zoom));
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover > a::after,
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current > a::after {
  opacity: 1;
}

/* 今いるゲーム: 少し広く、明るく */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current:not(:hover) {
  flex-grow: var(--ntg2-g-grow-current);
}

#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current .ntg2-gcard__art {
  filter: saturate(1) brightness(0.95);
}

#body_wrap .ntg2-gcard--bg3 { --g-accent: var(--ntg2-g-bg3); }
#body_wrap .ntg2-gcard--ff14 { --g-accent: var(--ntg2-g-ff14); }
#body_wrap .ntg2-gcard--sz { --g-accent: var(--ntg2-g-sz); }
#body_wrap .ntg2-gcard--nms { --g-accent: var(--ntg2-g-nms); }
#body_wrap .ntg2-gcard--arc { --g-accent: var(--ntg2-g-arc); }
#body_wrap .ntg2-gcard--tes { --g-accent: var(--ntg2-g-tes); }
#body_wrap .ntg2-gcard--s2 { --g-accent: var(--ntg2-g-s2); }
#body_wrap .ntg2-gcard--pz { --g-accent: var(--ntg2-g-pz); }
#body_wrap .ntg2-gcard--fallout { --g-accent: var(--ntg2-g-fallout); }

/* サブメニューはカードの下から */
#body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > .sub-menu {
  left: var(--ntg2-g-slant);
  margin-top: 4px;
}

/* サイトの項目（プロフィール・お問い合わせ）はフッターとスマホのメニューにあるので、ナビでは出さない */
#body_wrap .ntg2-gnav .c-gnav > .ntg-menu-site {
  display: none;
}

/* カードが1行に収まらない幅は横スクロール（固定幅で並べ、乗せたカードだけ広げる。サブメニューは出さない） */
@media (max-width: 1099px) {
  #body_wrap .ntg2-gnav__in {
    overflow-x: auto;
    scrollbar-width: none;
  }

  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:focus-within,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current {
    flex: 0 0 auto;
    max-width: none;
  }

  #body_wrap .ntg2-gnav {
    --ntg2-g-logo-w: calc(var(--ntg2-g-width) - var(--ntg2-g-slant) * 2 - 4px);
  }

  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a {
    width: var(--ntg2-g-width);
    transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard:hover > a,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a:focus-visible {
    width: var(--ntg2-g-width-open);
  }

  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard.ntg2-is-current:not(:hover) > a {
    width: calc(var(--ntg2-g-width) + 20px);
  }

  #body_wrap .ntg2-gnav__in::-webkit-scrollbar {
    display: none;
  }

  #body_wrap .ntg2-gnav .c-gnav .sub-menu {
    display: none;
  }
}

/* サブメニュー（PC はホバーで開く） */
#body_wrap .ntg2-gnav .c-gnav .sub-menu {
  min-width: 14em;
  width: auto;
  padding: 6px 0;
  background: var(--ntg2-surface);
  border: 1px solid var(--ntg2-line);
  border-radius: var(--ntg2-radius);
  box-shadow: var(--ntg2-shadow-float);
  color: var(--ntg2-text);
  z-index: 1001;
}

#body_wrap .ntg2-gnav .c-gnav > .menu-item > .sub-menu {
  left: 0;
  transform: none;
}

#body_wrap .ntg2-gnav .c-gnav .sub-menu a {
  padding: 8px 14px;
  color: var(--ntg2-text);
  font-size: 13px;
  white-space: nowrap;
}

#body_wrap .ntg2-gnav .c-gnav .sub-menu a:hover {
  background: var(--ntg2-paper);
  color: var(--ntg2-teal);
}

#body_wrap .ntg2-gnav .c-gnav .sub-menu .ttl {
  font-size: inherit;
}

@media (max-width: 959px) {
  /* SWELL は 960px 未満でナビを隠すので出し直す */
  #body_wrap .ntg2-gnav .l-header__gnav {
    display: block;
  }

  #body_wrap .ntg2-gnav__in {
    overflow-x: auto;
    padding: 0 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #body_wrap .ntg2-gnav__in::-webkit-scrollbar {
    display: none;
  }

  #body_wrap .ntg2-gnav .c-gnav > .menu-item > a {
    min-height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  #body_wrap .ntg2-gnav {
    --ntg2-g-width: 116px;
    --ntg2-g-width-open: 150px;
    --ntg2-g-height: 50px;
    --ntg2-g-logo-h: 30px;
    --ntg2-g-slant: 12px;
    --ntg2-g-overlap: 14px;
  }

  #body_wrap .ntg2-gnav .c-gnav {
    padding: 8px 8px 8px var(--ntg2-g-overlap);
  }

  #body_wrap .ntg2-gnav .c-gnav .sub-menu,
  #body_wrap .ntg2-gnav .c-gnav > .ntg-menu-site {
    display: none;
  }
}

/* 動きを減らす設定では、カードは広がるが弾まない（どの幅でも。上の幅別の指定より後に置く） */
@media (prefers-reduced-motion: reduce) {
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard > a,
  #body_wrap .ntg2-gcard__art,
  #body_wrap .ntg2-gcard__logo,
  #body_wrap .ntg2-gnav .c-gnav > .ntg2-gcard--text > a .ttl {
    transition: none;
  }
}


/* ==========================================================================
   5 スマホメニュー（右から出るパネル）・検索
   ========================================================================== */

/* ヘッダー（sticky・1000）より上に出す */
#body_wrap .p-spMenu {
  z-index: 1002;
  color: var(--ntg2-text);
}

#body_wrap .p-spMenu__inner::before {
  background: var(--ntg2-bg);
  opacity: 1;
}

#body_wrap .p-spMenu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ntg2-line);
}

#body_wrap .p-spMenu__title {
  margin: 0;
  padding: 0;
  color: var(--ntg2-text);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

#body_wrap .p-spMenu__title::before,
#body_wrap .p-spMenu__title::after {
  content: none;
}

#body_wrap .p-spMenu__closeBtn .c-iconBtn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  color: var(--ntg2-text);
}

#body_wrap .p-spMenu__body {
  padding: 8px 16px 24px;
}

#body_wrap .c-spnav {
  margin: 0;
  padding: 0;
  list-style: none;
}

#body_wrap .c-spnav a {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ntg2-line);
  color: var(--ntg2-text);
  font-size: 15px;
  text-decoration: none;
}

#body_wrap .c-spnav a:hover {
  color: var(--ntg2-teal);
}

#body_wrap .c-spnav .sub-menu a {
  padding-left: 18px;
  color: var(--ntg2-sub);
  font-size: 14px;
}

#body_wrap .c-spnav .desc,
#body_wrap .c-spnav .c-smallNavTitle {
  display: none;
}

#body_wrap .p-spMenu__overlay {
  background: #000;
  opacity: 0.45;
}

/* スマホのヘッダー内検索（sp-inline-search.js が .is-opened と html[data-sp-search] を切り替える） */
#body_wrap .l-header__spActions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 959px) {
  #body_wrap .ntg2-header__bar {
    height: var(--ntg2-header-h-sp);
    gap: 8px;
    padding-right: 12px;
    padding-left: 14px;
  }

  #body_wrap .nettoge-logo__illust,
  #body_wrap .nettoge-logo__illust-img {
    width: 30px;
    height: 30px;
  }

  #body_wrap .nettoge-logo__word {
    font-size: 20px;
  }

  #body_wrap .nettoge-logo__sub {
    display: none;
  }

  #body_wrap .ntg2-header .c-iconBtn {
    width: 36px;
    height: 36px;
  }

  #body_wrap .ntg2-header__logo {
    transition: opacity 0.2s ease;
  }

  html[data-sp-search="opened"] #body_wrap .ntg2-header__logo {
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  html[data-sp-search="opened"] #body_wrap .l-header__spActions {
    flex: 1 1 auto;
  }

  #body_wrap .nettoge-sp-inline-search {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
  }

  #body_wrap .nettoge-sp-inline-search.is-opened {
    display: flex;
  }

  #body_wrap .nettoge-sp-inline-search__form {
    display: flex;
    width: 100%;
    height: 38px;
    margin: 0;
  }

  #body_wrap .nettoge-sp-inline-search__input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 14px;
    background: var(--ntg2-paper);
    border: 1px solid var(--ntg2-line);
    border-radius: 19px;
    color: var(--ntg2-text);
    font-size: 14px;
  }

  #body_wrap .nettoge-sp-inline-search__input:focus {
    border-color: var(--ntg2-teal);
    outline: 0;
  }
}

/* 検索フォーム（SWELL の get_search_form: 404・検索モーダル） */
#body_wrap .c-searchForm:not(.nettoge-sp-inline-search__form):not(.nettoge-sidebar-search__form) {
  display: flex;
  align-items: stretch;
  max-width: 520px;
  height: 44px;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  background: var(--ntg2-paper);
  border: 1px solid var(--ntg2-line);
  border-radius: 22px;
}

#body_wrap .c-searchForm:not(.nettoge-sp-inline-search__form):not(.nettoge-sidebar-search__form):focus-within {
  border-color: var(--ntg2-teal);
}

#body_wrap .c-searchForm:not(.nettoge-sp-inline-search__form):not(.nettoge-sidebar-search__form) .c-searchForm__s {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 18px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: 14px;
}

#body_wrap .c-searchForm:not(.nettoge-sp-inline-search__form):not(.nettoge-sidebar-search__form) .c-searchForm__submit {
  position: static;
  flex: none;
  width: 48px;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--ntg2-sub);
}

#body_wrap .c-searchForm:not(.nettoge-sp-inline-search__form):not(.nettoge-sidebar-search__form) .c-searchForm__submit:hover {
  color: var(--ntg2-teal);
}

/* 404 */
#body_wrap .c-ttl404 {
  margin: 24px 0 16px;
  color: var(--ntg2-text);
  font-size: var(--ntg2-title-size);
  font-weight: 700;
  text-align: center;
}

/* ==========================================================================
   6 テーマ切り替え（theme-toggle.js がそのまま動く markup。つまみの見た目はやめ、月/太陽の丸いボタンにする）
   ========================================================================== */

#body_wrap .nettoge-theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  box-shadow: none;
  color: var(--ntg2-text);
  cursor: pointer;
}

#body_wrap .nettoge-theme-toggle:hover {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap .nettoge-theme-toggle__track {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#body_wrap .nettoge-theme-toggle__thumb {
  display: none;
}

#body_wrap .nettoge-theme-toggle__icon {
  position: absolute;
  inset: 0;
  place-items: center;
  width: 18px;
  height: 18px;
  opacity: 1;
  transform: none;
  color: inherit;
}

#body_wrap .nettoge-theme-toggle__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ライトでは月（ダークにする）、ダークでは太陽を見せる。出し分けは tokens の --ntg2-show-* */
#body_wrap .nettoge-theme-toggle__icon--dark {
  display: var(--ntg2-show-in-light);
}

#body_wrap .nettoge-theme-toggle__icon--light {
  display: var(--ntg2-show-in-dark);
}

@media (max-width: 959px) {
  #body_wrap .nettoge-theme-toggle {
    width: 36px;
    height: 36px;
  }
}

/* ==========================================================================
   7 パンくず・ページの題
   ========================================================================== */

#body_wrap .p-breadcrumb {
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#body_wrap .p-breadcrumb__list {
  flex-wrap: wrap;
  gap: 4px 8px;
  overflow: visible;
  color: var(--ntg2-muted);
  font-size: 12px;
}

#body_wrap .p-breadcrumb__item {
  gap: 8px;
}

#body_wrap .p-breadcrumb__item::after {
  content: "›";
  color: var(--ntg2-muted);
  opacity: 0.6;
  border: 0;
  width: auto;
  height: auto;
  transform: none;
}

#body_wrap .p-breadcrumb__item:last-child::after {
  content: none;
}

#body_wrap .p-breadcrumb__text {
  color: var(--ntg2-muted);
}

#body_wrap .p-breadcrumb__text:hover span {
  color: var(--ntg2-teal);
  opacity: 1;
}

#body_wrap .p-breadcrumb__text .__home::before {
  content: none;
}

/* 記事では、題と同じ中身の最後の項目は出さない */
#body_wrap.single .p-breadcrumb__item:last-child {
  display: none;
}

#body_wrap.single .p-breadcrumb__item:nth-last-child(2)::after {
  content: none;
}

/* 一覧・検索・固定ページの題 */
#body_wrap .c-pageTitle {
  display: flow-root;
  margin: 0 0 20px;
  padding: 2px 0 2px 14px;
  background: none;
  border: 0;
  border-left: 5px solid var(--ntg2-accent);
  border-radius: 0;
  color: var(--ntg2-text);
  font-size: var(--ntg2-title-size);
  font-weight: 700;
  line-height: 1.45;
}

#body_wrap .c-pageTitle::before,
#body_wrap .c-pageTitle::after {
  content: none;
}

#body_wrap .c-pageTitle__inner {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap .c-pageTitle__inner::before,
#body_wrap .c-pageTitle__inner::after {
  content: none;
}

#body_wrap .c-pageTitle__subTitle {
  color: var(--ntg2-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

#body_wrap .p-termHead,
#body_wrap .c-termDescription,
#body_wrap .p-termContent__desc {
  color: var(--ntg2-sub);
  font-size: 14px;
}

@media (max-width: 599px) {
  #body_wrap .c-pageTitle {
    font-size: var(--ntg2-title-size-sp);
  }
}

/* ==========================================================================
   8 記事一覧（SWELL の -type-list: 左に画像、右に題・抜粋・日付）
   ========================================================================== */

#body_wrap .p-postList.-type-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ntg2-line);
}

#body_wrap .-type-list .p-postList__item {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ntg2-line);
  box-shadow: none;
}

#body_wrap .-type-list .p-postList__link {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  background: none;
  box-shadow: none;
  color: var(--ntg2-text);
  text-decoration: none;
  transform: none;
}

#body_wrap .-type-list .p-postList__thumb,
#body_wrap .-type-list .p-postList__body {
  width: auto;
}

#body_wrap .-type-list .p-postList__thumb {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ntg2-radius-sm);
  box-shadow: none;
}

#body_wrap .-type-list .c-postThumb__figure {
  margin: 0;
  background: var(--ntg2-paper);
}

#body_wrap .-type-list .c-postThumb__figure::before {
  padding-top: 56.25%;
}

#body_wrap .-type-list .c-postThumb__labels {
  display: none;
}

#body_wrap .-type-list .p-postList__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
}

#body_wrap .-type-list .p-postList__title {
  order: 2;
  margin: 2px 0 6px;
  color: var(--ntg2-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
}

#body_wrap .-type-list .p-postList__link:hover .p-postList__title {
  color: var(--ntg2-teal);
}

#body_wrap .-type-list .p-postList__excerpt {
  order: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  overflow: hidden;
  color: var(--ntg2-sub);
  font-size: 13px;
  line-height: 1.75;
}

#body_wrap .-type-list .p-postList__meta {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 0;
  color: var(--ntg2-muted);
  font-size: 12px;
}

#body_wrap .p-postList .c-postTimes__posted::before,
#body_wrap .p-postList .c-postTimes__modified::before,
#body_wrap .p-postList .p-postList__cat::before {
  content: none;
}

/* 題の上のカテゴリ（画像の上のラベルの代わり。core.js を使わず CSS の order で上に出す） */
#body_wrap .-type-list .p-postList__body::before {
  content: none;
}

@media (max-width: 599px) {
  #body_wrap .-type-list .p-postList__link {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
  }

  #body_wrap .-type-list .p-postList__title {
    margin: 0 0 2px;
    font-size: 14px;
  }

  #body_wrap .-type-list .p-postList__excerpt {
    display: none;
  }

  #body_wrap .-type-list .p-postList__meta {
    margin-top: 2px;
    font-size: 11px;
  }
}

/* カード型（注目の記事など SWELL のカードを使う所） */
#body_wrap .p-postList.-type-card .p-postList__item {
  background: none;
  box-shadow: none;
}

/* ==========================================================================
   9 ページ送り・並び順
   ========================================================================== */

#body_wrap .c-pagination {
  gap: 6px;
  margin: 32px 0 0;
  font-size: 14px;
}

#body_wrap .c-pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--ntg2-line);
  border-radius: 18px;
  box-shadow: none;
  color: var(--ntg2-text);
  text-decoration: none;
}

#body_wrap .c-pagination a.page-numbers:hover {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap .c-pagination .page-numbers.current {
  background: var(--ntg2-text);
  border-color: var(--ntg2-text);
  color: var(--ntg2-bg);
}

#body_wrap .c-pagination .page-numbers.dots {
  border-color: transparent;
}

#body_wrap .c-listOrder {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap .c-listOrder__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#body_wrap .c-listOrder__items {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  border: 1px solid var(--ntg2-line);
  border-radius: 18px;
}

#body_wrap .c-listOrder__link {
  padding: 3px 12px;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  color: var(--ntg2-sub);
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
}

#body_wrap .c-listOrder__link:hover {
  color: var(--ntg2-teal);
}

#body_wrap .c-listOrder__link.is-current {
  background: var(--ntg2-text);
  color: var(--ntg2-bg);
}

/* 一覧ページ（カテゴリ・検索）の並び順は題の下に右寄せ */
#body_wrap .p-archiveContent > .c-listOrder,
#body_wrap .p-termContent > .c-listOrder {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* ==========================================================================
   10 サイドバー（枠なしの一覧・小さい見出し）
   ========================================================================== */

#body_wrap #sidebar {
  color: var(--ntg2-text);
  font-size: 14px;
}

#body_wrap #sidebar .c-widget {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#body_wrap #sidebar .c-widget + .c-widget,
#body_wrap #sidebar .c-widget + .nettoge-game-sidemenu,
#body_wrap #sidebar .nettoge-game-sidemenu + .c-widget {
  margin-top: 34px;
}

/* ウィジェットの見出し */
#body_wrap #sidebar .c-widget__title,
#body_wrap #fix_sidebar .c-widget__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

#body_wrap #sidebar .c-widget__title::before,
#body_wrap #fix_sidebar .c-widget__title::before {
  content: "";
  position: static;
  display: block;
  flex: none;
  width: 3px;
  height: 13px;
  background: var(--ntg2-accent);
  transform: none;
}

#body_wrap #sidebar .c-widget__title::after,
#body_wrap #fix_sidebar .c-widget__title::after {
  content: none;
}

#body_wrap #sidebar .widget-title-icon {
  display: none;
}

#body_wrap #sidebar .c-widget__title-meta {
  margin-left: auto;
  color: var(--ntg2-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

/* 検索はヘッダーにあるので、サイドバーでは出さない */
#body_wrap #sidebar .widget_search {
  display: none;
}

/* 記事ページのプロフィールは記事の下の「書いた人」と重なるので出さない */
#body_wrap.single #sidebar .widget_swell_prof_widget {
  display: none;
}

/* 攻略メニュー（mu-plugin nettoge-game-sidemenu.php / CAS のカスタム HTML。.ntg-sidemenu） */
#body_wrap #sidebar .nettoge-cas-guide-menu,
#body_wrap #sidebar .nettoge-cas-guide-menu .textwidget {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#body_wrap #sidebar .nettoge-cas-guide-menu > .c-widget__title {
  display: none;
}

#body_wrap #sidebar .ntg-sidemenu {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#body_wrap #sidebar .ntg-sidemenu__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin: 0 0 4px;
  padding: 0 14px;
  overflow: hidden;
  background:
    var(--ntg2-plate-overlay),
    var(--ntg-sidemenu-hero, none) var(--ntg2-plate-img-pos) / cover no-repeat,
    var(--ntg2-plate-base);
  border: 1px solid var(--ntg2-plate-border);
  border-radius: var(--ntg2-radius);
  box-shadow: none;
  color: var(--ntg2-plate-fg);
  text-decoration: none;
}

#body_wrap #sidebar .ntg-sidemenu__brand:hover {
  border-color: var(--ntg2-teal);
}

#body_wrap #sidebar .ntg-sidemenu__brand::before,
#body_wrap #sidebar .ntg-sidemenu__brand::after {
  content: none;
}

#body_wrap #sidebar .ntg-sidemenu__logo {
  display: block;
  width: auto;
  max-width: 150px;
  height: 30px;
  margin: 0;
  object-fit: contain;
  object-position: left center;
  filter: none;
}

#body_wrap #sidebar .ntg-sidemenu__logo.ntg2-logo-light {
  filter: var(--ntg2-plate-logo-filter);
  opacity: var(--ntg2-plate-logo-opacity);
}

#body_wrap #sidebar .ntg-sidemenu__name {
  color: var(--ntg2-plate-fg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: none;
}

#body_wrap #sidebar .ntg-sidemenu__tag {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-plate-fg);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: none;
}

#body_wrap #sidebar .ntg-sidemenu__tag::after {
  content: " ›";
}

#body_wrap #sidebar .ntg-sidemenu h5 {
  margin: 14px 0 2px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ntg2-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

#body_wrap #sidebar .ntg-sidemenu h5::before,
#body_wrap #sidebar .ntg-sidemenu h5::after {
  content: none;
}

#body_wrap #sidebar .ntg-sidemenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: 0;
}

#body_wrap #sidebar .ntg-sidemenu li {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap #sidebar .ntg-sidemenu li::before {
  content: none;
}

/* 形は左の縦線の一覧のまま、リンクは本文の文中リンクと同じ青い下線（押せると分かるように）。
   文字は最近のコメントと同じ 13px、上下は詰める（2026-09-23 依頼主） */
#body_wrap #sidebar .ntg-sidemenu li > a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 3px 0 3px 12px;
  background: none;
  border: 0;
  border-left: 2px solid var(--ntg2-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ntg2-link);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  text-decoration: none;
}

#body_wrap #sidebar .ntg-sidemenu li > a::before,
#body_wrap #sidebar .ntg-sidemenu li > a::after {
  content: none;
}

/* 下線は文字だけ（右の「注目」などの印には引かない） */
#body_wrap #sidebar .nettoge-guide-menu__label {
  min-width: 0;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

#body_wrap #sidebar .ntg-sidemenu li > a .nettoge-guide-menu__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#body_wrap #sidebar .ntg-sidemenu li > a:hover {
  border-left-color: var(--ntg2-teal);
}

/* 見たリンクは紫（普通のリンクと同じ。visited-links.js の .is-visited とブラウザの :visited）。
   :visited はブラウザが別扱いにするので、.is-visited とは別の指定に分ける */
#body_wrap #sidebar .ntg-sidemenu li > a.is-visited {
  color: var(--ntg2-link-visited);
}

#body_wrap #sidebar .ntg-sidemenu li > a:visited {
  color: var(--ntg2-link-visited);
}

#body_wrap #sidebar .ntg-sidemenu li > a:hover .nettoge-guide-menu__label {
  text-decoration-thickness: 2px;
}

/* 今読んでいる記事: 左の線を赤にして、黒の太字・下線なし（見た印より優先） */
#body_wrap #sidebar .ntg-sidemenu li > a.is-current,
#body_wrap #sidebar .ntg-sidemenu li > a[aria-current="page"],
#body_wrap #sidebar .ntg-sidemenu li > a.is-current.is-visited,
#body_wrap #sidebar .ntg-sidemenu li > a.is-current:visited {
  border-left-color: var(--ntg2-accent);
  color: var(--ntg2-text);
  font-weight: 700;
}

#body_wrap #sidebar .ntg-sidemenu li > a:is(.is-current, [aria-current="page"]) .nettoge-guide-menu__label {
  text-decoration: none;
}

#body_wrap #sidebar .nettoge-guide-menu__badge {
  flex: none;
  align-self: center;
  margin-left: auto;
  padding: 4px 6px;
  background: var(--ntg2-teal-bg);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
  color: var(--ntg2-teal);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* 最近のコメント */
#body_wrap #sidebar .wp-block-latest-comments {
  margin: 0;
  padding: 0;
}

#body_wrap #sidebar .wp-block-latest-comments__comment {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--ntg2-line);
  background: none;
  line-height: 1.55;
}

#body_wrap #sidebar .wp-block-latest-comments__comment::before {
  content: none;
}

#body_wrap #sidebar .wp-block-latest-comments__comment article,
#body_wrap #sidebar .wp-block-latest-comments__comment-meta {
  margin: 0;
  padding: 0;
  color: var(--ntg2-muted);
  font-family: inherit;
  font-size: 11px;
}

#body_wrap #sidebar .wp-block-latest-comments__comment-link {
  display: block;
  margin-bottom: 2px;
  color: var(--ntg2-text);
  font-size: 13px;
  text-decoration: none;
}

#body_wrap #sidebar .wp-block-latest-comments__comment-link:hover {
  color: var(--ntg2-teal);
}

#body_wrap #sidebar .wp-block-latest-comments__comment-author {
  color: var(--ntg2-muted);
  text-decoration: none;
}

/* カテゴリー */
#body_wrap #sidebar .widget_categories ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#body_wrap #sidebar .widget_categories li {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#body_wrap #sidebar .widget_categories li::before {
  content: none;
}

/* 右の 30px は開閉ボタンの列（ボタンの無い行も空けて、数の位置をそろえる） */
#body_wrap #sidebar .widget_categories .nettoge-cat-link,
#body_wrap #sidebar .widget_categories li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 6px 30px 6px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ntg2-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: 13px;
  text-decoration: none;
}

#body_wrap #sidebar .widget_categories .nettoge-cat-link::before,
#body_wrap #sidebar .widget_categories li > a::before {
  content: none;
}

#body_wrap #sidebar .widget_categories .nettoge-cat-link:hover {
  color: var(--ntg2-teal);
}

#body_wrap #sidebar .widget_categories .cat-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* 数は右の列（子のカテゴリは名前が .cat-name で包まれていないので、数の側で右へ寄せる） */
#body_wrap #sidebar .widget_categories .cat-post-count {
  flex: none;
  margin-left: auto;
  color: var(--ntg2-muted);
  font-family: inherit;
  font-size: 12px;
}

#body_wrap #sidebar .widget_categories .c-submenuToggleBtn {
  position: absolute;
  top: 50%;
  right: 0;
  width: 28px;
  height: 28px;
  margin: -14px 0 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--ntg2-muted);
  transform: none;
}

/* SWELL はボタンに枠（::after）を描く。ボタンの位置を変えると枠が行いっぱいに広がって線が重なるので使わない */
#body_wrap #sidebar .widget_categories .c-submenuToggleBtn::after {
  content: none;
}

#body_wrap #sidebar .widget_categories .c-submenuToggleBtn:hover {
  background: var(--ntg2-paper);
  color: var(--ntg2-teal);
}

#body_wrap #sidebar .widget_categories .children .nettoge-cat-link {
  padding-left: 14px;
  color: var(--ntg2-sub);
  font-size: 12.5px;
}

/* プロフィール（コンパクト: 小さいアバターの横に名前と肩書き、下に一言と SNS） */
#body_wrap #sidebar .p-profileBox {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon job"
    "text text"
    "links links";
  column-gap: 12px;
  align-items: center;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ntg2-text);
  text-align: left;
}

#body_wrap #sidebar .p-profileBox__bg {
  display: none;
}

#body_wrap #sidebar .p-profileBox__icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  margin: 0;
  text-align: left;
}

#body_wrap #sidebar .p-profileBox__iconImg {
  width: 48px;
  height: 48px;
  background: var(--ntg2-paper);
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  box-shadow: none;
}

#body_wrap #sidebar .p-profileBox__name {
  grid-area: name;
  align-self: end;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

#body_wrap #sidebar .p-profileBox__job {
  grid-area: job;
  align-self: start;
  margin: 0;
  padding: 0;
  color: var(--ntg2-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}

#body_wrap #sidebar .p-profileBox__text {
  grid-area: text;
  margin: 10px 0 0;
  padding: 0;
  color: var(--ntg2-sub);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: left;
}

#body_wrap #sidebar .p-profileBox__iconList {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  margin: 8px 0 0;
  padding: 0;
}

#body_wrap #sidebar .p-profileBox__iconList .c-iconList__item {
  margin: 0;
}

#body_wrap #sidebar .p-profileBox__iconList .c-iconList__link {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ntg2-line);
  border-radius: 50%;
  box-shadow: none;
  color: var(--ntg2-text);
  font-size: 13px;
  line-height: 1;
}

#body_wrap #sidebar .p-profileBox__iconList .c-iconList__link:hover {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap #sidebar .p-profileBox__iconList .c-iconList__icon {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1;
}

#body_wrap #sidebar .p-profileBox__btn {
  grid-column: 1 / -1;
  margin: 8px 0 0;
}

/* 目次（サイドバーについてくる。v2.js が今読んでいる節に .is-now を付ける） */
#body_wrap #fix_sidebar {
  top: calc(var(--swl-adminbarH, 0px) + var(--ntg2-header-h) + 20px);
}

#body_wrap #fix_sidebar .c-widget {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#body_wrap #fix_sidebar .widget_swell_index {
  max-height: calc(100vh - var(--swl-adminbarH, 0px) - var(--ntg2-header-h) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}

#body_wrap #fix_sidebar .widget_swell_index .c-widget__title {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 0 8px;
  background: var(--ntg2-bg);
}

#body_wrap #fix_sidebar .p-toc {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

#body_wrap #fix_sidebar .p-toc__ttl {
  display: none;
}

#body_wrap #fix_sidebar .p-toc__list,
#body_wrap #fix_sidebar .p-toc__childList {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

#body_wrap #fix_sidebar .p-toc__list {
  counter-reset: ntg2-stoc;
}

#body_wrap #fix_sidebar .p-toc__list > li {
  counter-increment: ntg2-stoc;
}

#body_wrap #fix_sidebar .p-toc__list li {
  margin: 0;
  padding: 0;
  border: 0;
}

#body_wrap #fix_sidebar .p-toc__list li::before,
#body_wrap #fix_sidebar .p-toc__list li::after {
  content: none;
}

/* 左の線は読んでいる所の目印（今の節は青緑）。H2 は番号（本文の目次と同じ 01, 02 …）と字 */
#body_wrap #fix_sidebar .p-toc__link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--ntg2-line);
  color: var(--ntg2-text);
  font-size: 13px;
  line-height: 1.55;
  text-decoration: none;
}

#body_wrap #fix_sidebar .p-toc__list > li > .p-toc__link::before {
  content: counter(ntg2-stoc, decimal-leading-zero);
  flex: none;
  min-width: 1.5em;
  color: var(--ntg2-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* H3: 小さく弱い字にして、頭に短い横線（番号の列の右＝H2 の字の頭にそろえる） */
#body_wrap #fix_sidebar .p-toc__childList .p-toc__link {
  padding: 3px 0 3px 42px;
  color: var(--ntg2-sub);
  font-size: 12px;
  line-height: 1.5;
}

#body_wrap #fix_sidebar .p-toc__childList .p-toc__link::before {
  content: "";
  position: absolute;
  top: calc(3px + 0.75em);
  left: 30px;
  width: 6px;
  height: 1px;
  background: var(--ntg2-line-2);
}

#body_wrap #fix_sidebar .p-toc__link:hover {
  color: var(--ntg2-teal);
  opacity: 1;
}

#body_wrap #fix_sidebar .p-toc__link.is-now {
  border-left-color: var(--ntg2-teal);
  color: var(--ntg2-text);
  font-weight: 700;
}

#body_wrap #fix_sidebar .p-toc__expandBtn {
  display: none;
}

/* ==========================================================================
   11 フッター・固定ボタン・モーダル
   ========================================================================== */

#body_wrap .l-footer.ntg2-footer {
  margin: 0;
  padding: 0;
  background: var(--ntg2-paper);
  border-top: 1px solid var(--ntg2-line);
  color: var(--ntg2-sub);
}

#body_wrap .ntg2-footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-top: 28px;
  padding-bottom: 28px;
  font-size: 13px;
}

#body_wrap .ntg2-footer__logo .nettoge-logo__illust,
#body_wrap .ntg2-footer__logo .nettoge-logo__illust-img {
  width: 26px;
  height: 26px;
}

#body_wrap .ntg2-footer__logo .nettoge-logo__word {
  font-size: 18px;
}

#body_wrap .ntg2-footer__logo .nettoge-logo__sub {
  display: none;
}

#body_wrap .ntg2-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

#body_wrap .ntg2-footer__nav a {
  color: var(--ntg2-sub);
  text-decoration: none;
}

#body_wrap .ntg2-footer__nav a:hover {
  color: var(--ntg2-teal);
}

#body_wrap .ntg2-footer__copy {
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  color: var(--ntg2-muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: left;
}

#body_wrap .l-footer .w-footer,
#body_wrap .l-footer .l-footer__widgetArea {
  background: transparent;
  color: var(--ntg2-sub);
}

/* ページトップ・目次の丸いボタン */
#body_wrap .c-fixBtn {
  width: 44px;
  height: 44px;
  background: var(--ntg2-surface);
  border: 1px solid var(--ntg2-line-2);
  border-radius: 50%;
  box-shadow: var(--ntg2-shadow-float);
  color: var(--ntg2-text);
}

#body_wrap .c-fixBtn:hover {
  background: var(--ntg2-surface);
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap .c-fixBtn__label {
  display: none;
}

#body_wrap .c-fixBtn__icon {
  margin: 0;
  font-size: 16px;
}

/* ==========================================================================
   12 共通部品（lib/nettoge/design/inc/helpers.php のマークアップ）
   ========================================================================== */

/* 節見出し（赤の縦線）と右のリンク */
#body_wrap .ntg2-secHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin: 0 0 16px;
}

#body_wrap .ntg2-secH {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 12px;
  background: none;
  border: 0;
  border-left: 4px solid var(--ntg2-accent);
  border-radius: 0;
  color: var(--ntg2-text);
  font-size: var(--ntg2-sec-h-size);
  font-weight: 700;
  line-height: 1.4;
}

#body_wrap .ntg2-secH::before,
#body_wrap .ntg2-secH::after {
  content: none;
}

#body_wrap .ntg2-secH small {
  color: var(--ntg2-muted);
  font-size: 12px;
  font-weight: 400;
}

#body_wrap .ntg2-secHead__link {
  color: var(--ntg2-teal);
  font-size: 13px;
  text-decoration: none;
}

#body_wrap .ntg2-secHead__link:hover {
  text-decoration: underline;
}

/* サムネイル（16:9） */
#body_wrap .ntg2-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ntg2-paper);
}

#body_wrap .ntg2-thumb__img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* カードの並び */
#body_wrap .ntg2-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#body_wrap .ntg2-pick--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

#body_wrap .ntg2-card {
  display: block;
  overflow: hidden;
  background: var(--ntg2-surface);
  border: 1px solid var(--ntg2-line);
  border-radius: var(--ntg2-radius);
  color: var(--ntg2-text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

#body_wrap .ntg2-card:hover {
  border-color: var(--ntg2-teal);
  transform: translateY(-2px);
}

#body_wrap .ntg2-card__body {
  display: block;
  padding: 12px 14px 14px;
}

#body_wrap .ntg2-card__title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

#body_wrap .ntg2-pick--4 .ntg2-card__body {
  padding: 10px 12px 12px;
}

#body_wrap .ntg2-pick--4 .ntg2-card__title {
  font-size: 13.5px;
}

/* ラベル（青緑） */
#body_wrap .ntg2-label {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 8px;
  background: var(--ntg2-teal-bg);
  border-radius: 3px;
  color: var(--ntg2-teal);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* 小さい一覧（画像 + 題の2列） */
#body_wrap .ntg2-miniList {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#body_wrap .ntg2-miniList__item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ntg2-line);
}

#body_wrap .ntg2-miniList__item::before {
  content: none;
}

#body_wrap .ntg2-miniList__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: var(--ntg2-text);
  text-decoration: none;
}

#body_wrap .ntg2-miniList__link .ntg2-thumb {
  flex: none;
  width: 96px;
  border-radius: 3px;
}

#body_wrap .ntg2-miniList__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.55;
}

#body_wrap .ntg2-miniList__link:hover .ntg2-miniList__title {
  color: var(--ntg2-teal);
}

/* チップ（カテゴリ・タグ） */
#body_wrap .ntg2-chip,
#body_wrap .c-categoryList__link,
#body_wrap .c-tagList__link {
  display: inline-block;
  padding: 0 8px;
  background: transparent;
  border: 1px solid var(--ntg2-line);
  border-radius: 3px;
  box-shadow: none;
  color: var(--ntg2-sub);
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}

#body_wrap .ntg2-chip:hover,
#body_wrap .c-categoryList__link:hover,
#body_wrap .c-tagList__link:hover {
  border-color: var(--ntg2-teal);
  color: var(--ntg2-teal);
}

#body_wrap .c-categoryList__link::before,
#body_wrap .c-tagList__link::before {
  content: none;
}

@media (max-width: 599px) {
  #body_wrap .ntg2-pick {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #body_wrap .ntg2-pick .ntg2-card {
    display: flex;
    align-items: center;
  }

  #body_wrap .ntg2-pick .ntg2-card .ntg2-thumb {
    flex: none;
    width: 42%;
  }

  #body_wrap .ntg2-pick .ntg2-card__body {
    padding: 10px 12px;
  }

  #body_wrap .ntg2-pick .ntg2-card__title {
    font-size: 13px;
  }

  #body_wrap .ntg2-pick .ntg2-label {
    margin-bottom: 6px;
  }

  #body_wrap .ntg2-miniList {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 600px) and (max-width: 959px) {
  #body_wrap .ntg2-pick--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   13 ゲームの帯（.c-nettogeHubLink。明るいテーマは紙色の地に写真を右端だけ、暗いテーマは写真全面）
   ========================================================================== */

#body_wrap .c-nettogeHubLink {
  max-width: none;
  margin: 18px 0 0;
}

#body_wrap .c-nettogeHubLink__anchor {
  gap: 18px;
  min-height: 76px;
  padding: 0 20px;
  overflow: hidden;
  background:
    var(--ntg2-plate-overlay),
    var(--nettoge-hub-link-image, none) var(--ntg2-plate-img-pos) / var(--ntg2-plate-img-size) no-repeat,
    var(--ntg2-plate-base);
  border: 1px solid var(--ntg2-plate-border);
  border-radius: var(--ntg2-radius);
  box-shadow: none;
  color: var(--ntg2-plate-fg);
  text-decoration: none;
  transition: border-color 0.15s ease;
}

#body_wrap .c-nettogeHubLink__anchor:hover,
#body_wrap .c-nettogeHubLink__anchor:focus-visible {
  border-color: var(--ntg2-teal);
  filter: none;
}

#body_wrap #body_wrap .c-nettogeHubLink__logo img,
#body_wrap .c-nettogeHubLink__logo img {
  width: auto !important;
  height: 34px !important;
  max-width: min(200px, 40vw) !important;
  max-height: 34px !important;
  filter: none;
}

#body_wrap .c-nettogeHubLink__logo img.ntg2-logo-light {
  filter: var(--ntg2-plate-logo-filter);
  opacity: var(--ntg2-plate-logo-opacity);
}

/* 明るい地と暗い地で出し分けるロゴ（helpers.php の nettoge_design_logo_pair_html。ハブの帯・まとめの帯・攻略メニュー）。
   ライトは明るい地用の公式ロゴ、ダークは白いロゴ（tokens の --ntg2-logo-on-light / --ntg2-logo-on-dark） */
#body_wrap .ntg2-logo-on-dark,
#body_wrap #sidebar .ntg-sidemenu__logo.ntg2-logo-on-dark {
  display: var(--ntg2-logo-on-dark);
}

#body_wrap .ntg2-logo-on-light,
#body_wrap #sidebar .ntg-sidemenu__logo.ntg2-logo-on-light {
  display: var(--ntg2-logo-on-light);
}

#body_wrap .c-nettogeHubLink__game {
  color: var(--ntg2-plate-fg);
  font-size: 16px;
}

#body_wrap .c-nettogeHubLink__label,
#body_wrap .c-nettogeHubLink.has-logo .c-nettogeHubLink__label {
  color: var(--ntg2-plate-fg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}

#body_wrap .c-nettogeHubLink__anchor::after {
  margin-left: auto;
  color: var(--ntg2-plate-fg);
  font-size: 22px;
  opacity: 0.7;
}

@media (max-width: 599px) {
  #body_wrap .c-nettogeHubLink__anchor {
    gap: 12px;
    min-height: 62px;
    padding: 0 14px;
  }

  #body_wrap .c-nettogeHubLink__logo img,
  #body_wrap .c-nettogeHubLink__logo img.ntg2-logo-light {
    height: 26px !important;
    max-height: 26px !important;
  }

  #body_wrap .c-nettogeHubLink__label,
  #body_wrap .c-nettogeHubLink.has-logo .c-nettogeHubLink__label {
    font-size: 13px;
  }
}

/* ==========================================================================
   14 スマホの目次（floating-header.js が作る #nettoge-mobile-toc。右端の取っ手と左に開くパネル）
   ========================================================================== */

.nettoge-mobile-toc {
  display: none;
}

@media (max-width: 959px) {
  .nettoge-mobile-toc {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--swl-adminbarH, 0px) + var(--ntg2-header-h-sp) + 72px);
    right: 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: var(--ntg2-text);
    pointer-events: none;
  }

  .nettoge-mobile-toc.is-empty {
    display: none;
  }

  .nettoge-mobile-toc__panel {
    position: absolute;
    top: 0;
    right: calc(100% + 8px);
    width: 256px;
    max-width: calc(100vw - 56px);
    max-height: min(62vh, 460px);
    padding: 12px 12px 10px;
    overflow: hidden;
    background: var(--ntg2-surface);
    border: 1px solid var(--ntg2-line-2);
    border-radius: var(--ntg2-radius);
    box-shadow: var(--ntg2-shadow-float);
    opacity: 0;
    pointer-events: none;
    transform: translateX(12px);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nettoge-mobile-toc.is-open .nettoge-mobile-toc__panel {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nettoge-mobile-toc__header {
    margin: 0 0 6px;
    padding: 0 0 6px 10px;
    border-bottom: 1px solid var(--ntg2-line);
    border-left: 3px solid var(--ntg2-accent);
    color: var(--ntg2-text);
    font-size: 13px;
    font-weight: 700;
  }

  .nettoge-mobile-toc__list {
    display: grid;
    gap: 0;
    max-height: calc(min(62vh, 460px) - 3rem);
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
    scrollbar-width: thin;
  }

  .nettoge-mobile-toc__item {
    margin: 0;
  }

  .nettoge-mobile-toc__item.is-h3 {
    margin-left: 14px;
  }

  .nettoge-mobile-toc__link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 6px 7px 10px;
    border-left: 2px solid var(--ntg2-line);
    color: var(--ntg2-sub);
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
  }

  .nettoge-mobile-toc__item.is-h3 .nettoge-mobile-toc__link {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
  }

  .nettoge-mobile-toc__link.is-active {
    background: var(--ntg2-paper);
    border-left-color: var(--ntg2-teal);
    color: var(--ntg2-text);
    font-weight: 700;
  }

  .nettoge-mobile-toc__number {
    flex: none;
    min-width: 1.6em;
    padding: 0;
    background: none;
    color: var(--ntg2-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 1.7;
  }

  .nettoge-mobile-toc__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .nettoge-mobile-toc__handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 34px;
    padding: 10px 0 8px;
    background: var(--ntg2-surface);
    border: 1px solid var(--ntg2-line-2);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    box-shadow: var(--ntg2-shadow-float);
    color: var(--ntg2-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    pointer-events: auto;
  }

  .nettoge-mobile-toc__handle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 4px;
    border-top: 2px solid var(--ntg2-teal);
    border-right: 2px solid var(--ntg2-teal);
    transform: scaleX(-1) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .nettoge-mobile-toc.is-open .nettoge-mobile-toc__handle::after {
    transform: scaleX(-1) rotate(225deg);
  }
}