@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

.button {
	width: 150px;
	height: 40px;
	position: relative;
	font: 15px/40px Roboto Condensed, sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-user-select: none;
	cursor: default;
	margin: -1px 0px 0px -1px;
}

.button:hover {
	cursor: pointer;
}

.setting {
	overflow: hidden;
	width: 150px;
	height: 40px;
	float: left;
}

.setting div {
	position: absolute;
	text-align: center;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	width: 150px;
	height: 40px;
}

.setting div:nth-child(1) {
	background-color: #000000;
	top: 1px;
	left: 0px;
	border-left: #AAAAAA solid 1px;
	border-right: #AAAAAA solid 1px;
}

.setting div:nth-child(2) {
	color: #FFFFFF;
	width: 150px;
	height: 40px;
}

.setting:hover div:nth-child(1) {
	animation: setting_bg 0.3s linear;
	-webkit-animation: setting_bg 0.3s linear;
	-moz-animation: setting_bg 0.3s linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

.setting:hover div:nth-child(2) {
	color: #000000;
	animation: setting 0.3s linear;
	-webkit-animation: setting 0.3s linear;
	-moz-animation: setting 0.3s linear;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .setting:hover div:nth-child(2) {
	background-color: #F1F1F1;
	}
}


@-webkit-keyframes setting_bg {
	49.00% {
		background-color: #000000;
	}
	50.00% {
		background-color: #F1F1F1;
	}
	to {
		background-color: #F1F1F1;
	}
}

@-webkit-keyframes setting {
	from {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #FFFFFF;
	}

	25.00% {
		transform: skewX(80deg);
		-webkit-transform: skewX(80deg);
		-moz-transform: skewX(80deg);
		color: #FFFFFF;
	}

	75.00% {
		transform: skewX(-20deg);
		-webkit-transform: skewX(-20deg);
		-moz-transform: skewX(-20deg);
		color: #000000;
	}

	90.00% {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #000000;
	}

	to {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #000000;
	}
}

@-moz-keyframes setting_bg {
	49.00% {
		background-color: #000000;
	}

	50.00% {
		background-color: #F1F1F1;
	}

	to {
		background-color: #F1F1F1;
	}
}

@-moz-keyframes setting {
	from {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #FFFFFF;
	}

	25.00% {
		transform: skewX(80deg);
		-webkit-transform: skewX(80deg);
		-moz-transform: skewX(80deg);
		color: #FFFFFF;
	}

	75.00% {
		transform: skewX(-20deg);
		-webkit-transform: skewX(-20deg);
		-moz-transform: skewX(-20deg);
		color: #000000;
	}

	90.00% {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #000000;
	}

	to {
		transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		color: #000000;
	}
}

.setting span {
	position: absolute;
	font: 10px/10px "Noto Sans JP", "ŸΰƒSƒVƒbƒN Medium", "ŸΰƒSƒVƒbƒN‘Μ", "Yu Gothic Medium", YuGothic, "ƒqƒ‰ƒMƒmŠpƒS ProN", "Hiragino Kaku Gothic ProN", "ƒƒCƒŠƒI", Meiryo, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 28px 0px 0px -58px;
}

.setting #vol {
	position: absolute;
	font: 10px/10px "Noto Sans JP", "ŸΰƒSƒVƒbƒN Medium", "ŸΰƒSƒVƒbƒN‘Μ", "Yu Gothic Medium", YuGothic, "ƒqƒ‰ƒMƒmŠpƒS ProN", "Hiragino Kaku Gothic ProN", "ƒƒCƒŠƒI", Meiryo, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
	font-weight: 700;
	letter-spacing: -1px;
	margin: 28px 0px 0px -73px;
}

.soon {
	overflow: hidden;
	width: 150px;
	height: 40px;
	float: left;
}

.soon div {
	position: absolute;
	width: 150px;
	height: 40px;
	color: #666666;
	border-left: #AAAAAA solid 1px;
	border-right: #AAAAAA solid 1px;
	text-align: center;
}

.soon div div {
	width: 150px;
	height: 40px;
}

.soon:hover {
	background-color: #F1F1F1;
	margin-top: 0px;
}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, .soon:hover {
	background-color: #F1F1F1;
	margin-top: 0px;
	}
}



/* --------------------------------------------------------------------------------------------
 @Safari‘΍τέ’θ
-------------------------------------------------------------------------------------------- */

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .button {
		width: 150px;
		height: 40px;
		background-color: #000000;
		color: #FFFFFF;
	}

	::i-block-chrome, .setting:hover div:nth-child(1) {
		display: none;
	}

	::i-block-chrome, .setting:hover div:nth-child(2) {
		display: none;
	}

	::i-block-chrome, .setting {
		border-top: 1px #999999 solid;
	}

	::i-block-chrome, .setting:hover {
		background-color: #FFFFFF;
		color: #000000;
		border-left: 1px #999999 solid;
	}

	::i-block-chrome, .soon div {
		border-top: 1px #999999 solid;
	}

	::i-block-chrome, #end {
		margin-left: -1px;
	}

}