.news-archive {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding-block: clamp(2rem, 6vw, 5rem);

    & .archive-heading {
        margin-bottom: clamp(1.5rem, 4vw, 3rem);
        text-align: center;

        & .archive-kicker {
            margin-bottom: .25rem;
            color: var(--symbol-red);
            font-family: "Anton", sans-serif;
            font-size: clamp(1rem, 2vw, 1.35rem);
            letter-spacing: .12em;
        }

        & h2 {
            margin: 0;
            color: var(--school-image-color);
            font-size: clamp(2rem, 5vw, 3.6rem);
        }

        & .archive-summary {
            min-height: 1.5em;
            margin-top: .75rem;
            color: #666;
            font-size: .9rem;
        }
    }

    & .archive-status {
        display: flex;
        min-height: 14rem;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        color: #555;

        &[hidden] { display: none; }
        &.is-error { color: #a42323; }
    }

    & .archive-loader {
        width: 1.5rem;
        aspect-ratio: 1;
        border: 3px solid #ddd;
        border-top-color: var(--symbol-red);
        border-radius: 50%;
        animation: archive-spin .8s linear infinite;
    }

    & .archive-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(1rem, 2.5vw, 2rem);
    }

    & .archive-card {
        display: flex;
        min-width: 0;
        overflow: hidden;
        flex-direction: column;
        padding: 0;
        border: 0;
        border-radius: 1.25rem;
        background: #fff;
        box-shadow: 0 8px 28px rgb(29 44 67 / 10%);
        color: inherit;
        cursor: pointer;
        font: inherit;
        text-align: left;
        transition: transform .25s ease, box-shadow .25s ease;

        &:hover,
        &:focus-visible {
            transform: translateY(-6px);
            box-shadow: 0 14px 36px rgb(29 44 67 / 18%);

            & .archive-thumbnail img { transform: scale(1.05); }
        }

        &:focus-visible {
            outline: 3px solid var(--symbol-red);
            outline-offset: 3px;
        }
    }

    & .archive-thumbnail {
        display: block;
        overflow: hidden;
        aspect-ratio: 16 / 10;
        background: #e8ebef;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }
    }

    & .archive-card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 1.1rem 1.2rem 1.25rem;
    }

    & .archive-meta {
        display: flex;
        align-items: center;
        gap: .65rem;
        color: #666;
        font-size: .82rem;

        & .archive-category {
            display: inline-block;
            padding: .2rem .65rem;
            border-radius: 999px;
            background: color-mix(in srgb, var(--school-image-color) 10%, white);
            color: var(--school-image-color);
            font-weight: 700;

            &[data-category="イベント"] {
                background: color-mix(in srgb, var(--symbol-green) 12%, white);
                color: var(--symbol-green);
            }

            &[data-category="お知らせ"] {
                background: color-mix(in srgb, var(--symbol-blue) 12%, white);
                color: var(--symbol-blue);
            }
        }
    }

    & .archive-title {
        display: -webkit-box;
        overflow: hidden;
        margin-top: .85rem;
        color: #222;
        font-size: clamp(1rem, 1.8vw, 1.2rem);
        font-weight: 700;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    & .archive-more {
        margin-top: auto;
        padding-top: 1.2rem;
        color: var(--symbol-red);
        font-size: .85rem;
        font-weight: 700;
        text-align: right;
    }

    & .archive-pagination {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        margin-top: clamp(2.5rem, 6vw, 5rem);

        & .page-link {
            display: grid;
            min-width: 2.65rem;
            height: 2.65rem;
            place-items: center;
            padding-inline: .7rem;
            border: 1px solid #d6d9de;
            border-radius: 999px;
            background: #fff;
            color: #333;
            text-decoration: none;
            transition: .2s;

            &:is(a):hover,
            &.is-current {
                border-color: var(--symbol-red);
                background: var(--symbol-red);
                color: #fff;
            }

            &:not(a) { opacity: .38; }
        }

        & .archive-page-prev,
        & .archive-page-next { min-width: 4.5rem; }
        & .page-dots { padding-inline: .15rem; }
    }
}

@keyframes archive-spin {
    to { transform: rotate(360deg); }
}

@media screen and (max-width: 900px) {
    .news-archive {
        & .archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
}

@media screen and (max-width: 600px) {
    .news-archive {
        width: min(100% - 1.25rem, 36rem);

        & .archive-list { grid-template-columns: 1fr; }

        & .archive-card {
            flex-direction: row;
            border-radius: 1rem;
        }

        & .archive-thumbnail {
            width: 38%;
            min-width: 38%;
            aspect-ratio: auto;

            & img { min-height: 100%; }
        }

        & .archive-card-body { padding: .8rem; }

        & .archive-meta {
            align-items: flex-start;
            flex-direction: column;
            gap: .3rem;
        }

        & .archive-title {
            margin-top: .5rem;
            font-size: .95rem;
            line-height: 1.5;
        }

        & .archive-more {
            padding-top: .6rem;
            font-size: .76rem;
        }

        & .archive-pagination {
            & .page-link {
                min-width: 2.35rem;
                height: 2.35rem;
                padding-inline: .55rem;
            }

            & .archive-page-prev,
            & .archive-page-next { min-width: 4rem; }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-archive {
        & .archive-card,
        & .archive-thumbnail img { transition: none; }
        & .archive-loader { animation: none; }
    }
}
/* トップページNEWS：1画面内に12件を均等配置 */
#news.home-news-archive {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(.5rem, 1.5vh, 1rem) clamp(.5rem, 1.2vw, 1rem);

    & h1 {
        color: var(--symbol-red);
        font-family: "Anton", sans-serif;
        font-weight: normal;
    }

    & .archive-summary {
        flex: none;
        min-height: 1.2em;
        margin: .15rem 0 .35rem;
        color: #666;
        font-size: clamp(.65rem, 1.4vh, .85rem);
    }

    & .archive-status {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: .75rem;

        &[hidden] { display: none; }
        &.is-error { color: #a42323; }
    }

    & .archive-list {
        display: grid;
        flex: 1;
        min-height: 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(.35rem, 1vh, .75rem);
        transition: opacity .2s ease;

        &.is-loading {
            opacity: .45;
            pointer-events: none;
        }
    }

    & .archive-card {
        min-height: 0;
        border-radius: clamp(.6rem, 1vw, 1rem);
    }

    & .archive-thumbnail {
        flex: 0 0 53%;
        min-height: 0;
        aspect-ratio: auto;
    }

    & .archive-card-body {
        min-height: 0;
        padding: clamp(.35rem, .75vw, .7rem);
    }

    & .archive-meta {
        flex-wrap: wrap;
        gap: .25rem .4rem;
        font-size: clamp(.58rem, .75vw, .76rem);

        & .archive-category {
            max-width: 100%;
            overflow: hidden;
            padding: .1rem .45rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    & .archive-title {
        margin-top: clamp(.2rem, .6vh, .45rem);
        font-size: clamp(.7rem, .9vw, 1rem);
        line-height: 1.4;
    }

    & .archive-more {
        display: block;
        padding-top: clamp(.15rem, .5vh, .4rem);
        font-size: clamp(.58rem, .72vw, .75rem);
    }

    & .archive-pagination {
        flex: none;
        gap: .25rem;
        margin-top: clamp(.3rem, 1vh, .65rem);
        transition: opacity .2s ease;

        &.is-loading {
            opacity: .45;
            pointer-events: none;
        }

        & .page-link {
            min-width: clamp(1.8rem, 3.5vh, 2.3rem);
            height: clamp(1.8rem, 3.5vh, 2.3rem);
            padding-inline: .5rem;
            font-size: clamp(.65rem, 1.4vh, .85rem);
        }

        & .archive-page-prev,
        & .archive-page-next { min-width: 3.5rem; }
    }
}

@media screen and (min-aspect-ratio: 2 / 1) and (min-width: 1200px) {
    #news.home-news-archive {
        & .archive-list {
            grid-template-columns: repeat(6, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
        }

        & .archive-thumbnail { flex-basis: 53%; }
    }
}
@media screen and (max-width: 1300px) and (orientation: portrait) {
    #news.home-news-archive {
        & .archive-list {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            grid-template-rows: repeat(3, minmax(0, 1fr));
        }

        & .archive-thumbnail { flex-basis: 48%; }
    }
}

@media screen and (max-width: 900px) and (orientation: portrait) {
    #news.home-news-archive {
        & .archive-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            grid-template-rows: repeat(4, minmax(0, 1fr));
        }

        & .archive-thumbnail { flex-basis: 43%; }
    }
}

@media screen and (orientation: landscape) and (max-height: 600px) {
    #news.home-news-archive {
        & .archive-card {
            flex-direction: row;
        }

        & .archive-thumbnail {
            width: 52%;
            min-width: 52%;
            flex-basis: auto;
            aspect-ratio: auto;
        }

        & .archive-card-body {
            justify-content: center;
            padding: .3rem .4rem;
        }

        & .archive-meta {
            gap: .15rem .3rem;
            font-size: clamp(.55rem, 1.4vw, .68rem);
        }

        & .archive-title {
            margin-top: .2rem;
            font-size: clamp(.65rem, 1.7vw, .82rem);
            line-height: 1.25;
        }

        & .archive-more {
            padding-top: .15rem;
            font-size: clamp(.55rem, 1.3vw, .68rem);
        }
    }
}
@media screen and (max-width: 600px) and (orientation: portrait) {
    #news.home-news-archive {
        padding-inline: .4rem;

        & .archive-list {
            display: flex;
            overflow-y: auto;
            flex-direction: column;
            gap: .45rem;
            padding: .1rem .35rem .35rem .15rem;
            overscroll-behavior-y: auto;
            scrollbar-gutter: stable;
            scrollbar-color: color-mix(in srgb, var(--symbol-red) 55%, transparent) transparent;
            scrollbar-width: thin;
            touch-action: pan-y;
            -webkit-overflow-scrolling: touch;

            &::-webkit-scrollbar {
                width: .3rem;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 999px;
                background: color-mix(in srgb, var(--symbol-red) 55%, transparent);
            }
        }

        & .archive-card {
            min-height: clamp(6.5rem, 15vh, 8rem);
            flex: 0 0 auto;
            flex-direction: row;
            border-radius: .55rem;
        }

        & .archive-thumbnail {
            width: 38%;
            min-width: 38%;
            flex-basis: auto;
            aspect-ratio: 4 / 3;
        }

        & .archive-card-body {
            justify-content: center;
            padding: .45rem .55rem;
        }

        & .archive-meta {
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: .25rem .4rem;
            font-size: clamp(.62rem, 2.5vw, .72rem);

            & .archive-category { padding: .08rem .35rem; }
        }

        & .archive-title {
            margin-top: .35rem;
            font-size: clamp(.78rem, 3.5vw, .95rem);
            line-height: 1.4;
        }

        & .archive-pagination {
            & .page-link {
                min-width: 1.7rem;
                height: 1.7rem;
                padding-inline: .35rem;
            }

            & .archive-page-prev,
            & .archive-page-next { min-width: 3rem; }
        }
    }
}