@charset "utf-8";
/* -------------------------------------------------------------------------
 * トップページ ファーストビュー（Three.js ヒーロー）
 * sacs / hero/css/hero.css
 *
 * 既存テーマのセレクタと衝突しないよう、すべて .sdgs- 接頭辞を付ける。
 * WebGL が無効／JS 未読込でも、この CSS だけで文章・ボタン・静止背景が成立する。
 * ---------------------------------------------------------------------- */

.sdgs-hero {
  /* assets/hero-scroll.js が 0〜1 で更新する。0 = 最上部 */
  --sdgs-scroll: 0;
  --sdgs-main: #125b43;
  --sdgs-sub: #67a94b;
  --sdgs-bg: #eef1e8;
  /* canvas を透過（alpha:true / clearAlpha 0）にしたので、この地色がそのまま
     canvas 越しに見える。色を合わせる必要がなく、継ぎ目も原理的に発生しない。
     3D 側の fog / globe / network もこの色を前提にしているので、変えるときは
     inc/hero.php の colors.background も必ず同じ値にすること。 */
  --sdgs-hero-bg: #eef1e8;
  --sdgs-text: #17231e;
  --sdgs-muted: #4a5a52;
  --sdgs-line: #e0e5d9;
  /* ヘッダー (.sacs-header__inner: max-width 1280px + padding 24px = 1328px) と
     コピーの左端を揃えるための内側余白 */
  --sdgs-page-inset: max(24px, calc((100vw - 1328px) / 2 + 24px));
  --sdgs-hero-height: min(760px, 85vh);
  /*
   * 背景イラスト（1100x1100、地球は画像内の中心 48%,47%）を
   * 3D の球体（S字グループ＝canvas 中心から右へ 20%、つまり画面幅の約 70% 地点）に
   * 重ねるための着地位置。contain で正方形画像の描画幅 ≒ ヒーロー高さなので、
   * 左端オフセット = 70vw - 画像内の地球中心(0.48 × 高さ)。ズレたらここを微調整する。
   */
  --sdgs-bg-x: calc(70vw - 0.44 * var(--sdgs-hero-height));
  --sdgs-bg-y: 0px;

  /* 下のセクションが上を通り過ぎていくよう、画面上部に留める。
     ただし中身が視界より高い低背モニターでは top:0 だと下端（会員導線の
     バナーや QR）が永遠に見えなくなるため、そのときだけ負の top にして
     下端が画面下に届くまでスクロールできるようにする */
  position: sticky;
  top: min(0px, calc(100dvh - 100%));
  z-index: 0;
  box-sizing: border-box;
  background-color: var(--sdgs-hero-bg);
  /* 単色だと平坦なので、上をわずかに白へ寄せて奥行きを出す */
  background-image: linear-gradient(180deg, #ffffff 0%, var(--sdgs-hero-bg) 46%, var(--sdgs-hero-bg) 100%);
  color: var(--sdgs-text);
  overflow: hidden; /* 横スクロールを絶対に発生させない */

  /*
   * スクロールすると、すりガラス越しのように霞んで奥へ退く。
   * 本体はゆっくりしか動かないので、通常どおり流れる下のセクションが
   * 相対的にせり上がってくる。
   */
  filter: blur(calc(var(--sdgs-scroll) * 7px));
  opacity: calc(1 - var(--sdgs-scroll) * 0.65);
  transform: translateY(calc(var(--sdgs-scroll) * 64px)) scale(calc(1 - var(--sdgs-scroll) * 0.03));
  transform-origin: center top;
  will-change: filter, opacity, transform;
  /* 親テーマが body に text-align:center を当てているため明示的に戻す */
  text-align: left;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Osaka,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 動きを減らす設定では、退かせずそのまま置く */
@media (prefers-reduced-motion: reduce) {
  .sdgs-hero {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

.sdgs-hero *,
.sdgs-hero *::before,
.sdgs-hero *::after {
  box-sizing: border-box;
}

/* ---------- レイアウト（デスクトップ: 左43% / 右57%） ---------- */

@supports (height: 1svh) {
  .sdgs-hero {
    --sdgs-hero-height: min(760px, 85svh);
  }
}

/*
 * 背景の水彩イラスト。canvas(z-index:1) より下に敷くので、
 * ガラスのキューブ越しに屈折して見える。
 * 画面いっぱいに広げず、中央に原寸比のまま置く。
 * 導入のタイルと一緒に見せ、SACS が立ち上がるところで引き取る。
 */
/*
 * 中央でいったん見せてから消し、S 字（右）に寄り添う位置で濃く出し直す。
 * 位置の切り替えは opacity 0 の間（45%→55%）に行うので、滑る動きは見えない。
 */
@keyframes sdgs-bg-out {
  from { opacity: 0.38; background-position: center; }
  45%  { opacity: 0; background-position: center; }
  55%  { opacity: 0; background-position: var(--sdgs-bg-x) var(--sdgs-bg-y); }
  to   { opacity: 0.5; background-position: var(--sdgs-bg-x) var(--sdgs-bg-y); }
}

/* スマホは縦積みレイアウトのため右寄せしない（フェードのみ） */
@keyframes sdgs-bg-out-mobile {
  from { opacity: 0.28; }
  45%  { opacity: 0; }
  55%  { opacity: 0; }
  to   { opacity: 0.45; }
}

.sdgs-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../../assets/hero-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.38;
  pointer-events: none;
}

/* JS が動く環境だけ、SACS の登場に合わせて消す。
   動かない環境では敷いたままにして、画面が寂しくならないようにする。 */
.sdgs-anim .sdgs-hero::after {
  animation: sdgs-bg-out 2.4s ease 1.6s both;
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-anim .sdgs-hero::after { animation: none; }
}

/* デスクトップはイラストを一回り小さく描く（3D の縮小と歩調を合わせる） */
@media screen and (min-width: 768px) {
  .sdgs-hero::after {
    background-size: auto 92%;
  }
}

@media screen and (max-width: 767px) {
  .sdgs-hero::after {
    background-position: center 42%;
    opacity: 0.28;
  }

  .sdgs-anim .sdgs-hero::after {
    animation-name: sdgs-bg-out-mobile;
  }
}

/* 3D は全幅の下敷き。canvas は透過なので SACS の文字が透けて見える */
.sdgs-hero .sdgs-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* コピーの背後を左から右へ抜けるスクリム。ベタ帯にせず自然に溶かす */
.sdgs-hero .sdgs-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /*
   * 背景色と同じ色で敷くと「霞ませる」ではなく「塗りつぶす」になり、
   * 左半分が単色のベタになって 3D が完全に消える。
   * 白で敷くことで光で飛ばした表現になり、下の立体がうっすら残る。
   * 左端も 0.97 → 0.86 に下げて気配を残している。
   */
  /*
   * 白を 0.8 倍に薄めてある。以前の 0.86 では左 66% が飛んでしまい、
   * 背景のオーロラが右 34% にしか見えなかった。
   * 地色を #eef1e8 に沈めたぶん、この濃さでも見出しは 13:1 以上を保つ。
   */
  background-image: linear-gradient(
    96deg,
    rgba(255, 255, 255, 0.688) 0%,
    rgba(255, 255, 255, 0.656) 24%,
    rgba(255, 255, 255, 0.528) 38%,
    rgba(255, 255, 255, 0.24) 52%,
    rgba(255, 255, 255, 0) 66%
  );
}

/* スクリムはコピーの下地を白く飛ばすための層。
   ただし S は最初この範囲（画面中央）で組み上がるので、
   最初から出ていると白く霞んで見えない。
   S が右へ抜けるのに合わせて遅れて敷く。
   3D が動いていないときは最初から必要なので、is-ready 限定にする。 */
@keyframes sdgs-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__scrim {
  animation: sdgs-scrim-in 1s ease 2.6s both;
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__scrim {
    animation: none;
  }
}

.sdgs-hero .sdgs-hero__grid {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: var(--sdgs-hero-height);
  /* 全幅の箱なので、そのままだと canvas のドラッグ・クリックを全部奪ってしまう。
     実際に操作するコピー部分だけ pointer-events を戻す。 */
  pointer-events: none;
}

/* コピーは 3D の完了を待たず、演出と並行して早めに出す（体感待ち時間の短縮）。
   3D が動いているとき（.is-ready）だけ遅らせる。WebGL 非対応や JS 無効の
   ときは何も起きず、最初から読める状態のままにする。 */
@keyframes sdgs-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* JS が動く環境では、最初から隠しておく（一瞬見えてしまうのを防ぐ）。
   ただし JS が途中で失敗しても読めるよう、4 秒後には必ず出す保険を掛ける。 */
.sdgs-anim .sdgs-hero .sdgs-hero__copy {
  animation: sdgs-copy-in 0.9s ease 4s both;
}

/* 3D が動いているときも、S の移動完了は待たずに出す */
.sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__copy {
  animation: sdgs-copy-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 3s both;
}

/* WebGL が使えない・初期化に失敗したときは待たせない */
.sdgs-hero.sdgs-hero--no-webgl .sdgs-hero__grid .sdgs-hero__copy {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-anim .sdgs-hero .sdgs-hero__copy,
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__copy {
    animation: none;
    opacity: 1;
  }
}

/* ---------- コピー左の帯（17目標の色） ----------
   17 個を上端から下端まで等間隔に置き、背景に細い縦線を一本通す。
   上下でブロックに割ると、動いたときに中央でぶつかって見えるため分けない。 */

.sdgs-hero .sdgs-hero__rail {
  /*
   * 上端はタイトルの先頭、下端は最後のカードの下に合わせたいので、
   * コピーの padding と同じ位置で上下を留める。
   * 移動距離（--sdgs-travel）は高さが確定してからでないと出せないため、
   * assets/rail.js が実測して入れる。
   */
  --sdgs-chip: 8px;
  --sdgs-travel: 0px;

  position: absolute;
  left: calc(var(--sdgs-page-inset) - 24px);
  top: 56px;
  bottom: 56px;
  width: var(--sdgs-chip);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
}

/* 帯を貫く縦線。チップはこの上に乗る */
.sdgs-hero .sdgs-hero__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background-color: var(--sdgs-line);
}

/*
 * 砂が落ちるように、上の 1 枚から順に下へ動きが伝わる。
 * 全部同じ向きに揺らし、遅延だけずらすことで波が一方向に流れる。
 * 端でゆっくり・中間で速いカーブを当て、機械的な等速を避ける。
 */
.sdgs-hero .sdgs-hero__rail i {
  position: relative;
  display: block;
  width: var(--sdgs-chip);
  height: var(--sdgs-chip);
  background-color: var(--c);
  /*
   * どのチップをいつ動かすかは assets/rail.js が決める。
   * ここでは動き方（速さとカーブ）だけを持つ。
   */
  transition: transform 0.9s cubic-bezier(0.62, 0, 0.38, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__rail i { transition: none; }
}

@media screen and (max-width: 900px) {
  .sdgs-hero .sdgs-hero__rail { display: none; }
}

.sdgs-hero .sdgs-hero__copy {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  padding: 56px 40px 56px var(--sdgs-page-inset);
  /*
   * 立体は右 55〜60% に置くので、テキストは左 40% 程度に収める。
   * padding-left（--sdgs-page-inset）は box-sizing: border-box により
   * max-width の内側に入る。inset は 1328px を超えると
   * (100vw - 1328) / 2 + 24 まで伸びるため、そのぶんを足しておかないと
   * 画面が広いほど本文が細くなる（2058px でテキスト幅 191px まで痩せ、
   * 見出しが 5 行に割れていた）。padding 左右を足して実効幅を 620px に保つ。
   */
  max-width: calc(var(--sdgs-page-inset) + min(620px, 44vw) + 40px);
}

/* ---------- テキスト ---------- */

.sdgs-hero .sdgs-hero__title span {
  display: block;
}

/* 1 行目は見出しとして立たせる */
.sdgs-hero .sdgs-hero__title span:first-child {
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0.12em;
}

/* 2 行目以降はゆったり読ませる */
.sdgs-hero .sdgs-hero__title span + span {
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.65;
}

/* 見出しが出たあと、本文・導線が順に続く */
.sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__lead {
  animation: sdgs-copy-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both;
}

.sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__entries {
  animation: sdgs-copy-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.4s both;
}

.sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__actions {
  animation: sdgs-copy-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.6s both;
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__lead,
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__entries,
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__actions {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__visual.is-ready ~ .sdgs-hero__grid .sdgs-hero__title span {
    animation: none;
  }
}

.sdgs-hero .sdgs-hero__title {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(28px, 3.1vw, 46px);
  /* 1 行目だけ太く、続く行は細く。強弱でリズムを付ける */
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.02em;
  /* 明示改行で収まらない画面幅でも、単語の途中ではなく文節で折る
     （auto-phrase 非対応ブラウザでは無視されるだけで害はない） */
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  color: var(--sdgs-text);
  box-shadow: none;
  text-shadow: none;
}

.sdgs-hero .sdgs-hero__lead {
  margin: 0 0 32px;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 2;
  color: var(--sdgs-muted);
}

.sdgs-hero .sdgs-hero__lead br {
  display: inline;
}

/* ---------- 導入のタイル（SDGs 17目標） ----------
   中央で順に現れ、そのまま消えて SACS へ渡す。
   出現→表示→消失を 1 つの keyframes でつなぐと、
   2 本のアニメーションが transform を奪い合わずに済む。 */

@keyframes sdgs-tile {
  0%   { opacity: 0; transform: scale(0.55) translateY(12px); }
  28%  { opacity: 1; transform: scale(1) translateY(0); }
  66%  { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.12) translateY(-6px); }
}

.sdgs-hero .sdgs-hero__tiles {
  position: absolute;
  z-index: 4;              /* SACS(3) より上。演出の最前面 */
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
}

.sdgs-hero .sdgs-hero__tiles-logo {
  display: block;
  width: clamp(230px, 32vw, 430px);
  height: auto;
  animation: sdgs-tile 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/*
 * 9 列 × 2 行。17 個なので下段は 8 個になるが、
 * flex + justify-content:center なので下段も中央で揃う。
 * タイル同士は隙間なく詰める。
 */
.sdgs-hero .sdgs-hero__tiles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: clamp(324px, 47vw, 675px);
  font-size: 0;            /* img 間の隙間を消す */
}

.sdgs-hero .sdgs-hero__tiles-grid img {
  display: block;
  width: calc(100% / 9);
  height: auto;
  animation: sdgs-tile 1.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 0.03s) both;
}

@media screen and (max-width: 767px) {
  .sdgs-hero .sdgs-hero__tiles { gap: 12px; }
  .sdgs-hero .sdgs-hero__tiles-grid { width: min(92vw, 400px); }
}

/* 動きを減らす設定では、そもそも導入演出を出さない */
@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__tiles { display: none; }
}

/* ---------- 会員種別の導線（カード全体がリンク） ----------
   ガラスの立体が主役なので、バナーは主張させない。
   半透明の白にぼかしを掛けて FV の質感に馴染ませ、
   触れたときだけ白く起き上がる。 */

.sdgs-hero .sdgs-hero__entries {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 20px;
  max-width: 480px;
}

.sdgs-hero .sdgs-entry {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 94px;
  padding: 18px 20px;
  border: 1px solid var(--sdgs-line);
  /* 左に帯を立てるので、その側は角を落とさない */
  border-left: 4px solid var(--sdgs-main);
  border-radius: 0 9px 9px 0;
  background-color: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  color: var(--sdgs-text);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sdgs-hero .sdgs-entry:hover,
.sdgs-hero .sdgs-entry:focus-visible {
  background-color: #fff;
  border-color: var(--sdgs-main);
  box-shadow: 0 6px 20px rgba(23, 35, 30, 0.08);
}

/* 主導線。塗りつぶすと FV の淡い質感から浮くので、
   左の帯と、わずかに強い影だけで前に出す。 */
/* 主導線。帯の色は共通なので、影の強さだけで前に出す */
.sdgs-hero .sdgs-entry--primary {
  box-shadow: 0 5px 16px rgba(23, 35, 30, 0.07);
}

.sdgs-hero .sdgs-entry--primary:hover,
.sdgs-hero .sdgs-entry--primary:focus-visible {
  box-shadow: 0 8px 22px rgba(23, 35, 30, 0.11);
}

.sdgs-hero .sdgs-entry__body {
  flex: 1 1 auto;
  min-width: 0;
}

.sdgs-hero .sdgs-entry__note {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--sdgs-muted);
}

.sdgs-hero .sdgs-entry__label {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 二つの導線は同サイズ。上限 18px */
  font-size: clamp(16px, 1.35vw, 18px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--sdgs-main);
}

.sdgs-hero .sdgs-entry__arw {
  font-size: 13px;
  transition: transform 0.2s ease;
}

.sdgs-hero .sdgs-entry:hover .sdgs-entry__arw {
  transform: translateX(3px);
}

/* QR は添え物。枠で囲うと重くなるので、地に溶かして置く */
.sdgs-hero .sdgs-entry__qr {
  flex: 0 0 auto;
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.sdgs-hero .sdgs-entry__qr img {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .sdgs-hero .sdgs-hero__entries { max-width: none; }
  .sdgs-hero .sdgs-entry__qr { width: 46px; height: 46px; }
}

/* ---------- CTA ---------- */

.sdgs-hero .sdgs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sdgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sdgs-btn__arrow {
  width: 16px;
  height: 10px;
  flex: none;
}

.sdgs-btn--primary,
.sdgs-hero a.sdgs-btn--primary {
  background-color: var(--sdgs-main);
  border-color: var(--sdgs-main);
  color: #fff;
}

.sdgs-btn--primary:hover,
.sdgs-btn--primary:focus,
.sdgs-hero a.sdgs-btn--primary:hover {
  background-color: #0d4433;
  border-color: #0d4433;
  color: #fff;
}

.sdgs-btn--ghost,
.sdgs-hero a.sdgs-btn--ghost {
  background-color: #fff;
  border-color: rgba(18, 91, 67, 0.45);
  color: var(--sdgs-main);
}

.sdgs-btn--ghost:hover,
.sdgs-btn--ghost:focus,
.sdgs-hero a.sdgs-btn--ghost:hover {
  background-color: rgba(18, 91, 67, 0.07);
  border-color: var(--sdgs-main);
  color: var(--sdgs-main);
}

.sdgs-hero a:focus-visible,
.sdgs-steps a:focus-visible {
  outline: 3px solid #0a97d9;
  outline-offset: 3px;
}

/* ---------- 3D 表示エリア ---------- */

/* WebGL 初期化前・非対応時に見える軽量な静止背景 */
.sdgs-hero .sdgs-hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  /* canvas 初期化前と WebGL 非対応時の軽量な静止背景。
     半透明にしてあるので、下に敷かれた SACS の文字が隠れない。 */
  background-image: radial-gradient(circle at 74% 34%, rgba(103, 169, 75, 0.15) 0, rgba(103, 169, 75, 0) 40%),
    radial-gradient(circle at 62% 66%, rgba(10, 151, 217, 0.11) 0, rgba(10, 151, 217, 0) 44%),
    radial-gradient(circle at 86% 24%, rgba(252, 195, 11, 0.13) 0, rgba(252, 195, 11, 0) 36%);
  transition: opacity 0.7s ease;
}

/* 3D が出たら静止背景は引っ込める（WebGL 非対応時は出したまま） */
.js-hero-visual.is-ready::before {
  opacity: 0;
}

.sdgs-hero .sdgs-hero__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.js-hero-visual.is-ready .sdgs-hero__canvas {
  opacity: 1;
}

/* ドラッグで回せることが分かる控えめなヒント（マウス操作時のみ付与される） */
.js-hero-visual.is-draggable .sdgs-hero__canvas {
  cursor: grab;
}

/* カラーキューブの上では押せることを示す（詳細度が同じなので記述順で上書き） */
.js-hero-visual.is-hovering-cube .sdgs-hero__canvas {
  cursor: pointer;
}

.js-hero-visual.is-dragging .sdgs-hero__canvas {
  cursor: grabbing;
}

/* ---------- ヒーロー直下のバナー帯（既存スライダー） ---------- */

.sdgs-hero-banners {
  background-color: #ffffff;
  border-top: 1px solid var(--sdgs-line);
  padding: 40px 0 44px;
  /* flexslider の前後ボタンが 1000px 前後の幅で画面外にはみ出すため */
  overflow-x: hidden;
}

.sdgs-hero-banners #topMainBnr {
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}

/* ---------- 3 カード ---------- */

/* ---------- 3 ステップ（参加から、活動へ） ---------- */

.sdgs-steps {
  --sdgs-main: #125b43;
  --sdgs-sub: #67a94b;
  --sdgs-text: #17231e;
  --sdgs-muted: #4a5a52;
  --sdgs-line: #e0e5d9;
  --sdgs-num: 46px;

  margin: 0 0 42px;
  padding: 46px 40px 40px;
  border-radius: 14px;
  background-color: #fafbf7;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Osaka,
    sans-serif;
  text-align: left;
}

.sdgs-steps__head {
  margin-bottom: 34px;
  text-align: center;
}

.sdgs-steps__title {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sdgs-text);
}

.sdgs-steps__lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--sdgs-muted);
}

/*
 * 番号を結ぶ線はリスト側に 1 本だけ引く。
 * 項目ごとに引くと列の境目で切れるので、背面に通して番号を上に乗せる。
 */
.sdgs-steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sdgs-steps__list::before {
  content: "";
  position: absolute;
  top: calc(var(--sdgs-num) / 2 - 1px);
  /* 列の gap を跨いで 3 つの番号を通すので、端から端まで引く */
  left: 0;
  right: 0;
  height: 2px;
  /*
   * 色の並びを番号の位置に合わせる。
   * 01（およそ 16.5%）が赤、02（50%）が緑、03（83.5%）が青になるよう
   * 停止位置を置き、その間を SDGs の色で渡していく。
   * 等間隔に 17 色を並べると番号と色が食い違うため、位置を指定している。
   */
  background-image: linear-gradient(
    90deg,
    #e5243b 0%,
    #e5243b 16.5%,
    #ff3a21 24%,
    #fd6925 31%,
    #fcc30b 38%,
    #dda63a 43%,
    #56c02b 47%,
    #4c9f38 50%,
    #3f7e44 57%,
    #26bde2 68%,
    #0a97d9 83.5%,
    #00689d 92%,
    #19486a 100%
  );
}

.sdgs-steps__item {
  position: relative;
  margin: 0;
}

/*
 * 画面に入ったら、線を左から引いてから 3 項目が順に現れる。
 * .is-revealed は assets/reveal.js が .sdgs-steps に付ける。
 * js-reveal が無い（JS 無効）ときは、最初から出たままにする。
 */
.js-reveal .sdgs-steps__list::before {
  transform: scaleX(0);
  transform-origin: left center;
  /*
   * cubic-bezier(.22,1,.36,1) は序盤で一気に進むため、
   * 引き始めた瞬間に右端まで届いて見えた。
   * 端をゆるめ、中間を一定に近づけたカーブへ変え、尺も伸ばす。
   */
  transition: transform 1.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.js-reveal .sdgs-steps.is-revealed .sdgs-steps__list::before {
  transform: scaleX(1);
}

.js-reveal .sdgs-steps__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .sdgs-steps.is-revealed .sdgs-steps__item {
  opacity: 1;
  transform: none;
}

/*
 * 線がその番号の位置（16.5% / 50% / 83.5%）に届く頃に出す。
 * カーブが端でゆるむので、時間は位置の割合とは一致しない。
 */
.js-reveal .sdgs-steps__item:nth-child(1) { transition-delay: 0.55s; }
.js-reveal .sdgs-steps__item:nth-child(2) { transition-delay: 0.95s; }
.js-reveal .sdgs-steps__item:nth-child(3) { transition-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .sdgs-steps__list::before,
  .js-reveal .sdgs-steps__item {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

.sdgs-steps__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--sdgs-num);
  height: var(--sdgs-num);
  margin-bottom: 26px;
  border: 2px solid var(--sdgs-main);
  border-radius: 50%;
  background-color: #fff;
  font-size: 15px;
  font-weight: 700;
  /* 継承した行間のぶん下にずれるので、ここで打ち消す */
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--sdgs-main);
}

/*
 * 枠線と数字は、線のその位置の色に合わせる。
 * 3 つ並ぶ番号が、下に通したグラデーションの一部として読める。
 */
.sdgs-steps__item:nth-child(1) .sdgs-steps__num {
  border-color: #e5243b;
  color: #c5192d;
}

.sdgs-steps__item:nth-child(2) .sdgs-steps__num {
  border-color: #4c9f38;
  color: #3f7e44;
}

.sdgs-steps__item:nth-child(3) .sdgs-steps__num {
  border-color: #0a97d9;
  color: #00689d;
}

/* 触れたときだけ地色を敷く。常時は背景を持たせない */
.sdgs-steps__body {
  padding: 18px 20px 20px;
  margin: 0 -20px;
  border-radius: 8px;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.sdgs-steps__item:hover .sdgs-steps__body,
.sdgs-steps__item:focus-within .sdgs-steps__body {
  background-color: #f1f4ec;
}

.sdgs-steps__body .sdgs-cards__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  color: var(--sdgs-main);
}

.sdgs-steps__name {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.sdgs-steps__name a {
  color: var(--sdgs-text);
  text-decoration: none;
}

.sdgs-steps__name a:hover {
  color: var(--sdgs-main);
}

/* 見出しのリンクを項目全体へ広げる。どこを押しても飛べるようにする */
.sdgs-steps__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sdgs-steps__text {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--sdgs-muted);
}

.sdgs-steps__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--sdgs-main);
}

.sdgs-steps__arw {
  transition: transform 0.2s ease;
}

.sdgs-steps__item:hover .sdgs-steps__arw {
  transform: translateX(3px);
}

.sdgs-steps__sub {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--sdgs-line);
  font-size: 12px;
  line-height: 1.75;
  color: var(--sdgs-muted);
}

/* 補足のリンクは、項目全体に広げたリンクより手前に出す */
.sdgs-steps__sub a {
  position: relative;
  z-index: 2;
  color: var(--sdgs-main);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ---------- タブレット ---------- */

@media screen and (max-width: 1180px) {
  .sdgs-hero {
    --sdgs-hero-height: min(680px, 82vh);
  }

  @supports (height: 1svh) {
    .sdgs-hero {
      --sdgs-hero-height: min(680px, 82svh);
    }
  }

  .sdgs-hero .sdgs-hero__copy {
    padding: 48px 28px 48px var(--sdgs-page-inset);
    max-width: min(560px, 50vw);
  }

  /* 幅が狭くなるぶんスクリムを気持ち長めに伸ばす */
  .sdgs-hero .sdgs-hero__scrim {
    background-image: linear-gradient(
      96deg,
      rgba(238, 241, 232, 0.776) 0%,
      rgba(238, 241, 232, 0.76) 28%,
      rgba(238, 241, 232, 0.656) 44%,
      rgba(238, 241, 232, 0.32) 56%,
      rgba(238, 241, 232, 0) 70%
    );
  }
}

/* ---------- スマートフォン ---------- */

@media screen and (max-width: 767px) {
  /* 狭い画面では QR を小さく */
  .sdgs-hero .sdgs-entry__qr { width: 66px; height: 66px; }

  /* 重ねると読めなくなるので、コピーを上・立体を下に積む */
  .sdgs-hero {
    display: flex;
    flex-direction: column;
  }

  .sdgs-hero .sdgs-hero__grid {
    order: 1;
    display: block;
    min-height: 0;
  }

  .sdgs-hero .sdgs-hero__copy {
    padding: 36px 20px 28px;
    max-width: none;
  }

  .sdgs-hero .sdgs-hero__scrim {
    display: none;
  }

  .sdgs-hero .sdgs-hero__visual {
    order: 2;
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    max-height: 46svh;
  }

  .sdgs-hero .sdgs-hero__title {
    font-size: clamp(22px, 6.2vw, 30px);
    margin-bottom: 18px;
  }

  .sdgs-hero .sdgs-hero__lead {
    font-size: 14px;
    line-height: 1.95;
    margin-bottom: 24px;
  }

  /* CTA は 2 列。狭い端末では縦積み */
  .sdgs-hero .sdgs-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sdgs-btn {
    padding: 0 10px;
    min-height: 50px;
    font-size: 13px;
    gap: 6px;
  }

  .sdgs-btn__arrow {
    width: 14px;
  }

  .sdgs-hero-banners {
    padding: 24px 0 28px;
  }

  .sdgs-steps {
    padding: 32px 20px 26px;
    margin-bottom: 30px;
  }

  .sdgs-steps__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px 0;
  }

  /* 縦積みでは横線が意味を持たないので消す */
  .sdgs-steps__list::before {
    display: none;
  }

  .sdgs-steps__num {
    margin-bottom: 16px;
  }

  .sdgs-steps__body {
    padding: 0;
    margin: 0;
  }
}

@media screen and (max-width: 360px) {
  .sdgs-hero .sdgs-hero__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* aspect-ratio 非対応ブラウザ向けの保険 */
@supports not (aspect-ratio: 4 / 3) {
  @media screen and (max-width: 767px) {
    .sdgs-hero .sdgs-hero__visual {
      height: 58vw;
      min-height: 260px;
    }
  }
}

/* ---------- 動きを減らす設定 ---------- */

@media (prefers-reduced-motion: reduce) {
  .sdgs-hero .sdgs-hero__canvas {
    transition: none;
  }

  .sdgs-hero *,
  .sdgs-steps * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- WebGL 非対応 ---------- */

.sdgs-hero--no-webgl .sdgs-hero__canvas {
  display: none;
}

/* -------------------------------------------------------------------------
 * 低背モニター（ノート PC 等）対応。
 * コピー欄の中身（タイトル＋リード＋会員導線カード×QR＋CTA で約 700px）が
 * 85svh を超えて下が切れるため、余白と装飾を圧縮して収める。
 * モバイル縦持ちは対象外（幅 768px 以上のみ）。
 * 基本ルールと同じ詳細度なので、必ずファイル末尾（基本ルールより後）に置くこと。
 * ---------------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-height: 800px) {
  .sdgs-hero .sdgs-hero__copy {
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .sdgs-hero .sdgs-hero__title {
    margin-bottom: 14px;
    font-size: clamp(26px, 2.6vw, 38px);
  }
  .sdgs-hero .sdgs-hero__lead {
    margin-bottom: 18px;
    line-height: 1.7;
  }
  .sdgs-hero .sdgs-hero__entries {
    gap: 18px;
    margin-bottom: 16px;
  }
  .sdgs-hero .sdgs-entry {
    padding: 12px 16px;
  }
  /* モバイルと同じ縮小サイズを低背 PC にも使う */
  .sdgs-hero .sdgs-entry__qr {
    width: 46px;
    height: 46px;
  }
}