@charset "utf-8";

.c-btn {
  --btn-viewport: 800;
  --btn-w: 400;
  --btn-h: 90;
  --btn-gap: 27;
  --btn-color: #fff;
  --btn-outer-border-w: 4;
  --btn-outer-border-color: #000;
  --btn-inner-border-w: 5;
  --btn-inner-border-color: #fff;
  --btn-bg-color: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  --btn-shadow-color: #d88d00;
  --btn-shadow-position-x: 2;
  --btn-shadow-position-y: 2;
  --btn-fs-max: 26;
  --btn-fs-min: 19;
  --btn-ls: .1;
  --btn-icon-w: 28;
  display: block;
  width: min(calc(var(--btn-w) * 1em/16), 100%);
  height: calc(var(--btn-h) * 1em/16);
  color: var(--btn-color);
  border: calc(var(--btn-outer-border-w) * 1em/16) solid var(--btn-outer-border-color);
  border-radius: 100vmax;
  overflow: hidden;
  @media screen and (max-width: 880px) {
    --btn-w: 320;
    --btn-h: 60;
    --btn-outer-border-w: 2.5;
    --btn-inner-border-w: 2.5;
    --btn-shadow-position-x: 1;
    --btn-shadow-position-y: 1;
    --btn-icon-w: 23;
    margin-top: 0; /* 本体サイトのCSS打消し */
    margin-bottom: 0; /* 本体サイトのCSS打消し */
  }
  &.is-orange {
    --btn-bg-color: linear-gradient(to bottom, var(--grad-color02-01), var(--grad-color02-02));
    --btn-shadow-color: #ad2c00;
  }
  &.is-oneborder {
    --btn-outer-border-w: 5;
    --btn-outer-border-color: #fff;
    --btn-inner-border-w: 0;
    --btn-inner-border-color: transparent;
    @media screen and (max-width: 880px) {
      --btn-outer-border-w: 2.5;
    }
  }
  &.is-hovershowline {
    --btn-outer-border-w: 2;
    @media screen and (max-width: 880px) {
      --btn-outer-border-w: 2.5;
    }
  }
}
.c-btn__body {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: calc(var(--btn-gap)/var(--btn-w)*100%);
  height: 100%;
  border-radius: 100vmax;
  overflow: hidden;
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 100vmax;
    overflow: hidden;
  }
  &::before {
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    background: var(--btn-bg-color);
  }
  &::after {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border: calc(var(--btn-inner-border-w) * 1em/16) solid var(--btn-inner-border-color);
  }
  /* .c-btn.is-spbreak.is-spleft & {
    @media screen and (max-width: 880px) {
      padding-left: calc(17em/16);
      justify-content: flex-end;
    }
  } */
}
.c-btn__bodyTxt {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(calc(var(--btn-fs-min) * 1em/16), calc(var(--btn-fs-max) / var(--btn-viewport) * 100vw), calc(var(--btn-fs-max) * 1em/16) );
  letter-spacing: calc(var(--btn-ls)*1em);
  text-shadow:
    2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
    -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
    0px 2px 0 var(--main-color),  0 -2px 0 var(--main-color),
    -2px 0 0 var(--main-color), 2px 0 0 var(--main-color);
  @media screen and (max-width: 880px) {
    .c-btn.is-spbreak & {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }
    .c-btn.is-spbreak.is-spleft & {
      align-items: flex-start;
    }
  }
  @media screen and (max-width: 540px) {
    text-shadow:
      1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
      -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
      0px 1px 0 var(--main-color),  0 -1px 0 var(--main-color),
      -1px 0 0 var(--main-color), 1px 0 0 var(--main-color);
  }
}
.c-btn__bodyIcon {
  width: calc(var(--btn-icon-w) * 1em/16);
  filter: drop-shadow(calc(var(--btn-shadow-position-x) * 1em/16) calc(var(--btn-shadow-position-y) * 1em/16) 0 var(--btn-shadow-color));
}
@media (any-hover: hover) {
  .c-btn {
    transition: border-color var(--transition);
    &.is-hovershowline {
      --btn-outer-border-color: transparent;
    }
    &:is(:hover, :focus-visible) {
      --btn-outer-border-color: var(--main-color);
    }
  }
  .c-btn__bodyIcon {
    transition: filter var(--transition);
    .c-btn:is(:hover, :focus-visible) & {
      filter: drop-shadow(calc(0em/16) calc(0em/16) 0 var(--btn-shadow-color));
    }
  }
}

.c-title {
  --title-fs-viewport: 800;
  --title-fs-max: 20;
  --title-fs-min: 18;
  --title--line-height: 1;
  font-size: clamp(calc(var(--title-fs-min) * 1em/16), calc(var(--title-fs-max) / var(--title-fs-viewport) * 100vw), calc(var(--title-fs-max) * 1em/16) );
  line-height: var(--title--line-height);
}

.c-labeltitle {
  --labeltitle-fs: 24;
  --labeltitle-ls: 0.1;
  --labeltitle-pt: 7;
  --labeltitle-pb: 9;
  --labeltitle-plr: 36;
  --labeltitle-skewx: -20deg;
  --labeltitle-shadow-color: rgb(0 0 0 /.15);
  --labeltitle-shadow-x: 6;
  --labeltitle-shadow-y: 6;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  filter: drop-shadow(calc(var(--labeltitle-shadow-x) *1em/16) calc(var(--labeltitle-shadow-y) *1em/16) 0 var(--labeltitle-shadow-color));
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--main-color);
    width: calc(4em/16);
    height: 100%;
    transform: skewX(var(--labeltitle-skewx));
  }
  &::before {
    left: calc(-20em/16);
  }
  &::after {
    right: calc(-20em/16);
  }
  @media screen and (max-width: 880px) {
    --labeltitle-fs: 17;
    --labeltitle-ls: 0.2;
    --labeltitle-pt: 5;
    --labeltitle-pb: 7;
    --labeltitle-plr: 19;
    filter: drop-shadow(calc(var(--labeltitle-shadow-x) *.5em/16) calc(var(--labeltitle-shadow-y) *.5em/16) 0 var(--labeltitle-shadow-color));
  }
}
.c-labeltitle__txt {
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    background-color: var(--main-color);
    height: 100%;
    transform: skewX(var(--labeltitle-skewx));
  }
  &::before,
  &::after {
    width: calc(8em/16);
  }
  &::before {
    left: calc(-12em/16);
  }
  &::after {
    right: calc(-12em/16);
  }
}
.c-labeltitle__txtBody {
  padding: calc(var(--labeltitle-pt) * 1em/16) calc(var(--labeltitle-plr) * 1em/16) calc(var(--labeltitle-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);
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: skewX(var(--labeltitle-skewx));
  }
}
.c-labeltitle__txtBodyLine {
  position: relative;
  text-align: center;
  line-height: 1.4;
  letter-spacing: calc(var(--labeltitle-ls)*1em);
  color: #fff;
  font-size: calc(var(--labeltitle-fs) * 1em/16);
}

.c-topicstitle {
  --topicstitle-mb: 50;
  --topicstitle-main-fs: 50;
  --topicstitle-main-ls: .04;
  --topicstitle-main-em-fs: 50;
  --topicstitle-main-em-ls: .04;
  --topicstitle-main-small-fs: 36;
  --topicstitle-sub-fs: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28em/16);
  margin-bottom: calc(var(--topicstitle-mb) * 1em/16);
  @media screen and (max-width: 880px) {
    --topicstitle-mb: 48;
    --topicstitle-main-fs: 32;
    --topicstitle-main-em-fs: 32;
    --topicstitle-main-small-fs: 19;
    --topicstitle-sub-fs: 15;
    gap: calc(14em/16);
  }
}
.c-topicstitle__main {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  font-size: calc(var(--topicstitle-main-fs) * 1em/16);
  letter-spacing: calc(var(--topicstitle-main-ls) * 1em);
  @media screen and (max-width: 1024px) {
    flex-direction: column;
  }
  &.is-column {
    flex-direction: column;
    gap: calc(8em/var(--topicstitle-main-fs));
    @media screen and (max-width: 880px) {
      gap: calc(5em/var(--topicstitle-main-fs));
    }
  }
}
.c-topicstitle__mainLine {
  display: flex;
  align-items: center;
  &.is-small {
    font-size: calc(var(--topicstitle-main-small-fs) * 1em/var(--topicstitle-main-fs));
  }
  &.is-spcolumn {
    @media screen and (max-width: 880px) {
      flex-direction: column;
    }
  }
}
.c-topicstitle__main.is-pcbreak {
  display: block;
  text-align: center;
  @media screen and (max-width: 880px) {
    display: flex;
    text-align: left;
  }
  & .c-topicstitle__mainLine {
    display: contents;
    @media screen and (max-width: 880px) {
      display: flex;
    }
    & .c-topicstitle__mainLine-inner {
      display: block;
      @media screen and (max-width: 880px) {
        display: inline;
      }
    }
  }
}
.c-topicstitle__main.is-spbreak {
  flex-direction: column;
  @media screen and (max-width: 880px) {
    display: block;
    text-align: center;
  }
  & .c-topicstitle__mainLine {
    display: flex;
    @media screen and (max-width: 880px) {
      display: contents;
    }
    & .c-topicstitle__mainLine-inner {
      display: inline;
      @media screen and (max-width: 880px) {
        display: block;
      }
    }
  }
}
.c-topicstitle__mainLineEm {
  font-size: calc(var(--topicstitle-main-em-fs) * 1em/var(--topicstitle-main-fs));
  letter-spacing: calc(var(--topicstitle-main-em-ls) * 1em);
  text-shadow:
  2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
  -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
  0px 2px 0 var(--main-color),  0 -2px 0 var(--main-color),
  -2px 0 0 var(--main-color), 2px 0 0 var(--main-color);
  color: var(--yellow-color02);
  @media screen and (max-width: 880px) {
    text-shadow:
    1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
    -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
    0px 1px 0 var(--main-color),  0 -1px 0 var(--main-color),
    -1px 0 0 var(--main-color), 1px 0 0 var(--main-color);
  }
  &.is-thickness {
    text-shadow:
    1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
    -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
    0px 1px 0 var(--main-color),  0 -1px 0 var(--main-color),
    -1px 0 0 var(--main-color), 1px 0 0 var(--main-color);
  }
}
.c-topicstitle__sub {
  padding: calc(8em/var(--topicstitle-sub-fs)) calc(16em/var(--topicstitle-sub-fs));
  font-size: calc(var(--topicstitle-sub-fs) * 1em/16);
  letter-spacing: 0.04em;
  color: #fff;
  background-color: var(--main-color);
  border-radius: calc(5em/var(--topicstitle-sub-fs));
}

.c-sentence {
  --sentence-fs-viewport: 800;
  --sentence-fs-max: 20;
  --sentence-fs-min: 16;
  --sentence-line-height: 1.9;
  --sentence-letter-spacing: -.02;
  /* --sentence-letter-spacing: 0.05; */
  font-size: clamp(calc(var(--sentence-fs-min) * 1em/16), calc(var(--sentence-fs-max) / var(--sentence-fs-viewport) * 100vw), calc(var(--sentence-fs-max) * 1em/16) );
  line-height: var(--sentence-line-height);
  letter-spacing: calc(var(--sentence-letter-spacing) * 1em);
}

.c-slidearrow {
  --slidearrow-w: 90;
  --slidearrow-h: 140;
  --slidearrow-left: -40;
  --slidearrow-right: -40;
  --slidearrow-body-w: 34;
  --slidearrow-body-shadow-color: #a13600;
  width: calc(var(--slidearrow-w) * 1em/16);
  height: calc(var(--slidearrow-h) * 1em/16);
  background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  border-radius: 100vmax;
  overflow: hidden;
  opacity: 1!important;
  &.is-prev {
    left: calc(var(--slidearrow-left) * 1em/16);
  }
  &.is-next {
    right: calc(var(--slidearrow-left) * 1em/16);
  }
  @media screen and (max-width: 880px) {
    --slidearrow-w: 50;
    --slidearrow-h: 70;
    --slidearrow-left: -23;
    --slidearrow-right: -23;
    --slidearrow-body-w: 18;
  }
}
.c-slidearrow__body {
  width: calc(var(--slidearrow-body-w) * 1em/16);
  filter: drop-shadow(calc(2em/16) calc(2em/16) 0 var(--slidearrow-body-shadow-color));
  will-change: filter;
  @media screen and (max-width: 880px) {
    filter: drop-shadow(calc(1em/16) calc(1em/16) 0 var(--slidearrow-body-shadow-color));
  }
}
@media (any-hover: hover) {
  .c-slidearrow__body {
    transition: filter var(--transition);
    .c-slidearrow:is(:hover, :focus-visible) & {
      filter: drop-shadow(calc(0em/16) calc(0em/16) 0 var(--slidearrow-body-shadow-color));
    }
  }
}

.c-wave {
  --wave-w: 1725;
  --wave-h: 300;
  --wave-opacity-top: 0;
  --wave-opacity-w: 1725;
  --wave-opacity-h: 285;
  --wave-white-top: 0;
  --wave-white-w: 1559;
  --wave-white-h: 265;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: calc(var(--wave-h) * 1em/16);
  font-size: min(1em, calc(16/800*100vw));
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
  }
  &::before {
    top: calc(var(--wave-opacity-top)*1em/16);
    height: calc(var(--wave-opacity-h)*1em/16);
    background-position: center;
    background-size: calc(var(--wave-opacity-w)*1em/16) calc(var(--wave-opacity-h)*1em/16);
    animation-name: wave_loop_opacity;
    animation-duration: calc(var(--wave-opacity-duration) * 1s);
    /* background-image: url('/image/feature/fx/beginner/top/lesson-wave-opacity-2x.png'); */
  }
  &::after {
    top: calc(var(--wave-white-top)*1em/16);
    height: calc(var(--wave-white-h)*1em/16);
    background-size: calc(var(--wave-white-w)*1em/16) calc(var(--wave-white-h)*1em/16);
    animation-name: wave_loop_white;
    animation-duration: calc(var(--wave-white-duration) * 1s);
    /* background-image: url('/image/feature/fx/beginner/top/lesson-wave-white-2x.png'); */
  }
  &.is-animating {
    --wave-opacity-duration: 120;
    --wave-white-duration: 72;
    &::before,
    &::after {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    &::before {
      background-position: calc(var(--wave-opacity-w)*1em/16) top;
      animation-name: wave_loop_opacity;
      animation-duration: calc(var(--wave-opacity-duration) * 1s);
    }
    &::after {
      background-position: calc(var(--wave-white-w)*1em/16) top;
      animation-name: wave_loop_white;
      animation-duration: calc(var(--wave-white-duration) * 1s);
    }
  }
}
@keyframes wave_loop_opacity {
  0% {
    background-position: calc(0em/16) top;
  }
  100% {
    background-position: calc(var(--wave-opacity-w)*1em/16) top;
  }
}
@keyframes wave_loop_white {
  0% {
    background-position: calc(0em/16) top;
  }
  100% {
    background-position: calc(var(--wave-white-w)*1em/16) top;
  }
}

.c-graphbg {
  --graphbg-opacity: .15;
  --graphbg-w: 52;
  --graphbg-h: 54;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/image/feature/fx/beginner/common/bg-graph.png');
    background-size: min(calc(var(--graphbg-w)*1em/16), calc(var(--graphbg-w)/400*50vw)) min(calc(var(--graphbg-h)*1em/16), calc(var(--graphbg-h)/400*50vw));
    background-repeat: repeat;
    opacity: var(--graphbg-opacity);
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  &:where(.is-colorburn) {
    --graphbg-opacity: 1;
    &::before {
      mix-blend-mode: color-burn;
    }
  }
  &:where(.is-small) {
    --graphbg-opacity: 1;
    &::before {
      background-image: url('/image/feature/fx/beginner/common/bg-graph-small.png');
      background-size: calc(14em/16);
    }
  }
}

.c-kakkosection {
  --kakko-border-w: 20;
  --kakko-border-shift: 5;
  --kakko-border-color: var(--main-color);
  --kakko-border-lighten-color: #535353;
  position: relative;
  margin-inline: auto;
  text-align: left;
  max-width: clamp(calc(1300em/16), calc(1300/1400*100vw), calc(1300*1.2em/16));
  width: calc(350/375*100%);
  background-color: #fff;
  overflow: visible;
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: calc(var(--kakko-border-shift) * -1em/16);
    right: calc(var(--kakko-border-shift) * -1em/16);
    z-index: 2;
    height: calc(var(--kakko-border-w) * 1em/16);
    pointer-events: none;
  }
  &::before {
    top: calc(var(--kakko-border-shift) * -1em/16);
    background: linear-gradient(to right, var(--kakko-border-color) calc(80em/16), transparent  calc(80em/16), transparent calc(100% - 80em/16), var(--kakko-border-color) calc(100% - 80em/16));
  }
  &::after {
    bottom: calc(var(--kakko-border-shift) * -1em/16);
    background: linear-gradient(to right, var(--kakko-border-color) calc(80em/16), transparent  calc(80em/16), transparent calc(100% - 80em/16), var(--kakko-border-color) calc(100% - 80em/16));
  }
  @media screen and (min-width: 1680px) {
    width: calc(345/375*100%);
  }
  @media screen and (max-width: 1024px) {
    width: 100%;
    overflow: hidden;
    &::before,
    &::after {
      left: 0;
      right: 0;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
    }
  }
  @media screen and (max-width: 880px) {
    &::before,
    &::after {
      font-size: .5em;
    }
  }
}
.c-kakkosection-inner {
  position: relative;
  &::before,
  &::after {
    content: '';
    position: absolute;
    left: calc(var(--kakko-border-shift) * -1em/16);
    right: calc(var(--kakko-border-shift) * -1em/16);
    z-index: 1;
    height: calc(60em/16);
    pointer-events: none;
  }
  &::before {
    top: calc(var(--kakko-border-shift) * -1em/16);
    background: linear-gradient(to right, var(--kakko-border-lighten-color) calc(var(--kakko-border-w) * 1em/16), transparent  calc(var(--kakko-border-w) * 1em/16), transparent calc(100% - var(--kakko-border-w) * 1em/16), var(--kakko-border-lighten-color) calc(100% - var(--kakko-border-w) * 1em/16));
  }
  &::after {
    bottom: calc(var(--kakko-border-shift) * -1em/16);
    background: linear-gradient(to right, var(--kakko-border-lighten-color) calc(var(--kakko-border-w) * 1em/16), transparent  calc(var(--kakko-border-w) * 1em/16), transparent calc(100% - var(--kakko-border-w) * 1em/16), var(--kakko-border-lighten-color) calc(100% - var(--kakko-border-w) * 1em/16));
  }
  @media screen and (max-width: 1024px) {
    width: 100%;
    &::before,
    &::after {
      left: 0;
      right: 0;
    }
    &::before {
      top: 0;
    }
    &::after {
      bottom: 0;
    }
  }
  @media screen and (max-width: 880px) {
    &::before,
    &::after {
      font-size: .5em;
    }
  }
}
.c-kakkosection__body {
  --section-body-width: 900;
  --section-body-pt: 100;
  --section-body-pb: 100;
  --section-body-width-sp: 320;
  margin-inline: auto;
  padding: calc(var(--section-body-pt) * 1em/16) 0 calc(var(--section-body-pb) * 1em/16);
  width: calc(var(--section-body-width) /1300*100%);
  & .c-kakkosection__body-inner {
    width: calc(900/ var(--section-body-width) *100%);
    margin-inline: auto;
  }
  @media screen and (max-width: 880px) {
    --section-body-pt: 74;
    --section-body-pb: 64;
    width: calc(var(--section-body-width-sp)/400*100%);
    & .c-kakkosection__body-inner {
      width: calc(320 / var(--section-body-width-sp) *100%);
    }
  }
  &.is-wide {
    --section-body-width: 1080;
    --section-body-width-sp: 360;
  }
  & .c-topicstitle {
    margin-left: calc((var(--section-body-width) - 1300) / 2 / var(--section-body-width) * 100% );
    width: calc(1300 / var(--section-body-width) * 100% );
    @media screen and (max-width: 880px) {
      margin-left: calc((var(--section-body-width-sp) - 400) / 2 / var(--section-body-width-sp)*100%);
      width: calc(400 / var(--section-body-width-sp)*100%);
    }
  }
}

.c-pagetop {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
  margin-inline: auto;
  max-width: clamp(calc(var(--section-width) * 1em/16), calc(var(--section-width) / 1400*100vw), calc(var(--section-width) * 1.2em/16));
  width: calc(345/375*100%);
  pointer-events: none;
}
.c-pagetop__target {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 calc(9em/16) 0 auto;
  width: calc(160em/16);
  height: calc(45em/16);
  color: #fff;
  background-color: var(--main-color);
  border-radius: calc(20em/16) calc(20em/16) 0 0;
  pointer-events: auto;
  &::before,
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: calc(10em/16);
    height: calc(9em/16);
    background-image: url('/image/feature/fx/beginner/common/pagetop-fuchi-2x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  &::before {
    right: calc(-9em/16);
  }
  &::after {
    left: calc(-9em/16);
    transform: scaleX(-1);
  }
  @media screen and (max-width: 880px) {
    align-items: flex-start;
    margin: 0 auto;
    width: calc(250em/16);
    height: calc(30em/16);
    border-radius: calc(25em/16) calc(25em/16) 0 0;
    &::before,
    &::after {
      width: calc(9em/16);
    }
  }
}
.c-pagetop__targetTxt {
  margin-right: calc(19em/18);
  font-size: calc(18em/16);
  text-transform: uppercase;
  @media screen and (max-width: 880px) {
    margin: calc(16em/16) auto 0;
    font-size: calc(16em/16);
  }
}
.c-pagetop__targetArrow {
  position: absolute;
  top: calc(26em/16);
  right: calc(20em/16);
  width: calc(18em/16);
  height: calc(4em/16);
  overflow: visible;
  @media screen and (max-width: 880px) {
    width: calc(18em/16);
    /* height: calc(4em/16); */
  }
}
.c-pagetop__targetArrowTop {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(13em/16);
  height: calc(18em/16);
  background-image: url('/image/feature/fx/beginner/common/pagetop-arrow-2x.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  @media screen and (max-width: 880px) {
    width: calc(12em/16);
    height: calc(15em/16);
  }
}
.c-pagetop__targetArrowBottom {
  width: calc(14em/16);
  height: 100%;
  background-color: #f6e314;
}
@media (any-hover: hover) {
  .c-pagetop__target {
    transform-origin: top center;
    transition: padding-bottom var(--transition), height var(--transition);
    &:is(:hover, :focus-visible) {
      height: calc(55em/16);
      padding-bottom: calc(10em/16);
    }
  }
  .c-pagetop__targetArrowTop {
    .c-pagetop__target:is(:hover, :focus-visible) & {
      animation-name: arrow_move_vt;
      animation-duration: .6s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }
  }
  @keyframes arrow_move_vt {
    0% {
      transform: translateY(calc(0em/16));
    }
    25% {
      transform: translateY(calc(0em/16));
    }
    25.1% {
      transform: translateY(calc(-1em/16));
    }
    50% {
      transform: translateY(calc(-1em/16));
    }
    50.1% {
      transform: translateY(calc(-2em/16));
    }
    75% {
      transform: translateY(calc(-2em/16));
    }
    75.1% {
      transform: translateY(calc(-3em/16));
    }
    100% {
      transform: translateY(calc(-3em/16));
    }
  }
}

.c-crumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(14em/16);
  @media screen and (max-width: 880px) {
    &.is-spcolumn {
      flex-direction: column;
      gap: calc(8em/16);
    }
  }
}
.c-crumb__item {
  &:not(:last-child) {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    &::after {
      content: '»';
      margin-left: calc(14em/20);
      font-size: calc(20em/16);
    }
    @media screen and (max-width: 880px) {
      &::after {
        content: '»';
        margin-left: calc(14em/18);
        font-size: calc(18em/16);
      }
    }
  }
}
.c-crumb__itemTarget {
  display: block;
  font-size: calc(14em/16);
  letter-spacing: 0.05em;
  @media screen and (max-width: 880px) {
    font-size: calc(12em/16);
  }
}
.c-crumb__itemLabel {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(8em/14) calc(14em/14);
  font-size: calc(14em/16);
  letter-spacing: 0.05em;
  background-color: #fede01;
  border-radius: calc(5em/14);
  overflow: hidden;
  :where(.c-crumb.is-white) & {
    background-color: #fff;
  }
  @media screen and (max-width: 880px) {
    padding: calc(7em/12) calc(10em/12);
    font-size: calc(12em/16);
    border-radius: calc(5em/12);
  }
}

.c-subtitle {
  --base-fontsize: 16;
  --title-pc-fontsize: 26;
  --title-sp-fontsize: 17;
  font-size: calc(var(--title-pc-fontsize) * 1em / var(--base-fontsize));
  letter-spacing: 0.04em;
  @media screen and (max-width: 880px) {
    font-size: calc(var(--title-sp-fontsize) * 1em / var(--base-fontsize));
  }
  & span {
    opacity: 0;
    display: inline-block;
    @media (scripting: none) {
      opacity: 1;
    }
  }
}

.c-checklist {
  --list-gap: 20;
  --item-bg: var(--gray-bg);
  --item-br: 15;
  --item-pt: 18;
  --item-pr: 68;
  --item-pb: 18;
  --item-pl: 68;
  --item-icon-width: 37;
  --item-icon-height: 34;
  --item-gap: 28;
  --item-txt-fontsize: 22;
  --item-block-title-fontsize: 26;
  --item-block-title-mb: 13;
  --item-block-txt-fontsize: 16;
  display: flex;
  flex-direction: column;
  gap: calc(var(--list-gap) * 1em/16);
  letter-spacing: -.01em;
  @media screen and (max-width: 880px) {
    --list-gap: 15;
    --item-br: 7;
    --item-pt: 14;
    --item-pr: 20;
    --item-pb: 14;
    --item-pl: 20;
    --item-icon-width: 37*.5;
    --item-icon-height: 34*.5;
    --item-gap: 17;
    --item-txt-fontsize: 14;
    --item-block-title-fontsize: 16;
    --item-block-title-mb: 10;
    --item-block-txt-fontsize: 14;
  }
  &.is-yellow {
    --item-bg: var(--yellow-color02);
  }
}
.c-checklist__item {
  filter: drop-shadow(0px calc(6em/16) 0px rgb(0 0 0 /.25));
  will-change: filter;
  padding: calc(var(--item-pt) * 1em/16) calc(var(--item-pr) * 1em/16) calc(var(--item-pb) * 1em/16) calc(var(--item-pl) * 1em/16);
  display: flex;
  gap: calc(var(--item-gap) * 1em/16);
  background-color: var(--item-bg);
  border-radius: calc(var(--item-br) * 1em/16);
  @media screen and (max-width: 880px) {
    filter: drop-shadow(0px calc(3em/16) 0px rgb(0 0 0 /.25));
  }
}
.c-checklist__itemIcon {
  width: calc(var(--item-icon-width) * 1em/16);
  height: calc(var(--item-icon-height) * 1em/16);
  flex-shrink: 0;
}
.c-checklist__itemTxt {
  font-size: calc(var(--item-txt-fontsize) * 1em/16);
  margin-top: calc(1em/16);
  line-height: 1.4;
  @media screen and (max-width: 880px) {
    margin-top: calc(-1em/16);
  }
}
.c-checklist__itemBlock {
  margin-left: calc(-3em/16);
}
.c-checklist__itemBlockTitle {
  font-size: calc(var(--item-block-title-fontsize) * 1em/16);
  line-height: 1.4;
  margin-bottom: calc(var(--item-block-title-mb) * 1em / var(--item-block-title-fontsize));
  margin-top: calc(-2em / var(--item-block-title-fontsize));
}
.c-checklist__itemBlockTxt {
  font-size: calc(var(--item-block-txt-fontsize) * 1em/16);
  line-height: 1.7;
  @media screen and (max-width: 880px) {
    line-height: 1.5;
  }
  & .caution {
    font-size: calc(14em/16);
  }
  & a {
    text-decoration: underline;
  }
}

.c-stepupblock {
  --stepup-pt: 80;
  --stepup-pb: 80;
  --stepup-label-r: 112;
  --stepup-label-fs01: 14;
  --stepup-label-fs02: 50;
  --stepup-subtitle-fs: 17;
  --stepup-title-fs: 44;
  position: relative;
  @media screen and (max-width: 880px) {
    --stepup-pt: 87;
    --stepup-pb: 48;
    --stepup-label-r: 80;
    --stepup-label-fs01: 10;
    --stepup-label-fs02: 36;
    --stepup-subtitle-fs: 13;
    --stepup-title-fs: 27;
  }
}
.c-stepupblock-inner {
  position: relative;
  z-index: 1;
  display: block;
  padding: calc(var(--stepup-pt)*1em/16) 0 calc(var(--stepup-pb)*1em/16);
  width: 100%;
  height: 100%;
  border-radius: calc(10em/16);
  overflow: hidden;
  transition: translate .4s var(--ease-out-quad);
  &::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;
  }
  .p-top__lessonMainSlider & {
    translate: 0 0;
  }
  .p-top__lessonMainSlider .c-stepupblock.is-active & {
    translate: 0 calc(40em/16);
    @media screen and (max-width: 880px) {
      border-radius: calc(5em/16);
      translate: 0 calc(25/400*100%);
      &::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;
    }
  }
}
.c-stepupblock__headLabel {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--stepup-label-r) * 1em/16);
  height: calc(var(--stepup-label-r) * 1em/16);
  color: #fff;
  background: linear-gradient(to bottom, #ffa601, var(--grad-color02-02));
  border-radius: 0 100vmax 100vmax 100vmax;
}
.c-stepupblock__headLabelLine {
  &:nth-child(1) {
    font-size: calc(var(--stepup-label-fs01)*1em/16);
    letter-spacing: 0.03em;
  }
  &:nth-child(2) {
    font-size: calc(var(--stepup-label-fs02)*1em/16);
    letter-spacing: 0.05em;
  }
}
.c-stepupblock__headSubtitle {
  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);
  }
}
.c-stepupblock__headSubtitleTxt {
  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;
  }
  & .body {
    position: relative;
    z-index: 1;
    font-size: calc(var(--stepup-subtitle-fs) * 1em/16);
    letter-spacing: 0.05em;
    color: #fff;
  }
}
.c-stepupblock__headTitle {
  margin: calc(18em/var(--stepup-title-fs)) auto 0;
  text-align: center;
  line-height: 1.2;
  font-size: calc(var(--stepup-title-fs) * 1em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(15em/var(--stepup-title-fs));
    width: calc(325/345*100%);
  }
}
.c-stepupblock__level {
  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);
    }
  }
}
.c-stepupblock__levelList {
  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);
  }
}
.c-stepupblock__levelListTitle {
  font-size: calc(15em/16);
  letter-spacing: 0.06em;
  @media screen and (max-width: 880px) {
    margin-bottom: 0.15em;
  }
}
.c-stepupblock__levelListBody {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(9em/16);
  & .img {
    width: calc(20em/16);
    @media screen and (max-width: 880px) {
      width: calc(18em/16);
    }
    .c-stepupblock__levelListBody.is-01 & {
      &:nth-of-type(n+2) {
        opacity: .4;
      }
    }
    .c-stepupblock__levelListBody.is-02 & {
      &:nth-of-type(n+3) {
        opacity: .4;
      }
    }
    .c-stepupblock__levelListBody.is-03 & {
      &:nth-of-type(n+4) {
        opacity: .4;
      }
    }
    .c-stepupblock__levelListBody.is-04 & {
      &:nth-of-type(n+5) {
        opacity: .4;
      }
    }
  }
}
.c-stepupblock__body {
  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;
    text-align: justify;
    line-height: 1.7;
    font-size: calc(15em/16);
  }
}
.c-stepupblock__detail {
  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) {
    .c-stepupblock-inner:is(:hover, :focus-visible) & {
      opacity: 1;
    }
  }
}
.c-stepupblock__detailIcon {
  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);
  }
}