@charset "utf-8";
/* トップページアニメーション */
@keyframes handwrite1 {
  0% {
    fill: transparent;
    stroke-dashoffset: 500;
  }
  21% {
    stroke-dashoffset: 0;
  }
  65% {
    fill: transparent;
  }
  90% {
    stroke: #000;
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  100% {
    fill: #DC000C;
    stroke: #DC000C;
    stroke-width: 0;
  }
}
@keyframes handwrite2 {
  0% {
    fill: transparent;
    stroke-dashoffset: 5000;
  }
  65% {
    fill: transparent;
  }
  90% {
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  100% {
    fill: #000;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}
@keyframes handwrite3 {
  0% {
    fill: transparent;
    stroke-dashoffset: 1500;
  }
  65% {
    fill: transparent;
  }
  90% {
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  100% {
    fill: #000;
    stroke-dashoffset: 0;
    stroke-width: 0;
  }
}
@keyframes handwrite4 {
  0% {
    fill: transparent;
    stroke-dashoffset: 500;
  }
  65% {
    fill: transparent;
  }
  90% {
    stroke: #000;
    stroke-dashoffset: 0;
    stroke-width: 1;
  }
  100% {
    fill: #DC000C;
    stroke: #DC000C;
    stroke-width: 0;
    stroke-dashoffset: 0;
  }
}
.fv__logo rect.handwrite1 {
  fill: none;
  stroke: #000;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  stroke-width: 1;
}
.fv__logo path.handwrite2 {
  fill: none;
  stroke: #000;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  stroke-width: 1;
}
.fv__logo path.handwrite3 {
  fill: none;
  stroke: #000;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
  stroke-width: 1;
}
.fv__logo path.handwrite4 {
  fill: none;
  stroke: #000;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  stroke-width: 1;
}
.fv__logo rect.handwrite1 {
  animation: handwrite1 2.5s ease-in 0s forwards;
}
.fv__logo path.handwrite2 {
  animation: handwrite2 2.5s ease-in 0s forwards;
}
.fv__logo path.handwrite3 {
  animation: handwrite3 2.5s ease-in 0s forwards;
}
.fv__logo path.handwrite4 {
  animation: handwrite4 2.5s ease-in 0s forwards;
}
@keyframes fvFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
header {
  opacity: 0;
  animation: fvFadeIn 0.5s ease-in 2.5s forwards;
}
.fv__sharp,
.fv__anime {
  opacity: 0;
  animation: fvFadeIn 0.5s ease-in 2.5s forwards;
}

.fv__catch--pc,
.fv__catch--sp,
.fv__link {
  opacity: 0;
  animation: fvFadeIn 0.5s ease-in 2.5s forwards;
}