.coin{
  display:inline-block;
}

.coin img{
  width:300px;
  animation: medalFlash 4s infinite;
}

/* メダルがキラン */
@keyframes medalFlash{
  0%,80%,100%{
    filter:brightness(1);
  }

  88%{
    filter:brightness(1.2);
  }

  92%{
    filter:brightness(1.28);
  }

  96%{
    filter:brightness(1.1);
  }
}
/* キラキラ① */
.coin::after{
  content:"";
  position:absolute;
  top:-80%;
  right:-36%;

  width:50px;
  height:50px;

  background:#fff;

  clip-path:polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  box-shadow:
    0 0 8px #fff,
    0 0 16px #fff,
    0 0 28px #ffe066,
    0 0 40px #ffd700;

  animation:kirakira 1.6s infinite;

  z-index:9999;
}

/* キラキラ② */
.coin::before{
  content:"";
  position:absolute;
  bottom:30%;
  right:-18%;

  width:50px;
  height:50px;

  background:#fff;

  clip-path:polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );

  box-shadow:
    0 0 8px #fff,
    0 0 16px #fff,
    0 0 28px #ffe066,
    0 0 40px #ffd700;

  animation:kirakira 1.6s infinite;
  animation-delay:0.8s;

  z-index:9999;
}

/* キラキラ */
@keyframes kirakira{
  0%{
    opacity:0;
    transform:scale(0.5);
  }

  50%{
    opacity:1;
    transform:scale(1.2);
  }

  100%{
    opacity:0;
    transform:scale(0.5);
  }
}


@media (max-width: 1808px) {
  .coin::after{
    top:-6%;
    right:-11%;

    width:36px;
    height:36px;
  }
  .coin::before{
    bottom:-4%;
    right:0%;

    width:36px;
    height:36px;
  }
}

@media (max-width: 749px) {
  .coin {
    display: block;
  }

  .coin img {
    z-index: 9997;
  }

  .coin::after{
    top: 86%;
    right: 29%;
    width: 36px;
    height: 36px;

    z-index: 9999;
  }
  .coin::before{
    bottom:3%;
    right:62%;

    width:36px;
    height:36px;

    z-index: 9999;
  }
}