@charset "utf-8";

.p-firststepdtl__link {
  --pt: 150;
  --pb: 144;
  position: relative;
  z-index: 1;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  overflow: hidden;
  @media screen and (max-width: 880px) {
    --pt: 75;
    --pb: 90;
  }
}
.p-firststepdtl__linkHead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30em/16);
  color: #fff;
  @media screen and (max-width: 880px) {
    gap: calc(15em/16);
  }
}
.p-firststepdtl__linkHeadSub {
  font-size: calc(34em/16);
  letter-spacing: 0.04em;
  @media screen and (max-width: 880px) {
    font-size: calc(22em/16);
  }
}
.p-firststepdtl__linkHeadMain {
  width: calc(474em/16);
  @media screen and (max-width: 880px) {
    width: calc(296em/16);
  }
}
.p-firststepdtl__linkImg {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  gap: calc(753em/16);
  margin-top: calc(-134em/16);
  @media screen and (max-width: 1150px) {
    gap: calc(753em/16*.8);
  }
  @media screen and (max-width: 1024px) {
    margin-top: calc(248em/16*1.25);
    gap: calc(104em/16);
  }
  @media screen and (max-width: 1024px) {
    margin-top: calc(124em/16);
    gap: calc(52em/16);
  }
}
.p-firststepdtl__linkImgRight {
  position: relative;
  & .fukidashi {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    margin: calc(-245/201*100%) calc(-162/201*100%) auto auto;
    width: calc(373/201*100%);
    @media screen and (max-width: 880px) {
      margin: calc(-140/119*100%) calc(-63/119*100%) auto auto;
      width: calc(214/119*100%);
    }
  }
  & .img {
    position: relative;
    z-index: 2;
    width: calc(201em/16);
    @media screen and (max-width: 880px) {
      width: calc(119em/16);
    }
  }
}
.p-firststepdtl__linkImgLeft {
  position: relative;
  margin-top: calc(4em/16);
  margin-left: calc(20/var(--section-width)*100%);
  @media screen and (max-width: 880px) {
    margin-top: calc(2/360*100%);
    margin-left: calc(5/360*100%);
  }
  & .fukidashi {
    position: absolute;
    top: 0;
    nav-left: 0;
    z-index: 1;
    margin: calc(-94/166*100%) auto auto calc(-110/166*100%);
    width: calc(193/166*100%);
    @media screen and (max-width: 880px) {
      margin: calc(-64/93*100%) auto auto calc(-22/93*100%);
      width: calc(110/93*100%);
    }
  }
  & .img {
    position: relative;
    z-index: 2;
    width: calc(166em/16);
    @media screen and (max-width: 880px) {
      width: calc(93em/16);
    }
  }
}
.p-firststepdtl__linkMain {
  position: relative;
  z-index: 2;
  margin-top: calc(-145em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(-70em/16);
  }
}
.p-firststepdtl__linkMain-inner {
  position: relative;
  margin-inline: auto;
  width: calc(880em/16);
  height: auto;
  @media screen and (max-width: 1024px) {
    width: calc(700em/16);
  }
  @media screen and (max-width: 880px) {
    width: calc(350em/16);
  }
}
.p-firststepdtl__linkMainTrack {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  & .list__item {
    --img-w: 1;
    --img-bottom: -10;
    --img-left: 0;
    margin-right: calc(20/880*100%);
    &.is-about {
      --img-w: 295;
      --img-left: 44;
    }
    &.is-system {
      --img-w: 297;
      --img-left: 44;
    }
    &.is-tips {
      --img-w: 301;
      --img-left: 40;
    }
    &.is-prosandcons {
      --img-w: 301;
      --img-left: 40;
    }
    &.is-profit {
      --img-w: 297;
      --img-left: 44;
    }
    &.is-stepup {
      --img-w: 380;
      --img-bottom: -2;
      --img-left: 0;
    }
    &.is-casestudy {
      --img-w: 374;
      --img-bottom: -9;
      --img-left: 29;
    }
    @media screen and (max-width: 880px) {
      margin-right: calc(10/350*100%);
      &.is-prosandcons {
        --img-w: 271;
      }
      &.is-profit {
        --img-w: 267;
      }
      &.is-stepup {
        --img-bottom: -21;
      }
      &.is-casestudy {
        --img-w: 337;
      }
    }
  }
  & .list__itemTarget {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(40/880*100%);
    padding: calc(20/880*100%);
    height: 100%;
    background-color: #fff;
    border-radius: calc(50em/16);
    box-shadow: 0 calc(6em/16) 0 0 rgb(0 0 0/.1);
    /* overflow: visible; */
    overflow: hidden;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      gap: calc(40em/16);
      padding: calc(10em/16) calc(10/350*100%) calc(40em/16);
      /* height: auto; */
    }
  }
  & .list__itemTargetImg {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    width: calc(380/840*100%);
    height: auto;
    aspect-ratio: 380/260;
    overflow: visible;
    .p-firststepdtl__linkMainTrack .list__item.is-stepup & {
      border-radius: calc(40em/16);
      overflow: hidden;
    }
    @media screen and (max-width: 1024px) {
      width: 100%;
      aspect-ratio: 330/200;
    }
  }
  & .list__itemTargetImgBody {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto auto calc(var(--img-bottom)/380*100%) calc(var(--img-left)/380*100%);
    z-index: 2;
    width: calc(var(--img-w)/380*100%);
    @media screen and (max-width: 1024px) {
      width: calc(var(--img-w)/330*87.5%);
      margin: auto auto calc(var(--img-bottom)/330*100%) calc(var(--img-left)/330*110%);
    }
  }
  & .list__itemTargetImgBg {
    --graphbg-w: 35;
    --graphbg-h: 36;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: calc(40em/16);
    overflow: hidden;
    .p-firststepdtl__linkMainTrack .list__item:is(.is-stepup, .is-casestudy) & {
      background: linear-gradient(to bottom, var(--grad-color02-01), #f84111);
    }
  }
  & .list__itemTargetBody {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(360/840*100%);
    height: 100%;
    text-align: left;
    @media screen and (max-width: 1024px) {
      flex: 1;
      justify-content: flex-start;
      align-items: center;
      width: calc(270/330*100%);
      height: auto;
    }
  }
  & .list__itemTargetBodyTitle {
    margin-right: -1.5em;
    line-height: 1.2;
    font-size: calc(35em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      margin: 0 -1em;
      font-size: calc(22em/16);
    }
  }
  & .list__itemTargetBodyTxt {
    margin-top: calc(20em/16);
    text-align: justify;
    line-height: 1.8;
    letter-spacing: 0.06em;
    @media screen and (max-width: 1024px) {
      width: 100%;
    }
    @media screen and (max-width: 880px) {
      margin-top: calc(18em/14);
      font-size: calc(14em/16);
    }
  }
  & .list__itemTargetArrow {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto calc(10/880*100%) calc(10/880*100%) auto;
    width: calc(80em/16);
    height: calc(80em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: calc(60em/16) calc(5em/16) calc(40em/16) calc(5em/16);
    overflow: hidden;
    @media screen and (max-width: 1024px) {
      display: none;
    }
  }
  & .list__itemTargetArrowBody {
    margin: calc(6/80*100%) 0 0 calc(4/80*100%);
    width: calc(26/80*100%);
    filter: drop-shadow(calc(2em/16) calc(2em/16) 0 #d88d00);
    @media screen and (max-width: 880px) {
      filter: drop-shadow(calc(1em/16) calc(1em/16) 0 #d88d00);
    }
  }
}
@media (any-hover: hover) {
  .p-firststepdtl__linkMainTrack .list__itemTarget {
    transition: translate var(--transition), box-shadow var(--transition);
    &:is(:hover, :focus-visible) {
      translate: 0 calc(6em/16);
      box-shadow: 0 0 0 0 rgb(0 0 0/.1);
    }
  }
  .p-firststepdtl__linkMainTrack .list__itemTargetArrow {
    opacity: 0;
    transition: opacity var(--transition);
    .p-firststepdtl__linkMainTrack .list__itemTarget:is(:hover, :focus-visible) & {
      opacity: 1;
    }
  }
  .p-firststepdtl__linkMainTrack .list__itemTargetArrowBody {
    transition: filter var(--transition);
    .p-firststepdtl__linkMainTrack .list__itemTarget:is(:hover, :focus-visible) & {
      filter: drop-shadow(calc(0em/16) calc(0em/16) 0 #d88d00);
    }
  }
}
.p-firststepdtl__linkMainArrows {
  & .body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(92em/16);
    height: calc(92em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border: calc(6em/16) solid #fff;
    border-radius: 100vmax;
    overflow: hidden;
    &.is-prev {
      left: calc(-46em/16);
      opacity: 1;
    }
    &.is-next {
      right: calc(-46em/16);
      opacity: 1;
    }
    @media screen and (max-width: 880px) {
      width: calc(56em/16);
      height: calc(56em/16);
      border: calc(3em/16) solid #fff;
      &.is-prev {
        left: calc(-28em/16);
      }
      &.is-next {
        right: calc(-28em/16);
      }
    }
  }
  & .body__img {
    width: calc(28/80*100%);
    filter: drop-shadow(calc(2em/16) calc(2em/16) 0 #a13600);
  }
}
@media (any-hover: hover) {
  .p-firststepdtl__linkMainArrows .body__img {
    transition: filter var(--transition);
    .p-firststepdtl__linkMainArrows .body:is(:hover, :focus-visible) & {
      filter: drop-shadow(calc(0em/16) calc(0em/16) 0 #a13600);
    }
  }
}
.p-firststepdtl__linkBg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #ceb400;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(to bottom, var(--main-color), var(--main-color) 25%, transparent 25%, transparent);
    background-size: 1px 4px;
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    opacity: 0.2;
  }
}
.p-firststepdtl__linkBgImg {
  padding-bottom: calc(82/1400*100%);
  width: calc(1160/1400*100%);
  filter: blur(calc(18em/16));
}