/* アニメーション用のCSS */
.animal-mascot-img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* ぽよんアニメーション */
@keyframes poyon {
    0% {
        transform: scale(1) translateY(0);
    }
    20% {
        transform: scale(1.1, 0.9) translateY(0);
    }
    40% {
        transform: scale(0.95, 1.05) translateY(-20px);
    }
    60% {
        transform: scale(1.05, 0.95) translateY(0);
    }
    80% {
        transform: scale(0.98, 1.02) translateY(-5px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* ランダムアニメーション用クラス */
.poyon-animation {
    animation: poyon 0.8s ease-out;
}

/* クリック時のアニメーション */
@keyframes bounce-rotate {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-10deg);
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    75% {
        transform: scale(1.1) rotate(-5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.bounce-rotate-animation {
    animation: bounce-rotate 0.6s ease-out;
}

/* ホバー効果 */
.mascot-wrapper:hover .animal-mascot-img,
.img-nm:hover .animal-mascot-img {
    transform: scale(1.05) translateY(-5px);
}

/* アクティブ状態の装飾 */
.mascot-wrapper.active::after,
.img-nm.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #38B446, #40b74e);
    border-radius: 2px;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* 会話ボックスのアニメーション */
.conversation-box {
    position: relative;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.conversation-box::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50px;
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    transform: rotate(45deg);
}

/* モバイル用の調整 */
@media (max-width: 768px) {
    .animal-mascot-img {
        max-width: 80px;
    }
    
    .poyon-animation {
        animation-duration: 0.6s;
    }
}

/* キラキラエフェクト */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.sparkle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #FFD700 0%, transparent 70%);
    pointer-events: none;
    animation: sparkle 1s ease-out;
}

/* 追加のインタラクティブ効果 */
.mascot-wrapper::before,
.img-nm::before {
    content: '♪';
    position: absolute;
    top: -20px;
    right: -10px;
    font-size: 20px;
    color: #38B446;
    opacity: 0;
    transition: all 0.3s ease;
}

/* .mascot-wrapper.active::before,
.img-nm.active::before {
    opacity: 1;
    transform: translateY(-10px) rotate(15deg);
} */
/* 会話ボックスのアニメーション（修正版） */
.conversation-box {
    position: relative;
    background: #f0f0f0;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 30px; /* 三角形のスペースを確保 */
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 吹き出しの三角形 */
.conversation-box::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50px; /* デフォルト位置 */
    width: 20px;
    height: 20px;
    background: #f0f0f0;
    transform: rotate(45deg);
    transition: left 0.3s ease; /* スムーズな移動 */
}

/* データ属性を使った位置調整 */
.conversation-box[data-arrow-position="0"]::after { left: 15%; }
.conversation-box[data-arrow-position="1"]::after { left: 30%; }
.conversation-box[data-arrow-position="2"]::after { left: 50%; }
.conversation-box[data-arrow-position="3"]::after { left: 70%; }
.conversation-box[data-arrow-position="4"]::after { left: 85%; }

/* モバイル用の調整 */
@media (max-width: 768px) {
    .conversation-box[data-arrow-position="0"]::after { left: 20%; }
    .conversation-box[data-arrow-position="1"]::after { left: 50%; }
    .conversation-box[data-arrow-position="2"]::after { left: 80%; }
    /* モバイルの2段目 */
    .conversation-box[data-arrow-position="3"]::after { left: 33%; }
    .conversation-box[data-arrow-position="4"]::after { left: 66%; }
}
/* CSSカスタムプロパティを使った動的位置調整 */
.conversation-box.advanced::after {
    left: var(--arrow-position, 50px);
}

/* 初期状態で最初のキャラクターを指すように設定 */
.pc-view .conversation-box {
    --arrow-position: 15%;
}

.mobile-view .conversation-box:first-of-type {
    --arrow-position: 20%;
}

/* スムーズなアニメーション */
.conversation-box::after {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}