/* ==========================================================================
   Utilities
   ========================================================================== */
.u-sp-only {
    display: inline;
}

.u-pc-only {
    display: none;
}

@media (min-width: 768px) {
    .u-sp-only {
        display: none;
    }

    .u-pc-only {
        display: inline;
    }
}

/* ==========================================================================
   ~1023px (below nav breakpoint) — handled mostly in header.css
   ========================================================================== */

/* ==========================================================================
   ~899px — two-column sections collapse
   ========================================================================== */
@media (max-width: 899px) {
    .intro__grid,
    .vision__grid,
    .company-brief__grid {
        grid-template-columns: 1fr;
    }

    .intro__mark {
        order: -1;
        width: min(70%, 320px);
    }

    .vision__num {
        order: -1;
        width: min(60%, 260px);
        margin-inline: auto;
    }

    .vision__text {
        text-align: left;
    }

    .page-hero__mark {
        opacity: 0.3;
    }
}

/* ==========================================================================
   ~767px — mobile layout
   ========================================================================== */
@media (max-width: 767px) {
    .value__list {
        grid-template-columns: 1fr;
    }

    .eight__track-wrap {
        overflow: visible;
    }

    .eight__track {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding-inline: var(--container-padding);
    }

    .eight__item {
        border-top: none;
        border-left: 3px solid var(--c);
        padding: 32px 24px;
    }

    .concept__plus {
        width: 100%;
        margin-top: 0;
    }

    .concept__step {
        width: min(100%, 260px);
    }

    .about-story__row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-philosophy__grid,
    .about-philosophy--reverse .about-philosophy__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-philosophy--reverse .about-philosophy__label,
    .about-philosophy--reverse .about-philosophy__body {
        order: initial;
        text-align: left;
        margin-left: 0;
    }

    .about-value__row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .about-eight__row {
        grid-template-columns: 1fr;
        gap: 8px;
        row-gap: 6px;
    }

    .company-table__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .company-brief__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}