/* =========================================================
   UP2U Gallery Slider
   ========================================================= */
.up2u-gs{
  /* --gs-max / --gs-fade / --gs-ratio / --gs-fit はPHPから渡されます */
  position:relative;
  width:100%;
  max-width:var(--gs-max,1000px);
  margin-left:auto;
  margin-right:auto;
}
.up2u-gs *{box-sizing:border-box}

/* ---------- 表示枠 ---------- */
.up2u-gs__viewport{
  position:relative;
  width:100%;
  aspect-ratio:var(--gs-ratio,3 / 2);
  overflow:hidden;
  background:#f2f1ee;
}
.up2u-gs__slide{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transition:opacity var(--gs-fade,800ms) ease;
  pointer-events:none;
}
.up2u-gs__slide.is-active{opacity:1;pointer-events:auto}

/* 画像（元のギャラリーの figure / img をそのまま使う） */
.up2u-gs__slide figure{margin:0;height:100%}
.up2u-gs__slide img{
  display:block;width:100%;height:100%;
  object-fit:var(--gs-fit,cover);
  object-position:center;
}

/* ゆっくり拡大（ケンバーンズ効果） */
.up2u-gs.is-zoom .up2u-gs__slide.is-active img{
  animation:up2uGsZoom var(--gs-zoom,9000ms) linear forwards;
  will-change:transform;
}
@keyframes up2uGsZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .up2u-gs.is-zoom .up2u-gs__slide.is-active img{animation:none}
}

/* キャプション */
.up2u-gs__slide figcaption{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:38px 20px 56px;
  font-size:12.5px;line-height:1.8;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
}

/* 読み込み直後のちらつきを防ぐ（JSが .is-ready を付けるまで非表示） */
.up2u-gs:not(.is-ready) .up2u-gs__slide{opacity:0}
.up2u-gs:not(.is-ready) .up2u-gs__bar{opacity:0}
.up2u-gs__bar{transition:opacity .5s ease}

/* ---------- 下部のコントロールバー ---------- */
.up2u-gs__bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,0));
}
.up2u-gs__count{
  font-family:var(--f-en,sans-serif);font-size:11px;letter-spacing:.16em;
  color:#fff;opacity:.9;min-width:46px;
}
.up2u-gs__ticks{display:flex;gap:6px;flex:1}
.up2u-gs__ticks button{
  flex:1;height:2px;padding:0;border:0;background:rgba(255,255,255,.35);
  cursor:pointer;transition:background .4s ease;
}
.up2u-gs__ticks button.is-active{background:#fff}
.up2u-gs__ticks button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.up2u-gs__arrows{display:flex;gap:6px;margin-left:auto}
.up2u-gs__arrows button{
  width:30px;height:30px;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  background:none;color:#fff;font-size:12px;line-height:1;
  transition:background .3s ease,border-color .3s ease;
}
.up2u-gs__arrows button:hover{background:rgba(255,255,255,.2);border-color:#fff}
.up2u-gs__arrows button:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- レスポンシブ ---------- */
@media (max-width:600px){
  .up2u-gs__bar{padding:12px 12px;gap:10px}
  .up2u-gs__count{font-size:10.5px;min-width:42px}
  .up2u-gs__arrows button{width:28px;height:28px}
  .up2u-gs__slide figcaption{padding:30px 14px 50px;font-size:11.5px}
}

/* 動きを減らす設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .up2u-gs__slide{transition:none}
}

/* ==========================================================
   マウスを乗せて全画面で拡大表示（PCのみ）
   ========================================================== */
.up2u-zoom{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
}
.up2u-zoom[hidden]{display:none}

/* 背景（白の半透明＋ぼかし）。スライダーとは別の層にして、
   フェードさせてもスライダーが薄くならないようにしています */
.up2u-zoom__bg{
  position:absolute;inset:0;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  /* ここに will-change を指定すると、ぼかしと競合して真っ白に描画される環境があります */
}

/* スライダーを載せる枠。背景も影も持たせません
   （持たせると、拡大しきったサイズの箱が先に見えてしまいます） */
.up2u-zoom__stage{position:relative;z-index:1;background:none}

/* 拡大中のスライダー。影はスライダー自身に付けて、一緒に拡大させます */
.up2u-zoom .up2u-gs{
  width:100%;max-width:none;margin:0;
  border-radius:8px;overflow:hidden;
  box-shadow:0 30px 80px rgba(30,28,26,.22);
  /* 拡大縮小中のちらつき・輪郭のにじみを抑える */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* 角丸の内側で操作バーもきれいに収まるように */
.up2u-zoom .up2u-gs__viewport{border-radius:inherit}
/* ぼかしに対応していないブラウザでは、背景をやや濃くして文字を読みやすく */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .up2u-zoom{background:rgba(250,249,246,.92)}
}
/* タッチ端末・狭い画面では使わない */
@media (max-width:1023px),(hover:none),(pointer:coarse){
  .up2u-zoom{display:none}
}

/* 本文用のスタイル（.entry__body img{margin:...} など）がスライダー内の
   画像に効いてずれることがあるため、ここで打ち消します */
.up2u-gs img,
.up2u-gs figure{margin:0}