:root { --bg:#fbfaf7; --fg:#22201c; --muted:#6b665e; --line:#e4e0d8; --accent:#c2410c; --card:#fff; --soft:#fdf1ea; --ok:#15803d; --med:#a39e94; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1a1916; --fg:#ece9e3; --muted:#a39e94; --line:#34312c; --accent:#fb923c; --card:#22211d; --soft:#3a2a20; --ok:#4ade80; --med:#6b665e; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); line-height:1.7; font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }
main { max-width: 860px; margin: 0 auto; padding: 32px 16px 64px; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; line-height: 1.4; margin: 0 0 6px; }
h2 { font-size: 1.12rem; margin: 36px 0 10px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
h2 .per { font-size:.85rem; font-weight:normal; color:var(--muted); }
.lead { color: var(--muted); margin: 0 0 16px; }
.tagline { font-weight:700; color: var(--accent); margin: 0 0 6px; }
.crumbs { font-size:.82rem; color:var(--muted); margin-bottom:12px; }
.crumbs a { color: var(--muted); }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.jump a { font-size:.85rem; padding:2px 12px; border:1px solid var(--line); border-radius:999px; color:var(--fg); text-decoration:none; background:var(--card); }
.bar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin-bottom:8px; }
.upd { font-size:.9rem; color:var(--muted); }
.spu { display:inline-flex; gap:6px; align-items:center; font-size:.9rem; }
.spu button { font: inherit; border:1px solid var(--line); background:var(--bg); color:var(--fg); border-radius:999px; padding:2px 12px; cursor:pointer; }
.spu button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
th { font-size:.8rem; color:var(--muted); font-weight:600; white-space:nowrap; }
.num { text-align:right; white-space:nowrap; font-variant-numeric: tabular-nums; }
.eff { font-weight:700; color:var(--accent); }
small { font-size:.75em; margin-left:1px; }
.muted { color:var(--muted); }
.name { min-width: 200px; }
.name a { color: var(--fg); font-weight:600; }
.sub { font-size:.78rem; color:var(--muted); }
.badge { display:inline-block; margin-left:6px; font-size:.72rem; padding:0 8px; border-radius:999px; background:var(--soft); color:var(--accent); white-space:nowrap; font-weight:normal; }
.badge.low { background:var(--ok); color:#fff; }
.spark { width:120px; height:28px; display:block; }
.spark polyline { fill:none; stroke:var(--accent); stroke-width:1.5; }
.spark-empty { font-size:.75rem; color:var(--muted); white-space:nowrap; }
.go a { white-space:nowrap; font-size:.85rem; }
.note { color:var(--muted); font-size:.86rem; }
ul { padding-left:1.2em; }
.formula { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin:12px 0; font-size:.92rem; }
.hero { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:16px 0; }
.hero-label { font-size:.88rem; color:var(--muted); }
.pname { display:flex; gap:10px; align-items:center; }
.thumb { width:48px; height:48px; border-radius:8px; object-fit:contain; background:#fff; border:1px solid var(--line); flex-shrink:0; }
.thumb-none { display:inline-block; }
.hero { display:grid; grid-template-columns: auto 1fr; column-gap:16px; }
.hero > :not(.hero-img) { grid-column: 2; }
.hero-img { grid-row: 1 / span 4; width:120px; height:120px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--line); align-self:start; }
.note-img { width:72px; height:72px; border-radius:8px; object-fit:contain; background:#fff; margin:6px 0 2px; }
@media (max-width: 640px) { .hero { grid-template-columns: 1fr; } .hero > :not(.hero-img) { grid-column: 1; } .hero-img { grid-row:auto; margin-bottom:8px; } }
.hero-price { font-size:2.6rem; font-weight:800; color:var(--accent); line-height:1.2; font-variant-numeric: tabular-nums; }
.hero-price small { font-size:1rem; }
.hero-sub { font-size:.86rem; color:var(--muted); margin:4px 0 12px; }
.hero-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.cta { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; padding:8px 18px; border-radius:999px; font-weight:700; }
.chart { margin:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; }
.chart svg { width:100%; height:auto; display:block; }
.chart .grid { stroke:var(--line); stroke-width:1; }
.chart .ylab { font-size:11px; fill:var(--muted); text-anchor:end; }
.chart .xlab { font-size:11px; fill:var(--muted); text-anchor:middle; }
.chart .low { fill:none; stroke:var(--accent); stroke-width:2.5; }
.chart .med { fill:none; stroke:var(--med); stroke-width:1.5; stroke-dasharray:4 4; }
.chart .dot { fill:var(--accent); }
.chart figcaption { font-size:.78rem; color:var(--muted); padding:4px 8px; }
.key { display:inline-block; width:16px; height:0; border-top:3px solid var(--accent); vertical-align:middle; margin-right:2px; }
.key.med { border-top:2px dashed var(--med); }
.related li { margin:4px 0; }
footer { margin-top:48px; padding-top:16px; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted); }
:root { --paper:#fffaf0; --amber-bg:#faeeda; --amber-fg:#633806; --amber-sub:#854f0b; --coral-bg:#faece7; --coral-fg:#4a1b0c; --coral-strong:#993c1d; --teal-bg:#e1f5ee; --teal-fg:#085041; --teal:#0f6e56; }
@media (prefers-color-scheme: dark) {
  :root { --paper:#1f1d19; --amber-bg:#3b2a12; --amber-fg:#fac775; --amber-sub:#ef9f27; --coral-bg:#3a2017; --coral-fg:#f5c4b3; --coral-strong:#f0997b; --teal-bg:#0b3a2f; --teal-fg:#9fe1cb; --teal:#5dcaa5; }
}
body { background: var(--paper); }
h1, h2, .brand, .hand { font-family: "Zen Maru Gothic", system-ui, sans-serif; font-weight: 700; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.site-head { border-bottom:1px solid var(--line); background: var(--paper); }
.site-head-in { max-width:860px; margin:0 auto; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand { font-size:1.35rem; color:var(--fg); text-decoration:none; }
.brand span { color: var(--accent); }
.upd-time { font-size:.8rem; color:var(--muted); }
main { padding-top: 20px; }
.tagline { font-size:.95rem; }
.talk { display:flex; gap:12px; align-items:flex-start; margin:14px 0 8px; }
.talk-icon { width:52px; height:52px; border-radius:50%; flex-shrink:0; object-fit:cover; object-position:55% 40%; }
.profile { display:flex; gap:16px; align-items:center; margin-top:36px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.profile img { border-radius:50%; flex-shrink:0; object-fit:cover; object-position:55% 40%; }
.profile-name { font-family:"Zen Maru Gothic", system-ui, sans-serif; font-weight:700; }
.profile p { margin:4px 0 0; font-size:.9rem; color:var(--muted); }
.talk-bubble, .memo-body { background:var(--amber-bg); color:var(--amber-fg); border-radius:14px; padding:10px 14px; font-family:"Yomogi", "Klee One", system-ui, sans-serif; font-size:1.08rem; line-height:1.75; letter-spacing:.02em; }
.talk-by, .memo-by { font-size:.78rem; color:var(--amber-sub); margin-top:2px; }
.memo { display:flex; gap:10px; align-items:flex-start; margin:8px 0 4px; }
.memo-icon { width:40px; height:40px; border-radius:50%; flex-shrink:0; object-fit:cover; object-position:55% 40%; }
.notes { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:8px; }
.note-card { display:flex; flex-direction:column; gap:2px; background:var(--coral-bg); color:var(--coral-fg); border-radius:12px; padding:12px 14px; text-decoration:none; transition: transform .15s; }
.note-card:hover { transform: rotate(0deg) translateY(-2px) !important; }
.note-badge { align-self:flex-start; background:var(--coral-strong); color:var(--coral-bg); font-size:.72rem; padding:1px 8px; border-radius:4px; }
.note-name { font-size:.92rem; margin-top:4px; }
.note-price { color:var(--coral-strong); font-size:1.7rem; font-weight:700; line-height:1.2; font-variant-numeric: tabular-nums; }
.note-price small { font-size:.8rem; }
.note-sub { font-size:.78rem; }
.about-data { margin:22px 0 18px; border:1px solid var(--line); background:var(--card); border-radius:10px; padding:12px 14px; font-size:.85rem; color:var(--muted); }
.about-data b { color: var(--fg); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.chips span { background:var(--teal-bg); color:var(--teal-fg); padding:1px 10px; border-radius:4px; font-size:.78rem; }
.cats { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 16px; margin:4px 0 20px; }
.shelf { display:grid; grid-template-columns: 8.5em 1fr; gap:8px; padding:10px 0; align-items:start; }
.shelf + .shelf { border-top:1px dashed var(--line); }
.shelf-name { font-family:"Zen Maru Gothic", system-ui, sans-serif; font-weight:700; font-size:.92rem; display:flex; gap:6px; align-items:center; padding-top:2px; }
.shelf-links { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:.9rem; line-height:1.9; }
.shelf-links a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line); }
.shelf-links a:hover { color:var(--accent); border-bottom-color:var(--accent); }
@media (max-width: 640px) { .shelf { grid-template-columns: 1fr; gap:2px; } .shelf-links { gap:2px 14px; } }
.faq { margin-top:32px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:.88rem; color:var(--muted); }
.faq summary { cursor:pointer; color:var(--fg); font-weight:600; }
@media (max-width: 640px) {
  .table-wrap table thead { display:none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display:block; width:100%; }
  .table-wrap tr { display:grid; grid-template-columns: 1fr auto; gap:2px 12px; padding:12px 14px; border-bottom:1px solid var(--line); }
  .table-wrap tbody tr:last-child { border-bottom:none; }
  .table-wrap td { border:none; padding:0; }
  .table-wrap td.name { grid-column: 1 / -1; min-width:0; }
  .table-wrap td.trend { display:none; }
  .table-wrap td.num.muted::before { content:"相場 "; font-size:.75rem; }
  .table-wrap td.num:not(.eff):not(.muted)::before { content:"表示 "; font-size:.75rem; color:var(--muted); }
  .table-wrap td.eff { font-size:1.2rem; text-align:left; }
}