/* -----------------------
  useless
----------------------- */
.useless {
  background: linear-gradient(to bottom, #fff, #fff) no-repeat center top / 100% min(72.6vw, 697px), #C93F40;
}

.useless .ttl-box {
  display: grid;
}
.useless .ttl-box .ttl-back-img-box,
.useless .ttl-box .ttl {
  grid-area: 1 / 1;
}

.useless .ttl-box .ttl-back-img-box {
  padding: min(38.23vw, 367px) min(6.25vw, 60px) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: min(2.71vw, 26px);
}
.useless .ttl-box .ttl-back-img-box .ttl-back-img {
  mask: url(../img/useless_ttl_img_mask.png) no-repeat center top / contain;
}
.useless .ttl-box .ttl-back-img-box .ttl-back-img img {
  transform: scale(1.3);
  transition: all 0.8s 0s ease;
}
.useless .ttl-box .ttl-back-img-box.trigger.move .ttl-back-img img {
  transform: scale(1);
}

.useless .ttl-top {
  display: block;
  margin-bottom: min(69.69vw, 669px);
}
.useless .ttl-bottom {
  display: grid;
}
.useless .ttl-bottom span {
  display: inline-block;
  grid-area: 1 / 1;
}
.useless .ttl-bottom .scaleUpDown {
  animation-delay: 0s;
}
.useless .ttl-bottom .txtUnmaskLeft {
  transition-duration: 0.4s;
  transition-delay: 0.75s;
}

.useless-box {
  display: grid;
}
.useless-box .img-box,
.useless-box .txt-box {
  grid-area: 1 / 1;
}
.useless-box .txt-box {
  z-index: 2;
}
.useless-box .mask-box {
  background-color: #fff;
  mask-image: url(../img/useless_percent_mask.png);
  mask-repeat: no-repeat;
  mask-size: contain;
  position: relative;
}
.useless-box .mask-box::before {
  --percentHeight: 0%;

  content: '';
  width: 100%;
  height: 0%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #F6DC6D;
  transition: 0.8s ease;
}
.useless-box .mask-box.trigger.move::before {
  height: var(--percentHeight);
}

.useless-01 {
  background: url(../img/useless_01_bg.png) no-repeat center bottom / 100% auto;
}
.useless-01 .mask-box {
  mask-position: top 0 left min(3.75vw, 36px); 
}
.useless-01 .mask-box::before {
  --percentHeight: 90%;
}

.useless-02 {
  background: url(../img/useless_02_bg.png) no-repeat center bottom / 100% auto;
  margin-top: max(-16.56vw, -159px);
}
.useless-02 .mask-box {
  mask-position: top 0 right min(3.54vw, 34px);
}
.useless-02 .mask-box::before {
  --percentHeight: 85%;
}

.useless-03 {
  background: url(../img/useless_03_bg.png) no-repeat center bottom / 100% auto;
  margin-top: max(-7.5vw, -72px);
}
.useless-03 .mask-box {
  mask-position: top 0 left min(3.75vw, 36px);
}
.useless-03 .mask-box::before {
  --percentHeight: 75%;
}