@charset "utf-8";

.p-casestudydtl__link {
  --pt: 100;
  --pb: 100;
  z-index: 2;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background-color: var(--yellow-color02);
  overflow: hidden;
  @media screen and (max-width: 880px) {
    --pt: 75;
    --pb: 88;
  }
}
.p-casestudydtl__linkTop {
  position: relative;
  z-index: 1;
}
.p-casestudydtl__linkTopHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  & .maintitle {
    margin: calc(28em/16) 0 calc(34em/16);
    width: calc(481em/16);
    @media screen and (max-width: 880px) {
      margin: calc(10em/16) 0 calc(22em/16);
      width: calc(269em/16);
    }
  }
  & .subtitle {
    order: -1;
    font-size: calc(34em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(20em/16);
    }
  }
  & .label {
    padding: calc(8em/20) calc(16em/20);
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--main-color);
    border-radius: calc(5em/20);
    @media screen and (max-width: 880px) {
      padding: calc(7em/15) calc(12em/15);
      font-size: calc(15em/16);
      border-radius: calc(3em/15);
    }
  }
}
.p-casestudydtl__linkTopImg {
  --mt: -154;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 880px) {
    --mt: -13;
  }
  & :is(.right, .left) {
    position: relative;
    display: flex;
  }
  & .right {
    margin-top: calc(5em/16);
    margin-right: calc(-80/var(--section-width)*100%);
    @media screen and (max-width: 880px) {
      margin-top: 0;
      margin-right: calc(-20/360*100%);
    }
  }
  & .left {
    margin-left: calc(-70/var(--section-width)*100%);
    @media screen and (max-width: 880px) {
      margin-left: calc(-10/360*100%);
    }
  }
  & :is(.right__img, .left__img) {
    --top: 0;
    --w: 1;
    top: calc(var(--top) * 1em/16);
    width: calc(var(--w) * 1em/16);
    @media screen and (max-width: 880px) {
      font-size: .5em;
    }
  }
  & .right__img {
    --right: 0;
    right: calc(var(--right) * 1em/16);
    &.is-hope {
      --top: 0;
      --right: 0;
      --w: 148;
      position: relative;
      z-index: 2;
    }
    &.is-fun {
      --top: 96;
      --right: 103;
      --w: 170;
      position: absolute;
      z-index: 1;
    }
    @media screen and (max-width: 880px) {
      &.is-hope {
        --top: 0;
        --right: 0;
        --w: 148;
      }
      &.is-fun {
        --top: 96;
        --right: 103;
        --w: 170;
      }
    }
  }
  & .left__img {
    --left: 0;
    left: calc(var(--left) * 1em/16);
    &.is-happy {
      --top: 0;
      --left: 0;
      --w: 130;
      position: relative;
      z-index: 1;
    }
    &.is-sad {
      --top: 75;
      --left: 93;
      --w: 87;
      position: absolute;
      z-index: 2;
    }
    &.is-worry {
      --top: 62;
      --left: 154;
      --w: 106;
      position: absolute;
      z-index: 1;
    }
  }
}
.p-casestudydtl__linkMain {
  --mt: -80;
  position: relative;
  z-index: 2;
  margin: calc(var(--mt) * 1em/16) auto 0;
  width: min(calc(780em/16), 100%);
  @media screen and (max-width: 880px) {
    --mt: -45;
    width: calc(330/400*100%);
  }
}
.p-casestudydtl__linkMainSlider {
  overflow: visible;
  & .track {
    overflow: visible;
  }
  & .track__listBlock {
    margin-right: calc(20/780*100%);
    @media screen and (max-width: 880px) {
      margin-right: calc(10/330*100%);
    }
  }
  & .track__listBlockTarget {
    --pt: 66;
    --pb: 74;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
    height: 100%;
    background-color: #fff;
    border-radius: calc(10em/16);
    overflow: hidden;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      border: calc(3em/16) solid;
      border-radius: calc(10em/16);
      overflow: hidden;
      pointer-events: none;
    }
    @media screen and (max-width: 880px) {
      --pt: 168;
      --pb: 30;
      padding: calc(var(--pt) * 1em/16) calc(15/330*100%) calc(var(--pb) * 1em/16);
      border-radius: calc(13em/16);
      &::before {
        border: calc(2em/16) solid;
        border-radius: calc(13em/16);
      }
    }
  }
  & .track__listBlockTargetBody {
    flex: 1;
    margin-left: calc(311/780*100%);
    @media screen and (max-width: 880px) {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 0;
    }
  }
  & .track__listBlockTargetBodyLabel {
    margin-bottom: calc(16em/20);
    padding: calc(8em/20) calc(16em/20);
    width: fit-content;
    font-size: calc(20em/16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--main-color);
    border-radius: calc(5em/20);
    @media screen and (max-width: 880px) {
      margin-bottom: calc(22em/15);
      padding: calc(8em/15);
      width: fit-content;
      font-size: calc(15em/16);
    }
  }
  & .track__listBlockTargetBodyTxt {
    text-align: left;
    line-height: 1.3;
    font-size: calc(24em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      line-height: 1.7;
      font-size: calc(14em/16);
    }
  }
  & .track__listBlockTargetBodyTitle {
    --w: 1;
    margin-top: calc(28em/16);
    width: calc(var(--w) * 1em/16);
    .p-casestudydtl__linkMainSlider .track__listBlock.is-a & {
      --w: 263;
    }
    .p-casestudydtl__linkMainSlider .track__listBlock.is-b & {
      --w: 265;
    }
    .p-casestudydtl__linkMainSlider .track__listBlock.is-c & {
      --w: 265;
    }
    .p-casestudydtl__linkMainSlider .track__listBlock.is-d & {
      --w: 264;
    }
    .p-casestudydtl__linkMainSlider .track__listBlock.is-e & {
      --w: 263;
    }
    .p-casestudydtl__linkMainSlider .track__listBlock.is-f & {
      --w: 263;
    }
    @media screen and (max-width: 880px) {
      margin-top: calc(15em/16);
      width: calc(var(--w) * .6em/16);
    }
  }
  & .track__listBlockTargetImg {
    --mt: 0;
    --ml: 0;
    --w: 1;
    --h: 1;
    position: absolute;
    left: 0;
    margin: calc(var(--mt)/780*100%) auto auto calc(var(--ml)/780*100%);
    width: calc(var(--w)/780*100%);
    height: auto;
    aspect-ratio: var(--w)/var(--h);
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-a) & {
      --mt: 6;
      --ml: 101;
      --w: 149;
    }
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-b) & {
      --ml: 81;
      --w: 169;
    }
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-c) & {
      --mt: 6;
      --ml: 110;
      --w: 124;
    }
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-d) & {
      --mt: 6;
      --ml: 110;
      --w: 136;
    }
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-e) & {
      --mt: 6;
      --ml: 114;
      --w: 128;
    }
    :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-f) & {
      --mt: 15;
      --ml: 102;
      --w: 152;
    }
    @media screen and (max-width: 880px) {
      --mt: 20;
      top: 0;
      right: 0;
      margin: calc(var(--mt)/330*100%) auto auto;
      width: calc(var(--w)/330*52%);
      :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-b) & {
        width: calc(var(--w)/330*55%);
      }
      :where(.p-casestudydtl__linkMainSlider .track__listBlock.is-a) & {
        width: calc(var(--w)/330*50%);
      }
    }
  }
  & .track__listBlockTargetDetail {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(10em/16);
    padding-top: calc(7em/16);
    width: calc(120em/16);
    height: calc(110em/16);
    background: linear-gradient(to bottom, #ffe600, #ff582c);
    border-radius: calc(60em/16) 0 0 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition);
    .p-casestudydtl__linkMainSlider .track__listBlock.is-active & {
      opacity: 1;
    }
    @media screen and (max-width: 880px) {
      padding: 0;
      width: calc(64em/16);
      height: calc(60em/16);
      border-radius: calc(30em/16) 0 0 0;
      opacity: 1;
    }
  }
  & .track__listBlockTargetDetailIcon {
    width: calc(41em/16);
    height: calc(41em/16);
    @media screen and (max-width: 880px) {
      width: calc(28em/16);
      height: calc(28em/16);
    }
  }
  & .track__listBlockTargetDetailTxt {
    margin-left: calc(7em/17);
    font-size: calc(17em/16);
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow:
    2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
    -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
    0px 2px 0 var(--main-color),  0 -2px 0 var(--main-color),
    -2px 0 0 var(--main-color), 2px 0 0 var(--main-color);
    @media screen and (max-width: 880px) {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      opacity: 0;
      visibility: hidden;
    }
  }
}
.p-casestudydtl__linkMainArrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  & .body {
    width: calc(90em/16);
    height: calc(90em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: 100vmax;
    pointer-events: auto;
    overflow: hidden;
    opacity: 1;
    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 100vmax;
      overflow: hidden;
      pointer-events: none;
    }
    &::before {
      border: calc(7em/16) solid #fff;
    }
    &::after {
      border: calc(3em/16) solid var(--main-color);
    }
    &.is-prev {
      left: calc(-45em/16);
    }
    &.is-next {
      right: calc(-45em/16);
    }
    &:is(:hover, :focus-visible) {
      opacity: 1;
    }
    @media screen and (max-width: 880px) {
      width: calc(58em/16);
      height: calc(58em/16);
      &::before {
        border: calc(4em/16) solid #fff;
      }
      &::after {
        border: calc(2em/16) solid var(--main-color);
      }
      &.is-prev {
        left: calc(-29em/16);
      }
      &.is-next {
        right: calc(-29em/16);
      }
    }
  }
  & .body__img {
    width: calc(28em/16);
    filter: drop-shadow(calc(2em/16) calc(2em/16) 0 #a13600);
    will-change: filter;
    @media screen and (max-width: 880px) {
      width: calc(17em/16);
    }
  }
}
@media (any-hover: hover) {
  .p-casestudydtl__linkMainArrows .body__img {
    transition: filter var(--transition);
    .p-casestudydtl__linkMainArrows .body:is(:hover, :focus-visible) & {
      filter: drop-shadow(calc(0em/16) calc(0em/16) 0 #a13600);
    }
  }
}
.p-casestudydtl__linkCaution {
  --mt: 60;
  margin-top: calc(var(--mt) * 1em/16);
  @media screen and (max-width: 880px) {
    --mt: 36;
  }
}
.p-casestudydtl__linkCautionTxt {
  margin-inline: auto;
  width: fit-content;
  text-align: justify;
  line-height: 1.7;
  font-size: calc(14em/16);
  letter-spacing: 0.04em;
  @media screen and (max-width: 880px) {
    font-size: calc(11em/16);
    & .u-spNone {
      display: none;
    }
  }
}