/* ==================================================================
nexpure-skin.css v0.4.0 （没入テーマ：桜/マトリックス/HUD/ナチュラル）
レガシー会員サイトに被せるスキン。機能は一切改変せず、背景演出は
コンテンツの「後ろ」に重ねるだけ（pointer-events:none）。安全。
既定は「スタンダード（白）」。🎨パネルから利用者が切替・保存できる。
================================================================== */
/* Webフォント（CSS側で読み込むので、別途は不要） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&display=swap'); /* 既定テーマ＝VIPの本文用明朝を事前読込（FOUC回避） */
/* ── デザイントークン（既定＝スタンダード白×レッド） ───────────── */
.nx-skin{
--nx-primary:#E63946;
--nx-primary-grad:linear-gradient(135deg,#ef5350,#e53935);
--nx-secondary:#457B9D;
--nx-accent-green:#43a047;
--nx-on-primary:#ffffff; /* テーマ色ボタン(.btn--top)等の上に乗る文字色。明るいテーマでは濃色に上書きして可読性確保 */
--nx-text:#333333;
--nx-text-muted:#777777;
--nx-bg:#ffffff;
--nx-bg-soft:#f5f6f8;
--nx-page:#eef1f5;
--nx-border:#e3e6ea;
--nx-radius:14px;
--nx-shadow:0 10px 30px rgba(0,0,0,.08);
--nx-font:'Inter','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic UI','Meiryo','Noto Sans JP',sans-serif;
background:var(--nx-page);
}
/* ── テーマ（🎨パネルから data-nx-theme で切替） ──────────────── */
.nx-skin[data-nx-theme="red"]{ --nx-primary:#E63946; --nx-primary-grad:linear-gradient(135deg,#ef5350,#e53935); }
.nx-skin[data-nx-theme="purple"]{ --nx-primary:#7c3aed; --nx-primary-grad:linear-gradient(135deg,#8b5cf6,#7c3aed); --nx-accent-green:#7c3aed; }
.nx-skin[data-nx-theme="orange"]{ --nx-primary:#ea580c; --nx-primary-grad:linear-gradient(135deg,#f97316,#ea580c); --nx-accent-green:#ea580c; }
/* 🌸 桜・ガーリー */
.nx-skin[data-nx-theme="sakura"]{
--nx-primary:#ec4899; --nx-primary-grad:linear-gradient(135deg,#f9a8d4,#ec4899);
--nx-accent-green:#ec4899;
--nx-text:#6a3a52; --nx-text-muted:#a86c86;
--nx-bg:rgba(255,255,255,.88); --nx-bg-soft:rgba(255,228,242,.7);
--nx-page:linear-gradient(135deg,#ffe4f0 0%,#fff0f7 60%,#ffe9f3 100%);
--nx-border:#f6c9dd; --nx-shadow:0 10px 30px rgba(236,72,153,.15);
}
/* 🛰 サイバー（黒×アシッドグリーンのグリッチ／ワイヤーフレーム＋コード散乱／未来フォント） */
.nx-skin[data-nx-theme="cyber"]{
--nx-primary:#9dff3c; --nx-primary-grad:linear-gradient(135deg,#c6ff6b,#7fd900);
--nx-accent-green:#9dff3c;
--nx-text:#e6ffd9; --nx-text-muted:#8fbf7a;
--nx-bg:rgba(8,12,6,.84); --nx-bg-soft:rgba(20,30,12,.5);
--nx-page:radial-gradient(ellipse at 30% 0%,#0c1206 0%,#060a04 60%,#03050a 100%);
--nx-border:rgba(157,255,60,.32); --nx-shadow:0 0 30px rgba(157,255,60,.16);
--nx-font:'Orbitron','Inter','Hiragino Sans',sans-serif;
}
/* 未来風の文字演出（英数のグロー＋字間） */
.nx-skin[data-nx-theme="cyber"] .info_titile,
.nx-skin[data-nx-theme="cyber"] #pagewrap h1,
.nx-skin[data-nx-theme="cyber"] .card-title,
.nx-skin[data-nx-theme="cyber"] .points-value{ letter-spacing:1px; text-shadow:0 0 10px rgba(157,255,60,.55); }
/* サイバー：演出を強めに＆ネオンの縁取り */
.nx-skin[data-nx-theme="cyber"] #nx-fx>canvas{ opacity:.82; }
.nx-skin[data-nx-theme="cyber"] #pagewrap{ box-shadow:0 0 40px rgba(157,255,60,.1),0 0 0 1px rgba(157,255,60,.22); }
.nx-skin[data-nx-theme="cyber"] .info_titile,
.nx-skin[data-nx-theme="cyber"] #pagewrap h1{ box-shadow:0 0 14px rgba(157,255,60,.16); }
.nx-skin[data-nx-theme="cyber"] .btn--top{ box-shadow:0 0 18px rgba(157,255,60,.4) !important; }
/* 明るい/淡い色テーマ：ボタンの白文字は背景に埋もれて読めないので、濃色文字＋淡い白の縁取りに
（年配の利用者が多く可読性最優先）。濃い色テーマ(赤/紫/青/ダーク/オーガニック/VIP金)は白文字＋濃い影のまま。 */
.nx-skin[data-nx-theme="rpg"]{ --nx-on-primary:#14143c; } /* 黄色 → 濃紺文字 */
.nx-skin[data-nx-theme="cyber"]{ --nx-on-primary:#0a1305; } /* 黄緑 → ほぼ黒文字 */
.nx-skin[data-nx-theme="sakura"]{ --nx-on-primary:#5e2a44; } /* 淡ピンク → 濃ローズ文字 */
.nx-skin[data-nx-theme="feminine"]{ --nx-on-primary:#4a3338; } /* 淡ピンク → 濃グレー文字 */
.nx-skin[data-nx-theme="nature"]{ --nx-on-primary:#163a1e; } /* 淡グリーン → 濃緑文字 */
.nx-skin[data-nx-theme="relax"]{ --nx-on-primary:#463218; } /* 淡オレンジ → 濃茶文字 */
.nx-skin[data-nx-theme="beauty"]{ --nx-on-primary:#3c2937; } /* モーヴ → 濃プラム文字 */
.nx-skin[data-nx-theme="rpg"] .btn--top, .nx-skin[data-nx-theme="cyber"] .btn--top,
.nx-skin[data-nx-theme="sakura"] .btn--top, .nx-skin[data-nx-theme="feminine"] .btn--top,
.nx-skin[data-nx-theme="nature"] .btn--top, .nx-skin[data-nx-theme="relax"] .btn--top,
.nx-skin[data-nx-theme="beauty"] .btn--top{ text-shadow:0 1px 0 rgba(255,255,255,.5); }
/* 白文字でもグラデが明→暗にまたがり弱い3テーマ(VIP金/ブルーHUD/オレンジ)は、ボタンに薄い暗幕を重ねて
全体を少し沈め、白文字を確実に読めるようにする（色味は保持）。hoverでも維持するため background-image で指定。 */
.nx-skin[data-nx-theme="vip"] .btn--top, .nx-skin[data-nx-theme="vip"] .btn--top:hover,
.nx-skin[data-nx-theme="ironman"] .btn--top, .nx-skin[data-nx-theme="ironman"] .btn--top:hover,
.nx-skin[data-nx-theme="orange"] .btn--top, .nx-skin[data-nx-theme="orange"] .btn--top:hover{
background-image:linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), var(--nx-primary-grad);
}
/* 🔵 ブルーHUD（アイアンマン研究所） */
.nx-skin[data-nx-theme="ironman"]{
--nx-primary:#38bdf8; --nx-primary-grad:linear-gradient(135deg,#38bdf8,#2563eb);
--nx-accent-green:#38bdf8;
--nx-text:#dbeafe; --nx-text-muted:#7fb6e6;
--nx-bg:rgba(8,18,38,.82); --nx-bg-soft:rgba(20,42,78,.55);
--nx-page:radial-gradient(ellipse at top,#0b1f3a 0%,#060d1c 100%);
--nx-border:rgba(56,189,248,.3); --nx-shadow:0 0 30px rgba(56,189,248,.18);
}
/* 🌿 ナチュラル緑 */
.nx-skin[data-nx-theme="nature"]{
--nx-primary:#16a34a; --nx-primary-grad:linear-gradient(135deg,#4ade80,#16a34a);
--nx-accent-green:#16a34a;
--nx-text:#234d2b; --nx-text-muted:#5a7d5f;
--nx-bg:rgba(255,255,255,.9); --nx-bg-soft:rgba(220,245,225,.72);
--nx-page:linear-gradient(135deg,#e6f5e6 0%,#f2faf0 60%,#e9f6ea 100%);
--nx-border:#cfe8d0; --nx-shadow:0 10px 30px rgba(22,163,74,.14);
}
/* ⚫ ダーク（演出なし） */
.nx-skin[data-nx-theme="dark"]{
--nx-primary:#60a5fa; --nx-primary-grad:linear-gradient(135deg,#3b82f6,#2563eb);
--nx-text:#e5e7eb; --nx-text-muted:#9aa4b2;
--nx-bg:#1e2430; --nx-bg-soft:#2a313f; --nx-page:#11151c;
--nx-border:#374151; --nx-accent-green:#34d399; --nx-shadow:0 10px 30px rgba(0,0,0,.5);
}
/* 👑 VIPゴージャス（白マーブル×金グラデ文字＋ぼかし白円・明朝体） */
.nx-skin[data-nx-theme="vip"]{
--nx-primary:#a07a2c; --nx-primary-grad:linear-gradient(135deg,#caa24a,#875325 55%,#a8812f);
--nx-accent-green:#a07a2c;
--nx-text:#5b4a2a; --nx-text-muted:#9a875e;
--nx-bg:rgba(255,253,247,.92); --nx-bg-soft:rgba(246,239,224,.82);
--nx-page:linear-gradient(135deg,#fdfbf5 0%,#f3ece0 45%,#fbf7ee 100%);
--nx-border:#e7dcc4; --nx-shadow:0 10px 34px rgba(135,83,37,.14);
--nx-font:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
}
/* VIPゴージャス専用：白マーブル背景＋金グラデ縦バー＋微かな白シャイン */
.nx-skin[data-nx-theme="vip"] .info_titile,
.nx-skin[data-nx-theme="vip"] #pagewrap h1{
color:#7a4f1f;
background:
linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 50%),
linear-gradient(135deg, #fbf3dc 0%, #f5e8c5 55%, #fbf6e4 100%);
border-color:#e5cf94;
text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.nx-skin[data-nx-theme="vip"] .info_titile::before,
.nx-skin[data-nx-theme="vip"] #pagewrap h1::before{
background:linear-gradient(180deg, #f1d989 0%, #caa24a 35%, #875325 70%, #b8862e 100%);
box-shadow:0 0 14px rgba(202,162,74,.55), inset 1px 0 0 rgba(255,255,255,.4);
}
.nx-skin[data-nx-theme="vip"] .points-value{ background:linear-gradient(135deg,#caa24a,#875325 60%,#b8862e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
/* 🎀 フェミニン（女性向けパレット#1：ソフトピンク×ミント×上品グレー文字） */
.nx-skin[data-nx-theme="feminine"]{
--nx-primary:#e8909a; --nx-primary-grad:linear-gradient(135deg,#f3b2b3,#e58aa0);
--nx-accent-green:#7fc0c8;
--nx-text:#585858; --nx-text-muted:#9c8f91;
--nx-bg:rgba(255,255,255,.92); --nx-bg-soft:rgba(245,250,251,.86);
--nx-page:linear-gradient(135deg,#eaf6f7 0%,#fdf0f1 55%,#f3f9fb 100%);
--nx-border:#ecdbde; --nx-shadow:0 10px 30px rgba(243,178,179,.18);
}
/* 🌿 オーガニック（女性向けパレット#2：深緑×ミント×マスタード） */
.nx-skin[data-nx-theme="organic"]{
--nx-primary:#2e6b38; --nx-primary-grad:linear-gradient(135deg,#3f8a4a,#1f4e25);
--nx-accent-green:#edd753;
--nx-text:#27331f; --nx-text-muted:#6a7560;
--nx-bg:rgba(255,255,255,.92); --nx-bg-soft:rgba(227,241,232,.85);
--nx-page:linear-gradient(135deg,#e8f3ec 0%,#fbfaf0 55%,#eaf4ec 100%);
--nx-border:#d2e6d8; --nx-shadow:0 10px 30px rgba(31,78,37,.14);
}
/* 💄 ビューティ（女性向けパレット：シアン×モーヴ×イエロー） */
.nx-skin[data-nx-theme="beauty"]{
--nx-primary:#bd7fa0; --nx-primary-grad:linear-gradient(135deg,#c595ab,#a86b90);
--nx-accent-green:#60bdd7;
--nx-text:#4f4754; --nx-text-muted:#9a8fa0;
--nx-bg:rgba(255,255,255,.92); --nx-bg-soft:rgba(233,242,238,.85);
--nx-page:linear-gradient(135deg,#e3f3f6 0%,#faf0f6 55%,#eef5f0 100%);
--nx-border:#e6dde6; --nx-shadow:0 10px 30px rgba(197,149,171,.18);
}
/* 🍃 癒し系（女性向けパレット：ウォームオレンジ×セージ×イエロー） */
.nx-skin[data-nx-theme="relax"]{
--nx-primary:#df8a32; --nx-primary-grad:linear-gradient(135deg,#eda758,#cf7a22);
--nx-accent-green:#a0c7b8;
--nx-text:#463d2c; --nx-text-muted:#8a7f68;
--nx-bg:rgba(255,255,255,.92); --nx-bg-soft:rgba(238,244,238,.85);
--nx-page:linear-gradient(135deg,#fbf6ec 0%,#eef4ef 55%,#f8f2e6 100%);
--nx-border:#e8ddc9; --nx-shadow:0 10px 30px rgba(223,138,50,.16);
}
/* 🎮 ドット絵RPG風（8bit・白枠メッセージウィンドウ・ドット字） */
.nx-skin[data-nx-theme="rpg"]{
--nx-primary:#ffd23f; --nx-primary-grad:linear-gradient(135deg,#ffe066,#ffb300);
--nx-accent-green:#5dd55d;
--nx-text:#ffffff; --nx-text-muted:#aab8ff;
--nx-bg:#101046; --nx-bg-soft:#1a1a64; --nx-page:#05051f;
--nx-border:#ffffff; --nx-radius:0px; --nx-shadow:none;
--nx-font:'DotGothic16','Courier New',monospace;
}
.nx-skin[data-nx-theme="rpg"] *{ border-radius:0 !important; }
.nx-skin[data-nx-theme="rpg"] #pagewrap{ border:4px solid #fff !important; }
.nx-skin[data-nx-theme="rpg"] .ptmovearea,
.nx-skin[data-nx-theme="rpg"] .info_titile,
.nx-skin[data-nx-theme="rpg"] #pagewrap h1,
.nx-skin[data-nx-theme="rpg"] .linkbox,
.nx-skin[data-nx-theme="rpg"] .card,
.nx-skin[data-nx-theme="rpg"] .meta-box{ border:3px solid #fff !important; background:#101046 !important; }
.nx-skin[data-nx-theme="rpg"] .btn--top,
.nx-skin[data-nx-theme="rpg"] #gomovepoint_btn,
.nx-skin[data-nx-theme="rpg"] #footer_nav a{ border:2px solid #fff !important; }
/* 🌈 隠しテーマ（コナミコマンドで解放・パネル非表示・虹色アニメ） */
.nx-skin[data-nx-theme="secret"]{
--nx-primary:#ff4d8d; --nx-primary-grad:linear-gradient(135deg,#ff8a00,#e52e71);
--nx-accent-green:#22c55e;
--nx-text:#3a2a4a; --nx-text-muted:#7a6a8a;
--nx-bg:rgba(255,255,255,.86); --nx-bg-soft:rgba(255,255,255,.6);
--nx-page:linear-gradient(125deg,#ff9a9e,#fad0c4,#fbc2eb,#a6c1ee,#84fab0,#ffd1ff);
--nx-border:rgba(0,0,0,.08); --nx-shadow:0 10px 30px rgba(0,0,0,.12);
background-size:400% 400%; animation:nx-rainbow 14s ease infinite;
}
@keyframes nx-rainbow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@media (prefers-reduced-motion: reduce){ .nx-skin[data-nx-theme="secret"]{ animation:none; } }
/* ── 背景演出レイヤー（コンテンツの後ろ・操作を妨げない） ────────── */
.nx-skin #nx-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.nx-skin #nx-fx>canvas{ width:100%; height:100%; display:block; opacity:.55; }
.nx-skin #pagewrap{ position:relative; z-index:1; }
.nx-skin #footer{ position:relative; z-index:1; }
/* 花びら・葉っぱ */
.nx-petal,.nx-leaf{
position:absolute; top:-6vh; pointer-events:none; will-change:transform;
animation-name:nx-fall; animation-timing-function:linear; animation-iteration-count:infinite;
}
.nx-petal{ background:radial-gradient(circle at 30% 30%, #ffd9ec, #f9a8d4); border-radius:80% 0 80% 0; box-shadow:0 0 6px rgba(249,168,212,.5); }
.nx-leaf{ background:linear-gradient(135deg,#86efac,#16a34a); border-radius:0 100% 0 100%; box-shadow:0 0 6px rgba(34,197,94,.4); }
@keyframes nx-fall{
0%{ transform:translateY(-6vh) translateX(0) rotate(0deg); }
50%{ transform:translateY(52vh) translateX(40px) rotate(180deg); }
100%{ transform:translateY(112vh) translateX(-24px) rotate(360deg); }
}
/* HUDグリッド＋走査ライン */
.nx-hud{
position:absolute; inset:0;
background:
linear-gradient(rgba(56,189,248,.10) 1px, transparent 1px) 0 0/42px 42px,
linear-gradient(90deg, rgba(56,189,248,.10) 1px, transparent 1px) 0 0/42px 42px;
animation:nx-hud-pan 18s linear infinite;
}
@keyframes nx-hud-pan{ from{ background-position:0 0,0 0; } to{ background-position:0 42px,42px 0; } }
.nx-scan{
position:absolute; left:0; right:0; top:-160px; height:160px;
background:linear-gradient(to bottom, transparent, rgba(56,189,248,.16), transparent);
animation:nx-scan 7s linear infinite;
}
@keyframes nx-scan{ 0%{ transform:translateY(0); } 100%{ transform:translateY(122vh); } }
/* 金粉（VIP）— 落下するきらめく金の粒 */
.nx-gold{
position:absolute; top:-6vh; pointer-events:none; will-change:transform;
animation-name:nx-fall; animation-timing-function:linear; animation-iteration-count:infinite;
background:radial-gradient(circle,#fff7d6,#d4af37 60%,transparent 72%);
border-radius:50%; box-shadow:0 0 8px rgba(212,175,55,.85);
}
/* ドット星（RPG）— その場で瞬く四角いピクセル */
.nx-pixstar{ position:absolute; pointer-events:none; image-rendering:pixelated; animation:nx-twinkle linear infinite; }
@keyframes nx-twinkle{ 0%,100%{ opacity:.2; transform:scale(1); } 50%{ opacity:1; transform:scale(1.4); } }
/* ボケ玉（VIP・フェミニン）— ぼかした白円がゆっくり昇る */
.nx-bokeh{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(8px); background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.95), rgba(255,255,255,.4) 55%, transparent 75%); animation:nx-bokeh-rise linear infinite; }
@keyframes nx-bokeh-rise{ 0%{ transform:translateY(12vh) scale(.9); opacity:0; } 15%{ opacity:.85; } 85%{ opacity:.85; } 100%{ transform:translateY(-112vh) scale(1.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .nx-hud,.nx-scan,.nx-petal,.nx-leaf,.nx-gold,.nx-pixstar,.nx-bokeh{ animation:none; } }
/* ── ベース ────────────────────────────────────────────────── */
.nx-skin body{
margin:0; padding:24px 16px; min-height:100vh; box-sizing:border-box;
background:transparent; color:var(--nx-text);
font-family:var(--nx-font); -webkit-font-smoothing:antialiased;
}
.nx-skin #pagewrap{
max-width:1000px; margin:0 auto;
background:var(--nx-bg); border-radius:var(--nx-radius);
box-shadow:var(--nx-shadow); overflow:hidden;
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
/* レガシーCSSの #pagewrap{min-height:100%} は、カードを常に画面全高(=body min-height:100vh)まで
引き伸ばす。中身が少ないページ(オートシップ/ボーナス履歴 等)では、暗い半透明カードが画面の大半を
覆い、テーマの背景演出(サイバーの回路/桜の花びら/HUDの基板 等)がほぼ見えなくなる
＝「演出がページによって出たり消えたり」して見える（リジョン指摘260618）。
→ カードは中身の高さに収め、余白に背景演出を出す。これで全ページ・全テーマで演出が均一に見える。
#bodymap(組織図ツリー＝白地・横スクロール専用)は別レイアウトなので対象外。 */
.nx-skin body:not(#bodymap) #pagewrap{ min-height:0 !important; }
/* ── ヘッダー ──────────────────────────────────────────────── */
.nx-skin #header{ position:relative; display:flex; align-items:center; min-height:64px; padding:16px 24px; background:transparent; border-bottom:1px solid var(--nx-border); }
.nx-skin #header>img{ height:40px; width:auto; }
.nx-skin .btn--top, .nx-skin a.btn--top{ display:inline-block; padding:10px 20px; border-radius:24px; background:var(--nx-primary-grad); color:var(--nx-on-primary,#fff); font-weight:700; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.5); box-shadow:0 4px 12px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.nx-skin .btn--top:hover, .nx-skin a.btn--top:hover{ background:var(--nx-primary-grad); color:var(--nx-on-primary,#fff); transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.28); }
/* ── ウェルカム/ユーザーバー ─────────────────────────────────── */
/* 260701 不具合修正：#wellcome はレガシーの生テキスト＋コメント＋インライン要素混在の見出し(h2)。
display:flex にしていると、Safari(WebKit)が「コメントノード直後のテキスト」を匿名flexアイテムとして
正しく生成できず、氏名部分だけ描画されない不具合を確認（Chromeは正常）。flexは必須ではない
（元々全角スペースで手動スペーシングされた地の文）ため、通常のブロック表示に変更して回避。 */
.nx-skin #wellcome{ margin:0; padding:12px 24px; font-size:13px; font-weight:500; color:var(--nx-text-muted); background:transparent; border-bottom:1px solid var(--nx-border); line-height:1.8; }
.nx-skin #wellcome .pulldown{ margin-right:6px; }
.nx-skin #wellcome .trans{ color:var(--nx-text-muted); }
.nx-skin #wellcome a{ color:var(--nx-primary); text-decoration:none; }
/* 会員IDプルダウン（ID切替）：レガシーの pulldown.css を上書きし、全テーマで読みやすく。
特にマトリックス/ブルーHUD等の暗テーマで、開いたリストの背景・文字が見えなくなる問題を解消。 */
/* レガシー pulldown.css は .pulldown(dl) に固定 width:100px を掛けており、Orbitron/DotGothic16/明朝など
幅広フォントのテーマで会員IDがはみ出し▼(::after)に被る。→ 固定幅を解除して中身に合わせて伸縮させる。 */
.nx-skin .pulldown{ display:inline-block; position:relative; margin:0 4px; vertical-align:middle; width:auto !important; }
.nx-skin .pulldown dt.js-pulldown{
cursor:pointer; position:relative; padding:5px 34px 5px 16px; box-sizing:border-box;
width:auto !important; min-width:54px; /* 固定幅をやめ中身基準。短いIDでも最低幅は確保 */
background:var(--nx-bg-soft) !important; border:1px solid var(--nx-border) !important; border-radius:8px;
font-weight:700; color:var(--nx-text) !important; white-space:nowrap;
}
.nx-skin .pulldown dt.js-pulldown::after{ /* 開閉インジケータ ▾ */
content:"expand_more"; font-family:'Material Icons Round'; font-size:18px;
position:absolute; right:6px; top:50%; transform:translateY(-50%); color:var(--nx-text-muted);
}
.nx-skin .pulldown dt.js-pulldown.open::after{ content:"expand_less"; }
/* ▼/∨ 二重矢印の解消（リジョン指摘・実DOMで確定260617）：
レガシー pulldown.css が dt::after に背景画像の矢印(images/common_images/mark_pull.png ▼)を付けており、
スキンが同じ ::after に出す Material Icons の ∨(expand_more) と重なって矢印が2つ見えていた。
→ スキンの ::after から背景画像を消して ∨ の1つに統一（content の ∨ は文字なので残る）。 */
.nx-skin .pulldown dt.js-pulldown::after{ background:none !important; }
/* 開いたリスト（ドロップダウン）— テーマのカード面＋枠＋影で浮かせる */
.nx-skin .pulldown dd,
.nx-skin .pulldown dd#tg_member_list{
position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:100%;
margin:0; padding:6px; list-style:none;
background:var(--nx-bg) !important; border:1px solid var(--nx-border) !important;
border-radius:10px; box-shadow:var(--nx-shadow);
}
.nx-skin .pulldown dd a,
.nx-skin .pulldown dd a.tg_member_link{
display:block; margin:0; padding:8px 14px; border-radius:8px; white-space:nowrap;
color:var(--nx-text) !important; background:transparent !important; text-decoration:none; font-weight:600;
}
.nx-skin .pulldown dd a:hover,
.nx-skin .pulldown dd a.check{ background:var(--nx-bg-soft) !important; color:var(--nx-primary) !important; }
/* 暗テーマ：ID切替の箱と開いたリストが半透明（bg-soft/bg）だと、背面の背景演出と混ざって
見づらい（システム会社指摘 260610）。→ 不透明の暗地＋テーマ色寄りの明るい枠線で
「操作できる部品」として浮き立たせる。color-mix非対応ブラウザは1行目の単色で動く。 */
/* 容れ物(.pulldown)とdtの中の子要素まで白背景を打ち消す＝レガシーpulldown.cssの白がdtの周り/隙間から
覗いて「薄い白背景」に見える問題を防ぐ（全ページ＝plain/非plain共通で暗く・260611）。 */
.nx-skin.nx-dark .pulldown, .nx-skin.nx-dark .pulldown dt.js-pulldown *{ background:transparent !important; }
.nx-skin.nx-dark .pulldown dt.js-pulldown{
background:#1b212c !important;
background:color-mix(in srgb, var(--nx-primary) 10%, #161b24) !important;
border-color:#4a5568 !important;
border-color:color-mix(in srgb, var(--nx-primary) 45%, #3a4453) !important;
color:#e8ecf1 !important;
}
.nx-skin.nx-dark .pulldown dt.js-pulldown::after{ color:var(--nx-text); }
.nx-skin.nx-dark .pulldown dd,
.nx-skin.nx-dark .pulldown dd#tg_member_list{ background:#1b212c !important; border-color:#4a5568 !important; }
/* ── メインナビ ────────────────────────────────────────────── */
.nx-skin #nav{ background:transparent; padding:10px 16px; border-bottom:1px solid var(--nx-border); overflow:visible; }
/* スマホでもスキンの横並びアイコンメニューを使い、レガシーのハンバーガー(#nav2)は隠す */
.nx-skin #nav{ display:block !important; }
.nx-skin #nav2{ display:none !important; }
/* レガシーCSSが display/float/nowrap を上書きしても確実に折り返すよう !important で強制 */
.nx-skin #main-nav{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex !important; flex-wrap:wrap !important; justify-content:center; gap:4px; width:auto !important; max-width:100%; white-space:normal !important; }
.nx-skin #main-nav>li{ float:none !important; width:auto !important; max-width:none !important; margin:0 !important; white-space:normal !important; }
.nx-skin #main-nav>li>a{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:72px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--nx-text-muted); font-size:12px; font-weight:600; transition:background .2s,color .2s; }
.nx-skin #main-nav>li>a:hover{ background:var(--nx-bg-soft); color:var(--nx-primary); }
.nx-skin #main-nav>li.nx-active>a{ background:rgba(230,57,70,.12); background:color-mix(in srgb, var(--nx-primary) 16%, transparent); color:var(--nx-primary); font-weight:700; }
/* 既定では元のPNGアイコンを残す（会員ごとに違うメニュー項目でも空欄にしない）。
マッピング済みの項目だけPNGを隠してMaterial Iconに差し替える。 */
.nx-skin #main-nav>li>a img{ display:inline-block; width:24px; height:24px; object-fit:contain; vertical-align:middle; }
.nx-skin #main-nav a[href*="act=member_top"] img,
.nx-skin #main-nav a[href*="act=pickup"] img,
.nx-skin #main-nav a[href*="act=bonuspayview"] img,
.nx-skin #main-nav a[href*="act=buyhistry"] img,
.nx-skin #main-nav a[href*="act=mapselect"] img,
.nx-skin #main-nav a[href*="act=memdetail"] img,
.nx-skin #main-nav a[href*="act=directdowndisp"] img,
.nx-skin #main-nav a[href*="act=memdownload"] img,
.nx-skin #main-nav a[href*="act=changeurl"] img{ display:none; }
.nx-skin #main-nav>li>a br{ display:none; }
.nx-skin #main-nav>li>a .trans{ color:inherit; }
.nx-skin #main-nav>li>a::before{ font-family:'Material Icons Round'; font-size:24px; line-height:1; color:inherit; }
.nx-skin #main-nav a[href*="act=member_top"]::before{ content:"dashboard"; }
.nx-skin #main-nav a[href*="act=pickup"]::before{ content:"manage_accounts"; }
.nx-skin #main-nav a[href*="act=bonuspayview"]::before{ content:"account_balance_wallet"; }
.nx-skin #main-nav a[href*="act=buyhistry"]::before{ content:"receipt_long"; }
.nx-skin #main-nav a[href*="act=buyhistryauto"]::before{ content:"local_shipping"; }
.nx-skin #main-nav a[href*="act=mapselect"]::before{ content:"account_tree"; }
.nx-skin #main-nav a[href*="act=memdetail"]::before{ content:"stacked_line_chart"; }
.nx-skin #main-nav a[href*="act=directdowndisp"]::before{ content:"groups"; }
.nx-skin #main-nav a[href*="act=memdownload"]::before{ content:"cloud_download"; }
.nx-skin #main-nav a[href*="act=changeurl"]::before{ content:"link"; }
.nx-skin #main-nav a[href*="act=member_move_point"]::before{ content:"currency_exchange"; } /* スキンで追加した「ポイント振分」項目 */
/* ── コンテンツ ────────────────────────────────────────────── */
.nx-skin #content-box{ padding:24px; background:transparent; }
.nx-skin #content>br{ display:none; }
/* 埋め込みカレンダー等の「フルブリード(width:100vw)」を解除。
スキンのカード(#pagewrap overflow:hidden)で右側が見切れる問題を防ぐ＝コンテンツ幅に収める。 */
.nx-skin #content .full-bleed{
width:auto !important; max-width:100% !important;
margin-left:0 !important; margin-right:0 !important;
border-radius:12px; overflow:hidden;
}
.nx-skin #content .cal-embed{ width:100% !important; }
.nx-skin .ptmovearea{ background:var(--nx-bg-soft); border:1px solid var(--nx-border); border-radius:14px; padding:18px 22px; margin:0 0 24px; }
.nx-skin .ptmovearea p{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:15px; }
.nx-skin .ptmovearea span.pt{ color:var(--nx-text); font-weight:600; }
.nx-skin #gomovepoint_btn{ -webkit-appearance:none; appearance:none; font-family:var(--nx-font); background:var(--nx-bg-soft); border:1px solid var(--nx-border); color:var(--nx-text); padding:10px 20px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer; transition:all .2s; }
.nx-skin #gomovepoint_btn:hover{ border-color:var(--nx-primary); color:var(--nx-primary); }
/* セクション題名バー（お知らせ／状況／組織図／オートシップ／紹介者一覧／購入履歴…全ページ共通）
左の縦アクセントはテーマグラデで連動、背景はテーマ色の薄ティント→bg-softへなめらかにグラデ。
color-mix 非対応ブラウザは fallback で var(--nx-bg-soft) 単色になる。 */
/* .info_titile はTOPページ等の見出し(h2)。各ページの見出しはクラス無しの