.mf-cursor{
    position:fixed;
    top:0;
    left:0;
    z-index:9999 !important;
    direction:ltr;
    contain:layout style size;
    pointer-events:none;
    transition:opacity .3s,color .4s !important;
}
.mf-cursor:before{
    transform:scale(0.3);
    background:currentColor;
    border-radius:50%;
    transition:transform .25s ease-in-out,opacity .1s !important;

    background-color: var(--black) !important;
    background: currentColor;
    cursor: none !important;
    /* transition:opacity .3s,color .4s !important; */
}
.mf-cursor.-inverse{
    color:#000000;
}
@supports(mix-blend-mode: exclusion){
    .mf-cursor.-exclusion{
        mix-blend-mode:exclusion;
    }
    .mf-cursor.-exclusion:before{
        background:#ffffff;
    }
}
.mf-cursor.-pointer:before{
    /* transform:scale(0.12) !important; */
    /* top: -60px !important;
    left: -60px !important;
    width: 100px !important;
    height: 100px !important; */
    /* -10px多く記載することで中心に */
    background-color: #000000 !important;
    border-color: transparent !important;
    transform:scale(0.5) !important;
}                   
.mf-cursor.-text:before{
    opacity:.85;
    background-color: rgb(255, 255, 255) !important;
    transform:scale(1.5) !important;
}
.mf-cursor.-text.-active:before{
    transform:scale(1.5) !important;
    transition-duration:.2s;
}
.mf-cursor.-icon:before{
    background-color: rgb(255, 255, 255) !important;
    transform:scale(1.5) !important;
}
.mf-cursor.-icon.-active:before{
    background-color: rgb(255, 255, 255) !important;
    /* transform:scale(1.4); */
}
.mf-cursor.-hidden:before{
    transform:scale(0) !important;
}
.mf-cursor-text{
    position:absolute;
    top:-18px;
    left:-18px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:scale(0) rotate(10deg);
    opacity:0;
    color:rgb(0, 0, 0) !important;
    font-weight: normal !important;
    font-size: var(--normal-font-size) !important;
    line-height:20px;
    text-align:center;
    transition:opacity .4s,transform .3s;
}
.mf-cursor.-text .mf-cursor-text,.mf-cursor.-icon .mf-cursor-text{
    opacity:1;
    transform:scale(1);
}
.mf-cursor-media{
    position:absolute;
    width:100px;
    height:100px;
    margin:-50px 0 0 -50px;

    transform: scale(0.3);
}
.mf-cursor-media img,.mf-cursor-media video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    border-radius:50%;
}
@supports(object-fit: cover){
    .mf-cursor-media img,.mf-cursor-media video{
        position:static;
        width:100%;
        height:100%;
        object-fit:cover;
        transform:translateZ(0);
    }
}
.mf-cursor-media-box{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    transform:scale(0) translateZ(0);
    padding:1px;
    opacity:0;
    border-radius:50%;
    transition:transform .35s,opacity .2s .2s;
}
.mf-cursor.-media .mf-cursor-media-box{
    opacity:1;
    transform:scale(0.696);
    transition-duration:.4s,.4s;
    transition-delay:0s,0s;
}

.mf-cursor.-color-white:before {
    background-color: var(--white) !important;
}
.mf-cursor.-color-white-scale:before {
    background-color: var(--white) !important;
    transform: scale(0.7);
}
.mf-cursor.-color-black:before {
    background-color: var(--black) !important;
}
.mf-cursor.-color-black-scale:before {
    background-color: var(--black) !important;
    transform: scale(0.7);
}
/* .mf-cursor.-invert:before {
    background-color: white !important;
    mix-blend-mode: exclusion !important;
    transform: scale(1) !important;
    border-radius: 50%;
} */






@media screen and (max-width: 440px){
.mf-cursor{
    display: none;
}
}