/* ？ */
.add {
    transition: 0.3s;
}
/* ？ */

/* 画像アニメーション関係 */
.fadeIn {
    animation-name: fadeInAnim;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.fadeInTrigger {
    opacity: 0;
}

@keyframes fadeInAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeupTrigger {
    opacity: 0;
}


.fadeRight {
    animation-name: fadeRightAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeRightAnime {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeRightTrigger {
    opacity: 0;
}

.fadeLeft {
    animation-name: fadeLeftAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeLeftAnime {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeLeftTrigger {
    opacity: 0;
}

.rotateY {
    animation-name: rotateYAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
    from {
        transform: rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: rotateY(0);
        opacity: 1;
    }
}

.rotateYTrigger {
    opacity: 0;
}

.fadeUpMask {
    animation-name: fadeUpMask;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes fadeUpMask {
    from {
        transform: translate(0%, 100%);
    }
    to {
        transform: translate(0%, 0%);
    }
}

.fadeUpMaskTrigger {
    opacity: 1;
}

.fadeInTrigger {
    opacity: 0;
}

/* 画像アニメーション関係 */



@media screen and (min-width:768px) {
/* PC */


}

@media screen and (max-width:767px) {
/* SP */


}