/* ============================================================ */
/* 31st 改修: 過去の受賞作品ページ                                  */
/* (過去の受賞作品ページ03.jpg の指示に基づく)                       */
/* ============================================================ */

/* 31st common.css の body bg #e6f0f7 を override して archive ページ全体は白背景 */
body {
  background-color: #fff;
}

/* ① ヘッダー HTMLテキスト化 (bg #222 / 白文字) */
.archive-hero {
  background-color: #222;
  color: #fff;
  padding: 60px 24px 80px;
  position: relative;
}
.archive-hero__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.archive-hero__lead {
  font-size: 14px;
  margin: 0 0 8px;
  letter-spacing: 0.05em;
}
.archive-hero__title {
  font-size: 48px;
  font-weight: 700;
  margin: 0 0 28px;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.archive-hero__desc {
  font-size: 16px;
  line-height: 1.9;
  margin: 0;
  letter-spacing: 0.03em;
  max-width: 800px;
}
.archive-hero__icon {
  display: block;
  width: 106px;
  height: auto;
  margin: 0 0 14px;
}

/* ロクイチアイコン: 31st amatuf #14 と同じ押し込みアニメーション
   影は真下方向 (0,6,0,#ccc)、hover時に影が消えて本体が真下にスライド */
.archive-hero__rokuichi {
  position: absolute;
  bottom: -40px;
  right: 60px;
  display: block;
}
.archive-hero__rokuichi:hover {
  opacity: 1;
}
.archive-hero__rokuichi img {
  width: 273px;
  height: auto;
  filter: drop-shadow(0 6px 0 #cccccc);
  transition: filter 0.2s ease, transform 0.2s ease;
}
.archive-hero__rokuichi:hover img {
  filter: drop-shadow(0 0 0 #cccccc);
  transform: translateY(6px);
}

@media (max-width: 768px) {
  .archive-hero { padding: 40px 16px 60px; }
  .archive-hero__icon { width: 80px; margin-bottom: 10px; }
  .archive-hero__lead { font-size: 12px; }
  .archive-hero__title { font-size: 30px; margin-bottom: 20px; }
  .archive-hero__desc { font-size: 13px; line-height: 1.7; }
  .archive-hero__rokuichi { right: 16px; bottom: -30px; }
  .archive-hero__rokuichi img { width: 142px; }
}

/* ② 各回リンク: ホバー時は内部画像をズームインのみ (translateYは無し) */
.archive-item-link {
  text-decoration: none;
  color: inherit;
}
.archive-item-link:hover {
  opacity: 1;
}

/* ③ リンク画像にズームインホバー (omakase #5) */
.archive-item-img-wrap {
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}
.archive-item-img-wrap img {
  display: block;
  transition: transform 0.6s ease;
  /* width/height は img自身の Tailwind class (w-[168px] md:w-[287px]) に任せる */
}
.archive-item-link:hover .archive-item-img-wrap img {
  transform: scale(1.08);
}

/* ④ タイトル 2段表記 (第30回-17回)
   指示書: 第NN回 = 16px, テーマ = 14px, 「XXX」 = 20px */
.archive-item-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}
.archive-item-title__num {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
}
.archive-item-title__theme {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  line-height: 1.2;
}
.archive-item-title__label {
  font-size: 14px;
}
.archive-item-title__name {
  font-size: 20px;
}
@media (max-width: 768px) {
  .archive-item-title__num { font-size: 12px; }
  .archive-item-title__label { font-size: 11px; }
  .archive-item-title__name { font-size: 16px; }
}