.animated-marker {
    position: relative;
    display: inline-block;
}

.animated-marker::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 40%;
    background: linear-gradient(transparent 0%, yellow 0%);
    z-index: -1;
    transition: width 0.6s ease;
    opacity: 0.6;
}

.animated-marker.active::before {
    width: 100%;
}

/* 色のバリエーション */
.animated-marker[data-color="pink"]::before {
    background: linear-gradient(transparent 0%, #ff6b9d 0%);
}

.animated-marker[data-color="blue"]::before {
    background: linear-gradient(transparent 0%, #4ecdc4 0%);
}

.animated-marker[data-color="green"]::before {
    background: linear-gradient(transparent 0%, #95e77e 0%);
}