@charset "utf-8";
/* CSS Document */
:root{
	--bg:#111;
	--txt:#fff;
	--play_bt:#d2b880;
	--progress_bg:#222;
	--progress_bar:#fff;
	--vol_bg:#222;
	--vol_bar:#d2b880;
}
/*囲み*/
.playerWrap{
	max-width: 1000px;
	margin: 1em auto;
		display: grid;
		column-gap: 1em;
		row-gap: 1em;

		grid-template-columns:repeat(1, 1fr);
	
}
.playerBox{
	width: 100%;
	display: block;
	vertical-align: top;
	background-color: var(--bg);
	color: var(--txt);
	/*padding: 1em;*/
	border: var(--gold) 1px solid;
}
/*以下基本形*/
.playerBox .bgmTitle{
	width: calc(100% - 3.5em);
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}
.playerBox .btArea{
	width: 3em;
	height:3em;
	display: inline-block;
	vertical-align: middle;
}
.playerBox .btArea .playBT{
	width: 100%;
	height: 3em;
	display: block;
	/*border: #fff 2px solid;*/
	border-radius: 6px;
	position: relative;
	cursor: pointer;
}
.playerBox .btArea .playBT span:after{
	content: "▲";
	display: block;
	position: absolute;
	font-size: 1.5em;
	line-height: 1em;
	transform: rotate(90deg);
	width: 100%;
	text-align: center;
	top:50%;
	margin-top: -0.5em;
	color: var(--play_bt);
}
.playerBox .btArea .playBT.selected span:after{
	content: "■";
	transform: rotate(0);
}

.playerBox .barArea{
	width: 100%;
	display:block;
	vertical-align: middle;
	padding: 0;
	margin-top: 0.5em;
}
.jp-progress{overflow:hidden;background-color:var(--progress_bg);position:relative;top:0;height:5px;left:0;width:100%; border-radius: 50px;}
.jp-seek-bar{width:0;height:100%;cursor:pointer;}
.jp-play-bar{width:0;height:100%; background: none;background-color:var(--progress_bar);}
.jp-audio .jp-time-holder{position:relative;left:0;width:100%;}
.jp-current-time,.jp-duration{width:100px;font-size:0.7em;}
.jp-current-time{float:left;display:inline;cursor:default;}
.jp-duration{float:right;display:inline;text-align:right;cursor:pointer;}

.jp-volume-controls {
	 dicplay:none;
}

.jp-volume-controls button {
	display: none;
}

@media (min-width: 1025px) {/*PCのみボリュームを表示*/
	.playerWrap{
		grid-template-columns:repeat(2, 1fr);

	}
	/*PCのみボリュームを表示*/
	.jp-volume-controls {
	  position: relative;
	  top:0;
	  margin-left: auto;
	  width: 100px;
		margin-top: 0.5em;
	}

	.jp-volume-controls button {
	  display: block;
	  position: relative;
	  overflow: hidden;
	  text-indent: -9999px;
	  border: none;
	  cursor: pointer
	}

	.jp-mute {
		width: 2em;
		height: 2em;

		background-image: url("../img/vol_on.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		background-color: transparent;

	}
	.jp-mute.mute{

		background-image: url("../img/vol_off.png");

	}

	.jp-volume-bar {
	  position:absolute;
	  overflow: hidden;
	  background: var(--vol_bg);

	  width: calc(100% - 2.1em);
	  height: 5px;
		left: 2.1em;
		top:50%;
		margin-top: -2.5px;
		cursor: pointer;
		display: inline-block;
		vertical-align: middle;
		border-radius: 50px;
	}
	.jp-volume-bar-value {
	  background: var(--vol_bar);
	  width: 0;
	  height: 5px
	}


}