/* -----------------------
  liftup
----------------------- */
.liftup {
  background: url(../img/liftup_bg.jpg) no-repeat center top / cover, #dbe0dc;
  position: relative;
  padding-bottom: min(16.54vw, 129px);
}

.liftup .nav-area {
  position: absolute;
  top: min(80.9vw, 631px);
  left: 0;
  padding-top: min(44.23vw, 345px);
  width: 100%;
}
.liftup .nav-area.sec-start {
  position: fixed;
  top: 0;
  left: 0;
}
.liftup .nav-area.sec-end {
  position: absolute;
  top: initial;
  bottom: min(190.51vw, 1486px);
}
.liftup .nav-area .liftup-nav {
  width: 100vw;
  max-width: 780px;
  margin: 0 auto;
  background: url(../img/liftup_nav_bg.png) no-repeat left top / contain;
  padding-top: min(9.36vw, 73px);
}
.liftup-nav li {
  width: min(7.05vw, 55px);
  margin: 0 auto 0 0;
}
.liftup-nav .liftup-nav-link {
  display: inline-block;
}
.liftup-nav .liftup-nav-link img {
  opacity: 0;
  transition: opacity .3s;
}
.liftup-nav .liftup-nav-link.is-current img {
  opacity: 1;
}
.liftup-nav .liftup-nav-link-01 {
  background: url(../img/liftup_nav_01_off.png) no-repeat left top / contain;
}
.liftup-nav .liftup-nav-link-02 {
  background: url(../img/liftup_nav_02_off.png) no-repeat left top / contain;
}
.liftup-nav .liftup-nav-link-03 {
  background: url(../img/liftup_nav_03_off.png) no-repeat right top / contain;
}
.liftup-nav .liftup-nav-link-04 {
  background: url(../img/liftup_nav_04_off.png) no-repeat right top / contain;
}

.liftup .ttl-box {
  position: relative;
  margin-bottom: max(-0.13vw, -1px);
}
.liftup .ttl-box::after {
  background: url(../img/liftup_ttl_underline.png) no-repeat center top / contain;
  width: min(51.15vw, 399px);
  height: min(3.97vw, 31px);
  left: min(6.79vw, 53px);
  bottom: min(27.18vw, 212px);
}

.liftup-box {
  width: min(82.05vw, 640px);
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
.liftup-box + .liftup-box {
  margin-top: min(6.67vw, 52px);
}

.liftup-box .box-ttl {
  position: relative;
}

.liftup-box .box-ttl .icon-txt-box {
  position: absolute;
  width: min(12.56vw, 98px);
  height: min(6.03vw, 47px);
  top: min(6.41vw, 50px);
  left: min(1.03vw, 8px);
  transform: rotate(-10deg);
}
.liftup-box .box-ttl .icon-txt-box .icon-txt {
  fill: #de7165;
}
.liftup-box .box-ttl .icon-txt-box .icon-txt-mask {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 172;
  stroke-dashoffset: 172;
}
.liftup-box .box-ttl .icon-txt-box.trigger.move .icon-txt-mask {
  animation: handwritingLiftUp 1.3s ease-in-out forwards;
}
@keyframes handwritingLiftUp {
  0% {
    stroke-dashoffset: 172;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
#liftup-01-icon {
  mask: url(#liftup-01-icon-mask);
}
#liftup-02-icon {
  mask: url(#liftup-02-icon-mask);
}
#liftup-03-icon {
  mask: url(#liftup-03-icon-mask);
}
#liftup-04-icon {
  mask: url(#liftup-04-icon-mask);
}


.liftup-box .arrow,
.liftup-box .highlight {
  position: absolute;
}

.liftup-box .slideInLeft,
.liftup-box .slideInRight {
  transition-delay: 0s;
}

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


.liftup-01 .arrow {
  top: min(51.67vw, 403px);
  right: min(24.1vw, 188px);
}
.liftup-01 .highlight {
  width: min(24.49vw, 191px);
  height: min(24.36vw, 190px);
  bottom: min(23.85vw, 186px);
  right: min(15.26vw, 119px);
}

.liftup-02 .arrow {
  top: min(53.97vw, 421px);
  left: min(15.64vw, 122px);
}
.liftup-02 .highlight {
  width: min(25.26vw, 197px);
  height: min(25.13vw, 196px);
  bottom: min(18.08vw, 141px);
  left: min(9.87vw, 77px);
}

.liftup-03 .arrow {
  top: min(59.74vw, 466px);
  left: min(30.64vw, 239px);
}
.liftup-03 .highlight {
  width: min(25.77vw, 201px);
  height: min(25.77vw, 201px);
  bottom: min(12.44vw, 97px);
  left: min(22.44vw, 175px);
}

.liftup-04 .arrow {
  top: min(57.95vw, 452px);
  left: min(25.13vw, 196px);  
}
.liftup-04 .highlight {
  width: min(24.87vw, 194px);
  height: min(24.74vw, 193px);
  bottom: min(11.28vw, 88px);
  left: min(16.03vw, 125px);
}


.liftup .liftup-menu .ttl-box {
  margin-bottom: 0;
}
.liftup .liftup-menu .ttl-box::after {
  background: url(../img/liftup_ttl_underline.png) no-repeat center top / contain;
  left: min(10.64vw, 83px);
  bottom: min(18.72vw, 146px);
  z-index: 4;
}