/* ==================== THEME：霧島リク ====================
  見た目はこのファイルだけで決まる（全ページ共通）
  ダーク固定のゲーミング系
========================================================== */
:root {
  /* 配色 */
  --accent: #c8f53c;
  --accent-2: #38d9f5;
  --on-accent: #0a0c0f;
  --bg: #0a0c0f;
  --bg-2: #0f1216;
  --surface: #14181e;
  --text: #edf1f4;
  --muted: #8b95a3;
  --line: #222932;
  --star: #c8f53c;
  /* 質感：角ばった形・影より線で見せる */
  --shadow: 0 0 0 0 transparent;
  --btn-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  --border-w: 1px;
  --radius: 6px;
  --visual-radius: 0;
  /* フォント：角ばった欧文＋太いゴシック */
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-en: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-accent: "Chakra Petch", "Noto Sans JP", sans-serif;
  --en-heavy: 700;
  --en-light: 300;
  /* モチーフ：照準＋ひし形。背景は点が瞬く */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Cpath d='M12 1v5M12 18v5M1 12h5M18 12h5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --motif-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l10 10-10 10L2 12z'/%3E%3C/svg%3E");
  --particle: none;
  color-scheme: dark;
}

/* サイト固有の微調整 */
.btn { border-radius: 4px; text-transform: uppercase; font-weight: 600; }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.nav { font-weight: 500; }
.hero h1 { font-weight: 900; letter-spacing: .02em; }
.sec-head h2, .cta h2, .page-hero h1 { text-transform: uppercase; letter-spacing: .02em; }
.sec-head .num::before { content: "// "; opacity: .6; }
.eyebrow::before { width: 10px; height: 10px; background: none; border: 2px solid currentColor; rotate: 45deg; }
.tags span, .news .cat, .req { border-radius: 3px; }
.chip span, .swatch { border-radius: 4px; }
.chip span::before { border-radius: 2px; }
.cta .go, .done .mark { border-radius: 6px; }
.to-top { border-radius: 6px; }
.to-top svg { display: none; }
.to-top.show { border: 1px solid var(--line); }

/* ヒーロー：方眼の背景 */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 65% 40%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 65% 40%, #000 15%, transparent 70%); }
.hero .glow.a { opacity: .18; }
.hero .glow.b { opacity: .16; }

/* キービジュアル：角を斜めに落とす */
.visual { --cut: 44px; border: 0; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  background:
    radial-gradient(circle at 50% 36%, rgb(255 255 255 / .22) 0 17%, transparent 17.5%),
    radial-gradient(ellipse 72% 44% at 50% 100%, rgb(255 255 255 / .16) 0 99%, transparent 100%),
    linear-gradient(165deg, #1d2a14, #0f2a33); }
.visual::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 50%, rgb(0 0 0 / .18) 50%) 0 0 / 100% 4px; }
.visual .deco { color: var(--accent); top: 8%; right: 14%; width: 50px; height: 50px; }
.visual .bit { color: var(--accent-2); width: 9px; height: 9px; }
/* 四隅のフレーム */
.visual-wrap::after { content: ""; position: absolute; inset: -16px; pointer-events: none; --c: color-mix(in srgb, var(--accent) 70%, transparent); --l: 30px;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--l) 2px, linear-gradient(var(--c), var(--c)) top left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) top right / var(--l) 2px, linear-gradient(var(--c), var(--c)) top right / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom left / 2px var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px, linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l);
  background-repeat: no-repeat; }
/* 仮サムネイルは暗めに */
.ph-1, .ph-2, .ph-3, .ph-4, .ph-5 { filter: brightness(.42) saturate(.8); }
.ring { display: none; }
.next-card { border-radius: 4px; border-left: 3px solid var(--accent); }
.next-card .lbl::before { background: #ff4655; animation-name: pulseRed; }
@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 #ff4655; } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

.card { transition: border-color .4s; }
.stat b em { color: var(--accent); }
.about-text .quote em { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 35%, transparent) 62%); }
.ph-figure { background:
  radial-gradient(circle at 50% 21%, rgb(255 255 255 / .2) 0 10%, transparent 10.5%),
  radial-gradient(ellipse 30% 50% at 50% 66%, rgb(255 255 255 / .14) 0 99%, transparent 100%),
  linear-gradient(165deg, #1d2a14, #0f2a33); }