/* news.css — DESIGN.md トークン準拠
   生成: tools/build-news-css.py
   記事12本のインライン <style> から本文ルールだけを抜き出して束ね、値をトークンへ写像した。
   旧ヘッダー/フッターとリセットは新シェル（style.css）が担うので取り込まない。 */

.breadcrumb-wrap{margin-top:64px;padding:18px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.breadcrumb{display:flex;gap:10px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-sub)}
.breadcrumb li:not(:last-child)::after{content:'›';margin-left:10px}
.article-header{padding:56px 0 44px;background:var(--paper);border-bottom:1px solid var(--line)}
.article-meta{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.article-category{padding:4px 12px;border-radius:var(--radius-xs);background:var(--blue-700);color:#fff;font-size:12px;font-weight:700}
.article-date{font-size:13px;color:var(--ink-sub)}
.article-title{margin:0 0 22px;font-size:clamp(28px,4vw,40px);line-height:1.45;color:var(--navy-950)}
.article-lead{margin:0;font-size:17px;line-height:2}
.article-company{margin:22px 0 0;text-align:right;font-weight:700}
.article-body{padding:48px 0 28px}
.article-body h2{margin:48px 0 18px;padding-bottom:10px;border-bottom:2px solid var(--blue-700);font-size:22px;color:var(--navy-950)}
.article-body h2:first-child{margin-top:0}
.article-body h3{margin:28px 0 12px;font-size:18px}
.article-body p{margin:0 0 18px}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0}
.feature-card{padding:22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper)}
.feature-card h3{margin:0 0 8px;font-size:17px;color:var(--blue-700)}
.feature-card p{margin:0;font-size:14px}
.callout{margin:28px 0;padding:22px 24px;border-left:4px solid var(--blue-500);background:var(--blue-100)}
.callout strong{display:block;margin-bottom:6px;color:var(--navy-950)}
.info-table{width:100%;margin:24px 0;border-collapse:collapse}
.info-table th,.info-table td{padding:14px;border:1px solid var(--line);text-align:left;vertical-align:top;font-size:14px}
.info-table th{width:25%;background:var(--paper);color:var(--navy-950)}
.related-links{margin:38px 0;padding:24px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.related-links h3{margin:0 0 12px}
.related-links ul{margin:0;padding-left:1.4em}
.contact-block{margin:44px 0;padding:34px;border-radius:var(--radius-sm);background:var(--navy-950);color:#fff;text-align:center}
.contact-block h3{margin:0 0 10px}
.contact-block p{margin:0 0 18px}
.contact-block a{color:#fff}
.contact-cta{display:inline-block;padding:11px 24px;border:1px solid #fff;border-radius:var(--radius-sm);font-weight:700}
.article-footer{padding:24px 0 72px;border-top:1px solid var(--line);text-align:center}
.back-link{display:inline-block;padding:10px 24px;border:1px solid var(--blue-700);border-radius:var(--radius-sm);font-weight:600}
@media(max-width:768px){
  .article-header{padding:38px 0 32px}
  .article-title{font-size:24px}
  .article-lead{font-size:15px}
  .feature-grid{grid-template-columns:1fr}
  .info-table th,.info-table td{padding:11px;font-size:13px}
  .info-table th{width:34%}
}
/* ===== Breadcrumb ===== */
    .breadcrumb-wrap {
      margin-top: 64px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      padding: 14px 0;
    }
.breadcrumb {
      font-size: 12px;
      color: var(--ink-sub);
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
.breadcrumb li::after {
      content: '›';
      margin-left: 8px;
      color: var(--device-edge);
    }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb li:last-child { color: var(--ink); }
.breadcrumb a { color: var(--ink-sub); }
.breadcrumb a:hover { color: var(--blue-700); }
/* ===== Article Header ===== */
    .article-header {
      padding: 64px 0 40px;
      border-bottom: 1px solid var(--line);
    }
.article-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }
.article-category {
      display: inline-block;
      background: #dcfce7;
      color: #15803d;
      padding: 4px 14px;
      border-radius:var(--radius-xs);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
.article-date {
      font-size: 13px;
      color: var(--ink-sub);
      font-weight: 500;
    }
.article-title {
      font-size: 30px;
      font-weight: 700;
      line-height: 1.45;
      color: #0f172a;
      margin-bottom: 20px;
    }
.article-lead {
      font-size: 16px;
      color: #475569;
      line-height: 1.85;
    }
.article-company {
      font-size: 13px;
      color: var(--ink-sub);
      margin-top: 20px;
    }
/* ===== Article Body ===== */
    .article-body {
      padding: 56px 0 40px;
    }
.article-body h2 {
      font-size: 22px;
      font-weight: 700;
      color: #0f172a;
      margin: 48px 0 20px;
      padding-left: 14px;
      border-left: 4px solid var(--blue-700);
      line-height: 1.5;
    }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
      font-size: 17px;
      font-weight: 700;
      color: var(--blue-700);
      margin: 32px 0 12px;
    }
.article-body p {
      font-size: 15px;
      color: #334155;
      line-height: 1.95;
      margin-bottom: 18px;
    }
.article-body ul {
      margin: 0 0 20px 0;
      padding-left: 0;
      list-style: none;
    }
.article-body ul li {
      position: relative;
      padding-left: 24px;
      font-size: 15px;
      color: #334155;
      line-height: 1.9;
      margin-bottom: 8px;
    }
.article-body ul li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 12px;
      width: 6px;
      height: 6px;
      border-radius:50%;
      background: var(--blue-700);
    }
/* ===== Callout Box ===== */
    .callout {
      background: #f8fafc;
      border: 1px solid var(--line);
      border-left: 4px solid var(--blue-700);
      border-radius:var(--radius-sm);
      padding: 24px 28px;
      margin: 32px 0;
    }
.callout-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--blue-700);
      margin-bottom: 10px;
      letter-spacing: 0.02em;
    }
.callout p {
      font-size: 14px;
      color: #475569;
      margin-bottom: 0;
    }
/* ===== Feature Cards ===== */
    .feature-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 24px 0 32px;
    }
.feature-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius:var(--radius-sm);
      padding: 24px;
    }
.feature-card h4 {
      font-size: 15px;
      font-weight: 700;
      color: var(--blue-700);
      margin-bottom: 8px;
    }
.feature-card p {
      font-size: 13px;
      color: var(--ink-sub);
      line-height: 1.75;
      margin-bottom: 0;
    }
/* ===== Step List ===== */
    .step-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin: 24px 0 32px;
    }
.step-card {
      background: #f8fafc;
      border: 1px solid var(--line);
      border-radius:var(--radius-sm);
      padding: 24px 20px;
    }
.step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius:50%;
      background: var(--blue-700);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 12px;
    }
.step-card h4 {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }
.step-card p {
      font-size: 13px;
      color: var(--ink-sub);
      line-height: 1.75;
      margin-bottom: 0;
    }
/* ===== Info Table ===== */
    .info-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0 32px;
      font-size: 14px;
    }
.info-table th,
    .info-table td {
      padding: 14px 18px;
      text-align: left;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
    }
.info-table th {
      width: 30%;
      background: #f8fafc;
      color: #475569;
      font-weight: 700;
    }
.info-table td {
      color: #334155;
    }
/* ===== Related Links ===== */
    .related-links {
      background: #f8fafc;
      border-radius:var(--radius-sm);
      padding: 28px 32px;
      margin: 32px 0;
    }
.related-links h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--ink);
      margin: 0 0 14px;
    }
.related-links ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
.related-links li {
      padding: 6px 0 6px 0;
      font-size: 14px;
      padding-left: 0;
    }
.related-links li::before { display: none; }
.related-links a::before {
      content: '→';
      margin-right: 8px;
      color: var(--blue-700);
    }
/* ===== Contact Block ===== */
    .contact-block {
      background: var(--navy-950);
      color: #fff;
      border-radius:var(--radius-sm);
      padding: 40px 40px;
      margin: 48px 0 24px;
    }
.contact-block h3 {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      margin: 0 0 8px;
    }
.contact-block p {
      font-size: 14px;
      color: rgba(255,255,255,0.75);
      margin-bottom: 20px;
      line-height: 1.8;
    }
.contact-block .contact-info {
      font-size: 14px;
      color: rgba(255,255,255,0.9);
      margin-bottom: 6px;
    }
.contact-block a.contact-cta {
      display: inline-block;
      background: #fff;
      color: var(--blue-700);
      padding: 12px 28px;
      border-radius:var(--radius-sm);
      font-weight: 700;
      font-size: 14px;
      margin-top: 16px;
    }
.contact-block a.contact-cta:hover {
      background: rgba(255,255,255,0.9);
      text-decoration: none;
    }
/* ===== Article Footer ===== */
    .article-footer {
      padding: 24px 0 80px;
      border-top: 1px solid var(--line);
      text-align: center;
    }
.back-link {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: var(--blue-700);
      padding: 12px 28px;
      border: 1px solid var(--blue-700);
      border-radius:var(--radius-sm);
    }
.back-link:hover {
      background: var(--blue-700);
      color: #fff;
      text-decoration: none;
    }
.article-title { font-size: 24px; }
.article-lead { font-size: 15px; }
.article-body { padding: 40px 0 24px; }
.article-body h2 { font-size: 19px; margin-top: 36px; }
.article-body h3 { font-size: 16px; }
.feature-cards { grid-template-columns: 1fr; }
.step-list { grid-template-columns: 1fr; }
.info-table th, .info-table td { padding: 12px; font-size: 13px; }
.info-table th { width: 35%; }
.contact-block { padding: 32px 24px; }
/* 現況ノート（発表後の提供状態を伝える追記） */
    .callout.callout-update {
      border-left-color: var(--ink-sub);
      margin: 24px 0 28px;
    }
.callout.callout-update .callout-title {
      color: #475569;
      margin-bottom: 8px;
    }

/* 記事本文の器。旧インラインCSSの .container（max-width:860px）を引き取る。
   style.css は .container を持たないので、記事の内側だけスコープして定義する */
.news-article .container { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ===== 旧Bootstrapページの互換レイヤ（index-kakaku2.html） =====
   本文を書き換えずに載せ替えるため、この1ページが使う旧クラスだけをスコープして受ける。
   glyphicon はアイコンフォント（DESIGN.mdの汎用アイコン禁止）なので描画しない */
.news-legacy .container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.news-legacy .glyphicon { display: none; }
.news-legacy .fn-catchcopy-area,
.news-legacy .panel {
  margin: 0 0 var(--sp-4);
  padding: 22px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.news-legacy .panel h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.news-legacy .demo-titleType1 {
  margin: 0 0 var(--sp-3);
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blue-700);
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  font-feature-settings: "palt";
}
.news-legacy .fn_heading {
  margin: 0 0 var(--sp-2);
  font-size: 19px;
  font-weight: 900;
  color: var(--blue-700);
}
.news-legacy .img_title_left {
  margin: 0 0 var(--sp-3);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-sub);
}
.news-legacy p { margin: 0 0 16px; font-size: 15px; line-height: 1.95; color: var(--ink); }
.news-legacy .text-left { text-align: left; }
.news-legacy .text-center { text-align: center; }
.news-legacy .demo-btnPagetop { margin-top: var(--sp-4); text-align: center; }
.news-legacy .demo-btnPagetop a {
  display: inline-block;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color .18s ease-out, border-color .18s ease-out;
}
.news-legacy .demo-btnPagetop a:hover { background: var(--blue-100); border-color: var(--blue-500); }
.news-legacy .margin-bottom-md { margin-bottom: 24px; }
.news-legacy .margin-bottom-lg,
.news-legacy .margin-bottom-llg { margin-bottom: 32px; }
.news-legacy .margin-bottom-sm, .news-legacy .margin-top-sm { margin-bottom: 12px; }
.news-legacy .margin-top-md { margin-top: 24px; }
.news-article { padding-bottom: 8px; }

/* ===== 一覧ページ =====
   現行の一覧は Bootstrap のグリッド（row / col-*）で日付・カテゴリ・見出しを並べていた。
   フレームワークを外すので、変換側で組み直したマークアップをここで受ける */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.news-item {
  display: grid;
  grid-template-columns: 92px 108px minmax(0, 1fr);
  align-items: start;
  gap: 6px 20px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.news-item:hover,
.news-item:focus-visible {
  border-color: var(--blue-500);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
/* 日付は英数字なので刻印にできる */
.news-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--blue-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-cat {
  justify-self: start;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--blue-700);
  background: var(--blue-100);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.news-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--ink);
  word-break: auto-phrase;
}
.news-item:hover .news-title { color: var(--blue-700); }
/* 行き先を持たない告知行。カードの体裁は保つがホバーは出さない */
.news-item--static { box-shadow: none; transform: none; cursor: default; }
.news-item--static:hover { border-color: var(--line); box-shadow: none; transform: none; }
.news-icon { grid-row: span 2; width: 100%; height: auto; align-self: center; }
.news-desc {
  grid-column: 3;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ink-sub);
  word-break: auto-phrase;
}

@media (max-width: 700px) {
  .news-item { grid-template-columns: 64px minmax(0, 1fr); padding: 16px 18px; }
  .news-date { grid-column: 2; }
  .news-cat { grid-column: 2; }
  .news-title, .news-desc { grid-column: 1 / -1; }
  .news-icon { grid-row: span 2; }
}