@keyframes gentle_blink{
    0%, 100%{
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}
.gentle_blink{
    animation: gentle_blink 1.2s linear infinite;
}
.gentle_blink:hover{
    animation: none;
}

.shiny-target{
    position: relative !important;
}
@keyframes shiny{
    0%{
        transform: scale(0) rotate(25deg);
        opacity: 0;
    }

    1%{
        transform: scale(1) rotate(25deg);
        opacity: 1;
    }

    100%{
        transform: scale(50) rotate(25deg);
        opacity: 0;
    }
}
.shiny{
    /*
    position: relative;
    */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    /*
    width: 100%;
    height: 40px;
    */
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    /*
    background-color: #384878;
    */
    overflow: hidden;

    pointer-events: none;
}
.shiny:after{
    content: '';
    position: absolute;
    top: -10vw;
    left: -10vw;
    width: 5vw;
    height: 5vw;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

.spinner:before{
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20vw;
    width: 20vw;
    margin-top: -10vw;
    margin-left: -10vw;
    border-radius: 50%;
    border: 1rem solid rgba(211, 211, 211, 0.6);
    border-top-color: rgba(255, 127, 80, 0.7);
    animation: Spinner 0.5s linear infinite;
}
@keyframes Spinner{
    to {
        transform: rotate(360deg);
    }
}

body .blocking{
    display: block;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1001;
}