/* ==========================================================================
   社割NEXT コーポレートサイト お知らせ（一覧・詳細）
   読み込み順: tokens.css → base.css → components.css → pages/news.css
   SP を基準に書き、@media (min-width: 1025px) で PC に切り替える

   目次
    1. 一覧：ヒーロー            .p-news-list-hero
    2. 一覧：カテゴリの絞り込み  .p-news-list-filter
    3. 一覧：記事の並び          .p-news-list / .p-news-card
    4. 一覧：ページ送り          .p-news-list-pagination
    5. 詳細：レイアウト          .p-news-detail
    6. 詳細：記事の頭・メイン画像・戻るリンク
    7. 詳細：本文（CMSのリッチテキスト） .p-news-detail__body
    8. 詳細：SNSシェア           .p-news-detail-share
    9. 詳細：最近のお知らせ      .p-news-detail-recent
   10. 詳細：パンくず（ページ下・長いタイトルの省略）
   11. 改行の位置                .p-news-card__title / .p-news-detail__title / .p-news-detail__body / .p-news-detail-recent__name

   メモ
   - 「Figmaに指定なし」と書いた所は、このキットで決めた見た目（デザイン確認の対象）
   - 画像のパスはこのCSSファイルからの相対（../../assets/…）。置き場所を変えたら url() を直す
   ========================================================================== */

/* ==========================================================================
   1. 一覧：ヒーロー（PC 537:18250 / SP 617:5886）
   ========================================================================== */
.p-news-list-hero {
  padding-block: var(--space-24);
  text-align: center;
  background: var(--color-white);
}

.p-news-list-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 「NEWS」の丸い札 */
.p-news-list-hero__label {
  padding: 3px 11px; /* 4px 12px から枠線1pxを引く（Figmaは枠線が内側） */
  border: 1px solid var(--color-text-primary);
  border-radius: 20px;
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-primary);
}

.p-news-list-hero__title {
  margin-top: var(--space-8);
  font: 700 24px/1.4 var(--font-jp);
  color: var(--color-text-strong);
}

.p-news-list-hero__lead {
  margin-top: var(--space-12);
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

@media (min-width: 1025px) {
  .p-news-list-hero {
    padding-block: var(--space-64) var(--space-48);
  }

  .p-news-list-hero__title {
    margin-top: var(--space-16);
    font-size: 40px; /* Figmaの実値（文字スタイル15種に無い大きさ） */
    color: var(--color-text-primary);
  }

  .p-news-list-hero__lead {
    margin-top: var(--space-16);
  }
}

/* ==========================================================================
   2. 一覧：カテゴリの絞り込み（PC 537:18253 / SP 617:5889）
      ボタンの data-category と、記事（.p-news-list__item）の data-category を突き合わせる
      選択中は aria-pressed="true"
   ========================================================================== */
.p-news-list-filter {
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-default); /* 537:18265 / 617:5901 の線 */
  background: var(--color-white);
}

.p-news-list-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* カテゴリで色分けしない（#41）。どのボタンも 白地・灰色の枠と文字。高さは32〜33px（PC・SP共通） */
.p-news-list-filter__btn {
  display: block;
  padding: 5px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 20px;
  font: 400 13px/1.6 var(--font-jp);
  color: var(--color-tag-text);
  background: var(--color-white);
  white-space: nowrap;
  transition: opacity 0.2s;
}

/* 選択中：濃い地に白文字（どのカテゴリも同じ）
   aria-pressed はボタン（ひな形）、aria-current はカテゴリ別のページへのリンク（ビルド後）の選択中 */
.p-news-list-filter__btn[aria-pressed="true"],
.p-news-list-filter__btn[aria-current="page"] {
  border-color: var(--color-text-primary);
  color: var(--color-white);
  background: var(--color-text-primary);
}

/* ホバー：Figmaに指定なし。少し薄くするだけにした */
.p-news-list-filter__btn:hover,
.p-news-list-filter__btn.is-hover {
  opacity: 0.7;
}

.p-news-list-filter__btn[aria-pressed="true"]:hover,
.p-news-list-filter__btn[aria-pressed="true"].is-hover,
.p-news-list-filter__btn[aria-current="page"]:hover {
  opacity: 1;
}

@media (min-width: 1025px) {
  .p-news-list-filter {
    padding-bottom: var(--space-24);
  }

  .p-news-list-filter__list {
    justify-content: center;
  }

  .p-news-list-filter__btn {
    font-weight: 500;
  }
}

/* ==========================================================================
   3. 一覧：記事の並び（PC 537:18266 / SP 617:5902）
      SP：1件ずつ枠のあるカードを縦に並べる
      PC：幅900pxの1つの枠の中に、線で区切って並べる
   ========================================================================== */
.p-news-list {
  padding-block: var(--space-24) var(--space-48);
}

.p-news-list__inner {
  max-width: calc(560px + var(--space-16) * 2); /* 400〜1024pxで間延びしないための上限。Figmaに指定なし */
}

.p-news-list__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* 絞り込みで0件になったときの文言。Figmaに指定なし */
.p-news-list__empty {
  padding-block: var(--space-40);
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ---- 記事1件（PC 537:18268 / SP 617:5904。ホバーは 537:18278 / 617:5916） ----
   カード全体がリンク。CMSから入れるのは サムネイル・公開日・カテゴリ・タイトル・記事のURL */
.p-news-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: 15px; /* 16px から枠線1pxを引く */
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
  transition: background-color 0.2s;
}

.p-news-card:hover,
.p-news-card.is-hover {
  background: #fff9f3; /* Figmaの実値（orange100。tokens.css に無い） */
}

.p-news-card__thumb {
  flex: none;
  aspect-ratio: 326 / 180;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-border-default); /* 画像が無い・読み込めないときの地 */
}

.p-news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

/* 公開日とカテゴリは、PCも横1行（#41。Figmaは PC だけ縦並び） */
.p-news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.p-news-card__date {
  font: 400 12px/1.4 var(--font-en);
  color: var(--color-text-muted);
}

.p-news-card__title {
  font: 700 17px/1.6 var(--font-jp); /* PC・SP共通（#41） */
  color: var(--color-text-primary);
}

/* タグは一覧だけ小さめ（#41） */
.p-news-card__meta .c-tag {
  padding: 0 5px; /* 1px 6px から枠線1pxを引く */
  font-size: 11px;
}

/* 「記事を読む ＞」は出さない（#41）。カード全体がリンクなので要らない
   ビルド（scripts/build-news.mjs）が出す HTML に残っているので、ここで隠している */
.p-news-card__more {
  display: none;
}

@media (min-width: 1025px) {
  .p-news-list {
    padding-block: var(--space-48) var(--space-80);
  }

  .p-news-list__inner {
    max-width: calc(var(--content-width) + 80px);
  }

  .p-news-list__items {
    gap: 0;
    max-width: 900px;
    margin-inline: auto;
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-white);
  }

  .p-news-list__item + .p-news-list__item {
    border-top: 1px solid var(--color-border-default);
  }

  /* 絞り込みで先頭の記事が隠れたとき、上の線が二重に見えないようにする */
  .p-news-list__item[hidden] + .p-news-list__item {
    margin-top: -1px;
  }

  .p-news-card {
    flex-direction: row;
    align-items: center;
    gap: var(--space-24);
    padding: var(--space-24);
    border: 0;
    border-radius: 0;
  }

  .p-news-card__thumb {
    width: 213px;
    aspect-ratio: 213 / 120;
    border-radius: 8px;
  }

  .p-news-card__body {
    gap: var(--space-12);
  }
}

/* ==========================================================================
   4. 一覧：ページ送り（PC 537:18348 / SP 617:6000）
      今いるページは aria-current="page"。押せない「前へ」「次へ」は aria-disabled="true"
   ========================================================================== */
.p-news-list-pagination {
  margin-top: var(--space-48);
}

.p-news-list-pagination__list {
  display: flex;
  justify-content: center;
  gap: 6px; /* Figmaの実値 */
}

/* Figmaは数字の箱（高さ33/37px）と「前へ」「次へ」の箱（35/42px）で高さが違い、上端で揃えてある。
   このキットでは高さを揃えた（Figmaと変えた所） */
.p-news-list-pagination__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 35px;
  padding: 0 11px; /* 12px から枠線1pxを引く */
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
  white-space: nowrap;
  background: var(--color-white);
  transition: color 0.2s, border-color 0.2s;
}

/* 数字。Figmaは Roboto SemiBold(600)。読み込んでいるのは 400・700 なので 700 にしている */
.p-news-list-pagination__link--num {
  font: 700 12px/1.4 var(--font-en);
  color: var(--color-text-primary);
}

.p-news-list-pagination__link[aria-current="page"] {
  border-color: var(--color-primary);
  color: var(--color-white);
  background: var(--color-primary);
}

/* ホバー：Figmaに指定なし。枠と文字をオレンジにした */
a.p-news-list-pagination__link:hover,
a.p-news-list-pagination__link.is-hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* 押せない状態：Figmaに指定なし（1ページ目の「前へ」も通常と同じ見た目で描いてある）。文字を薄くした */
.p-news-list-pagination__link[aria-disabled="true"] {
  color: var(--color-text-muted);
  cursor: default;
}

@media (min-width: 1025px) {
  .p-news-list-pagination {
    margin-top: var(--space-40);
  }

  .p-news-list-pagination__list {
    gap: var(--space-8);
  }

  .p-news-list-pagination__link {
    min-height: 42px;
    padding: 0 13px; /* 14px から枠線1pxを引く */
    font-size: 14px;
    font-weight: 500;
  }

  .p-news-list-pagination__link--num {
    padding: 0 15px; /* 16px から枠線1pxを引く */
    font-size: 12px;
    font-weight: 700;
  }
}

/* ==========================================================================
   5. 詳細：レイアウト（PC 537:18371 / SP 618:5965）
      SP：記事のカード → SNSシェア → 最近のお知らせ を縦に並べる
      PC：左に記事のカード（SNSシェアもカードの中）、右に最近のお知らせ（幅360px）
   ========================================================================== */
.p-news-detail {
  padding-block: var(--space-8) var(--space-40);
}

.p-news-detail__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: calc(560px + var(--space-16) * 2); /* 400〜1024pxで間延びしないための上限。Figmaに指定なし */
}

.p-news-detail__article {
  min-width: 0;
}

/* SPはここが白いカード（SNSシェアはカードの外）。PCは .p-news-detail__article がカードになる */
.p-news-detail__main {
  padding: 15px; /* 16px から枠線1pxを引く */
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-white);
}

@media (min-width: 1025px) {
  .p-news-detail {
    padding-block: var(--space-40) var(--space-80);
  }

  .p-news-detail__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-48);
    max-width: calc(var(--content-width) + 80px);
  }

  .p-news-detail__article {
    flex: 1;
    padding: 39px; /* 40px から枠線1pxを引く */
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    background: var(--color-white);
  }

  .p-news-detail__main {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
}

/* ==========================================================================
   6. 詳細：記事の頭（公開日・カテゴリ・タイトル）／メイン画像／戻るリンク
   ========================================================================== */
.p-news-detail__header {
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border-default); /* 537:18379 / 618:5972 の線 */
}

.p-news-detail__meta {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.p-news-detail__date {
  font: 400 12px/1.4 var(--font-en);
  color: var(--color-text-muted);
}

/* 記事ページのタグ（.c-tag--lg）。SPの角丸は Figma（618:5969）が12px。components.css は4pxなのでここで直している */
.p-news-detail__meta .c-tag--lg {
  border-radius: 12px;
}

.p-news-detail__title {
  margin-top: var(--space-20);
  font: 700 20px/1.4 var(--font-jp);
  color: var(--color-text-primary);
}

/* メイン画像（545:24490 / 618:5973）。本文とは別のフィールドとして置いている */
.p-news-detail__eyecatch {
  margin-top: var(--space-20);
  border-radius: 4px;
  overflow: hidden;
}

.p-news-detail__eyecatch img {
  width: 100%;
}

/* 「お知らせ一覧に戻る」（537:18396 / 618:5984）。.c-text-link と併用。色だけ Figma の #4b5563 に合わせる */
.p-news-detail__back {
  margin-top: var(--space-20);
  padding-top: var(--space-20);
  border-top: 1px solid var(--color-border-default); /* 537:18395 / 618:5983 の線 */
  text-align: center;
}

.p-news-detail__back .c-text-link {
  color: var(--color-text-secondary);
}

.p-news-detail__back .c-text-link:hover,
.p-news-detail__back .c-text-link.is-hover {
  color: var(--color-secondary);
}

@media (min-width: 1025px) {
  .p-news-detail__header {
    padding-bottom: var(--space-32);
  }

  .p-news-detail__title {
    margin-top: var(--space-16);
    font-size: 24px;
  }

  .p-news-detail__eyecatch {
    margin-top: var(--space-32);
    border-radius: 0;
  }

  .p-news-detail__back {
    margin-top: var(--space-32);
    padding-top: var(--space-32);
  }
}

/* ==========================================================================
   7. 詳細：本文（PC 537:18380 / SP 618:5974）
      CMS（microCMS のリッチエディタ）が出す素のHTMLをそのまま入れる箱。
      中の要素にクラスは要らない。すべて .p-news-detail__body の子孫セレクタで当てている

      Figmaにある要素：段落（p）・見出し（h2）・箇条書き（ul）・画像
      Figmaに無く、このキットで決めた要素：h3・h4・ol・入れ子のリスト・blockquote・table・
        figure/figcaption・a・strong・em・hr・code/pre・iframe/video（それぞれの所に「Figmaに指定なし」と書いた）
   ========================================================================== */
.p-news-detail__body {
  margin-top: var(--space-20);
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

/* 要素どうしの間隔（SP 16px / PC 24px） */
.p-news-detail__body > * + * {
  margin-top: var(--space-16);
}

/* ---- 見出し ---- */
/* h2（537:18388 / 618:5976）。PC・SP共通で17px太字（#41。FigmaはSP 16px・PC 20px） */
.p-news-detail__body h2 {
  font: 700 17px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

/* どの段落の見出しか分かるよう、見出しの上を広く（48px）、すぐ下を狭く（12px）する（#41。PC・SP共通） */
.p-news-detail__body > * + h2 {
  margin-top: var(--space-48);
}

.p-news-detail__body > h2 + *,
.p-news-detail__body > h3 + *,
.p-news-detail__body > h4 + * {
  margin-top: var(--space-12);
}

/* h3・h4：Figmaに指定なし。h2より一段ずつ小さい太字にした */
.p-news-detail__body h3 {
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

.p-news-detail__body h4 {
  font: 700 14px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

/* ---- 箇条書き（537:18390 / 618:5978）。行頭は「・」、項目の間は8px ---- */
.p-news-detail__body ul,
.p-news-detail__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.p-news-detail__body ul > li {
  position: relative;
  padding-left: 1.5em; /* 「・」＋空き。Figmaは文字として「・ 」を打ってあり、折り返した行は字下げされない。ここでは2行目以降を揃えた */
}

.p-news-detail__body ul > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* 番号付きリスト：Figmaに指定なし。箇条書きと同じ間隔で、数字を行頭に出す */
.p-news-detail__body ol {
  counter-reset: news-ol;
}

.p-news-detail__body ol > li {
  position: relative;
  padding-left: 2em;
  counter-increment: news-ol;
}

.p-news-detail__body ol > li::before {
  content: counter(news-ol) ".";
  position: absolute;
  left: 0;
  width: 1.5em;
  text-align: right;
}

/* 入れ子のリスト：Figmaに指定なし */
.p-news-detail__body li > ul,
.p-news-detail__body li > ol {
  margin-top: var(--space-8);
}

/* ---- リンク：Figmaに指定なし。オレンジ＋下線（ホバーで下線を消す） ---- */
.p-news-detail__body a {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-position: from-font;
}

.p-news-detail__body a:hover {
  text-decoration: none;
}

/* ---- 強調：Figmaに指定なし。太字＋濃い文字色 ---- */
.p-news-detail__body strong,
.p-news-detail__body b {
  font-weight: 700;
  color: var(--color-text-primary);
}

.p-news-detail__body em {
  font-weight: 700; /* 和文は斜体にしない（base.css で font-style: normal）。太字で区別する。Figmaに指定なし */
}

/* ---- 画像（本文の途中の画像）。メイン画像と同じ角丸 ---- */
.p-news-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* キャプション：Figmaに指定なし。文字/本文/小（12px）・補足色 */
.p-news-detail__body figcaption {
  margin-top: var(--space-8);
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-muted);
}

/* ---- 引用：Figmaに指定なし。左に3pxの線 ---- */
.p-news-detail__body blockquote {
  padding: var(--space-4) 0 var(--space-4) var(--space-16);
  border-left: 3px solid var(--color-border-default);
}

.p-news-detail__body blockquote > * + * {
  margin-top: var(--space-8);
}

.p-news-detail__body cite {
  display: block;
  font: 400 12px/1.6 var(--font-jp);
  font-style: normal;
  color: var(--color-text-muted);
}

/* ---- 表：Figmaに指定なし。枠線は 色/枠線/基本、見出しセルは 色/背景/基本 ---- */
.p-news-detail__body table {
  width: 100%;
  border: 1px solid var(--color-border-default);
  font: 500 12px/1.6 var(--font-jp);
}

.p-news-detail__body th,
.p-news-detail__body td {
  padding: var(--space-8);
  border: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: top;
}

.p-news-detail__body th {
  font-weight: 700;
  color: var(--color-text-primary);
  background: var(--color-background-base);
}

.p-news-detail__body caption {
  margin-bottom: var(--space-8);
  font: 400 12px/1.6 var(--font-jp);
  color: var(--color-text-muted);
  text-align: left;
}

/* ---- 区切り線・コード・埋め込み：Figmaに指定なし ---- */
.p-news-detail__body hr {
  margin-block: var(--space-24);
}

.p-news-detail__body code {
  padding: 2px var(--space-4);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-background-base);
}

.p-news-detail__body pre {
  padding: var(--space-12);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  overflow-x: auto;
  background: var(--color-background-base);
}

.p-news-detail__body pre code {
  padding: 0;
  background: none;
}

.p-news-detail__body iframe,
.p-news-detail__body video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (min-width: 1025px) {
  .p-news-detail__body {
    margin-top: var(--space-24);
  }

  .p-news-detail__body > * + * {
    margin-top: var(--space-24);
  }

  .p-news-detail__body h3 {
    font-size: 16px;
  }

  /* PCの箇条書きは左に16px下げる（537:18390） */
  .p-news-detail__body > ul,
  .p-news-detail__body > ol {
    padding-left: var(--space-16);
  }

  .p-news-detail__body img {
    border-radius: 0;
  }

  .p-news-detail__body table {
    font-size: 14px;
  }

  .p-news-detail__body th,
  .p-news-detail__body td {
    padding: var(--space-8) var(--space-12);
  }
}

/* ==========================================================================
   8. 詳細：SNSシェア（PC 715:2479 / SP 715:6814）
      X・Facebook・LINE はリンク、URLコピーは button（動きは pages/news.js）
   ========================================================================== */
.p-news-detail-share {
  margin-top: var(--space-24);
}

.p-news-detail-share__title {
  font: 700 12px/1.6 var(--font-jp);
  color: var(--color-text-secondary);
}

/* SP：2列×2段。ボタンは幅157px相当（左右に16pxの空き） */
.p-news-detail-share__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-12);
  margin-top: var(--space-12);
  padding-inline: var(--space-16);
}

.p-news-detail-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  width: 100%;
  height: 64px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
  white-space: nowrap;
  background: var(--color-white);
  transition: background-color 0.2s;
}

/* ホバー：Figmaに指定なし。地を 色/背景/基本 にした */
.p-news-detail-share__btn:hover,
.p-news-detail-share__btn.is-hover {
  background: var(--color-background-base);
}

/* アイコンの大きさ（SP）。X・Facebook 24px／LINE 40px（Figmaの実値。LINEだけ大きい）／コピー 18px */
.p-news-detail-share__icon {
  flex: none;
  width: 24px;
  height: auto;
}

.p-news-detail-share__icon--line {
  width: 40px;
}

.p-news-detail-share__icon--copy {
  width: 18px;
}

@media (min-width: 1025px) {
  .p-news-detail-share {
    margin-top: var(--space-32);
  }

  /* PC：4つを横1列に等分（幅712pxで各169px）。画面が狭くてカードが細いときは、文字がはみ出さないよう折り返す */
  .p-news-detail-share__list {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    padding-inline: 0;
  }

  .p-news-detail-share__btn {
    gap: var(--space-8);
    height: 40px;
  }

  .p-news-detail-share__icon,
  .p-news-detail-share__icon--line {
    width: 20px;
  }

  .p-news-detail-share__icon--copy {
    width: 18px;
  }
}

/* ==========================================================================
   9. 詳細：最近のお知らせ（PC 537:18398 / SP 618:5986）
      PCとSPで形が違う（Figmaのまま）：
        SP … サムネイル＋公開日＋カテゴリ（丸いタグ）＋タイトル（TOPのお知らせカードと同じ形）
        PC … 枠のあるカードに 公開日＋タイトル だけ（サムネイルとカテゴリは出さない）
      HTMLは1つで、PCではサムネイルとカテゴリを隠している
   ========================================================================== */
.p-news-detail-recent__title {
  font: 700 16px/1.6 var(--font-jp);
  color: var(--color-text-primary);
}

.p-news-detail-recent__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  margin-top: var(--space-16);
}

.p-news-detail-recent__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Figmaは幅320pxの固定。ここでは幅いっぱい（比率 320:180）にした */
.p-news-detail-recent__thumb {
  aspect-ratio: 320 / 180;
  overflow: hidden;
  background: var(--color-white);
}

.p-news-detail-recent__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-news-detail-recent__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
}

.p-news-detail-recent__date {
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-sub);
}

/* タイトルは2行まで（Figmaは高さ41pxで切ってある） */
.p-news-detail-recent__name {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  font: 500 14px/1.6 var(--font-jp);
  color: var(--color-text-strong);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* ホバー：Figmaに指定なし。タイトルをオレンジにした */
.p-news-detail-recent__link:hover .p-news-detail-recent__name,
.p-news-detail-recent__link.is-hover .p-news-detail-recent__name {
  color: var(--color-secondary);
}

@media (min-width: 1025px) {
  .p-news-detail-recent {
    flex: none;
    width: clamp(280px, 30%, 360px); /* 本文幅1200pxのとき360px */
  }

  .p-news-detail-recent__title {
    font: 700 20px/1.4 var(--font-jp);
  }

  .p-news-detail-recent__list {
    gap: var(--space-16);
    margin-top: var(--space-24);
  }

  .p-news-detail-recent__link {
    padding: 19px; /* 20px から枠線1pxを引く */
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    background: var(--color-white);
  }

  .p-news-detail-recent__thumb,
  .p-news-detail-recent__text .c-tag {
    display: none;
  }

  .p-news-detail-recent__date {
    font: 400 12px/1.4 var(--font-en);
    color: var(--color-text-muted);
  }

  .p-news-detail-recent__name {
    display: block;
    font-weight: 700;
    color: var(--color-text-primary);
  }
}

/* ==========================================================================
   10. 詳細：パンくず（PC 610:9873 / SP 610:9923）
       詳細ページだけ、パンくずが本文の下（フッターの直前）にある（Figmaのまま）
       長い記事タイトルは1行で省略する（SPのFigmaは画面の端で切れている）
   ========================================================================== */
.p-news-detail-breadcrumbs .c-breadcrumbs__list {
  flex-wrap: nowrap;
}

.p-news-detail-breadcrumbs .c-breadcrumbs__item {
  flex: none;
}

.p-news-detail-breadcrumbs .c-breadcrumbs__item[aria-current="page"] {
  flex: 0 1 auto;
  min-width: 0;
}

.p-news-detail-breadcrumbs__current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   11. 改行の位置（#41）
       「サー／ビス」のように言葉の途中で行が切れないよう、文節で折り返す。
       長いURLがはみ出さないための overflow-wrap（base.css）はそのまま。
       auto-phrase が効くのは Chrome・Edge だけ。Safari では今までどおりの折り返しになる
   ========================================================================== */
.p-news-card__title,
.p-news-detail__title,
.p-news-detail__body,
.p-news-detail-recent__name {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}