@charset "UTF-8";
/* ============================================ */
/* アニメ 動作指定
/* ============================================ */
/* ================================================== */
/* 単一アニメーション */
/* ================================================== */
/*基本*/
.fadein {
  opacity: 0;
}

.fadein.active {
  animation: fadein 1s both;
}

.top-fadein {
  opacity: 0;
}

.top-fadein.active {
  animation: t-fadein 1s both;
}

.bottom-fadein {
  opacity: 0;
}

.bottom-fadein.active {
  animation: b-fadein 1s both;
}

.left-fadein {
  opacity: 0;
}

.left-fadein.active {
  animation: l-fadein 1s both;
}

.right-fadein {
  opacity: 0;
}

.right-fadein.active {
  animation: r-fadein 1s both;
}

/* ------------- 上から徐々に ------------- */
.roll-top {
  overflow: hidden;
  position: relative;
}

.roll-top:before {
  background: #33E6D1;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.roll-top.active:before {
  animation: roll-top 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes roll-top {
  100% {
    transform: translateY(100%);
  }
}
/* ------------- 左から徐々に ------------- */
.roll-left {
  overflow: hidden;
  position: relative;
  opacity: 1;
}

.roll-left::before {
  background: #ffffff;
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  animation: roll-left 1s ease-in-out forwards;
}

@keyframes roll-left {
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ------------- ぽよん ------------- */
.poyon {
  opacity: 0;
}

.poyon.active {
  animation: poyon 1s cubic-bezier(0, 0.3, 0.3, 1) both;
}

@keyframes poyon {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* ================================================== */
/* 組み合わせアニメーション */
/* ================================================== */
/*アニメ開始前設定（popstyleの数だけ記述必要）*/
.popstyle1, .popstyle2, .popstyle3, .popstyle4 {
  opacity: 0;
}

/* K01　右→下 */
.ani_r-b.active .popstyle1 {
  animation: r-fadein 1.5s both;
}

.ani_r-b.active .popstyle2 {
  animation: b-fadein 1.5s both;
}

.ani_r-b.active .pop01 {
  animation-delay: 0.25s;
}

.ani_r-b.active .pop02 {
  animation-delay: 0.5s;
}

/* K02　左→下 */
.ani_l-b.active .popstyle1 {
  animation: l-fadein 1.5s both;
}

.ani_l-b.active .popstyle2 {
  animation: b-fadein 1.5s both;
}

.ani_l-b.active .pop01 {
  animation-delay: 0.25s;
}

.ani_l-b.active .pop02 {
  animation-delay: 0.5s;
}

/* K03　左→右 */
.ani_l-r.active .popstyle1 {
  animation: l-fadein 1.5s both;
}

.ani_l-r.active .popstyle2 {
  animation: r-fadein 1.5s both;
}

.ani_l-r.active .pop01 {
  animation-delay: 0.25s;
}

.ani_l-r.active .pop02 {
  animation-delay: 0.5s;
}

/* K04　 左→左 */
.ani_l-l.active .popstyle1 {
  animation: l-fadein 1.5s both;
}

.ani_l-l.active .popstyle2 {
  animation: l-fadein 1.5s both;
}

.ani_l-l.active .pop01 {
  animation-delay: 0.25s;
}

.ani_l-l.active .pop02 {
  animation-delay: 0.5s;
}

/* K05　下→下 */
.ani_b-b.active .popstyle1 {
  animation: b-fadein 1.5s both;
}

.ani_b-b.active .popstyle2 {
  animation: b-fadein 1.5s both;
}

.ani_b-b.active .pop01 {
  animation-delay: 0.25s;
}

.ani_b-b.active .pop02 {
  animation-delay: 0.5s;
}

/* K06　順番 下から */
.active.popstyle1 {
  animation: b-fadein 0.7s both;
}

.active.popstyle1:nth-child(1) {
  animation-delay: 0.25s;
}

.active.popstyle1:nth-child(2) {
  animation-delay: 0.5s;
}

.active.popstyle1:nth-child(3) {
  animation-delay: 0.75s;
}

.active.popstyle1:nth-child(4) {
  animation-delay: 1s;
}

.active.popstyle1:nth-child(5) {
  animation-delay: 1.25s;
}

.active.popstyle1:nth-child(6) {
  animation-delay: 1.5s;
}

.active.popstyle1:nth-child(7) {
  animation-delay: 1.75s;
}

.active.popstyle1:nth-child(8) {
  animation-delay: 2s;
}

.active.popstyle1:nth-child(9) {
  animation-delay: 2.25s;
}

/* K06　順番 通常ﾌｪｰﾄﾞｲﾝ */
.active.popstyle2 {
  animation: fadein 1.5s both;
}

.active.popstyle2:nth-child(1) {
  animation-delay: 0.25s;
}

.active.popstyle2:nth-child(2) {
  animation-delay: 0.5s;
}

.active.popstyle2:nth-child(3) {
  animation-delay: 0.75s;
}

.active.popstyle2:nth-child(4) {
  animation-delay: 1s;
}

.active.popstyle2:nth-child(5) {
  animation-delay: 1.25s;
}

.active.popstyle2:nth-child(6) {
  animation-delay: 1.5s;
}

/* K06　順番 左から */
.active.popstyle3 {
  animation: l-fadein 1.5s both;
}

.active.popstyle3:nth-of-type(1) {
  animation-delay: 0.25s;
}

.active.popstyle3:nth-of-type(2) {
  animation-delay: 0.5s;
}

.active.popstyle3:nth-of-type(3) {
  animation-delay: 0.75s;
}

/* ================================================== */
/* 動作指定 */
/* ================================================== */
/*基本*/
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-fadein {
  from {
    opacity: 0;
    transform: translateY(-60px);
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes b-fadein {
  from {
    opacity: 0;
    transform: translateY(80px);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes l-fadein {
  from {
    opacity: 0;
    transform: translate(-80px, 0);
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes r-fadein {
  from {
    opacity: 0;
    transform: translate(80px, 0);
    transition: all 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
/* ------------- ↓以下activeなしアニメーション↓ ------------- */
/* ------------- フェードイン ------------- */
.fadein_ver02 {
  animation: fadein_ver02 1s both;
}

@keyframes fadein_ver02 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ------------- 左からフェードイン ------------- */
.left-fadein_ver02 {
  opacity: 0;
}

.left-fadein_ver02 {
  animation: l-fadein_ver02 1s both;
}

@keyframes l-fadein_ver02 {
  0% {
    transform: translateX(-80px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* ------------- 右からフェードイン ------------- */
.right-fadein_ver02 {
  opacity: 0;
}

.right-fadein_ver02 {
  animation: r-fadein_ver02 1s both;
}

@keyframes r-fadein_ver02 {
  0% {
    transform: translateX(80px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}/*# sourceMappingURL=anime.css.map */