.topModal {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.topModal a:hover {
  opacity: .7;
}
.topModal_bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  z-index: 10;
}
.topModa_wrapper {
  position: absolute;
  top: max(20px, calc((100vh - 418px) /2));
  left: 50%;
  transform: translate(-50%,0);
  max-width: 780px;
  width: calc(100% - 40px);
  z-index: 20;
}
@media only screen and (max-width: 820px) {
  .topModa_wrapper {
    top: max(20px, calc((100vh - 60vw) /2));
  }
}
@media only screen and (max-width: 640px) {
  .topModa_wrapper {
    top: max(20px, calc((100vh - 130vw) /2));
  }
}

.topModal__close {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  line-height: 1;
}
.topModal__close span {
  display: inline-block;
  vertical-align: top;
  background: url(/content/dam/sites/kanebo/www-kanebo-cosmetics-co-jp/img/modal/modal_w_close.png) no-repeat;
  background-size: contain;
  width: 42px;
  height: 42px;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}
.topModal__close span:hover {
  opacity: .7;
}
.topModal__inner {
  position: relative;
  padding-top: 44px;
}
.topModal__img img {
  max-width: 100%;
  vertical-align: bottom
}

@media only screen and (min-width: 641px) {
  .topModal__img img.lg {
      display:block;
  }
  .topModal__img img.sm {
      display:none;
  }
}

@media only screen and (max-width: 640px) {
  .topModal__img img.lg {
      display:none;
  }
  .topModal__img img.sm {
      display:block;
  }
}