/*bgm ライブラリー*/

#sfx{
    margin: 0 auto;
    text-align: center;
}
.audio{
    font-size: 2em;
    font-weight: bold;
}
.hsfx{
    margin: 15px 60px;
}

.hsfx img{
    width: 30%;
}

.hsfx dl{
    display: none;
}

.hsfx img:hover{
    opacity: 0.8;
    cursor: pointer;
}

#checked1:checked ~ label img,
#checked2:checked ~ label img,
#checked3:checked ~ label img,
#checked4:checked ~ label img,
#checked5:checked ~ label img,
#checked6:checked ~ label img{
    animation-name: icon_animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

input[type="checkbox"]{
    display: none;
}

@keyframes icon_animation {
    0% {
        transform: rotateX(0);
        
    }

    100% {
        transform: rotateX(360deg);
       
    }
}
.hsfx dd{
    margin:15px;
    display: none;
}

.hsfx dt{
    margin-top: 15px;
    margin-bottom: 15px;
}

.hsfx dt:hover{
    opacity: 0.8;
    cursor: pointer;
}

.bit{
    font-size: 0.5em;
}

@media (max-width: 768px){
    .hsfx img{
        width: 70%;
    }

    .audio{
        font-size: 1.5em;
    }
}