/* ====================================== */
/* 以下archive-blog.php用のCSS - 開始 - */
/* ====================================== */

div#blog-archive,
div#blog-taxonomy {
    /* background-color: var(--color-gray); */

    h4 {
        text-align: center;
        line-height: 1.2;
        color: var(--color-primary);
        font-size: 2rem;
        font-weight: bold;
        padding-top: 4rem;
    
        @media(max-width: 768px) {
            font-size: 1.5rem;
        }
    }
    
    .sub-title-bold {
        margin-top: 40px;
        text-align: center;
        font-size: 1rem;
        font-weight: bold;

        @media(max-width: 768px) {
            margin-top: 24px;
        }
    }

    /* ====================================== */
    /* ブログ一覧用のレイアウト追加 - 開始 - */
    /* ====================================== */
    .blog-list { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 16px; 
        margin-top: 40px; 

        @media(max-width: 768px) {
            margin-top: 24px;
        }
    }

    .blog-item { 
        /* width: calc(50% - 16px);  */
        width: calc((100% - 16px) / 2);
        box-sizing: border-box; 
        border: 1px solid #ddd; 
        border-radius: 4px; 
        overflow: hidden; 
        background: #fff; 
        transition: transform 0.3s; 
    }

    .blog-item:hover { 
        transform: translateY(-4px); 
    }

    .blog-item:active { 
        transform: translateY(0); 
    }

    .blog-item a { 
        display: block; 
        text-decoration: none; 
        color: inherit; 
        padding: 16px; 
    }

    .blog-item .thumb img { 
        width: 100%; 
        height: auto; 
        display: block; 
    }

    .blog-item .meta { 
        display: flex; 
        justify-content: space-between; 
        margin-top: 12px; 
        padding-bottom: 8px;
        box-sizing: border-box;
        border-bottom: solid 1px #ddd;
        color: var(--color-darkgray); 
        font-size: 0.875rem; 
    }

    .blog-item .title { 
        margin-top: 8px; 
        font-size: 1rem; 
        font-weight: bold; 
        line-height: 1.4; 
    }

    @media (max-width: 768px) { 
        .blog-item { 
            width: 100%; 
        }
    }
    /* ====================================== */
    /* ブログ一覧用のレイアウト追加 - 終了 - */
    /* ====================================== */
}


/* ======================================= */
/* 以上archive-blog.php用のCSS - 終了 - */
/* ======================================= */