/* ===== サンプル画像のギャラリー =====
   ・マウスを乗せると少し大きくなる
   ・押すと拡大して、←→で送れる

   **並びと大きさには触らない。**
   一覧のレイアウトはこのままで良いと言われている。
   ここで display や width を指定すると、そのレイアウトを壊してしまう。
   足すのは「乗せたときの動き」と「拡大表示」だけ。 */

.gal a {
  display: block; position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
  will-change: transform;
}
/* 少し大きくなって、影で浮かせる */
.gal a:hover, .gal a:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.24);
  z-index: 3;
}
/* 乗せたときだけ、右下に「＋」を出す */
.gal a::after {
  content: "＋"; position: absolute; right: 5px; bottom: 4px;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; opacity: 0; transform: scale(.7);
  transition: opacity .22s, transform .22s; pointer-events: none;
}
.gal a:hover::after { opacity: 1; transform: scale(1); }
/* 指で触る画面では拡大しない（押しにくくなるため） */
@media (hover: none) {
  .gal a:hover { transform: none; box-shadow: none; }
  .gal a::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gal a { transition: none; } }

/* ===== サンプル動画の枠 =====

   FANZAのプレイヤーは **1280x720 でしか正しく収まらない。**
   中のCSSを読むと、こうなっている。

       .player の入れ物   height: 720px; max-height: min(100%, 75vw);
       .player header     position: absolute; top: 0;      ← 映像に重なる
       .player footer     position: absolute; bottom: 0;   ← 映像に重なる
       .player main video width: 100%; height: 100%;

   タイトルと操作ボタンは映像の上に重ねてあるので、場所を取らない。
   問題は入れ物の高さで、**720px で固定**されている（75vw の上限は
   幅960px以上では効かない）。
   横1030pxの枠に入れると、入れ物は 1030x720 のまま。
   その中で16:9の映像は 1030x579 にしかならず、
     ・上下に (720-579)/2 = 70px の黒帯が出る
     ・入れ物の下端(720px)が枠(683px)からはみ出し、操作ボタンが切れる
   これが「上に黒帯・下が見切れる」の正体だった。

   幅と高さを 1280x720 ちょうどにすると、映像が入れ物と同じ16:9になり
   黒帯が消える。あとは枠に合わせて縮小するだけ。倍率は gallery.js が入れる。 */
.samplemovie {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin: 6px 0 24px; overflow: hidden; background: #000;
}
.samplemovie iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 720px; border: 0;
  /* テーマ側に iframe { max-width:100% } があり、1280pxが枠幅まで
     縮められてしまう。ここは実寸で置きたいので打ち消す。 */
  max-width: none; max-height: none;
  transform-origin: 0 0;
}

/* ---- 拡大表示 ---- */
#lb {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s;
  -webkit-user-select: none; user-select: none;
}
#lb.on { display: flex; }
#lb.show { opacity: 1; }
#lb img {
  max-width: 92vw; max-height: 86vh;
  display: block; object-fit: contain;
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
}
#lb .lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: background .2s;
}
#lb .lb-btn:hover { background: rgba(255,255,255,.3); }
#lb .lb-prev { left: 18px; }
#lb .lb-next { right: 18px; }
#lb .lb-close {
  position: absolute; top: 16px; right: 18px;
  width: 42px; height: 42px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 20px; cursor: pointer;
}
#lb .lb-close:hover { background: rgba(255,255,255,.3); }
#lb .lb-count {
  position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; letter-spacing: .1em;
  font-family: 'Noto Sans JP', sans-serif;
}
@media (max-width: 767px) {
  #lb .lb-btn { width: 42px; height: 42px; font-size: 19px; }
  #lb .lb-prev { left: 6px; }
  #lb .lb-next { right: 6px; }
  #lb img { max-width: 96vw; }
}