@charset "UTF-8";

.lp_wrap .problems {
  background-color: #4655af;
  position: relative;
}
.lp_wrap .problems .head {
  padding-top: 7%;
  text-align: center;
  font-size: 20.7vw;
  color: #6b77bf;
}
.lp_wrap .problems .head img {
  display: block;
  width: 87.994%;
  margin: auto;
}
.lp_wrap .problems .let_area {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200%;
  display: flex;
}
.lp_wrap .problems .let_area * {
  color: #ffffff;
  font-weight: 600;
}
.lp_wrap .problems .let_area .let {
  width: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lp_wrap .problems .let_area .let1 .left {
  font-size: 2.2vw;
  letter-spacing: 0.1em;
}
.lp_wrap .problems .let_area .let1 .left span {
  font-size: 3.5vw;
}
.lp_wrap .problems .let_area .let1 .center {
  font-size: 14.7vw;
  margin: 0% 2% 0% 1%;
}
.lp_wrap .problems .let_area .let1 .center span {
  font-size: 18vw;
  vertical-align: text-bottom;
}
.lp_wrap .problems .let_area .let1 .right {
  font-size: 2.2vw;
  line-height: 2.4em;
  letter-spacing: 0.1em;
}
.lp_wrap .problems .let_area .let1 .right span {
  font-size: 3.5vw;
}
.lp_wrap .problems .let_area .let2 .left,
.lp_wrap .problems .let_area .let2 .right span {
  font-size: 14.7vw;
  letter-spacing: 0.15em;
}
.lp_wrap .problems .let_area .let1 .marker {
  position: absolute;
  top: -13%;
  left: 33%;
  z-index: -1;
  width: 28.696%;
}
.lp_wrap .problems .let_area .let2 .marker {
  position: absolute;
  top: 4%;
  left: 49%;
  z-index: -1;
  width: 36.017%;
}
.lp_wrap .problems .let_area .let .marker svg mask path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 20px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dashoffset: 0;
}
.lp_wrap .problems .let_area .let1 .marker svg mask path {
  transition: 1s;
  stroke-dasharray: 1275 1275;
  stroke-dashoffset: -1275;
}
.lp_wrap .problems .let_area .let2 .marker svg mask path {
  transition: 1s;
  stroke-dasharray: 1249 1249;
  stroke-dashoffset: 1249;
}
.lp_wrap .problems .let_area .let.move .marker svg mask path  {
  stroke-dashoffset: 0 !important;
}
.lp_wrap .problems .let3 {
  position: absolute;
  top: 90.6%;
  left: 28.44%;
  width: 43.118%;
  display: flex;
  justify-content: space-between;
}
.lp_wrap .problems .let3 li {
  text-align: center;
  position: relative;
}
.lp_wrap .problems .let3 li span {
  color: #ffffff;
}
.lp_wrap .problems .let3 li span:nth-of-type(1) {
  font-size: 10.3vw;
}
.lp_wrap .problems .let3 li span:nth-of-type(2) {
  font-size: 2.7vw;
}
.lp_wrap .problems .let3 li span:nth-of-type(3) {
  display: block;
  font-size: 3vw;
}
.lp_wrap .problems .let3 li .graph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 23vw;
  aspect-ratio: 1 / 1;
}
.lp_wrap .problems .let3 .graph svg {
  display: block;
  position: absolute;
  inset: 0;
  transform:rotate(-90deg);
}
.lp_wrap .problems .let3 .graph svg circle {
  fill: transparent;
  stroke: #fa326e;
  stroke-width: 30;
  stroke-dasharray: 940 940;
  stroke-dashoffset: 0;
}
.lp_wrap .problems .let3 .graph.trigger svg circle {
  transition: 1.4s;
  stroke-dashoffset: 940;
}
.lp_wrap .problems .let3 .graph.trigger.move svg circle {
  stroke-dashoffset: 50;
}
.lp_wrap .problems .anotation {
  position: absolute;
  top: 98%;
  left: 0%;
  width: 100%;
  text-align: center;
  font-size: 0.9vw;
  letter-spacing: 0.1em;
  color: #ffffff;
}
@media all and (max-width: 750px) {
  .lp_wrap .problems {
    aspect-ratio: 750 / 1305;
  }
  .lp_wrap .problems .head {
    position: absolute;
    top: -3%;
    left: -4%;
    padding-top: 0%;
    font-size: 41vw;
    writing-mode: vertical-rl;
  }
  .lp_wrap .problems .head img {
    width: 28.8%;
    margin: 0 auto 0 0;
  }
  .lp_wrap .problems .let_area {
    top: 9%;
    width: 100%;
    display: block;
  }
  .lp_wrap .problems .let_area .let {
    width: 100%;
  }
  .lp_wrap .problems .let_area .let1 {
    transition: 1s;
    transform: translateX(30%);
    opacity: 0;
  }
  .lp_wrap .problems .let_area .let1 .left {
    font-size: 3vw;
  }
  .lp_wrap .problems .let_area .let1 .left span {
    font-size: 4.8vw;
  }
  .lp_wrap .problems .let_area .let1 .center {
    font-size: 19.5vw;
  }
  .lp_wrap .problems .let_area .let1 .center span {
    font-size: 24.5vw;
  }
  .lp_wrap .problems .let_area .let1 .right {
    font-size: 3vw;
  }
  .lp_wrap .problems .let_area .let1 .right span {
    font-size: 4.8vw;
  }
  .lp_wrap .problems .let_area .let2 {
    margin-top: 3%;
    transition: 0.6s;
    transform: translateX(-30%);
    opacity: 0;
  }
  .lp_wrap .problems .let_area .let2 .left {
    font-size: 53.4vw;
    letter-spacing: -0.1em;
  }
  .lp_wrap .problems .let_area .let2 .right {
    padding: 7% 0% 0% 8%;
  }
  .lp_wrap .problems .let_area .let2 .right span:nth-child(1) {
    display: block;
    font-size: 20.2vw;
    letter-spacing: 0.05em;
  }
  .lp_wrap .problems .let_area .let2 .right span:nth-child(2) {
    display: block;
    font-size: 17.5vw;
    letter-spacing: 0.05em;
  }
  .lp_wrap .problems .let_area .let1.move,
  .lp_wrap .problems .let_area .let2.move {
    transform: translateX(0%);
    opacity: 1;
  }
  .lp_wrap .problems .let_area .let1 .marker {
    top: -15%;
    left: 26.7%;
    width: 38.133%;
  }
  .lp_wrap .problems .let_area .let2 .marker {
    top: 56%;
    left: 56%;
    width: 45.333%;
  }
  .lp_wrap .problems .let_area .let .marker svg mask path {
    stroke-width: 14px;
  }
  .lp_wrap .problems .let_area .let1 .marker svg mask path {
    stroke-dasharray: 936 936;
    stroke-dashoffset: -936;
  }
  .lp_wrap .problems .let_area .let2 .marker svg mask path {
    stroke-dasharray: 881 881;
    stroke-dashoffset: 881;
  }
  .lp_wrap .problems .let3 {
    top: 69%;
    left: 18%;
    width: 68%;
  }
  .lp_wrap .problems .let3 li span:nth-of-type(1) {
    font-size: 18.6vw;
  }
  .lp_wrap .problems .let3 li span:nth-of-type(2) {
    font-size: 4.8vw;
  }
  .lp_wrap .problems .let3 li span:nth-of-type(3) {
    font-size: 5.4vw;
  }
  .lp_wrap .problems .let3 li .graph {
    width: 45vw;
  }
  .lp_wrap .problems .anotation {
    top: 92%;
    font-size: 2.2vw;
    letter-spacing: 0em;
  }
}