@charset "utf-8";

.jp-play::before, .jp-pause::before, .jp-pause::after, .jp-stop::before, .jp-next::before, .jp-next::after, .jp-previous::before, .jp-previous::after, .jp-mute::before, .jp-unmute::before, .jp-volume-max::before, .jp-volume-max::after, div.jp-type-playlist div.jp-playlist li.jp-playlist-current::before { content: ''; position: absolute; display: block; }
.jp-pause::before, .jp-pause::after, .jp-next::before, .jp-next::after, .jp-previous::before, .jp-previous::after, .jp-volume-max::before, .jp-volume-max::after { top: 0; bottom: 0; margin: auto; }
.jp-play::before, .jp-stop::before, .jp-mute::before, .jp-unmute::before { top: 0; bottom: 0; left: 0; right: 0; margin: auto; }
.jp-play::before, .jp-next::before, .jp-next::after, .jp-previous::before, .jp-previous::after, .jp-mute::before, .jp-unmute::before { width: 0; height: 0; }

.jp-audio { width: 900px; margin: 0 auto 60px; position: relative; box-shadow: #C3C3C3 0 0 6px; font-size: 18px; color: #888; border: 1px solid #bbb; /*background: url('../img/demo-player-bg1@2x.jpg') repeat scroll center center / 900px auto;*/ }
#arrange .jp-audio { background: url('../img/arrange-jp-bg@2x.jpg') repeat scroll center top / 900px auto; }
#mixdown .jp-audio { background: url('../img/mixdown-jp-bg@2x.jpg') repeat scroll center center / 900px auto; }
#pitch .jp-audio { background: url('../img/pitch-jp-bg@2x.jpg') repeat scroll center top / 900px auto; }
.jp-interface { position: relative; background-color: rgba(255, 255, 255, 0.75); width: 100%; height: 70px; }
.jp-playlist { width: 100%; background-color: rgba(0, 0, 0, 0.55); border-top: 1px solid #bbb; padding-bottom: 16px; }

.jp-controls, .jp-type-playlist { position: relative; width: 100%; height: 100%; padding: 0; }
.jp-controls a span { opacity: 0; font-size: 10px; }
.jp-play, .jp-pause { right: 0; }
.jp-stop { right: 70px; }
.jp-next { right: 140px; }
.jp-previous { right: 210px; }
.jp-play, .jp-pause, .jp-stop, .jp-next, .jp-previous { border-left: 1px solid #bbb; }
.jp-mute, .jp-unmute, .jp-volume-bar, .jp-volume-max { border-right: 1px solid #bbb; }
.jp-play, .jp-pause, .jp-stop, .jp-next, .jp-previous, .jp-mute, .jp-unmute, .jp-volume-max { position: absolute; display: block; width: 69px; height: 70px; top: 0; margin: 0; }
.jp-volume-max { position: absolute; top: 0; left: 371px; }
.jp-volume-bar { position: absolute; overflow: hidden; top: 0; left: 70px; width: 300px; height: 100%; cursor: pointer; background: #ddd; opacity: 0.55; }
.jp-volume-bar-value { transition: all 0.25s ease-in-out 0s; background: #75E3DB; background: linear-gradient(to right, #75E3DB 0%, #75E3DB 20%, #3671FF 100%); width: 0; height: 100%; }

.jp-pause::before, .jp-pause::after, .jp-stop::before, .jp-volume-max::before { background: #aaa; }
.jp-play::before { border-left: 32px solid #aaa; border-top: 16px dashed transparent; border-bottom: 16px dashed transparent; }
.jp-pause::before, .jp-pause::after { width: 11px; height: 32px; }
.jp-pause::before { left: 18px; }
.jp-pause::after { right: 18px; }
.jp-stop::before { width: 29px; height: 29px; }
.jp-next::before, .jp-next::after, .jp-previous::before, .jp-previous::after { border-left: 16px solid #aaa; border-top: 16px dashed transparent; border-bottom: 16px dashed transparent; }
.jp-next::before, .jp-previous::before { right: 18px; }
.jp-next::after, .jp-previous::after { left: 18px; }
.jp-previous::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.jp-previous::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.jp-mute::before, .jp-unmute::before { border-width: 0 0 32px 32px; border-style: solid; border-color: transparent transparent #aaa transparent; border-right-color: rgba(238, 238, 238, 0); }
.jp-unmute::after { content: '×'; color: #666; position: absolute; left: 0; text-align: center; width: 69px; height: 70px; line-height: 70px; font-weight: bold; font-size: 34px; }
.jp-volume-max::before { width: 11px; height: 20px; left: 15px; }
.jp-volume-max::after { width: 20px; border-bottom: 22px solid #aaa; border-left: 14px dashed transparent; border-right: 14px dashed transparent; height: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); right: 2px; }

.jp-audio .jp-type-playlist .jp-progress { position: absolute; left: 0; width: 100%; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5); opacity: 0.75; }
.jp-audio .jp-progress { position: absolute; height: 10px; bottom: -11px; top: auto; }
.jp-progress { overflow: hidden; background: #ddd; }
.jp-seek-bar { background: #ddd; width: 0; height: 100%; cursor: pointer; }
.jp-play-bar { background: #FF8BD0; width: 0; height: 100%; }
.jp-audio .jp-type-playlist .jp-time-holder { left: 0; width: 100%; bottom: -36px; }
.jp-audio .jp-time-holder { position: absolute; top: auto; }
.jp-duration, div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove, div.jp-type-playlist div.jp-playlist span.jp-free-media { display: inline; float: right; text-align: right; }
.jp-current-time, .jp-duration { display: inline; width: 60px; font-size: 12px; color: #aaa; font-style: normal; }
.jp-current-time { float: left; cursor: default; margin-left: 6px; }
.jp-duration { cursor: pointer; margin-right: 6px; }

.jp-playlist ul { list-style-type: none; margin: 30px auto 0; padding: 0 20px; }
.jp-playlist li { padding: 10px 0 10px 20px; border: none; background: rgba(0,0,0,0.5); border-radius: 8px; margin: 10px auto; }
.jp-playlist li:last-of-type { margin-bottom: 0; }
.jp-playlist li div { display: inline; }
div.jp-type-playlist div.jp-playlist a { color: #fff; text-decoration: none; }
div.jp-type-playlist div.jp-playlist a:hover { color: #BC3EA4 !important; }
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { margin-right: 10px; font-weight: bold; color: #888; font-size: 16px; }
div.jp-type-playlist div.jp-playlist span.jp-free-media { margin-right: 10px; font-size: 16px; }
div.jp-type-playlist div.jp-playlist span.jp-free-media a { color: #888; }
div.jp-type-playlist div.jp-playlist a.jp-playlist-current { color: #1FCFE4; }
span.jp-artist { font-size: 14px; color: #888; }
div.jp-type-playlist div.jp-playlist li.jp-playlist-current { position: relative; padding-left: 26px; }
div.jp-type-playlist div.jp-playlist li.jp-playlist-current::before { left: 11px; width: 7px; height: 7px; background: #fff; -webkit-transform: translateY(-50%) rotate(-45deg) ; -ms-transform: translateY(-50%) rotate(-45deg) ; transform: translateY(-50%) rotate(-45deg); top: 50%; }

/* タブ対策 */
.jp-audio>div:first-of-type { width: 900px; }