@charset "UTF-8";

.lp_wrap .kakuso01 .face {
  position: absolute;
  top: 2.24%;
  left: 16.7%;
  width: 67.333%;
  opacity: 0;
  transition: 0.6s 0.3s ease;
}
.lp_wrap .kakuso01 .graph {
  position: absolute;
  top: 1.5%;
  left: 7.2%;
  width: 81.6%;
  opacity: 0;
  transition: 0.6s 0.6s ease;
}
:root {
    --chart-color-kakuso01: rgba(184,160,146,0.80);
    --stroke-color-kakuso01: rgba(0,0,0,0.00);
}
.lp_wrap .kakuso01 .chart-container {
  position: absolute;
  top: 3.3%;
  left: 19.6%;
  width: 59%;
  aspect-ratio: 1 / 1.154;
  opacity: 0;
  transition: 0.6s 0.9s ease;
}
.lp_wrap .kakuso01 .face.trigger.move,
.lp_wrap .kakuso01 .face.trigger.move ~ .graph,
.lp_wrap .kakuso01 .face.trigger.move ~ .chart-container{
  opacity: 1;
}
.lp_wrap .kakuso01 .grid-line {
    fill: rgba(0,0,0,0.00);
    stroke: rgba(0,0,0,0.00);
    stroke-width: 1;
}
.lp_wrap .kakuso01 #radar-poly {
    fill: var(--chart-color-kakuso01);
    stroke: var(--stroke-color-kakuso01);
    stroke-width: 2;
}
/* 頂点のドット */
.lp_wrap .kakuso01 .point {
    fill: var(--stroke-color-kakuso01);
}
.lp_wrap .kakuso01 .circle li {
  position: absolute;
}
.lp_wrap .kakuso01 .circle li.trigger,
.lp_wrap .kakuso01 .circle li.trigger ~ li {
  transition: 0.6s;
}
.lp_wrap .kakuso01 .circle li.trigger.move,
.lp_wrap .kakuso01 .circle li.trigger.move ~ li {
  transform: translateX(0);
}
.lp_wrap .kakuso01 .circle li:nth-child(1) {
  top: 86%;
  left: 5.2%;
  width: 48%;
  transform: translateX(-120%);
}
.lp_wrap .kakuso01 .circle li:nth-child(2) {
  top: 86%;
  right: 4.8%;
  width: 48%;
  transform: translateX(120%);
}
.lp_wrap .kakuso01 .circle li:nth-child(3) {
  top: 85.98%;
  left: 5.15%;
  width: 48.267%;
  transform: translateX(-120%);
}
.lp_wrap .kakuso01 .circle li:nth-child(4) {
  top: 85.98%;
  right: 4.75%;
  width: 48.267%;
  transform: translateX(120%);
}