.data_grid .big,
.data_grid .num,
.data_grid .age_num{
    /* transition: 1s; */
    display: inline-block;
    transition: 1s;
}

/*フェードイン時のアニメ*/
.data_grid.is-show .big,
.data_grid.is-show .num,
.data_grid.is-show .age_num{
    opacity:1;
    transform: scale(1);
  animation: kurukuru 1.4s ease-out;
}

/*ホバー時のアニメ*/
.data_card:hover .big,
.data_card:hover .num,
.data_card:hover .age_num{
    transition: .5s;
    color: #dd2b2b !important;
    position: relative;
}
.data_card .big:before,
.data_card .age_num:before{
    content: '';
    position: absolute;
    top: 5px;
    right: -10px;

    width: 10px;
    height: 10px;

    background: radial-gradient(
        circle,
        #8BD1CF 65%,
        transparent 100%
    );

    clip-path: polygon(
        50% 0%,
        68% 28%,
        100% 50%,
        68% 72%,
        50% 100%,
        32% 72%,
        0% 50%,
        32% 28%
    );

    filter: drop-shadow(0 0 6px rgba(106,99,255,0.6));
    animation: sparkle 3s infinite ease-out;
    animation-delay: 0s;
}

.data_card .big:after,
.data_card .age_num:after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: -10px;

    width: 10px;
    height: 10px;

    background: radial-gradient(
        circle,
        #8BD1CF 65%,
        transparent 100%
    );

    clip-path: polygon(
        50% 0%,
        68% 28%,
        100% 50%,
        68% 72%,
        50% 100%,
        32% 72%,
        0% 50%,
        32% 28%
    );

    filter: drop-shadow(0 0 6px rgba(106,99,255,0.6));
    animation: sparkle 3s infinite ease-out;
    animation-delay: 1.5s;
}


@keyframes kurukuru {
  0%{
    transform: rotateY(0) translateY(40px);
    opacity: 0;
  }
  100%{
    transform: rotateY(360deg) translateY(0);
    opacity: 1;
  }
}

@keyframes sparkle {
    0% {
        transform: scale(0.25);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% {
        transform: scale(1.8);
        opacity: 0;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}