/* ===============================
   LED MAP（PC）
=============================== */

#proj-map-pc .map-container{
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 18px;
  overflow: visible;
  background: #eaf6fb;
  box-shadow: 0 2px 16px #0eb0e014;
  padding: 0px;
}

#proj-map-pc .map-image{
  width: 100%;
  display: block;
}

/* ピン（LEDページ用に強い指定） */
#proj-map-pc .pin{
  position: absolute;
  transform: translate(-50%, -100%);
  width: 100px;
  cursor: pointer;
  z-index: 2;
}

/* ピン位置 */
#proj-map-pc .pin01{ top:19.5%; left:53.5%; }
#proj-map-pc .pin02{ top:78%; left:13%; }
#proj-map-pc .pin03{ top:85%; left:23%; }  /* ← 仮。好きな位置に調整 */

/* 落下アニメ */
@keyframes drop {
  0%   { transform: translate(-50%, -300%); opacity: 0; }
   70% { transform: translate(-50%, -90%);  opacity: 1; }
  100% { transform: translate(-50%, -100%); opacity: 1; }
}

/* animate が付いたら落ちる（JSで .animate を付ける前提） */
#proj-map-pc .pin.animate{
  animation: drop 1s ease-out forwards;
  opacity: 1;
}

/* tooltip（← projection-film をやめてLED MAPに直指定） */
#proj-map-pc .tooltip{
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translate(-50%, 0);
  display: none;
  z-index: 3;

  width: min(480px, 80vw);
  padding: 8px 12px;
  border-radius: 16px;
  border: 1px solid #ccc;

  background-image:
    linear-gradient(129deg,
      rgba(95,95,95,1),
      rgba(180,180,180,1) 20%,
      rgba(124,124,124,1) 38%,
      rgba(156,156,156,1) 53%,
      rgba(129,129,129,1) 69%,
      rgba(190,190,190,1) 82%,
      rgba(132,132,132,1)
    ),
    linear-gradient(145deg, rgba(233,233,233,1) 48%, rgba(0,0,0,1)),
    linear-gradient(145deg, rgba(233,233,233,1) 48%, rgba(0,0,0,1));
}

#proj-map-pc .tooltip img,
#proj-map-pc .tooltip video{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* hoverで表示 */
#proj-map-pc .pin:hover + .tooltip,
#proj-map-pc .tooltip:hover{
  display: block;
}

#proj-map-pc .tooltip p{ color:#fff; }

/* ===============================
   SP（もし SP版があるなら）
   ※ #proj-map-sp が無いと効かないので注意
=============================== */
@media (max-width: 768px){
  #proj-map-pc .map-container{ max-width: 100%; padding: 0; box-shadow:none; background:transparent; border-radius:0; }
  #proj-map-pc .pin{ width: 70px; }
}