/* =======================
   HERO FLOATING LABELS
======================= */

.hero-floating{
  position:absolute;
  right:6%;
  top:50%;
  transform:translateY(-50%);
  width:40%;
  height:80%;
  pointer-events:none;
  z-index:2;
}

/* 各ラベル共通 */
.hero-float-item{
  position:absolute;
  width:170px;
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:50%;
  padding:20px;

  color:#4f7f86;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:.04em;

  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
will-change:transform;
}

.hero-float-item::before{
  content:"";
  position:absolute;
  inset:-18px;
  inset:-28px;
  background:rgba(255,255,255,.72);
  filter:blur(36px);
  z-index:-2;
}

.hero-float-item::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  filter:blur(10px);
  z-index:-1;
}
/* 個別配置 */

.hero-float-1{
  top:8%;
  right:20%;
  animation:heroFloat1 7s ease-in-out infinite;
}

.hero-float-2{
  top:38%;
  right:0%;
  animation:heroFloat2 8s ease-in-out infinite;
}

.hero-float-3{
  top:55%;
  right:32%;
  animation:heroFloat3 9s ease-in-out infinite;
}

.hero-float-4{
  bottom:5%;
  right:10%;
  animation:heroFloat4 7.5s ease-in-out infinite;
}

/* 浮遊アニメ */

@keyframes heroFloat1{
  0%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(3px, -8px, 0);
  }
  50%{
    transform:translate3d(-2px, -14px, 0);
  }
  75%{
    transform:translate3d(2px, -7px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}

@keyframes heroFloat2{
  0%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(-4px, -10px, 0);
  }
  50%{
    transform:translate3d(2px, -15px, 0);
  }
  75%{
    transform:translate3d(-2px, -8px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}

@keyframes heroFloat3{
  0%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(2px, -7px, 0);
  }
  50%{
    transform:translate3d(-3px, -12px, 0);
  }
  75%{
    transform:translate3d(1px, -6px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}

@keyframes heroFloat4{
  0%{
    transform:translate3d(0, 0, 0);
  }
  25%{
    transform:translate3d(-2px, -9px, 0);
  }
  50%{
    transform:translate3d(4px, -13px, 0);
  }
  75%{
    transform:translate3d(-1px, -7px, 0);
  }
  100%{
    transform:translate3d(0, 0, 0);
  }
}
.hero-float-1{ width:150px;height:150px; animation:heroFloat1 7.2s ease-in-out infinite;}
.hero-float-2{ width:170px;height:170px; animation:heroFloat2 8.4s ease-in-out infinite;}
.hero-float-3{ width:140px;height:140px; animation:heroFloat3 9.1s ease-in-out infinite;}
.hero-float-4{ width:160px;height:160px; animation:heroFloat4 7.8s ease-in-out infinite;}
/* SPでは非表示 */

@media (max-width:1024px){

  .hero-floating{
    display:none;
  }

}


/* =======================
   HERO FLOATING LABELS SP RESET
======================= */

@media (max-width:768px){

  .hero-inner{
    position:relative;
    z-index:3;
    padding-bottom:120px;
  }

  .hero-floating{
    position:absolute;
    left:0;
    right:0;
    bottom:0px;
  top:70%;
  transform:translateY(-50%);
    width:100%;
    height:100px;

    display:grid;
    grid-template-columns:1fr 1fr;
    justify-items:center;
    align-items:center;

    gap:12px;
    padding:0 20px;

    transform:none;
    z-index:2;
  }

  .hero-float-item{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;

    width:88px;
    height:88px;
    padding:10px;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    font-size:11px;
    line-height:1.35;
    border-radius:50%;
  }

  .hero-float-item::before{
    inset:-14px;
    filter:blur(20px);
  }

  .hero-float-item::after{
    inset:8px;
  }
}

/* =======================
   HERO FLOATING LAYOUT SP
======================= */

@media (max-width:768px){

  .hero-floating{
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
  }

  /* ① 左上 */
  .hero-floating .hero-float-item:nth-child(1){
    justify-self:start;
  }

  /* ② 右上 */
  .hero-floating .hero-float-item:nth-child(2){
    justify-self:start;
  }

  /* ③ 左下 */
  .hero-floating .hero-float-item:nth-child(3){
    justify-self:end;
  }

  /* ④ 右下 */
  .hero-floating .hero-float-item:nth-child(4){
    justify-self:end;
  }

}