/* M77：スマホ（900px以下）専用。写真を押すと画面いっぱいに拡大する。PCでは動かない。 */
.m-lightbox:not([open]) { display: none; }
.m-lightbox { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .95); color: #fff; overflow: hidden; font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; }
.m-lightbox[open] { display: flex; flex-direction: column; }
.m-lightbox::backdrop { background: #000; }
.m-lightbox__bar { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
.m-lightbox__count { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.m-lightbox button { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #8a8a8a; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-lightbox button:focus-visible { outline: 3px solid #c6ff2e; outline-offset: 2px; }
.m-lightbox button[hidden] { display: none; }
.m-lightbox__stage { position: relative; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y pinch-zoom; }
.m-lightbox__stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.m-lightbox .m-lightbox__prev, .m-lightbox .m-lightbox__next { position: absolute; top: 50%; margin-top: -24px; }
.m-lightbox .m-lightbox__prev { left: max(8px, env(safe-area-inset-left)); }
.m-lightbox .m-lightbox__next { right: max(8px, env(safe-area-inset-right)); }
.m-lightbox__text { flex: none; margin: 0; padding: 12px max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); font-size: 16px; line-height: 1.7; }
.m-lightbox__hint { display: block; margin-top: 4px; color: #c8c8c8; font-size: 14px; }
@media (max-width: 900px) {
  .m-zoomable { cursor: zoom-in; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .m-lightbox__text { padding-block: 6px 8px; font-size: 14px; }
  .m-lightbox__hint { display: none; }
}