/* ============================================================
   ノコリゲームズ — 共通スタイル
   ============================================================ */
:root{
  --bg:#0d1526; --bg-alt:#111c33; --panel:#16233d; --line:#26375c;
  --ink:#eaf1fb; --ink-sub:#9db0cd;
  --accent:#f5c542; --accent2:#5ad2ff; --green:#4ecb8b; --pink:#ff8ac2;
  --radius:14px; --max:1080px;
  --font:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  line-height:1.9; font-size:16px; -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--accent2);}
a:hover{opacity:.85;}
.container{max-width:var(--max); margin:0 auto; padding:0 20px;}

/* ヘッダー */
.site-header{position:sticky; top:0; z-index:50; background:rgba(13,21,38,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.site-header__inner{max-width:var(--max); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-weight:800; font-size:19px; letter-spacing:.04em;}
.brand .em{font-size:23px;}
.nav{display:flex; gap:18px; flex-wrap:wrap;}
.nav a{color:var(--ink-sub); text-decoration:none; font-size:14px; font-weight:600;}
.nav a:hover{color:var(--accent);}
@media(max-width:600px){ .nav{gap:12px;} .nav a{font-size:12.5px;} .brand{font-size:16px;} }

/* ヒーロー */
.hero{padding:56px 0 40px; text-align:center; background:radial-gradient(circle at 50% 0%,#1b2d52,#0d1526 70%);}
.hero h1{font-size:clamp(26px,5vw,40px); margin:0 0 12px; line-height:1.4; font-weight:900;}
.hero .lead{color:var(--ink-sub); font-size:15.5px; max-width:640px; margin:0 auto;}
.hero .tags{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:18px;}
.tag{background:rgba(245,197,66,.12); border:1px solid rgba(245,197,66,.4); color:var(--accent); font-size:12.5px; padding:4px 12px; border-radius:999px;}

/* セクション */
.section{padding:44px 0;}
.section--alt{background:var(--bg-alt);}
.section h2{font-size:clamp(20px,3.4vw,27px); margin:0 0 8px; font-weight:800;}
.section .sub{color:var(--ink-sub); font-size:14.5px; margin:0 0 24px;}

/* ゲームカード */
.games{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px;}
.game-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s, border-color .18s;}
.game-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.game-card__img{aspect-ratio:10/7; background:#0a1120; overflow:hidden;}
.game-card__img img{width:100%; height:100%; object-fit:cover;}
.game-card__body{padding:14px 16px 16px; flex:1; display:flex; flex-direction:column;}
.game-card__title{font-size:17.5px; font-weight:800; margin:0 0 4px; display:flex; align-items:center; gap:7px; flex-wrap:wrap;}
.game-card__meta{font-size:12px; color:var(--ink-sub); margin-bottom:7px;}
.game-card__desc{font-size:13.5px; color:var(--ink-sub); flex:1; margin:0 0 12px;}
.game-card__actions{display:flex; gap:8px; flex-wrap:wrap;}
.badge-new{background:#e8523f; color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:999px;}

/* ボタン */
.btn{display:inline-block; padding:9px 18px; border-radius:9px; font-size:13.5px; font-weight:700; text-decoration:none; cursor:pointer; border:none;}
.btn--play{background:linear-gradient(135deg,#f5c542,#e0a01c); color:#231a00;}
.btn--sub{background:transparent; border:1px solid var(--line); color:var(--ink-sub);}
.btn--sub:hover{border-color:var(--accent); color:var(--accent);}
.btn--big{padding:13px 30px; font-size:15.5px;}

/* 記事 */
.article{max-width:760px; margin:0 auto;}
.article h2{font-size:clamp(19px,3vw,24px); margin:36px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--line);}
.article h3{font-size:17px; margin:26px 0 8px; color:var(--accent);}
.article p{margin:0 0 16px; font-size:15.5px;}
.article ul,.article ol{margin:0 0 18px; padding-left:1.5em;}
.article li{margin-bottom:7px; font-size:15px;}
.article .note{background:rgba(90,210,255,.08); border-left:3px solid var(--accent2); padding:12px 16px; border-radius:0 8px 8px 0; margin:0 0 18px; font-size:14.5px;}
.article .tip{background:rgba(78,203,139,.08); border-left:3px solid var(--green); padding:12px 16px; border-radius:0 8px 8px 0; margin:0 0 18px; font-size:14.5px;}
.article table{width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px;}
.article th,.article td{border:1px solid var(--line); padding:9px 11px; text-align:left;}
.article th{background:var(--panel); font-weight:700;}
.article .hero-img{border-radius:var(--radius); border:1px solid var(--line); margin-bottom:22px;}

/* 目次 */
.toc{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:28px;}
.toc strong{display:block; margin-bottom:8px; font-size:14.5px;}
.toc ol{margin:0; padding-left:1.3em;}
.toc li{font-size:14px; margin-bottom:4px;}

/* 広告枠 */
.ad-slot{margin:32px auto; text-align:center; min-height:100px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.02); border:1px dashed var(--line); border-radius:10px; color:#5d708f; font-size:12px;}

/* CTA */
.cta{background:linear-gradient(135deg,#1b2d52,#16233d); border:1px solid var(--line); border-radius:var(--radius); padding:28px 22px; text-align:center; margin:34px 0;}
.cta h3{margin:0 0 8px; font-size:19px; color:var(--ink);}
.cta p{color:var(--ink-sub); font-size:14px; margin:0 0 16px;}

/* フッター */
.site-footer{background:#0a1120; border-top:1px solid var(--line); padding:30px 0; margin-top:40px; font-size:13px; color:var(--ink-sub);}
.site-footer__inner{max-width:var(--max); margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.site-footer a{color:var(--ink-sub); text-decoration:none; margin-right:14px;}
.site-footer a:hover{color:var(--accent);}

/* パンくず */
.crumb{font-size:12.5px; color:var(--ink-sub); padding:14px 0 0;}
.crumb a{color:var(--ink-sub); text-decoration:none;}
.crumb a:hover{color:var(--accent);}