@charset "UTF-8";
/* CSS Document */


/*==========================================================================
 effect
==========================================================================*/

@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes dokudoku{
    0% {
    box-shadow: 0 4px 0 #b41731;
    top: 0px;
}
10% {
    box-shadow: 0 0 0 #b41731;
    top: 4px;
}
20% {
    box-shadow: 0 4px 0 #b41731;
    top: 0px;
}
30% {
    box-shadow: 0 0 0 #b41731;
    top: 4px;
}
40% {
    box-shadow: 0 4px 0 #b41731;
    top: 0px;
}
}

/*マーカーアニメーション*/
.marker-animation.active{
    background-position: -100% .5em;
}
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(248,255,141) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(248,255,141) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(248,255,141) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(248,255,141) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(248,255,141) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}