/* audio */
/*------------------------------------------------------------------------------*/
.audio_list li{
	float:right;
	width:49.5%;
}
.audio_list li:nth-child(odd){
	clear:both;
	float:left;
}
.audio_list li:nth-child(n+3){
	margin-top:1%;
}



@media only screen and (max-width:690px) {

/* audio */
/*------------------------------------------------------------------------------*/
.audio_list li{
	float:none !important;
	width:100%;
	margin:0 !important;
}
.audio_list li:nth-child(n+2){
	margin-top:20px !important;
}

/*------------------------------------------------------------------------------*/
}


/* 外枠 */
/*-----------------------------------------------------------*/

.jp-audio{
	width:100%;
	background:#F0EFEE;
	position:relative;
	padding:15px 3%;
	transition:0.3s;
}

.jp-audio.active{
	background:#E5F1F9;
}
.jp-audio,.jp-audio *,.jp-audio *:before,.jp-audio *:after{
	box-sizing:border-box;
}

/* トラック名 */
/*-----------------------------------------------------------*/

.track-name{
	float:left;
	display:table;
	width:calc(((100% - 295px) / 3) + 60px);
	padding-right:10px;
	font-size:16px;
	font-weight:bold;
	letter-spacing:0.025em;
	color:#333;
	transition:0.3s;
}
.track-name .valign_m{
	display: table-cell;
	vertical-align:middle;
	line-height:1.2;
}
.track-name.active{
    color:#0075C4;
}


/* コントロールボタン */
/*-----------------------------------------------------------*/

.jp-controls{
	float:left;
	width:45px;
	position: relative;
}
.jp-controls a{
	transition:0.3s;
}

/* 再生ボタン */
.jp-play{
	width:16px;
	height:16px;
	position:absolute;
	left:0;
	top:calc(50% - 8px);
	text-indent:-9999px;
	overflow:hidden;
}
.jp-play:after{
	content:"";
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-left: 12px solid #0075C4;
	border-bottom: 6px solid transparent;
	position:absolute;
	left:3px;
	top:calc(50% - 6px); 
}

/* 一時停止ボタン */
.jp-pause{
	width:16px;
	height:16px;
	position:absolute;
	left:0;
	top:calc(50% - 8px);
	text-indent:-9999px;
	overflow:hidden;
}
.jp-pause:before{
	content:"";
	width: 4px;
	height: 12px;
	background:#0075C4;
	position:absolute;
	left:2px;
	top:calc(50% - 6px); 
}
.jp-pause:after{
	content:"";
	width: 4px;
	height: 12px;
	background:#0075C4;
	position:absolute;
	right:2px;
	top:calc(50% - 6px); 
}

/* 停止ボタン */
.jp-stop{
	width:16px;
	height:16px;
	position:absolute;
	right:0;
	top:calc(50% - 8px);
	text-indent:-9999px;
	overflow:hidden;
}
.jp-stop:after{
	content:"";
	width: 12px;
	height: 12px;
	background: #0075C4;
	position:absolute;
	left:calc(50% - 6px);
	top:calc(50% - 6px); 
}

/* hover */
.jp-controls a:hover{
	opacity:0.7;
}


/* 時間表示 */
/*-----------------------------------------------------------*/

.jp-time-holder{
	float:left;
	width:110px;
}

.jp-time-holder_in{
	display:table;
	width:100%;
}
.jp-time-holder_in .valign_m{
	display:table-cell;
	vertical-align:middle;
	text-align:right;
	padding-right:15px;
	font-size:13px;
}
.jp-time-holder_in .valign_m > *{
	display:inline-block;
}


/*時間制御バー*/
/*-----------------------------------------------------------*/

.jp-progress{
	float:left;
	width:calc(((100% - 295px) / 3));
	position:relative;
	margin-right:20px;
}

/* バー全体 */
.jp-seek-bar{
	width:100% !important;
	height:4px;
	background:#CCC;
	position:absolute;
	left:0;
	top:calc(50% - 2px);
	cursor:pointer;
}

/* 現在位置 */
.jp-play-bar{
	font-size:0;
	height:4px;
	background:#0075C4;
	position:relative;
	transition:0.3s linear;
}
.jp-play-bar:after{
	content:"";
	width:14px;
	height:14px;
	background:#0075C4;
	border-radius:100%;
	border:3px solid #FFF;
	position:absolute;
	top:calc(50% - 7px);
	right:-7px;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}

/*音量制御*/
/*-----------------------------------------------------------*/

.jp_volume{
	float:left;
	width:calc(((100% - 295px) / 3) + 60px - 1px/*IE対策*/);
	position:relative;
}


/* ミュートonボタン、ミュートoffボタン、音量maxボタン*/
.jp-mute,.jp-unmute,.jp-volume-max{
	width:20px;
	height:20px;
	position:absolute;
	top:calc(50% - 10px);
	background-image:url(../image/common/jp-volume_contoroller.png);
	background-repeat:no-repeat;
	background-size:20px 60px;
	text-indent:-9999px;
	overflow:hidden;
}
.jp-mute,.jp-unmute{
	left:0;
}
.jp-mute{background-position:0 0;}
.jp-unmute{background-position:0 -20px;}
.jp-volume-max{
	right:0;
	background-position:0 -40px;
}
.jp-mute:hover,.jp-unmute:hover,.jp-volume-max:hover{
	opacity:0.7;
}


/*/////// 音量バー ////////*/

/* バー全体 */
.jp-volume-bar{
	width:calc(100% - 60px) !important;
	height:4px;
	background:#CCC;
	position:absolute;
	left:30px;
	top:calc(50% - 2px);
	cursor:pointer;
}

/* 現在位置 */
.jp-volume-bar-value{
	font-size:0;
	height:4px;
	background:#0075C4;
	position:relative;
	transition:0.3s linear;
}
.jp-volume-bar-value:after{
	content:"";
	width:14px;
	height:14px;
	background:#0075C4;
	border-radius:100%;
	border:3px solid #FFF;
	position:absolute;
	top:calc(50% - 7px);
	right:-7px;
	box-shadow:0 0 5px rgba(0,0,0,0.2);
}

.jp-volume-bar.volume-mute{
	opacity:0.5;
}

/*リピートボタン*/
/*-----------------------------------------------------------*/
.jp-toggles{
	display:none;
}

.jp-no-solution{
	display:none;
}



/*-----------------------------------------------------------------------------------
レスポンシブ tablet
-----------------------------------------------------------------------------------*/

@media only screen and (min-width:1001px) and (max-width:1120px) {
.track-name{
	font-size:16px;
}
}

@media only screen and (min-width:861px) and (max-width:1000px) {
/*名前を上、コントローラーを下*/
.track-name{
	float:none;
	width:100%;
	padding-right:0;
	margin-bottom:10px;
	font-size:16px;
}
.jp-progress{
	width:calc(((100% - 235px) / 2));
}
.jp_volume{
	width:calc(((100% - 235px) / 2) + 60px - 1px/*IE対策*/);
}
}
@media only screen and (min-width:691px) and (max-width:860px) {
/*名前を上、時間ボタンを中に、音量を下に*/
.track-name{
	float:none;
	width:100%;
	padding-right:0;
	padding-bottom:5px;
	margin-bottom:15px;
	font-size:16px;
	border-bottom:1px solid #CCC;
}
.jp-progress{
	width:calc(100% - 155px);
	margin-right:0;
	margin-bottom:20px;
}
.jp_volume{
	clear:both;
	float:none;
	width:100%;
	max-width:250px;
	height:40px;
	margin:0 auto;
	background:rgba(255,255,255,0.7);
	border-radius:5px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.05)
}

.jp-mute,.jp-unmute{
	left:10px;
}
.jp-volume-max{
	right:10px;
}


.jp-volume-bar{
	width:calc(100% - 80px) !important;
	left:40px;
}
}




/*-----------------------------------------------------------------------------------
レスポンシブ smartphone
-----------------------------------------------------------------------------------*/

@media only screen and (min-width:561px) and (max-width:690px) {
.track-name{
	font-size:16px;
}
}

@media only screen and (max-width:1024px) {
/*名前を上、時間ボタンを中に、音量を削除（Pad、スマホでは仕様上音量制御不可）*/
.track-name{
	float:none;
	width:100%;
	padding-right:0;
	padding-bottom:5px;
	margin-bottom:15px;
	font-size:16px;
	border-bottom:1px solid #CCC;
}
.jp-progress{
	width:calc(100% - 155px);
	margin-right:0;
}
.jp_volume{
	display:none;
}

}