@charset "UTF-8";
/* CSS Document */
/*-------------------------------*/

/* POST LIST
投稿リスト */

/*------------------------------*/
/* -------------
コンテナ */
.post-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0 var(--gutter-var-md);

    /* なぜか表示されるスクロールバー対策 / フォーカスのオフセット分のpadding */
    padding: 4px 2px;
}

/* -------------
カード */
.post-list::before,
.post-list::after {
    content: "";
    display: inline-block;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(172rem / 16),
        calc(calc(100% / 4) - var(--gutter-var-md))
    );
    max-width: 100%;
    height: 0px;
}
.post-list__item--empty {
    display: inline-block;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(172rem / 16),
        calc(calc(100% / 4) - var(--gutter-var-md))
    );
    max-width: 100%;
    height: 0px;
}
.post-list::before {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
.post-list__item {
    display: block;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(172rem / 16),
        calc(calc(100% / 4) - var(--gutter-var-md))
    );
    max-width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
}
.post-list__item {
    margin-top: var(--gutter-var-md);
}
.post-list__item a {
    width: 100%;
    height: 100%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
@media (max-width: 959px) {
    .post-list__item,
    .post-list__item--empty,
    .post-list::before,
    .post-list::after {
        width: max(
            calc(140rem / 16),
            calc(calc(100% / 2) - var(--gutter-var-md))
        );
    }
}
@media (max-width: 559px) {
    .post-list__item {
        margin-top: var(--gutter-var-xl);
    }
    .post-list__item:last-child {
        display: initial;
    }
}


/* -------------
画像 */
.post-list__photo {
    display: inline-block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}
.post-list__photo img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
}

/* -------------
テキスト */
.post-list__time {
    font-family: var(--number);
    font-weight: 400;
    font-size: var(--txt-sm);
    line-height: 1.1;
    color: var(--color-main-soft);
    margin-top: 1em;
}
.post-list__headline {
    font-size: var(--txt-reg);
    font-weight: 500;
    line-height: 1.35;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
.post-list__button {
    -ms-flex-item-align: end;
        align-self: flex-end;

    font-family: var(--alphabet);
    font-size: calc(12rem / 16);
    line-height: 1.1;
    color: var(--color-main-pale);

    margin-top: auto;
}
/* 投稿がない場合に表示するテキスト */
.not-post-list {
    width: 100%;
    text-align: center;
}

/* -------------
hover */
@media (any-hover: hover) {
    .post-list__time,
    .post-list__headline,
    .post-list__button {
        -webkit-transition: color .2s var(--easeInSine);
        transition: color .2s var(--easeInSine);
    }
    .post-list__item img {
        -webkit-transition: -webkit-transform .3s var(--linear);
        transition: -webkit-transform .3s var(--linear);
        transition: transform .3s var(--linear);
        transition: transform .3s var(--linear), -webkit-transform .3s var(--linear);
    }
    .post-list__item a:hover *[class*=post-list__]:not(button),
    .post-list__item a:focus-visible *[class*=post-list__]:not(button) {
        color: var(--color-accent);
    }
    .post-list__button:hover,
    .post-list__button:focus-visible {
        color: var(--color-main-soft);
    }
    .post-list__item a:hover:has(.post-list__button:hover) .post-list__time,
    .post-list__button:focus-visible:has(.post-list__button:focus-visible ) .post-list__time {
        color: var(--color-main-soft);
    }
    .post-list__item a:hover:has(.post-list__button:hover) .post-list__headline,
    .post-list__button:focus-visible:has(.post-list__button:focus-visible ) .post-list__headline {
        color: var(--color-bk);
    }
    .post-list__item a:hover img,
    .post-list__item a:focus-visible img {
        -webkit-transform: scale(1.1);
                transform: scale(1.1);
    }
}