/* ───────────────────────────────
   作品一覧ページ 共通スタイル
────────────────────────────── */
.genre-archive { max-width: 100%; width: 100%; padding: 0; margin: 0; box-sizing: border-box; }
.l-content, .l-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 auto !important; box-sizing: border-box; }

.genre-title {
  font-size: 4.4rem; font-weight: 700; text-align: center;
  margin: 6rem 0 5rem; font-family: 'Roboto', sans-serif;
}

/* グリッドレイアウト（レスポンシブ） */
.works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4vw; row-gap: 6.5vw;
  max-width: 91.5vw;
  margin: 0 auto 40px; padding: 0; box-sizing: border-box;
}

/* 作品カード */
.work-card { display: block; text-decoration: none; color: inherit; transition: transform 0.2s ease; }
.work-card-thumbnail { aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.work-card-thumbnail img {
  width: 100%; height: 100%; border: 1px solid #ddd;
  object-fit: cover; display: block; transition: transform 0.3s ease;
}
.work-card:hover .work-card-thumbnail img { transform: scale(1.05); }

/* タイトル・説明 */
.work-card-title {
  font-weight: bold; font-size: 0.75rem; margin-top: 0.5em;
  text-decoration: underline; color: #333;
}
.work-card-description { font-size: 0.75rem; color: #333; line-height: 1.5; }

/* スマホ */
@media screen and (max-width: 600px) {
  .works-grid {
    grid-template-columns: 1fr;
    column-gap: 0; row-gap: 40px; max-width: 95vw; padding-left: 8vw; padding-right: 8vw;
  }
  .work-card-title { font-size: 1rem; text-align: left; }
  .work-card-description { font-size: 0.85rem; text-align: left; }
  .work-card-thumbnail { aspect-ratio: 3 / 2; }
}