/* ------------------------------------------------------------ voicecontrol */

#voice-control { width: auto; background: rgba(0, 0, 0, 0.9); padding: 20px 30px; border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: fixed; bottom: 0; margin: auto; z-index: 995; box-sizing: border-box; 
	left: 50%; 
	transform: translate(-50%, 0%);
} 
#voice-control ul { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#voice-control ul li { width: 75px; margin: 0 2px; text-align: center; position: relative; padding: 0 0 25px; cursor: pointer; }
#voice-control ul li p { font-size: 12px; position: absolute; bottom: 0; width: 100%; text-align: center; color: #a5a5a5; } 
#voice-control ul li::after,
#voice-control span::after { color: #a5a5a5; left: 0; content: ''; position: absolute; width: 100%; bottom: 0; font-size: 12px; white-space: pre;}

/*
#voice-control ul .li-switch::after { content: '通信開始'; }
#voice-control ul .li-mic::after { content: 'ミュート解除'; }
#voice-control ul .li-cam::after { content: 'ビデオ開始'; }
*/
#voice-control ul .li-loc::after { content: '現在地'; }
#voice-control ul .li-chat::after { content: 'チャット履歴'; }
#voice-control ul .li-news::before { border-radius: 50%; top: 0; content: ''; display: none; position: absolute;
	left: 20%;
	background: #A80002;
	width: 10px;
	height: 10px;
}
#voice-control ul .li-news.active::before { display: block; }

#voice-control .btn { width: 30px; height: 30px; margin: auto; display: flex; flex-wrap: wrap; align-items: center; overflow: hidden;  }
#voice-control span { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	background-size: 100% auto !important;
}

#voice-control span.mic::after { content: 'ミュート'; }
#voice-control span.mic.on { background: url(../images/common/mic_on.png) no-repeat center center; }
#voice-control span.mic.off { background: url(../images/common/mic_off.png) no-repeat center center; }
#voice-control span.mic.disabled { background: url(../images/common/mic_disabled.png) no-repeat center center; }
#voice-control span.mic.on::after { content: 'ミュート'; }

#voice-control span.cam::after { content: 'ビデオ開始'; }
#voice-control span.cam.on { background: url(../images/common/cam_on.png) no-repeat center center; }
#voice-control span.cam.off { background: url(../images/common/cam_off.png) no-repeat center center; }
#voice-control span.cam.disabled { background: url(../images/common/cam_disabled.png) no-repeat center center; }
#voice-control span.cam.on::after { content: 'ビデオ停止'; }

#voice-control span.speaker.on { background: url(../images/common/speaker_on.png) no-repeat center center; }
#voice-control span.speaker.off { background: url(../images/common/speaker_off.png) no-repeat center center; }

#voice-control span.screen::after { content: '画面共有'; }
#voice-control span.screen.on { background: url(../images/common/screen_on.png) no-repeat center center; }
#voice-control span.screen.off { background: url(../images/common/screen_off.png) no-repeat center center; }
#voice-control span.screen.disabled { background: url(../images/common/screen_disabled.png) no-repeat center center; }
#voice-control span.screen.on::after { content: '画面共有'; }

#voice-area { position: fixed; top: 30px; left: 30px; z-index: 990; padding: 2px; border-radius: 50px; overflow: hidden;
	background: -webkit-linear-gradient(0deg, rgba(153, 41, 204, 1), rgba(108, 222, 245, 1));
}
#voice-area p { background: #000; color: #fff; padding: 0 30px; height: 45px; line-height: 45px; border-radius: 50px; }

#voice-loading { display: none; z-index: 998; position: fixed; top: 0; left: 0; width: 100%; text-align: center; }
#voice-loading p { display: inline-block; background: #000; color: #fff; padding: 10px 30px; }

/* ------------------------------------------------------------ switch */

.switch { position: relative; display: inline-block; width: 55px; height: 32px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.switch .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.switch input:checked + .slider { background-color: #b9041d; }
.switch input:focus + .slider { box-shadow: 0 0 1px #292B2D; }
.switch input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }

/* Rounded sliders */
.switch .slider.round { border-radius: 34px; }
.switch .slider.round:before { border-radius: 50%; }

#voice-control .switch .slider::after { content: '通信開始'; bottom: -24px; }
#voice-control .switch input:checked + .slider:after { content: '通信終了'; }

/* ------------------------------------------------------------ Ipad */

@media only screen and (max-width:1280px){
	#voice-control { margin: 0; left: auto; right: 0; transform: none; border-top-right-radius: 0; }
}

/*
@media only screen and (min-device-width: 375px) and (max-device-width: 1000px) and (orientation: landscape) {
	#voice-control {  padding: 10px 15px 15px;}
	#voice-control ul li { width: 45px;padding: 0 0 27px;}
	#voice-control ul li::after,
	#voice-control span::after { font-size: 11px;}
	#voice-control ul li p { font-size: 11px;bottom: 3px;}
	#voice-control ul li .btn{width: 21px; height: 21px;}
	
	#voice-control ul .li-loc::after { content: '現在地'; bottom: 5px;}
	#voice-control ul .li-loc img{width: 22px; height: auto;}
	#voice-control ul .li-chat::after { content: 'チャット\A履歴'; bottom: -3px;}
	#voice-control ul .li-chat img{width: 25px; height: auto;}

	
	#voice-control span.mic::after { content: 'ミュート'; }
	#voice-control span.mic.on::after { content: 'ミュート'; }
	
	#voice-control span.cam::after { content: 'ビデオ\A開始'; bottom: -7px;}
	#voice-control span.cam.on::after { content: 'ビデオ\A停止'; }
	
	#voice-control span.screen::after { content: '画面\A共有'; bottom: -7px;}
	#voice-control span.screen.on::after { content: '画面\A共有'; }

	#voice-control .switch .slider::after { content: '通信\A開始'; bottom: -33px; }
	#voice-control .switch input:checked + .slider:after { content: '通信\A終了'; }
	
	.switch { width: 40px; height: 22px;}
	.switch .slider::before { position: absolute; content: ""; height: 15px; width: 15px;}
	#voice-control ul .li-news img{width: 25px; height: auto;}
	.switch input:checked + .slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px); }
}
*/
/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
		
	#voice-control { z-index: 990; border-radius: 0; width: 100%; padding: 10px 6px 6px; bottom: 0; }
	#voice-control .btn { width: 22px; height: 22px; padding: 0; }
	#voice-control ul li img { width: 22px; height: auto; }
	#voice-control ul li p { font-size: 9px; bottom: 6px;}
	
	#voice-control ul li { width: calc(100% / 6); margin: 0; padding: 0 0 27px; }
	#voice-control ul li::after, 
	#voice-control span::after { font-size: 9px;line-height: 140%; }
	#voice-control .switch .slider::after { bottom: -20px; }
	
	#voice-control ul li.li-screen { display: none !important; }
	
	#voice-area { top: 15px; left: 15px;  }
	#voice-area p { padding: 0 20px; height: 35px; line-height: 35px; font-size: 14px; }
	
	#voice-loading p {font-size: 12px; padding: 8px 20px; }
	
	#voice-control ul .li-loc::after { content: '現在地'; bottom: 6px;}
	#voice-control ul .li-chat::after { content: 'チャット\A履歴'; }
	
	#voice-control span.mic::after { content: 'ミュート'; bottom: 6px;}
	#voice-control span.mic.on::after { content: 'ミュート'; }
	
	#voice-control span.cam::after { content: 'ビデオ\A開始'; }
	#voice-control span.cam.on::after { content: 'ビデオ\A停止'; }
	
	#voice-control span.screen::after { content: '画面\A共有'; }
	#voice-control span.screen.on::after { content: '画面\A共有'; }

	#voice-control .switch .slider::after { content: '通信開始'; }
	#voice-control .switch input:checked + .slider:after { content: '通信終了';}
	
	.switch { width: 42px; height: 24px; }
	.switch .slider::before { width: 17px; height: 17px; }

}