@charset "UTF-8";
@import "/web/src/s/karaoke/css/layout.css";

/*- jp-bb-vocaloid
-----------------------------------------------------------------------*/
.jp-bb-vocaloid .jp-bb-songlist-std th {
  background-color: #606a9c;
  color: #fff;
}

/*- jp-bb-button
-----------------------------------------------------------------------*/
  .jp-bb-vocaloid .jp-bb-button a {
    background-color: #6163b9;
  }

/*- jp-bb-vocaloid-interview
-----------------------------------------------------------------------*/
#jp-bb-vocaloid-interview {
  overflow: hidden;
}

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-img {
    float: left;
    width: 430px;
    margin-right: 20px;
    border: 1px solid #ccc;
  }

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text {
    float: left;
    width: 530px;
  }

    #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text h4 {
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      font-size: 20px;
      font-weight: bold;
    }

      #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text p.jp-bb-vocaloid-interview-text-lead {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
        color: #d90d18;
      }

      #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text dl {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #dee3e7;
        background: #f2f5f8;
      }

        #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text dl dt {
          display: inline-block;
          margin-bottom: 10px;
          padding: 2px 15px;
          border-radius: 15px;
          font-size: 14px;
          font-weight: bold;
          color: #fff;
          background: #666;
        }

        #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text dl dd {
          font-size: 16px;
          text-align: justify;
          text-justify: inter-ideograph;
        }

      #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text p.jp-bb-button {
        text-align: right;
      }

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

  #jp-bb-vocaloid-interview {
    overflow: inherit;
  }

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-img,
  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text {
    float: none;
  }

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-img {
    width: 100%;
    margin: 0 0 20px 0;
  }

    #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-img img {
      width: 100%;
      height: auto;
    }

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text {
    width: 100%;
  }
	
	#jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text dl dd {
		font-size:14px;
	}

  #jp-bb-vocaloid-interview .jp-bb-vocaloid-interview-text p.jp-bb-button {
    text-align: center;
  }

}

/*- jp-bb-vocaloid-movie
-----------------------------------------------------------------------*/
#jp-bb-vocaloid-movie {
}

  #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist {
    overflow: hidden;
    margin-bottom: 40px;
  }

    #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li {
      float: left;
      text-align: center;
      margin-right: 30px;
    }

    #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li:nth-child(3) {
      margin-right: 0;
    }

      #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li p.jp-bb-vocaloid-movie-img {
        margin-bottom: 20px;
        border: 1px solid #ccc;
      }

      #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li dl {
        display: inline-block;
        margin-bottom: 10px;
      }

        #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li dl dt {
          padding-left: 25px;
          background: url(/web/src/s/karaoke/contents/vocaloid/img/movie/icon_song.png) left center no-repeat;
          font-size: 14px;
          font-weight: bold;
        }

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

  #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist {
    overflow: inherit;
  }

    #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li {
      float: none;
      margin: 0 0 20px 0;
    }

    #jp-bb-vocaloid-movie ul.jp-bb-vocaloid-movielist li p.jp-bb-vocaloid-movie-img img {
       width: 100%;
       height: auto;
    }

}

/*- jp-bb-vocaloid-songs
-----------------------------------------------------------------------*/
#jp-bb-vocaloid-songs {
  margin-bottom: 0;
}

/* ng-isolate-scope 
-----------------------------------------------------------------------*/
.ng-isolate-scope .jp-cmp-list-social-001 {
  text-align: center;
  padding-bottom: 30px
}
.ng-isolate-scope .jp-cmp-list-social-001 > ul {
  width: auto;
}

/*- jp-bb-comment
-----------------------------------------------------------------------*/
#jp-bb-comment {
  margin: 15px 0 0 0;
  padding: 0;
  font-size: x-small;
  color: #717171;
  }


/*- jp-bb-navi
-----------------------------------------------------------------------*/
#jp-bb-navi ul li {
    float:left;
    width:33%;
  }


  @media screen and (max-width: 767px) {
  #jp-bb-navi ul li {
    width:32.2%;
    margin-bottom:0;
    font-size:10px;
  }

  #jp-bb-navi ul li:nth-child(3) {
    border-left:none;
  }

  #jp-bb-navi ul{
    height:60px;
  }
}