@charset "UTF-8";

/* ==========================================================================
   ファイル名: store-flyer.css - Flyer Grid & Pure CSS Modal (枚数完全可変・最適化版)
   ========================================================================== */

/* --- 1. Section Base (メインのカードデザインと完全同期) --- */
.store-flyer-card {
  width: 100%; /* 横幅いっぱいに広げる */
  background: #ffffff;
  border: 1px solid #eef0f2;
  border-radius: 12px; /* store-feature-card等と質感を統一 */
  padding: 40px;
  margin-bottom: 60px; /* 下部セクションとの余白を60pxに固定 */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

/* PC環境（1025px以上・768px以上）で並列フレックスから完全に独立させ、下段全幅にするための処理 */
@media (min-width: 768px) {
  .store-flyer-card {
    flex: 0 0 100%; /* 親のflexに負けず、確実に下段に100%幅で回り込ませる */
    clear: both;
  }
}

/* --- 2. Flyer Grid System (枚数自動可変対応レイアウト) --- */
.flyer-grid {
  display: grid;
  /* 💡初期設定（1〜2枚時）: 間延びを防ぐため、1マスの最大幅を320pxに抑え、コンテナ中央へ寄せます */
  grid-template-columns: repeat(auto-fill, minmax(200px, 320px));
  gap: 24px;
  margin-top: 25px;
  align-items: start; /* 異なる比率・高さの画像が来ても、上揃えで綺麗に並ぶようにする */
  justify-content: center;
}

/* 💡【重要追加】3枚以上の時：元の表示状態（auto-fit, 1frで均等伸縮しながら左詰め）に完全自動スイッチ */
.flyer-grid:has(.flyer-item:nth-child(3)) {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-content: start;
}

/* 💡枚数が1枚〜2枚など少ない場合に、巨大化しすぎないように最大幅を制限してスマートに見せる処理 */
.flyer-item {
  position: relative;
  width: 100%;
  max-width: 320px; /* 3枚並びの時のサイズ感を上限としてキープ */
}

/* 💡【重要追加】3枚以上の時：元の伸縮ポテンシャルを引き出すため、個別のmax-width制限を100%へ解放 */
.flyer-grid:has(.flyer-item:nth-child(3)) .flyer-item {
  max-width: 100%;
}

/* 💡元のソースにあった「1枚だけの時は中央寄り」の挙動を担保する記述 */
.flyer-grid:not(:has(.flyer-item:nth-child(2))) .flyer-item {
  justify-self: center; /* 1枚だけの時は中央寄りに美しく配置 */
}

/* チェックボックス本体は完全非表示 */
.flyer-modal-state {
  display: none !important;
}

/* サムネイル（トリガー）のコンテナ */
.flyer-thumb-link {
  display: block;
  position: relative;
  cursor: pointer;
  overflow: visible; /* 子要素のモーダルが外に飛び出せるようにvisibleに変更 */
  border: 1px solid #eee;
  border-radius: 0; /* 全体のトーンに合わせて直角シャープに統一 */
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* 💡アニメーションを簡素化 */
  background: transparent; /* 背景色の干渉を無くし、オリジナル画像を際立たせる */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 通常時のサムネイル画像スタイル */
.flyer-thumb-link > img {
  width: 100%;
  height: auto;
  aspect-ratio: auto; /* 固定を完全に撤廃し、オリジナル比率を維持 */
  display: block;
  object-fit: contain; /* 画像を絶対に切り抜かず、枠内に完全に縮小フィットさせる */
  transition: none; /* 💡過剰な拡大アニメーション用のtransitionを完全削除 */
}

/* 拡大アイコン・ホバー演出 */
.zoom-icon {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease; /* 💡パッと切り替わるよう時間を短縮 */
  z-index: 5;
}

.zoom-icon::before {
  content: "+";
  font-size: 20px;
  margin-right: 6px;
  font-weight: 300;
}

/* サムネイルホバー・アクティブ時の挙動 */
.flyer-thumb-link:hover {
  border-color: #c5a059; /* ブランドゴールド */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 💡過剰な「scale(1.03)」の拡大演出を削除し、画像自体は動かない普通の挙動に修正 */
.flyer-thumb-link:hover > img,
.flyer-thumb-link:active > img {
  transform: none; 
}

.flyer-thumb-link:hover .zoom-icon,
.flyer-thumb-link:active .zoom-icon {
  opacity: 1;
  visibility: visible;
}

/* --- 3. Pure CSS Modal Window Logic (モーダル制御) --- */

/* 背景オーバーレイ（初期状態：非表示） */
.flyer-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 14, 13, 0.9); /* 高級感のある極濃のダークグレー */
  z-index: 10000; /* 全ての要素の最前面に固定 */
  opacity: 0;
  visibility: hidden;
  transition: none; /* 💡ふわっと開くフェードを削除し、パッと開閉する普通の挙動に */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  pointer-events: none;
  cursor: default;
}

/* 枠外クリック閉鎖用の見えない背景 */
.modal-close-bg {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
  z-index: 1;
  display: block;
}

/* モーダルコンテンツ容器 */
.flyer-modal-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
  max-height: 85vh;
  transform: none; /* 💡飛び出してくるような過剰な変形（scale）を削除 */
  transition: none; /* 💡アニメーションを削除して即時表示に */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* チェック時、元画像を全画面拡大表示化するための入れ替え処理 */
.flyer-modal-state:checked ~ .flyer-thumb-link .flyer-modal-content {
  width: 90vw;
  height: 85vh;
}

.flyer-modal-state:checked ~ .flyer-thumb-link .flyer-modal-content::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit; /* 親から画像情報を継承 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* HTMLのimg要素から画像URLを直接CSSに吸い上げるためのモダンブラウザ設定 */
.flyer-item {
  background-image: url();
}
.flyer-thumb-link {
  background-image: inherit;
}
.flyer-thumb-link img {
  content-visibility: auto;
}

/* 元画像（imgタグ）そのものをチェック時に全画面最前面へ引き上げる指定 */
.flyer-modal-state:checked ~ .flyer-thumb-link {
  border-color: transparent;
  box-shadow: none;
}

.flyer-modal-state:checked ~ .flyer-thumb-link > img {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important; /* 💡無駄なscale(1)指定やアニメーションのブレを排除 */
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 85vh;
  z-index: 10005; /* オーバーレイより前面 */
  pointer-events: none; /* 下の閉じるボタンや背景をクリック可能に */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* 閉じるボタン（右上「×」） */
.modal-close-btn {
  position: absolute;
  top: -44px;
  right: 0;
  color: #ffffff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease; /* 💡色変化の反応を早く調整 */
  user-select: none;
  padding: 5px;
  z-index: 10010;
  display: block;
}

.modal-close-btn:hover {
  color: #c5a059; /* ホバーでブランドゴールドに変調 */
}

/* 【ロジックコア】チェック時に開く処理 */
.flyer-modal-state:checked ~ .flyer-thumb-link .flyer-modal-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.flyer-modal-state:checked ~ .flyer-thumb-link .flyer-modal-content {
  transform: none; /* 💡開いた時も余計な変形はさせず、そのまま配置 */
}

/* --- 4. Responsive Support (スマートフォン環境最適化) --- */
@media (max-width: 768px) {
  /* メインCSSの「.store-container { display: flex; flex-direction: column; }」と「order」に完全連動 */
  .store-flyer-card {
    order: 5; /* ①画像 ②情報 ③MAP消去 ④特徴 の流れを受け、最下部の⑤番目に確実に配置 */
    padding: 16px; /* 画面幅が狭いSP環境でも限界まで画像を大きく見せるため、左右余白をスリム化 */
    margin-top: 0;
    margin-bottom: 30px; /* スマホ時のボトム余白を特徴カード（30px）と同調 */
  }

  /* スマホ環境でもPC同様に枚数に応じた最適並び（最大3枚並び）を自動キープする */
  .flyer-grid {
    /* 💡修正：画面の狭いSPでも、画像が1〜3枚の間で潰れず綺麗に収まる最小幅（60px）に調整 */
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)) !important; /* PC枚数判定ロジックがSP側でバッティングしないよう最優先指定 */
    gap: 8px; /* 3枚並びでも窮屈にならないよう、画像間の余白を極小（8px）に最適化 */
    margin-top: 15px;
    align-items: start; /* 異なる比率の画像が来ても上端をビシッと揃える */
    justify-content: stretch !important;
  }

  /* スマホ時は個別幅の制限を解除し、グリッドシステムに100%委ねる */
  .flyer-item {
    max-width: 100% !important;
  }

  .flyer-thumb-link img {
    width: 100%;
    height: auto;       /* スマホでも縦横比を完全に維持して縮小 */
    aspect-ratio: auto; /* スマホでもオリジナル比率をキープ */
  }

  /* SP環境でもカーソル上、またはタッチ時に「＋拡大する」をしっかり表示 */
  .zoom-icon {
    font-size: 0.75rem; /* スマホの3枚並び（横幅が狭い状態）でも文字がはみ出さないようフォントサイズを最適化 */
    letter-spacing: 0.05em;
  }
  
  .zoom-icon::before {
    font-size: 14px; /* プラスアイコンのサイズもスマホ用に微調整 */
    margin-right: 3px;
  }

  /* チェック時のスマホ用最前面拡大表示の微調整 */
  .flyer-modal-state:checked ~ .flyer-thumb-link > img {
    max-width: 100%;
    max-height: 75vh;
  }

  /* モーダル表示を画面いっぱいに広げてスマホでも見やすく */
  .flyer-modal-overlay {
    padding: 10px;
  }

  .flyer-modal-content {
    max-width: 100%;
    max-height: 80vh;
  }

  .modal-close-btn {
    top: -46px;
    right: 4px;
    font-size: 36px;
  }
}