@charset "UTF-8";

/**********************************************************
 * caption
 **********************************************************/
.caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 40px 30px 30px;
  width: fit-content;
  background: var(--caption-bg);
  border: 3px solid var(--caption-border);
  color: var( --color-main-light);
  font-family: "futura-100", sans-serif;
  font-weight: 400;
  line-height: 1;
  font-size: 17px;
  border-radius: 30px;
}
.caption .line {
  margin-bottom: 10px;
  width: 0;
  height: 9px;
  background: var(--caption-line);
  transition: width 800ms ease;
}
.caption.is-reserve {
  text-align: right;
}
.caption.is-reserve .line {
  margin-left: auto;
}
.caption .line.is-active {
  width: 92px;
}
.caption .type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  inline-size: 0;
  line-height: 1.5;
}
.caption.is-reserve .type {
  margin-left: auto;
}
.caption .type.is-active {
  animation: typing var(--speed, 2s) steps(var(--chars)) both;
  animation-delay: var(--delay, 0s);
}
@keyframes typing {
  from { inline-size: 0; }
  to   { inline-size: var(--final, 0px); }
}

@media (768px <= width < 1920px) {
  .caption {
    gap: 0.521vw;
    padding: 2.083vw 1.563vw 1.563vw;
    font-size: 0.885vw;
    border: 0.156vw solid var(--caption-border);
    border-radius: 1.563vw;
  }
  .caption .line {
    margin-bottom: 0.521vw;
    height: 0.469vw;
  }
  .caption .line.is-active {
    width: 4.792vw;
  }
}

@media (width < 768px) {
  .caption {
    gap: 1.333vw;
    padding: 4vw 3.333vw;
    font-size: 1.6vw;
    border: 0.4vw solid var(--caption-border);
    border-radius: 2.667vw;
  }
  .caption .line {
    margin-bottom: 1.333vw;
    height: 0.933vw;
  }
  .caption .line.is-active {
    width: 9.333vw;
  }
}