/* ===== Snap Peace ショートムービー：カフェのモニター（もみくちゃん動画の上）＋再生画面 ===== */
/* モニターは動画の枠（.sp-cafe-scene）に合わせて置く。container-momikuchan の左右の余白に影響されない */
.sp-cafe-scene { position: relative; }
.sp-cafe-scene video { display: block; }

/* --- カフェのモニター（看板と同じつり下げ式） --- */
.sp-cafe-tv {
  position: absolute; z-index: 5; top: 0; right: 7%; width: 40%;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.sp-cafe-tv__rods { display: flex; justify-content: space-between; width: 46%; height: clamp(14px, 4.5vw, 22px); margin: 0 auto; }
.sp-cafe-tv__rods span { width: clamp(3px, 0.9vw, 5px); background: #2d2626; border-radius: 2px; }
.sp-cafe-tv__frame { display: block; padding: clamp(4px, 1.2vw, 6px); background: #2d2626; border-radius: clamp(9px, 2.6vw, 14px); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); }
.sp-cafe-tv__screen { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(6px, 1.6vw, 9px); background: #1b2a55; }
.sp-cafe-tv__screen img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sp-cafe-tv__play {
  position: absolute; right: 6%; bottom: 8%; width: 22px; height: 22px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .78);
  transition: all .25s ease;
}
.sp-cafe-tv__play::before { content: ""; margin-left: 2px; border-left: 8px solid #F4343D; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: all .25s ease; }
.sp-cafe-tv__tip {
  position: absolute; left: 50%; bottom: -30px; transform: translate(-50%, 4px);
  white-space: nowrap; padding: 5px 10px; border: 2px solid #3b2f2f; border-radius: 999px; background: #fff;
  color: #3b2f2f; font: 700 11px/1 "Noto Sans JP", sans-serif; opacity: 0; pointer-events: none; transition: all .25s ease;
}
/* マウスを乗せたとき・キーボードで選んだとき */
.sp-cafe-tv:hover .sp-cafe-tv__screen img, .sp-cafe-tv:focus-visible .sp-cafe-tv__screen img { transform: scale(1.04); }
.sp-cafe-tv:hover .sp-cafe-tv__play, .sp-cafe-tv:focus-visible .sp-cafe-tv__play,
.sp-cafe-tv.is-touch .sp-cafe-tv__play {
  right: 50%; bottom: 50%; width: 44px; height: 44px; margin: 0 -22px -22px 0; background: rgba(255, 255, 255, .92);
}
.sp-cafe-tv:hover .sp-cafe-tv__play::before, .sp-cafe-tv:focus-visible .sp-cafe-tv__play::before,
.sp-cafe-tv.is-touch .sp-cafe-tv__play::before { margin-left: 4px; border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; }
.sp-cafe-tv:hover .sp-cafe-tv__tip, .sp-cafe-tv:focus-visible .sp-cafe-tv__tip { opacity: 1; transform: translate(-50%, 0); }
.sp-cafe-tv:focus-visible { outline: none; }
.sp-cafe-tv:focus-visible .sp-cafe-tv__frame { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #F4343D; }
/* スマホなどマウスがない端末は、最初から大きい▶ */
@media (hover: none) {
  .sp-cafe-tv .sp-cafe-tv__play { right: 50%; bottom: 50%; width: 40px; height: 40px; margin: 0 -20px -20px 0; background: rgba(255, 255, 255, .9); }
  .sp-cafe-tv .sp-cafe-tv__play::before { margin-left: 4px; border-left-width: 14px; border-top-width: 8px; border-bottom-width: 8px; }
}

/* --- 再生画面（押したあと） --- */
.sp-story { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 16px; }
.sp-story[hidden] { display: none; }
.sp-story__backdrop { position: absolute; inset: 0; background: rgba(3, 22, 52, .88); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s ease; }
.sp-story__player { position: relative; width: min(1000px, 100%, calc((100vh - 140px) * 16 / 9)); opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
.sp-story__player video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(10px, 2vw, 18px); background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.sp-story__close {
  position: absolute; right: 0; top: -56px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: #005DAA; font: 700 24px/1 sans-serif; cursor: pointer;
}
.sp-story__close:focus-visible { outline: 3px solid #F4343D; outline-offset: 3px; }
.sp-story.is-open .sp-story__backdrop { opacity: 1; }
.sp-story.is-open .sp-story__player { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sp-cafe-tv *, .sp-story__backdrop, .sp-story__player { transition: none !important; }
}