.tech-page {
  --t-panel: #0b1422;  --t-panel-2: #0f1b2e;  --t-ink: #f2f5f8;  --t-ink-2: #cdd5df;  --t-ink-3: #8d99a8;  --t-accent: var(--green-400);
  --t-rule: rgba(255, 255, 255, 0.12);
  --t-edge: rgba(74, 222, 128, 0.18);
}

.tech {
  padding: 6.5rem 1rem 5rem;
  max-width: 56rem;
  margin-inline: auto;
  color: var(--t-ink-2);
  font-size: clamp(0.9rem, 1.6vw, 0.98rem);
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.tech section { padding-block: 0; }

.tech p { margin: 0 0 1.1em; }
.tech strong { color: var(--t-ink); font-weight: 700; }
.tech a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.tech a:hover { color: var(--white); }

.tech .nw { white-space: nowrap; }
.doc-lang { text-decoration: none; }

.tech-crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: 0.78rem;
  color: var(--t-ink-3);
}
.tech-crumbs li + li::before { content: "›"; margin-right: 0.4rem; }
.tech-crumbs a { color: var(--t-ink-3); }

.tech .tech-panel {
  background: var(--t-panel);
  border: 1px solid var(--t-edge);
  border-radius: 16px;
  padding: clamp(1.4rem, 4.5vw, 2.75rem);
}
.tech-panel + .tech-panel { margin-top: 2rem; }

.tech-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.75rem;
  margin: 0 0 1.5rem;
}
.tech-head-text { min-width: 0; flex: 1 1 auto; }
.tech-head .tech-kicker { margin-bottom: 0.75rem; }
.tech-head h1 { margin: 0; }
.tech-hero {
  flex: 0 0 15.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #ece9e4;
}
.tech-hero img {
  display: block;
  width: 122%;
  max-width: none;
  height: auto;
  margin: -5% 0 0 -11%;
}
@media (max-width: 640px) {
  .tech-head { flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
  .tech-hero { flex: none; width: 100%; }
}

.tech-kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--t-accent);
  margin: 0 0 0.75rem;
}
.tech h1 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--t-ink);
  margin: 0 0 1.5rem;
}
.tech h1 .h1-sub { display: block; }
.tech h2 {
  font-size: clamp(1.08rem, 2.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--t-ink);
  margin: 0 0 1.25rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--t-accent);
}
.tech h3 {
  font-size: clamp(0.98rem, 2vw, 1.06rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--t-ink);
  margin: 2.25rem 0 0.75rem;
}
.tech h2 + h3 { margin-top: 1.25rem; }

.tech-toc { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--t-rule); }
.tech-toc-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--t-ink-3);
  margin: 0 0 0.5rem;
}
.tech-toc ol { margin: 0; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.9; }
.tech-toc a { color: var(--t-ink-2); text-decoration: none; }
.tech-toc a:hover { color: var(--t-accent); text-decoration: underline; }

.tech [id] { scroll-margin-top: 5.5rem; }

.tech-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 0.88rem;
  line-height: 1.75;
}
.tech-table th,
.tech-table td {
  border: 1px solid var(--t-rule);
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
  text-wrap: balance;
}
.tech-table .tech-num { overflow-wrap: anywhere; }
.tech-table thead th {
  background: var(--t-panel-2);
  color: var(--t-ink);
  font-weight: 700;
}
.tech-table tbody th {
  color: var(--t-ink);
  font-weight: 700;
  white-space: nowrap;
}
.tech-table--spec { table-layout: fixed; }
.tech-table--spec thead th:first-child { width: 38%; }
.tech-table--spec tbody th { background: var(--t-panel-2); }

.tech-note {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--t-ink-3);
}

@media (max-width: 640px) {
  .tech-table--spec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tech-table--spec,
  .tech-table--spec tbody,
  .tech-table--spec tr,
  .tech-table--spec th,
  .tech-table--spec td { display: block; width: 100%; }
  .tech-table--spec tr { border: 1px solid var(--t-rule); border-bottom: 0; }
  .tech-table--spec tr:last-child { border-bottom: 1px solid var(--t-rule); }
  .tech-table--spec tbody th { width: 100%; border: 0; padding-bottom: 0.15rem; white-space: normal; font-size: 0.78rem; }
  .tech-table--spec td { border: 0; padding-top: 0.15rem; }
}

.cmp-wrap {
  margin: 1.5rem 0 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--t-rule);
  background: var(--t-panel-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-wrap:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
.cmp {
  --cmp-ink: var(--t-ink-2);  --cmp-ink-head: var(--t-ink);  --cmp-rule: rgba(255, 255, 255, 0.09);
  --cmp-gray: rgba(255, 255, 255, 0.025);  --cmp-green-bg: rgba(74, 222, 128, 0.07);  --cmp-green-ink: #bbf7d0;  --cmp-green: var(--green-400);  --cmp-sticky: #0f1b2e;  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--cmp-ink);
}
html[lang="en"] .cmp { word-break: normal; }
.cmp th,
.cmp td {
  padding: 0.85rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cmp-rule);
  text-wrap: balance;
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th {
  vertical-align: bottom;
  font-weight: 700;
  color: var(--cmp-ink-head);
  line-height: 1.5;
  padding-top: 1.1rem;
}
.cmp thead th > span { display: block; }
.cmp-ico {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--t-ink-3);
}
.cmp tbody th { font-weight: 700; color: var(--cmp-ink-head); width: 22%; }
.cmp .cmp-item { width: 22%; }
.cmp .cmp-other { background: var(--cmp-gray); width: 25%; }
.cmp .cmp-mv {
  background: var(--cmp-green-bg);
  color: var(--cmp-green-ink);
  font-weight: 600;
  width: 28%;
  box-shadow: inset 1px 0 0 rgba(74, 222, 128, 0.28), inset -1px 0 0 rgba(74, 222, 128, 0.28);
}
.cmp thead .cmp-mv {
  color: var(--cmp-green);
  box-shadow: inset 0 3px 0 var(--cmp-green), inset 1px 0 0 rgba(74, 222, 128, 0.28), inset -1px 0 0 rgba(74, 222, 128, 0.28);
}
.cmp thead .cmp-mv .cmp-ico { color: var(--cmp-green); }
.cmp-check {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  fill: var(--cmp-green);
  stroke: none;
}
.cmp-check path { fill: none; stroke: var(--t-panel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp-hint { display: none; }
@media (max-width: 640px) {
  .cmp-hint { display: block; margin: 0 0 0.25rem; text-align: right; font-size: 0.72rem; color: var(--t-ink-3); }
  .cmp { font-size: 0.82rem; min-width: 0; width: 33rem; table-layout: fixed; }
  .cmp .cmp-item { width: 6rem; }
  .cmp thead .cmp-mv { width: 9.5rem; }
  .cmp thead .cmp-other { width: 8.75rem; }
  html[lang="en"] .cmp { width: 36.5rem; }
  html[lang="en"] .cmp .cmp-item { width: 8.5rem; }
  .cmp th, .cmp td { padding: 0.7rem 0.7rem; }
  .cmp tbody th,
  .cmp .cmp-item {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cmp-sticky);
    box-shadow: 1px 0 0 var(--cmp-rule);
  }
}
@media (min-width: 340px) and (max-width: 352px) {
  html[lang="ja"] .cmp { width: 33.75rem; }
  html[lang="ja"] .cmp thead .cmp-other:last-child { width: 9.5rem; }
  html[lang="ja"] .cmp th:last-child,
  html[lang="ja"] .cmp td:last-child { padding-right: 1.45rem; }
}
@media (max-width: 353px) {
  html[lang="en"] .cmp { width: 35rem; }
  html[lang="en"] .cmp .cmp-item { width: 7.75rem; }
  html[lang="en"] .cmp thead .cmp-mv { width: 9.75rem; }
  html[lang="en"] .cmp thead .cmp-other { width: 9rem; }
  html[lang="en"] .cmp thead .cmp-other:last-child { width: 8.5rem; }
  html[lang="en"] .cmp th:last-child,
  html[lang="en"] .cmp td:last-child { padding-left: 1.45rem; }
}

.tech-steps h3 { margin-top: 1.75rem; }

.tech-list { margin: 0 0 1rem; padding-left: 1.3rem; }
.tech-list li { margin: 0.15rem 0; }

.faq-item { border-top: 1px solid var(--t-rule); }
.faq-item:last-child { border-bottom: 1px solid var(--t-rule); }
.faq-item summary {
  list-style: none;  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 0.25rem;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; flex: 1; }
.faq-item summary::after {
  content: "+";
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border: 1px solid var(--t-edge);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  color: var(--t-accent);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover h3 { color: var(--t-accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; border-radius: 6px; }
.faq-a { padding: 0 0.25rem 1.1rem; }
.faq-a p:last-child { margin-bottom: 0; }

.tech-links { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.tech-links li { padding: 0.6rem 0; border-top: 1px solid var(--t-rule); }
.tech-links li:last-child { border-bottom: 1px solid var(--t-rule); }
.tech-links .tech-link-name { display: block; color: var(--t-ink); font-weight: 700; }
.tech-links a { word-break: break-all; font-family: var(--mono); font-size: 0.82rem; }

.tech-ref h3 { margin-top: 1.75rem; }
.tech-ref p { margin-bottom: 0.3em; }
.tech-ref .tech-ref-title { color: var(--t-ink); }
.tech-ref p + .tech-ref-title { margin-top: 1rem; }
.tech-ref a { word-break: break-all; font-family: var(--mono); font-size: 0.82rem; }

.bio-cards {
  list-style: none;
  margin: 1.5rem 0 0.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.bio-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1rem 0.9rem;
  border: 1px solid var(--t-rule);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  line-height: 1.5;
}
.bio-card--main {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.07);
  box-shadow: inset 0 3px 0 var(--t-accent);
}
.bio-name { font-size: 0.82rem; color: var(--t-ink-2); font-weight: 600; }
.bio-val { font-size: 1.05rem; font-weight: 700; color: var(--t-ink); }
.bio-card--main .bio-val { font-size: 1.2rem; color: var(--t-accent); }
.bio-sub { font-size: 0.82rem; font-weight: 600; color: var(--t-ink-2); white-space: nowrap; }
@media (max-width: 767px) {
  .bio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .bio-card--main { grid-column: 1 / -1; }
  .bio-card { padding: 0.85rem 0.8rem 0.8rem; }
}

.tech-page .copyright { color: var(--gray-400); }

@media print {
  .site-header { position: static; }
  details::details-content { display: block; content-visibility: visible; height: auto; }
}

/* /technology の 3 ページを行き来する */
.adv-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 1rem; font-size: 0.88rem; }
.tech .adv-nav a { color: var(--t-ink-2); text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.tech .adv-nav a:hover { color: var(--t-accent); }
.tech .adv-nav a[aria-current="page"] { color: var(--t-accent); border-bottom-color: var(--t-accent); font-weight: 700; }

/* 文字を大きくしても語が画面の外で切れないように、文字に対して幅が狭いときだけ nowrap を外す（2026-11-02・PC3-57）。
   html が overflow-x:hidden なので、はみ出した分は横に動かせず読めなくなる。100％ の 320px 以上では効かない */
.tech { container-type: inline-size; }
@container (max-width: 17em) {
  .tech .nw, .tech .bio-sub { white-space: normal; }
}
.tech-head-text { max-width: 100%; }
.faq-item summary h3 { min-width: 0; }