/* =========================================================
 * shining：常時流れる（影・角丸を潰さない／::after で競合回避）
 * ========================================================= */
.shining{
    position: relative;
}

.shining::after{
    content:'';
    position:absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events:none;
    z-index: 200;

    background: linear-gradient(
        45deg,
        rgba(255,255,255,0) 0%,
        rgba(246,245,241,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    background-size: 220% 220%;
    background-position: -220% -220%;

    opacity: 0; /* 初期白みを防ぐ */
    animation: shining-move 10s linear infinite;
}

@keyframes shining-move{
    /* 待機（透明） */
    0%, 80%{
        opacity: 0;
        background-position: -220% -220%;
    }

    /* ふわっと出現（白みが強いなら下げる） */
    83%{
        opacity: .95;
        background-position: -220% -220%;
    }

    /* 通過中 */
    88%{
        opacity: .75;
        background-position: 220% 220%;
    }

    /* 終点のままフェードアウト（戻りが見えない） */
    100%{
        opacity: 0;
        background-position: 220% 220%;
    }
}

/* 並んだ要素でタイミングをずらす（::after に合わせる） */
.shining:nth-child(5n-1)::after{ animation-delay: 2s; }
.shining:nth-child(5n-2)::after{ animation-delay: 4s; }
.shining:nth-child(5n-3)::after{ animation-delay: 6s; }
.shining:nth-child(5n-4)::after{ animation-delay: 8s; }
.shining:nth-child(5n)::after{ animation-delay: 10s; }


/* =========================================================
 * 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; /* shining(::after=200)より前面にしたい場合 */
    }

    .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);
        }
    }
}