/* =========================================================
 * shine：hover で流れる（PC以上のみ／::before）
 * ========================================================= */
@media screen and (min-width: 1181px){
    .shine{
        position: relative;
        overflow: hidden;
        transition: transform .2s ease;
    }

    .shine::before{
        content: '';
        position: absolute;
        top: -100%;
        left: -100%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
            45deg,
            rgba(255,255,255,0) 0%,
            rgba(246,245,241,0.4) 50%,
            rgba(255,255,255,0) 100%
        );
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        pointer-events: none;
        z-index: 210;
    }

    .shine:hover::before{
        animation: shine-move 0.5s forwards;
    }

    @keyframes shine-move{
        0%{
            transform: translateX(-100%) translateY(-100%) rotate(25deg);
        }
        100%{
            transform: translateX(100%) translateY(100%) rotate(25deg);
        }
    }
}