/* みんなのヘルスケア 公開側の CSS（SPEC 5 章。WP7 で koji が 2026-11-07 に承認した見本: docs/design/mock と方向 C の dir-c）
   - 端末の書体だけ。Web フォントは読まない
   - 色は文字・補助の文字・罫線・リンク・警告・マーカー、図の読者の印（青緑）だけ
   - 角丸の箱・影・背景色の囲み・グラデーションを使わない（マーカーは下線で描く）
   - 前半は docs/design/mock/dir-c/style.css と同じ。後半は一覧・検索・フォーム・本文ブロック（WP3 の class）の分 */

:root {
  --text: #222;
  --sub: #5c5c5c;
  --rule: #ddd;
  --link: #0645ad;
  --visited: #5a3696;
  --warn: #a12b1f;
  --accent: #49b998;   /* ロゴの青緑。図で読者の属性の印にだけ使う */
  --mark: #bdbdbd;     /* 比べる相手の点・線 */
  --grid: #e9e9e9;
  --fs-body: 16px;
  --lh-body: 1.8;
  --fs-h1: 24px;
  --fs-h2: 22px;
  --fs-h3: 19px;
  --fs-small: 14px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
@media (min-width: 768px) {
  :root { --fs-body: 17px; --fs-h1: 28px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: #fff;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  line-break: strict;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:visited { color: var(--visited); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2, h3, h4 { font-feature-settings: "palt"; line-height: 1.45; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 4px 8px; z-index: 10; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

.layout { display: block; }
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; }
}
.main { min-width: 0; }

/* ヘッダー（固定しない） */
.site-header { border-bottom: 1px solid var(--rule); margin-bottom: 16px; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 12px; }
.logo img { width: 207px; height: 20px; }
@media (min-width: 768px) { .logo img { width: 331px; height: 32px; } }
.demo { margin-left: auto; }
.demo-button {
  font: inherit; font-size: var(--fs-small); color: var(--text);
  background: #fff; border: 1px solid var(--text); border-radius: 2px;
  padding: 4px 10px; cursor: pointer;
}
.demo-caret { margin-left: 6px; color: var(--sub); }
.global-nav { width: 100%; }
.global-nav ul { list-style: none; display: flex; }
.global-nav li { flex: 1; text-align: center; }
.global-nav a {
  display: block; padding: 12px 0 10px; color: var(--text); text-decoration: none;
  font-size: 15px; border-bottom: 2px solid transparent;
}
.global-nav a[aria-current="page"] { border-bottom-color: var(--text); font-weight: 700; }
@media (min-width: 1024px) {
  .header-inner { flex-wrap: nowrap; padding-top: 0; }
  .logo { padding: 18px 0; }
  .global-nav { width: auto; order: 2; margin-left: 40px; }
  .global-nav li { flex: none; }
  .global-nav a { padding: 16px 0 14px; margin: 0 14px; }
  .demo { order: 3; margin-left: auto; }
}

/* パンくず */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; font-size: var(--fs-small); color: var(--sub); line-height: 1.6; }
.breadcrumb li + li::before { content: "›"; margin: 0 0.5em; color: var(--sub); }
.breadcrumb { margin-bottom: 20px; }

/* 見出し・本文 */
h1 { font-size: var(--fs-h1); line-height: 1.45; font-weight: 700; }
.section { margin-top: 2em; }
.section-title { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 0.5em; }
.meta, .note { font-size: var(--fs-small); color: var(--sub); line-height: 1.7; }
.note { margin-top: 0.8em; }

.intro { margin: 8px 0 0; }
.site-title { font-size: var(--fs-h1); }
.lead-small { font-size: var(--fs-small); color: var(--sub); margin-top: 4px; }
.about p { margin-top: 1em; line-height: var(--lh-body); max-width: 40em; }
.more { margin-top: 1em; font-size: var(--fs-small); }

/* 記事 */
.article h1 { margin-bottom: 16px; }
.byline { display: flex; gap: 12px; align-items: flex-start; }
.byline .meta span { margin-right: 1em; }
.avatar-sm { border-radius: 50%; flex: none; width: 40px; height: 40px; object-fit: cover; }
.eyecatch { margin: 14px 0 0; }
.eyecatch img { display: block; }
.lead { margin-top: 14px; line-height: var(--lh-body); max-width: 40em; }
.lead p + p { margin-top: 0.8em; }

.prose { line-height: var(--lh-body); max-width: 40em; text-spacing-trim: trim-start; }
.prose p, .prose ul, .prose ol { margin: 0.8em 0 0; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li + li { margin-top: 0.3em; }
.prose h2 { font-size: var(--fs-h2); margin-top: 1.7em; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.4em; }
.prose h2 + h3 { margin-top: 0.8em; }
.prose h4 { font-size: 17px; margin-top: 1.2em; }
.marker { text-decoration: underline 0.35em #f2e27d; text-underline-offset: -0.2em; text-decoration-skip-ink: none; }
.prose strong { font-weight: 700; }

/* 補足（上下 1px）と強調（上下 2px）の囲み。背景なし */
.box { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.6em 0 0.7em; margin-top: 1.1em; }
.box-strong { border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.box-title { font-size: var(--fs-small); font-weight: 700; line-height: 1.6; }
.prose .box ul, .prose .box ol { margin-top: 0.5em; }

.page-link { font-size: var(--fs-small); line-height: 1.7; }
.page-link-label { color: var(--sub); margin-right: 0.8em; }
.prose .page-link { margin-top: 1em; }

/* 目次 */
.toc { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.7em 0 0.8em; margin-top: 1.2em; max-width: 40em; }
.toc-title { font-size: 16px; font-weight: 700; }
.toc ol { list-style: none; margin-top: 0.5em; font-size: 15px; line-height: 1.6; }
.toc li { margin-top: 0.4em; display: flex; }
.toc-l2 { padding-left: 2.2em; }
.toc-no { flex: none; min-width: 2.2em; color: var(--sub); font-variant-numeric: tabular-nums; }
.toc-side { display: none; }
@media (min-width: 1024px) {
  .toc-side { display: block; position: sticky; top: 16px; margin-top: 24px; }
  .toc-side .is-current a { font-weight: 700; color: var(--text); }
  .toc-side a { text-decoration: none; }
}

/* 病気リスク（記事の中） */
.risk-box { margin-top: 1.3em; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.7em 0 0.8em; }
.box-heading { font-size: 16px; font-weight: 700; }

/* 図（方向 C）: 結論の見出し → 単位 → 図 → 出典。強調色は青緑 1 色（読者の属性）、比べる相手は灰。
   点は背景色ではなく border で描く（塗りの丸バッジと区別するため）。数値は文字色で横に書く */
.fig { margin: 1.5em 0 0; }
.risk-box .fig { margin-top: 0; }
.fig-head { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.fig-title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.fig-unit { font-size: 14px; color: var(--sub); margin-top: 2px; }
.fig-src { font-size: 14px; color: var(--sub); margin-top: 10px; line-height: 1.6; }
.fig-after { margin-top: 12px; }
.fig-actions { margin-top: 0.9em; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.btn.btn-primary { background: var(--text); border-color: var(--text); color: #fff; font-weight: 700; padding: 9px 20px; }
.btn.btn-primary:visited { color: #fff; }

/* ⓘ（details。JS なしで開く） */
.info { flex: none; margin-top: 2px; }
.info summary { list-style: none; cursor: pointer; padding: 3px; }
.info summary::-webkit-details-marker { display: none; }
.info-i { display: block; width: 18px; height: 18px; border: 1px solid var(--sub); border-radius: 50%;
  font-size: 12px; font-weight: 700; line-height: 16px; text-align: center; color: var(--sub); }
.info[open] .info-i { border-color: var(--text); color: var(--text); }
.info-pop { position: absolute; left: 0; top: calc(100% + 4px); z-index: 5; width: min(340px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--text); padding: 10px 14px 12px; font-size: 14px; line-height: 1.7; font-weight: 400; color: var(--text); }
.info-h { font-weight: 700; }
.info-pop ul { padding-left: 1.2em; margin: 4px 0 0; }
.info-pop li + li { margin-top: 2px; }

/* 順位（横棒＋年代別の小さな柱）。病名は 1 行目、棒・値・柱は 2 行目 */
.rank { list-style: none; margin-top: 10px; border-top: 1px solid var(--text); }
.rank li { border-bottom: 1px solid var(--rule); }
.rank-row { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) 4.2em 0.8em; grid-template-areas: "no name name go" "no bar val go";
  gap: 4px 12px; align-items: center; min-height: 44px; padding: 9px 0 10px; color: var(--text); text-decoration: none; }
.rank-plain .rank-row { grid-template-columns: minmax(0, 1fr) 4.2em 0.8em; grid-template-areas: "name name go" "bar val go"; }
/* 390px では年代別の小さな柱を出さない（柱が小さすぎて読めない。値は「表で見る」と病気ページで読む） */
.rank-head, .spk { display: none; }
/* 小さな柱の列見出し（年代の語は 1 回だけ。20代は 1 本目の左端、70代は 6 本目の右端にそろえる） */
.rank-head { grid-template-columns: 1.6em minmax(0, 1fr) 4.2em 69px 0.8em; column-gap: 12px; margin-top: 10px; }
.rank-head.rank-plain { grid-template-columns: minmax(0, 1fr) 4.2em 69px 0.8em; }
.rank-head .spk-x { grid-column: -3 / -2; }
.rank-head + .rank { margin-top: 2px; }
a.rank-row .rank-name, a.db-row .db-name { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
a.rank-row:visited .rank-name, a.db-row:visited .db-name { color: var(--visited); }
.go { grid-area: go; color: var(--sub); font-size: 18px; line-height: 1; text-align: end; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.rank-no { grid-area: no; align-self: start; font-size: 14px; color: var(--sub); font-variant-numeric: tabular-nums; line-height: 1.6; }
.rank-name { grid-area: name; font-size: 15px; line-height: 1.5; }
.rank-bar { grid-area: bar; display: block; width: 100%; height: 8px; align-self: center; }
/* 横棒（インライン SVG）。読者の属性は青緑、比べる相手は灰 */
.bar-you { fill: var(--accent); }
.bar { fill: var(--mark); }
.rank-val { grid-area: val; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.rank-na { font-weight: 400; font-size: 13px; color: var(--sub); }
.spk { grid-area: spark; align-self: center; }
.spk-x { display: flex; justify-content: space-between; font-size: 12px; line-height: 1.4; color: var(--sub); font-variant-numeric: tabular-nums; }
.spark { display: block; overflow: visible; }
.sp { fill: var(--mark); }
.sp-you { fill: var(--accent); }
.sp-base { stroke: var(--sub); stroke-width: 1; }

/* 40代→50代（ダンベル。点・線・目盛りはインライン SVG）。凡例なし、1 行目の点に年代の語。行全体がリンク */
.db { list-style: none; margin-top: 10px; border-top: 1px solid var(--text); }
.db li { border-bottom: 1px solid var(--rule); }
.db-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 6.6em 0.8em; grid-template-areas: "name val go" "plot val go";
  gap: 4px 14px; min-height: 44px; padding: 8px 0 9px; color: var(--text); text-decoration: none; }
.db-name { grid-area: name; font-size: 15px; line-height: 1.5; }
.db-plot { grid-area: plot; display: block; width: 100%; height: 14px; align-self: end; overflow: visible; }
.db-first .db-plot { margin-top: 22px; }
.db-grid { stroke: var(--grid); stroke-width: 1; }
.db-line { stroke: var(--mark); stroke-width: 2; }
.db-a, .db-b { fill: var(--mark); stroke: #fff; stroke-width: 2; }
.db-b { fill: var(--accent); }
.db-lab { font-size: 13px; font-variant-numeric: tabular-nums; }
.db-lab-a { fill: var(--sub); }
.db-lab-b { fill: var(--text); font-weight: 700; }
.db .go { align-self: center; }
.db-val { grid-area: val; align-self: end; text-align: end; font-variant-numeric: tabular-nums; line-height: 1.35; }
.db-n { display: block; font-weight: 700; white-space: nowrap; }
.db-x { display: block; font-size: 13px; color: var(--sub); }
.db-axis { padding-right: calc(6.6em + 0.8em + 28px); }
.db-ticks { display: block; width: 100%; height: 20px; overflow: visible; font-size: 13px; fill: var(--sub); font-variant-numeric: tabular-nums; }

/* 年代の推移（線だけ SVG、点と文字は HTML） */
.lc { margin-top: 18px; padding: 0 46px 0 34px; }
.lc-plot { position: relative; height: 220px; }
@media (min-width: 720px) { .lc-plot { height: 260px; } }
.lc-grid { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grid); }
.lc-grid:first-child { border-top-color: var(--sub); }
.lc-ylab { position: absolute; right: calc(100% + 8px); top: -0.8em; font-size: 13px; line-height: 1.5; color: var(--sub); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.lc-line-o { fill: none; stroke: var(--mark); stroke-width: 2; stroke-linejoin: round; }
.lc-dot { position: absolute; width: 0; height: 0; border: 4px solid var(--accent); border-radius: 50%; margin: -4px 0 0 -4px; outline: 2px solid #fff; }
.lc-dot-o { border-width: 3px; border-color: var(--mark); margin: -3px 0 0 -3px; }
.lc-dot-you { border-width: 6px; margin: -6px 0 0 -6px; }
.lc-note { position: absolute; font-size: 14px; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lc-note-you { transform: translate(calc(-100% - 12px), -80%); text-align: end; }
.lc-note-next { transform: translate(calc(-100% - 10px), -95%); text-align: end; }
.lc-note-next2 { transform: translate(calc(-100% - 10px), -95%); text-align: end; }
.lc-end { position: absolute; left: calc(100% + 8px); transform: translateY(-50%); font-size: 14px; font-weight: 700; white-space: nowrap; }
.lc-end-o { font-weight: 400; color: var(--sub); }
.lc-x { position: relative; height: 1.8em; font-size: 13px; color: var(--sub); }
.lc-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.tbl { margin-top: 6px; font-size: 14px; }
.tbl summary { color: var(--link); cursor: pointer; }
.data { width: 100%; max-width: 24em; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 6px; }
.data th, .data td { border-bottom: 1px solid var(--rule); padding: 5px 8px 5px 0; text-align: start; font-weight: 400; }
.num { text-align: end !important; white-space: nowrap; }

/* 1000人中の点（10×10） */
.woven { display: grid; gap: 16px; margin-top: 6px; }
.woven-text { font-size: 18px; line-height: 1.8; }
.dg-wrap { width: max-content; }
.dg-pair { display: flex; gap: 24px; }
.dg svg { display: block; }
@media (min-width: 720px) {
  .woven { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
  .dg svg { width: 154px; height: 154px; }
  .dg-pair { gap: 32px; }
}
.dg-on { fill: var(--accent); }
.dg-off { fill: #e4e4e4; }
.dg-cap { margin-top: 6px; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.dg-key { font-size: 14px; color: var(--sub); margin-top: 4px; text-align: center; }

/* 比べる相手（横棒 3 本） */
.cmp { margin-top: 1.1em; }
.cmp-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.cb { list-style: none; margin-top: 6px; border-top: 1px solid var(--text); }
.cb li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 4.2em; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.cb-bar { display: block; width: 100%; height: 8px; }
.cb-you .cb-name { font-weight: 700; }
.cb-val { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-you .cb-val { font-weight: 700; }


.days { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-top: 1.5em; padding-top: 10px; border-top: 1px solid var(--rule); }
.days p { margin: 0; }
.days b { margin-left: 10px; font-size: 18px; font-variant-numeric: tabular-nums; }
.data-by { margin-top: 1em; font-size: 14px; color: var(--sub); line-height: 1.7; }
.island-data { min-height: 1px; }

/* 次にできること → PR 1 品 */
.steps { list-style: none; counter-reset: step; border-top: 1px solid var(--text); max-width: 40em; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2em 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); line-height: 1.6; }
.steps li::before { content: counter(step); grid-row: span 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.steps li > b { display: block; }
.steps li > span, .steps li > a { font-size: 15px; }
.steps .pr { grid-column: 2; margin: 12px 0 2px; border-bottom: 0; padding-bottom: 4px; }
.pr .pr-why, .pr .pr-sup { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.pr-why span { display: block; color: var(--sub); }
.pr .pr-sup { color: var(--sub); }
.pr .pr-kit { margin: 8px 0 0; font-size: 14px; line-height: 1.6; font-weight: 700; }
.pr-notice { font-size: 14px; color: var(--text); }
h1 + .pr-notice { margin: -8px 0 12px; }
.pr { margin: 1.3em 0; padding: 8px 0 12px; border-top: 2px solid var(--text); border-bottom: 1px solid var(--rule); max-width: 40em; line-height: 1.6; }
.pr-head { position: relative; display: flex; align-items: center; gap: 4px; }
.pr .pr-label { margin: 0; font-size: var(--fs-body); font-weight: 400; color: var(--text); }
.pr .pr-label b { font-weight: 700; }
.pr-body { margin-top: 8px; }   /* 商品画像は出さない（今の販売品と一致する許諾済みの画像が無い） */
.pr .pr-name { margin: 0; font-weight: 700; }
.pr .pr-facts { margin: 2px 0 10px; font-size: 14px; color: var(--sub); }
.prose .pr a.btn-primary { color: #fff; }
/* 記事・成分ページの「関連する商品」1 品（病気ページと同じ PR 枠に見出しを足す。計測ピクセルは読み込ませ、場所は取らない） */
.pr-title { font-size: var(--fs-small); font-weight: 700; margin-bottom: 4px; }
.article > .pr { margin-top: 2em; }
.affiliate_choice { position: relative; }
.affiliate_choice > img { position: absolute; left: 0; bottom: 0; }
.facts { margin: 0; font-size: 15px; line-height: 1.6; }
.facts div { display: flex; gap: 1em; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.facts div:first-child { border-top: 1px solid var(--rule); }
.facts dt { color: var(--sub); width: 7em; flex: none; }
.facts dd { margin: 0; }

.source { margin-top: 1.6em; }
.source h3 { font-size: 16px; }
.source p { margin-top: 0.5em; font-size: 15px; line-height: 1.8; }
.cite { margin-top: 1em; font-size: 15px; line-height: 1.8; }
.cite summary { color: var(--link); cursor: pointer; }
.cite summary .cite-h { display: inline; font-size: 15px; font-weight: 700; margin: 0; }
.cite p { margin-top: 0.6em; }

/* 一覧（枠なし。余白で区切る） */
.entries { list-style: none; }
.entry { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.entry-thumb { flex: none; width: 96px; }
.entry-thumb img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 768px) { .entry-thumb { width: 104px; } .entries-small .entry-thumb { width: 80px; } }
.entries-small .entry-thumb { width: 80px; }
.entry-h { font-size: inherit; line-height: 1.55; font-feature-settings: normal; }
.entry-title { font-weight: 700; font-size: 16px; line-height: 1.55; }
@media (min-width: 768px) { .entry-title { font-size: 17px; } }
.entries-small .entry-title, .popular-first .entry-title { font-size: 15px; }
.entry .meta { margin-top: 2px; }

.category-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
@media (min-width: 768px) { .category-list { grid-template-columns: repeat(3, 1fr); } }
.category-list li { padding: 5px 0; border-bottom: 1px solid var(--rule); }

/* サイドバー */
.sidebar { margin-top: 2em; }
@media (min-width: 1024px) { .sidebar { margin-top: 0; } }
.side-title { font-size: 18px; margin-bottom: 0.6em; }
.popular-first img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.popular-first .entry-title { display: block; margin-top: 8px; }
.popular-first .meta { margin-top: 4px; }


/* 人 */
.person { margin-top: 2em; }
.person-card { display: flex; gap: 16px; align-items: flex-start; }
.person-card > a { flex: none; }
.avatar { border-radius: 50%; flex: none; width: 64px; height: 64px; object-fit: cover; }
.person-name { font-weight: 700; }
.person-profile { margin-top: 0.5em; font-size: 15px; line-height: 1.8; }
.supervisor-comment { margin-top: 2em; line-height: var(--lh-body); max-width: 40em; }
.supervisor-comment .meta { margin-top: 0.6em; }

/* タグ・共有・ボタン */
.tags { margin-top: 1.3em; font-size: 15px; line-height: 1.9; display: flex; flex-wrap: wrap; gap: 0 0.9em; }
.tags a { white-space: nowrap; }
.share { margin-top: 1em; }
.share-label { font-size: var(--fs-small); color: var(--sub); }
.share ul { list-style: none; display: flex; gap: 8px; margin-top: 6px; }
.btn {
  display: inline-block; padding: 6px 16px; border: 1px solid var(--text); border-radius: 2px;
  background: #fff; color: var(--text); text-decoration: none; font-size: 15px; line-height: 1.5;
}
.btn:visited { color: var(--text); }

/* フッター */
.site-footer { margin-top: 40px; border-top: 1px solid var(--rule); padding: 20px 0 16px; font-size: var(--fs-small); }
.footer-cols { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer-cols { grid-template-columns: 2fr 1.4fr 1fr; gap: 40px; } }
.footer-title { font-size: 15px; margin-bottom: 0.5em; }
.footer-title + .tags, .site-footer .tags { margin-top: 0; font-size: var(--fs-small); }
.footer-list { list-style: none; line-height: 1.6; }
.footer-list li { margin-top: 0.3em; }
.footer-list + .footer-title { margin-top: 1em; }
.ad-policy { margin-top: 16px; color: var(--text); }
.copyright { margin-top: 8px; color: var(--sub); font-size: 12px; }
@media (min-width: 720px) {
  .rank-row { grid-template-columns: 1.6em 15em minmax(0, 1fr) 4.2em 69px 0.8em; grid-template-areas: "no name bar val spark go"; padding: 7px 0; }
  .rank-plain .rank-row { grid-template-columns: 15em minmax(0, 1fr) 4.2em 69px 0.8em; grid-template-areas: "name bar val spark go"; }
  .rank-head { grid-template-columns: 1.6em 15em minmax(0, 1fr) 4.2em 69px 0.8em; }
  .rank-head.rank-plain { grid-template-columns: 15em minmax(0, 1fr) 4.2em 69px 0.8em; }
  .rank-no { align-self: center; }
  .rank-head { display: grid; }
  .spk { display: block; }
  .db-row { grid-template-columns: 15em minmax(0, 1fr) 6.6em 0.8em; grid-template-areas: "name plot val go"; align-items: center; padding: 6px 0; }
  .db-first .db-row { padding-top: 26px; }
  .db-first .db-plot { margin-top: 0; }
  .db-plot { align-self: center; }
  .db-val { align-self: center; }
  .db-axis { padding-left: calc(15em + 14px); }
}
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- 一覧・検索・病気データ一覧（docs/design/mock/style.css から） */
.page-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 20px; position: relative; }
.page-head .info { margin-top: 4px; }
.section-head { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.list-count { margin-bottom: 4px; }
.empty { margin-top: 0.8em; padding: 1em 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); color: var(--sub); }
.pagination { margin-top: 1em; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.pager { display: flex; gap: 4px; }
.pagination a, .pagination span { display: block; min-width: 40px; padding: 8px 10px; text-align: center; font-variant-numeric: tabular-nums; border-bottom: 2px solid transparent; }
.pagination a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; border-bottom-color: var(--text); }
.search-form { margin-top: 8px; max-width: 34em; }
.search-label { display: block; font-size: var(--fs-small); color: var(--sub); margin-bottom: 4px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; min-width: 0; }
input[type="search"], input[type="text"], input[type="email"], textarea, select {
  font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1px solid var(--sub); border-radius: 2px; padding: 7px 10px; max-width: 100%; }
textarea { width: 100%; min-height: 10em; line-height: 1.7; }
button.btn { font: inherit; font-size: 15px; cursor: pointer; }
.tags.tags-first { margin-top: 0; }
.category-list-wide { grid-template-columns: 1fr; }
@media (min-width: 768px) { .category-list-wide { grid-template-columns: repeat(2, 1fr); } }
.tree { list-style: none; }
.tree-mid > li { border-bottom: 1px solid var(--rule); }
.tree-mid > li:first-child { border-top: 1px solid var(--rule); }
.tree-mid summary { display: flex; gap: 0.6em; padding: 12px 0; cursor: pointer; list-style: none; }
.tree-mid summary::-webkit-details-marker { display: none; }
.tree-mid summary .sum-title { font-weight: 700; }
.tree-mid summary .meta { flex: none; margin-left: auto; }
.tree-mid { margin-top: 1em; }
/* 開くことが分かる印（開くと下を向く） */
.tree-mid summary::after { content: "▸"; flex: none; width: 1em; color: var(--sub); text-align: center; }
.tree-mid details[open] > summary::after { transform: rotate(90deg); }
.tree-mid details[open] summary { padding-bottom: 6px; }
.tree-leaf { padding: 12px 0; }
.tree-three { list-style: none; margin-bottom: 12px; }
.tree-three > li { padding: 6px 0; line-height: 1.6; }
.tree-four { list-style: none; padding-left: 1.5em; font-size: 15px; }
.tree-four li { padding-top: 4px; }
.tree-four summary { cursor: pointer; }
.warn { color: var(--warn); font-size: var(--fs-small); margin-top: 1.2em; }
.link-list { list-style: none; line-height: 1.6; }
.link-list li { padding: 6px 0; }
@media (min-width: 768px) { .link-list-cols { columns: 2; column-gap: 32px; } .link-list-cols li { break-inside: avoid; } }
.results { list-style: none; }
.result { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.result:first-child { border-top: 1px solid var(--rule); }
.result-text { margin-top: 4px; font-size: var(--fs-small); color: var(--sub); line-height: 1.7; max-width: 40em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.list-count { margin-bottom: 8px; }
.result .tags { margin-top: 4px; font-size: var(--fs-small); }
.writers { list-style: none; }
.writer { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.writer:first-child { border-top: 1px solid var(--rule); }
.writer-profile { margin-top: 4px; font-size: 15px; line-height: 1.7; }
.writer-text { margin-top: 1em; max-width: 40em; line-height: var(--lh-body); }
.writer-head { display: flex; gap: 16px; align-items: center; margin-top: 8px; }
.writer-facts { flex: 1; min-width: 0; font-size: 15px; line-height: 1.6; }
.fact { display: flex; gap: 1em; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.fact:first-child { border-top: 1px solid var(--rule); }
.facts-h { flex: none; width: 7em; font-size: 15px; font-weight: 400; color: var(--sub); line-height: 1.6; }
.more-list { margin-top: 0.8em; }
.more-list summary { color: var(--link); cursor: pointer; font-size: 15px; padding: 6px 0; }
.legal { max-width: 40em; line-height: var(--lh-body); }
.legal > h1 { margin-bottom: 4px; }
.legal h2 { font-size: var(--fs-h3); margin-top: 2em; }
.legal h3 { font-size: 17px; margin-top: 1.6em; }
.legal p, .legal ol, .legal ul { margin-top: 0.8em; }
.legal ol, .legal ul { padding-left: 1.6em; }
.legal li + li { margin-top: 0.3em; }
.legal .legal-sub { margin-top: 0.3em; list-style: none; counter-reset: sub; padding-left: 2.4em; }
.legal-sub > li { counter-increment: sub; position: relative; }
.legal-sub > li::before { content: "(" counter(sub) ")"; position: absolute; left: -2.4em; font-variant-numeric: tabular-nums; }
.form { max-width: 34em; }
.field { margin-top: 1.4em; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.req { margin-left: 0.6em; font-weight: 400; font-size: 13px; color: var(--warn); }
.errorlist { list-style: none; color: var(--warn); font-size: var(--fs-small); margin-top: 4px; }
.form-note { margin-top: 1.6em; font-size: var(--fs-small); color: var(--sub); }
.form-note p { margin: 0; padding-top: 3px; }
.form input[type="text"], .form input[type="email"] { width: 100%; }
.info-pop .info-h { font-size: 14px; line-height: 1.7; }
.info-pop p + .info-h, .info-pop .info-h + p { margin-top: 4px; }
.contact-result h1 { margin-bottom: 4px; }
.form .btn-primary { margin-top: 12px; width: 100%; }
@media (min-width: 768px) { .form .btn-primary { width: auto; } }
.done-text { margin-top: 0.5em; line-height: 1.9; }
.error-page { max-width: 34em; padding: 24px 0 8px; }
.error-page .search-form { margin-top: 1.6em; }
.error-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.5em; margin-top: 1.2em; }

/* ---------------------------------------------------------------- 本文ブロック（WP3 の templates/blocks の class） */
.prose h2[id], .prose h3[id] { scroll-margin-top: 16px; }
.prose .rich-text > :first-child { margin-top: 1.2em; }
.prose table { border-collapse: collapse; font-size: 15px; line-height: 1.6; margin-top: 1.2em; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 6px 10px; text-align: start; vertical-align: top; }
.table-wrap { overflow-x: auto; }
.table-wrap caption { caption-side: top; text-align: start; font-size: var(--fs-small); color: var(--sub); padding-bottom: 4px; }
mark.marker { background: none; color: inherit; }
.box-text { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 0.6em 0 0.7em; margin-top: 1.1em; }
.box-text-emphasis { border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.box-text .box-body > :first-child { margin-top: 0.4em; }
.prose .box-text ul, .prose .box-text ol { margin-top: 0.5em; }
.quote-text { margin: 1.6em 0 0; }
.quote-text blockquote { margin: 0; padding: 0 0 0 1em; border-left: 3px solid var(--mark); color: var(--text); }
.quote-text blockquote p { margin: 0; }
.source-text { margin-top: 6px; font-size: var(--fs-small); color: var(--sub); line-height: 1.6; }
.block-body_picture { margin: 1.6em 0 0; }
.block-body_picture img { display: block; }
.link-card { margin-top: 1.4em; padding: 10px 0 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.prose .link-card p { margin: 0; }
.link-capture { font-size: var(--fs-small); color: var(--sub); }
.link-card-body { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; }
.link-card-body img { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: cover; }
.link-card-title { font-weight: 700; }
.prose .link-card-intro { font-size: var(--fs-small); color: var(--sub); }
.link-card .button, .supplement .button { display: inline-block; margin-top: 6px; font-size: var(--fs-small); }
.supplement { display: flex; gap: 14px; align-items: flex-start; margin-top: 1.4em; padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.supplement img { flex: none; width: 96px; }
.prose .supplement p { margin: 0; }
.supplement-name { font-weight: 700; }
.block-embed { margin-top: 1.2em; max-width: 100%; overflow: hidden; }
.block-embed iframe { max-width: 100%; }
.refs { padding-left: 1.5em; font-size: 15px; line-height: 1.7; }

/* ---------------------------------------------------------------- 読者属性のダイアログ（島 demographics） */
.demo-dialog { border: 1px solid var(--text); border-radius: 0; padding: 20px 20px 16px; max-width: min(360px, calc(100vw - 32px)); color: var(--text); }
.demo-dialog::backdrop { background: rgb(0 0 0 / 0.35); }
.demo-dialog h2 { font-size: 18px; }
.demo-dialog fieldset { border: 0; padding: 0; margin: 14px 0 0; }
.demo-dialog legend { font-size: var(--fs-small); color: var(--sub); padding: 0; }
.demo-dialog .opts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.demo-dialog .acts { display: flex; gap: 10px; margin-top: 18px; }
.demo-link { font: inherit; font-size: 15px; min-height: 24px; padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* 現行の一覧の印（●□■）。文字は残し、小さく薄く出す */
.mk { color: var(--sub); font-size: 0.8em; margin-right: 0.3em; }
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.tag-list a::before { content: "#"; }
.entry-body .tags { margin-top: 4px; font-size: 13px; line-height: 1.7; }
/* 一覧の行のタグは 1 行だけ見せる。押せる高さは 24px（WCAG 2.2 の 2.5.8） */
.entry-body .tags-line { height: 24px; overflow: hidden; line-height: 24px; }
.tags-line a { display: inline-block; min-height: 24px; }
.tags-line:focus-within { height: auto; overflow: visible; }