ウェルカムモーダル

<div class="d11-04-02-page">
          <div class="d11-04-02-row"></div>
          <div class="d11-04-02-row short"></div>
          <div class="d11-04-02-row"></div>
        </div>
        <div class="d11-04-02-overlay">
          <div class="d11-04-02-modal">
            <button class="d11-04-02-close" aria-label="閉じる">×</button>
            <div class="d11-04-02-icon">👋</div>
            <h4>ようこそ！</h4>
            <p>会員サイトへのご登録ありがとうございます。まずはプロフィールを設定しましょう。</p>
            <button class="d11-04-02-cta">はじめる</button>
          </div>
        </div>
        <button class="d11-04-02-reopen">もう一度見る</button>

.d11-04-02{background:#eef1f8}
        .d11-04-02 .d11-04-02-page{width:100%;max-width:280px;display:flex;flex-direction:column;gap:10px}
        .d11-04-02 .d11-04-02-row{height:16px;border-radius:6px;background:#dfe4f0}
        .d11-04-02 .d11-04-02-row.short{width:60%}
        .d11-04-02 .d11-04-02-overlay{position:absolute;inset:0;background:rgba(30,38,66,.45);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s}
        .d11-04-02 .d11-04-02-overlay.show{opacity:1;visibility:visible}
        .d11-04-02 .d11-04-02-modal{width:210px;background:#fff;border-radius:14px;padding:22px 18px;text-align:center;box-shadow:0 16px 40px rgba(20,28,60,.3);transform:scale(.85);opacity:0;transition:transform .35s cubic-bezier(.4,1.4,.5,1),opacity .35s;position:relative}
        .d11-04-02 .d11-04-02-overlay.show .d11-04-02-modal{transform:scale(1);opacity:1}
        .d11-04-02 .d11-04-02-close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:20px;color:#9aa2b5;cursor:pointer;line-height:1}
        .d11-04-02 .d11-04-02-icon{font-size:34px;margin-bottom:6px}
        .d11-04-02 .d11-04-02-modal h4{font-size:16px;color:#2b3350;margin-bottom:6px}
        .d11-04-02 .d11-04-02-modal p{font-size:12px;line-height:1.6;color:#5a6274;margin-bottom:14px}
        .d11-04-02 .d11-04-02-cta{background:#5b7cfa;color:#fff;border:none;border-radius:8px;padding:9px 22px;font-size:13px;cursor:pointer}
        .d11-04-02 .d11-04-02-reopen{position:absolute;bottom:14px;right:14px;background:#fff;border:1px solid #cdd4e5;border-radius:20px;padding:6px 14px;font-size:11px;color:#5b7cfa;cursor:pointer}

(function(){
        var root=document.querySelector('#item-11-04-02 .d11-04-02');
        if(!root)return;
        var ov=root.querySelector('.d11-04-02-overlay'),reopen=root.querySelector('.d11-04-02-reopen');
        function open(){ov.classList.add('show')}
        function close(){ov.classList.remove('show')}
        root.querySelector('.d11-04-02-close').addEventListener('click',close);
        root.querySelector('.d11-04-02-cta').addEventListener('click',close);
        ov.addEventListener('click',function(e){if(e.target===ov)close()});
        reopen.addEventListener('click',open);
        setTimeout(open,400);
      })();