@charset "utf-8";

.p-stepupdtl__intro {
  ;
  --pt: 103;
  --pb: 97;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  width: calc(350/375*100%);
  @media screen and (max-width: 880px) {
    --pt: 41;
    --pb: 75;
  }
}
.p-stepupdtl__introTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-stepupdtl__introTitleMain {
  --w: 435;
  max-width: calc(var(--w) * 1em/16);
  .p-dowtheory & {
    --w: 435;
    @media screen and (max-width: 880px) {
      --w: 268;
    }
  }
  .p-economic & {
    --w: 439;
    @media screen and (max-width: 880px) {
      --w: 268;
    }
  }
  .p-trading & {
    --w: 648;
    @media screen and (max-width: 880px) {
      --w: 259;
    }
  }
  .p-fundamentals & {
    --w: 869;
    @media screen and (max-width: 880px) {
      --w: 341;
    }
  }
  .p-howto & {
    --w: 581;
    @media screen and (max-width: 880px) {
      --w: 356;
    }
  }
}
.p-stepupdtl__introTitleSub {
  --mt: 30;
  --bg-shadow-color: rgb(0 0 0 /.15);
  --bg-skewx: -20deg;
  position: relative;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 1024px) {
    --mt: 20;
  }
  & .txt {
    position: relative;
  }
  &::before,
  &::after,
  & .txt::before,
  & .txt::after {
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--main-color);
    filter: drop-shadow(calc(8em/16) calc(6em/16) 0 var(--bg-shadow-color));
    height: 100%;
    transform: skewX(var(--bg-skewx));
  }
  &::before,
  &::after {
    width: calc(4em/16);
  }
  &::before {
    left: calc(-20em/16);
  }
  &::after {
    right: calc(-20em/16);
  }
  & .txt::before,
  & .txt::after {
    width: calc(8em/16);
  }
  & .txt::before {
    left: calc(-12em/16);
  }
  & .txt::after {
    right: calc(-12em/16);
  }
  & .txt__body {
    --pt: 5;
    --pb: 7;
    --plr: 26;
    padding: calc(var(--pt) * 1em/16) calc(var(--plr) * 1em/16) calc(var(--pb) * 1em/16);
    display: flex;
    align-items: center;
    position: relative;
    @media screen and (max-width: 880px) {
      flex-direction: column;
    }
    &::before {
      content: "";
      display: block;
      background-color: var(--main-color);
      filter: drop-shadow(calc(8em/16) calc(6em/16) 0 var(--bg-shadow-color));
      position: absolute;
      inset: 0;
      z-index: 0;
      transform: skewX(var(--bg-skewx));
    }
  }
  & .txt__bodyLine {
    --fs: 22;
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: calc(var(--fs) * 1em/16);
    line-height: 1.4;
    letter-spacing: .04em;
    @media screen and (max-width: 880px) {
      --fs: 16;
    }
  }
}
.p-stepupdtl__introTxt {
  --mt: 48;
  line-height: 2;
  margin-top: calc(var(--mt) * 1em / var(--sentence-fs-max));
  width: calc(900/1300*100%);
  margin-inline: auto;
  @media screen and (max-width: 880px) {
    --mt: 40;
    width: auto;
  }
}

.p-stepupdtl__introTopicslink {
  --mt: 85;
  margin: calc(var(--mt) * 1em/16) calc(-50/1200*100%) 0;
  @media screen and (max-width: 1024px) {
    --mt: 42;
    margin: calc(var(--mt) * 1em/16) 0 0;
  }
  & .list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(20/1300*100%);
    @media screen and (max-width: 880px) {
      display: block;
    }
  }
  & .list__item {
    --mt: 17;
    width: calc(420/1300*100%);
    margin-top: calc(17/1300*100%);
    @media screen and (max-width: 1024px) {
      width: calc(640/1300*100%);
    }
    @media screen and (max-width: 880px) {
      width: 100%;
      margin-top: calc(10em/16);
    }
  }
  & .list__itemTarget {
    --h: 123;
    --pl: 86;
    --pr: 0;
    background-color: #fff;
    border-radius: calc(10em/16);
    overflow: hidden;
    filter: drop-shadow(0px calc(6em/16) 0px rgb(0 0 0 /.1));
    will-change: filter;
    position: relative;
    display: flex;
    align-items: center;
    height: calc(var(--h) * 1em/16);
    padding: 0 calc(var(--pr) /420*100%) 0 calc(var(--pl) /420*100%);
    @media screen and (max-width: 880px) {
      --h: 60;
      --pl: 60;
      --pr: 10;
      border-radius: calc(5em/16);
      justify-content: space-between;
      filter: drop-shadow(0px calc(3em/16) 0px rgb(0 0 0 /.1));
    }
  }
  & .list__itemTargetNum {
    --w: 70;
    --h: 70;
    --fs: 30;
    position: absolute;
    top: 0;
    left: 0;
    font-size: calc(var(--fs) * 1em/16);
    width: calc(var(--w) * 1em / var(--fs));
    height: calc(var(--h) * 1em / var(--fs));
    background: linear-gradient(to bottom, #ffe600, #ffa400);
    border-bottom-right-radius: calc(40em / var(--fs));
    display: flex;
    justify-content: center;
    align-items: center;
    @media screen and (max-width: 880px) {
      --w: 40;
      --h: 35;
      --fs: 21;
      justify-content: flex-start;
      padding-left: calc(7em/21);
      border-bottom-right-radius: calc(20em / var(--fs));
    }
  }
  & .list__itemTargetTxt {
    --fs: 22;
    font-size: calc(var(--fs) * 1em/16);
    line-height: 1.4;
    @media screen and (max-width: 880px) {
      --fs: 15;
    }
  }
  & .list__itemTargetTxtLine {
    display: block;
    @media screen and (max-width: 1250px) {
      display: inline;
    }
    @media screen and (max-width: 880px) {
      display: block;
    }
    &.is-pc {
      display: block;
      @media screen and (max-width: 1250px) {
        display: inline;
      }
      @media screen and (max-width: 1024px) {
        display: block;
      }
      @media screen and (max-width: 880px) {
        display: contents;
      }
    }
    &.is-sp {
      display: contents;
      @media screen and (max-width: 880px) {
        display: block;
      }
    }
  }
  & .list__itemTargetArrow {
    display: none;
    @media screen and (max-width: 880px) {
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(27em/16);
      height: calc(27em/16);
      border-radius: 50%;
      filter: drop-shadow(calc(2em/16) calc(2em/16) 0px rgb(0 0 0 /.1));
      background-color: #000;
      margin-left: calc(13em/16);
      flex-shrink: 0;
      & img {
        width: calc(11em/16);
     }
    }
  }
  @media (any-hover: hover) {
    & .list__itemTarget:where(:any-link, :enabled) {
      transition: filter .2s var(--ease-out-quint), translate .2s var(--ease-out-quint);
      &:hover {
        filter: drop-shadow(0px 0px 0px rgb(0 0 0 /.1));
        translate: 0px calc(3em/16);
      }
    }
  }
}