@charset "utf-8";
/*基本設定*/
/*ON BOTTOMON*/
/* .content.animate_delighters {
    transition: all .3s ease-out;
    transform: translateX(-100%);
    opacity: 0;
 } */

/*ON MIDDLE*/
/* .content.animate_delighters.started {
    transform: none;
    opacity: 1;
 } */

/*ON TOP*/
/* .content.animate_delighters.started.ended {
    border: solid red 10px;
 } */

/*--設定方法--*/
/*
 https://github.com/Q42/delighters
<script type="text/javascript" src="animate_delighters.js">
<div class="contents" animate_delighters="start:0.7;end:0.3;">
要素がブラウザのビューポートの高さの70％を上回ると、.startedが適用され、
要素の下部が30％を過ぎると、.endedが追加。

１）アニメさせたい要素のタグに「animate_delighters」を記載※classではない。
　　(※animate_delighters="start:0.7;end:0.3;"　クラス追加エリアを設定できる
　　　 初期設定はどちらも75%=0.75。Remember: 0 = top, 1 = bottom）
２）記載したタグに、
　1)自動的にすぐクラス「.delighte」が追加
　2)ブラウザ画面の上部から70%に入るとクラス「.started」が追加
　3)ブラウザ画面の上部から30%に入るとクラス「.ended」が追加
３）各クラスへのアニメーションCSSを設定することにより、
　　画面位置におけるアニメーションを行うことができる
　a)画面上部位置(上部から30%以内)：クラス状態「contents.delighte.started.ended」
　b)画面中央位置(上部30%～70％)：クラス状態「contents.delighte.started」
　c)画面下部位置(上部から70%以上)：クラス状態「contents.delighte」
４）アニメーション設定の注意点
　〇透過（フェード表示について）
　　a)画面上部位置(上部から30%)とc)画面上部位置(上部から70%)をopcity:0、
　　b)画面中央位置(上部30%～70％)をopcity:1に設定すると、
　　自動的に、中央位置に入るとフェードイン、外れるとフェードアウトになる
　〇anmation 動作について(例transform: translate)
　　a)画面上部位置(上部から30%以内)に
　　　　transform: translateY(-20%);　下部部へ20%動く
    c)画面下部位置(上部から70%以上)に
　　　　transform: translateY(20%);　上部へ20%動く
　　を設定すると、
　　通常の下スクロールによる表示エリア位置では設定通り動くが
　　逆の上スクロールによる表示エリアだと逆の動きになる。
　　（表示としてはIN OUTの動作になり違和感がない）
　〇keyframes設置し、animation-nameで設定した場合、
　　上記の反転動作は行われない。
 */



/*************************************************
スクロール対応アニメーションリスト
---In系---
fade_In_Left
fade_In_Up
fade_In_Up--sp
fade_In_Up--pc

---InOut系---
fade_InOut
fade_InOut_DownUp
fade_InOut_Left
fade_InOut_Right
tada_InOut
grow_InOut
filpX_InOut

---AniEndless---
swing_Endless

---List系---
list_filpX_InOut
list_filpX_In
list_flipY_InOut
list_pulse_InOut
list_bounce_InOut
list_fade_InOut
list_fade_Up
List_delay(起動差設定)



**************************************************/
/*SP限定*/
/*******
*right_In_icon_sp*
*******/
.right_In_icon_sp.animate_delighters {
    opacity: 0;
}

/*ON MIDDLE*/
.right_In_icon_sp.animate_delighters.started {
    -webkit-animation-name: right_In_sp;
    animation-name: right_In_sp;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0.8;
}

/*ON TOP*/
.right_In_icon_sp.animate_delighters.started.ended {
    opacity: 1;
}

@media only screen and (min-width : 769px) {

}

/*スライド tada表示設定*/
@-webkit-keyframes right_In_sp {
    0% {
        -webkit-transform: translateX(100%);
    }

    80% {
        -webkit-transform: translateX(-10%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@keyframes right_In_sp {
    0% {
        -webkit-transform: translateX(100%);
    }

    80% {
        -webkit-transform: translateX(-10%);
    }

    100% {
        -webkit-transform: translateX(0);
    }
}

@media only screen and (min-width : 769px) {
    @-webkit-keyframes right_In_sp {
        0% {
            -webkit-transform:none;
        }
    
        80% {
            -webkit-transform:none;
        }
    
        100% {
            -webkit-transform:none;
        }
    }
    
    @keyframes right_In_sp {
        0% {
            -webkit-transform:none;
        }
    
        80% {
            -webkit-transform:none;
        }
    
        100% {
            -webkit-transform:none;
        }
    }
}


/*PC限定*/
/*******
*list_filpX_In_Pc*
*******/
@media only screen and (min-width : 769px) {
    .list_filpX_In_Pc.animate_delighters li {
        opacity: 0;
    }

    /*ON MIDDLE*/
    .list_filpX_In_Pc.animate_delighters.started li {
        opacity: 0;
        -webkit-backface-visibility: visible !important;
        -webkit-animation-name: flipX_In_Ani;
        backface-visibility: visible !important;
        animation-name: flipX_In_Ani;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    /*ON TOP*/
    .list_filpX_In_Pc.animate_delighters.started.ended li {
        opacity: 1;
    }
}




/*----------------In系---------------------------*/

/*******
* fade_In_Left *
*******/
/*ON BOTTOM*/
.fade_In_Left.animate_delighters {
    transition-property: all;
    transform: translateX(-20%);
    opacity: 0;
}

/*ON MIDDLE*/
.fade_In_Left.animate_delighters.started {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateX(0);
    animation-fill-mode: forwards;
    opacity: 1;
}

/*ON TOP*/
.fade_In_Left.animate_delighters.started.ended {
    opacity: 1;
}

/*******
* fade_In_Up *
*******/
/*ON BOTTOM*/
.fade_In_Up.animate_delighters {
    opacity: 0;
    transform: translateY(20%);
}

/*ON MIDDLE*/
.fade_In_Up.animate_delighters.started {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateY(0);
    animation-fill-mode: forwards;
    opacity: 1;
}

/*ON TOP*/
.fade_In_Up.animate_delighters.started.ended {
    opacity: 1;
}

/*******
* fade_In_Up--sp *
*******/
/*ON BOTTOM*/
.fade_In_Up--sp.animate_delighters {
    opacity: 0;
    transform: translateY(20%);
}

/*ON MIDDLE*/
.fade_In_Up--sp.animate_delighters.started {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateY(0);
    animation-fill-mode: forwards;
    opacity: 1;
}

/*ON TOP*/
.fade_In_Up--sp.animate_delighters.started.ended {
    opacity: 1;
}

/*ON BOTTOM*/
@media only screen and (min-width : 769px) {

    .fade_In_Up_sp.animate_delighters,
    .fade_In_Up_sp.animate_delighters.started,
    .fade_In_Up_sp.animate_delighters.started.ended {
        opacity: 1;
        transform: none;
    }
}

/*******
* fade_In_Up--pc *
*******/
/*ON BOTTOM*/
@media only screen and (min-width : 769px) {
    .fade_In_Up--pc.animate_delighters {
        opacity: 0;
        transform: translateY(20%);
    }

    /*ON MIDDLE*/
    .fade_In_Up--pc.animate_delighters.started {
        transition-property: all;
        transition-duration: 0.6s;
        transition-timing-function: ease-out;
        transition-delay: 0s;
        transform: translateY(0);
        animation-fill-mode: forwards;
        opacity: 1;
    }

    /*ON TOP*/
    .fade_In_Up--pc.animate_delighters.started.ended {
        opacity: 1;
    }
}




/*----------------InOut系---------------------------*/

/********
* fade_InOut *
*********/
/*ON BOTTOM*/
.fade_InOut.animate_delighters {
    opacity: 1;
    -webkit-animation-name: fade_Out_Ani;
    animation-name: fade_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.fade_InOut.animate_delighters.started {
    opacity: 0;
    -webkit-animation-name: fade_In_Ani;
    animation-name: fade_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.fade_InOut.animate_delighters.started.ended {
    opacity: 1;
    -webkit-animation-name: fade_Out_Ani;
    animation-name: fade_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes fade_In_Ani {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

@keyframes fade_In_Ani {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

@-webkit-keyframes fade_Out_Ani {
    0% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade_Out_Ani {
    0% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 0;
    }
}



/*******
* fade_InOut_DownUp *
*******/
/*ON BOTTOM*/
.fade_InOut_DownUp.animate_delighters {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateY(20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}

/*ON MIDDLE*/
.fade_InOut_DownUp.animate_delighters.started {
    transform: none;
    opacity: 1;
}

/*ON TOP*/
.fade_InOut_DownUp.animate_delighters.started.ended {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateY(-20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}

/*******
* fadeInOut_left *
*******/
/*ON BOTTOM*/
.fade_InOut_left.animate_delighters {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateX(-20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}

/*ON MIDDLE*/
.fade_InOut_left.animate_delighters.started {
    transform: none;
    opacity: 1;
}

/*ON TOP*/
.fade_InOut_left.animate_delighters.started.ended {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateX(20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}

/*******
* fadeInOut_Right *
*******/
/*ON BOTTOM*/
.fade_InOut_Right.animate_delighters {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateX(20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}

/*ON MIDDLE*/
.fade_InOut_Right.animate_delighters.started {
    transform: none;
    opacity: 1;
}

/*ON TOP*/
.fade_InOut_Right.animate_delighters.started.ended {
    transition-property: all;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    transition-delay: 0s;
    transform: translateX(-20%);
    animation-fill-mode: forwards;
    /*アニメ動作後のスタイルを維持*/
    opacity: 0;
}


/*******
* tada_In *
*******/
/*ON BOTTOM*/
.tada_In.animate_delighters {
    opacity: 0;
}

/*ON MIDDLE*/
.tada_In.animate_delighters.started {
    opacity: 0;
    -webkit-animation-name: tada_In_Ani;
    animation-name: tada_In_Ani;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.tada_In.animate_delighters.started.ended {
    opacity: 1;
}



/*******
* tada_InOut *
*******/
/*ON BOTTOM*/
.tada_InOut.animate_delighters {
    -webkit-animation-name: tadaOut_Ani;
    animation-name: tadaOut_Ani;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

/*ON MIDDLE*/
.tada_InOut.animate_delighters.started {
    -webkit-animation-name: tada_In_Ani;
    animation-name: tada_In_Ani;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 1;
}

/*ON TOP*/
.tada_InOut.animate_delighters.started.ended {
    -webkit-animation-name: tada_Out_Ani;
    animation-name: tada_Out_Ani;
    animation-duration: 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

/*スライド tada表示設定*/
@-webkit-keyframes tada_In_Ani {
    0% {
        -webkit-transform: scale(1);
    }

    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}

@keyframes tada_In_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 0;
    }

    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@-webkit-keyframes tada_Out_Ani {
    0% {
        -webkit-transform: scale(1);
    }

    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        opacity: 0;
    }
}

@keyframes tada_Out_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    10%,
    20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%,
    50%,
    70%,
    90% {
        -webkit-transform: scale(1.1) rotate(3deg);
    }

    40%,
    60%,
    80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}

/*******
*grow_InOut*
*******/
/*ON BOTTOM*/
.grow_InOut.animate_delighters {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-animation-name: grow_Out_Ani;
    animation-name: grow_Out_Ani;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 1;
}

/*ON MIDDLE*/
.grow_InOut.animate_delighters.started {
    -webkit-animation-name: grow_In_Ani;
    animation-name: grow_In_Ani;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0;
}

/*ON TOP*/
.grow_InOut.animate_delighters.started.ended {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-animation-name: grow_Out_Ani;
    animation-name: grow_Out_Ani;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 1;
}

@-webkit-keyframes grow_In_Ani {
    0% {
        -webkit-transform: scale(0.2);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.2);

    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes grow_In_Ani {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);

    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes grow_Out_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.2);

    }

    100% {
        -webkit-transform: scale(0.2);
        opacity: 0;
    }
}

@keyframes grow_Out_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.2);

    }

    100% {
        -webkit-transform: scale(0.2);
        opacity: 0;
    }
}


/*******
*filpX_InOut*
*******/
/*新人情報テキスト部分*/
/*ON BOTTOM*/
.filpX_InOut.animate_delighters {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.filpX_InOut.animate_delighters.started {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_In_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.filpX_InOut.animate_delighters.started.ended {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes flipX_In_Ani {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipX_In_Ani {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@-webkit-keyframes flipX_Out_Ani {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipX_Out_Ani {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    40% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }

    70% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}


/*----------------Endless系---------------------------*/
/********
* swing_Endless *
*********/
.swing_Endless {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing_Ani;
    animation-name: swing_Ani;
    animation-iteration-count: infinite;
}

@-webkit-keyframes swing_Ani {

    20%,
    40%,
    60%,
    80%,
    100% {
        -webkit-transform-origin: top center;
    }

    20% {
        -webkit-transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

@keyframes swing_Ani {
    20% {
        transform: rotate(15deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    60% {
        transform: rotate(5deg);
    }

    80% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/*----------------List系---------------------------*/
/*******
*list_filpX_In*
*******/
/*リストフリップ表示設定*/
/*ON BOTTOM*/
.list_filpX_In.animate_delighters li {
    opacity: 0;
}

/*ON MIDDLE*/
.list_filpX_In.animate_delighters.started li {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_In_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_filpX_In.animate_delighters.started.ended li {
    opacity: 1;
}


/*******
*list_filpX_InOut*
*******/
/*リストフリップ表示設定*/
/*ON BOTTOM*/
.list_filpX_InOut.animate_delighters li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.list_filpX_InOut.animate_delighters.started li {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_In_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_filpX_InOut.animate_delighters.started.ended li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipX_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipX_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/*******
* list_flipY_InOut*
*******/
/*ON BOTTOM*/
.list_flipY_InOut.animate_delighters li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipY_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipY_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.list_flipY_InOut.animate_delighters.started li {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipY_In_Ani;
    backface-visibility: visible !important;
    animation-name: flipY_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_flipY_InOut.animate_delighters.started.ended li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: flipY_Out_Ani;
    backface-visibility: visible !important;
    animation-name: flipY_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes flipY_In_Ani {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
        opacity: 0;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
        opacity: 1;
    }
}

@keyframes flipY_In_Ani {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out;
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in;
    }

    80% {
        transform: perspective(400px) rotateY(360deg) scale(.95);
        animation-timing-function: ease-in;
    }

    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in;
        opacity: 1;
    }
}

@-webkit-keyframes flipY_Out_Ani {
    0% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
        opacity: 1;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
        opacity: 0;
    }
}

@keyframes flipY_Out_Ani {
    0% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in;
        opacity: 1;
    }

    40% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out;
        opacity: 0;
    }
}



/********
*list_pulse_InOut *
*********/
/*ON BOTTOM*/
.list_pulse_InOut.animate_delighters li {
    opacity: 1;
    -webkit-animation-name: pulse_Out_Ani;
    animation-name: pulse_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.list_pulse_InOut.animate_delighters.started li {
    opacity: 0;
    -webkit-animation-name: pulse_In_Ani;
    animation-name: pulse_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_pulse_InOut.animate_delighters.started.ended li {
    opacity: 1;
    -webkit-animation-name: pulse_Out_Ani;
    animation-name: pulse_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes pulse_In_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse_In_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes pulse_Out_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}

@keyframes pulse_Out_Ani {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 0;
    }
}


/***********
* list_bounce_InOut *
************/
/*ON BOTTOM*/
.list_bounce_InOut.animate_delighters li {
    opacity: 1;
    -webkit-animation-name: bounce_Out_Ani;
    animation-name: bounce_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.list_bounce_InOut.animate_delighters.started li {
    opacity: 0;
    -webkit-animation-name: bounce_In_Ani;
    animation-name: bounce_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_bounce_InOut.animate_delighters.started.ended li {
    opacity: 1;
    -webkit-animation-name: bounce_Out_Ani;
    animation-name: bounce_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bounce_In_Ani {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes bounce_In_Ani {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    70% {
        opacity: 1;
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes bounce_Out_Ani {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}

@keyframes bounce_Out_Ani {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(.9);
    }

    70% {
        opacity: 1;
        -webkit-transform: scale(1.05);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
}



/*******
*list_fade_InOut*
*******/
/*リストフリップ表示設定*/
/*ON BOTTOM*/
.list_fade_InOut.animate_delighters li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: fade_Out_Ani;
    backface-visibility: visible !important;
    animation-name: fade_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON MIDDLE*/
.list_fade_InOut.animate_delighters.started li {
    opacity: 0;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: fade_In_Ani;
    backface-visibility: visible !important;
    animation-name: fade_In_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_fade_InOut.animate_delighters.started.ended li {
    opacity: 1;
    -webkit-backface-visibility: visible !important;
    -webkit-animation-name: fade_Out_Ani;
    backface-visibility: visible !important;
    animation-name: fade_Out_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


/*******
*list_fade_In_Up*
*******/
/*リストフリップ表示設定*/
/*ON BOTTOM*/
.list_fade_In_Up.animate_delighters li {
    opacity: 0;
}

/*ON MIDDLE*/
.list_fade_In_Up.animate_delighters.started li {
    opacity: 0;
    -webkit-animation-name: fade_In_Up_Ani;
    animation-name: fade_In_Up_Ani;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*ON TOP*/
.list_fade_In_Up.animate_delighters.started.ended li {
    opacity: 1;
}


@-webkit-keyframes fade_In_Up_Ani {
    0% {
        opacity: 0;
        /* -webkit-transform: scale(.3); */
        -webkit-transform: translateY(20%);
    }

    100% {
        opacity: 1;
        /* -webkit-transform: scale(1); */
        -webkit-transform: translateY(0);
    }
}

@keyframes fade_In_Up_Ani {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*******
* list_delay *
*******/
.list_delay.animate_delighters li:nth-child(1) {
    animation-delay: 0.15s;
}

.list_delay.animate_delighters li:nth-child(2) {
    animation-delay: 0.3s;
}

.list_delay.animate_delighters li:nth-child(3) {
    animation-delay: 0.45s;
}

.list_delay.animate_delighters li:nth-child(4) {
    animation-delay: 0.6s;
}

.list_delay.animate_delighters li:nth-child(5) {
    animation-delay: 0.75s;
}

.list_delay.animate_delighters li:nth-child(6) {
    animation-delay: 0.9s;
}

.list_delay.animate_delighters li:nth-child(7) {
    animation-delay: 1.05s;
}

.list_delay.animate_delighters li:nth-child(8) {
    animation-delay: 1.2s;
}

.list_delay.animate_delighters li:nth-child(9) {
    animation-delay: 1.35s;
}

.list_delay.animate_delighters li:nth-child(10) {
    animation-delay: 1.5s;
}

.list_delay.animate_delighters li:nth-child(11) {
    animation-delay: 1.65s;
}

.list_delay.animate_delighters li:nth-child(12) {
    animation-delay: 1.8s;
}

.list_delay.animate_delighters li:nth-child(13) {
    animation-delay: 1.95s;
}

.list_delay.animate_delighters li:nth-child(14) {
    animation-delay: 2.1s;
}

.list_delay.animate_delighters li:nth-child(15) {
    animation-delay: 2.25s;
}

.list_delay.animate_delighters li:nth-child(16) {
    animation-delay: 2.3s;
}

.list_delay.animate_delighters li:nth-child(17) {
    animation-delay: 2.45s;
}

.list_delay.animate_delighters li:nth-child(18) {
    animation-delay: 2.6s;
}

.list_delay.animate_delighters li:nth-child(19) {
    animation-delay: 2.75s;
}

.list_delay.animate_delighters li:nth-child(20) {
    animation-delay: 2.9s;
}