:root { color-scheme: light dark; --bg:#f5f4f0; --surface:#fff; --ink:#242c30; --muted:#626a6d; --line:#d8dbd7; --accent:#725723; --wash:#ecece5; --button:#273d37; --button-text:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; line-height:1.75; }
a { color:inherit; text-underline-offset:4px; }
button,input { font:inherit; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:1px solid transparent; border-radius:6px; background:var(--button); color:var(--button-text); font-weight:600; cursor:pointer; text-decoration:none; }
button:hover:not(:disabled),.button:hover { filter:brightness(1.15); }
button:disabled { opacity:.5; cursor:default; }
button.secondary,.button.secondary { background:var(--surface); color:var(--ink); border-color:var(--line); }
:focus-visible { outline:3px solid #ad7e25; outline-offset:4px; }
.skip-link { position:absolute; left:12px; top:-100px; padding:10px; background:var(--surface); z-index:10; }
.skip-link:focus { top:12px; }
.site-header { max-width:1180px; margin:auto; padding:23px 30px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark { font-family:Georgia,serif; font-size:26px; letter-spacing:.14em; font-weight:700; text-decoration:none; }
.wordmark span { display:block; font-family:sans-serif; font-size:10px; font-weight:400; letter-spacing:.07em; color:var(--muted); }
nav { display:flex; gap:24px; font-size:13px; }
nav a { text-decoration:none; }
main { max-width:1120px; padding:52px 30px 60px; margin:auto; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; }
.intro { display:grid; grid-template-columns:1fr 300px; align-items:center; gap:50px; margin-bottom:36px; }
h1 { font-size:clamp(32px,4.5vw,48px); line-height:1.5; margin:13px 0 16px; letter-spacing:.02em; font-weight:600; }
.intro p { font-size:14px; color:var(--muted); }
.data-note { padding:21px 24px; border-left:3px solid var(--accent); background:var(--wash); font-size:13px; }
.data-note p { margin:8px 0 0; font-size:12px; }
h2 { font-size:18px; font-weight:600; margin:0 0 16px; }
h3 { font-size:17px; }
.search-section { padding:26px 30px 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
label { display:block; font-size:12px; color:var(--muted); margin-bottom:6px; }
.search-row { display:flex; gap:10px; }
input { min-width:0; width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--ink); }
.search-row button { flex-shrink:0; }
.help { font-size:12px; color:var(--muted); }
[role=status] { font-size:13px; margin:10px 0; }
[role=status]:empty { display:none; }
#search-results { list-style:none; padding:0; margin:14px 0 0; }
#search-results li { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 0; border-top:1px solid var(--line); }
#search-results strong { font-size:14px; display:block; }
#search-results small { color:var(--muted); }
#search-results button { padding:8px 14px; flex-shrink:0; font-size:13px; }
.comparison-section { margin-top:40px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-heading h2 { margin:0; }
#compare-count { margin-left:12px; color:var(--accent); font-size:13px; white-space:nowrap; }
.section-heading button { font-size:12px; }
.empty { padding:42px 24px; text-align:center; border:1px dashed var(--line); border-radius:8px; }
.empty-index { font-family:Georgia,serif; color:var(--accent); letter-spacing:.18em; font-size:20px; }
.empty p { font-size:13px; color:var(--muted); }
.table-scroll { overflow:auto; max-height:75vh; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
table { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; }
caption { text-align:left; padding:12px 18px; font-size:12px; color:var(--muted); }
th,td { min-width:220px; padding:17px 18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left; white-space:pre-line; overflow-wrap:anywhere; }
tr>*:last-child { border-right:0; }
tr:last-child>* { border-bottom:0; }
tr>*:first-child { position:sticky; left:0; min-width:122px; width:122px; background:var(--wash); font-size:12px; z-index:1; }
thead th { position:sticky; top:0; z-index:2; background:var(--surface); font-weight:600; }
thead tr>th:first-child { z-index:3; }
thead a { display:block; margin-bottom:12px; font-size:16px; }
thead button { padding:5px 12px; font-size:12px; min-height:44px; }
.unknown { color:var(--muted); }
td .button { width:100%; margin-bottom:9px; font-size:12px; padding:9px 10px; }
.next-step { display:flex; justify-content:space-between; gap:25px; align-items:center; margin-top:45px; padding-top:30px; border-top:1px solid var(--line); }
.next-step h2 { margin:10px 0; }
.next-step p { font-size:12px; color:var(--muted); }
.next-step a { font-size:12px; flex-shrink:0; }
footer { max-width:1120px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin:auto; padding:25px 30px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; align-items:center; }
footer .wordmark { font-size:20px; }
@media(max-width:650px) {
  .site-header { padding:18px 20px; align-items:flex-start; }
  .wordmark { font-size:21px; }
  .wordmark span { display:none; }
  nav { gap:6px 14px; justify-content:flex-end; flex-wrap:wrap; font-size:11px; max-width:230px; }
  main { padding:32px 20px 35px; }
  .intro { display:block; margin-bottom:25px; }
  h1 { font-size:34px; }
  .intro p { font-size:13px; }
  .data-note { padding:16px 20px; margin-top:22px; }
  .search-section { padding:20px 16px 15px; }
  .search-row { gap:7px; }
  input { padding:10px; font-size:16px; }
  .search-row button { padding:10px 12px; font-size:13px; }
  h2 { font-size:16px; }
  .section-heading { align-items:flex-start; }
  #compare-count { display:block; margin:4px 0 0; }
  #search-results li { gap:10px; }
  #search-results strong { font-size:13px; }
  .next-step { display:block; }
  .next-step a { margin-top:12px; }
  th,td { min-width:205px; padding:14px; }
  tr>*:first-child { min-width:94px; width:94px; padding:14px 10px; }
  footer { padding:22px 20px; }
}
@media(prefers-color-scheme:dark) {
  :root { --bg:#101718; --surface:#172022; --ink:#e4e9e5; --muted:#a9b4af; --line:#354240; --accent:#d4b874; --wash:#202d2b; --button:#cfbd8e; --button-text:#17201e; }
}