/* =========================================================
   UP2U Lightbox
   ========================================================= */
.up2u-lb{
  --lb-ink:var(--c-ink,#2b2a28);
  --lb-sub:var(--c-sub,#6f6b64);
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
}
.up2u-lb[hidden]{display:none}

/* 背景（白の半透明＋ぼかし。サイトのトーンに合わせています） */
.up2u-lb__bg{
  position:absolute;inset:0;cursor:pointer;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
}

/* 画像を置く領域 */
.up2u-lb__inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:5vmin 9vmin;
}
.up2u-lb__figure{
  margin:0;max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  opacity:0;transition:opacity .4s ease;
}
.up2u-lb__figure.is-in{opacity:1}
.up2u-lb__img{
  display:block;max-width:100%;max-height:78vh;
  width:auto;height:auto;object-fit:contain;
  border-radius:8px;
  box-shadow:0 30px 80px rgba(30,28,26,.24);
  cursor:pointer;
  backface-visibility:hidden;
}
.up2u-lb__caption{
  max-width:min(720px,90vw);
  font-size:12.5px;line-height:1.9;color:var(--lb-sub);text-align:center;
}
.up2u-lb__caption[hidden]{display:none}

/* 左右のボタン */
.up2u-lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.86);color:var(--lb-ink);
  box-shadow:0 3px 14px rgba(30,28,26,.14);
  transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.up2u-lb__nav.is-prev{left:2vmin}
.up2u-lb__nav.is-next{right:2vmin}
.up2u-lb__nav:hover{
  background:#fff;box-shadow:0 5px 20px rgba(30,28,26,.2);
  transform:translateY(-50%) scale(1.06);
}
.up2u-lb__nav:active{transform:translateY(-50%) scale(.97)}
.up2u-lb__nav:focus-visible{outline:2px solid var(--lb-ink);outline-offset:3px}

/* 閉じる */
.up2u-lb__close{
  position:absolute;right:2vmin;top:2vmin;z-index:2;
  width:42px;height:42px;padding:0;line-height:1;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.86);color:var(--lb-ink);
  font-size:24px;
  box-shadow:0 3px 14px rgba(30,28,26,.14);
  transition:background .3s ease;
}
.up2u-lb__close:hover{background:#fff}
.up2u-lb__close:focus-visible{outline:2px solid var(--lb-ink);outline-offset:3px}

/* 枚数 */
.up2u-lb__count{
  position:absolute;left:0;right:0;bottom:2.4vmin;z-index:2;
  text-align:center;
  font-family:var(--f-en,sans-serif);font-size:11.5px;letter-spacing:.18em;
  color:var(--lb-sub);
}

/* 開いている間は背面をスクロールさせない */
body.up2u-lb-open{overflow:hidden}

/* 対象の画像にカーソルを乗せたときの合図 */
a[data-up2u-lb]{display:inline-block;cursor:zoom-in}
a[data-up2u-lb] img{transition:opacity .3s ease}
a[data-up2u-lb]:hover img{opacity:.86}

@media (max-width:600px){
  .up2u-lb__inner{padding:14px}
  .up2u-lb__img{max-height:70vh}
  .up2u-lb__nav{width:40px;height:40px}
  .up2u-lb__nav.is-prev{left:8px}
  .up2u-lb__nav.is-next{right:8px}
  .up2u-lb__close{width:38px;height:38px;right:8px;top:8px;font-size:21px}
  .up2u-lb__caption{font-size:11.5px}
}

@media (prefers-reduced-motion:reduce){
  .up2u-lb__figure{transition:none}
}
