分割スライド遷移

<div class="d08-04-06-stage">
          <div class="d08-04-06-base">
            <strong>特集ページ</strong>
            <p>キャンペーン情報</p>
          </div>
          <div class="d08-04-06-panel d08-04-06-top"><span>トップページ</span></div>
          <div class="d08-04-06-panel d08-04-06-bottom"><span>トップページ</span></div>
          <button type="button" class="d08-04-06-btn">開く</button>
        </div>

.prev.d08-04-06{padding:0;}
        .d08-04-06-stage{position:absolute;inset:0;overflow:hidden;font-family:sans-serif;}
        .d08-04-06-base{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;background:linear-gradient(135deg,#ec4899,#db2777);}
        .d08-04-06-base strong{font-size:18px;}
        .d08-04-06-base p{font-size:12px;margin:0;opacity:.85;}
        .d08-04-06-panel{position:absolute;left:0;width:100%;height:50%;background:linear-gradient(135deg,#4f46e5,#4338ca);transition:transform .6s ease;z-index:2;overflow:hidden;color:#fff;font-size:14px;font-weight:bold;}
        .d08-04-06-top{top:0;}
        .d08-04-06-bottom{bottom:0;}
        .d08-04-06-top span{position:absolute;bottom:6px;left:0;right:0;text-align:center;}
        .d08-04-06-bottom span{position:absolute;top:6px;left:0;right:0;text-align:center;}
        .d08-04-06-stage.is-b .d08-04-06-top{transform:translateY(-100%);}
        .d08-04-06-stage.is-b .d08-04-06-bottom{transform:translateY(100%);}
        .d08-04-06-btn{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;border:none;border-radius:999px;padding:6px 16px;font-size:12px;background:#fff;color:#333;cursor:pointer;}

(function(){
          var box=document.currentScript.closest('.item').querySelector('.d08-04-06');
          var stage=box.querySelector('.d08-04-06-stage');
          var btn=box.querySelector('.d08-04-06-btn');
          var on=false;
          btn.addEventListener('click',function(){
            on=!on;
            stage.classList.toggle('is-b',on);
            btn.textContent=on?'閉じる':'開く';
          });
        })();