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



/*============================
common
============================*/
/*最初のスタイル　透過0で非表示*/
.clear{opacity: 0;}

/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time02{animation-delay: 0.2s;}
.delay-time03{animation-delay: 0.3s;}
.delay-time04{animation-delay: 0.4s;}
.delay-time05{animation-delay: 0.5s;}
.delay-time06{animation-delay: 0.6s;}



/*============================
SALEタイトル用
============================*/
.fadeUp {/*ふわっと表示*/
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}



.bounceIn {/*ぼよんと表示*/
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
	 -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3);}
  20% {-webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1);}
  40% {-webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9);}
  60% {opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03);}
  80% {-webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97);}
  100% {opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}
}



/*============================
スクロール時に下からフェードイン
============================*/
.down-to-top{ /*スクロール前のスタイル
	opacity : 0;
	visibility: hidden;
	transition: 1s;
	transform: translateY(200px);*/
}
.active{ /*要素までスクロールした時のスタイル
	opacity: 1;
	visibility: visible;
	transform: translateY(0);*/
}



/*============================
ふわふわ
============================*/
.fuwafuwa {
	-webkit-animation-name:fuwafuwa;
	-webkit-animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:2s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -100px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -100px);}
	100% {-moz-transform:translate(0, 0);}
}



/*============================
点滅
============================*/
.blinking{
-webkit-animation:blink 1.0s ease-in-out infinite alternate;
    -moz-animation:blink 1.0s ease-in-out infinite alternate;
    animation:blink 1.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}



/*============================
拡大縮小
============================*/
.zooming {
  animation: anime1 0.8s ease 0s infinite alternate;
  transform-origin:center;
}
@keyframes anime1 {
  from {
    transform: scale(0.9,0.9);
  }
  to {
    transform: scale(1,1);
  }
}

/*============================
ボタンの動き
============================*/
/*ぽよんっとなるボタン*/
.poyon {
    border-radius: 40px;
	padding: 20px 0;

    /* アニメーション記述ここから */
    animation: poyon 1.4s linear infinite;
}

@keyframes poyon {
    60% {
        transform: scale(1, 1);
    }
    65% {
        transform: scale(0.85, 1.15);
    }
    75% {
        transform: scale(1.1, 0.9);
    }
    85% {
        transform: scale(0.95, 1.08);
    }
    9% {
        transform: scale(0.98, 1.02);
    }
    100% {
        transform: scale(1, 1);
    }
}

/*縦ゆれボタン*/
.t-yurebtn {
    animation: t-yurebtn 2s infinite;
}
@keyframes t-yurebtn {
    0% {
        transform: translate(0px, 2px);
    }
    5% {
        transform: translate(0px, -2px);
    }
    10% {
        transform: translate(0px, 2px);
    }
    15% {
        transform: translate(0px, -2px);
    }
    20% {
        transform: translate(0px, 2px);
    }
    25% {
        transform: translate(0px, -2px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}

/*横ゆれボタン*/
.y-yurebtn {
    animation: y-yurebtn 2s infinite;
}
@keyframes y-yurebtn {
    0% {
        transform: translate(2px, 0px);
    }
    5% {
        transform: translate(-2px, 0px);
    }
    10% {
        transform: translate(2px, 0px);
    }
    15% {
        transform: translate(-2px, 0px);
    }
    20% {
        transform: translate(2px, 0px);
    }
    25% {
        transform: translate(-2px, 0px);
    }
    30% {
        transform: translate(0px, 0px);
    }
}