/* ——— セクション本体 ——— */
.section-impact {
  position: relative;
  background: var(--charcoal);
  padding: 180px 60px 140px;
  overflow: hidden;
}

/* 背景装飾テキスト */
.impact-bg-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Serif Display', serif;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: rgba(201, 169, 110, 0.05);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.impact-inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
}

/* ——— ヘッダー ——— */
.impact-header {
  text-align: center;
  margin-bottom: 100px;
}

.impact-title {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cream);
  margin: 16px 0 28px;
  letter-spacing: 0.03em;
}
.impact-title em {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-weight: 300;
  color: var(--gold-light);
  font-size: 1.15em;
}

.impact-lead {
  line-height: 2.4;
  color: rgb(245 240 232 / 75%);
  font-weight: 400;
  letter-spacing: 0.1em;
}

/* ——— メイン支援総額 ——— */
.impact-hero-stat {
  position: relative;
  margin-bottom: 80px;
  padding: 80px;
  border: 1px solid rgba(201, 169, 110, 0.18);
  background: linear-gradient(
    135deg,
    rgba(201, 169, 110, 0.06) 0%,
    rgba(201, 169, 110, 0.02) 40%,
    transparent 100%
  );
  overflow: hidden;
  transition: border-color 0.5s;
}
.impact-hero-stat:hover {
  border-color: rgba(201, 169, 110, 0.4);
}

/* コーナーアクセント */
.impact-hero-stat::before,
.impact-hero-stat::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.4;
}
.impact-hero-stat::before {
  top: 20px; left: 20px;
  border-width: 1px 0 0 1px;
}
.impact-hero-stat::after {
  bottom: 20px; right: 20px;
  border-width: 0 1px 1px 0;
}

.impact-hero-inner {
  text-align: center;
}

.impact-hero-label {
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  opacity: 0.8;
}

.impact-hero-number {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  line-height: 1;
}

.impact-yen {
  font-family: 'DM Serif Display', serif;
  font-weight: 300;
  color: var(--gold);
  padding-top: 12px;
  opacity: 0.7;
}

.impact-big-count {
  font-family: 'DM Serif Display', serif;
  font-weight: 300;
  color: var(--cream);
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.impact-over {
  font-family: 'Noto Serif JP', serif;
  color: var(--gold-light);
  font-weight: 300;
  align-self: flex-end;
  padding-bottom: 8px;
}

.impact-hero-sub {
  letter-spacing: 0.3em;
  color: rgb(245 240 232 / 75%);
  font-weight: 400;
  margin-bottom: 24px;
}

.impact-hero-note {
  line-height: 2;
  color: rgb(245 240 232 / 75%);
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* 装飾ライン */
.impact-hero-lines {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.impact-hero-lines span {
  display: block;
  height: 1px;
  background: var(--gold);
  opacity: 0.2;
  animation: lineGrow 3s ease-in-out infinite alternate;
}
.impact-hero-lines span:nth-child(1) { width: 60px; animation-delay: 0s; }
.impact-hero-lines span:nth-child(2) { width: 40px; animation-delay: 0.3s; }
.impact-hero-lines span:nth-child(3) { width: 80px; animation-delay: 0.6s; }
@keyframes lineGrow {
  from { opacity: 0.15; transform: scaleX(0.7); }
  to   { opacity: 0.4;  transform: scaleX(1); }
}

/* ——— サブ3指標グリッド ——— */
.impact-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 2px;
}

.impact-sub-card {
  padding: 60px 44px;
  border: 1px solid rgba(201, 169, 110, 0.1);
  background: rgba(245, 240, 232, 0.02);
  position: relative;
  overflow: hidden;
  transition: background 0.5s, border-color 0.4s, transform 0.4s;
}
.impact-sub-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.impact-sub-card:hover::before { width: 100%; }
.impact-sub-card:hover {
  background: rgba(201, 169, 110, 0.05);
  border-color: rgba(201, 169, 110, 0.35);
  transform: translateY(-6px);
}

.impact-sub-en {
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(201, 169, 110, 0.5);
  margin-bottom: 20px;
}

.impact-sub-number {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 10px;
  line-height: 1;
}

.impact-sub-count {
  font-family: 'DM Serif Display', serif;
  font-weight: 300;
  color: var(--gold-light);
  line-height: 0.9;
  transition: color 0.4s;
}
.impact-sub-card:hover .impact-sub-count { color: var(--cream); }

.impact-sub-unit {
  font-family: 'Noto Serif JP', serif;
  color: var(--gold);
  font-weight: 300;
  padding-bottom: 6px;
}

.impact-sub-label {
  letter-spacing: 0.2em;
  color: rgba(245, 240, 232, 0.5);
  margin-bottom: 20px;
}

.impact-sub-desc {
  line-height: 2.2;
  color: rgb(245 240 232 / 75%);
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
}

/* プログレスバー */
.impact-sub-bar {
  height: 1px;
  background: rgba(201, 169, 110, 0.12);
  position: relative;
  overflow: hidden;
}
.impact-sub-bar-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--gold), var(--gold-light));
  transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.impact-sub-card.visible .impact-sub-bar-fill {
  width: var(--pct, 50%);
}

/* ——— 支援使途 ——— */
.impact-usage {
  margin-top: 2px;
  padding: 60px 80px;
  border: 1px solid rgba(201, 169, 110, 0.1);
  background: rgba(201, 169, 110, 0.03);
}

.impact-usage-label {
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 40px;
}

.impact-usage-bars {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 28px;
}

.impact-usage-item {
  display: grid;
  grid-template-columns: 220px 1fr 50px;
  align-items: center;
  gap: 20px;
}

.impact-usage-name {
  color: rgb(245 240 232 / 75%);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: right;
}

.impact-usage-track {
  height: 2px;
  background: rgba(201, 169, 110, 0.1);
  position: relative;
  overflow: hidden;
}
.impact-usage-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, rgba(201,169,110,0.6), var(--gold));
  transition: width 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
.impact-usage.visible .impact-usage-fill {
  width: var(--w, 0%);
}

.impact-usage-pct {
  font-family: 'DM Serif Display', serif;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.05em;
}

.impact-usage-note {
  color: rgb(245 240 232 / 50%);
  letter-spacing: 0.06em;
  line-height: 2;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(201, 169, 110, 0.08);
}

/* ——— CTA ——— */
.impact-cta {
  text-align: center;
  margin-top: 72px;
}

.impact-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 20px 60px;
  border: 1px solid rgba(201, 169, 110, 0.3);
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.impact-cta-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.impact-cta-link:hover::before { transform: scaleX(1); }
.impact-cta-link:hover { color: var(--charcoal); border-color: var(--gold); }
.impact-cta-link span, .impact-cta-arrow {
  position: relative;
  z-index: 1;
}
.impact-cta-arrow {
  transition: transform 0.4s;
}
.impact-cta-link:hover .impact-cta-arrow { transform: translateX(8px); }

/* ——— レスポンシブ ——— */
@media (max-width: 1100px) {
  .impact-hero-stat { padding: 60px 40px; }
  .impact-hero-lines { display: none; }
  .impact-usage { padding: 48px 40px; }
  .impact-usage-item { grid-template-columns: 160px 1fr 44px; }
}

@media (max-width: 900px) {
  .section-impact { padding: 100px 28px 80px; }
  .impact-sub-grid { grid-template-columns: 1fr; gap: 0; }
  .impact-sub-card { padding: 48px 28px; }
  .impact-hero-stat { padding: 48px 28px; }
  .impact-header { margin-bottom: 60px; }
  .impact-usage { padding: 40px 28px; }
  .impact-usage-item { grid-template-columns: 1fr; gap: 8px; }
  .impact-usage-name { text-align: left; }
  .impact-usage-track { grid-column: 1; }
  .impact-usage-pct { grid-column: 1; }
  .impact-cta-link{ font-size: var(--fs-sm); padding: 16px 36px; letter-spacing: 0.3em;}
}

/* ——— 支援総額：桁数が多い場合のフォントサイズ調整 ——— */
.impact-big-count { /* 183,343,764 の9桁に対応 */
  letter-spacing: -0.03em;
}

/* ——— フォント精密調整：ラベル・装飾は Cormorant、数字は DM Serif ——— */

/* 背景装飾テキスト → Cormorant のままの方が軽やか */
.impact-bg-word {
  font-family: 'Cormorant Garamond', serif;
}

/* ラベル類は Cormorant のエレガンス維持 */
.impact-hero-label,
.impact-sub-en,
.impact-usage-label {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.45em;
}

/* ¥マーク：Cormorant の方が数字との対比が美しい */
.impact-yen {
  font-family: 'Cormorant Garamond', serif;
}

/* 「超」「+」サフィックス */
.impact-over {
  font-family: 'DM Serif Display', serif;
}

/* 数字本体：DM Serif Display でくっきり */
.impact-big-count {
  font-family: 'DM Serif Display', serif;
  letter-spacing: -0.02em;
  font-style: italic; /* DM Serif の italic は特に数字が美しい */
}

.impact-sub-count {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}

/* 使途の割合数字 */
.impact-usage-pct {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
}

/* ================================================================
   SLOT COUNTER スタイル
   ================================================================ */

/* slot-col：各桁の窓 */
.slot-col {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  height: 1em;
  vertical-align: bottom;
}

/* strip：0〜9 が縦に並ぶ */
.slot-strip {
  display: flex;
  flex-direction: column;
}

/* 各数字 */
.slot-digit {
  display: block;
  height: 1em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* カンマ等の区切り文字 */
.slot-sep {
  display: inline-block;
  opacity: 0; /* JS で transition で出現 */
}

/* impact-big-count が flex になるので、
   その中の ¥ と + が正しく並ぶように調整 */
.impact-hero-number .impact-big-count {
  display: inline-flex;
  align-items: baseline;
}