/* ハートアイコンのスタイル */
.heart {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    transform: rotate(-45deg);
    transition: 0.3s ease;
    cursor: pointer;
    margin-right: 8px;
}

/* ハートの丸部分 */
.heart::before,
.heart::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #ccc;
    border-radius: 50%;
}

.heart::before {
    top: -6px;
    left: 0;
}

.heart::after {
    left: 6px;
    top: 0;
}

/* いいね時のアニメーション */
.heart.islike {
    background-color: #ff5252;
    transform: rotate(-45deg) scale(1.2);
}

.heart.islike::before,
.heart.islike::after {
    background-color: #ff5252;
}

/* カウント表示のスタイル */
.counter {
    font-size: 1em;  /* 親要素に合わせたフォントサイズ */
    font-weight: bold;
    color: red;
    white-space: nowrap;  /* カウンターが折り返さないように */
}



 /* パーティクルエフェクト */
    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      background-color: #ff85a2;
      border-radius: 50%;
      opacity: 0;
      animation: particle-animation 0.6s ease forwards;
    }
    @keyframes particle-animation {
      0% { opacity: 1; transform: scale(1) translate(0, 0); }
      100% { opacity: 0; transform: scale(0.8) translate(var(--x), var(--y)); }
    }