@charset "utf-8";
/* CSS Document */
/* 初期状態で非表示 */
.top_intro_shop,
.top_intro_staff,
.line-anim,
.intro_title,
.intro-textbox {
    opacity: 0; /* 最初は透明 */
}

/* フェードイン上から */
.fade-in-top {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInTop 1s forwards;
}
@keyframes fadeInTop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* フェードイン下から */
.fade-in-bottom {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInBottom 1s forwards;
}
@keyframes fadeInBottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 線アニメーション 左から右 */
.line-anim-animate {
    opacity: 1;
    width: 0;
    animation: lineDraw 1s forwards;
}
@keyframes lineDraw {
    0% {
        width: 0;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 1;
    }
}

/* タイトルフェードイン */
.fade-in-title {
    opacity: 1;
    animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}