:root {
      --font-noto: 'Noto Sans JP', sans-serif;
    }
    body { 
      font-family: var(--font-noto);
    }
    .hero-bg {
      background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><rect fill="%23222"/></svg>');
      background-size: cover;
      background-position: center;
    }
    p{
      color: #9a999b;
    }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }




/* 初期状態：画像は透明で少し下がっている */
.scroll-reveal{
  opacity: 0;
  transition: opacity 2200ms cubic-bezier(0.18, 0.2, 0.08, 1) 260ms;
}
.reveal-grow{
  opacity: 0;
  transition: scale 2200ms cubic-bezier(0.18, 0.2, 0.08, 1) 260ms;
}
/* 表示領域に入った時（JSでis-visibleが付いた時） */
.scroll-reveal.is-visible{
  opacity: 1;
}

.reveal-grow{
  filter: brightness(0.3) contrast(1.1);
  transform: scale(1.1);

}

.scroll-reveal.is-visible .reveal-grow{
  opacity: 1;
  filter: brightness(1) contrast(1);
  transform: scale(1);
}
img{

  transform: scale(1.001) translateZ(0); 
    will-change: transform;
}


a img{
  transition: transform 600ms;
}
a:hover img{
  transform: scale(1.05);
  transition: transform 600ms;
}

opacity-0 transition-all delay-[300ms] duration-[3000ms] ease-out group-[.is-visible]:opacity-100

delay-[200ms]
delay-[360ms]