/* =========================================================
   BLOG LIST
   ========================================================= */

.blog-section {
  width: 100%;

  padding:
    clamp(70px, 9vw, 130px)
    0;

  background: #8d8d8d;
}


.blog-inner {
  width:
    min(
      1100px,
      calc(100% - 32px)
    );

  margin:
    0
    auto;

  padding:
    clamp(36px, 5vw, 64px)
    clamp(18px, 3vw, 40px);

  background-image:
    url("../img/top_page_image/Texture.jpg");

  background-repeat:
    repeat;

  background-position:
    center;

  box-shadow:
    0 14px 34px rgba(0,0,0,.24),
    0 4px 10px rgba(0,0,0,.16);
}


.blog-list {
  display:
    grid;

  gap:
    clamp(14px, 2vw, 24px);
}


/* =========================================================
   THUMBNAIL
   ========================================================= */

.blog-list-item {
  width:
    100%;

  overflow:
    hidden;

  background:
    #ddd;
}


.blog-list-item-image {
  display:
    block;

  width:
    100%;

  /*
    横に細長い帯として表示
  */
  aspect-ratio:
    5 / 1;

  object-fit:
    cover;

  /*
    「画像の上側」を優先してトリミング
  */
  object-position:
    center top;
}




.blog-list-item-link {
  display: block;
  width: 100%;

  overflow: hidden;

  text-decoration: none;
}


.blog-list-item-image {
  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    filter .35s ease;
}


.blog-list-item-link:hover .blog-list-item-image {
  transform:
    scale(1.015);

  filter:
    brightness(.94);
}


.blog-list-item-link:focus-visible {
  outline:
    2px solid #222;

  outline-offset:
    4px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.blog-pagination {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  align-items:
    center;

  gap:
    6px;

  margin-top:
    clamp(30px, 4vw, 52px);
}


.blog-page-button {
  min-width:
    34px;

  height:
    34px;

  padding:
    0
    9px;

  border:
    0;

  background:
    transparent;

  color:
    #333;

  font:
    inherit;

  cursor:
    pointer;

  border-radius:
    4px;
}


.blog-page-button:hover {
  background:
    rgba(0,0,0,.07);
}


.blog-page-button.is-active {
  background:
    #222;

  color:
    #fff;

  cursor:
    default;
}


.blog-pagination-ellipsis {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    26px;

  height:
    34px;

  color:
    #666;
}


/* =========================================================
   STATE
   ========================================================= */

.blog-state {
  margin:
    0;

  padding:
    50px
    20px;

  text-align:
    center;

  color:
    #555;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .blog-section {
    padding:
      54px
      0
      80px;
  }


  .blog-inner {
    width:
      calc(100% - 24px);

    padding:
      24px
      14px;
  }


  .blog-list {
    gap:
      10px;
  }


  .blog-list-item-image {
    aspect-ratio:
      4 / 1;
  }
}
/* セクション内の横幅いっぱいに広げる */
#blog > .blog-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

#blog .blog-list {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

#blog .blog-list-item,
#blog .blog-list-item-link,
#blog .blog-list-item-image {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}