@charset "UTF-8";

/*----------------------------------------------
	header 
------------------------------------------------*/
body {
	background: #000;
}
#header_wrapper {
	width: 982px;
	height: 40px;
	margin: 0 auto;
	position: relative;
}

/*----- bgm ----*/
#bgm_wrapper {
	position: relative;
	padding-top: 8px;
}
#btn_bgm_area {
	position: absolute;
	left: 70px;
}
#btn_bgm_area li {
	float: left;
	margin-right: 20px;
}
#btn_volume_area {
	cursor: pointer;
}
.btn_scale00 {
	width: 26px;
	height: 24px;
	background: url('../img/bgm.png') 0 0;
	cursor: pointer;
}
.btn_scale01 {
	width: 11px;
	height: 24px;
	background: url('../img/bgm_volume.png') 0 0;
}
.btn_scale02 {
	width: 11px;
	height: 24px;
	background: url('../img/bgm_volume.png') -11px 0;
}
.btn_scale03 {
	width: 11px;
	height: 24px;
	background: url('../img/bgm_volume.png') -22px 0;
}
.btn_scale00.selected {
	background-position: 0 100%;
}
.btn_scale01.selected {
	background-position: 0 -24px;
}
.btn_scale02.selected {
	background-position: -11px -24px;
}
.btn_scale03.selected {
	background-position: -22px -24px;
}
#btn_volume_area li {
	float: left;
}

#btn_bgm {
	width: 200px;
	height: 50px;
	background: #dcdcdc;
	cursor: pointer;
}
#btn_bgm01 {
	width: 108px;
	height: 24px;
	background: url('../img/bgm_retro.png');
	cursor: pointer;
}
#btn_bgm01:hover {
	background-position: 0 100%;
}

#btn_bgm02 {
	width: 114px;
	height: 23px;
	background: url('../img/bgm_real.png');
	cursor: pointer;
}
#btn_bgm02:hover {
	background-position: 0 100%;
}

#btn_bgm01.active, #btn_bgm02.active {
	background-position: 0 100%;	
}

/*----- SNS ----*/
#sns_wrapper {
	position: absolute;
	top: 0px;
	left: 785px;
	padding-top: 8px;
}
#sns_wrapper li {
	float: left;
}
#sns_wrapper li:nth-child(1) {
	margin-right: 8px;
}