/*SFX ライブラリー*/

#sfx {
    margin: 0 auto;
    text-align: center;
}

.audio {
    font-size: 2em;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.hsfx {
    margin: 15px 60px;
}

.hsfx img {
    width: 100%;
}

.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{
    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) {
    .audio {
        font-size: 1.5em;
        display: block;
    }

    .hsfx img {
        width: 70%;
    }

}