:root {
  --cols: 4;
  --gap: 5px;
  --radius: 3px;
  --slide-duration: 32s;
}

/* ============================
   小スライダー（12個）
============================ */
.slider-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  max-width: 1200px;
  padding: 24px 16px;
  margin: 0 auto;
}

 /* ================================
   画面幅によって列数を変える
  @media (max-width: 1024px) { :root { --cols: 3; } }
  @media (max-width: 720px)  { :root { --cols: 2; } }
  @media (max-width: 480px)  { :root { --cols: 1; } }
   ================================ */

@media (max-width: 480px) {
  .slider-grid-wrapper {
    transform: scale(0.24);
    transform-origin: top center;
  }
}

.slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
  border-radius: var(--radius);
  --offset: 0s;
}

/* 小スライダー専用 */
.small-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fade var(--slide-duration) linear infinite both;
  will-change: opacity;
}

.small-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4枚固定の delay（小スライダーは4枚固定でOK） */
.small-slide:nth-child(1) { animation-delay: calc(var(--offset) * -1 + 0s); }
.small-slide:nth-child(2) { animation-delay: calc(var(--offset) * -1 + 7.5s); }
.small-slide:nth-child(3) { animation-delay: calc(var(--offset) * -1 + 15.5s); }
.small-slide:nth-child(4) { animation-delay: calc(var(--offset) * -1 + 23.5s); }

@keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  40%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ============================
   大スライダー（フェード切替）
============================ */
.big-slider-wrapper {
  width: 1000px;
  height: 280px;
  margin: 0 auto 120px;
  position: relative;
  z-index: 9999;
}

.big-slider {
  position: relative;
  width: 1000px;
  height: 280px;
  overflow: hidden;
}

/* 大スライダー専用 */
.big-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.big-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.big-slide.active {
  opacity: 1;
}

/* モーダル（拡大画像） */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 20px;
}

.modal.show {
  display: flex;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  position: relative;
  z-index: 1;
}

/* 元に戻るボタン */
.close-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  backdrop-filter: blur(4px);
  z-index: 2;
  transition: 0.2s;
}
.close-btn:hover {
  background: rgba(255,255,255,0.35);
}

/* 矢印ボタン */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
  padding: 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  transition: 0.2s;
  z-index: 2;
}
.arrow:hover {
  background: rgba(255,255,255,0.25);
}
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }




/* サイズ変更ラッパー（任意） */
.slider-grid-wrapper {
  transform: scale(1.0);
  transform-origin: top center;
  margin: 0 auto;
}
/* スマホ縦画面用：4列を維持するために縮小 
@media (max-width: 480px) {
  .slider-grid-wrapper {
    transform: scale(0.24);
  }
}

*/
/* スマホ横画面用：少し大きく
@media (max-width: 850px) and (orientation: landscape) {
  .slider-grid-wrapper {
    transform: scale(0.45);
  }
}
*/