@charset "utf-8";

@media all and (min-width: 768px) {

  #content2 .leftBox img {
    width: auto;
  }
}

/* バナーとの間隔 */
#content2 .leftBox .sp_only_inner {
  margin-top: 8%;
}
  
@media all and (min-width: 768px) {

  #content2 .leftBox .sp_only_inner {
    margin-top: 0%;
  }
  
}


/* news　画像
--------------------------------------------------*/

/*--------------------
 タイトル回り
--------------------*/

@media all and (min-width: 768px) {

  #content2 .news {
    margin-top: 0;
    width: 780px;
  }
}

@media all and (min-width: 768px) {

  #content2 .news .inner {
    width: 780px;
    padding: 0;
  }
}

#content2 .news__ttl {
  width: 100%;
  padding-bottom: 2.5%;
  border-bottom: 1px solid #999;
  position: relative;
}

#content2 .news__ttl h2 {
  color: #221815;
  font-size: 2.4rem;
  letter-spacing: 1.5px;
  line-height: 3.1rem;
  font-weight: 500;
}

/* 時間表示 */
#content2 .news__ttl .time {
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 25%;
  font-size: 10px;
  letter-spacing: 0.1rem;
}

@media all and (min-width: 768px) {

  #content2 .news__ttl {
    padding-bottom: 12px;
  }
  
  #content2 .news__ttl h2 {
    font-size: 2.5rem;
  }
  
  /* 時間表示 */
  #content2 .news__ttl .time {
    font-size: 12px;
  }
  
}

#content2 .l-underpicUp__ttl {
  position: relative;
}


/*--------------------
 picUp　全体
--------------------*/

#content2 .picUp {
  padding-top: 5%;
}

@media all and (min-width: 768px) {
  
  #content2 .picUp {
    padding-top: 30px;
  }
  
}

#content2 .picUp__ttl {
  font-size: 2.2rem;
  color: #221815;
  line-height: 1.5;
}

@media all and (min-width: 768px) {

  #content2 .picUp__ttl {
    font-size: 30px;
  }
}


/*--------------------
 タグ部分（上部）
--------------------*/

#content2 .newsArticle__tag {
  position: relative;
  margin-top: 4.2%;
}

/* シェアボタン */
#content2 #d_newsDetial .newsArticle__tag #socialbtn {
  position: absolute;
  right: 0;
  top: 0;
}
#content2 .name {
  margin: 0 0 2.2%;
}

/* アーティスト名共通 */
#content2 .name li {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 2%;
  margin-right: calc(2% - 4px);
}

#content2 .name li a {
  display: block;
  padding: .3em .5em .3em 0;
  color: #a7a7a7;
}

#content2 .name li a:hover {
  text-decoration: underline;
}

/* spのみ */
#content2 .newsArticle__tag .sp_wrap {
  position: relative;
  min-height: 1em;
  margin-bottom: 6%;
}

/* メインアーティスト */

#content2 .newsArticle__tag .tags {
  margin: 0 100px 6% 0;/* SNSボタン分 */
  min-height: 2.8em;
}

#content2 .newsArticle__tag .tags li {
  position: relative;
  color: #a7a7a7;
  font-size: 1.1rem;
  text-indent: 15px;
  display: inline-block;
  margin-right: 10px;
}

#content2 .newsArticle__tag .tags li a {
  color: #a7a7a7;
}

#content2 .newsArticle__tag .tags li a:hover {
  text-decoration: underline;
}

#content2 .newsArticle__tag .tags li:before {
  content: "";
  position: absolute;
  top: 10%;
  width: 4%;
  width: 12px;
  height: 12px;
  background: url(/common/img/tagindex/detail/icon_tags.png) no-repeat;
  background-size: 100%;
  color: #a7a7a7;
  left: 0;
}

/* シェアボタン */
#content2 .newsArticle__tag #socialbtn {
  position: absolute;
  right: 0;
  top: 0;
}


@media all and (min-width: 768px) {

  #content2 .newsArticle__tag {
    position: relative;
    margin: 20px auto 50px;
  }
  
  #content2 .newsArticle__tag .name {
    padding-right: 100px;/* 上部のみ */
  }
  
  /* シェアボタン */
  #content2 #d_newsDetial .newsArticle__tag #socialbtn {
    transform: scale(0.75);
    -webkit-transform: scale(0.75);  
    transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
  }
  #content2 #d_newsDetial .newsArticle__tag #socialbtn li:last-child{
    display: none;
  }
  #content2 .name {
    margin: 0;
  }
  
  /* アーティスト名共通 */
  #content2 .name li {
    display: inline-block;
    vertical-align: bottom;
    margin-bottom: 10px;
    margin-right: calc(10px - 4px);
  }
  
  #content2 .name li a {
    display: block;
    padding: .3em .5em .3em 0;
    color: #a7a7a7;
  }
  
  /* spのみ */
  #content2 .newsArticle__tag .sp_wrap {
    position: static;
    margin-bottom: 0;
    min-height: 1em;
  }
  
  
  #content2 .newsArticle__tag .tag {
    text-indent: 16px;
    font-size: 1.2rem;
  }
  
  #content2 .newsArticle__tag .tag:hover {
    text-decoration: underline;
  }
  
  #content2 .newsArticle__tag .tag:before {
    width: 11px;
    height: 11px;
    padding-top: 0;
    top: 4px;
  }
  
}


/*--------------------
 画像部分
--------------------*/

#content2 .picUp__mainImg {
  width: 90%;
  margin: 0 auto;
  margin-top: 6%;
}

#content2 .picUp .picUp__mainImg img {
  width: 100%;
  height: auto;
}

/* SP時はhoverアニメをなくす */
@media all and (max-width: 767px) {
  #content2 .picUp .picUp__mainImg a:hover {
    opacity: 1;
  }
}

@media all and (min-width: 768px) {

  #content2 .picUp__mainImg {
    width: 100%;
    text-align: center;
    margin-top: 5%;
  }
  
  #content2 .picUp .picUp__mainImg img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

}

/* コメント・コピーライト */

#content2 .picUp__imgCopy {
  text-align: center;
  margin-top: 1em;
}

#content2 .picUp__imgCopy p {
  font-size: 12px;
  line-height: 1.43;
}

@media all and (min-width: 768px) {
  #content2 .picUp__imgCopy p {
    font-size: 16px;
  }
}

/* 前へ・次へ */

#content2 .picUp__slideBtnArea {
  width: 58%;
  margin: 0 auto;
  text-align: center;
  padding-top: 3%;
}

@media all and (min-width: 768px) {

  #content2 .picUp__slideBtnArea {
    width: 35%;
    padding-top: 18px;
  }
}

#content2 .picUp__slideCount {
  font-size: 1.2rem;
  line-height: 1.4rem;
  margin-bottom: 3%;
}

#content2 .picUp__slideCount span {
  padding: 0 3%;
}

@media all and (min-width: 768px) {

  #content2 .picUp__slideCount {
    font-size: 1.4rem;
    padding-bottom: 25px;
    margin-bottom: 0;
  }
}

#content2 .picUp__btnArrow {
  cursor: pointer;
  font-size: 1.5rem;
}

@media all and (min-width: 768px) {

  #content2 .picUp__btnArrow {
    font-size: 1.6rem;
  }
}

#content2 .picUp__btnPrev {
  float: left;
  background: url(/common/img/d_news/image/prev-arrow.png) no-repeat left center;
  background-size: 20%;
  padding-left: 10%;
}

#content2 .picUp__btnNext {
  float: right;
  background: url(/common/img/d_news/image/next-arrow.png) no-repeat right center;
  background-size: 20%;
  padding-right: 10%;
}

#content2 .picUp__btnPrev:hover,
#content2 .picUp__btnNext:hover {
  text-decoration: underline;
}


/*--------------------
 その他画像
--------------------*/

/* ボタン */

#content2 .picUp__otherImgArea .moreImg {
  width: 95.5%;
  height: auto;
  margin: 5% auto 0;
}

#content2 .picUp__otherImgArea .moreImg a {
  display: block;
  font-size: 11px;
  padding-top: 3%;
  padding-bottom: 3%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #b6b4b6;
  position :relative;
  text-align: center;
}

#content2 .picUp__otherImgArea .moreImg a:after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 8px;
    background: url(/common/img/d_news/image/btn_arrow.png) center no-repeat;
  background-size: contain;
  margin-left: 10px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

@media all and (min-width: 768px) {

  /* ボタン */
  
  #content2 .picUp__otherImgArea .moreImg {
    width: 380px;
    height: 42px;
    line-height: 42px;
    margin: 15px auto 7px;
  }
  
  #content2 .picUp__otherImgArea .moreImg a {
    font-size: 15px;
    padding: 0;
  }
  
  #content2 .picUp__otherImgArea .moreImg a:after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 8px;
    background: url(/common/img/d_news/image/btn_arrow.png) center no-repeat;
    background-size: contain;
    margin-left: 10px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

}

/* 画像部分 */

#content2 .picUp__otherImgArea {
  margin-top: 10%;
  padding: 5% 2%;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}

#content2 .picUp__otherImgArea ul {
  margin-top: -2.25%;
  margin-bottom: -2.25%;
  margin-right: -2.25%;
}

#content2 .picUp__otherImgBox {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 24%;
  padding: 0 2.25%;
  margin: 2.25% 0;
  display: inline-block;
  text-align: center;
}

#content2 .picUp__otherImgBox img {
  vertical-align: middle;
  height: auto;
  max-width: 100%;
  max-height: 160px;
}

@media all and (min-width: 768px) {

  #content2 .picUp__otherImgArea {
    width: 100%;
    margin-top: 30px;
    padding: 15px 10px;
    text-align: center;
  }
  
  #content2 .picUp__otherImgArea ul {
    margin-top: -9px;
    margin-bottom: -9px;
    margin-right: 0px;
  }

  #content2 .picUp__otherImgBox {
    width: auto;
    padding: 0 9px;
    margin: 9px 0;
  }
  
  #content2 .picUp__otherImgBox img {
    max-width: 80px;
    max-height: 80px;
  }

}


/*--------------------
 タグ部分（下部）
--------------------*/

#content2 .picUp__moreOhterBtn {
  margin-top: 5%;
}

@media all and (min-width: 768px) {

  #content2 .picUp__moreOhterBtn {
    margin-top: 25px;
  }
}

#content2 .textBox .tags li {
  position: relative;
  color: #a7a7a7;
  font-size: 1.1rem;
  text-indent: 15px;
  display: inline-block;
  margin-right: 10px;
}

#content2 .textBox .tags li:before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 13px;
  height: 13px;
  background: url(/common/img/tagindex/detail/icon_tags.png) no-repeat;
  background-size: 100%;
}

#content2 .textBox .tags li a {
  color: #a7a7a7;
}

#content2 .textBox .tags li a:hover {
  text-decoration: underline;
}

@media all and (min-width: 768px) {

  #content2 .textBox .tags li {
    text-indent: 16px;
    font-size: 1.2rem;
  }
  
  #content2 .textBox .tags li:before {
    width: 11px;
    height: 11px;
    padding-top: 0;
    top: 4px;
  }

}


/*--------------------
 記事詳細に戻る
--------------------*/

#content2 .picUp__detailBackBtn {
  width: 60%;
  margin: 5% auto 0;
  text-align: center;
}

@media all and (min-width: 768px) {

  #content2 .picUp__detailBackBtn {
    width: 260px;
    height: 44px;
    margin: 30px auto 0;
  }
}

#content2 .picUp__detailBackBtn a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.2rem;
  background: url(/common/img/d_news/image/article-back-btn_pc.png) no-repeat 18% center #221815;
  background-size: 10%;
  padding: 5% 0% 5% 3%;
}

@media all and (min-width: 768px) {

  #content2 .picUp__detailBackBtn a {
    width: 100%;
    height: auto;
    font-size: 1.4rem;
    font-weight: bold;
    background: url(/common/img/d_news/image/article-back-btn_pc.png) no-repeat 25% center #221815;
    padding-left: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}


/* その他画像・最新情報 */
#content2 .picUp .more {
  text-align: center;
  margin-top: 4.78%;
}

#content2 .picUp .more:after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 11px;
  background: url(/common/img/arrow_footer_g.png) center no-repeat;
  background-size: 16px;
  margin-left: 10px;
}

#content2 .picUp .more a:hover {
  text-decoration: underline;
}


@media all and (min-width: 768px) {
  
  #content2 .picUp .more {
    font-size: 16px;
  }
  
  #content2 .picUp .more:after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 16px;
    background: url(/common/img/arrow_footer_g.png) center no-repeat;
    background-size: contain;
    margin-left: 10px;
  }

}