/* ================================
   共通：変数・ベース設定
================================ */

/* カラー・フォントの共通変数 */
:root {
  --hero-font-base:
  "Zen Kaku Gothic New",
    "M PLUS 1p",    
    "Kosugi",
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Segoe UI",
    sans-serif;

  --hero-orange: #e36000;
  --hero-black:  #000000;
  --hero-bg:     #ffffff;
   --hero-gray:   #545454;

  /* 本文サイズバリエーション */
  --hero-text-xs: 0.8rem;
  --hero-text-sm: 0.9rem;
  --hero-text-md: 1rem;    /* 基本の本文 */
  --hero-text-lg: 1.3rem;  /* 中くらいに大きい本文（追加） */
  --hero-text-xl: 1.8rem;  /* 基本の2倍サイズ */
}


/* ================================
   共通：ベースリセット
================================ */

/* ページ全体のはみ出し対策（スマホ横スクロール防止） */
html {
  width: 100%;
  overflow-x: hidden;
}

/* ページ全体の基本設定 */
body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  max-width: 100%;
  overflow-x: hidden;

  font-family: var(--hero-font-base);
  font-size: var(--hero-text-md);
  line-height: 1.6;
  color: var(--hero-black);
  background-color: var(--hero-bg);
}
/* ページ本体（main）の共通余白＋幅制限 */
main {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 1.5rem;
  padding-bottom: 0;
  padding-left: 1.5rem;
  max-width: 1120px;}
@media (max-width: 767px) {

  main {
    /* ボックス系：左右余白を半分に */
    padding-right: 0.75rem;   /* ← 今1.5rem の半分 */
    padding-left: 0.75rem;
  }

}
/* 段落の余白ルール */
p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;
}

/* リンクのベーススタイル */
a {
  text-decoration: none;
  color: var(--hero-orange);
}

/* リンクホバー */
a:hover {
  text-decoration: underline;
}

/* 画像の基本スタイル（はみ出し防止） */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* インライン画像用（アイコンなど） */
.u-img-inline {
  display: inline-block;
  max-width: 100%;
  height: auto;
}


/* ================================
   共通：見出しスタイル
================================ */

/* セクション見出し全体（英語ラベル＋大見出し＋中見出しをまとめるブロック） */
.c-heading-block {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;

  text-align: center;
}

/* セクション大見出し（例：お知らせ / 活動紹介 等） */
/* B大見出し（メイン） */
.c-heading-main {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;

  /* ボックス系 */
  padding-bottom: 0.5rem;
  display: block;
  width: fit-content;  /* 文字の幅にあわせる */

  /* タイポ系 */
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 800;

  /* 色・装飾系 */
  color: var(--hero-black);
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: var(--hero-orange);
}

/* C中見出し（サブ） */
.c-heading-sub {
  /* 位置系 */
  margin-top: 1rem;
  margin-right: auto;
  margin-bottom: 0.75rem;
  margin-left: auto;

  /* ボックス系 */
  padding-bottom: 0.25rem;
  display: block;
  width: fit-content;  /* 文字の幅にあわせる */

  /* タイポ系 */
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 700;

  /* 色・装飾系 */
  color: var(--hero-black);
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--hero-orange);
}

/* A英語ラベル見出し（例：NEWS / SUPPORT / SOCIAL IMPACT） */
.c-heading-label {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-orange);
}

/* Hタグに適用する基本サイズ（必要なら個別上書き） */
h1 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.5rem;
  margin-left: 0;

  font-size: 2rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--hero-black);
}

h2 {
  margin-top: 2rem;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;

  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--hero-black);
}

h3 {
  margin-top: 1.5rem;
  margin-right: 0;
  margin-bottom: 0.75rem;
  margin-left: 0;

  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--hero-black);
}


/* ================================
   共通：本文テキストバリエーション
================================ */

/* D標準本文（明示的に指定したい場合） */
.u-text-body-md {
  font-size: var(--hero-text-md);
  line-height: 1.7;
}

/*F 少し小さい本文（注釈・補足） */
.u-text-body-sm {
  font-size: var(--hero-text-sm);
  line-height: 1.7;
}

/* Gかなり小さい本文（脚注など） */
.u-text-body-xs {
  font-size: var(--hero-text-xs);
  line-height: 1.7;
}

/* E中くらいに大きい本文（標準と2倍の中間） */
.u-text-body-lg {
  font-size: var(--hero-text-lg);
  line-height: 1.6;
}

/* H大きい本文（リード文・強調したい文章） */
.u-text-body-xl {
  font-size: var(--hero-text-xl);
  line-height: 1.5;
}

/* O強調テキスト（オレンジ＋太字） */
.u-text-emphasize {
  font-weight: 700;
  color: var(--hero-orange);
}



/* ================================
   共通：ボタンスタイル
================================ */

/* ボタンのベーススタイル */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0.8rem;
  padding-right: 1.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1.8rem;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition-property:
    background-color,
    color,
    border-color,
    box-shadow;
  transition-duration: 0.2s;
}

/* オレンジボタン（塗り） */
.c-btn--primary {
  border-color: var(--hero-orange);
  background-color: var(--hero-orange);
  color: #ffffff;
}

/* オレンジボタン：ホバー */
.c-btn--primary:hover {
  border-color: var(--hero-orange);
  background-color: #ff7a26;
  color: #ffffff;
  text-decoration: none;
}

/* 白ぬきボタン（オレンジ枠） */
.c-btn--ghost {
  border-color: var(--hero-orange);
  background-color: #ffffff;
  color: var(--hero-orange);
}

/* 白ぬきボタン：ホバー */
.c-btn--ghost:hover {
  border-color: var(--hero-orange);
  background-color: #fff3ea;
  color: var(--hero-orange);
  text-decoration: none;
}

/* =========   共通：ボタン内の矢印アイコン======= */

/* テキストの右に付ける「＞」用 */
.c-btn__icon {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0.5rem;

  /* ボックス系 */
  display: inline-block;

  /* タイポ系 */
  font-size: 0.95em;
  line-height: 1;
  font-weight: 700;
}

/* ================================
   共通：目次ブロック
================================ */

/* 目次全体のブロック */
.c-toc {
  /* 位置系 */
  margin-top: 1.5rem;
  margin-right: 0;
  margin-bottom: 1.5rem;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* 目次の大見出し（例：個人の方 / 企業・教育機関の方） */
.c-toc__title {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  /* ボックス系 */
  display: flex;
  align-items: center;

  /* タイポ系 */
  font-size: var(--hero-text-lg);  /* 標準より1段大きい */
  font-weight: 700;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 目次タイトル左の●＋＞アイコン */
.c-toc__title-icon {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0.5rem;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;

  /* タイポ系 */
  font-size: 0.9rem;
  font-weight: 700;

  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
}

/* 目次タイトルのテキスト部分 */
.c-toc__title-text {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* 目次のリスト（小見出しリンク） */
.c-toc__list {
  /* 位置系 */
  margin-top: 0.25rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 2.1rem;  /* アイコン分だけ字下げ */

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  list-style: none;
  display: block;  /* PCでは常に開いた状態が基本 */
}

/* 各項目の行 */
.c-toc__item {
  /* 位置系 */
  margin-top: 0.15rem;
  margin-right: 0;
  margin-bottom: 0.15rem;
  margin-left: 0;
}

/* 目次中見出しリンク（グレー＋下線） */
.c-toc__link {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-block;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0.1rem;
  padding-left: 0;

  /* タイポ系 */
  font-size: var(--hero-text-md);  /* 本文サイズ */
  font-weight: 400;

  /* 色・装飾系 */
  color: var(--hero-gray);
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--hero-gray);
}

/* ホバー時は下線を少し濃くする */
.c-toc__link:hover {
  /* 色・装飾系 */
  border-bottom-color: var(--hero-orange);
  color: var(--hero-orange);
}

/* スマホだけ「常にリストを表示」にする */
@media (max-width: 767.98px) {

  .c-toc.c-toc--static
  .c-toc__list {
    /* ボックス系 */
    display: block;
  }
}
/* ===   レイアウト：目次の2カラム== */

@media (min-width: 768px) {
  .l-toc-2col {
    /* ボックス系 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
}


/* ===  レイアウト：目次の3カラム= */

@media (min-width: 1024px) {
  .l-toc-3col {
    /* ボックス系 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
}


/* ================================
   レイアウト：目次の4カラム
================================ */

@media (min-width: 768px) {
  .l-toc-4col {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /* ボックス系 */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }
}


/* ===   目次：スマホ用アコーディオン==== */

@media (max-width: 767.98px) {

  /* タイトルをタップ可能にする（スマホだけ） */
  .c-toc__title {
    /* 色・装飾系 */
    cursor: pointer;
  }

  /* 初期状態では小さい目次を隠す（スマホだけ） */
  .c-toc__list {
    /* ボックス系 */
    display: none;
  }

  /* 開いたときに小さい目次を表示（スマホだけ） */
  .c-toc.is-open
  .c-toc__list {
    /* ボックス系 */
    display: block;
  }

  /* 矢印アイコンの基本（スマホではアニメーション付き） */
  .c-icon-toggle {
    /* ボックス系 */
    display: inline-block;

    /* 色・装飾系 */
    transform: rotate(90deg);
    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }

  /* 開いたときの矢印（上向き・スマホのみ） */
  .c-toc.is-open
  .c-icon-toggle {
    /* 色・装飾系 */
    transform: rotate(-90deg);
  }
}

@media (max-width: 767.98px) {
  .c-toc__title {
    margin-left: 2rem;   /* ★ 1.5文字ぶん右に寄せる */
  }
}
  .c-toc {
    /* 位置系 */
    margin-left: 1rem;   /* ★ ここで「1.5文字ぶんくらい右」 */
  }
/* =   目次：PCでは常に開いた状態== */

@media (min-width: 768px) {



  /* PCでは矢印は固定（アニメーションなしでもOKならここで固定） */
  .c-icon-toggle {
    /* ボックス系 */
    display: inline-block;

    /* 色・装飾系 */
    transform: rotate(90deg);
  }
}

/* ================================
   レイアウト：目次のSP 2カラム
   （PCは4カラムのまま）
================================ */
@media (max-width: 767.98px) {

  .l-toc-2col-sp {
    /* ボックス系 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.75rem;

    /* 位置系 */
    margin-top: 0.5rem;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  /* 各タイトルリンクを左寄せ＆余白調整 */
  .l-toc-2col-sp
  .c-toc__title {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /* ボックス系 */
    width: 100%;

    /* タイポ系 */
    text-align: left;
  }
}


/* ================================
   共通：続きを読むリンク（アコーディオン）
================================ */

/* 続きを読むリンク全体（buttonのデフォルト装飾を消す） */
.c-readmore {
  /* ブラウザ標準のボタン装飾をリセット */
  border-width: 0;
  border-style: none;
  background-color: transparent;
  outline: none;
  -webkit-appearance: none;
  appearance: none;

  /* 位置系 */
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  /* タイポ系 */
  font-size: var(--hero-text-sm);  /* 一番小さいより1つ上 */
  font-weight: 500;

  /* 色・装飾系 */
  color: var(--hero-black);
  cursor: pointer;
}

/* 続きを読むラベルテキスト */
.c-readmore__label {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
}

/* 続きを読むの●アイコン枠 */
.c-readmore__icon {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 1.4rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;

  /* タイポ系 */
  font-size: 0.8rem;
  font-weight: 700;

  /* 色・装飾系 */
  color: #ffffff;
  background-color: var(--hero-orange);
}

/* 矢印アイコン（> を回転して使う） */
.c-icon-toggle {
  /* ボックス系 */
  display: inline-block;

  /* 色・装飾系 */
  transform: rotate(90deg);   /* 初期状態：下向き */
  transition-property: transform;
  transition-duration: 0.2s;
  transition-timing-function: ease;
}

/* 開いているときの矢印（上向き） */
.c-accordion.is-open
.c-icon-toggle {
  /* 色・装飾系 */
  transform: rotate(-90deg);
}


/* ================================
   共通：アコーディオン本体
================================ */

/* アコーディオン全体のラッパー */
.c-accordion {
  /* 位置系 */
  margin-top: 1rem;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: 0;
}

/* アコーディオンの中身（開閉される部分） */
.c-accordion__content {
  /* 位置系 */
  margin-top: 0.75rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  max-height: 0;
  overflow: hidden;
  transition-property: max-height;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* 開いているときに中身を表示 */
.c-accordion.is-open
.c-accordion__content {
  /* ボックス系 */
  max-height: 1000px;  /* 中身の量に応じて調整してOK */
}

/* ================================
   note最新記事セクション
================================ */

/* noteセクション全体のラッパー */
.note-embed-section {
  margin-top: 25px;
  margin-right: 0;
  margin-bottom: 80px;
  margin-left: 0;
}

/* カード全体の白背景ボックス */
.note-embed-framewrap {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 32px;
  padding-right: 40px;
  padding-bottom: 32px;
  padding-left: 40px;

  border-radius: 24px;

  background-color: #ffffff;
}

/* リスト全体（箇条書きの・を消す） */
.note-embed-list {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  list-style: none;
}

/* 各記事カードの1行ぶん */
.note-embed-item {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 12px;
  padding-right: 0;
  padding-bottom: 12px;
  padding-left: 0;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #cccccc;
}

/* 最後のカードだけ下線を消す */
.note-embed-item:last-child {
  border-bottom-width: 0;
  border-bottom-style: none;
}

/* 記事全体をクリック可能にするリンク */
.note-embed-link {
  display: flex;
  align-items: flex-start;
  gap: 24px;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;

  text-decoration: none;
  color: inherit;
}

/* サムネイルエリア（PCで横並び） */
.note-embed-thumb {
  flex: 0 0 220px;

  max-width: 220px;
  overflow: hidden;

  border-radius: 16px;
}

/* サムネイル画像（比率維持） */
.note-embed-thumb img {
  display: block;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  width: 100%;
  height: auto;
}

/* テキストエリア全体 */
.note-embed-body {
  flex: 1 1 auto;

  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* 日付テキスト（小さめ） */
.note-embed-date {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;

  font-size: var(--hero-text-sm);
  color: var(--hero-black);
}

/* タイトル（PCの基本スタイル） */
/* → PCではQ=強調オレンジ相当で表示 */
.note-embed-article-title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;

  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.6;

  color: var(--hero-orange);
}

/* 抜粋テキスト（本文） */
.note-embed-excerpt {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  font-size: var(--hero-text-md);
  line-height: 1.8;
  color: var(--hero-black);
}

/* ホバー時：タイトルだけ少し強調（色はオレンジのまま） */
.note-embed-link:hover
.note-embed-article-title {
  text-decoration: underline;
}

/* 「noteで一覧をもっと見る」リンク（右寄せ） */
.note-embed-more {
  margin-top: 16px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  font-size: 0.95rem;
  text-align: right;
}

/* =====   note最新記事：PCレイアウト======= */

@media (min-width: 768px) {

  /* PCでは横並びレイアウトのまま維持 */
  .note-embed-link {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ====   note最新記事：スマホレイアウト========= */

@media (max-width: 767.98px) {

  /* スマホ：カード全体の余白を軽めに */
  .note-embed-framewrap {
    /* ボックス系 */
    padding-top: 20px;
    padding-right: 12px;
    padding-bottom: 20px;
    padding-left: 12px;
  }

  /* スマホ：画像左／テキスト右の横並び */
  .note-embed-link {
    /* ボックス系 */
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;

    /* タイポ系 */
    text-align: left;
  }

  /* スマホ：サムネイルをPCの約6割サイズに */
  .note-embed-thumb {
    /* ボックス系 */
    flex: 0 0 40%;
    max-width: 140px;
    border-radius: 12px;
  }

  /* スマホ：テキストエリア */
  .note-embed-body {
    /* ボックス系 */
    flex: 1 1 auto;

    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  /* スマホ：日付を小さめに */
  .note-embed-date {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 4px;
    margin-left: 0;

    /* タイポ系 */
    font-size: var(--hero-text-xs);
    line-height: 1.4;

    /* 色・装飾系 */
    color: var(--hero-black);
  }

  /* スマホ：タイトルもひと回り小さく
     画像の高さに収まりやすいサイズ感 */
  .note-embed-article-title {
    /* 位置系 */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /* タイポ系 */
    font-size: var(--hero-text-sm);
    font-weight: 700;
    line-height: 1.4;

    /* 色・装飾系 */
    color: var(--hero-orange);
  }

  /* スマホ：本文（抜粋）は非表示 */
  .note-embed-excerpt {
    /* ボックス系 */
    display: none;
  }
}

/* ================================
   共通：【1】ページ見出しバナー
================================ */

/* ページ上部の横幅いっぱいの見出しバナー */
.c-page-hero {
  position: relative;
  z-index: 0;
  /* 画面いっぱいに広げる（main の幅制限を無視） */
  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);

  width: 100vw;
  min-height: 224px;
  overflow: hidden;

  color: #ffffff;
}

/* バナーの背景画像ラッパー（いちばん下のレイヤー） */
.c-page-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
}

/* 背景画像（横幅いっぱい＋カバー） */
.c-page-hero__img {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 半透明カバー（グレー／今の濃さの半分くらい） */
.c-page-hero::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;

  background-color: rgba(162, 161, 161, 0.38);

  z-index: 1;
}

/* テキスト内側エリア（いちばん上のレイヤー） */
.c-page-hero__inner {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;

  max-width: 1120px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  z-index: 2;
}

/* 英語ラベル（日本語見出しにほぼくっつける） */
.c-page-hero__label {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  padding-top: 0;
  padding-right: 0.3rem;
  padding-bottom: 0;
  padding-left: 0.3rem;

  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.1;

  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

/* 日本語タイトル（英語ラベルのすぐ下） */
.c-page-hero__title {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  font-size: 2.2rem;
  line-height: 1.25;
  font-weight: 800;

  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* タブレット以上（PC） */
@media (min-width: 768px) {

  /* PC時の高さ（前と同じ） */
  .c-page-hero {
    min-height: 648px;
  }

  /* PCだけテキスト位置を下＆右に寄せる */
  .c-page-hero__inner {
    padding-top: 3.5rem;   /* 通常1.5rem → 約2行分下へ */
    padding-left: 2.5rem;  /* 1.5rem → 右に約2文字ぶん寄せる */
  }

  /* 日本語タイトルをPCでは大きく（既存） */
  .c-page-hero__title {
    font-size: 4rem;
  }
}


/* 日本語タイトル（バナー専用フォント適用） */
.c-page-hero__title {
  /* タイポ系 */
  font-family:
    "Zen Kaku Gothic New",
    var(--hero-font-base),
    sans-serif;

  font-weight: 900;   /* 太めで強調 */
}

/* 英語ラベル（ABOUT）専用フォント適用 */
.c-page-hero__label {
  /* タイポ系 */
  font-family:
    "Zen Kaku Gothic New",
    var(--hero-font-base),
    sans-serif;

  font-weight: 900;   /* 太めで統一感アップ */
}

/* ================================
   共通：【2】コンテンツ見出しバナー画像
================================ */

/* セクション全体のラッパー */
.c-content-hero {
  /* 位置系 */
  margin-top: 0;
  margin-right: calc(50% - 50vw);
  margin-bottom: 3rem;
  margin-left: calc(50% - 50vw);

  /* ボックス系 */
  width: 100vw;
}

/* 画像＋テキストをまとめるエリア */
.c-content-hero__media {
  /* 位置系 */
  position: relative;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  /* ボックス系 */
  width: 100%;
}

/* 背景画像（スマホでは全体が見える） */
.c-content-hero__img {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  display: block;
  width: 100%;
  height: auto;
}

/* 左上の白い四角パネル（サイズ固定・少し透過） */
.c-content-hero__panel {
  /* 位置系 */
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 190px;         /* ← ひとまわり小さめ（元イメージの7割くらい） */
  padding-top: 0.9rem;
  padding-right: 1rem;
  padding-bottom: 0.9rem;
  padding-left: 1rem;

  /* タイポ系 */
  text-align: center;
  line-height: 1.5;

  /* 色・装飾系 */
 background-color: rgba(255, 255, 255, 0.4); /* ← 透明度かなり薄くした */
  backdrop-filter: blur(1.5px);
}

/* 見出しタイトル（オレンジ下線つき） */
.c-content-hero__title {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  /* ボックス系 */
  display: inline-block;

  /* タイポ系 */
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.3;

  /* 色・装飾系 */
  color: var(--hero-black);
}

/* 見出し直下のオレンジ下線（文字数にぴったり） */
.c-content-hero__title::after {
  /* ボックス系 */
  content: "";
  display: block;
  width: 100%;
  height: 3px;

  /* 位置系 */
  margin-top: 0.3rem;

  /* 色・装飾系 */
  background-color: var(--hero-orange);
}

/* 説明テキスト（中央揃え・自動改行） */
.c-content-hero__lead {
  /* 位置系 */
  margin-top: 0.3rem;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* タイポ系 */
  font-size: var(--hero-text-sm);
  font-weight: 600;
  line-height: 1.7;
  text-align: center;

  /* 色・装飾系 */
  color: var(--hero-gray);
}


/* ================================
   【2】コンテンツ見出しバナー：PC調整
================================ */

@media (min-width: 768px) {

  /* バナー高さを今より約1.3倍に拡張 */
  .c-content-hero__media {
    /* ボックス系 */
    height: 600px;  /* ←元が約400px想定 →  */
    overflow: hidden;
    position: relative;
  }

  /* 画像はトリミングを最小にして収める */
  .c-content-hero__img {
    /* ボックス系 */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 白い四角（パネル位置とサイズ調整は前回と同じ） */
  .c-content-hero__panel {
    /* 位置系 */
    top: 4rem;
    left: 3rem;

    /* ボックス系 */
    width: 380px;
    padding-top: 1rem;
    padding-right: 1.6rem;
    padding-bottom: 1rem;
    padding-left: 1.6rem;

    /* タイポ系 */
    text-align: center;
    line-height: 1.5;

    /* 色・装飾系 */
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(1.5px);
  }

  .c-content-hero__title {
    /* タイポ系 */
    font-size: 1.8rem;
    line-height: 1.25;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 色 */
    color: var(--hero-black);
  }
}


/* ================================
   スマホ専用の細かい調整
================================ */
@media (max-width: 767px) {

  /* 白パネルの高さだけ下げる（8割） */
  .c-content-hero__panel {
    padding-top: 0.6rem;    /* 0.9 → 0.6 */
    padding-bottom: 0.6rem; /* 0.9 → 0.6 */
  }

  /* 見出し：1.2倍サイズ＆1行固定のまま */
  .c-content-hero__title {
    font-size: 1.35rem;   /* ← だいたい1.2倍 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  /* 下線とのスキマを半分に（見出し→説明の距離） */
  .c-content-hero__title::after {
    margin-top: 0.15rem; /* 0.3 → 0.15 */
  }

  /* 説明文を上に寄せる */
  .c-content-hero__lead {
    margin-top: 0.15rem; /* 0.3 → 0.15 */
    font-size: calc(var(--hero-text-sm) * 0.8);
    line-height: 1.55;
  }
}
/* ======   スマホ専用改行============== */

/* 初期状態（PC）では非表示 */
.sp-br {
  display: none;
}

/* スマホだけ br を有効化 */
@media (max-width: 767.98px) {
  .sp-br {
    display: inline;
  }
}





/* ================================
   共通：【3】活動紹介カード画像（ラベルなし）
================================ */

/* カード全体のラッパー（1枚ぶんのブロック） */
.c-act-card {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 2.5rem;
  margin-left: 0;

  /* ボックス系 */
  max-width: 640px;
}

/* 画像エリア（角丸＋トリミング） */
.c-act-card__thumb {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.2rem;
  margin-left: 0;

  /* ボックス系 */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
}

/* 実際の画像（横長の比率維持＋カバー） */
.c-act-card__img {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PCで少しだけサイズUP */
@media (min-width: 768px) {
  .c-act-card {
    max-width: 720px;
  }

  .c-act-card__thumb {
    border-radius: 28px;
  }
}


/* 見出しタイトル（日本語・英語共通フォント） */
.c-content-hero__title {
  /* タイポ系 */
  font-family:
    "Zen Kaku Gothic New",
    var(--hero-font-base),
    sans-serif;
letter-spacing: 0.08em; 
  font-weight: 900;      /* パネル内で最も目立たせる太さ */
}



/* ================================
   共通：個人/法人向けCTAエリア
================================ */

/* セクション全体（SPは通常幅、PCで横いっぱい） */
.home-support-cta {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;

  /* ボックス系 */
  padding-top: 2.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem;
  padding-left: 1.5rem;

  /* 色装飾系 */
  background-color: #ffffff;
}

/* 内側コンテナ */
.home-support-cta__inner {
  /* 位置系 */
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;

  /* ボックス系 */
  max-width: 960px;
}

/* カラム全体（SPは縦並び） */
.home-support-cta__cols {
  /* ボックス系 */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* 各カラム */
.home-support-cta__col {
  /* タイポ系 */
  text-align: center;
}

/* 「個人の方へ」「法人・教育機関の方へ」 */
.home-support-cta__heading {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0.5rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: 1.1rem;
  font-weight: 700;
}

/* 「関わり方をみてみる」 */
.home-support-cta__sub {
  /* 位置系 */
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1.25rem;
  margin-left: 0;

  /* タイポ系 */
  font-size: 0.95rem;
  font-weight: 500;
}

/* ボタン共通 */
.home-support-cta__btn {
  /* ボックス系 */
  min-width: 230px;

  /* タイポ系 */
  font-size: 0.95rem;
}

/* PCでだけ横幅いっぱい＆左右2カラムにする */
@media (min-width: 768px) {
  .home-support-cta {
    /* 位置系 */
    margin-top: 0;
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);

    /* ボックス系 */
    padding-top: 3rem;
    padding-right: 1.5rem;
    padding-bottom: 3.5rem;
    padding-left: 1.5rem;
    width: 100vw;
  }

  .home-support-cta__cols {
    /* ボックス系 */
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
  }

  .home-support-cta__col {
    /* ボックス系 */
    width: 50%;
  }
}

/* ================================
   目次アコーディオン（SP）
================================ */

@media (max-width: 767px) {
  .c-toc__list {
    display: none;
  }

  .c-toc.is-open .c-toc__list {
    display: block;
  }
}