/* ===== BEGIN CONTENTS ===== */

.archive .body .wrapper {
    padding: 10px 20px;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
}
.contents {
    flex: 1;
    min-width: 0;
    padding: 40px 200px;
}

@media screen and (max-width:769px) {
  .contents {
      padding: 5px 10px;
  }
}

/* ---------- Card ---------- */
.news-card { padding: 16px 0 24px; border-bottom: 1px solid #eee; }
.news-card__link { 
  display:block; 
  color:inherit; 
  text-decoration:none; 
}

/* 左サムネ + 右コンテンツ */
.news-card__inner{
  display:grid;
  grid-template-columns: clamp(220px, 28vw, 360px) 1fr;
  gap: 28px;
  align-items: center;
}

@media screen and (max-width:769px) {
  .news-card__inner{
    grid-template-columns: clamp(100px, 28vw, 260px) 1fr;
    gap: 16px;
  }
  
}

/* ---------- Thumbnail ---------- */
.news-card__thumbnail{
  position: relative;
  aspect-ratio: 16 / 9;               /* 画像枠の比率を固定 */
  border-radius: 16px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  outline: 1px solid #e5e5e5;         /* 薄い枠線 */
  overflow:hidden;
}
.news-card__thumbnail img{
  width:100%; height:100%;
  object-fit: cover;
  border-radius: 12px;                 /* 内側も角丸 */
  display:block;
}

/* ---------- Meta（日付 + カテゴリ） ---------- */
.news-card__meta{
  display:flex; align-items:center; gap: 12px;
  margin: 4px 0 10px;
}
.news-card__date{
  color:#8a8f98;
  font-size:14px;
  letter-spacing:.06em;
  font-variant-numeric: tabular-nums; /* YYYY.mm.dd を整列 */
}
.news-card__category{
  display:inline-block;
  padding: .45em .9em;
  background:#dfe6d6;                 /* 画像の色味に近い淡グリーン */
  color:#2e3a2f;
  border-radius: 12px;
  line-height:1;
}

/* ---------- Title ---------- */
.news-card__title{
  margin:0;
  font-weight:700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height:1.25;
  color:#111;
  white-space: nowrap;                 /* 1行で省略 */
  overflow: hidden;
  text-overflow: ellipsis;
}

@media screen and (max-width:769px) {
  .news-card__date{
    font-size:10px;
  }

  .news-card__category{
    padding: .3em .6em;
    font-size: 10px;
  }
  .news-card__category {
    font-size: 10px;
  }

  .news-card__title{
    font-size: clamp(10px, 2.2vw, 18px);
    white-space: break-spaces;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    
}

/* ===== END CONTENTS ===== */