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

.dlB{
  --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(52px,6.5vw,96px) 24px;
}
.dlB__in{max-width:820px;margin:0 auto}
.dlB__head{margin-bottom:clamp(22px,3vw,32px)}
.dlB__head h2{margin:0;font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.dlB__head p{margin:12px 0 0;font-size:13.5px;color:var(--body)}
.dlB__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.dlB__list a{
  display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px;border-radius:12px;
  text-decoration:none;box-shadow:0 0 0 1px var(--line);transition:.16s;
}
.dlB__list a:hover{box-shadow:0 0 0 1px var(--acc);transform:translateY(-2px)}
.dlB__ic{
  width:46px;height:46px;border-radius:9px;display:grid;place-items:center;background:rgba(192,57,43,.1);
  color:#c0392b;font-size:10px;font-weight:800;letter-spacing:.02em;
}
.dlB__ic--x{background:rgba(14,124,90,.1);color:#0e7c5a}
.dlB__list h3{margin:0;font-size:15.5px;font-weight:800;color:var(--ink)}
.dlB__list p{margin:7px 0 0;font-size:12.5px;line-height:1.8;color:var(--body)}
.dlB__meta{font-size:11px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .dlB__list a{grid-template-columns:auto 1fr}
  .dlB__meta{grid-column:2;margin-top:-4px}
}