@charset "utf-8";

/* ==================================================
 メニュー専用スタイルシート
 写真の枚数に応じて自動的にレイアウトが変わります
================================================== */

/* ==== 基本設定（全体のラッパー）==== */
.unique-img-wrapper {
  max-width: 1200px;           /* PC時の最大幅 */
  margin: 20px auto;           /* 中央寄せ + 上下余白 */
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;             /* 左右に少し余白 */
}

/* ==== 画像とキャプションを囲むブロック ==== */
/* 各画像＋キャプションを1セットとして扱う */
.img-with-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==== 画像の基本スタイル ==== */
.unique-img-responsive {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;            /* ← 角丸を削除 */
  box-shadow: none;            /* ← 影も不要なら消す（必要なら削除行をコメントアウト） */
}

/* ==== キャプションのスタイル ==== */
.img-caption {
  font-family: "Shippori Mincho", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "MS P明朝", "MS PMincho", serif;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  margin-top: 8px;
  line-height: 1.6;
  padding: 0 5px;
}

/* ==================================================
 PCレイアウト（画面幅769px以上）
 各「.img-with-caption」の個数でレイアウトを切り替え
================================================== */

/* 写真1枚タイプ（中央配置） */
@media (min-width: 769px) {
  .unique-img-wrapper:has(.img-with-caption:only-child) {
    display: flex;
    justify-content: center;
  }

  .unique-img-wrapper:has(.img-with-caption:only-child) .img-with-caption {
    max-width: 600px;          /* 1枚の時は最大600pxに制限 */
    width: 100%;
  }

  /* 写真2枚横並び */
  .unique-img-wrapper:has(.img-with-caption:nth-child(2):last-child) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 写真3枚横並び */
  .unique-img-wrapper:has(.img-with-caption:nth-child(3):last-child) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* 写真4枚横並び */
  .unique-img-wrapper:has(.img-with-caption:nth-child(4):last-child) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* 写真5枚横並び */
  .unique-img-wrapper:has(.img-with-caption:nth-child(5):last-child) {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

/* ==================================================
 スマホ表示（画面幅768px以下）
 すべて1列表示
================================================== */
@media (max-width: 768px) {
  .unique-img-wrapper {
    padding: 0 5px;
    display: block;            /* 縦積み */
  }

  .img-with-caption {
    margin-bottom: 10px;
  }

  .unique-img-wrapper .unique-img-responsive {
    max-width: 100%;
  }
}

/* ==================================================
 タブレット表示（画面幅769px〜1024px）
================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 1枚はPC同様でOK */

  /* 2枚はそのまま2列 */
  .unique-img-wrapper:has(.img-with-caption:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 3枚は3列 */
  .unique-img-wrapper:has(.img-with-caption:nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  /* 4枚は2列×2行に変更 */
  .unique-img-wrapper:has(.img-with-caption:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* 5枚は3列+2列イメージ（実装上は3列だがレスポンシブに任せる） */
  .unique-img-wrapper:has(.img-with-caption:nth-child(5):last-child) {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ==================================================
 その他の調整（ホバーなど）
================================================== */
@media (min-width: 769px) {
  .unique-img-responsive:hover {
    transform: none;           /* 拡大演出が不要ならnoneに */
    transition: none;
    box-shadow: none;
  }
}