:root {
--bg: #fff;
--fg: #222;
--accent: #2bb5f5; /* 明るい水色 */
--muted: #6b7280;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
.wrap { max-width: 960px; margin: 0 auto; padding: 16px; }
header.wrap { display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 800; font-size: 20px; text-decoration: none; color: var(--fg); }
.nav a { margin-left: 12px; text-decoration: none; color: var(--fg); }
.nav a:hover { color: var(--accent); }
.hero { background: linear-gradient(90deg, rgba(43,181,245,.15), rgba(255,192,203,.15)); border-radius: 16px; padding: 24px; }
.card { border: 1px solid #eee; border-radius: 12px; padding: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.eyecatch { font-size: 14px; color: var(--muted); }
.foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #eee; margin-top: 24px; padding-top: 16px; }
.foot a { color: var(--muted); text-decoration: none; margin-left: 8px; }
.foot a:hover { color: var(--accent); }