/*青*/

/**************************************************************/
.anime01{
	background:#000;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
}
/**************************************************************/

.anime01a{
	background:#fff;
	color:#fff;
	padding:10px;
	width:200px;
	height:10px;
	border:2px #666 dotted ;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime01a:hover{
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border:5px #ccc solid ;
}

/**************************************************************/
.anime02{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime02:hover{
	-moz-transform: skewY(-15deg);
	-webkit-transform: skewY(-15deg);
	transform: skewY(-15deg);
}
/**************************************************************/
.anime02a{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime02a:hover{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
/**************************************************************/

.anime02b{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 5s ease-in-out;
	-moz-transition: 5s ease-in-out;
	transition: 5s ease-in-out;
}

.anime02b:hover{
	-moz-transform: rotate(36000deg);
	-webkit-transform: rotate(36000deg);
	transform: rotate(36000deg);
}
/**************************************************************/

.anime03{
	background:#000;
	color:#fff;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime03:hover{
	-moz-box-shadow: 10px 3px 15px #666;
	-webkit-box-shadow: 10px 3px 15px #666;
	box-shadow: 10px 3px 15px #666;
}

/**************************************************************/
.anime03a{
	font:25px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime03a:hover{
	text-shadow: 10px 3px 15px #666;
}
/**************************************************************/

.anime04{
	font-size:15px;
	color:#000;
	padding:25px;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04:hover{
	font-size:65px;
}

/**************************************************************/
.anime04a{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04a:hover{
	color:#963;
}

/**************************************************************/
.anime04b{
	font:35px bold;
	color:#000;
	padding:25px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04b:hover{
	text-indent:-999px;
}
/**************************************************************/

.anime04c{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04c:hover{
	-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
	-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
	transform: matrix(-1, 0, 0, 1, 0, 0);
	filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
/**************************************************************/
.anime04d{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

.anime04d:hover{
	text-shadow:
	0 40px #396,
	0 -40px #933,
	200px 0 #669,
	-200px 0 #969;
}

/**************************************************************/

.anime04e{
	font:35px bold;
	color:#000;
	padding:25px;
	text-align:center;
	-webkit-transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out;
	transition: 2s ease-in-out;
}

.anime04e:hover{
	text-shadow:
	0 80px #ccc,
	0 60px #999,
	0 40px #666,
	0 20px #333,
	0 -20px #333,
	0 -40px #666,
	0 -60px #999,
	0 -80px #ccc;
}
/**************************************************************/
.anime04f{
	padding-top:8px;
	text-align:center;
	color:#000;
	width:100px;
	height:22px;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}

.anime04f:hover{
	background:url("../img/button.png") no-repeat;
	color:#fff;
	font-weight:bold;
	-webkit-border-radius:7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

/**************************************************************/

div#anime05 {
	background-color: #69c;
	padding:10px;
	width:100px;
	height:10px;
	-webkit-transition: 1s linear;
	-moz-transition: 1s linear;
	transition: 1s linear;
	}

div#anime05:hover {
	background-color: #9c6;
}

/**************************************************************/

div#anime06 {
	background-color: #69c;
	color: #000000;
	width: 100px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}

div#anime06:hover {
	background-color: #9c6;
	color: #fff;
	width: 200px;
}
/**************************************************************/
div#anime07 {
	background-color: #69c;
	color: #000;
	width: 100px;
	padding:10px;
	-webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
	-moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
	transition: background-color 1s linear, color 1s linear, width 1s linear;
}

div#anime07:hover {
	background-color: #9c6;
	color: #fff;
	width: 200px;
}

div#anime07 img{
	position: relative;
	top: 10px;
	left: 0;
	-webkit-transform: rotate(0deg);
	-webkit-transition: left 1s linear, -webkit-transform 1s linear;
	-moz-transform: rotate(0deg);
	-moz-transition: left 1s linear, -webkit-transform 1s linear;
	transform: rotate(0deg);
	transition: left 1s linear, -webkit-transform 1s linear;
}

div#anime07:hover img {
	left: 200px;
	-webkit-transform: rotate(720deg);
	-moz-transform: rotate(720deg);
	transform: rotate(720deg);
}

/**************************************************************/
div#anime08 {
	padding:5px;
	background-color: #000;
	width:100px;
	height:10px;
}
@keyframes anime08 {
	0%	{ background-color: #000; }
	20%	{ background-color: #69c; }
	40%	{ background-color: #c69; }
	60%	{ background-color: #9c6; }
	80%	{ background-color: #c66; }
	100%	{ background-color: #000; }
}
@-webkit-keyframes anime08 {
	0%	{ background-color: #000; }
	20%	{ background-color: #69c; }
	40%	{ background-color: #c69; }
	60%	{ background-color: #9c6; }
	80%	{ background-color: #c66; }
	100%	{ background-color: #000; }
}

div#anime08:hover {
	-webkit-animation: anime08 10s linear;
	animation: anime08 10s linear;
	}


/**************************************************************/
div#anime09	{
	width: 100px;
	background-color: #69c;
	padding: 10px;
	}

@keyframes anime09 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
@-webkit-keyframes anime09 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
 
div#anime09:hover	{
	-webkit-animation: anime09 5s linear;
	animation: anime09 5s linear;
	}

/**************************************************************/
div#anime10	{
	width: 100px;
	background-color: #69c;
	padding: 10px;
	}

@keyframes anime10 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}
@-webkit-keyframes anime10 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}

div#anime10:hover	{
	-webkit-animation: anime10 5s infinite;
	animation: anime10 5s infinite;
	}


/**************************************************************/
div#anime11	{
	width: 100px;
	background-color: #c69;
	padding: 10px;
	-webkit-animation: anime11 5s linear infinite;
	animation: anime11 5s linear infinite;
	}

@keyframes anime11 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}

@-webkit-keyframes anime11 {
	0%	{
		background-color: #c69;
		-webkit-transform: rotate(0deg);
		}

	40%	{
		background-color: #9c6;
		-webkit-transform: rotate(-10deg);
		}

	70%	{
		background-color: #c66;
		-webkit-transform: rotate(10deg);
		}

	100%	{
		background-color: #69c;
		-webkit-transform: rotate(0deg);
		}
	}