スポットライト・コーチマーク

<div class="d11-04-05-ui">
          <div class="d11-04-05-block a">投稿一覧</div>
          <div class="d11-04-05-block target" id="d11-04-05-target">公開ボタン</div>
          <div class="d11-04-05-block b">メディア</div>
        </div>
        <div class="d11-04-05-mask"></div>
        <div class="d11-04-05-coach">
          <p>ここを押すと記事が公開されます。まずはお試しで下書き保存もできます。</p>
          <button class="d11-04-05-ok">わかった</button>
        </div>
        <button class="d11-04-05-replay">再生</button>

.d11-04-05{background:#1c2233}
        .d11-04-05 .d11-04-05-ui{width:100%;max-width:240px;display:flex;flex-direction:column;gap:10px;position:relative;z-index:1}
        .d11-04-05 .d11-04-05-block{padding:14px;border-radius:8px;background:#2c3448;color:#aeb6cc;font-size:13px;text-align:center}
        .d11-04-05 .d11-04-05-block.target{position:relative;z-index:4;background:#fff;color:#1c2233;font-weight:700;box-shadow:0 0 0 4px rgba(255,255,255,.15),0 0 30px 6px rgba(120,160,255,.6);transition:box-shadow .4s}
        .d11-04-05 .d11-04-05-mask{position:absolute;inset:0;background:rgba(10,14,26,.72);opacity:0;visibility:hidden;transition:opacity .4s;z-index:2}
        .d11-04-05 .d11-04-05-mask.show{opacity:1;visibility:visible}
        .d11-04-05 .d11-04-05-coach{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);width:200px;background:#fff;border-radius:10px;padding:14px;z-index:5;opacity:0;visibility:hidden;transition:opacity .4s,transform .4s;box-shadow:0 12px 30px rgba(0,0,0,.4)}
        .d11-04-05 .d11-04-05-coach.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
        .d11-04-05 .d11-04-05-coach p{font-size:12px;line-height:1.6;color:#2b3350;margin-bottom:10px}
        .d11-04-05 .d11-04-05-ok{background:#5b7cfa;color:#fff;border:none;border-radius:6px;padding:7px 16px;font-size:12px;cursor:pointer}
        .d11-04-05 .d11-04-05-target-off{box-shadow:none!important}
        .d11-04-05 .d11-04-05-replay{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.12);color:#fff;border:none;border-radius:16px;padding:5px 14px;font-size:11px;cursor:pointer;z-index:6}

(function(){
        var root=document.querySelector('#item-11-04-05 .d11-04-05');
        if(!root)return;
        var mask=root.querySelector('.d11-04-05-mask'),coach=root.querySelector('.d11-04-05-coach'),target=root.querySelector('#d11-04-05-target');
        function on(){mask.classList.add('show');coach.classList.add('show');target.classList.remove('d11-04-05-target-off')}
        function off(){mask.classList.remove('show');coach.classList.remove('show');target.classList.add('d11-04-05-target-off')}
        root.querySelector('.d11-04-05-ok').addEventListener('click',off);
        root.querySelector('.d11-04-05-replay').addEventListener('click',on);
        setTimeout(on,400);
      })();