/* ==========================================================================
   Relens | Industry Atlas — Atlas 独自の部品
   トークン（色・書体・余白・角丸）は style.css のものだけを使う。
   デザインコンセプト：情報の関係が見える、静かな地図。
   - 白地・墨色。面は --c-tint、罫線は --c-line / --c-line-strong
   - 色は使わない（関係の種類は線種とラベルで区別する）
   ========================================================================== */

/* ---- ロゴ：Relens のワードマーク + サイト名（姉妹サイトと同じ並び） ---- */
.site-logo { display: inline-flex; align-items: flex-end; gap: 14px; color: var(--c-text); }
.site-logo__mark { width: auto; height: 32px; }
.site-logo__name {
  font-family: var(--font-en);
  font-size: 21px;
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translateY(1px);
}
.site-footer .site-logo__mark { height: 28px; }
.site-footer .site-logo__name { font-size: 18px; }
@media (max-width: 860px) {
  .site-logo { gap: 10px; }
  .site-logo__mark { height: 24px; }
  .site-logo__name { font-size: 16px; }
}

/* ---- プレビュー表示の帯（本番では出ない） ---- */
.preview-bar {
  margin: 0;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-tint);
  color: var(--c-text);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ---- ラベル ---- */
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--font-ja);
  font-size: 11px;
  font-weight: var(--fw-regular);
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--c-sub);
  vertical-align: 0.15em;
  white-space: nowrap;
}
.badge--fact { border-color: var(--c-sub); color: var(--c-text); }
.badge--analysis { border-style: dashed; border-color: var(--c-sub); color: var(--c-text); }
.badge--draft { border-color: var(--c-text); border-style: dotted; color: var(--c-text); }

/* ---- 丸いタグ（業界・テーマ・企業へのリンク） ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li::before { content: none !important; }
.article-body ul.chips { display: flex; gap: 8px; }
.article-body .chips > li { padding: 0; }
.article-body .chips + .chips { margin-top: 12px; }
.chips a, .chips span {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--c-text);
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
}
.chips a:hover { background: var(--c-tint); border-color: var(--c-text); opacity: 1 !important; }
.chips--small a, .chips--small span { padding: 2px 10px; font-size: 12px; color: var(--c-sub); }
.chips + .chips { margin-top: 12px; }

/* ---- 準備中・空の表示 ---- */
.empty-note {
  padding: 22px 28px;
  border-radius: var(--radius-embed);
  background: var(--c-tint);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}
@media (max-width: 640px) { .empty-note { padding: 18px 20px; font-size: 13px; } }

/* ---- 最終確認日・サイト更新日 ---- */
.page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-sub);
}
.page-meta time { margin-left: 6px; font-family: var(--font-en); font-weight: var(--fw-light); }
.article-meta__en { font-family: var(--font-en); font-weight: var(--fw-light); }

/* ---- 出典 ---- */
.cite { margin-left: 2px; font-family: var(--font-en); font-size: 11px; font-weight: var(--fw-light); line-height: 0; }
.cite a { color: var(--c-link); text-decoration: none !important; }
.article-body ol.source-list { gap: 14px; font-size: 14px; line-height: 1.8; }
.source-list li { scroll-margin-top: calc(var(--header-h) + 24px); }
.source-list li:target { background: var(--c-tint); }
.source-list__meta { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 2px; font-size: 12px; color: var(--c-sub); }

/* ---- 項目と内容（企業概要など）。dl.facts は style.css ---- */
.article-body dl.facts { margin-top: 40px; border-top: 1px solid var(--c-sub); border-bottom: 1px solid var(--c-line); }
.facts__row { padding: 14px 0; }
.facts__row:first-child { padding-top: 14px; }
.facts__row dd { margin: 0; color: var(--c-text); }
@media (max-width: 640px) { .facts__row { grid-template-columns: 7em minmax(0, 1fr); } }

/* ---- 詳細ページの節の導入文 ---- */
.article-body .section-lead { font-size: 14px; line-height: 1.9; color: var(--c-sub); }

/* ---- 一覧ページの索引（業界・テーマ）：薄い面・角丸のカード（教養とクリエイティブの Upcoming と同じ） ---- */
.index-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 16px;
}
.index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 32px 30px;
  background: var(--c-tint);
  border-radius: var(--radius-embed);
  transition: background .2s;
}
a.index-card:hover { background: var(--c-light); }
.index-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.index-card__num {
  font-family: var(--font-en);
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: var(--fw-thin);
  line-height: 1;
  letter-spacing: -0.02em;
}
.index-card__icon { width: 26px; height: 26px; stroke-width: 1.25; }
.index-card__name { margin-top: 24px; font-size: 20px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.03em; }
.index-card__en { display: block; margin-top: 2px; font-family: var(--font-en); font-size: 13px; font-weight: var(--fw-light); letter-spacing: 0; color: var(--c-sub); }
.index-card__summary { margin-top: 12px; font-size: 14px; line-height: 1.85; letter-spacing: 0.03em; color: var(--c-body); }
.index-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--c-sub);
}
.index-card__foot .badge { margin-left: 0; }
.index-card__more { margin-left: auto; font-size: 13px; color: var(--c-text); }
.index-card__more::after { content: " →"; font-family: var(--font-en); }
/* 大きいカード（注目のテーマ） */
.index-card--wide { padding: 40px 44px; }
.index-card--wide .index-card__name { font-size: clamp(24px, 2.2vw, 32px); }
.index-card__segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 28px; padding: 0; list-style: none; }
.index-card__segs li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--c-line); font-size: 14px; line-height: 1.6; }
.index-card__segs li span { font-family: var(--font-en); font-weight: var(--fw-light); color: var(--c-sub); }
@media (max-width: 1024px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index-card__segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .index-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .index-card, .index-card--wide { padding: 24px 20px; }
  .index-card__name { margin-top: 16px; font-size: 18px; }
  .index-card__segs { grid-template-columns: minmax(0, 1fr); }
}

/* 一覧の補足（件数・凡例） */
.section__lead { margin: -16px 0 32px; font-size: 14px; line-height: 1.9; letter-spacing: 0.04em; color: var(--c-body); }

/* ---- 3つの入口（TOP） ---- */
.entrances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--c-line-strong); }
.entrance { display: flex; flex-direction: column; gap: 8px; padding: 28px 32px 32px 0; transition: opacity .2s; }
.entrance + .entrance { padding-left: 32px; border-left: 1px solid var(--c-line); }
.entrance:hover { opacity: .6; }
.entrance__num { font-family: var(--font-en); font-size: 14px; font-weight: var(--fw-light); color: var(--c-sub); }
.entrance__en { font-family: var(--font-en); font-size: clamp(22px, 2vw, 30px); font-weight: var(--fw-light); letter-spacing: -0.02em; line-height: 1.3; }
.entrance__ja { font-size: 15px; font-weight: var(--fw-medium); letter-spacing: 0.04em; }
.entrance__ja::after { content: " →"; font-family: var(--font-en); font-weight: var(--fw-light); }
.entrance__desc { font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--c-sub); }
@media (max-width: 860px) {
  .entrances { grid-template-columns: minmax(0, 1fr); }
  .entrance, .entrance + .entrance { padding: 20px 0; border-left: 0; }
  .entrance + .entrance { border-top: 1px solid var(--c-line); }
}

/* ---- 企業カード ---- */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-body .company-grid { display: grid; gap: 12px; }
.article-body .company-grid > li { padding: 0; }
.article-body .company-grid > li::before { content: none; }
.company-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 22px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-embed);
  color: var(--c-text);
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
}
.company-card:hover { background: var(--c-tint); border-color: var(--c-text); opacity: 1 !important; }
.company-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: var(--c-sub); }
.company-card__meta .badge { margin-left: 0; }
.company-card__name { margin-top: 6px; font-size: 18px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.03em; }
.company-card__summary { margin-top: 6px; font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--c-body); }
.company-card__biz { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 14px; font-size: 12px; line-height: 1.7; color: var(--c-sub); }
.company-card__biz span::before { content: ""; display: inline-block; width: .5em; height: 1px; margin-right: 6px; vertical-align: .3em; background: var(--c-sub); }

/* ---- 表（指標・関係） ---- */
.article-body .metric-table td, .article-body .relation-table td { vertical-align: top; }
.metric-table__value { font-family: var(--font-en); font-weight: var(--fw-light); white-space: nowrap; }
.metric-table__unit { margin-left: 4px; font-family: var(--font-ja); font-size: 12px; color: var(--c-sub); }
.metric-table__note { display: block; margin-top: 2px; font-family: var(--font-ja); font-size: 12px; line-height: 1.7; white-space: normal; color: var(--c-sub); }
.relation-table__arrow { margin: 0 8px; color: var(--c-sub); }

/* 関係の種類の凡例：線種で区別する（色に頼らない） */
.rel-key { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; color: var(--c-text); }
.rel-key svg { width: 32px; height: 8px; flex: none; overflow: visible; }
.rel-key line { stroke: currentColor; stroke-width: 1.5; }
.rel-key--competition line, .atlas-line--competition { stroke-dasharray: 1.5 4; stroke-linecap: round; }
.rel-key--partnership line, .atlas-line--partnership { stroke-dasharray: 6 4; }
.rel-key--investment line, .atlas-line--investment { stroke-dasharray: none; }
.rel-key--technology line, .atlas-line--technology { stroke-dasharray: 8 3 1.5 3; }
.rel-key--supply line, .atlas-line--supply { stroke-dasharray: 14 4; }
.rel-key--group line, .atlas-line--group { stroke-width: 3 !important; }

/* ---- 業界地図 ---- */
.atlas-map { position: relative; margin-top: 40px; }
.atlas-map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-bottom: 20px; border-bottom: 1px solid var(--c-line-strong); }
.atlas-map__filter { display: flex; flex-wrap: wrap; gap: 6px; }
.atlas-map__tab {
  padding: 4px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  transition: background .2s, border-color .2s;
}
.atlas-map__tab:hover { border-color: var(--c-text); }
.atlas-map__tab[aria-pressed="true"] { border-color: var(--c-text); font-weight: var(--fw-medium); box-shadow: inset 0 0 0 0.5px var(--c-text); }
.atlas-map__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.atlas-map__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.atlas-map__legend label { cursor: pointer; }
.atlas-map__legend input { width: 14px; height: 14px; margin: 0; accent-color: var(--c-text); }
.atlas-map__zoom { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.04em; transition: opacity .2s; }
.atlas-map__zoom:hover { opacity: .55; }
.atlas-map__zoom-icon { width: 16px; height: 16px; stroke-width: 1.5; }
.atlas-map__hint { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; color: var(--c-sub); }

.atlas-map__canvas { position: relative; margin-top: 24px; }
.atlas-map__canvas.figure { padding: 40px 40px 36px; }
.atlas-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; color: var(--c-text); }
.atlas-line { fill: none; stroke: var(--c-text); stroke-width: 1.25; opacity: .55; transition: opacity .2s; }
.atlas-line.is-active { opacity: 1; stroke-width: 1.75; }
.atlas-line.is-dim { opacity: .08; }
.atlas-label { font-family: var(--font-ja); font-size: 11px; letter-spacing: 0.04em; fill: var(--c-text); text-anchor: middle; dominant-baseline: middle; }
.atlas-label__bg { fill: var(--c-bg); stroke: var(--c-line); }
.atlas-co { background: var(--c-bg); }

.atlas-layers { display: grid; gap: 40px; margin: 0; padding: 0; list-style: none; }
.atlas-layer { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
.atlas-layer[hidden] { display: none; }
.atlas-layer__head { padding-top: 14px; border-top: 1px solid var(--c-sub); }
.atlas-layer__num { font-family: var(--font-en); font-size: 13px; font-weight: var(--fw-light); color: var(--c-sub); }
.atlas-layer__name { margin-top: 4px; font-size: 17px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.04em; }
.atlas-layer__name span { display: block; font-family: var(--font-en); font-size: 13px; font-weight: var(--fw-light); letter-spacing: 0; color: var(--c-sub); }
.atlas-layer__desc { margin-top: 10px; font-size: 12px; line-height: 1.8; letter-spacing: 0.03em; color: var(--c-sub); }
.atlas-layer__segs { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 12px; }
.atlas-map.is-filtered .atlas-layer__segs { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.atlas-seg { display: flex; flex-direction: column; padding: 18px 20px 20px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); }
.atlas-seg__head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; transition: opacity .2s; }
.atlas-seg__head:hover { opacity: .6; }
.atlas-seg__num { font-family: var(--font-en); font-size: 22px; font-weight: var(--fw-thin); line-height: 1; letter-spacing: -0.02em; }
.atlas-seg__icon { width: 20px; height: 20px; stroke-width: 1.5; }
.atlas-seg__name { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.5; letter-spacing: 0.03em; }
.atlas-seg__name::after { content: " →"; font-family: var(--font-en); font-weight: var(--fw-light); color: var(--c-sub); }
.atlas-seg__cos { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.atlas-seg__empty { margin-top: 16px; font-size: 12px; color: var(--c-sub); }
.atlas-co {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-bg);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  transition: border-color .2s, opacity .2s, background .2s;
}
.article-meta .badge, .page-meta .badge { margin-left: 0; }
.atlas-co .badge { margin-left: 6px; font-size: 10px; padding: 0 6px; }
.atlas-co:hover, .atlas-co.is-focus { border-color: var(--c-text); }
.atlas-co.is-focus { box-shadow: 0 0 0 1px var(--c-text); font-weight: var(--fw-medium); }
.atlas-co.is-related { border-color: var(--c-text); }
.atlas-co.is-dim { opacity: .35; }
.atlas-co.is-draft { border-style: dashed; border-color: var(--c-sub); }

/* 全画面表示 */
.atlas-map:fullscreen { overflow: auto; padding: 32px var(--gutter); background: var(--c-bg); }

@media (max-width: 1024px) {
  .atlas-layer { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .atlas-layer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .atlas-layer__name span { display: inline; margin-left: 8px; }
  .atlas-layer__desc { flex-basis: 100%; margin-top: 0; }
}
/* スマホ・タブレット縦：関係線を出さず、領域ごとのカード一覧として読む */
@media (max-width: 860px) {
  .atlas-map__lines, .atlas-map__legend, .atlas-map__hint, .atlas-map__zoom { display: none !important; }
  .atlas-layer__segs, .atlas-map.is-filtered .atlas-layer__segs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .atlas-map__filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
  .atlas-map__tab { flex: none; padding: 8px 14px; }
}
@media (max-width: 640px) {
  .atlas-seg { padding: 16px; }
  .atlas-map__canvas.figure { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 28px var(--gutter) 24px; border-radius: 0; }
}

/* ---- 領域の一覧（テーマ詳細） ---- */
.article-body .seg-list { display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--c-sub); }
.article-body .seg-list > li { padding: 0; }
.article-body .seg-list > li::before { content: none; }
.seg-row {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-text);
  text-decoration: none !important;
  transition: background .2s;
}
.seg-row:hover { background: var(--c-tint); opacity: 1 !important; }
.seg-row__num { font-family: var(--font-en); font-size: 28px; font-weight: var(--fw-thin); line-height: 1.1; letter-spacing: -0.02em; }
.seg-row__name { font-size: 17px; font-weight: var(--fw-medium); line-height: 1.6; letter-spacing: 0.03em; }
.seg-row__name small { margin-left: 10px; font-family: var(--font-en); font-size: 12px; font-weight: var(--fw-light); letter-spacing: 0; color: var(--c-sub); }
.seg-row__def { grid-column: 2; font-size: 14px; line-height: 1.85; color: var(--c-body); }
.seg-row__count { grid-row: 1; grid-column: 3; align-self: start; padding-top: 4px; font-size: 12px; color: var(--c-sub); white-space: nowrap; }
@media (max-width: 640px) {
  .seg-row { grid-template-columns: 2.6em minmax(0, 1fr); padding: 18px 0; }
  .seg-row__num { font-size: 22px; }
  .seg-row__name { font-size: 16px; }
  .seg-row__name small { display: block; margin-left: 0; }
  .seg-row__count { grid-row: auto; grid-column: 2; padding-top: 0; }
}

/* ---- 含む・含まない（領域の定義） ---- */
.scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.scope__box { padding: 22px 24px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); }
.scope__box--out { border-style: dashed; }
.article-body .scope__title { font-size: 13px; letter-spacing: 0.06em; color: var(--c-sub); }
.article-body .scope__box ul { margin-top: 10px; font-size: 14px; line-height: 1.8; }
@media (max-width: 640px) { .scope { grid-template-columns: minmax(0, 1fr); } .scope__box { padding: 18px 20px; } }

/* ---- バリューチェーン（業界構造） ---- */
.article-body ol.chain { display: flex; flex-wrap: wrap; gap: 8px; counter-reset: none; }
.article-body ol.chain > li { flex: 1 1 160px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); }
.article-body ol.chain > li::before { content: none; }
.chain__name { font-size: 15px; font-weight: var(--fw-medium); color: var(--c-text); }
.chain__desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.8; }

/* ---- 市場セグメント（業界詳細） ---- */
.article-body .segment-defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--c-sub); }
.article-body .segment-defs > li { padding: 14px 0 14px 1.4em; border-bottom: 1px solid var(--c-line); font-size: 15px; color: var(--c-text); }
.article-body .segment-defs > li::before { top: 1.6em; }
.segment-defs small { display: block; font-size: 13px; color: var(--c-sub); }
@media (max-width: 640px) { .article-body .segment-defs { grid-template-columns: minmax(0, 1fr); } }

/* ---- 経営戦略（事実／主張／分析を区別して並べる） ---- */
.article-body .claims { display: grid; gap: 0; border-top: 1px solid var(--c-sub); }
.article-body .claims > li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.article-body .claims > li::before { content: none; }
.claims .badge { justify-self: start; margin: 0.35em 0 0; }
.claims__text { color: var(--c-text); }
@media (max-width: 640px) { .article-body .claims > li { grid-template-columns: minmax(0, 1fr); } }

/* ---- 最新の変化（更新履歴） ---- */
.updates { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-strong); }
.article-body .updates { display: block; }
.article-body .updates > li { padding-left: 0; }
.article-body .updates > li::before { content: none; }
.update {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 8px 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--c-line);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.update[hidden] { display: none; }
.update:target { background: var(--c-tint); }
.update__when { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.update__when time { font-family: var(--font-en); font-size: 15px; font-weight: var(--fw-light); letter-spacing: 0.02em; color: var(--c-text); }
.update__map { padding: 0 8px; border: 1px solid var(--c-line); border-radius: 999px; font-size: 11px; line-height: 1.8; letter-spacing: 0.04em; color: var(--c-sub); }
.update__map--reflected { border-color: var(--c-text); color: var(--c-text); }
.update__map--pending { border-style: dashed; }
.update__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; font-size: 13px; letter-spacing: 0.04em; color: var(--c-sub); }
.update__meta a { color: var(--c-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--c-line); }
.update__meta .badge { margin-left: 0; }
.update__title { margin-top: 4px; font-size: 18px; font-weight: var(--fw-medium); line-height: 1.6; letter-spacing: 0.03em; color: var(--c-text); }
.article-body .update__title { margin-top: 4px; padding-left: 0; font-size: 18px; }
.article-body .update__title::before { content: none; }
.update__summary { margin-top: 8px; font-size: 14px; line-height: 1.9; letter-spacing: 0.03em; color: var(--c-body); }
.update__impact { margin-top: 10px; padding: 12px 16px; border-radius: 8px; background: var(--c-tint); font-size: 13px; line-height: 1.85; color: var(--c-body); }
.update__impact .badge { margin: 0 10px 0 0; }
.update .chips { margin-top: 14px; }
.update__links { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.7; }
.article-body .update__links > li { padding-left: 0; }
.article-body .update__links > li::before { content: none; }
.update__links li { display: flex; gap: 12px; }
.update__links span:first-child { flex: none; width: 4.5em; font-size: 11px; line-height: 2; letter-spacing: 0.06em; color: var(--c-sub); }
.update__links a { color: var(--c-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.update__links a:hover { opacity: .65; }
@media (max-width: 860px) {
  .update { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .update__when { flex-direction: row; align-items: center; gap: 12px; }
}

/* ---- note 記事 ---- */
.note-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-body .note-list { display: grid; gap: 12px; }
.article-body .note-list > li { padding: 0; }
.article-body .note-list > li::before { content: none; }
.note-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-embed);
  color: var(--c-text) !important;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
}
.note-card::after { content: none !important; }
.note-card:hover { background: var(--c-tint); border-color: var(--c-text); opacity: 1 !important; }
.note-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-family: var(--font-en); font-size: 12px; font-weight: var(--fw-light); color: var(--c-sub); }
.note-card__meta .badge { margin-left: 0; }
.note-card__label { padding: 0 8px; border: 1px solid var(--c-sub); border-radius: 4px; font-weight: var(--fw-regular); }
.note-card__title { font-size: 15px; font-weight: var(--fw-medium); line-height: 1.7; letter-spacing: 0.03em; }
.note-card__title::after { content: " \2197"; font-family: var(--font-en); font-weight: var(--fw-light); color: var(--c-sub); }
.note-card__sub { font-size: 13px; line-height: 1.8; color: var(--c-sub); }

/* ---- Relens の示唆 ---- */
.article-body .insights { display: grid; gap: 12px; }
.article-body .insights > li { padding: 0; }
.article-body .insights > li::before { content: none; }
.insight { padding: 24px 28px; border: 1px dashed var(--c-sub); border-radius: var(--radius-embed); }
.insight__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--c-sub); }
.insight__label .badge { margin-left: 0; }
.article-body .insight__title { margin-top: 10px; font-size: 17px; font-weight: var(--fw-medium); line-height: 1.7; letter-spacing: 0.03em; color: var(--c-text); }
.article-body .insight__body { margin-top: 6px; font-size: 15px; line-height: 2; }
.article-body .insight__basis { margin-top: 10px; font-size: 12px; line-height: 1.8; color: var(--c-sub); }
@media (max-width: 640px) { .insight { padding: 20px; } }

/* ---- 一覧の絞り込み（Updates・Companies） ---- */
.filter button.filter__item { font: inherit; color: inherit; }
.filter button.filter__item[aria-pressed="true"] { color: var(--c-text); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- 詳細ページの本文の幅いっぱいの地図（TOC の右側には収めない） ---- */
.wide-block { padding-bottom: 120px; }
.wide-block .section__head { margin-bottom: 0; }
@media (max-width: 640px) { .wide-block { padding-bottom: 80px; } }

/* 読み上げ用の補足 */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 前後の領域へのページ送り ---- */
.article-body .pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; margin-top: 120px; padding-top: 24px; border-top: 1px solid var(--c-line-strong); font-size: 14px; line-height: 1.7; }
.article-body .pager a { color: var(--c-text); text-decoration: none; transition: opacity .2s; }
.article-body .pager a:hover { opacity: .55; }
.pager a span { display: block; font-size: 12px; color: var(--c-sub); }
.pager__next { text-align: right; }
.pager__up { font-size: 13px; color: var(--c-sub) !important; }
@media (max-width: 640px) {
  .article-body .pager { grid-template-columns: 1fr 1fr; margin-top: 88px; }
  .pager__up { grid-row: 2; grid-column: 1 / -1; text-align: center; }
}

/* パンくずの現在地（リンクではなく span）も、リンクと同じ高さにそろえる */
@media (max-width: 860px) {
  .breadcrumb span[aria-current] { display: inline-block; padding: 10px 0; color: var(--c-sub); }
  .atlas-map__bar { border-bottom: 0; padding-bottom: 0; }
}
.breadcrumb span[aria-current] { color: var(--c-sub); }

/* 本文（.article-body a）のリンク色は、カード型の UI には当てない */
.article-body a.company-card, .article-body a.seg-row, .article-body .chips a { color: var(--c-text); }


/* ==========================================================================
   図解（姉妹サイトの figure.flow と同じルール）
   - 枠線のない --c-tint の面に、罫線（--c-line）・角丸のカードを並べる
   - 見出しは文字と罫線で組む（黒地のバッジにしない）
   - 文字だけのリストになるところは、項目ごとにアイコンを添える
   - 表は原則この図解にする
   ========================================================================== */
.figure { position: relative; margin: 0; padding: 32px 36px; border-radius: var(--radius-embed); background: var(--c-tint); }
.article-body .figure ul { display: grid; gap: 0; margin: 0; padding: 0; }
.article-body .figure li { padding: 0; }
.article-body .figure li::before { content: none; }
.article-body .figure p { margin: 0; }
@media (max-width: 640px) { .figure { padding: 22px 18px; } }

/* 指標 */
.article-body .figure .metric-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.article-body .figure .metric { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); background: var(--c-bg); }
.metric__name { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.7; letter-spacing: 0.04em; color: var(--c-sub); }
.metric__icon, .biz__icon { width: 18px; height: 18px; flex: none; stroke-width: 1.5; color: var(--c-text); }
.article-body .figure .metric__value { margin-top: 6px; font-family: var(--font-en); font-size: 28px; font-weight: var(--fw-thin); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-text); }
.metric__unit { margin-left: 6px; font-family: var(--font-ja); font-size: 13px; font-weight: var(--fw-regular); color: var(--c-sub); }
.article-body .figure .metric__meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 12px; line-height: 1.8; color: var(--c-sub); }
.article-body .figure .metric__note { margin-top: 6px; font-size: 12px; line-height: 1.8; color: var(--c-sub); }

/* 関係 */
.article-body .figure .rel-groups { gap: 28px; }
.rel-group__head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--c-sub); }
.rel-group__head .rel-key { font-size: 15px; font-weight: var(--fw-medium); }
.rel-group__count { font-size: 12px; color: var(--c-sub); }
.article-body .figure .rel-rows { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 12px; }
.article-body .figure .rel-row { padding: 14px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); background: var(--c-bg); }
.rel-row__pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.article-body a.rel-row__co { color: var(--c-text); text-decoration-color: var(--c-line); }
.rel-row__co.is-self { font-weight: var(--fw-medium); }
.rel-row__arrow { color: var(--c-sub); }
.article-body .figure .rel-row__label { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--c-body); }
.article-body .figure .rel-row__desc { margin-top: 2px; font-size: 12px; line-height: 1.8; color: var(--c-sub); }

/* 事業・サービス */
.article-body .figure .biz-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.article-body .figure .biz { padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--radius-embed); background: var(--c-bg); }
.biz__kind { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.04em; color: var(--c-sub); }
.article-body .figure .biz__name { margin-top: 6px; font-size: 17px; font-weight: var(--fw-medium); line-height: 1.5; color: var(--c-text); }
.article-body .figure .biz__desc { margin-top: 4px; font-size: 13px; line-height: 1.8; }
.article-body .figure .biz__segs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: 12px; }
.article-body .biz__segs a { color: var(--c-sub); }