/* English-only additions for the TOP page. Loaded after the shared top.css. */

/* hero: the English main visual (mv-en.jpg) has the headline/subtitle baked into
   the image, so display it at its natural ratio and visually hide the HTML title
   (kept in the DOM for SEO / screen readers). */
.p-hero--en .p-hero-ttl {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.p-hero--en .p-hero-img {
  height: auto;
}
.p-hero--en .p-hero-img .c-pic {
  height: auto;
}
.p-hero--en .p-hero-img img {
  width: 100%;
  height: auto;
  object-fit: initial;
}

/* sec02: subtitle shown between the title and the description inside each box.
   The description itself reuses the existing .p-sec02-boxIn .c-txt rule. */
.p-sec02-boxIn .p-sec02-sub {
  margin-block: 0 1em;
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, .96rem + .18vw, 1.125rem);
  font-family: "Exo 2", "Noto Sans SC", sans-serif;
  font-weight: 600;
  letter-spacing: .03em;
}

/* sec02: the box centers its content; with title + subtitle + description + button
   the column gets taller, so relax the fixed aspect ratio on the English site to
   avoid clipping. */
@media screen and (min-width: 768px) {
  .p-sec02 .p-sec02-box {
    aspect-ratio: auto;
    min-height: calc(640 / 720 * 50vw);
  }
}