/* ---------------------------
    キービジュアル
--------------------------- */
/* 小さく弾みながら出現 */
.kv_01 {
    animation: kv_01 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3) forwards;
    opacity: 0;
}

@keyframes kv_01 {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ふわっと出現 */
.kv_02{
    animation-name:kv_02;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
@keyframes kv_02{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.kv_01Trigger,
.kv_02Trigger{
    opacity: 0;
}

/* ---------------------------
    スクロールアニメーション
--------------------------- */
/* 小さく弾みながら出現 */
.bounceInScrl {
    animation: bounceInScrl 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3) forwards;
}

@keyframes bounceInScrl {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ふわっと出現 */
.fadeUpScrl{
    animation-name:fadeUpScrl;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
@keyframes fadeUpScrl{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bounceInScrlTrigger,
.fadeUpScrlTrigger{
    opacity: 0;
}

/* ---------------------------
    通常アニメーション
--------------------------- */
/* 小さく弾みながら出現 */
.bounceIn {
    animation: bounceIn 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3) forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ふわっと出現 */
.fadeUp{
    animation-name:fadeUp;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
@keyframes fadeUp{
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 左からふわっと出現 */
.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
}
    
@keyframes fadeLeftAnime{
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 右からふわっと出現 */
.fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
@keyframes fadeRightAnime{
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bounceInTrigger,
.fadeUpTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/* ---------------------------
    Kv下白背景
--------------------------- */
/* 小さく弾みながら出現 */
.bounceInWh {
    animation: bounceInWh 0.8s cubic-bezier(0.5, 0.05, 0.1, 0.3) forwards;
}

@keyframes bounceInWh {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bounceInWhTrigger{
    opacity: 0;
}

/* ---------------------------
    時間差アニメーション
--------------------------- */
.delay-time02{  
    animation-delay: 0.2s;
}

.delay-time04{  
    animation-delay: 0.4s;
}

.delay-time05{  
    animation-delay: 0.5s;
}

.delay-time06{  
    animation-delay: 0.6s;
}

.delay-time08{  
    animation-delay: 0.8s;
}

.delay-time1{
    animation-delay: 1s;
}

.delay-time12{  
    animation-delay: 1.2s;
}

.delay-time14{
    animation-delay: 1.4s;
}

.delay-time15{
    animation-delay: 1.5s;
}

.delay-time16{
    animation-delay: 1.6s;
}

.delay-time18{
    animation-delay: 1.8s;
}

.delay-time2{
    animation-delay: 2s;
}

.delay-time22{
    animation-delay: 2.2s;
}

.delay-time24{
    animation-delay: 2.4s;
}

.delay-time25{
    animation-delay: 2.5s;
}

.delay-time26{
    animation-delay: 2.6s;
}

.delay-time28{
    animation-delay: 2.8s;
}

.delay-time3{
    animation-delay: 3s;
}

.delay-time32{
    animation-delay: 3.2s;
}

.delay-time34{
    animation-delay: 3.4s;
}

.delay-time36{
    animation-delay: 3.6s;
}

/* ---------------------------
    レスポンシブ
--------------------------- */
@media screen and (max-width:767px){
    .person__pinkwall.delay-time1{
        animation-delay: 0.6s
    }

    .person__book.delay-time06{
        animation-delay: 0.8s;
    }

    .person__golfclub.delay-time12{
        animation-delay: 1s;
    }

    .person__drill.delay-time16{
        animation-delay: 1.2s;
    }

    .person__sitting{
        animation-delay: 1.4s;
    }

    .person__steps{
        animation-delay: 1.6s;
    }

    .person__child.delay-time14{
        animation-delay: 1.8s;
    }

    .person__l-measure{
        animation-delay: 0.2s;
    }

    .person__briefcase{
        animation-delay: 0.4s;
    }

    .person__back--wall{
        animation-delay: 0.6s;
    }

    .goals__list.bounceInScrl{
        animation: none;
    }

    .goals__list.bounceInScrlTrigger{
        opacity: 1;
    }

    .goals__item.delay-time06,
    .goals__item.delay-time08,
    .goals__item.delay-time1,
    .goals__item.delay-time12{
        animation-delay: initial;
    }
}