/* Non-interactive HERO note: retain the existing media-tag border, padding and type. */
#body_wrap.hamuya-top-en .hero-bottom .hero-message {
  display: inline-flex; flex-direction: column; line-height: 1.3;
  max-width: 100%; box-sizing: border-box;
}
/* English TOP only: reserve controls before JS exposes the existing play button.
   Same colors, fonts and 44px button height; short status messages can change safely. */
#body_wrap.hamuya-top-en .hero .video-controls {
  position: relative !important; inset: auto !important; z-index: 0 !important;
  width: max-content; max-width: 100%; align-self: flex-start;
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  grid-template-rows: minmax(44px, auto);
}
#body_wrap.hamuya-top-en .hero .video-toggle {
  position: static !important; inset: auto !important;
  grid-column: 1; grid-row: 1; width: 120px; max-width: 100%;
  box-sizing: border-box; white-space: nowrap; font: inherit;
}
#body_wrap.hamuya-top-en .hero .video-controls [role="status"] {
  position: static !important; inset: auto !important;
  grid-column: 2; grid-row: 1; justify-self: start; align-self: center;
  width: fit-content; max-width: min(42em, 100%); min-width: 0;
}
/* Set by the existing header controller; retain the reserved flow space. */
#body_wrap.hamuya-top-en .hero .video-controls.is-under-header { visibility: hidden; pointer-events: none; }
@media (max-width: 760px) {
  #body_wrap.hamuya-top-en .hero .video-controls {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px minmax(calc(3.2em + 8px), auto);
  }
  #body_wrap.hamuya-top-en .hero .video-controls [role="status"] {
    grid-column: 1; grid-row: 2; justify-self: start; align-self: start;
  }
}