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

/* ================================================== */
/* 単一アニメーション */
/* ================================================== */

/*基本*/

.fadein{
  opacity: 0;
}
.fadein.active {
  opacity: 1;	
  animation: fadein 1.0s both;
}

.top-fadein{
  opacity: 0;
}
.top-fadein.active {
  animation: t-fadein 1.0s both;	
}

.bottom-fadein{
  opacity: 0;
}
.bottom-fadein.active {
  animation: b-fadein 1.0s both;
}

.left-fadein{
  opacity: 0;
}
.left-fadein.active {
  animation: l-fadein 1.0s both;	
}

.right-fadein{
  opacity: 0;
}
.right-fadein.active {
  animation: r-fadein 1.0s 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: #fff;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  animation: roll-left 1.5s ease-in-out forwards;
}

@keyframes roll-left {
  50% {
	  transform: translateX(0);
  }
  100% {
	  transform: translateX(100%);
  }
}



/* ------------- ぽよん ------------- */

.poyon {
  opacity: 0;
  }
.poyon.active{
  animation: poyon 1.0s 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.0); 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.50s;
}

/* 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.50s;
}

/* 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.50s;
}

/* 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.50s;
}

/* 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.50s;
}


/* 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: 1.0s;
}
.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: 2.0s;
}
.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: 1.0s;
}
.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;
}


/* 順番 下から一気にフェードイン */
.step_bottom .step{
 opacity: 0;
  }
.step_bottom.active .step{
  animation: b-fadein 1.0s both;
  }
.step_bottom.active .step:nth-child(1){animation-delay: 0.25s;}
.step_bottom.active .step:nth-child(2){animation-delay: 0.5s;}
.step_bottom.active .step:nth-child(3){animation-delay: 0.75s;}
.step_bottom.active .step:nth-child(4){animation-delay: 1.0s;}
.step_bottom.active .step:nth-child(5){animation-delay: 1.25s;}
.step_bottom.active .step:nth-child(6){animation-delay: 1.5s;}
.step_bottom.active .step:nth-child(7){animation-delay: 1.75s;}
.step_bottom.active .step:nth-child(8){animation-delay: 2.0s;}
.step_bottom.active .step:nth-child(9){animation-delay: 2.25s;}
.step_bottom.active .step:nth-child(10){animation-delay: 2.5s;}




/* ================================================== */
/* 動作指定 */
/* ================================================== */

/*基本*/

@keyframes fadein {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}

@keyframes t-fadein {
 from {
    opacity: 0;
    transform: translateY(-60px);
		transition: all 1.5s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes b-fadein {
from {
    opacity: 0;
    transform: translateY(50px);
		transition: all 1.0s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes l-fadein {
from {
    opacity: 0;
		transform: translate(-80px, 0);
		transition: all 1.5s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
		transform: translate(0, 0);
}
}

@keyframes r-fadein {
from {
    opacity: 0;
		transform: translate(80px, 0);
		transition: all 1.5s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
		transform: translate(0, 0);
}
}






/* ------------- ↓以下activeなしアニメーション↓ ------------- */

/* ------------- フェードイン ------------- */

.fadein_ver02 {
	animation: fadein_ver02 1.0s 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% {
  -webkit-transform: translateX(-80px);
  -moz-transform: translateX(-80px);
  -ms-transform: translateX(-80px);
  transform: translateX(-80px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}

/* ------------- 右からフェードイン ------------- */

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

@keyframes r-fadein_ver02 {
	
  0% {
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  -ms-transform: translateX(80px);
  transform: translateX(80px);
  opacity: 0;}
	
  100% {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  }
}