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

.blB{
  --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:#f6f9fc;padding:clamp(52px,6.5vw,96px) 24px;
}
.blB__in{max-width:860px;margin:0 auto}
.blB__title{margin:0 0 clamp(22px,3vw,34px);font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.blB__list{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.blB__list a{
  display:grid;grid-template-columns:190px 1fr;gap:22px;background:#fff;border-radius:12px;padding:16px;
  text-decoration:none;box-shadow:0 0 0 1px var(--line);transition:.16s;
}
.blB__list a:hover{box-shadow:0 0 0 1px var(--acc),0 12px 26px -16px rgba(10,37,64,.5);transform:translateY(-2px)}
.blB__ph{display:block;aspect-ratio:16/10;border-radius:8px}
.blB__ph--1{background:linear-gradient(140deg,#a8c4d8,#3f6a8c)}
.blB__ph--2{background:linear-gradient(140deg,#b6cbb2,#5b7d59)}
.blB__ph--3{background:linear-gradient(140deg,#f0c9a0,#c07f3c)}
.blB__meta{display:flex;align-items:center;gap:12px}
.blB__meta time{font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.blB__meta em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--acc);background:rgba(99,91,255,.1);
  padding:4px 9px;border-radius:4px}
.blB__list h3{margin:10px 0 0;font-size:16px;font-weight:800;line-height:1.65;color:var(--ink)}
.blB__list p{margin:9px 0 0;font-size:13px;line-height:1.85;color:var(--body)}
@media (max-width:640px){ .blB__list a{grid-template-columns:1fr;gap:14px} }