.map-view-resizing-left,
.map-view-resizing-left *,
.map-view-resizing-right,
.map-view-resizing-right *{
  cursor:ew-resize !important;
}

.map-view-resizing-top,
.map-view-resizing-top *,
.map-view-resizing-bottom,
.map-view-resizing-bottom *{
  cursor:ns-resize !important;
}

.map-view-resizing-left-top,
.map-view-resizing-left-top * {
  cursor:nw-resize !important;
}

.map-view-resizing-right-top,
.map-view-resizing-right-top * {
  cursor:ne-resize !important;
}

.map-view-resizing-left-bottom,
.map-view-resizing-left-bottom * {
  cursor:sw-resize !important;
}

.map-view-resizing-right-bottom,
.map-view-resizing-right-bottom * {
  cursor:se-resize !important;
}

.map-view-btn {
  position:fixed;

  right:10px;
  bottom:65px;

  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  transform-origin: right bottom;
  transform:translate(40px,0px);
}

.map-view-btn.visible {
  visibility: visible;
  opacity: 1;
  transform-origin: right bottom;
  transform:translate(0px,0px);

}

.map-view-btn button{
  position: relative;
  display: block;
  width:50px;
  height:50px; 
  line-height: 50px;   
  border-radius: 5px;
  border:none;
  color:#fff;
  background-color: rgba(32, 140, 167, 0.8);
  cursor:pointer;
  outline: none;
}


.map-view, 
.map-view *,
.map-view-background,
.map-view-background * {

  box-sizing: border-box;

}

.map-view-background {

  position:fixed;

  background-color: rgba(0,0,0,0.1);

	transition: all 0.3s;
  visibility: hidden;
  opacity: 0;
  z-index:1000;
  left:0;
  right:0;
  top:0;
  bottom:0;
}

.map-view-background.visible {
  visibility: visible;
  opacity: 1;
}

.map-view {

  position:fixed;

  background-color: #fff;

  visibility: hidden;
  opacity: 0;
  z-index:1001;
  overflow: visible;
  -webkit-transition: transform 0.3s, opacity 0.3s,visibility 0.3s;
	-moz-transition: transform 0.3s, opacity 0.3s,visibility 0.3s;
	-ms-transition: transform 0.3s, opacity 0.3s,visibility 0.3s;
	-o-transition: transform 0.3s, opacity 0.3s,visibility 0.3s;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
  transform-origin: right bottom;
  transform:translate(40px,0px);

  border-radius: 0;
  border: 2px solid rgb(9, 179, 150);
  box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);

}

.map-view.visible {
  visibility: visible;
  opacity: 1;
  transform:translate(0px,0px);
}
.map-view .map-view-container {

  position:absolute;
  display: flex;
  flex-direction: column;

  left : 0px;
  right:0px;
  top: 0px;
  bottom:0px;

}


.map-view .map-view-header {
  flex-grow: 0;
  flex-shrink: 0;
  position: relative;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  z-index:100;
  display: flex;
  align-items: stretch;
  background-color: rgb(9, 179, 150);
  color:#fff;
  border-bottom: 2px solid transparent;

}

.map-view .map-view-header > *{
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  z-index:10;
}



.map-view .map-view-header .map-view-close-btn{
  border:none;
  outline: none;
  position: relative;
  width:32px;
  text-align: center;
  padding:0;
  margin:0;

  height:100%;
  cursor:pointer;

  background-color: transparent;
  -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;

}



.map-view .map-view-header .map-view-close-btn::before,
.map-view .map-view-header .map-view-close-btn::after{
  content: "";
  position: absolute;
  width:2px;
  height: 12px;
  background-color: #fff;
  left:50%;
  top:50%;
  margin-left:-1px;
  margin-top:-6px;
  transition: all 0.3s ease-in-out;
}
.map-view .map-view-header .map-view-close-btn::before{
  transform: rotate(-45deg) scale(0.8);
}

.map-view .map-view-header .map-view-close-btn::after{
  transform: rotate(45deg) scale(0.8);
}

.map-view .map-view-header .map-view-close-btn:hover::before {
  transform: rotate(-45deg) scale(1);
  background-color:#fff;
}
.map-view .map-view-header .map-view-close-btn:hover::after{
  transform: rotate(45deg) scale(1);
  background-color:#fff;
}

.map-view .map-view-header .map-view-close-btn:hover{
  background-color: #e23e32 !important;
}


.map-view .map-view-header > .map-view-title{
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size:10.5pt;
  padding-left:28px;
  background-image: url(../images/map/marker24.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 4px center;
  line-height:32px;
  position: relative;
  z-index:0;
  
}



.map-view .map-view-header .map-view-title-handle{
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  cursor:move;
  z-index:9;
  margin-bottom:-10px;
}


.map-view .map-view-header .map-view-title-resize-handle{
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  cursor:move;
  display:none;
  margin-top:-10px;
  margin-bottom:-10px;
  z-index:9;
}


.map-view .size-handle {
  position:absolute;
  z-index:100;
}

.map-view .size-handle.top {

  left: 8px;
  right:8px;
  top:0;
  height:16px;
  margin-top:-8px;
  cursor:ns-resize;
}

.map-view .size-handle.left {

  left: 0;
  top: 8px;
  bottom:8px;
  width:16px;
  margin-left:-8px;
  cursor:ew-resize;
}

.map-view .size-handle.right {

  right: 0;
  top: 8px;
  bottom:8px;
  width:16px;
  margin-right:-8px;
  cursor:ew-resize;
}

.map-view .size-handle.bottom {

  left: 8px;
  right:8px;
  bottom:0;
  height:16px;
  margin-bottom:-8px;
  cursor:ns-resize;
}


.map-view .size-handle.left-top {
  

  left: 0;
  top:0;
  right:auto;
  bottom:auto;
  width:16px;
  height:16px;
  margin-top:-8px;
  margin-left:-8px;
  cursor:nw-resize;

}


.map-view .size-handle.right-top {
  

  right: 0;
  top:0;
  left:auto;
  bottom:auto;
  width:16px;
  height:16px;
  margin-top:-8px;
  margin-right:-8px;
  cursor:ne-resize;

}



.map-view .size-handle.left-bottom {
  

  left: 0;
  bottom:0;
  right:auto;
  top:auto;
  width:16px;
  height:16px;
  margin-bottom:-8px;
  margin-left:-8px;
  cursor:sw-resize;

}



.map-view .size-handle.right-bottom {
  
  right: 0;
  bottom:0;
  left:auto;
  top:auto;
  width:16px;
  height:16px;
  margin-bottom:-8px;
  margin-right:-8px;
  cursor:se-resize;

}


.map-view .map-view-contents {
  flex-grow: 1;
  flex-shrink: 1;
  position: relative;
}

.map-view .map-view-contents .map-container {
  position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}




.map-view-info-window {
  display: flex;
  box-sizing: border-box;
}

.map-view-info-window *{
  box-sizing: border-box;
}



.map-view-info-window .image-wrapper{
  flex-shrink: 0;
  flex-grow: 0;
  margin-right:4px;
}

.map-view-info-window .image-frame{
  
  width:32px;
  height:32px;
  padding:1px;
  background-color: rgba(0,0,0,0.1);
  border-radius: 6px;
}



.map-view-info-window .image-wrapper img{
  flex-shrink: 0;
  flex-grow: 0;
  width:100%;
  height:100%;
  object-fit: contain;
}


.map-view-info-window .contents{
  flex-shrink: 1;
  flex-grow: 1;
  font-size:9pt;
}


.map-view-info-window .contents h3 {
  font-size:10pt;
  font-weight: bold;
}




@media screen and (max-width: 480px) {

  /* サイズ位置固定 */
  .map-view {
    top:auto !important;
    left:20px !important;
    right:20px !important;
    bottom:0px !important;
    /*height:30vh !important;*/
    width:auto !important;
    border-bottom:none;
    
  
  }

  
  .map-view .map-view-header .map-view-close-btn{
    width:2.5rem;
  }
  .map-view .map-view-header > .map-view-title{
    font-size:1rem;
    line-height: 2.5rem;
  }
  /* リサイズ不可に */
  .map-view .size-handle {
    display: none;
  }

  /* 移動不可に */
  .map-view .map-view-header .map-view-title-handle{
    display: none;
  }
  /* 移動不可に */
  .map-view .map-view-header .map-view-title-resize-handle{
    display: block;
    cursor:ns-resize;
  }
}


.map-view-marker,
.map-view-marker * {
  box-sizing: border-box;
  cursor:pointer;
}

.map-view-marker {
  position: absolute;
  width:64px;
  height:64px;
  overflow: hidden;
  margin-left:-32px;
  margin-top:-32px;
  border-radius: 50%;
  border:2px solid rgba(9, 179, 150, 0.7);
  background-color: rgba(255, 255, 255, 0.5);
  visibility: hidden;
  opacity: 0;
  transform:scale(0.2);
  transition: visibility 0.3s ease-in-out, 
    opacity 0.3s ease-in-out, 
    border 0.3s ease-in-out, 
    transform 0.3s ease-in-out;

}

.map-view-marker.icon {
  width: auto;
  height:auto;
  margin-left:auto;
  margin-top:auto;
  border:none;
  transform:scale(0.7);
  background-color: transparent;
  border-radius: 0;
  transform-origin: center bottom;

}
.map-view-marker.visible {
  visibility: visible;
  opacity: 0.9;
  transform:scale(0.30);
}
.map-view-marker.icon.visible {
  transform:scale(1);
  opacity: 1;
}


.map-view-marker.visible.active {
  transform:scale(1);
  opacity: 1;
  border:2px solid rgba(9, 179, 150, 1);
}


.map-view-marker img{
  object-fit: cover;
  width:100%;
  height:100%;
  opacity: 0.8;
}


.map-view-marker.active img{
  opacity: 1;
}

.map-view-marker.icon img{
  object-fit: cover;
  width:100%;
  height:100%;
  opacity: 1;
}