@charset "UTF-8";

/*- common
-----------------------------------------------------------------------*/
#jp-interview {
  float: left;
  width: 770px;
}

#jp-cmp-side {
    float: left;
    width: 250px;
    margin-left: 10px;
}

.jp-interview-box {
  width: 100%;
  margin-bottom: 40px;
  box-shadow: 1px 1px 1px rgba(0,0,0,.2);
  background: #fff;
}


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

#jp-interview {
  width: 100%;
  margin-right: 0;
}

#jp-cmp-side {
    display: none;
}

.jp-cmptemp-box {
    margin-bottom: 20px;
  }

  #jp-interview {
    /*width: auto !important;*/
  }

    #jp-interview-tabs-panel-interview .jp-cmp-border-block > .jp-cmp-link-block-002 {
    padding: 0 30px 20px 20px;
    }

}

/*- interview TOP
-----------------------------------------------------------------------*/
.jp-cmp-interview-list01 a{
  color: #686868;
  display: block;
  height: 100%;
}
.jp-cmp-interview-list01{
  font-size: 130%;
}

.jp-cmp-clear:after {
  content:'';
  display:block;
  clear:both;
  height:0;
  overflow:hidden;
}

.jp-cmp-interview-list01 h2{
  font-size: 110%;/*---下段3名全部のアーティスト名 文字サイズ調整---*/
  font-weight: bold;
}

/*アーティスト名サブ*/
.jp-cmp-interview-list01 h2 span{
  font-size: 80%;/*---下段アーティスト名にサブタイトルをつける--*/
  font-weight: bold;
}

.jp-cmp-interview-list01 h2.text_l{
  font-size: 105%;/*---下段　1アーティスト名が長い時の文字サイズ調整---*/
  font-weight: bold;
}
/

.jp-cmp-interview-list01 img{
  display: block;
  /float: left;
}

.jp-cmp-interview-textbox{
  text-align:left;
}
.jp-cmp-interview-textbox p{
  margin: 10px 0;
  text-decoration: underline;
  word-break: break-all;
}

.jp-cmp-interview-textbox p span{
  font-size: 120%;
  font-weight: bold;
}


.jp-cmp-txt-right{
  text-align: right;
}

.jp-cmp-detail-btn{
  background: #686868;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-size: 15px;
  margin:20px 0 0;
}

.jp-cmp-box-002-pcimg{
  position: relative;
  padding-bottom:20px;
  padding-left:30px;
}

.jp-cmp-detail-btn.sf{
  position: absolute;
  top: 310px;
  right: 0px;
}


.jp-cmp-box-001{
  width:339.8px;
  display:inline-block;
}

.jp-cmp-box-001 img{
  margin: 0 0 10px;
}

.jp-cmp-box-002{
  margin-bottom:20px;
}

.jp-cmp-box-002-spimg{
  display:none;
}





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

.jp-cmp-interview-list01{
  font-size: 100%;
}
.jp-cmp-interview-list01 img{
  /width: 100%;
}
.jp-cmp-interview-list01 h2{
  font-size: 120%;
}

.jp-cmp-detail-btn{
  font-size: 90%;
}

}


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

.jp-cmp-box-001{
  width:94%;
  display:block;
}

.jp-cmp-interview-list01 img{
  display: block;
  margin:0 auto 10px;
}

.jp-cmp-box-002-spimg{
  display:block;
  padding:0 10px 0px;
  text-align:center;
}

.jp-cmp-box-002-pcimg{
  display:none;
}


.jp-cmp-interview-textbox h2{
  font-size: 110%;/*---下段3名全部のアーティスト名 文字サイズ調整---*/
  font-weight: bold;
  color: #686868;
  display: block;
}

}




/*- jp-profile
-----------------------------------------------------------------------*/

#jp-interview-profile {
  font-size: 12px;
  padding: 20px;
  border-bottom: 1px solid #d7d7d7;
}

  #jp-interview-profile .jp-interview-profile-ttl {
    font-size: 18px;
    float: left;
    width: 70px;
    height: 95px;
  }

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

  #jp-interview-profile .jp-interview-profile-ttl {
    display: block;
    width: 100%;
    height: auto;
  }

}

/*- social
-----------------------------------------------------------------------*/
#jp-interview-social {
  text-align: center;
  margin: 20px 0;
}


.tablet #jp-cmp-head-column1{
  padding-top: 0;
}



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

.tablet #jp-cmp-head-column1{
    padding: 0px;
  }
  #jp-interview{
    float:none;
    /*margin-top: 20px;A*/
   }
}
@media screen and (min-width: 768px){
  .tablet #jp-cmp-head-column1{
    margin-bottom: 20px;
  }
  .tablet #jp-cmp-side-topics{
    padding-top: 0;
  }
}



/*- interview  list footer
-----------------------------------------------------------------------*/
#jp-interview-foot{
  margin:20px;
  padding-bottom: 20px;
}

#jp-interview-foot h3{
  margin-bottom: 15px;
  font-size: 22px;
  font-weight: bold;
  color: #3b3b3b;
}


.jp-interview-list-foot-box{
  width:22%;
  display:inline-block;
  margin-bottom: 10px;
  vertical-align: top;
  padding-left:5px;
  padding-right:5px;
}

.jp-interview-list-foot-box li{
  margin-right: 10px;
  margin-left: 10px;
}


.jp-interview-list-foot-box img{
  margin: 0 0 10px;
}


.jp-interview-list-foot a{
  color: #686868;
  display: block;
  height: 100%;
}

.jp-interview-list-foot{
  font-size: 100%;
}

.jp-cmp-clear:after {
  content:'';
  display:block;
  clear:both;
  height:0;
  overflow:hidden;
}


.jp-interview-list-foot img{
  display: block;
  border: 1px solid #DADADA;
  /float: left;
}



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

.jp-interview-list-foot{
  font-size: 100%;
}
.jp-interview-list-foot img{
  /width: 100%;
}
.jp-interview-list-foot {
  font-size: 120%;
}

.jp-cmp-detail-btn-foot{
  font-size: 90%;
}



}


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

.jp-interview-list-foot-box{
  width:100%;
  display:block;
  padding-bottom: 20px;
  border: 1px solid #DADADA;
}


.jp-interview-list-foot-box p{
  text-decoration: none;
  padding-left: 10px;
}


.jp-interview-list-foot img{
  display: block;
  margin:10px auto 10px;
  border: none;
}


}