@charset "UTF-8";
/* ==========================================================================
   Infora 公式サイト 共通スタイル
   SPEC.md §3(デザイン仕様) / §4(オープニング) / §8(アクセシビリティ)準拠
   目次:
     01. デザイントークン
     02. ベース / リセット
     03. アクセシビリティ基盤
     04. レイアウト
     05. 意匠(見切れる円 / 見出しの球体マーク → 04内)
     06. ロゴ / 画像フォールバック
     07. ヘッダー・グローバルナビ(v2 §C / ドロップダウン・言語切替)
     07-b. ページヘッダー(v2 §D-1)
     07-c. プラットフォーム誘導ブロック(v2 §D-2)
     08. ボタン
     09. ヒーロー + オープニングアニメーション(§4) + 2大ブロック(v2 §E-1)
     09-b. オープニング用 全画面オーバーレイ(§4-3)
     10. セクション部品(カード / 数字 / メッセージ / ニュース / メディア)
     10-b. 追従目次つきの本文レイアウト(v2 §I)
     10-c. 「私たちについて」の部品(§6-2)
     10-d. 「団体概要」の部品(§6-4)
     10-e. 「ご支援」の部品(§6-5 / v2 §G)
     10-f. 「講演・授業のご依頼」の部品(§6-6)
     10-g. フォーム(§6-8 / §7)
     10-h. 活動内容の一覧(§6-3)
     10-i. ニュース一覧(§6-7)
     11. フッター(v2 §D-3)
     12. スクロール表示(reduced-motion対応)
     13. レスポンシブ
     14. 印刷
   ========================================================================== */

/* ==========================================================================
   01. デザイントークン (SPEC §3)
   ========================================================================== */
:root {
  /* --- カラー(プラットフォームv3共通 + STUDIO版ベージュ継承) --- */
  --ink:   #3a3a41;   /* 本文 */
  --sub:   #7c7783;   /* 補助テキスト */
  --deep:  #55506e;   /* 見出し・ボタン・リンク */
  --line:  #eae6ef;   /* 罫線 */
  --beige: #f1ece4;   /* セクション背景 */
  --grad-purple: #cfc3ee;
  --grad-cream:  #f6f0d8;
  --orb: radial-gradient(circle at 32% 28%, #d9cff2 0%, #ece2ee 45%, #f7f1da 100%);

  /* --- SPEC-v2 §B で追加した構造色・グラデーション ---
     使い分けの原則:
       白             … 本文領域のベース(全体の6割)
       --grad-header  … 各ページ最上部のページヘッダー、セクション背景の一部
       --grad-deep    … フッター直上のCTAブロック(濃色で締める)
       --grad-brand   … オープニング、ロゴ球体、ボタン、アクセント
       --line-grad    … 「数字で見るInfora」のカードと課題の図の枠線のみ(1px)。
                        使いすぎると画面が散らかるため、他はすべて単色の --line
     ※ベージュの広い平面は使わない(--grad-header の淡いグラデーションに置き換える) */
  --deep-2: #463f5e;   /* --deep より濃い。グラデーション用 */

  /* --grad-deep: 濃色ブロック用。淡い面から浮いて見えないよう一段明るくしている。
     ------------------------------------------------------------------
     【重要・SPEC §8】この2色は白文字のコントラスト比 4.5:1 を満たす上限。
     実測(WCAG 2.1 相対輝度・グラデーションを41点サンプリングした最小値):
       #625c7d → #776c93   白 #fff         … 4.83:1 ✓
                           白 88%不透明度  … 4.16:1 ✗
                           白 86%不透明度  … 4.05:1 ✗
     → この明るさでは半透明の白は基準を満たさないため、この上に置く文字は
       すべて不透明な #fff とし、強弱は文字サイズ・太さで付けること。
     ※検討時の候補 #6a6485 → #877ca6 は白文字で 3.84:1 となり不採用。
       これ以上明るくする場合は必ずコントラストを再計測すること。
     ------------------------------------------------------------------ */
  --grad-deep:   linear-gradient(120deg, #625c7d 0%, #776c93 100%);
  --grad-brand:  linear-gradient(315deg, #dda1dd, rgb(236, 196, 170) 36%, rgb(244, 236, 172) 71%, #fdf6e4);
  --grad-header: linear-gradient(120deg, #f4eefb 0%, #fdf8ec 60%, #fdf6e4 100%);
  --line-grad:   linear-gradient(90deg, #e3d8f2, #f6ecd2);

  /* 【アクセシビリティ補正】--sub(#7c7783)は白背景でコントラスト比 約4.4:1、
     ベージュ背景では約3.7:1 となり SPEC §8 の「4.5:1以上」を満たさない。
     そのため本文サイズの補助テキストには --sub-strong を使用する
     (白背景 約5.7:1 / ベージュ背景 約4.9:1)。
     --sub は大きめの装飾テキスト(20px以上)・非必須情報のみに限定して使用。 */
  --sub-strong: #6a6572;

  --bg: #ffffff;

  /* --- タイポグラフィ --- */
  --font-ja: "Zen Kaku Gothic New", "ヒラギノ角ゴシック", "Hiragino Sans",
             "BIZ UDPGothic", "Noto Sans JP", system-ui, sans-serif;
  --font-en: "Quicksand", var(--font-ja);
  /* 強調する数字専用。Quicksand は丸く柔らかいため、数字の力強さが出ない。
     Inter(800)を数字だけに使う。日本語の単位は --font-ja のままにすること
     (Inter に日本語グリフが無く、フォールバックで字面が揃わないため) */
  --font-num: "Inter", sans-serif;
  --lh-body: 1.85;
  --measure: 38em;          /* 全角35〜40字で折り返す */

  /* --- レイアウト --- */
  --content: 1080px;        /* コンテンツ幅 */
  --gutter: 22px;           /* 左右余白 */
  --radius: 22px;           /* 角丸 */
  --radius-sm: 14px;
  --shadow: 0 10px 30px rgba(90, 80, 140, .10);
  --shadow-hover: 0 16px 40px rgba(90, 80, 140, .16);

  /* --- セクション余白(STUDIO版より詰める) --- */
  --section-y: clamp(64px, 8vw, 104px);
  --tap: 44px;              /* 最小クリック領域 (SPEC §8) */
  --header-h: 68px;         /* stickyヘッダーの高さ。ファーストビューの計算に使う */

  /* --- モーション(§4-2の尺: 総再生時間 約2.7秒) ---
     0-700ms     フェードイン
     700-1600ms  静止
     1600-2100ms フェードアウト
     2100-2150ms 空白(50ms)
     2150-2700ms 日本語コピーがフェードイン */
  --intro-lightup: 2100ms;    /* 「Light Up.」の全再生時間 */
  --intro-copy-delay: 2150ms; /* フェードアウト完了(2100ms)+空白50ms から開始 */
  --intro-copy: 550ms;        /* 合計 2150 + 550 = 2700ms */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   02. ベース / リセット
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* 固定ヘッダー分 */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ja);
  font-size: 1rem;          /* 16px以上 (SPEC §8) */
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: .02em;
  text-align: left;         /* 本文は左揃え (SPEC §3) */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;       /* 見切れる円のはみ出し対策 */
}

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

a { color: var(--deep); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { opacity: .78; }

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

p, ul, ol, dl, table, figure { margin: 0; }

ul, ol { padding-left: 1.25em; }

/* ==========================================================================
   03. アクセシビリティ基盤 (SPEC §8)
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--deep);
  outline-offset: 3px;
  border-radius: 6px;
}
/* マウス操作時にアウトラインを出さない(キーボードでは必ず出す) */
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 999;
  padding: 12px 22px;
  min-height: var(--tap);
  display: inline-flex; align-items: center;
  background: var(--deep); color: #fff;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none; font-weight: 500;
}
.skip-link:focus-visible { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   04. レイアウト
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* SPEC-v2 §F-1「メディア掲載セクションのはみ出しは修正(親に overflow-x: clip)」
   overflow:hidden はスクロールコンテナを作ってしまい、内側の position:sticky
   (§I のアンカーナビ)を無効化する。clip はスクロールコンテナを作らずに切るため、
   対応環境では clip を使い、非対応環境は hidden にフォールバックさせる
   (未対応ブラウザは2行目の宣言を無視する)。 */
.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;         /* 見切れる円のクリップ(フォールバック) */
  overflow: clip;
  isolation: isolate;       /* mix-blend-mode のブレンド範囲を閉じる */
}
/* SPEC-v2 §B: ベージュの広い平面は使わず、淡いグラデーションに置き換える */
.section--tint { background: var(--grad-header); }
.section--tight { padding-block: clamp(48px, 6vw, 76px); }
/* 2大ブロックのセクション。上下の余白は .opening の space-evenly に一任する
   (SPEC-v2 §E-0)。780px以下でのみ下の @media で余白を戻す */
.section--entry { padding-block: 0; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--line);
}

/* 見出しブロック */
.section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.section-head--center { text-align: center; }
.section-head--center .section-lead { margin-inline: auto; }

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: .92;   /* SPEC §8: --grad-header 上で4.5:1以上を保つ */
}

/* セクション見出し。
   SPEC-v2 §F-1: 左揃えの見出しの左に、小さな球体マーク(.mark / 24px)を置く。
   これで「丸」が装飾ではなく記号になる。
   flex にしているため、見出しが複数行になっても2行目以降は
   マークの右側に揃う(ぶら下げインデント)。
   ※マークは HTML 側で <span class="mark"> を入れる。
     中央揃えの見出し(お問い合わせ等)には付けない */
.section-title {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  line-height: 1.45;
}
/* 見出し1行目の中心にマークを合わせる。
   行高は 1.45em なので (1.45em - マーク径) / 2 だけ下げれば
   1行目の中央に揃う(2行目以降があってもズレない) */
/* 実測上の中央だと視覚的に1〜2px高く見えるため、光学調整で少し下げる
   (数値上の中央ではなく、見た目で揃うことを優先する) */
.section-title > .mark {
  margin-top: calc((1.45em - var(--mark-size)) / 2);
  transform: translateY(1.5px);
}
.section-head--center .section-title { justify-content: center; }

.section-lead {
  max-width: var(--measure);
  margin-top: 16px;
  color: var(--sub-strong);
}

/* 本文(全角35〜40字で折り返す) */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose p { text-align: left; }

.note {
  margin-top: 20px;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--sub-strong);
}
.note--source {
  padding: 12px 16px;
  border-left: 3px solid var(--line);
  background: rgba(255, 255, 255, .55);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  max-width: var(--measure);
}
.section--tint .note--source { background: rgba(255, 255, 255, .6); }

/* ==========================================================================
   05-a. 球体マーク .mark (SPEC-v2 §F-1)
   --------------------------------------------------------------------------
   画像(infora-mark.png)ではなくCSSで描く。画像をやめた理由:
     ・mix-blend-mode: multiply が濃色ブロックの上で黒く潰れる
     ・素材の余白を切り出す方式のため、縦位置のズレが起きる
   重なる2つの円で構成する:
     下 … 影の円(主円の78%・左下にずらす)
     上 … 主円(--orb のグラデーション)
   サイズは --mark-size で可変。見出し 24px / 2大ブロック 40px。
   ========================================================================== */
.mark {
  --mark-size: 24px;
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--mark-size);
  height: var(--mark-size);
}
/* 影の円。左下にずらして球体の陰影をつくる */
.mark::before {
  content: "";
  position: absolute;
  left: -11%; bottom: -5%;
  width: 78%; height: 78%;
  border-radius: 50%;
  background: #c8c4cc;
}
/* 主円 */
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orb);
}
/* 濃色背景用。影の円を白の半透明にする(濃色の上で黒い影は潰れるため) */
.mark--light::before { background: rgba(255, 255, 255, .35); }

/* ==========================================================================
   05. 意匠 — 画面端から見切れる円 (SPEC §3 / SPEC-v2 §F-1)
   --------------------------------------------------------------------------
   SPEC-v2 §F-1 の3つの制約を守る:
     (1) 1ページ2箇所まで      … HTML側で管理。ホームは「ヒーロー右上」と
                                 「数字で見るInfora 左下」の2箇所のみ
     (2) 必ず画面端から見切れる … 位置は必ず負値で画面外へ出す
     (3) 不透明度 0.35 以下     … 下記はすべて 0.35 以下
     (4) テキストと重ねない     … コンテンツ幅(1080px)の外側に置き、
                                 幅が足りなくなる 780px 以下では表示しない
   ※--tr / --bl の2種のみ使う。旧 --r / --l は (4) を満たせないため廃止した
   ========================================================================== */
.decor-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--orb);
  filter: blur(.5px);
  opacity: .32;             /* (3) 0.35以下 */
  pointer-events: none;
}
.decor-orb--tr { width: 420px; aspect-ratio: 1; top: -170px; right: -150px; }
.decor-orb--bl { width: 360px; aspect-ratio: 1; bottom: -160px; left: -140px; opacity: .3; }

/* ==========================================================================
   06. ロゴ / 画像フォールバック
   画像が無い場合はグラデーションのプレースホルダーに切り替える。
   JS(main.js)が読み込み失敗を検知して .is-missing を付与する。
   ========================================================================== */

/* --- 文字ありロゴ (assets/img/infora-logo.jpg) --- */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo__img {
  height: 34px; width: auto;
  /* 素材の白背景を下地に溶かす */
  mix-blend-mode: multiply;
}
/* ヘッダー・フッターとも48px */
.site-header .logo__img { height: 48px; }
.site-footer .logo__img { height: 48px; }
/* .logo は inline-flex のため、フッターでは行のベースライン分の余白が
   画像の下に入って空きすぎる。block にして余白の発生源ごと消す */
.site-footer .logo { display: flex; }
.logo__fallback {
  display: none;
  align-items: center; gap: 9px;
  font-family: var(--font-en);
  font-weight: 600; font-size: 1.375rem;
  color: var(--ink); letter-spacing: .01em;
}
.logo__fallback::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orb);
}
.logo.is-missing .logo__img { display: none; }
.logo.is-missing .logo__fallback { display: inline-flex; }

/* --- 文字なしマーク (assets/img/infora-mark.png) ---
   素材は余白の大きい正方形に近い画像のため、球体部分だけを
   ウィンドウでトリミングして表示する。 */
.orb-mark {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
}
.orb-mark__img {
  position: absolute;
  top: -48%; left: -133.5%;
  width: 370%; height: 195%;
  max-width: none;
  object-fit: fill;
  mix-blend-mode: multiply;   /* 白背景を下地に溶かす */
}
.orb-mark__fallback {
  display: none;
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--orb);
}
.orb-mark.is-missing .orb-mark__img { display: none; }
.orb-mark.is-missing .orb-mark__fallback { display: block; }

/* 画像そのもののフォールバック(カード画像など) */
.media-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--orb);       /* 画像が無い間もグラデーションが見える */
}
.media-frame > img { width: 100%; height: 100%; object-fit: cover; }
.media-frame.is-missing > img { display: none; }

/* ==========================================================================
   07. ヘッダー・グローバルナビ
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  isolation: isolate;   /* ロゴの multiply をヘッダー内で完結させる */
}
/* 下端の区切り線は単色(SPEC-v2 §B: --line-grad は数字カードと課題の図のみ) */
.site-header::after {
  content: "";
  position: absolute; inset: auto 0 0 0;
  height: 1px;
  background: var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  min-height: var(--header-h);
}

.gnav__list {
  display: flex; align-items: center; gap: 2px;
  margin: 0; padding: 0; list-style: none;
}
.gnav__item { position: relative; }

.gnav__link {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: .9375rem; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.gnav__link:hover { background: var(--grad-header); opacity: 1; }
.gnav__link[aria-current="page"] { color: var(--deep); font-weight: 700; }

/* --- ドロップダウン (SPEC-v2 §C) ---
   親のリンク自体もクリック可能で概要ページへ遷移する。
   開閉はその右の小さなトグルボタンが担う(リンクと開閉を分離するのが
   スクリーンリーダー・キーボード操作の両方で確実) */
.gnav__item--has-sub { display: flex; align-items: center; }
.gnav__item--has-sub > .gnav__link { padding-right: 4px; }

.gnav__sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; min-height: var(--tap);
  padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: var(--ink); cursor: pointer;
}
.gnav__sub-toggle::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--ease);
}
.gnav__item[data-open="true"] > .gnav__sub-toggle::before { transform: translateY(1px) rotate(225deg); }

.gnav__sub {
  position: absolute;
  top: 100%; left: 0;
  z-index: 10;
  min-width: 300px;   /* 最長項目「情報プラットフォーム「infora」」が折り返さない幅 */
  margin: 0; padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);   /* 浮くパネルなので影は残す */
  /* 既定は閉じている。opacity と visibility で制御し、
     JSが動かない環境でも下の :hover / :focus-within で開く */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.gnav__sub a {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink); font-size: .9375rem; text-decoration: none;
  line-height: 1.6;
}
.gnav__sub a:hover { background: var(--grad-header); opacity: 1; }

/* JS無効時のフォールバック: ホバーとフォーカスで開く */
html:not(.js) .gnav__item--has-sub:hover > .gnav__sub,
html:not(.js) .gnav__item--has-sub:focus-within > .gnav__sub,
/* JS有効時: data-open が唯一の状態(aria-expanded と同期させる) */
.gnav__item[data-open="true"] > .gnav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- 言語切替 [JA|EN] (SPEC-v2 §C) --- */
.lang-switch {
  display: inline-flex; align-items: center;
  margin-inline: 6px;
  font-family: var(--font-en); font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em;
}
.lang-switch__item {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: var(--tap);
  padding: 0 6px;
  border-radius: 8px;
  color: var(--sub-strong); text-decoration: none;
}
.lang-switch__item:hover { background: var(--grad-header); opacity: 1; }
.lang-switch__item[aria-current="true"] { color: var(--deep); background: var(--grad-header); }
/* 未公開の言語。リンクにせず、操作できないことを明示する */
.lang-switch__item[aria-disabled="true"] { color: var(--sub); opacity: .55; cursor: not-allowed; }
.lang-switch__sep { color: var(--line); }

.header__actions { display: flex; align-items: center; gap: 8px; }

/* ハンバーガー(モバイル) */
.nav-toggle {
  display: none;
  width: var(--tap); height: var(--tap);
  padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; color: var(--deep);
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* ==========================================================================
   07-b. ページヘッダー (SPEC-v2 §D-1)
   ホーム以外の全ページ最上部。--grad-header の淡いグラデーション。
   中央に英字小ラベル(上)＋日本語ページ名(大・下)、その下に右寄せでパンくず。
   ※装飾の球体は置かない(SPEC-v2 §D-1)。背景のグラデーションだけで構成する
   ========================================================================== */
.page-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(200px, 26vw, 260px);
  padding-block: 40px 20px;
  background: var(--grad-header);
  overflow-x: clip;      /* 念のための横方向のはみ出し止め */
  isolation: isolate;
}
.page-header__head { text-align: center; }
.page-header__label {
  display: block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--deep);
  opacity: .92;  /* SPEC §8: --grad-header 上で4.5:1以上を保つ */
}
.page-header__title {
  margin-top: 10px;
  font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.4;
}

/* パンくず(TOP / ページ名) */
.breadcrumb {
  margin-top: clamp(20px, 3vw, 34px);
  font-size: .8125rem;
  color: var(--sub-strong);
}
.breadcrumb__list {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
}
.breadcrumb__list li { display: flex; align-items: center; gap: 6px; }
.breadcrumb__list li + li::before { content: "/"; color: var(--line); }
.breadcrumb a {
  display: inline-flex; align-items: center;
  min-height: 32px;
  color: var(--sub-strong);
  text-decoration: none;
}
.breadcrumb a:hover { opacity: 1; text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   07-c. プラットフォーム誘導ブロック (SPEC-v2 §D-2)
   フッター直上・全ページ必須。Inforaの中核導線。
   --grad-deep の濃色 + 白文字で締める。
   ========================================================================== */
.platform-cta {
  position: relative;
  padding-block: clamp(40px, 5vw, 60px);
  background: var(--grad-deep);
  color: #fff;
  overflow-x: clip;
  isolation: isolate;
}
.platform-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(22px, 3vw, 40px);
}
.platform-cta__body { display: flex; align-items: center; gap: 18px; min-width: 0; }

/* 球体マーク。濃色の上なので影の円を白の半透明にする .mark--light を使う */
.platform-cta__mark { --mark-size: 48px; }
.platform-cta__label {
  display: block;
  font-family: var(--font-en);
  font-weight: 600; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
  /* SPEC §8: --grad-deep を明るくしたため半透明の白は 4.5:1 を割る。
     不透明な #fff にすること(トークン定義のコメント参照) */
  color: #fff;
}
.platform-cta__title {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem);
  line-height: 1.4;
}
.platform-cta__text {
  margin-top: 12px;
  max-width: 46em;
  font-size: .9375rem;
  line-height: 1.85;
  color: #fff;   /* 同上: 半透明にしないこと */
}
/* 濃色背景ではフォーカス枠を白にする */
.platform-cta :focus-visible { outline-color: #fff; }

/* ==========================================================================
   08. ボタン
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: 12px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit; font-size: 1rem; font-weight: 500;
  line-height: 1.5; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.btn:hover { opacity: 1; transform: translateY(-1px); }

.btn--primary { background: var(--deep); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: #4a4661; box-shadow: var(--shadow-hover); }

.btn--outline { background: #fff; color: var(--deep); border-color: var(--line); }
.btn--outline:hover { border-color: var(--deep); box-shadow: var(--shadow); }

/* 濃色ブロック(プラットフォーム誘導 / SPEC-v2 §D-2)の上に置く白ボタン。
   .btn より後に置くこと(padding を上書きするため) */
.btn--on-deep {
  padding: 15px 30px;
  background: #fff;
  color: var(--deep);
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.btn--on-deep:hover { background: #fff; color: var(--deep-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .24); }

.btn--sm { padding: 9px 18px; font-size: .9375rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row--center { justify-content: center; }

/* テキストリンク(矢印付き) */
.arrow-link {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: var(--tap);
  color: var(--deep); font-weight: 500; text-decoration: none;
}
.arrow-link::after { content: "→"; transition: transform .2s var(--ease); }
.arrow-link:hover::after { transform: translateX(3px); }
.arrow-link:hover { text-decoration: underline; }

/* 外部リンクの明示 */
.is-external::after { content: "↗"; font-size: .9em; margin-left: .25em; }

/* ==========================================================================
   09. ヒーロー + オープニングアニメーション (SPEC §4)
   --------------------------------------------------------------------------
   必須要件の実装方針:
   ・トップページのみ    … index.html だけが .is-intro を付与するスクリプトを持つ
   ・再生条件            … リロードは毎回再生 / それ以外は sessionStorage のフラグが
                            無いときのみ再生(＝初回訪問は再生、サイト内遷移は再生しない)
   ・reduced-motion      … .is-intro を付与しない = 下記の「最終状態」が即表示される
                            さらに §14 の @media でも二重に無効化する
   ・全画面オーバーレイ  … 白一色の fixed オーバーレイ(09-b)の中央に Light Up. を置く
   ・尺(約2.7秒)         … Light Up. 0-2100ms / 空白 50ms / コピー 2150-2700ms
   ・重なりを作らない    … Light Up. が消えてから 50ms 空けてコピーを開始する
   ・スクロール可        … overflow は一切ロックせず、オーバーレイは pointer-events:none
   ・コンテンツを消さない … HTMLは最初から存在し、「最終状態」をCSSの既定値とする。
                            JSが失敗しても内容は必ず表示される。
                            この条件を満たす限り transform の使用は禁止しない
   ========================================================================== */
/* --------------------------------------------------------------------------
   ファーストビューのラッパー (SPEC-v2 §E-1)
   ヒーローと2大ブロックを囲み、白背景の領域がちょうど1画面を埋めるようにする。
   ・高さは「ビューポート高 − stickyヘッダー高」。ヘッダーはsticky＝通常フローを
     占めるので、スクロール0のときラッパーの下端はビューポート下端と一致する
   ・100svh はモバイルのURLバーで高さが変動しない単位。未対応環境のために
     100vh を先に書いてフォールバックさせる(未対応ブラウザは2行目を無視する)
   ・余った高さは .hero が吸収する(flex:1)。2大ブロックは自然な高さのまま下端に
     残るので、画面下端との余白＝そのセクションの padding-bottom で確定する
   -------------------------------------------------------------------------- */
.opening {
  display: flex;
  flex-direction: column;
  /* space-evenly は「先頭の前・要素間・末尾の後」の3つの隙間を等分する。
     子が2つ(ヒーロー / 2大ブロック)なので、その3つがそのまま
       (a) ヘッダー下端 〜 ヒーロー内容(球体・H1)の上端
       (b) 説明文の下端 〜 2大ブロックの上端
       (c) 2大ブロックの下端 〜 白背景の終端
     になる。両方の子を flex:0 0 auto(自然な高さ)にし、
     子側の上下paddingを0にして、余白の配分はこのラッパーに一任する */
  justify-content: space-evenly;
  min-height: calc(100vh - var(--header-h));    /* フォールバック */
  min-height: calc(100svh - var(--header-h));
  background: #fff;
}
.opening > .hero,
.opening > .section--entry { flex: 0 0 auto; }

/* SPEC-v2 §E-1: 白背景・中央軸の1カラム・上下中央揃えの静かな大画面。
   ※背景を淡いグラデーションにしない。白の余白があってこそ
     球体マークと2大ブロックのグラデーションが映える(SPEC-v2 §B) */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* SPEC-v2 §E-0: 上下の余白は .opening の space-evenly に一任するので0。
     (780px以下で高さ固定を解除したときだけ、下の @media で余白を戻す) */
  padding-block: 0;
  background: #fff;
  overflow: hidden;
  overflow: clip;     /* 対応環境ではスクロールコンテナを作らない方を使う */
  isolation: isolate;
}
/* H1を1行に収めるため、ヒーローだけコンテンツ幅を広げる */
.hero > .container { max-width: calc(1280px + var(--gutter) * 2); }
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --- 最終状態(既定値) = JSなし・reduced-motion 環境で表示されるもの --- */
.hero__content { opacity: 1; }

/* ==========================================================================
   09-b. オープニング用 全画面オーバーレイ (SPEC §4-3)
   --------------------------------------------------------------------------
   【重要・SPEC §4-2】オーバーレイが画面に残り続ける事態を絶対に起こさないため、
   以下の4重の防御をかける:
     (1) 既定は display:none。html.is-intro が付いたときだけ表示する
         → JSが失敗して .is-intro が付かなければ、そもそも一度も表示されない
     (2) pointer-events:none。表示中もスクロール・クリックを一切妨げない
     (3) アニメーションは both 指定。JSが止まっても最終フレーム
         (背景 透明 / 文字 opacity:0)で固定され、画面を塞がない
     (4) JS が animationend と 3.1秒の保険タイマーで .is-finished を付けて消す
   ========================================================================== */
.intro-overlay {
  display: none;              /* (1) 既定は非表示。これが最後の砦 */
  position: fixed;
  inset: 0;
  /* ヘッダー(z-index:100)より上に重ねてヘッダーごと隠す。
     ただしスキップリンク(999)より下にして、キーボード操作の導線は塞がない */
  z-index: 998;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;           /* 拡大時に横スクロールバーを出さない */
  pointer-events: none;       /* (2) スクロール・クリックを妨げない */
  background-color: #fff;
}

/* 文字そのもの。グラデーションの背景ボックスを文字に密着させるため、
   全画面に広がる .intro-overlay ではなくこの inline-block 要素に指定する
   (全画面要素に指定するとグラデーションの一部しか文字に乗らない / SPEC §4-4) */
.intro-overlay__text {
  display: inline-block;
  font-family: var(--font-ja);  /* 本文と同じ Zen Kaku Gothic New */
  font-weight: 700;             /* Google Fontsで700を読み込み済み */
  font-size: clamp(3.5rem, 12vw, 9rem);
  /* background-clip:text の背景ボックスは padding ボックス。
     行高が詰まっていると「g」「p」のディセンダが背景ボックスの外に出て
     グラデーションが乗らず、下が欠けて見える。行高と下パディングで逃がす */
  line-height: 1.15;
  padding-bottom: .15em;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 0;                   /* 既定は不可視 */
  transform-origin: center;     /* 奥から手前に飛び出す拡大の基点 */

  /* グラデーションを background-clip:text で文字に直接かける(SPEC §4-4・値は厳守)
     値は SPEC-v2 §B の --grad-brand と同一。トークンに集約している */
  background-image: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* background-clip:text 非対応環境は単色にフォールバック */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .intro-overlay__text {
    background-image: none;
    color: var(--deep);
    -webkit-text-fill-color: currentColor;
  }
}

/* --- 再生時のみ(html.is-intro) --- */
html.is-intro .intro-overlay {
  display: flex;
  /* 白い幕は文字が抜けていくのに合わせて 1600→2100ms で消える。
     背景色を動かすので、子(文字)の opacity には影響しない */
  animation: infora-overlay var(--intro-lightup) linear both;
}
html.is-intro .intro-overlay__text {
  animation: infora-lightup var(--intro-lightup) linear both;
  /* 再生中だけ合成レイヤーを確保する(常時指定するとメモリを無駄に占有するため) */
  will-change: transform, opacity;
}

/* (4) 再生完了後。表示ルールと同じ詳細度だが後勝ちで確実に消える */
html.is-intro .intro-overlay.is-finished { display: none; }

/* オーバーレイが消えてから、ヒーローの中身をまとめてフェードインさせる
   (2大ブロックはヒーロー外の独立セクションに移したので対象外。
    そちらは §12 のスクロール表示[data-reveal]が担う) */
html.is-intro .hero__content {
  animation: infora-hero-in var(--intro-copy) var(--intro-copy-delay) var(--ease) both;
}

/* 奥から手前に飛び出す動き(全体 2100ms)
   0→700ms     scale(.35)→scale(1) / opacity 0→1  cubic-bezier(.16,1,.3,1)
   700→1600ms  scale(1) で静止
   1600→2100ms scale(1)→scale(1.18) / opacity 1→0 (手前に抜けていく) */
@keyframes infora-lightup {
  0% {
    opacity: 0;
    transform: scale(.35);
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  33.3333% {                          /*  700ms */
    opacity: 1;
    transform: scale(1);
    animation-timing-function: linear;
  }
  76.1905% {                          /* 1600ms まで静止 */
    opacity: 1;
    transform: scale(1);
    animation-timing-function: ease-in;
  }
  100% {                              /* 2100ms で完全に消える */
    opacity: 0;
    transform: scale(1.18);
  }
}

/* 白い全画面オーバーレイ。文字が抜けていくのに同期して 1600→2100ms で透過する。
   背景色のアルファを動かすため、子要素(文字)の opacity には影響しない */
@keyframes infora-overlay {
  0%       { background-color: rgba(255, 255, 255, 1); }
  76.1905% { background-color: rgba(255, 255, 255, 1); }   /* 1600ms まで白 */
  100%     { background-color: rgba(255, 255, 255, 0); }   /* 2100ms で完全に透過 */
}
@keyframes infora-hero-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- 球体マークにH1と英文コピーを重ねる舞台 ---
   グリッドの同じマスに2つ置いて重ねる。マークが下、文字が上。 */
.hero__stage {
  display: grid;
  place-items: center;
  width: 100%;
}
.hero__stage > * { grid-area: 1 / 1; }

/* ヒーロー高さの支配要因は球体の直径。幅だけでなく画面の高さも見て、
   低い画面では小さくする(1280×800 で1画面に収めるため) */
.hero__stage .orb-mark {
  width: clamp(300px, min(26vw, 36vh), 360px);   /* SPEC-v2 §E-1: 300〜360px */
  max-width: 82vw;
  z-index: 0;
}

/* H1 + 英文コピー。英文はH1の直下＝もとの2行目の位置に置く */
.hero__lead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, min(1vw, 1.4vh), 14px);
}

/* SPEC-v2 §E-1: H1は必ず1行に収める(601px以上)。
   全角19字相当なので、文字幅は およそ 17.3 × font-size。
   これが (画面幅 - 左右余白44px) に収まる必要がある。
   ＝ font-size ≦ (100vw - 44px) / 17.3 ＝ おおよそ 5.4vw が限界。
   余裕をみて 4.6vw とし、上限は 4rem(広い画面ではむしろ大きくなる)。
   ※clamp() の下限(最小値)は使えない。601〜765px の範囲で下限が効いてしまうと
     4.6vw を上回り、1行に収まらず画面外へはみ出すため min() で書く。 */
.hero__title {
  white-space: nowrap;
  color: #000;
  font-size: min(4.6vw, 4rem);
  line-height: 1.4;
  letter-spacing: .015em;
}

/* 英文コピー(74字)は およそ 35.9 × font-size。同じ考え方で 2.4vw が上限 */
.hero__en {
  max-width: none;
  white-space: nowrap;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(2.4vw, 1.375rem);
  line-height: 1.6;
  color: var(--sub-strong);
}

/* 説明文の改行位置を固定する(SPEC-v2 §E-1)。
   「…ご家族に、」で改行し、2行目を「暮らしを変えうる…NPOです。」にする。
   600px以下では非表示にして自然な折り返しに戻す */
.br-wide { display: inline; }

/* 600px以下でのみ折り返しを許可する(SPEC-v2 §E-1)。
   折り返せるので、ここでは読みやすさ優先のサイズに戻す */
@media (max-width: 600px) {
  .hero__title {
    white-space: normal;
    font-size: clamp(1.75rem, 8vw, 2.4rem);
  }
  .hero__en {
    white-space: normal;
    font-size: clamp(.9375rem, 3.6vw, 1.125rem);
  }
  .br-wide { display: none; }
}

.hero__summary {
  margin-top: clamp(14px, min(2.2vw, 3vh), 28px);
  max-width: 760px;          /* 2行に固定する(SPEC-v2 §E-1) */
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.85;
}

/* --- 英語版トップ (/en/index.html) ---
   H1が欧文になるため、和文19字を前提にしたサイズ指定が合わない。
   欧文用に別の上限を持たせる（1行に収める考え方は §E-1 と同じ） */
.hero__title--en {
  font-size: min(6.2vw, 4rem);
  letter-spacing: -.01em;
}
/* 英語版では2行目が和文キャッチになる */
.hero__en--ja { font-family: var(--font-ja); font-size: min(3vw, 1.5rem); }

/* 英語版の数字。和文は「1万」のように短いが、欧文は "approx. 10,000" と
   長くなるためカードからはみ出す。接頭辞を数字の上の行に逃がし、
   数字自体も一段小さくする */
.figure-stats--en .figure-stat__prefix {
  display: block;
  margin: 0 0 2px;
  font-family: var(--font-en);
  font-size: .875rem;
  letter-spacing: .04em;
}
.figure-stats--en .figure-stat__value { font-size: clamp(2rem, 4.2vw, 3rem); }
.figure-stats--en .figure-stat__unit { font-size: .5em; }

@media (max-width: 600px) {
  .hero__title--en { font-size: clamp(1.75rem, 8.5vw, 2.4rem); }
  .hero__en--ja { font-size: clamp(.9375rem, 4vw, 1.125rem); }
}

/* --------------------------------------------------------------------------
   2大ブロック (SPEC-v2 §E-1)
   ヒーローから独立させ、その直下の白背景セクションに置く。
   ブロック自体を淡くし、文字は濃色にする(白文字にしない)。
   影も枠線も付けない — 面としての濃色(--grad-deep)は
   フッター直上のCTAブロック(§D-2)だけに限定する。
   ※高さ・内部余白・文字サイズは初版から約1割小さくしている。
   -------------------------------------------------------------------------- */
.entry-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 22px);
}

.big-block {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  padding: clamp(20px, 2.2vw, 26px);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  color: var(--ink);
  transition: transform .22s var(--ease);
}
.big-block:hover { opacity: 1; transform: translateY(-3px); }

/* 背景は2ブロックとも同じ淡いグラデーションに統一する */
.big-block--brand,
.big-block--soft { background: linear-gradient(120deg, #efe9f8, #fdf6e4); }

/* --- アイコン(左) + 見出し(右) を横並び・縦中央で揃える --- */
.big-block__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.big-block__mark { --mark-size: 40px; }
.big-block__heading { display: block; min-width: 0; }

/* 文字色は2ブロック共通。
   【SPEC §8】--deep(#55506e)は淡いグラデの明るい側で基準を割ることがあるため、
   一段濃い --deep-2(#463f5e)を使う。本文は --ink。 */
.big-block__label {
  display: block;
  color: var(--deep-2);
  font-family: var(--font-en);
  font-weight: 600; font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase;
}

.big-block__title {
  display: block;
  margin-top: 3px;
  color: var(--deep-2);
  font-weight: 700;
  font-size: clamp(1.0625rem, .92rem + .76vw, 1.35rem);
  line-height: 1.45;
}

.big-block__text {
  display: block;
  margin-top: 14px;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.8;
}

/* 矢印付きの行。カード全体がリンクなので <a> は入れ子にしない */
.big-block__action {
  display: flex; align-items: center; gap: .4em;
  margin-top: auto;
  padding-top: 18px;
  color: var(--deep-2);
  font-weight: 700; font-size: .9375rem;
}
.big-block__arrow { transition: transform .2s var(--ease); }
.big-block:hover .big-block__arrow { transform: translateX(4px); }

/* ==========================================================================
   10. セクション部品
   ========================================================================== */

/* --- カード(Notion看板型: 大画像 → 見出し → 補足) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* 画像を持つカード。SPEC-v2 §B: 外側の影を残すのはこのカードだけ */
.card {
  display: flex; flex-direction: column;
  height: 100%;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { opacity: 1; transform: translateY(-3px); box-shadow: var(--shadow-hover); }

.card__visual { margin-bottom: 18px; }
.card__num {
  display: inline-block;
  margin-bottom: 8px;
  font-family: var(--font-en); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; color: var(--deep); opacity: .75;
}
.card__title { font-size: 1.1875rem; line-height: 1.55; }
.card__sub {
  margin-top: 6px;
  font-size: .875rem; font-weight: 500;
  color: var(--sub-strong);
}
.card__text { margin-top: 12px; font-size: .9375rem; line-height: 1.8; }
.card__foot { margin-top: auto; padding-top: 16px; }

/* --- 課題セクションの数字強調 (SPEC-v2 §E-2) ---
   「大きな数字 + 小さな説明」(SPEC-v2 §H)。色は --deep と --grad-brand のみ。
   枠線 --line-grad / 角丸18px / 背景はごく淡いグラデ。
   ※人型ピクトグラム等の作り込みは実装順序 §J-9 で追加する */
.figure-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  max-width: var(--measure);
  margin-bottom: clamp(28px, 3.5vw, 40px);
}
.figure-stat {
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid transparent;
  border-radius: 18px;
  background-image: linear-gradient(#fff, #fff), var(--line-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.figure-stat__value {
  font-size: clamp(2.5rem, 6vw, 4rem);   /* §E-2 で指定された値 */
  line-height: 1.1;
  color: var(--deep);
}
/* 数字だけ Inter 800。日本語(約・万人・割)は --font-ja のまま一段小さく置く */
.figure-stat__num {
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.figure-stat__prefix,
.figure-stat__unit {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: .42em;
  letter-spacing: .02em;
}
.figure-stat__prefix { margin-right: .1em; }
.figure-stat__unit   { margin-left: .1em; }
.figure-stat__label {
  margin-top: 12px;
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--sub-strong);
}

/* --- 数字で見るInfora (SPEC-v2 §E-2: 4つ横並び / 数字を大きく説明を小さく) ---
   マークアップは <dl>。dt=説明 / dd=数字 の順で意味を保ちつつ、
   表示は order で「数字が上・説明が下」に入れ替える */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
/* 上限は 3rem。4列のときの1列は約240pxしかなく、これより大きいと
   最長の「3,000人以上」が2行に折り返してカードの高さが揃わなくなる */
.stat__value {
  order: 1;
  display: block;
  margin: 0;
  font-size: clamp(2.25rem, 1.3rem + 3.1vw, 3rem);
  line-height: 1.15;
  color: var(--deep);
  white-space: nowrap;
}
/* 数字だけ Inter 800 */
.stat__num {
  font-family: var(--font-num);
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
/* 日本語の単位(人以上・件・団体・回)は --font-ja のまま一段小さく */
.stat__unit {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: .42em;
  margin-left: .12em;
  letter-spacing: .02em;
}
.stat__label {
  order: 2;
  display: block;
  margin-top: 10px;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--sub-strong);
}

/* --- メッセージ(2枚) --- */
.message {
  display: flex; flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.message__title { font-size: 1.1875rem; }
.message__text { font-size: .9375rem; line-height: 1.85; }
.message__sign {
  margin-top: auto;
  padding-top: 6px;
  font-size: .875rem;
  color: var(--sub-strong);
}
.message__sign strong { color: var(--ink); font-weight: 700; font-size: 1rem; }

/* --- ニュース --- */
.news-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.news-item { border-top: 1px solid var(--line); }
.news-item:last-child { border-bottom: 1px solid var(--line); }
.news-link {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 18px;
  min-height: 64px;
  padding: 16px 6px;
  color: inherit; text-decoration: none;
}
.news-link:hover { opacity: 1; background: rgba(241, 236, 228, .55); }
.news-date {
  font-family: var(--font-en); font-weight: 600; font-size: .875rem;
  color: var(--sub-strong); font-variant-numeric: tabular-nums;
}
.news-tag {
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--beige);
  font-size: .75rem; font-weight: 500; color: var(--deep);
  white-space: nowrap;
}
.news-title { font-size: .9375rem; font-weight: 500; line-height: 1.7; }

/* --- メディア掲載 --- */
.media-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0; list-style: none;
}
.media-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.media-card__outlet {
  font-family: var(--font-en); font-weight: 600; font-size: .8125rem;
  letter-spacing: .1em; color: var(--deep); opacity: .8;
}
.media-card__title { margin-top: 10px; font-size: 1rem; line-height: 1.7; font-weight: 700; color: var(--ink); }
.media-card__date { margin-top: 10px; font-size: .8125rem; color: var(--sub-strong); }

/* --- CTAバンド --- */
.cta {
  position: relative;
  padding: clamp(34px, 4.5vw, 56px);
  border-radius: var(--radius);
  background: linear-gradient(118deg, var(--grad-purple) 0%, #e7dff0 46%, var(--grad-cream) 100%);
  overflow: hidden;
  isolation: isolate;
}
.cta__title { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); }
.cta__text { max-width: var(--measure); margin-top: 14px; font-size: .9375rem; }

/* --- 枠線のグラデーションは2箇所だけ(SPEC-v2 §B) ---
   「数字で見るInfora」のカード(.stat)と、課題セクションの図(.figure-stat)のみ。
   それ以外(.card / .message / .media-card 等)は単色の --line を使う。
   背景(白)と枠線(グラデ)の2枚をbackground-clipで塗り分ける手法 */
.stat,
.grad-frame {
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--line-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* ==========================================================================
   10-b. 追従目次つきの本文レイアウト (SPEC-v2 §I)
   PC : 左に目次を sticky で固定し、現在位置をハイライト
   スマホ: ページ上部に横スクロールのタブとして表示
   ※ .section は overflow:clip なので sticky は効く(hidden だと効かない)
   ========================================================================== */
.anchor-layout__inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
/* グリッド項目の既定 min-width:auto を打ち消す。
   これが無いと、中身(nowrapの目次タブ等)より狭くならない */
.anchor-nav,
.anchor-layout__main { min-width: 0; }

.anchor-nav {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.anchor-nav__heading {
  margin-bottom: 12px;
  font-family: var(--font-en);
  font-weight: 600; font-size: .75rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sub-strong);
}
.anchor-nav__list { margin: 0; padding: 0; list-style: none; }

.anchor-nav__link {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--line);
  color: var(--sub-strong);
  font-size: .9375rem; font-weight: 500; line-height: 1.6;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.anchor-nav__link:hover { opacity: 1; color: var(--deep); border-left-color: var(--deep); }
/* 現在位置。JSが付ける(JSが無い場合は通常のリンク一覧として機能する) */
.anchor-nav__link.is-current {
  color: var(--deep-2);
  font-weight: 700;
  border-left-color: var(--deep);
}

/* --- 本文側のセクション --- */
/* 節と節のあいだ */
.doc-section + .doc-section { margin-top: clamp(56px, 7vw, 88px); }
/* 節の前に導入文やボタンを置いた場合も詰まらないようにする。
   親が .anchor-layout__main か .container.narrow かに関係なく効かせる */
.doc-section:not(:first-child) { margin-top: clamp(40px, 5vw, 64px); }
/* 固定ヘッダー + 目次タブの分だけアンカー位置をずらす */
.doc-section { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ==========================================================================
   10-c. 「私たちについて」の部品 (SPEC §6-2)
   ========================================================================== */

/* --- Mission / Vision / Issue --- */
.mvi { display: grid; gap: clamp(14px, 2vw, 20px); margin: 0; padding: 0; }
.mvi__item {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: baseline;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.mvi__term { margin: 0; }
.mvi__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 600; font-size: 1.0625rem;
  letter-spacing: .08em;
  color: var(--deep);
}
.mvi__ja { display: block; margin-top: 2px; font-size: .8125rem; color: var(--sub-strong); }
.mvi__desc {
  margin: 0;
  font-size: 1.0625rem; font-weight: 500; line-height: 1.8;
  color: var(--ink);
}

/* --- 大切にしていること(3項目) --- */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0; list-style: none;
}
.value {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
/* 数字はホームの「数字で見るInfora」と同じ扱い(Inter 800) */
.value__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 1.75rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
  opacity: .9;
}
.value__title { font-size: 1.0625rem; line-height: 1.6; }
.value__text { margin-top: 10px; font-size: .9375rem; line-height: 1.8; color: var(--sub-strong); }

/* --- 代表メッセージ --- */
.rep {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}
.rep__text { font-size: 1rem; line-height: 1.9; }
.rep__text + .rep__text { margin-top: 1.1em; }
.rep__sign { margin-top: 22px; font-size: .875rem; color: var(--sub-strong); }
.rep__sign strong { color: var(--ink); font-weight: 700; font-size: 1rem; }

/* --- チーム(4名) --- */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0; list-style: none;
}
.member__name { margin-top: 14px; font-size: 1rem; line-height: 1.5; }
.member__role { margin-top: 4px; font-size: .8125rem; color: var(--deep); }
.member__word { margin-top: 10px; font-size: .875rem; line-height: 1.8; color: var(--sub-strong); }

/* --- 枠だけ用意した節(アドバイザー等) --- */
.placeholder-note {
  padding: clamp(24px, 3vw, 34px);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--sub-strong);
  font-size: .9375rem;
}

/* 画像プレースホルダーの比率違い */
.media-frame--portrait { aspect-ratio: 3 / 4; }
.media-frame--square   { aspect-ratio: 1; }

/* ==========================================================================
   10-d. 「団体概要」の部品 (SPEC §6-4)
   ========================================================================== */

/* 節の中の小見出し */
.sub-head {
  margin-top: clamp(28px, 3.5vw, 40px);
  margin-bottom: 16px;
  font-size: 1.0625rem;
}
/* 節見出しの直後に置いた場合だけ余白を消す。
   :first-of-type だと、上に別の要素（実績の数字など）があっても
   詰まってしまうため、隣接セレクタで判定する */
.section-head + .sub-head { margin-top: 0; }

/* --- 法人情報テーブル --- */
.facts {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;   /* 角丸の内側に行の罫線を収める */
}
.facts__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: .9375rem;
  line-height: 1.85;
}
.facts__table tr + tr { border-top: 1px solid var(--line); }
.facts__table th,
.facts__table td { padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px); text-align: left; vertical-align: top; }
.facts__table th {
  width: 150px;
  color: var(--deep);
  font-weight: 700;
  background: linear-gradient(120deg, #faf7fd, #fdfaf3);
}
/* 未確定の値。書式だけの仮置きだと分かるようにする */
.facts__todo { color: var(--sub-strong); }
.facts__note { display: block; margin-top: 2px; font-size: .8125rem; color: var(--sub-strong); }

/* --- 定款・事業報告（認証後に公開） --- */
.doc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.doc-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 16px;
  padding: 16px clamp(16px, 2vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.doc-item__name { font-size: .9375rem; font-weight: 500; }
.doc-item__status {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad-header);
  color: var(--deep);
  font-size: .75rem; font-weight: 700;
  white-space: nowrap;
}

/* --- 沿革（年表） --- */
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  padding-bottom: clamp(24px, 3vw, 34px);
}
/* 縦の線。最後の項目では引かない */
.timeline__item::before {
  content: "";
  position: absolute;
  top: 26px; bottom: 0; left: 95px;
  width: 1px;
  background: var(--line);
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:last-child::before { display: none; }
/* 年の右に置く点 */
.timeline__item::after {
  content: "";
  position: absolute;
  top: 8px; left: 90px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--orb);
  box-shadow: 0 0 0 3px #fff;
}
.timeline__year {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
  line-height: 1.5;
}
.timeline__body { padding-left: 18px; }
.timeline__title { font-size: 1rem; line-height: 1.6; }
.timeline__text { margin-top: 6px; font-size: .9375rem; line-height: 1.8; color: var(--sub-strong); }

/* --- 実績・採択 --- */
.awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin: 0; padding: 0; list-style: none;
}
.award {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.award__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad-header);
  color: var(--deep);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.award__title { font-size: 1rem; font-weight: 700; line-height: 1.65; color: var(--ink); }
.award__year {
  margin-top: 8px;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  color: var(--sub-strong);
}

/* --- 役員・アドバイザーのカード（氏名 + ローマ字 + 肩書き） --- */
.member__en {
  margin-top: 3px;
  font-family: var(--font-en);
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--sub-strong);
}
.team--officers .member__role { margin-top: 8px; }

/* ==========================================================================
   10-e. 「ご支援」の部品 (SPEC §6-5 / SPEC-v2 §G)
   ========================================================================== */

/* --- マンスリーサポーターの進捗バー --- */
.gauge {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background-image: linear-gradient(#fff, #fff), var(--line-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.gauge__figures { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.gauge__now {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
}
.gauge__unit { font-family: var(--font-ja); font-weight: 700; font-size: .42em; margin-left: .12em; }
.gauge__sep  { color: var(--line); font-size: 1.5rem; }
.gauge__goal { font-size: .9375rem; font-weight: 500; color: var(--sub-strong); }

.gauge__bar {
  margin-top: 18px;
  height: 12px;
  border-radius: 999px;
  background: var(--grad-header);
  overflow: hidden;
}
/* 幅は --gauge（0〜100%）で制御する。実数が入るまでは0% */
.gauge__fill {
  display: block;
  width: var(--gauge, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--grad-brand);
}

/* --- 3つの支援方法（大きなカード） --- */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0; list-style: none;
}
.way {
  display: flex; flex-direction: column;
  min-height: 260px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.way__label {
  display: inline-block; align-self: flex-start;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad-header);
  color: var(--deep);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.way__title { margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; }
.way__amount { margin-top: 12px; color: var(--deep); line-height: 1.2; }
.way__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.way__unit { margin-left: .18em; font-size: .875rem; font-weight: 700; }
/* 「金額は自由に」のように数字でない場合。Inter を使わず --font-ja のまま */
.way__amount--text { font-size: 1.25rem; font-weight: 700; }
.way__text { margin-top: 14px; font-size: .9375rem; line-height: 1.85; color: var(--sub-strong); }
.way__foot { margin-top: auto; padding-top: 18px; font-size: .8125rem; color: var(--sub-strong); }
.way__link { margin-top: auto; padding-top: 12px; }

/* --- 使いみち（金額 → 内容） --- */
.usage { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.usage__item {
  display: grid;
  grid-template-columns: auto 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px);
  border: 1px solid transparent;
  border-radius: 18px;
  background-image: linear-gradient(#fff, #fff), var(--line-grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.usage__amount { color: var(--deep); font-weight: 700; white-space: nowrap; }
.usage__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-inline: .1em;
}
.usage__arrow { color: var(--sub-strong); text-align: center; }
.usage__text { font-size: .9375rem; line-height: 1.7; }
.usage__text strong { color: var(--deep); }

/* --- 当事者の声（引用） --- */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 24px);
  margin: 0; padding: 0; list-style: none;
}
.quote {
  position: relative;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.quote__text { font-size: .9375rem; line-height: 1.9; }
.quote__by { margin-top: 14px; font-size: .8125rem; color: var(--sub-strong); }

/* --- 税制上の取り扱い（見落とさせない） --- */
.notice {
  padding: clamp(22px, 2.8vw, 30px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--grad-header);
}
.notice__lead { font-size: 1rem; line-height: 1.85; }
.notice__lead strong { color: var(--deep); }
.notice__text { margin-top: 10px; font-size: .9375rem; line-height: 1.85; color: var(--sub-strong); }

/* --- 決済へのボタン --- */
.donate-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--lg { padding: 16px 34px; font-size: 1.0625rem; font-weight: 700; }
/* 遷移先が未定のあいだは操作できないことを明示する
   （空リンクを公開しないための措置。lang-switch の EN と同じ扱い） */
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* ==========================================================================
   10-f. 「講演・授業のご依頼」の部品 (SPEC §6-6)
   ========================================================================== */

/* --- テーマ例（番号 + 見出し） --- */
.themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin: 0; padding: 0; list-style: none;
}
.theme {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
/* 数字はホームの「数字で見るInfora」と同じ扱い(Inter 800) */
.theme__num {
  flex: none;
  font-family: var(--font-num);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1.4;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
  opacity: .85;
}
.theme__title { font-size: 1rem; line-height: 1.65; }

/* --- 対象 --- */
.targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin: 0; padding: 0; list-style: none;
}
.target {
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.target__title { font-size: 1.0625rem; line-height: 1.5; }
.target__text { margin-top: 10px; font-size: .9375rem; line-height: 1.8; color: var(--sub-strong); }

/* 実績の数字は2枚だけ並べる */
.stats--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   10-g. フォーム (SPEC §6-8 / §7 / §8)
   ========================================================================== */

/* 読みやすさのため、フォームのページは本文幅を絞る */
.container.narrow { max-width: calc(720px + var(--gutter) * 2); }

.form { margin-top: clamp(28px, 3.5vw, 40px); }
.form__row + .form__row { margin-top: clamp(20px, 2.4vw, 26px); }

.form__label {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-size: .9375rem; font-weight: 700;
  color: var(--deep);
}
/* 必須・任意のしるし。色だけに頼らず文字で示す(SPEC §8) */
.form__req,
.form__opt {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em;
}
.form__req { background: #fdeaea; color: #a3363b; }
.form__opt { background: var(--grad-header); color: var(--sub-strong); }

.form__control {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;          /* 16px未満だとiOSで拡大される */
  line-height: 1.7;
}
.form__control:hover { border-color: #d9d3e4; }
.form__control:focus-visible { outline: 3px solid var(--deep); outline-offset: 2px; border-color: var(--deep); }
.form__control--area { min-height: 180px; resize: vertical; }

/* select の三角。背景画像を使わずCSSだけで作る */
select.form__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--deep) 50%),
    linear-gradient(135deg, var(--deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.form__help { margin-top: 8px; font-size: .8125rem; line-height: 1.7; color: var(--sub-strong); }

/* 同意チェック */
.form__row--check {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.form__check {
  flex: none;
  width: 22px; height: 22px;
  margin: 2px 0 0;
  accent-color: var(--deep);
}
.form__check-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .9375rem; line-height: 1.7;
}

.form__actions { margin-top: clamp(24px, 3vw, 32px); }
.form__actions .btn { width: 100%; }
/* 送信先が未設定のあいだは押せない。書いた内容が消えるのを防ぐ */
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover { transform: none; box-shadow: none; }

/* 注意書きの箇条書き（お問い合わせページの「ご記入の前に」） */
.notice__list { margin: 12px 0 0; padding-left: 1.2em; font-size: .9375rem; line-height: 1.85; }
.notice__list li + li { margin-top: 6px; }

/* ==========================================================================
   10-h. 活動内容の一覧 (SPEC §6-3 / SPEC-v2 §J-6)
   ========================================================================== */
.activity-list { display: grid; gap: clamp(16px, 2.2vw, 24px); margin: 0; padding: 0; list-style: none; }

.activity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s var(--ease), border-color .22s var(--ease);
}
.activity:hover { opacity: 1; transform: translateY(-3px); border-color: #ddd5e8; }

/* 番号はホームの「数字で見るInfora」と同じ扱い(Inter 800) */
.activity__num {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--deep);
  opacity: .7;
}
.activity__body { display: block; min-width: 0; }
.activity__label {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--grad-header);
  color: var(--deep);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
}
.activity__title { margin-top: 12px; font-size: clamp(1.125rem, 1rem + .55vw, 1.375rem); line-height: 1.5; }
.activity__text { display: block; margin-top: 12px; font-size: .9375rem; line-height: 1.85; color: var(--sub-strong); }
.activity__more { display: block; margin-top: 6px; }
.activity:hover .arrow-link::after { transform: translateX(3px); }

/* ==========================================================================
   10-i. ニュース一覧 (SPEC §6-7 / build.mjs が生成)
   ここのクラス名を変えるときは build.mjs の renderNewsList() も直すこと
   ========================================================================== */
.news-cards { display: grid; gap: clamp(16px, 2.2vw, 24px); margin: 0; padding: 0; list-style: none; }

.news-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
/* 画像が無い記事は本文だけで1列にする */
.news-card:not(:has(.news-card__media)) { grid-template-columns: minmax(0, 1fr); }

.news-card__media {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--orb);
}
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }

.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.news-card__date {
  font-family: var(--font-en); font-weight: 600; font-size: .875rem;
  color: var(--sub-strong); font-variant-numeric: tabular-nums;
}
.news-card__title { margin-top: 10px; font-size: 1.0625rem; line-height: 1.6; }
.news-card__text { margin-top: 10px; font-size: .9375rem; line-height: 1.8; color: var(--sub-strong); }

/* ==========================================================================
   11. フッター (SPEC-v2 §D-3)
   左: ロゴ→正式名称→住所→メール / 中央: サイトマップ / 右: SNS 4種
   最下部: プライバシーポリシー等 + copyright
   背景は白〜極淡グラデ。上部に --line の区切り線。
   ※SPEC-v2 §B は「フッターも --grad-deep」としているが、§D-3 の
     「背景は白または極淡グラデ」を採用した(直上の §D-2 が濃色のため)
   ========================================================================== */
.site-footer {
  position: relative;
  padding-block: clamp(48px, 6vw, 72px) 28px;
  background: linear-gradient(180deg, #fdfbff 0%, #fdf8ec 100%);
  isolation: isolate;   /* ロゴの multiply をフッター内で完結させる */
}
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 32px;
}
.site-footer__top::after {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
}

/* --- 左: 団体情報 --- */
.site-footer__org { margin-top: 10px; font-size: .875rem; line-height: 1.9; color: var(--sub-strong); }
.site-footer__name { display: block; color: var(--ink); font-weight: 700; font-size: 1rem; }
.site-footer__org a { color: var(--sub-strong); }
.site-footer__org a:hover { opacity: 1; text-decoration: underline; }

/* --- 中央: サイトマップ(ヘッダーと同じ階層構造) --- */
.fnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 20px 24px; }
.fnav__heading { font-size: .8125rem; letter-spacing: .12em; font-family: var(--font-en); font-weight: 600; }
.fnav__list { margin: 8px 0 0; padding: 0; list-style: none; }
.fnav__list a {
  display: inline-flex; align-items: center;
  min-height: 38px;
  font-size: .9375rem; color: var(--ink); text-decoration: none;
}
.fnav__list a:hover { opacity: 1; text-decoration: underline; }
/* 子項目(ヘッダーのドロップダウンと同じ階層) */
.fnav__sub { margin: 0 0 0 2px; padding: 0; list-style: none; }
.fnav__sub a {
  min-height: 34px;
  font-size: .8125rem;
  color: var(--sub-strong);
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

/* --- 右: SNS 4種 --- */
.sns__heading { font-size: .8125rem; letter-spacing: .12em; font-family: var(--font-en); font-weight: 600; }
.sns__list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 0; padding: 0; list-style: none;
}
.sns__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  border-radius: 12px;
  color: var(--deep);
  border: 1px solid var(--line);
  background: #fff;
}
.sns__link:hover { opacity: 1; color: var(--deep-2); border-color: var(--deep); }
.sns__link svg { width: 20px; height: 20px; fill: currentColor; }
/* URL未確定のあいだは操作できないことを明示する */
.sns__link[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 20px;
  padding-top: 20px;
  font-size: .8125rem; color: var(--sub-strong);
}
.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  margin: 0; padding: 0; list-style: none;
}
.site-footer__legal a {
  display: inline-flex; align-items: center;
  min-height: 38px;
  color: var(--sub-strong); text-decoration: none;
}
.site-footer__legal a:hover { opacity: 1; text-decoration: underline; }

/* ==========================================================================
   12. スクロール表示 (reduced-motion では無効)
   既定は「表示済み」。JSが対応環境でのみ .reveal を有効化する。
   ========================================================================== */
[data-reveal] { opacity: 1; }
html.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
html.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   13. レスポンシブ
   ========================================================================== */
@media (max-width: 1080px) {
  .gnav__link { padding: 8px 9px; font-size: .875rem; }
  .lang-switch { margin-inline: 2px; }
}

/* 4列を保てるのは1列が約240px以上とれる幅まで。
   これを下回ると数字＋単位が1行に収まらないので2列に落とす(SPEC-v2 §E-2) */
@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__sns { grid-column: 1 / -1; }
  .platform-cta__inner { flex-direction: column; align-items: flex-start; }

  /* --- 「私たちについて」の部品を縦積みにする (SPEC §6-2) --- */
  .mvi__item { grid-template-columns: 1fr; gap: 10px; }
  .values    { grid-template-columns: 1fr; }
  .rep       { grid-template-columns: 1fr; }
  .rep__photo { max-width: 240px; }
  .team      { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- 「団体概要」の部品 (SPEC §6-4) --- */
  .awards { grid-template-columns: 1fr; }

  /* --- 「ご支援」の部品 (SPEC §6-5) --- */
  .ways   { grid-template-columns: 1fr; }

  /* --- 「講演・授業のご依頼」の部品 (SPEC §6-6) --- */
  .themes  { grid-template-columns: 1fr; }
  /* 番号と本文の横並びをやめる（本文が潰れるため） */
  .activity { grid-template-columns: 1fr; gap: 10px; }
  /* 画像を上、本文を下に積む */
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .news-card__media { max-width: 360px; }
  .targets { grid-template-columns: 1fr; }
  .way    { min-height: 0; }
  .quotes { grid-template-columns: 1fr; }
  .facts__table th { width: 116px; }
  .timeline__item { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .timeline__item::before { left: 66px; }
  .timeline__item::after { left: 61px; }
  .timeline__body { padding-left: 12px; }
}

@media (max-width: 780px) {
  .nav-toggle { display: inline-flex; }

  /* 2大ブロックが縦積みになる幅では、1画面に収める高さ固定を解除する。
     無理に押し込むとスマホで内容が詰まりすぎるため(SPEC-v2 §E-1)。
     space-evenly が効かなくなるので、上下の余白は各要素に戻す */
  .opening {
    display: block;
    min-height: 0;
  }
  .hero { padding-block: clamp(32px, 8vw, 56px); }
  .section--entry { padding-block: clamp(28px, 6vw, 44px); }

  /* 2大ブロックは縦積み(SPEC-v2 §E-1) */
  .entry-blocks { grid-template-columns: 1fr; }

  /* SPEC-v2 §F-1(4)「テキストと重ねない」:
     この幅では画面外に逃がす余地が無く、本文に重なってしまうため表示しない */
  .decor-orb { display: none; }

  /* ナビはパネル化。既定は非表示、[data-open] で開く */
  .gnav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 8px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .gnav[data-open="true"] { display: block; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .gnav__link { min-height: 48px; padding: 10px 12px; border-radius: 12px; }
  .site-header__inner { position: relative; }
  .header__actions .btn--donate { display: none; }  /* パネル内に表示する */
  .gnav__donate { margin-top: 12px; }
  .gnav__donate .btn { width: 100%; }

  /* --- スマホ: 子メニューはアコーディオン (SPEC-v2 §C) --- */
  .gnav__item { display: flex; flex-wrap: wrap; align-items: center; }
  .gnav__item--has-sub > .gnav__link { flex: 1; padding-right: 12px; }
  .gnav__sub-toggle { width: var(--tap); }

  .gnav__sub {
    /* パネル内では通常フローに積む(ポップアップにしない) */
    position: static;
    order: 3;
    flex-basis: 100%;
    min-width: 0;
    margin: 0 0 6px;
    padding: 2px 0 2px 14px;
    background: none;
    background-image: none;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    /* 閉じている状態は高さ0にする */
    display: none;
  }
  html:not(.js) .gnav__item--has-sub:hover > .gnav__sub,
  html:not(.js) .gnav__item--has-sub:focus-within > .gnav__sub,
  .gnav__item[data-open="true"] > .gnav__sub {
    display: block;
    transform: none;
  }

  .lang-switch { margin-inline: 0; }

  /* --- 追従目次: 上部の横スクロールタブにする (SPEC-v2 §I) --- */
  /* 1fr は minmax(auto,1fr) と同じで、中身の min-content より縮まない。
     目次タブが white-space:nowrap のため、minmax(0,1fr) にしないと
     列が中身の幅まで広がって画面からはみ出す */
  .anchor-layout__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .anchor-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 20;
    /* 画面幅いっぱいに敷いて、タブの帯として見せる */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(150%) blur(10px);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .anchor-nav__heading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .anchor-nav__list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* タブの帯としてスクロールバーは出さない */
    scrollbar-width: none;
  }
  .anchor-nav__list::-webkit-scrollbar { display: none; }
  .anchor-nav__link {
    flex: none;
    min-height: 46px;
    padding: 6px 14px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .anchor-nav__link:hover { border-left: 0; border-bottom-color: var(--deep); }
  .anchor-nav__link.is-current { border-left: 0; border-bottom-color: var(--deep); }

  /* アンカー先はヘッダー + タブの帯の分だけずらす */
  .doc-section { scroll-margin-top: calc(var(--header-h) + 64px); }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 781px) {
  .gnav { display: block !important; }
  .gnav__donate { display: none; }
}

/* 数字が「1,200件」等で折り返す幅になったら1列にする */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
}

/* .stats--duo は元から2枚。1080px以下でも2列のままでよいので戻す
   （.stats の2列指定と同値だが、480px以下では1列になる） */
@media (min-width: 481px) {
  .stats--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 200%拡大でも崩れないよう、狭幅では余白と字送りを調整 */
/* 狭い画面では法人情報テーブルを縦積みにする(2列だと値が潰れるため) */
@media (max-width: 560px) {
  /* 金額 → 内容 を縦積みにする（横並びだと文が潰れる） */
  .usage__item { grid-template-columns: 1fr; gap: 2px; }
  .usage__arrow { display: none; }
  .donate-actions .btn { width: 100%; }

  .facts__table th,
  .facts__table td { display: block; width: auto; }
  .facts__table th { padding-bottom: 4px; }
  .facts__table td { padding-top: 0; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .btn { padding: 12px 20px; }
  .news-link { grid-template-columns: auto minmax(0, 1fr); }
  .news-title { grid-column: 1 / -1; }
}

/* ==========================================================================
   14. モーション低減 (SPEC §4-1 / §8) — 医療福祉領域として必須
   .is-intro はそもそも付与しないが、二重の保険としてCSSでも無効化する
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* オープニングは再生せず、最終状態を直接表示する */
  html.is-intro .hero__content { animation: none; opacity: 1; transform: none; }

  /* オーバーレイ自体を一切表示しない(SPEC §4-1・§4-3) */
  html.is-intro .intro-overlay {
    display: none;
    animation: none;
  }
  html.is-intro .intro-overlay__text {
    animation: none;
    opacity: 0;
    transform: none;      /* 拡大アニメーションも一切適用しない */
    will-change: auto;
  }

  html.reveal-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   15. 印刷
   ========================================================================== */
@media print {
  .site-header, .nav-toggle, .decor-orb, .cta, .skip-link { display: none !important; }
  body { color: #000; }
  .card, .stat, .message, .big-block { box-shadow: none; border-color: #ccc; }
}