/* =============================================================================
   news.css — News（お知らせ）
   ============================================================================= */

.news {
  padding: 30px 0 115px;
  display: grid;
  grid-template-columns: .7fr 1.5fr;
  gap: 80px;
}

.news-heading > .text-link {
  margin-top: 35px;
}

.news-row {
  display: grid;
  grid-template-columns: 85px 1fr 24px;
  column-gap: 18px;
  align-items: baseline;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}

.news-row:first-child {
  padding-top: 14px;
}

.news-row time {
  color: var(--text-muted);
}

.news-row h3 {
  line-height: 1.9;
}

.news-row .arrow {
  color: var(--accent);
}

/* ホバー：行の背後にうっすらと白い面を敷く。文字の左右へはみ出し、内容の後ろに置くので、
   行の中身は動かず、下の罫線も位置を保つ。 */
.news-row {
  position: relative;
  isolation: isolate;
}

.news-row::before {
  content: '';
  position: absolute;
  inset: 0 -20px;
  z-index: -1;
  border-radius: 8px;
  background-color: rgb(255 255 255 / 0);
  transition: background-color .3s var(--motion-ease);
}

@media (hover: hover) {
  .news-row:hover::before {
    background-color: rgb(255 255 255 / .08);
  }
}

.news-row:focus-visible::before {
  background-color: rgb(255 255 255 / .08);
}

@media (max-width:1100px) {
  .news {
    gap: 50px;
  }

  .news-row {
    grid-template-columns: 78px 1fr 24px;
    gap: 12px;
  }
}

@media (max-width:900px) {
  .news {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .news-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
  }

  .news-row {
    grid-template-columns: 95px 1fr 24px;
  }
}

@media (max-width:760px) {
  .news {
    padding: 28px 0 65px;
    gap: 26px;
  }

  .news-heading {
    align-items: center;
  }

  .news-heading > .text-link {
    gap: 10px;
    margin: 0;
  }

  .news-row {
    grid-template-columns: 1fr 22px;
    row-gap: 9px;
    padding: 23px 0;
  }

  .news-row time {
    grid-column: 1/-1;
  }
}

.scroll-choreography [data-motion="card"] {
  opacity: var(--enter);
  transform: translate3d(0, calc((1 - var(--enter)) * 44px), 0)
    scale(calc(.98 + var(--enter) * .02));
  transform-origin: center bottom;
}

.scroll-choreography .news-row[data-motion] {
  transform: translateX(calc((1 - var(--enter)) * 24px));
}

.scroll-choreography .news-row[data-motion]:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--rule);
  transform: scaleX(var(--enter));
  transform-origin: left;
}

.news-row[data-motion] {
  position: relative;
  border-bottom-color: transparent;
}

@media (max-width: 760px) {
  .scroll-choreography [data-motion="card"] {
    transform: translateY(calc((1 - var(--enter)) * 28px));
  }
}

#news,
#news :is(h2,h3,p,a,time,.arrow) {
  color: #fff;
}

#news .news-row {
  border-color: #ffffff50;
}

#news .news-row h3 {
  line-height: 1.7;
}