/* PC用CSS */
@media screen and (min-width: 721px) {
	body{
		background-color: #000000; /*背景色を#89c7de*/
		color: #fff; /*テキストカラーを#fff*/
	}

	header{
		width: 100%; /*横幅を親要素の100%*/
		background-color: #89c7de; /*背景色を#89c7de*/
		color: #000; /*テキストカラーを#fff*/
	  text-align: center; /*中央揃え*/
		padding: 10px 0; /*上下30px左右0*/
		font-size: 200%; /*フォントサイズを200%*/
	}

	footer{
		width: 100%; /*横幅を親要素の100%*/
	  background-color: #89c7de; /*背景色を#89c7de*/
	  color: #000; /*テキストカラーを#fff*/
	  text-align: center; /*中央揃え*/
	  padding: 30px 0; /*上下30px左右0*/
		bottom: 0; /*下に固定*/
	}

	div.display{
		width: 90%;
		max-width: 1000px;
		min-width: 620px;
		background-color: #111111;
		text-align: center;
		margin: 10px auto;
	}

	div.display table{
		font-size: 100%;
	}

	div.display td{
		width: 50px;
		height: 50px;
		min-width: 50px;
	}

	div.display td img{
		width: 100%;
	}

	div.text{
		width: 90%;
		display: table-cell;
		vertical-align: middle;
	}

	div#text{
		display: table;
		width:90%;
		max-width: 1000px;
		height: 100px;
		background-color: #111111;
		text-align: center;
		margin: 10px auto;
	}

	div.controller{
		width:90%;
		max-width: 1000px;
		max-width: 1000px;
		background-color: #111111;
		text-align: center;
		margin: 10px auto;
	}

	div.controller td{
		font-size: 250%;
		width: 50px;
		height: 50px;
	}

	table{
		margin: 10px auto;
	}

	/* button */
	button {
	  display: inline-block;
	  padding: 0.1em 0.5em;
	  border: 0.16em solid rgba(255, 255, 255, 0);
	  background-color: rgb(80, 10, 172);
	  border-radius: 2em;
	  box-sizing: border-box;
	  text-decoration: none;
	  font-family: "Roboto", sans-serif;
	  font-weight: 300;
	  color: #ffffff;
	  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
	  text-align: center;
	  transition: all 0.2s;
	}

	button:hover {
	  border-color: rgb(255, 255, 255);
	}
	/* button */

	.bgc-lime{
		background-color: #008000;
		color: #008000;
	}

	.bgc-gray{
		background-color: #8B4513;
		color: #8B4513;
	}

	.bgc-aqua{
		background-color: #0000FF;
		color: #0000FF;
	}
}