@charset "utf-8";

/*---------------------------------------------------------------------------------
	common / fadein
---------------------------------------------------------------------------------*/

/* -------- その場で ------------------------------------------------------------ */
.fadeIn{
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeInAnime{
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeInTrigger{
    opacity: 0;
}



/* -------- 下から -------------------------------------------------------------- */
.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeUpTrigger{
    opacity: 0;
}



/* -------- 上から -------------------------------------------------------------- */
.fadeDown{
    animation-name:fadeDownAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

@keyframes fadeDownAnime{
    from {
        opacity: 0;
        transform: translateY(-100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeDownTrigger{
    opacity: 0;
}



/* -------- 左から -------------------------------------------------------------- */
.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeLeftTrigger{
    opacity: 0;
}



/* -------- 右から -------------------------------------------------------------- */
.fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
}

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

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeRightTrigger{
    opacity: 0;
}

/* -------- hover画像のzoom -------------------------------------------------------------- */
.hoverImgZoomTrigger a {
    overflow: hidden;
}

.hoverImgZoomTrigger a img {
    height: 100%;
    transition: transform .6s ease;
}
.hoverImgZoomTrigger a:hover img {
    transform: scale(1.2);
}

.hoverCardImg img {
    height: 100%;
    transition: transform .3s ease;
}

.hoverCardImg:hover img {
    transform: scale(1.1);
}

.hoverBanner {
    height: 100%;
    transition: transform .3s ease;
}

.hoverBanner:hover {
    transform: scale(1.1);
}

/* -------- アニメーションスタートの遅延時間を決めるCSS ----------------------------- */
@media screen and (min-width: 768px) {
    .delay-time04{
        animation-delay: 0.4s;
    }
    .delay-time08{
        animation-delay: 0.8s;
    }
    .delay-time12{
        animation-delay: 1.2s;
    }
    .delay-time16{
        animation-delay: 1.6s;
    }
}

/* fixed_btn */
@media screen and (min-width: 768px) {
    @keyframes fixedBtnAnime{
        from {
            right: 0px;
        }

        to {
            right: 154px;
        }
    }
}

/* btn hover */
@keyframes btnCmnAnime{
    from {
        background: #fff;
    }

    to {
        background: #144C84;
    }
}