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

	
/* 1つ目：縮小・拡大 */
.list-mv01{
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
}
.mv01{
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}

/* 2つ目：opacity*/
.list-mv02{
	opacity: 0;
}
.mv02{
	opacity: 1.0;
}

/* 3つ目：回転 */
.list-mv03{
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.mv03{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}


	/* 4つ目：3D回転 */
	.list-mv04{
		transform:rotateY(0deg);
		-webkit-transform:rotateY(0deg);
	}
	.mv04{
		transform:rotateY(360deg);
		-webkit-transform:rotateY(360deg);
	}

/* 5つ目：移動 */
.list-mv05{
	transform: translate(0,40px); 
	-webkit-transform: translate(0,40px); 
}
.mv05{
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/* ６つ目：縮小・拡大＆3D回転 */
.list-mv06{
	transform: scale(0, 0) rotateY(180deg);
	-webkit-transform: scale(0, 0) rotateY(180deg);
}
.mv06{
	transform: scale(1, 1) rotateY(360deg);
	-webkit-transform: scale(1, 1) rotateY(360deg);
}


/* ７つ目：移動＋透明度 */
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
	transition: 1s 0.3s;
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
	transition: 1s 0.3s;
}

  .mod-btn-demo {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;
  }
  .mod-btn-demo::before,
  .mod-btn-demo::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
  }
  .mod-btn-demo,
  .mod-btn-demo::before,
  .mod-btn-demo::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
  }

  .mod-btn-demo{
    width: 200px;
    position: relative;
    z-index: 2;
    background-color: #fff;
    border: 2px solid #333;
    color: #333;
    line-height: 50px;
    overflow: hidden;
  }
  .mod-btn-demo:hover {
    color: #fff;
  }

  .mod-btn-demo::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.5);
    transform: scale(.5);
  }
  .mod-btn-demo:hover::after {
    background: #333;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

/* CSS Document */