ミニプレーヤー⇄フルスクリーン展開

<div class="wrap07-06-05">
          <div class="mini07-06-05">
            <div class="art07-06-05"></div>
            <div class="txt07-06-05"><b>ミニプレーヤー</b><small>クリックで展開</small></div>
            <div class="ic07-06-05">▶</div>
          </div>
          <div class="full07-06-05">
            <div class="bigart07-06-05"></div>
            <b>フルスクリーン表示</b>
            <small>タップで戻る</small>
          </div>
        </div>

.d07-06-05{ padding:0; }
        .d07-06-05 .wrap07-06-05{ position:relative; width:100%; height:100%; min-height:260px; overflow:hidden; }
        .d07-06-05 .mini07-06-05{ position:absolute; left:10px; right:10px; bottom:10px; display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; padding:8px 12px; box-shadow:0 4px 16px rgba(0,0,0,.12); cursor:pointer; transition:opacity .3s; z-index:2; }
        .d07-06-05 .art07-06-05{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#f472b6,#818cf8); flex-shrink:0; }
        .d07-06-05 .txt07-06-05{ display:flex; flex-direction:column; font-size:12px; }
        .d07-06-05 .txt07-06-05 small{ color:#999; }
        .d07-06-05 .ic07-06-05{ margin-left:auto; color:#818cf8; }
        .d07-06-05 .full07-06-05{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:linear-gradient(160deg,#312e81,#0f172a); color:#fff; transform:scale(0.15) translateY(40%); opacity:0; transition:transform .4s ease, opacity .3s ease; transform-origin:bottom center; cursor:pointer; }
        .d07-06-05 .full07-06-05 small{ color:#c7d2fe; }
        .d07-06-05 .bigart07-06-05{ width:80px; height:80px; border-radius:14px; background:linear-gradient(135deg,#f472b6,#818cf8); margin-bottom:6px; }
        .d07-06-05 .wrap07-06-05.open07-06-05 .mini07-06-05{ opacity:0; pointer-events:none; }
        .d07-06-05 .wrap07-06-05.open07-06-05 .full07-06-05{ transform:scale(1) translateY(0); opacity:1; }

(function(){
        var root = document.querySelector('.d07-06-05');
        var wrap = root.querySelector('.wrap07-06-05');
        root.querySelector('.mini07-06-05').addEventListener('click', function(){ wrap.classList.add('open07-06-05'); });
        root.querySelector('.full07-06-05').addEventListener('click', function(){ wrap.classList.remove('open07-06-05'); });
      })();