:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#23201c; --sub:#6b645c;
  --accent:#e0531f; --accent-soft:#fbe9e1; --line:#ece6de;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9; font-size:17px;
}
a{color:var(--accent);}
header.site{
  background:var(--ink); color:#fff; padding:14px 20px;
  display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:10;
}
header.site .logo{font-weight:800; letter-spacing:.04em; font-size:18px;}
header.site .logo a{color:#fff; text-decoration:none;}
header.site .logo span{color:var(--accent);}
header.site nav{margin-left:auto; font-size:14px; opacity:.9;}
header.site nav a{color:#fff; text-decoration:none; margin-left:16px;}
.wrap{max-width:820px; margin:0 auto; padding:0 20px;}

/* ---- トップページ ---- */
.hero{padding:40px 0 10px;}
.hero h1{font-size:28px; margin:0 0 8px;}
.hero p{color:var(--sub); margin:0;}
.section-title{font-size:20px; margin:34px 0 14px; padding-left:12px; border-left:5px solid var(--accent);}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin-bottom:30px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  text-decoration:none; color:var(--ink); box-shadow:0 6px 24px rgba(0,0,0,.04); transition:transform .12s ease, box-shadow .12s ease;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.08);}
.card .thumb{height:120px; display:flex; align-items:center; justify-content:center; font-size:44px;
  background:linear-gradient(160deg,#e0531f 0%,#f7a072 100%);}
.card .body{padding:16px 18px 20px;}
.card .cat{display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px;}
/* ゲーム名（やや小さめ） */
.card .gamename{font-size:16px; font-weight:800; margin:9px 0 3px; line-height:1.4; color:var(--sub);}
.card .rating{font-size:14px; color:var(--accent); letter-spacing:1px; margin:0 0 10px; line-height:1.2;}
.card .rating .score{color:var(--sub); font-size:12px; font-weight:700; letter-spacing:0; margin-left:5px;}
/* 記事タイトル（キャッチ）を主役に：大きく・余白広め・読みやすく */
.card .subtitle{font-size:16px; font-weight:700; color:var(--ink); margin:0; line-height:1.65;}

/* ---- 記事ページ ---- */
article{
  background:var(--card); margin:28px auto; border:1px solid var(--line);
  border-radius:14px; padding:36px 40px 48px; box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.breadcrumb{font-size:13px; color:var(--sub); margin:22px 0 0;}
.breadcrumb a{text-decoration:none;}
.cat{display:inline-block; background:var(--accent-soft); color:var(--accent);
  font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px;}
/* 記事ページ：ゲーム名を大きく表示（何のゲームか一目で分かるように） */
article .gamename{display:block; font-size:19px; font-weight:800; line-height:1.35;
  margin:14px 0 3px; color:var(--sub);}
article .gamename .en{display:inline; font-size:13px; font-weight:600; color:var(--sub); letter-spacing:.03em; margin-left:8px;}
article .rating-lead{font-size:16px; color:var(--accent); letter-spacing:2px; margin:6px 0;}
article .rating-lead span{color:var(--sub); font-size:14px; letter-spacing:0; margin-left:4px;}
article h1{font-size:28px; line-height:1.75; margin:18px 0 26px; color:var(--ink); font-weight:800;}
.meta{color:var(--sub); font-size:14px; margin-bottom:8px;}
.tags{margin:14px 0 4px;}
.tags span{display:inline-block; font-size:12px; color:var(--sub);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:0 6px 6px 0;}
article h2{font-size:22px; margin:38px 0 12px; padding-left:14px; border-left:5px solid var(--accent);}
article p{margin:14px 0;}
.photo{
  background:repeating-linear-gradient(45deg,#f3efe9,#f3efe9 12px,#efe9e1 12px,#efe9e1 24px);
  border:2px dashed #cfc6ba; border-radius:12px; color:var(--sub);
  text-align:center; padding:38px 20px; margin:22px 0; font-size:14px;
}
.photo img{max-width:100%; border-radius:8px; display:block; margin:0 auto;}
.rating{font-size:26px; letter-spacing:2px; color:var(--accent); margin:6px 0;}
.verdict{background:var(--accent-soft); border-radius:12px; padding:20px 24px; margin:26px 0;}
.verdict h2{margin-top:0; border:none; padding-left:0;}
.spec{width:100%; border-collapse:collapse; margin:20px 0; font-size:15px;}
.spec th,.spec td{border:1px solid var(--line); padding:9px 12px; text-align:left;}
.spec th{background:#f7f2ec; width:34%; color:var(--sub); font-weight:700;}

footer.site{color:var(--sub); font-size:13px; text-align:center; padding:30px 20px 50px;}
footer.site a{color:var(--sub);}