/* ==========================================================================
   news-item.css — トップ／NEWS一覧で共有するお知らせ1件の行

   リストの置き場所（2カラムの右半分か、下層の本文幅か）は各ページCSSが担当する。
   行の構造・区切り線・日付と本文の組版は必ずここを使用する。
   works-card.css と同じ考え方で、ページ固有CSSへ複製しない。
   ========================================================================== */

.c-news-list {
  width: 100%;
}

.c-news-item {
  border-bottom: 1px solid transparent;
  background-image: var(--line-dash-x);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
}

.c-news-item__link {
  display: block;
  padding: var(--space-y-40) 0;
  color: inherit;
}

.c-news-item__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.5;
  letter-spacing: 0.13em;
  color: var(--color-text-muted);
  font-feature-settings: "palt" 1;
}

.c-news-item__title {
  display: block;
  margin-top: var(--space-y-10);
  font-family: var(--font-mincho-m);
  font-weight: normal;
  font-size: var(--fs-16);
  line-height: 2;
  letter-spacing: 0.15em;
  color: var(--color-text);
  font-feature-settings: "palt" 1;
}

/* LOAD MORE の追加分で、行が 1 件ずつ入ってくる。WORKS のカードにも同名の
   is-entering があるが、動きは別々に持つ（上の works-card.css を参照）。 */

/* fill-mode は backwards だけにする。遅延中は from（透明）で待たせる必要が
   あるが、to は要素の素の状態と同じなので forwards まで広げる意味が無い。
   both のままだと再生後もアニメーションが値を当て続け、合成レイヤーと
   終了状態が要素に残る。 */
.c-news-item.is-entering {
  animation: c-news-enter 0.4s var(--ease) backwards;
}

@keyframes c-news-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}