@charset "utf-8";

.shine span.mask {
    position: relative;
    /*キラッの基点となる位置を定義*/
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.shine span.mask::before {
    position: absolute;
    content: "";
    width: 50%;
    /*キラッの横幅*/
    height: 100%;
    /*キラッの縦幅*/
    top: 0;
    /*.shine span.maskのトップ0を基点*/
    left: -75%;
    /*画面の見えていない左から右へ移動するスタート地点*/
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
    transform: skewX(-25deg);
    /*背景白透過を斜めに*/
}

.shine span.mask:hover::before {
    /*hoverした時の変化*/
    animation: shine 0.7s;
    /*アニメーションの名前と速度を定義*/
}

@keyframes shine {
    100% {
        left: 125%;
        /*画面の見えていない左から右へ移動する終了地点*/
    }
}