/* Theme Name: NECOKOUCAN LEGEND Theme URI: https://www.necokoucan.com/ Author: necogiji Author URI: https://www.necokoucan.com/ Description: NECOKOUCAN オリジナルテーマ。ミリタリー世界観・ダークテーマ・Army フォント統一。Inspiro 非依存。 Version: 1.0.0 License: Private Text Domain: necokoucan */ /* ════════════════════════════════════════════ NECOKOUCAN THEME — GLOBAL CSS [BUG-1修正] @import は必ずファイル先頭・@font-faceより前に置く ════════════════════════════════════════════ */ /* ── [1] Google Fonts（@importは必ず先頭） ── */ @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Black+Ops+One&display=swap'); /* ── [2] Army フォント（相対URLでOK: style.cssと同じテーマフォルダが基点） ── */ @font-face { font-family: 'Army'; src: url('fonts/Army.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ── [3] CSS変数（:root でグローバル定義 → var(--nk-*) でどこでも使える） ── */ :root { --nk-font-army: 'Army', 'Black Ops One', 'Impact', sans-serif; --nk-font-serif: 'Noto Serif JP', serif; --nk-font-sans: 'Noto Sans JP', sans-serif; --nk-navy: #080e16; --nk-navy2: #0a1520; --nk-navy3: #0d1a28; --nk-blue: #0077cc; --nk-cyan: #00aadd; --nk-cyan2: #4dc8ef; --nk-red: #e84040; --nk-orange: #f08c2a; --nk-gold: #d4a827; --nk-white: #ffffff; --nk-white-dim: rgba(255,255,255,0.75); --nk-text: rgba(210,230,245,0.88); --nk-text-sub: rgba(160,195,220,0.65); --nk-text-dim: rgba(140,180,210,0.40); --nk-border: rgba(0,150,220,0.15); --nk-border2: rgba(0,160,220,0.30); --nk-navbar-h: 72px; } /* ── [4] リセット ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* ── [5] ベーススタイル ── */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--nk-navy); color: var(--nk-text); font-family: var(--nk-font-sans); font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; } /* ── [6] WordPressラッパーを完全フラット化 ── */ #page, #content, #main, #primary, .site, .site-content, .site-main, .content-area, .post-content, .entry-content, .wp-block-group, .is-layout-constrained, .wp-site-blocks, article, .hentry { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; float: none !important; border: none !important; box-shadow: none !important; } /* ── [7] サイドバー非表示 ── */ .sidebar, .widget-area, .sidebar-area, #secondary, #sidebar { display: none !important; } /* ── [8] リンクデフォルト ── */ a { color: var(--nk-cyan); text-decoration: none; } a:hover { color: var(--nk-cyan2); } img { max-width: 100%; height: auto; display: block; } /* ── [9] 管理バー対応 ── */ .admin-bar .nk-navbar { top: 32px !important; } @media screen and (max-width: 782px) { .admin-bar .nk-navbar { top: 46px !important; } } /* ── [10] NAVBAR（内のstyle.cssで定義することで変数タイミング問題を解消） ── */ .nk-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 18px 48px; background: linear-gradient(to bottom, rgba(8,14,22,0.96), rgba(8,14,22,0.0)); border-bottom: 0.5px solid rgba(0,150,220,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s, top 0.2s; } .nk-navbar.scrolled { background: rgba(8,14,22,0.98); border-bottom-color: rgba(0,150,220,0.28); } .nk-logo { display: flex; flex-direction: column; gap: 3px; text-decoration: none; } .nk-logo-main { font-family: var(--nk-font-army); font-size: 44px; letter-spacing: 7px; color: var(--nk-white); text-shadow: 0 0 28px rgba(0,140,220,0.5); line-height: 1; } .nk-logo-main span { color: var(--nk-cyan2); } .nk-logo-sub { font-family: var(--nk-font-serif); font-size: 12px; letter-spacing: 4px; color: rgba(0,180,220,0.55); } .nk-nav-links { display: flex; gap: 28px; list-style: none; align-items: center; } .nk-nav-links a { font-family: var(--nk-font-army); font-size: 16px; letter-spacing: 3px; color: rgba(180,215,235,0.72); text-decoration: none; transition: color 0.2s; } .nk-nav-links a:hover { color: var(--nk-white); } .nk-nav-links .btn-nav { background: rgba(0,110,190,0.85); color: var(--nk-white) !important; padding: 10px 22px; font-size: 16px; letter-spacing: 3px; border: 0.5px solid rgba(0,180,220,0.3); transition: background 0.2s; } .nk-nav-links .btn-nav:hover { background: var(--nk-cyan) !important; } /* ── [11] FOOTER ── */ .nk-footer { background: #050a10; border-top: 0.5px solid rgba(0,150,220,0.12); padding: 36px 48px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; width: 100%; } .nk-footer-links { display: flex; flex-wrap: wrap; gap: 20px; } .nk-footer-links a { font-family: var(--nk-font-army); font-size: 13px; letter-spacing: 2px; color: rgba(180,215,235,0.32); text-decoration: none; transition: color 0.2s; } .nk-footer-links a:hover { color: var(--nk-cyan2); } .nk-footer-copy { font-family: var(--nk-font-sans); font-size: 11px; letter-spacing: 1px; color: rgba(180,215,235,0.25); } /* ── [12] コンテンツエリア ── */ .nk-post-main { width: 100%; overflow-x: hidden; } .nk-post-main > p:empty { display: none; } /* ── [13] レスポンシブ ── */ @media (max-width: 900px) { .nk-navbar { padding: 14px 20px; } .nk-nav-links li:not(:last-child) { display: none; } .nk-logo-main { font-size: 30px; letter-spacing: 5px; } .nk-logo-sub { display: none; } .nk-footer { padding: 24px 20px 20px; } .nk-footer-links { gap: 14px; } }