@charset "UTF-8";
/*
===============================================================================
 css/sub-news.css — NEWS一覧・NEWS詳細専用CSS（design-to-theme Stage4統合）
 2026-08-03 CSS分割（docs/plans/2026-08-02-css-js-php-refactor.plan.md Step4-5）:
 css/sub.cssからNEWS一覧（category.php）・NEWS詳細（single.php）のセレクタをそのまま移設
 （セレクタ・プロパティ値は無変更）。functions.php側でNEWS一覧・NEWS詳細ページでのみ読み込む。
===============================================================================
*/

/*
===============================================================================
 NEWS一覧・NEWS詳細（jp-news-list / jp-news-detail。JP版のみ・EN版ページ無し）
 出典: stage1_drafts/03_jp_news.md
===============================================================================
*/

/* .page-title 基本形はNEWS一覧・NEWS詳細で共通利用。下マージンのみページ固有のため
   ページ本体（jp-news-list / jp-news-detail）ごとに margin-bottom を個別に指定する。 */
.page-title {
  margin-top: 90px; /* ヘッダー下端 → 「NEWS」文字上端（PC） */
}
@media (max-width: 767px) {
  .page-title {
    margin-top: 30px;
  }
}

/*
---news-list（NEWS一覧。S-2）
---------------------------------------------------------------------------*/
/* 「.page-title」自体はNEWS一覧・NEWS詳細で共通クラスのため、後続要素のクラスで判定する
   （:has()による構造セレクタ。jp-news-list/index.html・jp-news-detail/index.htmlともに
   .page-titleにページ固有の識別クラスが付いていないための対応。WP側でbody_class等の
   識別クラスが確定した場合はそちらへの置き換えを検討可） */
.page-title:has(+ .news-list-section) {
  margin-bottom: 75px; /* 見出しブロック下端 → リスト最上罫線（一覧ページ固有） */
}
@media (max-width: 767px) {
  .page-title:has(+ .news-list-section) {
    margin-bottom: 22px; /* 2026-08-23修正: 支給PDF指定の区間(b)=60px(見出し上端→1件目罫線)に対し実測98.41pxだったため60px→22pxに詰める(見出し実体38.41px + 22px = 60.41px) */
  }
  .page-title:has(+ .news-list-section) .section-heading-stars {
    margin-top: 7px; /* 2026-08-21修正: common.cssの基準値15pxのままだったためSPで7pxに詰める(menu/locationページの慣習と同様) */
  }
}

.news-list-section {
  max-width: 1000px; /* [ESTIMATE: 1000px / designer注記は950px、実測999px] */
  margin: 0 auto;
  padding: 0 20px;
}
.news-list {
  list-style: none;
}
@media (min-width: 768px) {
  .news-list {
    border-bottom: 1px solid var(--color-yellow); /* リスト最終行の下罫線（PCのみ） */
  }
}
.news-list-item {
  border-top: 1px solid var(--color-yellow);
}
.news-list-item-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.news-list-item-date {
  color: var(--color-black);
  font-weight: 400; /* 2026-08-21修正: 一覧の文字太さを700→400に統一 */
}
.news-list-item-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400; /* 2026-08-21修正: 一覧の文字太さを700→400に統一 */
  color: var(--color-red);
  font-size: 1rem;
}
.news-list-item-badge--new {
  border: 1px solid var(--color-red);
}
.news-list-item-title {
  color: var(--color-black);
  font-weight: 400; /* 2026-08-21修正: 一覧の文字太さを700→400に統一 */
}
@media (min-width: 768px) {
  .news-list-item-link {
    flex-direction: row;
    align-items: center;
    height: 55px; /* リスト行の高さ（PC固定） */
  }
  .news-list-item-meta {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .news-list-item-date {
    width: 90px; /* 日付カラム幅。[FIX 2026-08-02] 実測ではNoto Sans JP Bold 16pxの
       「YYYY.MM.DD」表記が約86px必要で、designer注記の80pxでは2行に折り返していたため拡張 */
    white-space: nowrap; /* 折り返し防止の保険 */
    font-size: 1.6rem;
  }
  .news-list-item-badge {
    width: 35px; /* NEWバッジ枠幅 */
    height: 16px;
    margin-left: 5px;
  }
  .news-list-item-title {
    flex: 1;
    margin-left: 20px;
    font-size: 1.6rem;
  }
}
@media (max-width: 767px) {
  .news-list-section {
    max-width: none;
    padding: 0 28px;
  }
  .news-list-item-link {
    padding: 20px 0;
  }
  .news-list-item-meta {
    display: flex;
    align-items: center;
    margin-bottom: 9.5px;
  }
  .news-list-item-date {
    font-size: 1.4rem;
  }
  .news-list-item-badge {
    width: 36px;
    height: 15.5px;
    margin-left: 8px;
  }
  .news-list-item-title {
    font-size: 1.4rem;
    line-height: 1.5; /* 2026-08-23修正: 1.5rem(=15px・比率1.07)で2行タイトルの行間が白3pxしか無かったため単位なし1.5(=21px)へ。同一行内の日付(継承1.5=21px)と行送りが揃う */
  }
}

/*
---pagination（S-3）
---------------------------------------------------------------------------*/
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 55px; /* リスト下端 → ページネーション上端 */
  margin-bottom: 110.7px; /* [ESTIMATE: 110px] ページネーション下端 → フッター上端 */
}
.pagination-list {
  display: flex;
  align-items: center;
  gap: 11.5px;
  list-style: none;
}
.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: var(--color-yellow);
  color: var(--color-black);
  font-weight: 400; /* 2026-08-21修正: 一覧の文字太さを700→400に統一 */
  font-size: 1.4rem;
  text-decoration: none;
}
/* 2026-09-08追記: 現在ページだけ赤丸にする（前澤さん指示。支給PDF CJ_PC_back_0827.pdf p3 の
   「今どこのページにいるかわかりにくく」への対応）。paginate_links() が現在ページに付ける
   class="page-numbers current" を、category.php の str_replace で "pagination-item current" に
   置き換えているため、この .current で捕まえられる。文字色は赤地の視認性のため白にする
   （PDFの見本も赤丸＋白文字）。他の番号は従来どおり黄丸＋黒文字のまま。 */
.pagination-item.current {
  background-color: var(--color-red);
  color: var(--color-white);
}
.pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 14.5px;
  color: var(--color-black);
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
}
/* 2026-09-11追記: 前ページへの左矢印（前澤さん指示）。番号窓は現在ページ中心の5件固定のため
   4ページ目以降で先頭の「1」が窓から外れ、戻る手段が無くなっていた。出力条件は category.php 側で
   「窓の左端が1より大きいとき」に限定している（＝「1」が見えている間は出さない）。
   ベースの .pagination-arrow は ul の右に置く前提で margin-left を持つので、左配置用に打ち消す。 */
.pagination-arrow--prev {
  margin-right: 14.5px;
  margin-left: 0;
}
/* 2026-09-11追記2 前澤さん指示: 矢印が出ないページでも番号列の位置を動かさないためのプレースホルダ。
   .pagination は justify-content:center なので、片方の矢印が消えると番号列が反対側へ寄ってしまう
   （実測 Desktop +10.0px / Mobile +11.5px）。同じ字形を visibility:hidden で置くため幅は完全に一致し、
   リンクではないのでフォーカスも読み上げも受けない（HTML側に aria-hidden="true" を付けている）。 */
.pagination-arrow--placeholder {
  visibility: hidden;
}
@media (max-width: 767px) {
  .pagination {
    margin-top: 30px;
    margin-bottom: 50px;
  }
  .pagination-list {
    gap: 8px;
  }
  .pagination-item {
    width: 25px;
    height: 25px;
    font-size: 1.2rem;
  }
  .pagination-arrow {
    margin-left: 17.5px;
  }
  .pagination-arrow--prev {
    margin-right: 17.5px;
    margin-left: 0;
  }
}

/*
---news-article（NEWS詳細。S-4〜S-6）
---------------------------------------------------------------------------*/
.page-title:has(+ .news-article) {
  margin-bottom: 50px; /* 見出しブロック下端 → 記事タイトル上端（詳細ページ固有） */
}
@media (max-width: 767px) {
  .page-title:has(+ .news-article) {
    margin-bottom: 22px; /* 2026-09-08修正: 60px→22px（支給PDF CJ_SP_back_0828.pdf p3「開きの間隔のバランスは
    以前お渡ししてる左記データに近づけてください（開きすぎています）」。左記データ＝同ページ左に並ぶNEWS一覧の
    スクリーンショット）。一覧側 .page-title:has(+ .news-list-section) のSP値と同値にした。
    実測: ★下端→本文 が 一覧22px に対し詳細60pxで38px開いていた。
    PC側（この@mediaの外の50px）は指摘対象外のため据え置く（PC版PDF CJ_PC_back_0827.pdf p3 に
    この件の注記は無く、PCは詳細50px<一覧75pxで開きの向きが逆） */
  }
  .page-title:has(+ .news-article) .section-heading-stars {
    margin-top: 7px; /* 2026-08-21修正: common.cssの基準値15pxのままだったためSPで7pxに詰める(menu/locationページの慣習と同様) */
  }
}

.news-article {
  max-width: 800px; /* PC本文カラム幅（designer注記「800px」と実測一致） */
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 110px; /* 本文最下部→フッター間の余白（デザイン指定110px） */
}
.news-article-header-title {
  color: var(--color-black);
  font-weight: 700;
  text-align: left;
  font-size: 1.7rem;
  line-height: 1.7647; /* 2026-08-23修正: 3rem→単位なし(17px×1.7647=30.0px・実測値そのまま)。単位規約R3 */
  margin-bottom: 21.5px;
  overflow-wrap: anywhere; /* ダミー本文の「○」はCJK自動改行の対象外のため明示指定 */
}
.news-article-header-date {
  color: var(--color-black);
  font-weight: normal;
  text-align: left; /* 2026-08-21修正: タイトル上へ移動に伴い右寄せ→左寄せに変更 */
  font-size: 1.6rem;
  margin-bottom: 20px; /* 2026-08-24追記: 前澤さん指示 */
}
.news-article-image {
  margin-top: 30px;
  margin-bottom: 50px;
}
.news-article-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21; /* PC800x420・SP320x168 */
  object-fit: cover;
}
.news-article-body {
  color: var(--color-black);
  font-weight: 400;
}
.news-article-body p {
  font-size: 1.6rem;
  line-height: 1.875; /* 2026-08-23修正: 3rem→単位なし(16px×1.875=30.0px・実測値そのまま)。単位規約R3 */
  text-align: left;
  overflow-wrap: anywhere;
}
.news-article-body p + p {
  margin-top: 30px;
}
.news-article-body-block {
  margin-top: 30px;
}
.news-article-body-block-heading {
  font-size: 1.6rem;
  line-height: 1.875; /* 2026-08-23修正: 3rem→単位なし(16px×1.875=30.0px)。単位規約R3 */
  font-weight: 700;
  overflow-wrap: anywhere;
}
.news-article-body-block-mark {
  display: inline-block;
  margin-right: 8px;
}
.news-article-body-block-text {
  font-size: 1.6rem;
  line-height: 1.875; /* 2026-08-23修正: 3rem→単位なし(16px×1.875=30.0px)。単位規約R3 */
  margin-top: 0;
  overflow-wrap: anywhere;
}
/* 2026-08-23追加: 本文内table（the_content()由来の価格改定表）。style.css:364の
   `table th,table td{padding:0}` リセットのままセルが隙間ゼロで接し、前後の段落との余白も
   `p + p` が効かず0pxだったため、NEWS詳細スコープで最低限の体裁を与える。
   width:100% は入れない（PCで表幅が意図せず本文カラム幅まで伸びるため） */
.news-article-body table {
  line-height: 1.7;
  margin-top: 30px; /* 既存の p + p のPC値30pxと同律 */
  margin-bottom: 30px;
}
.news-article-body th,
.news-article-body td {
  padding: 10px 8px;
  border-bottom: 1px solid #d9d9d9;
  vertical-align: middle;
}
.news-article-body th {
  font-weight: 700;
}
.news-article-body th:not(:first-child),
.news-article-body td:not(:first-child) {
  white-space: nowrap; /* 「1,240円」が「1,240/円」と語中改行していたため */
  text-align: right;
}
@media (max-width: 767px) {
  .news-article {
    max-width: none;
    padding: 0 28px;
    margin-bottom: 50px;
  }
  .news-article-header-title {
    font-size: 1.5rem;
    line-height: 1.6667; /* 2026-08-23修正: 2.5rem→単位なし(15px×1.6667=25.0px・実測値そのまま)。単位規約R3 */
    margin-bottom: 20px;
  }
  .news-article-header-date {
    font-size: 1.4rem;
  }
  .news-article-image {
    margin-top: 20px;
    margin-bottom: 25px;
  }
  .news-article-body p {
    font-size: 1.4rem;
    line-height: 1.7143; /* 2026-08-23修正: 2.4rem→単位なし(14px×1.7143=24.0px・実測値そのまま)。単位規約R3 */
  }
  .news-article-body p + p {
    margin-top: 24px;
  }
  .news-article-body-block {
    margin-top: 24px;
  }
  .news-article-body-block-heading,
  .news-article-body-block-text {
    font-size: 1.4rem;
    line-height: 1.7143; /* 2026-08-23修正: 2.4rem→単位なし(14px×1.7143=24.0px)。単位規約R3 */
  }
  /* 2026-08-23追加: 本文内table（価格改定表）のSP調整。SP375pxで見出しセルが「現行価/格」と語中改行していたため */
  .news-article-body table {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 24px; /* 既存の p + p のSP値24pxと同律 */
    margin-bottom: 24px;
  }
  .news-article-body th,
  .news-article-body td {
    padding: 8px 6px;
  }
}

/* 2026-10-15 1014 No.5: NEWS一覧はフッターまでの余白が短いため .main の最低高さを600pxにする（一覧のみ。詳細は対象外） */
body.category-news .main {
  min-height: 600px;
}