@charset "utf-8";

.p-prosandcons__topics02 {
  --mt: 0;
  --pt: 100;
  --pb: 180;
  margin-top: calc(var(--mt) * 1em/16);
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background-color: var(--gray-bg);
  @media screen and (max-width: 880px) {
    --mt: 0;
    --pt: 64;
    --pb: 140;
  }
}
.p-prosandcons__topics02Title {
  --topicstitle-mb: 86;
  --topicstitle-main-em-fs: 54;
  --topicstitle-main-em-ls: .12;
  @media screen and (max-width: 880px) {
    --topicstitle-mb: 157;
    --topicstitle-main-em-fs: 37;
  }
}
.p-prosandcons__topics02Main {
  display: flex;
  flex-direction: column;
  gap: calc(108em/16);
  margin-left: auto;
  margin-right: 0;
  width: calc(1100/var(--section-width)*100%);
  @media screen and (max-width: 880px) {
    gap: calc(137em/16);
    width: 100%;
  }
}
.p-prosandcons__topics02MainBlock {
  position: relative;
  padding: calc(80em/16) calc(72/1100*100%) calc(46em/16);
  background-color: #fff;
  border-radius: calc(8em/16);
  box-shadow: 0 calc(8em/16) 0 0 #828282;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border: calc(10em/16) solid var(--yellow-color);
    border-radius: calc(8em/16);
    overflow: hidden;
    pointer-events: none;
  }
  @media screen and (max-width: 880px) {
    padding: calc(68em/16) calc(30/360*100%) calc(46em/16);
    border-radius: calc(6em/16);
    box-shadow: 0 calc(6em/16) 0 0 #828282;
    &::before {
      border-width: calc(7em/16);
      border-radius: calc(6em/16);
    }
  }
  & .title {
    margin-bottom: calc(50em/16);
    @media screen and (max-width: 880px) {
      margin-bottom: calc(36em/16);
    }
  }
  & .title__sub {
    position: absolute;
    top: calc(-80em/16);
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(4em/16);
    margin-left: calc(42/1100*100%);
    padding-bottom: calc(4em/16);
    width: calc(164em/16);
    height: calc(166em/16);
    background: url('/image/feature/fx/beginner/firststep/pros-and-cons/topics02-fukidashi-2x.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    @media screen and (max-width: 880px) {
      top: calc(-117em/16);
      right: 0;
      margin: 0 calc(65/360*100%) 0 auto;
      width: calc(117em/16);
      height: calc(118em/16);
    }
  }
  & .title__subTxt {
    letter-spacing: 0.1em;
    @media screen and (max-width: 880px) {
      font-size: calc(12em/16);
    }
  }
  & .title__subNum {
    font-size: calc(56em/16);
    letter-spacing: 0.05em;
    @media screen and (max-width: 880px) {
      font-size: calc(40em/16);
    }
  }
  & .title__main {
    padding: 0 calc(80/1056*100%) 0 calc(60/1056*100%);
    text-align: center;
    line-height: 1.3;
    font-size: calc(40em/16);
    letter-spacing: 0.08em;
    word-break: keep-all;
    @media screen and (max-width: 880px) {
      padding: 0;
      font-size: calc(27em/16);
    }
  }
  & .img {
    position: absolute;
    top: calc(-28em/16);
    left: 0;
    z-index: 2;
    margin-left: calc(-100/1100*100%);
    width: min(calc(230em/16), calc(230/1100*100%));
    @media screen and (max-width: 880px) {
      top: calc(-78em/16);
      left: auto;
      right: 0;
      margin-right: calc(120/360*100%);
      width: calc(163em/16);
    }
  }
  & .txt {
    text-align: justify;
    line-height: 1.8;
    letter-spacing: 0.1em;
    @media screen and (max-width: 880px) {
      line-height: 1.6;
      font-size: calc(14em/16);
    }
  }
}