@charset "UTF-8";
/* CSS Document */


.a-upFade {
  opacity:0;
  transform:translateY(32px);
  transition:transform .35s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-upFade.on-enter {
  opacity:1;
  transform:translateY(0)
}
.a-upScaleFade {
  opacity:0;
  transform:scale(.5);
  transition:transform .35s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-upScaleFade.on-enter {
  opacity:1;
  transform:scale(1)
}
.a-upScaleFadeOutBack {
  opacity:0;
  transform:scale(.5);
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-upScaleFadeOutBack.on-enter {
  opacity:1;
  transform:scale(1)
}
.a-downScaleFade {
  opacity:0;
  transform:scale(1.3);
  transition:transform .35s cubic-bezier(.215,.61,.355,1),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-downScaleFade.on-enter {
  opacity:1;
  transform:scale(1)
}
.a-downScaleFadeOutBack {
  opacity:0;
  transform:scale(1.3);
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-downScaleFadeOutBack.on-enter {
  opacity:1;
  transform:scale(1)
}
.a-rotateSlideIn {
  opacity:0;
  transform:translate(16px,16px) rotate(16deg);
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275),opacity .35s cubic-bezier(.215,.61,.355,1)
}
.a-rotateSlideIn.on-enter {
  opacity:1;
  transform:translate(0) rotate(0)
}
@keyframes a-neon {
  0% {
    opacity:1
  }
  30% {
    opacity:1
  }
  31% {
    opacity:0
  }
  34% {
    opacity:0
  }
  35% {
    opacity:1
  }
  40% {
    opacity:1
  }
  41% {
    opacity:0
  }
  42% {
    opacity:0
  }
  43% {
    opacity:1
  }
  to {
    opacity:1
  }
}
.a-titleFadeIn>* {
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1s cubic-bezier(.165,.84,.44,1),transform 1s cubic-bezier(.165,.84,.44,1)
}
.a-titleFadeIn>*:nth-child(1) {
  transition-delay:.08s
}
.a-titleFadeIn>*:nth-child(2) {
  transition-delay:.16s
}
.a-titleFadeIn>*:nth-child(3) {
  transition-delay:.24s
}
.a-titleFadeIn.on-enter>* {
  opacity:1;
  transform:translateY(0)
}





.fadeInBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.blok {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 2s; /* 動きを滑らかに */
}
.fadeIn {
    opacity: 1;
}
/* ここから時間差フェードインアニメーション */

/* 1秒間かけてフェードイン */
.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(30px);/* -50px下からフェードイン */
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 0.5秒間かけてフェードイン */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-30px);/* -50px右からフェードイン */
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 2秒間かけてフェードイン */
.fadeIn2s {
    animation-name: fadeIn2s;
    animation-delay: 2s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(-50px);
    opacity: 0;
}
@keyframes fadeIn2s {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}