/* @import は他のあらゆる規則より前に置く必要がある（後ろに置くと無視される）。 */
@import url("/brand/tokens.css");

/* ============================================================================
   hyphen technologies — デザインシステム（明るい面 / v2）
   ----------------------------------------------------------------------------
   デザイン言語は Sony CSL の実サイトを computed style で実測して採寸した。
   白と淡いグレーの帯を交互に敷き、白い浮遊型の丸いナビを載せ、画像を主役にした
   大きなカードを並べる。見出しは 35px 前後までに抑え、本文は Noto Sans JP の
   16px / 行間 1.8 / 字間 0 とし、差し色は青 1 色に絞る。

   色・級数・余白・角丸・影・動きの値は brand/tokens.css が正典であり、
   このファイルに生の 16 進数や生の px を書かない。第三者の文章・画像・書体は
   使っていない（Sony の SST W55 は Interdisplay と Noto Sans JP で代替した）。

   接頭辞 .csl が付く規則はトップページ（index.html）専用、素の規則は共通。

   ---- 画面の区切り（breakpoint）は 3 段だけ使う ----
   もとは 560 / 600 / 640 / 720 / 760 / 820 / 900 / 1000px の 8 種類が 18 か所に
   散っていた。種類が増えるほど、どの幅で何が変わるのかを追えなくなり、直す時に
   取りこぼす。2026 年 8 月 17 日に次の 3 段へ寄せた。新しい値を足さない。

     1000px … 3 列を 2 列へ落とす
      820px … 横並びをやめて縦積みにし、ナビを畳む
      600px … 1 列にする

   値そのものはトークンにできない。CSS の @media は var() を読まないためである。
   ========================================================================== */

/* @font-face の記述子にはカスタムプロパティ（var()）を書けないため、
   font-weight だけは数値のまま置く。

   woff2 を先に、ttf を後に置く。読める方が使われるので、woff2 を読める閲覧環境は
   woff2 だけを取りに行き、ttf は落ちてこない。woff2 は欧文（ラテン・ギリシャ・
   記号）だけに絞ってある。2 つ合わせて 818KB → 88KB になった。和文はこの書体に
   元から入っておらず、Noto Sans JP が受け持つ。文字を足す時は範囲を確かめる
   （glyphcheck.mjs で 16 ページ 42,913 文字を走査したところ、範囲から外れたのは
   β の 22 回だけだったのでギリシャ文字も入れた）。

   なお名刺（materials/card/）は ttf のまま据え置く。woff2 を素にすると Chrome が
   PDF へ和文を Type3 で埋め、印刷所の RIP に断られる。2026-08-14 に実測済み。 */
@font-face { font-family:'Interdisplay'; src:url(/brand/fonts/inter-display-light.woff2) format('woff2'),
       url(/brand/fonts/inter-display-light.ttf) format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Interdisplay'; src:url(/brand/fonts/inter-display-medium.woff2) format('woff2'),
       url(/brand/fonts/inter-display-medium.ttf) format('truetype'); font-weight:500; font-display:swap; }
/* 700 は 2026-08-18 に足した。それまで 300 と 500 しか配信していないのに
   --sans へ --fw-bold（700）を当てている箇所が多数あり、閲覧する機械が 500 を
   太らせて描いていた（合成太字）。字形が本来のものではなく、線の太りかたも
   一定にならない。素は既存 2 つと同じ Inter v4.0（Version 4.000）の
   InterDisplay-Bold で、切り出す文字の範囲も既存の woff2 と同一の 401 字に
   揃えてある。 */
@font-face { font-family:'Interdisplay'; src:url(/brand/fonts/inter-display-bold.woff2) format('woff2'),
       url(/brand/fonts/inter-display-bold.ttf) format('truetype'); font-weight:700; font-display:swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; word-break:keep-all; overflow-wrap:break-word; line-break:strict; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--jp); font-size:var(--fs-base); line-height:var(--lh-body); letter-spacing:var(--ls-0);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* 釦・入力欄は既定では body の書体を継がず、ブラウザが Arial を当てる。
   ここで継がせないと、同じ画面の中で釦だけ別の書体になる（2026-08-18 実測）。
   字の大きさと太さは各部品が自分で決めるので、書体だけを継がせる。 */
button, input, select, textarea { font-family:inherit; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
strong { font-weight:var(--fw-bold); color:var(--ink); }
::selection { background:var(--action); color:var(--on-dark); }

.wrap { max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }

/* ---- eyebrow (blue label with short dash) ---- */
.eyebrow { display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-5); color:var(--action); }
.eyebrow::before { content:''; width:24px; height:2px; background:currentColor; border-radius:2px; }

/* ---- headings — bold, moderate scale, JP-natural ---- */
.h-display { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-display); line-height:var(--lh-hero); letter-spacing:var(--ls-tight); color:var(--ink); }
.h-sec     { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-h2-wide); line-height:var(--lh-head); letter-spacing:var(--ls-0); color:var(--ink); }
.h-card    { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-lead); line-height:var(--lh-card); color:var(--ink); }
.lede      { font-size:var(--fs-lede); line-height:var(--lh-lede); color:var(--body); }

/* 本文へ飛ばす link — 焦点が当たった時だけ出る。
   display:none や visibility:hidden で隠すと、そもそも焦点が当たらないので
   link として機能しない。画面の外へ出しておき、焦点で戻す。
   正本は prototypes/cream-lime/tools/landmarks.mjs（全 50 頁へ配る）。 */
.csl .skip { position:fixed; top:var(--sp-3); left:var(--sp-3); z-index:var(--z-skip);
  transform:translateY(calc(-100% - var(--sp-4))); transition:transform var(--dur-fast) var(--ease);
  display:inline-block; padding:var(--sp-3) var(--sp-5); border-radius:var(--radius);
  background:var(--navy); color:var(--on-dark); text-decoration:none;
  font-size:var(--fs-small); font-weight:600; line-height:var(--lh-card);
  box-shadow:var(--shadow-card); }
.csl .skip:focus { transform:translateY(0); }
/* 飛んだ先で本文全体に輪が出ないようにする。輪を消しても、飛んだこと自体は
   読み上げが本文の頭から読み直すことで伝わる。 */
.csl main[tabindex="-1"]:focus { outline:none; }
@media (prefers-reduced-motion:reduce) { .csl .skip { transition:none; } }

/* ============================= NAV — white floating pill ============================= */
.nav { position:sticky; top:0; z-index:var(--z-nav); padding:14px var(--gutter) 0; }
.nav__in { max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  height:64px; padding:0 var(--sp-3) 0 22px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-nav); }
.nav__brand img { height:20px; width:auto; }
.nav__menu { display:flex; gap:var(--sp-7); }
.nav__link { font-size:var(--fs-meta); font-weight:var(--fw-bold); color:var(--ink); opacity:.78; transition:opacity var(--dur), color var(--dur); }
.nav__link:hover { opacity:1; color:var(--action); }
.nav__cta { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-meta); font-weight:var(--fw-bold); color:var(--on-dark); background:var(--action); padding:10px var(--sp-5); border-radius:var(--radius-pill); transition:background var(--dur); }
.nav__cta:hover { background:var(--action-hover); }

/* 触れる的の最小寸法（WCAG 2.2 の 2.5.8 / レベル AA）
   ---------------------------------------------------------------------------
   単独で置かれた操作部品は 24x24 CSS px 以上でなければならない。実測すると、
   ロゴのリンク 67x21・検索釦 22x22・フッターのロゴ 70x22・フッターのリンク
   52x23 が基準を割っていた（幅 390px と 1440px の両方で同じ）。文字や画像の
   大きさはそのままに、当たり判定だけを広げる。見た目は変わらない。
   文章の中に埋まったリンクは 2.5.8 の対象外なので触らない。 */
.nav__brand,
.foot__brand { display:inline-flex; align-items:center; min-height:var(--target-min); }
.nav__ico { min-width:var(--target-min); min-height:var(--target-min); }
.foot__links a { display:inline-flex; align-items:center; min-height:var(--target-min); }
/* 下層ページのパンくずと、募集要項の末尾のリンクも同じ理由で広げる。
   パンくずは文章ではなく現在地を示す案内なので、2.5.8 の対象になる。 */
.breadcrumb a,
.position-card__foot a { display:inline-flex; align-items:center; min-height:var(--target-min); }

/* ============================= HERO — light, text-led (matches live brand) ============================= */
.hero { position:relative; background:var(--paper); overflow:hidden; padding-block:clamp(56px,8vw,120px); }
.hero__in { position:relative; z-index:var(--z-content); min-height:clamp(320px,44vh,500px); display:flex; flex-direction:column; justify-content:center; }
.hero__title { max-width:18ch; }
.hero__sub { margin-top:var(--sp-6); max-width:52ch; font-size:var(--fs-lede); line-height:var(--lh-lede); color:var(--body); }
.hero__actions { margin-top:34px; display:flex; gap:14px; flex-wrap:wrap; }
.hero__stat { margin-top:32px; display:inline-flex; align-items:baseline; gap:10px; }
.hero__stat b { font-family:var(--sans); font-size:var(--fs-num); font-weight:var(--fw-medium); color:var(--action); line-height:1; }
.hero__stat span { font-size:var(--fs-meta); color:var(--muted); }
.hero__grid { position:absolute; inset:0; z-index:var(--z-under); opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(115% 85% at 92% 8%,var(--mask-on) 18%,transparent 68%);
  mask-image:radial-gradient(115% 85% at 92% 8%,var(--mask-on) 18%,transparent 68%); }
.hero__canvas { position:absolute; inset:0; z-index:var(--z-base); width:100%; height:100%; pointer-events:none;
  -webkit-mask-image:radial-gradient(112% 92% at 88% 12%,var(--mask-on) 22%,transparent 72%);
  mask-image:radial-gradient(112% 92% at 88% 12%,var(--mask-on) 22%,transparent 72%); }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:9px; font-size:var(--fs-ui); font-weight:var(--fw-bold); padding:13px var(--sp-7); border-radius:var(--radius-pill); transition:transform var(--dur-fast), background var(--dur), border-color var(--dur), color var(--dur); }
.btn svg { width:18px; height:18px; }
.btn--primary { background:var(--action); color:var(--on-dark); }
.btn--primary:hover { background:var(--action-hover); transform:translateY(-1px); }
.btn--ghost { border:1.5px solid var(--line-2); color:var(--ink); background:var(--paper); }
.btn--ghost:hover { border-color:var(--action); color:var(--action); }

/* ============================= SECTION scaffolding ============================= */
.section { padding-block:var(--section-y); }
[id] { scroll-margin-top:var(--anchor-offset); }
.section--alt { background:var(--paper-alt); }
.section--tint { background:var(--action-050); }
.section__head { max-width:760px; margin-bottom:var(--head-mb-lg); }
.section__head .h-sec { margin:14px 0 0; }
.section__head .lede { margin-top:var(--sp-4); }
.section__head--row { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6); }

/* ---- numbered disciplines rows ---- */
.rows { border-top:1px solid var(--line-2); }
.row { display:grid; grid-template-columns:76px 1fr; gap:clamp(16px,4vw,52px); padding:var(--pad-row) 0; border-bottom:1px solid var(--line-2); align-items:start; }
.row__n { font-family:var(--sans); font-weight:var(--fw-medium); font-size:var(--fs-ui); color:var(--action); padding-top:5px; }
.row__body .h-card { margin:0 0 var(--sp-2); }
.row__body p { margin:0; color:var(--body); }

/* ---- large feature cards (2-col, image-forward) ---- */
.features { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-feature); }
.feature { display:block; }
.feature__media { border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; background:var(--paper-alt); }
.feature__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) ease; }
.feature:hover .feature__media img { transform:scale(1.03); }
.feature__label { display:inline-block; margin:18px 0 var(--sp-2); font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-5); color:var(--action); }
.feature__title { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-feature); line-height:var(--lh-ui); color:var(--ink); margin:0 0 var(--sp-2); }
.feature__desc { margin:0; color:var(--body); font-size:var(--fs-base); line-height:var(--lh-body); }

/* ---- text feature cards (no image) ---- */
.features--text { grid-template-columns:1fr 1fr; }
.tfeature { display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad-card); transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.tfeature:hover { border-color:var(--line-2); box-shadow:var(--shadow-card); transform:translateY(-2px); }
.tfeature .feature__label { margin:0 0 10px; }
.tfeature .feature__desc { margin-top:10px; }
.tfeature .ilink { margin-top:18px; }

/* ---- research/journal grid (3-col) — framed white cards ---- */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-grid); }
.card { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px var(--sp-4) 22px; transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.card:hover { border-color:var(--line-2); box-shadow:var(--shadow-card-2); transform:translateY(-2px); }
.card__media { border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/9; background:var(--paper); border:1px solid var(--line); }
.card__media img { width:100%; height:100%; object-fit:cover; transform:scale(1.14); transform-origin:center 46%; transition:transform var(--dur-slow) ease; }
.card:hover .card__media img { transform:scale(1.19); }
.card__meta { margin:var(--sp-4) 2px var(--sp-2); font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-5); color:var(--action); }
.card__title { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-card); line-height:var(--lh-card); color:var(--ink); margin:0 2px var(--sp-2); }
.card__excerpt { font-size:var(--fs-small); line-height:var(--lh-body); color:var(--muted); margin:0 2px; }
.card__date { margin:10px 2px 0; font-size:var(--fs-caption); color:var(--muted); }

/* ---- inline link + circular arrows ---- */
.ilink { display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:var(--fw-bold); font-size:var(--fs-ui); color:var(--action); }
.ilink svg { width:18px; height:18px; transition:transform var(--dur); }
.ilink:hover svg { transform:translateX(3px); }
.arrows { display:flex; gap:var(--sp-3); }
.arrow-btn { width:46px; height:46px; border-radius:var(--radius-pill); border:1.5px solid var(--line-2); background:var(--paper); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color var(--dur), color var(--dur); cursor:pointer; }
.arrow-btn:hover { border-color:var(--action); color:var(--action); }
.arrow-btn svg { width:20px; height:20px; }

/* ---- centered pill button row ---- */
.center-cta { display:flex; justify-content:center; margin-top:clamp(32px,4vw,52px); }

/* ---- company profile table (definition rows) ---- */
.ctable { margin:0; border-top:1px solid var(--line-2); }
.ctable__row { display:grid; grid-template-columns:200px 1fr; gap:clamp(16px,3vw,40px); padding:clamp(16px,2vw,22px) 0; border-bottom:1px solid var(--line); align-items:start; }
.ctable dt { margin:0; font-weight:var(--fw-bold); font-size:var(--fs-small); color:var(--muted); letter-spacing:var(--ls-3); padding-top:2px; }
.ctable dd { margin:0; color:var(--body); font-size:var(--fs-base); line-height:var(--lh-body); }
.ctable__link { color:var(--action); font-weight:var(--fw-bold); }
.ctable__link:hover { color:var(--action-hover); }
@media (max-width:600px) {
  .ctable__row { grid-template-columns:1fr; gap:var(--sp-1); }
}

/* ============================= FOOTER — light ============================= */
.foot { background:var(--paper-3); color:var(--body); padding-block:var(--foot-y) 36px; border-top:1px solid var(--line); }
.foot__top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--sp-9); padding-bottom:44px; border-bottom:1px solid var(--line-2); }
.foot__cta .h-sec { font-size:var(--fs-h2-cta); }
.foot__mail { display:inline-block; margin-top:var(--sp-4); font-size:var(--fs-h3); font-weight:var(--fw-bold); font-family:var(--sans); color:var(--action); }
.foot__mail:hover { color:var(--action-hover); }
.foot__col h4 { font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--muted); letter-spacing:var(--ls-3); margin:0 0 14px; }
.foot__col a { display:block; font-size:var(--fs-small); color:var(--ink); opacity:.82; padding:6px 0; transition:color var(--dur),opacity var(--dur); }
.foot__col a:hover { color:var(--action); opacity:1; }
.foot__bottom { display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-7); font-size:var(--fs-caption); color:var(--muted); }

/* ============================= responsive ============================= */
@media (max-width:1000px) {
  .hero__in { grid-template-columns:1fr; }
  .hero__media { order:-1; }
  .hero__media img { aspect-ratio:16/11; max-height:54vh; }
  .features { grid-template-columns:1fr; }
  .grid { grid-template-columns:1fr; }
  .foot__top { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .nav__menu { display:none; }
  .section__head--row { flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }

/* ============================================================================
   SONY-CSL homepage layer (csl.html) — airy white, English headings,
   News&Articles rail, restrained typographic hero. Additive: does not touch
   the shared classes used by about.html.
   ========================================================================== */

/* ---- HERO (Sony CSL: DARK atmospheric top so the adaptive header reads dark) ---- */
.chero { position:relative; overflow:hidden; color:var(--on-dark);
  padding-block:clamp(120px,17vw,215px) clamp(56px,7vw,92px);
  background:
    radial-gradient(125% 95% at 82% -5%, var(--action-a22), transparent 55%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%); }
.chero::before { content:''; position:absolute; inset:0; z-index:var(--z-under); opacity:.55;
  background-image:radial-gradient(var(--on-dark-fill) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 100% at 78% 0%, var(--mask-on) 28%, transparent 74%);
  mask-image:radial-gradient(120% 100% at 78% 0%, var(--mask-on) 28%, transparent 74%); }
.chero .wrap { position:relative; z-index:var(--z-base); }
/* ヒーローに置くのは大見出し 1 本と説明 1 行だけにする（Sony CSL の実測に合わせた。
   あちらは大きな社名表記と、その下に 18 文字の 1 行 22.4px。文字はカード列の
   左下に重なる）。 */
.chero__title { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-hero); line-height:var(--lh-hero); letter-spacing:var(--ls-tight); color:var(--on-dark); margin:0; max-width:20ch; }
.chero__desc { margin:clamp(14px,1.8vw,20px) 0 0; max-width:52ch; font-size:var(--fs-lede);
  line-height:var(--lh-head); color:var(--on-dark-body); }

/* ---- 会社の一言紹介（ヒーロー直下）---- */
.intro { background:var(--paper); padding-block:clamp(44px,6vw,72px); }
.intro__in { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.intro__lead { margin:0; font-size:var(--fs-base); line-height:var(--lh-lede); color:var(--body); }
.intro__actions { display:flex; gap:14px; flex-wrap:wrap; }
.intro__stats { list-style:none; margin:clamp(22px,2.6vw,30px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:10px; }
.intro__stats li { font-size:var(--fs-meta); color:var(--muted); display:flex; align-items:baseline; gap:9px; }
.intro__stats b { font-family:var(--sans); font-weight:var(--fw-medium); font-size:var(--fs-lead); color:var(--ink); line-height:1; }

@media (max-width:820px) {
  .intro__in { grid-template-columns:1fr; }
}

/* ---- News&Articles horizontal rail ---- */
.rail { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,340px); gap:var(--gap-grid);
  overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:var(--sp-2); margin-inline:calc(-1 * var(--gutter)); padding-inline:var(--gutter);
  scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.ncard { scroll-snap-align:start; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.ncard:hover { border-color:var(--line-2); box-shadow:var(--shadow-card-3); transform:translateY(-2px); }
.ncard__media { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--paper-alt); }
.ncard__media img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform var(--dur-slow) ease; }
.ncard:hover .ncard__media img { transform:scale(1.09); }
.chip { position:absolute; top:12px; left:12px; font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-3);
  color:var(--on-dark); background:var(--chip-bg); backdrop-filter:blur(4px); padding:5px 11px; border-radius:var(--radius-pill); }
.ncard__title { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-base); line-height:var(--lh-card); color:var(--ink); margin:var(--sp-4) 18px 0; flex:1; }
.ncard__date { font-size:var(--fs-caption); color:var(--muted); margin:var(--sp-3) 18px var(--sp-5); }

.center-cta .ilink { font-size:var(--fs-ui); }

@media (max-width:1000px) {
  .chero__title { max-width:none; }
}

/* ---- HEADER (csl.html) — Sony CSL adaptive: dark full-width bar over the dark
   hero; on scroll onto light content it becomes a WHITE 16px-rounded floating box.
   Logo/text/util invert colour with the state. ---- */
/* Sony CSL 実測（2026-07-31・トップと下層の両方）: 外枠 .site-header は
   padding 10.7px 38.7px 0 で高さ 72.7px、内側の箱は角丸 16px・高さ 62px で
   常に同じ寸法である。状態で変わるのは背景・影・文字色だけで、余白は動かない。
   以前の実装は上端でだけ角丸 0 の全幅バーにしていたため、スクロールした瞬間に
   箱が跳ねていた。寸法を固定し、色だけを切り替える。ヒーローの上では外枠にも
   同じ暗色を敷くので、見た目は端まで届く 1 本の帯になる。
   sticky なヘッダーは通常フローに場所を占めるため、上の padding を負のマージンで
   打ち消し、フロー上の高さを 64px に保つ。 */
.csl .nav { position:sticky; top:0; z-index:var(--z-nav); padding:11px clamp(14px,2.9vw,42px) 0;
  margin-bottom:-11px; background:var(--carbon);
  transition:background var(--dur-slow) var(--ease); }
.csl .nav__in { max-width:none; margin:0; height:64px; border:0;
  border-radius:var(--radius-lg); box-shadow:none;
  background:var(--carbon); display:flex; align-items:center; gap:var(--gap-nav);
  padding:0 var(--pad-gutter-nav); justify-content:flex-start;
  transition:background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
/* ヒーローを抜けた状態。Sony CSL 実測（2026-08-05）と同じ構造にしてある。
   あちらは既定が transparent で、ヒーローと重なっている間だけ .color-inversed
   を付けて暗い地を敷く。抜けると内側の白いカード（角丸・影）だけが浮く。
   こちらは既定を暗い状態にし、抜けた側に .is-past-hero を付ける。付ける対象が
   逆なだけで、見えている結果は同じである。*/
.csl .nav.is-past-hero { background:transparent; }
.csl .nav.is-past-hero .nav__in { background:var(--paper); box-shadow:var(--shadow-header); }

/* サイト内検索パネル — ヘッダーの直下に落ちる白いカード。スクロール時の
   ヘッダー（白・角丸16px）と同じ見え方に揃えている。sticky ヘッダーの中に
   absolute で置くので、開閉しても本文のレイアウトは動かない。 */
.csl .search { position:absolute; top:100%; right:clamp(14px,2.9vw,42px); z-index:var(--z-panel);
  width:min(420px, calc(100vw - 28px)); }
.csl .search[hidden] { display:none; }
.csl .search__in { background:var(--paper); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop);
  padding:18px; margin-top:var(--sp-2); }
.csl .search__label { display:block; font-size:var(--fs-caption); letter-spacing:var(--ls-8); color:var(--muted); margin-bottom:var(--sp-2); }
.csl .search__q { width:100%; box-sizing:border-box; font:inherit; font-size:var(--fs-ui); color:var(--ink);
  padding:10px var(--sp-3); border:1px solid var(--line-2); border-radius:var(--radius-ui); background:var(--paper);
  transition:border-color var(--dur) ease, box-shadow var(--dur) ease; }
.csl .search__q:focus { outline:none; border-color:var(--action); box-shadow:var(--ring); }
.csl .search__status { margin:10px 2px 0; font-size:var(--fs-caption); color:var(--muted); min-height:1em; }
.csl .search__hits { list-style:none; margin:var(--sp-2) 0 0; padding:0; max-height:min(52vh,380px); overflow-y:auto; }
.csl .search__hits a { display:block; padding:9px 10px; border-radius:var(--radius-ui); text-decoration:none; color:inherit;
  transition:background-color var(--dur) ease; }
.csl .search__hits a:hover, .csl .search__hits a:focus-visible { background:var(--paper-alt); }
/* 題名は2行、抜粋は2行で打ち切る。研究ノートの題名も抜粋も長く、
   そのまま出すとパネルが縦に伸びて一覧性を失う。 */
.csl .search__hits strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  font-size:var(--fs-small); font-weight:600; line-height:var(--lh-ui); color:var(--ink); }
.csl .search__hits span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  margin-top:2px; font-size:var(--fs-caption); line-height:var(--lh-card); color:var(--muted); }

/* ロゴの入れ替え — 白のワードマークと紺のワードマークを同じ升目に重ね、
   不透明度で入れ替える。Sony CSL は display の切り替え（一瞬で入れ替わる）だが、
   「なめらかに切り替えたい」という指示に合わせて重ね置きの淡い交差にした。
   brightness(0) invert(1) で白く塗る旧実装は、色を潰すため字面が僅かに太る。
   専用の白版 SVG（logo-ja-white.svg）を使えばその劣化が無い。 */
.csl .nav__brand { display:grid; align-items:center; }
.csl .nav__brand img { grid-area:1 / 1; height:25px; width:auto;
  transition:opacity var(--dur-slow) var(--ease-inout); }
.csl .nav__brand .nav__logo--ink { opacity:0; }
.csl .nav.is-past-hero .nav__brand .nav__logo--ink { opacity:1; }
.csl .nav.is-past-hero .nav__brand .nav__logo--white { opacity:0; }

.csl .nav__menu { display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); }
.csl .nav__link { font-size:var(--fs-small); font-weight:var(--fw-bold); color:var(--on-dark); opacity:.82; letter-spacing:var(--ls-3); transition:opacity var(--dur), color var(--dur-slow) ease; }
.csl .nav__link:hover { opacity:1; }
.csl .nav.is-past-hero .nav__link { color:var(--ink); }
.csl .nav.is-past-hero .nav__link:hover { color:var(--action); }

.csl .nav__util { margin-left:auto; display:flex; align-items:center; gap:var(--sp-4); }
.csl .nav__ico { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; background:none; color:var(--on-dark); opacity:.9; cursor:pointer; transition:color var(--dur-slow) ease; }
.csl .nav__ico svg { width:19px; height:19px; }
.csl .nav__ico:hover { opacity:1; }
.csl .nav.is-past-hero .nav__ico { color:var(--ink); }
.csl .nav__lang { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:var(--fs-meta); font-weight:var(--fw-bold); color:var(--on-dark); transition:color var(--dur-slow) ease; }
.csl .nav.is-past-hero .nav__lang { color:var(--ink); }
.csl .nav__lang span { opacity:.5; transition:opacity var(--dur); }
.csl .nav__lang .is-active { opacity:1; text-decoration:underline; text-underline-offset:4px; }
.csl .nav__lang .is-off { opacity:.32; cursor:not-allowed; }
/* 切替先への link。現在地の span と同じ見た目に揃え、触れると濃くなる。
   色だけで状態を伝えないよう、現在地は下線で示してある。 */
.csl .nav__lang .nav__lang-to { opacity:.5; color:inherit; text-decoration:none;
  transition:opacity var(--dur); }
.csl .nav__lang .nav__lang-to:hover,
.csl .nav__lang .nav__lang-to:focus-visible { opacity:1; text-decoration:underline;
  text-underline-offset:4px; }
.csl .nav__lang i { opacity:.4; font-style:normal; }

@media (max-width:820px) {
  .csl .nav__menu { display:none; }
}

/* ============================================================================
   FULL Sony-CSL reproduction layer (csl.html) — 1200 grid, colour tiles,
   image cards, people grid, dark footer. Placeholders = centred ht logo.
   ========================================================================== */

/* placeholder = "unregistered" image: centred ht logo on light panel */
.csl .ph { background-color:var(--paper-4); background-image:url(/brand/logo-ja.svg);
  background-repeat:no-repeat; background-position:center; background-size:min(44%,190px); }

/* section heads (Sony CSL: 35px / 700, optional big & centred) */
.csl .sec-head { margin-bottom:var(--head-mb); }
.csl .h-sec { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-h2); line-height:var(--lh-head); color:var(--ink); letter-spacing:var(--ls-0); margin:0; }
.csl .h-sec--lg { font-size:var(--fs-h2-lg); }
.csl .sec-desc { margin:var(--sp-4) 0 0; max-width:64ch; color:var(--body); font-size:var(--fs-base); line-height:var(--lh-lede); }
.csl .sec-head--row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); }
.csl .sec-head--center { text-align:center; }
.csl .sec-head--center .sec-desc { margin-inline:auto; }

/* pill buttons */
.csl .pill { display:inline-flex; align-items:center; gap:var(--sp-2); font-weight:var(--fw-bold); font-size:var(--fs-ui); color:var(--ink);
  border:1.5px solid var(--line-2); background:var(--paper); padding:13px var(--sp-8); border-radius:var(--radius-pill); transition:border-color var(--dur), background var(--dur), color var(--dur); }
.csl .pill:hover { border-color:var(--ink); }
.csl .pill--dark { background:var(--carbon); color:var(--on-dark); border-color:var(--carbon); }
.csl .pill--dark:hover { background:var(--carbon-hover); border-color:var(--carbon-hover); color:var(--on-dark); }

/* Our Vision — image-forward cards, label + caption below */
.csl .vgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.csl .vcard { display:block; }
.csl .vcard__media { aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; }
.csl .vcard__label { display:inline-block; margin:var(--sp-4) 0 6px; font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-3); color:var(--action); }
.csl .vcard__cap { margin:0; font-weight:var(--fw-bold); font-size:var(--fs-card); line-height:var(--lh-card); color:var(--ink); transition:color var(--dur); }
.csl .vcard:hover .vcard__cap { color:var(--action); }

/* 事業領域 — Sony CSL Research Areas: 3×2 solid-colour tiles */
/* 事業領域は 5 面。3 列で組むと最後の行に 2 面だけ残って右が空く。
   6 分割した升目に 2 つ分ずつ置き、余った最後の行を中央へ寄せる。
   面の幅は 3 列のときと変わらない（2026-08-17 にオープンソースの面を落として
   6 面から 5 面になったため）。 */
.csl .atiles { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-6); }
.csl .atile { grid-column:span 2; }
.csl .atiles .atile:nth-child(4) { grid-column:2 / span 2; }
.csl .atile { position:relative; display:flex; flex-direction:column; min-height:232px; padding:var(--sp-7) var(--sp-7) 66px;
  background:var(--c,var(--navy)); color:var(--on-dark); border-radius:var(--radius-md); overflow:hidden; transition:transform var(--dur), box-shadow var(--dur); }
.csl .atile:hover { transform:translateY(-3px); box-shadow:var(--shadow-tile); }
.csl .atile__en { font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:var(--ls-5); opacity:.72; }
.csl .atile__t { margin:var(--sp-3) 0 10px; font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:var(--lh-ui); color:var(--on-dark); }
.csl .atile__d { margin:0; font-size:var(--fs-meta); line-height:var(--lh-body); color:var(--on-dark-body); }
.csl .atile__go { position:absolute; right:22px; bottom:22px; width:38px; height:38px; border-radius:var(--radius-pill);
  border:1.5px solid var(--on-dark-stroke-2); display:inline-flex; align-items:center; justify-content:center; transition:background var(--dur), border-color var(--dur); }
.csl .atile__go svg { width:17px; height:17px; }
.csl .atile:hover .atile__go { background:var(--on-dark-line-2); border-color:var(--on-dark); }

/* ---- BRAND 帯 — Sony CSL の brand-movie（812px / Research Areas と About の間）に
   対応する区画。当方は映像素材を持たないため、映像の代わりにヒーローと同じ 58px
   グリッド意匠を CSS アニメーションで動かしている（第三者の映像・音源は不使用）。
   高さは CSL の 812px を上限に、狭い画面では縮める。 ---- */
.csl .brand { position:relative; overflow:hidden; background:var(--ink);
  min-height:clamp(460px,52vw,812px); display:grid; align-items:center;
  padding-block:clamp(56px,7vw,96px); }
.csl .brand__bg { position:absolute; inset:0; pointer-events:none; }
/* グリッドは横へ 1マス分だけ流し続ける。58px 進んだ時点で見た目が元と同一に
   なるので、継ぎ目なく無限に繰り返せる。 */
.csl .brand__grid { position:absolute; inset:-60px;
  background-image:linear-gradient(var(--on-dark-fill-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--on-dark-fill-2) 1px,transparent 1px);
  background-size:58px 58px; animation:brand-drift var(--dur-drift) linear infinite; }
/* 青い光がゆっくり横断する。グリッドの上に重ねた円錐状の明かり。 */
.csl .brand__sweep { position:absolute; top:-25%; left:0; width:78%; height:150%;
  background:radial-gradient(closest-side, var(--action-a62), var(--action-a22) 45%, transparent 72%);
  animation:brand-sweep var(--dur-sweep) ease-in-out infinite; }
@keyframes brand-drift { to { transform:translate(58px,58px); } }
@keyframes brand-sweep { 0%,100% { transform:translateX(-24%); opacity:.55; }
                          50%     { transform:translateX(104%); opacity:.95; } }
/* 停止ボタンで止める（CSL の「ブランドムービーを停止」に対応）。 */
.csl .brand.is-paused .brand__grid, .csl .brand.is-paused .brand__sweep { animation-play-state:paused; }
.csl .brand__in { position:relative; z-index:var(--z-base); }
.csl .brand__eyebrow { margin:0 0 18px; font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--action-100); }
.csl .brand__t { margin:0; max-width:20ch; font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-brand); line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--on-dark); }
.csl .brand__lead { margin:var(--sp-7) 0 0; max-width:52ch; font-size:var(--fs-brand-lead);
  line-height:var(--lh-lede); color:var(--on-dark-muted); }
.csl .brand__ctl { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:clamp(28px,3.4vw,40px); }
.csl .brand__btn { display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:var(--fs-meta);
  font-weight:var(--fw-bold); color:var(--on-dark); background:var(--on-dark-fill-2); border:1px solid var(--on-dark-stroke);
  border-radius:var(--radius-pill); padding:10px 18px; cursor:pointer;
  transition:background var(--dur) ease, border-color var(--dur) ease; }
.csl .brand__btn:hover { background:var(--on-dark-fill-3); border-color:var(--on-dark); }
.csl .brand__btn svg { width:15px; height:15px; }
.csl .brand__btn .ico-play { display:none; }
.csl .brand.is-paused .brand__btn .ico-play { display:block; }
.csl .brand.is-paused .brand__btn .ico-stop { display:none; }
.csl .brand__note { max-width:60ch; margin:var(--sp-5) 0 0; padding:var(--sp-4) 18px; border-radius:var(--radius);
  background:var(--on-dark-fill); border:1px solid var(--on-dark-line-2);
  font-size:var(--fs-small); line-height:var(--lh-lede); color:var(--on-dark-body); }
.csl .brand__note[hidden] { display:none; }
/* 動きを抑える設定の利用者には最初から静止して見せる。 */
@media (prefers-reduced-motion: reduce) {
  .csl .brand__grid, .csl .brand__sweep { animation:none; }
}

/* About + Members */
.csl .about { display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,5vw,80px); align-items:start; padding-bottom:clamp(34px,5vw,56px); border-bottom:1px solid var(--line); }
.csl .about__body .lede { margin:0 0 var(--sp-7); }
.csl .acc { margin-top:clamp(34px,4.5vw,52px); }
.csl .acc__head { display:flex; align-items:center; gap:var(--sp-3); padding-bottom:var(--sp-5); border-bottom:1px solid var(--line); }
.csl .acc__caret { color:var(--action); font-size:var(--fs-h3); line-height:1; }
.csl .acc__t { margin:0; font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--ink); }
.csl .pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); margin-top:var(--sp-8); }
.csl .person { display:block; }
.csl .person__ph { aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; }
.csl .person__role { display:block; margin:14px 0 var(--sp-1); font-size:var(--fs-caption); color:var(--muted); line-height:var(--lh-ui); }
.csl .person__name { display:block; font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink); transition:color var(--dur); }
.csl .person:hover .person__name { color:var(--action); }

/* dark footer (Sony CSL) */
.csl .foot { background:var(--night-foot); color:var(--on-dark-muted); border:0; padding-block:var(--foot-y) 34px; }
.csl .foot .h-sec { color:var(--on-dark); font-size:var(--fs-h2-foot); }
.csl .foot__cta { padding-bottom:clamp(40px,5vw,60px); border-bottom:1px solid var(--on-dark-line); }
.csl .foot__mail { display:inline-block; margin-top:18px; font-family:var(--sans); font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--action-on-dark); }
.csl .foot__mail:hover { color:var(--on-dark); }
.csl .foot__note { margin:14px 0 0; max-width:40ch; font-size:var(--fs-small); color:var(--on-dark-note); line-height:var(--lh-body); }
.csl .foot__bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; padding:32px 0; border-bottom:1px solid var(--on-dark-line); }
.csl .foot__brand img { height:22px; }
.csl .foot__links { display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.csl .foot__links a { font-size:var(--fs-meta); color:var(--on-dark-muted); }
.csl .foot__links a:hover { color:var(--on-dark); }
.csl .foot__copy { display:flex; justify-content:center; text-align:center; gap:var(--sp-5); flex-wrap:wrap; margin-top:var(--sp-6); font-size:var(--fs-caption); color:var(--on-dark-faint); }

/* 評価バッジ。第三者が検証できるものだけを並べる帯で、正本は
   tools/footer-badges.mjs にある（HTML は機械が全頁へ配る）。

   色で等級を分けない。正典に緑もティールも無いためで、ここだけ新しい色相を
   作ると、以後どの画面でも「合格の緑」を足す口実になる。濃色面の塗りの段と
   文字の強さだけで、合格・適合・中立の順を付ける。

   丸い封のかたちは、監査の印に見えるようにするためである。中の図は
   currentColor で塗りたいので、img ではなく mask で形だけ切り出す。 */
.csl .foot__badges { display:flex; flex-wrap:wrap; gap:10px; margin:var(--sp-6) 0 0; padding:0; list-style:none; }
.csl .tbadge { display:flex; align-items:center; gap:10px; min-height:var(--target-min); padding:9px 13px 9px 9px;
  border:1px solid var(--on-dark-line); border-radius:var(--radius); background:var(--on-dark-fill);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.csl .tbadge:hover { border-color:var(--on-dark-fill-3); background:var(--on-dark-fill-2); }
.csl .tbadge:focus-visible { outline:2px solid var(--on-dark); outline-offset:3px; }
.csl .tbadge__seal { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  flex:0 0 auto; width:34px; height:34px; border-radius:var(--radius-pill); }
.csl .tbadge__seal--pass { background:var(--on-dark-fill-2); color:var(--on-dark); }
.csl .tbadge__seal--valid { background:var(--on-dark-fill); color:var(--on-dark-body); }
.csl .tbadge__seal--plain { box-shadow:inset 0 0 0 1px var(--on-dark-line); color:var(--on-dark-muted); }
.csl .tbadge__icon { display:block; width:13px; height:13px; background:currentColor;
  -webkit-mask:var(--icon) no-repeat center/contain; mask:var(--icon) no-repeat center/contain; }
.csl .tbadge__grade { font-family:var(--sans); font-size:9px; font-weight:var(--fw-bold); line-height:1; }
.csl .tbadge__name { font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-medium);
  line-height:var(--lh-ui); color:var(--on-dark-body); white-space:nowrap; }
.csl .tbadge:hover .tbadge__name { color:var(--on-dark); }
@media (max-width:820px) { .csl .foot__badges { gap:8px; } .csl .tbadge { padding:8px 11px 8px 8px; } }

@media (max-width:1000px) {
  .csl .vgrid { grid-template-columns:1fr 1fr; }
  /* 狭い画面では 2 面ずつ。升目を 4 分割に落とす。6 分割のまま 2 列にすると、
     1 面が 2 列ぶんを占めて 1 行 1 面になってしまう。
     5 面なので最後の 1 面が余る。ここでも中央へ寄せる。 */
  .csl .atiles { grid-template-columns:repeat(4,1fr); }
  .csl .atiles .atile:nth-child(4) { grid-column:span 2; }
  .csl .atiles .atile:nth-child(5) { grid-column:2 / span 2; }
  .csl .pgrid { grid-template-columns:1fr 1fr; }
  .csl .about { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .csl .vgrid, .csl .pgrid { grid-template-columns:1fr; }
  /* 1 面ずつ縦に並べる。中央寄せの指定は列が足りなくなるので必ず戻す。 */
  .csl .atiles { grid-template-columns:repeat(2,1fr); }
  .csl .atiles .atile:nth-child(5) { grid-column:span 2; }
  .csl .sec-head--row { flex-wrap:wrap; }
}

/* ============================================================================
   MOTION layer — Sony CSL dynamic parts: hero auto-scroll marquee, scroll-reveal
   fade-in (ot-fade-in), draggable News rail.
   ========================================================================== */

/* ヒーロー — Sony CSL の実測（2026-08-05、1440×900 で採寸）に合わせて組み直した。
   ・帯そのものは単色の暗い面。CSL は #151617、こちらの --carbon と同じ値だった。
   ・帯の中を縦長のカードが横に流れる。CSL は 312×530px で、幅の半分ぶんの
     半円アーチが上端か下端のどちらかに付き、1 枚おきに上下が入れ替わる
     （--radius-half: 224px と --radius-close: 16px の組み合わせ）。
     こちらは角丸に 999px を与えている。ブラウザは収まらない角丸を辺の長さに
     比例して縮めるため、結果は幅の半分＝完全な半円になり、カード幅が
     変わっても自動で追従する。
   ・文字は帯の左下に置き、カードに重ねる。CSL も同じで、大見出しの下端が
     カード列の下端付近に来る。
   ・CSL は文字の下に膜を敷いていない（人物写真の背景が明るくても白文字が
     読める配置になっている）。こちらは風景写真を使うため、下から上への
     暗い膜だけを最小限に敷いた。カードの上部は膜がかからず素のまま見える。 */
.csl .chero { display:flex; align-items:flex-end;
  min-height:clamp(580px, 86vh, 820px);
  padding-block:clamp(96px,13vw,150px) clamp(44px,5.5vw,76px);
  background:var(--carbon); }
.csl .chero::before { content:none; }
.csl .chero__bg { position:absolute; z-index:var(--z-under); overflow:hidden;
  inset:clamp(40px,5vw,64px) 0 clamp(56px,7vw,96px); }
.csl .chero__strip { display:flex; align-items:stretch; gap:clamp(12px,1.5vw,20px);
  height:100%; width:max-content;
  animation:chero-marquee var(--dur-marquee) linear infinite; will-change:transform; }
.csl .chero__tile { flex:0 0 auto; width:clamp(196px,21vw,312px); height:100%;
  background:var(--night-tile) url(/brand/logo-ja-white.svg) center/56% no-repeat;
  border-radius:var(--radius-pill) var(--radius-pill) var(--radius-lg) var(--radius-lg); }
/* 1 枚おきにアーチを下端へ移す（CSL の --up / --down の交互配置）*/
.csl .chero__tile:nth-child(even) {
  border-radius:var(--radius-lg) var(--radius-lg) var(--radius-pill) var(--radius-pill); }
@keyframes chero-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.csl .chero__scrim { position:absolute; inset:0; z-index:var(--z-base);
  background:
    linear-gradient(180deg, transparent 30%, var(--scrim-carbon) 60%, var(--scrim-carbon-strong) 100%),
    linear-gradient(90deg, var(--scrim-carbon-strong) 0%, var(--scrim-carbon) 38%, transparent 64%); }
.csl .chero .wrap { position:relative; z-index:var(--z-content); width:100%; }

/* scroll-reveal — 実測所見(2026-07-30): Sony CSL 本文にフェードアップは無い。
   隠れているのは page-top ボタンだけで、遷移も最長 0var(--dur-slow)。以前ここに書いていた
   「ot-fade-in の再現」は誤りで、onetrust-fade-in は Cookie 同意バナー
   （第三者製 OneTrust）のアニメーション。速度は CSL の --duration: 0var(--dur-slow) に合わせ、
   持ち上げ量とスタガーも詰めて、CSL と同じ「速く短い」語彙に揃える。 */
@media (prefers-reduced-motion: no-preference) {
  .csl .reveal { opacity:0; transform:translateY(10px);
    transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .csl .reveal.is-in { opacity:1; transform:none; }
}

/* draggable News rail */
.csl .rail { cursor:grab; }
.csl .rail.is-drag { cursor:grabbing; scroll-snap-type:none; }
.csl .rail.is-drag a { pointer-events:none; }

@media (prefers-reduced-motion: reduce) {
  .csl .chero__strip { animation:none; }
}

/* ページ先頭へ戻る — Sony CSL の .page-top を実測して寸法を合わせた
   （position:fixed / right:12px / bottom:12px / 56x56 / 円形、スクロールで .is-show を
   付けて不透明化）。移り変わりの時間もそろえてあるが、**実測値そのものはこの記録から
   失われている**。ここには以前 `transition:0var(--dur-slow)` という壊れた文字列が
   入っていた。過去の一括置換が数値を潰したもので、取り込んだ最初のコミット
   （99f78c9）から既にこの形だったため、元の秒数は履歴から辿れない。
   確認できない値を書き戻さず、消しておく（2026-08-17）。
   アイコンは第三者素材を使わず、ナビと同じストローク描画で自前に引いている。 */
.csl .page-top { position:fixed; right:12px; bottom:12px; z-index:var(--z-content);
  width:56px; height:56px; border-radius:var(--radius-circle); display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--on-dark); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-slow) ease, visibility var(--dur-slow) ease, background-color var(--dur) ease, transform var(--dur) ease; }
.csl .page-top.is-show { opacity:1; visibility:visible; pointer-events:auto; }
.csl .page-top:hover { background:var(--navy); transform:translateY(-2px); }
.csl .page-top:focus-visible { outline:2px solid var(--action); outline-offset:3px; }
.csl .page-top svg { width:24px; height:24px; }

/* hero play/pause control (Sony CSL スライドショーを停止) */
.csl .chero__toggle { position:absolute; right:clamp(20px,4vw,48px); bottom:clamp(20px,4vw,44px); z-index:var(--z-float);
  width:52px; height:52px; border-radius:var(--radius-pill); border:1.5px solid var(--on-dark-stroke-2); background:var(--scrim);
  color:var(--on-dark); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px);
  transition:background var(--dur), border-color var(--dur); }
.csl .chero__toggle:hover { background:var(--scrim-strong); border-color:var(--on-dark); }
.csl .chero__toggle svg { width:22px; height:22px; }
.csl .chero__toggle .ic-play { display:none; }
.csl .chero.is-paused .chero__toggle .ic-pause { display:none; }
.csl .chero.is-paused .chero__toggle .ic-play { display:block; }
.csl .chero.is-paused .chero__strip { animation-play-state:paused; }

/* Our Vision — draggable carousel */
.csl .vrail { grid-auto-columns:minmax(310px,376px); }
.csl .vrail .vcard { scroll-snap-align:start; }
.csl .vctrl { display:flex; align-items:center; justify-content:center; gap:var(--sp-6); margin-top:clamp(28px,3.6vw,44px); }

/* News card — related people thumbnails (placeholder circles) */
.csl .ncard__thumbs { display:flex; gap:6px; margin:var(--sp-3) 18px 0; }
.csl .ncard__th { width:26px; height:26px; border-radius:var(--radius-pill); border:1px solid var(--line); background-size:150%; }

/* About accordions (Sony CSL Researcher / Laboratories) */
.csl details.acc { margin-top:clamp(30px,4vw,48px); }
.csl summary.acc__head { list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5) 0; border-bottom:1px solid var(--line); }
.csl summary.acc__head::-webkit-details-marker { display:none; }
.csl .acc__caret { position:relative; width:14px; height:14px; flex:0 0 auto; }
.csl .acc__caret::before { content:''; position:absolute; left:3px; top:2px; width:8px; height:8px;
  border-right:2px solid var(--action); border-bottom:2px solid var(--action); transform:rotate(-45deg); transition:transform var(--dur-mid) ease; }
.csl details[open] > .acc__head .acc__caret::before { transform:rotate(45deg); }
.csl .acc__t { font-size:var(--fs-h3); font-weight:var(--fw-bold); color:var(--ink); }
.csl .acc__panel { padding-top:2px; }
@media (prefers-reduced-motion: no-preference) {
  .csl details[open] .acc__panel { animation:acc-open var(--dur-panel) ease; }
  @keyframes acc-open { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
}

/* Laboratories boxes */
.csl .labgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); margin-top:var(--sp-6); }
.csl .lab { position:relative; display:flex; flex-direction:column; gap:6px; padding:22px 56px 22px var(--sp-6);
  background:var(--paper-alt); border:1px solid var(--line); border-radius:var(--radius); transition:border-color var(--dur), background var(--dur); }
.csl .lab:hover { border-color:var(--line-2); background:var(--paper); }
/* 拠点カードに写真を入れる（Sony CSL の Laboratories と同じ構成）。
   マークアップ順は 写真 → 都市名 → 住所 のまま、グリッドで2列に組み替える。 */
.csl .lab { display:grid; grid-template-columns:104px 1fr; grid-template-rows:auto auto;
  column-gap:var(--sp-4); row-gap:var(--sp-1); align-items:center; }
.csl .lab__ph { grid-row:1/3; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--paper-4); }
.csl .lab__ph img { display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.02); transition:transform var(--dur-slow) var(--ease-out); }
.csl .lab:hover .lab__ph img { transform:scale(1.08); }
.csl .lab__city { grid-column:2; align-self:end; font-size:var(--fs-card); font-weight:var(--fw-bold); color:var(--ink); }
.csl .lab__addr { grid-column:2; align-self:start; font-size:var(--fs-meta); color:var(--muted); line-height:var(--lh-card); }
.csl .lab__go { position:absolute; right:20px; top:50%; transform:translateY(-50%); color:var(--action); }
.csl .lab__go svg { width:20px; height:20px; }
@media (max-width:600px){ .csl .labgrid { grid-template-columns:1fr; } }

/* ============================================================================
   実画像レイヤー — .ph（ワードマーク板）は「画像未登録」の代替。実画像が
   用意できた枠だけ、この層で差し替える。背景差し替えは --im、拡大ホバーを
   効かせたい枠は <img> を使う（Sony CSL のカード挙動に合わせる）。
   ========================================================================== */
.csl .ph--im { background-image:var(--im); background-size:cover; background-position:center; }
.csl .chero__tile.ph--im { background-color:var(--night-tile); background-size:cover; background-position:center; }
.csl .ncard__th.ph--im { background-size:cover; }

.csl .vcard__media img, .csl .person__ph img { display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03); transition:transform var(--dur-slow) var(--ease-out); }
.csl .vcard:hover .vcard__media img { transform:scale(1.08); }

/* Our Vision — Sony CSL "Our Worldviews" は幅内に収まるグリッド（横スクロールではない）。
   キャプションは見出しが先、小ラベルが後。 */
/* 3 枚を 1 行に並べる。もとは 2 列で 4 枚（2×2）だったが、2026-08-17 に
   オープンソースの面を落として 3 枚になり、2 列のままだと右下が空く。 */
.csl .vgrid2 { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,34px); }
/* 2 列の段は置かない。3 枚なので 2 列にすると必ず 1 枚あまって右下が空く。
   3 列のまま狭め、入らなくなったら 1 列へ落とす。 */
@media (max-width:820px){ .csl .vgrid2 { grid-template-columns:1fr; } }
.csl .vgrid2 .vcard__cap { margin:var(--sp-4) 0 0; }
.csl .vgrid2 .vcard__label { margin:7px 0 0; }

/* News カード — CSL は タイトル → 日付 → 関連サムネ の順 */
.csl .ncard__date { margin:var(--sp-3) 18px 0; }
.csl .ncard__thumbs { margin:10px 18px var(--sp-5); }

/* ヒーロー帯 — 実画像を敷いたので、スクリムに沈みすぎない程度まで明度を上げる */
/* CSL のカードは膜を掛けずそのまま出ている。こちらも素の写真で見せ、
   読みやすさは下端の膜だけで確保する。 */
.csl .chero__tile.ph--im { opacity:1; }

/* 画像は CC0 実写に差し替え済み（出典は preview/images/CREDITS.md）。
   旧素材向けの明度補正は不要になったため撤去した。 */

/* メンバー — 顔写真が未登録の枠。姓一文字のモノグラムを置き、hover で
   わずかに沈める（Sony CSL の人物カードと同じ 0var(--dur) の反応速度）。 */
.csl .person__ph--mono { background:var(--paper-4); display:grid; place-items:center;
  transition:background-color var(--dur) var(--ease-back); }
.csl .person__ph--mono::after { content:attr(data-mono); font-size:clamp(38px,3.4vw,54px);
  font-weight:var(--fw-medium); letter-spacing:var(--ls-5); color:var(--action); opacity:.55;
  transition:opacity var(--dur) var(--ease-back); }
.csl .person:hover .person__ph--mono { background:var(--paper-5); }
.csl .person:hover .person__ph--mono::after { opacity:.75; }

/* 端に達した矢印は無効化する（Sony CSL のスライダーと同じ挙動）。 */
.csl .arrow-btn[disabled] { opacity:.3; pointer-events:none; }

/* .rail は padding-inline を持つのに scroll-padding が無く、scroll-snap が
   1枚目を padding の内側へ吸着するため初期 scrollLeft が gutter 分ずれる
   （＝先頭なのに「先頭でない」と判定される）。scroll-padding を揃えて 0 に戻す。 */
.csl .rail { scroll-padding-inline:var(--gutter); }


/* ============================================================================
   下層ページ層 — 会社概要・経営理念・研究・お知らせ・メンバー・採用・
   お問い合わせ・設立趣意書・研究ノート本文。
   ----------------------------------------------------------------------------
   Sony CSL の下層ページを実測した（2026-07-31、computed style）。
   ・ヘッダーは最初から白い浮遊型の箱である（角丸 16px / 高さ 62px /
     外側の余白 10.7px 38.7px 0）。トップのように暗い状態から始まらない。
   ・フッターは全ページ共通で暗い面である。
   よって下層ページは .nav--pin を付け、白い状態に固定する。
   ========================================================================== */

/* ---- ヘッダー — 白い状態に固定する（下層ページ）---- */
.csl .nav--pin { background:transparent; }
.csl .nav--pin .nav__in { background:var(--paper); box-shadow:var(--shadow-header); }
/* 下層ページは白い状態で固定なので、紺のロゴを出す。ロゴが 1 枚しか置かれて
   いないページ（logo-ja.svg 単体）はそのまま紺で表示される。 */
.csl .nav--pin .nav__brand .nav__logo--ink { opacity:1; }
.csl .nav--pin .nav__brand .nav__logo--white { opacity:0; }
.csl .nav--pin .nav__link { color:var(--ink); }
.csl .nav--pin .nav__link:hover { color:var(--action); }
.csl .nav--pin .nav__ico, .csl .nav--pin .nav__lang { color:var(--ink); }
.csl .nav .nav__link--active, .csl .nav--pin .nav__link--active { color:var(--action); opacity:1; }

/* ---- パンくず ---- */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-caption); color:var(--muted); margin-bottom:var(--sp-5); }
.breadcrumb a { color:var(--muted); transition:color var(--dur); }
.breadcrumb a:hover { color:var(--action); }
/* 区切りの「/」は罫線の色 --line-2 を文字色に流用していた。白地で 1.36:1 しか
   なく、ほとんど見えていない（WCAG 2.2 の 1.4.3 が本文に求めるのは 4.5:1）。
   罫線の色と文字の色は別の役割なので、文字には文字の色を当てる。 */
.breadcrumb span { color:var(--muted); }
.breadcrumb span:last-child { color:var(--body); }

/* 下層のヒーローはトップより浅い。パンくずが上に載るぶん、上の余白を詰める。 */
.hero--page { padding-block:clamp(26px,3.4vw,44px) clamp(24px,3.2vw,44px); }
.hero--page .hero__in { min-height:0; }
.hero--page .hero__title { font-size:clamp(30px,4.6vw,52px); max-width:22ch; }

/* ---- 本文の塊 ---- */
.prose { max-width:74ch; color:var(--body); font-size:var(--fs-base); line-height:var(--lh-lede); }
.prose > * + * { margin-top:var(--sp-5); }
.prose p { margin:0; }
/* 移送したページの読み物。2026-08-24 に公開中サイトから 34 ページを移して h2 を
   使うようになるまで、`.prose h2` の指定が無くブラウザの既定（2em・上下 0.83em）
   がそのまま出ていた。読み物ページ（.article__body）と同じ組みへ揃える。 */
.prose h2 { margin-top:var(--sp-10); font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-h3); line-height:var(--lh-head); color:var(--ink); }
.prose > :first-child { margin-top:0; }
.prose h3 { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-h3);
  line-height:var(--lh-card); color:var(--ink); margin-top:var(--sp-9); }
.prose h4 { font-weight:var(--fw-bold); font-size:var(--fs-card); color:var(--ink); margin-top:var(--sp-7); }
.prose ul, .prose ol { margin:0; padding-left:1.4em; }
.prose li + li { margin-top:var(--sp-2); }
.prose a { color:var(--action); font-weight:var(--fw-bold); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover { color:var(--action-hover); }
/* 一覧の行は、行そのものが link。本文中の link と同じ扱いにすると、分類・日付・
   読了時間・題名・説明文まで全部が青い太字の下線になる（研究のカテゴリー頁で
   実際にそうなっていた）。行は行として組み、色と下線は中の題名が担う。 */
.prose a.list-row { color:inherit; font-weight:inherit; text-decoration:none; }
.prose a.list-row:hover { color:inherit; }

/* ---- 単文の主張（ミッション・ビジョン）---- */
.statement { font-family:var(--jp); font-weight:var(--fw-bold); font-size:clamp(21px,2.6vw,32px);
  line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink); max-width:26ch; margin:0; }
.statement--accent { color:var(--action); }
.section--alt .statement { max-width:34ch; }

/* ---- 沿革 ---- */
.timeline { border-top:1px solid var(--line-2); }
.tl-row { display:grid; grid-template-columns:200px 1fr; gap:clamp(12px,3vw,40px);
  padding:clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line); align-items:start; }
.tl-date { font-family:var(--sans); font-weight:var(--fw-bold); font-size:var(--fs-small);
  color:var(--action); padding-top:3px; }
.tl-body { margin:0; color:var(--body); font-size:var(--fs-base); line-height:var(--lh-body); }
@media (max-width:600px){ .tl-row { grid-template-columns:1fr; gap:var(--sp-1); } }

/* ---- 一覧の行（研究ノート・お知らせ）---- */
.list-rows { border-top:1px solid var(--line-2); }
.list-row { display:block; padding:clamp(20px,2.4vw,28px) var(--sp-4);
  margin-inline:calc(-1 * var(--sp-4)); border-bottom:1px solid var(--line);
  border-radius:var(--radius); transition:background-color var(--dur); }
.list-row:hover { background:var(--paper-alt); }
.list-row__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-3); color:var(--action); }
/* 中黒の区切りも同じ理由で罫線の色をやめる（白地 1.36:1 → 5.02:1）。 */
.list-row__meta span:nth-child(even) { color:var(--muted); font-weight:var(--fw-regular); }
.list-row__meta span:not(:first-child):nth-child(odd) { color:var(--muted); font-weight:var(--fw-regular); letter-spacing:var(--ls-0); }
.list-row__title { margin:var(--sp-2) 0 0; font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-lead); line-height:var(--lh-card); color:var(--ink); transition:color var(--dur); }
.list-row:hover .list-row__title { color:var(--action); }
.list-row__excerpt { margin:var(--sp-2) 0 0; max-width:76ch; font-size:var(--fs-small);
  line-height:var(--lh-body); color:var(--muted); }
/* 一覧が .prose の中に置かれる頁（研究のカテゴリー・著者一覧・英語版）では
   .prose p { margin:0 } のほうが詳しく、題名と説明文がくっついて出る。
   記事末尾のライセンス行で踏んだのと同じ罠。 */
.prose .list-row__excerpt { margin-top:var(--sp-2); }

/* ---- 分類カード ---- */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-grid); }
.cat-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--sp-6); transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.cat-card:hover, .cat-card:focus-visible { border-color:var(--line-2); box-shadow:var(--shadow-card); transform:translateY(var(--lift)); }
/* 札は link。もとは div のままで、10 のテーマがどこからも開けなかった。 */
a.cat-card { display:block; color:inherit; text-decoration:none; }
.cat-card__t { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-card);
  line-height:var(--lh-card); color:var(--ink); }
.cat-card__d { margin:var(--sp-2) 0 0; font-size:var(--fs-small); line-height:var(--lh-body); color:var(--muted); }
@media (max-width:1000px){ .cat-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cat-grid { grid-template-columns:1fr; } }

/* ---- メンバー ---- */
.members__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-feature); }
.member-card { display:grid; grid-template-columns:72px 1fr; grid-template-areas:"ava name" "role role" "bio bio";
  column-gap:var(--sp-5); row-gap:var(--sp-3); align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad-card); transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.member-card:hover { border-color:var(--line-2); box-shadow:var(--shadow-card); transform:translateY(var(--lift)); }
.member-card--lead { grid-column:1 / -1; }
.member-card__avatar { grid-area:ava; width:72px; height:72px; border-radius:var(--radius);
  background:var(--paper-4); display:grid; place-items:center;
  font-family:var(--sans); font-weight:var(--fw-medium); font-size:var(--fs-h3);
  letter-spacing:var(--ls-5); color:var(--action); }
/* 顔写真を入れた札。頭文字の札と同じ大きさ・同じ角丸のまま、中身だけ画像にする。
   画像は縦横比を保って面いっぱいに敷く（object-fit:cover）。 */
.member-card__avatar--photo { overflow:hidden; }
.member-card__avatar img { width:100%; height:100%; object-fit:cover; display:block;
  border-radius:inherit; }
.member-card > div:not([class]) { grid-area:name; min-width:0; }
.member-card__name { font-family:var(--jp); font-weight:var(--fw-bold); font-size:var(--fs-h3);
  line-height:var(--lh-card); color:var(--ink); }
.member-card__reading { margin-top:2px; font-size:var(--fs-caption); color:var(--muted); }
.member-card__role { grid-area:role; font-family:var(--sans); font-size:var(--fs-caption);
  font-weight:var(--fw-bold); letter-spacing:var(--ls-3); color:var(--action); }
.member-card__bio { grid-area:bio; margin:0; font-size:var(--fs-small);
  line-height:var(--lh-body); color:var(--body); }
@media (max-width:820px){ .members__grid { grid-template-columns:1fr; } }

/* ---- 募集職種 ---- */
.position-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad-card); }
.position-card + .position-card { margin-top:var(--gap-feature); }
.position-card__type { display:inline-block; font-family:var(--sans); font-size:var(--fs-caption);
  font-weight:var(--fw-bold); letter-spacing:var(--ls-3); color:var(--action);
  background:var(--action-050); padding:5px var(--sp-3); border-radius:var(--radius-pill); }
/* 求人名は h2 で組む。もとは div だったため、見出しで拾うと h1「採用」の次が
   いきなり h4「主な業務」になり、**どの求人の話かが読み上げでたどれなかった**
   （2026-08-17 にアクセシビリティツリーを実測して発覚）。h2 にすると既定の
   上下余白が付くので、margin を一括で指定して見た目を元のまま据え置く。 */
.position-card__title { margin:var(--sp-4) 0 0; font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-feature); line-height:var(--lh-card); color:var(--ink); }
.position-card__en { margin-top:2px; font-family:var(--sans); font-size:var(--fs-meta);
  letter-spacing:var(--ls-3); color:var(--muted); }
.position-card__summary { margin:var(--sp-3) 0 0; max-width:70ch; font-size:var(--fs-base);
  line-height:var(--lh-body); color:var(--body); }
.position-card__cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-feature);
  margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--line); }
.position-card__cols h3 { margin:0 0 var(--sp-3); font-size:var(--fs-small);
  font-weight:var(--fw-bold); color:var(--ink); }
.position-card__cols ul { margin:0; padding-left:1.3em; color:var(--body);
  font-size:var(--fs-small); line-height:var(--lh-body); }
.position-card__cols li + li { margin-top:var(--sp-2); }
.position-card__foot { margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line);
  font-size:var(--fs-small); line-height:var(--lh-body); color:var(--muted); }
.position-card__foot a { color:var(--action); font-weight:var(--fw-bold);
  text-decoration:underline; text-underline-offset:3px; }
@media (max-width:820px){ .position-card__cols { grid-template-columns:1fr; } }

/* ---- お問い合わせ ---- */
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-feature); }
.contact-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:var(--pad-card); }
.contact-card__label { font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-3); color:var(--action); }
.contact-card__value { margin-top:var(--sp-3); font-family:var(--sans); font-weight:var(--fw-bold);
  font-size:var(--fs-h3); line-height:var(--lh-card); color:var(--ink); word-break:break-all; }
.contact-card__value a { color:var(--action); transition:color var(--dur); }
.contact-card__value a:hover { color:var(--action-hover); }
.contact-card__note { margin:var(--sp-3) 0 0; font-size:var(--fs-small);
  line-height:var(--lh-body); color:var(--muted); }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; } }

/* ---- 研究ノート本文 ---- */
/* ヘッダーは position:sticky で、下の内容を 11px 引き上げる負の margin を持つ
   （トップページでヒーローをヘッダーの下へ潜らせるため）。ヒーローを持たない
   記事ページはその分を自分で戻さないと、パンくずと日付がヘッダーに潜り込む。
   下層ページの .hero--page と同じ上余白を取る。 */
.article { padding-block:clamp(34px,3.6vw,52px) var(--section-y); }
.article__inner { max-width:760px; margin-inline:auto; }
.article__tag { display:inline-block; font-family:var(--sans); font-size:var(--fs-caption);
  font-weight:var(--fw-bold); letter-spacing:var(--ls-3); color:var(--action); }
.article__title { margin:var(--sp-4) 0 0; font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:clamp(26px,3.4vw,40px); line-height:var(--lh-head); letter-spacing:var(--ls-tight); color:var(--ink); }
.article__dek { margin:var(--sp-5) 0 0; font-size:var(--fs-lede);
  line-height:var(--lh-lede); color:var(--body); }
.article__meta { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); margin-top:var(--sp-5);
  padding-bottom:var(--sp-5); border-bottom:1px solid var(--line);
  font-size:var(--fs-caption); color:var(--muted); }
.article__lead-image { margin:var(--sp-8) 0 0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:16/9; background:var(--paper-4); }
.article__lead-image img { width:100%; height:100%; object-fit:cover; }
.article__body { margin-top:var(--sp-8); color:var(--body); font-size:var(--fs-base); line-height:var(--lh-body); }
.article__body > * + * { margin-top:var(--sp-5); }
.article__body p { margin:0; }
.article__body h2 { margin-top:var(--sp-10); font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-h3); line-height:var(--lh-head); color:var(--ink); }
.article__body h3 { margin-top:var(--sp-9); font-weight:var(--fw-bold);
  font-size:var(--fs-card); line-height:var(--lh-card); color:var(--ink); }
.article__body ul, .article__body ol { margin:0; padding-left:1.4em; }
.article__body li + li { margin-top:var(--sp-2); }
.article__body a { color:var(--action); font-weight:var(--fw-bold);
  text-decoration:underline; text-underline-offset:3px; }
.article__body blockquote { margin:0; padding:var(--sp-5) var(--sp-6);
  background:var(--paper-alt); border-left:3px solid var(--action); border-radius:0 var(--radius) var(--radius) 0; }
/* 著者名は .article__foot の中に置く行なので、区切り線と上余白は親側に持たせる。
   ここで border-top を持つと、span の行ボックスにだけ線が引かれて崩れる。 */
.article__author { font-size:var(--fs-small); line-height:var(--lh-body); color:var(--muted); }
/* 著者名と「一覧へ」釦を同じ行の両端に置く。block のままだと釦が文字に
   くっついて、縦位置も揃わない。幅が足りなければ折り返す。 */
.article__foot { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-4) var(--sp-5); margin-top:var(--sp-8); padding-top:var(--sp-6);
  border-top:1px solid var(--line); }
/* ライセンス表記。記事の末尾に置き、どこまでが対象かを文で明示する
   （Creative Commons が「対象が分かる場所に置くこと」を求めている）。
   著者名より一段控えめだが、読めない濃さにはしない（--color-faint は
   白地で 2.95:1 しか出ず、実際に基準割れで公開されていた）。 */
.article__license { margin-top:var(--sp-6); font-size:var(--fs-small);
  line-height:var(--lh-body); color:var(--muted); }
/* 移送してきた記事は本文が .prose の中にある。.prose の子への余白指定が
   後勝ちで効き、上の margin-top が 0 になっていた（実測）。同じ指定を
   .prose の中でも効く強さで置き直す。 */
.prose .article__license { margin-top:var(--sp-6); }
.article__license a { color:var(--action); font-weight:var(--fw-bold); }
/* 著者名は人物紹介への link。周りと同じ色のままだと link だと分からないので、
   下線で示す（色だけで伝えない）。 */
.article__author a { color:inherit; text-decoration:underline;
  text-underline-offset:0.2em; text-decoration-thickness:1px; }

/* 記事末尾の誘導。移送してきた 4 本では素の段落 2 つのまま置かれていて、
   本文の続きに見えるうえ、行き先の link が無かった。 */
.article__cta { margin-top:var(--sp-10); padding:var(--sp-8) var(--sp-7);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); }
.article__cta h2 { margin:0; font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-card); line-height:var(--lh-card); color:var(--ink); }
.article__cta p { margin:var(--sp-3) 0 0; font-size:var(--fs-small);
  line-height:var(--lh-body); color:var(--muted); }
.article__cta .btn { margin-top:var(--sp-6); }

/* ほかのノートは 3 本並ぶ。2 列だと 3 本目だけが次の行に取り残される。 */
.article-more { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-grid); margin-top:var(--sp-5); }
@media (max-width:1000px){ .article-more { grid-template-columns:1fr 1fr; } }
@media (max-width:820px){ .article-more { grid-template-columns:1fr; } }

/* ---- 設立趣意書 — 書面として読ませるため、本文だけ明朝体にする。
       淡いグレーの地（.section--alt）の上に白い紙を 1 枚置く見立てにする。 ---- */
.prospectus-wrap { max-width:820px; margin-inline:auto; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(32px,5vw,72px) clamp(24px,5vw,72px); }
.prospectus__head { text-align:center; padding-bottom:var(--sp-8);
  border-bottom:1px solid var(--line); }
.prospectus__tagline { font-family:var(--sans); font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--action); }
.prospectus__doctitle { margin-top:var(--sp-4); font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:clamp(24px,3.2vw,36px); line-height:var(--lh-head); letter-spacing:var(--ls-3); color:var(--ink); }
.prospectus__byline { margin-top:var(--sp-3); font-size:var(--fs-meta); color:var(--muted); }
.prospectus__serif, .prospectus__body { font-family:var(--mincho); }
.prospectus__body { margin-top:var(--sp-8); color:var(--body);
  font-size:var(--fs-base); line-height:var(--lh-prospectus); text-align:justify; }
.prospectus__body > p.is-pivot { font-weight:var(--fw-bold); color:var(--ink); }
.prospectus__body strong { font-weight:var(--fw-bold); color:var(--ink); }
.prospectus__sec + .prospectus__sec { margin-top:var(--sp-9); }
.prospectus__sec h2 { margin:0 0 var(--sp-4); font-family:var(--jp); font-weight:var(--fw-bold);
  font-size:var(--fs-h3); line-height:var(--lh-head); color:var(--ink); }
.prospectus__sec p { margin:0; }
.prospectus__sec p + p { margin-top:var(--sp-5); }
.prospectus__list { margin:var(--sp-5) 0 0; padding-left:1.4em; }
.prospectus__list li + li { margin-top:var(--sp-3); }
.prospectus__sign { margin-top:var(--sp-10); padding-top:var(--sp-6);
  border-top:1px solid var(--line); text-align:right; font-size:var(--fs-base);
  line-height:var(--lh-body); color:var(--body); }

/* ---- 一覧・記事で使う戻り導線 ---- */
.link-view-all { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-weight:var(--fw-bold); font-size:var(--fs-ui); color:var(--action); }
.link-view-all:hover { color:var(--action-hover); }

/* ============================================================================
   触った時の返事（2026-08-19 に UI キットから移した）
   ----------------------------------------------------------------------------
   キットには :active・:focus-visible・動きを減らす設定への追従を入れたのに、
   サイト側は :active が 0 箇所、:focus-visible が 2 箇所しかなかった。
   キーボードだけで操作する人には、いまどこにいるかがほぼ見えない状態である。
   強さは中村の判断で「控えめ」に揃える（色がわずかに変わり、押した時だけ
   1px 沈む）。所要時間は既存の --dur-fast（0.18 秒）を使い、新しい時間の
   トークンは足さない。
   ========================================================================= */

/* 輪は影で描く。outline だと角の丸みに沿わず、丸い釦に四角い枠が出る。
   影は要素自身の丸みに従うので、輪の丸みを別に指定してはならない。 */
.csl a:focus-visible,
.csl button:focus-visible,
.csl [tabindex]:focus-visible,
.csl input:focus-visible,
.csl select:focus-visible,
.csl textarea:focus-visible { outline:none; box-shadow:var(--ring); }

/* 素の文字リンクは自分で丸みを持たないので、輪だけ少し丸める */
.csl a:not([class]):focus-visible { border-radius:var(--radius-sm); }

/* 押し込み。沈むのは 1px で、影は動かさない。深く沈めると、指を離した後に
   位置が戻る動きが目に付き、押し間違えたように見える。 */
.csl .nav__ico:active,
.csl .chero__toggle:active,
.csl .brand__btn:active,
.csl .page-top:active,
.csl .link-view-all:active { transform:translateY(1px); }
.csl .link-view-all:active { color:var(--action-press); }
.csl .nav__link:active { color:var(--action-press); }

@media (prefers-reduced-motion: reduce) {
  .csl .nav__ico:active,
  .csl .chero__toggle:active,
  .csl .brand__btn:active,
  .csl .page-top:active,
  .csl .link-view-all:active { transform:none; }
}