自動クロスフェードスライドショーヒーロー

<div class="d01-01-08-hero">
          <div class="d01-01-08-slide d01-01-08-s1"></div>
          <div class="d01-01-08-slide d01-01-08-s2"></div>
          <div class="d01-01-08-slide d01-01-08-s3"></div>
          <div class="d01-01-08-inner">
            <h1>景色が変わる、体験が変わる。</h1>
            <p>3つの背景が自動で静かに切り替わります。</p>
          </div>
        </div>

.prev.d01-01-08{padding:0;display:block;min-height:320px}
        .d01-01-08-hero{position:relative;height:320px;overflow:hidden;display:flex;align-items:center;justify-content:center}
        .d01-01-08-slide{position:absolute;inset:0;opacity:0;animation:d01-01-08-fade 15s infinite}
        .d01-01-08-s1{background:linear-gradient(135deg,#2c5f8a 0%,#7fb2d9 60%,#d7ecf7 100%);animation-delay:0s}
        .d01-01-08-s2{background:linear-gradient(135deg,#1d5c4a 0%,#57a578 60%,#d3edd6 100%);animation-delay:5s}
        .d01-01-08-s3{background:linear-gradient(135deg,#8a3b2c 0%,#d98a5f 60%,#f7e3d0 100%);animation-delay:10s}
        @keyframes d01-01-08-fade{
          0%{opacity:0}
          6%{opacity:1}
          33%{opacity:1}
          42%{opacity:0}
          100%{opacity:0}
        }
        .d01-01-08-inner{position:relative;text-align:center;padding:24px}
        .d01-01-08-hero h1{color:#fff;font-size:23px;font-weight:700;letter-spacing:.08em;margin:0 0 12px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
        .d01-01-08-hero p{color:rgba(255,255,255,.85);font-size:12.5px;line-height:1.9;margin:0;text-shadow:0 1px 8px rgba(0,0,0,.25)}