@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// NEWS（Figma「PC_NEWS - ALL」108:439）
///// 共通部品（背景・左のロゴ・ガラス調カード・単位 --d）は common/css/detail.css
//////////////////////////////////////////////////////////////////// */

/* 背景：Figma では 1280×900 の写真を上に 68px ずらして 832px の画面に表示 */
.bgObj {
  --bgL: 0%;
  --bgT: -8.17%;
  --bgW: 100%;
  --bgH: 108.17%;
}
/* 背景写真のぼかしを外す（2026-10-19 ユーザー指定。ガラスのゆがみの試作 3.29 の見え方を試すため。戻すときはこの指定を消す）
・写真の切り抜きを変えないよう、外に広げる幅（inset: -28px）は共通のまま */
.bgObj picture {
  filter: none;
}
/* 背景に重ねている薄いグレー（common/css/detail.css の .bgObj::before）も外す（2026-10-19 ユーザー指定。戻すときはこの指定を消す） */
.bgObj::before {
  content: none;
}

/* ==================================================
記事一覧
・SP：2列（2026-10-19 ユーザー指定。以前は1列）/ TAB：2列 / PC：3列（Figma：カード 287×308、間隔 48px）
================================================== */
.NewsAllArea {
  position: relative;
  z-index: 10;
  padding: calc(120 * var(--d)) calc(16 * var(--d)) calc(80 * var(--d));
}
.newsLists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(16 * var(--d)) calc(11 * var(--d));
}

/* カード：内側の余白 16px、下だけ 30px（SP は2列で幅が狭いので 10px、下 18px） */
.newsList a {
  display: block;
  padding: calc(10 * var(--d)) calc(10 * var(--d)) calc(18 * var(--d));
  color: inherit;
  text-decoration: none;
}
/* SP（2列）：タイトルは 11px・3行ぶんの高さ、日付は 10px */
@media screen and (max-width: 768px) {
  .newsList .ttl {
    height: calc(11 * 1.45 * 3 * var(--d));
    margin-top: calc(10 * var(--d));
    font-size: calc(11 * var(--d));
  }
  .newsList .date {
    font-size: max(9px, calc(10 * var(--d)));
  }
}
@media screen and (min-width: 769px) {
  .newsLists {
    gap: calc(24 * var(--d));
  }
  .newsList a {
    padding: calc(16 * var(--d)) calc(16 * var(--d)) calc(30 * var(--d));
  }
}

/* 画像：上に薄い白のすりガラス（Figma の GLASS 4）を重ね、ホバーで外す（共通のサムネイルカード .dtThumbImg。detail.css） */
.newsList .imgObj {
  aspect-ratio: 255 / 166;
}
.newsList .imgObj img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* タイトル：枠の高さは Figma の 58px で固定、文字は3行まで（超えた分は「…」） */
.newsList .ttl {
  height: calc(58 * var(--d));
  margin-top: calc(16 * var(--d));
  font-size: calc(12 * var(--d));
  line-height: 1.45;
  color: #231815;
}
.newsList .ttl span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.newsList .date {
  margin-top: calc(5 * var(--d));
  font-size: calc(12 * var(--d));
  line-height: calc(17 * var(--d));
}

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

@media screen and (min-width: 961px) {
  .NewsAllArea {
    padding: calc(119 * var(--d)) calc(32 * var(--d)) var(--dtFtrGap) calc(291 * var(--d)); /* 下はフッターまで 20vw（下層共通） */
  }
  .newsLists {
    grid-template-columns: repeat(3, 1fr);
    gap: calc(48 * var(--d));
  }
}