/* 特典② - 選手からのメッセージ＆サイン入り動画 */
#bonusMovie {
  padding: 5rem 1.6rem;
  position: relative;
  overflow: hidden;
  background: #1f1f1f;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

/* 背景要素 */
.bonus-movie__bg-ellipse-top {
  position: absolute;
  left: 0;
  top: -8.824rem;
  width: 37.5rem;
  height: 16.5rem;
  background-image: url("../img/bonus-movie/bg-ellipse-top.png");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.bonus-movie__bg-ellipse-center {
  position: absolute;
  left: -22.2rem;
  top: 18.876rem;
  width: 81.9rem;
  height: 48.4rem;
  background-image: url("../img/bonus-movie/bg-ellipse-center.png");
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.bonus-movie__bg-graphic-1 {
  position: absolute;
  left: 9.323rem;
  top: 41.425rem;
  width: 33.3015rem;
  height: 16.4095rem;
  background-image: url("../img/bonus-movie/bg-graphic-1.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  pointer-events: none;
}

.bonus-movie__bg-graphic-2 {
  position: absolute;
  left: -5.124rem;
  top: 38.732rem;
  width: 33.3007rem;
  height: 16.4095rem;
  background-image: url("../img/bonus-movie/bg-graphic-2.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transform: rotate(180deg) scaleY(-1);
  pointer-events: none;
}

.bonus-movie__bg-graphic-3 {
  position: absolute;
  left: -2.1rem;
  top: 14.075rem;
  width: 27.4261rem;
  height: 20.9778rem;
  background-image: url("../img/bonus-movie/bg-graphic-3.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transform: rotate(180deg);
  pointer-events: none;
}

.bonus-movie__bg-graphic-4 {
  position: absolute;
  left: 9.775rem;
  top: -0.024rem;
  width: 27.4253rem;
  height: 14.2888rem;
  background-image: url("../img/bonus-movie/bg-graphic-4.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transform: scaleY(-1);
  pointer-events: none;
}

/* 光のエフェクト */
.bonus-movie__flares {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.bonus-movie__flare {
  position: absolute;
  mix-blend-mode: color-dodge;
}

.bonus-movie__flare--1 {
  left: -1.5rem;
  top: 15.876rem;
  width: 10.2rem;
  height: 10.2rem;
}

.bonus-movie__flare--2 {
  left: 22.4rem;
  top: 12.576rem;
  width: 2.8rem;
  height: 2.8rem;
}

.bonus-movie__flare--3 {
  left: 29.2rem;
  top: 13.276rem;
  width: 6.5rem;
  height: 6.6rem;
}

.bonus-movie__flare--4 {
  left: 19.2rem;
  top: 7.626rem;
  width: 2.35rem;
  height: 2.35rem;
}

.bonus-movie__flare--5 {
  left: 18.725rem;
  top: 19.976rem;
  width: 1.9rem;
  height: 1.9rem;
}

.bonus-movie__flare--6 {
  left: 5.65rem;
  top: 19.376rem;
  width: 2.2rem;
  height: 2.2rem;
}

.bonus-movie__flare--7 {
  left: 6.3rem;
  top: 9.876rem;
  width: 2.2rem;
  height: 2.2rem;
}

/* ヘッダー */
.bonus-movie__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bonus-movie__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.4rem;
}

.bonus-movie__badge-main {
  background: #fe0000;
  padding: 0.4rem 1.6rem 0.6rem;
  border-radius: 0.4rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: white;
  text-align: center;
  letter-spacing: -0.084rem;
  margin-bottom: -0.4rem;
}

.bonus-movie__badge-arrow {
  width: 2.1rem;
  height: 1.4rem;
  transform: rotate(0deg);
  margin-bottom: -0.4rem;
}

.bonus-movie__label {
  border: 1px solid white;
  border-radius: 1.6rem;
  padding: 0.4rem 0.6rem 0.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  text-align: center;
  letter-spacing: -0.11rem;
}

.bonus-movie__title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: white;
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.24rem;
  margin: 0;
  background: linear-gradient(90deg, #ffeecc 0%, #ad9515 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* コンテンツ */
.bonus-movie__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.bonus-movie__description {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: white;
  line-height: 1.7;
  text-align: left;
  margin: 0;
  width: 34.3rem;
  max-width: 100%;
}

/* カード */
.bonus-movie__cards {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  position: relative;
  width: 24.3rem;
  height: 12.4713rem;
}

.bonus-movie__card {
  width: 24.3rem;
  height: auto;
}

/* ステップ */
.bonus-movie__steps {
  display: flex;
  align-items: center;
}

.bonus-movie__step-image {
  width: 9rem;
  height: 18.1854rem;
  object-fit: contain;
}

.bonus-movie__step-arrow {
  width: 2.7713rem;
  height: 3rem;
  transform: rotate(0deg);
}

/* ボタン */
.bonus-movie__buttons {
  display: flex;
  align-items: center;
  gap: 2.1rem;
}

.bonus-movie__button {
  width: 16rem;
  background: linear-gradient(90deg, #898100 0%, #beb301 49%, #898100 100%);
  border: none;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: white;
  text-align: center;
  line-height: 1.6rem;
  letter-spacing: -0.084rem;
  cursor: pointer;
  transition: opacity 0.3s;
  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
}

.bonus-movie__button:hover {
  opacity: 0.9;
}

.bonus-movie__button--jefunited {
  background: linear-gradient(90deg, #007d55 0%, #009b69 50%, #007d55 100%);
  font-size: 1.1rem;
  letter-spacing: -0.077rem;
}