フェードクロス遷移

<div class="d08-04-01-stage">
          <div class="d08-04-01-page d08-04-01-a">
            <span class="d08-04-01-tag">Page A</span>
            <strong>トップページ</strong>
            <p>ようこそ</p>
          </div>
          <div class="d08-04-01-page d08-04-01-b">
            <span class="d08-04-01-tag">Page B</span>
            <strong>会社概要</strong>
            <p>私たちについて</p>
          </div>
          <button type="button" class="d08-04-01-btn">次のページへ</button>
        </div>

.prev.d08-04-01{padding:0;}
        .d08-04-01-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;}
        .d08-04-01-page{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;transition:opacity .6s ease;}
        .d08-04-01-a{background:linear-gradient(135deg,#4f46e5,#6366f1);opacity:1;}
        .d08-04-01-b{background:linear-gradient(135deg,#f59e0b,#fb923c);opacity:0;}
        .d08-04-01-stage.is-b .d08-04-01-a{opacity:0;}
        .d08-04-01-stage.is-b .d08-04-01-b{opacity:1;}
        .d08-04-01-tag{font-size:11px;letter-spacing:.1em;opacity:.8;}
        .d08-04-01-page strong{font-size:18px;}
        .d08-04-01-page p{font-size:12px;margin:0;opacity:.85;}
        .d08-04-01-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;border:none;border-radius:999px;padding:6px 16px;font-size:12px;background:#fff;color:#333;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);}

(function(){
          var box=document.currentScript.closest('.item').querySelector('.d08-04-01');
          var stage=box.querySelector('.d08-04-01-stage');
          var btn=box.querySelector('.d08-04-01-btn');
          var on=false;
          btn.addEventListener('click',function(){
            on=!on;
            stage.classList.toggle('is-b',on);
            btn.textContent=on?'前のページへ':'次のページへ';
          });
        })();