/* -----------------------
  case
----------------------- */
.case {
  background: url(../img/case_bg.jpg) no-repeat center top / contain;
  padding-top: min(21.41vw, 167px);
  position: relative;
  overflow: hidden;
}

.case .bg-slider {
  width: 100%;
  position: absolute;
  top: min(35.26vw, 275px);
  left: 0;
  z-index: 2;
}
.case .bg-slider .slide-item {
  height: min(10.26vw, 80px);
}
.case .bg-slider .slide-item img {
  width: auto;
  max-height: 100%;
}

.case .ttl-box {
  position: relative;
}
.case .ttl-box .ttl-txt {
  display: inline-block;
  position: absolute;
  top: 0;
}
.case .ttl-box .ttl-txt-01 {
  left: min(19.23vw, 150px);
}
.case .ttl-box .ttl-txt-02 {
  right: min(20.64vw, 161px);
}
.case .ttl-box::after {
  background: url(../img/case_ttl_underline.png) no-repeat center top / contain;
  width: min(36.67vw, 286px);
  height: min(6.41vw, 50px);
  right: min(5.51vw, 43px);
  bottom: 0;
}

.case-box {
  display: grid;
  position: relative;
}
.case-box .box-ttl,
.case-box .before-box {
  grid-area: 1 / 1;
}
.case-box .arrow,
.case-box .highlight {
  position: absolute;
}

.case-box .arrow.trigger {
  clip-path: inset(0 0 100% 0);
  transition: all 0.8s 0s ease;
  transition-delay: .25s;
  z-index: 2;
}
.case-box .arrow.trigger.move {
  clip-path: inset(0);
}
.case-box .highlight {
  width: min(23.33vw, 182px);
  height: min(23.33vw, 182px);
  transform: rotate(0deg);
  animation: rotateInfinite 6s linear infinite;
  transition-delay: 0.4s;
}
@keyframes rotateInfinite {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}


.case-01 .arrow {
  width: min(5.64vw, 44px);
  height: min(23.97vw, 187px);
  top: min(35.51vw, 277px);
  left: min(12.56vw, 98px);
}
.case-01 .highlight {
  top: min(62.95vw, 491px);
  left: min(9.62vw, 75px);
}

.case-02 .arrow {
  width: min(7.95vw, 62px);
  height: min(23.46vw, 183px);
  top: min(37.31vw, 291px);
  left: min(31.15vw, 243px);
}
.case-02 .highlight {
  top: min(65vw, 507px);
  left: min(22.95vw, 179px);
}

.case-03 .arrow {
  width: min(5.26vw, 41px);
  height: min(23.85vw, 186px);
  top: min(34.74vw, 271px);
  left: min(28.46vw, 222px);
}
.case-03 .highlight {
  top: min(59.49vw, 464px);
  left: min(33.97vw, 265px);
}

.case-04 .arrow {
  width: min(6.41vw, 50px);
  height: min(29.1vw, 227px);
  top: min(20.26vw, 158px);
  right: min(20.64vw, 161px);
  
}
.case-04 .highlight {
  top: min(50vw, 390px);
  right: min(23.59vw, 184px);
}