/* ----------------------------------------
BLOG LIST PARTS:ブログの一覧パーツ
---------------------------------------- */
.blog-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    --space-min: 20;
    --space-max: 84;
    margin-bottom: var(--space);
}

.blog-list__link {
    background: var(--color-bg-sub);
    padding: 24px 30px 38px;
    display: block;
}

@media (hover: hover) and (pointer: fine) {
    .blog-list__link:hover {
        background: #faf6f180;
    }
}

.blog-list article {
    display: flex;
    --space-min: 20;
    --space-max: 98;
    column-gap: var(--space);
    justify-content: space-between;
    align-items: flex-start;
}

.blog-list__head {
    flex: 5.5;
}

/* 日付とNEW */
.blog-list__meta {
    display: flex;
    align-items: center;
    margin-bottom: 1.9em;
}

/* 日付 */
.blog-list time {
    display: inline-block;
    font-size: 14px;
    font-family: var(--fontFamily-en);
    color: #F7A60C;
    margin-right: 1.5em;
}

/* NEW */
.blog-list__new {
    display: inline-block;
    background: var(--color-main);
    color: #fff;
    padding: 5px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-family: var(--fontFamily-en);
}

.blog-list__new.is-hidden {
    visibility: hidden;
    /* 領域は保持、表示のみ消す */
}

/* タイトル */
.blog-list h3 {
    --font-min: 16;
    --font-max: 24;
    font-size: var(--font-size);
    flex: 0 0 auto;
}

.blog-list .circle-arrow {
    width: 2em;
    height: 2em;
    align-self: flex-end;
    margin-bottom: 0.2em
}

/* 説明文 */
.blog-list p {
    flex: 4.5;
    font-weight: var(--wght-bold);
    color: #726E6E;
    line-height: 1.64;
}

/* ----------------------------------------
トップページのレスポンシブデザイン
---------------------------------------- */

@media (width < 800px) {
    .home {

        .blog-list__link {
            background: var(--color-bg-sub);
            padding: 1em 1.5em 1.2em;
            display: block;
        }

        /* 日付とNEW */
        .blog-list__meta {
            display: flex;
            align-items: center;
            margin-bottom: 0.5em;
        }

        /* トップページの独自デザインは削除 */
        /* .blog-list {
            gap: 16px;
        }

        .blog-list__link {
            padding: 0.5em 11px 0.3em;
            display: block;
            --font-min: 16;
            --font-max: 24;
            font-size: var(--font-size);
        }

        .blog-list__head {
            display: flex;
        }

        .blog-list h3 {
            flex: 1;
            margin-bottom: 0;
        }

        .blog-list__meta {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 0;
        }

        .blog-list__meta time {
            font-size: 16px;
            font-family: var(--fontFamily-base);
            color: var(--color-base);
            order: 1;
            margin-bottom: 0;
        }

        .blog-list__meta .blog-list__new {
            order: 0;
        } */
    }
}



/* ----------------------------------------
アーカイブページのデザイン
---------------------------------------- */

/* タイトル */
.blogs .blog-list h3 {
    --font-min: 20;
    --font-max: 24;
    font-size: var(--font-size);
}

@media (width < 800px) {
    .blogs {

        .blog-list {
            gap: 20px;
        }

        .blog-list__link {
            padding: 16px 11px 64px;
            display: block;
        }

        .blog-list__head {
            display: flex;
            flex-direction: column;
        }

        .blog-list h3 {
            flex: 1;
            margin-bottom: 0;
        }

        /* 日付とNEW */
        .blog-list__new {
            padding: 4px 10px;
            line-height: 1;
        }

        .blog-list__meta time {
            font-size: 16px;
            margin-right: 1.3em;
        }

        .blog-list__meta .blog-list__new {}
    }
}