/* mangagame.tokyo のトップ・案内ページ共通 */
:root { --bg: #0f0e12; --fg: #f3efe7; --muted: #b9b2a6; --card: #1a181f; --line: #2c2933; --accent: #d6402f; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.7 system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }
a { color: inherit; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
header.top { padding: 40px 0 20px; text-align: center; }
.logo { font-family: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 34px; letter-spacing: .06em; margin: 0; }
.logo small { display: block; font-size: 13px; letter-spacing: .3em; color: var(--muted); font-family: system-ui, sans-serif; }
.tagline { font-size: 18px; margin: 14px 0 4px; }
.lead { color: var(--muted); font-size: 14px; max-width: 640px; margin: 0 auto; }
.notice { background: #233322; color: #d9f2d0; border-radius: 10px; padding: 10px 14px; margin: 10px auto; max-width: 640px; font-size: 14px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 18px 0 30px; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } .logo { font-size: 28px; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.card a.poster { display: block; aspect-ratio: 16 / 9; background: #000; }
.card a.poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card h2 { font-size: 19px; margin: 0; line-height: 1.4; }
.card p { margin: 0; color: var(--muted); font-size: 14px; }
.card .free { font-size: 13px; color: #f0c674; }
.card .btn { margin-top: auto; }
.btn { display: inline-block; text-align: center; background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; padding: 10px 18px; border-radius: 10px; }
.price-note { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 30px; }
footer.site { border-top: 1px solid var(--line); padding: 20px 0 40px; color: var(--muted); font-size: 13px; text-align: center; }
footer.site a { margin: 0 8px; }
/* 案内・法律のページ */
body.plain { background: #faf8f3; color: #1d1b20; }
main.narrow { max-width: 760px; margin: 0 auto; padding: 32px 16px 60px; }
main.narrow h1 { font-size: 24px; }
main.narrow table { border-collapse: collapse; width: 100%; font-size: 14px; }
main.narrow th, main.narrow td { border: 1px solid #ddd6c9; padding: 8px 10px; text-align: left; vertical-align: top; }
main.narrow th { background: #f1ece2; width: 34%; font-weight: 600; }
main.narrow .small { font-size: 13px; color: #6b6470; }
main.narrow .keep input { width: 100%; padding: 8px; font: inherit; font-size: 13px; }
main.narrow .btn { background: #d6402f; }