/* Use the former strip color for the hero copy on a transparent background.
   Preserve the existing entrance animation, spacing and responsive sizes. */
body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja > span {
  color: #243a46;
  background: transparent;
}

body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-en {
  color: #243a46;
  background: transparent;
}

/* Reuse the movie invitation's two hairlines, sized like one inline character.
   Keep the real × available as text and inherit the existing line animation. */
body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja .service-hero__opening-times {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline: .04em;
  color: transparent;
  font-size: inherit;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: -.12em;
}

body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja .service-hero__opening-times::before,
body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja .service-hero__opening-times::after {
  width: .84em;
  background: #243a46;
}

/* Match the current movie hero position on desktop; keep mobile unchanged. */
@media (min-width: 769px) {
  body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy {
    top: calc(50% + clamp(24px, 5svh, 56px) + 100px);
  }
}

/* Inherit the movie page's type size, tracking and strip layout at every
   breakpoint. Only allow wrapping when a narrow screen or larger text needs it. */
@media (max-width: 768px) {
  body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja {
    min-width: 0;
  }

  body.service-website-page.service-movie-normal-scroll .lumen-stack .service-hero__opening-copy-ja span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}