@charset "UTF-8";
/* ==========================================================================
   トロゴ生命科学 領域サイト — style.css
   Design tokens follow Document/01_サイト基本仕様.md (Teal/Navy base).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --c-navy:        #081E3A;
  --c-teal:        #00A3A3;
  --c-aqua:        #7ED0D6;
  --c-soft-green:  #4CC0BA;
  --c-light-gray:  #F2F4F7;

  /* Accent colours */
  --c-purple: #5A5CFF;
  /* DATA/HPコンセプト.png「07 カラーパレット」のアクセントカラー実測値。
     以前の #FFBA00 は同スライドのラベル（#FF8A00）の読み取り誤り。 */
  --c-orange: #FF8A00;
  --c-red: #EE0000;         /* 原稿の赤字 */
  --c-blue:   #3B68FF;
  --c-green:  #22C55E;
  --c-white:  #FFFFFF;

  /* Derived tones */
  --c-navy-80:   rgba(8, 30, 58, .80);
  --c-navy-64:   rgba(8, 30, 58, .64);
  --c-teal-dark: #00807F;
  /* 白抜き文字を載せられる soft-green の暗いトーン（白との比 4.6:1 = AA）。
     --c-soft-green #4CC0BA のままでは 2.2:1 で AA 未達。
     現在は未使用。15章の研究者プロフィール表を「原稿の色」から
     「ブランドの班カラー（AA準拠）」に切り替える場合に使う。 */
  --c-soft-green-dark: #33817D;
  --c-teal-08:   rgba(0, 163, 163, .08);
  --c-teal-16:   rgba(0, 163, 163, .16);
  --c-border:    #DDE3EA;
  --c-navy-24:   rgba(8, 30, 58, .24);   /* 表組の区切り線 */
  --c-body:      #253247;

  /* Typography */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
  --font-en: "Montserrat", "Noto Sans JP", system-ui, sans-serif;

  /* Layout */
  /* PC の最大幅は 2 系統。
     --wrap-wide (1280px): ヘッダー / グローバルナビ / ヒーロー / フッター。
       モックアップの外周フレームに合わせた幅。
     --wrap (1200px, 内容幅 1152px): 本文コンテンツ列。
       モックアップのカード列は 1448px 中 ~1304px を占めるが、指定により 1200px 固定とし、
       カード内のアイコン寸法と余白側で見出しの折り返しを吸収する。 */
  --wrap-wide: 1280px;
  --wrap:      1200px;
  --wrap-nar:  880px;
  --gutter:    24px;
  --header-h:  84px;
  /* main.js writes the measured header height into --header-h-actual.
     Everything that must line up with the real header uses --header-h-eff. */
  --header-h-eff: var(--header-h-actual, var(--header-h));

  /* Effects */
  --radius:    12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(8, 30, 58, .06);
  --shadow-md: 0 6px 24px rgba(8, 30, 58, .08);
  --shadow-lg: 0 16px 48px rgba(8, 30, 58, .12);
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 64px; --gutter: 20px; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-eff) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-body);
  background: var(--c-white);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-navy);
  letter-spacing: .01em;
}

p  { margin: 0 0 1.4em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--c-teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
a:hover { color: var(--c-teal); }

img, svg, picture { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.4em; padding-left: 1.4em; }
li { margin-bottom: .4em; }

figure { margin: 0; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* <main> receives focus from the skip link; hide the resulting outline. */
main:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--c-teal);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--c-teal-16); color: var(--c-navy); }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-nar); }

.section { padding-block: clamp(56px, 8vw, 100px); }
.section--gray { background: var(--c-light-gray); }
.section--navy { background: var(--c-navy); color: rgba(255, 255, 255, .88); }
.section--navy h2, .section--navy h3 { color: var(--c-white); }

/* TOP ページの「ヒーロー → 3カード帯 → NEWS」だけ、縦の余白をモックアップ実測に合わせて
   詰める。モックアップ（原寸 1448px）を画素で測ると
     CTA ボタン下端 → カード上端     ≒ 55px（現行 158px）
     カード下端     → NEWS パネル上端 ≒ 28px（現行 200px）
   で、共通の .section（最大 100px）では広すぎる。下層5ページや TOP の他セクションは
   共通値のままにしたいので、この2セクションにだけ修飾クラスを当てて上書きする。
   ヒーロー側の残り（CTA ボタン下の約29px）は .hero__inner の padding-bottom が担当。 */
.section--cards { padding-block: clamp(20px, 2vw, 27px) clamp(12px, 1vw, 14px); }
/* NEWS パネル下端 → 概要リード見出しは、共通値のままだと
   100px（NEWS の下）＋ 100px（概要リードの上）＝ 約207px あった。
   この境目はモックアップに描かれていないため実測の根拠はなく、
   32px ＋ 56px ＝ 約95px に詰めている（調整可）。 */
.section--news  { padding-block: clamp(12px, 1vw, 14px) clamp(24px, 2.5vw, 32px); }

/* 帯の上下 padding。共通の .section（最大100px）だと帯が連続したとき境目が
   200px になるため、TOP 後半の3帯と下層ページの各帯はこちらを使う。上下同値。 */
.section--tight { padding-block: clamp(40px, 4vw, 56px); }

/* 本文組み（行送り・段落間）。TOP 後半の3帯と下層5ページの本文ブロックで共有する。
   共通の body(1.9) / .lead(2) / p の 1.4em はサイト全体の既定値なので、
   グローバルには触らず、本文を持つブロックにこのクラスを当てて上書きする。
   .prose p は p:last-child と同スコアなので、後勝ちを打ち消すために
   :last-child の 0 を再宣言する。 */
.prose .section-title { margin-bottom: .25em; }
.prose p              { line-height: 1.75; margin-bottom: .9em; }
.prose p:last-child   { margin-bottom: 0; }
/* リード文は太字。本文ブロックとの間だけは区切りとして従来の間隔を残す。 */
.prose .lead          { line-height: 1.7; font-weight: 700; margin-bottom: 1.4em; }
/* 本文ブロックと CTA ボタンの間は、段落間より少し開けて区切りにする。 */
.prose p.text-center  { margin-top: 1.8em; }

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--c-navy);
  color: var(--c-white);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--c-white); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Typography components
   -------------------------------------------------------------------------- */
.section-title {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  margin-bottom: .5em;
}
.section-title__en {
  display: block;
  margin-top: .5em;
  font-family: var(--font-en);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .16em;
  /* text-transform: uppercase は使わない。原稿（DATA/HP文章等の案.docx）は
     "Research Organization" / "Scientific Advisors" のように頭文字だけ大文字で
     書かれており、全て大文字にすると原稿と違う表記になる。
     HTML 側も8箇所すべて原稿どおりの大小で書いてあるので、そのまま表示する。 */
  /* --c-teal is 3.1:1 on white — below AA for small text. Use the dark tone. */
  color: var(--c-teal-dark);
}

.lead {
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 2;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1em;
  font-family: var(--font-en);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-teal-dark);
}

.text-teal { color: var(--c-teal); }
.text-orange { color: var(--c-orange); }
/* 原稿（DATA/HP文章等の案.docx）の赤字 #EE0000。研究概要 03 の
   「かじり取りによって生命活動がどのように調節されているのか」に使う。 */
.text-red    { color: var(--c-red); }
/* 原稿の下線。text-decoration だけだと文字に近すぎて詰まって見えるため、
   下げ幅と太さを指定して読みやすくしている。 */
.text-underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.text-center { text-align: center; }

/* --------------------------------------------------------------------------
   5. Buttons & links
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .85em 1.9em;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease),
              box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { flex: none; width: 1em; height: 1em; }

.btn--primary {
  background: var(--c-navy);
  color: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--c-teal-dark); color: var(--c-white); box-shadow: var(--shadow-md); }

/* Filled teal button. Uses --c-teal-dark rather than --c-teal: white text on
   #00A3A3 is only 2.9:1, while #00807F clears AA at 4.8:1. This also matches
   the mockup, whose buttons are a dark teal (#00809B). */
.btn--teal {
  background: var(--c-teal-dark);
  color: var(--c-white);
  box-shadow: var(--shadow-sm);
}
.btn--teal:hover { background: var(--c-navy); color: var(--c-white); box-shadow: var(--shadow-md); }

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-navy);
}
.btn--ghost:hover { border-color: var(--c-teal); color: var(--c-teal-dark); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .6em;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--c-teal-dark);
  text-decoration: none;
}
.link-arrow::after {
  content: "";
  flex: none;
  width: .5em;
  height: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.link-arrow:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------------------------------
   6. Header / global navigation
   -------------------------------------------------------------------------- */
/* The white bar and its shadow stay full-bleed, but the logo block and the
   navigation are held inside the 1280px outer frame (--wrap-wide), which is
   wider than the 1200px content column. The padding trick avoids adding a
   wrapper element to all six pages: at viewports wider than --wrap-wide it
   grows to (100% - wrap-wide)/2 + gutter, which lands exactly on the hero and
   footer edges; below that it falls back to the plain gutter. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  min-height: var(--header-h);
  padding-inline: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  background: var(--c-white);
  box-shadow: 0 1px 0 rgba(8, 30, 58, .07);
}

/* The three lockup lines are centred on each other, as in the mockup. */
.site-logo {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
  width: clamp(168px, 17vw, 216px);
  padding: 12px clamp(14px, 1.6vw, 22px);
  background: var(--c-navy);
  color: var(--c-white);
  text-decoration: none;
}
.site-logo:hover { color: var(--c-white); opacity: .92; }

/* The three lockup lines are shared with the footer logo (section 17), so the
   two render identically. Only the surrounding box differs. */
.site-logo__word,
.footer-logo__word {
  font-family: var(--font-en);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
}
.site-logo__word .o-bite,
.footer-logo__word .o-bite { color: var(--c-teal); }

.site-logo__sub,
.footer-logo__sub {
  font-family: var(--font-en);
  font-size: clamp(.75rem, 1vw, .9375rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .34em;
  color: var(--c-aqua);
}

.site-logo__jp,
.footer-logo__jp {
  font-size: .625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .82);
}

.global-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 40px);
  /* No right padding: the nav's right edge is the content column's right edge. */
  padding-left: clamp(16px, 2.4vw, 40px);
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav__list li { margin: 0; }

.global-nav__link {
  position: relative;
  display: block;
  padding: 6px 2px;
  font-size: .875rem;
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: none;
  white-space: nowrap;
}
.global-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--c-teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s var(--ease);
}
.global-nav__link:hover { color: var(--c-teal-dark); }
.global-nav__link:hover::after { transform: scaleX(1); }

/* Current page is signalled by colour AND a thicker underline, so the cue
   does not rely on colour alone. --c-teal-dark clears AA at this size. */
.global-nav__link[aria-current="page"] { color: var(--c-teal-dark); }
.global-nav__link[aria-current="page"]::after { transform: scaleX(1); height: 3px; }

.nav-contact {
  flex: none;
  padding: .6em 1.3em;
  font-size: .8125rem;
}

.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: var(--c-navy);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; margin-left: auto; }
  .global-nav {
    position: fixed;
    inset: var(--header-h-eff) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    max-height: calc(100dvh - var(--header-h-eff));
    padding: 8px var(--gutter) 28px;
    overflow-y: auto;
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .global-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .global-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .global-nav__link {
    padding: 16px 4px;
    font-size: 1rem;
    border-bottom: 1px solid var(--c-border);
  }
  .global-nav__link::after { display: none; }
  /* The desktop underline is gone here, so the current page needs its own
     non-colour cue — and --c-teal alone is 3.1:1, below AA at this size. */
  .global-nav__link[aria-current="page"] {
    color: var(--c-teal-dark);
    border-left: 3px solid var(--c-teal-dark);
    padding-left: 12px;
  }
  .nav-contact { margin-top: 20px; justify-content: center; }
  .site-header { align-items: center; }
  .site-logo { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   7. Hero (top page)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 40%, rgba(126, 208, 214, .28) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #FBFDFE 0%, #EEF5F8 100%);
}

/* The visual is an absolutely positioned layer covering the right side of the
   hero at full height. It lives inside .hero__inner (a .wrap), so its right
   edge lands on the 1280px outer frame rather than the viewport edge.
   Insets resolve against .hero__inner's padding box, hence the --gutter on the
   right to line up with the header and the card row. */
.hero__media {
  position: absolute;
  inset: 0 var(--gutter) 0 42%;
  z-index: 1;
  mix-blend-mode: multiply;
  /* Feather the left edge into the gradient. Now that the artwork stops at the
     content column instead of running off-screen, the right and bottom edges
     get a short fade too so they do not read as a hard crop. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 34%, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 34%, #000 94%, transparent 100%),
    linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-composite: intersect;
}

.hero__slides {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
/* Slide 1 carries .is-active in the markup, so it shows without JavaScript. */
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ヘッダー・フッターと同じ 1280px の外周フレームに揃える（本文は 1200px）。 */
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--wrap-wide);
  display: flex;
  align-items: center;
  min-height: clamp(440px, 36vw, 600px);
  /* 下側だけ詰める。PC ではヒーローの高さは min-height ではなく中身で決まっているので、
     padding-bottom がそのまま CTA ボタン下の余白になる（モックアップ実測 ≒29px）。
     上側はモックアップと差が無いので従来どおり。 */
  padding-block: clamp(32px, 4vw, 56px) clamp(18px, 1.95vw, 28px);
}
.hero__content { width: min(100%, 58%); }

.hero__meta {
  margin-bottom: 1.6em;
  font-size: .75rem;
  line-height: 1.9;
  color: var(--c-navy-64);
}
.hero__meta strong { font-weight: 700; color: var(--c-navy); }
.hero__meta .en {
  display: block;
  margin-top: .3em;
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: .01em;
}

/* Upper bound kept at 3.5rem so 「トロゴサイトーシス」 stays on one line
   inside the left column at 1440px, matching the mockup. */
.hero__title {
  font-size: clamp(2.25rem, 1.3rem + 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .015em;
  color: var(--c-navy);
}

.hero__subtitle {
  margin: .45em 0 1.1em;
  font-size: clamp(1.25rem, .85rem + 1.7vw, 1.875rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
}

.hero__text {
  max-width: 34em;
  margin-bottom: 2em;
  font-size: clamp(.875rem, .82rem + .2vw, 1rem);
  line-height: 2.05;
  color: var(--c-body);
}

/* Bleed the visual to the right viewport edge like the mockup.
   min() keeps the old -gutter behaviour while the viewport is narrower than
   --wrap, and grows the negative margin once the wrap stops expanding.
   .hero has overflow:hidden so the 100vw term cannot cause a scrollbar. */
.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(20px, 3vw, 34px);
  z-index: 3;
  display: flex;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero__dots li { margin: 0; }
/* Hit area is 28px even though the dot reads as 9px. */
.hero__dot {
  display: block;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* The dots sit over artwork that is light in some slides and dark in others,
   so each one carries its own ring and stays legible on either. */
.hero__dot::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 0 1px rgba(8, 30, 58, .28), 0 1px 3px rgba(8, 30, 58, .25);
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.hero__dot:hover::before { transform: scale(1.25); }
.hero__dot[aria-current="true"]::before {
  background: var(--c-teal);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 1px 3px rgba(8, 30, 58, .3);
  transform: scale(1.15);
}

@media (max-width: 900px) {
  /* Stack: artwork on top as a normal block, copy below. */
  .hero__inner {
    display: block;
    min-height: 0;
    padding-block: 0 40px;
  }
  .hero__content { width: 100%; }

  .hero__media {
    position: relative;
    inset: auto;
    margin-inline: calc(var(--gutter) * -1);
    margin-bottom: 28px;
    aspect-ratio: 16 / 10;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .hero__slides { position: absolute; }

  .hero__dots { position: static; margin-top: 22px; justify-content: center; }
}

/* --------------------------------------------------------------------------
   8. Feature cards (top page 3-up)
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.2vw, 28px);
}

.feature-card {
  display: flex;
  flex-direction: column;
  /* 26px at the top end matches the mockup, whose card padding measures
     ~25.6px on every side (12px in the 680px-wide mockup ÷ 0.4696 scale). */
  padding: clamp(20px, 2vw, 26px);
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.feature-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
/* Height-driven so each icon keeps its own aspect ratio (the three viewBoxes
   have different ratios, mirroring the mockup's 119/143/165px widths).
   The container is capped at 1200px while the title stays at its designed
   size, so the icon is the variable that has to give: at 48px the widest
   icon is 118px and the longest title line (「かじり取り」という, ~180px)
   still fits on one line inside the 305px card interior. */
.feature-card__icon { flex: none; width: auto; height: 48px; }

/* Below 1200px the card is narrower than the icon + a 9-character title, so
   stack them rather than let the title break into five lines. Stacked, the
   icon has the full card width and can be a little larger. */
@media (max-width: 1199px) {
  .feature-card__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .feature-card__icon { height: clamp(46px, 5vw, 58px); }
}
.feature-card__title {
  font-size: clamp(1rem, .93rem + .3vw, 1.125rem);
  line-height: 1.55;
}
/* 余りの高さ（行の中でいちばん高いカードに揃うぶん）をどこへ逃がすか。
   ・本文の上（margin-top: auto）… 本文の上端が3枚でずれる（旧実装）
   ・本文とリンクの間（link に margin-top: auto）… 本文の上端が揃う ← 指示によりこちら
   本文は head の直後から始め、余りは本文とリンクの間に置く。
   これでリンクは従来どおりカード下端に残る。 */
.feature-card__body {
  margin-top: 0;
  /* 28px + the body's and link's half-leading lands on the mockup's 36px
     between the last body line and the link text. */
  margin-bottom: 28px;
  font-size: .875rem;
  line-height: 1.95;
}
/* The shared .link-arrow inherits the body's 1.9 line-height, which padded the
   link with ~7px of half-leading above and below. The mockup's link sits 26px
   off the card floor — the padding alone. */
.feature-card .link-arrow { margin-top: auto; line-height: 1.2; }

/* 横並びのカードで head / 本文 / リンクの**行位置そのものを共有**する。
   見出しは <br> で 3行 / 2行 / 2行 と行数が違い、さらに 1200px 未満では
   カード幅が縮んで折り返しが増えるため、行数を決め打ちにすると必ずどこかの
   画面幅でずれる。subgrid なら親グリッドの行を3枚が共有するので、
   どの幅でも head の高さ＝本文の開始位置が自動的に揃う。
   row-gap は親の gap がカード内部の3行にも入ってしまうので 0 にし、
   折り返した段どうしの間隔はカード側の margin-bottom で作る
   （最終段のぶんだけ余るので .card-grid の負マージンで相殺する）。 */
@supports (grid-template-rows: subgrid) {
  .card-grid {
    row-gap: 0;
    margin-bottom: calc(-1 * clamp(20px, 2.2vw, 28px));
  }
  .feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;      /* head / 本文 / リンク */
    row-gap: 0;
    margin-bottom: clamp(20px, 2.2vw, 28px);
  }
}
/* subgrid 非対応ブラウザ向けの保険。いちばん長い見出しの行数ぶんを確保して
   head の高さを揃える（折り返しが増える幅では完全には揃わない）。 */
@supports not (grid-template-rows: subgrid) {
  .feature-card__title { min-height: calc(3 * 1.55em); }
}

/* --------------------------------------------------------------------------
   9. News list
   -------------------------------------------------------------------------- */
.news-panel {
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px);
  background: var(--c-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.news-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--c-navy);
}
.news-panel__title {
  font-family: var(--font-en);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: .1em;
}

.news-list { margin: 0; padding: 0; list-style: none; }
.news-list li { margin: 0; border-bottom: 1px solid var(--c-border); }

/* 日付 → 種別タグ → 見出し（カンプ準拠） */
.news-list__item {
  display: grid;
  grid-template-columns: 8.5em auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 20px;
  padding: 20px 4px;
  color: var(--c-body);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.news-list__item:hover { background: var(--c-teal-08); color: var(--c-navy); }

.news-list__date {
  font-family: var(--font-en);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-navy-64);
  white-space: nowrap;
}
.news-list__title { font-size: .9375rem; font-weight: 500; line-height: 1.8; }
.news-list__item:hover .news-list__title { color: var(--c-teal-dark); }

.news-tag {
  flex: none;
  align-self: center;
  padding: .25em 1em;
  border: 1px solid var(--c-teal);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-teal-dark);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .news-list__item { grid-template-columns: 1fr; gap: 6px; }
  .news-tag { justify-self: start; }
}

/* --------------------------------------------------------------------------
   10. Page header (lower pages)
   -------------------------------------------------------------------------- */
/* バナーは「文字の入っていない1枚絵」＋ HTML のテキストで構成する。
   文字を画像に焼き込まないので、拡大しても滲まず、コピー・読み上げ・検索ができ、
   文言の差し替えも HTML の1行で済む。
     header-about.jpg        1280×720（DATA2/領域概要文字無し.png 由来）
     header-organization.jpg 1280×720（DATA2/研究組織文字無し.png 由来）
   どちらも 16:9 なので **2ページの高さは自動的に揃う**。
   （旧画像は 1600×686 と 1600×900 で比率が違い、高さを揃えるために
     研究組織だけ幅を 76.2% に縮めていた。その特殊対応は不要になったので削除。）

   帯（グラデーション）は全幅のまま、中の画像だけを TOP と同じ外周フレームに収める。
   padding は .site-header と同じ式で、下限だけ --gutter → 0 に変えたもの:
     ビューポート ≥ 1280px … (100% − 1280)/2 + 24px
        → 画像幅は 1232px で一定になり、左右端がヘッダーのナビや
          フッターのコンテンツ端とピタリ一致する。TOP も .hero__inner
          （max-width:1280px）の中で .hero__media を --gutter 分内側に寄せて
          同じ位置に揃えているので、その見え方に合わせている。
     ビューポート ≤ 1232px … 0
        → 左右余白なしの全幅表示。
   つまり画像幅は min(ビューポート, 1232px)。
   ただし**高さの上限は 530px** という指示があるため、画像の幅を
   530 × 16/9 = 942px で頭打ちにして中央に置く（下の --hero-max-h を参照）。
   画像を切らずに高さを下げる方法は「幅も一緒に縮める」しかないため、
   1232px より広い画面では左右に帯のグラデーションが見える。

   以前は max-height（PC 440px / SP 300px）で高さを抑えていたため、
   object-fit: contain との組み合わせで左右にレターボックスの帯が出ていた。
   これは上記の外周フレームによる余白とは別物なので、復活させないこと。 */
.page-header {
  position: relative;
  padding-inline: max(0px, calc((100% - var(--wrap-wide)) / 2 + var(--gutter)));
  background: linear-gradient(100deg, #FBFBFD 0%, #F5F7FB 55%, #EFF3F9 100%);
}
/* 文字を重ねる基準の箱。container-type: inline-size により、中の cqw が
   「この箱の幅の1%」になる。画像がどの幅で表示されても文字組みの比率が保たれる。 */
.page-header__media {
  position: relative;
  container-type: inline-size;
  /* 高さの上限 530px を、画像を切らずに満たすための幅の上限。
     16:9 なので 530 × 16 / 9 = 942.2px。
     画像・重ねる文字の両方がこの箱を基準にするので、
     幅を絞れば文字組みもそのまま比例して収まる。
     ★ 高さの上限を変えるときは --hero-max-h だけを直せばよい。 */
  --hero-max-h: 530px;
  max-width: calc(var(--hero-max-h) * 16 / 9);
  margin-inline: auto;
}
.page-header__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* 画像の左側の余白に置く文字。画像側は左およそ 40% が地色なので、
   その中に収まる幅（38cqw）で折り返す。 */
.page-header__overlay {
  position: absolute;
  left: 7.1cqw;
  top: 50%;
  transform: translateY(-50%);
  /* 画像の地色部分（左およそ 42%）に収まる幅。研究組織のリード文
     「分野を越えて集い、…共通原理に挑む」（24字）が1行に入る値。 */
  width: 41cqw;
  color: var(--c-navy);
}
.page-header__title {
  margin: 0;
  font-size: 7.67cqw;   /* 基準 5.9cqw の 1.3 倍 */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .08em;
}
.page-header__en {
  margin: .55em 0 0;
  font-family: var(--font-en);
  font-size: 2.15cqw;   /* 基準 1.65cqw の 1.3 倍 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .18em;
  color: var(--c-teal-dark);
}
/* 英語見出しとリード文のあいだの短い罫線（旧画像の版面を踏襲）。 */
.page-header__lead {
  position: relative;
  margin: 1.3em 0 0;
  padding-top: 1.05em;
  font-size: 1.58cqw;
  font-weight: 500;
  line-height: 1.6;
}
.page-header__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5.2cqw;
  height: 2px;
  background: var(--c-teal);
}

/* コンテナクエリ単位が使えないブラウザ向けのフォールバック。
   画像幅はビューポート幅の 100%（≤1232px）か 1232px 固定（>1232px）なので、
   vw ベースでほぼ同じ比率になる。 */
@supports not (container-type: inline-size) {
  .page-header__overlay { left: 7.1vw; width: 41vw; }
  .page-header__title   { font-size: 7.67vw; }
  .page-header__en      { font-size: 2.15vw; }
  .page-header__lead    { font-size: 1.58vw; }
  .page-header__lead::before { width: 5.2vw; }
  @media (min-width: 1232px) {
    .page-header__overlay { left: 87px; width: 505px; }
    .page-header__title   { font-size: 95px; }
    .page-header__en      { font-size: 26px; }
    .page-header__lead    { font-size: 20px; }
    .page-header__lead::before { width: 64px; }
  }
}

/* 狭い画面では、画像の左の余白に収まる文字が読めない大きさになる
   （幅 768px だとリード文が約 12px、640px だと約 10px）。
   重ねるのをやめて画像の下に置き、本文と同じ読める大きさに戻す。
   境界の 900px は --gutter が 24px → 20px に切り替わる点と揃えている。 */
@media (max-width: 900px) {
  .page-header__overlay {
    position: static;
    transform: none;
    width: auto;
    padding: 20px var(--gutter) 4px;
  }
  .page-header__title { font-size: clamp(2.275rem, 1.69rem + 2.86vw, 2.925rem); }
  .page-header__en    { font-size: 1.056rem; }
  .page-header__lead  { margin-top: 1.4em; padding-top: 1.2em; font-size: .875rem; }
  .page-header__lead::before { width: 40px; }
}

.breadcrumb {
  padding-block: 14px;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
  font-size: .75rem;
  color: var(--c-navy-64);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5em; }
.breadcrumb li + li::before { content: "／"; color: var(--c-border); }
.breadcrumb a { color: var(--c-navy-64); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-teal-dark); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--c-navy); font-weight: 700; }

/* --------------------------------------------------------------------------
   11. Content blocks
   -------------------------------------------------------------------------- */
.content-block { margin-bottom: clamp(56px, 7vw, 88px); }
.content-block:last-child { margin-bottom: 0; }

.content-block__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 1.4em;
  padding-bottom: .9em;
  border-bottom: 1px solid var(--c-border);
}
.content-block__num {
  flex: none;
  font-family: var(--font-en);
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--c-aqua);   /* 修飾クラスが無いときの既定 */
}
/* 章番号は原稿で1つずつ色が違う。値は DATA/HP文章等の案.docx の w:color 実測値で、
   ブランドパレットの近似色ではなく原稿の値をそのまま使っている。
     01 #009DA3（≈ --c-teal #00A3A3）
     02 #44C09A（≈ --c-soft-green #4CC0BA）
     03 #FF8A00（= --c-orange と一致）
     04 #7A61FF（≈ --c-purple #5A5CFF）
     05 #72D4D8（≈ --c-aqua #7ED0D6） */
.content-block__num--01 { color: #009DA3; }
.content-block__num--02 { color: #44C09A; }
.content-block__num--03 { color: #FF8A00; }
.content-block__num--04 { color: #7A61FF; }
.content-block__num--05 { color: #72D4D8; }
.content-block__title {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.5;
}

.figure {
  margin-block: clamp(28px, 3.4vw, 44px);
  padding: clamp(14px, 1.8vw, 24px);
  background: var(--c-light-gray);
  border-radius: var(--radius);
}
.figure img { width: 100%; border-radius: 6px; background: var(--c-white); }
.figure figcaption {
  margin-top: 14px;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--c-navy-64);
  text-align: center;
}
/* 図版の左上に置くラベル。原稿が図の上に見出し的な語（例「研究体制図」）を
   置いている場合に使う。figcaption を figure の最初の子にすると画像の上に出る。
   ★ 直上の .figure figcaption（0,1,1）より後ろに、同じ詳細度以上で書くこと。
      先に書くと図版キャプションの中央寄せ・13px・薄い文字色に負ける。 */
.figure .figure__label {
  margin-top: 0;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  font-size: clamp(.9375rem, .88rem + .25vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy);
  text-align: left;
}

.pull-quote {
  margin-block: clamp(28px, 3.4vw, 40px);
  padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 40px);
  background: linear-gradient(135deg, rgba(0, 163, 163, .07), rgba(126, 208, 214, .12));
  border-left: 4px solid var(--c-teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(1rem, .93rem + .3vw, 1.125rem);
  font-weight: 500;
  line-height: 2;
  color: var(--c-navy);
}
.pull-quote p { margin-bottom: .6em; }

/* --------------------------------------------------------------------------
   12. Research groups & member cards
   -------------------------------------------------------------------------- */
.group-block { margin-bottom: clamp(56px, 7vw, 96px); }
.group-block:last-child { margin-bottom: 0; }

/* 班カラーはここで一度だけ定義し、班バッジ（.group-badge）と研究者プロフィール表
   （.member__meta）の両方がこの変数を読む。片方だけ直に色を書くと、片方を変えた
   ときにもう片方が取り残されるため、必ずこの4行だけを触ること。
   値は原稿（DATA/HP文章等の案.docx）のテーブルスタイル実測値。
     A01 Accent 5 / A02 Accent 3 / A03 Accent 2 / B01 Accent 4
   詳しい経緯とコントラストは15章 .member__meta のコメントを参照。

   --group-accent（ラベル列・班バッジ）は原稿の値そのまま。
   --group-band（表の値の列の横縞）は、原稿の帯が accent の約41%濃度で
   本文が読みにくいという指摘を受け、半分の20%濃度に薄めた白混ぜ値にしている。
     A01 #B6DDE8 → #DBEEF4   A02 #D6E3BC → #EBF1DE
     A03 #E5B8B7 → #F2DCDB   B01 #CCC0D9 → #E6E0EC
   色相は原稿のまま。原稿の濃さに戻す場合は上記の左側の値に差し替える。 */
.group-block--a01 { --group-accent: #4BACC6; --group-band: #DBEEF4; }
.group-block--a02 { --group-accent: #9BBB59; --group-band: #EBF1DE; }
.group-block--a03 { --group-accent: #C0504D; --group-band: #F2DCDB; }
.group-block--b01 { --group-accent: #8064A2; --group-band: #E6E0EC; }

.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 1.2em;
}
.group-badge {
  flex: none;
  /* padding も letter-spacing も em 基準なので、ピルの大きさは font-size に追従する。 */
  padding: .38em 1.15em;
  border-radius: 999px;
  /* 表組みと同じ班カラー。班クラスが無いときだけ紺にフォールバック。 */
  background: var(--group-accent, var(--c-navy));
  font-family: var(--font-en);
  /* .group-title のちょうど半分（各項が下の値の半分）。見出しが 32px に育ったので
     13px 固定では小さく見えるため、見出しと同じカーブで一緒に拡大する。
       .group-title  clamp(1.5rem,   1.1rem + 1.6vw, 2rem)  = 24 → 32px
       .group-badge  clamp(.8125rem, .55rem +  .8vw, 1rem)  = 13 → 16px
     下限だけは従来の 13px に据え置き（狭い画面で今より小さくしないため）。 */
  font-size: clamp(.8125rem, .55rem + .8vw, 1rem);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-white);
}
/* 塗りは親の .group-block--aXX が持つ --group-accent（＝表組みと同じ色）を読む。
   HTML 側の .group-badge--a01〜--b01 は班を示すフックとして残してあるが、
   色指定はここには置かない（表組みと二重管理になるため）。 */

/* 指示により、班の見出しは「研究組織紹介」の見出し（.section-title）と同じ文字サイズ。
   .section-title のルールに相乗りさせず単独指定にしているのは、あちらが持つ
   margin-bottom: .5em が .group-head（バッジと横並びの flex 行）の中では
   余分な余白になるため。 */
.group-title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); }

.group-summary {
  margin-bottom: clamp(28px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--c-light-gray);
  border-radius: var(--radius);
  font-size: .9375rem;
}
/* 班のセクションは白 → グレー → 白 → グレーと交互になっている（A01/A03 がグレー）。
   グレーの帯の上では概要ボックスが地の色と同じ #F2F4F7 になって枠が消えてしまうため、
   そこだけ白地にする。白い帯（A02/B01）は従来どおり薄グレーのままで、
   どちらの帯でもボックスとして分かる状態になる。 */
.section--gray .group-summary { background: var(--c-white); }

.member {
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.member + .member { margin-top: clamp(24px, 3vw, 36px); }

.member__head {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* 指示により、写真はトリミングも角丸もしない。幅だけ揃えて高さは原寸比のまま
   （aspect-ratio 1/1 ＋ object-fit: cover で正方形に切っていたのをやめた）。
   素材の縦横比は 0.74〜1.00 とバラバラなので、表示高さも人によって変わる:
     三宅 600×809 → 226px / 中山 500×500 → 168px / 小山 600×600 → 168px
     津久井 219×248 → 190px / 井田 130×169 → 218px
   .member__head は align-items: start なので、高さが違っても隣の見出し・表は
   上端で揃ったままになる。HTML の width/height 属性が実寸と一致しているため、
   読み込み前のレイアウトシフトも起きない。 */
.member__photo {
  width: 168px;
  height: auto;
  background: var(--c-light-gray);
}

.member__name {
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  line-height: 1.4;
}
.member__name-en {
  display: block;
  margin-top: .35em;
  font-family: var(--font-en);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-teal-dark);
}

/* 研究者プロフィールの表。原稿（DATA/HP文章等の案.docx）は Word 標準スタイル
   「Grid Table 5 Dark – Accent N」で組まれており、次の3点が特徴:
     ・ラベル列（所属／職位／…）＝ アクセント色ベタ塗り＋白の太字
     ・値の列 ＝ 奇数行にアクセント色の淡いティント（横縞）
     ・セル間の罫線 ＝ 白 0.5pt
   そして班ごとに色を変えている（原稿の実測値）:
     A01（三宅・中山） Accent 5  ラベル #4BACC6 / 縞 #B6DDE8
     A02（小山）       Accent 3  ラベル #9BBB59 / 縞 #D6E3BC
     A03（津久井）     Accent 2  ラベル #C0504D / 縞 #E5B8B7
     B01（井田）       Accent 4  ラベル #8064A2 / 縞 #CCC0D9
   この4色は Word 既定パレット（Accent 2〜5）で、本サイトのブランドパレット
   （DATA/HPコンセプト.png「07 カラーパレット」）とは別系統だが、
   **指示により原稿の値をそのまま使う**。文字色も原稿どおり白の太字。

   なお白抜き文字のコントラストは A01 2.62:1 / A02 2.18:1 / A03 4.67:1 /
   B01 4.93:1 で、A01・A02 は WCAG AA（4.5:1）を下回る。原稿の見た目を優先した
   結果であることを明記しておく。AA を満たしたい場合の選択肢は2つ:
     ・ラベルの文字色を白 → var(--c-navy) にする（同じ塗りで 6.38:1 / 7.67:1）
     ・塗りをブランドの班カラーに戻す（履歴: --c-teal-dark / --c-blue /
       --c-soft-green-dark / --c-purple なら全班 4.5:1 以上）
   値の列（縞）の上の本文は 7.3〜9.6:1 で全班とも問題ない。 */
.member__meta {
  /* 班カラーは .group-block--aXX（14章）で定義した --group-accent / --group-band。
     班クラスが無いときだけ紺＋薄グレーにフォールバックする。 */
  --member-accent: var(--group-accent, var(--c-navy));
  --member-band:   var(--group-band, var(--c-light-gray));
  width: 100%;
  margin-top: 18px;
  border-collapse: collapse;
  font-size: .8125rem;
  line-height: 1.8;
}
.member__meta th,
.member__meta td {
  padding: 9px 12px;
  /* 原稿と同じ白のグリッド線。カード地も白なので外周は見えず、
     中の塗り分けだけが罫線として立つ。 */
  border: 1px solid var(--c-white);
  text-align: left;
  vertical-align: top;
}
.member__meta th {
  width: 9em;
  font-weight: 700;
  background: var(--member-accent);
  color: var(--c-white);
  white-space: nowrap;
}
/* 値の列の横縞（原稿の band1Horz）。奇数行＝1行目「所属」から塗る。 */
.member__meta tbody tr:nth-child(odd) td { background: var(--member-band); }
.member__meta td { word-break: break-word; overflow-wrap: anywhere; }
/* 1行目「所属」の上に引く区切り線。
   原稿（DATA/HP文章等の案.docx のテーブルスタイル "5-5"）は tblBorders が
   全辺 #FFFFFF で、罫線は見えない設計。ここは指示による追加で、
   氏名ブロックと表の境目を示すために引いている。
   ★ border-collapse: collapse 下では隣接セルの白い罫線と競合して 1px では
      теal 地に埋もれるため、2px で明確に勝たせる。 */
.member__meta { border-top: 2px solid var(--c-navy-24); }
.member__meta tbody tr:first-child th,
.member__meta tbody tr:first-child td { border-top: 2px solid var(--c-navy-24); }
.member__meta a { font-family: var(--font-en); font-size: .8125rem; }

/* 班ごとの色の実値は 14章 .group-block--aXX にまとめてある（班バッジと共用）。 */

.member__body { margin-top: clamp(24px, 3vw, 32px); }

.member__section + .member__section { margin-top: 1.8em; }
.member__section-title {
  display: flex;
  align-items: center;
  gap: .6em;
  margin-bottom: .8em;
  font-size: 1rem;
  color: var(--c-navy);
}
.member__section-title::before {
  content: "";
  flex: none;
  width: 4px;
  height: 1.1em;
  background: var(--c-teal);
  border-radius: 2px;
}
.member__section p { font-size: .9375rem; }

@media (max-width: 720px) {
  .member__head { grid-template-columns: 1fr; }
  .member__photo { width: 140px; }
  .member__meta th, .member__meta td { display: block; width: auto; border-bottom: 0; }
  .member__meta th { padding-bottom: 4px; border-radius: 4px; }
  .member__meta td { padding-top: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--c-border); }
}

/* --------------------------------------------------------------------------
   13. Advisors
   -------------------------------------------------------------------------- */
/* 指定により PC でも縦1列。以前は repeat(auto-fit, minmax(240px, 1fr)) で
   本文カラム（880px）に3枚が横並びになっていた。 */
.advisor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.advisor-grid li { margin: 0; }
.advisor-card {
  padding: 24px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-teal);
  border-radius: var(--radius);
}
.advisor-card__name { font-size: 1.125rem; margin-bottom: .5em; }
.advisor-card__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3em .9em;
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--c-navy-64);
}
.advisor-card__meta dt { font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.advisor-card__meta dd { margin: 0; }

/* --------------------------------------------------------------------------
   14. Publications & events
   -------------------------------------------------------------------------- */
.pub-list { margin: 0; padding: 0; list-style: none; counter-reset: pub; }
.pub-list li {
  position: relative;
  margin: 0;
  padding: 22px 4px 22px 46px;
  border-bottom: 1px solid var(--c-border);
  font-size: .9375rem;
  line-height: 1.9;
}
.pub-list li::before {
  counter-increment: pub;
  content: counter(pub, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  font-family: var(--font-en);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--c-aqua);
}
.pub-list .authors { font-weight: 500; color: var(--c-navy); }
.pub-list .journal { font-style: italic; }
.pub-list .doi {
  display: inline-block;
  margin-top: .3em;
  font-family: var(--font-en);
  font-size: .8125rem;
  word-break: break-all;
}

.event-card {
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.event-card__title {
  font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  margin-bottom: 1em;
}
.event-meta {
  margin: 0 0 clamp(24px, 3vw, 32px);
  font-size: .875rem;
  line-height: 1.9;
  border-top: 1px solid var(--c-border);
}
.event-meta div {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--c-border);
}
.event-meta dt { font-weight: 700; color: var(--c-navy); }
.event-meta dd { margin: 0; }

@media (max-width: 560px) {
  .event-meta div { grid-template-columns: 1fr; gap: 2px; }
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.photo-grid li { margin: 0; }
.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--c-light-gray);
}

/* --------------------------------------------------------------------------
   15. Notice / callout
   -------------------------------------------------------------------------- */
.notice {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--c-light-gray);
  border-radius: var(--radius);
  font-size: .875rem;
  line-height: 1.9;
}
.notice--teal { background: var(--c-teal-08); border: 1px solid var(--c-teal-16); }
.notice__title {
  display: block;
  margin-bottom: .5em;
  font-weight: 700;
  color: var(--c-navy);
}

.empty-state {
  padding: clamp(36px, 5vw, 60px) 24px;
  background: var(--c-light-gray);
  border-radius: var(--radius);
  text-align: center;
  font-size: .9375rem;
  color: var(--c-navy-64);
}

/* --------------------------------------------------------------------------
   16. Contact form
   -------------------------------------------------------------------------- */
.form { margin-top: clamp(28px, 3.4vw, 44px); }

.form__row { margin-bottom: clamp(20px, 2.4vw, 28px); }

.form__label {
  display: flex;
  align-items: center;
  gap: .7em;
  margin-bottom: .55em;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--c-navy);
}
.form__required {
  padding: .18em .7em;
  border-radius: 999px;
  background: var(--c-teal);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-white);
}
.form__optional {
  padding: .18em .7em;
  border-radius: 999px;
  background: var(--c-light-gray);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--c-navy-64);
}

.form__control {
  width: 100%;
  padding: .85em 1em;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-white);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-body);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form__control:hover { border-color: var(--c-aqua); }
.form__control:focus {
  border-color: var(--c-teal);
  box-shadow: 0 0 0 3px var(--c-teal-16);
  outline: none;
}
textarea.form__control { min-height: 200px; resize: vertical; }

.form__help { margin-top: .5em; font-size: .8125rem; color: var(--c-navy-64); }

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  padding: clamp(18px, 2.2vw, 24px);
  background: var(--c-light-gray);
  border-radius: var(--radius);
  font-size: .875rem;
  line-height: 1.8;
  cursor: pointer;
}
.form__consent input { flex: none; width: 20px; height: 20px; margin-top: .2em; accent-color: var(--c-teal); }

.form__actions { margin-top: clamp(28px, 3.4vw, 40px); text-align: center; }
.form__actions .btn { min-width: 260px; justify-content: center; }

/* Receiving is suspended until the privacy policy is approved (spec C-1).
   The fieldset is disabled in markup — make that state visible, otherwise the
   form reads as usable until the user tries to type. Disabled controls are
   exempt from the WCAG contrast minimum. */
.form fieldset[disabled] { opacity: .6; }
.form fieldset[disabled] .form__control,
.form fieldset[disabled] .form__consent,
.form fieldset[disabled] .form__consent input {
  background: var(--c-light-gray);
  cursor: not-allowed;
}
.form fieldset[disabled] .form__control:hover { border-color: var(--c-border); }
.form fieldset[disabled] .form__required { background: var(--c-navy-64); }
.form fieldset[disabled] .btn--primary {
  background: var(--c-navy-64);
  box-shadow: none;
  cursor: not-allowed;
}
.form fieldset[disabled] .btn:hover { transform: none; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(48px, 6vw, 72px) 0;
  background: var(--c-navy);
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
}

/* 背景の紺は全幅のまま、中身はヘッダー・ヒーローと同じ 1280px の外周フレームに揃える。
   フッター直下の .wrap（上段）と .site-footer__bottom 内の .wrap（コピーライト）が対象。 */
.site-footer > .wrap,
.site-footer__bottom > .wrap { max-width: var(--wrap-wide); }

/* 70 : 30 — the grant block carries most of the width, the link list the rest. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(36px, 4.5vw, 52px);
}

/* Must stack like .site-logo — the children are spans, so a plain
   display:block collapsed all three lines onto one row. */
/* The lockup itself (word / sub / jp) is styled together with .site-logo in
   section 6, so header and footer are identical. Here only the box differs:
   the footer is already navy, so it needs no plate and no fixed width — and
   without the header's inner padding the logo sits flush with the grant text
   below it. */
.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: fit-content;
  gap: 2px;
  margin-bottom: 20px;
  color: var(--c-white);
  text-decoration: none;
}
.footer-logo:hover { color: var(--c-white); opacity: .92; }

.footer-grant { font-size: .75rem; line-height: 2; color: rgba(255, 255, 255, .64); }
.footer-grant .en { font-family: var(--font-en); }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}
.footer-nav li { margin: 0; }
.footer-nav a {
  display: inline-block;
  padding: 6px 0;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  font-size: .875rem;
}
.footer-nav a:hover { color: var(--c-aqua); }

.site-footer__bottom {
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .56);
  text-align: center;
}

@media (max-width: 760px) {
  .site-footer__top { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
/* Scoped to .js: the class is swapped in by an inline script in <head>, so
   without JavaScript .reveal blocks stay fully visible instead of vanishing. */
.reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   19. Labels that carry no destination
   /about/ /organization/ /news/ /outreach/ /contact/ への内部リンクは
   全て復帰済み（Document/05_リンク一時停止メモ.md の復帰手順を実施）。
   残るのは TOP の NEWS 一覧にある「トロゴ生命科学公式サイトを公開しました。」
   の1行だけで、これは対応する記事ページがまだ無いため <span> のまま。
   .news-list__item は hover 時に背景が変わるので、押せると誤解されないよう
   pointer-events を切っておく。
   -------------------------------------------------------------------------- */
/* 配色・レイアウトは通常のリンクと同じまま（モックアップ準拠）。 */
.is-unlinked { cursor: default; pointer-events: none; }

/* --------------------------------------------------------------------------
   20. Page top button
   スクロールすると右下に出る「PAGE TOP」。表示の切り替えは main.js の
   initPageTop() が .is-visible を付け外しして行う。JS 無効時は付かないので、
   動かないボタンが出ることはない（既定が非表示なのはそのため）。
   位置は右下固定。フッターに重なっても読めるよう、塗りはナビと同じ濃ティール。
   -------------------------------------------------------------------------- */
.page-top {
  position: fixed;
  right: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 40;              /* .site-header(sticky) より下、本文より上 */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-teal-dark);
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: .5625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  /* 既定は非表示。translate も入れて、出るときに少し下から浮き上がる。 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s var(--ease), background-color .2s var(--ease);
}
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.page-top:hover { background: var(--c-navy); color: var(--c-white); }
.page-top:active { transform: translateY(1px); }
.page-top__arrow {
  width: .7em;
  height: .7em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  /* 上向き矢印 */
  transform: rotate(-45deg);
  /* 文字とのバランス調整（回転で見た目の重心が下がるぶんを戻す） */
  margin-bottom: 2px;
}

@media (max-width: 640px) {
  .page-top { width: 52px; height: 52px; font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-top { transition: opacity .001ms, visibility .001ms; transform: none; }
  .page-top.is-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .hero__dots, .nav-toggle, .breadcrumb,
  .page-top { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .js .reveal { opacity: 1; transform: none; }
}