/* -----------------------------------------------

change

----------------------------------------------- */
.lp_wrap .change {
  background: url(../images/change_bg_top.png) no-repeat center top / 100% auto, url(../images/change_bg_bottom.png) no-repeat center bottom / 100% auto, #e6eaf6;
}

.lp_wrap .change_dot {
  position: absolute;
  top: min(calc(174 / 750 * 100vw), 174px);
  width: min(calc(199 / 750 * 100vw), 199px);
  left: min(calc(279 / 750 * 100vw), 279px);
}

.change .mask-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line1.move {
  animation: dashLine1 0.3s ease-out forwards;
  animation-delay: 0.5s; 
}

.line2.move {
  animation: dashLine2 0.3s ease-out forwards;
  animation-delay: 0.8s; 
}

@keyframes dashLine1 {
  0% {
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dashLine2 {
  0% {
  }
  100% {
    stroke-dashoffset: 0;
  }
}


.lp_wrap .change_dot.trigger.move {
  animation: blink-1 1.6s linear infinite both;
}

@keyframes blink-1 {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.lp_wrap .change_03_line {
  position: absolute;
  top: min(calc(78 / 750 * 100vw), 78px);
  width: min(calc(486 / 750 * 100vw), 486px);
  left: min(calc(50 / 750 * 100vw), 50px);
}

.lp_wrap .fact_02_line {
  position: absolute;
  bottom: 0;
  width: min(calc(307 / 750 * 100vw), 307px);
  height: min(calc(100 / 750 * 100vw), 100px);
  left: min(calc(185 / 750 * 100vw), 185px);
  z-index: 1;
}

.fact_02_line::before,
.fact_02_line::after,
.fact_02_line .right,
.fact_02_line .bottom {
  position: absolute;
  background: #f3e9b2;
  content: '';
  opacity: 0;
}

.fact_02_line::before {
  left: 0;
  top: auto;
  bottom: 0;
  width: min(calc(2 / 750 * 100vw), 2px);
  height: 0;
}

.fact_02_line::after {
  top: 0;
  left: 0;
  height: min(calc(2 / 750 * 100vw), 2px);
  width: 0;
}

.fact_02_line .right {
  right: 0;
  top: 0;
  width: min(calc(2 / 750 * 100vw), 2px);
  height: 0;
}

.fact_02_line .bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: min(calc(2 / 750 * 100vw), 2px);
  transform: scaleX(0);
  transform-origin: right;
  opacity: 0;
}

/* --- アニメーション発火時 --- */
.fact_02_line.move::before {
  animation: drawLeftFromBottom 0.3s forwards;
}

.fact_02_line.move::after {
  animation: drawTopFromLeft 0.3s forwards 0.3s;
}

.fact_02_line.move .right {
  animation: drawRightFromTop 0.3s forwards 0.6s;
}

.fact_02_line.move .bottom {
  animation: drawBottomLine 0.3s forwards 0.9s;
}

@keyframes drawLeftFromBottom {
  0% {
    height: 0;
    bottom: 0;
    opacity: 1;
  }

  100% {
    height: 100%;
    bottom: 0;
    opacity: 1;
  }
}

@keyframes drawTopFromLeft {
  0% {
    width: 0;
    left: 0;
    opacity: 1;
  }

  100% {
    width: 100%;
    left: 0;
    opacity: 1;
  }
}

@keyframes drawRightFromTop {
  0% {
    height: 0;
    top: 0;
    opacity: 1;
  }

  100% {
    height: 100%;
    top: 0;
    opacity: 1;
  }
}

@keyframes drawBottomLine {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }

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


.lp_wrap .fact_03_line {
  position: absolute;
  bottom: 0;
  width: min(calc(551 / 750 * 100vw), 551px);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.lp_wrap .fact_graph01 {
  position: absolute;
  top: min(calc(205 / 750 * 100vw), 205px);
  width: min(calc(580 / 750 * 100vw), 580px);
  left: 51.7%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.lp_wrap .fact_graph01_txt01 {
  position: absolute;
  top: min(calc(430 / 750 * 100vw), 430px);
  width: min(calc(201 / 750 * 100vw), 201px);
  right: min(calc(145 / 750 * 100vw), 145px);
}

.lp_wrap .fact_graph01_txt02 {
  position: absolute;
  top: min(calc(386 / 750 * 100vw), 386px);
  width: min(calc(183 / 750 * 100vw), 183px);
  left: min(calc(125 / 750 * 100vw), 125px);
}

.lp_wrap .fact_graph01_txt03 {
  position: absolute;
  top: min(calc(176 / 750 * 100vw), 176px);
  width: min(calc(205 / 750 * 100vw), 205px);
  left: min(calc(67 / 750 * 100vw), 67px);
}

.lp_wrap .fact_graph01_txt04 {
  position: absolute;
  top: min(calc(66 / 750 * 100vw), 66px);
  width: min(calc(154 / 750 * 100vw), 154px);
  left: min(calc(194 / 750 * 100vw), 194px);
}

.lp_wrap .fact_graph01_txt05 {
  position: absolute;
  top: min(calc(72 / 750 * 100vw), 72px);
  width: min(calc(139 / 750 * 100vw), 139px);
  left: min(calc(374 / 750 * 100vw), 374px);
}

.lp_wrap .fact_graph01_arrow {
  position: absolute;
  bottom: 0;
  width: min(calc(17 / 750 * 100vw), 17px);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.lp_wrap .fact_graph02 {
  position: absolute;
  top: 0;
  width: min(calc(580 / 750 * 100vw), 580px);
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

.lp_wrap .fact_graph02_txt02 {
  position: absolute;
  top: min(calc(155 / 750 * 100vw), 155px);
  width: min(calc(201 / 750 * 100vw), 201px);
  right: min(calc(132 / 750 * 100vw), 132px);
}

.lp_wrap .fact_graph02_txt01 {
  position: absolute;
  top: min(calc(238 / 750 * 100vw), 238px);
  width: min(calc(240 / 750 * 100vw), 240px);
  left: min(calc(137 / 750 * 100vw), 147px);
}

.lp_wrap .new_02_02,
.lp_wrap .new_02_03 {
  position: absolute;
  top: 0;
}

.lp_wrap .new_03_ttl {
  position: absolute;
  top: 0;
}

.lp_wrap .new_03_pk {
  position: absolute;
  width: min(calc(422 / 750 * 100vw), 422px);
  bottom: 0;
  left: 0;
}

.lp_wrap .new_03_icon {
  position: absolute;
  width: min(calc(320 / 750 * 100vw), 320px);
  top: min(calc(188 / 750 * 100vw), 188px);
  right: min(calc(38 / 750 * 100vw), 38px);
  display: inline-block;
  overflow: hidden;
}

.lp_wrap .new_03_icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.3) 45%,
      rgba(255, 255, 255, 0.8) 49%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.8) 51%,
      rgba(255, 255, 255, 0.3) 55%,
      rgba(255, 255, 255, 0) 65%);
  background-repeat: no-repeat;
  background-size: 200% 200%;
  animation: shine02 2.5s infinite;
  pointer-events: none;
  mask-image: url('../images/new_03_icon.png');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mix-blend-mode: overlay;
}

@keyframes shine02 {
  0% {
    background-position: 200% -200%;
  }
  100% {
    background-position: -200% 200%;
  }
}

.lp_wrap .osusume_01_txt01 {
  position: absolute;
  bottom: min(calc(255 / 750 * 100vw), 255px);
}

.lp_wrap .osusume_01_txt02 {
  position: absolute;
  bottom: min(calc(123 / 750 * 100vw), 123px);
}

.lp_wrap .osusume_01_txt03 {
  position: absolute;
  bottom: 0;
}

.lp_wrap .osusume_02_e {
  position: absolute;
  bottom: max(calc(-12 / 750 * 100vw), -12px);
}

.graph-container {
  width: min(calc(580 / 750 * 100vw), 580px);
  height: min(calc(580 / 750 * 100vw), 580px);
  margin: 0 auto;
  transform-origin: center;
  position: relative;
  overflow: visible;
}
.graph-container svg {
  width: 100%;
  height: auto;
  display: block;
}
/* 初期状態で完全に非表示にする */
#seg1,
#seg2,
#seg3,
#seg4,
#seg5,
#g2_seg1,
#g2_seg2 {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fact_graph01_txt01,
.fact_graph01_txt02,
.fact_graph01_txt03,
.fact_graph01_txt04,
.fact_graph01_txt05,
.fact_graph01_arrow,
.fact_graph02_txt01,
.fact_graph02_txt02 {
  opacity: 0;
  transition: opacity 0.5s ease;
}