@charset "utf-8";

.p-stepup__link {
  --pt: 100;
  --pb: 72;
  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: 880px) {
    --pt: 75;
    --pb: 75;
  }
}
.p-stepup__linkHead {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p-stepup__linkHeadTitle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20em/16);
  & .txt {
    width: calc(609em/16);
    @media screen and (max-width: 880px) {
      width: calc(371em/16);
    }
  }
  & .label {
    --labeltitle-fs: 22;
    --labeltitle-ls: 0.05;
    --labeltitle-pt: 6;
    --labeltitle-pb: 8;
    --labeltitle-plr: 32;
    --labeltitle-shadow-color: #b76700;
    @media screen and (max-width: 880px) {
      --labeltitle-fs: 17;
      --labeltitle-pt: 5;
      --labeltitle-pb: 7;
      --labeltitle-plr: 12;
    }
  }
}
.p-stepup__linkHeadWave {
  --wave-w: 1717;
  --wave-h: 300;
  --wave-opacity-top: 0;
  --wave-opacity-w: 1717;
  --wave-opacity-h: 287;
  --wave-white-top: 0;
  --wave-white-w: 1561;
  --wave-white-h: 265;
  z-index: 0;
  &::before {
    background-image: url('/image/feature/fx/beginner/stepup/common/link-wave-opacity-2x.png');
  }
  &::after {
    background-image: url('/image/feature/fx/beginner/stepup/common/link-wave-white-2x.png');
  }
}
.p-stepup__linkImg {
  position: absolute;
  top: calc(38em/16);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  pointer-events: none;
  @media screen and (max-width: 1150px) {
    position: relative;
    top: 0;
    margin: calc(-100em/16) auto calc(-40em/16);
  }
  @media screen and (max-width: 1024px) {
    margin: calc(-50em/16) auto 0;
  }
  @media screen and (max-width: 880px) {
    margin: calc(-25em/16) auto 0;
  }
}
.p-stepup__linkImgRight {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  margin-right: calc(-74em/16);
  @media screen and (max-width: 1150px) {
    margin-right: calc(-40em/16);
  }
  @media screen and (max-width: 1024px) {
    margin-right: 0;
  }
  @media screen and (max-width: 880px) {
    margin-right: calc(-40/360*100%);
  }
  & .fukidashi {
    margin: auto auto calc(19em/16) calc(-80em/16);
    width: calc(231em/16);
    @media screen and (max-width: 1024px) {
      margin: 0;
    }
    @media screen and (max-width: 880px) {
      width: calc(130em/16);
    }
  }
  & .img {
    width: calc(195em/16);
    @media screen and (max-width: 1024px) {
      display: none;
    }
  }
}
.p-stepup__linkImgLeft {
  display: flex;
  align-items: flex-end;
  margin-bottom: calc(5em/16);
  margin-left: calc(-3em/16);
  @media screen and (max-width: 1024px) {
    display: none;
  }
  & .fukidashi {
    margin: auto calc(-25em/16) calc(38em/16) auto;
    width: calc(185em/16);
  }
  & .img {
    width: calc(113em/16);
  }
}
.p-stepup__linkMain {
  position: relative;
  z-index: 1;
  margin: calc(60em/16) auto 0;
  width: calc(660em/16);
  overflow: visible;
  @media screen and (max-width: 1024px) {
    margin: calc(-50em/16) auto 0;
  }
  @media screen and (max-width: 880px) {
    margin: calc(-25em/16) auto 0;
    width: calc(350/400*100%);
  }
}
.p-stepup__linkMainSlider {
  margin: 0 auto;
  width: 100%;
  overflow: visible;
  & .list__block {
    position: relative;
  }
  & .list__block-inner {
    position: relative;
    z-index: 1;
    display: block;
    padding: calc(75em/16) 0 calc(48em/16);
    width: 100%;
    height: 100%;
    border-radius: calc(10em/16);
    overflow: hidden;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: calc(5em/16) solid #fff;
      border-radius: calc(10em/16);
      pointer-events: none;
    }
    @media screen and (max-width: 880px) {
      padding: calc(75em/16) 0 calc(86em/16);
      border-radius: calc(5em/16);
      &::after {
        border: calc(3em/16) solid #ff8b0b;
        border-radius: calc(5em/16);
      }
    }
    @media (any-hover: hover) {
      &::after {
        transition: border-color var(--transition);
      }
      &:is(:hover, :focus-visible)::after {
        border-color: #ff8b0b;
      }
    }
  }
  & .list__blockHeadLabel {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(112em/16);
    height: calc(112em/16);
    color: #fff;
    background: linear-gradient(to bottom, #ffa601, var(--grad-color02-02));
    border-radius: 0 100vmax 100vmax 100vmax;
    @media screen and (max-width: 880px) {
      width: calc(80em/16);
      height: calc(80em/16);
    }
  }
  & .list__blockHeadLabelLine {
    &:nth-child(1) {
      font-size: calc(14em/16);
      letter-spacing: 0.03em;
    }
    &:nth-child(2) {
      font-size: calc(50em/16);
      letter-spacing: 0.05em;
    }
    @media screen and (max-width: 880px) {
      &:nth-child(1) {
        font-size: calc(10em/16);
      }
      &:nth-child(2) {
        font-size: calc(36em/16);
      }
    }
  }
  & .list__blockHeadSubtitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    width: fit-content;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      background-color: var(--main-color);
      width: calc(4em/16);
      height: 100%;
      transform: skewX(-20deg);
    }
    &::before {
      left: calc(-8em/16);
    }
    &::after {
      right: calc(-8em/16);
    }
  }
  & .list__blockHeadSubtitleTxt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: calc(6em/16) calc(10em/16);
    &::before {
      content: "";
      display: block;
      background-color: var(--main-color);
      position: absolute;
      inset: 0;
      z-index: 0;
      transform: skewX(-20deg);
    }
    @media screen and (max-width: 880px) {
      flex-direction: column;
    }
  }
  & .list__blockHeadSubtitleTxtBody {
    position: relative;
    z-index: 1;
    font-size: calc(17em/16);
    letter-spacing: 0.05em;
    color: #fff;
    @media screen and (max-width: 880px) {
      font-size: calc(13em/16);
    }
  }
  & .list__blockHeadTitle {
    --fs: 44;
    margin: calc(18em/var(--fs)) auto 0;
    line-height: 1.2;
    font-size: calc(var(--fs) * 1em/16);
    @media screen and (max-width: 880px) {
      --fs: 27;
      margin-top: calc(15em/var(--fs));
      width: calc(325/345*100%);
    }
  }
  & .list__blockLevel {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: calc(26em/16) auto 0;
    width: min(calc(500em/16), calc(290/345*100%));
    height: calc(36em/16);
    &::before {
      content: '';
      position: absolute;
      top: calc(3em/16);
      bottom: calc(3em/16);
      width: 100%;
      background-color: #ffe602;
      border-radius: 100vmax;
    }
    @media screen and (max-width: 880px) {
      margin: calc(18em/16) auto 0;
      height: calc(30em/16);
      &::before {
        top: calc(1em/16);
        bottom: calc(1em/16);
      }
    }
  }
  & .list__blockLevelList {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: calc(20em/16);
    @media screen and (max-width: 880px) {
      gap: calc(9em/16);
    }
  }
  & .list__blockLevelListTitle {
    font-size: calc(15em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      margin-bottom: 0.15em;
    }
  }
  & .list__blockLevelListBody {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(9em/16);
  }
  & .list__blockLevelListBodyImg {
    width: calc(20em/16);
    @media screen and (max-width: 880px) {
      width: calc(18em/16);
    }
    .p-stepup__linkMainSlider .list__blockLevelListBody.is-01 & {
      &:nth-of-type(n+2) {
        opacity: .4;
      }
    }
    .p-stepup__linkMainSlider .list__blockLevelListBody.is-02 & {
      &:nth-of-type(n+3) {
        opacity: .4;
      }
    }
    .p-stepup__linkMainSlider .list__blockLevelListBody.is-03 & {
      &:nth-of-type(n+4) {
        opacity: .4;
      }
    }
    .p-stepup__linkMainSlider .list__blockLevelListBody.is-04 & {
      &:nth-of-type(n+5) {
        opacity: .4;
      }
    }
  }
  & .list__blockBody {
    margin: calc(27em/16) auto 0;
    width: min(calc(500em/16), calc(290/345*100%));
    text-align: left;
    line-height: 1.8;
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      position: relative;
      z-index: 2;
      line-height: 1.7;
      font-size: calc(15em/16);
    }
  }
  & .list__blockDetail {
    position: absolute;
    bottom: calc(-5em/16);
    right: calc(-5em/16);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100em/16);
    height: calc(100em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: calc(60em/16) 0 0 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    @media screen and (max-width: 880px) {
      bottom: calc(-3em/16);
      right: calc(-3em/16);
      width: calc(70em/16);
      height: calc(70em/16);
      border-radius: calc(30em/16) 0 0 0;
      opacity: 1;
    }
    @media (any-hover: hover) {
      .p-stepup__linkMainSlider .list__block-inner:is(:hover, :focus-visible) & {
        opacity: 1;
      }
    }
  }
  & .list__blockDetailIcon {
    margin: calc(9em/16) 0 0 calc(3em/16);
    width: calc(41em/16);
    height: calc(41em/16);
    @media screen and (max-width: 880px) {
      margin: calc(5em/16) 0 0 calc(3em/16);
      width: calc(30em/16);
      height: calc(30em/16);
    }
  }
}
.p-stepup__linkMainArrow {
  & .body {
    --slidearrow-h: 90;
    --slidearrow-body-w: 28;
  }
}