@media (max-width: 1700px) {
    .header__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 21px;
    }
    
    .header__nav-list {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0;
        text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);
    }

    .header__cta {
        /* display: flex; */
        gap: var(--spacing-sm);
        text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);
    }

    .company__image img {
        width: 90%;
        height: 455px;
        margin-left: 0px;
    }

    .service__diagonal,
    .company__diagonal,
    .news__diagonal {
        transform: none;
        position: static;
    }

    .service {
        background: black;
        color: var(--color-white);
    }

    .service--sp::before {
        border-right: 240px solid transparent;
        border-top: 240px solid #512294;
    }

    .service__title--sp {
        font-size: 42px;
    }

    .service__text--sp {
        width: 85%;
    }

    .service__description--sp {
        font-size: medium;
    }

    .service__container--sp {
        padding-top: 35px;
    }

    .service__image__size--sp {
        width: 85%;
    }

    .service__subtitle--sp {
        font-size: 28px;
    }

    .service__button {
        display: flex;
        padding: 2px 12px;
        font-size: medium;
    }
    .service__image img {
        height: auto;
        display: block;
        border-radius: var(--border-radius);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        margin-left: 40px;
        width: 75%;
    }



    /* .features__container--sp {
        padding: 0;
        margin: 0;
    } */

    .features__title--sp {
        font-size: 24px;
    }

    .features__item-title--sp {
        font-size: 21px;
    }

    .features__item-text--sp {
        font-size: 14px;
    }

    .features__content {
        gap: 1rem;
    }

    .company__image--sp img {
        width: 85%;
        height: 295px;
    }



    .company__description--sp {
        font-size: medium;
    }

    .company__text {
        width: 80%;
    }

    .company__subtitle--sp {
        font-size: 32px;
    }

    .company__features {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-weight: bold;
    }

    .footer__section {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        gap: 40px;
        width: 100%;
        max-width: 480px;
    }

    .footer__logo-img {
        height: 2.5em;
        width: auto;
        vertical-align: middle;
        display: inline-block;
    }

    .footer__map iframe {
        border-radius: 16px;
        overflow: hidden;
        width: 80%;
    }

    .footer__company-info {
        margin-bottom: var(--spacing-lg);
        flex: 1 1 350px;
        min-width: 300px;
        font-size: medium;
        margin-left: 20px;
    }

    .header__logo {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-white);
        margin-right: auto;
        margin-left: 0;
    }

    /* CTA */
    .cta {
        background-color: var(--color-gray-medium);
        padding: var(--spacing-xxl) 0;
    }

    .cta__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        padding: 0 var(--container-padding);
    }

    .cta__content {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
    }

    .cta__title {
        font-size: var(--font-size-h3);
        color: var(--color-primary);
        margin-bottom: var(--spacing-lg);
    }

    .cta__button {
        display: inline-block;
        padding: var(--spacing-md) var(--spacing-xxl);
        border: 2px solid var(--color-primary);
        color: var(--color-primary);
        font-weight: 1000;
        font-size: 2.5rem;
        transition: all var(--transition-duration) var(--transition-easing);
    }

    .cta__button:hover {
        background-color: var(--color-primary);
        color: var(--color-white);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 51, 153, 0.3);
    }

    .page-header__title {
        position: absolute;
        left: 8%;
        z-index: 2;
        padding-top: 0px;
        font-size: 5rem;
        font-weight: 700;
        color: var(--color-primary);
        text-align: left;
    }
}

@media (max-width: 1100px) {
    .header__container {
        max-width: var(--container-max-width);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
    }
}
