@charset "UTF-8";
/* =========================================================================
   NGDS 公式サイト スタイルシート
   構成: reset → tokens → base → layout → components → sections
         → responsive → motion
   ========================================================================= */


/* =========================================================================
   1. RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, li {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video {
  display: block;
  max-width: 100%;
}

img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

/* hidden 属性を常に効かせる。.btn などが display を持つと UA 既定の display:none に
   打ち勝ってしまうため（動画IDが未設定のときの「活動を見る」CTAなどで必要）。
   .nav-overlay[hidden] は開閉アニメーションのため別途 display:none を持つ。 */
[hidden] { display: none !important; }


/* =========================================================================
   2. TOKENS
   ========================================================================= */
:root {
  /* Brand */
  --navy-900:#0d2340; --navy-800:#143257; --navy-700:#1d4372; --navy-600:#2a5a92;
  --blue-500:#4a8fc8; --blue-300:#8fbde2; --blue-100:#dceaf6; --blue-50:#eef5fb;
  /* gold-700 は「白・淡色背景に載せる文字」専用（WCAG AA 確保用）。
     gold-600 以下は罫・面・紺地の文字にだけ使う。 */
  --gold-700:#886510;
  --gold-600:#a8822f; --gold-500:#c19b4a; --gold-400:#d4b877; --gold-100:#f2e6cc;

  /* Neutral */
  --ink-900:#12202f; --ink-700:#33475c; --ink-500:#64788c; --ink-300:#a9b7c4;
  --paper:#ffffff; --paper-tint:#f7fafc; --line:#e2e9f0;

  /* Type scale (fluid) */
  --fs-display:clamp(2rem,4.6vw,4rem);
  --fs-h2:clamp(1.85rem,4.2vw,3.25rem);
  --fs-h3:clamp(1.15rem,2vw,1.5rem);
  --fs-body:clamp(.95rem,1.05vw,1.0625rem);
  --fs-eyebrow:clamp(.75rem,.9vw,.8125rem);
  --fs-label-min:.6875rem; /* 11px: 英字ラベルの下限 */

  /* Space */
  --space-section:clamp(5rem,10vw,9rem);
  --container:1180px; --container-narrow:820px;
  --header-h:76px;

  /* Radius / shadow */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-full:999px;
  --sh-1:0 1px 2px rgba(13,35,64,.05), 0 2px 8px rgba(13,35,64,.04);
  --sh-2:0 4px 12px rgba(13,35,64,.07), 0 12px 32px rgba(13,35,64,.07);
  --sh-3:0 12px 28px rgba(13,35,64,.10), 0 28px 64px rgba(13,35,64,.10);
  --ease:cubic-bezier(.22,.8,.28,1);

  /* Fonts */
  --font-serif:"Shippori Mincho","Noto Serif JP",serif;
  --font-sans:"Noto Sans JP",system-ui,sans-serif;
  --font-en:"Jost","Noto Sans JP",sans-serif;
}


/* =========================================================================
   3. BASE
   ========================================================================= */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* 和文の禁則処理:
   - line-break: strict  … 「、。」「ゃゅょっ」「ー」等の行頭禁則を厳格に
   - word-break: normal  … 熟語の途中で切らない
   - overflow-wrap: break-word … はみ出す超長語だけ最終手段として折る
   （overflow-wrap:anywhere は約物の追い出しを壊すので使わない） */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--ink-900);
  background: var(--paper);
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  hanging-punctuation: allow-end;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .06em;
  font-feature-settings: "palt" 1;
  text-wrap: balance;
}

/* リード文は行長を揃えて末尾1文字の孤立を防ぐ */
/* balance は2行が保証されない場所で熟語を押し出すため、短い見出し系にだけ使う */
.meeting__name { text-wrap: balance; }

/* 固有名詞・熟語の分断禁止 */
.nowrap { white-space: nowrap; }

:focus-visible {
  outline: 2px solid var(--gold-700);   /* 白・淡色地 4.9:1 */
  outline-offset: 3px;
  border-radius: 2px;
}
/* 紺地の上では明るい金にする（gold-400 / navy = 8.2:1） */
.hero :focus-visible,
.section--navy :focus-visible,
.site-footer :focus-visible,
.nav-overlay :focus-visible,
.site-header:not(.is-solid) :focus-visible,
.skip-link:focus-visible { outline-color: var(--gold-400); }

::selection { background: var(--blue-100); color: var(--navy-900); }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  padding: .6em 1.2em;
  background: var(--navy-900);
  color: #fff;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

[id] { scroll-margin-top: calc(var(--header-h) + 12px); }


/* =========================================================================
   4. LAYOUT
   ========================================================================= */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
}

.section--paper { background: var(--paper); }
.section--tint  { background: var(--paper-tint); }
.section--blue  { background: var(--blue-50); }
.section--navy  { background: var(--navy-900); color: #fff; }

/* Waves ------------------------------------------------------------------
   境界は必ず「手前のセクションの下端」に置き、次セクションの地色で塗る。
   （wave--top は紺地の中に帯が浮くため廃止） */
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(48px, 7vw, 108px);
  line-height: 0;
  pointer-events: none;
}
.wave svg { width: 100%; height: 100%; }

/* 既定: 次が白（--paper） */
.wave__l1 { fill: var(--blue-100); opacity: .55; }
.wave__l2 { fill: var(--blue-50);  opacity: .85; }
.wave__l3 { fill: var(--paper);    opacity: 1; }

/* 次が --paper-tint */
.wave--to-tint .wave__l3 { fill: var(--paper-tint); }
.wave--to-tint .wave__l2 { fill: var(--blue-50); }

/* 次が --blue-50 */
.wave--to-blue .wave__l3 { fill: var(--blue-50); }
.wave--to-blue .wave__l2 { fill: var(--blue-100); opacity: .5; }

/* 次が --navy-900（淡色セクションの下端に置く） */
.wave--navy .wave__l1 { fill: var(--navy-600); opacity: .35; }
.wave--navy .wave__l2 { fill: var(--navy-700); opacity: .7; }
.wave--navy .wave__l3 { fill: var(--navy-900); opacity: 1; }

/* 動画セクションの有無で総会セクション下端の波を切り替える。
   JS は data-youtube-id が有効なときだけ html に .has-movie を付ける。
   ・既定（動画なし）: 総会(紺) の次はフッター(紺)。地色が同じなので波を出さず直結させる
     （白い波を残すと紺地の中に白帯が浮いてしまう）。
   ・.has-movie     : 総会(紺) →波→ 動画(白) →波→ フッター(紺) の本来の3層に戻す。 */
#meeting > .wave { display: none; }
.has-movie #meeting > .wave { display: block; }


/* =========================================================================
   5. COMPONENTS
   ========================================================================= */

/* --- Section heading set ------------------------------------------------ */
.sec-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-700);          /* 白・淡色地 → AA確保 */
  margin-bottom: .9em;
  padding-left: .38em;
}

.sec-title {
  font-size: var(--fs-h2);
  color: var(--navy-900);
}

.sec-head--light .sec-title { color: #fff; }
.sec-head--light .eyebrow   { color: var(--gold-400); }  /* 紺地は gold-400 で 8.2:1 */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 1.3rem;
}
.divider__rule {
  display: block;
  width: clamp(40px, 10vw, 96px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500));
}
.divider__rule:last-child { background: linear-gradient(90deg, var(--gold-500), transparent); }
.divider__gem {
  display: block;
  width: 8px; height: 8px;
  background: var(--gold-500);
  transform: rotate(45deg);
}

.group-title {
  font-size: var(--fs-h3);
  color: var(--navy-800);
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: .8rem;
}
.group-title::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 36px; height: 2px;
  background: var(--gold-500);
  transform: translateX(-50%);
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .5em 2.2em;
  border-radius: var(--r-full);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .1em;
  transition: transform .4s var(--ease), background-color .4s var(--ease),
              color .4s var(--ease), box-shadow .4s var(--ease);
}

.btn--gold {
  background: var(--gold-500);
  color: var(--navy-900);          /* 6.05:1 */
  box-shadow: var(--sh-2);
}

.btn--ghost {
  border: 1px solid rgba(255,255,255,.7);
  color: #fff;
}

@media (hover: hover) {
  .btn--gold:hover  { background: var(--gold-400); transform: translateY(-3px); box-shadow: var(--sh-3); }
  .btn--ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
}

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: .25em 1.1em;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.9;
}
.badge--gold { background: var(--gold-100); color: var(--navy-900); }  /* 12.7:1 */
.badge--area { background: var(--blue-100); color: var(--navy-800); }

/* --- Portrait ----------------------------------------------------------- */
.portrait {
  position: relative;
  display: block;
  width: 116px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-100);
  box-shadow: var(--sh-2);
}
.portrait--md { width: 132px; }
.portrait--lg { width: 164px; }

.portrait--ring { outline: 2px solid var(--gold-400); outline-offset: 5px; }

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}

/* Monogram fallback (JS adds .is-fallback when the photo fails to load) */
.portrait.is-fallback img { display: none; }
.portrait.is-fallback::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: 2.3rem;
  color: var(--navy-700);
  background: linear-gradient(160deg, var(--blue-100), var(--blue-50));
}


/* =========================================================================
   6. SECTIONS
   ========================================================================= */

/* --- Header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 130;
  background: transparent;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}

.site-header__inner {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.site-header.is-solid {
  background: rgba(255,255,255,.96);
  box-shadow: var(--sh-1);
}

/* メニュー展開中はヘッダーを透明に戻し、紺のオーバーレイに馴染ませる */
body.is-locked .site-header.is-solid { background: transparent; box-shadow: none; }
body.is-locked .site-header.is-solid .brand__ja { color: #fff; }
body.is-locked .site-header.is-solid .brand__en { color: var(--gold-400); }

.brand { display: flex; align-items: center; gap: .7rem; }
/* ロゴ内の焼き込み文字は小サイズで潰れるため、ヘッダーはアイコン単体＋実テキスト */
.brand__mark { width: 34px; height: 34px; object-fit: contain; }

.brand__text { display: flex; flex-direction: column; line-height: 1.35; }
.brand__ja {
  font-family: var(--font-serif);
  font-size: .95rem;
  letter-spacing: .1em;
  color: #fff;
  transition: color .4s var(--ease);
}
.brand__en {
  font-family: var(--font-en);
  font-size: var(--fs-label-min);   /* 11px 下限 */
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.site-header.is-solid .brand__ja { color: var(--navy-900); }
.site-header.is-solid .brand__en { color: var(--gold-700); }  /* 白地 → 5.04:1 */

/* デスクトップナビ／ハンバーガーは排他。既定はデスクトップ、≤900px で反転 */
.nav-desktop { display: block; }
.hamburger   { display: none; }

.nav-desktop__list { display: flex; align-items: center; gap: clamp(.9rem, 1.8vw, 1.9rem); }

.nav-desktop a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: .5em .15em;
  color: #fff;
  transition: color .4s var(--ease);
}
.site-header.is-solid .nav-desktop a { color: var(--navy-800); }

.nav-en {
  font-family: var(--font-en);
  font-size: .75rem;
  letter-spacing: .18em;
}
.nav-ja { font-size: var(--fs-label-min); letter-spacing: .04em; opacity: .85; line-height: 1.5; }

.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  width: 0; height: 1px;
  background: var(--gold-500);
  transform: translateX(-50%);
  transition: width .4s var(--ease);
}
.nav-desktop a.is-current::after { width: 100%; }
@media (hover: hover) {
  .nav-desktop a:hover::after { width: 100%; }
}

/* Hamburger */
.hamburger {
  width: 48px; height: 48px;
  position: relative;
  z-index: 140;
  border-radius: var(--r-sm);
}
.hamburger__bar {
  position: absolute;
  left: 13px;
  width: 22px; height: 1.5px;
  background: #fff;
  transition: transform .35s var(--ease), opacity .25s var(--ease), background-color .35s var(--ease);
}
.hamburger__bar:nth-child(1) { top: 18px; }
.hamburger__bar:nth-child(2) { top: 23.5px; }
.hamburger__bar:nth-child(3) { top: 29px; }

.site-header.is-solid .hamburger__bar { background: var(--navy-900); }

.hamburger.is-open .hamburger__bar { background: #fff; }
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--navy-900);
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 1rem) 1.5rem 2rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay.is-open { opacity: 1; }

.nav-overlay__list { display: flex; flex-direction: column; gap: clamp(.4rem, 2.4vw, 1.1rem); text-align: center; }

.nav-overlay__list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .6em 1em;
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.nav-overlay.is-open .nav-overlay__list a { opacity: 1; transform: none; }
.nav-overlay.is-open li:nth-child(1) a { transition-delay: .06s; }
.nav-overlay.is-open li:nth-child(2) a { transition-delay: .12s; }
.nav-overlay.is-open li:nth-child(3) a { transition-delay: .18s; }
.nav-overlay.is-open li:nth-child(4) a { transition-delay: .24s; }
.nav-overlay.is-open li:nth-child(5) a { transition-delay: .30s; }
.nav-overlay.is-open li:nth-child(6) a { transition-delay: .36s; }

.nav-overlay__en {
  font-family: var(--font-en);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--gold-400);
}
.nav-overlay__ja { font-family: var(--font-serif); font-size: 1.15rem; letter-spacing: .1em; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) 0 4rem;
  overflow: hidden;
  background: var(--navy-900);
}

.hero__media { position: absolute; inset: 0; }

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy-900) center / cover no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,35,64,.90) 0%, rgba(13,35,64,.74) 38%, rgba(13,35,64,.86) 78%, rgba(13,35,64,.96) 100%),
    radial-gradient(120% 80% at 50% 45%, rgba(13,35,64,.42) 0%, rgba(13,35,64,.84) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, 1040px);
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.hero__logo {
  width: auto;
  height: clamp(88px, 11vw, 140px);
  margin: 0 auto 1.4rem;
}

.hero__eyebrow {
  font-family: var(--font-en);
  font-size: var(--fs-eyebrow);
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 1.2rem;
  padding-left: .38em;
}

.hero__title {
  font-size: var(--fs-display);
  line-height: 1.5;
  letter-spacing: .08em;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}

.hero__lead {
  margin: 1.8rem auto 0;
  max-width: 30em;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}

.hero__actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* スクロールキューはフロー内（CTAの下）に置く。
   absolute配置だと低いビューポートでCTAと物理的に重なるため。 */
.scroll-cue {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.scroll-cue__line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, transparent, var(--gold-400));
  animation: cue 2.4s var(--ease) infinite;
}
.scroll-cue__label {
  font-family: var(--font-en);
  font-size: var(--fs-label-min);   /* 11px 下限 */
  letter-spacing: .3em;
  color: var(--gold-400);
}

@keyframes cue {
  0%   { transform: scaleY(.2); transform-origin: top; opacity: .3; }
  45%  { transform: scaleY(1);  transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1);  transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(.2); transform-origin: bottom; opacity: .3; }
}

/* --- About -------------------------------------------------------------- */
.about__body {
  width: min(100%, var(--container-narrow));
  margin-inline: auto;
  text-align: center;
}
.about__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  line-height: 2;
  color: var(--navy-800);
  margin-bottom: 1.6rem;
  max-width: 28em;              /* 26/28/30/32/34/36em を実測比較。最終行が59%幅で収まる 28em を採用
                                   （30em以上は最終行37%の逆三角形、26emは1行目が極端に短くなる） */
  margin-inline: auto;
  font-feature-settings: "palt" 1;
}
.about__text { color: var(--ink-700); max-width: 36em; margin-inline: auto; }

.stats {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.stat {
  padding: 2.2rem 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: center;
}
.stat__num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.2;
  color: var(--navy-800);
  letter-spacing: .04em;
}
.stat__unit { font-size: .5em; margin-left: .15em; color: var(--gold-700); }
.stat__label {
  display: block;
  margin-top: .7rem;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ink-700);
}

/* --- Values ------------------------------------------------------------- */
.values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
}

.value-card {
  position: relative;
  padding: 2.4rem 1.5rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.value-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.value-card__no {
  display: block;
  font-family: var(--font-en);
  font-size: .8rem;
  letter-spacing: .24em;
  color: var(--gold-700);          /* 白地 → 5.04:1 */
  margin-bottom: .9rem;
}
.value-card__title {
  font-size: 1.08rem;
  color: var(--navy-800);
  margin-bottom: .8rem;
}
.value-card__text { font-size: .86rem; line-height: 1.95; color: var(--ink-700); }

@media (hover: hover) {
  .value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
}

/* --- Message ＋ Founder ------------------------------------------------- */
.message {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: min(100%, var(--container));
  margin-inline: auto;
}
.message__figure { margin: 0; }
.message__figure .portrait { width: min(100%, 220px); }

.message__quote {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 2.25;
  color: var(--navy-800);
  padding-left: 1.6rem;
  border-left: 2px solid var(--gold-400);
  font-feature-settings: "palt" 1;
}
.message__quote p + p { margin-top: 1.2rem; }

.message__sign {
  margin-top: 2rem;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.message__role {
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--navy-800);          /* blue-50 上で 11.8:1（12.5px と小さいため濃色を採用） */
}
.message__name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  letter-spacing: .12em;
  color: var(--navy-900);
}
.message__org { font-size: .82rem; color: var(--ink-700); }

.founder {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  width: min(100%, var(--container));
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--blue-100);
}
.founder__heading {
  font-size: 1rem;
  letter-spacing: .28em;
  color: var(--navy-800);
  text-align: center;
  margin-bottom: 1.8rem;
}
/* 正本にある情報は氏名＋所属1行のみ。1180px 全幅だと密度が足りず間延びするため、
   カードは 820px で中央に置き、内部を「左＝人物／右＝事実」の2カラムに組む。 */
.founder__card {
  width: min(100%, var(--container-narrow));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.founder__identity {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.founder__identity .portrait { flex: 0 0 auto; margin-inline: 0; }
.founder__namebox { min-width: 0; }
.founder__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--navy-900);
  margin: .6rem 0 0;
}
.founder__facts {
  margin: 0;
  padding-left: 2rem;
  border-left: 1px solid var(--line);
  display: grid;
  gap: 1rem;
}
.founder__fact { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.founder__fact dt {
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--ink-500);
}
.founder__fact dd {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--ink-700);
  text-wrap: balance;
}

/* --- Members ------------------------------------------------------------ */
/* minmax(0,1fr) は必須。1fr だけだと nowrap の min-content でグリッドが
   コンテナ幅を超えて膨らみ、カードが画面外へはみ出す（scrollWidth では検出できない） */
.member-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.member-grid--lead { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.member-grid:last-child { margin-bottom: 0; }

.member-card {
  /* 所属の行数差でできる余白を、下だけでなく上下に分けて目立たなくする */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.2rem 1.25rem 2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  text-align: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.member-card .badge { margin-top: 1.5rem; }
.member-card__name {
  font-size: 1.2rem;
  color: var(--navy-900);
  margin: .6rem 0 .5rem;
}
.member-grid--lead .member-card__name { font-size: 1.4rem; }
.member-card__org { font-size: .82rem; line-height: 1.85; color: var(--ink-700); text-wrap: balance; }
/* 769px以上は「施設名＋役職」を一体に保ち、役職だけが単独行になるのを防ぐ。
   768px以下は列幅が足りないため nowrap を解除し、役職を意図した独立行として組む。 */
.org-tail { white-space: nowrap; }

@media (hover: hover) {
  .member-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
  .member-card:hover .portrait img { transform: scale(1.06); }
}

/* --- Meeting ------------------------------------------------------------ */
.meeting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

/* 写真が1枚も読めないときは1カラム中央寄せに畳む（JSが付与） */
.meeting--solo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.meeting--solo .meeting__body { max-width: var(--container-narrow); }
.meeting--solo .meeting__theme { justify-content: center; }
.meeting--solo .meeting__lecturer,
.meeting--solo .meeting__text { text-align: center; }

.collage[hidden] { display: none; }

.meeting__name {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
  letter-spacing: .08em;
  color: #fff;
  font-feature-settings: "palt" 1;
}
.meeting__theme {
  margin-top: 1.2rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .9rem;
}
.meeting__theme-word {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.3;
  color: var(--gold-400);
  letter-spacing: .1em;
  font-feature-settings: "palt" 1;
}
.meeting__theme-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label-min);
  letter-spacing: .28em;
  color: rgba(255,255,255,.75);
}
.meeting__lecturer {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: .95rem;
  color: rgba(255,255,255,.94);
}
.meeting__lecturer strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
.meeting__text {
  margin-top: 1.2rem;
  font-size: .9rem;
  line-height: 2.05;
  color: rgba(255,255,255,.82);
  max-width: 36em;
}
.meeting--solo .meeting__text { margin-inline: auto; }

.collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 14px 0;        /* 上下のジグザグ分。外形の天地を揃える */
}
.collage__item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4 / 3;
  background: var(--navy-800);
}
.collage__item--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; margin-bottom: 14px; }
/* 左列（2・4枚目）を上へ、右列（3・5枚目）を下へ。コラージュらしいジグザグ */
.collage__item:nth-child(2) { transform: translateY(-14px); }
.collage__item:nth-child(4) { transform: translateY(-14px); }
.collage__item:nth-child(3) { transform: translateY(14px); }
.collage__item:nth-child(5) { transform: translateY(14px); }
.collage__item img { width: 100%; height: 100%; object-fit: cover; }

/* --- Movie -------------------------------------------------------------- */
/* 枠幅は 1080px（既定の 980px より広げてある）。
   動画が 2.09:1 になり枠高が十分(1440pxで516px)になったため、上下余白は
   他セクションと同じ --space-section のまま。枠がもっと平たい動画に差し替わって
   「このセクションだけ余白が多い」と感じるときだけ padding-block を詰める。
   （実測: コンテンツ:余白 = 2.49 で About の 2.52 とほぼ同値） */
.movie { width: min(100%, 1080px); margin-inline: auto; }

.movie__frame {
  position: relative;
  /* 動画の実寸 1280x612（DAR 880:421 ≒ 2.09:1）。ポスター画像（1920x918）も同比率。
     iframe は押下時にこの枠いっぱいへ差し込むので、押下前後で枠の高さは変わらない。 */
  aspect-ratio: 1280 / 612;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  background: var(--navy-900);
}
/* 枠とポスターのアスペクト比が一致するので contain で切り取りゼロ */
.movie__poster { width: 100%; height: 100%; object-fit: contain; }

/* 再生ボタン押下時にJSが生成する YouTube の iframe。枠いっぱいに敷く */
.movie__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 再生前は独自ボタンのみ。ネイティブ controls は再生開始時にJSが付与する */
.movie__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(13,35,64,.34);
  transition: background-color .4s var(--ease);
}
.movie__play[hidden] { display: none; }

.movie__play-icon {
  width: clamp(64px, 9vw, 92px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--gold-500);
  box-shadow: var(--sh-3);
  position: relative;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.movie__play-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--navy-900);
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .movie__play:hover { background: rgba(13,35,64,.2); }
  .movie__play:hover .movie__play-icon { transform: scale(1.08); background: var(--gold-400); }
}

/* --- Contact（受け皿。index.html 側はコメントアウト中だがスタイルは常に有効） --- */
.contact__body {
  width: min(100%, var(--container-narrow));
  margin-inline: auto;
  text-align: center;
}
.contact__lead {
  color: var(--ink-700);
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* 淡色地に置くゴースト風ボタン（.btn--ghost は紺地専用なので別に用意） */
.btn--outline {
  border: 1px solid var(--gold-500);
  color: var(--gold-700);          /* 白・淡色地 5.4:1 */
  background: var(--paper);
}
@media (hover: hover) {
  .btn--outline:hover {
    background: var(--gold-100);
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
  }
}

@media (max-width: 600px) {
  .contact__actions { flex-direction: column; align-items: center; }
}

/* --- 404（404.html 専用。紺地に金のアクセント） -------------------------- */
.notfound {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.notfound__inner { text-align: center; }
.notfound__logo { width: auto; height: clamp(88px, 11vw, 132px); margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); }
.notfound__head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.notfound__text {
  max-width: 34em;
  margin-inline: auto;
  color: rgba(255,255,255,.88);
}
.notfound__actions { margin-top: clamp(2rem, 4vw, 2.8rem); }

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding-top: calc(var(--space-section) * .6);
  overflow: hidden;
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding-bottom: 3rem;
}

.site-footer__brand img { width: auto; height: clamp(84px, 9vw, 116px); margin-bottom: 1.2rem; }
.site-footer__ja { font-family: var(--font-serif); font-size: 1.1rem; letter-spacing: .1em; }
.site-footer__en {
  font-family: var(--font-en);
  font-size: var(--fs-label-min);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

/* 2列・縦3行のグリッド。6項目なら 3×2 の対称、動画セクション非表示の5項目なら
   左列3・右列2 になる（どちらも列として自然に読める）。タップ領域は44px以上を確保 */
.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: .25rem 1.5rem;
}
.site-footer__nav a {
  display: block;
  padding: .7em 0;
  min-height: 44px;
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  transition: color .3s var(--ease);
}
@media (hover: hover) {
  .site-footer__nav a:hover { color: var(--gold-400); }
}

.site-footer__copy {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 1.6rem 1rem;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.7);
}


/* =========================================================================
   7. RESPONSIVE
   ブレークポイント: ≤600 / 601–900（ナビ切替） / 601–1024 / 1025+
   ナビはデスクトップ／ハンバーガーが同時表示されないよう1組の反転で制御
   ========================================================================= */

/* 和文併記は1024px以下で外し、ナビの横幅を確保する */
@media (max-width: 1024px) {
  .nav-ja { display: none; }
  .nav-desktop a { padding: .6em .2em; }
  .nav-en { font-size: .78rem; letter-spacing: .16em; }
}

/* 601–1024px: レイアウトの段組みを落とす（ナビはまだデスクトップ） */
@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .brand__mark { width: 30px; height: 30px; }
  .brand__ja { font-size: .85rem; }

  .stats { gap: .9rem; }
  .stat  { padding: 1.7rem .75rem; }

  .message { grid-template-columns: 1fr; text-align: center; }
  .message__figure .portrait { width: 170px; }
  .message__quote { text-align: left; padding-left: 1.2rem; }
  .message__sign  { text-align: left; padding-left: 1.2rem; }

  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-grid--lead { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .portrait--lg { width: 128px; }

  .meeting { grid-template-columns: 1fr; }

  .site-footer__inner { grid-template-columns: 1fr; }
}

/* ナビ切替: 900px。ここだけで排他を担保する */
@media (max-width: 900px) {
  .nav-desktop { display: none; }
  .hamburger   { display: block; }
}

/* 768px以下: 役職は折り返しを許し、「孤立行」ではなく意図した2行目として見せる。
   設立者カードも2カラムだと列幅が足りず氏名・所属が割れるため1カラムへ。 */
@media (max-width: 768px) {
  .org-tail { white-space: normal; }

  .founder__card { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.8rem 1.4rem; text-align: center; }
  .founder__identity { flex-direction: column; gap: 1rem; }
  .founder__identity .portrait { margin-inline: auto; }
  .founder__facts { padding-left: 0; padding-top: 1.2rem; border-left: 0; border-top: 1px solid var(--line); }
  .founder__fact { grid-template-columns: 1fr; gap: .2rem; justify-items: center; }

  .org-role {
    display: block;
    margin-top: .3rem;
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--ink-500);
  }
}

/* 769–1024px: 6分割グリッドで 3+2 の中央寄せ（各カード2マス。空きマスが視覚に出ない） */
@media (min-width: 769px) and (max-width: 1024px) {
  .values { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .value-card { grid-column: span 2; }
  .value-card:nth-child(4) { grid-column: 2 / span 2; }
  .value-card:nth-child(5) { grid-column: 4 / span 2; }
}

/* 601–768px: Values は横並び5列だと窮屈なので1列の横組みリストへ（空きマスを作らない） */
@media (min-width: 601px) and (max-width: 768px) {
  .values { grid-template-columns: 1fr; gap: 1rem; }
  .value-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.6rem;
    row-gap: .3rem;
    align-items: baseline;
    padding: 1.5rem 1.8rem;
  }
  .value-card__no { grid-row: 1 / span 2; margin-bottom: 0; align-self: center; }
  .value-card__title { margin-bottom: 0; }
}

/* ≤600px */
@media (max-width: 600px) {
  :root { --header-h: 64px; }

  .container, .site-header__inner { width: min(100% - 2rem, var(--container)); }

  .brand__text { display: none; }

  /* 縦位置ポスターの人物が判別できるよう中心付近を薄く。
     文字側はシャドウを強めて可読性（AA）を保つ。 */
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(13,35,64,.84) 0%, rgba(13,35,64,.50) 36%, rgba(13,35,64,.76) 74%, rgba(13,35,64,.94) 100%),
      radial-gradient(95% 58% at 50% 42%, rgba(13,35,64,.30) 0%, rgba(13,35,64,.80) 100%);
  }
  .hero__title { text-shadow: 0 2px 6px rgba(4,12,24,.85), 0 4px 28px rgba(4,12,24,.7); }
  .hero__lead  { text-shadow: 0 1px 4px rgba(4,12,24,.9), 0 2px 16px rgba(4,12,24,.7); }
  .hero__eyebrow { text-shadow: 0 1px 6px rgba(4,12,24,.9); }

  .hero { min-height: 92svh; padding-bottom: 5rem; }
  .hero__content { width: min(100% - 2rem, 1040px); }
  .hero__title { font-size: min(1.75rem, 7.4vw); line-height: 1.7; letter-spacing: 0; }
  .hero__actions { flex-direction: column; align-items: center; }
  .btn { width: min(100%, 300px); }
  .scroll-cue { margin-top: 2.2rem; }
  .scroll-cue__line { height: 32px; }

  .about__lead { max-width: none; }
  /* 600px以下では「一般社団法人 NGDS」と英名が1行に同居できない（177px + 313px > 343px）。
     英名を単独行のまま一段小さく組んで「和名／英名」の意図した2行に見せ、段差を 136px → 97px に縮める。
     インラインのまま語で折ると固有名詞が2行に割れるため、block + 縮小を選択。 */
  .lead-en { display: block; font-size: .82em; letter-spacing: .06em; }
  .stats  { grid-template-columns: 1fr; }

  .values { grid-template-columns: 1fr; }


  /* 理事は2列。縦積みだと総ページ高が跳ね上がるため。
     ただし共同代表理事は1列・大きい円のままにして役職の階層を残す */
  .member-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .member-grid--lead { grid-template-columns: 1fr; gap: 1rem; }
  .member-grid--lead .member-card { padding: 2rem 1.25rem 1.8rem; }
  .member-card { padding: 1.4rem .8rem 1.3rem; }
  .member-card .badge { margin-top: 1.1rem; font-size: .7rem; padding: .2em .85em; }
  .member-card__name { font-size: 1.02rem; margin: .45rem 0 .35rem; }
  .member-grid--lead .member-card__name { font-size: 1.25rem; margin: .5rem 0 .4rem; }
  .member-grid--lead .member-card__org { font-size: .82rem; }
  .member-card__org { font-size: .74rem; line-height: 1.75; }
  .portrait, .portrait--md { width: 96px; }
  .portrait--lg { width: 128px; }
  .portrait--ring { outline-offset: 4px; }
  .portrait.is-fallback::after { font-size: 1.8rem; }

  .collage { grid-template-columns: 1fr; }
  .collage__item--wide { grid-column: auto; margin-bottom: 0; }
  .collage { padding: 0; }
  .collage__item:nth-child(2),
  .collage__item:nth-child(3),
  .collage__item:nth-child(4),
  .collage__item:nth-child(5) { transform: none; }

  .site-footer__nav ul { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: auto; }
}


/* =========================================================================
   8. MOTION
   ========================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.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;
    transition-delay: 0ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .scroll-cue__line { animation: none; }
}