/* -----------------------
  vitality
----------------------- */
.vitality {
  margin-top: max(-1.87vw, -18px);
  background: url(../img/vitality_bg.png) no-repeat center top / 100% auto, #E4643B;
  padding-top: min(12.19vw, 117px);
}

.vitality .grid-box {
  display: grid;
}
.vitality .grid-box > * {
  grid-area: 1 / 1;
}

.vitality .hp-box .hp-bar {
  width: min(63.85vw, 613px);
  height: min(7.08vw, 68px);
  position: relative;
  margin: min(4.38vw, 42px) min(13.75vw, 132px) auto auto;
  position: relative;
  z-index: 3;
}
.vitality .hp-box .hp-bar::before {
  content: '';
  width: 80%;
  height: 100%;
  background-color: #8db87a;
  border-radius: min(1.25vw, 12px);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  animation: hp 3s ease infinite;
}


.vitality .increase {
  background: url(../img/vitality_increase_bg_bottom.png) no-repeat center bottom / 100% auto;
  position: relative;
  overflow: hidden;
}
.vitality .increase::before {
  content: '';
  width: min(136.88vw, 1314px);
  height: min(136.88vw, 1314px);
  background: url(../img/vitality_increase_bg_circle.png) no-repeat center / contain;
  position: absolute;
  top: min(20.1vw, 193px);
  left: calc(50% - min(68.44vw, 657px));
}

.vitality .increase .inner-box {
  position: relative;
  z-index: 3;
}

.vitality .increase .amount {
  position: relative;
}
.vitality .increase .amount::before {
  content: '';
  width: 100%;
  height: min(77.81vw, 747px);
  background: url(../img/vitality_increase_03_01.png) no-repeat left top / contain;
  position: absolute;
  left: 0;
  top: max(-31.87vw, -306px);
}

.vitality .increase .amount .grid-02 {
  width: 37.6%;
  margin: auto auto 0 0;
  transition-delay: 0s;
}
.vitality .increase .amount .grid-03 {
  width: 62.4%;
  margin: 0 0 0 auto;
  transition-delay: 1s;
}


.vitality .dust {
  background: url(../img/vitality_dust_bg.png) no-repeat center top / cover;
  margin-top: max(-17.71vw, -170px);
  position: relative;
  z-index: 4;
}

.vitality .dust::before {
  content: '';
  width: 100%;
  height: min(104.06vw, 999px);
  background: url(../img/vitality_dust_bg_icon.png) no-repeat center top / contain;
  position: absolute;
  top: 0;
  left: 0;
  animation: fuwafuwa 2s ease-in-out infinite;
}

.vitality .dust .ttl {
  margin-bottom: min(14.06vw, 135px);
}

.vitality .dust .line-box {
  position: relative;
  z-index: 3;
}
.vitality .dust .line-box .lines {
  position: absolute;
  z-index: -1;
  left: 0;
  transition: all 0.8s ease;
}

.vitality .dust .line-box-01 .lines {
  top: min(36.88vw, 354px);
  clip-path: inset(0 0 100% 0);
}
.vitality .dust .line-box-02 .lines {
  bottom: min(37.08vw, 356px);
  clip-path: inset(100% 0 0 0);
}

.vitality .dust .line-box.trigger.move .lines,
.vitality .dust .line-box.trigger.move .lines {
  clip-path: inset(0);
}

.vitality_increase_02_txt{
  opacity: 0;
}


@keyframes hp {
  0% {
    width: 80%;
  }
  20% {
    width: 75%;
  }
  45% {
    width: 98%;
  }
  60% {
    width: 85%;
  }
  95% {
    width: 95%;
  }
  100% {
    width: 80%;
  }
}