/****************
 *  effect.css  *
 ****************/

.inner {
    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;   /* 要素からはみ出したら非表示 */
}
.inner::before {
    --size: 0;          /* エフェクトのサイズを指定する変数 初期値は「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;
}
.inner:hover::before {
    --size: 100vw;      /* サイズの変更 */
}