@charset "utf-8";

#whiteday2026 .img_anchor {
  position: relative;
  display: inline-block;
}

#whiteday2026 .anchor_pointer {
  animation: fadeOut 1s ease-in-out 4s;
  animation-fill-mode: forwards;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#whiteday2026 .anchor_pointer img {
  transform: none;
  animation: none;
  width: 40vw;
  height: 40vw;
  max-width: 200px;
  max-height: 200px;
}

#whiteday2026 .img_anchor::before {
  content: '気になる商品を \A CLICK';
  line-height: 2;
  letter-spacing: 2px;
  pointer-events: none;
  white-space: pre;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  color: #fff;
  font-size: 1.2rem;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  z-index: 100;
  animation: fadeOut 1s ease-in-out 4s;
  animation-fill-mode: forwards;
}

@media screen and (max-width: 768px) {
  #whiteday2026 .img_anchor::before {
    content: '気になる商品を \A TAP';
  }
}

#whiteday2026 .img_anchor.none::before {
  display: none;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#whiteday2026 .img_anchor::after {
  content: '';
  display: block;
  width: 40vw;
  height: 40vw;
  max-width: 400px;
  max-height: 400px;
  border-radius: 1000px;
  border: 2px solid #fff;
  transform: translate(-50%, -50%) scale(0);
  z-index: 1000;
  position: absolute;
  top: 50%;
  left: 50%;
  animation: tapOut 1s linear 4 1s;
  animation-fill-mode: forwards;
  pointer-events: none;
}

@keyframes tapOut {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.3;
  }

  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
}

#whiteday2026 .img_anchor a {
  /*background-color: rgba(255,122,124,0.53);*/
  position: absolute;
}

#whiteday2026 .img_anchor a::before {
  content: '';
  width: 180px;
  height: 180px;
  display: block;
  background: center / contain no-repeat;
  position: absolute;
  pointer-events: none;
  animation: shine 2s ease-in-out alternate infinite;
  opacity: 0;
}

@media screen and (max-width: 768px) {
  #whiteday2026 .img_anchor a::before {
    width: 20vw;
    height: 20vw;
  }
}

@keyframes shine {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#whiteday2026 #godiva_img_anchor {
  width: 14%;
  height: 23%;
  top: 20%;
  left: 13%;
  transform: skew(336deg, 7deg);
}

#whiteday2026 #godiva_atsumori_img_anchor {
  width: 23%;
  height: 26%;
  top: 21%;
  left: 28%;
  transform: skew(336deg, 7deg);
}

#whiteday2026 #morozoff_img_anchor {
  width: 36%;
  height: 21%;
  top: 38%;
  left: 51%;
}

#whiteday2026 #marys_img_anchor {
  width: 37%;
  height: 26%;
  top: 51%;
  left: 16%;
  transform: skew(18deg, 2deg);
}

#whiteday2026 #bonoirkyoto_img_anchor {
  width: 28%;
  height: 33%;
  bottom: 4%;
  right: 12%;
}

#whiteday2026 #theobroma_img_anchor {
  width: 29%;
  height: 34%;
  top: 2%;
  right: 12%;
}

#whiteday2026 #lamaisonshirokane_img_anchor {
  width: 44%;
  height: 16%;
  bottom: 4%;
  left: 12%;
}

#whiteday2026 #rihgaroyalhotel_img_anchor {
  width: 46%;
  height: 17%;
  top: 2%;
  left: 12%;
}

#whiteday2026 #godiva_img_anchor::before {
  background-image: url('shine01.png');
  top: -20%;
  left: -57%;
  animation-delay: 0s;
  transform: skew(-336deg, -7deg);
}

#whiteday2026 #godiva_atsumori_img_anchor::before {
  background-image: url('shine01.png');
  bottom: -20%;
  right: -27%;
  animation-delay: 0s;
  transform: skew(-336deg, -7deg);
}

#whiteday2026 #morozoff_img_anchor::before {
  background-image: url('shine03.png');
  top: -20%;
  right: -28%;
  animation-delay: 0.8s;
}

#whiteday2026 #marys_img_anchor::before {
  background-image: url('shine02.png');
  top: -20%;
  left: -18%;
  animation-delay: 1.3s;
  transform: skew(-18deg, -2deg);
}

#whiteday2026 #bonoirkyoto_img_anchor::before {
  background-image: url('shine02.png');
  top: -20%;
  right: -18%;
  animation-delay: 2.8s;
}

#whiteday2026 #theobroma_img_anchor::before {
  background-image: url('shine03.png');
  top: -16%;
  right: -31%;
  animation-delay: 1.9s;
}

#whiteday2026 #lamaisonshirokane_img_anchor::before {
  background-image: url('shine01.png');
  bottom: -50%;
  right: -18%;
  animation-delay: 0.9s;
}

#whiteday2026 #rihgaroyalhotel_img_anchor::before {
  background-image: url('shine01.png');
  top: -37%;
  left: -13%;
  animation-delay: 2.3s;
}