@media screen and (max-width: 768px) {
    .main.is--archive, .main.is--post{
        margin-top: calc(66 / var(--layout-artbord) * 100vw);
    }

    .pageArchiveHeader .breadcrumb{
        margin-top: calc(20 / var(--layout-artbord) * 100vw);
    }

    .pageArchiveHeader__title{
        font-size: calc(64 / var(--layout-artbord) * 100vw);
        line-height: 1.2;
        
    }

    .main.is--archive .pageContent, .main.is--post .postContent{
        margin-top: 1em;
    }



    /* ---------------------------
    ▼ SP時：折りたたみ仕様
    ---------------------------- */
    .category {
        flex-direction: column;
        align-items: stretch;
    }

    .category__title {
        /* margin: 0 auto 1rem; */
        width: 100%;
        text-align: center;
        font-size: calc(18 / var(--layout-artbord) * 100vw);
        padding: calc(10 / var(--layout-artbord) * 100vw) 0;
        border: calc(2 / var(--layout-artbord) * 100vw) solid var(--color-main);
    }

    /* SPでのみ [表示]/[非表示] を表示 */
    .category__state {
        display: inline-block;
        font-size: calc(12 / var(--layout-artbord) * 100vw);
        margin-left: calc(10 / var(--layout-artbord) * 100vw);
    }

    .category__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(16 / var(--layout-artbord) * 100vw) calc(8 / var(--layout-artbord) * 100vw);
        margin-left: 0;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
    }

    .category.is-open .category__list {
        max-height: 1000px; /* 適度に大きめでOK */
        opacity: 1;
    }

    .category.is-open .category__arrow {
        transform: rotate(225deg);
    }

    .category__item a {
        font-size: calc(12 / var(--layout-artbord) * 100vw);
        padding: calc(4 / var(--layout-artbord) * 100vw) calc(8 / var(--layout-artbord) * 100vw);
        border-radius: calc(6 / var(--layout-artbord) * 100vw);
    }

    .category__item img {
        width: calc(16 / var(--layout-artbord) * 100vw);
        margin-right: calc(6 / var(--layout-artbord) * 100vw);
    }

    .archiveCard{
        grid-template-columns: 1fr 1fr;
        gap: calc(10 / var(--layout-artbord) * 100vw);
    }

    .archiveCard.is--archive{
        margin-top: calc(40 / var(--layout-artbord) * 100vw);
    }

    /* .archiveCard.is--post{
        margin-top: 3rem;
    } */

    /* カード */
    .card{
        padding: calc(9.21 / var(--layout-artbord) * 100vw);
        border-radius: calc(24.876 / var(--layout-artbord) * 100vw);
    }

    .card__arrow{
        width: calc(30 / var(--layout-artbord) * 100vw);
    }

    .card__title{
        font-size: calc(13 / var(--layout-artbord) * 100vw);
        margin-top: calc(15.32 / var(--layout-artbord) * 100vw);
    }

    .card__tagWrapper{
        margin-top: calc(6 / var(--layout-artbord) * 100vw);
    }

    .card__tag{
        font-size: calc(12 / var(--layout-artbord) * 100vw);
        padding: calc(4 / var(--layout-artbord) * 100vw) calc(8 / var(--layout-artbord) * 100vw);
        border-radius: calc(2.764 / var(--layout-artbord) * 100vw);
    }

    .card__tag span:first-of-type{
        width: calc(8 / var(--layout-artbord) * 100vw);
        line-height: 1;
        margin-right: calc(4 / var(--layout-artbord) * 100vw);
    }

    .card__date{
        font-size: calc(12 / var(--layout-artbord) * 100vw);
        
    }

    .card__imgWrapper{
        aspect-ratio: 145 / 97;
        border-radius: calc(19.348 / var(--layout-artbord) * 100vw);
    }

    .card__img{
        /* aspect-ratio: 1050 / 600; */
        border-radius: calc(19.348 / var(--layout-artbord) * 100vw);
    }

    /* ------------------------------------------------------------------------- */
    /* ページネーション */
    /* ------------------------------------------------------------------------- */
    .pagination{
        
        /* width: fit-content; */
        margin-top: calc(134 / var(--layout-artbord) * 100vw);
    }

    .pagination-inner{
        gap: calc(10 / var(--layout-artbord) * 100vw);
    }

    .page-numbers{
        font-size: calc(20 / var(--layout-artbord) * 100vw);
        width: calc(40 / var(--layout-artbord) * 100vw);
        height: calc(40 / var(--layout-artbord) * 100vw);
        /* line-height: calc(34 / var(--layout-artbord) * 100vw); */
        border: calc(1 / var(--layout-artbord) * 100vw) solid var(--color-main);
    }

    .page-numbers.current{
        border: calc(1 / var(--layout-artbord) * 100vw) solid var(--color-main);
    }

    .page-numbers.next,
    .page-numbers.prev {
        font-size: calc(40 / var(--layout-artbord) * 100vw);
        font-weight: 200;
    }
}