@charset "utf-8";

.p-firststeplist__main {
  margin-top: calc(76em/16);
  margin-bottom: calc(100em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(38em/16);
    margin-bottom: calc(75em/16);
  }
}
.p-firststeplist__mainList {
  display: flex;
  flex-direction: column;
  gap: calc(20em/16);
}
.p-firststeplist__mainListBlock {
  --title-w: 0;
  --img-mt: 0;
  --img-ml: 0;
  --img-w: 0;
  &.is-about {
    --title-w: 249;
    --img-mt: 65;
    --img-ml: 90;
    --img-w: 148;
    @media screen and (max-width: 880px) {
      --img-mt: 31;
      --img-ml: 91;
      --img-w: 82;
    }
  }
  &.is-system {
    --title-w: 327;
    --img-mt: 89;
    --img-ml: 80;
    --img-w: 174;
    @media screen and (max-width: 880px) {
      --img-mt: 37;
      --img-ml: 88;
      --img-w: 99;
    }
  }
  &.is-tips {
    --title-w: 290;
    --img-mt: 58;
    --img-ml: 99;
    --img-w: 130;
    @media screen and (max-width: 880px) {
      --img-mt: 29;
      --img-ml: 98;
      --img-w: 70;
    }
  }
  &.is-pros {
    --title-w: 398;
    --img-mt: 56;
    --img-ml: 90;
    --img-w: 145;
    @media screen and (max-width: 880px) {
      --img-mt: 32;
      --img-ml: 94;
      --img-w: 74;
    }
  }
  &.is-profit {
    --title-w: 331;
    --img-mt: 51;
    --img-ml: 87;
    --img-w: 137;
    @media screen and (max-width: 880px) {
      --img-mt: 29;
      --img-ml: 94;
      --img-w: 73;
    }
  }
  & .target {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    border-radius: calc(10em/16);
    box-shadow: 0 calc(6em/16) 0 0 rgb(0 0 0/.1);
    overflow: hidden;
    @media screen and (max-width: 880px) {
      flex-direction: column;
      box-shadow: 0 calc(3em/16) 0 0 rgb(0 0 0/.1);
    }
  }
  & .target__body {
    flex: 1;
    padding: 0 calc(60/var(--section-width)*100%);
    @media screen and (max-width: 880px) {
      padding: 0 calc(30/360*100%);
    }
  }
  & .target__bodyTitle {
    display: flex;
    flex-direction: column-reverse;
    gap: calc(16em/16);
    margin-bottom: calc(32em/16);
    @media screen and (max-width: 880px) {
      align-items: center;
      gap: calc(8em/16);
      margin-bottom: calc(30em/16);
    }
  }
  & .target__bodyTitleMain {
    width: calc(var(--title-w) * 1em/16);
    @media screen and (max-width: 880px) {
      margin-inline: auto;
      width: calc(var(--title-w) * .68em/16);
    }
  }
  & .target__bodyTitleSub {
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      line-height: 1.2;
      font-size: calc(14em/16);
    }
  }
  & .target__bodyTxt {
    --sentence-fs-max: 16;
    --sentence-fs-min: 15;
    --sentence-line-height: 1.8;
    /* --sentence-letter-spacing: 0; */
    --sentence-letter-spacing: .06;
    text-align: justify;
    @media screen and (max-width: 880px) {
      & .u-spNone {
        display: none;
      }
    }
  }
  & .target__bodyList {
    display: flex;
    flex-wrap: wrap;
    gap: calc(10em/16);
    margin-top: calc(20em/16);
    margin-right: calc(50em/16);
    @media screen and (max-width: 880px) {
      gap: calc(10em/16) calc(5em/16);
      margin-top: calc(24em/16);
      /* margin-right: 0; */
      margin-right: calc(-15/330*100%);
    }
  }
  & .target__bodyListItem {
    @media screen and (max-width: 880px) {
      &:last-child {
        min-width: 60%; /* 右下矢印に被らないようにスペース広めにとる */
      }
    }
  }
  & .target__bodyListItemTxt {
    position: relative;
    z-index: 1;
    display: block;
    padding: calc(8em/14) calc(20em/14);
    font-size: calc(14em/16);
    letter-spacing: 0.06em;
    background-color: var(--yellow-color);
    border-radius: 100vmax;
    box-shadow: 0 calc(6em/14) 0 0 rgb(0 0 0/.1);
    @media screen and (max-width: 880px) {
      padding: calc(10em/12);
      font-size: calc(12em/16);
      box-shadow: 0 calc(3em/12) 0 0 rgb(0 0 0/.1);
      width: fit-content;
    }
  }
  & .target__label {
    position: absolute;
    top: calc(5em/16);
    left: calc(5em/16);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(2em/16);
    width: calc(112em/16);
    height: calc(112em/16);
    color: #fff;
    background: linear-gradient(to bottom, #fad126, #ff582c);
    border-radius: calc(5em/16) 50% 50% 50%;
    overflow: hidden;
    @media screen and (max-width: 880px) {
      width: calc(80em/16);
      height: calc(80em/16);
    }
  }
  & .target__labelTxt {
    font-size: calc(14em/16);
    letter-spacing: 0.03em;
    @media screen and (max-width: 880px) {
      font-size: calc(10em/16);
    }
  }
  & .target__labelNum {
    font-size: calc(50em/16);
    letter-spacing: 0.05em;
    @media screen and (max-width: 880px) {
      font-size: calc(36em/16);
    }
  }
  & .target__img {
    position: relative;
    flex-shrink: 0;
    margin: calc(20em/16) auto calc(20em/16) calc(20em/16);
    width: calc(380em/16);
    height: auto;
    aspect-ratio: 1/1;
    @media screen and (max-width: 880px) {
      order: -1;
      margin: calc(15em/16) calc(7.5/360*100%) calc(35em/16);
      width: calc(330/360*100%);
      aspect-ratio: 330/190;
    }
  }
  & .target__imgBody {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: calc(var(--img-mt)/380*100%) auto auto calc(var(--img-ml)/380*100%);
    width: calc(var(--img-w)/380*100%);
    @media screen and (max-width: 880px) {
      margin: calc(var(--img-mt)/330*100%) auto auto calc(var(--img-ml)/330*100%);
      width: calc(var(--img-w)/330*100%);
    }
  }
  & .target__imgFukidashi {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: calc(47/380*100%) calc(-23/380*100%) auto auto;
    width: calc(155/380*100%);
    @media screen and (max-width: 880px) {
      margin: calc(27/330*100%) calc(47/330*100%) auto auto;
      width: calc(103/330*100%);
    }
  }
  & .target__imgBg {
    --graphbg-w: 40;
    --graphbg-h: 41;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: var(--gray-bg);
    border-radius: calc(20em/16);
    overflow: hidden;
    &::before {
      z-index: 1;
    }
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
      opacity: 0;
    }
  }
  & .target__arrow {
    position: absolute;
    bottom: calc(10em/16);
    right: calc(10em/16);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(6em/16) 0 0 calc(4em/16);
    width: calc(90em/16);
    height: calc(90em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: calc(60em/16) calc(5em/16) calc(5em/16) calc(5em/16);
    @media screen and (max-width: 880px) {
      position: relative;
      bottom: 0;
      right: 0;
      margin: calc(-28em/16) calc(5em/16) calc(5em/16) auto;
      /* padding: calc(6em/16) 0 0 calc(4em/16); */
      width: calc(60em/16);
      height: calc(60em/16);
      border-radius: calc(40em/16) calc(5em/16) calc(5em/16) calc(5em/16);
    }
  }
  & .target__arrowBody {
    width: calc(26em/16);
    @media screen and (max-width: 880px) {
      width: calc(20em/16);
    }
  }
}

@media (any-hover: hover) {
  .p-firststeplist__mainListBlock {
    & .target {
      transition: box-shadow var(--transition), transform var(--transition);
      &:is(:hover, focus-visible) {
        transform: translate(0, calc(6em/16));
        box-shadow: 0 calc(0em/16) 0 0 rgb(0 0 0/.1);
      }
    }
    & .target__imgBg {
      &::after {
        transition: opacity var(--transition);
      }
      .p-firststeplist__mainListBlock .target:is(:hover, :focus-visible) &::after{
        opacity: 1;
      }
    }
  }
}