@charset "UTF-8";
/*== ボタン共通設定 */
.bg-btn {
  position: relative;
  overflow: hidden;
  transition: ease-in-out 0.4s;
  z-index: 1;
}

.bgleft::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  content: "";
  width: 0;
  height: 100%;
  background-color: var(--clr-base-black);
  transition: 0.4s;
}
.bgleft:hover::before {
  width: 100%;
}
.bgleft.-white::before {
  background-color: var(--clr-base-white);
}
.bgleft.-light-gray::before {
  background-color: var(--clr-light-white);
}

.-line-after-line::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--clr-base-black);
  transform: scale(1, 1);
  transform-origin: left top;
  transition: transform 0.25s;
}
.-line-after-line:hover::before {
  transform: scale(0, 1);
  transform-origin: right top;
}
.-line-after-line::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--clr-base-black);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.25s;
}
.-line-after-line:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
  transition-delay: 0.25s;
}

.-white-line-after-line::before {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--clr-base-white);
  transform: scale(1, 1);
  transform-origin: left top;
  transition: transform 0.25s;
}
.-white-line-after-line:hover::before {
  transform: scale(0, 1);
  transform-origin: right top;
}
.-white-line-after-line::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: var(--clr-base-white);
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.25s;
}
.-white-line-after-line:hover::after {
  transform: scale(1, 1);
  transform-origin: left top;
  transition-delay: 0.25s;
}

/*# sourceMappingURL=spiral-animation.css.map */