@charset "utf-8";

.p-profit__topics02 {
  margin-top: calc(40em/16);
  position: relative;
  z-index: 1;
  @media screen and (max-width: 880px) {
    overflow: hidden;
  }
}
.p-profit__topics02MainBody {
  --section-body-pb: 175;
  @media screen and (max-width: 880px) {
    --section-body-pb: 75;
  }
  & .title {
    --topicstitle-main-em-fs: 34;
    @media screen and (max-width: 880px) {
      --topicstitle-main-em-fs: 24;
    }
  }
  & .txt01 {
    line-height: 1.8;
    font-size: calc(18em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(16em/16);
      letter-spacing: 0.044em;
    }
  }
  & .block {
    margin-top: calc(80em/16);
    @media screen and (max-width: 880px) {
      margin-top: calc(36em/16);
      &:first-of-type {
        margin-top: calc(40em/16);
      }
    }
  }
}
.p-profit__topics02List01 {
  margin: calc(100em/16) auto 0;
  @media screen and (max-width: 880px) {
    margin: calc(50em/16) auto 0;
  }
}
.p-profit__topics02List01Body {
  margin-inline: auto;
  width: calc(1100/var(--section-width)*100%);
  @media screen and (max-width: 880px) {
    width: 100%;
  }
}
.p-profit__topics02Case {
  margin-top: calc(100em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(48em/16);
  }
}
.p-profit__topics02CaseBody {
  position: relative;
  margin-inline: auto;
  padding: calc(100em/16) 0 calc(128em/16);
  width: calc(1100/var(--section-width)*100%);
  background-color: #fff;
  border-radius: calc(12em/16);
  overflow: hidden;
  box-shadow: 0 calc(12em/16) 0 0 #828281;
  @media screen and (max-width: 880px) {
    padding: calc(29em/16) 0 calc(50em/16);
    width: 100%;
    border-radius: calc(8em/16);
    box-shadow: 0 calc(8em/16) 0 0 #828281;
  }
  & .title {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10em/16);
    width: calc(128em/16);
    height: calc(127em/16);
    color: #fff;
    background: linear-gradient(to right, var(--grad-color02-01), var(--grad-color02-02));
    border-radius: 0 0 calc(36em/16) 0;
    overflow: hidden;
    @media screen and (max-width: 880px) {
      gap: calc(6em/16);
      width: calc(78em/16);
      height: calc(78em/16);
      border-radius: 0 0 calc(22em/16) 0;
    }
  }
  & .title__jp {
    font-size: calc(30em/16);
    letter-spacing: 0.05em;
    @media screen and (max-width: 880px) {
      font-size: calc(18em/16);
    }
  }
  /* & .title__jp {
    letter-spacing: 0.1em;
    @media screen and (max-width: 880px) {
      font-size: calc(10em/16);
    }
  }
  & .title__en {
    font-size: calc(56em/16);
    letter-spacing: 0.05em;
    @media screen and (max-width: 880px) {
      font-size: calc(35em/16);
    }
  } */
}
.p-profit__topics02CaseBody-inner {
  margin-inline: auto;
  width: calc(710/900*100%);
  @media screen and (max-width: 880px) {
    width: calc(340/360*100%);
  }
  & .list {
    margin-top: calc(78em/16);
    border: 2px solid;
    @media screen and (max-width: 880px) {
      margin-top: calc(35em/16);
      border: calc(2em/16) solid;
    }
  }
  & .list__item {
    display: flex;
    &:not(:first-child) {
      border-top: 2px solid;
      @media screen and (max-width: 880px) {
        border-top: calc(2em/16) solid;
      }
    }
  }
  & .list__itemTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(20em/20) 0;
    width: calc(193em/20);
    text-align: center;
    line-height: 1.4;
    font-size: calc(20em/16);
    letter-spacing: 0.1em;
    background-color: #c8c9ca;
    border-right: 2px solid;
    .p-profit__topics02CaseBody .list__item:last-child & {
      background-color: var(--yellow-color);
    }
    @media screen and (max-width: 880px) {
      padding: calc(16em/15) 0;
      width: calc(90em/15);
      font-size: calc(15em/16);
      word-break: keep-all;
      border-right: calc(2em/15) solid;
    }
  }
  & .list__itemBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: calc(16em/18) calc(28em/18);
    line-height: 1.4;
    font-size: calc(18em/16);
    letter-spacing: 0.05em;
    .p-profit__topics02CaseBody-inner .list__item:nth-of-type(4) & {
      padding: calc(12em/18) calc(28em/18);
    }
    @media screen and (max-width: 880px) {
      padding: calc(12em/15) calc(4em/15) calc(12em/15) calc(8em/15);
      font-size: calc(15em/16);
      .p-profit__topics02CaseBody-inner .list__item:nth-of-type(4) & {
        padding: calc(12em/15) calc(4em/15) calc(12em/15) calc(8em/15);
      }
    }
  }
  & .list__itemBodyRow {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    @media screen and (max-width: 880px) {
      gap: calc(6em/15);
    }
  }
  & .list__itemBodyRowLine {
    display: flex;
    align-items: flex-end;
    gap: calc(7em/18);
  }
  & .list__itemBodyRowLineEm {
    line-height: 1;
    font-size: calc(24em/18);
    .p-profit__topics02CaseBody-inner .list__item:nth-of-type(4) & {
      margin-left: calc(5em/24);
      padding: calc(2em/24) calc(10em/24);
      background: var(--yellow-color);
    }
    @media screen and (max-width: 880px) {
      .p-profit__topics02CaseBody-inner .list__item:nth-of-type(4) & {
        margin-left: 0;
      }
    }
    & .num {
      font-size: calc(32em/24);
    }
  }
  & .caution {
    padding-left: 1.06em;
    margin-top: calc(24em/15);
    line-height: 1.6;
    font-size: calc(15em/16);
    letter-spacing: 0.06em;
    text-indent: -1.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(13em/16);
    }
  }
}
.p-profit__topics02List02 {
  margin: calc(90em/16) auto 0;
  @media screen and (max-width: 880px) {
    margin: calc(50em/16) auto 0;
  }
}
.p-profit__topics02List02Body {
  margin-inline: auto;
  width: calc(1100/var(--section-width)*100%);
  @media screen and (max-width: 880px) {
    width: 100%;
  }
}