<style>
  .top_blog_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .top_blog_list>li {
    width: 50%;
    /* margin-bottom: 40px; */
    position: relative;
  }

  .top_blog_list>li:before {
    position: absolute;
    content: '';
    background: #486295;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.3s;
  }

  .top_blog_list>li:hover:before {
    opacity: 0.3;
  }

  .top_blog_list>li>a {
    padding: 60px;
    display: block;
    color: #fff;
    position: relative;
    z-index: 1;
    height: 100%;
  }

  .top_blog_list>li>a h2 {
    margin-bottom: 50px;
    font-size: 34px;
  }

  .top_blog_list>li>a time {
    display: block;
  }

  .top_blog_list>li>a .t_blog_item {
    border: 1px solid #fff;
    padding: 4px 8px;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 8px;
  }

  .top_blog_list>li>a .t_blog_text {
    margin-top: 2px;
  }

  .top_blog_list>li>a .t_blog_button {
    margin-top: 80px;
    text-align: right;
    padding-right: 90px;
    position: relative;
  }

  .top_blog_list>li>a .t_blog_button:after {
    position: absolute;
    content: '';
    background: #fff;
    width: 68px;
    height: 1px;
    top: 50%;
    right: 0;
    transform: translate(0%, 0%);
  }

  @media screen and (max-width: 768px) {
    .top_blog_list>li {
      width: 100%;
    }

    .top_blog_list>li>a {
      padding: 60px 30px;
    }

    .top_blog_list>li>a h2 {
      font-size: 25px;
    }
  }
</style>
<ul class="top_blog_list">
  <?php
  // カテゴリーの取得
  $categories = get_categories();
  foreach ($categories as $category) :
    if ($category->term_id == 1) { // 特定のカテゴリーを非表示にする
      continue; // 次のカテゴリーへ移動
    } ?>
    <?php
    // 画像
    if (SCF::get_term_meta($category->term_id, 'category', 'category_image')) {
      $image = SCF::get_term_meta($category->term_id, 'category', 'category_image');
      $image = wp_get_attachment_image_src($image, 'full');
      $image_url = esc_url($image[0]);
    } else {
      $image_url = "";
    }
    ?>
    <li class="fadein" style="background: url(<?php echo $image_url; ?>) center / cover;">
      <a href="<?php echo esc_url(get_category_link($category->term_id)); ?>">
        <?php
        // カテゴリー名を表示
        echo '<h2>' . esc_html($category->name) . '</h2>';
        // クエリの設定
        $args = array(
          'cat' => $category->term_id,
          'posts_per_page' => 1,
          'order' => 'ASC' // 最初の投稿を取得
        );
        // クエリの実行
        $query = new WP_Query($args);
        // 投稿があるかどうかチェック
        if ($query->have_posts()) {
          while ($query->have_posts()) {
            $query->the_post(); ?>
            <p class="t_blog_item">NEW</p>
            <time datetime="<?php the_time('Y-m-d') ?>"><?php the_time('Y.m.d') ?></time>
            <p class="t_blog_text"><?php echo get_the_title(); ?></p>
        <?php }
          wp_reset_postdata();
        } ?>
        <p class="t_blog_button">一覧はこちら</p>
      </a>
    </li>
  <?php endforeach; ?>
</ul>