/* パンくず */
.breadcrumb ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.breadcrumb li + li::before {
  content: "›";
  margin: 0 0.5em;
  color: #888;
}

/* イラスト一覧（グリッドレイアウト） */
.illustrations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.illustrations article {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.illustrations img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.illustrations h2 {
  font-size: 1rem;
  padding: 0.8rem;
  background: #f9f9f9;
  margin: 0;
}



.fit-img {
  width: 280px;
  height: 280px;
  object-fit: cover;   /* 画像をトリミングして枠にフィット */
  /* object-fit: contain; で余白あり全体表示 */
  background-color: #fff; /* contain の時に余白を目立たなくする */
}



/* --- 画像カードのホバー／フォーカス効果 --- */

/* リンク全体をブロックにしてクリック領域を広げる */
.illustrations a {
  display: block;
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* カード本体 */
.illustrations article {
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}

/* 浮き上がり（hover / keyboard focus） */
.illustrations article:hover,
.illustrations article:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

/* 画像の拡大と明るさ調整 */
.illustrations img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease, filter .25s ease;
  transform-origin: center center;
}

/* 画像に対する hover/focus の変化 */
.illustrations article:hover img,
.illustrations article:focus-within img {
  transform: scale(1.06);
  filter: brightness(.96);
}

/* 薄いグラデーションオーバーレイ（視覚的な深み） */
.illustrations article::before {
  content: "";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: linear-gradient(to bottom, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.06) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  border-radius: inherit;
}

/* hover/focus 時にオーバーレイを薄く表示 */
.illustrations article:hover::before,
.illustrations article:focus-within::before {
  opacity: 1;
}

/* 見出しの微アニメーション */
.illustrations h2 {
  margin: 0;
  padding: 0.8rem;
  background: #f9f9f9;
  font-size: 1rem;
  transition: transform .25s ease, background-color .25s ease;
}

/* hover/focus 時に見出しを少し持ち上げる */
.illustrations article:hover h2,
.illustrations article:focus-within h2 {
  transform: translateY(-3px);
  background-color: #fffef6; /* 好きな色に調整可 */
}

/* キーボードフォーカスの視認性確保 */
.illustrations a:focus-visible {
  box-shadow: 0 0 0 3px rgba(21,156,228,0.25);
  border-radius: 6px;
}

/* 広告ブロック等の full-width 要素が影響を受けないようにする */
.illustrations .ad {
  transform: none;
  box-shadow: none;
}

/* アニメーションを無効にしたいユーザー向け対応 */
@media (prefers-reduced-motion: reduce) {
  .illustrations article,
  .illustrations img,
  .illustrations h2,
  .illustrations article::before {
    transition: none !important;
    animation: none !important;
  }
  .illustrations article:hover,
  .illustrations article:focus-within {
    transform: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  }
}


/* 広告ブロック */
.ad {
  grid-column: 1 / -1; /* グリッド幅いっぱい */
  text-align: center;
  margin: 1.5rem 0;
}
.ad ins {
  display: block;
  margin: auto;
}

/* ページネーション */
.pagination ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
}
.pagination a {
  display: block;
  padding: 0.5em 0.8em;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
}
.pagination a:hover {
  background: #f0f0f0;
}

/* フッター */
.site-footer {
  margin-top: 2rem;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: #666;
  border-top: 1px solid #eee;
}

/* レスポンシブ調整 */
@media (max-width: 600px) {
  .breadcrumb ol {
    font-size: 0.8rem;
  }
  .illustrations h2 {
    font-size: 0.9rem;
  }
  .ad ins {
    width: 100% !important;
    height: auto !important;
  }
}