/* insights.css — DESIGN.md トークン準拠リスキン版
   生成: tools/reskin-insights-css.py（現行 css/insights.css を入力）。
   セレクタ・レイアウトは現行のまま。色・影・角丸・スクロール余白のみ差し替える。 */

/* ===== 旧テンプレート変数の写像 =====
   現行 insights.css は配色をこの16変数から引いている。値だけをトークンへ差し替えることで、
   セレクタとレイアウトを一切触らずに配色・影・角丸をDESIGN.md準拠にできる。 */
.insights-index-page,
.insight-article-page,
.article-section,
.insight-sidebar,
:root {
  --primary: var(--blue-700);          /* #1A2888。現行と同値のブランド主色 */
  --primary-hover: var(--blue-500);    /* 現行は暗く沈めていたが、本サイトの規約は明るく変化させる */
  --primary-dark: var(--navy-950);     /* 濃地カード（contact-block）の地 */
  --surface: #fff;
  --surface-muted: var(--paper);       /* 無彩色 #f8f9fa → 青み白 */
  --border: var(--line);               /* #e2e8f0 → 紺系の罫 */
  --border-strong: var(--device-edge); /* #cbd5e1 → 筐体の稜線 */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-sub);
  --text-muted: var(--ink-sub);        /* 現行 #94a3b8 は白地で2.58:1しか出ずAA不適合だった */
  --insight-canvas: var(--paper);
  --insight-lead-bg: var(--paper);
  --insight-accent: var(--amber);      /* 面・下線・ドット等の差し色 */
  --insight-accent-strong: var(--blue-700); /* ライト地の文字色。アンバーは白地2.06:1で使えない */
  --shadow-cta: var(--shadow-hover);   /* 黒影 rgba(0,0,0,.2) を紺影へ */
  --header-h: 117px;                   /* 新ヘッダー実測値（utility 40 + main 76 + border 1） */
}

/* Corporate insight landing and article styles. */


.hero-eyebrow {
  color: var(--insight-accent);
}

.hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 18px;
  border-radius: var(--radius-xs);
  background: var(--insight-accent);
}

.hero-tagline {
  color: rgba(255,255,255,0.72);
  letter-spacing: 0;
}

.hero-text {
  max-width: 760px;
}

.insight-theme-grid {
  margin-top: 32px;
}

.insight-card-label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

#recommended .section-lead,
#themes .section-lead,
#articles .section-lead {
  max-width: 100%;
  margin-bottom: 24px;
}

.insights-index-page .section-eyebrow {
  color: var(--insight-accent-strong);
}

.insights-index-page .section-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: var(--radius-xs);
  background: var(--insight-accent);
}

.insight-index-section {
  padding: 56px 0 68px;
}

.insight-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.insights-index-page .insight-index-section {
  background: var(--insight-canvas);
}

.insight-index-main,
.article-main {
  min-width: 0;
}

.insight-index-block + .insight-index-block {
  margin-top: 44px;
  padding-top: 44px;
  border-top: 1px solid var(--border);
}

.recommended-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  max-width: 100%;
  margin-top: 20px;
}

.recommended-card,
.insight-article-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.recommended-card {
  align-content: start;
  min-height: 178px;
  padding: 18px 24px;
}

.recommended-card--lead {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.recommended-card-body,
.insight-article-content {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.recommended-card-body {
  padding: 0;
}

.article-thumb {
  display: block;
  overflow: hidden;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.article-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.recommended-card .article-thumb {
  aspect-ratio: 16 / 9;
}

.recommended-card--lead h3 {
  font-size: 18px;
}

.theme-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 100%;
  margin-top: 20px;
}

.theme-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.theme-card-body {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 20px 22px;
}

.theme-card h3 {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0;
}

.theme-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.theme-link-list {
  display: grid;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.theme-link-list li {
  position: relative;
  min-width: 0;
  padding-left: 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.theme-link-list li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--insight-accent);
}

.theme-link-list a {
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: break-word;
}

.theme-link-list a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--insight-accent);
  text-underline-offset: 4px;
}

.insight-article-list {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.insight-article-card {
  padding: 18px 24px;
}

.insight-article-card .article-thumb {
  height: 100%;
  min-height: 176px;
  border-right: 1px solid var(--border);
  border-bottom: 0;
}

.insight-article-content {
  padding: 0;
}

.insight-article-meta,
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.article-meta {
  margin-top: 24px;
  color: rgba(255,255,255,0.72);
  font-size: 14px;
}

.recommended-card h3,
.insight-article-card h3 {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: 0;
  line-break: strict;
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: normal;
}

.recommended-card h3 a,
.insight-article-card h3 a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: normal;
}

.recommended-card h3 a:hover,
.insight-article-card h3 a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--insight-accent);
  text-underline-offset: 4px;
}

.recommended-card p,
.insight-article-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.72;
}

.insight-article-link {
  align-self: end;
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.insight-article-link:hover {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--insight-accent);
  text-underline-offset: 4px;
}

.article-section {
  padding: 56px 0 72px;
}

.article-shell {
  max-width: 100%;
  margin: 0 auto;
}

.article-body {
  display: grid;
  gap: 28px;
}

/* grid item の既定は min-width:auto（min-content 以上）なので、内側に padding を持つ
   .article-lead / .key-points が親より広がり、狭幅でページごと横スクロールしていた
   （390pxで2px。ゼータ検収 2026-08-04）。列幅に収まるよう最小幅の制約を切る */
.article-body > * { min-width: 0; }

.article-body h2 {
  color: var(--primary);
  font-size: 24px;
  line-height: 1.45;
}

.article-body h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 10px;
  border-radius: var(--radius-xs);
  background: var(--insight-accent);
}

.article-body p {
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.95;
}

.article-body ul {
  display: grid;
  gap: 12px;
  padding-left: 1.4em;
  color: var(--text-primary);
  line-height: 1.9;
}

.article-body li::marker {
  color: var(--insight-accent-strong);
}

.article-lead {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--insight-lead-bg);
}

.article-lead p {
  color: var(--text-primary);
  font-size: 17px;
  line-height: 1.9;
}

.key-points,
.comparison-card,
.article-cta {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.key-points {
  padding: 26px;
}

.key-points h2 {
  margin-bottom: 14px;
  font-size: 20px;
}

.structure-figure {
  display: grid;
  gap: 12px;
  margin: 0;
  max-width: 100%;
}

.structure-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.structure-figure figcaption {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.article-figure {
  display: grid;
  gap: 12px;
  margin: 0;
  max-width: 100%;
}

.article-figure svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.article-figure figcaption {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.comparison-card {
  padding: 24px;
}

.comparison-card h3 {
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 18px;
  line-height: 1.5;
}

.comparison-card p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.8;
}

.related-articles {
  display: grid;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.related-articles h2 {
  margin-bottom: 0;
  font-size: 20px;
}

.related-article-list {
  display: grid;
  gap: 12px;
}

.related-article-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.related-article-card h3 {
  color: var(--primary);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
}

.related-article-card h3 a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
}

.related-article-card h3 a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--insight-accent);
  text-underline-offset: 4px;
}

.related-article-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.data-box {
  display: grid;
  gap: 10px;
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.9;
}

.data-box strong {
  color: var(--text-primary);
}

.data-box .source {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}

.contact-block {
  display: grid;
  gap: 12px;
  padding: 32px;
  border-radius: var(--radius-sm);
  background: var(--primary-dark);
  color: var(--surface);
}

.contact-block h3 {
  color: var(--surface);
  font-size: 18px;
  line-height: 1.5;
}

.contact-block p {
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.8;
}

.contact-block .contact-cta {
  justify-self: start;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.contact-block .contact-cta:hover {
  background: rgba(255,255,255,0.92);
  color: var(--primary-hover);
}

.related-links,
.post-references {
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.related-links h3,
.post-references h3 {
  color: var(--primary);
  font-size: 18px;
  line-height: 1.5;
}

.related-links ul,
.post-references ul {
  gap: 8px;
  padding-left: 1.2em;
}

.related-links li,
.post-references li {
  font-size: 14px;
  line-height: 1.8;
}

.post-references a {
  overflow-wrap: anywhere;
}

.article-cta {
  padding: 32px;
  border-color: var(--border-strong);
}

.article-cta h2 {
  margin-bottom: 12px;
}

.article-cta p {
  margin-bottom: 20px;
}

.article-cta .hero-cta {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--surface);
}

.article-cta .hero-cta:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  box-shadow: var(--shadow-cta);
}

.insight-cta-copy {
  display: grid;
  gap: 10px;
}

.breadcrumb-link {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--surface);
}

.insight-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 22px;
  min-width: 0;
  color: var(--text-secondary);
}

.sidebar-panel {
  display: grid;
  gap: 12px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.sidebar-panel h2 {
  color: var(--primary);
  font-size: 16px;
  line-height: 1.5;
}

.sidebar-panel h2::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 8px;
  border-radius: var(--radius-xs);
  background: var(--insight-accent);
}

.sidebar-panel p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.75;
}

.sidebar-link-list {
  display: grid;
  gap: 10px;
  padding-left: 0;
  list-style: none;
}

.sidebar-link-list a {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
  text-decoration: none;
  overflow-wrap: break-word;
}

.sidebar-link-list a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-decoration-color: var(--insight-accent);
  text-underline-offset: 4px;
}

.sidebar-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
}

.sidebar-topic-list li {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.sidebar-cta {
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.sidebar-cta a {
  justify-self: start;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-cta a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.insight-sidebar--index {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.insight-sidebar--index .sidebar-panel {
  padding-bottom: 0;
  border-bottom: 0;
}

.insight-sidebar--index .sidebar-panel + .sidebar-panel {
  margin-top: 10px;
}

.insight-sidebar--index .sidebar-topic-list li {
  padding: 7px 12px;
  border-color: var(--border);
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.insight-sidebar--index .sidebar-cta {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 900px) {
  .recommended-grid,
  .theme-card-grid,
  .comparison-grid,
  .insight-index-layout,
  .article-layout {
    grid-template-columns: 1fr;
  }

  .insight-sidebar {
    position: static;
  }

  .recommended-card--lead {
    grid-row: auto;
    grid-column: auto;
  }

  .recommended-card--lead h3 {
    font-size: 19px;
  }
}

@media (max-width: 768px) {
  #recommended,
  #articles {
    padding: 0;
  }

  .insight-index-section {
    padding: 42px 0 54px;
  }

  .insight-index-block + .insight-index-block {
    margin-top: 34px;
    padding-top: 34px;
  }

  .article-section {
    padding: 42px 0 58px;
  }

  .recommended-card-body,
  .insight-article-content {
    padding: 0;
  }

  .theme-card-body {
    padding: 18px 16px;
  }

  .insight-article-card {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .insight-article-card .article-thumb {
    min-height: auto;
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .recommended-card h3,
  .insight-article-card h3 {
    font-size: 18px;
    line-height: 1.55;
  }

  .article-body h2 {
    font-size: 21px;
  }

  .article-lead,
  .key-points,
  .related-articles,
  .article-cta {
    padding: 22px;
  }

  .related-article-card {
    padding: 16px;
  }
}


/* ===== template.css から引き取るレイアウト =====
   記事本文は .container / .section / .hero-content を使う。template.css は読み込まないので
   ここで定義する。値は現行と同じで、スクロール余白だけ新ヘッダー高に合わせる */
.article-section .container,
.insight-index-section .container,
.section--dark > .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-section.section,
.insight-index-section.section { padding: 80px 0; scroll-margin-top: calc(var(--header-h) + 24px); }
.hero-content { display: flex; align-items: center; gap: 60px; position: relative; z-index: 1; }

/* どのCSSにも定義が無く素のまま表示されていたブロック。記事本文の一部なので器を与える */
.faq-section {
  margin-top: 32px;
  padding: 28px 30px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.faq-section > h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--text-primary);
  font-feature-settings: "palt";
}
.faq-section h3 {
  margin: 20px 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--primary);
}
.faq-section h3:first-of-type { margin-top: 0; }
.faq-section p { margin: 0; font-size: 15px; line-height: 1.9; color: var(--text-secondary); }

/* ===== 旧 template.css が持っていたボックス定義の引き取り =====
   template.css を読み込まなくなったことで、下の6クラスは「色だけ上書きされ、
   箱（display/padding/角丸/字送り）が無い」状態になっていた。
   変換後の <main> で使われるクラス集合と、新CSS側の定義済み性質を突き合わせて洗い出した分。 */

/* 記事末尾と一覧のCTAボタン。DESIGN.md の正準CTA意匠（アンバー面＋--ink 文字）で組み直す。
   旧定義は白面＋青文字＋transition:all だった */
.hero-cta,
.article-cta .hero-cta,
.contact-block .contact-cta {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .01em;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: background-color .18s ease-out, box-shadow .18s ease-out, transform .18s ease-out;
}
.hero-cta:hover,
.article-cta .hero-cta:hover,
.contact-block .contact-cta:hover {
  background: var(--amber-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-1px);
  color: var(--ink);
}
.hero-cta:focus-visible,
.article-cta .hero-cta:focus-visible,
.contact-block .contact-cta:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; }

.hero-cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* 一覧末尾の「濃地セクション」。DESIGN.md は本文で紺を全面背景にすることを禁じているので、
   帯ではなく「ライト地に置かれた紺の箱」として組む */
.section--dark { background: transparent; color: inherit; }
.section--dark > .container {
  padding: 44px 40px;   /* 上の共通 .container の 0 24px を上書きする */
  background: var(--navy-950);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  color: #fff;
}
.section--dark .section-title { color: #fff; }
.section--dark .section-eyebrow { color: var(--blue-300); }
.section--dark .section-lead,
.section--dark .section-lead p { color: #C7D3F5; }
.section--dark :focus-visible { outline-color: var(--amber); }

.section-eyebrow {
  margin-bottom: var(--sp-1);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);
}
.section-title {
  margin-bottom: 16px;
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--text-primary);
  font-feature-settings: "palt";
}
.section-lead {
  max-width: 640px;
  margin-bottom: 40px;
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .article-section.section,
  .insight-index-section.section { padding: 56px 0; }
  .hero-content { flex-direction: column; gap: 32px; }
}

/* 記事ヒーローのメタ行。先頭の日付だけ刻印にして、後続のタグと役割を分ける */
.subhero .article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: var(--sp-3) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #C7D3F5;
}
.subhero .article-meta .meta-date {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--blue-300);
}
.subhero .article-meta span:not(.meta-date) {
  padding: 2px 10px;
  border-radius: var(--radius-xs);
  background: rgba(143, 165, 236, .14);
  box-shadow: inset 0 0 0 1px rgba(143, 165, 236, .32);
}

@media (prefers-reduced-motion: reduce) {
  .insight-article-link,
  .related-article-card,
  .article-cta .hero-cta,
  .contact-block .contact-cta { transition: none; }
}