/* ============================================================
   営業漫画スライダー（mgs）＋ 拡大ビューア（mgv）
   Studio Yagami / 2026-09-09
   - CSS変数はHP側にあればそれを使い、無ければ既定値で動く
   - このファイルは単体で完結。既存クラス名と衝突しない接頭辞（mgs/mgv）
   ============================================================ */

.mgs{
  --mgs-ink:var(--ink,#10222e);
  --mgs-sub:var(--sub,#58686f);
  --mgs-accent:var(--accent,#358a88);
  --mgs-line:var(--line,rgba(16,34,46,.12));
  --mgs-card:172px;                 /* カード幅（PC） */
  position:relative;
}

/* ── 横スライドの帯 ── */
.mgs__track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:2px;
  padding:2px 2px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(16,34,46,.28) transparent;
}
.mgs__track::-webkit-scrollbar{height:8px}
.mgs__track::-webkit-scrollbar-thumb{background:rgba(16,34,46,.24);border-radius:8px}
.mgs__track::-webkit-scrollbar-track{background:transparent}

/* ── 1ページぶんのカード ── */
.mgs__item{
  flex:0 0 var(--mgs-card);
  scroll-snap-align:start;
  position:relative;
  margin:0;padding:0;
  border:1px solid var(--mgs-line);
  border-radius:4px;
  background:#fff;
  overflow:hidden;
  cursor:zoom-in;
  font:inherit;color:inherit;
  box-shadow:0 4px 14px rgba(16,34,46,.10);
  transition:transform .3s ease-out, box-shadow .3s ease-out;
}
.mgs__item img{
  width:100%;height:auto;display:block;
  transition:transform .5s ease-out;
}
.mgs__item:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,34,46,.18)}
.mgs__item:hover img{transform:scale(1.03)}
.mgs__item:focus-visible{outline:2px solid var(--mgs-accent);outline-offset:3px}

/* ページ番号 */
.mgs__no{
  position:absolute;left:8px;top:8px;
  min-width:24px;height:24px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(16,34,46,.72);color:#fff;
  font-size:12px;font-weight:700;line-height:1;
  border-radius:12px;letter-spacing:.02em;
  pointer-events:none;
}

/* ── 左右の矢印（PC用。タッチ端末では隠す） ── */
.mgs__nav{
  position:absolute;top:calc(50% - 14px);transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--mgs-line);background:rgba(255,255,255,.94);
  color:var(--mgs-ink);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;
  box-shadow:0 4px 16px rgba(16,34,46,.16);
  transition:opacity .2s, background .2s;
}
.mgs__nav:hover{background:#fff}
.mgs__nav svg{width:18px;height:18px}
.mgs__nav--prev{left:-14px}
.mgs__nav--next{right:-14px}
.mgs__nav[disabled]{opacity:0;pointer-events:none}
@media (hover:none){ .mgs__nav{display:none} }

/* ── 補助テキスト ── */
.mgs__hint{
  margin-top:2px;
  font-size:13px;color:var(--mgs-sub);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.mgs__hint b{font-weight:700;color:var(--mgs-ink)}

/* ── スマホ ── */
@media (max-width:900px){
  .mgs{--mgs-card:148px}
  .mgs__track{gap:11px}
}
@media (max-width:560px){
  .mgs{--mgs-card:40vw}
  .mgs__track{
    scroll-snap-type:x mandatory;
    /* 画面端まで見せて「まだ続く」と分かるようにする */
    margin-inline:calc(var(--pad-x,24px) * -1);
    padding-inline:var(--pad-x,24px);
    scroll-padding-inline:var(--pad-x,24px);   /* ← これが無いと1枚目が左にズレる */
  }
  .mgs__hint{font-size:12px}
}

/* ============================================================
   拡大ビューア
   ============================================================ */
.mgv{
  position:fixed;inset:0;z-index:1000;
  background:rgba(10,18,24,.97);
  display:flex;flex-direction:column;
  opacity:0;transition:opacity .22s ease-out;
}
.mgv[hidden]{display:none}
.mgv.is-open{opacity:1}

.mgv__bar{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
  padding:10px 14px;
  color:#fff;
  font-size:14px;letter-spacing:.04em;
}
.mgv__title{font-weight:600;opacity:.86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgv__count{margin-left:auto;font-variant-numeric:tabular-nums;opacity:.86;white-space:nowrap}
.mgv__close{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s;
}
.mgv__close:hover{background:rgba(255,255,255,.14)}
.mgv__close svg{width:18px;height:18px}

.mgv__track{
  flex:1 1 auto;min-height:0;
  display:flex;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.mgv__track::-webkit-scrollbar{display:none}

.mgv__cell{
  flex:0 0 100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:0 10px;
}
.mgv__cell img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
  border-radius:2px;
  background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.mgv__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);background:rgba(20,32,40,.6);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;transition:background .2s,opacity .2s;
}
.mgv__nav:hover{background:rgba(20,32,40,.9)}
.mgv__nav svg{width:22px;height:22px}
.mgv__nav--prev{left:12px}
.mgv__nav--next{right:12px}
.mgv__nav[disabled]{opacity:.22;pointer-events:none}

.mgv__foot{
  flex:0 0 auto;
  display:flex;justify-content:center;gap:6px;
  padding:10px 14px 14px;
}
.mgv__dot{
  width:7px;height:7px;border-radius:50%;padding:0;
  border:0;background:rgba(255,255,255,.3);cursor:pointer;
  transition:background .2s,transform .2s;
}
.mgv__dot.is-on{background:#fff;transform:scale(1.35)}

@media (max-width:760px){
  .mgv__cell{align-items:flex-start;padding:0 6px}
  .mgv__cell img{max-height:none;width:100%}
  .mgv__nav{display:none}          /* スマホはスワイプで送る */
  .mgv__bar{font-size:13px;padding:8px 10px}
  .mgv__foot{padding:8px 10px 12px}
}

@media (prefers-reduced-motion:reduce){
  .mgs__item,.mgs__item img,.mgv{transition:none}
}

/* 自動で流しているあいだは、スクロールのひっかかり（snap）を切る。
   これが効いていると1pxずつの移動が毎回もとの位置へ戻されて、まったく進まない。 */
.mgs.is-autoscrolling .mgs__track{scroll-snap-type:none}