@charset "utf-8";

.p-trademethod__step {
  --pt: 120;
  --pb: 120;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  @media screen and (max-width: 1024px) {
    overflow-x: clip;
    overflow-y: auto;
  }
  @media screen and (max-width: 880px) {
    --pt: 68;
    --pb: 54;
  }
}
.p-trademethod__stepHead {
  --mb: 90;
  margin-bottom: calc(var(--mb) * 1em/16);
  @media screen and (max-width: 880px) {
    --mb: 30;
  }
}
.p-trademethod__stepHeadTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22em/16);
  @media screen and (max-width: 880px) {
    gap: calc(14em/16);
  }
  & .main {
    font-size: calc(50em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(38em/16);
    }
  }
  & .sub {
    padding: calc(8em/20) calc(16em/20);
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    background-color: var(--yellow-color02);
    border-radius: calc(5em/20);
    .p-trademethod__stepHeadTitle.is-labelblack & {
      color: #fff;
      background: var(--main-color);
    }
    @media screen and (max-width: 880px) {
      padding: calc(8em/15) calc(16em/15);
      font-size: calc(15em/16);
      border-radius: calc(5em/15);
    }
  }
}
.p-trademethod__stepHeadTxt {
  --sentence-fs-max: 18;
  --sentence-fs-min: 16;
  --sentence-line-height: 1.8;
  --sentence-letter-spacing: .06;
  margin: calc(72em / var(--sentence-fs-max)) auto 0;
  width: calc(900/var(--section-width)*100%);
  text-align: justify;
  @media screen and (max-width: 880px) {
    margin: calc(30em / var(--sentence-fs-min)) auto 0;
    width: calc(320/360*100%);
  }
}
.p-trademethod__stepHeadSplink {
  display: none;
  @media screen and (max-width: 880px) {
    display: block;
    margin-top: calc(36em/16);
  }
  & .txt {
    text-align: center;
    font-size: calc(22em/16);
    letter-spacing: 0.06em;
  }
  & .list {
    display: flex;
    justify-content: center;
    gap: calc(12em/16);
    margin-top: calc(14em/16);
  }
  & .list__item {
    width: 100%;
    & .c-btn {
      --btn-w: 174;
      --btn-h: 54;
      --btn-outer-border-w: 2.5;
      --btn-inner-border-w: 2.5;
      --btn-shadow-position-x: 1;
      --btn-shadow-position-y: 1;
      --btn-fs-max: 28;
      --btn-fs-min: 14;
      --btn-ls: .05;
      --btn-icon-w: 16;
      .p-trademethod__stepHeadSplink .list__item:nth-child(1) & {
        --btn-gap: 20;
      }
      .p-trademethod__stepHeadSplink .list__item:nth-child(2) & {
        --btn-gap: 8;
      }
    }
    & .c-btn__bodyTxt {
      .p-trademethod__stepHeadSplink .list__item:nth-child(1) & {
        padding-right: calc(30em/var(--btn-fs-min));
      }
      .p-trademethod__stepHeadSplink .list__item:nth-child(2) & {
        padding-right: calc(9em/var(--btn-fs-min));
      }
    }
  }
}
.p-trademethod__stepHeadConversation {
  margin: calc(64em/16) auto calc(100em/16);
  width: min(calc(900em/16), 100%);
  @media screen and (max-width: 1024px) {
    margin: calc(64em/16) auto calc(84em/16);
  }
  @media screen and (max-width: 880px) {
    margin: calc(25em/16) auto;
  }
  & .cm-conversation__item {
    width: 100%;
  }
  & .cm-conversation__itemTitleImg {
    top: calc(-18em/16);
  }
  & .cm-conversation__itemBody.is-left {
    --conversation-body-background-color: var(--yellow-color02);
  }
}
.p-trademethod__stepBody {
  & + & {
    margin-top: calc(20em/16);
    @media screen and (max-width: 880px) {
      margin-top: calc(14em/16);
    }
  }
}
.p-trademethod__stepBodyBlock {
  --section-body-width: 900;
  --section-body-pt: 100;
  --section-body-pb: 100;
  --section-body-width-sp: 320;
  @media screen and (max-width: 880px) {
    --section-body-pt: 70;
    --section-body-pb: 50;
  }
  & .title {
    --topicstitle-mb: 0;
    --topicstitle-main-fs: 36;
    --topicstitle-main-em-fs: 36;
    @media screen and (max-width: 880px) {
      --topicstitle-main-fs: 32;
      --topicstitle-main-em-fs: 32;
    }
  }
  & .category {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(10em/16);
    margin: calc(28em/16) auto calc(24em/16);
    @media screen and (max-width: 880px) {
      gap: calc(8em/16);
      margin: calc(20em/16) auto calc(24em/16);
    }
  }
  & .category__item {
    --color: #fff;
    --bg-color: var(--main-color);
    --fs: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc(16em/16);
    height: calc(30em/16);
    color: var(--color);
    background-color: var(--bg-color);
    border-radius: calc(5em/16);
    &.is-beginner {
      --color: var(--main-color);
      --bg-color: var(--yellow-color02);
      --fs: 17;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: calc(9em/16);
      padding: 0 calc(12em/16);
    }
    &.is-new,
    &.is-pay {
      --fs: 17;
      padding: 0 calc(42em/16);
    }
    &.is-new {
      --bg-color: #00aeff;
    }
    &.is-pay {
      --bg-color: #ff4701;
    }
    @media screen and (max-width: 880px) {
      --fs: 15;
      padding: 0 calc(12em/16);
      height: calc(25em/16);
      &.is-beginner {
        --fs: 14;
        padding: 0 calc(11em/16);
      }
      &.is-new,
      &.is-pay {
        --fs: 14;
        padding: 0 calc(32em/16);
      }
    }
  }
  & .category__itemIcon {
    width: calc(14em/16);
    @media screen and (max-width: 880px) {
      width: calc(12em/16);
    }
  }
  & .category__itemTxt {
    font-size: calc(var(--fs) * 1em/16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  & .body {
    margin-top: calc(64em/16);
    @media screen and (max-width: 880px) {
      margin-top: calc(45em/16);
    }
  }
  & .body__txt {
    --sentence-fs-max: 18;
    --sentence-fs-min: 16;
    --sentence-line-height: 1.8;
    --sentence-letter-spacing: .06;
    margin-top: calc(120em/var(--sentence-fs-max));
    text-align: justify;
    :where(.p-trademethod__stepBodyBlock .body > *)& {
      margin-top: 0;
    }
    @media screen and (max-width: 1024px) {
      --sentence-line-height: 1.6;
      margin-top: calc(84em/var(--sentence-fs-max));
    }
    @media screen and (max-width: 880px) {
      --sentence-line-height: 1.6;
      margin: calc(36em/var(--sentence-fs-min)) auto 0;
      width: 100%;
    }
  }
  & .body__conversation {
    margin: 0 auto calc(120em/16);
    width: min(calc(900em/16), 100%);
    @media screen and (max-width: 1024px) {
      margin: 0 auto calc(84em/16);
    }
    @media screen and (max-width: 880px) {
      margin: 0 auto calc(36em/16);
    }
    & .cm-conversation__item {
      width: 100%;
    }
    & .cm-conversation__itemTitleImg {
      top: calc(-18em/16);
    }
    & .cm-conversation__itemBody.is-left {
      --conversation-body-background-color: var(--yellow-color02);
    }
  }
}