@charset "UTF-8";

.lp_wrap .bb2_1_2 {
  width: 100%;
  max-width:750px;
}

.lp_wrap .bb2_1_2 .bb2_tokuniasa {
  position: absolute;
  top: 36%;
  left: 0%;
  right: 0%;
  margin: auto;
  width: 80%;
  max-width: 600px;
}
.lp_wrap .bb2_1_2 .bb2_tokuniasa.trigger {
  transition-duration: 1s;
  clip-path: inset(0 100% 0 0);
}
.lp_wrap .bb2_1_2 .bb2_tokuniasa.trigger.move {
  clip-path: inset(0);
}
.lp_wrap .bb2_1_2 .bb2_tokuniasa.trigger img {
  transition-duration: 1s;
    opacity: 1;
}
.lp_wrap .bb2_1_2 .bb2_tokuniasa.trigger.move img {
    opacity: 1;
}
.lp_wrap .bb2_1_2 .bb2_base {
  position: absolute;
  top: 60%;
  left: 9.5%;
  width: 80%;
}
.lp_wrap .bb2_1_2 .bb2_graph1 {
  position: absolute;
  top: 70.58%;
  left: 25.5%;
  width: 16%;
  transition: 0.8s;
  clip-path: inset(100% 0 0 0);
}
.lp_wrap .bb2_1_2 .bb2_graph2 {
  position: absolute;
  top: 70.6%;
  left: 46.5%;
  width: 16%;
  transition: 0.8s 0.3s;
  clip-path: inset(100% 0 0 0);
}
.lp_wrap .bb2_1_2 .bb2_graph3 {
  position: absolute;
  top: 62.6%;
  left: 68%;
  width: 16%;
  transition: 0.8s 0.6s;
  clip-path: inset(100% 0 0 0);
}
.lp_wrap .bb2_1_2 .bb2_graph1.trigger.move,
.lp_wrap .bb2_1_2 .bb2_graph1.trigger.move ~ .bb2_graph2,
.lp_wrap .bb2_1_2 .bb2_graph1.trigger.move ~ .bb2_graph3 {
  clip-path: inset(0);
}
.lp_wrap .bb2_1_2 .bb2_cover {
  position: absolute;
  top: 65.4%;
  left: 20.1%;
  width: 69.3333%;
}
.lp_wrap .bb2_1_2 .bb2_graph_giza {
  position: absolute;
  top: 55%;
  left: 20.2%;
  width: 26.6667%;
  max-width: 200px;
}
.lp_wrap .bb2_1_2 .bb2_graph_giza .cycle {
  animation:10s linear infinite gizagiza;
}
@keyframes gizagiza{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}
.lp_wrap .bb2_1_2 .bb2_graph1.trigger ~ .bb2_graph_giza {
  transition: 0.6s 1s;
  transform: scale(0);
  transform-origin: 50% 150%;
}
.lp_wrap .bb2_1_2 .bb2_graph1.trigger.move ~ .bb2_graph_giza {
  transform: scale(1);
}
.lp_wrap .bb2_1_2 .bb2_graph_5g {
  position: absolute;
  top: -5%;
  left: -3.5%;
  width: 110%;
}