@charset "UTF-8";

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

.lp_wrap .bb3_4 .slider_wrap {
  position: absolute;
  top: -2%;
  left: 0%;
  width: 150%;
  overflow: hidden;
  z-index: 3333;
}

.lp_wrap .bb3_4 .bb3_point04{
  position: absolute;
  top: 6%;
  left: 7%;
  width: 25.3334%;
  max-width: 190px;
  z-index: 5555;
}

/* --------プログレスサークル------------------ */
.lp_wrap .bb3_p4_yesc {
  position: absolute;
  top: 7%;
  left: 50%;
  width: 41.3334%;
  aspect-ratio: 1 / 1; /* 正円にする */
}
.lp_wrap .bb3_p4_yesc svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  width: 50%;
  transform:rotate(-90deg); /* グラフは初期値で傾くから左に90度回す */
  opacity: 0.8;
}
.lp_wrap .bb3_p4_yesc.trigger svg circle {
  fill: transparent; /* グラフ背景透過 */
  stroke: #c5e3ed; /* 線の色 */
  stroke-width: 280; /* 線の幅（rの値と目視確認しながら調整する） */
  /* stroke-linecap: round; */
  stroke-dasharray: 1500; /* 線の長さ（目視確認） */
  stroke-dashoffset: 1500; /* 線の長さ（目視確認） */
}
.lp_wrap .bb3_p4_yesc.trigger.move svg circle {
  animation: 1.6s graph_move2 ease-in-out forwards;
}
@keyframes graph_move2 {
  0% {
    stroke-dashoffset: 1500; /* 線の長さ（目視確認） */
  }
  100%{
    stroke-dashoffset: 500; /* 0だと一周するから少し増やす */
  }
}

.lp_wrap .bb3_4 .bb3_p4_yes {
  position: absolute;
  top: 5%;
  left: 55%;
  width: 41.3334%;
  max-width: 310px;
  z-index: 5555;
}
.lp_wrap .bb3_4 .bb3_p4_yes .st0 {
  fill: none;
  stroke: #fff;
  stroke-width: 170;
  stroke-miterlimit: 10;
  stroke-dasharray: 457;
  stroke-dashoffset: 457;
}
.lp_wrap .bb3_4 .bb3_p4_yes.trigger .st0 {
  transition: 1.6s;
  stroke-dashoffset: 457 !important;
}
.lp_wrap .bb3_4 .bb3_p4_yes.trigger.move .st0 {
  stroke-dashoffset: 0 !important;
}

.lp_wrap .bb3_4 .bb3_p4_kasikoku {
    position: absolute;
    top: 12%;
    left: 7%;
    width: 54.13334%;
    max-width: 321px;
    z-index:5555;
}
.lp_wrap .bb3_4 .bb3_p4_kasikoku.trigger {
  transition-duration: 1s;
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); */
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.lp_wrap .bb3_4 .bb3_p4_kasikoku.trigger.move {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_kasikoku.trigger img {
  transition-duration: 1s;
    opacity: 1;
}
.lp_wrap .bb3_4 .bb3_p4_kasikoku.trigger.move img {
    opacity: 1;
}



.lp_wrap .bb3_4 .bb3_p4_84per {
    position: absolute;
    top: 18%;
    left: 7%;
    width: 85.2%;
    max-width: 639px;
    z-index:5555;
}
.lp_wrap .bb3_4 .bb3_p4_84per.trigger {
  transition-duration: 1s;
  transition-delay: 0.2s;
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); */
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
.lp_wrap .bb3_4 .bb3_p4_84per.trigger.move {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_84per.trigger img {
  transition-duration: 1s;
  transition-delay: 0.2s;
    opacity: 1;
}
.lp_wrap .bb3_4 .bb3_p4_84per.trigger.move img {
    opacity: 1;
}



.lp_wrap .bb3_4 .bb3_p4_ok1 {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 20.26667%;
    max-width: 152px;
    z-index:5555;
}
.lp_wrap .bb3_4 .bb3_p4_ok1.trigger {
  transition-duration: 1s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    /* clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_ok1.trigger.move {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_ok1.trigger img {
  transition-duration: 1s;
    opacity: 1;
}
.lp_wrap .bb3_4 .bb3_p4_ok1.trigger.move img {
    opacity: 1;
}

.lp_wrap .bb3_4 .bb3_p4_ok2 {
    position: absolute;
    top: 50%;
    left: 70%;
    width: 20.26667%;
    max-width: 152px;
    z-index:5555;
}
.lp_wrap .bb3_4 .bb3_p4_ok2.trigger {
  transition-duration: 1s;
  transition-delay: 0.2s;
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    /* clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_ok2.trigger.move {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    /* clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); */
}
.lp_wrap .bb3_4 .bb3_p4_ok2.trigger img {
  transition-duration: 1s;
  transition-delay: 0.2s;
    opacity: 1;
}
.lp_wrap .bb3_4 .bb3_p4_ok2.trigger.move img {
    opacity: 1;
}




.lp_wrap .bb3_4 .bb3_p4_en1 {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 28.4%;
  max-width: 213px;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0);
}
.lp_wrap .bb3_4 .bb3_p4_en1.trigger.move {
  opacity: 1;
  transform: scale(1);
}

.lp_wrap .bb3_4 .bb3_p4_en2 {
  position: absolute;
  top: 55%;
  left: -3%;
  width: 42.6667%;
  max-width: 320px;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0);
}
.lp_wrap .bb3_4 .bb3_p4_en2.trigger.move {
  opacity: 1;
  transform: scale(1);
}

.lp_wrap .bb3_4 .bb3_p4_en3 {
  position: absolute;
  top: 70%;
  left: 25%;
  width: 41.6%;
  max-width: 312px;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0);
}
.lp_wrap .bb3_4 .bb3_p4_en3.trigger.move {
  opacity: 1;
  transform: scale(1);
}