.hero{
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: grid;
  place-items: center;
  padding: 48px 16px;
}

.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  /*max-width: 820px;*/
}


.hero-bg{
  position: absolute;
  inset: -40%;
  z-index: 0;
  transform: rotate(-8deg);
  background-image: url("img.jpg");
  background-repeat: repeat-x;
  background-size: auto 800px; /* 高さだけ合わせる */
  opacity: 1.0;
  filter: blur(1px);
  animation: bgMove 60s linear infinite;
  will-change: background-position;
}

/* 文字が読みやすくなる“ベール” */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.68) 0%,
    rgba(255,255,255,0.50) 40%,
    rgba(255,255,255,0.35) 100%);
}

/* 横方向に動かす（斜めはhero-bgの回転で表現） */
@keyframes bgMove{
  from{ background-position: 0 0; }
  to{ background-position: 2400px 0; }
}

/* 動きが苦手な人向け：止める */
@media (prefers-reduced-motion: reduce){
  .hero-bg{ animation: none; }
}