/* =============================================================
   news.html（お知らせ一覧）と、トップの NEWS セクション
   下層ページ共通は page.css、トークンは style.css を前提にする。

   2026-09-14 新規。
   ブログ（写真カードの横スクロール）と並べても喧嘩しないよう、
   こちらは「写真なしの日付リスト」にしてある。同じカード並びを2つ続けると
   どちらが主役か分からなくなるため、形を意図的に逆にしている。
   ============================================================= */

/* 一覧ページの見出しには写真を敷かない（お知らせ用の絵が無いため）。
   写真が無いので高さの下限も持たせない（contact / legal と同じ扱い）。 */
.page-head { --head-bg: none; --head-min: auto; }
.page-head::before { display: none; }
@media (max-width: 1100px) { .page-head { --band: 0px; padding-top: 96px; } }
@media (max-width: 767px)  { .page-head { --band: 0px; padding-top: 72px; } }

/* -------------------------------------------------------------
   リスト本体（トップ・一覧で共用）
   ------------------------------------------------------------- */
/* 幅の上限はリスト自身に持たせる。.nw-wrap（一覧ページだけの入れ物）に持たせると、
   トップの NEWS は .inner いっぱい（1600px）まで伸びて、同じ部品なのに幅が食い違う。 */
.nw-wrap { max-width: 1040px; }

.nw-list { max-width: 1040px; list-style: none; margin: 0; padding: 0; }
.nw-item + .nw-item { border-top: 1px solid var(--line-soft); }

/* 1行ぶん。一覧は <button>（モーダルを開く）、トップは <a>（一覧へ送る）。
   どちらも同じ見た目にしたいので、セレクタは .nw-open でまとめる。
   button は既定の見た目を持っているので、それを消してから組む。 */
.nw-open {
  display: grid;
  grid-template-columns: 108px 124px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 26px 12px 26px 4px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s ease;
}
.nw-open:hover { background: var(--cream-2); }

.nw-date {
  font-family: var(--f-mono);
  font-size: 14px; letter-spacing: .04em;
  color: var(--ink-300);
}

/* カテゴリ。色は --nc（build-news.py がインラインで入れる）から取る。
   事業色と同じ考え方で、要素に色を持たせて読み出す方式。
   番号や順序に色を結びつけない（並べ替えで壊れるため）。 */
.nw-cat {
  justify-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nc, var(--hp-sky)) 12%, transparent);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.6;
  color: var(--nc, var(--hp-sky));
  white-space: nowrap;
}

.nw-ttl {
  font-size: 16px; font-weight: 700; line-height: 1.9;
  color: var(--ink-900);
  transition: color .2s ease;
}
.nw-open:hover .nw-ttl { color: var(--hp-sky); }

.nw-arw {
  justify-self: end;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  color: var(--ink-300);
  transition: color .2s ease, translate .25s ease;
}
.nw-arw .arw-i { width: 7px; height: 12px; fill: currentColor; }
.nw-open:hover .nw-arw { color: var(--hp-sky); translate: 4px 0; }

/* 本文は一覧の中に置いてあるが、既定では見せない（モーダルが映す） */
.nw-body { display: none; }

.nw-empty {
  margin-top: 60px;
  text-align: center;
  font-size: 16px;
  color: var(--ink-300);
}

/* ページ送り。粒の形は blog.css の .bl-pager と同じものを page 側に持たせず、
   news.css では位置だけ足す（.bl-pager 本体は blog.css にあるので、
   ここで最低限の見た目を持たせておく＝news.html は blog.css を読まない） */
.bl-pager {
  margin-top: 60px;
  display: flex; justify-content: center; align-items: center; gap: 10px;
}
.bl-pager > * {
  display: grid; place-items: center;
  min-width: 46px; height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  font-family: var(--f-en);
  font-size: 16px; font-weight: 700;
  color: var(--ink-500);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.bl-pager .is-now {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
  cursor: default;
}
.bl-pager button:not(.is-now):hover { border-color: var(--hp-sky); color: var(--ink-900); }
.bl-pager [aria-disabled="true"] { opacity: .4; pointer-events: none; }
/* display:flex が [hidden] に勝ってしまうので打ち消す（.bl-pager と同じ事情） */
.bl-pager[hidden] { display: none; }

/* -------------------------------------------------------------
   モーダル
   <dialog> なので、開いている間の背面の不活性・Esc・フォーカスの閉じ込めは
   ブラウザ側がやる。ここでは見た目と、::backdrop の暗幕だけ。
   ------------------------------------------------------------- */
.nw-modal {
  /* <dialog> はブラウザ既定の margin:auto で中央に来るが、style.css:86 の
     `*{margin:0}` がそれを潰して左上に寄る。ここで明示的に戻す。 */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(760px, calc(100% - 40px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--sh-lg);
  color: var(--ink-900);
  overflow: hidden;
}
.nw-modal::backdrop { background: rgba(18, 24, 38, .5); }

/* 開くときだけ軽く立ち上げる。閉じるときは即時（[open] が外れた瞬間に消える）。
   prefers-reduced-motion では動かさない。 */
@media (prefers-reduced-motion: no-preference) {
  .nw-modal[open] { animation: nw-in .28s cubic-bezier(.22,.7,.28,1); }
  .nw-modal[open]::backdrop { animation: nw-fade .28s ease; }
}
@keyframes nw-in   { from { opacity: 0; translate: 0 12px; scale: .985; } }
@keyframes nw-fade { from { opacity: 0; } }

.nw-modal-in {
  display: flex; flex-direction: column;
  max-height: inherit;
  padding: 34px 40px 32px;
  overflow-y: auto;          /* 本文が長いときはモーダルの中だけスクロールする */
}

.nw-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.nw-modal-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.nw-close {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin: -6px -8px 0 0;
  border: 0; border-radius: 50%;
  background: var(--ghost);
  color: var(--ink-500);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.nw-close:hover { background: var(--ink-900); color: #fff; }
.nw-close svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

.nw-modal-ttl {
  margin-top: 18px;
  font-size: 24px; font-weight: 800; letter-spacing: .01em; line-height: 1.6;
}

.nw-modal-body { margin-top: 20px; }
.nw-modal-body p {
  font-size: 16px; line-height: 2; color: var(--ink-700);
}
.nw-modal-body p + p { margin-top: 18px; }
.nw-modal-body a { color: var(--hp-sky); text-decoration: underline; }

.nw-modal-foot {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex; justify-content: center;
}

/* -------------------------------------------------------------
   画面が狭いとき
   3列＋矢印は入らないので、日付とカテゴリを1段目、見出しを2段目に落とす。
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .nw-open {
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    padding: 22px 4px;
  }
  .nw-date { grid-column: 1; }
  .nw-cat  { grid-column: 2; justify-self: start; }
  .nw-ttl  { grid-column: 1 / -1; }
  /* 矢印は場所を取るわりに意味が薄いので、狭い画面では出さない */
  .nw-arw  { display: none; }

  .nw-modal { width: calc(100% - 24px); max-height: 86vh; border-radius: 22px; }
  .nw-modal-in { padding: 26px 22px 24px; }
  .nw-modal-ttl { font-size: 20px; }
}

/* -------------------------------------------------------------
   トップの NEWS 帯（2026-09-14）
   ファーストビューと ABOUT の間に置く細い帯。左に見出しと「もっと見る」、右に3件。

   見出しは他セクションと同じ語法（英字が大見出し・和文が小さいラベル）にそろえる。
   ただし .sec-head / .sec-en は使わない。.sec-en は JS が1文字ずつ
   overflow:hidden の枠に入れて動かす作りで、.sec-head の外に置くと
   隠れたまま出てこないため、同じ見た目をここで素に組み直している。
   ------------------------------------------------------------- */
.nw-band {
  /* .sec の上下150pxに対して、帯なので詰める */
  padding: 80px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.nw-band-grid {
  display: grid;
  /* 左は .btn（min-width 300px）が収まる幅にする */
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* 大見出し。.sec-en の 44〜108px までは張らず、帯に合う大きさに抑える。
   頭文字だけ空色にするのは .sec-en::first-letter と同じ扱い。 */
.nw-band-en {
  font-family: var(--f-en);
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--ink-900);
}
.nw-band-en::first-letter { color: var(--hp-sky); }

/* 和文の小ラベル。頭の短い線も .sec-jp と同じ */
.nw-band-ttl {
  margin-top: 14px;
  font-size: 16px; font-weight: 700; letter-spacing: .1em; line-height: 1.6;
  color: var(--ink-900);
}
.nw-band-ttl::before {
  content: "";
  display: inline-block;
  width: 34px; height: 4px;
  border-radius: 4px;
  background: var(--signal);
  vertical-align: middle;
  margin-right: 14px;
}

.nw-band-btn { margin-top: 28px; }

/* 帯のリスト。日付・カテゴリは中身なりの幅で寄せ、見出しをすぐ隣から始める
   （一覧ページの固定幅のままだと、広い右カラムで見出しが遠くに離れる） */
.nw-band .nw-list { max-width: none; }
.nw-band .nw-item:first-child { border-top: 1px solid var(--line-soft); }
.nw-band .nw-open {
  grid-template-columns: auto auto minmax(0, 1fr) 24px;
  gap: 18px;
  padding: 18px 10px 18px 2px;
}
.nw-band .nw-ttl { font-size: 16px; font-weight: 500; line-height: 1.8; }

@media (max-width: 1100px) {
  .nw-band-grid { grid-template-columns: 300px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 767px) {
  .nw-band { padding: 52px 0 56px; }
  /* 1カラムに落とし、ボタンはリストの下に回す。
     order は同じ親の中でしか効かないので、.nw-band-head を display:contents にして
     中の3つを .nw-band-grid の直接の子として並べ替える。 */
  .nw-band-grid { grid-template-columns: 1fr; gap: 0; }
  .nw-band-head { display: contents; }
  .nw-band-en  { order: 1; }
  .nw-band-ttl { order: 2; margin-bottom: 18px; }
  .nw-band .nw-list { order: 3; }
  .nw-band-btn { order: 4; justify-self: start; margin-top: 26px; }
  .nw-band .nw-open { padding: 16px 2px; }
}