@charset "UTF-8";

.lp_wrap .trouble .head {
  position: absolute;
  top: 10%;
  left: 11.467%;
  width: 77.067%;
}
.lp_wrap .trouble .head img{
  transform: translateY(80%);
  opacity: 0;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .trouble .head.trigger.move img{
  opacity: 1;
  transform: translateY(0);
}
.lp_wrap .trouble .nayami li {
  position: absolute;
}
.lp_wrap .trouble .nayami li.trigger,
.lp_wrap .trouble .nayami li.trigger ~ li {
  transition: 0.6s;
}
.lp_wrap .trouble .nayami li.trigger.move,
.lp_wrap .trouble .nayami li.trigger.move ~ li {
}
.lp_wrap .trouble .nayami li:nth-child(1) {
  top: 22%;
  left: 54%;
  width: 33.467%;
}
.lp_wrap .trouble .nayami li:nth-child(2) {
  top: 45%;
  left: 15.5%;
  width: 25.6%;
}
.lp_wrap .trouble .nayami li:nth-child(3) {
  top: 70.5%;
  left: 54%;
  width: 32.933%;
}
.lp_wrap .trouble .hasen li {
  position: absolute;
}
.lp_wrap .trouble .hasen li.trigger,
.lp_wrap .trouble .hasen li.trigger ~ li {
  clip-path: inset(0% 100% 0% 0%);
}
.lp_wrap .trouble .hasen li.trigger.move,
.lp_wrap .trouble .hasen li.trigger.move ~ li {
  clip-path: inset(0% 0% 0% 0%);
}
.lp_wrap .trouble .hasen li:nth-child(1) {
  top: 91%;
  left: 14%;
  width: 13.467%;
  transition: 0.6s 0.0s ease;
}
.lp_wrap .trouble .hasen li:nth-child(2) {
  top: 91%;
  left: 31%;
  width: 26.267%;
  transition: 0.9s 0.0s ease;
}
.lp_wrap .trouble .hasen li:nth-child(3) {
  top: 91%;
  left: 60%;
  width: 20.267%;
  transition: 0.9s 0.0s ease;
}

:root {
  --chart-color-trouble: #ebdedb;
  --stroke-color-trouble: #ebdedb;
}
.lp_wrap .trouble .chart-container1,
.lp_wrap .trouble .chart-container2,
.lp_wrap .trouble .chart-container3{
    position: absolute;
    width: 55%;
    aspect-ratio: 1 / 1;
}
.lp_wrap .trouble .chart-container1{
  top: 14%;
  left: 43%;
}
.lp_wrap .trouble .chart-container2{
  top: 38%;
  left: 2%;
}
.lp_wrap .trouble .chart-container3{
  top: 63%;
  left: 43%;
}
.lp_wrap .trouble .grid-line {
    fill: none;
    stroke: var(--grid-color-trouble);
    stroke-width: 1;
}

/* 曲線を描くパス */
.lp_wrap .trouble #radar-path1,
.lp_wrap .trouble #radar-path2,
.lp_wrap .trouble #radar-path3{
    fill: var(--chart-color-trouble);
    stroke: var(--stroke-color-trouble);
    stroke-width: 3;
}