@charset "utf-8";

.p-stepupdtl__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: 360;
    &::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(337/360*100%));
    }
  }
  .p-fundamentals & {
    @media screen and (max-width: 880px) {
      --h: 444;
    }
  }
}
.p-stepupdtl__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;
  align-items: flex-end;
  @media screen and (max-width: 880px) {
    clip-path: polygon(0 0, 100% 0, 100% calc(337/356*100%), 0 100%);
  }
}
.p-stepupdtl__mvTxt {
  --pb: 110;
  position: relative;
  z-index: 1;
  padding-bottom: calc(var(--pb) * 1em/16);
  @media screen and (max-width: 880px) {
    --pb: 95;
  }
}
.p-stepupdtl__mvTxtTitle {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  & .main {
    --mt: 26;
    --mb: 20;
    --w: 0;
    margin: calc(var(--mt) * 1em/16) 0 calc(var(--mb) * 1em/16);
    width: calc(var(--w) * 1em/16);
    @media screen and (max-width: 880px) {
      --mt: 14;
      --mb: 15;
      .p-fundamentals & {
        --mb: 22;
      }
    }
    .p-dowtheory & {
      --w: 261;
      @media screen and (max-width: 880px) {
        --w: 172;
      }
    }
    .p-economic & {
      --w: 397;
      @media screen and (max-width: 880px) {
        --w: 261;
      }
    }
    .p-trading & {
      --w: 383;
      @media screen and (max-width: 880px) {
        --w: 252;
      }
    }
    .p-fundamentals & {
      --w: 698;
      @media screen and (max-width: 880px) {
        --w: 372;
      }
    }
    .p-howto & {
      --w: 379;
      @media screen and (max-width: 880px) {
        --w: 249;
      }
    }
  }
}
.p-stepupdtl__mvTxtCrumb {
  @media screen and (max-width: 880px) {
    gap: calc(8em/16);
  }
  & .c-crumb__item {
    &:not(:last-child) {
      &::after {
        @media screen and (max-width: 880px) {
          margin-left: calc(6em/18);
        }
      }
    }
  }
}
.p-stepupdtl__mvTxtLevel {
  --mt: 30;
  --max-width: 500;
  --h: 30;
  --gap: 25;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--gap) * 1em/16);
  background-color: #ffe602;
  border-radius: 100vmax;
  max-width: calc(var(--max-width) * 1em/16);
  height: calc(var(--h) * 1em/16);
  margin-inline: auto;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 1024px) {
    --max-width: 400;
  }
  @media screen and (max-width: 880px) {
    --mt: 20;
    --max-width: 235;
    --h: 25;
    --gap: 9;
  }
  & .title {
    --fs: 15;
    font-size: calc(var(--fs) * 1em/16);
    letter-spacing: 0.06em;
    margin-bottom: calc(2em/15);
    @media screen and (max-width: 880px) {
      --fs: 12;
      margin-bottom: 0.15em;
    }
  }
  & .body {
    --gap: 9;
    --mt: -3;
    display: flex;
    align-items: center;
    gap: calc(var(--gap) * 1em/16);
    align-self: flex-start;
    margin-top: calc(var(--mt) * 1em/16);
    @media screen and (max-width: 880px) {
      --gap: 5;
      --mt: -2;
    }
  }
  & .body__fire {
    --w: 20;
    width: calc(var(--w) * 1em/16);
    transform-origin: bottom center;
    @media screen and (max-width: 880px) {
      --w: 16;
    }
  }
  & .body.is-01 .body__fire {
    &:nth-of-type(n+2) {
      & img {
        opacity: .4;
      }
    }
  }
  & .body.is-02 .body__fire {
    &:nth-of-type(n+3) {
      & img {
        opacity: .4;
      }
    }
  }
  & .body.is-03 .body__fire {
    &:nth-of-type(n+4) {
      & img {
        opacity: .4;
      }
    }
  }
  & .body.is-04 .body__fire {
    &:nth-of-type(n+5) {
      & img {
        opacity: .4;
      }
    }
  }
}
.p-stepupdtl__mvChar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.p-stepupdtl__mvCharList {
  position: relative;
  height: 100%;
  @media screen and (max-width: 880px) {
    width: 100%;
  }
  & .item {
    --mb: 0;
    --w: 0;
    position: absolute;
    bottom: 0;
    margin-bottom: calc(var(--mb) /1200*100%);
    width: calc(var(--w) /1200*100%);
    @media screen and (max-width: 880px) {
      margin-bottom: calc(var(--mb) * 1em/16);
      width: calc(var(--w) * 1em/16);
    }
    &.is-happy {
      --mb: -108;
      --w: 173;
      left: calc(-39/1200*100%);
      @media screen and (max-width: 880px) {
        --mb: -37;
        --w: 67;
        left: calc(-12em/16);
        rotate: 13deg;
      }
    }
    &.is-sad {
      --mb: -169;
      --w: 128;
      left: calc(85/1200*100%);
      z-index: 1;
      @media screen and (max-width: 880px) {
        --mb: -52;
        --w: 48;
        left: calc(32em/16);
        rotate: 8deg;
      }
    }
    &.is-worry {
      --mb: -132;
      --w: 161;
      left: calc(169/1200*100%);
      z-index: 0;
      @media screen and (max-width: 880px) {
        --mb: -40;
        --w: 50;
        left: calc(69em/16);
      }
    }
    &.is-fun {
      --mb: -96;
      --w: 254;
      right: calc(64/1200*100%);
      @media screen and (max-width: 880px) {
        --mb: -35;
        --w: 90;
        right: calc(30em/16);
        rotate: -5deg;
      }
    }
    &.is-hope {
      --mb: -73;
      --w: 198;
      right: calc(-8/1200*100%);
      @media screen and (max-width: 880px) {
        --mb: -39;
        --w: 77;
        right: calc(-17em/16);
        rotate: -15deg;
      }
    }
  }
}
.p-stepupdtl__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(995em/16);
    bottom: calc(-23em/16);
  }
}