/* ==========================================
   SoLeiL Chat Motion Library
   01〜12
   1桁クラス / 2桁クラス 両対応
   ========================================== */

/* 01 ジャンプ */
@keyframes soleilMotion01{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
    100%{ transform:translateY(0); }
}

.soleil-motion-01,
.soleil-motion-1{
    animation:soleilMotion01 1.6s ease-in-out forwards;
}

/* 02 スライド */
@keyframes soleilMotion02{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(7px); }
    100%{ transform:translateX(0); }
}

.soleil-motion-02,
.soleil-motion-2{
    animation:soleilMotion02 1.6s ease-in-out forwards;
}

/* 03ズーム */
@keyframes soleilMotion03{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}

.soleil-motion-03,
.soleil-motion-3{
    animation:soleilMotion03 1.8s ease-in-out forwards;
}
/* 04 ゆらっ */
@keyframes soleilMotion04{
    0%{ transform:rotate(0deg); }
    50%{ transform:rotate(-12deg); }
    100%{ transform:rotate(0deg); }
}

.soleil-motion-04,
.soleil-motion-4{
    animation:soleilMotion04 1.8s ease-in-out forwards;
}

/* ==========================================
   テキストモーション
   画面に入ったら1回だけ
   ========================================== */

/* 01 ふわ文字 */

.soleil-text-motion-01{
    display:inline-block;
}

.soleil-text-motion-char{
    display:inline-block;
    opacity:0;
}

.soleil-chat-motion-active .soleil-text-motion-01 .soleil-text-motion-char{
    animation:soleilTextFuwa .8s ease forwards;
}

@keyframes soleilTextFuwa{
    0%{
        opacity:0;
        transform:translateY(6px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}


/* 02 タイプライター */

.soleil-text-motion-02{
    display:inline-block;
}

.soleil-chat-motion-active .soleil-text-motion-02 .soleil-text-motion-char{
    animation:soleilTextType .05s linear forwards;
}

@keyframes soleilTextType{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


/* 03 フェード */

.soleil-text-motion-03{
    opacity:0;
}

.soleil-chat-motion-active .soleil-text-motion-03{
    animation:soleilTextFade .9s ease forwards;
}

@keyframes soleilTextFade{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}


/* 04 ズームふわっ */

.soleil-text-motion-04{
    display:inline-block;
    opacity:0;
    transform:scale(.92);
}

.soleil-chat-motion-active .soleil-text-motion-04{
    animation:soleilTextZoomFuwa .9s ease forwards;
}

@keyframes soleilTextZoomFuwa{
    0%{
        opacity:0;
        transform:scale(.92);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

/* 02 下からふわっ */

/* @keyframes soleilTextMotion02{
    0%,100%{
        opacity:.4;
        transform:translateY(8px);
    }
    50%{
        opacity:1;
        transform:translateY(0);
    }
} 

.soleil-text-motion-02{
    display:inline-block;
    animation:soleilTextMotion02 1.8s ease-in-out infinite;
}*/

/* 04 横伸び */

/* @keyframes soleilTextMotion04{
    0%,100%{
        transform:scaleX(.92);
    }
    50%{
        transform:scaleX(1);
    }
}

.soleil-text-motion-04{
    display:inline-block;
    transform-origin:left center;
    animation:soleilTextMotion04 1.8s ease-in-out infinite;
} */


/* 05 強調ふわっ */

/* @keyframes soleilTextMotion05{
    0%,100%{
        opacity:.7;
        transform:translateY(0);
    }
    25%{
        transform:translateY(-2px);
    }
    50%{
        opacity:1;
        transform:translateY(-5px);
    }
}

.soleil-text-motion-05{
    display:inline-block;
    animation:soleilTextMotion05 1.8s ease-in-out infinite;
} */


/* 06 点滅 */

/* @keyframes soleilTextMotion06{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:.2;
    }
}

.soleil-text-motion-06{
    animation:soleilTextMotion06 1s ease-in-out infinite;
} */

/* ==========================================
   テキストモーション
   01〜06
   ========================================== */

/* 01 フェード */

/* @keyframes soleilTextMotion01{
    0%{
        opacity:.3;
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:.3;
    }
}

.soleil-text-motion-01{
    animation:soleilTextMotion01 2s ease-in-out infinite;
}


/* 02 下から表示 */

/* @keyframes soleilTextMotion02{
    0%{
        opacity:0;
        transform:translateY(12px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

.soleil-text-motion-02{
    animation:soleilTextMotion02 1.5s ease-in-out infinite;
}


/* 03 ふわっと表示 */

/* @keyframes soleilTextMotion03{
    0%{
        opacity:0;
        transform:scale(.95);
    }
    100%{
        opacity:1;
        transform:scale(1);
    }
}

.soleil-text-motion-03{
    animation:soleilTextMotion03 1.5s ease-in-out infinite;
}

/* 05 強調フェード */

/* @keyframes soleilTextMotion05{
    0%{
        opacity:0;
        transform:translateY(5px);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:1;
        transform:translateY(0);
    }
}

.soleil-text-motion-05{
    animation:soleilTextMotion05 1.5s ease-in-out infinite;

}

/* 05 ズーム */
/* @keyframes soleilMotion05{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-7px); }
    100%{ transform:translateY(0); }
}

.soleil-motion-05,
.soleil-motion-5{
    animation:soleilMotion05 2.2s ease-in-out infinite;
}  */

/* 06 ふわっ */
 /* @keyframes soleilMotion06{
    0%{ transform:rotate(0deg); }
    25%{ transform:rotate(-5deg); }
    50%{ transform:rotate(5deg); }
    75%{ transform:rotate(-3deg); }
    100%{ transform:rotate(0deg); }
}

.soleil-motion-06,
.soleil-motion-6{
    animation:soleilMotion06 1.6s ease-in-out infinite;
}  */

/* 07 左右首かしげ */
/* @keyframes soleilMotion07{
    0%{ transform:rotate(0deg); }
    25%{ transform:rotate(-5deg); }
    50%{ transform:rotate(0deg); }
    75%{ transform:rotate(5deg); }
    100%{ transform:rotate(0deg); }
}

.soleil-motion-07,
.soleil-motion-7{
    animation:soleilMotion07 1.8s ease-in-out infinite;
} */

/* 08 軽い横スライド */
/* @keyframes soleilMotion08{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(4px); }
    100%{ transform:translateX(0); }
}

.soleil-motion-08,
.soleil-motion-8{
    animation:soleilMotion08 1.6s ease-in-out infinite;
} */

/*09 前のめり */
/* @keyframes soleilMotion09{
    0%{ transform:rotate(0deg); }
    50%{ transform:rotate(-8deg); }
    100%{ transform:rotate(0deg); }
}

.soleil-motion-09,
.soleil-motion-9{
    animation:soleilMotion09 1.8s ease-in-out infinite;
} */

/* 10 ふわふわ横揺れ */
/* @keyframes soleilMotion10{
    0%{ transform:translateX(0); }
    25%{ transform:translateX(-3px); }
    75%{ transform:translateX(3px); }
    100%{ transform:translateX(0); }
}

.soleil-motion-10{
    animation:soleilMotion10 2.2s ease-in-out infinite;
} */

/* 11 みぞれ前のめり */
/* @keyframes soleilMotion11{
    0%{ transform:rotate(0deg); }
    20%{ transform:rotate(-3deg); }
    40%{ transform:rotate(3deg); }
    60%{ transform:rotate(-2deg); }
    80%{ transform:rotate(2deg); }
    100%{ transform:rotate(0deg); }
}

.soleil-motion-11{
    animation:soleilMotion11 1.4s ease-in-out infinite;
} */

/* 12 もちっ */
/* @keyframes soleilMotion12{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}

.soleil-motion-12{
    animation:soleilMotion12 1.8s ease-in-out infinite; 
} */