/* -----------------------
  team
----------------------- */
.team {
  position: relative;
  background: url(../img/team_skin_bg.png) no-repeat top center/100%, url(../img/team_bg.png) no-repeat bottom center/100%;

  --skin-dur: 1.0s;
  --zu-delay: calc(var(--skin-dur) * 0.8);
  --clip1-delay: calc(var(--skin-dur) * 0.9);
  --clip2-delay: calc(var(--skin-dur) * 0.95);
}

.team h2.ttl>img {
  position: absolute;
  width: min(calc(64/750*100vw), 64px);
  top: min(calc(50/750*100vw), 50px);
  right: min(calc(50/750*100vw), 50px);
}

.team h2.ttl>img:nth-child(2) {
  right: min(calc(150/750*100vw), 150px);
}

.team_zu {
  position: absolute;
  top: 0;
  width: min(calc(1050/750*100vw), 1050px);
  transform: scale(0.5);
}

.team .team_skin {
  opacity: 0;
  transform: scale(0.8);
  will-change: transform, opacity;
}

.team .team_zu {
  position: absolute;
  top: -9%;
  left: -22%;
  width: min(calc(1050/750*100vw), 1050px);
  transform: scale(0.5);
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

.team h2>img.clip_part {
  position: absolute;
  width: min(calc(64/750*100vw), 64px);
  top: min(calc(180/750*100vw), 180px);
  right: min(calc(135/750*100vw), 135px);
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  opacity: 0;
  will-change: clip-path, opacity;
}

.team h2>img.clip_part:nth-child(2) {
  right: min(calc(210/750*100vw), 210px);
}

@keyframes skinInOut {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  35% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes zuIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clipDown {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

.team.start .team_skin {
  animation: skinInOut var(--skin-dur) ease both;
}

.team.start .team_zu {
  animation: zuIn 0.5s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: var(--zu-delay);
}

.team.start h2>img.clip_part:nth-child(1) {
  animation: clipDown 0.4s ease-out both;
  animation-delay: var(--clip1-delay);
}
.team.start h2>img.clip_part:nth-child(2) {
  animation: clipDown 0.4s ease-out both;
  animation-delay: var(--clip2-delay);
}