.lowerHero {
    height: 100px;
    position: relative;
    padding: 104px 5%;
}

.lowerHero--body {
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%; */
}

.lowerHero--title {
    color: var(--black);
    font-size: var(--font-size-title-lowerhero-small);
    margin-bottom: 16px;
}

.lowerHero--text {
    display: inline-block;
    background-color: var(--white);
    padding: 8px 16px;
    margin-bottom: 16px;
    line-height: 1.5em;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .lowerHero {
        background-position: center;
    }
}

.contents {
    background-color: var(--grey);
}

.contents .text {
    text-align: left;
}

.contents .orderListBox {
    margin-top: 32px;
}

.contents .orderList {
    text-align: left;
    padding-left: 22px;
}