/* -----------------------
  skill
----------------------- */
.skill {
  background: url(../img/skill_bg.png) no-repeat center top / cover;
  position: relative;
  overflow: hidden;
}

.skill .ttl-slider.trigger {
  position: absolute;
  top: max(-4.37vw,-42px);
  width: 50%;
  transform: rotateY(0deg);
  transition: all 1s;
  z-index: 3;
}
.skill .ttl-slider.door-left {
  left: 0;
}
.skill .ttl-slider.door-right {
  right: 0;
}
.skill .ttl-slider.door-left.trigger.move {
  transform: perspective(min(55.83vw, 536px)) rotateY(17deg);
  left: max(-3.12vw, -30px);
}
.skill .ttl-slider.door-right.trigger.move {
  transform: perspective(min(55.83vw, 536px)) rotateY(-17deg);
  right: max(-3.12vw, -30px);
}

.skill .ttl-slider + .ttl-box {
  background: url(../img/skill_ttl_bg.png) no-repeat center bottom / contain;
}
.skill .ttl-slider + .ttl-box .ttl-sub {
  transition-delay: 0.5s;
}

.skill .compare .ttl-box .txt {
  grid-area: 1 / 1;
  position: relative;
}

.skill .compare .ttl-box .txt.txt-02 {
  position: absolute;
  width: min(37.81vw, 363px);
  top: min(54.97%, 2817px);
  left: min(20%, 192px);
}

.skill .compare .table {
  margin-top: max(-37.6vw, -361px);
  position: relative;
}
.skill .compare .ribbon {
  margin-top: max(-8.23vw, -79px);
  transition-delay: 0s;
}


.skill .end-txt .grid-01,
.skill .end-txt .grid-02 {
  grid-area: 1 / 1;
}



/* ------ graph-complete ------*/

.graph-complete {
  position: relative;
}
.graph-complete .bar {
  background: url(../img/graph_complete_bar_bg.png) no-repeat left bottom / cover;
  width: min(73.44vw, 705px);
  height: min(13vw, 122px);
  text-align: center;
  position: absolute;
  bottom: min(12.6vw, 121px);
  left: min(13.65vw, 131px);
}

.graph-complete .bar_text img {
  position: absolute;
  bottom: min(12.5vw, 121px);
  left: min(31vw, 310px);
  height: min(13vw, 122px);
  width: auto;
}

.graph-complete .arrow {
  width: min(33.85vw, 325px);
  height: min(14.38vw, 138px);
  position: absolute;
  bottom: min(14.58vw, 140px);
  right: min(13.54vw, 130px);
  transform-origin: 100% 0%;
  transform: scale(0, 0);
}

.graph-complete.trigger.move .bar {
  animation: scale_bar 0.7s ease-in forwards;
}
.graph-complete.trigger.move .bar_text img {
  animation: scale_bar_img 0.7s ease-in forwards;
}
.graph-complete.trigger.move .arrow {
  animation: scale_arrow 0.7s ease-in forwards;
}

@keyframes scale_bar {
  0% {
    width: min(73.44vw, 705px);
  }
  100% {
    width: min(37.6vw, 361px);
  }
}
@keyframes scale_bar_img {
  0% {
    left: min(31vw, 310px);
  }
  100% {
    left: min(13.65vw, 131px);
  }
}
@keyframes scale_arrow {
  0% {
    transform: scale(0, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}