@charset "utf-8";
/* ==========================================================================
   お知らせ（一覧・詳細）
   Figma: 03_Pages / news / TOP / News・TOP / News_detail
   ========================================================================== */

/* --------------------------------------------------------------------------
   一覧（News type=page — 375 × 1235）
   -------------------------------------------------------------------------- */
.newspage {
  padding: var(--space-24) 0;
  background: var(--c-wt);
}

.newspage__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: 40px;
  padding: 0 var(--space-16);
}

.newspage__list > li + li {
  padding-top: var(--space-8);
  border-top: 1px solid var(--c-bg-subtitle);
}

.newspage__list > li.newspage__paging {
  padding-top: 0;
  border-top: 0;
}

/* --------------------------------------------------------------------------
   詳細（news_ditail）
   白いカードの中に、見出し・画像・本文を 48px 間隔で積む。
   -------------------------------------------------------------------------- */
.article {
  display: flex;
  flex-direction: column;
  gap: var(--space-48, 48px);
  align-items: center;
  padding: var(--space-16);
  border-radius: var(--space-12);
  background: var(--c-wt);
}

.article > * {
  width: 100%;
}

/* 記事中の画像（16:9） */
.article__figure {
  margin: 0;
  aspect-ratio: 160 / 90;
  overflow: hidden;
  background: #d9d9d9;
}

.article__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article__text {
  color: var(--c-text-primary);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 32px;
}

.article__text + .article__text {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   前後の記事
   区切り線はカードの左右パディングを越えて全幅に伸びる。
   -------------------------------------------------------------------------- */
.article-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  align-items: center;
  width: 100%;
}

.article-nav__line {
  width: calc(100% + var(--space-16) * 2);
  margin: 0 calc(var(--space-16) * -1);
  border: 0;
  border-top: 1px solid var(--c-bg-subtitle);
}

.article-nav__item {
  display: flex;
  gap: 40px;
  align-items: center;
  width: 100%;
  color: var(--btn-textlink-text);
  font-size: var(--fs-p);
}

.article-nav__item:hover .article-nav__title {
  text-decoration: underline;
}

.article-nav__label {
  flex: 0 0 auto;
  font-weight: var(--fw-demibold);
  line-height: normal;
  white-space: nowrap;
}

.article-nav__title {
  flex: 1 0 0;
  min-width: 0;
  font-weight: var(--fw-regular);
  line-height: 32px;
}