html,body{margin:0;background:#fff}

.blD{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#fff;padding:clamp(40px,5vw,72px) 24px;box-shadow:inset 0 -1px 0 var(--line);
}
.blD__in{max-width:960px;margin:0 auto}
.blD__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.blD__head h2{margin:0;font-size:clamp(20px,2.7vw,27px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.blD__search input{
  border:0;background:#f6f9fc;border-radius:8px;padding:11px 15px;font:inherit;font-size:13.5px;width:250px;
  outline:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);
}
.blD__search input:focus{background:#fff;box-shadow:inset 0 0 0 1px var(--acc),0 0 0 3px rgba(99,91,255,.16)}
.blD__cats{display:flex;gap:8px;flex-wrap:wrap}
.blD__cats button{
  border:0;background:#f6f9fc;color:var(--body);border-radius:99px;padding:9px 16px;font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:inset 0 0 0 1px var(--line);
  transition:.12s;
}
.blD__cats button span{font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums}
.blD__cats button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--acc)}
.blD__cats button.is-on{background:var(--ink);color:#fff;box-shadow:none}
.blD__cats button.is-on span{color:rgba(255,255,255,.6)}
.blD__tags{margin:22px 0 0;padding:0;list-style:none;display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  font-size:12px;color:var(--sub)}
.blD__tags a{color:var(--acc);text-decoration:none;font-weight:700}
.blD__tags a:hover{text-decoration:underline}
@media (max-width:600px){ .blD__search input{width:100%} .blD__search{flex:1} }