/* NEWS（一覧 /news・記事ポップアップ・記事 /news/<slug>。テンプレートは src/templates/collections.mjs、ポップアップの開閉は news-modal.js）専用。
   トップページの NEWS 欄も同じポップアップを使うので、トップでも読み込む（scripts/build.mjs で差し込む）。
   値は現行 STUDIO 版を 1440/1280/1024/768/390/375px で測って合わせた。ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。
   本文（.n-body）は STUDIO のリッチテキストの既定値と同じ（お役立ち情報 posts.css の本文とは段落の間隔・見出しが違う）。
   現行から意図して変えた点には「現行は…」とコメントを付けている。 */

/* 書体・文字の既定（shared.css の本文 17px/1.9・見出しの詰め・バランス改行などを現行の値に戻す） */
.n-page{font-family:Overpass,'Noto Sans JP','Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.4;color:#333;background:#fff}
.n-page :is(h1,h2,h3,h4,h5,h6,p){margin:0;letter-spacing:normal;font-feature-settings:normal;text-wrap:wrap}

/* ---------- 一覧（/news） ---------- */
/* 上余白は、見出しの位置が利用者の声・料金の見出し（ラベルの下）と同じ高さになる値（PC 60px＋ラベル 27px、スマホ 50px＋27px）。
   現行はヘッダー（70px）の裏から上余白 170px（スマホはヘッダー 60px で上余白 110px） */
.n-index{display:flex;flex-direction:column;align-items:center;padding:87px 100px 100px}
/* 見出し・説明文は利用者の声（/voice）・料金（/price）の冒頭と同じ見た目（見出しは top.css の .t-h2 と同じ値、説明文は黒の 16px）。
   見出しが英字の「NEWS」なので上の小さいラベルは置かない（現行は見出しの上に緑の説明文） */
.n-page .n-index__title{width:1100px;max-width:100%;margin-bottom:20px;padding:0 40px;color:#242528;font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1}
.n-page .n-index__lead{margin-bottom:30px;color:#333;font-size:16px;font-weight:400;line-height:1.4;text-align:center}
.n-index__box{width:1100px;max-width:100%;padding:30px 50px}
.n-list{margin:0;padding:0;list-style:none}
.n-list>li{display:block}
/* 1行: 日付の 30px 右にタイトル。区切りは薄い線。ホバーの変化は現行どおり無し */
.n-item{display:flex;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid rgba(0,0,0,.15);background:#fff;color:#333;line-height:1.7}
.n-item time{flex:none;width:6.25em;margin-right:24px;color:#242528;white-space:nowrap}
.n-item span{min-width:0;overflow-wrap:anywhere}
/* もっと見る（現行どおり20件ずつ。ホバーの変化は無し）。現行は読み込んでいない Lato 指定（端末の既定書体で表示される）なので、ほかの文字と同じ書体にする */
.n-index .more-wrap{margin-top:0}
.n-more{width:282px;max-width:100%;height:40px;margin:4px;padding:0 0 2px;border:0;border-radius:20px;background:#286b4a;color:#fff;font:inherit;font-size:16px;line-height:1.4;cursor:pointer}

/* ---------- 記事（/news/<slug>）とポップアップの中身 ---------- */
/* 現行の記事ページはヘッダー・フッターが無く、幅 700px の箱（上下左右 20px 空け・内側 40px 15px）だけのページ */
.n-detail{display:flex;flex-direction:column;align-items:center}
.n-article{display:flex;flex-direction:column;align-items:center;width:700px;max-width:calc(100% - 40px);margin:20px;padding:40px 15px}
/* タイトルは文字の幅だけの箱で中央に置く（短いタイトルは中央寄せ）。2行以上になるときは日付・本文と同じ幅（600px・左右 10px）で、左端をそろえる */
.n-page .n-article__title{max-width:600px;padding:0 10px;margin-bottom:15px;color:#333;font-size:18px;font-weight:600;line-height:1.5;text-align:left}
.n-article__date{display:block;width:600px;max-width:100%;padding:0 10px;color:rgba(51,51,51,.7);font-size:16px;line-height:1.4}
/* 一覧へのボタン（現行の記事ページには無い。「もっと見る」と同じ形） */
.n-page .n-article__back{margin-top:40px}
.n-article__back a{display:inline-flex;align-items:center;justify-content:center;width:282px;max-width:100%;height:40px;padding:0 0 2px;border-radius:20px;background:#286b4a;color:#fff;font-size:16px;line-height:1.4;transition:opacity .3s}
.n-article__back a:hover{opacity:.8}

/* 本文（Markdown）。STUDIO のリッチテキストの既定値 */
.n-body{display:block;width:600px;max-width:100%;padding:0 10px;color:#333;font-size:16px;font-weight:400;line-height:1.4}
.n-page .n-body p{margin:10px 0}
/* 空行だけの段落（Markdown で &nbsp; だけの行・<p></p>）も現行どおり 1 行分の高さを取る */
.n-body>p{min-height:1em;line-height:1.7}
.n-body strong{font-weight:900}
.n-body em{font-style:italic}
.n-body u{text-decoration:underline}
.n-body s{text-decoration:line-through}
.n-body a{color:#007cff;text-decoration:underline}
.n-page .n-body :is(h1,h2,h3,h4,h5,h6){margin:10px 0;color:inherit;font-size:16px;font-weight:700;line-height:1.4;text-wrap:wrap}
/* 現行（STUDIO 既定）の大見出しは 32px で本文幅 600px には大きすぎる。今の記事には使われていないので、読みやすい 20px にした */
.n-page .n-body h2{margin:20px 0 10px;font-size:20px}
.n-page .n-body :is(h4,h5){font-weight:600}
.n-page .n-body h6{font-weight:500}
.n-body :is(ul,ol){margin:0 0 0 20px;padding:0}
.n-body ul{list-style:disc outside}
.n-body ol{list-style:decimal outside}
.n-body li{margin:10px 0}
.n-page .n-body li>p{margin:0}
/* 引用: 現行（STUDIO 既定）は斜体。和文は機械的に傾けた字になり読みにくいので斜体にはしない */
.n-body blockquote{margin:10px 0;padding:10px 15px;border-left:3px solid rgba(0,0,0,.15)}
.n-body hr{height:0;margin:10px 0;border:0;border-top:1px solid #ccc}
.n-body code{margin:2px;padding:0 5px;border:1px solid rgba(0,0,0,.1);border-radius:6px;background:#eee;font-size:inherit}
.n-body img{display:inline;max-width:100%;height:auto;vertical-align:bottom}
/* 画像だけの段落は現行の画像ブロックと同じく上下の余白なし（前後の段落の余白 10px だけ空く。画像が続くときは間を空けない） */
.n-page .n-body>p:is(:has(>img:only-child),:has(>a:only-child>img:only-child)){margin:0}
/* 表: 内容の幅（セルは幅 100〜240px）。セル内は文字の途中でも折り返す。本文幅を超える表は箱の中で横にスクロールする */
.n-body .table-scroll{overflow-x:auto}
.n-body table{width:auto;margin:10px 0;border:1px solid #f2f2f2;border-collapse:collapse;background:none;color:#1a1a1a;font-family:sans-serif;font-size:14px;line-height:1.4}
.n-body :is(th,td){min-width:100px;max-width:240px;padding:12px;border:1px solid #f2f2f2;font-weight:400;text-align:left;vertical-align:middle;white-space:pre-line}
.n-body th{background:rgba(245,245,245,.5)}
.n-body .embed{margin:20px 0;aspect-ratio:16/9}
.n-body .embed iframe{display:block;width:100%;height:100%;border:0}

/* ---------- 一覧のポップアップ ---------- */
/* 画面全体の幕（現行: 黒 16%）。箱は幅 700px・高さは中身に合わせて画面の中央に置く（現行は短い記事でも画面いっぱいで下半分が空く）。
   中身が画面より長いときは画面の高さ（上下 20px 空け）までにして、箱の中でスクロールする */
.n-modal{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.16);overflow:hidden;transition:background-color .4s cubic-bezier(.4,.4,0,1)}
.n-modal[open]{display:flex;align-items:center;justify-content:center}
.n-modal::backdrop{background:transparent}
.n-modal__box{display:flex;flex-direction:column;align-items:center;width:700px;max-width:calc(100% - 40px);height:auto;max-height:calc(100% - 40px);margin:20px;padding:40px 15px;border-radius:10px;background:#fff;box-shadow:0 6px 15px rgba(0,0,0,.2);overflow:hidden auto;overscroll-behavior:contain;transition:opacity .3s cubic-bezier(.4,.4,0,1),translate .3s cubic-bezier(.4,.4,0,1)}
/* 閉じるとき（現行と同じく、幕が 0.4 秒で消え、箱は下へ 100px ずれながら 0.3 秒で消える。開くときは即時） */
.n-modal.is-closing{background-color:transparent}
.n-modal.is-closing .n-modal__box{opacity:0;translate:0 100px}
/* 閉じるボタン（現行には無い）。箱の右上（上・右 8px）に置き、中身をスクロールしても同じ位置に残す（sticky の top は箱の内側 40px からの位置） */
.n-modal__close{position:sticky;top:-32px;z-index:1;flex:none;align-self:flex-end;display:grid;place-items:center;width:32px;height:32px;margin:-32px -7px 0 0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);color:#333;cursor:pointer;transition:background-color .3s}
.n-modal__close:hover{background:#eee}
.n-modal__close svg{display:block;width:20px;height:20px;fill:currentColor}
/* 押せる範囲は44px角（見た目の丸は32pxのまま） */
.n-modal__close::after{content:'';position:absolute;inset:-6px}

@media (max-width:1280px){
  .n-index{padding:87px 60px 100px}
  .n-page .n-index__title{padding:0}
}
@media (max-width:840px){
  .n-index{padding:77px 40px 50px}
  .n-page .n-index__title{font-size:24px}
  .n-page .n-index__lead{margin-bottom:0}
  .n-index__box{padding:30px 30px 0}
  .n-index .more-list{margin:15px 0}
  /* 現行はこの幅でタイトルが折り返さずに右端で切れて読めない（541〜840px）。折り返して全文を出す */
  .n-item{margin-bottom:10px}
}
@media (max-width:540px){
  /* 現行はヘッダーが 60px になっても上の余白が 70px のまま（＋内側 40px） */
  .n-index{padding:77px 20px 40px}
  .n-index__box{padding:30px 15px 0}
  .n-item{flex-direction:column;align-items:flex-start;margin-bottom:15px}
  .n-item time{width:auto;margin-right:0}
}
@media (max-width:320px){
  .n-index{padding:77px 20px 20px}
  .n-index__box{padding:30px 0 0}
  .n-item{margin-bottom:10px;padding-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .n-modal,.n-modal__box,.n-modal__close,.n-article__back a{transition:none}
}