/* -----------------------
  hyaluronan
----------------------- */
.hyaluronan {
  background: url(../img/hyarulonan_bg.jpg) no-repeat center top / cover;
  padding-top: min(21.41vw, 167px);
  position: relative;
}

.hyaluronan .dot-line-vertical {
  height: min(17.05vw, 133px);
  position: absolute;
  top: max(-8.46vw, -66px);
  left: calc(50% - min(0.26vw, 2px));
}

.hyaluronan .ttl-box {
  position: relative;
  z-index: 4;
  margin-bottom: max(-7.95vw, -62px);
}

.hyaluronan .model-box {
  position: relative;
  padding: min(3.08vw, 24px) 0 min(4.62vw, 36px);
}
.hyaluronan .model-box .photo {
  width: min(83.33vw, 650px);
  margin: 0 auto;
  transition: all 0.3s 0s ease;
}
.hyaluronan .model-box ul li {
  position: absolute;
  transition: all 0.6s 0s ease;
}

.hyaluronan .model-box .txt-01 {
  width: min(21.54vw, 168px);
  height: min(47.05vw, 367px);
  top: 0;
  left: 0;
}
.hyaluronan .model-box .txt-02 {
  width: min(22.18vw, 173px);
  height: min(30.64vw, 239px);
  top: min(7.69vw, 60px);
  right: 0;
  transition-delay: 1s;
}
.hyaluronan .model-box .txt-03 {
  width: min(21.54vw, 168px);
  height: min(51.79vw, 404px);
  bottom: min(8.97vw, 70px);
  left: 0;
  transition-delay: 0s;
}
.hyaluronan .model-box .txt-04 {
  width: min(22.18vw, 173px);
  height: min(36.41vw, 284px);
  bottom: 0;
  right: 0;
  transition-delay: 0s;
}

.hyaluronan .spot {
  background: url(../img/hyaluronan_spot_bg.png) no-repeat center bottom / contain;
  padding-bottom: min(14.23vw, 111px);
  margin-top: min(11.15vw, 87px);
}

.hyaluronan .spot .spot-txt::after {
  background: url(../img/hyaluronan_01_underline.png) no-repeat center top / 100% auto;
  width: min(46.15vw, 360px);
  height: min(0.26vw, 2px);
  left: min(11.28vw, 88px);
  bottom: min(16.28vw, 127px);
}

.hyaluronan .spot-list li {
  position: relative;
  transition: all 0.3s 0s ease;
}
.hyaluronan .spot-list .line.trigger {
  position: absolute;
  transition: all 0.4s 0s ease;
  transition-delay: 1.2s;
}
.hyaluronan .spot-list .line.trigger.move {
  clip-path: inset(0);
}
.hyaluronan .spot-list .spot-name {
  display: inline-block;
  position: absolute;
  width: min(7.95vw, 62px);
  transition-delay: 1.6s;
}

.hyaluronan .spot-list .spot-line-01 {
  width: min(15.38vw, 120px);
  height: min(8.59vw, 67px);
  right: min(18.97vw, 148px);
  top: min(12.69vw, 99px);
  clip-path: inset(0 100% 0 0);
}
.hyaluronan .spot-list .spot-name-01 {
  height: min(25.26vw, 197px);
  right: min(9.49vw, 74px);
  top: 0;
}

.hyaluronan .spot-list .spot-line-02 {
  width: min(15.9vw, 124px);
  height: min(23.85vw, 186px);
  left: min(17.69vw, 138px);
  top: max(-5.13vw, -40px);
  clip-path: inset(0 0 0 100%);
}
.hyaluronan .spot-list .spot-name-02 {
  height: min(38.85vw, 303px);
  left: min(9.1vw, 71px);
  top: max(-24.36vw, -190px);
}

.hyaluronan .spot-list .spot-line-03 {
  width: min(19.62vw, 153px);
  height: min(1.41vw, 11px);
  right: min(19.62vw, 153px);
  top: min(2.189vw, 17px);
  line-height: 0;
  clip-path: inset(0 100% 0 0);
}
.hyaluronan .spot-list .spot-name-03 {
  height: min(17.95vw, 140px);
  right: min(9.49vw, 74px);
  top: max(-5.77vw, -45px);
}

.hyaluronan .spot-list .spot-line-04 {
  width: min(25.64vw, 200px);
  height: min(1.41vw, 11px);
  left: min(19.1vw, 149px);
  top: min(2.82vw, 22px);
  line-height: 0;
  clip-path: inset(0 0 0 100%);
}
.hyaluronan .spot-list .spot-name-04 {
  height: min(22.05vw, 172px);
  left: min(8.97vw, 70px);
  bottom: 0;
}