@charset "utf-8";

.p-stepuplist__mv {
  --h: 600;
  height: calc(var(--h) * 1em/16);
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(540/600*100%));
  }
  @media screen and (max-width: 1024px) {
    --h: 500;
  }
  @media screen and (max-width: 880px) {
    --h: 362;
    &::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(342/362*100%));
    }
  }
}
.p-stepuplist__mv-inner {
  background: linear-gradient(to bottom, #ffa601 0%, #f84111 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(540/600*100%), 0 100%);
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  @media screen and (max-width: 880px) {
    height: calc(350/362*100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(347/362*100%), 0 100%);
  }
}
.p-stepuplist__mvTxt {
  --pb: 136;
  position: relative;
  z-index: 2;
  padding-bottom: calc(var(--pb) * 1em/16);
  @media screen and (max-width: 880px) {
    --pb: 92;
  }
}
.p-stepuplist__mvTxtTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  & .main {
    --mb: 20;
    --w: 395;
    margin: 0 0 calc(var(--mb) * 1em/16);
    width: calc(var(--w) * 1em/16);
    @media screen and (max-width: 880px) {
      --mb: 15;
      --w: 262;
    }
  }
}
.p-stepuplist__mvTxtCrumb {
  margin-top: calc(48em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(25em/16);
  }
}
.p-stepuplist__mvImg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-size: min(1em, calc(16/1300*100vw));
  @media screen and (max-width: 1024px) {
    font-size: calc(16/1024*75vw);
  }
  @media screen and (max-width: 880px) {
    font-size: 1em;
  }
}
.p-stepuplist__mvImgTeacher {
  order: -1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  margin-bottom: calc(6em/16);
  margin-left: max(calc(-72em/16), calc(-72/1400*100vw));
  @media screen and (min-width: 1800px) {
    margin-left: 0;
  }
  @media screen and (max-width: 880px) {
    margin-left: calc(-36em/16);
    margin-bottom: calc(-36em/16);
  }
  & .fukidashi {
    margin-right: calc(-39em/16);
    width: calc(189em/16);
    @media screen and (max-width: 880px) {
      position: absolute;
      top: calc(-258em/16);
      left: calc(-15em/16);
      margin-right: 0;
      width: calc(138em/16);
    }
  }
  & .body {
    width: calc(212em/16);
    @media screen and (max-width: 880px) {
      width: calc(84em/16);
    }
  }
  & .emotion {
    position: absolute;
    top: calc(29em/16);
    right: calc(-61em/16);
    width: calc(63em/16);
    @media screen and (max-width: 880px) {
      position: absolute;
      top: calc(33em/16);
      right: calc(-18em/16);
      width: calc(20em/16);
    }
  }
}
.p-stepuplist__mvImgChar {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-62em/16);
  margin-right: max(calc(-58em/16), calc(-58/1400*100vw));
  @media screen and (min-width: 1800px) {
    margin-right: 0;
  }
  @media screen and (max-width: 880px) {
    margin-right: calc(-40em/16);
    margin-bottom: calc(-40em/16);
  }
  & .item {
    --w: 1;
    position: absolute;
    bottom: calc(var(--bottom) * 1em/16);
    right: calc(var(--right) * 1em/16);
    width: calc(var(--w) * 1em/16);
    &.is-happy {
      --bottom: 20;
      --right: 282;
      --w: 147;
    }
    &.is-sad {
      --bottom: 77;
      --right: 221;
      --w: 103;
      z-index: 1;
    }
    &.is-worry {
      --bottom: 123;
      --right: 131;
      --w: 129;
    }
    &.is-angry {
      --bottom: 146;
      --right: 4;
      --w: 179;
    }
    &.is-fun {
      --bottom: -3;
      --right: 172;
      --w: 216;
      z-index: 1;
    }
    &.is-grief {
      --bottom: 5;
      --right: 116;
      --w: 129;
      z-index: 1;
    }
    &.is-hope {
      --w: 170;
      position: relative;
      z-index: 1;
    }
    @media screen and (max-width: 880px) {
      width: calc(var(--w) * .5em/16);
      &.is-happy {
        --bottom: 10;
        --right: 93;
        --w: 132;
      }
      &.is-sad {
        --bottom: 46;
        --right: 58;
      }
      &.is-worry {
        --bottom: -15;
        --right: 124;
        z-index: 2;
      }
      &.is-angry {
        --bottom: 82;
        --right: -14;
        --w: 203;
      }
      &.is-fun {
        --bottom: -15;
        --right: 148;
      }
      &.is-grief {
        --bottom: -4;
        --right: 58;
      }
      &.is-hope {
        z-index: 2;
      }
    }
  }
}
.p-stepuplist__mvFire {
  position: absolute;
  bottom: calc(-70/600*100%);
  left: 50%;
  width: max(calc(1433em/16), 100%);
  translate: -50% 0;
  z-index: 0;
  @media screen and (max-width: 880px) {
    width: calc(717em/16);
    bottom: calc(-32em/16);
  }
}