@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic);
@import url("normalize.css"); 
/*----------------------------
	General Style
------------------------------*/
body{
	width: 750px;
    height: auto;
	margin: auto;
    font-family:"ＭＳ P明朝", Osaka, sans-serif, メイリオ, Meiryo, serif;
	font-size: 1em;
	background: #ddd;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

a{
	text-decoration: none;  /* 下線なし */
}

/*----------------------------
	Header Style
------------------------------*/
header{
	margin: 2px auto;
	padding: 4px 10px 6px 10px;
	background: rgba(254, 244, 244, 0.5);
	font-size: 0.8em;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	box-shadow: gray 4px 5px 10px 2px;
	border-radius: 3px;
}

.first,
.second{
	padding: 2px;
	height: 26px;
	display: table; /* IE9 */
	display: flex;
	display: -moz-box;		/* Fx用 */
	display: -webkit-box; 	/* Safari、スマホ用 */
	display: -ms-flexbox;
	display: -webkit-flex;
	-moz-box-orient: horizontal;	/* Fx用 */
	-moz-direction: normal;			/* Fx用 */
	-webkit-box-orient: horizontal;	/* Safari、スマホ用 */
	-webkit-direction: normal;		/* Safari、スマホ用 */
	-ms-flex-direction: row;
	-webkit-flex-direction: row;
	flex-direction: row;
	-moz-box-pack: start;		/* Fx用 */
	-webkit-box-pack: start;	/* Safari、スマホ用 */
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}

.text{
	padding: 2px;
	width: 50px;
	line-height: 18px;
}

.button{
	display: table-cell; /* IE9 */
	width: 80px;
	padding: 2px;
	background-color: #ff9999;
	text-align: center;
	line-height: 18px;
	color: #000;
	text-shadow: 1px 1px 1px #fff;
	border-radius: 5px;
	border: 0.1px solid #ddd;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
/*	box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);*/
}

header .button:hover{
    animation: shake 0.2s linear infinite; 
    -webkit-animation: shake 0.2s linear infinite; 
	color: #ff1493;
	font-weight: 700;
	background: #ffe4e1; /* Old browsers */
	background: -moz-linear-gradient(top, #ffe4e1 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe4e1), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffe4e1 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffe4e1 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffe4e1 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
	background: linear-gradient(top, #ffe4e1 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
/*	box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);*/
}

@keyframes shake { 
    0% { transform: translate(3px, 2px) rotate(0deg); } 
    10% { transform: translate(-2px, -3px) rotate(-1deg); } 
    20% { transform: translate(-4px, 0px) rotate(1deg); } 
    30% { transform: translate(0px, 3px) rotate(0deg); } 
    40% { transform: translate(2px, -2px) rotate(1deg); } 
    50% { transform: translate(-2px, 3px) rotate(-1deg); } 
    60% { transform: translate(-4px, 2px) rotate(0deg); } 
    70% { transform: translate(3px, 2px) rotate(-1deg); } 
    80% { transform: translate(-2px, -2px) rotate(1deg); } 
    90% { transform: translate(2px, 4px) rotate(0deg); } 
    100% { transform: translate(2px, -3px) rotate(-1deg); } 
}