@charset "UTF-8";

/* FV: every layout rule is scoped to #top; shared styles and six other blocks are unchanged. */
/* TASK17: inherit the page-wide Noto Sans JP webfont, including every weight. */

#top {
  height: 487px;
  padding: 0;
  color: #081840;
  background: #fff;
}
#top::before { content: none; }
#top .hero-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
#top .hero-grid {
  display: block;
  position: relative;
  width: min(1240px, calc(100% - 112px));
  height: 100%;
  margin-inline: auto;
  z-index: 2;
  pointer-events: none;
}
#top .hero-copy {
  width: 600px;
  max-width: 49%;
  padding-top: 26px;
  pointer-events: auto;
}
#top .hero-intro { margin: 0 0 12px; color: #122e60; font-size: 18px; font-weight: 900; line-height: 1.6; }
#top h1 { font-size: 62px; font-weight: 900; line-height: 1.05; letter-spacing: -.045em; overflow-wrap: normal; }
#top h1 > span { display: block; }
#top .hero-latin { font-size: 1.18em; letter-spacing: -.045em; }
#top .hero-final-line { font-size: 72px; line-height: 1.04; white-space: nowrap; }
#top mark { padding: 0; background: linear-gradient(transparent 73%, #ffda16 73%, #ffda16 96%, transparent 96%); }
#top .hero-description { margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.75; letter-spacing: -.015em; }
#top .cta-group { flex-wrap: nowrap; gap: 12px; margin-top: 23px; width: 600px; max-width: 100%; }
#top .button { min-height: 64px; font-size: 18px; font-weight: 900; border-radius: 999px; padding: 15px 18px; gap: 16px; white-space: nowrap; }
#top .button-primary { flex: 0 0 344px; background: #ffda16; color: #081840; }
#top .button-primary:hover { background: #f6ce00; }
#top .button-primary > span { font-size: 28px; }
#top .button-disabled { flex: 1; gap: 7px; font-size: 16px; border: 2px solid #6599ff; color: #266ce9; background: #fff; opacity: 1; }
#top .hero-download-icon { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

#top .hero-figure {
  position: absolute;
  top: 0;
  right: 0;
  width: 51.3888889%;
  max-width: none;
  aspect-ratio: 740 / 487;
  margin: 0;
  z-index: 1;
}
#top .hero-picture { display: block; }
#top .hero-illustration { width: 100%; height: auto; mask-image: linear-gradient(to right, transparent, #000 52px); }
/* TASK04: position the transparent logo directly on the supplied clean panel. No cover or mask. */
#top .hero-official-logo {
  position: absolute;
  left: 1.486%;
  top: 36.961%;
  width: 24.054%;
  height: auto;
}

@media (min-width: 1101px) and (max-width: 1339px) {
  #top .hero-copy { max-width: 53%; }
  #top h1 { font-size: clamp(46px, 4.17vw, 56px); }
  #top .hero-final-line { font-size: 1.1em; }
  #top .hero-intro { font-size: 16px; }
  #top .hero-description { font-size: 17px; }
  #top .button { font-size: 15px; padding-inline: 15px; gap: 10px; }
  #top .button-primary { flex: 1.4; }
  #top .button-disabled { font-size: 14px; gap: 5px; }
  #top .hero-download-icon { display: none; }
}

@media (min-width: 1441px) {
  #top { height: min(33.82vw, 610px); }
  #top .hero-copy { padding-top: 40px; }
}

@media (max-width: 1100px) {
  #top { height: auto; }
  #top .hero-grid { width: calc(100% - 48px); }
  #top .hero-copy { width: 660px; max-width: 100%; margin-inline: auto; padding-top: 36px; }
  #top h1 { font-size: 52px; }
  #top .hero-final-line { font-size: 1em; line-height: inherit; }
  #top .hero-description { font-size: 18px; }
  #top .hero-figure { position: relative; width: min(740px, 100%); margin: 28px 0 0 auto; }
  #top .hero-illustration { mask-image: none; }
  #top .hero-backdrop { height: 520px; }
}

@media (max-width: 600px) {
  #top .hero-grid { width: calc(100% - 40px); }
  #top .hero-copy { padding-top: 28px; }
  #top .hero-intro { font-size: clamp(12px, 3.3vw, 14px); margin-bottom: 14px; letter-spacing: -.03em; }
  #top h1 { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.18; letter-spacing: -.045em; }
  #top .hero-latin { font-size: 1.1em; }
  #top .hero-description { font-size: 14px; line-height: 1.85; margin-top: 18px; }
  #top .cta-group { flex-direction: column; gap: 10px; margin-top: 22px; width: 100%; }
  #top .button { flex: auto; min-height: 54px; font-size: 15px; padding: 13px 18px; }
  #top .button-disabled { font-size: 14px; min-height: 50px; }
  #top .hero-figure { margin-top: 24px; width: 100%; }
  #top .hero-backdrop { height: 450px; opacity: .65; }
}

@media (max-width: 767px) {
  #top .hero-figure { aspect-ratio: 740 / 405; }
  #top .hero-official-logo { top: 34.568%; }
}

@media (prefers-reduced-motion: reduce) {
  #top * { scroll-behavior: auto; }
}