#intro::before {
    height: 45%;
    bottom: 0;
    width: calc(5rem + (50vw - 400px));
    right: 0;
}

#machine figure {
    column-gap: 4rem;
    row-gap: 3rem;
}

#machine::before {
    top: 0;
    height: 75%;
    width: calc(5rem + (50vw - 600px));
}

#machine figcaption div {
    background-color: var(--c-bg);
    margin-top: 3rem;
    padding-inline: min(3vw, 2rem);
    padding-block: 2rem;
}

#voice li {
    border: 1px solid var(--c-sub);
    padding: min(3vw, 2.5rem);
}

#voice li:nth-child(n + 2) {
    margin-top: 5rem;
}

#voice img {
    width: 20rem;
}

#voice .title {
    border-bottom: 1px solid var(--c-sub);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    row-gap: .1em;
    column-gap: 1em;
}

#locoart {
    position: relative;
    background-image: url(/assets/img/background/locoart.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 50rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}

#locoart::before {
    background-color: rgba(86, 57, 72, 0.4);
    z-index: 1;
}

#locoart .container-sm {
    background-color: rgba(255, 255, 255, 0.9);
    padding-block: 6rem;
    z-index: 10;
    padding-inline: 3vw;
    padding-block: 5rem;
}

#locoart img {
    width: 40%;
    margin-bottom: 2rem;
}

#locoart .btn {
    margin-top: 3rem;
    background-color: #c189a6;
}

@media screen and (max-width:992px) {
    #machine.before::before {
        width: calc(5vw + 5rem);
        height: 30%;
    }

    #voice .title {
        padding-bottom: .5rem;
    }

    #voice img {
        width: 15rem;
    }
}

@media screen and (max-width:941px) {
    #intro.before::before {
        width: calc(5vw + 5rem);
    }
}

@media screen and (max-width:1411px) {
    #machine.before::before {
        width: calc(7.5vw + 5rem);
    }
}