/* ========================================
   cursor-effect.css
   cursor-effect.js と合わせて使用
======================================== */

/* 火花パーティクル */
.cursor-spark {
    position: fixed;
    width: 5px;
    height: 5px;
    background: #fff176;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    cursor: default;
}

/* ========== カーソルを全要素でターゲットに固定 ========== */
*,
*:hover,
a,
a:hover,
button,
button:hover,
input,
textarea,
select,
label,
[role="button"] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='10' stroke='red' stroke-width='2' fill='none'/%3E%3Ccircle cx='16' cy='16' r='2' fill='red'/%3E%3Cline x1='16' y1='2' x2='16' y2='10' stroke='red' stroke-width='2'/%3E%3Cline x1='16' y1='22' x2='16' y2='30' stroke='red' stroke-width='2'/%3E%3Cline x1='2' y1='16' x2='10' y2='16' stroke='red' stroke-width='2'/%3E%3Cline x1='22' y1='16' x2='30' y2='16' stroke='red' stroke-width='2'/%3E%3C/svg%3E") 16 16, crosshair !important;
}