/* ==============================
   カラーミートップページ用カスタムCSS
   画像2列表示・縦横比維持・中央寄せ
   ============================== */

/* 画像行 */
.image-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* 中央寄せ */
  gap: 15px;                /* 画像間の隙間 */
  margin-bottom: 20px;      /* 下の余白 */
}

/* 画像リンク */
.image-row a {
  display: block;
  width: 48%;               /* 2列表示で少し余白を残す */
  max-width: 300px;         /* PCでの最大幅を制限して中央寄せを安定させる */
  overflow: hidden;
}

/* 画像本体 */
.image-row img {
  width: 100%;
  height: auto;             /* 高さ自動調整で縦横比を維持 */
  display: block;
  object-fit: cover;
}

/* ホバーで少し拡大（任意） */
.image-row a:hover img {
  transform: scale(1.05);
  transition: transform 0.3s;
}

/* ==============================
   レスポンシブ対応（スマホ）
   ============================== */
@media screen and (max-width: 480px) {
  .image-row a {
    width: 100%;             /* スマホは1列表示 */
    max-width: 100%;
  }
  .image-row img {
    object-fit: contain;     /* 画像全体を表示 */
  }

  .single-center iframe {
    max-width: 100%;
    height: auto;
  }
}

/* ==============================
   YouTube動画部分
   ============================== */
.single-center {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  width: 100%;
}

.single-center iframe {
  width: 100%;
  max-width: 800px;          /* PCでの最大幅 */
  aspect-ratio: 16/9;
  height: auto;
  border: none;
  display: block;
}