@charset "UTF-8";

/* info top専用 シーサーアイコンcss　*/


p.favoriteImg {
    /*display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 26px;
    overflow: hidden;
    background: url(../img/heart_blur_off.png) no-repeat right;
    background-size: 20px auto;
    text-align: left;
    text-indent: -999px;
    transition: all 300ms 0s ease;*/
}

    p.favoriteImg.on {
        /*background-image: url(../img/heart_blur.png);
        animation: pushheart 0.7s ease 0s 1 alternate none running;*/
    }

i.favoriteImg {
    /*display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 26px;
    overflow: hidden;
    background: url(../img/heart_blur_off.png) no-repeat right;
    background-size: 20px auto;
    text-align: left;
    text-indent: -999px;
    transition: all 300ms 0s ease;*/
    width: 35px;
    height: 37px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background: url(../img/i_icon_off3.png) no-repeat center center;
		background-size: contain;
    transition: all 300ms 0s ease;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
		right: 1em;
		bottom: 1em;
}

    i.favoriteImg.on {
        /*background-image: url(../img/heart_blur.png);
        animation: pushheart 0.7s ease 0s 1 alternate none running;*/
        background: url(../img/i_icon_on3.png) no-repeat center center;
								background-size: contain;
        animation: like_anime2 0.7s ease 0s 1 alternate none;
    }

    i.favoriteImg em {
        width: 39px;
        margin: 0 auto;
        display: block;
        font-size: .5em;
        line-height: 1.2;
        font-style: normal;
        padding: .1em .2em;
        background-color: #d5d5d5;
        border-radius: 4px;
        position: absolute;
        top: 37px;
        right: 4px;
    }

    i.favoriteImg.on em {
        width: 39px;
        margin: 0 auto;
        color: #fff;
        display: block;
        font-size: .5em;
        line-height: 1.2;
        font-style: normal;
        padding: .1em .2em;
        background-color: #e1226f;
        border-radius: 4px;
        position: absolute;
        top: 37px;
        right: 4px;
    }


/*@keyframes pushheart {
    0% {
        transform: scale(.2) translate(60%, 40%);
    }

    20% {
        transform: scale(.8) translate(10%, 20%);
    }

    30% {
        transform: scale(1.4) translate(-5%, -5%);
    }

    40% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}*/

/*@-webkit-keyframes like_anime {
    0% {
        transform: scale(.5) translate(10%, 10%) translateY(10px);
    }

    20% {
        transform: scale(.2) translate(20%, 20%) translateY(10px);
    }

    30% {
        transform: scale(1.0) translate(-5%, -5%) translateY(10px);
    }

    40% {
        transform: scale(1.0) translate(-2%, -2%) translateY(5px);
    }

    60% {
        transform: scale(1.0) translate(1%, 1%) translateY(-2px);
    }

    100% {
        transform: scale(1.0) translate(1%, 1%) translateY(0);
    }
}*/


@-webkit-keyframes like_anime2 {
    0% {
        transform: scale(.5) translate(10%, 10%) translateY(10px);
    }

    20% {
        transform: scale(.2) translate(20%, 20%) translateY(-30px);
    }

    30% {
        transform: scale(.5) translate(-10%, -10%) translateY(30px);
    }

    40% {
        transform: scale(1.0) translate(-5%, -5%) translateY(-10px);
    }

    60% {
        transform: scale(1.0) translate(1%, 1%) translateY(10px);
    }

    80% {
        transform: scale(1.0) translate(0%, 0%) translateY(0);
    }

    100% {
        transform: scale(1.0) translate(0%, 0%) translateY(0);
    }
}