/* お知らせ一覧（/news/）
   外枠・パンくず・ヒーロー・CTA・フッターは body.promov-taxonomy-overview-page の
   共通定義を共有する。ここには一覧そのもののデザインだけを書く。
   色・角丸・境界線・余白は他ページと同じトークンを参照する。 */

.promov-notices,
.promov-notices * {
  box-sizing: border-box;
}

/* 一覧とCTAの間隔。CTA側は上余白を持たないため、ここで決める。
   ページネーションは内側にあるので、有無にかかわらず同じ間隔になる。 */
.promov-notices .promov-notices__body {
  margin: 0 0 64px;
}

/* ── 一覧の枠 ──
   共通カードと同じ控えめな影を使い、背景から自然に浮かせる。 */
.promov-notices .promov-notices-list {
  margin: 0;
  padding: 0;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  background: #fff;
  box-shadow: var(--pv-sh-md);
  list-style: none;
  overflow: hidden;
}

.promov-notices .promov-notices-list__item {
  margin: 0;
  padding: 0;
}

/* 行の区切りは1本だけ。外枠と二重にならないよう、2行目以降の上側へ引く。 */
.promov-notices .promov-notices-list__item + .promov-notices-list__item {
  border-top: 1px solid var(--pv-border);
}

/* 行全体をクリックできるようにリンクを広げる。 */
.promov-notices .promov-notices-list__link {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 16px;
  align-items: baseline;
  column-gap: 20px;
  padding: 18px 22px;
  color: var(--pv-ink);
  transition: background-color var(--pv-t);
}

.promov-notices .promov-notices-list__date {
  color: var(--pv-faint);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

/* タイトルは省略しない。長いものは自然に折り返す。 */
.promov-notices .promov-notices-list__title {
  color: var(--pv-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  overflow-wrap: anywhere;
  transition: color var(--pv-t);
}

/* 右端の矢印。画像を増やさず疑似要素で作る。 */
.promov-notices .promov-notices-list__link::after {
  content: "";
  align-self: center;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--pv-border-strong);
  border-right: 2px solid var(--pv-border-strong);
  transform: rotate(45deg);
  transition: transform var(--pv-t), border-color var(--pv-t);
}

/* アンダーラインは常時出さない。テーマ側の a:hover に負けないよう
   bodyクラスまで含めた詳細度で、全ての状態を打ち消す。 */
body.promov-notices-page .promov-notices-list__link,
body.promov-notices-page .promov-notices-list__link:hover,
body.promov-notices-page .promov-notices-list__link:focus,
body.promov-notices-page .promov-notices-list__link:focus-visible,
body.promov-notices-page .promov-notices-list__link:active,
body.promov-notices-page .promov-notices-list__title {
  text-decoration: none;
}

/* ホバーはキーカラーを使った控えめな表現にとどめる。 */
body.promov-notices-page .promov-notices-list__link:hover,
body.promov-notices-page .promov-notices-list__link:focus-visible {
  background: var(--pv-surface);
}

body.promov-notices-page .promov-notices-list__link:hover .promov-notices-list__title,
body.promov-notices-page .promov-notices-list__link:focus-visible .promov-notices-list__title {
  color: var(--pv-accent);
}

body.promov-notices-page .promov-notices-list__link:hover::after,
body.promov-notices-page .promov-notices-list__link:focus-visible::after {
  border-color: var(--pv-accent);
  transform: rotate(45deg) translate(2px, -2px);
}

/* ── 0件のとき ──
   一覧と同じ枠の中に置いて、レイアウトが崩れないようにする。 */
.promov-notices .promov-notices__empty {
  margin: 0;
  padding: 32px 22px;
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-lg);
  background: #fff;
  color: var(--pv-soft);
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
}

/* ページネーションの見た目は promov.css の共通定義を共有する。
   ここでは一覧との間隔だけを足す。 */
.promov-notices .promov-pagination {
  margin: 32px 0 0;
}

@media (max-width: 1023px) {
  .promov-notices .promov-notices__body {
    margin-bottom: 56px;
  }
}

@media (max-width: 767px) {
  .promov-notices .promov-notices__body {
    margin-bottom: 40px;
  }

  /* 日付とタイトルを縦積みにする。矢印は右端に残す。 */
  .promov-notices .promov-notices-list__link {
    grid-template-columns: minmax(0, 1fr) 14px;
    align-items: start;
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px 18px;
  }

  .promov-notices .promov-notices-list__date {
    grid-column: 1;
    font-size: 12.5px;
  }

  .promov-notices .promov-notices-list__title {
    grid-column: 1;
    font-size: 14.5px;
  }

  /* 2行ぶんの高さの中央ではなく、行の上側にそろえる。 */
  .promov-notices .promov-notices-list__link::after {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .promov-notices .promov-notices__empty {
    padding: 28px 18px;
  }

  .promov-notices .promov-pagination {
    margin-top: 24px;
  }
}