/* =========================================================
   SP 10th Anniversary の帯（Figma: 00_top_sp > 10th帯）
   回転後の外形を基準に、表は約 748.7 × 143.6、裏は約 747 × 78.7。
   リボンは左右に --band-bleed ずつ長くして、傾けたときに角が画面の内側に入らないようにする
   （左右に同じだけ伸ばすので、傾きの中心とリボンの線の位置は変わらない）。
   ========================================================= */
.hero .band,
.band--footer {
  --band-bleed: calc(20 * var(--u));
}

.hero .band {
  top: calc(var(--collage-bottom) - 91.5 * var(--u));
  left: calc(-253.4 * var(--u));
  width: calc(748.7 * var(--u));
  height: calc(143.6 * var(--u));
}

.hero .band__ribbon {
  width: calc(746 * var(--u));
}

.hero .band__ribbon--front {
  top: calc(33.6 * var(--u));
  left: calc(1.9 * var(--u) - var(--band-bleed));
  width: calc(max(calc(745 * var(--u)), calc(50vw + 440.9 * var(--u))) + 2 * var(--band-bleed));
  height: calc(76.4 * var(--u));
  rotate: -5.2deg;
}

.hero .band__ribbon--back {
  top: calc(60.1 * var(--u));
  left: calc(2.5 * var(--u) - var(--band-bleed));
  width: calc(max(calc(746 * var(--u)), calc(50vw + 440.9 * var(--u))) + 2 * var(--band-bleed));
  height: calc(65.7 * var(--u));
  rotate: -1deg;
}

.hero .band__ribbon--front .band__item {
  gap: calc(10 * var(--u));
  padding-right: calc(10 * var(--u));
  font-size: calc(26.7 * var(--u)); /* Figma で「10th Anniversary」の幅が 209.7 になる大きさ */
}

.hero .band__ribbon--back .band__item {
  gap: calc(10 * var(--u));
  padding-right: calc(10 * var(--u));
  font-size: calc(27 * var(--u)); /* Figma で幅 210.3 */
}

.hero .band__ribbon--front .band__item::after {
  width: calc(14.6 * var(--u));
  height: calc(14.6 * var(--u));
}

.hero .band__ribbon--back .band__item::after {
  width: calc(14.6 * var(--u));
  height: calc(14.6 * var(--u));
}

/* 2本目の帯もヒーローと同じ文字サイズ・間隔・傾きを使う。 */
.band--footer {
  top: calc(25 * var(--u));
  left: calc(-187 * var(--u));
  width: calc(749.1 * var(--u));
  height: calc(143.1 * var(--u));
}

.band--footer .band__ribbon {
  width: calc(746 * var(--u));
}

.band--footer .band__ribbon--front {
  top: calc(33.6 * var(--u));
  left: calc(1.9 * var(--u) - var(--band-bleed));
  width: calc(745 * var(--u) + 2 * var(--band-bleed));
  height: calc(76.4 * var(--u));
  rotate: -5.2deg;
}

.band--footer .band__ribbon--back {
  top: calc(60.1 * var(--u));
  left: calc(2.5 * var(--u) - var(--band-bleed));
  width: calc(746 * var(--u) + 2 * var(--band-bleed));
  height: calc(65.7 * var(--u));
  rotate: -1deg;
}

.band--footer .band__ribbon--front .band__item {
  gap: calc(10 * var(--u));
  padding-right: calc(10 * var(--u));
  font-size: calc(26.7 * var(--u));
}

.band--footer .band__ribbon--back .band__item {
  gap: calc(10 * var(--u));
  padding-right: calc(10 * var(--u));
  font-size: calc(27 * var(--u));
}

.band--footer .band__item::after {
  width: calc(14.6 * var(--u));
  height: calc(14.6 * var(--u));
}