*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff}
.viewport{
  width:100%;height:100%;
  display:grid;place-items:center;
  background:#fff;
}
.stage{
  position:relative;
  width:min(100vw,150vh);
  aspect-ratio:3/2;
  overflow:hidden;
  background:#fff;
}
.background,.title{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.background{z-index:1}
.logo{
  position:absolute;
  z-index:2;
  left:3.5%;
  top:2.4%;
  width:27.5%;
  height:auto;
  display:block;
}
.title{
  z-index:3;
  opacity:0;
  animation:titleFade 1.8s ease 0.7s forwards;
  will-change:opacity;
}
@keyframes titleFade{
  from{opacity:0}
  to{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .title{animation:titleFade .01s linear .15s forwards}
}

/* 2ページと同一のフッターラベル */
.footer-label{
  position:absolute;
  top:93.0%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-family:"Yu Gothic","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:clamp(14px,1.72vw,27px);
  font-weight:500;
  text-align:center;
  white-space:nowrap;
  letter-spacing:.02em;
  z-index:10;
}
.footer-1{left:13.3%}
.footer-2{left:38.2%}
.footer-3{left:63.1%}
.footer-4{left:87.8%}