@import url('variables.css');

#company {
    margin-inline: var(--width-sm);
}

.building {
    position: absolute;
    top: 7rem;
    right: 5rem;
    width: min(20vw, 500px);
}

#company div {
    position: relative;
    display: grid;
    grid-template-columns: 15% 85%;
    max-width: var(--max-width-md);
    padding: 5rem;
    margin-bottom: 10rem;
}

#company dl {
    display: contents;
}

dt,
dd {
    padding-block: .8em;
    line-height: 1.4em;
}

dt {
    grid-column: 1;
    color: var(--sub-color);
}

dd ul {
    gap: .5em;
}

.slider::after {
    background-image: url(/assets/img/slider/slider_05.png);
}

@media screen and (max-width:992px) {
    #company {
        margin-inline: var(--width-sp);
    }

    .building {
        width: min(25vw, 250px);
    }
}

@media screen and (max-width:675px) {
    .building {
        display: none;
    }

    #company div {
        padding: 3rem 1.5rem;
        grid-template-columns: 25% 75%;
    }
}

@media screen and (max-width:1250px) {
    br:not(.br-sp) {
        display: none;
    }
}