@charset "utf-8";
/*
PLAYER
*/

.audioplayer
{
height: 80px; /* 40 */
color: #fff;
position: relative;
z-index: 30;
background: #000;
}
.audioplayer:before{
  content: "羽生まゐご";
  font-family: YuGothic, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
  position: absolute;
  font-size: 11px;
  left: 80px;
  top: 10px;
}
.audioplayer:after{
  content: "白夜";
  font-family: YuGothic, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
  position: absolute;
  font-weight: bold;
  font-size: 14px;
  left: 80px;
  top: 30px;
  
}


/* mini mode (fallback) */

.audioplayer-mini
{
  width: 2.5em; /* 40 */
  margin: 0 auto;
}

/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

.audioplayer > div
{
  position: absolute;
}


/* play/pause button */

.audioplayer-playpause
{
  width: 80px; /* 40 */
  height: 100%;
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  left: 0;
}
.audioplayer-playpause:hover,
.audioplayer-playpause:focus{
  background-color: #222;
}
.audioplayer-playpause a{
  display: block;
  display: block;
  width: 30px;
  height: 30px;
  border: 1px solid #FFF;
  border-radius: 30px;
  position: absolute;
  left: 25px;
  top: 25px;
}
.audioplayer-stopped .audioplayer-playpause a:after{
  content: "▶︎";
  color: #FFF;
  display: block;
  position: absolute;
  width: 0px;
  height: 0px;
  left: 11px;
  top: 9px;
  border: 6px solid transparent;
  border-left: 10px solid #FFF;
}

.audioplayer-playing .audioplayer-playpause a:before,
.audioplayer-playing .audioplayer-playpause a:after{
  content: '';
  display: block;
  width: 4px;
  height: 13px;
  background-color: #fff;
  position: absolute;
  top: 8px;
}
.audioplayer-playing .audioplayer-playpause a:before
{
  left: 9px;
}
.audioplayer-playing .audioplayer-playpause a:after
{
  right: 9px;
}


/* timers */

.audioplayer-time{
  font-family: YuGothic, '游ゴシック', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN','Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
  font-size: 11px;
  width: 30px;
  height: 1em;
  line-height: 0em;
  text-align: left;
  z-index: 2;
  bottom: 3px;
}
.audioplayer-time-current
{
  border-left: 1px solid #111;
  border-left-color: rgba( 0, 0, 0, .25 );
  left: 80px; /* 40 */
}
.audioplayer-time-duration
{
  border-right: 1px solid #555;
  border-right-color: rgba( 255, 255, 255, .1 );
  right: 45px;
  text-align: right;
}
.audioplayer-novolume .audioplayer-time-duration
{
border-right: 0;
right: 0;
}


/* progress bar of loaded/played */

.audioplayer-bar
{
  height: 3px; /* 14 */
  background-color: #cccccc;
  cursor: pointer;
  z-index: 1;
  bottom: 25px;
  right: 45px; /* 110 */
  left: 80px; /* 110 */
  margin-top: 0; /* 7 */
}
  .audioplayer-novolume .audioplayer-bar
  {
    right: 4.375em; /* 70 */
  }
  .audioplayer-bar div
  {
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .audioplayer-bar-loaded
  {
    background-color: #333;
    z-index: 1;
  }
  .audioplayer-bar-played
  {
    background: #007fd1;
    z-index: 2;
  }


/* volume button */

.audioplayer-volume{
  width: 2.5em; /* 40 */
  height: 100%;
  border-left: 1px solid #111;
  border-left-color: rgba( 0, 0, 0, .25 );
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  right: 0;
}
  .audioplayer-volume:hover,
  .audioplayer-volume:focus
  {
    background-color: #222;
  }
  .audioplayer-volume-button
  {
    width: 100%;
    height: 100%;
  }
    .audioplayer-volume-button a
    {
      width: 0.313em; /* 5 */
      height: 0.375em; /* 6 */
      background-color: #fff;
      display: block;
      position: relative;
      z-index: 1;
      top: 40%;
      left: 35%;
    }
      .audioplayer-volume-button a:before,
      .audioplayer-volume-button a:after
      {
        content: '';
        position: absolute;
      }
      .audioplayer-volume-button a:before
      {
        width: 0;
        height: 0;
        border: 0.5em solid transparent; /* 8 */
        border-left: none;
        border-right-color: #fff;
        z-index: 2;
        top: 50%;
        right: -0.25em;
        margin-top: -0.5em; /* 8 */
      }
      .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after
      {
        /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
        width: 0.313em; /* 5 */
        height: 0.313em; /* 5 */
        border: 0.25em double #fff; /* 4 */
        border-width: 0.25em 0.25em 0 0; /* 4 */
        left: 0.563em; /* 9 */
        top: -0.063em; /* 1 */
        -webkit-border-radius: 0 0.938em 0 0; /* 15 */
        -moz-border-radius: 0 0.938em 0 0; /* 15 */
        border-radius: 0 0.938em 0 0; /* 15 */
        -webkit-transform: rotate( 45deg );
        -moz-transform: rotate( 45deg );
        -ms-transform: rotate( 45deg );
        -o-transform: rotate( 45deg );
        transform: rotate( 45deg );
      }


  /* volume dropdown */

  .audioplayer-volume-adjust
  {
    height: 6.25em; /* 100 */
    cursor: default;
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    background: #333;
  }
    .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
    {
      opacity: 0;
    }
    .audioplayer-volume:hover .audioplayer-volume-adjust
    {
      top: auto;
      bottom: 100%;
    }
    .audioplayer-volume-adjust > div
    {
      width: 40%;
      height: 80%;
      background-color: #222;
      cursor: pointer;
      position: relative;
      z-index: 1;
      margin: 30% auto 0;
    }
      .audioplayer-volume-adjust div div
      {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #007fd1;
      }
  .audioplayer-novolume .audioplayer-volume
  {
    display: none;
  }


@media (max-width: 768px){
  .audioplayer-playpause{
    width: 60px;
  }
  .audioplayer-playpause a{
    left: 15px;
  }
}

@media (max-width: 640px){
  .audioplayer:before,
  .audioplayer:after,
  .audioplayer-bar,
  .audioplayer-time-current{
    left: 65px;
  }
}