#map-container {
  position: relative;padding:0;
  border: 1px solid #ccc;cursor: grab;user-select: none;
  margin:2em 1em 1em 1em;
  aspect-ratio: 1 / 1;height: auto;
  overflow:hidden;
  display: block;
}
#map-canvas{
  width:2359px;height:1727px;position: absolute;
  top:0;left:0;pointer-events: none;user-select: none;
  transform-origin: left top;user-select: none;display:block;
  -webkit-user-drag: none;transform-origin: 0 0;
  max-width: none;
}
#comment-layer {
  pointer-events:none;
  user-select: none;-webkit-user-drag: none;
}
#stage {position: absolute;inset: 0;}
.comment_name{border-bottom: 1px black solid;line-height: 1.2;margin:0 0 0.3em 0;display:block;}
.comment_list{line-height: 1.3;margin: 0px;display:block;}
.map_list{padding:0.25em 0.5em;font-size:1em;margin:0.5em 0;}
.com_toggle{margin:0.5em 0;}
.article ul li, .article ol{margin:0;}
.map_comment{
  position: absolute;font-weight:bold;
  font-size: 16px;pointer-events: auto;width:fit-content;
  user-select: none;-webkit-user-drag: none;
  background-color:white;padding:4px;border-radius:4px;
}
.red_dot {display: inline-block;position: absolute;
  width: 14px;height:14px;background: red;
  border-radius: 50%;margin-right: 5px;z-index:9999;
}
/*map style*/
#viewport {
  position: relative;padding:0;
  border: 1px solid #ccc;cursor: grab;user-select: none;
  margin:2em 1em 1em 1em;
  aspect-ratio: 1 / 1;height: auto;
  overflow:hidden;display: block;
  overflow: hidden;
}
#map-wrap, #canvas-wrap, #comment-layer {
  display: flex;position: absolute;
  top: 0;left: 0;transform-origin: left top;
}
.map, .map-canvas {
  user-select: none;pointer-events: none;
}