/*** border gradient ***/
.gradientEffect {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--innerBackground);
    border-radius: calc( var(--outerRadius) - var(--borderWidth) );
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;  /* 要素からはみ出したら非表示 */
}
.gradientEffect::before {
    --size: 0;         /* 変数 */
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width:  var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, silver, transparent);
    transform: translate(-50%, -50%);
    transition: width .5s ease, height .5s ease;
    opacity: 0.7;
}
.gradientEffect:hover::before {
    /*  --size: 100vw;      /* 変数の変更 */
}