.hero-lowerPage {
    width: 100%;
    background-image: url(/img/bg-hero-company.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.companyInformationSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;

    .horizontalTable--link {
        line-height: 0;
    }

    .grid-col3 {
        margin-top: 32px;
        gap: 24px;
    }

    .photo {
        width: 100%;
        max-width: 300px;
    }
}

@media screen and (max-width: 599px) {
    /* max-witdhの値pxまでの幅の場合に適応される */
    .companyInformationSection {
        .photo {
            max-width: 100%;
        }
    }
}

.historySection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    background-color: var(--secondary-bg-color);

    .grid-col3 {
        margin-top: 32px;
        gap: 24px;
    }

    .photo {
        width: 100%;
        max-width: 300px;
    }
}

@media screen and (max-width: 599px) {
    /* max-witdhの値pxまでの幅の場合に適応される */
    .historySection {
        .photo {
            max-width: 100%;
        }
    }
}

.ctaSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    /* background-color: var(--primary-bg-color); */
}