/* /achieve だけで読む追加分。土台は confidence-tech.css */
.achieve-sub { margin: 0.6rem 0 0; font-size: 1rem; color: var(--t-ink-2); }
.cmp-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp.cmp--two .cmp-item { width: 22%; }
.cmp.cmp--two .cmp-mv,
.cmp.cmp--two .cmp-other { width: 39%; }
.cmp.cmp--two td strong { font-weight: 700; color: var(--cmp-green); }
.cmp tbody .cmp-group th {
  position: static;
  width: auto;
  padding: 0.85rem 0.9rem 0.45rem;
  background: transparent;
  box-shadow: none;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--t-accent);
  border-bottom: 1px solid var(--cmp-rule);
  white-space: nowrap;
}
.cmp.cmp--two tbody + tbody .cmp-group th { border-top: 1px solid var(--cmp-rule); }
@media (max-width: 760px) {
  .cmp.cmp--two { width: 29.25rem; }
  .cmp.cmp--two .cmp-item { width: 8.25rem; }
  .cmp.cmp--two thead .cmp-mv { width: 10.75rem; }
  .cmp.cmp--two thead .cmp-other { width: 10.25rem; }
}
/* 固定した左の列の右に見える幅へ、データの列の文字を収める。最後の列が右端で隠れず、どの列も全部の行を同時に読める（2026-11-02・PC3-38）。
   見える幅＝枠の幅（画面の幅 − 81px）− 左の列。列の文字の幅（＋最後の列は右の余白）をこれ以下にする。
   語が割れないのに要る幅（0.82rem のとき）：左の列 107.4px・Achieve の列 118.1px・最後の列 105px */
@media (max-width: 374px) {
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) { width: 25.45rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item { width: 7.6rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-mv { width: 9.1rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-other { width: 8.75rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item,
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) th[scope="row"] { padding-inline: 0.4rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-mv { padding-inline: 0.5rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-other { padding-inline: 0.5rem 0.4rem; }
  /* 成分の 2 行：数値と「（当社調査）」は 1 行に入らない。折り返しに任せると「65g／」や行末の「（」で切れる */
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) tbody:last-of-type .cmp-mv strong { display: block; }
  /* WebKit が「（」の直後で折り返さないように（scripts/budoux-wbr.py が包む） */
  .cmp-keep { white-space: nowrap; }
}
@media (max-width: 339px) {
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) { width: 23.075rem; font-size: 0.78rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item { width: 7.15rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-mv { width: 8.05rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-other { width: 7.875rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item,
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) th[scope="row"] { padding-inline: 0.35rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-mv { padding-inline: 0.4rem; }
  html[lang="ja"] .cmp.cmp--two:not(.cmp--nutr) .cmp-other { padding-inline: 0.4rem 0.35rem; }
}
/* 英語版の比較表：同じ考え方で、英語のいちばん長い語（左の列 microorganisms・データの列 photosynthesis）が割れない幅にする（2026-11-03）。
   760px 以下は、枠が 24.4rem より広ければ枠いっぱい（横に動かさずに全部見える）、狭ければ 24.4rem で、どの列も見える幅に収まる */
@media (max-width: 760px) {
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) { width: max(24.4rem, 100%); }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item { width: 32.8%; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-mv,
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-other { width: 33.6%; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-other { padding-inline: 0.7rem 0.6rem; }
}
@media (max-width: 339px) {
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) { width: 22.7rem; font-size: 0.78rem; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item { width: 7.1rem; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-mv,
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) thead .cmp-other { width: 7.8rem; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-item,
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) th[scope="row"] { padding-inline: 0.4rem; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-mv { padding-inline: 0.5rem; }
  html[lang="en"] .cmp.cmp--two:not(.cmp--nutr) .cmp-other { padding-inline: 0.5rem 0.4rem; }
}
.tech-fig { margin: 1.25rem 0; }
.tech-fig img { display: block; width: 100%; height: auto; border-radius: 8px; }
.tech-fig figcaption { margin-top: 0.5rem; font-size: 0.8rem; line-height: 1.6; color: var(--t-ink-3); }
.tech-figs { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0; }
.tech-figs .tech-fig { margin: 0; }
@media (min-width: 761px) { .tech-figs { grid-template-columns: 1fr 1fr; } }
.sdg-list { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.sdg-list li { padding: 0.65rem 0; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.sdg-list strong { display: block; color: var(--t-ink); font-weight: 700; }
/* 各項目の左に国連の公式マーク（2026-11-03 所有者） */
.sdg-list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 0.9rem; align-items: center; }
.sdg-list img { display: block; width: 3.5rem; height: 3.5rem; }
.cmp.cmp--nutr { width: 100%; }
.cmp.cmp--nutr .cmp-item,
.cmp.cmp--nutr .cmp-mv { width: 50%; }
@media (max-width: 760px) {
  .cmp.cmp--nutr, html[lang="ja"] .cmp.cmp--nutr { width: 100%; table-layout: auto; }
  /* thead .cmp-mv の 10.75rem が 50% に勝つと左の列が細くなり、語が割れる（2026-11-02・PC3-38） */
  .cmp.cmp--nutr .cmp-item, .cmp.cmp--nutr thead .cmp-mv { width: auto; }
}
@media (max-width: 360px) {
  html[lang="ja"] .cmp.cmp--nutr th, html[lang="ja"] .cmp.cmp--nutr td,
  html[lang="ja"] .cmp.cmp--nutr th:last-child, html[lang="ja"] .cmp.cmp--nutr td:last-child { padding-inline: 0.45rem; }
}
/* 文字を大きくしたとき、写真の並びの幅が中身に押し広げられないように（2026-11-02・PC3-57） */
.tech-figs .tech-fig { min-width: 0; }