/* ============================================================
   topics-list.css
============================================================ */

/* ── Topics リスト ── */
.topics-list {
  display: flex;
  flex-direction: column;
}

.topics-item {
  display: grid;
  grid-template-columns:120px 1fr auto;
  align-items: center;
  gap:2rem;
  padding-block: 1.25rem;
  color: var(--color-dark);
  transition: opacity .2s;
}
.topics-item:focus-visible { outline: 2px solid var(--color-dark); outline-offset: 2px; }

/* サムネイル */
.topics-item__thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--color-sub-bg); }
.topics-item__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.topics-item:hover .topics-item__thumb img { transform: scale(1.06); }

/* 本文エリア */
.topics-item__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.topics-item__date  {
  color: var(--color-border);margin-bottom: 0.3em;
  font-size: var(--en-s-size); 
}
.topics-item__title {
  font-family: var(--font-ja); font-weight: var(--fw-ja);
  font-size: var(--ja-body-size); 
  line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* 矢印丸ボタン（::after で矢印描画） */
.topics-item__arrow {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border: 1px solid var(--color-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, color .2s;
}
.topics-item:hover .topics-item__arrow { background: var(--color-dark); color: var(--color-white); }

/* SP */
@media (max-width: 768px) {
  .topics-item { grid-template-columns: 1fr 3fr; gap: 1.5em; padding-block:2em;}
  .topics-item__thumb {aspect-ratio: 1/1;}
  .topics-item__arrow{display: none;}
}