@charset "utf-8";

.p-top__base {
  --pt: 150;
  --pb: 120;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  overflow: hidden;
  @media screen and (max-width: 880px) {
    --pt: 100;
    --pb: 75;
  }
}
.p-top__baseHead {
  position: relative;
}
.p-top__baseHeadTitle {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30em/16);
  @media screen and (max-width: 880px) {
    gap: calc(20em/16);
  }
  & .sub {
    font-size: calc(32em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(22em/16);
    }
  }
  & .maintxt {
    width: calc(584em/16);
    @media screen and (max-width: 880px) {
      width: calc(332em/16);
    }
  }
  & .mainlabel {
    --labeltitle-shadow-color: #e1bc12;
  }
}
.p-top__baseHeadWave {
  --wave-w: 2338;
  --wave-h: 354;
  --wave-opacity-top: 30;
  --wave-opacity-w: 1757;
  --wave-opacity-h: 280;
  --wave-white-top: 0;
  --wave-white-w: 1599;
  --wave-white-h: 271;
  top: 0;
  bottom: 0;
  &::before {
    background-image: url('/image/feature/fx/beginner/top/base-wave-opacity-2x.png');
  }
  &::after {
    background-image: url('/image/feature/fx/beginner/top/base-wave-white-2x.png');
  }
  @media screen and (max-width: 880px) {
    --wave-opacity-top: -25;
    --wave-white-top: -10;
  }
}
.p-top__baseMain {
  --mt: -100;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 1024px) {
    --mt: 69;
  }
}
.p-top__baseMainChara {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  & .item {
    position: relative;
    &.is-kokky {
      margin-right: calc(44/var(--section-width)*100%);
      @media screen and (max-width: 880px) {
        margin-right: calc(12/360*100%);
      }
    }
    &.is-hajime {
      padding-top: calc(6/var(--section-width)*100%);
      margin-left: calc(80/var(--section-width)*100%);
      @media screen and (max-width: 880px) {
        margin-top: 0;
        margin-left: calc(19/360*100%);
      }
    }
  }
  & .item__img {
    --w: 0;
    position: relative;
    z-index: 1;
    width: calc(var(--w) * 1em/16);
    :where(.p-top__baseMainChara .item.is-kokky) & {
      --w: 218;
      @media screen and (max-width: 880px) {
        --w: 109;
      }
    }
    :where(.p-top__baseMainChara .item.is-hajime) & {
      --w: 148;
      @media screen and (max-width: 880px) {
        --w: 74;
      }
    }
    & img {
      opacity: 0;
      @media (scripting: none) {
        opacity: 1;
      }
    }
  }
  & .item__imgTxt {
    --name-w: 0;
    position: absolute;
    top: calc(95em/16);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc(21em/16);
    width: fit-content;
    height: calc(60em/16);
    background-color: #fff;
    border-radius: 100vmax;
    filter: drop-shadow(calc(4em/16) calc(4em/16) 0 #e5b202);
    opacity: 0;
    &::before {
      content: '';
      position: absolute;
      top: calc(42em/16);
      width: calc(20em/16);
      height: calc(10em/16);
      background-color: #fff;
    }
    @media (scripting: none) {
      opacity: 1;
    }
    @media screen and (max-width: 880px) {
      padding: 0 calc(12em/16);
      height: calc(30em/16);
      filter: drop-shadow(calc(2em/16) calc(2em/16) 0 #e5b202);
      &::before {
        top: calc(21em/16);
        width: calc(10em/16);
        height: calc(5em/16);
        background-color: #fff;
      }
    }
    :where(.p-top__baseMainChara .item.is-kokky) & {
      --name-w: 81;
      left: calc(-128em/16);
      &::before {
        right: calc(-12em/16);
        rotate: 15deg;
      }
      @media screen and (max-width: 880px) {
        --name-w: 40;
        top: calc(52em/16);
        left: calc(-56em/16);
        &::before {
          right: calc(-6em/16);
        }
      }
    }
    :where(.p-top__baseMainChara .item.is-hajime) & {
      --name-w: 107;
      right: calc(-184em/16);
      &::before {
        left: calc(-4em/16);
        rotate: -15deg;
      }
      @media screen and (max-width: 880px) {
        --name-w: 54;
        top: calc(21em/16);
        right: calc(-86em/16);
        &::before {
          left: calc(-6em/16);
        }
      }
    }
    & svg {
      width: calc(var(--name-w) * 1em/16);
    }
  }
  & .item__fukidashi {
    --fukidashi-w: 0;
    position: absolute;
    z-index: 0;
    width: calc(var(--fukidashi-w) * 1em/16);
    opacity: 0;
    @media (scripting: none) {
      opacity: 1;
    }
    :where(.p-top__baseMainChara .item.is-kokky) & {
      --fukidashi-w: 311;
      top: calc(-208em/16);
      left: calc(2em/16);
      @media screen and (max-width: 880px) {
        --fukidashi-w: 156;
        top: calc(-101em/16);
        left: calc(4em/16);
      }
    }
    :where(.p-top__baseMainChara .item.is-hajime) & {
      --fukidashi-w: 174;
      top: calc(-87em/16);
      right: calc(53em/16);
      @media screen and (max-width: 880px) {
        --fukidashi-w: 87;
        top: calc(-44em/16);
        right: calc(27em/16);
      }
    }
  }
}
.p-top__baseMainBody {
  position: relative;
  z-index: 2;
  margin-top: calc(-123em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(-48em/16);
  }
  & .slider {
    margin: 0 auto;
    width: calc(540em/16);
    overflow: visible;
    @media screen and (max-width: 880px) {
      width: calc(300em/16); /* 文字が入りきらなかったため少し大きめに */
    }
    & + & {
      margin-top: calc(16em/16);
      @media screen and (max-width: 880px) {
        margin-top: calc(11em/16);
      }
    }
    &:nth-of-type(2n) {
      translate: 50% 0;
    }
  }
  & .slider__track {
    overflow: visible;
  }
  & .slider__trackListItem {
    margin-right: calc(10/540*100%);
    @media screen and (max-width: 880px) {
      margin-right: calc(6/300*100%);
    }
  }
  & .slider__trackListItemTarget {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10em/16);
    padding: calc(25em/16) .5em calc(30em/16);
    background-color: #fff;
    border-radius: calc(10em/16);
    filter: drop-shadow(0 calc(6em/16) 0 #e5b202);
    @media screen and (max-width: 880px) {
      gap: calc(6em/16);
      padding: calc(15em/16) 0 calc(18em/16);
      border-radius: calc(6em/16);
      filter: drop-shadow(0 calc(4em/16) 0 #e5b202);
    }
  }
  & .slider__trackListItemTargetLabel {
    position: relative;
    padding: calc(6em/13) calc(12em/13);
    font-size: calc(13em/16);
    letter-spacing: 0.05em;
    background-color: var(--yellow-color);
    border-radius: 100vmax;
    @media screen and (max-width: 880px) {
      padding: calc(4em/8) calc(7em/8);
      font-size: calc(8em/16);
    }
  }
  & .slider__trackListItemTargetTxt {
    line-height: 1.2;
    font-size: calc(26em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(15em/16); /* 文字が入りきらなかったため少し小さめに */
    }
  }
}
@media (any-hover: hover) {
  .p-top__baseMainBody {
    & .slider__trackListItemTarget {
      transition: translate var(--transition), filter var(--transition);
      &:is(:hover, :focus-visible) {
        translate: 0 calc(6em/16);
        filter: drop-shadow(0 calc(0em/16) 0 transparent);
        @media screen and (max-width: 880px) {
          translate: 0 calc(4em/16);
        }
      }
    }
    & .slider__trackListItemTargetLabel {
      transition: scale var(--transition), color var(--transition), background-color var(--transition);
      .p-top__baseMainBody .slider__trackListItemTarget:is(:hover, :focus-visible) & {
        color: #fff;
        background-color: var(--main-color);
        scale: 1.08;
      }
    }
  }
}
.p-top__baseMainController {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20em/16);
  margin-top: calc(36em/16);
  @media screen and (max-width: 880px) {
    gap: calc(7em/16);
    margin-top: calc(43em/16);
    height: fit-content;
  }
  & .btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100em/16);
    height: calc(90em/16);
    border: calc(5em/16) solid #fff;
    border-radius: 100vmax;
    overflow: hidden;
    @media screen and (max-width: 880px) {
      width: calc(65em/16);
      height: calc(65em/16);
      border: calc(2.5em/16) solid #fff;
      border-radius: calc(27.5em/16);
    }
  }
  & .btn__body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--grad-color02-01), var(--grad-color02-02));
  }
  & .btn__bodyArrow {
    width: calc(35em/16);
    filter: drop-shadow(calc(2em/16) calc(2em/16) 0 #ad2c00);
    @media screen and (max-width: 880px) {
      width: calc(23em/16);
      filter: drop-shadow(calc(1em/16) calc(1em/16) 0 #ad2c00);
    }
  }
  & .link {
    --btn-w: 390;
    --btn-h: 90;
    --btn-gap: 31;
    @media screen and (max-width: 880px) {
      --btn-w: 235;
      --btn-h: 65;
      --btn-gap: 16;
    }
  }
}