/*
 * 分割表示（nettoge/section-break）
 * front: 投稿の設定で分割表示がオンの記事だけ読む。デスクトップはサイドの一覧、モバイルは下のバー。
 * html.ntg-split-active … 章一覧が動いている（分割・全文どちらも）。html.ntg-split-on … 分割表示のときだけ。
 * 色は --ntg-* トークン（暗色モードの定義が対になっている）。角は付けない（サイトの装飾と合わせる）。
 */

/* 章 */
.ntg-split__page.is-hidden {
  display: none;
}

/* ---------- 章末の 前へ / 次へ ----------
   モバイルの下バーと同じ形の1本の帯（前へ ｜ n / N ｜ 次へ）。
   記事下のタグ・シェア・関連記事・コメントは最後の章にしか出さない（下の .ntg-split-last）ので、
   章の途中ではこの帯がページの最後になり、見逃されない。Viva New Vegas の最下部の送りと同じ考え方。 */
.ntg-split__pager {
  margin: 3em 0 0;
}
.ntg-split__pager:empty {
  display: none;
  margin: 0;
}
.ntg-split__pagerbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--ntg-steel, #6b6f76);
  border-top: 3px solid var(--ntg-teal, #2f7a72);
  background: var(--ntg-surface-1, #fff);
}
.ntg-split__pagerbtn,
.ntg-split__pagerspace {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 76px;
  padding: 12px 16px;
  text-decoration: none;
  line-height: 1.35;
}
.ntg-split__pagerbtn.-prev {
  color: var(--ntg-ink, #1a1c1e);
  text-align: left;
}
.ntg-split__pagerbtn.-prev:hover {
  background: var(--ntg-surface-2, #f4f4f5);
}
.ntg-split__pagerbtn.-next {
  text-align: right;
  background: var(--ntg-band-teal, var(--ntg-teal, #2f7a72));
  color: var(--ntg-on-band, #fff);
}
.ntg-split__pagerbtn.-next:hover {
  filter: brightness(1.08);
}
.ntg-split__pagerspace {
  color: var(--ntg-muted, #5c6168);
  font-size: 13px;
}
.ntg-split__pagerspace.-end {
  text-align: right;
}
.ntg-split__pagermid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 18px;
  border-left: 1px solid var(--ntg-steel, #6b6f76);
  border-right: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-3, #e8e9ea);
  white-space: nowrap;
}
.ntg-split__pagerpos {
  font-size: 16px;
  font-weight: 700;
  color: var(--ntg-teal, #2f7a72);
  font-variant-numeric: tabular-nums;
}
.ntg-split__pagerlead {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ntg-muted, #5c6168);
}
.ntg-split__pagerlbl {
  font-size: 11px;
  color: var(--ntg-muted, #5c6168);
}
.ntg-split__pagerbtn.-next .ntg-split__pagerlbl {
  color: var(--ntg-on-band, #fff);
  opacity: 0.85;
}
.ntg-split__pagerttl {
  font-size: 17px;
  font-weight: 700;
}
.ntg-split__pagerbtn.-prev .ntg-split__pagerttl::before {
  content: "‹ ";
}
.ntg-split__pagerbtn.-next .ntg-split__pagerttl::after {
  content: " ›";
}

@media (max-width: 599px) {
  .ntg-split__pagerbar {
    grid-template-columns: 1fr;
  }
  .ntg-split__pagermid {
    order: -1;
    flex-direction: row;
    gap: 10px;
    padding: 8px 14px;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--ntg-steel, #6b6f76);
  }
  /* スマホは次へを先に */
  .ntg-split__pagerbtn.-next {
    order: 0;
  }
  .ntg-split__pagerbtn.-prev,
  .ntg-split__pagerspace.-prev {
    order: 1;
  }
  .ntg-split__pagerspace.-prev {
    display: none;
  }
  .ntg-split__pagerbtn,
  .ntg-split__pagerspace {
    min-height: 64px;
  }
}

/* ---------- 記事の頭は最初の章だけ ----------
   パンくず・題名・カテゴリや日付・PR表記は、章を切り替えるたびに付いて回ると目障りなので、
   分割表示では最初の章にだけ出す。html.ntg-split-first は「最初の章を見ている」か「全文表示」のとき JS が付ける。 */
html.ntg-split-on:not(.ntg-split-first) #breadcrumb,
html.ntg-split-on:not(.ntg-split-first) .p-articleHead,
html.ntg-split-on:not(.ntg-split-first) .p-articleMetas.-top,
html.ntg-split-on:not(.ntg-split-first) .c-prNotation {
  display: none;
}

/* ---------- 記事下は最後の章だけ ----------
   分割表示では、タグ・シェア・前後記事・関連記事・コメントを最後の章にだけ出す。
   途中の章に毎回出ると、章送りの帯がそれらと並んで埋もれる。
   html.ntg-split-last は「最後の章を見ている」か「全文表示」のとき JS が付ける。 */
html.ntg-split-on:not(.ntg-split-last) .p-articleFoot,
html.ntg-split-on:not(.ntg-split-last) .c-shareBtns.-bottom,
html.ntg-split-on:not(.ntg-split-last) #after_article,
html.ntg-split-on:not(.ntg-split-last) #comments {
  display: none;
}

/* ---------- サイドの一覧（デスクトップ） ---------- */
.ntg-split__side {
  margin: 0 0 24px;
}
.ntg-split__nav {
  border: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-1, #fff);
}
.ntg-split__navhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-3, #e8e9ea);
}
.ntg-split__navttl {
  font-size: 13px;
  font-weight: 700;
  color: var(--ntg-ink, #1a1c1e);
}
.ntg-split__count {
  font-size: 12px;
  color: var(--ntg-muted, #5c6168);
  font-variant-numeric: tabular-nums;
}
.ntg-split__list {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}
.ntg-split__list > li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ntg-split__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  color: var(--ntg-ink, #1a1c1e);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-left: 4px solid transparent;
}
.ntg-split__item:hover {
  background: var(--ntg-surface-2, #f4f4f5);
}
.ntg-split__item.is-current {
  border-left-color: var(--ntg-teal, #2f7a72);
  background: color-mix(in srgb, var(--ntg-teal, #2f7a72) 12%, var(--ntg-surface-1, #fff));
  font-weight: 700;
}
.ntg-split__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--ntg-surface-3, #e8e9ea);
  color: var(--ntg-ink, #1a1c1e);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ntg-split__item.is-current .ntg-split__num {
  background: var(--ntg-teal, #2f7a72);
  color: var(--ntg-on-band, #fff);
}
.ntg-split__ttl {
  flex: 1 1 auto;
  min-width: 0;
}
.ntg-split__toggle {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--ntg-steel, #6b6f76);
  background: var(--ntg-surface-2, #f4f4f5);
  color: var(--ntg-muted, #5c6168);
  font-size: 12px;
  cursor: pointer;
}
.ntg-split__toggle:hover {
  color: var(--ntg-ink, #1a1c1e);
}

/* 分割表示（PC）のサイドバー: 章一覧だけを残して上に張り付ける。ほかのウィジェットは出さない。
   章一覧が画面より高い記事（章がとても多い）だけ、一覧の中でスクロールする */
@media (min-width: 960px) {
  #sidebar.is-ntg-split > :not(.ntg-split__side) {
    display: none;
  }
  .ntg-split__side.-stick {
    position: sticky;
    top: calc(8px + var(--swl-adminbarH, 0px) + var(--swl-fix_headerH, 0px));
    max-height: calc(100vh - 16px - var(--swl-adminbarH, 0px) - var(--swl-fix_headerH, 0px));
    overflow-y: auto;
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
  }
  .ntg-split__side.-stick:hover,
  .ntg-split__side.-stick:focus-within {
    scrollbar-color: var(--scrollbar-thumb, #c8c4bc) var(--scrollbar-track, transparent);
  }
  .ntg-split__side.-stick::-webkit-scrollbar {
    width: 6px;
  }
  .ntg-split__side.-stick::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0;
  }
  .ntg-split__side.-stick:hover::-webkit-scrollbar-thumb,
  .ntg-split__side.-stick:focus-within::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #c8c4bc);
  }
}

/* 章一覧が出ているあいだ（分割・全文どちらも）はSWELLの目次ウィジェットを隠す。章一覧が目次の代わり */
html.ntg-split-active .widget_swell_index {
  display: none;
}

/* 分割表示では本文の頭の目次（SWELLの自動目次）も出さない。1章目に全見出しが並んで、章一覧と二重になる。
   全文表示では元どおり出る */
html.ntg-split-on .post_content .p-toc {
  display: none;
}

/* ---------- モバイルの下バーとシート ---------- */
.ntg-split__bar {
  display: none;
}
.ntg-split__sheet {
  display: none;
}

/* --ntg-bar-h はバーの高さ。--ntg-bar-lift は下から出る AdSense のアンカー広告の高さ（JSが測って入れる）。
   バー・本文の余白・SWELLの固定ボタンは全部この2つで位置が決まるので、広告が出てもかぶらない */
html.ntg-split-active {
  --ntg-bar-h: 46px;
  --ntg-bar-lift: 0px;
}

@media (max-width: 959px) {
  .ntg-split__side {
    display: none;
  }
  html.ntg-split-active body {
    padding-bottom: calc(var(--ntg-bar-h) + 8px + var(--ntg-bar-lift));
  }

  /* 下バー。記事下の枠と紛れないよう、上に teal の進捗線を出し、送りボタンは塗りにする */
  html.ntg-split-active .ntg-split__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--ntg-bar-lift);
    z-index: 9000;
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    height: var(--ntg-bar-h);
    border-top: 1px solid var(--ntg-steel, #6b6f76);
    background: var(--ntg-surface-1, #fff);
    box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.22);
    transition: bottom 0.2s ease-out;
  }
  .ntg-split__barprog {
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: var(--ntg-bar-progress, 0%);
    background: var(--ntg-teal, #2f7a72);
    transition: width 0.2s ease-out;
  }
  .ntg-split__barbtn {
    margin: 5px;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--ntg-band-teal, var(--ntg-teal, #2f7a72));
    color: var(--ntg-on-band, #fff);
    font-size: 22px;
    line-height: 1;
  }
  .ntg-split__barbtn:disabled {
    background: var(--ntg-surface-3, #e8e9ea);
    color: var(--ntg-muted, #5c6168);
    opacity: 1;
  }
  .ntg-split__barcur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--ntg-ink, #1a1c1e);
  }
  .ntg-split__barnum {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--ntg-teal, #2f7a72);
    font-variant-numeric: tabular-nums;
  }
  .ntg-split__bartxt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
  }
  .ntg-split__barcaret {
    flex: 0 0 auto;
    font-size: 8px;
    color: var(--ntg-muted, #5c6168);
  }

  /* ---- モバイルの目次（シート） ---- */
  .ntg-split__sheet.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9100;
  }
  .ntg-split__sheetbg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
  }
  .ntg-split__sheetbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--ntg-bar-lift);
    max-height: 82vh;
    overflow: auto;
    overscroll-behavior: contain;
    border-top: 3px solid var(--ntg-teal, #2f7a72);
    background: var(--ntg-surface-1, #fff);
  }
  .ntg-split__sheethead {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ntg-steel, #6b6f76);
    background: var(--ntg-surface-3, #e8e9ea);
  }
  .ntg-split__sheetttl {
    font-size: 13px;
    font-weight: 700;
    color: var(--ntg-ink, #1a1c1e);
  }
  .ntg-split__sheetcount {
    font-size: 12px;
    color: var(--ntg-muted, #5c6168);
    font-variant-numeric: tabular-nums;
  }
  .ntg-split__sheetbox .ntg-split__item {
    min-height: 52px;
    font-size: 15px;
  }

  /* いま開いている章の中の見出し。ここが目次の代わりになる */
  .ntg-split__sublist {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
    border-left: 4px solid var(--ntg-teal, #2f7a72);
    background: color-mix(in srgb, var(--ntg-teal, #2f7a72) 7%, var(--ntg-surface-1, #fff));
  }
  .ntg-split__sublist > li {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ntg-split__subitem {
    display: block;
    min-height: 44px;
    padding: 11px 14px 11px 46px;
    color: var(--ntg-ink, #1a1c1e);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
  }
  .ntg-split__subitem.-h3 {
    padding-left: 60px;
    font-size: 13px;
    color: var(--ntg-muted, #5c6168);
  }
  .ntg-split__subitem::before {
    content: "– ";
    color: var(--ntg-muted, #5c6168);
  }
  body.ntg-split-sheet-open {
    overflow: hidden;
  }

  /* SWELLの固定ボタン（トップへ戻る等）を、下バーと広告のぶんだけ持ち上げる */
  html.ntg-split-active .p-fixBtnWrap {
    bottom: calc(var(--ntg-bar-h) + 12px + var(--ntg-bar-lift));
  }

  /* この記事の目次は下バーの中央（シート）に入っている。二重に置かないし、下バーとも重なる。
     サイト共通のモバイル目次（floating-header.js が作る右下のタブ）とSWELLの目次ボタンは、この記事では出さない */
  html.ntg-split-active #nettoge-mobile-toc,
  html.ntg-split-active #fix_tocbtn {
    display: none;
  }
}