
.globalMapBox {
  position: relative;
  background: #f8f8f8;
  border-radius: 10px;
  padding: 5.29% 7.57%;
}
.globalMapBox img.worldmap {
  width: 100%;
}
.globalMapBox a {
  position: absolute;
  text-align: center;
  color: var(--site-color-main);
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  text-decoration: none;
  height: 25px;
  border: 1px solid var(--site-color-main);
  border-radius: 4px;
  background: #fff;
  padding: 2px 20px;
  transition: 0.4s all;
  opacity: 0.5;
}
.globalMapBox a.here {
  opacity: 1;
}
.globalMapBox.indexMap a {
  opacity: 1;
}
.globalMapBox a::before {
  content: '';
  display: block;
  width: 31px;
  height: 40px;
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -20px;
  background: url(/assets/images/global-map/icon-pin.svg) no-repeat center center;
  background-size: 31px 40px;
}
.globalMapBox a:hover {
  opacity: 1;
}
.globalMapBox .japan {
  top: 43%;
  left: 78%;
}
.globalMapBox .america {
  top: 42%;
  left: 28%;
}
.globalMapBox .china {
  top: 35%;
  left: 69%;
}
.globalMapBox .asia {
  top: 54%;
  left: 69%;
}
.globalMapBox .europe {
  top: 33%;
  left: 50%;
}



@media screen and (max-width: 1023px) {
  .globalMapBox {
    position: relative;
    background: #f8f8f8;
    border-radius: 10px;
    padding: 20px;
  }
  .globalMapBox a {
    font-size: 14px;
    height: 20px;
  }
  .globalMapBox a::before {
    width: 20px;
    height: 26px;
    left: -12px;
    margin-top: -13px;
    background-size: 20px 26px;
  }
  .globalMapBox .japan {
    top: 43%;
    left: 81%;
  }
  .globalMapBox .america {
    top: 42%;
    left: 26%;
  }
  .globalMapBox .china {
    top: 35%;
    left: 72%;
  }
  .globalMapBox .asia {
    top: 54%;
    left: 71%;
  }
  .globalMapBox .europe {
    top: 33%;
    left: 50%;
  }
}
@media screen and (max-width: 767px) {
  .globalMapBox {
    padding: 20px 0;
    margin-top: 40px;
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
  }
  .globalMapBox .worldmap {
    display: none;
  }
  .globalMapBox a {
    position: static;
    width: calc(100% - 40px);
    align-items: center;
    height: 43px;
    padding: 0 10px;
    margin: 0 20px;
    opacity: 1;
  }
  .globalMapBox a.here {
    background: var(--site-color-main);
    color: #fff;
  }

  .globalMapBox a::before {
    display: none;
  }
}
