:root {
  --bg: #faf8f3;
  --bg-warm: #f4f0e8;
  --bg-card: #ffffff;
  --bg-card-hover: #fdfbf7;
  --ink: #1c1e26;
  --ink-sub: #565a6b;
  --ink-faint: #676b74;
  --navy: #2c3e63;
  --navy-soft: rgba(44, 62, 99, 0.08);
  --gold: #8a5f2a;
  --gold-soft: rgba(138, 95, 42, 0.10);
  --gold-text: #8a5f2a;
  --line: #ece6d8;
  --shadow: 0 20px 48px rgba(28, 30, 38, 0.10);
  --shadow-soft: 0 4px 16px rgba(28, 30, 38, 0.06);
  --radius: 8px;
}

/* ---- ダークモード(OSのprefers-color-schemeに追従、切替トグルなし) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c;
    --bg-warm: #1b1e26;
    --bg-card: #1e212b;
    --bg-card-hover: #262a35;
    --ink: #e8e6de;
    --ink-sub: #aeb2c0;
    --ink-faint: #888c99;
    --navy: #8fa5d6;
    --navy-soft: rgba(143, 165, 214, 0.14);
    --gold: #d9a35c;
    --gold-soft: rgba(217, 163, 92, 0.14);
    --gold-text: #d9a35c;
    --line: #33374a;
    --shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* 短い見出し・ラベル文言のみ、英数字混じりの不自然な折り返しを防ぐ(長文本文には適用しない) */
h1, h2, h3, .site-tagline, .promise-item p, .article-card h2, .stat-chip, .tag {
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, .heading-font {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) {
  .wrap.has-toc { max-width: 980px; }
}

/* ---- hero (LP風) ---- */
.hero {
  padding: 96px 0 64px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  background:
    url("images/hero-bg.svg") center / cover no-repeat,
    radial-gradient(640px 320px at 50% -60px, var(--gold-soft), transparent 70%);
}
.site-logo {
  margin: 0;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.site-logo .accent { color: var(--gold-text); }
.site-tagline {
  margin: 18px auto 0;
  max-width: 460px;
  color: var(--ink-sub);
  font-size: 1rem;
}

/* ---- about / trust section ---- */
.about-section {
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.about-section p {
  margin: 0 0 14px;
  color: var(--ink-sub);
  font-size: 0.94rem;
  max-width: 620px;
}
.about-section p:last-child { margin-bottom: 0; }
.about-section .disclaimer-note {
  font-size: 0.82rem;
  color: var(--ink-faint);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}
.about-section .author-note {
  font-size: 0.86rem;
  color: var(--ink-sub);
}
.about-section .author-note a { color: var(--navy); font-weight: 700; }

/* ---- promise block (プロダクト感を出すベタ塗りセクション) ---- */
.promise-block {
  background: var(--navy);
}
.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 40px 24px;
}
.promise-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.promise-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.promise-icon svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.promise-item p {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .promise-grid { grid-template-columns: 1fr; gap: 18px; padding: 32px 24px; }
}

/* ---- filter tabs ---- */
.section-label {
  margin: 64px 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.scene-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.scene-tab {
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-sub);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}
.scene-tab.active,
.scene-tab:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--navy-soft);
}
.sub-tabs {
  margin: -18px 0 28px;
  padding-left: 4px;
  align-items: center;
}
.sub-tabs[hidden] {
  display: none;
}
.sub-tabs .scene-tab {
  font-size: 0.8rem;
  padding: 6px 14px;
}
.industry-select {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-sub);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
}
.industry-select:hover,
.industry-select:focus {
  border-color: var(--navy);
  color: var(--navy);
}
.kigyou-company-search {
  min-width: 240px;
  outline: none;
}
.kigyou-company-search::placeholder { color: var(--ink-faint); }
.kigyou-no-results {
  padding: 14px 18px;
  margin: -8px 0 28px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-sub);
  font-size: 0.86rem;
}

.kigyou-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-warm);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  scroll-margin-top: 84px;
}
.kigyou-group-header:first-child { margin-top: 0; }
.kigyou-group-header:hover { border-color: var(--navy); }
.kigyou-group-header[hidden] { display: none; }
.kigyou-group-header .chevron-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}
.kigyou-group-header[aria-expanded="false"] .chevron-icon { transform: rotate(-90deg); }
.kigyou-group-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}
.kigyou-group-cards.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.kigyou-group-cards-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 700px) {
  .kigyou-group-cards-inner { grid-template-columns: 1fr; }
}

/* ---- article cards ---- */
.article-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0 0 64px;
  align-items: start;
}
@media (max-width: 700px) {
  .article-list { grid-template-columns: 1fr; }
}
.article-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.article-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  text-decoration: none;
}
.article-card-thumb { flex-shrink: 0; }
.article-card-thumb img {
  width: 112px;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.article-card-body {
  padding: 0;
  min-width: 0;
}
.article-card .tags {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.article-card .tag {
  font-size: 0.68rem;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
}
.article-card .tag.tag-diary {
  background: var(--gold-soft);
  color: var(--gold-text);
}
.article-card h2 {
  margin: 0 0 5px;
  font-size: 0.98rem;
  line-height: 1.45;
}
.article-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-sub);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kigyou-group-header { grid-column: 1 / -1; }
.kigyou-quicklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 20px;
}
.kigyou-quicklist a {
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
  font-weight: 500;
}
.kigyou-quicklist a:hover {
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}

/* ---- footer ---- */
.site-footer {
  padding: 32px 0 60px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
}
.site-footer a { color: var(--ink-faint); text-decoration: underline; }

/* ---- mini nav (article pages) ---- */
.mini-nav {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.mini-nav a {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.mini-nav a:hover { text-decoration: none; opacity: 0.75; }
.mini-nav .accent { color: var(--gold-text); }

/* ---- article page ---- */
/* ページ自体は比較表が全列表示できる幅を確保しつつ、本文・見出し・アイキャッチは
   読みやすい幅に個別に制限して中央寄せする(表だけが画面幅いっぱいに広がる)。
   margin:autoは既存の個別要素の margin shorthand(margin:0 0 24px等)に
   specificityで負けて無効化されるため、flexの中央寄せで確実に効かせる */
.article-page { max-width: 1440px; }
/* has-toc/no-toc はtoc.jsが見出し数に応じて実行時に付け替えるため、
   クラスの有無ではなく構造(article-grid/article-mainの有無)で判定する */
.article-page, .article-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article-page > *, .article-main > * {
  width: 100%;
  max-width: 900px;
}
.article-page > .article-body, .article-main > .article-body,
.article-page > .article-grid {
  max-width: none;
}
.article-body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article-body > * {
  width: 100%;
  max-width: 900px;
}
.article-body > .table-scroll { max-width: none; }
.article-header {
  padding: 40px 0 24px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.article-header .tags { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.article-header .tag {
  font-size: 0.72rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy-soft);
  color: var(--navy);
}
.article-header h1 {
  margin: 0 0 14px;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-size: 1.85rem;
  line-height: 1.55;
}
.article-header .meta {
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 40px;
  font-size: 0.85rem;
  color: var(--ink-sub);
}
.back-link::before {
  content: "";
  width: 6px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.back-link:hover::before { transform: rotate(45deg) translate(2px, 2px); }

/* ---- article table of contents ---- */
.article-toc-mobile { margin: 0 0 32px; }
.toc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--navy);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.toc-toggle:hover { background: var(--bg-card-hover); }
.toc-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.toc-toggle[aria-expanded="true"]::after { transform: rotate(225deg); }
.article-toc-mobile nav {
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
}
.article-toc-mobile nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.article-toc-mobile nav a { color: var(--ink-sub); font-size: 0.88rem; line-height: 1.5; }
.article-toc-mobile nav a:hover { color: var(--navy); }

.article-toc-desktop { display: none; }

@media (min-width: 1024px) {
  .article-grid { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: start; }
  .article-grid.no-toc { grid-template-columns: 1fr; }
  .article-main { min-width: 0; }
  .article-toc-mobile { display: none; }
  .article-toc-desktop {
    display: block;
    position: sticky;
    top: 32px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .article-toc-desktop nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    border-left: 1px solid var(--line);
  }
  .article-toc-desktop nav a {
    display: block;
    padding: 2px 0 2px 16px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ink-faint);
    font-size: 0.82rem;
    line-height: 1.5;
  }
  .article-toc-desktop nav a:hover { color: var(--navy); }
  .article-toc-desktop nav a.active { color: var(--navy); border-left-color: var(--navy); font-weight: 700; }
}

.article-eyecatch {
  max-width: 760px;
  margin: 0 0 40px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.article-eyecatch img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

.article-body {
  font-size: 1.03rem;
  color: var(--ink);
}
.article-body p { margin: 0 0 24px; }
.article-body h2 {
  margin: 52px 0 20px;
  font-size: 1.35rem;
}
.article-body h3 {
  margin: 36px 0 16px;
  font-size: 1.1rem;
  color: var(--gold-text);
}
.article-body ul { margin: 0 0 24px; padding-left: 1.3em; }
.article-body li { margin-bottom: 9px; }
.article-body strong { color: var(--navy); font-weight: 700; }

.stat-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.92em;
  white-space: nowrap;
}
.stat-chip.stat-chip-gold { background: var(--gold-text); }

.table-scroll {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.table-note {
  margin: -16px 0 24px;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.compare-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.86rem;
}
.compare-table th, .compare-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.compare-table thead th a { color: #fff; text-decoration: underline; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:nth-child(even) { background: var(--bg-warm); }
.compare-table th:first-child, .compare-table td:first-child {
  position: sticky;
  left: 0;
  box-shadow: 2px 0 4px rgba(28, 30, 38, 0.06);
}
.compare-table thead th:first-child { z-index: 2; }
.compare-table td:first-child { background: var(--bg-card); z-index: 1; }
.compare-table tbody tr:nth-child(even) td:first-child { background: var(--bg-warm); }
.compare-table td:first-child {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}

.term-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.term-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.term-list dt {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.term-list dd {
  margin: 0;
  color: var(--ink-sub);
  font-size: 0.92rem;
}

/* ---- 「こんな方に向いています」自己診断ボックス ---- */
.reader-fit {
  margin: 28px 0 36px;
  padding: 18px 22px;
  background: var(--navy-soft);
  border-radius: 8px;
}
.reader-fit p {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.88rem;
}
.reader-fit ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.reader-fit li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  color: var(--ink-sub);
  font-size: 0.9rem;
}
.reader-fit li:last-child { margin-bottom: 0; }
.reader-fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}

.plain-summary {
  margin: 28px 0 36px;
  padding: 18px 22px;
  background: var(--navy-soft);
  border-radius: 8px;
}
.plain-summary .label {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.88rem;
}
.plain-summary p {
  margin: 0;
  color: var(--ink-sub);
  font-size: 0.92rem;
  line-height: 1.7;
}

.disclaimer-box {
  margin: 44px 0;
  padding: 20px 24px;
  background: var(--bg-warm);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--ink-sub);
  line-height: 1.8;
}
.disclaimer-box strong { color: var(--ink); }

/* ---- ニュースまとめページ用、日付付き項目リスト ---- */
.news-entry {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.news-entry .news-date {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold-text);
}
.news-entry h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--ink);
}
.news-entry p {
  margin: 0 0 6px;
  color: var(--ink-sub);
  font-size: 0.92rem;
  line-height: 1.75;
}
.news-entry .news-source {
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.news-entry .news-source a { word-break: break-all; }

/* ---- 観点サークル図(企業分析記事用、7つの観点フレームワークの図解) ---- */
.viewpoint-circle {
  margin: 32px 0 40px;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.viewpoint-circle svg { width: 100%; max-width: 420px; height: auto; }
.viewpoint-circle .vc-caption {
  margin-top: 4px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ---- 会社概要カード(企業分析記事、冒頭の一目要約) ---- */
.company-card {
  position: relative;
  margin: 28px 0 36px;
  padding: 4px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.company-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--gold));
}
.company-card-item {
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
}
.company-card-item:nth-child(odd) { border-right: 1px solid var(--line); }
.company-card-item:nth-last-child(-n+2) { border-bottom: none; }
.company-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 10px;
  color: #fff;
}
.company-card-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.company-card-icon.navy { background: var(--navy); box-shadow: 0 4px 10px rgba(47, 95, 217, 0.28); }
.company-card-icon.gold { background: var(--gold-text); box-shadow: 0 4px 10px rgba(162, 80, 26, 0.28); }
.company-card-label {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.company-card-value {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
}
.company-card-value.accent { color: var(--gold-text); }
@media (max-width: 480px) {
  .company-card { grid-template-columns: 1fr; }
  .company-card-item:nth-child(odd) { border-right: none; }
  .company-card-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .company-card-item:last-child { border-bottom: none; }
}

/* ---- 事業モデル図(企業分析記事、顧客→提供価値→収益源の3ステップ図解) ---- */
.biz-model-diagram {
  margin: 32px 0 40px;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.biz-model-diagram svg { width: 100%; max-width: 560px; height: auto; }
.biz-model-diagram .bmd-caption {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ---- 観点別サマリー表(企業分析記事、7つの観点図の直後に置く早見表) ---- */
.viewpoint-summary {
  margin: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.viewpoint-summary table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.viewpoint-summary th, .viewpoint-summary td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.viewpoint-summary tbody tr:last-child td,
.viewpoint-summary tbody tr:last-child th { border-bottom: none; }
.viewpoint-summary th {
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  width: 30%;
}
.viewpoint-summary tbody tr:nth-child(even) { background: var(--bg-warm); }

/* ---- データテーブル(企業分析記事の定量データ用) ---- */
.data-table-wrap {
  margin: 24px 0 12px;
  overflow-x: auto;
}
.data-table-wrap table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.data-table-wrap caption {
  text-align: left;
  font-size: 0.82rem;
  color: var(--ink-sub);
  margin-bottom: 8px;
}
.data-table-wrap th, .data-table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.data-table-wrap thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
}
.data-table-wrap tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.data-table-wrap tbody tr:nth-child(even) { background: var(--bg-warm); }
.data-table-wrap td.num {
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  white-space: nowrap;
}
.data-table-wrap td.num.gold { color: var(--gold-text); }
.metric-note {
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ---- 時価総額推移チャート(企業分析記事、データテーブルの直後に置く折れ線グラフ) ---- */
.market-cap-chart {
  margin: 20px 0 12px;
  padding: 24px 16px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.market-cap-chart svg { width: 100%; max-width: 520px; height: auto; }
.market-cap-chart .mcc-caption {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

/* ---- 汎用図解カード(一般知識・投資日記記事、文字だけでは伝わりにくい箇所を図で補う) ---- */
.article-diagram {
  margin: 32px 0 40px;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
}
.article-diagram svg { width: 100%; max-width: 480px; height: auto; }
.article-diagram .diagram-caption {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.diagram-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--ink-sub);
}
.diagram-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.diagram-legend-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* ---- 運営者アバター(トップページ・免責事項ページの運営者紹介) ---- */
.author-badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.author-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}
.author-avatar svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.author-badge .author-note { margin: 0; }
@media (max-width: 600px) {
  .author-avatar { width: 44px; height: 44px; }
  .author-avatar svg { width: 24px; height: 24px; }
}

/* ---- 参照元リスト ---- */
.source-list {
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--bg-warm);
  border-radius: 8px;
  font-size: 0.84rem;
}
.source-list h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--ink);
}
.source-list ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--ink-sub);
}
.source-list li { margin-bottom: 6px; }
.source-list a { word-break: break-all; }

/* ---- 次の記事への導線リンク ---- */
.next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.next-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.next-link:hover::after { transform: rotate(-45deg) translate(2px, 2px); }

/* ---- 関連記事(全記事ページ共通、articles-data.js + related-articles.jsで自動生成) ---- */
.related-articles {
  margin: 44px 0;
}
.related-heading {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--ink);
}
.related-heading-tool {
  margin-top: 28px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  justify-content: start;
  gap: 14px;
}
.related-grid > .related-card {
  max-width: 220px;
}
.related-card {
  display: block;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  text-decoration: none;
}
.related-card-thumb {
  display: block;
}
.related-card-thumb img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  display: block;
}
.related-card-title {
  display: block;
  padding: 10px 12px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
  .related-grid > .related-card { max-width: none; }
}

@media (max-width: 600px) {
  .hero { padding: 64px 0 48px; }
  .site-logo { font-size: 1.9rem; }
  .about-section { padding: 36px 0; }
  .article-header { padding: 48px 0 24px; }
  .article-header h1 { font-size: 1.45rem; }
}

/* ---- 投資まわりの基礎知識クイズ ---- */
.quiz-page { max-width: 640px; }
.quiz-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.quiz-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
}
.quiz-intro h1 { margin-top: 0; }
.quiz-intro-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.quiz-intro-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-sub);
}
.quiz-intro-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.quiz-question h2 {
  margin-top: 0;
  font-size: 1.1rem;
  line-height: 1.6;
}
.quiz-options {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.94rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--navy); }
.quiz-option:disabled { cursor: default; }
.quiz-option.is-correct {
  background: rgba(47, 95, 217, 0.1);
  border-color: var(--navy);
  color: var(--navy);
  font-weight: 700;
}
.quiz-option.is-wrong {
  background: rgba(239, 125, 63, 0.22);
  border-color: var(--gold);
  color: var(--gold-text);
  font-weight: 700;
}
.quiz-explain {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: var(--bg-warm);
  border-left: 3px solid var(--navy);
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--ink-sub);
  display: none;
}
.quiz-explain.is-shown { display: block; }
.quiz-next-btn {
  display: none;
  margin: 20px auto 0;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}
.quiz-next-btn.is-shown { display: block; }
.quiz-start-btn {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
}
.quiz-result-badge {
  text-align: center;
  padding: 8px 0 4px;
}
.quiz-result-score {
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.quiz-result-type {
  margin: 6px 0 18px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--gold-text);
}
.quiz-result-desc {
  font-size: 0.94rem;
  color: var(--ink-sub);
  line-height: 1.8;
}
.quiz-share-card-wrap {
  display: flex;
  justify-content: center;
  margin: 22px 0;
}
.quiz-share-card-wrap canvas {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
.quiz-share-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.quiz-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 4px;
}
.quiz-share-buttons a, .quiz-share-buttons button {
  padding: 11px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--line);
}
.quiz-share-x {
  background: var(--ink);
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
.quiz-share-dl {
  background: var(--bg-warm);
  color: var(--ink);
}
.quiz-retry-btn {
  display: block;
  margin: 18px auto 0;
  background: none;
  border: none;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.86rem;
  text-decoration: underline;
  cursor: pointer;
}
.quiz-result-links {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.quiz-result-links p { font-size: 0.82rem; color: var(--ink-faint); margin: 0 0 8px; }
.quiz-result-links a { display: inline; margin-right: 12px; }

/* ---- サイト内検索(トップページ) ---- */
.category-jump-lead { margin: 0 0 16px; font-size: 0.86rem; color: var(--ink-sub); }
.category-jump-lead a { color: var(--navy); }
.site-search { margin: 0 0 20px; }
.site-search input {
  width: 100%;
  max-width: 420px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 0.9rem;
  font-family: inherit;
}
.site-search input::placeholder { color: var(--ink-faint); }
.site-search input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.no-results-note {
  display: none;
  padding: 20px 4px;
  color: var(--ink-faint);
  font-size: 0.88rem;
}
.no-results-note.visible { display: block; }

/* ---- はじめての方へ(トップページ pickup) ---- */
.pickup-section { padding: 8px 0 0; }
.pickup-lead { margin: 4px 0 20px; color: var(--ink-sub); font-size: 0.88rem; }
.pickup-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.pickup-grid .pickup-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pickup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pickup-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.pickup-card img { width: 88px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.pickup-card-title { font-size: 0.88rem; font-weight: 700; line-height: 1.5; }
@media (max-width: 700px) {
  .pickup-grid { grid-template-columns: 1fr; }
}

/* ---- 記事下部: シリーズナビ・シェア ---- */
.series-nav {
  display: flex;
  gap: 12px;
  margin: 40px 0;
  flex-wrap: wrap;
}
.series-nav-link {
  flex: 1 1 220px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.series-nav-link:hover { border-color: var(--navy); background: var(--navy-soft); text-decoration: none; }
.series-nav-link .series-nav-dir {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.series-nav-link.next { text-align: right; }

.share-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0;
  padding: 16px 20px;
  background: var(--bg-warm);
  border-radius: 8px;
  flex-wrap: wrap;
}
.share-row .share-label { font-size: 0.85rem; color: var(--ink-sub); }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.share-btn:hover { opacity: 0.82; text-decoration: none; }

/* ---- 固定ヘッダー(全ページ共通、v2リニューアル) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  flex-wrap: wrap;
}
.site-header-logo {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  flex-shrink: 0;
}
.site-header-logo .accent { color: var(--gold-text); }
.site-header-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-left: auto;
}
.site-header-nav a {
  font-size: 0.85rem;
  color: var(--ink-sub);
  white-space: nowrap;
}
.site-header-nav a:hover,
.site-header-nav a.active {
  color: var(--navy);
  text-decoration: none;
}
.site-header-search-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-sub);
  flex-shrink: 0;
  padding: 0;
}
.site-header-search-toggle svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-header-search-toggle:hover { border-color: var(--navy); color: var(--navy); }
.site-header-search-panel { border-bottom: 1px solid var(--line); background: var(--bg-warm); }
.site-header-search-panel[hidden] { display: none; }
.site-header-search-panel form { padding: 12px 24px; }
.site-header-search-panel input {
  width: 100%;
  max-width: 420px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--ink);
  font-size: 0.88rem;
  font-family: inherit;
}
.site-header-search-panel input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
@media (max-width: 700px) {
  .site-header-nav { order: 3; width: 100%; overflow-x: auto; gap: 16px; margin-left: 0; padding-top: 4px; }
}

/* ---- カテゴリページ ---- */
.category-intro { padding: 40px 0 8px; }
.category-intro .section-label { margin-top: 0; }
.category-intro p { color: var(--ink-sub); font-size: 0.92rem; max-width: 620px; }
.category-back-link { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 0.85rem; color: var(--ink-sub); }

/* ---- iDeCo節税額シミュレーター ---- */
.ideco-sim-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
}
.ideco-sim-field { margin: 0 0 20px; }
.ideco-sim-field:last-of-type { margin-bottom: 0; }
.ideco-sim-field label {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
  margin: 0 0 8px;
}
.ideco-sim-hint {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 6px;
  line-height: 1.6;
}
.ideco-sim-field select,
.ideco-sim-field input[type="number"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-warm);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.94rem;
}
.ideco-sim-field select:focus,
.ideco-sim-field input[type="number"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
.ideco-sim-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) {
  .ideco-sim-row { grid-template-columns: 1fr; }
}
.ideco-sim-btn {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  padding: 14px 24px;
  border: none;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
}
.ideco-sim-result {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: none;
}
.ideco-sim-result.is-shown { display: block; }
.ideco-sim-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 18px;
}
@media (max-width: 640px) {
  .ideco-sim-result-grid { grid-template-columns: 1fr; }
}
.ideco-sim-result-item {
  background: var(--bg-warm);
  border-radius: 8px;
  padding: 16px 18px;
}
.ideco-sim-result-item .label {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin: 0 0 6px;
  line-height: 1.5;
}
.ideco-sim-result-item .value {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
}
.ideco-sim-result-item .value.accent { color: var(--gold-text); }
.ideco-sim-result-breakdown {
  font-size: 0.82rem;
  color: var(--ink-sub);
  margin: 0 0 18px;
  line-height: 1.8;
}
.ideco-sim-result-note {
  font-size: 0.8rem;
  color: var(--ink-faint);
  line-height: 1.8;
  margin: 0;
}