/* ══════════════════════════════════════════════════════════════════════════
   ニュース記事詳細（/news/{slug}.html）の版面
   正 = _design/ULSTA_News_Article.dc.html
   ─────────────────────────────────────────────────────────────────────────
   ・本文幅は **820px**（コラム記事と統一）。<article> に max-width:820px。
   ・ヒーロー画像・本文 h2/リスト/引用・タグ/共有・前後記事・関連・一覧CTA。
   ・**この1枚を記事ページと news/_template.html が共有する**（版面の二重管理を避ける）。
     新しい記事を書くときは news/_template.html をコピーして中身を差し替えるだけでよい。
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
body{margin:0;padding:0;background:#f3efe6;color:#262420;font-family:'Zen Kaku Gothic New',sans-serif}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid #10b981;outline-offset:2px;border-radius:4px}
a{color:#0d9668;text-decoration:none}
a:hover{color:#0b7d57}

.na-root{max-width:1440px;width:100%;margin:0 auto;background:#f3efe6;overflow-x:hidden}

/* ── nav（news/index.html と同一） ─────────────────────────────────────── */
.na-nav{display:flex;align-items:center;justify-content:space-between;padding:26px 60px;border-bottom:1px solid #e6ddcb}
.na-nav a{color:inherit}
.na-logo{display:flex;align-items:center;gap:11px}
.na-logo-mark{width:34px;height:34px;border-radius:10px;background:#10b981;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:#fff}
.na-logo-text{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:19px;color:#262420}
.na-navlinks{display:flex;gap:28px;font-size:15px;color:#5c564a}
.na-navlinks .cur{color:#0d9668;font-weight:600}
.na-navcta{display:flex;gap:16px;align-items:center}
.na-navcta .login{font-size:15px;color:#262420}
.na-navcta .start{font-size:15px;font-weight:500;color:#fff;background:#10b981;padding:11px 22px;border-radius:10px}


/* ── パンくず ─────────────────────────────────────────────────────────── */
.na-crumb{padding:22px 60px 0;font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:#867e6f}
.na-crumb a{color:#867e6f}
.na-crumb .sep{color:#c8bfad}
.na-crumb .cur{color:#57513f}

/* ── 記事（本文幅 820px） ─────────────────────────────────────────────── */
.na-article{max-width:820px;margin:0 auto;padding:40px 40px 20px}
.na-meta{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.na-cat{font-size:12px;font-weight:600;color:#c15f3c;background:#f4e5dc;padding:5px 13px;border-radius:999px}
.na-date{font-family:'Space Grotesk',sans-serif;font-size:13px;color:#867e6f}
/* プレスリリース記事のヘッダ行（「PRESS RELEASE / 報道関係者各位」「発行日＋社名」）。
   見本にはこの2行が無いが、**本記事の本文を1文字も変えない**ため保持する。 */
.na-prhead{margin:0 0 14px}
.na-pr{display:block;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;color:#867e6f;margin-bottom:4px}
.na-issuer{font-size:13px;color:#867e6f}
.na-h1{font-family:'Shippori Mincho',serif;font-weight:800;font-size:38px;line-height:1.5;margin:0 0 20px;color:#211f1a}
.na-lead{font-size:17px;line-height:1.95;color:#57513f;margin:0 0 28px;border-bottom:1px solid #e6ddcb;padding-bottom:28px}
.na-lead strong{color:#211f1a;font-weight:700}
.na-hero{position:relative;width:100%;height:380px;border-radius:16px;overflow:hidden;margin-bottom:34px;box-shadow:0 24px 55px -34px rgba(60,48,36,.45);background:#efe9dc}
.na-hero img{width:100%;height:100%;object-fit:cover}

.na-body{font-size:16px;line-height:2.05;color:#3d382e}
.na-body p{margin:0 0 24px}
.na-body b,.na-body strong{color:#211f1a;font-weight:700}
.na-body h2{font-family:'Shippori Mincho',serif;font-weight:700;font-size:24px;line-height:1.6;margin:38px 0 16px;color:#211f1a}
.na-body ul{margin:0 0 24px;padding-left:1.3em;display:flex;flex-direction:column;gap:12px}
.na-body li{margin:0}
.na-body code{font-family:'Space Grotesk',ui-monospace,monospace;font-size:.92em;background:#efe9dc;padding:1px 6px;border-radius:5px;color:#3d382e}
.na-body blockquote{margin:32px 0;padding:24px 28px;background:#efe9dc;border-left:4px solid #10b981;border-radius:0 12px 12px 0}
.na-body blockquote p{font-family:'Shippori Mincho',serif;font-weight:700;font-size:19px;line-height:1.75;color:#211f1a;margin:0}
.na-body blockquote .who{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:400;font-size:13px;color:#867e6f;margin:12px 0 0}

/* 本文中の表（見本には無いが本記事にある。設計言語に合わせて定義） */
.na-body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14.5px;background:#fbfaf5;border:1px solid #eae2d2;border-radius:14px;overflow:hidden}
.na-body thead th{background:#f0e9dc;font-size:12.5px;font-weight:700;color:#8a8271;text-align:left;padding:13px 18px}
.na-body tbody th{background:#fbf6ea;font-weight:700;color:#3d382e;text-align:left;width:30%;white-space:nowrap;padding:14px 18px;border-top:1px solid #f0e9dc}
.na-body td{padding:14px 18px;border-top:1px solid #f0e9dc;color:#3d382e}
.na-body .new{color:#0d9668;font-weight:700}

/* 定義リスト（会社概要） */
.na-body .na-info{background:#fbfaf5;border:1px solid #eae2d2;border-radius:14px;padding:20px 22px;margin:0 0 24px}
.na-body .na-info dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0;font-size:14.5px}
.na-body .na-info dt{color:#8a8271;white-space:nowrap}
.na-body .na-info dd{margin:0;color:#3d382e}
.na-body .na-contact{background:#fbfaf5;border:1px solid #eae2d2;border-radius:14px;padding:20px 22px;margin:0 0 24px;font-size:14.5px;line-height:1.9}

/* ── タグ + 共有 ──────────────────────────────────────────────────────── */
.na-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:36px;padding-top:26px;border-top:1px solid #e6ddcb}
.na-tags{display:flex;gap:8px;flex-wrap:wrap}
.na-tag{font-size:12.5px;color:#57513f;background:#fbfaf5;border:1px solid #e0d7c5;padding:7px 14px;border-radius:999px}
.na-share{display:flex;align-items:center;gap:10px}
.na-share-l{font-size:12.5px;color:#867e6f}
.na-share-b{width:34px;height:34px;border-radius:50%;border:1px solid #d6cdb9;display:flex;align-items:center;justify-content:center;color:#57513f;background:transparent;cursor:pointer;padding:0}
.na-share-b:hover{background:#fbfaf5}

/* ── 前後記事 / 関連 / 一覧CTA ────────────────────────────────────────── */
.na-nextprev{max-width:820px;margin:0 auto;padding:14px 40px 8px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.na-np{display:block;background:#fbfaf5;border:1px solid #eae2d2;border-radius:14px;padding:18px 20px;color:inherit}
.na-np:hover{border-color:#d8cdb6}
.na-np .l{font-family:'Space Grotesk',sans-serif;font-size:11px;color:#867e6f;margin-bottom:8px}
.na-np .t{font-family:'Shippori Mincho',serif;font-weight:700;font-size:15px;color:#211f1a;line-height:1.5}
.na-np--next{text-align:right}

.na-rel{max-width:820px;margin:0 auto;padding:30px 40px 10px}
.na-rel-h2{font-family:'Shippori Mincho',serif;font-weight:700;font-size:22px;margin:0 0 18px;color:#211f1a}
.na-rel-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.na-rel-card{display:block;background:#fbfaf5;border:1px solid #eae2d2;border-radius:14px;overflow:hidden;color:inherit;box-shadow:0 14px 34px -30px rgba(60,48,36,.4)}
.na-rel-card:hover{border-color:#d8cdb6}
.na-rel-thumb{height:120px;background:#efe9dc;display:flex;align-items:center;justify-content:center}
.na-rel-thumb img{width:100%;height:100%;object-fit:cover}
.na-rel-body{padding:15px 16px}
.na-rel-meta{font-family:'Space Grotesk',sans-serif;font-size:10.5px;color:#c15f3c;font-weight:600;margin-bottom:8px}
.na-rel-t{font-family:'Shippori Mincho',serif;font-weight:700;font-size:15px;line-height:1.5;color:#211f1a}
.na-listcta{text-align:center;margin:34px 0 10px}
.na-listcta a{display:inline-block;font-size:15px;font-weight:500;color:#262420;border:1px solid #d6cdb9;padding:13px 34px;border-radius:11px}
.na-listcta a:hover{background:#fbfaf5}

/* ── footer（news/index.html と同一） ─────────────────────────────────── */
.na-footer{border-top:1px solid #e6ddcb;padding:44px 60px;margin-top:24px}
.na-footer a{color:inherit}
.na-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.na-foot-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.na-foot-brand .m{width:30px;height:30px;border-radius:8px;background:#10b981;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#fff}
.na-foot-brand .n{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:18px}
.na-foot-desc{font-size:13px;line-height:1.8;color:#8a8271;max-width:280px;margin:0}
.na-foot-h{font-size:12px;font-weight:600;color:#262420;margin-bottom:16px}
.na-foot-links{display:flex;flex-direction:column;gap:11px;font-size:13px;color:#6b6555}
.na-foot-copy{padding-top:22px;border-top:1px solid #efe7d8;font-size:12px;color:#867e6f}

/* ══ レスポンシブ ══ */
@media (max-width:1024px){
  .na-nav{padding:20px 32px}
  .na-navlinks{gap:20px;font-size:14px}
  .na-crumb{padding:18px 32px 0}
}
@media (max-width:768px){
  .na-nav{padding:16px 20px}
  .na-crumb{padding:16px 20px 0;font-size:12px}
  .na-article{padding:26px 20px 16px}
  .na-h1{font-size:28px;line-height:1.55}
  .na-lead{font-size:15px;line-height:1.9;padding-bottom:22px;margin-bottom:22px}
  .na-hero{height:200px;border-radius:14px;margin-bottom:26px;box-shadow:none}
  .na-body{font-size:15px;line-height:1.95}
  .na-body h2{font-size:20px;margin:30px 0 14px}
  .na-body blockquote{padding:18px 20px;margin:24px 0}
  .na-body blockquote p{font-size:16px}
  .na-body table{font-size:13px}
  .na-body thead th,.na-body tbody th,.na-body td{padding:11px 12px}
  .na-body .na-info dl{grid-template-columns:1fr;gap:2px 0}
  .na-body .na-info dt{margin-top:8px}
  .na-nextprev{grid-template-columns:1fr;padding:8px 20px}
  .na-np--next{text-align:left}
  .na-rel{padding:26px 20px 10px}
  .na-rel-grid{grid-template-columns:1fr}
  .na-footer{padding:32px 20px}
  .na-foot-grid{grid-template-columns:1fr 1fr;gap:28px 20px}
}

/* SPナビ（ハンバーガー＋ドロワー）は共通ドロップイン
   /assets/css/spnav.css + /assets/js/spnav.js が担当する。
   このファイルでは 768px 以下のナビリンク／CTAの非表示も **定義しない**
   （spnav.css が body.has-spnav の時だけ隠す＝JSが落ちてもナビが消えない）。 */