@charset "UTF-8";

/* 各種トプ100＝マイベストのトップの一覧の型（左に写真・右にジャンル・題・商品数・タグの4行・右端に矢印）。
   1行が1記事。PCは2列・959px以下は1列。カードにせず細い罫で区切る（2026-10-14 代表指示）。 */
body.page-home .top100-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.page-home .top100-row { border-bottom: 1px solid var(--hair); }
body.page-home .top100-row__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 8px;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--home-round-sm);
  transition: background var(--transition);
}
body.page-home .top100-row__link:hover { background: var(--kaki-tint); }
/* 写真の箱は幅だけ決め、高さは右の4行と同じになるよう行いっぱいに伸ばす（代表指示 2026-10-14）。
   幅は 600:315 の写真がほぼそのまま入る値（PC 184px ≈ 4行の約97px）。中の写真は object-fit で箱に合わせる。 */
body.page-home .top100-row__image {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  align-self: stretch;
  width: 184px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--kaki-tint);
}
body.page-home .top100-row__thumb { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }   /* 切るときは右だけ＝左の札（ジャンル名・TOP100）を残す */
body.page-home .top100-row__fallback { width: 48%; color: var(--kaki); }
body.page-home .top100-row__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
body.page-home .top100-row__genre { font-size: 1rem; font-weight: 700; line-height: 1.5; }
body.page-home .top100-row__title {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: nowrap;      /* 題は1行に収め、入り切らない分は…で切る（代表指示 2026-10-14） */
  text-overflow: ellipsis;
}
body.page-home .top100-row__count { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-soft); }
body.page-home .top100-row__tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--sun);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
}
body.page-home .top100-row__link .home-arrow { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ink-soft); }

@media (max-width: 959px) {
  body.page-home .top100-list { grid-template-columns: minmax(0, 1fr); }   /* 1fr だけだと1行に収めた題の幅で列が広がり、矢印が画面の外に出る */
}
@media (max-width: 599px) {
  body.page-home .top100-row__link { gap: 12px; padding: 12px 4px; }
  body.page-home .top100-row__image { width: 144px; }   /* 4行の約90px に対し写真は上下を少し切って合わせる。160px だと右の列が狭くなり「ドリップバッグコーヒー」が2行に折れる */
  body.page-home .top100-row__genre { font-size: 0.875rem; }
  body.page-home .top100-row__title { font-size: 0.75rem; }
  body.page-home .top100-row__count { font-size: 0.75rem; }
  body.page-home .top100-row__link .home-arrow { width: 16px; height: 16px; }
}