/* ===========================================================
   news.css ─ /news 記事ページの共通CSS
   -----------------------------------------------------------
   2026-08-27 新設（伊藤様承認 案1「見た目を変えない安全版」）。
   237 本の記事HTMLに直書きされていた <style> のうち、
   次の3条件をすべて満たすルールだけを集約した＝**見た目は変わらない**。
     A 全ページで宣言が一致している（値が割れているものは各ページに残す）
     B そのルールを持たないページに、当たる要素が存在しない
     C 同じ要素・同じプロパティに当たるルールの前後関係が入れ替わらない

   🔴 ページ内の <style> はこのファイルより後に読まれる＝後勝ちする。
      ここを直しても、そのページが同じルールを残していれば効かない。
      各ページに残っているのは1本あたり平均19ルール（タイトル下の余白・
      ホバー色など、ページによって値が違うもの）。
   =========================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: var(--text); background: var(--bg-soft); line-height: 1.8; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; }
.site-logo { font-size: 16px; font-weight: 900; color: var(--navy); }
.site-logo span { color: var(--accent); }
.site-header nav a.active { color: var(--navy); font-weight: 700; }
.breadcrumb { max-width: 920px; margin: 0 auto; padding: 22px 24px 0; font-size: 13px; color: var(--text-soft); }
.breadcrumb .sep { margin: 0 10px; color: var(--navy-line); }
main.article { max-width: 920px; margin: 0 auto; padding: 24px 24px 60px; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-meta { font-size: 16px; font-weight: 700; color: var(--accent); letter-spacing: 0.02em; margin-bottom: 14px; }
.article-meta .sep { margin: 0 12px; color: var(--navy-line); font-weight: 400; }
.article-meta .company { color: var(--navy); }
.section { background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(11, 26, 51, 0.1); padding: 36px 40px; margin-bottom: 36px; }
.points-list { list-style: none; }
.points-list .point { padding: 22px 0; border-bottom: 1px solid var(--navy-line); }
.points-list .point:first-child { padding-top: 4px; }
.points-list .point:last-child { border-bottom: none; padding-bottom: 0; }
.point-num { display: none; }
.point-body { min-width: 0; }
.point-title { font-size: 20px; font-weight: 900; color: var(--accent); margin-bottom: 10px; line-height: 1.55; }
.point-text { font-size: 16px; color: var(--text); line-height: 1.8; }
.summary-text { font-size: 16px; color: var(--text); line-height: 1.8; }
.company-overview { font-size: 16px; color: var(--text); line-height: 1.8; padding: 6px 0 0; }
.editor-voice { font-size: 16px; color: var(--text); line-height: 1.8; padding: 6px 0 0; }
.cta-wrap { text-align: center; padding-top: 8px; }
.source-link { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; background: var(--accent); color: #fff; border-radius: 999px; font-size: 16px; font-weight: 700; transition: background .2s var(--ease); }
.related { max-width: 920px; margin: 40px auto 0; padding: 0 24px 60px; }
.related-title { font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 18px; letter-spacing: 0.02em; }
.related-item { background: #fff; border-radius: 8px; padding: 22px 28px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.related-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-item .meta { font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 6px; letter-spacing: 0.02em; }
.related-item .title { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.6; }
.related-thumb { width: 80px; height: 60px; border-radius: 6px; overflow: hidden; background: var(--bg-blue); display: flex; align-items: center; justify-content: center; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-thumb .ph { display: none; }
.related-item:has(.related-thumb .ph) { grid-template-columns: 1fr; }
.related-item:has(.related-thumb .ph) .related-thumb { display: none; }
.thumb-bio { background: #e0f2fe; }
.thumb-material { background: #fef3c7; }
.thumb-energy { background: #fed7aa; }
.thumb-robotics { background: #ddd6fe; }
.thumb-digital { background: #fce7f3; }
.thumb-telecom { background: #cffafe; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; color: var(--text-soft); font-size: 16px; font-weight: 700; }
@media (max-width: 768px) { .header-inner { padding: 14px 18px; } }
/* .section のスマホ余白は、下の「本文を広く使う」ブロックで 16px に統一した
   （ここに 20px を残すと、どちらが正か分からなくなるため削除・2026-08-27） */
@media (max-width: 768px) { .point-title { font-size: 16px; } }
@media (max-width: 768px) { .related { padding: 0 18px 40px; } }
@media (max-width: 768px) { .related-thumb { width: 64px; height: 48px; } }
@media (max-width: 768px) { .related-item .title { font-size: 16px; } }
.article-meta .src { color: var(--text-soft); font-weight: 400; }
.card-wrap { background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(11, 26, 51, 0.1); padding: 36px 40px; margin: 24px auto; max-width: 920px; }
.card-wrap > article { background: transparent; box-shadow: none; padding: 0; margin: 0 auto; max-width: none; }
.card-wrap > article > h2.chapter:first-child { margin: -36px -40px 16px; border-radius: 4px 4px 0 0; padding: 18px 40px; }
h2.chapter { padding: 14px 22px; background: var(--navy); color: #fff; font-size: 26px; line-height: 1.4; font-weight: 900; letter-spacing: 0.04em; border-radius: 4px; }
h3.sub { font-size: 24px; color: var(--accent); margin: 32px 0 14px; font-weight: 700; letter-spacing: 0.04em; }
.mk { background: linear-gradient(transparent 60%, #e8f5fc 60%); padding: 0 2px; }
.quote-title { font-size: 19px; font-weight: 900; color: var(--navy); line-height: 1.7; margin: 0 0 16px; }
.quote-source { font-size: 16px; color: var(--text-soft); line-height: 1.8; margin: 0; }
.quote-source a { color: var(--accent); text-decoration: underline; word-break: break-all; }
@media (max-width: 768px) { .related-item .meta { font-size: 16px; } }
@media (max-width:768px) { .related { padding: 0 18px 40px; } }
@media (max-width:768px) { .related-item { padding: 16px 18px; } }
@media (max-width:768px) { .related-item .meta { font-size: 16px; } }
@media (max-width:768px) { .related-item .title { font-size: 16px; } }

/* --- スマホ：本文を広く使う（2026-08-27 伊藤様承認・企業ページ/コラムと同値） ---
   左右の余白を合計 34px→16px にし、本文を画面の91%まで広げる。

   🔴 /news には器（本文を入れる箱）が2種類ある
      ① main.article > .card-wrap（206本）
      ② main.article > .section  （31本）
      どちらも「main.article が余白を持ち、器は負のマージンで端まで広がる」で揃える。
      ⚠️ 逆（main.article を0にして器だけ余白を持つ）にすると、
         器の外にいる h1・記事メタ・CTA が余白を失って画面の端に貼り付く。
   ⚠️ 本数は変わるので直書きした値を信用しない＝
      `grep -l 'class="card-wrap"' news/*.html | wc -l` で数え直すこと。 */
@media (max-width: 768px) {
  /* 余白は main.article が1か所で持つ。
     🔴 ここを 0 にして器（カード）だけに余白を持たせてはいけない。
        h1・記事メタ・CTA は**器の外**にいるので、一緒に余白を失って
        画面の端へ貼り付く（2026-08-27 に実際にそうなった＝237本で h1 が x=0）。 */
  main.article { padding: 18px 16px 40px; }

  /* 器は画面の端まで広げたいので、親の余白ぶんだけ外へ出す。
     🔴 食い込み量は必ず main.article の padding と同じ 16px にすること。
        器の中の余白（16px）はそのまま残るので、本文は 343px になる。 */
  .card-wrap, .section {
    margin-left: -16px;
    margin-right: -16px;
    padding: 24px 16px;
  }
  .card-wrap > article > h2.chapter:first-child { margin: -24px -16px 12px; padding: 14px 16px; }

  /* パンくずも本文と同じ左端に揃える（旧24px＝本文と8pxずれていた） */
  .breadcrumb { padding-left: 16px; padding-right: 16px; }
}