.blog{padding:3rem 2rem;max-width:1200px;margin:0 auto}.blog h1{font-size:2rem;margin-bottom:2rem;color:var(--text-primary);text-align:center}.blog-layout{display:flex;gap:2rem;align-items:flex-start}.blog-main{flex:1 1;min-width:0}.blog-empty{text-align:center;color:var(--text-secondary);font-size:1.1rem;padding:3rem 0}.blog-cards{display:flex;flex-direction:column;gap:1rem}.blog-card{display:block;padding:1.5rem;background:var(--bg-card);border:2px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text-primary);transition:all .3s ease;cursor:pointer}.blog-card:hover{background:var(--bg-elevated);border-color:var(--border-strong);transform:translateY(-2px);box-shadow:0 4px 12px var(--shadow-subtle);text-decoration:none}.blog-card-title{font-size:1.3rem;font-weight:600;margin-bottom:.8rem;color:var(--text-primary)}.blog-card-meta{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.blog-card-date,.blog-card-reading-time{font-size:.85rem;color:var(--text-secondary)}.blog-card-type{font-size:.8rem;padding:.2rem .6rem;border-radius:4px;font-weight:500}.blog-card-type[data-type="更新履歴"]{color:#60a5fa;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.25)}.blog-card-type[data-type="技術記事"]{color:#34d399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.25)}.blog-card-tags{display:flex;gap:.5rem;flex-wrap:wrap}.blog-card-tag{font-size:.8rem;color:var(--text-secondary);padding:0}.blog-sidebar{width:300px;flex-shrink:0;position:-webkit-sticky;position:sticky;top:80px}.blog-sidebar-title{font-size:1rem;color:var(--text-primary);margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.blog-sidebar-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.blog-sidebar-link{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);text-decoration:none;font-size:.9rem;transition:all .3s ease}.blog-sidebar-link:hover{background:var(--bg-elevated);border-color:var(--border-strong);text-decoration:none}.blog-sidebar-link-icon{width:18px;height:18px;flex-shrink:0}@media (max-width:768px){.blog{padding:2rem 1rem}.blog-layout{flex-direction:column}.blog-sidebar{width:100%;position:static;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.blog-card{padding:1rem;border-width:1px}.blog-card-title{font-size:1.05rem;margin-bottom:.5rem}.blog-card-tags{display:none}}