/* -----------------------
  case
----------------------- */
.case {
  background: url(../img/case_bg_top.png) no-repeat center top / 100% auto, url(../img/case_bg_bottom.png) no-repeat center bottom / 100% auto;
  margin-top: max(-19.17vw, -184px);
  padding-top: min(31.46vw, 302px);
  padding-bottom: min(18.13vw, 174px);
  position: relative;
  z-index: 4;
}

.case .ttl .ttl-sub-area {
  display: block;
  width: min(42.6vw, 409px);
  height: min(35.83vw, 344px);
  margin: 0 min(13.33vw, 128px) 0 auto;
  position: relative;
}
#case-ttl-sub-mask-wrapper {
  width: 100%;
  height: 100%;
}
#case-ttl-sub-mask {
  width: min(42.4vw, 407px);
  height: min(31.88vw, 306px);
  position: absolute;
  top: 0;
  right: min(13.33vw, 128px);
}
#case-ttl-sub-mask-path {
  fill: none;
  stroke: #fff;
  stroke-width: 70;
  stroke-dasharray: 507;
  stroke-dashoffset: 507;
  stroke-linecap: round;
}
.case .ttl.trigger.move #case-ttl-sub-mask-path {
  animation: line 0.6s forwards;
}

@keyframes line {
  0% {
    stroke-dashoffset: 507;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.case-box {
  position: relative;
  z-index: 3;
}
.case-box .ph {
  position: absolute;
  bottom: 0;
  z-index: -1;
}
.case-box .ph img {
  transform: scale(1.3);
  transition: all 0.8s 0s ease;
}
.case-box.trigger.move .ph img {
  transform: scale(1);
}

.case-box:nth-of-type(odd) .ph {
  left: 0;
}
.case-box:nth-of-type(even) .ph {
  right: 0;
}

.case-01 .ph {
  width: min(60.1vw, 577px);
  height: min(81.98vw, 787px);
  mask: url(../img/case_01_img_mask.png) no-repeat left top / contain;
}
.case-02 .ph {
  width: min(63.23vw, 607px);
  height: min(70.73vw, 679px);
  mask: url(../img/case_02_img_mask.png) no-repeat right top / contain;
}
.case-03 .ph {
  width: min(60.52vw, 581px);
  height: min(73.96vw, 710px);
  mask: url(../img/case_03_img_mask.png) no-repeat left top / contain;
}
.case-04 .ph {
  width: min(60.94vw, 585px);
  height: min(66.56vw, 639px);
  mask: url(../img/case_04_img_mask.png) no-repeat right top / contain;
}