.custom-hotspot {
    background-color: rgba(255, 87, 34, 0.7); /* 半透明の背景色 */
    color: white;             /* 文字色 */
    padding: 5px 10px;        /* パディング */
    border-radius: 5px;       /* ボーダーの角を丸くする */
    font-size: 12px;          /* フォントサイズ */
}
/* ★ 追加：ジャンプ用の青い丸ホットスポット */
.jump-hotspot {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: rgba(37, 99, 235, 0.95); /* 青 */
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.9);
  cursor: pointer;
}
/* ホバー時のスタイル */
.custom-hotspot:hover {
    background-color: rgba(230, 74, 25, 0.7); /* ホバー時の半透明の背景色 */
}

/* タブレット用のスタイル調整 */
@media only screen and (max-width: 768px) {
    .custom-hotspot {
        padding: 10px 20px;   /* タブレット用のパディング */
        font-size: 16px;      /* タブレット用のフォントサイズ */
    }
}

/* モバイル用のスタイル調整 */
@media only screen and (max-width: 480px) {
    .custom-hotspot {
        padding: 8px 15px;    /* モバイル用のパディング */
        font-size: 12px;      /* モバイル用のフォントサイズ */
    }
}

/* 中央の+マークを非表示にする */
.pnlm-default-hotspot {
    display: none !important;
}

/* ホットスポットのツールチップスタイル */
.custom-hotspot-tooltip {
    position: absolute;
    background-color: rgba(255, 87, 34, 0.7); /* 半透明の背景色 */
    color: white;             /* 文字色 */
    padding: 5px 10px;        /* パディング */
    border-radius: 5px;       /* ボーダーの角を丸くする */
    font-size: 12px;          /* フォントサイズ */
    white-space: nowrap;      /* テキストの折り返しを防止 */
    pointer-events: none;     /* ポインタイベントを無効にして、ツールチップがクリックされないようにする */
}

/* タブレット用のスタイル調整 */
@media only screen and (max-width: 768px) {
    .custom-hotspot-tooltip {
        padding: 10px 20px;   /* タブレット用のパディング */
        font-size: 16px;      /* タブレット用のフォントサイズ */
    }
}

/* モバイル用のスタイル調整 */
@media only screen and (max-width: 480px) {
    .custom-hotspot-tooltip {
        padding: 8px 15px;    /* モバイル用のパディング */
        font-size: 12px;      /* モバイル用のフォントサイズ */
    }
}


/* Thumbnail inside hotspot bubble */
.pano-cmt-bubble {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pano-cmt-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
/* Info panel */
#hotspotInfo {
  position: fixed;
  right: 16px;
  top: 16px;
  width: 360px;
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
  z-index: 9999;
  padding: 12px;
}
#hotspotInfo.hidden { display: none; }
#hotspotInfo .hs-header {
  display:flex; justify-content: space-between; align-items:center; margin-bottom:8px;
}
#hotspotInfo .hs-title { font-weight:600; }
#hotspotInfo .hs-text { margin:6px 0; white-space: pre-wrap; }
#hotspotInfo .hs-atts { display:flex; gap:8px; flex-wrap:wrap; }
#hotspotInfo .hs-att { width:108px; }
#hotspotInfo .hs-att img { width:100%; height:72px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
#hotspotInfo .hs-kind { font-size:11px; color:#6b7280; }
#hotspotInfo .hs-close { cursor:pointer; border:none; background:#f3f4f6; padding:4px 8px; border-radius:8px; }