@charset "Shift_JIS";

/* **************************************************

Name: animation.css

Description: Main CSS

Create: 2023.01.26
Update: 2023.01.26

***************************************************** */


/* setting
=========================================================================================== */
@keyframes opacity0to100 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes bottomToTop {
    from {
        top: 30px;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}
@keyframes leftToRightBox {
    from {
        left: -100px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    	}
}
@keyframes rightToLeftBox {
    from {
        right: -100px;
        opacity: 0;
    }
    to {
        right: 0;
        opacity: 1;
    }
}


/* mainVisual
=========================================================================================== */
.mainVisual .mvText {
    opacity: 0;
    animation-name: opacity0to100;
    animation-duration: 1.0s;
    animation-delay: 0.9s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards; 
}


/* block
=========================================================================================== */
.boxLeftKakko,.boxRightKakko,.imgBoxStyle01,.imgBoxStyle02 {
    position: relative;
    opacity: 0;
}
.boxLeftKakko.isShow {
    animation-name: leftToRightBox;
    animation-duration: 1.0s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}
.boxRightKakko.isShow {
    animation-name: rightToLeftBox;
    animation-duration: 1.0s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}
.imgBoxStyle01.isShow {
    animation-name: bottomToTop;
    animation-duration: 1.0s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}
.imgBoxStyle02.isShow {
    animation-name: bottomToTop;
    animation-duration: 1.0s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}


/* recommend
=========================================================================================== */
.recommendArea,.recommendInner,.recommendList > li {
    position: relative;
    opacity: 0;
}
.recommendArea.isShow {
    animation-name: bottomToTop;
    animation-duration: 1.0s;
    animation-delay: 0.3s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}
.recommendArea.isShow .recommendInner {
    animation-name: opacity0to100;
    animation-duration: 1.0s;
    animation-delay: 0.6s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}
.recommendList > li.isShow {
    animation-name: bottomToTop;
    animation-duration: 1.0s;
    animation-delay: 0.6s;
    animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
    animation-fill-mode: forwards;
}