.music { position: relative; z-index: 2; display: flex; flex-flow: column; align-items: center; width: 100%; height: 100%; padding: 80px 0; background: linear-gradient(to bottom, #C7363B , #29483D, #192640); background-color: var(--color-black); }
.music::before, .music::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; mix-blend-mode: overlay; filter: brightness(60%) contrast(100%); }
.music::before { background: #000; filter: url(#noise); width: 83.2%; margin-left: 8.5%; }
.music::after { background: url(../img/texture.png) no-repeat center center / 100% 100%; }
.music > h1 { padding: 2em 0 1em 0; font-size: var(--font-large); text-align: center; font-family: var(--font-gugi); text-shadow: 0 5px 10px var(--color-black); color: var(--color-white); letter-spacing: .5px; }
.music .box { overflow: hidden; position: relative; z-index: 1; width: 80%; height: 40%; margin: 2em; display: flex; align-items: center; background-color: rgba(255, 255, 255, .6); border-radius: 1em; box-shadow: 0 5px 10px var(--color-black); }
.music .box .image { position: relative; width: 25%; height: 100%; }
.music .box .image figcaption { position: absolute; top: 0; display: flex; justify-content: space-around; align-items: center; text-align: center; width: 100%; height: 15%; background-color: rgba(0, 0, 0, .8); color: var(--color-white); font-size: 1.35rem; font-family: var(--font-noto); font-weight: 700; letter-spacing: 0.5px; }
.music .box .image img { width: 100%; height: 100%; }
.music .box .musics { width: 75%; }
.music .box .musics audio { width: 100%; outline: none; }
.music .box .musics audio::-webkit-media-controls-enclosure { background: none; }

@media only screen and (max-width: 805px) {
    .music .box { flex-flow: column; }
    .music .box .image { width: 100%; height: 80%; }
    /* .music .box .image span { font-size: max(1.4rem, min(3vw, 3.5rem)); font-weight: 400; } */
    .music .box .musics { width: 100%; height: 20%; margin-top: 1.2em; }
    .music .box .image figcaption { font-size: 2.8vw; font-weight: 400; }
}