.cat-overlay{
  position:relative;
  width:880px;
  max-width:100%;
  margin:0 auto;
  box-sizing:border-box;
  background-size:cover;
  background-position:center;
  padding:14px 16px;
}

/* デザインビュー・古い環境用：floatで5列に並べる */
.cat-grid{overflow:hidden;margin:0 -8px -8px 0;}
.cat-btn{
  display:block;
  float:left;
  width:163px;
  margin:0 8px 8px 0;
  box-sizing:border-box;
  text-align:center;
  background:rgba(255,255,255,.92);
  border:1px solid #ddd0ab;
  border-radius:6px;
  padding:3px 8px;
  font-size:14px;
  font-weight:700;
  color:#1d2c27;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.cat-btn:hover{
  transform:translateY(-3px);
  background:#ffe066;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.cat-btn.accent{background:#ff7a1a;color:#fff;border:2px solid #fff;}
.cat-btn.accent:hover{background:#ff8f3d;}

/* ブラウザではこっちが優先：グリッドで並べる */
@supports (display:grid){
  .cat-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    overflow:visible;
    margin:0;
  }
  .cat-btn{float:none;width:auto;margin:0;}
}
@media (max-width:700px){ .cat-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:440px){ .cat-grid{grid-template-columns:repeat(2,1fr);} }