/* **************************************************************** *
 * @desc@ jPlayerスキン
 * @edit@ 2014/05/15
 * **************************************************************** */
div.jp-jplayer,div.jp-jplayer audio{
	margin:0 !important;padding:0 !important;
	width:0 !important;height:0 !important;
}
div.jp-audio{
	overflow:hidden;
	position:relative;
	margin:0;
	padding:0;
}
/* ボタン・バー画像 */
div.jp-audio ul.jp-controls p,
div.jp-audio ul.jp-toggles p,
div.jp-audio div.jp-seek-bar,
div.jp-audio div.jp-play-bar,
div.jp-audio div.jp-volume-bar,
div.jp-audio div.jp-volume-bar-value{
	background-image:url(jplayer.bro.png);
}
/* ボタン */
div.jp-audio ul.jp-controls p,
div.jp-audio ul.jp-toggles p{
	background-repeat:no-repeat;
}
/* バー */
div.jp-audio div.jp-seek-bar,
div.jp-audio div.jp-play-bar,
div.jp-audio div.jp-volume-bar,
div.jp-audio div.jp-volume-bar-value{
	background-repeat:repeat-x;
}

/* =============================================================== *
 * @desc@ ボタン型プレイヤー
 * =============================================================== */
div.jp-button{
	border:1px solid #ddd;
	border-radius:20px;
	width:40px;
	background-color:#eee;
	color:#666;
	box-shadow:0 0 8px #ddd;
}
div.jp-button div.jp-interface{
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:40px;
}
/* --------------------------------------------------------------- *
 * @desc@ 操作パネル
 * --------------------------------------------------------------- */
div.jp-button ul.jp-controls{
	overflow:hidden;
	list-style-type:none;
	margin:0;
	padding:0;
}
div.jp-button ul.jp-controls li{
	position:absolute;
	display:block;
	margin:0;
	padding:0;
}
div.jp-button ul.jp-controls p{
	display:block;
	overflow:hidden;
	margin:0;
	border-radius:20px;
	padding:0;
	width:40px;
	height:40px;
	text-indent:-9999px;
	cursor:pointer;
}
/* 再生 */
div.jp-button ul.jp-controls p.jp-play{
	background-position:0 0;
}
div.jp-button ul.jp-controls p.jp-play:hover{
	background-position:-41px 0;
}
/* 一時停止 */
div.jp-button ul.jp-controls p.jp-pause{
	display:none;
	background-position:-82px 0;
}
div.jp-button ul.jp-controls p.jp-pause:hover{
	background-position:-123px 0;
}
/* --------------------------------------------------------------- *
 * @desc@ 再生できない場合
 * --------------------------------------------------------------- */
div.jp-button .jp-no-solution{
	display:none;
	border:2px solid #009be3;
	padding:5px;
	background-color:#eee;
	color:#000;
	font-size:.8em;
}
div.jp-button .jp-no-solution a{
	color:#000;
}
div.jp-button .jp-no-solution span{
	display:block;
	font-size:1em;
	font-weight:bold;
	text-align:center;
}


/* =============================================================== *
 * @desc@ シングルプレイヤー
 * =============================================================== */
div.jp-single{
	border:1px solid #ddd;
	border-radius:4px;
	//width:310px;
	width:245px;
	background-color:#eee;
	color:#666;
	font-size:1.25em;
	font-family:
		"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",
		Helvetica,Verdana,Roboto,"Droid Sans",
		"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN",
		Arial,Osaka,sans-serif !important;
	line-height:1.1em;
	//box-shadow:0 0 8px #ddd;
	font-size:15px
}
div.jp-single div.jp-interface{
	position:relative;
	border-radius:4px;
	width:100%;
	height:30px;
	background-color:#eee;
}
/* --------------------------------------------------------------- *
 * @desc@ 操作ボタン
 * --------------------------------------------------------------- */
div.jp-single ul.jp-controls{
	overflow:hidden;
	list-style-type:none;
	margin:0;
	padding:7px 7px 0 7px;
}
div.jp-single ul.jp-controls li{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
div.jp-single ul.jp-controls p{
	display:block;
	overflow:hidden;
	margin:0;
	padding:0;
	background-color:transparent;
	background-repeat:no-repeat;
	text-indent:-9999px;
	cursor:pointer;
}
/* 再生/一時停止/停止 */
div.jp-single ul.jp-controls p.jp-play,
div.jp-single ul.jp-controls p.jp-pause,
div.jp-single ul.jp-controls p.jp-stop{
	width:18px;
	height:18px;
}
/* ミュート/ミュート解除/最大音量 */
div.jp-single ul.jp-controls p.jp-mute,
div.jp-single ul.jp-controls p.jp-unmute,
div.jp-single ul.jp-controls p.jp-volume-max{
	margin:2px 0 0;
	padding:0;
	width:18px;
	height:15px;
	cursor:pointer;
}
/* 再生 */
div.jp-single ul.jp-controls p.jp-play{
	background-position:-38px -41px;
}
div.jp-single ul.jp-controls p.jp-play:hover{
	background-position:-57px -41px;
}
/* 一時停止 */
div.jp-single ul.jp-controls p.jp-pause{
	display:none;
	background-position:-76px -41px;
}
div.jp-single ul.jp-controls p.jp-pause:hover{
	background-position:-95px -41px;
}
/* 停止 */
div.jp-single ul.jp-controls p.jp-stop{
	margin-left:10px;
	background-position:-152px -41px;
}
div.jp-single ul.jp-controls p.jp-stop:hover{
	background-position:-171px -41px;
}
/* ミュート */
div.jp-single ul.jp-controls p.jp-mute{
	margin-left:150px;
	background-position:0 -60px;
}
div.jp-single ul.jp-controls p.jp-mute:hover{
	background-position:-19px -60px;
}
/* ミュート解除 */
div.jp-single ul.jp-controls p.jp-unmute{
	display:none;
	margin-left:150px;
	background-position:-38px -60px;
}
div.jp-single ul.jp-controls p.jp-unmute:hover{
	background-position:-57px -60px;
}
/* 最大音量 */
div.jp-single ul.jp-controls p.jp-volume-max{
	margin-left:50px;
	background-position:-76px -60px;
}
div.jp-single ul.jp-controls p.jp-volume-max:hover{
	background-position:-95px -60px;
}
/* --------------------------------------------------------------- *
 * @desc@ シークバー
 * --------------------------------------------------------------- */
div.jp-single div.jp-progress{
	overflow:hidden;
	position:absolute;
	top:20px;
	left:60px;
	width:120px;
	height:5px;
	background-color:#ddd;
}
div.jp-single div.jp-seek-bar{
	width:0;
	height:100%;
	background-position:0 -114px;
	cursor:pointer;
}
div.jp-single div.jp-play-bar{
	width:0;
	height:100%;
	background-position:0 -130px;
}
/* --------------------------------------------------------------- *
 * @desc@ ボリュームバー
 * --------------------------------------------------------------- */
div.jp-single div.jp-volume-bar{
	overflow:hidden;
	position:absolute;
	top:13px;
	left:195px;
	width:40px;
	height:5px;
	background-position:0 -114px;
	cursor:pointer;
}
div.jp-single div.jp-volume-bar-value{
	width:0;
	height:5px;
	background-position:0 -130px;
}
/* --------------------------------------------------------------- *
 * @desc@ 時間表示
 * --------------------------------------------------------------- */
div.jp-single div.jp-time-holder{
	position:absolute;
	top:3px;
	left:60px;
	width:120px;
}
div.jp-single div.jp-time-holder div.jp-current-time,
div.jp-single div.jp-time-holder div.jp-duration{
	width:40px;
	font-size:.64em;
}
div.jp-single div.jp-time-holder div.jp-current-time{
	float:left;
	display:inline;
}
div.jp-single div.jp-time-holder div.jp-duration{
	float:right;
	display:inline;
	text-align:right;
}
/* --------------------------------------------------------------- *
 * @desc@ リピートボタン
 * --------------------------------------------------------------- */
div.jp-single ul.jp-toggles{
	position:absolute;
	top:2px;
	left:106px;
	list-style-type:none;
	overflow:hidden;
	margin:0 auto;
	padding:0;
	width:25px;
}
div.jp-single ul.jp-toggles li{
	display:block;
}
div.jp-single ul.jp-toggles p{
	display:block;
	margin:0;
	padding:0;
	width:25px;
	height:18px;
	text-indent:-9999px;
	line-height:100%;
	cursor:pointer;
}
/* リピート */
div.jp-single ul.jp-toggles p.jp-repeat{
	background-position:0 -76px;
}
div.jp-single ul.jp-toggles p.jp-repeat:hover{
	background-position:-26px -76px;
}
/* リピート解除 */
div.jp-single ul.jp-toggles p.jp-repeat-off{
	background-position:-52px -76px;
}
div.jp-single ul.jp-toggles p.jp-repeat-off:hover{
	background-position:-78px -76px;
}
/* --------------------------------------------------------------- *
 * @desc@ 音源詳細
 * --------------------------------------------------------------- */
div.jp-single div.jp-details{
	text-align:right;
}
div.jp-single div.jp-details{
	border-radius:0 0 4px 4px/0 0 4px 4px;
	width:100%;
	background-color:#ccc;
	font-size:.64em;
}
div.jp-single div.jp-details p.jp-title{
	margin:0;
	padding:2px 20px;
	color:#666;
}
/* --------------------------------------------------------------- *
 * @desc@ 再生できない場合
 * --------------------------------------------------------------- */
div.jp-single .jp-no-solution{
	display:none;
	border:2px solid #009be3;
	padding:5px;
	background-color:#eee;
	color:#000;
	font-size:.8em;
}
div.jp-single .jp-no-solution a{
	color:#000;
}
div.jp-single .jp-no-solution span{
	display:block;
	font-size:1em;
	font-weight:bold;
	text-align:center;
}


/* =============================================================== *
 * @desc@ リストプレイヤー
 * =============================================================== */
div.jp-list{
	border:1px solid #ddd;
	border-radius:4px;
	width:310px;
	background-color:#eee;
	color:#666;
	font-size:1.25em;
	font-family:
		"メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",
		Helvetica,Verdana,Roboto,"Droid Sans",
		"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN",
		Arial,Osaka,sans-serif !important;
	line-height:1.1em;
	box-shadow:0 0 8px #ddd;
}
div.jp-list div.jp-interface{
	position:relative;
	border-radius:4px;
	width:100%;
	height:60px;
	background-color:#eee;
}
/* --------------------------------------------------------------- *
 * @desc@ 操作ボタン
 * --------------------------------------------------------------- */
div.jp-list ul.jp-controls{
	overflow:hidden;
	list-style-type:none;
	margin:0;
	padding:9px 9px 0 9px;
}
div.jp-list ul.jp-controls li{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
div.jp-list ul.jp-controls p{
	display:block;
	overflow:hidden;
	margin:0;
	padding:0;
	text-indent:-9999px;
	cursor:pointer;
}
/* 前曲/再生/一時停止/次曲/停止 */
div.jp-list ul.jp-controls p.jp-previous,
div.jp-list ul.jp-controls p.jp-play,
div.jp-list ul.jp-controls p.jp-pause,
div.jp-list ul.jp-controls p.jp-next,
div.jp-list ul.jp-controls p.jp-stop{
	width:18px;
	height:18px;
}
/* ミュート/ミュート解除/最大音量 */
div.jp-list ul.jp-controls p.jp-mute,
div.jp-list ul.jp-controls p.jp-unmute,
div.jp-list ul.jp-controls p.jp-volume-max{
	position:absolute;
	top:11px;
	padding:0;
	width:18px;
	height:15px;
	cursor:pointer;
}
/* 前曲 */
div.jp-list ul.jp-controls p.jp-previous{
	background-position:0 -41px;
}
div.jp-list ul.jp-controls p.jp-previous:hover {
	background-position:-19px -41px;
}
/* 再生 */
div.jp-list ul.jp-controls p.jp-play{
	margin-left:10px;
	background-position:-38px -41px;
}
div.jp-list ul.jp-controls p.jp-play:hover{
	background-position:-57px -41px;
}
/* 一時停止 */
div.jp-list ul.jp-controls p.jp-pause{
	display:none;
	margin-left:10px;
	background-position:-76px -41px;
}
div.jp-list ul.jp-controls p.jp-pause:hover{
	background-position:-95px -41px;
}
/* 次曲 */
div.jp-list ul.jp-controls p.jp-next{
	margin-left:10px;
	background-position:-114px -41px;
}
div.jp-list ul.jp-controls p.jp-next:hover{
	background-position:-133px -41px;
}
/* 停止 */
div.jp-list ul.jp-controls p.jp-stop{
	margin-left:10px;
	background-position:-152px -41px;
}
div.jp-list ul.jp-controls p.jp-stop:hover{
	background-position:-171px -41px;
}
/* ミュート */
div.jp-list ul.jp-controls p.jp-mute{
	left:205px;
	background-position:0 -60px;
}
div.jp-list ul.jp-controls p.jp-mute:hover{
	background-position:-19px -60px;
}
/* ミュート解除 */
div.jp-list ul.jp-controls p.jp-unmute{
	left:205px;
	display:none;
	background-position:-38px -60px;
}
div.jp-list ul.jp-controls p.jp-unmute:hover{
	background-position:-57px -60px;
}
/* 最大音量 */
div.jp-list ul.jp-controls p.jp-volume-max{
	left:272px;
	background-position:-76px -60px;
}
div.jp-list ul.jp-controls p.jp-volume-max:hover{
	background-position:-95px -60px;
}
/* --------------------------------------------------------------- *
 * @desc@ シークバー
 * --------------------------------------------------------------- */
div.jp-list div.jp-progress{
	overflow:hidden;
	position:absolute;
	top:50px;
	left:10px;
	width:290px;
	height:5px;
	background-color:#ddd;
}
div.jp-list div.jp-seek-bar{
	width:0px;
	height:100%;
	background-position:0 -114px;
	cursor:pointer;
}
div.jp-list div.jp-play-bar{
	width:0px;
	height:100%;
	background-position:0 -130px;
}
/* --------------------------------------------------------------- *
 * @desc@ ボリュームバー
 * --------------------------------------------------------------- */
div.jp-list div.jp-volume-bar{
	overflow:hidden;
	position:absolute;
	top:16px;
	left:225px;
	width:40px;
	height:5px;
	background-position:0 -114px;
	cursor:pointer;
}
div.jp-list div.jp-volume-bar-value{
	width:0;
	height:5px;
	background-position:0 -130px;
}
/* --------------------------------------------------------------- *
 * @desc@ 時間表示
 * --------------------------------------------------------------- */
div.jp-list div.jp-time-holder{
	position:absolute;
	top:32px;
	left:10px;
	width:290px;
}
div.jp-list div.jp-time-holder div.jp-current-time,
div.jp-list div.jp-time-holder div.jp-duration{
	width:40px;
	font-size:.64em;
}
div.jp-list div.jp-time-holder div.jp-current-time{
	float:left;
	display:inline;
}
div.jp-list div.jp-time-holder div.jp-duration{
	float:right;
	display:inline;
	text-align:right;
}
/* --------------------------------------------------------------- *
 * @desc@ リピート/シャッフルボタン
 * --------------------------------------------------------------- */
div.jp-list ul.jp-toggles{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
	left:118px;
	top:8px;
	margin:0;
	padding:0;
	width:80px;
}
div.jp-list ul.jp-toggles li{
	float:right;
	display:block;
	margin:0;
	padding:0 5px;
}
div.jp-list ul.jp-toggles li p{
	display:block;
	margin:0;
	padding:0;
	width:25px;
	height:18px;
	text-indent:-9999px;
	line-height:100%;
	cursor:pointer;
}
/* リピート */
div.jp-list p.jp-repeat{
	background-position:0 -76px;
}
div.jp-list p.jp-repeat:hover{
	background-position:-26px -76px;
}
div.jp-list p.jp-repeat-off{
	background-position:-52px -76px;
}
div.jp-list p.jp-repeat-off:hover{
	background-position:-78px -76px;
}
/* シャッフル */
div.jp-list p.jp-shuffle{
	background-position:0 -95px;
	margin-left:5px;
}
div.jp-list p.jp-shuffle:hover{
	background-position:-26px -95px;
}
div.jp-list p.jp-shuffle-off{
	background-position:-52px -95px;
	margin-left:5px;
}
div.jp-list p.jp-shuffle-off:hover{
	background-position:-78px -95px;
}
/* --------------------------------------------------------------- *
 * @desc@ プレイリスト
 * --------------------------------------------------------------- */
div.jp-list div.jp-playlist{
	border-top:1px solid #eee;
	border-radius:0 0 4px 4px/0 0 4px 4px;
	width:100%;
	background-color:#ccc;
	text-align:right;
}
div.jp-list div.jp-playlist ul{
	list-style-type:none;
	margin:0;
	padding:0;
	font-size:.64em;
}
div.jp-list div.jp-playlist li{
	border-bottom:1px solid #ddd;
	padding:2px 20px;
}
div.jp-list div.jp-playlist li div{
	display:inline;
}
div.jp-list div.jp-playlist li:last-child{
	border-bottom:none;
}
div.jp-list div.jp-playlist a:link,div.jp-list div.jp-playlist a:visited{
	color:#666;
	text-decoration:none;
}
div.jp-list div.jp-playlist a:hover,div.jp-list div.jp-playlist a:active{
	color:#fff;
	text-decoration:underline;
}
div.jp-list p.jp-artist{
	color:#666;
	font-size:.8em;
}
/* 選択中 */
div.jp-list div.jp-playlist li.jp-playlist-current{
	list-style-type:square;
	list-style-position:inside;
	padding-left:7px;
	color:#06d;
}
div.jp-list div.jp-playlist li.jp-playlist-current a:link,
div.jp-list div.jp-playlist li.jp-playlist-current a:visited{
	color:#06d;
}
div.jp-list div.jp-playlist li.jp-playlist-current a:hover,
div.jp-list div.jp-playlist li.jp-playlist-current a:active{
	color:#4ae;
}
/* リストからの削除ボタン不要 */
div.jp-list div.jp-playlist a.jp-playlist-item-remove{
	display:none !important;
}
/* --------------------------------------------------------------- *
 * @desc@ 再生できない場合
 * --------------------------------------------------------------- */
div.jp-list .jp-no-solution{
	display:none;
	border:2px solid #009be3;
	padding:5px;
	background-color:#eee;
	color:#000;
	font-size:.8em;
}
div.jp-list .jp-no-solution a{
	color:#000;
}
div.jp-list .jp-no-solution span{
	display:block;
	font-size:1em;
	font-weight:bold;
	text-align:center;
}