@charset "utf-8";

.p-casestudydtl__mv-wrapper {
  margin-top: calc(187em/16);
  padding-top: calc(9em/16);
  padding-bottom: calc(5em/16);
  overflow: hidden;
  @media screen and (max-width: 880px) {
    margin-top: calc(23em/16);
    padding-top: calc(25em/16);
    padding-bottom: calc(5em/16);
  }
}
.p-casestudydtl__mv {
  --mv-title-w: 1;
  --mv-fukidashi-mt: 0;
  --mv-fukidashi-ml: 0;
  --mv-fukidashi-img: 1;

  --h: 420;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(var(--h) * 1em/16);
  overflow: visible;
  .p-casea & {
    --mv-title-w: 385;
    --mv-fukidashi-mt: 16;
    --mv-fukidashi-ml: 46;
    --mv-fukidashi-img: 90;
  }
  .p-caseb & {
    --mv-title-w: 386;
    --mv-fukidashi-mt: 21;
    --mv-fukidashi-ml: 38;
    --mv-fukidashi-img: 92;
  }
  .p-casec & {
    --mv-title-w: 388;
    --mv-fukidashi-mt: 10;
    --mv-fukidashi-ml: 46;
    --mv-fukidashi-img: 83;
  }
  .p-cased & {
    --mv-title-w: 390;
    --mv-fukidashi-mt: 12;
    --mv-fukidashi-ml: 42;
    --mv-fukidashi-img: 89;
  }
  .p-casee & {
    --mv-title-w: 387;
    --mv-fukidashi-mt: 10;
    --mv-fukidashi-ml: 54;
    --mv-fukidashi-img: 74;
  }
  .p-casef & {
    --mv-title-w: 389;
    --mv-fukidashi-mt: 17;
    --mv-fukidashi-ml: 37;
    --mv-fukidashi-img: 91;
  }
  &::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-color: var(--casestudy-color);
    clip-path: polygon(0 0, 100% calc(50/420*100%), 100% 100%, 0 calc(370/420*100%));
  }
  &::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 120%;
    height: calc(370/420*100%);
    background: #fff;
    border-top: calc(4em/16) solid;
    border-bottom: calc(4em/16) solid;
    transform: rotate(-2deg);
    filter: drop-shadow(0 calc(10em/16) 0 rgb(0 0 0/.1));
    will-change: filter;
  }
  @media screen and (min-width: 1720px) {
    &::after {
      transform: rotate(-1.9deg);
    }
  }
  @media screen and (min-width: 1920px) {
    &::after {
      transform: rotate(-1.8deg);
    }
  }
  @media screen and (max-width: 1280px) {
    &::after {
      transform: rotate(-2.15deg);
    }
  }
  @media screen and (max-width: 1150px) {
    &::after {
      transform: rotate(-2.3deg);
    }
  }
  @media screen and (max-width: 1024px) {
    &::after {
      transform: rotate(-2.7deg);
    }
  }
  @media screen and (max-width: 880px) {
    --h: 300;
    &::before {
      clip-path: polygon(0 0, 100% calc(15/300*100%), 100% 100%, 0 calc(285/300*100%));
    }
    &::after {
      height: calc(285/300*100%);
      border-top: calc(3em/16) solid;
      border-bottom: calc(3em/16) solid;
      filter: drop-shadow(0 calc(3em/16) 0 rgb(0 0 0/.1));
      transform: rotate(-2deg);
    }
  }
}
.p-casestudydtl__mv-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: polygon(0 calc(50/420*100% + 3em/16), 100% calc(4em/16), 100% calc(370/420*100% - 4em/16), 0 calc(100% - 4em/16));
  @media screen and (max-width: 880px) {
    clip-path: polygon(0 calc(15/300*100% + 3em/16), 100% calc(3em/16), 100% calc(285/300*100% - 3em/16), 0 calc(100% - 3em/16));
  }
}
.p-casestudydtl__mvBody {
  position: relative;
  z-index: 2;
  padding-top: calc(12em/16);
  overflow: visible;
  @media screen and (max-width: 880px) {
    padding-top: calc(25em/16);
  }
}
.p-casestudydtl__mvBodyTitle {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: calc(16em/16);
  @media screen and (max-width: 880px) {
    gap: calc(14em/16);
  }
  & .main {
    width: calc(var(--mv-title-w)*1em/16);
    @media screen and (max-width: 880px) {
      width: calc(var(--mv-title-w)*.65em/16);
    }
  }
  & .sub {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    text-align: center;
    font-size: calc(26em/16);
    letter-spacing: 0.04em;
    @media screen and (max-width: 880px) {
      font-size: calc(17em/16);
    }
  }
  & .sub__line {
    & span {
      opacity: 0;
      display: inline-block;
      @media (scripting: none) {
        opacity: 1;
      }
    }
  }
}
.p-casestudydtl__mvBodyCrumb {
  margin-top: calc(20em/16);
}
.p-casestudydtl__mvComic {
  position: absolute;
  width: calc(280em/16);
  height: 100%;
  background-repeat: repeat-y;
  background-size: 100% calc(857em/16);
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: background-position;
  /* animation-play-state: paused;
  .p-casestudydtl__mv.is-animatedone & {
    animation-play-state: running;
    } */
  .p-casea & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-a/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(-210deg) saturate(100%) brightness(100%);
  }
  .p-caseb & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-b/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(-50deg) saturate(100%) brightness(100%);
  }
  .p-casec & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-c/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(-180deg) saturate(100%) brightness(100%);
  }
  .p-cased & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-d/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(-20deg) saturate(100%) brightness(100%);
  }
  .p-casee & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-e/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(-130deg) saturate(100%) brightness(100%);
  }
  .p-casef & {
    background-image: url('/image/feature/fx/beginner/casestudy/case-f/mv-comic.png');
    filter: grayscale(0%) sepia(50%) hue-rotate(60deg) saturate(100%) brightness(100%);
  }
  &.is-left {
    left: 0;
    margin-left: calc(135/1400*100%);
    background-position: 0% calc(0em/16);
    animation-name: comic_loop01;
  }
  &.is-right {
    right: 0;
    margin-right: calc(135/1400*100%);
    background-position: 0% calc(500em/16);
    animation-name: comic_loop02;
  }
  @media screen and (max-width: 1280px) {
    &.is-left {
      margin-left: calc(50/1400*100%);
    }
    &.is-right {
      margin-right: calc(50/1400*100%);
    }
  }
  @media screen and (max-width: 1024px) {
    &.is-left {
      margin-left: calc(-100/1400*100%);
    }
    &.is-right {
      margin-right: calc(-100/1400*100%);
    }
  }
  @media screen and (max-width: 880px) {
    width: calc(116em/16);
    background-size: 100% calc(356em/16);
    &.is-left {
      margin-left: calc(-80em/16);
      animation-name: comic_loop_sp01;
    }
    &.is-right {
      margin-right: calc(-80em/16);
      background-position: 0% calc(140em/16);
      animation-name: comic_loop_sp02;
    }
  }
}
@keyframes comic_loop01 {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0% calc(-857em/16);
  }
}
@keyframes comic_loop02 {
  0% {
    background-position: 0% calc(500em/16);
  }
  100% {
    background-position: 0% calc(-357em/16);
  }
}
@keyframes comic_loop_sp01 {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 0% calc(-356em/16);
  }
}
@keyframes comic_loop_sp02 {
  0% {
    background-position: 0% calc(140em/16);
  }
  100% {
    background-position: 0% calc(-216em/16);
  }
}
.p-casestudydtl__mvFukidashi {
  position: absolute;
  top: calc(-9em/16);
  right: 0;
  display: flex;
  z-index: 2;
  margin-right: max(calc(312em/16), calc(312/1400*100vw));
  width: calc(169em/16);
  height: calc(143em/16);
  @media screen and (max-width: 1280px) {
    margin-right: calc(312/1280*85vw);
  }
  @media screen and (max-width: 1150px) {
    margin-right: calc(312/1280*75vw);
  }
  @media screen and (max-width: 1024px) {
    margin-right: calc(312/1280*30vw);
  }
  @media screen and (max-width: 880px) {
    top: calc(-23em/16);
    left: 0;
    right: auto;
    margin: 0 auto 0 calc(34em/16);
    width: calc(101em/16);
    height: calc(80em/16);
  }
}
.p-casestudydtl__mvFukidashiImg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: calc(var(--mv-fukidashi-mt)/169*100%) auto auto calc(var(--mv-fukidashi-ml)/169*100%);
  width: calc(var(--mv-fukidashi-img)/169*100%);
}
.p-casestudydtl__mvFukidashiBg {
  width: 100%;
  height: 100%;
}