.col-red {
  color: #e80021;
}

.values-hdr {
  align-items: center;
  background: url(../img/mv_values_pc.png) no-repeat right clamp(-280px, calc(38.89vw - 746.67px), 0px) top / 1920px auto;
  display: flex;
  flex-wrap: wrap;
  height: 580px;
  min-width: 1200px;
  width: 100%;
}

.values-hdr-wrapper {
  animation: opacity 1s forwards ease-in-out;
  margin: 0 50% 65px auto;
  max-width: 670px;
  min-width: 600px;
  opacity: 0;
  width: 50%;
}

.values-hdr-ttl {
  background: url(../img/mv_values_decoration_pc.png) no-repeat left top / auto;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.75;
  margin: 0 auto 0 0;
  min-height: 305px;
  min-width: 450px;
  padding: 105px 0 0 65px;
  width: fit-content;
}

.values-hdr-ttl-main {
  animation: opacity 1s ease-in-out .25s forwards;
  background: linear-gradient(-90deg, #30beb0, #3362b0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-size: 5rem;
  line-height: 1;
  opacity: 0;
  width: fit-content;
}

.values-hdr-ttl-sub {
  animation: opacity 1s ease-in-out .5s forwards;
  display: block;
  font-family: "BIZ UDPMincho", serif;
  font-size: 2.4rem;
  opacity: 0;
  width: fit-content;
}

.values-hdr-catch {
  animation: opacity 1.5s ease-in-out forwards;
  font-size: 3.7rem;
  font-weight: 500;
  letter-spacing: -.1em;
  line-height: 1.2;
  margin-left: 65px;
  opacity: 0;
  text-shadow:
    0 0 1em #fff,
    0 -5px .2em #fff,
    5px -5px .2em #fff,
    5px 0 .2em #fff,
    5px 5px .2em #fff,
    0 5px .2em #fff,
    -5px 5px .2em #fff,
    -5px 0 .2em #fff,
    -5px -5px .2em #fff;
}

.values-hdr-catch-txt {
  animation: opacity 1s ease-in-out forwards, move-RL_5em 1s forwards ease-out;
  display: block;
  opacity: 0;
}

.values-hdr-catch-txt:nth-of-type(2) {
  animation-delay: .2s;
}

.values-hdr-catch-txt:nth-of-type(3) {
  animation-delay: .4s;
}

.values-hdr-catch-txt span {
  color: #009380;
  font-size: 5rem;
  font-family: "BIZ UDPMincho", serif;
  letter-spacing: 0;
  margin: 0 .05em;
}

.values-catch-ctr {
  opacity: 0;
  padding: 8.5rem 0 9.5rem;
}

.values-catch-ctr.animeTarget.active {
  animation: opacity 1.5s forwards ease-in-out;
}

.values-catch-ctr-ttl {
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.2;
  text-align: center;
}

.values-catch-ctr-ttl .fs-large {
  font-size: 4.2rem;
}

.values-catch-ctr.animeTarget.active .values-catch-ctr-ttl {
  animation: saturate 1.5s forwards ease-in-out;
}

.values-catch-ctr.animeTarget.active .values-catch-ctr-ttl .col-red {
  animation: opacity 1.5s ease-in-out .1s forwards;
}

.values-catch-ctr-txt {
  font-size: 1.8rem;
  line-height: 1.66;
  margin: 5rem auto 0;
  width: 1120px;
}

.values-main-ctr {
  align-items: center;
  background-repeat: no-repeat;
  display: flex;
  height: 450px;
  opacity: 0;
  margin: 0 auto;
  min-width: 1200px;
  width: 100%;
}

.values-main-ctr.animeTarget.active {
  animation: opacity 1.5s forwards ease-in-out;
}

@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes saturate {
  from {
    filter: saturate(0);
  }

  to {
    filter: saturate(1);
  }
}

@keyframes move-LR_50em {
  from {
    transform: translateX(-50em);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes move-RL_5em {
  from {
    transform: translateX(5em);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes move-RL_50em {
  from {
    transform: translateX(50em);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes scale {
  from {
    transform: scale(2);
  }

  to {
    transform: scale(1);
  }
}

.values-main-ctr:nth-of-type(2) {
  background-image: linear-gradient(90deg, transparent 0, transparent 44%, #f5f5f5 47.8%, #f5f5f5 100%), url(../img/bg_values-01_pc.png);
  background-position-x: 0, clamp(-50px, calc(24.72vw - 474.64px), 0px);

}

.values-main-ctr:nth-of-type(3) {
  background-image: linear-gradient(-90deg, transparent 0, transparent 47%, #fff 50%, #fff 100%), url(../img/bg_values-02_pc.png);
  background-position: 100%, right clamp(-195px, calc(27.08vw - 520px), 0px) top;
}

.values-main-ctr:nth-of-type(4) {
  background-image: linear-gradient(90deg, transparent 0, transparent 38%, #f5f5f5 48%, #f5f5f5 100%), url(../img/bg_values-03_pc.png);
  background-position-x: 0, clamp(-178px, calc(24.72vw - 474.64px), 0px);
}

.animeTarget.active:nth-of-type(even) .values-main-detail-ctr {
  animation: opacity 1s forwards ease-in-out, move-LR_50em 1s forwards ease-out;
}

.animeTarget.active:nth-of-type(odd) .values-main-detail-ctr {
  animation: opacity 1s forwards ease-in-out, move-RL_50em 1s forwards ease-out;
}

.values-main-ctr:nth-of-type(even)>.values-main-detail-ctr {
  margin: 0 auto 0 51%;
  max-width: 600px;
}

.values-main-ctr:nth-of-type(odd)>.values-main-detail-ctr {
  margin: 0 51% 0 auto;
  max-width: 600px;
  padding-left: 0;
}

.values-main-ttl {
  font-size: 4.2rem;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.values-main-ttl-sub {
  display: block;
  font-size: 3.7rem;
}

.values-main-ttl-main {
  display: block;
}

.values-main-ttl .col-009380 {
  display: inline-block;
  opacity: 0;
}

.animeTarget.active .values-main-ttl .col-009380 {
  animation: scale 1s ease-in-out .2s forwards, opacity 1s ease-in-out .2s forwards;
}

.values-main-detail {
  font-size: 1.8rem;
  letter-spacing: -.01em;
  line-height: 1.66;
  margin: 35px 0 0 0;
  width: 565px;
}