/* 記事一覧ページ用CSS */

/* ======================================== */
/*　ブログ記事一覧　*/
/*　※VIP限定特典一覧でも共通で使用　*/
/* ======================================== */

.blog-list {
    & .blog-list_inner {
        display: flex;
        flex-direction: column;
        gap: calc(40 * var(--px));
        padding: calc(56 * var(--px)) calc(16 * var(--px));
    }

    & .blog-list_main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(40 * var(--px));
    }

    & .sec-heading_text {
        letter-spacing: 0.08em;
    }
}

/* カテゴリ（.active で current 表示） */
.blog-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    row-gap: calc(16 * var(--px));
    width: 100%;

    & a {
        padding: 0 calc(8 * var(--px)) calc(16 * var(--px));
        border-bottom: 1px solid #D3C8BD;
        font-weight: 500;
        font-size: calc(14 * var(--px));
        line-height: 1.5;
        letter-spacing: 0.08em;
        text-align: center;
        white-space: nowrap;
    }

    & .active a {
        border-bottom: 2px solid var(--text);
        font-weight: 700;
    }
}

/* 記事リスト */
.blog-items {
    width: 100%;
    padding: calc(8 * var(--px)) calc(12 * var(--px));
    border-radius: calc(8 * var(--px));
    background-color: var(--white);

    & li:not(:last-child) {
        border-bottom: 1px solid #E2DBD5;
    }
}

.blog-item {
    display: flex;
    gap: calc(16 * var(--px));
    padding-block: calc(16 * var(--px));

    & .blog-item_thumb {
        flex-shrink: 0;
        width: calc(110 * var(--px));
        height: calc(110 * var(--px));
        border-radius: calc(8 * var(--px));
        overflow: hidden;

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

    & .blog-item_body {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    & .blog-item_meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(8 * var(--px));
    }

    & .blog-item_new {
        display: inline-flex;
        align-items: flex-end;
        gap: calc(2 * var(--px));
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: calc(12 * var(--px));
        line-height: 1;
        letter-spacing: 0.08em;
        color: #D44737;

        /* 左右の斜線 */
        &::before,
        &::after {
            content: "";
            width: calc(1 * var(--px));
            height: calc(10 * var(--px));
            background: url(../img/icon_new_line.svg) center / 100% 100% no-repeat;
        }

        &::before {
            rotate: -30deg;
        }

        &::after {
            rotate: 30deg;
        }
    }

    & .blog-item_date {
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: calc(12 * var(--px));
        line-height: 1;
        letter-spacing: 0.08em;
        color: var(--sub);
    }

    & .blog-item_title {
        margin-top: calc(8 * var(--px));
        font-family: var(--font-gothic);
        font-weight: 500;
        font-size: calc(14 * var(--px));
        line-height: 1.5;
        letter-spacing: 0.08em;
    }

    & .blog-item_arrow {
        align-self: flex-end;
        width: calc(25.3333 * var(--px));
        margin-top: auto;
    }
}

@media (hover: hover) {
    .blog-item:hover .blog-item_thumb img {
        transform: scale(1.05);
    }
}

/* ページャー（.active で current 表示） */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--px));

    & .pager_list {
        display: flex;
        align-items: center;
        gap: calc(8 * var(--px));

        & a,
        & span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(40 * var(--px));
            height: calc(40 * var(--px));
            border: 1px solid var(--sub);
            border-radius: 50%;
            font-family: var(--font-gothic);
            font-weight: 500;
            font-size: calc(15 * var(--px));
            line-height: 1;
            letter-spacing: 0.08em;
            color: var(--sub);
        }

        & .active a,
        & .active span {
            background-color: var(--sub);
            color: var(--white);
        }
    }

    & .pager_dots img {
        width: calc(14 * var(--px));
    }

    & .pager_next img {
        width: calc(13.6 * var(--px));
        /* 上向きのchevronを右向きに */
        rotate: 90deg;
    }
}

/* ======================================== */
/*　VIP限定特典一覧　*/
/*　※ブログ記事一覧との差分のみ記述　*/
/* ======================================== */

/* 暗い背景（色の上にテクスチャを輝度で重ねる） */
.sub-contents--dark {
    position: relative;
    isolation: isolate;
    background-color: #6C5846;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: url(../img/benefit_texture.jpg) center top / cover no-repeat;
        mix-blend-mode: luminosity;
        opacity: 0.2;
        pointer-events: none;
    }
}

/* カテゴリ（暗い背景用・1行4列） */
.blog-tabs--dark {
    grid-template-columns: repeat(4, 1fr);

    & a {
        color: var(--base);
    }

    & .active a {
        border-bottom-color: #EAC241;
        color: #EAC241;
    }
}