*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Helvetica Neue",Arial,"Hiragino Sans",Meiryo,sans-serif;
  background:#fdfdfc;
  overflow:hidden;
}

.vision-scene{
  position:fixed;inset:0;
  display:flex;align-items:center;
  background:#fdfdfc;
}

/* PC layout: base 1440px, min 1280px. Side margin scales 48px (at 1280) -> 80px (at 1440),
   then content pins at 1280px so it never grows further on large screens (1536-1920px). */
.vision-container{
  width:calc(100% - 96px);
  max-width:1280px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:clamp(64px,14%,180px);
}

/* left text column 360-440px, right visual area 620-760px (percentages resolve
   against .vision-container, which is itself capped at 1280px, so both stay
   in range from the 1280px min width up through large 1536-1920px screens) */
.vision-text{
  flex:0 0 clamp(360px,31%,440px);
  min-width:0;
}

.vision-visual{
  flex:0 0 clamp(620px,55%,760px);
}

.vision-title{
  font-family:"Barlow Condensed",sans-serif;
  font-weight:700;
  font-size:82px;
  letter-spacing:.18em;
  color:#132a55;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease, transform .9s ease;
}

.vision-rule{
  width:260px;max-width:60%;height:2px;
  background:#132a55;
  margin:1.2rem 0 2rem;
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s ease .15s, transform .9s ease .15s;
}

.vision-body p{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:400;
  color:#28417c;
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.8;
  margin-bottom:1.4rem;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease, transform .8s ease;
}
.vision-body p:nth-child(1){transition-delay:.4s}
.vision-body p:nth-child(2){transition-delay:.55s}
.vision-body p:nth-child(3){transition-delay:.7s}

.vision-tagline{
  font-family:"IBM Plex Sans",sans-serif;
  font-weight:600;
  color:#0d0d0d;
  font-size:26px;
  line-height:1.6;
  margin-top:1.2rem;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s ease .9s, transform .8s ease .9s;
}

.vision-scene.revealed .vision-title,
.vision-scene.revealed .vision-rule,
.vision-scene.revealed .vision-body p,
.vision-scene.revealed .vision-tagline{
  opacity:1;
  transform:translateY(0);
}

.scroll-hint{
  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:20;display:flex;flex-direction:column;align-items:center;gap:.25rem;
  color:#132a55;
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  animation:bounce 2.2s ease-in-out infinite;opacity:0;transition:opacity .6s ease;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}