@charset "UTF-8";
/*
	Title	   : アニメ「イド・インヴェイデッド」公式サイト
	URI            : id
	Designer       : GRAPHNETWORK
	Designer's URI : http://graphnetwork.com/
*/
/* --------------------------------------------------------------

							Layout

-----------------------------------------------------------------*/
p {
   text-align:  justify;
}
#music h1.page_ttl {
   background-position: top 3px left -40px;
   width: 104px;
}
#music .music_wrap {
   width: 80%;
   margin: 10% auto;
   background-color: #0f0f0f;
   border: 1px solid #333333;
   padding: 50px 20px 40px;
   position: relative;
   background-image: url("../img/music/sp-contents-line-bottom.png"), url("../img/music/sp-contents-line-top.png");
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: top, bottom;
}
#music .block-music-ttl {
   text-align: center;
   letter-spacing: 0.09em;
   margin-bottom: 40px;
}
#music h1.song-ttl {
   width: 100%;
   margin: 14px 0;
   font-size: 28px;
   font-weight: normal;
   letter-spacing: 0.08em;
   -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#music .music-tag {
   font-size: 13px;
   font-weight: normal;
   color: #fff100;
}
#music .music-tag::before {
   content: url("../img/music/ttl-arrow-left.png");
   position: relative;
   margin-right: 4px;
   top: -2px;
}
#music .music-tag::after {
   content: url("../img/music/ttl-arrow-right.png");
   position: relative;
   margin-left: 4px;
   top: -2px;
}
#music .artist-name {
   font-size: 24px;
   -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#music .wrap-song-item {
   margin-bottom: 40px;

}
#music .song-txt-box {
   margin: 20px 0;
   text-align: justify;
}
#music .song-item-box img {
   width: 100%;
   display: block;
}
#music .block-song {
   font-size: 13px;
   line-height: 2;
}
#music .block-song .artist {
   border-top: 1px solid #333;
   padding-top: 50px;
   -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#music .block-song .artist-image {
   text-align: center;
}
#music .block-song .artist-image img {
   width: 100%;
}
#music .block-song h2.artist-name-yellow {
   margin: 20px 0;
   font-size: 28px;
   text-align: center;
   color: #fff100;
   letter-spacing: 0.1em;
}
#music .block-song h3.profile {
   font-size: 16px;
   font-weight: 400;
   letter-spacing: 0.09em;
   font-family: 'Josefin Sans', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#music ul.wrap-artist-link {
   list-style: none;
   margin-top: 20px;
}
#music ul.wrap-artist-link li::before {
   content: url("../img/music/icon-link-arrow.png");
   position: relative;
   margin-right: 8px;
   top: -2px;
}
#music .flex{
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   flex-wrap:wrap;
}
#music .flex .box {
    width: 77%;
    margin-bottom: 4%;
    line-height: 1.6;
    padding-left: 20px;
   text-align: left;
}
#music .flex .list-box {
    width: 14%;
    margin-bottom: 4%;
    line-height: 1.6;
    border-right: 1px solid #333;
}
#music .block-song .block-all-artist {
   text-align: center;
   margin-bottom: 10%;
}
#music .block-song .block-all-artist h2.artist-name-yellow {
    margin: 0;
    font-size: 20px;
    text-align: center;
    color: #fff100;
    letter-spacing: 0.1em;
   line-height: 1.2;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#music .block-song .block-all-artist .yellow-small {
   color: #fff100;
   font-size: 14px;
}
#music .block-song .block-all-artist h3.profile {
    line-height: 2em;
   
}

.wrap-artist-link li {
   margin: 10px 0;
}
.main_works {
   color:#666;
   margin-top: 20px;
}
.mb20 {
   margin-bottom: 20px;
}
.mb60 {
   margin-bottom: 60px;
}

@media screen and (min-width:960px) {
   #music #main {
      margin: 0 auto;
      float: left;
      padding: 0;
      padding-left: 250px;
      min-height: 1100px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: 100%;
      background-attachment: fixed;
      background-position: top 0 left 100px;
   }
   #music h1.page_ttl {
      background-position: top 45px left -33px;
      width: 115px;
      margin: auto;
   }
   #music .music_wrap {
      width: 660px;
      margin: auto auto 100px;
      background-color: #0f0f0f;
      border: 1px solid #333333;
      padding: 60px 60px 80px;
      position: relative;
      background-image: url("../img/music/contents-line-bottom.png"), url("../img/music/contents-line-top.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: top, bottom;
   }
   #music .wrap-song-item {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 60px;
   }
   #music .song-txt-box {
      width: 49%;
      font-size: 15px;
      line-height: 2;
      letter-spacing: 0.02em;
      -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   }
   #music .song-item-box {
      width: 44%;
      margin-right: 40px;
   }
   #music .song-item-box img {
      width: 290px;
      display: block;
   }
   #music .block-song .artist {
      border-top: 1px solid #333;
      padding-top: 60px;
      font-size: 15px;
      line-height: 2;
      letter-spacing: 0.02em;
   }
   #music .block-song .artist-image img {
      width: 300px;
   }
   #music .block-music-ttl {
      text-align: center;
      letter-spacing: 0.09em;
      margin-bottom: 60px;
   }
   #music ul.wrap-artist-link {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-top: 30px;
      
   }
   #music ul.wrap-artist-link li {
      width: 33%;
      margin-bottom: 6px;
      font-size: 12px;
   }
   #music .song-txt-box {
      margin-top: 0;
   }
   #music .block-song h3.profile {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.09em;
   }
   #music .music-tag::before {
      content: url("../img/music/ttl-arrow-left.png");
      position: relative;
      margin-right: 6px;
      top: -2px;
   }
      #music .flex{
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
      flex-wrap: wrap;
      -ms-flex-pack: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      flex-wrap:wrap;
      }
      #music .flex .box{
         width: 80%;
         margin-bottom: 2%;
         line-height: 2.6;
         padding-left:40px; 
      }
      #music .flex .list-box {
          width: 10%;
          margin-bottom: 2%;
          line-height: 2.6;
          border-right: 1px solid #333;
      }
      #music .block-song .block-all-artist h2.artist-name-yellow {
       margin: 0;
       font-size: 24px;
       text-align: center;
       color: #fff100;
       letter-spacing: 0.1em;
      line-height: 1.2;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   #music .block-song .block-all-artist .yellow-small {
      color: #fff100;
      font-size: 14px;
   }
   #music .block-song .block-all-artist {
   text-align: center;
   margin-bottom: 8%;
}
}
/* --------------------------------------------------------------

				リンクニメーション

-----------------------------------------------------------------*/
a:hover {
   animation: ani 1.2s linear infinite;
}
a:nth-child(1) {
   animation-delay: .2s;
}
a:nth-child(2) {
   animation-delay: .6s;
}
a:nth-child(3) {
   animation-delay: .8s;
}
a:nth-child(4) {
   animation-delay: 1.0s;
}
a:nth-child(5) {
   animation-delay: 1.4s;
}
a:nth-child(6) {
   animation-delay: 1.8s;
}
a:nth-child(7) {
   animation-delay: 1.12s;
}