@charset "utf-8";
/* ゲスト画像表示用CSS */

/* Vegas-wrapper内にゲスト画像コンテナを配置 */
.guest-images-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* 各ゲスト画像のスタイル */
.guest-image {
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    pointer-events: auto;
}

/* ふわっと表示されるクラス */
.guest-image.show {
    opacity: 1;
}

/* 画像名テキストのスタイル */
.guest-name {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.guest-name.show {
    opacity: 1;
}

/* PC版レイアウト */
@media only screen and (min-width: 769px) {
    /* 左端MC1（person1 - ハッピーマックみしま） - 小さめ */
    .guest-image.person1 {
        bottom: 0;
        left: 1%;
        height: 45%;
        width: auto;
        animation-delay: 0.5s;
		z-index: 2;
    }
    
    .guest-name.person1 {
        bottom: 13%;
        left: 3%;
        font-size: 1rem;
    }
    
    /* さかなクン（person2） - 大きめ */
    .guest-image.person2 {
        bottom: 0;
        left: -4%;
        height: 75%;
        width: auto;
        animation-delay: 1s;
		z-index: 0;
    }
    
    .guest-name.person2 {
        bottom: 72%;
        left: 6%;
        font-size: 1.2rem;
    }
    
    /* ざこしょう（person3） - 大きめ */
    .guest-image.person3 {
        bottom: 0;
        right: -2%;
        height: 68%;
        width: auto;
        animation-delay: 1.5s;
		z-index: -6%;
    }
    
    .guest-name.person3 {
        bottom: 68%;
        left: 75%;
        font-size: 1.2rem;
    }
    
    /* ひとみ（person4） - 大きめ */
    .guest-image.person4 {
        bottom: 0;
        right: 61%;
        height: 64%;
        width: auto;
        animation-delay: 2s;
    }
    
    .guest-name.person4 {
        bottom: 19%;
        left: 18%;
        font-size: 1.2rem;
    }
    
    /* MC2（person5） - 小さめ */
    .guest-image.person5 {
        bottom: 0;
        right: 16%;
        height: 40%;
        width: auto;
        animation-delay: 2.5s;
    }
    
    .guest-name.person5 {
        bottom: 5%;
        right: 0%;
        font-size:1rem;
    }
    
    /* MC3（person6） - 小さめ */
    .guest-image.person6 {
        bottom: 0;
        right: 1%;
        height: 42%;
        width: auto;
        animation-delay: 3s;
    }
    
    .guest-name.person6 {
        bottom: 2%;
        right: -31%;
        font-size: 1rem;
    }
}

/* スマホ版レイアウト */
@media only screen and (max-width: 768px) {
    /* 左端MC1（person1） - 小さめ */
    .guest-image.person1 {
        bottom: 0;
        left: 0%;
        height: 22%;
        width: auto;
        animation-delay: 0.5s;
		z-index: 2;
    }
    
    .guest-name.person1 {
        bottom: 0.5%;
        left: 5%;
        font-size: 0.45rem;
		display: none;
    }
    
    /* さかなクン（person2） - 大きめ */
    .guest-image.person2 {
        bottom: 0;
        left: -2%;
        height: 38%;
        width: auto;
        animation-delay: 1s;
    }
    
    .guest-name.person2 {
        bottom: 0.5%;
        left: 19%;
        font-size: 0.65rem;
		display: none;
    }
    
    /* ざこしょう（person3） - 大きめ */
    .guest-image.person3 {
        bottom: 0;
        right: -7%;
        height: 33%;
        width: auto;
        animation-delay: 1.5s;
    }
    
    .guest-name.person3 {
        bottom: 0.5%;
        left: 34%;
        font-size: 0.65rem;
		display: none;
    }
    
    /* ひとみ（person4） - 大きめ */
    .guest-image.person4 {
        bottom: 0;
        right: 28%;
        height: 33%;
        width: auto;
        animation-delay: 2s;
    }
    
    .guest-name.person4 {
        bottom: 0.5%;
        right: 34%;
        font-size: 0.65rem;
		display: none;
    }
    
    /* MC2（person5） - 小さめ */
    .guest-image.person5 {
        bottom: 0;
        right: 16%;
        height: 21%;
        width: auto;
        animation-delay: 2.5s;
    }
    
    .guest-name.person5 {
        bottom: 0.5%;
        right: 17%;
        font-size: 0.45rem;
		display: none;
    }
    
    /* MC3（person6） - 小さめ */
    .guest-image.person6 {
        bottom: 0;
        right: -4%;
        height: 23%;
        width: auto;
        animation-delay: 3s;
    }
    
    .guest-name.person6 {
        bottom: 0.5%;
        right: 5%;
        font-size: 0.45rem;
		display: none;
    }
}

/* フェードインアニメーション */
@keyframes fadeInGuest {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guest-image.animated {
    animation: fadeInGuest 1.5s ease-out forwards;
}

.guest-name.animated {
    animation: fadeInGuest 1.5s ease-out forwards;
}