/* ============================================================ ダークモード（TOP洗練案「案2 プレミアム・ダーク」がもと） のときだけ効く。切り替えは inc/theme-mode.php ライトの見た目には影響しない。このファイルを外せばダークは消える ============================================================ */ /* ---- 切り替えボタン（ライトでは月、ダークでは太陽を出す） ---- */ .theme-tg .i-sun{display:none} html[data-theme="dark"] .theme-tg .i-sun{display:block} html[data-theme="dark"] .theme-tg .i-moon{display:none} /* ---- 色の変数（多くの部品はこれだけで切り替わる） ---- */ html[data-theme="dark"]{ color-scheme:dark; --ground:#0D151D; --panel:#121C26; --panel-2:#1A2531; --edge:rgba(255,255,255,.09); --edge-soft:rgba(255,255,255,.06); --ink:#E8EFF5; --ink-2:#B9C6D3; --muted:#8597AB; --accent-text:#5FE0D0; --accent-soft:rgba(18,196,176,.16); --navy-soft:rgba(255,255,255,.05); --steel:#5FE0D0; --steel-soft:rgba(18,196,176,.11); --profit:#5CD08A; --loss:#F0857B; --code-bg:#0A1118; --code-ink:#DCE5EE; --kw:#E893DC; --str:#7EDB9C; --num:#F2A968; --cm:#7F92A6; --fn:#86B6FF; --pre:#BDA2F2; --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 24px -16px rgba(0,0,0,.75); } html[data-theme="dark"] body,html[data-theme="dark"] body.is-portal{background:#0A1118;color:var(--ink)} html[data-theme="dark"] body.home{background:#0A1118;background-image:radial-gradient(60% 40% at 80% 0%,rgba(18,196,176,.13),transparent 60%),radial-gradient(50% 35% at 0% 30%,rgba(61,111,242,.09),transparent 60%);background-size:auto} /* ---- ヘッダー ---- */ html[data-theme="dark"] .bar,html[data-theme="dark"] body.is-portal .bar{background:rgba(10,17,24,.84);border-bottom:1px solid rgba(255,255,255,.07)} html[data-theme="dark"] .brand img{filter:brightness(0) invert(1)} html[data-theme="dark"] .gnav a{color:#B9C6D3} html[data-theme="dark"] .gnav a.on,html[data-theme="dark"] .gnav a:hover{color:#fff} html[data-theme="dark"] .gnav .gn-sub{background:#121C26;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.5)} html[data-theme="dark"] .gnav .gn-sub a:hover{background:rgba(255,255,255,.05)} html[data-theme="dark"] .hd-search input[type=search],html[data-theme="dark"] .hd-search input[type=search]:focus{background:rgba(255,255,255,.06);color:var(--ink)} html[data-theme="dark"] .ib{color:#DCE5EE} html[data-theme="dark"] .ib:hover{background:rgba(255,255,255,.08);color:#fff} html[data-theme="dark"] .acct-menu{background:#121C26;border-color:rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.55)} html[data-theme="dark"] .acct-btns a{background:rgba(255,255,255,.04)} html[data-theme="dark"] .acct-prog .track{background:rgba(255,255,255,.08)} html[data-theme="dark"] .mnav{background-color:#0D151D} /* ---- 入力欄 ---- */ html[data-theme="dark"] input[type=text],html[data-theme="dark"] input[type=email],html[data-theme="dark"] input[type=url],html[data-theme="dark"] input[type=number], html[data-theme="dark"] input[type=password],html[data-theme="dark"] input[type=date],html[data-theme="dark"] input[type=search],html[data-theme="dark"] select,html[data-theme="dark"] textarea{ background:rgba(255,255,255,.05);color:var(--ink);border-color:rgba(255,255,255,.14)} /* ---- カード（ガラスのような質感） ---- */ html[data-theme="dark"] .dcard,html[data-theme="dark"] .course,html[data-theme="dark"] .pbody,html[data-theme="dark"] .tool-card,html[data-theme="dark"] .mp-card, html[data-theme="dark"] .lg-card,html[data-theme="dark"] .bd-post,html[data-theme="dark"] .dash-side .ivideo.is-side,html[data-theme="dark"] .lv-b,html[data-theme="dark"] .dcard.path{ background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-color:rgba(255,255,255,.08); box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -30px rgba(0,0,0,.85)} html[data-theme="dark"] .dcard h2,html[data-theme="dark"] .dcard h3,html[data-theme="dark"] .dh2,html[data-theme="dark"] .dhero h1,html[data-theme="dark"] .phead h1{color:#fff} html[data-theme="dark"] .dcard.goal,html[data-theme="dark"] .goal-cta{background:linear-gradient(160deg,rgba(18,196,176,.16),rgba(18,196,176,.05));border-color:rgba(18,196,176,.3)} html[data-theme="dark"] #dashBadges.dcard,html[data-theme="dark"] #dashGoal.dcard{border:1px solid rgba(95,224,208,.18)} html[data-theme="dark"] .badge.ok{background:rgba(18,196,176,.12);border-color:rgba(95,224,208,.35)} /* ---- コース ---- */ html[data-theme="dark"] .course::after{color:rgba(255,255,255,.05)} html[data-theme="dark"] .course:hover{border-color:var(--cc,#12C4B0);box-shadow:0 0 0 1px var(--cc,#12C4B0),0 20px 50px -24px var(--cc,#12C4B0)} html[data-theme="dark"] .course .ic,html[data-theme="dark"] .course.on .ic,html[data-theme="dark"] .course.full .ic{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} html[data-theme="dark"] .course .ttl b{color:#fff} html[data-theme="dark"] .chip{background:rgba(255,255,255,.07);color:#B9C6D3} html[data-theme="dark"] .course.on .chip{background:var(--cc-soft);color:#fff} html[data-theme="dark"] .course.full .chip{background:rgba(92,208,138,.14);color:#7EE0A6} html[data-theme="dark"] .course .pbar,html[data-theme="dark"] .pbar,html[data-theme="dark"] .track{background:rgba(255,255,255,.08);box-shadow:none} html[data-theme="dark"] .course .pbar i{box-shadow:0 0 12px var(--cc,#12C4B0)} /* ---- 学習の道のり ---- */ html[data-theme="dark"] .step .dot{background:#0F1822;border-color:rgba(255,255,255,.14);color:#8597AB} html[data-theme="dark"] .steps-line{background:rgba(255,255,255,.1)} html[data-theme="dark"] .step .lbl{color:#B9C6D3} /* ---- 動画（棚・一覧・記事） ---- */ html[data-theme="dark"] .vt-t{color:#fff} html[data-theme="dark"] .vt-chip{background:rgba(255,255,255,.07);color:#DCE5EE} html[data-theme="dark"] .vt-chip:hover{background:rgba(255,255,255,.12)} html[data-theme="dark"] .vt-chip.on{background:#E8EFF5;color:#0A1118} html[data-theme="dark"] .vt-av,html[data-theme="dark"] .vt-ch img,html[data-theme="dark"] .vt-ch>i{background:#fff} html[data-theme="dark"] .vt-btn{background:#12C4B0;color:#06231F} html[data-theme="dark"] .vt-btn:hover{background:#5FE0D0;color:#06231F} html[data-theme="dark"] .vt-desc{background:rgba(255,255,255,.05)} html[data-theme="dark"] .vs-arrow{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)} html[data-theme="dark"] .vs-arrow:hover{background:rgba(255,255,255,.12)} html[data-theme="dark"] .vs-arrow svg{stroke:#fff} html[data-theme="dark"] .dash-side .ivideo.is-side .ivideo-h h2{color:#fff} html[data-theme="dark"] .dash-side .ivideo.is-side .ivideo-frame{background:#0A1118} html[data-theme="dark"] .lv-pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)} html[data-theme="dark"] .lv-dur{background:rgba(255,255,255,.07);color:#DCE5EE} html[data-theme="dark"] .lv-title{color:#fff} html[data-theme="dark"] .lv-btn{background:#12C4B0;color:#06231F} html[data-theme="dark"] .lv-btn svg{fill:#06231F} html[data-theme="dark"] .lv-btn:hover{background:#5FE0D0} html[data-theme="dark"] .lv-a .lv-frame{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 28px 60px -30px rgba(0,0,0,.9)} /* ---- 右の列など ---- */ html[data-theme="dark"] .refs a{color:#DCE5EE;border-color:rgba(255,255,255,.06)} html[data-theme="dark"] .refs a:hover{color:#5FE0D0} html[data-theme="dark"] .news a,html[data-theme="dark"] .bd-latest a{color:#DCE5EE} html[data-theme="dark"] .dbtn.ghost{background:transparent;border-color:rgba(95,224,208,.6);color:#5FE0D0} html[data-theme="dark"] .site-foot{background:#070C11;border-top:1px solid rgba(255,255,255,.06)} html[data-theme="dark"] .banner.image{background:#0A1118;border-bottom-color:rgba(95,224,208,.25)} /* ---- 記事ページ ---- */ html[data-theme="dark"] .ctx{background:#0D151D} html[data-theme="dark"] .lesson-body h2,html[data-theme="dark"] .lesson-body h3,html[data-theme="dark"] .ah h1{color:#fff} html[data-theme="dark"] .lesson-body a{color:#5FE0D0} html[data-theme="dark"] .lesson-body .lesson-figure img,html[data-theme="dark"] .lesson-body figure.wp-block-image img{border-radius:8px} html[data-theme="dark"] .zoombox img{background:#fff} /* ---- 成功・注意・失敗の色（明るい地の色を、暗い地向けに） ---- */ html[data-theme="dark"] .course.full .chip,html[data-theme="dark"] .g-next.done,html[data-theme="dark"] .qq-opt.ok,html[data-theme="dark"] .qq-fb.ok, html[data-theme="dark"] .quiz-result.ok,html[data-theme="dark"] .quiz-st.ok,html[data-theme="dark"] .bd-safety span.ok{background:rgba(92,208,138,.13);color:#9BE6B8;border-color:rgba(92,208,138,.4)} html[data-theme="dark"] .g-next.late,html[data-theme="dark"] .g-alert,html[data-theme="dark"] .qq-opt.ng,html[data-theme="dark"] .qq-fb.ng,html[data-theme="dark"] .road-x:hover, html[data-theme="dark"] .mn-table tr.over td,html[data-theme="dark"] .road li.late,html[data-theme="dark"] .bt-rows li.r-ng{background:rgba(240,133,123,.12);color:#F7B3AC;border-color:rgba(240,133,123,.4)} html[data-theme="dark"] .caution,html[data-theme="dark"] .quiz-result.ng,html[data-theme="dark"] .bt-rows li.r-warn{background:rgba(242,169,104,.12);color:#F5C99A;border-color:rgba(242,169,104,.4)} html[data-theme="dark"] .road li.late .road-n{background:rgba(240,133,123,.3);color:#fff} /* ---- 掲示板のチャット ---- */ html[data-theme="dark"] .chat{background:#0F1821} html[data-theme="dark"] .ch-bubble{background:#1A2531;color:var(--ink)} html[data-theme="dark"] .ch-form,html[data-theme="dark"] .ch-note,html[data-theme="dark"] .ch-login{background:#121C26} html[data-theme="dark"] .ch-form textarea:focus{background:rgba(255,255,255,.07)} /* ---- 修了証は紙なので、ダークでも白のまま ---- */ html[data-theme="dark"] .cert-sheet{--ink:#1E2A3A;--ink-2:#52627A;--muted:#7A8799;--edge:#E2E8E7;--panel-2:#F1F4F4;--accent-text:#0B8A7D;color:#1E2A3A;background:#fff}