/* =========================================================
   10th Anniversary の帯（Figma: 10th帯）
   2本の帯を逆向きに流し続ける。文字列は JS で必要な数だけ複製する。
   ========================================================= */
.band {
  position: absolute;
  top: calc(6877 * var(--u));
  left: calc((100% - 100vw) / 2 - 120 * var(--u));
  z-index: 5;
  width: calc(100vw + 240 * var(--u));
  height: calc(379 * var(--u));
  pointer-events: none;
}

.band__ribbon {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(104 * var(--u));
  overflow: hidden;
  display: flex;
  align-items: center;
}

.band__ribbon--back {
  top: calc(170 * var(--u));
  rotate: -3.2deg;
  background: var(--color-gray-band);
  color: var(--color-blue);
}

.band__ribbon--front {
  top: calc(118 * var(--u));
  rotate: -5.6deg;
  background: var(--color-blue);
  color: var(--color-white);
}

.band__track {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
  will-change: transform;
}

.band__item {
  display: inline-flex;
  align-items: center;
  gap: calc(28 * var(--u));
  padding-right: calc(28 * var(--u));
  font-family: var(--font-en-geo);
  font-weight: 500;
  font-size: calc(58 * var(--u));
  letter-spacing: 0.02em;
  line-height: 1;
}

.band__item::after {
  content: "";
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  background: var(--color-sky);
  /* ✦ の形 */
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}