.image-map-hotspot {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
    border-radius: 0; /* 初期は四角形 */
    cursor: pointer;
}


.my-image-map-container {
    position: relative;
    width: 100%;
    height: auto;
    transform-origin: top left;
}

.my-image-map-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* フロントのホットスポット（リンクとモーダル用） */
.my-image-map-container a,
.my-image-map-container .open-modal {
    position: absolute;
    transform-origin: top left;
    z-index: 2;          /* 画像より前面に */
    cursor: pointer;
}

/* Tab移動でフォーカスが分かるように（アクセシビリティ） */
.my-image-map-container a:focus-visible,
.my-image-map-container .open-modal:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}