@charset "UTF-8";
/* =============================================================================
   パーシャルファイル
   ========================================================================== */
/* -----------------------------------------------------------------------------
   メディアクエリ
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
   fade
   -------------------------------------------------------------------------- */
/* transition
    transition: all(適法するプロパティ名：allだと全て) 0.8s（変化に掛ける時間） ease（変化の種類） 0（変化の開始時間：0だとすぐ開始）;
    linear：一定
    ease ：開始と完了が滑らか
    ease-in：ゆっくり開始
    ease-out：ゆっくり終了
    ease-in-out：ゆっくり開始してゆっくり終了
*/
.fade-in {
  opacity: 0;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.fade-show {
  opacity: 1;
}

.slide-in {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.slide-show {
  -webkit-animation: slide-in 1s ease 0s 1 forwards;
          animation: slide-in 1s ease 0s 1 forwards;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* @keyframes

参考URL：https://qiita.com/soarflat/items/4a302e0cafa21477707f

@keyframes fadeIn（任意の名前） {
    0% {　//アニメーション開始時
        CSSプロパティ:値;
    }
    100% {　//アニメーション終了時
        CSSプロパティ:値;
    }
}
animation: fadeIn（任意の名前） 2s（変化に掛ける時間） ease（変化の種類） 0s（変化の開始時間：0だとすぐ開始） 1（繰り返す回数） normal（繰り返し時、往復処理をするかを指定）;
*/
.slide-list-in {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.slide-list-show:nth-of-type(1) {
  -webkit-animation: slide-list-in 0.8s ease 0s 1 forwards;
          animation: slide-list-in 0.8s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show:nth-of-type(1) {
    -webkit-animation: slide-list-in 0.8s ease 0s 1 forwards;
            animation: slide-list-in 0.8s ease 0s 1 forwards;
  }
}
.slide-list-show:nth-of-type(2) {
  -webkit-animation: slide-list-in 0.8s ease 0s 1 forwards;
          animation: slide-list-in 0.8s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show:nth-of-type(2) {
    -webkit-animation: slide-list-in 0.8s ease 0.2s 1 forwards;
            animation: slide-list-in 0.8s ease 0.2s 1 forwards;
  }
}
.slide-list-show:nth-of-type(3) {
  -webkit-animation: slide-list-in 0.8s ease 0s 1 forwards;
          animation: slide-list-in 0.8s ease 0s 1 forwards;
}
@media screen and (min-width: 768px) {
  .slide-list-show:nth-of-type(3) {
    -webkit-animation: slide-list-in 0.8s ease 0.4s 1 forwards;
            animation: slide-list-in 0.8s ease 0.4s 1 forwards;
  }
}
@-webkit-keyframes slide-list-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-list-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}