.articleListComponent{
  color:#2D313F;
  background:#fff;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* Filter */
.articleListComponent .filterBar{
  background:#F5F5F5;
  padding:20px 16px;
}
.articleListComponent .filterBar__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.articleListComponent .chip{
  background:#fff;
  color:#2D313F;
  border:none;
  border-radius:4px;
  font-size:1.6rem;
  padding:0 2em;
  height:30px;
}
.articleListComponent .chip.is-active{
  background:#545863;
  color:#fff;
}
.articleListComponent .chip:hover{
  cursor: pointer;
}
.articleListComponent .filterCount{
  margin-top:20px;
  font-size:1.6rem;
  font-weight: bold;
}

/* Grid */
.articleListComponent .articles__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px 24px;
  margin-top:20px;
}

/* Card */
.articleListComponent .card{
  position:relative;
}
.articleListComponent .card__link{
  text-decoration:none;
  color:inherit;
  display:block;
  height: 100%;
}
.articleListComponent .card__thumb{
 overflow: hidden;
}
.articleListComponent .card__thumb img{
  width:100%;
  display:block;
  transition: transform 0.2s ease;
}
.articleListComponent .card__body{
  background:#F6F6F6;
  padding:20px;
  height: 100%;
}
.articleListComponent .card__date{
  display:block;
  margin-top:6px;
  color:#555;
}
.articleListComponent .tagList{
  margin-top:10px;
  list-style:none;
  padding:0;
}
.articleListComponent .tag{
  background:#545863;
  color:#fff;
  border-radius:2px;
  font-size:14px;
  padding:0 2em;
  height:25px;
  display:inline-flex;
  align-items:center;
}
.articleListComponent .card:hover .card__thumb img{
  transform: scale(1.1);
}
/* Hover red line */
.articleListComponent .card::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #d80c24;
  opacity:0;
  border-radius:4px;
  transition:opacity .2s ease;
  pointer-events:none;
}
.articleListComponent .card:hover::after{
  opacity:1;
}

/* Footer */


.articles__footer {
    margin-top: 66px;
    display: flex;
    justify-content: center;
}
  .articleListComponent .btn{
    width: 300px;
    height: 60px;
    background: #D80B24;
    color: #ffffff;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    cursor: pointer;
  position: relative;
  }
  .articleListComponent .btn:hover{
    background-color: #ad0014;
  }

  /* ▼ 矢印（「＞」を下向きにした形） */
  .articleListComponent .btn::after{
    content: '';
    width: 9px;
    height: 9px;
    border: 0;
    border-bottom: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: -2px;
    right: 20px;
    bottom: 0;
    margin: auto;
  }



/* ---- Filter background only behind tag buttons ---- */
.articleListComponent .filterBar{
  background: transparent;
  padding: 0;
}
.articleListComponent .filterBar__buttonsWrap{
  background:#F5F5F5;
  padding:20px 16px;
}
.articleListComponent .filterCount{
  background: transparent;
  padding: 0 16px;
}

/* ---- Card radius restore ---- */
.articleListComponent .card{
  border-radius: 8px;
  overflow: hidden;
}
.articleListComponent .card::after{
  border-radius: 8px;
}

/* ---- Switch / load animation ---- */
.articleListComponent .anim-enter{
  opacity: 0;
  transform: translateY(8px);
}
.articleListComponent .anim-enter.is-shown{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease;
}
.articleListComponent .anim-leave{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.articleListComponent .anim-leave.is-gone{
  opacity: 0;
  transform: translateY(8px);
}


/* ---- h2 title adjustments ---- */
.articleListComponent .card__title{
  font-size: 1.6rem;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 24px;
}


/* =============================
   Responsive (SP)
   - SPでは1列（縦積み）
============================= */
@media (max-width: 767px){
  .articleListComponent .articles__grid{
    grid-template-columns: 1fr;
    gap: 36px 24px;
  }
  .articleListComponent .filterBar__buttons{
    gap:9px;
  }
  /* タグボタンを押しやすく（高さ維持しつつ横幅に馴染ませる） */
  .articleListComponent .chip{
    height: auto;
    padding: 6px 1.5em;
    font-size:1.4rem;
  }

  /* 余白を少し詰める（必要最低限） */
  .articleListComponent .card__body{
    padding: 22px 16px;
  }
}