:root { --bg: #F4F2EE; --surface: #FFFFFF; --ink: #1E1E1C; --muted: #5E5B55; --line: #D9D5CE; --accent: #2F6B5A; --accent-soft: #E4EEEA; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; line-height: 1.7; }
a { color: var(--accent); }
.top { max-width: 760px; margin: 0 auto; padding: 14px 18px; font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.top a { text-decoration: none; }
main { max-width: 760px; margin: 0 auto; padding: 8px 18px 32px; background: var(--surface); border-radius: 12px; }
h1 { font-family: 'Hiragino Mincho ProN', serif; font-size: 30px; margin: 4px 0 6px; }
h2 { font-size: 18px; margin: 32px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.ward { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.catch { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.sub, .major { margin: 0 0 8px; color: var(--muted); }
.tag { display: inline-block; font-size: 12px; background: var(--accent-soft); color: var(--accent); padding: 2px 10px; border-radius: 99px; margin: 0 6px 6px 0; }
.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 8px; font-weight: 700; margin: 6px 8px 6px 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; }
th:first-child { text-align: left; font-weight: 400; }
thead th { font-size: 13px; color: var(--muted); font-weight: 700; }
td { font-weight: 700; }
.avg { color: var(--muted); font-weight: 400; }
.fac { list-style: none; padding: 0; margin: 0; }
.fac li { display: grid; grid-template-columns: 8.5em 3em 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fac .n { font-weight: 700; text-align: right; }
.fac .near { color: var(--muted); font-size: 13px; }
.pro { margin: 32px 0 0; padding: 16px 18px; background: var(--accent-soft); border-radius: 10px; }
.pro p { margin: 0 0 8px; }
.pro-k { font-weight: 700; color: var(--accent); }
.link { font-size: 14px; }
.sim { list-style: none; padding: 0; margin: 0; }
.sim li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.sim a { text-decoration: none; font-weight: 700; }
.sim small { display: block; color: var(--muted); font-weight: 400; font-size: 13px; }
.idx { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.scroll { overflow-x: auto; }
.rank th small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.rank th a { font-weight: 700; text-decoration: none; }
.rank td { white-space: nowrap; }
.rank th, .rank td { padding: 8px 4px; }
.rank thead th { font-size: 12px; }
.rank tbody th { min-width: 7em; }
.themes { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
footer { max-width: 760px; margin: 0 auto; padding: 16px 18px 40px; font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { h1 { font-size: 26px; } .fac li { grid-template-columns: 7em 2.5em 1fr; } }