@charset "utf-8";

.cm-stepup {
  --pt: 88;
  --pb: 70;
  position: relative;
  z-index: 1;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background: linear-gradient(to bottom, var(--grad-color02-01), var(--grad-color02-02));
  overflow: hidden;
  @media screen and (max-width: 1024px) {
    --pt: 72;
    /* --pb: 280; */
    --pb: 72;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  @media screen and (max-width: 880px) {
  }
}
.cm-stepup__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.cm-stepup__bodyHeadTitle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(26em/16);
  @media screen and (max-width: 880px) {
    gap: calc(20em/16);
  }
  & .sub {
    text-align: center;
    font-size: calc(28em/16);
    letter-spacing: 0.04em;
    color: #fff;
    @media screen and (max-width: 880px) {
      font-size: calc(20em/16);
    }
  }
  & .maintxt {
    width: calc(353em/16);
    @media screen and (max-width: 880px) {
      width: calc(247em/16);
    }
  }
  & .mainlabel {
    --labeltitle-fs: 20;
    --labeltitle-pt: 6;
    --labeltitle-pb: 8;
    --labeltitle-plr: 31;
    --labeltitle-shadow-color: #b76700;
    @media screen and (max-width: 880px) {
      --labeltitle-fs: 17;
      --labeltitle-ls: 0.04;
      --labeltitle-pt: 5;
      --labeltitle-pb: 7;
      --labeltitle-plr: 18;
    }
  }
}
.cm-stepup__bodyLink {
  --mt: 32;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 880px) {
    --mt: 37;
  }
}
.cm-stepup__bodyLinkBtn {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: calc(20em/16);
  margin-inline: auto;
  width: min(calc(390em/16), 100%);
  height: calc(74em/16);
  background-color: #fff;
  border-radius: 100vmax;
  overflow: hidden;
  @media screen and (max-width: 880px) {
    gap: calc(22em/16);
    width: calc(330/360*100%);
    height: calc(65em/16);
  }
  & .txt {
    font-size: calc(24em/16);
    letter-spacing: 0.05em;
    @media screen and (max-width: 880px) {
      font-size: calc(19em/16);
    }
  }
  & .arrow {
    width: calc(24em/16);
    @media screen and (max-width: 880px) {
      width: calc(20em/16);
    }
  }
}
@media (any-hover: hover) {
  .cm-stepup__bodyLinkBtn {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: calc(20em/16);
    margin-inline: auto;
    width: min(calc(390em/16), 100%);
    height: calc(74em/16);
    background-color: #fff;
    border-radius: 100vmax;
    overflow: hidden;
    & .txt {
      transition: color var(--transition);
      .cm-stepup__bodyLinkBtn:is(:hover, :focus-visible) & {
        color: #f84211;
      }
    }
  }
}
.cm-stepup__bodyWave {
  --wave-w: 1758;
  --wave-h: 300;
  --wave-opacity-top: 29;
  --wave-opacity-w: 1758;
  --wave-opacity-h: 280;
  --wave-white-top: 0;
  --wave-white-w: 1599;
  --wave-white-h: 271;
  z-index: 0;
  opacity: 0.5;
  &::before {
    background-image: url('/image/feature/fx/beginner/common/stepup-wave-opacity-2x.png');
  }
  &::after {
    background-image: url('/image/feature/fx/beginner/common/stepup-wave-white-2x.png');
  }
  @media screen and (max-width: 880px) {
    --wave-opacity-top: -25;
    --wave-white-top: -10;
  }
}
.cm-stepup__img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  @media screen and (max-width: 1024px) {
    position: relative;
    order: 4;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  @media screen and (max-width: 880px) {
    position: absolute;
    top: calc(36em/16);
    align-items: flex-start;
  }
}
.cm-stepup__imgRight {
  position: absolute;
  top: calc(61em/16);
  right: calc(-48em/16);
  @media screen and (max-width: 1024px) {
    position: relative;
    top: 0;
    right: 0;
  }
  @media screen and (max-width: 880px) {
    position: static;
  }
}
.cm-stepup__imgRightFukidashi {
  position: relative;
  z-index: 1;
  width: calc(277em/16);

  @media screen and (max-width: 880px) {
    position: absolute;
    top: calc(127em/16);
    right: calc(-39em/16);
    width: calc(129em/16);
  }
}
.cm-stepup__imgRightImg {
  position: absolute;
  top: calc(111em/16);
  left: calc(-126em/16);
  z-index: 2;
  width: calc(218em/16);
  @media screen and (max-width: 880px) {
    position: relative;
    top: 0;
    left: 0;
    margin-right: calc(-11em/16);
    width: calc(78em/16);
  }
}
.cm-stepup__imgLeft {
  position: absolute;
  top: calc(118em/16);
  left: calc(18em/16);
  @media screen and (max-width: 1024px) {
    position: relative;
    top: calc(58em/16);
  }
  @media screen and (max-width: 880px) {
    top: 0;
    left: 0;
  }
}
.cm-stepup__imgLeftFukidashi {
  position: relative;
  z-index: 1;
  width: calc(194em/16);
  @media screen and (max-width: 880px) {
    display: none;
  }
}
.cm-stepup__imgLeftImg {
  position: absolute;
  top: calc(60em/16);
  left: calc(173em/16);
  z-index: 2;
  width: calc(127em/16);
  @media screen and (max-width: 880px) {
    position: relative;
    top: 0;
    left: 0;
    margin-left: calc(-14em/16);
    width: calc(57em/16);
  }
}