@charset "UTF-8";




/* PC TAB */
@media screen and (min-width:768px){

    #g-nav a:hover label,
    #news .more_btn:hover,
    #news .news_box:hover .news_img,
    #content .flex_archive_box .box:hover .thumb,
    #content .btn_area a:hover,
    #content .char_box .list:hover .char,
    #content .single_goods_box .goods_box_area .goods_box:hover .g_cat_thumb,
    #content .single_story_box .season .list a:hover,
    #content .single_story_box .nav_img_box li:hover,
    #content .single_dvd_broadcast_box .dvd_box .content_area .box a:hover,
    #content .single_dvd_broadcast_box .broadcast_box .content_area .box:hover,
    #content .btn_area label:hover,
    #content .type_goods .detail span .peikko:hover
    {
        animation-name: animation-btn;
        animation-duration: 1.25s;
    }

    #gototop:hover .char {
        animation-name: animation-swing;
        animation-duration: 3s;
        animation-iteration-count:infinite;
    }

}

/* ボタンアニメーションのキーフレーム */
@keyframes animation-btn{
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    15% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    30% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    
    70% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
/* Swingアニメーション */
@keyframes animation-swing{
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    30% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    50% {
        -webkit-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    
    70% {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}


/* FadeInのキーフレーム1 */
@keyframes animation-fade_in1{
    0%{
        opacity: 0;
        transform: scale(3.0);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}
/* FadeInのキーフレーム2 */
@keyframes animation-fade_in2{
    0%{
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1.0);
    }
}