/* ==========================================================
   SDGs：17色の輪から、6つの取り組みへ
   各ゾーンは、その取り組みが関わる目標の色。
   背景の紙吹雪（confetti）は journey.js が描きます。
   ========================================================== */

/* ---------- SDGsの輪（キービジュアル） ---------- */
.sd-kv { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f1f5fb 55%, #e3ebf6 100%); }
.sd-kv .uv-kv__bg { inset: 0; }
.sd-wheel-wrap { position: absolute; inset: var(--header-h) 0 0 0; display: grid; place-items: center; }
.sd-wheel { width: min(72vmin, 640px); height: auto; overflow: visible; transform: rotate(calc(var(--kv) * 200deg)) scale(calc(1 + var(--kv) * .35)); }
.sd-wheel__spin { transform-box: view-box; transform-origin: 300px 300px; animation: spin 70s linear infinite; }
.sd-seg { transform-box: view-box; transform-origin: 300px 300px; transform: scale(0) rotate(-40deg); transition: transform 1s cubic-bezier(.2, 1.5, .4, 1) var(--d); }
.is-loaded .sd-seg { transform: none; }
.sd-seg:hover { filter: brightness(1.12); }
/* 輪のまわりを回る色の粒 */
.sd-orbit-dot {
  position: absolute; left: 50%; top: calc(50% + var(--header-h) / 2); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; background: var(--c); transform-origin: calc(var(--s) / 2) calc(var(--s) / 2);
  transform: rotate(var(--a)) translateX(min(var(--r), 46vmin));
  animation: sd-orbit 36s linear infinite; opacity: .9;
}
.sd-orbit-dot:nth-child(odd) { animation-duration: 52s; animation-direction: reverse; }
@keyframes sd-orbit { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---------- 代表メッセージ・17の目標 ---------- */
.sd-message { background: #1e2a44; padding: 60px 0 110px; }
.sd-msg { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 90px); align-items: start; padding: clamp(60px, 9vw, 110px) 0 0; }
.sd-sign { text-align: right; font-family: var(--font-serif); font-size: 16px; margin-top: 24px; }
.sd-goals { gap: 8px; }
.sd-goals img { border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
@media (max-width: 860px) { .sd-msg { grid-template-columns: 1fr; } }

/* ---------- 6つの取り組み ---------- */
.sd-zone { padding: 60px 0 110px; }
.sd-act { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 90px); align-items: center; padding: clamp(50px, 8vw, 100px) 0 0; }
.sd-act--rev .sd-icons { order: -1; }
.sd-act--rev { grid-template-columns: .85fr 1.15fr; }
.sd-num { display: block; font-family: var(--font-mont); font-weight: 800; font-size: clamp(56px, 7vw, 96px); line-height: .9; color: rgba(255, 255, 255, .28); margin-bottom: 10px; }
.sd-zone .uv-eyebrow { color: #fff; }
.sd-zone .uv-text strong { color: #fff; }
.sd-icons { display: grid; place-items: center; gap: clamp(12px, 2vw, 22px); }
.sd-icons img { border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .28); width: 100%; }
.sd-icons--1 { grid-template-columns: min(70%, 280px); justify-content: center; }
.sd-icons--2 { grid-template-columns: repeat(2, min(42%, 210px)); justify-content: center; }
.sd-icons--2 img:nth-child(2) { margin-top: 70px; }
.sd-icons--4 { grid-template-columns: repeat(2, min(40%, 170px)); justify-content: center; }
.sd-icons--4 img:nth-child(even) { margin-top: 50px; }
@media (max-width: 760px) {
  .sd-act, .sd-act--rev { grid-template-columns: 1fr; }
  .sd-act--rev .sd-icons { order: 0; }
  .sd-icons--1 { grid-template-columns: min(60%, 220px); }
}

/* ---------- 結び ---------- */
.sd-end { background: #f4f7fb; color: var(--ink); padding: 60px 0 clamp(80px, 10vw, 130px); }
.sd-end__inner { text-align: center; padding-top: clamp(40px, 6vw, 80px); }
.sd-end .uv-eyebrow { color: #19486A; }
.sd-end .uv-eyebrow small, .sd-end .uv-text { color: var(--ink-soft); }
.sd-mini-wheel { width: 120px; margin: 0 auto 28px; }
.sd-mini-wheel .sd-wheel { width: 100%; transform: none; }
.sd-mini-wheel .sd-seg { transform: none; }
.sd-links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.sd-end .uv-pill { background: #19486A; color: #fff; }
.sd-end .uv-pill .ico { background: #fff; color: #19486A; }

@media (prefers-reduced-motion: reduce) {
  .sd-wheel__spin, .sd-orbit-dot { animation: none; }
  .sd-seg { transform: none; }
  .sd-wheel { transform: none; }
}