.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:left;
  text-align:center;

  /* 白っぽい背景画像の上に金のミストを重ねる */
  background-image: url("../images/first-view-bg2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:hidden;
  isolation:isolate; /* ブレンドをhero内に閉じ込める */
}

/* 金のグラデーション */
.hero::before {
    content:"";
    position:absolute;
    inset:0;
    mix-blend-mode:soft-light;
    background: linear-gradient(270deg, #5a4723, #ffaa00, #ffffff);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 8s ease infinite;
    -moz-animation: AnimationName 8s ease infinite;
    animation: AnimationName 8s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}