/* Design A — Industry (steel wireframe). Tokens & components come from
industry-tokens.css; this sheet is page layout only. */
body { font-family: "Barlow", "Noto Sans JP", system-ui, sans-serif; font-feature-settings: "palt" 1; }
h1, h2, h3, h4, h5, h6, .card-title, .btn { font-family: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif; letter-spacing: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-900); }
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
.muted, .note { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
/* page loader — keeps content hidden until web fonts are ready, so the
fallback-to-webfont swap never shows. See loader.js. */
body.is-loading > :not(.page-loader) { visibility: hidden; }
.page-loader {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
background: var(--color-bg);
}
.page-loader-spinner {
width: 32px; height: 32px;
border: 2px solid var(--color-divider);
border-top-color: var(--color-accent);
border-radius: 50%;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-accent-900); color: var(--color-neutral-100); border-bottom: 1px solid color-mix(in srgb, var(--color-bg) 15%, transparent); }
.header-inner { display: flex; align-items: center; gap: 28px; padding-top: 20px; padding-bottom: 20px; }
.brand { margin-right: auto; display: flex; align-items: center; text-decoration: none; color: inherit; }
/* logo's speech-bubble tail overshoots below the wordmark, pulling the SVG's
own bounding-box center 9/90 of its height below the wordmark/icon's
actual visual center — nudge down to compensate so flex centering looks right */
.brand-logo { display: block; height: 48px; width: auto; transform: translateY(5px); }
.site-nav { display: flex; align-items: center; gap: 22px; font-size: 13px; }
.site-nav a { color: inherit; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--color-accent-300); }
.nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; flex: none; border: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent); background: transparent; padding: 0; cursor: pointer; }
.nav-toggle-bar { width: 18px; height: 2px; background: var(--color-neutral-100); }
/* hero */
.hero { position: relative; min-height: 640px; display: grid; align-items: end; overflow: hidden; scroll-margin-top: 76px; background: var(--color-accent-900); }
/* 画像の右端は中央寄せの .wrap（max-width:1180px）の外側の端からさらに
32px 外に出す（2026-08-27の指示。「リンク」右端→wrap外端→さらに32px右、
と2回の「もう少し右」で段階的に決めた位置）。右端より外は .hero 自体の
単色背景（--color-accent-900）が見える。 */
/* background-size は cover ではなく auto 100%（高さ基準の固定スケール）。
cover だとブラウザ幅を広げた分だけ画像が拡大されてしまう（2026-08-27指摘）。
auto 100% なら拡大されず右端に固定されたまま。箱が画像（1920×1080）より
横長になるほどのウルトラワイドでは左側に下地色が出るが、
下地色 #000516 は画像の左端5px列の平均色（実測）で、境目が見えない。 */
.hero-bg { position: absolute; top: 0; bottom: 0; left: 0; right: max(0px, (100% - 1180px) / 2 - 32px); background: #000516 url("images/hero-key-visual-c.webp") right / auto 100% no-repeat; }
/* scrim も同じ右端。最後の15%で不透明度100%まで持っていき、右端より外の
単色部分と継ぎ目なくつながるようにする。 */
.hero-scrim { position: absolute; top: 0; bottom: 0; left: 0; right: max(0px, (100% - 1180px) / 2 - 32px); pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent-900) 70%, transparent) 0%, color-mix(in srgb, var(--color-accent-900) 48%, transparent) 52%, color-mix(in srgb, var(--color-accent-900) 12%, transparent) 85%, var(--color-accent-900) 100%); }
.hero-inner { position: relative; width: 100%; padding-top: 96px; padding-bottom: 64px; color: var(--color-neutral-100); }
.tag-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero-tag { border-color: var(--color-accent-300); color: var(--color-accent-200); }
.hero h1 { font-size: 60px; line-height: 1.12; margin: 0 0 20px; max-width: 100%; text-wrap: balance; }
.hero-lead { font-size: 17px; max-width: 52ch; color: color-mix(in srgb, var(--color-bg) 82%, transparent); }
.btn-row { display: flex; gap: 10px; margin-top: 26px; }
.btn-primary, .btn-secondary { padding: 11px 22px; }
.hero-btn-2 { color: var(--color-neutral-100); border-color: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.hero-btn-2:hover { color: var(--color-neutral-100); }
.hero-facts { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 20px 60px; margin: 48px 0 0; font-size: 13px; }
.hero-facts dt { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-300); }
.hero-facts dd { margin: 6px 0 0; font-size: 15px; font-weight: 500; }
.hero-facts dd:first-of-type { font-family: "Barlow Condensed", sans-serif; font-size: 19px; }
/* sections */
.section { border-top: 1px solid var(--color-divider); padding: 72px 0; scroll-margin-top: 84px; }
#news { padding: 52px 0; }
.section-tint { background: var(--color-neutral-100); }
.section-invert { background: var(--color-accent-900); color: var(--color-neutral-100); border-top: 0; }
.section-invert .lead { color: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.section-invert .section-eyebrow { color: var(--color-accent-300); }
/* ── 版面（1行あたりの文字数）────────────────────────────
本文の行長は ch ではなく em で指定する。ch は Barlow の "0" の字幅
（15px 時で実測 8.48px）が基準で、全角1文字（同 14.57px）の約58%しかない。
そのため「66文字分」のつもりの 66ch は実際には38文字にしかならない。
1em ≒ 全角1文字なので、em なら指定した数値がそのまま文字数になる。
2026-08-12、ch から em へ移行。移行前の指定と実測値：
.prose 66ch → 38文字 .lead 62ch → 36文字
.tech-lead 48ch → 28文字 .split の見出し列 220px
★元に戻すには、このファイル末尾の「旧設定」ブロックのコメントを外す。 */
:root {
--measure-body: 42em; /* 本文の行長 ＝ 全角42文字 */
--leading-body: 1.8; /* 本文の行間。body 既定の 1.55 は短いラベルや表の
ための値で、1行43文字の連続した本文には詰まりすぎる。行が長いほど行を
たどり直すのに縦の間隔が要るため、本文だけ広げる。 */
--sticky-figure-top: 108px; /* 追従する図の上端。固定ヘッダーの高さ（実測
88px）＋20px の余白。 */
--split-head-width: 260px; /* .split 左の見出し列。見出しの文字が短い
（「研究概要」は実測136px）ため、これ以上広げると見出しと本文が離れて
見える。260px で見出し右端から本文まで164px、本文右の余りが186pxとなり
左右がほぼ釣り合う。最長の「研究開発する暗号技術」は1行（334px）には
収まらず2行になるが、下の text-wrap: balance で5文字＋5文字に割れる。 */
}
.split { display: grid; grid-template-columns: var(--split-head-width) 1fr; gap: 40px; }
/* 見出しが2行になるときの泣き別れ防止。「研究開発する暗号技術」が
9文字＋1文字ではなく5文字＋5文字に割れる。 */
.split .section-head h2 { text-wrap: balance; }
/* balance は文字数だけで割るため「研究開発する暗号技術」は5文字＋5文字に
割れ、動詞「する」の途中で改行されてしまう（2026-08-26、江村さん指摘）。
「する」の2文字だけ改行禁止にし、balanceにはその前後の切れ目から選ばせる。 */
.no-split { white-space: nowrap; }
.section-head .section-eyebrow { display: block; margin: 0 0 6px; color: var(--color-accent-700); font-family: "Barlow Condensed", "Noto Sans JP", system-ui, sans-serif; font-size: 13px; font-weight: 700; }
.section-head h2 { font-size: 34px; margin: 0; }
#news .section-head h2, #link .section-head h2 { font-size: 28px; }
.mb-md { margin-bottom: 40px; }
.mb-lg { margin-bottom: 44px; }
.mt-lg { margin-top: 40px; }
.prose { max-width: var(--measure-body); }
.prose h3 { font-size: 23px; margin: 0 0 12px; }
.prose p, .lead { color: var(--color-neutral-800); line-height: var(--leading-body); }
.lead { max-width: var(--measure-body); margin: 0; }
/* news */
.news-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 1px; background: var(--color-divider); }
.news-row { background: var(--color-bg); display: grid; grid-template-columns: 110px 96px 1fr; gap: 18px; align-items: baseline; padding: 15px 2px; }
.news-row time { font-family: "Barlow Condensed", sans-serif; font-size: 16px; color: var(--color-neutral-700); }
.news-row .tag { justify-self: start; }
.news-row a { font-size: 15px; text-decoration: none; }
/* figures */
.figure { margin: 0; padding: 0; background: var(--color-bg); }
.figure.on-dark { background: color-mix(in srgb, var(--color-bg) 6%, transparent); border-color: color-mix(in srgb, var(--color-bg) 22%, transparent); }
.figure-box { aspect-ratio: 16 / 6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 13px; color: var(--color-neutral-600); }
.figure-img { display: block; width: 100%; height: auto; }
.figure-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.figure-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.section-invert .figure-box { color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.figure-box.ratio-4-3 { aspect-ratio: 4 / 3; }
.figcaption { font-size: 11px; margin-top: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.section-invert .figcaption { color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
/* cards */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.card { padding: 22px; }
.card-title { font-size: 19px; }
/* technology */
.tech-list { display: grid; gap: 28px; }
/* column-gap keeps the original 44px between the text and the figure; row-gap
is smaller because the only row boundary is the one above .tech-detail,
which reads as part of the same block rather than a separate section. */
.tech { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; row-gap: 22px; align-items: start; padding: 34px 0; border-top: 1px solid var(--color-divider); }
.tech-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.tech-no { font-family: "Barlow Condensed", sans-serif; font-size: 40px; line-height: 1; color: var(--color-accent-400); }
.tech-title h3 { font-size: 28px; margin: 0; }
.tech-lead { font-size: 15px; line-height: var(--leading-body); color: var(--color-neutral-800); max-width: var(--measure-body); }
.spec { margin: 24px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14px; }
.spec dt { font-size: 12px; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.spec dd { margin: 0; }
/* tech detail accordion — the panel opens directly under its toggle, inside
the article's text column, so the revealed text starts where the reader is
looking.（全幅の独立行に置くと、図の高さぶん下に開くため、押した位置から
175px 離れたところに本文が現れて視線が飛ぶ。2026-08-12 に変更。）
本文が「図に示すシステムでは」と図を参照するので、図のカラムは sticky に
して読んでいる間ずっと画面に残す。sticky が動く余地を持つのは、.tech の
align-items: start により図がグリッド領域（＝背の高い左カラムと同じ高さ）
より低くなるため。stretch にすると領域を埋めきって動かなくなる。
Wiring is in accordion.js. */
.tech-detail-toggle { margin-top: 20px; }
/* 開閉マークは、図やカードの四隅の登録マーク（industry-tokens.css の .corner）
と同じ作り — 1px の線2本の十字。文字の「＋」を content で出すと字形が本文
フォント由来になり、線の太さが四隅の十字と揃わないうえ、content は遷移
できないのでアニメーションもできない。開いた状態では縦棒を90°回して横棒に
重ね、「－」に見せる（回転は animations.css）。 */
.toggle-mark { position: relative; width: 11px; height: 11px; flex: none; }
.toggle-mark::before, .toggle-mark::after { content: ""; position: absolute; background: currentColor; }
.toggle-mark::before { left: 5px; top: 0; width: 1px; height: 100%; }
.toggle-mark::after { top: 5px; left: 0; width: 100%; height: 1px; }
.tech-detail-toggle[aria-expanded="true"] .toggle-mark::before { transform: rotate(90deg); }
/* 開閉は display ではなく 0fr→1fr のグリッド行で表現する。display:none だと
高さを遷移できず、max-height だと中身の実高（700〜1200px）を上回る決め打ちの
値が要るため、閉じ始めに無反応な間が出る。0fr/1fr なら中身の自然な高さへ
そのまま伸縮する。遷移そのものは animations.css 側。
閉じている間は visibility:hidden にして、支援技術や検索・選択の対象から
外す（overflow:hidden で見えないだけの状態にしない）。 */
.tech-detail { display: grid; grid-template-rows: 0fr; }
.tech-detail.is-open { grid-template-rows: 1fr; }
.tech-detail > .tech-detail-body { visibility: hidden; overflow: hidden; min-height: 0; }
.tech-detail.is-open > .tech-detail-body { visibility: visible; }
.tech-figure { position: sticky; top: var(--sticky-figure-top); }
.tech-detail-body {
/* 上の余白は最初の段落の margin で取る（下記）。ここに padding を置くと
border-box でも padding は圧縮されないため、閉じた状態で 20px 残る。 */
/* 本文の行長は左カラムの幅で決まる（実測36文字）ので
--measure-body（42文字）による上限は効かない。両方とも快適な35〜45文字の
範囲に収まるため、ここでは指定しない。 */
font-size: 15px; line-height: var(--leading-body);
color: var(--color-neutral-800);
}
.tech-detail-body p { margin: 0 0 1.1em; }
/* overflow:hidden が BFC を作るので、この margin は親をすり抜けず、
閉じたとき（行の高さ 0）にちゃんとクリップされる。 */
.tech-detail-body p:first-child { margin-top: 20px; }
.tech-detail-body p:last-child { margin-bottom: 0; }
/* groups — each group is a full-width row of info, kept distinct from the
research section's 3-column card grid above. Photos are optional (group
photography turned out to be impractical, 2026-08-24) — a card renders
fine as text-only. To add one later, put back
as the article's first child; .group-card's flex
layout and the .group-card-figure/.figure-box rules below already handle
the photo+info row when that column is present. */
.group-rows { display: grid; gap: 20px; }
.group-card { padding: 24px; border-color: color-mix(in srgb, var(--color-bg) 26%, transparent); display: flex; gap: 28px; align-items: flex-start; }
.group-card-figure { width: 160px; flex: none; }
.group-card-figure .figure-box { aspect-ratio: 1 / 1; font-size: 12px; background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200); }
.group-card-figure .figure-box.has-photo { padding: 0; background: none; }
.group-card-figure .figure-box.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.group-card-body { display: flex; flex-direction: column; gap: 14px; flex: 1; min-width: 0; }
.group-card-body h3 { font-size: 22px; margin: 0; }
/* グループ名の横に併記する役割（江村さん依頼 2026-09-02）。本文・図4の
表現に揃えたもの。見出しより一段落として、下の .group-role より
一段明るくすることで、h3 → 役割 → 一文の順に読ませる。
nowrap は「（医療応用システム開発）」が途中で折れないようにするため。 */
.group-card-body h3 .group-scope { font-size: 15px; font-weight: 400; color: color-mix(in srgb, var(--color-bg) 80%, transparent); white-space: nowrap; margin-left: 8px; }
.group-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-300); }
.group-role { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-bg) 74%, transparent); }
.member-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; }
.member-list li { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--color-bg) 16%, transparent); }
.member-name { font-size: 15px; font-weight: 500; }
.member-title { font-size: 12px; color: color-mix(in srgb, var(--color-bg) 62%, transparent); }
/* 一覧の末尾に付ける「ほか」— 実名の並びに紛れないよう member-name より控えめな
色・太さにする（江村さんの「不自然に見えないか」という懸念への対応）。 */
.member-more { font-size: 14px; font-weight: 400; color: color-mix(in srgb, var(--color-bg) 62%, transparent); }
.group-card > .corner, .figure.on-dark > .corner { color: color-mix(in srgb, var(--color-bg) 55%, transparent); }
/* publications */
.pub-group + .pub-group { margin-top: 40px; }
.pub-group-title { font-size: 18px; margin: 0 0 14px; }
.col-year { width: 88px; }
.col-venue { width: 280px; }
.table td:nth-child(1) { font-family: "Barlow Condensed", sans-serif; }
.note { font-size: 12px; margin-top: 24px; }
/* DOI/URL付きの論文タイトル末尾に付く外部リンクアイコン。四隅の登録マーク
（.corner）やアコーディオンの開閉マーク（.toggle-mark）と同じく、塗りのない
線画（stroke=currentColor）で揃える。 */
.pub-link { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.pub-link:hover, .pub-link:focus-visible { color: var(--color-accent-700); }
.pub-link svg { display: block; width: 14px; height: 14px; }
/* body 先頭に置いた 置き場。display: none ではなく版面から抜く方法を
とっているのは、スプライトを display: none にすると