@charset "utf-8";

.cm-casestudy {
  --pt: 84;
  --pb: 68;
  padding: calc(var(--pt) * 1em/16) 0 calc(var(--pb) * 1em/16);
  background-color: #e8e7e3;
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #e8e7e3, transparent);
  }
  @media screen and (max-width: 1024px) {
    --pb: 0;
  }
}
.cm-casestudy__body {
  position: relative;
  z-index: 2;
}
.cm-casestudy__bodyTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cm-casestudy__bodyTitleSub {
  font-size: calc(28em/16);
  letter-spacing: 0.04em;
  @media screen and (max-width: 880px) {
    font-size: calc(20em/16);
  }
}
.cm-casestudy__bodyTitleMaintxt {
  margin: calc(26em/16) 0 calc(22em/16);
  width: calc(763em/16);
  @media screen and (max-width: 880px) {
    margin: calc(23em/16) 0 calc(16em/16);
    width: calc(275em/16);
  }
}
.cm-casestudy__bodyTitleMainlabel {
  --labeltitle-fs: 20;
  --labeltitle-ls: 0.2;
  --labeltitle-pt: 6;
  --labeltitle-pb: 8;
  --labeltitle-plr: 24;
  @media screen and (max-width: 880px) {
    --labeltitle-fs: 17;
    --labeltitle-pt: 5;
    --labeltitle-pb: 7;
    --labeltitle-plr: 19;
  }
}
.cm-casestudy__bodyLink {
  margin-top: calc(32em/16);
  @media screen and (max-width: 880px) {
    margin-top: calc(40em/16);
  }
}
.cm-casestudy__bodyLinkBtn {
  --btn-w: 418;
  --btn-h: 78;
  margin-inline: auto;
  @media screen and (max-width: 880px) {
    --btn-w: 320;
    --btn-h: 70;
  }
}
.cm-casestudy__img {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  @media screen and (max-width: 1024px) {
    justify-content: center;
    gap: calc(94em/16);
    margin-top: calc(26em/16);
    margin-bottom: calc(-20em/16);
  }
  @media screen and (max-width: 880px) {
    gap: calc(47em/16);
    margin-top: calc(13em/16);
    margin-bottom: calc(-10em/16);
    font-size: calc(16/400*100vw);
  }
}
.cm-casestudy__imgLeft {
  position: relative;
  top: calc(-140em/16);
  display: flex;
  align-items: flex-start;
  margin-left: calc(-78/var(--section-width)*100%);
  @media screen and (max-width: 1024px) {
    top: unset;
    margin-left: 0;
  }
}
.cm-casestudy__imgLeftBody {
  --w: 1;
  --top: 0;
  --left: 0;
  position: absolute;
  top: calc(var(--top) * 1em/16);
  left: calc(var(--left) * 1em/16);
  width: calc(var(--w) * 1em/16);
  &.is-c {
    --w: 117;
    --top: 0;
    --left: 0;
  }
  &.is-a {
    --w: 129;
    --top: 18;
    --left: 121;
  }
  &.is-d {
    --w: 118;
    --top: 15;
    --left: 264;
  }
  @media screen and (max-width: 1150px) {
    &.is-a {
      --left: 121*.9;
    }
    &.is-d {
      --left: 264*.9;
    }
  }
  @media screen and (max-width: 1024px) {
    position: relative;
    left: auto;
    &.is-a {
      margin: 0 calc(-4em/16) 0 calc(-12em/16);
    }
  }
  @media screen and (max-width: 880px) {
    width: calc(var(--w) * .5em/16);
    &.is-a {
      --top: 18*.5;
      margin: 0 calc(-2em/16) 0 calc(-6em/16);
    }
    &.is-d {
      --top: 15*.5;
    }
  }
}
.cm-casestudy__imgRight {
  position: relative;
  top: calc(-140em/16);
  display: flex;
  align-items: flex-start;
  margin-right: calc(-88/var(--section-width)*100%);
  @media screen and (max-width: 1024px) {
    top: unset;
    margin-right: 0;
  }
}
.cm-casestudy__imgRightBody {
  --w: 1;
  --top: 0;
  --right: 0;
  position: absolute;
  top: calc(var(--top) * 1em/16);
  right: calc(var(--right) * 1em/16);
  width: calc(var(--w) * 1em/16);
  &.is-f {
    --w: 138;
    --top: 18;
    --right: 0;
  }
  &.is-b {
    --w: 150;
    --top: 44;
    --right: 149;
  }
  &.is-e {
    --w: 111;
    --top: 10;
    --right: 297;
  }
  @media screen and (max-width: 1150px) {
    &.is-b {
      --right: 149*.9;
    }
    &.is-e {
      --right: 297*.9;
    }
  }
  @media screen and (max-width: 1024px) {
    position: relative;
    right: auto;
    &.is-b {
      margin: 0 calc(2em/16) 0 calc(-10em/16);
    }
  }
  @media screen and (max-width: 880px) {
    width: calc(var(--w) * .5em/16);
    &.is-f {
      --top: 18*.5;
    }
    &.is-b {
      --top: 44*.5;
      margin: 0 calc(1em/16) 0 calc(-5em/16);
    }
    &.is-e {
      --top: 10*.5;
    }
  }
}