@media screen and (max-width: 1200px) {
    #category-pc {
        display: none;!important;
    }
    #carousel_pc {
        display: none;!important;
    }
    #shortIntro-pc {
        display: none;!important;
    }
}
@media screen and (min-width: 1201px) {
    #category-mobile {
        display: none;!important;
    }
    #carousel_mobile {
        display: none;!important;
    }
    #shortIntro-mobile {
        display: none;!important;
    }
}

@media screen and (max-width: 991px) {
    #homepage-image-pc {
        display: none;!important;
    }
}

@media screen and (min-width: 992px) {
    #homepage-image-mobile {
        display: none;!important;
    }
    .buildingImage {
        max-width: 500px;
    }
    #slogan-pc {
        font-size: 3rem!important;
    }
    #intro {
        font-size: 1.2rem;
    }
    .ability {
        font-size: 1.2rem;
    }

    .mainTitle {
        font-size: 2rem;!important;
    }
    .mainInfo {
        font-size: 1.4rem;!important;
    }
}

@media screen and (min-width: 1400px) {
    #slogan-pc {
        font-size: 3.5rem!important;
    }
    .category {
        font-size: 1.5rem;!important;
    }
    #intro {
        font-size: 1.4rem;
    }
    .ability {
        font-size: 1.4rem;
    }

    .mainTitle {
        font-size: 2.5rem;!important;
    }
    .mainInfo {
        font-size: 1.6rem;!important;
    }
}

@media screen and (min-width: 1900px) {
    #slogan-pc {
        font-size: 4.5rem!important;
    }
    .category {
        font-size: 1.8rem;!important;
    }
    #intro {
        font-size: 1.6rem;
    }
    .ability {
        font-size: 1.6rem;
    }
    .mainTitle {
        font-size: 3rem;!important;
    }
    .mainInfo {
        font-size: 2rem;!important;
    }
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.text-overlay {
    position: absolute;
    z-index: 100;
    top: 80%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    pointer-events: none;
}

.text-overlay-2 {
    position: absolute;
    z-index: 100;
    top: 70%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 1.2rem;
    pointer-events: none;
}

.text-overlay-3 {
    position: absolute;
    z-index: 100;
    top: 20%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 1.2rem;
    pointer-events: none;
}

.text-overlay-5 {
    position: absolute;
    z-index: 100;
    top: 10%;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    font-size: 1.2rem;
    pointer-events: none;
}

.text-overlay h3 {
    font-size: 1.5rem;
}

.text-overlay h2 {
    font-size: 2rem;
}

.field {
    color: navy;!important;
}

.intro-image-container {
    position: relative;
}

.image-overlay {
    position: absolute;
}

@media screen and (max-width: 450px) {
    .text-overlay-5 {
        position: absolute;
        top: 2rem;
        left: 0rem;
    }
    .text-1 {
        font-size: 0.9rem;
        max-width: 19rem;
        text-align: justify;
    }
    #intro-a1 {
        display: none;!important;
    }
    #intro-a2 {
        display: none;!important;
    }
    #intro-a3 {
        display: none;!important;
    }
}

@media screen and (min-width: 451px) {
    .text-overlay-5 {
        position: absolute;
        top: 3rem;
        left: 0rem;
    }
    .text-1 {
        font-size: 1rem;
        max-width: 25rem;
        text-align: justify;
    }
    .companyName {
        font-size: 1.2rem;
    }
    #intro-a1 {
        display: none;!important;
    }
    #intro-a2 {
        display: none;!important;
    }
    #intro-a3 {
        display: none;!important;
    }
}

@media screen and (min-width: 751px) {
    .text-overlay-5 {
        position: absolute;
        top: 4rem;
        left: 0rem;
    }
    .text-1 {
        font-size: 1.1rem;
        max-width: 30rem;
        text-align: justify;
    }
    .companyName {
        font-size: 1.5rem;
    }
    #intro-mobile {
        display: none;!important;
    }
    #intro-a1 {
        display: block;!important;
    }
    #intro-a2 {
        display: none;!important;
    }
    #intro-a3 {
        display: none;!important;
    }
}

@media screen and (min-width: 1001px) {
    .text-overlay-5 {
        position: absolute;
        top: 6rem;
        left: 0rem;
    }
    .text-1 {
        font-size: 1.25rem;
        max-width: 40rem;
        text-align: justify;
    }
    .companyName {
        font-size: 1.8rem;
    }
    #intro-mobile {
        display: none;!important;
    }
    #intro-a1 {
        display: none;!important;
    }
    #intro-a2 {
        display: block;!important;
    }
    #intro-a3 {
        display: none;!important;
    }
}

@media screen and (min-width: 1501px) {
    .text-overlay-5 {
        position: absolute;
        top: 10rem;
        left: 0rem;
    }
    .text-1 {
        font-size: 1.5rem;
        max-width: 70rem;
        text-align: justify;
    }
    .companyName {
        font-size: 2.5rem;
    }
    #intro-mobile {
        display: none;!important;
    }
    #intro-a1 {
        display: none;!important;
    }
    #intro-a2 {
        display: none;!important;
    }
    #intro-a3 {
        display: block;!important;
    }
}