/* 攻略サイト共通のスタイル。--theme（見出しの帯）と --accent（差し色）はゲームごとに base.html で上書きする。 */
:root {
  --theme: #2a5ea8; --accent: #f2b53b;
  --fg: #333; --strong: #222; --muted: #777; --bg: #eceef1; --line: #d0d9e1; --th: #f1f4f6;
  --link: #2b6fc0; --hover: #f2f7fd; --red: #d64545;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg); font-size: 14px; line-height: 1.7;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
ul, ol { margin: 0 0 12px; }
.wrap { max-width: 1080px; margin: 0 auto; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.15em; }

/* ヘッダー */
.gh-top { background: #fff; border-top: 3px solid var(--theme); border-bottom: 1px solid #e2e5e9; }
.gh-top .wrap { display: flex; align-items: center; gap: 12px; padding: 7px 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--strong); letter-spacing: .02em; }
.logo:hover { text-decoration: none; }
.logo small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.logo-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--theme); color: #fff; font-size: 16px; }
.search { position: relative; margin-left: auto; flex: 1 1 300px; max-width: 360px; }
.search-box { display: flex; align-items: center; gap: 6px; border: 1px solid #c9ced4; border-radius: 4px; background: #f7f8fa; padding: 0 10px; color: #999; font-size: 16px; }
.search-box input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: inherit; font-size: 14px; color: var(--fg); outline: none; }
.search-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0; list-style: none; background: #fff; border: 1px solid #c9ced4; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); max-height: 60vh; overflow-y: auto; }
.search-results li { border-bottom: 1px solid #eee; }
.search-results a { display: block; padding: 10px 12px; font-size: 13px; font-weight: 700; }
.search-results .none { padding: 10px 12px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .search { flex-basis: 100%; max-width: none; margin-left: 0; } }

.hero { position: relative; overflow: hidden; background: var(--theme); }
.hero::before { content: ""; position: absolute; inset: -30px; background: var(--hero, none) center / cover; filter: blur(22px) brightness(.5); }
.hero .wrap { position: relative; }
.hero-img { display: block; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 460 / 215; object-fit: cover; }
.hero-title { display: block; padding: 14px 14px; color: #fff; font-size: 20px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.hero-img + .hero-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 9px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font-size: 18px; }
.hero-title:hover { text-decoration: none; }

.gnav { background: #fff; border-bottom: 1px solid #dde1e5; }
.gnav ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 auto; padding: 0; list-style: none; }
.gnav li { border-right: 1px solid #e3e6e9; border-bottom: 1px solid #e3e6e9; }
.gnav li:nth-child(3n) { border-right: 0; }
.gnav a { display: block; padding: 9px 4px; text-align: center; font-size: 12px; font-weight: 700; color: var(--strong); line-height: 1.4; }
.gnav a:hover { background: var(--hover); text-decoration: none; }
.gnav a.current { color: var(--theme); box-shadow: inset 0 -3px 0 var(--accent); }

.breadcrumb { background: #f7f8fa; border-bottom: 1px solid #e3e6e9; font-size: 11.5px; color: var(--muted); }
.breadcrumb .wrap { padding: 7px 12px; white-space: nowrap; overflow-x: auto; }

/* 本文と右カラム */
.layout { display: block; }
.article { background: #fff; padding: 14px 12px 24px; min-width: 0; }
.side { padding: 12px 0; }
@media (min-width: 1000px) {
  .gnav ul { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .gnav li, .gnav li:nth-child(3n) { border-right: 1px solid #e3e6e9; border-bottom: 0; }
  .gnav li:last-child { border-right: 0; }
  .gnav a { padding: 11px 4px; font-size: 13px; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; padding: 20px 0 32px; align-items: start; }
  .article { padding: 22px 26px 32px; border: 1px solid #e1e4e8; font-size: 15px; }
  .side { padding: 0; position: sticky; top: 12px; }
  .hero-title { font-size: 24px; }
}

/* 記事の頭 */
.article-head { margin-bottom: 14px; }
.kicker { margin: 0; font-size: 13px; font-weight: 700; color: #555; }
.article-head h1 { margin: 2px 0 8px; font-size: 21px; line-height: 1.45; color: var(--strong); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: #888; }
.byline span { display: inline-flex; align-items: center; gap: 4px; }
.notice { margin: 8px 0 0; padding: 6px 10px; background: #f7f8fa; border-left: 3px solid #c9ced4; font-size: 12px; color: #666; }
.lead { margin: 0 0 14px; }
.sub { font-size: 12px; color: var(--muted); margin: -4px 0 10px; }
.article p { margin: 0 0 12px; }

/* 見出し */
.article h2 {
  margin: 30px 0 14px; padding: 10px 12px; background: var(--theme); color: #fff; font-size: 16px; line-height: 1.5;
  border-bottom: 4px solid var(--accent); border-radius: 0 10px 0 0;
}
.article h3 {
  margin: 22px 0 10px; padding: 5px 10px; font-size: 15px; line-height: 1.5; color: var(--strong);
  border-left: 5px solid var(--theme); border-bottom: 2px solid var(--theme);
}
.article h4 { margin: 18px 0 8px; padding-left: 9px; font-size: 14px; border-left: 3px solid var(--accent); }
.article h2 .pr { color: #fff; border-color: rgba(255, 255, 255, .7); }
section > h2:first-child { margin-top: 30px; }

/* ピックアップ（更新情報） */
.pickup { position: relative; margin: 22px 0 18px; padding: 18px 12px 8px; border: 2px solid var(--red); border-radius: 6px; }
.pickup-label { position: absolute; top: -12px; left: 10px; margin: 0; padding: 1px 12px; border-radius: 12px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; }
.pickup ul { margin: 0; padding: 0; list-style: none; }
.pickup li { padding: 6px 0; border-bottom: 1px dashed #e4c4c4; font-size: 13px; }
.pickup li:last-child { border-bottom: 0; }
.pickup time { margin-right: 8px; color: var(--red); font-weight: 700; font-size: 12px; }
.new { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 2px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }

/* 目次（アイコンの表） */
.toc-grid { margin: 16px 0; border: 1px solid var(--line); }
.toc-grid p { margin: 0; padding: 6px; background: var(--th); text-align: center; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line); }
.toc-grid ul { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.toc-grid li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-grid li:nth-child(3n) { border-right: 0; }
.toc-grid a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; }
.toc-grid a:hover { background: var(--hover); text-decoration: none; }
.toc-grid .icon { width: 30px; height: 30px; color: var(--theme); stroke-width: 1.6; }
@media (min-width: 700px) { .toc-grid ul { grid-template-columns: repeat(6, 1fr); } .toc-grid li:nth-child(3n) { border-right: 1px solid var(--line); } .toc-grid li:nth-child(6n) { border-right: 0; } }

/* 目次（記事内） */
.toc { margin: 16px 0 20px; padding: 10px 14px 6px; border: 1px solid #dcdfe3; border-top: 3px solid var(--accent); }
.toc p { margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.toc p::before { content: "≡"; margin-right: 6px; color: var(--theme); }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { position: relative; padding: 6px 0 6px 22px; border-top: 1px dotted #ccc; font-size: 13px; counter-increment: toc; }
.toc li::before { content: counter(toc); position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--theme); color: #fff; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700; }
.toc a { font-weight: 700; }

/* 攻略メニュー（リンクの表） */
.link-grid { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.link-grid li { position: relative; display: flex; align-items: center; gap: 8px; padding: 11px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.link-grid li:hover { background: var(--hover); }
.link-grid .icon { width: 22px; height: 22px; color: var(--theme); }
.link-grid a { font-size: 13px; font-weight: 700; line-height: 1.35; }
.link-grid a::after, .img-grid a::after, .side-menu a::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 600px) { .link-grid { grid-template-columns: repeat(3, 1fr); } }

/* 画像つきの一覧 */
.img-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 14px; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.img-grid li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 3px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.img-grid li:hover { background: var(--hover); }
.img-grid img { width: 54px; height: 54px; object-fit: contain; }
.img-grid a { font-size: 11.5px; font-weight: 700; line-height: 1.3; word-break: break-all; }
@media (min-width: 600px) { .img-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) { .img-grid { grid-template-columns: repeat(7, 1fr); } }

/* ボタン */
.btn-more { display: block; max-width: 480px; margin: 14px auto 18px; padding: 10px 12px; border: 1px solid var(--link); border-radius: 4px; background: #fff; text-align: center; font-weight: 700; font-size: 14px; }
.btn-more::before { content: "▶ "; font-size: 11px; }
.btn-more:hover { background: var(--hover); text-decoration: none; }
.btn-buy { display: inline-block; padding: 7px 18px; border-radius: 4px; background: #ffa41c; border: 1px solid #f08804; color: #111; font-weight: 700; font-size: 13px; }
.btn-buy:hover { background: #fa8900; text-decoration: none; }

/* ポイント */
.point { margin: 14px 0; padding: 12px 14px 4px; border: 2px solid var(--accent); border-radius: 6px; background: #fffcf3; }
.point-label { display: inline-block; margin: 0 0 8px !important; padding: 1px 10px; border-radius: 3px; background: var(--theme); color: #fff; font-size: 12px; font-weight: 700; }
.point ol, .point ul { padding-left: 1.4em; }

/* 項目の頭（画像と名前） */
.profile { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 12px; border: 1px solid var(--line); background: linear-gradient(#fff, #f8f9fb); }
.profile .portrait { width: 96px; height: 96px; object-fit: contain; flex: none; border: 1px solid var(--line); }
.profile-body { min-width: 0; }
.profile-name { margin: 0 0 6px !important; font-size: 18px; font-weight: 700; color: var(--strong); line-height: 1.4; }
.profile-name small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.profile-text { margin: 0 !important; font-size: 13px; color: #555; }
.chips { margin: 0 !important; }
.chip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px; border-radius: 3px; border: 1px solid #d6dbe0; background: #f0f2f5; color: #444; font-size: 11.5px; font-weight: 700; line-height: 1.7; }
.chip-blue { background: #2f6fc2; border-color: #2f6fc2; color: #fff; }
.chip-red { background: #c0392b; border-color: #c0392b; color: #fff; }
.chip-green { background: #3f7d1c; border-color: #3f7d1c; color: #fff; }
.chip-purple { background: #5a4fc0; border-color: #5a4fc0; color: #fff; }
.chip-amber { background: #b8740f; border-color: #b8740f; color: #fff; }
.chip-teal { background: #137a63; border-color: #137a63; color: #fff; }

/* 表 */
dl.facts { display: grid; grid-template-columns: minmax(84px, 32%) 1fr; margin: 0 0 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
dl.facts dt, dl.facts dd { margin: 0; padding: 8px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; }
dl.facts dt { background: var(--th); font-weight: 700; color: #444; }
.table-scroll { overflow-x: auto; margin: 0 0 14px; }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; }
table.data th, table.data td { padding: 7px 6px; border: 1px solid var(--line); vertical-align: middle; word-break: keep-all; }
table.data th { background: var(--th); font-weight: 700; text-align: center; white-space: nowrap; }
table.data td:first-child { font-weight: 700; }
table.data tbody tr:hover { background: #fafcff; }
.thumb { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; margin-right: 6px; }
.filter-box { margin: 0 0 12px; padding: 10px 12px; background: #f6f7f9; border: 1px solid #e1e4e8; }
.filter-label { margin: 0 0 6px !important; font-weight: 700; font-size: 13px; }
#filters { display: flex; flex-wrap: wrap; gap: 8px 14px; }
#filters label { font-size: 12.5px; font-weight: 700; }
select { font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid #c3c9cf; border-radius: 4px; background: #fff; max-width: 100%; }
#entry-count { margin: 6px 0 0 !important; font-size: 12px; color: var(--muted); }

/* ヒントと答え（開閉） */
details.step { margin: 8px 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
details.step > summary { position: relative; display: block; padding: 11px 92px 11px 12px; border-left: 4px solid var(--theme); border-radius: 3px; background: linear-gradient(#fff, #f3f5f8); font-weight: 700; cursor: pointer; list-style: none; }
details.step > summary::-webkit-details-marker { display: none; }
details.step > summary::after { content: "タップで開く ▼"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 400; color: var(--muted); }
details.step[open] > summary::after { content: "閉じる ▲"; }
details.step[open] > summary { border-bottom: 1px solid var(--line); border-radius: 3px 3px 0 0; }
details.step > :not(summary) { margin: 10px 12px; }
details.step.answer > summary { border-left-color: var(--red); color: #b02a2a; }
details.step dl.facts { margin: 10px 12px; }
.acc-list, .group-list, .records { padding: 0; list-style: none; }
.acc-list > li, .group-list > li, .records > li { padding: 8px 0; border-bottom: 1px dotted #ccc; }
.group-list { counter-reset: g; }
.group-list > li::before { counter-increment: g; content: counter(g); display: inline-block; min-width: 22px; margin-right: 8px; border-radius: 3px; background: var(--theme); color: #fff; text-align: center; font-size: 11px; font-weight: 700; }
.records > li { border-bottom: 0; padding: 0; }

/* 答え合わせ */
#check-form { display: grid; gap: 10px; padding: 12px; background: #f6f7f9; border: 1px solid #e1e4e8; margin-bottom: 12px; }
#check-form label { display: grid; gap: 4px; font-weight: 700; font-size: 13px; }
#check-form button, button { justify-self: start; padding: 9px 26px; border: 0; border-radius: 4px; background: var(--theme); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#check-result { padding: 0; list-style: none; }
#check-result li { padding: 8px 12px; margin: 6px 0; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: #fff; font-weight: 700; }

/* ページ送り */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 22px 0 6px; }
.pager a { display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; font-weight: 700; font-size: 13px; }
.pager a:hover { background: var(--hover); text-decoration: none; }
.pager a:last-child:not(:first-child) { text-align: right; }

/* おすすめ（PR） */
.pr { display: inline-block; padding: 0 5px; border: 1px solid #aaa; border-radius: 2px; color: #888; font-size: 10px; font-weight: 400; line-height: 1.5; vertical-align: 2px; }
.rec-list { padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rec-list li { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.rec-list li > a { font-weight: 700; font-size: 14px; }
.rec-list p { margin: 2px 0 0 !important; font-size: 12.5px; color: #555; }
.rec-platform { display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 2px; background: #eef0f3; color: #555; font-size: 11px; vertical-align: 1px; }
.similar { padding: 0; list-style: none; counter-reset: rec; }
.similar > li { position: relative; margin: 0 0 12px; padding: 12px 14px 4px 46px; border: 1px solid var(--line); border-radius: 4px; counter-increment: rec; }
.similar > li::before { content: counter(rec); position: absolute; left: 12px; top: 14px; width: 24px; height: 24px; border-radius: 4px; background: var(--theme); color: #fff; font-weight: 700; text-align: center; line-height: 24px; font-size: 13px; }
.article .similar h2 { margin: 0 0 4px; padding: 0; background: none; border: 0; border-radius: 0; color: inherit; font-size: 16px; }
.similar .rec-platform { margin: 0 0 6px; }

/* 本文（Markdown） */
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li { margin: 3px 0; }
.prose strong { background: linear-gradient(transparent 62%, #fff0a8 62%); }
.map { display: block; width: 100%; max-width: 540px; margin: 0 auto 12px; border: 1px solid var(--line); image-rendering: pixelated; }

/* 右カラム */
.side-box { margin: 0 0 16px; background: #fff; border: 1px solid #e1e4e8; }
.side-title { margin: 0; padding: 8px 12px; background: var(--theme); color: #fff; font-weight: 700; font-size: 14px; border-bottom: 3px solid var(--accent); }
.side-menu { margin: 0; padding: 0; list-style: none; }
.side-menu li { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #edf0f2; }
.side-menu li:last-child { border-bottom: 0; }
.side-menu li:hover { background: var(--hover); }
.side-menu .icon { color: var(--theme); font-size: 16px; }
.side-menu a { color: var(--strong); font-weight: 700; font-size: 13px; }

/* フッター */
.gf { background: #24282d; color: #b9bfc6; font-size: 12px; padding: 22px 0 56px; }
.gf .wrap { padding: 0 14px; }
.gf a { color: #fff; }
.gf p { margin: 0 0 8px; }
.gf-name { font-size: 15px; font-weight: 700; color: #fff; }
.gf-links { display: grid; grid-template-columns: 1fr 1fr; margin: 12px 0 14px; padding: 0; list-style: none; border-top: 1px solid #3b4148; border-left: 1px solid #3b4148; }
.gf-links li { border-right: 1px solid #3b4148; border-bottom: 1px solid #3b4148; }
.gf-links a { display: block; padding: 10px 6px; text-align: center; font-weight: 700; }
.gf-note { color: #8a9199; }
.to-top { position: fixed; right: 12px; bottom: 16px; z-index: 20; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(36, 40, 45, .78); color: #fff; font-size: 14px; }
.to-top:hover { text-decoration: none; background: var(--theme); }

.ad { margin: 20px 0; text-align: center; }

/* 画像の下地。白や黒のアイコンでも見えるように、陣営ごとの色を敷く */
.img-grid img, .thumb, .profile .portrait { border-radius: 6px; background-color: #eef1f5; padding: 3px; }
img[src*="/faces/"] { image-rendering: pixelated; }
img.tone-blue, .profile .portrait.tone-blue { background-color: #2f6fc2; }
img.tone-red, .profile .portrait.tone-red { background-color: #b3322c; }
img.tone-green, .profile .portrait.tone-green { background-color: #3f7d1c; }
img.tone-purple, .profile .portrait.tone-purple { background-color: #5a4fc0; }
img.tone-amber, .profile .portrait.tone-amber { background-color: #a8670c; }
img.tone-teal, .profile .portrait.tone-teal { background-color: #137a63; }

/* 入口サイト（ゲーム一覧） */
.hub-hero .wrap { padding: 18px 14px 16px; }
.hub-hero .hero-title { padding: 0; margin: 0; font-size: 24px; }
.hub-tagline { margin: 4px 0 0; color: rgba(255, 255, 255, .85); font-size: 13px; }
.game-cards { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.game-cards li { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.game-cards li:hover { background: var(--hover); }
.game-cards img { width: 150px; aspect-ratio: 460 / 215; object-fit: cover; border-radius: 4px; flex: none; }
.game-card-body { min-width: 0; }
.game-card-body > a { font-size: 16px; font-weight: 700; }
.game-card-body > a::after { content: ""; position: absolute; inset: 0; }
.game-card-body p { margin: 2px 0 0 !important; font-size: 12.5px; color: #555; }
.game-card-body .game-card-date { color: var(--muted); font-size: 11.5px; }
@media (max-width: 520px) { .game-cards li { flex-direction: column; align-items: stretch; } .game-cards img { width: 100%; } }

/* ゲーム内テキストの色・用語リンク */
.hl { font-weight: 700; }
a.hl { text-decoration: none; border-bottom: 1px solid currentColor; }
a.hl:hover { opacity: .8; }
.hl-blue { color: #1f74b5; }
.hl-amber { color: #b06f00; }
.hl-red { color: #c0261f; }
.hl-purple { color: #8a17d6; }
.hl-teal { color: #0f7a60; }
a.term, .term-sample { color: inherit; text-decoration: none; border-bottom: 1px dotted #7a8794; }
a.term:hover { color: var(--link); border-bottom-style: solid; }
.chip-dark { background: #3d3f45; border-color: #3d3f45; color: #fff; }
img.tone-dark { background-color: #3d3f45; }

/* 囲み（能力・効果など） */
.textbox { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); background: #fbfbfc; font-size: 14.5px; line-height: 1.85; }

/* 「○○から探す」 */
.browse-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.browse-cards li { position: relative; padding: 10px 12px 9px; border: 1px solid var(--line); border-top: 4px solid #8a95a1; border-radius: 4px; background: #fff; }
.browse-cards li:hover { background: var(--hover); }
.browse-cards a { font-weight: 700; font-size: 15px; color: var(--strong); }
.browse-cards a::after { content: ""; position: absolute; inset: 0; }
.browse-cards .count { margin-left: 6px; font-size: 12px; color: var(--muted); }
.browse-cards p { margin: 4px 0 0 !important; font-size: 12px; line-height: 1.55; color: #555; }
.browse-cards .tone-blue { border-top-color: #2f6fc2; }
.browse-cards .tone-amber { border-top-color: #c58414; }
.browse-cards .tone-red { border-top-color: #c0392b; }
.browse-cards .tone-purple { border-top-color: #8a17d6; }
.browse-cards .tone-teal { border-top-color: #137a63; }
.browse-cards .tone-dark { border-top-color: #3d3f45; }
@media (min-width: 700px) { .browse-cards { grid-template-columns: repeat(4, 1fr); } }

/* タブ */
.tab-bar { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 -1px; border-bottom: 2px solid var(--theme); }
.tab-bar button { flex: 1 1 0; min-width: 72px; margin: 0; padding: 8px 4px 7px; border: 1px solid #d4d9de; border-bottom: 0; border-radius: 4px 4px 0 0; background: #eef0f3; color: #555; font-size: 12.5px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.tab-bar button small { display: block; font-size: 10.5px; font-weight: 400; }
.tab-bar button.active { background: var(--theme); border-color: var(--theme); color: #fff; }
.js-tabs .tab-panel > h3 { display: none; }
.js-tabs .tab-panel > .img-grid { margin-top: 10px; }

/* 用語集 */
dl.glossary { margin: 0 0 14px; border-top: 1px solid var(--line); }
.term-item { padding: 10px 2px 10px; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.term-item:target { background: #fff8dd; }
.term-item dt { font-weight: 700; font-size: 15px; color: var(--strong); }
.term-item dt small { margin-left: 8px; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.term-item dd { margin: 3px 0 0; font-size: 13.5px; }

/* 一覧の小さいアイコン、文字だけのリンク表、構成 */
.mini-icons { display: flex; flex-wrap: wrap; gap: 3px; }
.mini-icons img { width: 30px; height: 30px; object-fit: contain; border-radius: 4px; padding: 2px; }
.mini-icons img:not([class*="tone-"]) { background-color: #eef1f5; }
.link-grid.text-only li { padding: 9px 10px; }
.composition { margin: -4px 0 8px !important; }

/* キービジュアル（横長の合成画像） */
.hero-img.hero-wide { max-width: none; aspect-ratio: 1200 / 480; object-fit: cover; }

/* 攻略メニュー（サムネイル付きのタイル。GameWith のトップと同じ並び） */
.menu-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.menu-tiles li { position: relative; border: 2px solid var(--accent); border-radius: 4px; background: #fff; overflow: hidden; }
.menu-tiles li:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.menu-tiles img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.menu-tiles .tile-icon { display: grid; place-items: center; aspect-ratio: 16 / 9; background: #2a2d33; color: #fff; font-size: 40px; }
.menu-tiles a { display: block; padding: 6px 4px 7px; text-align: center; font-weight: 700; font-size: 13px; }
.menu-tiles a::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 600px) { .menu-tiles { grid-template-columns: repeat(4, 1fr); } }

/* 画像つきのカード（地域など） */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.card-grid li { position: relative; display: flex; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.card-grid li:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.card-grid img { width: 42%; max-width: 220px; aspect-ratio: 16 / 9; object-fit: cover; flex: none; }
.card-body { padding: 8px 12px; min-width: 0; }
.card-body > a { font-size: 16px; font-weight: 700; color: var(--strong); }
.card-body > a::after { content: ""; position: absolute; inset: 0; }
.card-body p { margin: 4px 0 0 !important; font-size: 12.5px; line-height: 1.6; color: #555; }
@media (min-width: 700px) { .card-grid { grid-template-columns: 1fr 1fr; } }

/* 名前の前に小さいアイコン */
.ico { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: -0.42em; margin-right: 3px; border-radius: 4px; padding: 1px; }
.ico:not([class*="tone-"]) { background-color: #eef1f5; }
a.icon-link { display: inline-block; margin: 2px 10px 2px 0; font-weight: 700; white-space: nowrap; }
a.hl .ico { margin-left: 1px; }

/* 行ごとの表（ティアなど） */
table.rows-table th { width: 22%; min-width: 64px; }
table.rows-table td { font-weight: 400 !important; line-height: 2; }

/* 用語集の画像 */
.term-item { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; }
.term-item > dt, .term-item > dd { grid-column: 2; }
.term-img { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; object-fit: contain; border-radius: 6px; background: #3d4047; padding: 4px; }
.term-img[src$=".jpg"] { width: 96px; height: 81px; object-fit: cover; padding: 0; }

/* 広告 */
.ad { margin: 22px auto; text-align: center; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-label { margin: 0 0 4px !important; font-size: 10.5px; color: #999; letter-spacing: .1em; }
.side .ad { position: sticky; top: 12px; }

/* あわせて読みたい */
.read-next-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.read-next-list li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.read-next-list li:hover { background: var(--hover); }
.read-next-list img { width: 72px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 3px; flex: none; }
.read-next-list a { font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.read-next-list a::after { content: ""; position: absolute; inset: 0; }

/* Amazon のおすすめ（記事の終わり） */
.recs-mini { margin: 22px 0 12px; padding: 10px 12px 6px; border: 1px solid #f0c48a; border-radius: 6px; background: #fffaf2; }
.recs-mini-title { margin: 0 0 6px !important; font-weight: 700; font-size: 13.5px; }
.recs-mini ul { margin: 0; padding: 0; list-style: none; }
.recs-mini li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 7px 0; border-top: 1px dashed #f0d2a8; }
.recs-mini-name { font-weight: 700; font-size: 13.5px; }
.recs-mini .btn-buy { margin-left: auto; padding: 4px 12px; font-size: 12px; }
.profile.profile-wide { display: block; padding: 0; }
.profile.profile-wide .portrait { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: 0; padding: 0; }
.profile.profile-wide .profile-body { padding: 10px 12px; }
img[src*="/thumbs/"], img[src*="/brand/hero"] { image-rendering: auto; }
th[data-sort] .sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
th[data-sort] .sort-btn::after { content: " ⇅"; opacity: .5; }
th[aria-sort="descending"] .sort-btn::after { content: " ▼"; opacity: 1; }
th[aria-sort="ascending"] .sort-btn::after { content: " ▲"; opacity: 1; }