/* 窓ハブ（window-hub）。2026-10-14（FF14 攻略トップ 23175 から）
   ジョブ別ガイドのハブ（.ntg-jobhub。rotation-timeline の style.css）と同じ「クラシック FF の青い窓の中に紙のカード」。
   上から 新着（大きいサムネ。index-hub と同じ）→ 検索 → 大分類の窓。窓を押すと、その行のすぐ下に中身の大きい窓が開く（JS が置き場所を決める）。
   - 窓: 名前は 1 行、説明は 2 行分を取り、同じ行の窓は高さを伸ばしてそろえる。「ひらく ▼」は一番下（依頼主 10-14「高さにばらつきがあるのがきになる」）
   - 窓・カードに乗せると、ジョブ別ハブと同じドット絵の指が左から出る。▼ は FF のメッセージ送りのように跳ねる
   - 列の数は本文の幅（container query）: 840px〜 3 列、540px〜 2 列、それより狭いと 1 列
   本文の a・p・ul・img の SWELL の飾りより強くするため .ntg-whub を頭に付ける（!important なし） */

.ntg-whub {
  --whub-w1: #3a5ec8;
  --whub-w2: #0d1a5c;
  --whub-edge: #fff;
  --whub-in: #6f7aa6;
  --whub-yellow: #ffe98a;
  --whub-paper: var(--ntg2-paper, #f7f6f2);
  --whub-paper2: var(--ntg2-paper-2, #eceae4);
  --whub-text: var(--ntg2-text, #23262b);
  --whub-sub: var(--ntg2-text-2, #4c5058);
  --whub-muted: var(--ntg2-muted, #80838a);
  --whub-line: var(--ntg2-line-2, #c9ccd3);
  --whub-accent: var(--ntg2-accent, #b72305);
  --whub-finger: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' shape-rendering='crispEdges'><rect x='5' y='0' width='4' height='1' fill='%23000000'/><rect x='4' y='1' width='1' height='1' fill='%23000000'/><rect x='5' y='1' width='1' height='1' fill='%234ca6c0'/><rect x='6' y='1' width='3' height='1' fill='%23ffffff'/><rect x='9' y='1' width='1' height='1' fill='%23000000'/><rect x='3' y='2' width='1' height='1' fill='%23000000'/><rect x='4' y='2' width='1' height='1' fill='%234ca6c0'/><rect x='5' y='2' width='2' height='1' fill='%23ffffff'/><rect x='7' y='2' width='3' height='1' fill='%234ca6c0'/><rect x='10' y='2' width='5' height='1' fill='%23000000'/><rect x='1' y='3' width='1' height='1' fill='%23000000'/><rect x='3' y='3' width='1' height='1' fill='%23000000'/><rect x='4' y='3' width='1' height='1' fill='%234ca6c0'/><rect x='5' y='3' width='10' height='1' fill='%23ffffff'/><rect x='15' y='3' width='1' height='1' fill='%23000000'/><rect x='0' y='4' width='1' height='1' fill='%23000000'/><rect x='1' y='4' width='1' height='1' fill='%234ca6c0'/><rect x='2' y='4' width='1' height='1' fill='%23000000'/><rect x='3' y='4' width='1' height='1' fill='%234ca6c0'/><rect x='4' y='4' width='12' height='1' fill='%23ffffff'/><rect x='16' y='4' width='1' height='1' fill='%23000000'/><rect x='0' y='5' width='1' height='1' fill='%23000000'/><rect x='1' y='5' width='1' height='1' fill='%23ffffff'/><rect x='2' y='5' width='1' height='1' fill='%234ca6c0'/><rect x='3' y='5' width='8' height='1' fill='%23ffffff'/><rect x='11' y='5' width='4' height='1' fill='%234ca6c0'/><rect x='15' y='5' width='1' height='1' fill='%23000000'/><rect x='0' y='6' width='1' height='1' fill='%23000000'/><rect x='1' y='6' width='1' height='1' fill='%23ffffff'/><rect x='2' y='6' width='1' height='1' fill='%234ca6c0'/><rect x='3' y='6' width='7' height='1' fill='%23ffffff'/><rect x='10' y='6' width='1' height='1' fill='%234ca6c0'/><rect x='11' y='6' width='4' height='1' fill='%23000000'/><rect x='0' y='7' width='1' height='1' fill='%23000000'/><rect x='1' y='7' width='1' height='1' fill='%23ffffff'/><rect x='2' y='7' width='1' height='1' fill='%234ca6c0'/><rect x='3' y='7' width='7' height='1' fill='%23ffffff'/><rect x='10' y='7' width='1' height='1' fill='%234ca6c0'/><rect x='11' y='7' width='1' height='1' fill='%23000000'/><rect x='0' y='8' width='1' height='1' fill='%23000000'/><rect x='1' y='8' width='3' height='1' fill='%234ca6c0'/><rect x='4' y='8' width='6' height='1' fill='%23ffffff'/><rect x='10' y='8' width='1' height='1' fill='%234ca6c0'/><rect x='11' y='8' width='1' height='1' fill='%23000000'/><rect x='0' y='9' width='1' height='1' fill='%23000000'/><rect x='1' y='9' width='9' height='1' fill='%234ca6c0'/><rect x='10' y='9' width='1' height='1' fill='%23000000'/><rect x='0' y='10' width='1' height='1' fill='%23000000'/><rect x='1' y='10' width='1' height='1' fill='%234ca6c0'/><rect x='2' y='10' width='1' height='1' fill='%23000000'/><rect x='3' y='10' width='7' height='1' fill='%234ca6c0'/><rect x='10' y='10' width='1' height='1' fill='%23000000'/><rect x='1' y='11' width='1' height='1' fill='%23000000'/><rect x='3' y='11' width='1' height='1' fill='%23000000'/><rect x='4' y='11' width='5' height='1' fill='%234ca6c0'/><rect x='9' y='11' width='1' height='1' fill='%23000000'/><rect x='3' y='12' width='1' height='1' fill='%23000' fill-opacity='.5'/><rect x='4' y='12' width='6' height='1' fill='%23000000'/><rect x='2' y='13' width='12' height='1' fill='%23000' fill-opacity='.5'/><rect x='0' y='14' width='17' height='1' fill='%23000' fill-opacity='.5'/><rect x='0' y='15' width='15' height='1' fill='%23000' fill-opacity='.5'/><rect x='1' y='16' width='8' height='1' fill='%23000' fill-opacity='.5'/></svg>");
  --whub-tri: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8' shape-rendering='crispEdges'><path d='M0 0h13v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1z' fill='%23000'/><path d='M1 0h11v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1z' fill='%23fff'/></svg>");
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 4px 0 2em;
  color: var(--whub-text);
  line-height: 1.6;
}

html[data-nettoge-theme="dark"] .ntg-whub {
  --whub-w1: #2c4aa6;
  --whub-w2: #0a1244;
  --whub-edge: #d8dcf0;
  --whub-sub: #c3c8d4;
  --whub-line: rgb(255 255 255 / .16);
}

.ntg-whub a { color: inherit; text-decoration: none; box-shadow: none; }
.ntg-whub p, .ntg-whub ul, .ntg-whub li { margin: 0; padding: 0; }
.ntg-whub ul { list-style: none; }
.ntg-whub li::before { content: none; }
.ntg-whub img { display: block; margin: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none; }
.ntg-whub picture { display: contents; }
.ntg-whub [hidden] { display: none; }
.ntg-whub button { margin: 0; font: inherit; color: inherit; }

/* ---- 新着（大きいサムネ。index-hub と同じ） ---- */
.ntg-whub .ntg-whub__h { margin-bottom: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--whub-sub); }
.ntg-whub .ntg-whub__nlist { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: 6px; }
.ntg-whub .ntg-whub__nlist > li { flex: 0 0 168px; scroll-snap-align: start; }
.ntg-whub .ntg-whub__ni { display: grid; gap: 6px; }
.ntg-whub .ntg-whub__ec { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--whub-paper); }
.ntg-whub .ntg-whub__ec img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.ntg-whub .ntg-whub__nl { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 12px; line-height: 1.5; color: var(--whub-muted); }
.ntg-whub .ntg-whub__nd { color: var(--whub-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.ntg-whub .ntg-whub__nt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.5; }
.ntg-whub .ntg-whub__ni:hover .ntg-whub__nt { text-decoration: underline; text-underline-offset: 3px; }

/* ---- 検索 ---- */
.ntg-whub .ntg-whub__in { position: relative; display: block; margin: 0; }
.ntg-whub .ntg-whub__in svg { position: absolute; top: 13px; left: 13px; color: var(--whub-muted); pointer-events: none; }
.ntg-whub .ntg-whub__in input {
  box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 14px 0 40px;
  border: 1px solid var(--ntg2-line-2, #d3cec7); border-radius: var(--ntg2-radius, 6px);
  background: var(--whub-paper); color: var(--whub-text); font: inherit; box-shadow: none; appearance: none;
}
.ntg-whub .ntg-whub__in input:focus { outline: 2px solid var(--whub-w1); outline-offset: -1px; }

/* ---- 窓（ジョブ別ハブの .ntg-jobhub__role と同じ作り） ---- */
.ntg-whub .ntg-whub__wins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.ntg-whub .ntg-whub__win,
.ntg-whub .ntg-whub__panel {
  position: relative;
  border: 2px solid var(--whub-edge);
  border-radius: 8px;
  outline: 2px solid var(--whub-in);
  outline-offset: -5px;
  background: linear-gradient(180deg, var(--whub-w1), var(--whub-w2));
  box-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 3px 10px rgb(0 0 0 / .25);
  color: #fff;
}
.ntg-whub .ntg-whub__win { display: flex; flex-direction: column; }
.ntg-whub .ntg-whub__btn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 10px; border: 0; background: none; color: #fff; font: inherit; text-align: left; text-shadow: 1px 1px 0 #000; cursor: pointer; }
.ntg-whub .ntg-whub__wico {
  flex: none; width: 44px; height: 44px; padding: 4px; box-sizing: border-box; object-fit: contain;
  border: 1px solid rgb(255 255 255 / .45); border-radius: 8px; background: rgb(0 0 0 / .22); filter: drop-shadow(1px 1px 0 rgb(0 0 0 / .6));
}
.ntg-whub .ntg-whub__wtx { flex: 1; min-width: 0; display: grid; }
.ntg-whub .ntg-whub__wname { font-size: 1.15em; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntg-whub .ntg-whub__wlead { min-height: 3em; font-size: .82em; line-height: 1.5; opacity: .92; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ntg-whub .ntg-whub__count {
  flex: none; align-self: flex-start; padding: 2px 10px; border: 1px solid rgb(255 255 255 / .55); border-radius: 999px;
  background: rgb(0 0 0 / .25); font-size: .78em; font-weight: 700; white-space: nowrap;
}
.ntg-whub .ntg-whub__pv { flex: 1; display: grid; align-content: start; gap: 2px; margin: 0 10px; padding: 8px 10px; border-top: 1px solid rgb(255 255 255 / .25); font-size: .86em; }
.ntg-whub .ntg-whub__pl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; opacity: .95; }
.ntg-whub .ntg-whub__pl:hover { text-decoration: underline; text-underline-offset: 3px; }
.ntg-whub .ntg-whub__open { margin-top: auto; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 2px 14px 10px; font-size: .78em; font-weight: 700; opacity: .9; }
.ntg-whub .ntg-whub__tri { display: block; width: 13px; height: 8px; background: var(--whub-tri) center / 13px 8px no-repeat; image-rendering: pixelated; animation: ntg-whub-bob .8s steps(2) infinite; }
@keyframes ntg-whub-bob { 50% { transform: translateY(2px); } }
.ntg-whub .ntg-whub__win.is-open { outline-color: var(--whub-yellow); }
.ntg-whub .ntg-whub__win.is-open .ntg-whub__wname { color: var(--whub-yellow); }
.ntg-whub .ntg-whub__win.is-open .ntg-whub__tri { transform: rotate(180deg); animation: none; }
.ntg-whub .ntg-whub__win.is-open::after {
  content: ""; position: absolute; left: 50%; bottom: -15px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--whub-edge); clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 2;
}

/* 指のカーソル（ジョブ別ハブと同じドット絵・出方） */
.ntg-whub .ntg-whub__btn::before,
.ntg-whub .ntg-whub__card::before {
  content: ""; position: absolute; width: 30px; height: 30px; background: var(--whub-finger) left top / 30px 30px no-repeat;
  image-rendering: pixelated; opacity: 0; transform: translateX(-4px); transition: opacity .12s ease, transform .12s ease; pointer-events: none; z-index: 3;
}
.ntg-whub .ntg-whub__btn::before { top: 20px; left: -16px; }
.ntg-whub .ntg-whub__card::before { top: 6px; left: -12px; }
.ntg-whub .ntg-whub__btn:is(:hover, :focus-visible)::before,
.ntg-whub .ntg-whub__card:is(:hover, :focus-visible)::before { opacity: 1; transform: none; animation: ntg-whub-idle .9s .12s infinite; }
@keyframes ntg-whub-idle { 0%, 49.9% { translate: 0 0; } 50%, 100% { translate: -3px 0; } }
.ntg-whub .ntg-whub__btn:focus-visible { outline: 2px solid var(--whub-yellow); outline-offset: -4px; }

/* ---- 開いた中身（横いっぱいの大きい窓） ---- */
.ntg-whub .ntg-whub__panel { display: none; grid-column: 1 / -1; padding: 0 0 12px; }
.ntg-whub .ntg-whub__panel.is-open { display: block; animation: ntg-whub-open .22s ease-out; }
@keyframes ntg-whub-open { from { opacity: 0; transform: translateY(-6px); } }
.ntg-whub .ntg-whub__phead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px 10px; border-bottom: 1px solid rgb(255 255 255 / .28); text-shadow: 1px 1px 0 #000; }
.ntg-whub .ntg-whub__pname { display: flex; align-items: baseline; gap: 8px; margin-right: auto; font-size: 1.15em; font-weight: 700; }
.ntg-whub .ntg-whub__gn { font-size: 12px; font-weight: 400; opacity: .85; }
.ntg-whub .ntg-whub__hub { padding: 4px 12px; border: 1px solid rgb(255 255 255 / .6); border-radius: 999px; background: rgb(0 0 0 / .25); color: #fff; font-size: .86em; font-weight: 700; }
.ntg-whub .ntg-whub__hub:hover { background: rgb(0 0 0 / .4); }
.ntg-whub .ntg-whub__close { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; background: none; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.ntg-whub .ntg-whub__close .ntg-whub__tri { transform: rotate(180deg); animation: none; }
/* 中身は全部のカード。まとまりは新聞のような縦の列へ上から流し込む（少ないまとまりの横を空けない。依頼主 10-14「うまいことレイアウト」）。
   まとまりの名前は列の一番下に取り残さない（break-after: avoid）、カードは途中で切らない（break-inside: avoid） */
.ntg-whub .ntg-whub__pbody { columns: 1; column-gap: 12px; padding: 12px 12px 0; }
.ntg-whub .ntg-whub__grp { margin-bottom: 6px; }
/* 6 本以下のまとまりは列をまたがない（2 列目の頭に名前の無い続きを作らない）。長いまとまり（.is-long）だけ流す */
.ntg-whub .ntg-whub__grp:not(.is-long) { break-inside: avoid; }
.ntg-whub .ntg-whub__gh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px 4px; padding-top: 2px; font-size: .92em; font-weight: 700; text-shadow: 1px 1px 0 #000; break-after: avoid; }
.ntg-whub .ntg-whub__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* 紙のカード（ジョブ別ハブの .ntg-jobhub__card と同じ） */
.ntg-whub .ntg-whub__card {
  position: relative; display: grid; break-inside: avoid; margin-bottom: 8px; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "ico name" "ico line";
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 12px 9px 14px;
  border: 1px solid var(--whub-line); border-radius: 8px; background: var(--whub-paper); color: var(--whub-text); text-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ntg-whub .ntg-whub__card:is(:hover, :focus-visible) { border-color: var(--whub-w1); box-shadow: 0 0 0 2px var(--whub-w1), 0 4px 10px rgb(0 0 0 / .18); transform: translateY(-2px); outline: none; }
.ntg-whub .ntg-whub__ico {
  position: relative; grid-area: ico; width: 52px; height: 52px; padding: 4px; box-sizing: border-box;
  border: 1px solid var(--whub-in); border-radius: 8px; background: linear-gradient(180deg, var(--whub-w1), var(--whub-w2)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
}
.ntg-whub .ntg-whub__ico img { width: 100%; height: 100%; object-fit: contain; }
.ntg-whub .ntg-whub__name { grid-area: name; align-self: end; font-size: .98em; font-weight: 700; line-height: 1.35; }
.ntg-whub .ntg-whub__line { grid-area: line; align-self: start; font-size: .8em; line-height: 1.5; color: var(--whub-sub); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* NEW（7 日以内）は絵の角に重ねる（行の幅を変えない） */
.ntg-whub .is-new .ntg-whub__ico::after,
.ntg-whub .is-new .ntg-whub__ec::after {
  content: "NEW"; position: absolute; top: -5px; right: -6px; padding: 0 3px; border-radius: 3px;
  background: var(--whub-accent); color: #fff; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .03em; text-shadow: none;
}

/* ---- 検索中 ---- */
.ntg-whub.is-search .ntg-whub__wins,
.ntg-whub.is-search .ntg-whub__new { display: none; }
.ntg-whub .ntg-whub__res .ntg-whub__card { margin-bottom: 0; }
.ntg-whub .ntg-whub__none { padding: 20px 0; color: var(--whub-sub); text-align: center; }

/* ---- 列の数（本文の幅で） ---- */
@container (min-width: 540px) {
  .ntg-whub .ntg-whub__wins,
  .ntg-whub .ntg-whub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ntg-whub .ntg-whub__pbody { columns: 2; }
}
@container (min-width: 680px) {
  .ntg-whub .ntg-whub__nlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; overflow: visible; padding-bottom: 0; }
}
@container (min-width: 840px) {
  .ntg-whub .ntg-whub__wins,
  .ntg-whub .ntg-whub__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ntg-whub .ntg-whub__pbody { columns: 3; }
}
/* 1 列のとき（スマホ）は窓の主な記事を出さない（窓を短くして、全部の分類を早く見せる） */
@container (max-width: 539px) {
  .ntg-whub .ntg-whub__pv { display: none; }
  /* スマホは窓が画面の左端から 8px なので、窓の外へ出す指は画面の外で切れた（依頼主 10-16）。
     中身を右へ寄せて、指を窓の内側に置く（乗せたときの -4px と待機の -3px の揺れを足しても画面に収まる） */
  .ntg-whub .ntg-whub__btn { padding-left: 26px; }
  .ntg-whub .ntg-whub__btn::before { left: -2px; }
  /* 検索結果のカードも、開いた中身と同じだけ右へ寄せて指を画面に収める */
  .ntg-whub .ntg-whub__res .ntg-whub__grid { padding-left: 12px; }
}

/* スマホ・タブレット（〜959px）はテーマの「目次」のつまみ（.nettoge-mobile-dock。右端に固定・幅 32px）が、窓の中の本数の札・「ひらく ▼」・
   開いた中身の文字に重なった（依頼主 10-16「右側のもくじとかぶってる」「枠に文字がかぶってた」「カード自体は同じ幅がよかった」）。
   窓の幅はそのまま、つまみがあるページでは窓の中の文字だけをつまみの分（30px）左へ寄せる */
@media (max-width: 959px) {
  body:has(.nettoge-mobile-dock) .ntg-whub { --whub-dock: 30px; }
  body:has(.nettoge-mobile-dock) .ntg-whub .ntg-whub__btn { padding-right: calc(14px + var(--whub-dock)); }
  body:has(.nettoge-mobile-dock) .ntg-whub .ntg-whub__open { padding-right: calc(14px + var(--whub-dock)); }
  body:has(.nettoge-mobile-dock) .ntg-whub .ntg-whub__phead { padding-right: calc(16px + var(--whub-dock)); }
  body:has(.nettoge-mobile-dock) .ntg-whub .ntg-whub__pbody { padding-right: calc(12px + var(--whub-dock)); }
}

@media (prefers-reduced-motion: reduce) {
  .ntg-whub .ntg-whub__tri,
  .ntg-whub .ntg-whub__btn::before,
  .ntg-whub .ntg-whub__card::before { animation: none; }
  .ntg-whub .ntg-whub__panel.is-open { animation: none; }
  .ntg-whub .ntg-whub__card { transition: none; }
}