/**
* Nettoge Core - Rotation Timeline（スキル回しの時系列）
* 2026-09-23 依頼主「スマホでも、PCでも見やすくしたい」「スマホ表示なら縦 上から下へのTimeline」「ライトテーマ、ダークテーマ」「もっと文字大きくても良い」。
*
* 1つの HTML を、置かれた場所の幅（コンテナクエリ）で切り替える:
* 狭い（スマホ・640px 未満）: 縦の時系列。1行＝番号・技・その後に挟む技。効果時間は左端の色の縦線
* 広い（PC）: 横並び。挟む技は上、番号は下、効果時間は下の色の線
* 色はサイトのテーマ（html[data-nettoge-theme]）に合わせる。li のテーマの装飾を受けないよう div で組む。
*/
.ntg-rot {
--rot-fg: #1d2130;
--rot-mut: #505667;
--rot-line: #e1e4ea;
--rot-border: #c3c9d3;
--rot-card: #f3f5f8;
--rot-pre: #a8650d;
--rot-red: #d24a3c;
--rot-blue: #3a76c8;
--rot-orange: #c77612;
--rot-green: #3d9a5b;
--rot-yellow: #d4a20f;
container-type: inline-size;
margin: 1.6em 0;
padding: 16px 16px 12px;
/* 2026-09-24 依頼主「枠が薄く見づらい」: 枠は --rot-border（本文の地との差をはっきり）。区切り線（凡例の下・注の上）も同じ色 */
border: 1px solid var(--rot-border);
border-radius: 10px;
background: var(--rot-card);
color: var(--rot-fg);
font-size: 16px;
line-height: 1.5;
}
html[data-nettoge-theme="dark"] .ntg-rot {
--rot-fg: #eceef3;
--rot-mut: #b3b8c5;
--rot-line: #33363f;
--rot-border: #535966;
--rot-card: #272a31;
--rot-pre: #e7b457;
--rot-red: #e8705f;
--rot-blue: #82ade8;
--rot-orange: #eaa850;
--rot-green: #6cc58a;
--rot-yellow: #f2cc3d;
}
.ntg-rot * { box-sizing: border-box; }
.ntg-rot img { display: inline-block; margin: 0; max-width: none; box-shadow: none; }
.ntg-rot .ntg-rot__title { margin: 0 0 2px; padding: 0; border: 0; background: none; font-size: 1.15em; font-weight: 700; line-height: 1.4; color: var(--rot-fg); }
.ntg-rot .ntg-rot__title::before, .ntg-rot .ntg-rot__title::after { display: none; }
.ntg-rot__sub { margin: 0 0 10px; font-size: 0.9em; line-height: 1.6; color: var(--rot-mut); }
/* 2026-09-24 依頼主「もうちょいUIを見やすく」: 凡例は本文に近い濃さ・大きさにし、色の棒は図の帯と同じ太さにする */
.ntg-rot__legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rot-border); font-size: 0.9em; line-height: 1.4; color: var(--rot-fg); }
.ntg-rot__legend:empty { padding: 0; }
.ntg-rot__lg { display: inline-flex; align-items: center; gap: 6px; }
.ntg-rot__lg i { display: inline-block; width: 26px; height: 6px; border-radius: 3px; }
.ntg-rot__lg img { width: 18px; height: 24px; object-fit: contain; }
.ntg-rot .c-red { --c: var(--rot-red); }
.ntg-rot .c-blue { --c: var(--rot-blue); }
.ntg-rot .c-orange { --c: var(--rot-orange); }
.ntg-rot .c-green { --c: var(--rot-green); }
/* 色の決まり（2026-09-23 依頼主「色きめよ 自己バフは赤。薬は黄色。 他は自由に」）: 自分の強化＝red、薬＝yellow、ほか＝blue／green／orange */
.ntg-rot .c-yellow { --c: var(--rot-yellow); }
.ntg-rot__lg i { background: var(--c); }
.ntg-rot__steps { display: block; margin: 0; padding: 0; }
/* 手の数（--n）。HTML に数を書かずに済むよう、子の数から決める（PC の段の割り振りに使う） */
.ntg-rot__steps:has(> :nth-child(2)) { --n: 2; }
.ntg-rot__steps:has(> :nth-child(3)) { --n: 3; }
.ntg-rot__steps:has(> :nth-child(4)) { --n: 4; }
.ntg-rot__steps:has(> :nth-child(5)) { --n: 5; }
.ntg-rot__steps:has(> :nth-child(6)) { --n: 6; }
.ntg-rot__steps:has(> :nth-child(7)) { --n: 7; }
.ntg-rot__steps:has(> :nth-child(8)) { --n: 8; }
.ntg-rot__steps:has(> :nth-child(9)) { --n: 9; }
.ntg-rot__steps:has(> :nth-child(10)) { --n: 10; }
.ntg-rot__steps:has(> :nth-child(11)) { --n: 11; }
.ntg-rot__steps:has(> :nth-child(12)) { --n: 12; }
.ntg-rot__steps:has(> :nth-child(13)) { --n: 13; }
.ntg-rot__steps:has(> :nth-child(14)) { --n: 14; }
.ntg-rot__steps:has(> :nth-child(15)) { --n: 15; }
.ntg-rot__steps:has(> :nth-child(16)) { --n: 16; }
.ntg-rot__steps:has(> :nth-child(17)) { --n: 17; }
.ntg-rot__steps:has(> :nth-child(18)) { --n: 18; }
.ntg-rot__steps:has(> :nth-child(19)) { --n: 19; }
.ntg-rot__steps:has(> :nth-child(20)) { --n: 20; }
.ntg-rot__steps:has(> :nth-child(21)) { --n: 21; }
.ntg-rot__steps:has(> :nth-child(22)) { --n: 22; }
.ntg-rot__steps:has(> :nth-child(23)) { --n: 23; }
.ntg-rot__steps:has(> :nth-child(24)) { --n: 24; }
/* ===== 狭い幅（スマホ）: 縦の時系列 ===== */
.ntg-rot__step {
display: grid;
grid-template-columns: auto 3.3em 1fr;
align-items: center;
gap: 0 10px;
padding: 9px 0;
border-bottom: 1px solid var(--rot-line);
}
.ntg-rot__step:last-child { border-bottom: 0; }
/* 効果の線: 手の上下の余白と区切り線（1px）までかぶせ、続く効果は途切れない1本の線に見せる。
線の列は手の先頭の子なので、SWELL の「div > :first-child { margin-top: 0 !important }」で上の負の余白が消える。
→ 上へは top でずらし、その分を下の余白で伸ばす（上 9px＋下 10px） */
.ntg-rot__stripes { grid-row: 1 / 3; align-self: stretch; display: flex; gap: 3px; position: relative; top: -9px; margin: 0 0 -19px; min-width: 6px; }
.ntg-rot__step:last-child .ntg-rot__stripes { margin-bottom: -18px; }
.ntg-rot__s { width: 6px; }
.ntg-rot__s.on { background: var(--c); }
/* 効果が始まる手の、線の下のアイコン（2026-09-24 依頼主「バーの下にバフアイコンつけてあげたら」）。入れ物に幅を持たせる（テーマの「#body_wrap .post_content img { max-width: 100% }」が幅0の入れ物で画像を0にする）。
スマホ（縦）は線の始まりの右（番号の列の左の空き）、PC（横）は線の始まりの下（線の下の余白 22px の中） */
.ntg-rot__bis { position: absolute; left: calc(100% + 3px); top: 9px; width: 15px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.ntg-rot__bis img { display: block; width: 15px; height: 20px; max-width: none; object-fit: contain; }
.ntg-rot__no { font-size: 0.85em; font-weight: 700; color: var(--rot-mut); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ntg-rot__step.is-pre .ntg-rot__no { color: var(--rot-pre); font-size: 0.75em; }
.ntg-rot__gcd { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1em; line-height: 1.35; }
.ntg-rot__gcd img { width: 44px; height: 44px; border-radius: 7px; flex: 0 0 auto; }
.ntg-rot__star { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 7px; background: var(--rot-line); font-size: 24px; color: var(--rot-mut); flex: 0 0 auto; }
.ntg-rot__ogs { grid-column: 3; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.ntg-rot__ogs:empty { display: none; }
.ntg-rot__og { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 2px solid var(--rot-line); font-size: 0.95em; color: var(--rot-mut); line-height: 1.35; }
.ntg-rot__og img { width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; }
.ntg-rot__note { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rot-border); font-size: 0.92em; line-height: 1.75; color: var(--rot-fg); }
.ntg-rot__note b { color: var(--rot-fg); }
.ntg-rot__loop { display: block; margin: 8px 0 0; padding: 7px 12px; border: 1px dashed var(--rot-border); border-radius: 6px; font-size: 0.92em; line-height: 1.6; color: var(--rot-fg); text-align: center; }
.ntg-rot .ntg-game-term { border-bottom: 0 !important; }
/* 効果の線の端（2026-09-24 依頼主「効果の線が手ごとに途切れていて、時間が続いているように見えない」）。
線は手の幅（スマホは高さ）いっぱいに引いて隣の手とつなげ、効果が始まる手（--rs）と終わる手（--re）でだけ端を丸めて内に寄せる。線（レーン）は5本まで */
.ntg-rot__step:not(:has(> .ntg-rot__stripes > .ntg-rot__s:nth-child(1).on)) + .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(1),
.ntg-rot__step:not(:has(> .ntg-rot__stripes > .ntg-rot__s:nth-child(2).on)) + .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(2),
.ntg-rot__step:not(:has(> .ntg-rot__stripes > .ntg-rot__s:nth-child(3).on)) + .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(3),
.ntg-rot__step:not(:has(> .ntg-rot__stripes > .ntg-rot__s:nth-child(4).on)) + .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(4),
.ntg-rot__step:not(:has(> .ntg-rot__stripes > .ntg-rot__s:nth-child(5).on)) + .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(5),
.ntg-rot__step:first-child > .ntg-rot__stripes > .ntg-rot__s { --rs: 1; }
.ntg-rot__step:not(:has(+ .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(1).on)) > .ntg-rot__stripes > .ntg-rot__s:nth-child(1),
.ntg-rot__step:not(:has(+ .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(2).on)) > .ntg-rot__stripes > .ntg-rot__s:nth-child(2),
.ntg-rot__step:not(:has(+ .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(3).on)) > .ntg-rot__stripes > .ntg-rot__s:nth-child(3),
.ntg-rot__step:not(:has(+ .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(4).on)) > .ntg-rot__stripes > .ntg-rot__s:nth-child(4),
.ntg-rot__step:not(:has(+ .ntg-rot__step > .ntg-rot__stripes > .ntg-rot__s:nth-child(5).on)) > .ntg-rot__stripes > .ntg-rot__s:nth-child(5),
.ntg-rot__step:last-child > .ntg-rot__stripes > .ntg-rot__s { --re: 1; }
/* スマホ（縦）: 上端・下端 */
.ntg-rot__s.on {
margin-top: calc(var(--rs, 0) * 8px);
margin-bottom: calc(var(--re, 0) * 9px - 1px);
border-radius: calc(var(--rs, 0) * 3px) calc(var(--rs, 0) * 3px) calc(var(--re, 0) * 3px) calc(var(--re, 0) * 3px);
}
/* ===== 広い幅（PC）: 横並び =====
2026-09-24 依頼主「7手目だけ次の段に落ちる」「挟む技の名前が途中で折れる」「挟む技が少ない手の上が空く」:
- 段の割り振り: 1段に入る数（--maxc、幅で決まる）から段の数を出し、手を段に均等に割る（7手なら 4＋3、11手なら 6＋5）
- 1段の中で行の高さをそろえる（subgrid）。挟む技の欄は、その段でいちばん多い手の高さだけ取る
- 名前は字詰め（palt）して1行に収め、折るのは「・」の所だけ（途中では折らない） */
@container (min-width: 640px) {
.ntg-rot__steps {
--maxc: 5;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
grid-auto-flow: row;
gap: 0;
}
@supports (width: round(up, 1.5px, 1px)) and selector(:has(a)) {
.ntg-rot__steps {
--rows: round(up, calc(var(--n, 1) / var(--maxc)), 1);
--cols: round(up, calc(var(--n, 1) / var(--rows)), 1);
grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--cols) - 1px), 1fr));
}
}
.ntg-rot__step {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
grid-template-columns: 100%;
justify-items: center;
gap: 0;
padding: 0;
border: 0;
}
.ntg-rot__ogs {
grid-row: 1; grid-column: 1;
align-self: end;
justify-self: center;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: max-content;
max-width: calc(100% - 6px);
margin: 0 0 8px;
}
.ntg-rot__og { flex-direction: row; align-items: center; gap: 5px; padding: 0; border: 0; font-size: 12px; line-height: 1.25; text-align: left; font-feature-settings: "palt"; }
.ntg-rot__og img { width: 24px; height: 24px; border-radius: 4px; }
.ntg-rot__ogn { display: block; word-break: keep-all; overflow-wrap: normal; }
.ntg-rot__gcd { grid-row: 2; grid-column: 1; align-self: start; flex-direction: column; gap: 5px; max-width: calc(100% - 6px); font-size: 14px; text-align: center; line-height: 1.3; font-feature-settings: "palt"; word-break: keep-all; overflow-wrap: normal; }
.ntg-rot__gcd img, .ntg-rot__star { width: 56px; height: 56px; }
.ntg-rot__no { grid-row: 3; grid-column: 1; align-self: end; margin: 6px 0 5px; padding: 0 8px; border-radius: 10px; background: var(--rot-line); color: var(--rot-fg); font-size: 12.5px; line-height: 1.6; text-align: center; }
.ntg-rot__step.is-pre .ntg-rot__no { font-size: 11.5px; color: var(--rot-pre); }
/* 効果の線は手の幅いっぱい（隣の手の線とつながる）。線の下で次の段との間をとる */
.ntg-rot__stripes { grid-row: 4; grid-column: 1; flex-direction: column; gap: 3px; align-self: start; top: 0; width: 100%; margin: 0; padding: 0 0 22px; }
.ntg-rot__step:last-child .ntg-rot__stripes { margin-bottom: 0; }
.ntg-rot__s { width: auto; height: 6px; }
.ntg-rot__bis { left: 6px; top: auto; bottom: 0; width: 60px; flex-direction: row; gap: 3px; }
.ntg-rot__s.on {
margin: 0 calc(var(--re, 0) * 7px - 1px) 0 calc(var(--rs, 0) * 6px);
border-radius: calc(var(--rs, 0) * 3px) calc(var(--re, 0) * 3px) calc(var(--re, 0) * 3px) calc(var(--rs, 0) * 3px);
}
.ntg-rot__loop { margin-top: 0; }
.ntg-rot__note { margin-top: 0; }
}
@container (min-width: 780px) { .ntg-rot__steps { --maxc: 6; } }
@container (min-width: 910px) { .ntg-rot__steps { --maxc: 7; } }
@container (min-width: 1040px) { .ntg-rot__steps { --maxc: 8; } }
/* 手の区切りの説明（「1〜3」「3のあと」などを目印にした、下線で区切ったリスト）。
2026-09-23 依頼主「下線つきのリストで、1~3とかの区切りを明確になるようにしてあげたほうがいい」 */
.ntg-stepnote {
display: grid;
grid-template-columns: max-content 1fr;
margin: 1em 0 1.4em;
padding: 0;
border-top: 2px solid var(--ntg-sn-line, #bfc5cf);
}
html[data-nettoge-theme="dark"] .ntg-stepnote { --ntg-sn-line: #515763; --ntg-sn-badge: #2a2d35; --ntg-sn-badge-fg: #f0d27a; }
/* 2026-09-23 依頼主「かぶってしまってる（１列目が）」: 目印の列を固定幅（6.2em）にしていたため、長い目印（一番敵が多い群れ）が本文に重なった。
→ 目印の列は、その表の一番長い目印に合わせる（subgrid で全行そろえる）。8em を超える目印は折り返す。
目印は本文の1行目の文字の高さにそろえる（first baseline。アイコンのチップで1行目が高くなっても、目印だけ上に浮かない） */
.ntg-stepnote__row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
gap: 0 12px;
align-items: first baseline;
padding: 10px 2px;
border-bottom: 1px solid var(--ntg-sn-line, #bfc5cf);
}
.ntg-stepnote__no {
display: inline-block;
justify-self: start;
max-width: 8em;
padding: 2px 10px;
border-radius: 12px;
background: var(--ntg-sn-badge, #eef0f4);
color: var(--ntg-sn-badge-fg, #8a5a0a);
font-weight: 700;
font-size: 0.92em;
line-height: 1.6;
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
}
.ntg-stepnote__body { min-width: 0; line-height: 1.75; }
/* 目印にアイコンのチップ（span.ntg-act[data-icon]。用語カードで包んだ物も）を入れたとき。
2026-09-24 依頼主「２枚め 左側はアイコンもほしい」: 丸い目印の地は外し、チップは折らずに1行で出す（目印の列はその表のいちばん長いチップに合わせる）。
チップの基準線は名前の文字なので、first baseline で本文の1行目と文字の高さがそろう。
幅が足りない所（520px 未満。スマホ）は、目印を上・本文を下に積む（チップの列で本文が細くならないように） */
.ntg-stepnote { container-type: inline-size; }
.ntg-stepnote__no:has(.ntg-act) {
max-width: none;
padding: 0;
border-radius: 0;
background: none;
color: inherit;
font-weight: 400;
font-size: 1em;
line-height: inherit;
white-space: nowrap;
}
.ntg-stepnote__no .ntg-act { margin-top: 0; margin-bottom: 0; }
@container (max-width: 519px) {
.ntg-stepnote:has(.ntg-stepnote__no .ntg-act) > .ntg-stepnote__row {
grid-template-columns: minmax(0, 1fr);
gap: 4px 0;
}
.ntg-stepnote:has(.ntg-stepnote__no .ntg-act) .ntg-stepnote__no { white-space: normal; }
}
/* 図の説明文（副題・注・ループ）の中の技名チップは小さく（アイコン 1.5em）。
2026-09-23 依頼主「グラブカッマー＞ゲベート…とかもアイコン小さくつけてあげて」 */
.ntg-rot__sub .ntg-act, .ntg-rot__note .ntg-act, .ntg-rot__loop .ntg-act {
line-height: 1.5em;
margin: 2px 0.1em;
padding: 1px 0.4em 1px 1px;
gap: 0.3em;
border-radius: 5px;
}
.ntg-rot__sub .ntg-act[data-icon]::before, .ntg-rot__note .ntg-act[data-icon]::before, .ntg-rot__loop .ntg-act[data-icon]::before {
width: 1.5em;
height: 1.5em;
border-radius: 3px;
}
/* レベルごとの節への飛び先（ジョブの初心者ガイドの冒頭。nav.ntg-lvjump > a.ntg-lvjump__btn）。
2026-09-27 依頼主「ここ超目立たせて。全記事。」→「FF14感がなさすぎる」→ 10案から「2（クラシックFFの青い窓）」、指のカーソルだけ FF の絵に:
UI テーマ「クラシックFF」の青い窓と白い縁。ボタンは文字だけで、乗せると左に指のカーソル（アコーディオン is-style-acc-ff14 と同じドット絵の手。2026-09-29 依頼主の指定でそろえた）。
窓は青いので、ライト・ダークのどちらでも同じ見た目（ダークは縁を少し落とす）。
リンクにクラスがあるので、テーマの文中リンク（クラスの無い a）の色と下線は掛からない */
.ntg-lvjump {
--ntg-lvjump-w1: #3a5ec8;
--ntg-lvjump-w2: #0d1a5c;
--ntg-lvjump-edge: #fff;
margin: 1.6em 0 2em;
padding: 12px 8px 14px; /* 左右 8px + 枠 2px = 10px。手・三角の左端をアコーディオン（is-style-acc-ff14）と同じ 10px にそろえる */
border: 2px solid var(--ntg-lvjump-edge);
border-radius: 7px;
outline: 2px solid #6f7aa6;
outline-offset: -5px;
background: linear-gradient(180deg, var(--ntg-lvjump-w1), var(--ntg-lvjump-w2));
box-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .25);
color: #fff;
}
html[data-nettoge-theme="dark"] .ntg-lvjump {
--ntg-lvjump-w1: #2c4aa6;
--ntg-lvjump-w2: #0a1244;
--ntg-lvjump-edge: #d8dcf0;
}
.ntg-lvjump__title {
margin: 2px 0 10px;
color: #fff;
font-weight: 700;
font-size: 1.02em;
line-height: 1.5;
text-shadow: 1px 1px 0 #000;
}
.ntg-lvjump__title {
display: flex;
align-items: center;
gap: 0;
}
/* 三角は文字ではなく図形で描く（文字だと字形の基準線で上下がずれて、題の中心と合わなかった。2026-09-29 依頼主） */
.ntg-lvjump__title::before {
content: "";
flex: none;
width: .62em;
height: .72em;
margin-inline: calc(17px - .31em) calc(23px - .31em); /* 三角を手の列（幅 34px）の真ん中に置く。題の字の左端は、ボタンの字（枠から 50px）とアコーディオンの字にそろえる */
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.ntg-lvjump__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8.2em, 1fr));
gap: 4px 8px;
}
.ntg-lvjump .ntg-lvjump__btn {
position: relative;
display: flex;
align-items: center;
min-height: 44px;
padding: 0 6px 0 40px;
border-radius: 4px;
color: #fff;
font-weight: 700;
font-size: 1.02em;
line-height: 1.3;
white-space: nowrap;
text-decoration: none;
text-shadow: 1px 1px 0 #000;
}
/* 乗せた行の左に、指のカーソル */
.ntg-lvjump .ntg-lvjump__btn::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 34px;
height: 26px; /* 絵の下 4 段（影）は切る。帯からはみ出さないため */
margin-top: -8px; /* 指の先（絵の上から 4 マス目）が行の中心に来るよう 9px 下げる */
background: url("data:image/svg+xml;utf8,") left top / 34px 34px no-repeat;
image-rendering: pixelated;
opacity: 0;
pointer-events: none;
}
.ntg-lvjump .ntg-lvjump__btn:is(:hover, :focus-visible) {
background: rgb(255 255 255 / .12);
color: #fff;
outline: none;
}
.ntg-lvjump .ntg-lvjump__btn:is(:hover, :focus-visible)::before { opacity: 1; }
/* 縦一列の飛び先（闘獣練の盤の記事「すぐ読む」。上から順番に並べる。2026-09-28 依頼主） */
.ntg-lvjump--list .ntg-lvjump__list {
grid-template-columns: 1fr;
gap: 2px;
}
.ntg-lvjump--list .ntg-lvjump__btn {
flex-direction: column;
align-items: flex-start;
justify-content: center;
white-space: normal;
padding-block: 6px;
}
.ntg-lvjump--list .ntg-lvjump__sub {
display: block;
font-size: .82em;
font-weight: 400;
opacity: .85;
}
/* レベルごとの節の見出し（h3.ntg-lvhead。ジョブの初心者ガイドの「Lv30〜44：…」）。
2026-09-27 依頼主「Lv50〜59 とかの見出しは、ガイドの青色のやつみたいな見出しにできる？」: 上の飛び先（.ntg-lvjump）と同じクラシックFFの青い帯。
テーマの h3（content.css）は :where(#body_wrap) .post_content h3 で詳細度が低いので、クラス付きのこの規則がそのまま勝つ */
.post_content h3.ntg-lvhead {
--ntg-lvjump-w1: #3a5ec8;
--ntg-lvjump-w2: #0d1a5c;
--ntg-lvjump-edge: #fff;
padding: 9px 14px 9px 16px;
border: 2px solid var(--ntg-lvjump-edge);
border-radius: 7px;
outline: 2px solid #6f7aa6;
outline-offset: -5px;
background: linear-gradient(180deg, var(--ntg-lvjump-w1), var(--ntg-lvjump-w2));
box-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .2);
color: #fff;
line-height: 1.5;
text-shadow: 1px 1px 0 #000;
}
html[data-nettoge-theme="dark"] .post_content h3.ntg-lvhead {
--ntg-lvjump-w1: #2c4aa6;
--ntg-lvjump-w2: #0a1244;
--ntg-lvjump-edge: #d8dcf0;
}
/* 展開テーブル（闘獣練の「マスの並び」。マスの印 ff14-hud-mas-* の行だけ）の行の見出し（1 列目「〇手目」）。
薄い地に細い字で見づらかった（2026-09-29 依頼主「項目名（8手目とか）が視認性悪い。キラー記事だからここを強化」）。
PC（表の 1 列目）は地をつけず、字を大きく太くするだけ（依頼主「こっちは普通でいい。サイズ感は好き」）。
スマホ幅（781px 以下、行が縦の札になる幅）は、FF の青い窓の帯にする。色・枠は上の .ntg-lvjump／h3.ntg-lvhead と同じ。
開いた行は字が黄色（アコーディオン is-style-acc-ff14 と同じ） */
.etb-wrapper .etb-table > tbody > tr.etb-row:has(img[src*="ff14-hud-mas-"]) > td.etb-first-cell {
font-size: 1.3em;
font-weight: 800;
letter-spacing: .04em;
}
@media (max-width: 781px) {
.etb-wrapper .etb-table > tbody > tr.etb-row:has(img[src*="ff14-hud-mas-"]) > td.etb-first-cell {
--etb-chevron: #fff;
--etb-chevron-hover: #ffe98a;
--etb-chevron-open: #ffe98a;
--ntg-lvjump-w1: #3a5ec8;
--ntg-lvjump-w2: #0d1a5c;
--ntg-lvjump-edge: #fff;
margin-bottom: 8px;
padding: 9px 12px 9px 34px;
background: linear-gradient(180deg, var(--ntg-lvjump-w1), var(--ntg-lvjump-w2));
border-radius: 7px;
box-shadow: inset 0 0 0 2px var(--ntg-lvjump-edge), 0 2px 0 rgb(0 0 0 / .35);
color: #fff;
text-shadow: 1px 1px 0 #000;
}
html[data-nettoge-theme="dark"] .etb-wrapper .etb-table > tbody > tr.etb-row:has(img[src*="ff14-hud-mas-"]) > td.etb-first-cell {
--ntg-lvjump-w1: #2c4aa6;
--ntg-lvjump-w2: #0a1244;
--ntg-lvjump-edge: #d8dcf0;
}
.etb-wrapper .etb-table > tbody > tr.etb-row.active:has(img[src*="ff14-hud-mas-"]) > td.etb-first-cell {
box-shadow: inset 0 0 0 2px var(--ntg-lvjump-edge), 0 2px 0 rgb(0 0 0 / .35);
color: #ffe98a;
}
.etb-wrapper .etb-table > tbody > tr.etb-row:has(img[src*="ff14-hud-mas-"]) > td.etb-first-cell::before {
left: 13px;
}
}
/* ==========================================================================
ジョブ別ガイドのハブ（固定ページ /ff14-job-guides/。div.ntg-jobhub）。2026-09-30 依頼主「がっつりデザイン作って」
ジョブの初心者ガイドと同じ「クラシックFFの青い窓」の言葉で作る。ロールごとに窓の色（タンク＝青、ヒーラー＝緑、DPS＝赤、リミテッド＝紫）。
窓の見出し（ロールの絵・名前・ひとこと・ジョブ数）の下に、ジョブのカード（アイコン・名前・1行・始められるレベル）。
乗せたカードの左上に、指のカーソル（.ntg-lvjump のボタンと同じドット絵）。本文は build_job_hub.py が出す。
========================================================================== */
.ntg-jobhub { margin: 1.4em 0 2.4em; }
.ntg-jobhub__role {
--jh-w1: #3a5ec8;
--jh-w2: #0d1a5c;
--jh-accent: #3a5ec8;
--jh-edge: #fff;
margin: 0 0 1.6em;
border: 2px solid var(--jh-edge);
border-radius: 8px;
outline: 2px solid #6f7aa6;
outline-offset: -5px;
background: linear-gradient(180deg, var(--jh-w1), var(--jh-w2));
box-shadow: 0 2px 0 rgb(0 0 0 / .35), 0 3px 10px rgb(0 0 0 / .25);
color: #fff;
overflow: hidden;
}
.ntg-jobhub__role--tank { --jh-w1: #3a5ec8; --jh-w2: #0d1a5c; --jh-accent: #3a5ec8; }
.ntg-jobhub__role--healer { --jh-w1: #3c9a58; --jh-w2: #0f3a20; --jh-accent: #2f8a4b; }
.ntg-jobhub__role--melee,
.ntg-jobhub__role--ranged,
.ntg-jobhub__role--caster { --jh-w1: #c4483a; --jh-w2: #560f0c; --jh-accent: #b83a2c; }
.ntg-jobhub__role--limited { --jh-w1: #7a5cc0; --jh-w2: #24134f; --jh-accent: #6a4bb0; }
html[data-nettoge-theme="dark"] .ntg-jobhub__role { --jh-edge: #d8dcf0; }
html[data-nettoge-theme="dark"] .ntg-jobhub__role--tank { --jh-w1: #2c4aa6; --jh-w2: #0a1244; }
html[data-nettoge-theme="dark"] .ntg-jobhub__role--healer { --jh-w1: #2d7a44; --jh-w2: #0b2a17; }
html[data-nettoge-theme="dark"] .ntg-jobhub__role--melee,
html[data-nettoge-theme="dark"] .ntg-jobhub__role--ranged,
html[data-nettoge-theme="dark"] .ntg-jobhub__role--caster { --jh-w1: #9c3a2f; --jh-w2: #400b09; }
/* 窓の見出し */
.ntg-jobhub__rhead {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 12px 16px 10px;
border-bottom: 1px solid rgb(255 255 255 / .28);
text-shadow: 1px 1px 0 #000;
}
.ntg-jobhub__rico { flex: none; width: 44px; height: 44px; filter: drop-shadow(1px 1px 0 rgb(0 0 0 / .6)); }
.ntg-jobhub__rtext { flex: 1 1 auto; min-width: 0; }
body :is(.post_content, .entry-content) .ntg-jobhub__rname {
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
color: #fff;
font-size: 1.2em;
font-weight: 700;
line-height: 1.35;
text-shadow: 1px 1px 0 #000;
}
body :is(.post_content, .entry-content) .ntg-jobhub__rname::before,
body :is(.post_content, .entry-content) .ntg-jobhub__rname::after { content: none; }
.ntg-jobhub__rdesc { display: block; margin-top: 1px; font-size: .86em; line-height: 1.5; opacity: .92; }
.ntg-jobhub__rcount {
flex: none;
padding: 2px 10px;
border: 1px solid rgb(255 255 255 / .55);
border-radius: 999px;
background: rgb(0 0 0 / .25);
font-size: .8em;
font-weight: 700;
white-space: nowrap;
}
/* ジョブのカード */
.ntg-jobhub__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 12px;
}
.ntg-jobhub__grid > .ntg-jobhub__card:last-child:nth-child(odd) { grid-column: 1 / -1; } /* 奇数のときは最後の 1 枚を横いっぱいに */
body :is(.post_content, .entry-content) a.ntg-jobhub__card {
position: relative;
display: grid;
grid-template-columns: 52px 1fr;
grid-template-areas: "ico name" "ico line" "tags tags";
column-gap: 12px;
row-gap: 2px;
align-items: center;
padding: 10px 12px 9px 14px;
border: 1px solid var(--ntg2-line-2, #c9ccd3);
border-radius: var(--ntg2-radius, 8px);
background: var(--ntg2-paper, #f7f6f2);
color: var(--ntg2-text, #23262b);
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
body :is(.post_content, .entry-content) a.ntg-jobhub__card:is(:hover, :focus-visible) {
border-color: var(--jh-accent);
box-shadow: 0 0 0 2px var(--jh-accent), 0 4px 10px rgb(0 0 0 / .18);
transform: translateY(-2px);
text-decoration: none;
color: var(--ntg2-text, #23262b);
outline: none;
}
/* 乗せたカードの左上に、指のカーソル */
.ntg-jobhub__card::before {
content: "";
position: absolute;
top: 6px;
left: -12px;
width: 30px;
height: 30px;
background: var(--ntg-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: 2;
}
.ntg-jobhub__card:is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
.ntg-jobhub__ico {
grid-area: ico;
width: 52px;
height: 52px;
padding: 4px;
border: 1px solid #6f7aa6;
border-radius: 8px;
background: linear-gradient(180deg, var(--jh-w1), var(--jh-w2));
box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35);
box-sizing: border-box;
}
.ntg-jobhub__name { grid-area: name; align-self: end; font-size: 1.06em; font-weight: 700; line-height: 1.3; }
.ntg-jobhub__line { grid-area: line; align-self: start; font-size: .84em; line-height: 1.5; color: var(--ntg2-text-2, #4c5058); }
.ntg-jobhub__tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ntg-jobhub__tag {
padding: 1px 8px;
border: 1px solid var(--ntg2-line-2, #c9ccd3);
border-radius: 999px;
background: var(--ntg2-paper-2, #eceae4);
font-size: .74em;
font-weight: 700;
line-height: 1.6;
color: var(--ntg2-text-2, #4c5058);
}
.ntg-jobhub__tag--first {
border-color: var(--jh-accent);
background: var(--jh-accent);
color: #fff;
}
html[data-nettoge-theme="dark"] .ntg-jobhub__card { background: var(--ntg2-paper, #23262b); color: var(--ntg2-text, #e6e6e6); }
html[data-nettoge-theme="dark"] .ntg-jobhub__line { color: #c3c8d4; }
html[data-nettoge-theme="dark"] .ntg-jobhub__tag { border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .08); color: #d5d9e3; }
html[data-nettoge-theme="dark"] .ntg-jobhub__card { border-color: rgb(255 255 255 / .16); }
html[data-nettoge-theme="dark"] .ntg-jobhub__tag--first { border-color: var(--jh-accent); background: var(--jh-accent); color: #fff; }
html[data-nettoge-theme="dark"] body :is(.post_content, .entry-content) a.ntg-jobhub__card:is(:hover, :focus-visible) { color: #fff; }
/* スマホ: 窓の見出しは絵を小さく、ジョブ数の札は名前の下へ。カードは 1 列 */
@media (max-width: 599px) {
.ntg-jobhub__rhead { flex-wrap: wrap; padding: 10px 12px 9px; gap: 4px 10px; }
.ntg-jobhub__rico { width: 36px; height: 36px; }
.ntg-jobhub__rcount { order: 3; margin-left: 46px; }
.ntg-jobhub__grid { padding: 10px 8px; grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.ntg-jobhub__card, .ntg-jobhub__card::before { transition: none; }
}
.ntg-jobhub { --ntg-finger: url("data:image/svg+xml;utf8,"); }