@charset "UTF-8";

.lp_wrap .bb1_1_1 {
  width: 100%;
  max-width:750px;
}
.lp_wrap .bb1_1_1 .slider_wrap {
  position: absolute;
  top: 14%;
  left: 0%;
  width: 350%;
  overflow: hidden;
}

.lp_wrap .bb1_1_1 .bb1_kamihubuki {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  max-width: 750px;
  transition: 1s;
  opacity: 0;
}
.lp_wrap .bb1_1_1 .bb1_kamihubuki.trigger.move {
  opacity: 1;
  z-index: 999;
}

.lp_wrap .bb1_1_1 .bb1_soreha {
  position: absolute;
  top: 24%;
  left: 75%;
  width: 17.3334%;
  max-width: 130px;
  z-index: 1000;
}

.lp_wrap .bb1_1_1 .bb1_okagesamade {
  position: absolute;
  top: 36%;
  left: 3%;
  width: 88%;
  max-width: 660px;
  transition: 1s;
  opacity: 0;
  transform: translateY(20%);
}
.lp_wrap .bb1_1_1 .bb1_okagesamade.trigger.move {
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .bb1_1_1 .bb1_engraph {
  position: absolute;
  top: 64%;
  left: 0%;
  right: 0%;
  margin: auto;
  width: 66.6667%;
  max-width: 500px;
  transition: 1s;
  opacity: 0;
}
.lp_wrap .bb1_1_1 .bb1_engraph.trigger.move {
  opacity: 1;
}

.lp_wrap .bb1_1_1 .bb1_89ten6per {
  position: absolute;
  top: 76%;
  left: 0%;
  right: 0%;
  margin: auto;
  width: 41.3334%;
  max-width: 310px;
  transition: 0.5s;
  opacity: 0;
  transform: scale(0);
}
.lp_wrap .bb1_1_1 .bb1_89ten6per.trigger.move {
  opacity: 1;
  transform: scale(1);
}

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