/*-----------------------------------
アニメーション 
-----------------------------------*/
.anime {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  background: linear-gradient(271deg, #a0dcd8, #b3acd1, #f2d4e3, #fffe9c);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
  position: relative;
  z-index: 10000;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}
 
@-webkit-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes AnimationName { 
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
.anime p{
  opacity: 0;
}
.anime .txt{
  display: block;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  color: #1A1A1A;
}

.anime .txt span.type02{
  display: block;
  font-size: 60px;
  font-weight: bold;
  line-height: 1;
  margin-top: 20px;
}
.anime .txt span.type02:after {
  content: "";
  background: #FFFF00;
  display: block;
  width: 100%;
  height: 20px;
  margin-top: -15px;
}
.anime .logo{
  display: block;
  width: 300px;
  margin: 80px auto 0;
}
.anime .logo img{
  width: 100%;
}
.css-fade1{
  animation-name:fade-in1;
  animation-duration:2s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:1s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in1 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}

.css-fade2{
  animation-name:fade-in2;
  animation-duration:2s; /*アニメーション時間*/
  animation-timing-function: ease-out; /*アニメーションさせるイージング*/
  animation-delay:2s; /*アニメーション開始させる時間*/
  animation-iteration-count:1; /*繰り返し回数*/
  animation-direction:normal; /*往復処理をするかどうか*/
  animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
}
@keyframes fade-in2 {
  0% {opacity: 0; transform: translate3d(0,20px,0);}
  100% {opacity: 1; transform: translate3d(0,0,0);}
}