/* Theme Name: NECOKOUCAN LEGEND Theme URI: https://www.necokoucan.com/ Author: necogiji Author URI: https://www.necokoucan.com/ Description: NECOKOUCAN オリジナルテーマ。ミリタリー世界観・ダークテーマ・Army フォント統一。Inspiro 非依存。 Version: 1.8.0 License: Private Text Domain: necokoucan */ /* ════════════════════════════════════════════ NECOKOUCAN THEME — GLOBAL CSS [BUG-1修正] @import は必ずファイル先頭・@font-faceより前に置く ════════════════════════════════════════════ */ /* ── [1] Google Fonts は functions.php の wp_enqueue_style で読み込む ── */ /* @import は削除済み → レンダリングブロック解消 */ /* ── [2] Army フォント（相対URLでOK: style.cssと同じテーマフォルダが基点） ── */ @font-face { font-family: 'Army'; src: url('fonts/Army.woff2') format('woff2'), url('fonts/Army.woff') format('woff'), url('fonts/Army.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: block; } /* ── [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（v1.8 統合版） ── */ /* 旧 .nk-footer クラス互換性保持（page-*系の独自フッターHTML用） */ .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: 15px; letter-spacing: 2px; color: rgba(180,215,235,0.45); 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: 12px; letter-spacing: 1px; color: rgba(180,215,235,0.28); } /* ── nk-footer.php / footer.php 共通（リッチ版） ── */ .nk-footer-full { background: #050a10; border-top: 1px solid rgba(0,150,220,0.15); padding: 52px 80px 36px; width: 100%; } .nk-footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: start; margin-bottom: 40px; } .nk-footer-brand {} .nk-footer-logo { text-decoration: none; display: inline-block; margin-bottom: 14px; } .nk-footer-logo-main { font-family: var(--nk-font-army); font-size: 38px; letter-spacing: 7px; color: #ffffff; text-shadow: 0 0 22px rgba(0,140,220,0.4); line-height: 1; } .nk-footer-logo-main span { color: var(--nk-cyan2); } .nk-footer-logo-sub { font-family: var(--nk-font-serif); font-size: 12px; letter-spacing: 4px; color: rgba(0,180,220,0.5); margin-top: 5px; } .nk-footer-tagline { font-family: var(--nk-font-army); font-size: 12px; letter-spacing: 4px; color: rgba(0,180,220,0.3); margin-top: 14px; } .nk-footer-nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .nk-footer-nav-label { font-family: var(--nk-font-army); font-size: 10px; letter-spacing: 5px; color: rgba(0,180,220,0.3); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .nk-footer-nav-label::before { content: ''; flex: 1; height: 0.5px; background: rgba(0,180,220,0.15); min-width: 40px; } .nk-footer-nav a { font-family: var(--nk-font-army); font-size: 15px; letter-spacing: 3px; color: rgba(180,215,235,0.55); text-decoration: none; transition: color 0.2s; display: block; text-align: right; padding: 5px 0; } .nk-footer-nav a:hover { color: var(--nk-cyan2); } /* SHOPボタン — necokoucanデザイン準拠 */ .nk-footer-shop-link { font-family: var(--nk-font-army) !important; font-size: 15px !important; letter-spacing: 4px !important; color: var(--nk-white) !important; background: rgba(0,110,190,0.85) !important; border: 0.5px solid rgba(0,180,220,0.4) !important; padding: 11px 28px !important; margin-top: 10px !important; display: inline-flex !important; align-items: center; gap: 8px; transition: background 0.2s, border-color 0.2s, transform 0.15s !important; } .nk-footer-shop-link:hover { background: var(--nk-cyan) !important; border-color: var(--nk-cyan2) !important; color: var(--nk-navy) !important; transform: translateX(3px); } .nk-footer-rule { height: 0.5px; background: linear-gradient(90deg, transparent, rgba(0,150,220,0.22), transparent); margin-bottom: 24px; } .nk-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .nk-footer-copy { font-family: var(--nk-font-sans); font-size: 12px; letter-spacing: 1px; color: rgba(180,215,235,0.22); } .nk-footer-badge { font-family: var(--nk-font-army); font-size: 10px; letter-spacing: 4px; color: rgba(0,180,220,0.22); } /* ── スクロールトップボタン ── */ .nk-scroll-top { position: fixed; bottom: 32px; right: 32px; z-index: 999; width: 52px; height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: rgba(6,12,20,0.92); border: 1px solid rgba(0,170,221,0.45); color: rgba(0,180,220,0.7); cursor: pointer; font-family: var(--nk-font-army); font-size: 9px; letter-spacing: 1px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, border-color 0.2s, color 0.2s, box-shadow 0.2s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .nk-scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .nk-scroll-top:hover { border-color: rgba(0,200,255,0.9); color: var(--nk-cyan2); box-shadow: 0 0 16px rgba(0,170,221,0.35), 0 0 32px rgba(0,120,200,0.15), inset 0 0 12px rgba(0,100,180,0.1); transform: translateY(-3px); } .nk-scroll-top:hover svg polyline, .nk-scroll-top:hover svg line { stroke: var(--nk-cyan2); } /* ── [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; } } /* ════════════════════════════════════════════ Army フォント グローバル強制適用 記事HTMLで 'Black Ops One' が指定されている箇所を Army に統一する（記事HTMLを変更せずにテーマ側で解決） ════════════════════════════════════════════ */ /* インラインstyleでBlack Ops Oneが指定されている要素にArmyを優先 */ [style*="Black Ops One"], [style*="black ops one"], [style*="'Black Ops One'"] { font-family: 'Army', 'Black Ops One', 'Impact', sans-serif !important; } /* 記事内クラスプレフィックス別にArmy適用 */ .entry-content [class*="hbk-hero-title"], .entry-content [class*="hbk-spec"], .entry-content [class*="fub-hero"], .entry-content [class*="ayn-hero"], .entry-content [class*="mrc-hero"], .entry-content [class*="urn-hero"], .entry-content [class*="snm-hero"], .entry-content [class*="syk-hero"] { font-family: 'Army', 'Black Ops One', 'Impact', sans-serif !important; } /* ── [14] レスポンシブ（フッター・スクロールトップ含む） ── */ @media (max-width: 900px) { .nk-footer-full { padding: 36px 20px 24px; } .nk-footer-inner { grid-template-columns: 1fr; gap: 28px; } .nk-footer-nav { align-items: flex-start; } .nk-footer-nav a { text-align: left; } .nk-footer-nav-label { flex-direction: row-reverse; } .nk-footer-nav-label::before { display: none; } .nk-scroll-top { bottom: 20px; right: 16px; width: 44px; height: 44px; } .nk-footer { padding: 24px 20px 20px; } .nk-footer-links { gap: 14px; } }