/* キャラクター画像コンテナのスタイル */
.character-hover-container {
    position: relative;
    width: 96px; /* 画像のサイズに合わせて調整 */
    height: 96px; /* 画像のサイズに合わせて調整 */
    overflow: hidden; /* はみ出しを隠す */
    border-radius: 9999px; /* 丸くする */
    margin-top: 8px; /* 上の要素との間隔 */
}

/* 通常時の画像 */
.character-static {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s ease-in-out; /* フェードのトランジション */
}

/* ホバー時の画像 */
.character-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* 最初は非表示 */
    transition: opacity 0.3s ease-in-out; /* フェードのトランジション */
}

/* ホバー時の切り替え */
.character-hover-container:hover .character-static {
    opacity: 0;
}

.character-hover-container:hover .character-hover {
    opacity: 1;
}