@charset "UTF-8";
/* ----------------------------------------------------------- */
/* color変数定義 */
/* ----------------------------------------------------------- */
body * {
  color: #314363;
}

/* サイトカラー */
body * {
  font-family: "IBM Plex Sans JP", sans-serif;
}

body {
  font-size: 0.9375rem;
} /* 15px */
/* ----------------------------------------------------------- */
/* animation */
/* ----------------------------------------------------------- */
/*

①https://animate.style/ このサイトからアニメーションを探す

②動かしたい要素に「animate__animated」「animate__●●●」この2つのクラス名を入れる

③●●●の部分にアニメーションの動きの名前を入れる　（例）animate__fadeIn

※動きを少し変えたい場合は、以下でカスタマイズする↓

*/
/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* アニメーション開始を遅延 */
/* ----------------------------------------------------------- */
.delay-time_05s {
  animation-delay: 0.5s;
}

.delay-time_1s {
  animation-delay: 1s;
}

/* ----------------------------------------------------------- */
/* 固定ヘッダー　スクロールした時の動き */
/* ----------------------------------------------------------- */
/*　上に上がる動き　*/
#logo_head_sp.UpMove {
  animation: UpAnime 0.5s forwards;
}

/*　下に下がる動き　*/
#logo_head_sp.DownMove {
  animation: DownAnime 0.5s forwards;
}

/* ----------------------------------------------------------- */
/* スクロールでフェードイン */
/* ----------------------------------------------------------- */
.scr-target {
  opacity: 1;
  transform: translate3d(0, 50px, 0);
}

.scr-target.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}

/* ----------------------------------------------------------- */
/* フェードイン */
/* ----------------------------------------------------------- */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}

.sitetop .fadeIn2 {
  animation-name: fadeInAnime2;
  animation-duration: 4.2s;
  animation-fill-mode: forwards;
  opacity: 1;
}

/* ----------------------------------------------------------- */
/* フェードアウト */
/* ----------------------------------------------------------- */
.fadeOut {
  animation-name: fadeOutAnime;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

/*keyframe*/
@keyframes disableScroll {
  0% {
    overflow: hidden;
  }
  100% {
    overflow: auto;
  }
}
@keyframes anim {
  0% {
    stroke-dashoffset: 1425px;
  }
  50% {
    fill: transparent;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill: #ffffff;
  }
}
@keyframes fadeInAnime {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInAnime2 {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOutAnime {
  0% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100px);
  }
}
@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}/*# sourceMappingURL=animation.css.map */