@charset "UTF-8";

/* ------------------------　↓ 追記はここから　↓ ------------------------- */
.pop_wrap {
  position: relative;
}

.pop_wrap {
  --full-btn-width: 87.4%;
  --half-btn-width: 45.1%;
  --top-second-btn: 57.9%;
  --top-third-btn: 77%;
  --left-first-btn: 51%;
  --left-second-btn: 54.6%;
}

.pop_btn {
  position: absolute;
}

.btn_01,
.btn_02,
.btn_03 {
  width: var(--full-btn-width);
  left: var(--left-first-btn);
  transform: translateX(-51%);
}

.btn_01 {
  top: 38.8%;
}

.btn_02 {
  top: var(--top-second-btn);
}

.btn_03 {
  top: var(--top-third-btn);
}


.kira {
  overflow: hidden;
}

.kira::before {
  /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
  /*キラッと光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  transform: skewX(-25deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

.pop_btn:hover {
  opacity: 1;
  filter: saturate(1.5);
}