@media screen and (min-width: 960px) {
  /* PC */
  /* ----------  ---------- */
  nav.blog__category-list {
    display: flex;
    align-items: center;

    padding-bottom: 1.05rem;

    border-bottom: 1px solid var(--main-color-code);

    overflow-x: scroll;
  }

  nav.blog__category-list::-webkit-scrollbar {
    display: none;
  }

  .blog__category-list__item {
    margin-right: 1.25rem;
    flex-shrink: 0;
  }
  .blog__category-list__item:last-of-type {
    margin-right: 0;
  }

  .blog__category-list__item a {
    color: rgb(var(--main-color-rgb) / 0.575);
    text-decoration: none;

    padding-top: 0.25rem;
    padding-right: 0.35rem;
    padding-bottom: 0.25rem;
    padding-left: 0.35rem;

    transition-property: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .blog__category-list__item a.is-active {
    color: #000000;

    pointer-events: none;
  }

  .blog__category-list__item a:hover {
    color: #000000;
  }


  .blog__article-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    grid-template-rows: minmax(0px, 1fr);
    grid-column-gap: 1.85rem;
    grid-row-gap: 1.85rem;
    grid-auto-rows: auto;
    
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
  }

  .blog__article-list .article-list-item {
    width: 100%;
    height: 100%;
  }

}

@media screen and (max-width: 959px) {
  /* Tablet and Mobile */
  /* ----------  ---------- */
  nav.blog__category-list {
    display: flex;
    align-items: center;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--main-color-code);

    overflow-x: scroll;
  }

  nav.blog__category-list::-webkit-scrollbar {
    display: none;
  }

  .blog__category-list__item {
    margin-right: 0.575rem;
    flex-shrink: 0;
  }
  .blog__category-list__item:last-of-type {
    margin-right: 0;
  }

  .blog__category-list__item a {
    color: rgb(var(--main-color-rgb) / 0.575);
    text-decoration: none;
    font-size: var(--font-size-tiny);

    padding-top: 0.15rem;
    padding-right: 0.275rem;
    padding-bottom: 0.15rem;
    padding-left: 0.275rem;

    transition-property: all;
    transition-duration: 0.33s;
    transition-timing-function: ease;
  }

  .blog__category-list__item a.is-active {
    color: #000000;

    pointer-events: none;
  }

  .blog__category-list__item a:hover {
    color: #000000;
  }


  .blog__article-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    grid-template-rows: minmax(0px, 185px);
    grid-column-gap: 1.15rem;
    grid-row-gap: 1.25rem;
    grid-auto-rows: 185px;
    
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }

  .blog__article-list .article-list-item {
    width: 100%;
    height: 100%;
  }

}