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

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

/*基本*/

.fadein{
  opacity: 0;
}
.fadein.active {
  opacity: 1;	
  transition: 1.5s;
}

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

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

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

.right-fadein{
  opacity: 0;
}
.right-fadein.active {
  animation: r-fadein 1.5s both;	
}

/* ================================================== */
/* 組み合わせアニメーション */
/* ================================================== */
/*アニメ開始前設定（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 1.5s 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;
}



/* 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-child(1){
	animation-delay: 0.25s;
}
.active.popstyle3:nth-child(2){
	animation-delay: 0.5s;
}
.active.popstyle3:nth-child(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(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes b-fadein {
from {
    opacity: 0;
    transform: translateY(80px);
		transition: all 1.5s 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(60px, 0);
		transition: all 1.5s cubic-bezier(.23,1,.32,1) .2s;
}
to {
    opacity: 1;
		transform: translate(0, 0);
}
}