.cat-tiles {
  max-width: 1000px;          /* お好みで */
  margin: 0 auto;
  padding: 12px;
}

.cat-hero{
  display:block;
  width:100%;
  height:auto;
  margin: 0 0 12px;
}

/* grid */
.cat-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 10px;

  /* PC/タブレット：左featured + 右3列×2段 */
  grid-template-columns: 2fr 1fr 1fr 1fr;
  grid-template-areas:
    "featured a b c"
    "featured d e f";
}

.cat-item{ margin:0; }
.cat-item--featured{ grid-area: featured; }
.cat-grid > li:nth-child(2){ grid-area: a; }
.cat-grid > li:nth-child(3){ grid-area: b; }
.cat-grid > li:nth-child(4){ grid-area: c; }
.cat-grid > li:nth-child(5){ grid-area: d; }
.cat-grid > li:nth-child(6){ grid-area: e; }
.cat-grid > li:nth-child(7){ grid-area: f; }

.cat-card{
  position:relative;
  display:block;
  border-radius: 10px;
  overflow:hidden;
  text-decoration:none;
  line-height:1.2;
}

/* 画像は“写真だけ”にして、文字はHTMLで */
.cat-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 4 / 3;        /* 各タイルの比率を揃えたい場合 */
}

.cat-item--featured .cat-card img{
  aspect-ratio: 4 / 5;        /* 左の縦長（お好みで） */
}

/* テキストラベル（オーバーレイ） */
.cat-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding: 10px 12px;
  color:#fff;
  font-weight:700;
  font-size: 14px;

  /* 背景の読みやすさ */
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}

/* hover / focus */
.cat-card:focus-visible{
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}
@media (hover:hover){
  .cat-card:hover img{ transform: scale(1.02); }
  .cat-card img{ transition: transform .2s ease; }
}

/* スマホ：1?2列へ */
@media (max-width: 820px){
  .cat-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
  }
  .cat-item--featured{ grid-area:auto; }
}
@media (max-width: 480px){
  .cat-grid{ grid-template-columns: 1fr; }
}