@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// LOG 一覧（NEWS の style.css をベースに2列化。Figma に一覧のデザインは無い）
///// 共通部品（背景・左のロゴ・ガラス調カード・単位 --d）は common/css/detail.css
///// 設計書：docs/specs/2026-10-08-log-list-design.md
//////////////////////////////////////////////////////////////////// */
/* ==================================================
記事一覧
・SP：1列 / TAB（769px〜）・PC（961px〜）：2列。PC の間隔は NEWS と同じ 48px
================================================== */
.LogAllArea {
  position: relative;
  z-index: 10;
  padding: calc(120 * var(--d)) calc(16 * var(--d)) calc(80 * var(--d));
}
.logLists {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(24 * var(--d));
}

/* カード：内側の余白 16px、下だけ 30px。詳細ページが無い記事は a の代わりに div.cardInner */
.logList .cardInner {
  display: block;
  padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(30 * var(--d));
  color: inherit;
  text-decoration: none;
}

/* 画像：3:2。上に薄い白のすりガラスを重ね、ホバーで外す（NEWS と同じ。共通のサムネイルカード .dtThumbImg。detail.css） */
.logList .imgObj {
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.logList .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真が無い記事：グレー枠に COMING SOON（文字は detail.css の .mediaObj .labelObj.is-en と同じ） */
.logList .imgObj.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dtGray);
}
.logList .imgObj.is-blank span {
  font-size: max(10px, calc(12 * var(--d)));
  line-height: 1.7;
  color: var(--dtTxt);
}

/* 日付＋タグ（詳細ページの .metaGlp と同じ見た目） */
.logList .metaGlp {
  display: flex;
  gap: 1.5em;
  margin-top: calc(16 * var(--d));
  font-size: calc(12 * var(--d));
  line-height: calc(17 * var(--d));
  opacity: 0.7;
}

/* タイトル：2行ぶんの高さ（14px × 1.5 × 2）で固定、超えた分は「…」 */
.logList .ttl {
  height: calc(42 * var(--d));
  margin-top: calc(8 * var(--d));
  font-size: calc(14 * var(--d));
  line-height: 1.5;
  color: #231815;
}
.logList .ttl span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

@media screen and (min-width: 769px) {
  .logLists {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 961px) {
  .LogAllArea {
    padding: calc(119 * var(--d)) calc(32 * var(--d)) var(--dtFtrGap) calc(291 * var(--d)); /* 下はフッターまで 20vw（下層共通） */
  }
  .logLists {
    gap: calc(48 * var(--d));
  }
}