サークル展開オーバーレイメニュー

<div class="d03-01-10-stage">
          <div class="d03-01-10-base">
            <span class="d03-01-10-logo">CIRCLE</span>
            <p>右上のボタンをクリック</p>
          </div>
          <div class="d03-01-10-overlay">
            <nav class="d03-01-10-menu">
              <a href="#" onclick="return false">ホーム</a>
              <a href="#" onclick="return false">サービス</a>
              <a href="#" onclick="return false">実績</a>
              <a href="#" onclick="return false">会社概要</a>
              <a href="#" onclick="return false">お問い合わせ</a>
            </nav>
          </div>
          <button class="d03-01-10-btn" type="button" aria-label="メニュー">
            <span></span><span></span><span></span>
          </button>
        </div>

.prev.d03-01-10{padding:0;display:block}
        .d03-01-10-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f8fafc}
        .d03-01-10-base{
          position:absolute;inset:0;display:flex;flex-direction:column;
          align-items:center;justify-content:center;gap:8px;
        }
        .d03-01-10-logo{font-weight:800;letter-spacing:.14em;color:#0f172a;font-size:18px}
        .d03-01-10-base p{margin:0;font-size:12px;color:#94a3b8}
        .d03-01-10-overlay{
          position:absolute;inset:0;z-index:1;
          background:linear-gradient(135deg,#1e3a8a,#6d28d9);
          clip-path:circle(0px at calc(100% - 34px) 34px);
          transition:clip-path .55s cubic-bezier(.4,0,.2,1);
          display:flex;align-items:center;justify-content:center;
        }
        .d03-01-10-stage.open .d03-01-10-overlay{clip-path:circle(150% at calc(100% - 34px) 34px)}
        .d03-01-10-menu{display:flex;flex-direction:column;gap:6px;text-align:center}
        .d03-01-10-menu a{
          color:#fff;text-decoration:none;font-size:15px;font-weight:700;
          padding:5px 12px;opacity:0;transform:translateY(12px);
          transition:opacity .3s ease,transform .3s ease;
        }
        .d03-01-10-stage.open .d03-01-10-menu a{opacity:1;transform:translateY(0)}
        .d03-01-10-stage.open .d03-01-10-menu a:nth-child(1){transition-delay:.2s}
        .d03-01-10-stage.open .d03-01-10-menu a:nth-child(2){transition-delay:.27s}
        .d03-01-10-stage.open .d03-01-10-menu a:nth-child(3){transition-delay:.34s}
        .d03-01-10-stage.open .d03-01-10-menu a:nth-child(4){transition-delay:.41s}
        .d03-01-10-stage.open .d03-01-10-menu a:nth-child(5){transition-delay:.48s}
        .d03-01-10-menu a:hover{color:#bfdbfe}
        .d03-01-10-btn{
          position:absolute;top:14px;right:14px;z-index:2;
          width:40px;height:40px;border:none;border-radius:999px;cursor:pointer;
          background:#2563eb;box-shadow:0 4px 12px rgba(37,99,235,.4);
          display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
          transition:background .3s ease;
        }
        .d03-01-10-stage.open .d03-01-10-btn{background:rgba(255,255,255,.18)}
        .d03-01-10-btn span{
          display:block;width:18px;height:2px;background:#fff;border-radius:2px;
          transition:transform .3s ease,opacity .3s ease;
        }
        .d03-01-10-stage.open .d03-01-10-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
        .d03-01-10-stage.open .d03-01-10-btn span:nth-child(2){opacity:0}
        .d03-01-10-stage.open .d03-01-10-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

(function(){
        var stage=document.querySelector('.d03-01-10-stage');
        if(!stage)return;
        stage.querySelector('.d03-01-10-btn').addEventListener('click',function(){
          stage.classList.toggle('open');
        });
      })();