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

.glD{
  --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;
}
.glD__in{max-width:1120px;margin:0 auto}
.glD__head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(24px,3.5vw,38px)}
.glD__head h2{margin:0;font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.glD__filters{display:flex;gap:7px;flex-wrap:wrap}
.glD__filters span{
  font-size:12px;font-weight:700;color:var(--sub);background:#fff;padding:8px 15px;border-radius:99px;
  box-shadow:0 0 0 1px var(--line);cursor:pointer;
}
.glD__filters span.is-on{background:var(--ink);color:#fff;box-shadow:none}
.glD__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.glD__card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line);
  transition:transform .16s,box-shadow .16s}
.glD__card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px var(--line),0 18px 34px -18px rgba(10,37,64,.4)}
.glD__ph{aspect-ratio:16/9;display:grid;place-content:center;justify-items:center;gap:4px;color:#fff}
.glD__ph b{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.03em}
.glD__ph span{font-size:11px;font-weight:700;opacity:.85}
.glD__ph--a{background:linear-gradient(140deg,#635bff,#3a34b8)}
.glD__ph--b{background:linear-gradient(140deg,#0e7c5a,#0a5f45)}
.glD__ph--c{background:linear-gradient(140deg,#c0392b,#8e2a20)}
.glD__body{padding:18px 18px 22px}
.glD__tags{margin:0;padding:0;list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.glD__tags li{font-size:10.5px;font-weight:700;color:var(--sub);background:#f6f9fc;padding:4px 9px;border-radius:4px}
.glD__card h3{margin:12px 0 0;font-size:15px;font-weight:800;line-height:1.7;color:var(--ink)}
.glD__body p{margin:10px 0 0;font-size:11.5px;color:var(--sub)}
@media (max-width:880px){ .glD__grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .glD__grid{grid-template-columns:1fr} }