:root {
  --bg: #fbfaf7;
  --text: #2b2b28;
  --muted: #767268;
  --accent: #c1663a;
  --accent-soft: #f6e7dd;
  --border: #e7e2d8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
}
.site-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 6%;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.site-header .logo { font-size: 1.4rem; font-weight: bold; color: var(--accent); text-decoration: none; letter-spacing: 0.05em; }
.site-header nav { display: flex; gap: 18px; flex: 1; }
.site-header nav a { color: var(--text); text-decoration: none; font-size: 0.9rem; }
.site-header nav a:hover { color: var(--accent); }
.back-to-hub { font-size: 0.78rem; color: var(--muted); text-decoration: none; border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; }
.site-main { max-width: 880px; margin: 0 auto; padding: 40px 6% 80px; }
.hero { text-align: center; margin-bottom: 40px; }
.hero h1 { font-size: 1.8rem; margin-bottom: 10px; }
.hero p { color: var(--muted); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.article-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: box-shadow 0.15s; }
.article-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.article-card a { text-decoration: none; color: inherit; }
.article-card h2 { font-size: 1.05rem; margin: 8px 0; }
.article-card p { color: var(--muted); font-size: 0.88rem; }
.category-tag { display: inline-block; font-size: 0.72rem; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }
.article-body h1 { font-size: 1.6rem; margin: 14px 0 6px; }
.published-date { color: var(--muted); font-size: 0.8rem; margin-bottom: 24px; }
.article-content h2 { font-size: 1.2rem; margin-top: 32px; border-left: 4px solid var(--accent); padding-left: 10px; }
.article-content p { margin: 14px 0; }
.affiliate-box { margin-top: 40px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.affiliate-box h2 { font-size: 1rem; margin: 0 0 10px; }
.affiliate-box ul { margin: 0; padding-left: 20px; }
.affiliate-box a { color: var(--accent); font-weight: bold; }
.disclosure { font-size: 0.75rem; color: var(--muted); margin-top: 12px; margin-bottom: 0; }
.site-footer { text-align: center; padding: 26px; color: var(--muted); font-size: 0.78rem; border-top: 1px solid var(--border); }