@charset "UTF-8";

/* ========================================
   GALLERY SECTION
======================================== */

#gallery.gallery-section{
  background:#fff;
  overflow:visible;

  padding-top:120px;
  padding-bottom:120px;
}

@media (max-width:768px){
  #gallery.gallery-section{
    padding-top:84px;
    padding-bottom:84px;
  }
}

#gallery .container.narrow{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}

#gallery .section-head{
  text-align:center;
}


/* ========================================
   VARIABLES
======================================== */

#gallery{
  --g-pad-pc:64px;
  --g-pad-sp:18px;

  --g-ui-gap:16px;

  --g-dim:.45;

  --g-sp-peek:28px;

  --g-sp-scale-side:.88;
  --g-sp-op-side:.62;

  --g-pc-scale-side:.92;
  --g-pc-op-side:.62;
}


/* ========================================
   STAGE
======================================== */

#gallery .gallery-stage{
  position:relative;
  overflow:hidden; /* ← hidden はここだけ */
  margin-top:20px;
  padding:0 var(--g-pad-pc);
}

#gallery .gallery-stage .swiper{
  overflow:visible;
}

@media (max-width:768px){
  #gallery .gallery-stage{
    padding:0 var(--g-pad-sp);
  }
}


/* ========================================
   SLIDE WIDTH
======================================== */

@media (min-width:769px){

  #gallery .gallery-swiper{
    padding-left:84px;
    padding-right:84px;
  }

  #gallery .gallery-swiper .swiper-slide{
    width:min(960px,72vw);
  }
}

@media (max-width:768px){

  #gallery .gallery-swiper .swiper-slide{
    width: calc(100vw - (var(--g-pad-sp) * 2) - (var(--g-sp-peek) * 2));
  }
}


/* ========================================
   SLIDE BASE
======================================== */

#gallery .gallery-swiper .swiper-slide{
  position:relative;
  overflow:hidden;
  transition:
    transform 800ms cubic-bezier(.22,1,.36,1),
    opacity 600ms ease;
  will-change: transform;
}

#gallery .gallery-swiper .swiper-slide img{
  width:100%;
  display:block;
  aspect-ratio:3/2;
  height:auto;
  object-fit:cover;
  transition:transform 900ms cubic-bezier(.22,1,.36,1);
}


/* ========================================
   PC CENTER EFFECT
======================================== */

@media (min-width:769px){

  #gallery .gallery-swiper .swiper-slide{
    transform:scale(var(--g-pc-scale-side));
    opacity:var(--g-pc-op-side);
  }

  #gallery .gallery-swiper .swiper-slide.swiper-slide-prev,
  #gallery .gallery-swiper .swiper-slide.swiper-slide-next{
    transform:scale(.90);
    opacity:.75;
  }

  #gallery .gallery-swiper .swiper-slide.swiper-slide-active{
    transform:scaleX(1) scaleY(1.03);
    opacity:1;
    z-index:2;
  }
}


/* ========================================
   SP CENTER EFFECT
======================================== */

@media (max-width:768px){

  #gallery .gallery-swiper .swiper-slide{
    transform:scale(var(--g-sp-scale-side));
    opacity:var(--g-sp-op-side);
  }

  #gallery .gallery-swiper .swiper-slide.swiper-slide-prev,
  #gallery .gallery-swiper .swiper-slide.swiper-slide-next{
    transform:scale(.92);
    opacity:.75;
  }

  #gallery .gallery-swiper .swiper-slide.swiper-slide-active{
    transform:scale(1);
    opacity:1;
    z-index:2;
  }
}

#gallery .gallery-swiper .swiper-slide.swiper-slide-active img{
  transform:scale(1.02);
}


/* ========================================
   DIM OVERLAY (robust)
   - default: dim
   - active: clear
======================================== */

#gallery .gallery-swiper .swiper-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,var(--g-dim));
  opacity:1;                 /* ★デフォルトは暗くする */
  transition:opacity 360ms ease;
  pointer-events:none;
  z-index:2;
}

#gallery .gallery-swiper .swiper-slide.swiper-slide-active::after{
  opacity:0;                 /* ★activeだけ明るい */
}


/* ========================================
   UI
======================================== */

#gallery .gallery-ui{
  margin-top:var(--g-ui-gap);
  padding:0 var(--g-pad-pc);
}

@media (max-width:768px){
  #gallery .gallery-ui{
    padding:0 var(--g-pad-sp);
  }
}

#gallery .gallery-ui__row{
  display:grid;
  grid-template-columns:120px 1fr 120px;
  align-items:center;
  gap:14px;
}

@media (max-width:768px){
  #gallery .gallery-ui__row{
    grid-template-columns:88px 1fr 88px;
    gap:10px;
  }
}

#gallery .gallery-prev,
#gallery .gallery-next{
  border:none;
  background:transparent;
  cursor:pointer;
  font-family:"Cinzel",serif;
  letter-spacing:.14em;
  font-size:12px;
  color:rgba(0,0,0,.7);
  transition:opacity .25s ease, transform .25s ease;
}

#gallery .gallery-prev:hover,
#gallery .gallery-next:hover{
  opacity:.6;
  transform:translateY(-1px);
}

#gallery .gallery-bar{
  position:relative;
  height:1px;
  background:rgba(0,0,0,.18);
  overflow:hidden;
}

#gallery .gallery-bar > span{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:0%;
  background:rgba(0,0,0,.55);
  transition:width 400ms ease;
}

#gallery .gallery-fraction{
  margin-top:10px;
  text-align:center;
  font-family:"Cinzel",serif;
  letter-spacing:.12em;
  font-size:12px;
  color:rgba(0,0,0,.65);
  font-variant-numeric:tabular-nums;
}


/* ========================================
   REDUCE MOTION
======================================== */

@media (prefers-reduced-motion:reduce){
  #gallery .gallery-swiper .swiper-slide,
  #gallery .gallery-swiper .swiper-slide img{
    transition:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}