/* css/pages/news.css
   お知らせ一覧・詳細ページ 新デザイン（2026-09-11、Claude Code）
   対象: newsinformation-h/webdir/index.html・organization/webdir/index.html（#newslist部分のみ）、
        両CMSの記事詳細ページ（.cms_news-info を持つページ全て）。
   方針:
     - 既存のCMS生成マークアップ（table.c-cms-table / .project-newsitem / .cat-* 等、
       実際に本番でライブ描画されているPhase86〜136アーキテクチャのクラス名）を一切変更せず、
       CSSのみで見た目を再構成する（記事本文・リンク先・文言は変更しない）。
     - 本ファイルは新規追加のみ。base.css/layout.css/components.css/utilities.css/
       cms-components.css 等の既存共通CSSは変更しない。
     - 色は実在のCSS値のみを使用する（詳細根拠は
       reports/2026-09-11-news-list-detail-redesign-staging.md 参照）。
         --brand-dark   : #000 / rgba(0,0,0,.9)  … header等で実使用（layout.css:404）
         --brand-charcoal: #432                  … nav-drawer背景・本文アクセント（layout.css:373）
         --brand-text   : #543                   … body基準文字色（base.css:5）
         --brand-pink   : #ff0b8d (rgba(255,11,141,1)) … 通販サイトCTAボタン（base.css:152）
         --brand-pink-soft: #ff62b5              … 同ボタンのシャドウ（base.css:154）
         --brand-gray-e6: #e6e6e6, --brand-gray-df: #dfdfdf, --brand-beige: #eee9e1
           （cms-components.css内の既存背景色。淡い「ブルー系」は既存CSSに実在しないため
           採用していない＝推測で色を作っていない）

   Phase3（2026-09-11、ユーザー提示モックアップへの視覚調整）追記方針:
     - 新しい色は追加しない。既存 :root 変数（下記）の値・アルファ値（rgba/透過）のみで
       モックアップの「淡いピンク」等の質感を再現する（アルファ適用は色の新規追加ではなく
       既存カラーの濃淡表現のため、この方針の範囲内と判断）。
     - モックアップの写真・イラストは一切使用しない（実サイトに存在しないダミー画像のため）。
     - モックアップのカテゴリ色分け・架空ページ番号（2,3…10）は実データと矛盾するため採用しない。
       理由はセクション末尾コメント、および reports/2026-09-11-news-phase3-mockup-alignment-staging.md 参照。
*/

:root {
  --news-dark: #000;
  --news-charcoal: #432;
  --news-text: #543;
  --news-pink: #ff0b8d;
  --news-pink-soft: #ff62b5;
  --news-gray-bg: #f5f5f3;
  --news-card-bg: #fff;
  --news-border: #e6e6e6;
}

/* ============================================================
   1. 一覧ページ（#newslist）バグ修正＋B案カード化
   ============================================================ */

/* --- 1-1. 文字消失バグの修正 ---
   原因: css/cms/cms-components.css 928-931行目 `.c-cms-table a{color:#fff}`。
   記事タイトルリンクが白文字になり、カード/ページ背景に暗色部分が無いため
   実質不可視化している（getComputedStyle実測でcolor:rgb(255,255,255)を確認）。
   #newslist配下に限定した、より詳細度の高いセレクタで安全に上書きする
   （!importantは使用しない、他ページの.c-cms-table使用箇所には影響しない）。 */
#newslist .c-cms-table a {
  color: var(--news-charcoal);
}
#newslist .c-cms-table a:hover,
#newslist .c-cms-table a:focus {
  color: var(--news-pink);
}

/* --- 1-2. カード化（Phase3: PC/Mobileとも横長行＝左サムネイル(擬似要素)＋
   中央情報＋右矢印。実写真が無いため、サムネイルはブランドカラーの
   プレースホルダー（::before、新規画像なし）で代替する。 --- */
#newslist {
  list-style: none;
  padding: 0;
  margin: 0;
}

#newslist li {
  list-style: none;
}

/* CMS出力の "cat-XXX" 分類div = カードそのもの。カテゴリ別アイコン画像
   （/images/cms/*.png、既存資産。給食/薬局/事業報告書等の実カテゴリ名入り
   ピルバッジ画像が既に存在するため、これをカテゴリバッジとしてそのまま使う）は
   カード内にそのまま残す。左端はサムネイル代替のブランドカラープレースホルダー
   （::before）、右端はブランドピンクの矢印（::after）を追加する（ともにCSSのみ、
   新規画像・新規HTMLは追加しない）。 */
#newslist li > div[class^="cat-"],
#newslist li > div[class^="project-cat-"] {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--news-card-bg);
  border-radius: 14px;
  border: 1px solid var(--news-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  margin: 0 0 0.85rem;
  overflow: hidden;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

#newslist li > div[class^="cat-"]:hover,
#newslist li > div[class^="project-cat-"]:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* サムネイル代替プレースホルダー（実写真は使用しない、ブランドカラーのみ） */
#newslist li > div[class^="cat-"]::before,
#newslist li > div[class^="project-cat-"]::before {
  content: "";
  flex: 0 0 84px;
  width: 84px;
  /* align-self未指定＝親のalign-items既定値(stretch)を継承し、カード全体の
     高さいっぱいに広がる（空要素は自身の高さを持たないため、center等を
     指定すると高さ0になり不可視化する点に注意）。 */
  align-self: stretch;
  margin: 0.75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--news-charcoal) 0%, var(--news-pink-soft) 160%);
}

/* 右端の矢印（実データのリンクは title 内の <a> のまま、装飾のみ追加） */
#newslist li > div[class^="cat-"]::after,
#newslist li > div[class^="project-cat-"]::after {
  content: "\203A";
  flex: 0 0 auto;
  align-self: center;
  padding: 0 1.1rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--news-pink);
}

#newslist .project-newsitem {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 0.5rem;
}

/* 既存のtable構造はそのまま維持しつつ、display切替でカード内の
   縦並びレイアウトへ変換する（HTML変更なし）。 */
#newslist .c-cms-table {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: 0;
}
#newslist .c-cms-table tbody {
  display: block;
}
#newslist .c-cms-table tr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}
#newslist .c-cms-table tr:first-child {
  margin-bottom: 0.35rem;
}
#newslist .c-cms-table tr:last-child {
  display: block;
}
#newslist .c-cms-table td {
  padding: 0;
}

#newslist .project-newtd {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--news-text);
  font-weight: 600;
  letter-spacing: 0.02em;
}
#newslist .project-newtd span {
  margin-top: 0;
}
#newslist .project-inline-icon.project-newfl {
  float: none;
}
#newslist .icontd {
  width: auto;
}
/* カテゴリピルバッジ（既存 /images/cms/*.png、実カテゴリ名入り）を少し
   見やすいサイズへ（画像差し替えなし、表示サイズのみ調整）。
   実測の結果、organization側のCMS出力markupはnewsinformation-h側と異なり、
   このアイコンspanが <td class="icontd"> に包まれず <tr> の直接の子として
   出力されている（既存CMSの仕様差、本タスクでは変更しない）。既存
   cms-components.cssの高さ指定ルール（.icontd>.project-XXX{height:...} /
   .articleH2>.project-XXX{height:...}）はどちらも祖先セレクタ限定のため、
   organization側のこの構造には一致せず、height指定が効かず画像が
   実質的に不可視化していた（Phase1/2から存在した既存差分。モックアップが
   求める「カテゴリ色分けピルバッジ」を両CMSで表示するため、祖先に依存せず
   クラス名のみで高さを与えるルールをここに追加する。画像の差し替え・
   新規追加はしていない）。 */
#newslist .project-inline-icon.project-taishaku,
#newslist .project-inline-icon.project-zougen,
#newslist .project-inline-icon.project-jigyou,
#newslist .project-inline-icon.project-kigyou,
#newslist .project-inline-icon.project-kyushoku,
#newslist .project-inline-icon.project-sonota,
#newslist .project-inline-icon.project-saiyou,
#newslist .project-inline-icon.project-baiten,
#newslist .project-inline-icon.yakkyoku {
  display: inline-block;
  width: 72px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
/* 上記の祖先非依存ルールは幅・高さ・表示位置のみを指定するため、画像URL自体は
   既存 cms-components.css の対応ルール（.icontd>.project-XXX /
   .articleH2>.project-XXX、いずれも祖先限定）が本来担っていたが、
   organization側のbare-span構造ではそのルールが一致せず画像が指定されない
   ままになる（上記コメント参照）。同じ既存画像ファイルをここでも明示的に
   参照する（新規画像は追加しない、既存 /images/cms/*.png を再利用）。 */
#newslist .project-inline-icon.project-taishaku {
  background-image: url(/images/cms/taishaku.png);
}
#newslist .project-inline-icon.project-zougen {
  background-image: url(/images/cms/zougen.png);
}
#newslist .project-inline-icon.project-jigyou {
  background-image: url(/images/cms/jigyou.png);
}
#newslist .project-inline-icon.project-kigyou {
  background-image: url(/images/cms/kigyou.png);
}
#newslist .project-inline-icon.project-kyushoku {
  background-image: url(/images/cms/kyushoku.png);
}
#newslist .project-inline-icon.project-sonota {
  background-image: url(/images/cms/sonota.png);
}
#newslist .project-inline-icon.project-saiyou {
  background-image: url(/images/cms/saiyou.png);
}
#newslist .project-inline-icon.project-baiten {
  background-image: url(/images/cms/baiten.png);
}
#newslist .project-inline-icon.yakkyoku {
  background-image: url(/images/cms/yakkyoku.png);
}

/* タイトル行：視認性の高いサイズ・太さへ（色は1-1で修正済み） */
#newslist .c-cms-table tr:last-child td {
  display: block;
}
#newslist .title {
  display: block;
}
#newslist .c-cms-table a {
  display: inline-block;
  padding: 0.15rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

/* PC1280: 横長1列カード（左サムネイル/右矢印は::before/::afterで表現済み、
   中央は日付/カテゴリ行 + タイトル行を上下2段で見せる） */
@media (min-width: 835px) {
  #newslist .project-newsitem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.1rem 0.75rem;
    min-height: 84px;
  }
  #newslist .c-cms-table a {
    font-size: 1.15rem;
  }
}

/* Mobile390相当（サイト既存のタブレット以下ブレークポイントに合わせる） */
@media (max-width: 834px) {
  #newslist li > div[class^="cat-"]::before,
  #newslist li > div[class^="project-cat-"]::before {
    flex-basis: 56px;
    width: 56px;
    margin: 0.6rem;
  }
  #newslist li > div[class^="cat-"]::after,
  #newslist li > div[class^="project-cat-"]::after {
    padding: 0 0.6rem;
    font-size: 1.3rem;
  }
  #newslist .project-newsitem {
    padding: 0.65rem 0.4rem;
  }
  #newslist .c-cms-table a {
    font-size: 0.95rem;
  }
  #newslist .project-inline-icon.project-taishaku,
  #newslist .project-inline-icon.project-zougen,
  #newslist .project-inline-icon.project-jigyou,
  #newslist .project-inline-icon.project-kigyou,
  #newslist .project-inline-icon.project-kyushoku,
  #newslist .project-inline-icon.project-sonota,
  #newslist .project-inline-icon.project-saiyou,
  #newslist .project-inline-icon.project-baiten,
  #newslist .project-inline-icon.yakkyoku {
    width: 60px;
  }
}

/* ページ送り（一覧下部）。実データに存在するリンクのみを丸ピル装飾する。
   newsinformation-h側は前後リンクが実在しないため空要素のまま非表示になる
   （架空の「2 3 … 10」等は生成しない。理由は本ファイル末尾コメント参照）。
   organization側は実在する先頭/次/最後リンク（index_1.htmlへの実リンク）を
   同じ装飾で表示する。 */
ul.project-sugu-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: auto;
  margin: 1.5rem 0 0;
  padding: 0;
}
ul.project-sugu-pager li {
  list-style: none;
}
ul.project-sugu-pager li:empty {
  display: none;
}
ul.project-sugu-pager li:not(:empty) a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--news-border);
  background: var(--news-card-bg);
  color: var(--news-charcoal);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
ul.project-sugu-pager li:not(:empty) a:hover,
ul.project-sugu-pager li:not(:empty) a:focus {
  background: var(--news-pink);
  border-color: var(--news-pink);
  color: #fff;
}

/* ============================================================
   2. 詳細ページ（.cms_news-info）
   ============================================================ */

/* Phase3: 見出しクラスタ（パンくず／日付+NEW／タイトル／カテゴリ見出し）の
   視覚順を、flex + order のみで「日付+NEW → タイトル → アクセントバー →
   カテゴリ見出し」に近づける。HTML要素の追加・削除・文言変更は行わない
   （既存要素の並び順のみをCSSで変更、DOM順・文言は不変）。 */
.cms_news-info {
  display: flex;
  flex-direction: column;
}
.cms_news-info .p-news-breadcrumb {
  order: -2;
}
.cms_news-info .infoday.description {
  order: -1;
}
.cms_news-info .halfH1 {
  order: 0;
  color: var(--news-charcoal);
}
.cms_news-info .halfH1::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: 0.65rem;
  border-radius: 2px;
  background: var(--news-pink);
}
.cms_news-info .articleH2 {
  /* order指定なし＝DOM順のまま（h1の直後・本文.innerより前）。
     h1=order:0（既定）・.inner=order:0（既定）と同順のため、既定の
     DOM順（h1 → articleH2 → inner）がそのまま視覚順になる。 */
  background: var(--news-gray-bg);
  border-radius: 10px;
  padding: 0.9rem 1.25rem;
  margin: 0.75rem 0 1.25rem;
  color: var(--news-charcoal);
}

.cms_news-info .infoday.description {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--news-text);
  font-weight: 600;
}
.cms_news-info .infoday.description .day-style {
  float: none;
  padding: 0;
}

/* 本文中の既存リンク（「こちらから」等）をCTAカード風に強調。
   本文テキスト・リンク先は一切変更しない。既存<span>/<a>をCSSで
   スタイリングするのみ（新規HTML要素は追加しない）。アイコン・矢印は
   既存のMaterial Iconsウェブフォント（両ページとも<head>で読込済み）を
   ::before/::afterのcontentとして流用し、新規画像は追加しない。 */
.cms_news-info .inner a[href] {
  /* display:flex（inline-flexではない）にすることで、幅は常に親要素
     （<p>の利用可能幅）に収まるブロックとして扱われる。inline-flexだと
     内容量（アイコン+文言+既存open_in_newアイコン+矢印）に応じて
     max-content幅まで広がり、記事によっては横スクロールの原因になる
     ことを実機検証で確認したため、flex + flex-wrap:wrap + box-sizing:
     border-boxで確実に幅内に収める。 */
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 11, 141, 0.06);
  border: 1px solid var(--news-pink-soft);
  border-radius: 14px;
  color: var(--news-charcoal) !important;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.cms_news-info .inner a[href]::before {
  content: "campaign";
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  color: var(--news-pink);
  font-size: 1.3rem;
  line-height: 1;
  flex: 0 0 auto;
}
.cms_news-info .inner a[href]::after {
  content: "\203A";
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--news-pink);
  font-weight: 700;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.cms_news-info .inner a[href]:hover,
.cms_news-info .inner a[href]:focus {
  background: rgba(255, 11, 141, 0.14);
  border-color: var(--news-pink);
}
/* 既存インラインstyle(border-bottom等)を打ち消す必要があるため、この1箇所のみ
   !importantを使用する（既存本文中の<span style="border-bottom:...">に対する
   最小限の上書き。個別要素への大量!importantではなく1プロパティ限定）。 */

/* Phase3: メイン画像ブロック（.photobig）。現在21記事とも実画像添付は無いため
   （CMSコメント「画像の表示／アップロードされた時に生成」の通り、機能はある
   が現状未使用）、空のダミー枠を残さないよう非表示にする。:has()を使い、
   将来CMSで<img>が実際に追加された記事だけは自動的に表示される設計にする
   （HTML変更なし、CSSのみの条件分岐）。 */
.cms_news-info .inner > div.pure-u.photobig:not(:has(img)) {
  display: none;
}
.cms_news-info .inner > div.pure-u.photobig:has(img) {
  flex: 1 1 100%;
  max-width: 100%;
  margin: 0 0 1.25rem;
}
.cms_news-info .inner > div.pure-u.photobig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Phase3: 本文中に既存の箇条書き(<ul><li>)が実在する記事のみ、左にピンクの
   縦バーを付与する（現在21記事とも本文に<ul>は存在しないため、現状は
   このルールが適用される記事は無い＝見出しの新規作成はしていない）。 */
.cms_news-info .inner.c-cms-wrap ul {
  width: 100%;
  border-left: 3px solid var(--news-pink);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0.75rem 0;
  list-style: disc;
  text-align: left;
}
.cms_news-info .inner.c-cms-wrap ul li {
  margin: 0.35rem 0;
}

/* ページ送り（前へ/次へ/一覧へ戻る）。実際のリンク・文言（前へ／次へ／
   一覧へ戻る）は変更しない。左＝前へ、中央＝一覧へ戻る（縦区切り線で
   両側と分ける）、右＝次へ、というモックアップの3分割レイアウトに、
   既存の3要素（前へ/一覧へ戻る/次へ）をそのまま当てはめる。 */
.cms_news-info ~ * .sugu-page-link,
.pure-g.sugu-page-link {
  order: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--news-border);
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
}
.pure-g.sugu-page-link .pure-u-1-4:first-child {
  text-align: left;
}
.pure-g.sugu-page-link .pure-u-1-4:last-child {
  text-align: right;
}
.pure-g.sugu-page-link .sugu-text-center {
  border-left: 1px solid var(--news-border);
  border-right: 1px solid var(--news-border);
  padding: 0 1rem;
  /* Phase5追記: css/vendor/pure-min.css:38-43が.pure-u-1-2を独自に
     `width:auto; display:grid;`へ上書きしており（サイト既存のカスタマイズ、
     本タスクでは変更しない）、このため中央列(一覧へ戻る)は標準の50%幅を
     持たず内容幅のまま縮小していた（実測confirmed）。中央列だけflex-grow
     させ、前へ/次へ(pure-u-1-4=25%固定)の間で余白を吸収する横長バーにする。 */
  flex: 1 1 auto;
  min-width: 0;
}
.pure-g.sugu-page-link .pure-u-1-4:first-child a.pure-button::before {
  content: "\2039\00a0";
}
.pure-g.sugu-page-link .sugu-pull-right::after {
  content: "\00a0\203A";
}
/* Phase5: 「小さい丸型」の原因は css/cms/cms-components.css:1062-1066の
   `.pure-button{display:block;padding:0 0 5%;border:none;}`。news.css側の
   既存ルールはdisplay/border/border-radius等は上書きしていたがpaddingは
   一度も指定しておらず、左右padding 0のまま残っていたため、
   border-radius:999px（角丸）と組み合わさり実質的な円形に見えていた
   （実測・cms-components.css該当行確認済み）。ここでpaddingを明示指定し、
   幅もボタンが属する列いっぱいに広げ、横長の帯（バー）ボタンにする。
   リンク文言・href・DOM構造は無変更。 */
.cms_news-info ~ * .sugu-page-link .pure-button,
.pure-g.sugu-page-link .pure-button {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--news-charcoal);
  border-radius: 999px;
  color: var(--news-charcoal);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}
.pure-g.sugu-page-link .pure-button:hover {
  background: var(--news-charcoal);
  color: #fff;
}
@media (max-width: 834px) {
  /* Mobile390方針: 既存の3等分グリッド(pure-u-1-4/1-2)は幅%指定のままだと
     390px幅で極端に狭くなるため、縦積みへ変更する（文言・href・要素数は
     無変更、レイアウトのみ）。 */
  .pure-g.sugu-page-link {
    flex-direction: column;
    align-items: stretch;
  }
  .pure-g.sugu-page-link .pure-u-1-4,
  .pure-g.sugu-page-link .pure-u-1-2 {
    width: 100%;
  }
  .pure-g.sugu-page-link .sugu-text-center {
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--news-border);
    border-bottom: 1px solid var(--news-border);
    padding: 0.6rem 0;
    margin: 0.4rem 0;
  }
  .pure-g.sugu-page-link .pure-button {
    font-size: 0.9rem;
  }
}

/* 詳細ページ本文の外側コンテナ(.inner.c-cms-wrap)は order 既定値(0)のまま
   （halfH1と同じ order のため、DOM順=halfH1の直後に自然に続く）。 */

/* ============================================================
   3. 一覧Hero（news-redesign-20260911 Phase2、Phase3で配色調整）
   対象: newsinformation-h/webdir/index.html・organization/webdir/index.htmlの
        #newslistセクション内のみ（組織図・他ページには一切出さない）。
   モックアップは「淡いピンク→白の斜めグラデーション」。新色は追加せず、
   既存 --news-pink の低アルファ値（既存色の濃淡表現）のみで再現する。
   右側の写真はモックアップ専用のダミー画像のため使用しない
   （Phase2で候補2件を検討し両方不採用と判断済み、pending.md記録済み）。
   ============================================================ */
.p-news-hero {
  /* background-color(不透明)とbackground-image(グラデーション)を分けて重ねる。
     shorthandで単一のグラデーションのみを指定すると、pink→白の中間色部分の
     アルファ値も同時に薄くなり、organization側のように背景に写真がある
     祖先要素ではその写真が透けて見えてしまう実害を実機確認したため、
     常に不透明な下地(background-color)を敷いた上にグラデーションを重ねる。 */
  background-color: var(--news-card-bg);
  background-image: linear-gradient(135deg, rgba(255, 11, 141, 0.08) 0%, var(--news-card-bg) 62%);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 1.5rem;
  margin: 1.25rem 0 1.5rem;
}
.p-news-hero__en {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--news-pink);
  text-transform: uppercase;
}
.p-news-hero__title {
  margin: 0.15rem 0 0.6rem;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--news-charcoal);
  line-height: 1.3;
}
.p-news-hero__desc {
  margin: 0;
  max-width: 640px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--news-text);
}
@media (max-width: 834px) {
  .p-news-hero {
    padding: 1.25rem 1.25rem 1.1rem;
    margin: 1rem 0 1.25rem;
  }
  .p-news-hero__title {
    font-size: 1.6rem;
  }
  .p-news-hero__desc {
    font-size: 0.88rem;
  }
}

/* ============================================================
   4. カテゴリフィルター（news-redesign-20260911 Phase2、Phase3で配色調整）
   実データに存在するcat-*のみボタン化（0件カテゴリは元々ボタン自体を出さない設計のため、
   このCSS側で特別な0件対応は不要）。表示切替の実処理は js/pages/news-filter.js が担う。
   選択中＝ブランドピンク背景＋白太字、非選択＝白背景＋薄いグレーborder＋濃色文字
   （モックアップ配色。使用色は既存 --news-pink / --news-charcoal / --news-border のみ）。
   ============================================================ */
.p-news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.p-news-filter li {
  margin: 0;
  list-style: none;
}
.p-news-filter button {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid var(--news-border);
  background: var(--news-card-bg);
  color: var(--news-charcoal);
  border-radius: 999px;
  padding: 0.5rem 1.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.p-news-filter button:hover,
.p-news-filter button:focus {
  border-color: var(--news-pink-soft);
  color: var(--news-pink);
}
.p-news-filter button.is-active {
  background: var(--news-pink);
  border-color: var(--news-pink);
  color: #fff;
}
.p-news-filter button.is-active:hover,
.p-news-filter button.is-active:focus {
  color: #fff;
}
@media (max-width: 834px) {
  .p-news-filter {
    gap: 0.4rem;
  }
  .p-news-filter button {
    font-size: 0.8rem;
    padding: 0.45rem 1.1rem;
  }
}

/* ============================================================
   5. 詳細パンくず（news-redesign-20260911 Phase2、Phase3でヘッダー直下の
   帯スタイル・pinkのhomeアイコンを追加）
   対象: 全21件の記事詳細ページ（.cms_news-info内、既存h1の直前に追加）。
   長い記事タイトルでもモバイルで横スクロールを発生させないよう折り返す。
   ============================================================ */
.p-news-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.4rem;
  background: var(--news-gray-bg);
  margin: -2% -5% 1.1rem;
  padding: 0.6rem 5%;
  border-radius: 20px 20px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--news-text);
}
.p-news-breadcrumb a {
  color: var(--news-text);
  text-decoration: underline;
}
.p-news-breadcrumb a:first-child::before {
  content: "home";
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 0.95rem;
  margin-right: 0.2rem;
  color: var(--news-pink);
  vertical-align: -2px;
}
.p-news-breadcrumb a:hover,
.p-news-breadcrumb a:focus {
  color: var(--news-pink);
}
.p-news-breadcrumb__sep {
  color: var(--news-border);
}
.p-news-breadcrumb__current {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  color: var(--news-charcoal);
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (max-width: 834px) {
  .p-news-breadcrumb {
    margin: -3% -3% 1rem;
    padding: 0.6rem 3%;
    font-size: 0.75rem;
  }
}

/* ============================================================
   6. コンテンツ幅拡張（Phase3、PC1280〜のみ）
   既存共通コンテナ .l-wrapper の実測max-width（1300px、
   rebuild/release/public_html/css/layout.css:19-22）の範囲内で、
   一覧・詳細とも1080px（ユーザー指示レンジ1000〜1100pxの中間値）に統一する。
   実測変更前幅: newsinformation-h一覧=640px（.news-list.l-wrapper の
   margin:2% 25%由来）、organization一覧=1280px（左右余白0、既存に幅指定なし）、
   詳細（両CMS共通）=896px（.cms_news-info の margin:5% 15%由来）。
   ============================================================ */
@media (min-width: 835px) {
  .news-list.l-wrapper {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  #company_news .l-wrapper.Wrap {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
  .cms_news-info {
    /* box-sizing指定: 既存 .cms_news-info は padding:2% 5%（左右5%ずつ、
       cms-components.css既存定義、変更なし）を持つ。content-box既定のままだと
       max-widthはpadding抜きのcontent幅にのみ適用され、実際に見える幅
       （padding込み）がmax-widthを超えてしまうため、この要素に限りborder-box
       を指定し、max-widthが「実際に見える幅」に一致するようにする
       （このセレクタの外の要素には一切影響しない）。 */
    box-sizing: border-box;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Phase3 メモ: ページネーションについて（意図的に未実装とした範囲）
   ------------------------------------------------------------
   ユーザー提示モックアップは「1 2 3 … 10」という10ページ分のページ番号
   リンクを示しているが、これは実データと一致しない：
     - newsinformation-h/webdir/index.html の <ul class="project-sugu-pager">
       は4つの<li>がすべて空（前後ページへの実リンクが存在しない）。
       CMSが実際に1ページに全7記事を収めて生成している証拠であり、
       複数ページは存在しない。
     - organization/webdir/index.html の同要素には実際に
       「先頭」「次」「最後」への実リンク（index_1.html）が存在するが、
       index_1.html は調査の結果、新アーキテクチャ（c-cms-table等）ではなく
       reference/public_html と同一の旧アーキテクチャ（cms-table等、
       "project-"接頭辞なしの旧クラス名）で描画される、Phase86以降の
       サイト再構築で移行されていない旧ページであることを確認した
       （43/44/45.htmlと同種の「旧アーキテクチャ島」）。掲載記事も
       29/31/32/33/34/35/37番など、現在は新アーキテクチャの独立ページとして
       既に存在する記事と重複しており、CMS側の記事一覧生成ロジックが
       ページ送りを再構成した際に、旧・未移行のindex_1.htmlへのリンクだけが
       そのまま残った状態と推測される。
   このため、今回は「1」や「2 3 … 10」といった架空のページ番号を新規生成
   していない。実際に存在する要素（空のli／実リンクのli）だけをCSSで装飾し、
   実リンクが無いページでは何も表示しない設計とした。index_1.html自体の
   扱い（旧アーキテクチャからの移行要否）は本タスクのスコープ外の判断が
   必要なため、reports/pending.md に記録した。
   ============================================================ */

/* 2026-09-11: newsinformation list only. Existing palette; no CMS/shared changes. */
.news-list #newslist .title,
.news-list #newslist .title a {
  color: var(--news-charcoal);
}
.news-list #newslist .title a:hover,
.news-list #newslist .title a:focus-visible {
  color: var(--news-charcoal);
  text-decoration: underline;
  text-decoration-color: var(--news-pink);
}

.news-list #newslist .p-news-card-summary {
  color: var(--news-text);
  display: block;
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
/* Override the measured legacy .linkwrapper li inset card and .title margins. */
.news-list #newslist > li {
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.news-list #newslist .title { margin: 0; }
.news-list #newslist .title a { overflow-wrap: anywhere; }
.news-list #newslist .project-newsitem { align-self: center; }
.news-list .p-news-hero__title { text-align: left; }
.news-list .p-news-filter { justify-content: flex-start; }
.news-list .p-news-filter > li { width: auto; flex: 0 0 auto; padding: 0; }
.news-list > .halfH1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.news-list .p-news-page-current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: var(--news-pink);
  color: var(--news-card-bg);
  font-weight: 700;
}
@media (max-width: 834px) {
  .news-list.l-wrapper { margin-left: 1rem; margin-right: 1rem; }
  .news-list #newslist .p-news-card-summary { font-size: 0.9rem; }
}

/* ============================================================
   Phase5（2026-09-11）: 一覧サムネイルの実画像差し替え（差分のみ）
   対象は「実際に別ページで使われている実績があり、用途・ファイル名・
   使用箇所から記事内容との対応が確認できる」画像のみ。カード左端の
   ::before（プレースホルダーグラデーション）の背景を、対象記事のカードに
   限りCSSのみで実画像へ差し替える（HTML変更なし、id="news-87"等の
   既存CMS出力idを:has()で参照）。対応が確認できない記事（89,93,97）は
   プレースホルダーのまま維持する。根拠・不採用理由は
   reports/2026-09-11-news-phase5-images-title-nav-refinement.md 参照。
   ============================================================ */
#newslist li > div.cat-kyushoku:has(#news-87)::before {
  background: url(/images/business/patient_im2022_03_1.jpg) center/cover no-repeat;
}
#newslist li > div.cat-kyushoku:has(#news-89)::before {
  background: url(/images/business/patient_im2022_03_2.jpg) center/cover no-repeat;
}
#newslist li > div.cat-yakkyoku:has(#news-94)::before {
  background: url(/images/business/pharmacy_page_info4.jpg) center/cover no-repeat;
}
#newslist li > div.cat-yakkyoku:has(#news-95)::before,
#newslist li > div.cat-yakkyoku:has(#news-96)::before {
  background: url(/images/business/pharmacy_page_info3.jpg) center/cover no-repeat;
}

/* ============================================================
   Phase5: 詳細ページタイトル直下のメイン画像（実画像が確認できた記事のみ）
   ============================================================ */
.cms_news-info .p-news-detail-mainimage {
  margin: 0 0 1.1rem;
}
.cms_news-info .p-news-detail-mainimage img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   Phase5: パンくず最後の項目（記事タイトル全文）を1行に省略表示する。
   原因調査: h1.halfHのテキスト自体・<title>・og:title・JSON-LD headline
   いずれも「(2026-02-16)」等の日付サフィックスを含む実CMS出力であり、
   これはCMSデータのため変更しない。一方 .p-news-breadcrumb__current は
   Phase1/2で新規追加したナビゲーション要素で、中のテキストはh1と同一の
   記事タイトル全文をそのまま複製している。このため画面上で「日付+タイトル」
   が2回（パンくず最後の項目＋h1）連続して見える視覚的重複が発生していた。
   対応方針: パンくず側のテキスト自体（DOM上の文字列）は変更せず、
   CSSのtext-overflow:ellipsisで1行に省略表示するに留める（アクセシビリティ
   上はDOMに全文が残るため、スクリーンリーダー等では引き続き全文を読み上げ
   可能）。h1側（CMSデータ）は無変更。 */
.p-news-breadcrumb__current {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: normal;
  overflow-wrap: normal;
}

/* News details only: correct measured legacy center alignment; body text unchanged. */
.p-news-detail.cms_news-info .halfH1 { text-align: left; }
.p-news-detail.cms_news-info .inner.c-cms-wrap {
  text-align: left;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 0;
  margin-right: 0;
}
.p-news-detail.cms_news-info .inner.c-cms-wrap > div:first-child {
  width: 100%;
  min-width: 0;
}

/* ============================================================
   Phase6（2026-09-11）: 一覧カードを2列グリッド型へ変更
   対象: newsinformation-h/webdir/index.html の #newslist（一覧カード）
   のみ。詳細ページ7件（87/89/93/94/95/96/97.html）・organizationは
   本Phaseで一切変更していない（そもそもこのファイル自体を配置しない、
   #newslist id自体も index.html にしか存在しない）。

   方針:
   - Phase3〜5で確立した「横長1列カード（左サムネイル代替::before＋
     右矢印::after、Phase5で::beforeの背景を一部記事のみ実画像へ
     :has()で差し替え済み）」のHTML・既存クラス名は一切変更せず、
     displayをgridへ・カード内部をflex-directionでcolumn化するのみで
     縦型2列グリッドカードへ再構成する。Phase5で確定した::beforeの
     背景画像URL（実画像/プレースホルダーグラデーション）は本Phaseでは
     一切変更していない（1〜2節の既存ルールをそのまま使用、サイズ・
     位置のみここで上書きする）。
   - 実カテゴリ名（給食情報=kyushoku／薬局情報=yakkyoku／その他=sonota）
     は新設・変更しない。日付表記も既存の 2026/02/16（スラッシュ区切り）
     のまま（モックアップのドット区切り 2026.02.16 は不採用、ユーザー
     指示通り）。
   - ページネーションは実データ通り「1」のみで、架空の2ページ目以降は
     生成しない（Phase3から継続する既存方針、本Phaseでは変更していない）。
   - NEWバッジ（class="project-new"、実データは87/89の2記事のみ。
     93/94/95/96/97にはこのclassが付与されていないことをHTML実測で
     確認済み）は、既存span要素をサムネイル左上へ position:absolute で
     重ねる。DOM順・class属性・文言は無変更、装飾位置のみ変更する。
   - 列数の切替は600px幅を境界にする（サイト既存の
     css/responsive-mobile.cssが同一の600px境界を既に使用しているため、
     本Phaseで新規に採用した値ではない）。Mobile390(390px)=1列、
     Tablet834(834px)/PC1280(1280px)=2列（ユーザー指示通り）。
   - 下記のセレクタは全て `.news-list #newslist` または
     `.news-list #newslist ...` の形でスコープしており、既存の
     「一覧カード用の新規CSSは#newslist配下に限定したセレクタのみを
     追加する」方針に従う。detail ページには #newslist / .news-list
     いずれも存在しないため（実測grep済み）、本セクションは詳細ページに
     一切一致しない。
   ============================================================ */

/* 6-1. グリッドコンテナ化。列数のみ幅で切替、その他は共通。 */
.news-list #newslist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 1.5rem;
  align-items: stretch;
}
@media (min-width: 601px) {
  .news-list #newslist {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6-2. カード本体：横長flex行→縦型カラムへ。Phase3までの外形
   （背景色・角丸・border・shadow、1節既存ルール）はそのまま維持し、
   内部の並び方向のみ変更する。position:relativeは6-4/6-8の絶対配置の
   基準にするため付与する。 */
.news-list #newslist li > div[class^="cat-"],
.news-list #newslist li > div[class^="project-cat-"] {
  flex-direction: column;
  align-items: stretch;
  position: relative;
  margin: 0;
  height: 100%;
}

/* 6-3. サムネイル（::before）：左84px幅レールから、カード上半分・
   16:9アスペクト比の全幅ブロックへ。背景画像URL自体（Phase5の実画像
   または既存プレースホルダーグラデーション、1〜2節）は変更しない。 */
.news-list #newslist li > div[class^="cat-"]::before,
.news-list #newslist li > div[class^="project-cat-"]::before {
  flex: 0 0 auto;
  width: auto;
  align-self: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  border-radius: 14px 14px 0 0;
}

/* 6-4. 矢印（::after）：カード内で縦中央配置の帯装飾から、モックアップ
   通りの右下円形ボタンへ。中身の文字(\203A)・実リンク（title内の既存
   <a href>のまま）は無変更、装飾の位置・形状のみ変更する。 */
.news-list #newslist li > div[class^="cat-"]::after,
.news-list #newslist li > div[class^="project-cat-"]::after {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--news-pink);
  background: var(--news-card-bg);
  font-size: 1.2rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 6-5. コンテンツ側（カード下半分）：中央寄せをやめ上詰めにし、右下の
   矢印ボタン分の余白（padding-bottom）を確保する。 */
.news-list #newslist .project-newsitem {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.9rem 0.85rem 3.25rem;
}

/* 6-6. タイトル：1〜2行を想定し、極端に長いタイトルが来た場合でも
   右下の矢印ボタンと重ならないよう2行までの視覚的省略に留める
   （webkit-line-clamp、DOM上のテキスト自体は削除しない。Phase5の
   パンくずellipsis対応と同じ考え方）。 */
.news-list #newslist .c-cms-table a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

/* 6-7. カード概要文（js/pages/news-excerpt.jsが自動挿入する
   .p-news-card-summary）：モックアップのカードに概要文は無いため、
   2列グリッドでは非表示にする（ユーザー指示「既存の概要文機能を壊さない
   範囲で判断してよい」に基づく判断）。JS側の削除は行っておらず、
   fetch・DOM挿入自体は従来通り実行される（要素は存在するが非表示）。 */
.news-list #newslist .p-news-card-summary {
  display: none;
}

/* 6-8. NEWバッジ（実データ87/89のみ、project-newclassで限定）：
   既存span要素をサムネイル左上へオーバーレイする。文言・DOM順・
   class属性は無変更、位置のみ変更する。対象外記事（project-newクラス
   なし）には一切影響しない。 */
.news-list #newslist .project-newtd > .project-inline-icon.project-newfl.project-new {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  float: none;
  width: 50px;
  height: 20px;
  background-size: contain;
  background-position: left top;
}

/* ============================================================
   Phase7（2026-09-11）: 一覧ページの最終微調整（7点、一覧ページのみ）
   対象: newsinformation-h/webdir/index.html の #newslist・Hero・
   カテゴリフィルターのみ。詳細ページ7件（87/89/93/94/95/96/97.html）・
   organization・js/pages/news-filter.js・js/pages/news-excerpt.jsの
   ロジックは本Phaseで一切変更していない。

   下記の全セレクタは `.news-list ...` （index.htmlの
   <div class="l-wrapper news-list Wrap"> 実測クラス）でスコープしており、
   詳細ページ（.news-listクラスを持たない）・organization（本Phaseで
   一度も読み書きしていない）のいずれにも一致しない。
   ============================================================ */

/* 7-1. Hero: 存在感を上げる（背景の淡いピンク〜白グラデーションは
   3節の既存ルールを一切変更せず維持する。ここではpadding・文字サイズ・
   ウェイト・行間のみを上書きする）。 */
.news-list .p-news-hero {
  padding: 2.5rem 2.25rem 2.25rem;
}
.news-list .p-news-hero__en {
  /* 「News」を中サイズ・別ウェイトでトーンダウン。新規色は追加せず、
     既存 --news-pink の低アルファ値（本ファイル既存の慣例、例:
     2節 rgba(255, 11, 141, 0.06)、3節 rgba(255, 11, 141, 0.08)）で
     濃淡のみ調整する。 */
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 11, 141, 0.62);
}
.news-list .p-news-hero__title {
  /* 「お知らせ」を太字大サイズにし、「News」との階層差を明確にする。 */
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.25;
}
.news-list .p-news-hero__desc {
  font-size: 1rem;
  line-height: 1.85;
}
@media (max-width: 834px) {
  .news-list .p-news-hero {
    padding: 1.85rem 1.5rem 1.65rem;
  }
  .news-list .p-news-hero__title {
    font-size: 2rem;
  }
  .news-list .p-news-hero__desc {
    font-size: 0.92rem;
    line-height: 1.75;
  }
}

/* 7-2. PC/Tabletカード: 2列グリッドは維持（6-1）。カード全体をやや
   大きくし、画像・日付・タグ・タイトルに余裕を持たせる。境界は
   6章で採用済みの600px（css/responsive-mobile.cssの既存値）に揃え、
   PC1280・Tablet834を同じ扱いにする。 */
@media (min-width: 601px) {
  .news-list #newslist {
    gap: 2rem 1.75rem;
  }
  .news-list #newslist li > div[class^="cat-"]::before,
  .news-list #newslist li > div[class^="project-cat-"]::before {
    aspect-ratio: 3 / 2;
  }
  .news-list #newslist .project-newsitem {
    padding: 1.35rem 1.35rem 3.75rem;
  }
  .news-list #newslist .c-cms-table a {
    font-size: 1.2rem;
    line-height: 1.6;
  }
}

/* 7-3. Mobile390限定: カードが縦に長すぎる問題への対応として、
   サムネイル(::before)のaspect-ratioのみを現在(16/9、6-3)より低い値へ
   変更する。背景画像自体は既存 `center/cover no-repeat`（1〜2節・5節、
   本Phaseで変更なし）のままのため、比率変更後も画像は不自然に伸びず
   トリミング表示される。タイトル・タグ・日付のfont-sizeは本節では
   変更しない（現状を維持、縮小しない）。 */
@media (max-width: 600px) {
  .news-list #newslist li > div[class^="cat-"]::before,
  .news-list #newslist li > div[class^="project-cat-"]::before {
    aspect-ratio: 2.35 / 1;
  }
}

/* 7-4. プレースホルダー配色（該当画像のない93・97のみ）: 現在の
   茶〜ピンクの単色〜二色グラデーション（1-2節の既定ルール）から、
   ブランドカラーの非常に淡いグラデーションへ変更する。新規色は追加せず、
   既存 --news-gray-bg / --news-pink / --news-pink-soft のみを使用する
   （rgba化は本ファイル既存の慣例、新規カラーの追加ではない）。
   87/89/94/95/96は5節の`:has(#news-XX)`ルール（IDセレクタ2個分、
   本ルールよりも詳細度が高い）が実画像backgroundを別途指定しているため、
   本ルールでは上書きされず実画像のまま維持される。 */
.news-list #newslist li > div[class^="cat-"]::before,
.news-list #newslist li > div[class^="project-cat-"]::before {
  background: linear-gradient(135deg, var(--news-gray-bg) 0%, rgba(255, 98, 181, 0.16) 55%, rgba(255, 11, 141, 0.1) 100%);
}

/* 7-5. カテゴリフィルター: 絞り込み機能（js/pages/news-filter.js）は
   無変更。ボタン間のgap・ボタン内paddingのみ視覚調整で広げる。
   選択中のブランドピンク配色（4節 .is-active）は無変更のまま維持する。 */
.news-list .p-news-filter {
  gap: 0.65rem;
}
.news-list .p-news-filter button {
  padding: 0.6rem 1.6rem;
}
@media (max-width: 834px) {
  .news-list .p-news-filter {
    gap: 0.5rem;
  }
  .news-list .p-news-filter button {
    padding: 0.55rem 1.3rem;
  }
}

/* ============================================================
   Phase8（2026-09-11）: 一覧ページのみの最終仕上げ（3点）
   対象: newsinformation-h/webdir/index.html の #newslist・Hero のみ。
   詳細ページ7件（87/89/93/94/95/96/97.html）・organization・
   js/pages/news-filter.js・js/pages/news-excerpt.jsのロジックは
   本Phaseで一切変更していない。下記の全セレクタは `.news-list ...`
   （index.html実測の <div class="l-wrapper news-list Wrap"> ラッパー）
   でスコープしており、詳細ページ・organizationのいずれにも一致しない。
   ============================================================ */

/* 8-1. 画像なし記事（93・97）: サムネイル領域(::before)を廃止する。
   93=cat-kyushoku（#news-93を含む）、97=cat-sonota（#news-97を含む）を、
   5節Phase5で確立済みの `:has(#news-XX)` パターン（HTML変更なしで
   特定の記事カードだけを対象にする既存手法）で特定する。このルールの
   詳細度（IDセレクタ2個＝#newslist＋:has()内の#news-93/97）は、
   ::beforeの表示を担う既定ルール（1-2節: IDセレクタ1個、7-3/7-4節:
   IDセレクタ1個+クラス2個）を常に上回るため、display:noneが確実に
   適用される。87/89/94/95/96の実画像ルール（5節、別IDを対象とする
   同パターン）はそれぞれ別要素を対象とするため一切影響を受けず、
   サムネイル表示は無変更のまま維持される。全viewport共通の対応
   （ユーザー指示により、画像なしカードの構造変更はMobile390にも
   同様に適用する）。 */
.news-list #newslist li > div.cat-kyushoku:has(#news-93)::before,
.news-list #newslist li > div.cat-sonota:has(#news-97)::before {
  display: none;
}

/* 8-1b. 画像なしカードの情報部分(.project-newsitem)：サムネイルが
   無くなった分の余白を使い、テキストを広く読みやすく配置する。
   右下の矢印(::after、既存のまま無変更)と重ならないよう、下側の
   paddingは既存値（PC/Tablet=3.75rem、Mobile=3.25rem）を維持する。 */
.news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
.news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
  justify-content: center;
}
@media (min-width: 601px) {
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    padding: 2.25rem 1.75rem 3.75rem;
    /* 画像カード（3:2サムネイル＋テキスト）とカード全体の高さの差が
       極端にならないよう、標準行内の97（96と同行、grid stretchで自動的に
       画像カードと同じ高さになる）とは別に、最終行で単独になる93の
       高さも底上げする（実測: Tablet834で画像カード平均とほぼ一致、
       PC1280でも差を縮小。実機確認は検証セクション参照）。 */
    min-height: 320px;
  }
}
@media (max-width: 600px) {
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    padding: 1.5rem 1.25rem 3.25rem;
  }
}

/* 8-1c. 画像なしカードに限り、日付・カテゴリ・タイトルに加えて概要文
   （.p-news-card-summary、js/pages/news-excerpt.jsが同一オリジンfetchで
   自動挿入する既存の抜粋。ロジック自体は無変更）も表示し、空いた
   スペースを情報で広く使う。画像あり5記事（87/89/94/95/96）は
   6-7節のdisplay:noneのまま変更しない（サムネイル同様、無変更を維持）。
   アイコン・プレースホルダー画像は新規追加しない。 */
.news-list #newslist li > div.cat-kyushoku:has(#news-93) .p-news-card-summary,
.news-list #newslist li > div.cat-sonota:has(#news-97) .p-news-card-summary {
  display: block;
  margin-top: 0.75rem;
}

/* 8-2. PC/Tablet（601px以上）: タイトル・日付・概要（画像なしカードで
   特に広くなる領域を含む）の可読性を少し向上させる。カード自体の
   大型化はしない（gap・padding・aspect-ratioは7章の値のまま変更しない。
   8-1bの画像なしカード限定paddingのみ別途上記で調整済み）。 */
@media (min-width: 601px) {
  .news-list #newslist .c-cms-table a {
    font-size: 1.25rem;
    line-height: 1.65;
  }
  .news-list #newslist .project-newtd {
    font-size: 0.9rem;
  }
  .news-list #newslist .p-news-card-summary {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* 8-3. Mobile390は大きなサイズ変更をしない（Phase7で抑えたサムネイル
   高さ・文字サイズをそのまま維持、本節では一切上書きしない）。
   画像なしカード（93・97）の構造変更（8-1〜8-1c）のみ、ビューポート
   共通の対応としてMobile390にも適用済み（上記参照）。 */

/* 8-4. Hero: 現在の構造・背景（3節の淡いピンク〜白グラデーション、
   本Phaseでも一切変更しない）は維持したまま、「お知らせ」のタイトル
   文字サイズと上下paddingをPhase7からさらにわずかに増やし、ページ
   見出しとしての存在感を上げる。根拠のないHero画像は追加しない。 */
.news-list .p-news-hero {
  padding: 2.9rem 2.25rem 2.6rem;
}
.news-list .p-news-hero__title {
  font-size: 2.9rem;
}
@media (max-width: 834px) {
  .news-list .p-news-hero {
    padding: 2.05rem 1.5rem 1.85rem;
  }
  .news-list .p-news-hero__title {
    font-size: 2.15rem;
  }
}


/* 2026-09-11: news grid / related articles. Only the news page opt-ins. */
.news-list #newslist { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 601px) {
  .news-list #newslist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .news-list #newslist {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
  }
}
.news-list #newslist > li { min-width: 0; }
.news-list #newslist > li > div::before { display: none; }
.news-list #newslist .p-news-card-image {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: 14px 14px 0 0; flex: 0 0 auto;
}
.news-list #newslist li > div:not(:has(> .p-news-card-image)):has(.project-newtd > .project-new) .project-newsitem {
  padding-top: 2.5rem;
}
.news-list #newslist li > div[class^="cat-"] .project-newsitem,
.news-list #newslist li > div[class^="project-cat-"] .project-newsitem {
  width: 100%; box-sizing: border-box; align-self: stretch;
  padding: 1rem 1rem 3.5rem; min-height: 0; justify-content: flex-start;
}
/* Override the earlier ID-specific no-image padding without a global rule. */
.news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
.news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
  padding: 1rem 1rem 3.5rem; min-height: 0; justify-content: flex-start;
}
.news-list #newslist .c-cms-table a {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  color: var(--news-charcoal); font-size: 1.05rem; font-weight: 700;
  line-height: 1.65; overflow-wrap: anywhere;
}
.news-list #newslist .title { color: var(--news-charcoal); }
.news-list #newslist .title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.news-list #newslist li > div:focus-within { outline: 2px solid var(--news-pink); outline-offset: 3px; }
.news-list #newslist .project-newtd > .project-new { pointer-events: none; }
.news-list #newslist .project-newtd { font-size: .85rem; }
.news-list #newslist .p-news-card-summary {
  display: block; color: var(--news-text); font-size: .9rem;
  line-height: 1.75; margin: .65rem 0 0; overflow: visible;
  max-height: none; -webkit-line-clamp: unset;
}
.news-list #newslist li > div[class^="cat-"]::after,
.news-list #newslist li > div[class^="project-cat-"]::after {
  color: var(--news-card-bg); background: var(--news-pink); box-shadow: none;
}
.news-list .p-news-hero { padding-top: 2.25rem; padding-bottom: 2rem; }
.news-list .p-news-filter button:focus-visible {
  outline: 2px solid var(--news-pink); outline-offset: 3px;
}
@media (min-width: 1100px) { .news-list .p-news-filter { flex-wrap: nowrap; } }

/* 2026-09-12: compact landscape cards from the confirmed UI mockup. */
@media (min-width: 601px) {
  .news-list #newslist { gap: .8rem; }
  .news-list #newslist .p-news-card-image {
    aspect-ratio: 3.7 / 1;
  }
  .news-list #newslist li > div[class^="cat-"] .project-newsitem,
  .news-list #newslist li > div[class^="project-cat-"] .project-newsitem,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    padding: .48rem .58rem 2rem;
  }
  .news-list #newslist .c-cms-table a {
    font-size: .76rem;
    line-height: 1.4;
  }
  .news-list #newslist .project-newtd {
    font-size: .7rem;
  }
  .news-list #newslist .p-news-card-summary,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .p-news-card-summary,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .p-news-card-summary {
    display: none;
  }
  .news-list #newslist li > div[class^="cat-"]::after,
  .news-list #newslist li > div[class^="project-cat-"]::after {
    right: .5rem;
    bottom: .45rem;
    width: 1.65rem;
    height: 1.65rem;
  }
}

/* 2026-09-12: PC一覧だけ有効幅を拡張。Hero・filter・pagerと834px以下は維持。 */
@media (min-width: 1100px) {
  .news-list #newslist {
    width: min(calc(100vw - 80px), 1200px);
    max-width: 1200px;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
  }
  .news-list #newslist > li > div[class^="cat-"],
  .news-list #newslist > li > div[class^="project-cat-"] {
    box-sizing: border-box;
    height: 158px;
    min-height: 158px;
  }
  .news-list #newslist .p-news-card-image {
    height: 60px;
    aspect-ratio: auto;
  }
  .news-list #newslist li > div[class^="cat-"] .project-newsitem,
  .news-list #newslist li > div[class^="project-cat-"] .project-newsitem,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    padding: .38rem .58rem 1.72rem;
  }
}

.p-news-detail.cms_news-info { padding: 2rem 3rem; }
.p-news-detail.cms_news-info { border: 1px solid var(--news-border); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.p-news-detail.cms_news-info .p-news-breadcrumb {
  margin: -2rem -3rem 1.75rem; padding: 1rem 3rem;
  background: rgba(255, 11, 141, .06);
}
.p-news-detail .p-news-breadcrumb__current {
  white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: left;
}
.p-news-detail.cms_news-info .halfH1 {
  font-size: 2rem; line-height: 1.5; margin: .4rem 0 1.5rem; padding: 0;
  text-align: left; overflow-wrap: anywhere; font-weight: 700;
}
.p-news-detail.cms_news-info .halfH1::after { height: 3px; margin-top: 1rem; }
.p-news-detail.cms_news-info .infoday.description {
  margin: 0; padding: 0; flex-wrap: wrap; min-height: 24px; font-size: .9rem;
}
.p-news-detail.cms_news-info .infoday.description .day-style { font-size: inherit; }
.p-news-detail .p-news-meta-category { display: inline-block; flex: 0 0 auto; }
.p-news-detail .articleH2[hidden] { display: none; }
.p-news-detail.cms_news-info .p-news-detail-mainimage { margin: 0 0 1.5rem; }
.p-news-detail.cms_news-info .p-news-detail-mainimage img {
  aspect-ratio: 5 / 2; height: auto; object-fit: cover;
}
.p-news-detail.cms_news-info .inner.c-cms-wrap {
  width: 100%; padding: 0; line-height: 1.9; color: var(--news-text);
}
.p-news-detail.cms_news-info .inner.c-cms-wrap p { line-height: 1.9; }
.p-news-detail.cms_news-info .inner a[href]:not(:has(img)) {
  padding: 1.25rem; min-height: 72px; border-radius: 12px;
  background: rgba(255, 11, 141, .06); border-color: rgba(255, 11, 141, .14);
}
.p-news-detail.cms_news-info .inner a[href]:not(:has(img))::before {
  content: "description"; font-size: 2rem;
}
.p-news-detail.cms_news-info .inner a[href]:not(:has(img)):hover {
  background: rgba(255, 11, 141, .14);
}
/* Document scans in CMS content keep their full aspect ratio. */
.p-news-detail.cms_news-info .inner .photobig a:has(img) {
  padding: 0; border: 0; background: transparent; display: block;
}
.p-news-detail.cms_news-info .inner .photobig a:has(img)::before,
.p-news-detail.cms_news-info .inner .photobig a:has(img)::after { content: none; }
.p-news-detail.cms_news-info .inner > .photobig img {
  max-width: 600px; margin: 0 auto; object-fit: contain;
}
.p-news-detail .p-news-related { order: 2; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--news-border); }
.p-news-detail .p-news-related__heading {
  margin: 0 0 1.25rem; padding: 0 0 0 .75rem;
  border-left: 4px solid var(--news-pink); background: transparent;
  color: var(--news-charcoal); font-size: 1.3rem; line-height: 1.5; text-align: left;
}
.p-news-detail .p-news-related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.p-news-detail .p-news-related__card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--news-border); border-radius: 12px;
  background: var(--news-card-bg); color: var(--news-charcoal);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04); text-decoration: none; text-align: left;
}
.p-news-detail .p-news-related__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.p-news-detail .p-news-related__body { padding: 1rem; display: flex; flex-direction: column; gap: .65rem; }
.p-news-detail .p-news-related__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .8rem; color: var(--news-text); }
.p-news-detail .p-news-related__category { width: auto; height: 18px; }
.p-news-detail .p-news-related__title { font-size: 1rem; line-height: 1.65; font-weight: 700; overflow-wrap: anywhere; }
.p-news-detail .p-news-related__card:hover { border-color: var(--news-pink); }
.p-news-detail .p-news-related__card:focus-visible,
.p-news-detail .inner a:focus-visible,
.p-news-detail .sugu-page-link a:focus-visible { outline: 2px solid var(--news-pink); outline-offset: 3px; }
.p-news-detail .pure-g.sugu-page-link { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.p-news-detail .sugu-page-link > div { width: auto; padding: 0; border: 0; }
.p-news-detail .sugu-page-link > div:nth-child(2) { grid-column: 1; grid-row: 1; }
.p-news-detail .sugu-page-link > div:first-child { grid-column: 2; grid-row: 1; }
.p-news-detail .sugu-page-link > div:last-child { grid-column: 3; grid-row: 1; }
.p-news-detail .sugu-page-link .pure-button { border-color: var(--news-pink); min-height: 48px; }
@media (max-width: 834px) {
  .news-list .p-news-hero__desc { text-align: left; }
  .p-news-detail.cms_news-info { padding: 1.5rem; }
  .p-news-detail.cms_news-info .p-news-breadcrumb { margin: -1.5rem -1.5rem 1.5rem; padding: 1rem 1.5rem; }
  .p-news-detail.cms_news-info .halfH1 { font-size: 1.65rem; }
  .p-news-detail .p-news-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .news-list .p-news-hero { padding: 1.75rem 1.5rem; }
  .news-list #newslist > li > div[class^="cat-"],
  .news-list #newslist > li > div[class^="project-cat-"] {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    grid-auto-flow: row;
    align-items: stretch;
  }
  .news-list #newslist .p-news-card-image {
    grid-column: 1;
    width: 100%;
    height: 100%;
    min-height: 94px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 14px 0 0 14px;
  }
  .news-list #newslist li > div[class^="cat-"] .project-newsitem,
  .news-list #newslist li > div[class^="project-cat-"] .project-newsitem,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    grid-column: 2;
    width: 100%;
    padding: .45rem .52rem 1.8rem;
  }
  .news-list #newslist li > div:not(:has(> .p-news-card-image)) .project-newsitem,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .project-newsitem,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .project-newsitem {
    grid-column: 1 / -1;
  }
  .news-list #newslist .c-cms-table a {
    font-size: .74rem;
    line-height: 1.4;
  }
  .news-list #newslist .project-newtd { font-size: .68rem; }
  .news-list #newslist .p-news-card-summary,
  .news-list #newslist li > div.cat-kyushoku:has(#news-93) .p-news-card-summary,
  .news-list #newslist li > div.cat-sonota:has(#news-97) .p-news-card-summary {
    display: none;
  }
  .news-list #newslist li > div[class^="cat-"]::after,
  .news-list #newslist li > div[class^="project-cat-"]::after {
    right: .45rem;
    bottom: .4rem;
    width: 1.55rem;
    height: 1.55rem;
  }
  .p-news-detail.cms_news-info { padding: 1.25rem; }
  .p-news-detail.cms_news-info .p-news-breadcrumb { margin: -1.25rem -1.25rem 1.25rem; padding: 1rem 1.25rem; }
  .p-news-detail.cms_news-info .halfH1 { font-size: 1.45rem; }
  .p-news-detail.cms_news-info .p-news-detail-mainimage img { aspect-ratio: 16 / 9; }
  .p-news-detail .p-news-related__grid { grid-template-columns: minmax(0, 1fr); }
  .p-news-detail .pure-g.sugu-page-link { grid-template-columns: minmax(0, 1fr); }
  .p-news-detail .sugu-page-link > div:nth-child(n) { grid-column: auto; grid-row: auto; }
  .p-news-detail .sugu-page-link > div:nth-child(2) { order: -1; }
  .p-news-detail .sugu-page-link > div:empty { display: none; }
}

/* 2026-09-12: detail-page final visual polish. Scoped to the detail opt-in only. */
.p-news-detail.cms_news-info {
  padding: 2.25rem 3.25rem 2.75rem;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(68, 51, 34, .08);
}
.p-news-detail.cms_news-info .p-news-breadcrumb {
  margin: -2.25rem -3.25rem 2rem;
  padding: 1.05rem 3.25rem;
  border-bottom: 1px solid var(--news-pink-soft);
  background: linear-gradient(90deg, rgba(255, 11, 141, .08), rgba(255, 11, 141, .025));
}
.p-news-detail.cms_news-info .infoday.description {
  width: max-content;
  max-width: 100%;
  min-height: 30px;
  padding: .42rem .72rem;
  border: 1px solid var(--news-border);
  border-radius: 999px;
  background: var(--news-gray-bg);
}
.p-news-detail.cms_news-info .halfH1 {
  max-width: 920px;
  margin: .7rem 0 1.75rem;
  font-size: 2.2rem;
  line-height: 1.45;
}
.p-news-detail.cms_news-info .halfH1::after {
  width: 52px;
  margin-top: 1.05rem;
}
.p-news-detail.cms_news-info .p-news-detail-mainimage {
  margin: .15rem 0 2rem;
  overflow: hidden;
  border: 1px solid var(--news-border);
  border-radius: 18px;
  background: var(--news-gray-bg);
  box-shadow: 0 8px 22px rgba(68, 51, 34, .09);
}
.p-news-detail.cms_news-info .p-news-detail-mainimage img {
  display: block;
  width: 100%;
  border-radius: 18px;
}
.p-news-detail.cms_news-info .inner.c-cms-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1.75rem 2rem 1.9rem;
  border: 1px solid var(--news-border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 11, 141, .025), var(--news-card-bg) 38%);
  box-shadow: 0 5px 18px rgba(68, 51, 34, .055);
}
.p-news-detail.cms_news-info .inner.c-cms-wrap > div:first-child { width: 100%; }
.p-news-detail.cms_news-info .inner.c-cms-wrap p {
  margin: 0 0 1.05rem;
  line-height: 1.95;
}
.p-news-detail.cms_news-info .inner.c-cms-wrap p:last-child { margin-bottom: 0; }
.p-news-detail.cms_news-info .inner.c-cms-wrap h2,
.p-news-detail.cms_news-info .inner.c-cms-wrap h3 {
  margin: .2rem 0 1.25rem;
  padding: .35rem 0 .35rem .85rem;
  border-left: 4px solid var(--news-pink);
  background: transparent;
  color: var(--news-charcoal);
  line-height: 1.55;
  text-align: left;
}
.p-news-detail.cms_news-info .inner a[href]:not(:has(img)) {
  margin-top: .8rem;
  padding: 1.2rem 1.35rem;
  border-color: var(--news-pink-soft);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(255, 11, 141, .07);
}
.p-news-detail .p-news-related {
  margin-top: 2.25rem;
  padding: 1.75rem;
  border: 1px solid var(--news-border);
  border-radius: 18px;
  background: rgba(255, 11, 141, .025);
}
.p-news-detail .p-news-related__heading {
  margin-bottom: 1.35rem;
  font-size: 1.45rem;
}
.p-news-detail .p-news-related__grid {
  align-items: stretch;
  gap: 1.1rem;
}
.p-news-detail .p-news-related__card {
  position: relative;
  border-radius: 14px;
  box-shadow: 0 5px 16px rgba(68, 51, 34, .07);
}
.p-news-detail .p-news-related__card::after {
  content: "\203A";
  position: absolute;
  right: .8rem;
  bottom: .75rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border-radius: 50%;
  background: var(--news-pink);
  color: var(--news-card-bg);
  font-size: 1.15rem;
  font-weight: 700;
}
.p-news-detail .p-news-related__image {
  aspect-ratio: 2.8 / 1;
  border-radius: 14px 14px 0 0;
}
.p-news-detail .p-news-related__body {
  padding: 1rem 1rem 3.15rem;
  gap: .55rem;
}
.p-news-detail .p-news-related__title { line-height: 1.55; }
.p-news-detail .pure-g.sugu-page-link {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  gap: 1.1rem;
}
.p-news-detail .sugu-page-link .pure-button {
  min-height: 52px;
  border-color: var(--news-pink);
  background: var(--news-card-bg);
  box-shadow: 0 3px 12px rgba(68, 51, 34, .055);
}
.p-news-detail .sugu-page-link .pure-button:hover,
.p-news-detail .sugu-page-link .pure-button:focus {
  border-color: var(--news-pink);
  background: var(--news-pink);
  color: var(--news-card-bg);
}

@media (max-width: 834px) {
  .p-news-detail.cms_news-info {
    padding: 1.5rem;
    border-radius: 18px;
  }
  .p-news-detail.cms_news-info .p-news-breadcrumb {
    margin: -1.5rem -1.5rem 1.6rem;
    padding: 1rem 1.5rem;
  }
  .p-news-detail.cms_news-info .halfH1 {
    margin-top: .65rem;
    font-size: 1.75rem;
  }
  .p-news-detail.cms_news-info .inner.c-cms-wrap { padding: 1.5rem; }
  .p-news-detail .p-news-related { padding: 1.5rem; }
}

@media (max-width: 600px) {
  .p-news-detail.cms_news-info {
    padding: 1rem;
    border-radius: 16px;
  }
  .p-news-detail.cms_news-info .p-news-breadcrumb {
    margin: -1rem -1rem 1rem;
    padding: .9rem 1rem;
  }
  .p-news-detail.cms_news-info .infoday.description {
    padding: .36rem .58rem;
    border-radius: 12px;
  }
  .p-news-detail.cms_news-info .halfH1 {
    margin: .55rem 0 1.35rem;
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .p-news-detail.cms_news-info .halfH1::after { margin-top: .85rem; }
  .p-news-detail.cms_news-info .p-news-detail-mainimage {
    margin-bottom: 1.4rem;
    border-radius: 14px;
  }
  .p-news-detail.cms_news-info .p-news-detail-mainimage img { border-radius: 14px; }
  .p-news-detail.cms_news-info .inner.c-cms-wrap {
    padding: 1.2rem;
    border-radius: 14px;
  }
  .p-news-detail.cms_news-info .inner.c-cms-wrap p { margin-bottom: .9rem; }
  .p-news-detail.cms_news-info .inner a[href]:not(:has(img)) {
    min-height: 76px;
    padding: 1rem;
  }
  .p-news-detail .p-news-related {
    margin-top: 1.5rem;
    padding: 1.15rem;
    border-radius: 14px;
  }
  .p-news-detail .p-news-related__heading { font-size: 1.25rem; }
  .p-news-detail .p-news-related__image { aspect-ratio: 2.4 / 1; }
  .p-news-detail .pure-g.sugu-page-link { margin-top: 1.5rem; gap: .7rem; }
  .p-news-detail .sugu-page-link .pure-button { min-height: 48px; }
}

/* 2026-09-12: actual main-image detail pages only; width and crop behavior stay unchanged. */
.p-news-detail.cms_news-info > .p-news-detail-mainimage > img {
  aspect-ratio: 2.85 / 1;
}
@media (max-width: 600px) {
  .p-news-detail.cms_news-info > .p-news-detail-mainimage > img {
    aspect-ratio: 2.02 / 1;
  }
}


/* ============================================================================
   Phase B追加分（news.cssへの追記のみ、既存ルールは一切削除・変更していない）
   目的: CMSテンプレート(article_list.txt/article.html)から出力されるカテゴリ
   クラスは、シンプルな文字列置換エンジンの制約上「project-」接頭辞を
   すべてのカテゴリ値に一律付与する方式を採る(カテゴリ値ごとの条件分岐は
   テンプレート側で表現できないため)。
   既存の手動生成済みページ(87/89/93/94/95/96/97.html等)は、yakkyokuカテゴリ
   のみ意図的に接頭辞なし("yakkyoku"のまま)で出力されており、既存news.cssの
   対応ルールも".yakkyoku"（接頭辞なし）を前提にしている。
   本追加は、テンプレートが今後出力する".project-yakkyoku"（接頭辞あり）の
   ケースにも同じ見た目が適用されるよう、既存の".yakkyoku"ルールと全く同じ
   宣言を持つ".project-yakkyoku"版を追加するのみ。既存の".yakkyoku"ルード・
   既存記事の表示への影響は一切ない（純粋な追加、置換ではない）。
   ============================================================================ */
#newslist .project-inline-icon.project-yakkyoku {
  display: inline-block;
  width: 72px;
  height: 25px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  background-image: url(/images/cms/yakkyoku.png);
}
@media (max-width: 834px) {
  #newslist .project-inline-icon.project-yakkyoku {
    width: 60px;
  }
}

/* ============================================================================
   Phase B追加分その2: 詳細ページの添付PDFリンク(.project-pdf-link-p a)表示改善
   発見の経緯: 2026-09-14投稿記事(98.html)には実際に添付PDFリンクが存在するが、
   確定デザイン(2026-09-12完成版)の対象7記事はいずれもこのスロットが空だった
   ため、実際にリンクが表示されるケースがこれまで一度も検証されていなかった。
   実際にレンダリングした結果、サイト共通の cms-components.css にある
   .project-pdf-link-p a のルール（width:80px; height:30pxの固定サイズ、
   news機能専用ではなくサイト全体で使われる共通コンポーネント）が、短いラベル
   を想定しており、実際のファイル名（例:「選定療養のお知らせ.pdf」）のような
   長いテキストだと80px幅に収まらず不自然に折り返してしまうことが判明した。
   サイト全体で使われる共通CSS（cms-components.css）は変更せず、
   お知らせ詳細ページ(.p-news-detail)内に限定したスコープでのみ、
   同じPDFアイコン背景を維持したまま幅を可変にする上書きを追加する
   （他ページのPDFリンク表示には一切影響しない）。 */
.p-news-detail .project-pdf-link-p a {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 30px;
  padding: 4px 10px 4px 34px;
  white-space: normal;
  line-height: 1.5;
  box-sizing: border-box;
}