:root { --bg:#f3f4f6; --card:#fff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --accent:#6366f1; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); line-height:1.8; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:12px 20px; display:flex; justify-content:space-between; align-items:center; }
.site-header a { color:var(--accent); text-decoration:none; font-weight:700; font-size:0.9rem; }
.site-header nav { display:flex; gap:16px; flex-wrap:wrap; }
.site-header nav a { font-weight:500; font-size:0.85rem; color:var(--muted); }
.site-header nav a:hover { color:var(--accent); }
.container { max-width:720px; margin:0 auto; padding:40px 20px 60px; }
h1 { font-size:1.8rem; margin-bottom:8px; border-bottom:2px solid var(--accent); padding-bottom:12px; line-height:1.4; }
h2 { font-size:1.2rem; margin-top:32px; color:var(--accent); }
h3 { font-size:1.05rem; margin-top:20px; }
p { margin:12px 0; font-size:0.95rem; }
ul, ol { padding-left:20px; margin:12px 0; }
li { margin:6px 0; font-size:0.95rem; }
a { color:var(--accent); }
.subtitle { color:var(--muted); margin-bottom:24px; font-size:0.9rem; }
.meta { color:var(--muted); font-size:0.8rem; margin-bottom:24px; }
.meta span { margin-right:12px; }
.article-body p { line-height:1.9; }
.article-body ul, .article-body ol { line-height:1.9; }
.back-link { display:inline-block; margin-bottom:20px; color:var(--accent); text-decoration:none; font-size:0.85rem; }
.back-link:hover { text-decoration:underline; }
.blog-list { list-style:none; padding:0; }
.blog-list li { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:16px; transition:box-shadow 0.2s; }
.blog-list li:hover { box-shadow:0 4px 12px rgba(0,0,0,0.08); }
.blog-list a { text-decoration:none; color:var(--text); }
.blog-list a:hover h3 { color:var(--accent); }
.blog-list h3 { font-size:1.05rem; margin-bottom:6px; transition:color 0.2s; }
.blog-list p { color:var(--muted); font-size:0.85rem; margin:0; }
.blog-list .blog-date { font-size:0.75rem; color:var(--muted); margin-top:8px; }
.author-box { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:40px; display:flex; gap:12px; align-items:center; }
.author-box .author-icon { font-size:2rem; }
.author-box .author-info p { margin:0; font-size:0.85rem; color:var(--muted); }
.author-box .author-info strong { color:var(--text); }
.site-footer { background:var(--card); border-top:1px solid var(--border); padding:32px 20px; text-align:center; }
.site-footer a { color:var(--muted); text-decoration:none; font-size:0.85rem; margin:0 8px; }
.site-footer a:hover { color:var(--accent); }
.site-footer .copyright { margin-top:12px; color:var(--muted); font-size:0.8rem; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-bottom:8px; }
@media (max-width:640px) { .site-header nav { display:none; } }