記事シェアボタン群

<div class="d06-02-04-wrap">
          <p class="d06-02-04-label">この記事をシェア</p>
          <div class="d06-02-04-row">
            <button class="d06-02-04-btn d06-02-04-x" data-n="X" aria-label="Xでシェア"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-6.6L6 22H2.9l7.5-8.6L2 2h6.6l4.5 6zM17.8 20h1.7L8.3 4H6.5z"/></svg></button>
            <button class="d06-02-04-btn d06-02-04-fb" data-n="Facebook" aria-label="Facebookでシェア"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M14 9h3l.5-3H14V4.3c0-.9.3-1.5 1.6-1.5H17V.1C16.5.1 15.4 0 14.3 0 11.9 0 10.3 1.4 10.3 4v2H7.5v3h2.8v9H14z"/></svg></button>
            <button class="d06-02-04-btn d06-02-04-line" data-n="LINE" aria-label="LINEでシェア">L</button>
            <button class="d06-02-04-btn d06-02-04-copy" data-n="copy" aria-label="URLをコピー"><svg viewBox="0 0 24 24" width="16" height="16"><path fill="none" stroke="currentColor" stroke-width="2" d="M9 9h9v11H9zM6 15H3V4h11v3"/></svg></button>
          </div>
          <span class="d06-02-04-toast">コピーしました</span>
        </div>

.prev.d06-02-04{background:#f6f7fb}
        .d06-02-04-wrap{text-align:center;position:relative}
        .d06-02-04-label{margin:0 0 14px;font-size:12px;color:#8a90a4;letter-spacing:.04em}
        .d06-02-04-row{display:flex;gap:12px;justify-content:center}
        .d06-02-04-btn{width:46px;height:46px;border:none;border-radius:50%;background:#fff;color:#5b6178;cursor:pointer;
          display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
          box-shadow:0 3px 10px rgba(40,50,90,.1);transition:transform .22s,background .22s,color .22s}
        .d06-02-04-btn:hover{transform:scale(1.18) translateY(-2px);color:#fff}
        .d06-02-04-x:hover{background:#111}
        .d06-02-04-fb:hover{background:#1877f2}
        .d06-02-04-line:hover{background:#06c755}
        .d06-02-04-copy:hover{background:#6b7280}
        .d06-02-04-toast{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%) translateY(6px);background:#242a3d;color:#fff;
          font-size:11px;padding:5px 12px;border-radius:14px;opacity:0;pointer-events:none;transition:.3s}
        .d06-02-04-toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

(function(){
        var root=document.getElementById('item-06-02-04');if(!root)return;
        var toast=root.querySelector('.d06-02-04-toast'),t;
        root.querySelector('.d06-02-04-copy').addEventListener('click',function(){
          toast.classList.add('is-show');clearTimeout(t);t=setTimeout(function(){toast.classList.remove('is-show');},1600);
        });
      })();