@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);
  }
}
.slide-to-left {
  opacity: 0;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}

.slide-show-to-left {
  -webkit-animation: slide-to-left 1s ease 0.3s 1 forwards;
          animation: slide-to-left 1s ease 0.3s 1 forwards;
}

@-webkit-keyframes slide-to-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slide-to-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.txt-fadein {
  opacity: 0;
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}

.txt-fadein-show {
  -webkit-animation: txtfadein 1s ease forwards;
          animation: txtfadein 1s ease forwards;
}

@-webkit-keyframes txtfadein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes txtfadein {
  0% {
    opacity: 0;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/*以下遅延の指定*/
.txt01 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@media screen and (min-width: 768px) {
  .txt01 {
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
}

.txt02 {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
@media screen and (min-width: 768px) {
  .txt02 {
    -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
  }
}

.txt03 {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}
@media screen and (min-width: 768px) {
  .txt03 {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
  }
}

.txt04 {
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
@media screen and (min-width: 768px) {
  .txt04 {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;
  }
}

.txt05 {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@media screen and (min-width: 768px) {
  .txt05 {
    -webkit-animation-delay: 0.9s;
            animation-delay: 0.9s;
  }
}

.txt06 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@media screen and (min-width: 768px) {
  .txt06 {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
}

.txt07 {
  -webkit-animation-delay: 1.1s;
          animation-delay: 1.1s;
}
@media screen and (min-width: 768px) {
  .txt07 {
    -webkit-animation-delay: 1.1s;
            animation-delay: 1.1s;
  }
}

.txt08 {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
@media screen and (min-width: 768px) {
  .txt08 {
    -webkit-animation-delay: 1.2s;
            animation-delay: 1.2s;
  }
}

.txt09 {
  -webkit-animation-delay: 1.3s;
          animation-delay: 1.3s;
}
@media screen and (min-width: 768px) {
  .txt09 {
    -webkit-animation-delay: 1.3s;
            animation-delay: 1.3s;
  }
}

/* @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);
  }
}