.audio1         { opacity:0.75; width:325px; height:30px;
                  background-color:rgba(22, 206, 151, 0.24); color:#fff; text-indent: -9999px; }
.jp-controls button
                { float:left; display:block; text-indent:-9999px; border:none;    overflow:hidden; cursor:pointer; }
.jp-play        { background:url("/img/start.svg") no-repeat; width:18px;                         background-size:auto; background-position:center center; }
.jp-pause       { background:url("/img/pause.svg") no-repeat; width:18px;
                  background-size:auto; background-position:center center; }
.jp-stop        { background:url("/img/stop.svg") no-repeat; width:16px;
                  background-size:auto; background-position:center center; }
.jp-progress    { float:left; overflow:hidden; 
                  width:90px; cursor:pointer;
                  background-color:rgba(140, 169, 135, 0.438); border-radius:1.5px; margin-top:4.5px; }
.jp-seek-bar    { height:20px; background-size:contain; 
                  background:url("/img/seekbar.svg") no-repeat; }
.jp-play-bar    { background:url("/img/progress.svg") no-repeat; height: 20px;
                  background-size:90px 20px; }

.jp-time-holder
                { float:left; cursor:default; padding-top:1.5px; text-indent:0;   color:#fff; }

.jp-volume-controls button
                { float:left; cursor:pointer; display:block; width:28px;          height:20px; text-indent:-9999px; border:none;                  overflow:hidden; margin-top:4px; }
.jp-mute        { background:url("/img/unmute.svg") no-repeat;
                  background-size:auto; width:28px; }
.jp-unmute      { background:url("/img/mute.svg") no-repeat;
                  background-size:auto; width:28px; }
.volume-bar-master
                { float:left; display:block;
                  background-color:rgba(255, 255, 255, 0.336);                  border-radius:3px; width:60px;                                height:20px; cursor:pointer; margin-top:4.5px; }
.jp-volume-bar  { background:url("/img/seekbar.svg") no-repeat;                                   background-size:60px 20px;                           height:20px; 
                  }
.jp-volume-bar-value
                { background:url("/img/progress.svg") no-repeat;                  background-size:60px 20px; 
                  height:20px; }
.jp-toggles button
                { float:left; width:16px; cursor:pointer; display:block;          border:none; text-indent:-9999px; }                  
.jp-repeat      { background:url("/img/repeat.svg") no-repeat;                                    background-size:auto; background-position:center center; }
.jp-repeat-off  { background:url("/img/looped.svg") no-repeat;
                  background-size:auto; background-position:center center; }






/* PC用	[w>=769] */
@media screen and (min-width: 769px) {
.audio1         {  }
.jp-play        { margin-top:-2px; }
.jp-pause       { margin-top:-2px; }
.jp-stop        { margin-top:-2px; }
.jp-time-holder
                { margin-top:-2px; }
.jp-volume-controls button       { margin-top:5px; }
.volume-bar-master    { margin-top:5px; }
.jp-repeat      { margin-top:-2px; }
.jp-repeat-off  { margin-top:-2px; }
.jp-stop        { margin-left:4px; }
.jp-progress    { margin-left:4px; }
.jp-seek-bar    {  }
.jp-play-bar    {  }

.jp-time-holder
                { margin-left:5px; }

.jp-volume-controls button
                { margin-left:12px; }
.jp-mute        {  }
.jp-unmute      {  }
.volume-bar-master
                { margin-left:4px; }
.jp-volume-bar  {  }
.jp-volume-bar-value
                {  }
.jp-toggles button
                { margin-left:6px; }                  
.jp-repeat      {  }
.jp-repeat-off  {  }



.jp-progress_sp { display:none; }
.jp-time-holder_sp    
                { display:none; }
.jp-controls_sp { display:none; }
.jp-toggles_sp  { display:none; }
.jp-volume-controls_sp
                { display:none; }





}


@media screen and (max-width: 949px) and (min-width: 851px) {

.jp-play        { margin-top:0px; }
.jp-pause       { margin-top:0px; }
.jp-stop        { margin-top:0px; }
.jp-time-holder
                { margin-top:0px; }
.jp-volume-controls button       { margin-top:5px; }
.volume-bar-master    { margin-top:5px; }
.jp-repeat      { margin-top:0px; }
.jp-repeat-off  { margin-top:0px; }

}




@media screen and (max-width: 850px) and (min-width: 769px) {

.jp-play        { margin-top:2px; }
.jp-pause       { margin-top:2px; }
.jp-stop        { margin-top:2px; }
.jp-time-holder
                { margin-top:2px; }
.jp-volume-controls button       { margin-top:5px; }
.volume-bar-master    { margin-top:5px; }
.jp-repeat      { margin-top:2px; }
.jp-repeat-off  { margin-top:2px; }

}


/* タブレット１	[768>w>=640] */
@media screen and (max-width: 768px) and (min-width: 681px) {

.audio1         { width:100%; }
.jp-time-holder_sp
                { float:left; cursor:default; text-indent:0; color:#fff;
                  padding-top:1.3%; margin-left:4%; }
.jp-progress_sp { width:30%; margin-top:1.2%; float:left; margin-left:7%; 
                  background-color:rgba(22, 206, 151, 0.24); }
.jp-toggles_sp button
                { float:left; width:7%; margin-top:1.1%; 
                  margin-left:7%; cursor:pointer;  
                  display:block; border:none; text-indent:-9999px; }
.jp-volume-controls_sp button
                { float:left; cursor:pointer; display:block; width:13%;           text-indent:-9999px; border:none; 
                  overflow:hidden; margin-top:1.2%; margin-left:4.5%; }
.jp-controls_sp button
                { float:left; text-indent:-9999px; border:none;    overflow:hidden; cursor:pointer; margin-top:1%; }
.jp-play        { width:9%; margin-left:1.8%; }
.jp-pause       { width:9%; margin-left:1.8%; }




.jp-volume-controls_sp button
                { float:left; cursor:pointer; display:block; width:9%; text-indent:-9999px; border:none; 
                  overflow:hidden; margin-top:1%; margin-left:3.8%; }

.jp-stop        { display:none; width:8%; margin-left:5%; }

.jp-time-holder { display:none; }
.jp-controls    { display:none; }
.jp-progress    { display:none; }
.jp-volume-controls
                { display:none; }
.volume-bar-master
                { display:none; }
.jp-toggles     { display:none; }                  

}





@media screen and (max-width: 680px) and (min-width: 601px) {

.audio1         { width:100%; }
.jp-time-holder_sp
                { float:left; cursor:default; text-indent:0; color:#fff;
                  padding-top:2%; margin-left:4%; }
.jp-progress_sp { width:35%; margin-top:1.45%; float:left; margin-left:5%; 
                  background-color:rgba(22, 206, 151, 0.24); }
.jp-toggles_sp button
                { float:left; width:7%; margin-top:1.1%; 
                  margin-left:12%; cursor:pointer;  
                  display:block; border:none; text-indent:-9999px; }
.jp-volume-controls_sp button
                { float:left; cursor:pointer; display:block; width:13%;           text-indent:-9999px; border:none; 
                  overflow:hidden; margin-top:1.2%; margin-left:4.5%; }
.jp-controls_sp button
                { float:left; text-indent:-9999px; border:none;    overflow:hidden; cursor:pointer; margin-top:1%; }
.jp-play        { width:9%; margin-left:8%; }
.jp-pause       { width:9%; margin-left:8%; }


.jp-volume-controls_sp
                { display:none; }


.jp-stop        { display:none; width:8%; margin-left:5%; }

.jp-time-holder { display:none; }
.jp-controls    { display:none; }
.jp-progress    { display:none; }
.jp-volume-controls
                { display:none; }
.volume-bar-master
                { display:none; }
.jp-toggles     { display:none; }                  


}







/* スマホ [480>=w] */
@media (max-width: 600px) {

.audio1         { width:100%; }
.jp-time-holder_sp
                { float:left; cursor:default; text-indent:0; color:#fff;
                  padding-top:0.9vw; padding-left:4%; font-size:0.7rem; }
.jp-progress_sp { width:45%; margin-top:0.85vw; float:left; margin-left:4%; 
                  background-color:rgba(22, 206, 151, 0.24); }
.jp-toggles_sp button
                { float:left; width:12%; 
                  margin-left:2%; cursor:pointer;  
                  display:block; border:none; text-indent:-9999px; font-size:0.7rem; margin-top:0.7vw; }
.jp-controls_sp button
                { float:left; text-indent:-9999px; border:none; 
                  overflow:hidden; cursor:pointer; }
.jp-play        { width:12%; font-size:0.7rem; margin-left:2%; margin-top:0.7vw; }
.jp-pause       { width:12%; font-size:0.7rem; margin-left:2%; margin-top:0.7vw; }




.jp-volume-controls_sp
                { display:none; }
.jp-volume-controls_sp button
                { float:left; cursor:pointer; display:block; width:13%;           text-indent:-9999px; border:none; 
                  overflow:hidden; margin-top:1.9%; margin-left:3%; }

.jp-stop        { display:none; width:8%; margin-left:5%; }

.jp-time-holder { display:none; }
.jp-controls    { display:none; }
.jp-progress    { display:none; }
.jp-volume-controls
                { display:none; }
.volume-bar-master
                { display:none; }
.jp-toggles     { display:none; }                  


}













/* タブレット */

@media (min-width: 601px) {




















}
















/* WQHD */

@media (min-width: 1921px) {

.audio1         { width:590px; height:60px; }
.jp-play        { width:30px; margin-left:10px; margin-top:3px; }
.jp-pause       { width:30px; margin-left:10px; margin-top:3px; }
.jp-stop        { width:30px; margin-top:3px; }
.jp-progress    { width:149px;px; margin-top:10.5px; }
.jp-seek-bar    { height:40px; }
.jp-play-bar    { height:33px; background-size:149px 33px; }

.jp-time-holder { padding-top:4.5px; text-indent:0; margin-left:10px; }
.jp-current-time  { font-size:1.5rem; margin-top:2px; }

.jp-volume-controls button
                { width:55px; height:60px; margin-top:8px; margin-left:10px; }
.jp-mute        { width:60px; }
.jp-unmute      { width:60px; }
.volume-bar-master
                { border-radius:3px; width:120px; height:30px; margin-top:12px; margin-left:10px; }
.jp-volume-bar  { background-size:110px 30px; height:30px; }
.jp-volume-bar-value
                { background-size:110px 30px; height:30px; }
.jp-toggles button
                { width:35px; margin-left:12px; margin-top:2px; }                  
.jp-repeat      {  }
.jp-repeat-off  {  }

.jp-progress_sp { display:none; }
.jp-time-holder_sp    
                { display:none; }
.jp-controls_sp { display:none; }
.jp-toggles_sp  { display:none; }
.jp-volume-controls_sp
                { display:none; }







}

















/* 4k */

@media (min-width: 2561px) {

.audio1         { width:900px; height:100px; }
.jp-play        { width:40px; margin-left:30px; margin-top:12px; }
.jp-pause       { width:40px; margin-left:30px; margin-top:12px; }
.jp-stop        { width:40px; margin-top:12px; }
.jp-progress    { width:219px;px; margin-top:4.5px; margin-top:23px; }
.jp-seek-bar    { height:60px; }
.jp-play-bar    { height:49px; background-size:220px 49px; }

.jp-time-holder { padding-top:6.5px; text-indent:0; margin-left:10px; }
.jp-current-time  { font-size:2.3rem; margin-top:10px; }

.jp-volume-controls button
                { width:80px; height:100px; margin-top:20px; margin-left:20px; }
.jp-mute        { width:60px; }
.jp-unmute      { width:60px; }
.volume-bar-master
                { border-radius:3px; width:160px; height:50px; margin-top:20px; margin-left:20px; }
.jp-volume-bar  { background-size:160px 50px; height:50px; }
.jp-volume-bar-value
                { background-size:160px 50px; height:50px; }
.jp-toggles button
                { width:50px; margin-left:30px; margin-top:13px; }                  
.jp-repeat      {  }
.jp-repeat-off  {  }

.jp-progress_sp { display:none; }
.jp-time-holder_sp    
                { display:none; }
.jp-controls_sp { display:none; }
.jp-toggles_sp  { display:none; }
.jp-volume-controls_sp
                { display:none; }










}