/* アイコン本体 */
.favorite-star {
    display: none;
    float: right;
    animation: imgfade 0.7s;
    position: relative;
}

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

    25% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.6;
    }

    75% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
    }
}

.favorite-star img {
    border-radius: 5px;
    color: gray;
    padding: 5px;
    cursor: pointer;
    font-family: Roboto;
    letter-spacing: 0.2px;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    width: 112px;
    z-index: 2;
}

@media screen and (max-width: 900px) {
    .favorite-star img {
        padding: 6px;
        width: 90px;
    }
}

.favorite-star:hover {
    cursor: pointer;
}

.favorite-star:hover img {
    background-color: #fffcbd;
}

.is-favorite img {
    background-color: #fffcbd !important;
}

.is-favorite:hover img {
    background-color: #ffffff !important;
}

/* 左右アニメーション */
.fancy-button {
    margin: auto;
    position: relative;
}

.frills,
.frills:after,
.frills:before {
    position: absolute;
    background: #FFDC52;
    border-radius: 3px;
    height: 6px;
}

.frills:after,
.frills:before {
    content: "";
    display: block;
}

.frills:before {
    bottom: 35px;
}

.frills:after {
    top: 35px;
}

.left-frills {
    right: 153px;
    top: 19.5px;
}

.active .left-frills {
    -webkit-animation: move-left 0.22s ease-out, width-to-zero 0.22s ease-out;
    animation: move-left 0.22s ease-out, width-to-zero 0.22s ease-out;
}

.left-frills:before,
.left-frills:after {
    left: 10px;
}

.active .left-frills:before {
    -webkit-animation: width-to-zero 0.22s ease-out, move-up 0.22s ease-out;
    animation: width-to-zero 0.22s ease-out, move-up 0.22s ease-out;
}

.active .left-frills:after {
    -webkit-animation: width-to-zero 0.22s ease-out, move-down 0.22s ease-out;
    animation: width-to-zero 0.22s ease-out, move-down 0.22s ease-out;
}

.right-frills {
    right: -40px;
    top: 19.5px;
}

.active .right-frills {
    -webkit-animation: move-right 0.22s ease-out, width-to-zero 0.22s ease-out;
    animation: move-right 0.22s ease-out, width-to-zero 0.22s ease-out;
}

.right-frills:before,
.right-frills:after {
    right: 10px;
}

.active .right-frills:before {
    -webkit-animation: width-to-zero 0.22s ease-out, move-up 0.22s ease-out;
    animation: width-to-zero 0.22s ease-out, move-up 0.22s ease-out;
}

.active .right-frills:after {
    -webkit-animation: width-to-zero 0.22s ease-out, move-down 0.22s ease-out;
    animation: width-to-zero 0.22s ease-out, move-down 0.22s ease-out;
}

.left-frills:before,
.right-frills:after {
    transform: rotate(34deg);
}

.left-frills:after,
.right-frills:before {
    transform: rotate(-34deg);
}

@-webkit-keyframes move-left {
    0% {
        transform: none;
    }

    65% {
        transform: translateX(-40px);
    }

    100% {
        transform: translateX(-40px);
    }
}

@keyframes move-left {
    0% {
        transform: none;
    }

    65% {
        transform: translateX(-40px);
    }

    100% {
        transform: translateX(-40px);
    }
}

@-webkit-keyframes move-right {
    0% {
        transform: none;
    }

    65% {
        transform: translateX(40px);
    }

    100% {
        transform: translateX(40px);
    }
}

@keyframes move-right {
    0% {
        transform: none;
    }

    65% {
        transform: translateX(40px);
    }

    100% {
        transform: translateX(40px);
    }
}

@-webkit-keyframes width-to-zero {
    0% {
        width: 30px;
    }

    100% {
        width: 6px;
    }
}

@keyframes width-to-zero {
    0% {
        width: 30px;
    }

    100% {
        width: 6px;
    }
}

@-webkit-keyframes move-up {
    100% {
        bottom: 54.25px;
    }
}

@keyframes move-up {
    100% {
        bottom: 54.25px;
    }
}

@-webkit-keyframes move-down {
    100% {
        top: 54.25px;
    }
}

@keyframes move-down {
    100% {
        top: 54.25px;
    }
}

@media screen and (max-width: 900px) {

    .frills,
    .frills:after,
    .frills:before {
        border-radius: 2px;
        height: 4px;
    }

    .frills:before {
        bottom: 10px;
    }

    .frills:after {
        top: 10px;
    }

    .left-frills {
        right: 130px;
        top: 15px;
    }

    .left-frills:before,
    .left-frills:after {
        left: 5px;
    }

    .right-frills {
        right: -30px;
        top: 16px;
    }

    .right-frills:before,
    .right-frills:after {
        right: 5px;
    }

    .active .left-frills {
        -webkit-animation: move-left 0.18s ease-out, width-to-zero 0.18s ease-out;
        animation: move-left 0.18s ease-out, width-to-zero 0.18s ease-out;
    }

    .active .left-frills:before {
        -webkit-animation: width-to-zero 0.18s ease-out, move-up 0.18s ease-out;
        animation: width-to-zero 0.18s ease-out, move-up 0.18s ease-out;
    }

    .active .left-frills:after {
        -webkit-animation: width-to-zero 0.18s ease-out, move-down 0.18s ease-out;
        animation: width-to-zero 0.18s ease-out, move-down 0.18s ease-out;
    }

    .active .right-frills {
        -webkit-animation: move-right 0.18s ease-out, width-to-zero 0.18s ease-out;
        animation: move-right 0.18s ease-out, width-to-zero 0.18s ease-out;
    }

    .active .right-frills:before {
        -webkit-animation: width-to-zero 0.18s ease-out, move-up 0.18s ease-out;
        animation: width-to-zero 0.18s ease-out, move-up 0.18s ease-out;
    }

    .active .right-frills:after {
        -webkit-animation: width-to-zero 0.18s ease-out, move-down 0.18s ease-out;
        animation: width-to-zero 0.18s ease-out, move-down 0.18s ease-out;
    }

    .left-frills:before,
    .right-frills:after {
        transform: rotate(34deg);
    }

    .left-frills:after,
    .right-frills:before {
        transform: rotate(-34deg);
    }

    @-webkit-keyframes move-left {
        0% {
            transform: none;
        }

        65% {
            transform: translateX(-10px);
        }

        100% {
            transform: translateX(-10px);
        }
    }

    @keyframes move-left {
        0% {
            transform: none;
        }

        65% {
            transform: translateX(-10px);
        }

        100% {
            transform: translateX(-10px);
        }
    }

    @-webkit-keyframes move-right {
        0% {
            transform: none;
        }

        65% {
            transform: translateX(10px);
        }

        100% {
            transform: translateX(10px);
        }
    }

    @keyframes move-right {
        0% {
            transform: none;
        }

        65% {
            transform: translateX(10px);
        }

        100% {
            transform: translateX(10px);
        }
    }

    @-webkit-keyframes width-to-zero {
        0% {
            width: 20px;
        }

        100% {
            width: 4px;
        }
    }

    @keyframes width-to-zero {
        0% {
            width: 20px;
        }

        100% {
            width: 4px;
        }
    }

    @-webkit-keyframes move-up {
        100% {
            bottom: 15.5px;
        }
    }

    @keyframes move-up {
        100% {
            bottom: 15.5px;
        }
    }

    @-webkit-keyframes move-down {
        100% {
            top: 15.5px;
        }
    }

    @keyframes move-down {
        100% {
            top: 15.5px;
        }
    }
}