/* アフィリエイトボタン */
.button_back {
  padding: 3em .5em;
  margin: 2em 0;
  background: #f2f2f2;
  border-radius: 5px;
}
.movie_affi_button {
  text-align: center;
}
.button_back a {
  background: #df0000;
  padding: 1em 2em;
  color: white;
  border-radius: 5px;
  display: block;
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: auto;
  border-bottom: 5px;
  border-color: #9a0000;
  border-bottom-width: 5px;
  border-bottom-style: solid;
  transition: all ease 0.4s;
}
.button_back a:hover {
  color: white;
  box-shadow: 0px 14px 18px -5px #383838;
}


/* ───────────── 跳ねる – hop 改 (fanza-hop) ───────────── */
/* 好みに合わせて --hop-amplitude と --hop-duration を変えるだけで調整可能 */

.movie_affi_button__link {
  --hop-amplitude: 3px;   /* 跳ね幅 */
  --hop-duration : 3.5s;  /* 1 サイクルの時間 */
}

@keyframes fanza-hop {
  0%         { transform: translateY(calc(var(--hop-amplitude) * -1)); }
  4%   { transform: translateY(var(--hop-amplitude)); }
  6%   { transform: translateY(calc(var(--hop-amplitude) * -1)); }
  8%   { transform: translateY(var(--hop-amplitude)); }
  12%  { transform: translateY(calc(var(--hop-amplitude) * -1)); }
  14%  { transform: translateY(var(--hop-amplitude)); }
  16%,
  100%       { transform: translateY(0); }
}

.movie_affi_button__link.bounce {
  display: inline-block;
  animation: fanza-hop var(--hop-duration) ease-out both infinite;
}

/* ─────────── 波紋 – anim-glow = hamon ─────────── */
.movie_affi_button__link.glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;           /* 波紋がはみ出ないように */
}

/* 波紋用擬似要素 */
.movie_affi_button__link.glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: currentColor;         /* ボタン文字色が波紋色になる */
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  animation: hamon 4.5s ease-in-out 1s infinite;
  pointer-events: none;
  box-sizing: border-box;
}

/* 波紋アニメーション */
@keyframes hamon {
  0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0;   }
  15%  { transform: translate(-50%, -50%) scale(0);  opacity: 0.2; }
  50%  { transform: translate(-50%, -50%) scale(30); opacity: 0;   }
  80%  { transform: translate(-50%, -50%) scale(30); opacity: 0;   }
  100% { transform: translate(-50%, -50%) scale(0);  opacity: 0;   }
}