/* =========================================================
   2026-09-02 | TOP HERO — FUTURE GROWTH BACKGROUND
   「課題に向き合う → 可能性をひらく → 未来をともに育てる」
   既存の hero-growth-sphere-v4.png を主役にした背景演出
   ========================================================= */

.growth-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 54% 50%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.72) 29%, rgba(255,255,255,0) 52%),
    radial-gradient(circle at 82% 16%, rgba(178,232,255,.70) 0 9%, rgba(87,183,255,.28) 28%, rgba(87,183,255,0) 55%),
    radial-gradient(circle at 74% 78%, rgba(8,103,224,.34) 0 14%, rgba(8,103,224,.13) 38%, rgba(8,103,224,0) 62%),
    linear-gradient(108deg, #ffffff 0%, #ffffff 31%, #f5fbff 48%, #d7efff 65%, #70bded 82%, #0d73d7 100%);
}

.growth-hero::before,
.growth-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* 課題が整理され、点と線がつながっていくネットワーク */
.growth-hero::before {
  inset: 0;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCI+CjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzdmY2FmZiIgc3Ryb2tlLXdpZHRoPSIxLjE1IiBzdHJva2Utb3BhY2l0eT0iLjI4Ij4KPHBhdGggZD0iTTM0MCA2MzBMNDcwIDU1MCA1NzAgNjEwIDY4MCA1MDUgNzk1IDU2MCA5MDUgNDQ1IDEwMjAgNTAwIDExNjAgMzgyIDEzMTAgNDMwIDE0NTAgMzE1Ii8+CjxwYXRoIGQ9Ik00MjAgNzEwTDUyMCA2MjAgNjU1IDY4MCA3NjAgNTc1IDkwMCA2MzUgMTAxMCA1MjAgMTE1MCA1NjUgMTI3MCA0NTUgMTQyMCA1MDAiLz4KPHBhdGggZD0iTTU3NSAzOTVMNjgwIDUwNSA3NjAgMzY1IDkwNSA0NDUgOTgwIDMwMCAxMTYwIDM4MiAxMjM1IDI0MCAxNDUwIDMxNSIvPgo8cGF0aCBkPSJNNjU1IDY4MEw2ODAgNTA1TTc2MCA1NzVMNzYwIDM2NU05MDAgNjM1TDkwNSA0NDVNMTAxMCA1MjBMMTAyMCA1MDBNMTE1MCA1NjVMMTE2MCAzODJNMTI3MCA0NTVMMTMxMCA0MzAiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9Ii45NCIgc3Ryb2tlPSIjNTZiOWZmIiBzdHJva2Utd2lkdGg9IjEuMiI+CjxjaXJjbGUgY3g9IjM0MCIgY3k9IjYzMCIgcj0iNCIvPjxjaXJjbGUgY3g9IjQ3MCIgY3k9IjU1MCIgcj0iNSIvPjxjaXJjbGUgY3g9IjU3MCIgY3k9IjYxMCIgcj0iMyIvPjxjaXJjbGUgY3g9IjY4MCIgY3k9IjUwNSIgcj0iNSIvPjxjaXJjbGUgY3g9Ijc5NSIgY3k9IjU2MCIgcj0iNCIvPjxjaXJjbGUgY3g9IjkwNSIgY3k9IjQ0NSIgcj0iNiIvPjxjaXJjbGUgY3g9IjEwMjAiIGN5PSI1MDAiIHI9IjQiLz48Y2lyY2xlIGN4PSIxMTYwIiBjeT0iMzgyIiByPSI1Ii8+PGNpcmNsZSBjeD0iMTMxMCIgY3k9IjQzMCIgcj0iNCIvPjxjaXJjbGUgY3g9IjE0NTAiIGN5PSIzMTUiIHI9IjUiLz4KPGNpcmNsZSBjeD0iNDIwIiBjeT0iNzEwIiByPSIzIi8+PGNpcmNsZSBjeD0iNTIwIiBjeT0iNjIwIiByPSI0Ii8+PGNpcmNsZSBjeD0iNjU1IiBjeT0iNjgwIiByPSI0Ii8+PGNpcmNsZSBjeD0iNzYwIiBjeT0iNTc1IiByPSI1Ii8+PGNpcmNsZSBjeD0iOTAwIiBjeT0iNjM1IiByPSIzIi8+PGNpcmNsZSBjeD0iMTAxMCIgY3k9IjUyMCIgcj0iNCIvPjxjaXJjbGUgY3g9IjExNTAiIGN5PSI1NjUiIHI9IjQiLz48Y2lyY2xlIGN4PSIxMjcwIiBjeT0iNDU1IiByPSI1Ii8+PGNpcmNsZSBjeD0iMTQyMCIgY3k9IjUwMCIgcj0iNCIvPgo8Y2lyY2xlIGN4PSI1NzUiIGN5PSIzOTUiIHI9IjQiLz48Y2lyY2xlIGN4PSI3NjAiIGN5PSIzNjUiIHI9IjQiLz48Y2lyY2xlIGN4PSI5ODAiIGN5PSIzMDAiIHI9IjUiLz48Y2lyY2xlIGN4PSIxMjM1IiBjeT0iMjQwIiByPSI0Ii8+CjwvZz4KPGcgZmlsbD0iI2ZmZmZmZiIgZmlsbC1vcGFjaXR5PSIuNzIiPgo8Y2lyY2xlIGN4PSIxMDYwIiBjeT0iMTcwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTE5MCIgY3k9IjE0MCIgcj0iMi42Ii8+PGNpcmNsZSBjeD0iMTM3MCIgY3k9IjIwNSIgcj0iMy40Ii8+PGNpcmNsZSBjeD0iMTQ5MCIgY3k9IjE1NSIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iMTI3MCIgY3k9IjcyMCIgcj0iMyIvPjxjaXJjbGUgY3g9IjE0NTAiIGN5PSI2NzAiIHI9IjQiLz4KPC9nPjwvc3ZnPg=="),
    repeating-linear-gradient(115deg, transparent 0 48px, rgba(255,255,255,.11) 48px 49px);
  background-repeat: no-repeat, repeat;
  background-position: center center, center;
  background-size: cover, auto;
  opacity: .82;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 28%, #000 48%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 28%, #000 48%, #000 100%);
}

/* 未来の事業・街へつながる、控えめなシティシルエット */
.growth-hero::after {
  right: -2%;
  bottom: -1px;
  z-index: 0;
  width: 59%;
  height: 49%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDM2MCI+CjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZyIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzRhYTdlZSIgc3RvcC1vcGFjaXR5PSIuMTAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwNzU4YjUiIHN0b3Atb3BhY2l0eT0iLjM0Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+CjxnIGZpbGw9InVybCgjZykiPgo8cGF0aCBkPSJNMCAzMzBoNjBWMjI1aDQ4djEwNWgzMlYxNjVoNTZ2MTY1aDI2VjI1MGg0NnY4MGgzNFYxMThoNjJ2MjEyaDI4VjIwNWg1NnYxMjVoMzBWNzJoNzJ2MjU4aDI2VjE0NWg1OHYxODVoMzBWMjM1aDUwdjk1aDM0Vjk4aDY4djIzMmgzNFYxODhoNTJ2MTQyaDM2VjI2MGg0NXY3MGg0OVYwSDEwMDB2MzYwSDB6Ii8+CjwvZz4KPGcgc3Ryb2tlPSIjZDlmMWZmIiBzdHJva2Utb3BhY2l0eT0iLjMwIiBzdHJva2Utd2lkdGg9IjIiPgo8cGF0aCBkPSJNMTU4IDE5MHYxMTJNMTg0IDE5MHYxMTJNMzI0IDE0NXYxNTBNMzUwIDE0NXYxNTBNNTEyIDEwMnYxOTVNNTQ0IDEwMnYxOTVNNzYyIDEyOHYxNzBNNzkyIDEyOHYxNzAiLz4KPC9nPjwvc3ZnPg==") right bottom / 100% auto no-repeat;
  opacity: .58;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 55% 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 26%, #000 55% 100%);
}

.growth-hero__inner {
  position: relative;
  z-index: 1;
}

.growth-hero__inner::before,
.growth-hero__inner::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* コピー周辺の可読性を保ちつつ、中央で光がひらく */
.growth-hero__inner::before {
  inset: -8% -10% -10% -10%;
  background:
    radial-gradient(circle at 67% 42%, rgba(255,255,255,.98) 0 2%, rgba(255,245,207,.44) 5%, rgba(255,255,255,.18) 12%, transparent 26%),
    linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.76) 43%, rgba(255,255,255,.25) 57%, transparent 72%);
}

/* 右上へ伸びる光の軌道＝可能性がひらき、未来へ進む流れ */
.growth-hero__inner::after {
  top: -4%;
  right: -17%;
  bottom: -12%;
  width: 84%;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDkwMCI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InciIHgxPSIwIiB5MT0iMSIgeDI9IjEiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM3ZGQ4ZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjQ2IiBzdG9wLWNvbG9yPSIjZGZmN2ZmIiBzdG9wLW9wYWNpdHk9Ii41NSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIuOTIiLz48L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSIwIiB5MT0iMSIgeDI9IjEiIHkyPSIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwYjdmZjAiIHN0b3Atb3BhY2l0eT0iMCIvPjxzdG9wIG9mZnNldD0iLjYyIiBzdG9wLWNvbG9yPSIjNTFiZmZmIiBzdG9wLW9wYWNpdHk9Ii41OCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI2M5ZjRmZiIgc3RvcC1vcGFjaXR5PSIuODIiLz48L2xpbmVhckdyYWRpZW50Pgo8ZmlsdGVyIGlkPSJibHVyIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3Ii8+PC9maWx0ZXI+CjwvZGVmcz4KPGcgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KPHBhdGggZD0iTS02MCA4MzBDMjUwIDc2MCAzNzAgNjEwIDUyMCA0NTVTODAwIDIwNSAxMjMwIDUwIiBzdHJva2U9InVybCgjdykiIHN0cm9rZS13aWR0aD0iMTgiIGZpbHRlcj0idXJsKCNibHVyKSIgb3BhY2l0eT0iLjQ4Ii8+CjxwYXRoIGQ9Ik0tNjAgODMwQzI1MCA3NjAgMzcwIDYxMCA1MjAgNDU1UzgwMCAyMDUgMTIzMCA1MCIgc3Ryb2tlPSJ1cmwoI3cpIiBzdHJva2Utd2lkdGg9IjIuNCIgb3BhY2l0eT0iLjkwIi8+CjxwYXRoIGQ9Ik00MCA5MDBDMzIwIDc5MCA0MzAgNjUwIDU4NSA1MDBTODg1IDI0NSAxMjQwIDEyMCIgc3Ryb2tlPSJ1cmwoI2IpIiBzdHJva2Utd2lkdGg9IjExIiBmaWx0ZXI9InVybCgjYmx1cikiIG9wYWNpdHk9Ii40NCIvPgo8cGF0aCBkPSJNNDAgOTAwQzMyMCA3OTAgNDMwIDY1MCA1ODUgNTAwUzg4NSAyNDUgMTI0MCAxMjAiIHN0cm9rZT0idXJsKCNiKSIgc3Ryb2tlLXdpZHRoPSIyIiBvcGFjaXR5PSIuNzIiLz4KPHBhdGggZD0iTTIyMCA5MzBDNDQwIDc2MCA1NjUgNjQ1IDcwMCA1MjVTOTcwIDMxMCAxMjMwIDIzMCIgc3Ryb2tlPSJ1cmwoI3cpIiBzdHJva2Utd2lkdGg9IjEuNCIgb3BhY2l0eT0iLjYyIi8+CjxwYXRoIGQ9Ik0zODAgOTIwQzUzNSA3NjAgNjYwIDY1MCA3OTAgNTQwUzEwMTUgMzc1IDEyMzAgMzIwIiBzdHJva2U9InVybCgjYikiIHN0cm9rZS13aWR0aD0iMS4yIiBvcGFjaXR5PSIuNTIiLz4KPC9nPgo8ZyBmaWxsPSIjZmZmIj48Y2lyY2xlIGN4PSI3MDgiIGN5PSI1MjAiIHI9IjQiLz48Y2lyY2xlIGN4PSI4MjUiIGN5PSI0MDUiIHI9IjMiLz48Y2lyY2xlIGN4PSI5NDAiIGN5PSIzMDUiIHI9IjUiLz48Y2lyY2xlIGN4PSIxMDUwIiBjeT0iMjIwIiByPSIzIi8+PGNpcmNsZSBjeD0iMTE0MCIgY3k9IjE1NSIgcj0iNCIvPjwvZz4KPC9zdmc+") center / 100% 100% no-repeat;
  opacity: .86;
  filter: drop-shadow(0 0 18px rgba(118,215,255,.28));
}

.growth-hero__content,
.growth-hero__visual {
  position: relative;
  z-index: 2;
}

/* 左側テキストは明るい背景の上で明確に表示 */
.growth-hero__content {
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

/* 既存アイコンを差し替えず、背景の光と自然につなぐ */
.growth-hero__visual {
  filter:
    drop-shadow(0 28px 54px rgba(0,55,145,.24))
    drop-shadow(0 0 35px rgba(116,219,255,.32));
}

.growth-hero__visual::before {
  inset: 11% 3% 2% 9%;
  border: 0;
  border-radius: 50%;
  transform: rotate(-10deg);
  background:
    radial-gradient(circle at 52% 53%, rgba(255,255,255,.68) 0 10%, rgba(113,213,255,.22) 32%, transparent 62%),
    radial-gradient(ellipse at center, transparent 56%, rgba(255,255,255,.66) 56.5% 57%, transparent 58%),
    radial-gradient(ellipse at center, transparent 66%, rgba(98,204,255,.46) 66.5% 67%, transparent 68%);
  box-shadow: 0 0 70px rgba(126,219,255,.22);
}

.growth-hero__visual::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3%;
  right: -2%;
  width: 52%;
  height: 45%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.58) 0 2%, rgba(174,232,255,.24) 15%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}

.growth-hero__visual img {
  position: relative;
  z-index: 1;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(1.06) contrast(1.03) brightness(1.04);
}

.growth-orbit {
  background: #fff;
  box-shadow:
    0 0 0 7px rgba(110,218,255,.16),
    0 0 28px rgba(255,255,255,.92),
    0 0 48px rgba(47,171,255,.72);
}

/* 実績は背景に溶け込むガラス面へ */
.growth-hero__stats {
  gap: 14px;
  margin-top: 12px;
}

.growth-hero__stats article {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.91), rgba(245,251,255,.68));
  box-shadow:
    0 18px 42px rgba(16,82,158,.11),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.growth-hero__stats article + article {
  margin-left: 0;
}

.growth-hero__stats article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.36), transparent 48%);
  pointer-events: none;
}

.growth-hero .growth-button--ghost {
  border-color: rgba(10,115,242,.62);
  color: #075ec8;
  background: rgba(255,255,255,.78);
  box-shadow: 0 13px 32px rgba(7,89,190,.10);
}

.growth-hero .growth-button--ghost:hover {
  background: rgba(255,255,255,.94);
  box-shadow: 0 17px 38px rgba(7,89,190,.17);
}

@media (max-width: 1180px) {
  .growth-hero::after {
    width: 66%;
    opacity: .46;
  }

  .growth-hero__inner::after {
    right: -24%;
    width: 92%;
  }
}

@media (max-width: 900px) {
  .growth-hero {
    background:
      radial-gradient(circle at 86% 21%, rgba(135,214,255,.52) 0 10%, rgba(72,171,243,.18) 31%, transparent 56%),
      radial-gradient(circle at 82% 80%, rgba(8,103,224,.18), transparent 44%),
      linear-gradient(145deg, #ffffff 0%, #f7fcff 48%, #d9efff 72%, #83c6f1 100%);
  }

  .growth-hero::before {
    opacity: .62;
    background-position: 58% center, center;
    background-size: 145% auto, auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 16%, #000 48%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.22) 16%, #000 48%, #000 100%);
  }

  .growth-hero::after {
    width: 82%;
    height: 34%;
    opacity: .34;
  }

  .growth-hero__inner::before {
    inset: -5% -8%;
    background:
      radial-gradient(circle at 82% 38%, rgba(255,255,255,.88) 0 2%, rgba(255,255,255,.18) 12%, transparent 30%),
      linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.90) 47%, rgba(255,255,255,.35) 72%, transparent 100%);
  }

  .growth-hero__inner::after {
    top: 22%;
    right: -38%;
    bottom: -10%;
    width: 112%;
    opacity: .58;
  }

  .growth-hero__stats {
    gap: 9px;
  }

  .growth-hero__stats article {
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .growth-hero {
    background:
      radial-gradient(circle at 100% 15%, rgba(98,194,255,.42) 0 8%, rgba(69,159,233,.15) 29%, transparent 54%),
      radial-gradient(circle at 96% 82%, rgba(10,99,211,.16), transparent 40%),
      linear-gradient(155deg, #ffffff 0%, #ffffff 48%, #e7f6ff 72%, #b8ddf6 100%);
  }

  .growth-hero::before {
    background-position: 68% 48%, center;
    background-size: 230% auto, auto;
    opacity: .54;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 8%, #000 34%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 8%, #000 34%, #000 100%);
  }

  .growth-hero::after {
    right: -17%;
    width: 116%;
    height: 25%;
    opacity: .20;
  }

  .growth-hero__inner::before {
    inset: -3% -4%;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.90) 59%, rgba(255,255,255,.40) 83%, transparent 100%);
  }

  .growth-hero__inner::after {
    top: 47%;
    right: -58%;
    width: 155%;
    opacity: .36;
  }

  .growth-hero__stats {
    gap: 6px;
  }

  .growth-hero__stats article {
    border-radius: 13px;
    box-shadow: 0 12px 26px rgba(16,82,158,.08), inset 0 1px 0 rgba(255,255,255,.82);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .growth-hero__visual {
    animation: growth-hero-float 8s ease-in-out infinite;
  }

  .growth-orbit--one {
    animation: growth-hero-orbit-glow 4.8s ease-in-out infinite;
  }

  .growth-orbit--two {
    animation: growth-hero-orbit-glow 4.8s ease-in-out -2.1s infinite;
  }
}

@keyframes growth-hero-float {
  0%, 100% { transform: translateX(6%) translateY(0); }
  50% { transform: translateX(6%) translateY(-9px); }
}

@keyframes growth-hero-orbit-glow {
  0%, 100% { opacity: .68; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes growth-hero-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
  }
}

/* 共通HERO骨格の後から読み込み、既存TOPの右側アイコン比率を維持 */
@media screen and (min-width:901px){
  .growth-hero__inner{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  }

  .growth-hero__visual{
    display:block!important;
    width:136%!important;
    max-width:none!important;
    margin-left:-27%!important;
    transform:translateX(6%)!important;
  }

  .growth-hero__visual img{
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
}

@media screen and (min-width:768px) and (max-width:900px){
  .growth-hero__visual{
    display:block!important;
    width:min(118%,840px)!important;
    max-width:840px!important;
    margin:-14px auto 0 -9%!important;
    transform:none!important;
  }

  .growth-hero__visual img{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
}

/* スマホは既存どおりコピーと実績を優先し、背景演出だけ残す */
@media screen and (max-width:767px){
  .growth-hero__visual{
    display:none!important;
  }
}