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

							Layout

-----------------------------------------------------------------*/
p {
   text-align: justify;
}
#special h1.page_ttl {
   background-position: top 3px left -33px;
   width: 170px;
}
#special .special_wrap {
   margin: 0 20px 30px;
   background-color: #0f0f0f;
   border: 1px solid #333333;
   padding: 50px 20px 40px;
   position: relative;
   background-image: url(../img/common/sp-contents-line-bottom.png), url(../img/common/sp-contents-line-top.png);
   background-repeat: no-repeat;
   background-size: 100%;
   background-position: top, bottom;
}
#special .block-special-ttl {
   text-align: center;
   letter-spacing: 0.09em;
   margin-bottom: 34px;
}
#special h1.special-ttl {
   width: 100%;
   margin: 0 0 10px;
   font-size: 20px;
   font-weight: normal;
   letter-spacing: 0.08em;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#special h1.campaign-ttl {
   font-size: 20px;
   line-height: 30px;
   text-align: center;
}
#special .special_wrap .block-summary .border-top h1.campaign-ttl {
   margin-bottom: 40px;
}
#special .special-tag {
   color: #fff100;
   font-size: 13px;
   font-weight: normal;
   /*margin-top: 7%;*/
   text-align: center;
   margin: 8px 0;
}
#special .special-tag::before {
   content: url(../img/common/ttl-arrow-left.png);
   position: relative;
   margin-right: 4px;
   top: -2px;
}
#special .special-tag::after {
   content: url(../img/common/ttl-arrow-right.png);
   position: relative;
   margin-left: 4px;
   top: -2px;
}
#special .product-name {
   font-size: 24px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#special .wrap-song-item {
   margin-bottom: 40px;
}
#special .song-txt-box {
   margin: 20px 0;
   text-align: justify;
}
#special .song-item-box img {
   width: 100%;
   display: block;
}
#special .block-summary {
   font-size: 13px;
   line-height: 2;
}
#special .block-summary .product {
   text-align: justify;
   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;
   
}
#special .block-summary .product-image {
   text-align: center;
}
#special .block-summary .product-image img {
   width: 100%;
}
#special .block-summary h2.product-name-yellow {
   margin: 20px 0;
   font-size: 28px;
   text-align: center;
   color: #fff100;
   letter-spacing: 0.1em;
}
#special .block-summary h3.ttl {
   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;
}
#special ul.wrap-product-link {
   list-style: none;
   margin-top: 20px;
}
#special ul.wrap-product-link li::before {
   content: url(../img/special/icon-link-arrow.png);
   position: relative;
   margin-right: 8px;
   top: -2px;
}
#special .block-summary .product-img {
   text-align: center
}
#special .block-summary .product-img .img {
   width: 100%;
   display: block;
}
#special .subnav {
   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: 0 auto 40px;
   width: 90%;
}
#special .subnav .category {
   border-left: 1px solid #333;
   width: 49%;
   text-align: center;
   margin: 8px 0;
   font-size: 20px;
   font-weight: 300;
   letter-spacing: 0.08em;
   line-height: 0.8;
}
#special .subnav li a {
   border-radius: 0;
   border: none;
   display: block;
   text-align: center;
   height: auto;
   width: 100%;
   padding: 0;
   font-size: 12px;
   letter-spacing: 0.05em;
}
#special .subnav li a.en {
   font-size: 15px;
   font-weight: 400;
}
#special .subnav li:nth-child(2), #special .subnav li:nth-child(4) {
   border-right: 1px solid #333;
}
#special .special_wrap .block-special-ttl .special-ttl .summary {
   font-size: 14px;
   text-align: center;
   margin-top: 6px;
}
#special h1.page_ttl, h1.page_ttl_story {
   padding: 40px 0 20px;
}
#special .special_wrap .block-special-ttl .release {
   color: #fff100;
   font-size: 14px;
   margin-top: 20px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#special .special_wrap .block-summary .product .souki-list li {
   margin: 10px 0;
}
/*#special .special_wrap .block-summary .product .souki-list li:before {
   content: "-";
   margin-right: 10px;
}*/
#special .special_wrap .block-summary .souki-list li .comment {
   color: #999;
   font-size: 12px;
   margin-bottom: 20px;
}
#special .special_wrap .block-summary .product .comment {
   color: #999;
   font-size: 12px;
}
#special .special_wrap .block-summary .product .product-yellow {
   margin: 20px 0;
   font-size: 28px;
   text-align: center;
   color: #fff100;
   letter-spacing: 0.1em;
}
#special .special_wrap .block-special-ttl .store-name {
   font-size: 16px;
   text-align: center;
}
#special .special_wrap .block-summary .wrap .box .block-cond {
   margin: 30px 0;
   letter-spacing: 0.09em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#special .special_wrap .block-summary .border-top {
   border-top: 1px solid #333;
   margin-top: 30px;
   padding-top: 30px;
}
.wrap-product-link li {
   margin: 10px 0;
}
.main_works {
   color: #666;
   margin-top: 20px;
}
.pt0 {
   padding-top: 0 !important;
}
.mb20 {
   margin-bottom: 20px;
}
.mb60 {
   margin-bottom: 60px;
}
#special .block-summary .product ul li{
   margin-left: 20px !important;
   margin-bottom: 12px;
   line-height: 1.6;
   list-style: circle;
}
#special .article-txt-area {
   text-align: justify; 
   margin: 80px 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#special .article-txt-area .cmt-ttl {
   margin-top: 0;
   margin-bottom: 20px;
}
#special .special_wrap .block-special-ttl .campaign-ttl .souki-ttl {
   font-size: 14px;
   text-align: center;
}
@media screen and (min-width:960px) {
   #special #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;
   }
   #special h1.page_ttl {
      background-position: top 45px left -22px;
      width: 360px;
      margin: auto;
   }
   #special .special_wrap {
      width: 660px;
      margin: auto auto 100px;
      background-color: #0f0f0f;
      border: 1px solid #333333;
      padding: 60px 60px 30px;
      position: relative;
      background-image: url(../img/common/contents-line-bottom.png), url(../img/common/contents-line-top.png);
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: top, bottom;
   }
   #special .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;
   }
   #special .song-txt-box {
      width: 49%;
      font-size: 15px;
      line-height: 2;
      letter-spacing: 0.02em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
   #special .song-item-box {
      width: 44%;
      margin-right: 40px;
   }
   #special .song-item-box img {
      width: 290px;
      display: block;
   }
   #special .block-summary .product {
      padding-top: 60px;
      font-size: 15px;
      line-height: 2;
      letter-spacing: 0.02em;
   }
   #special .block-summary .product-image img {
      width: 300px;
   }
   #special .block-special-ttl {
      text-align: center;
      letter-spacing: 0.09em;
      margin-bottom: 40px;
   }
   #special .store-ttl {
      margin-bottom: 60px;
   }
   #special ul.wrap-product-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;
   }
   #special ul.wrap-product-link li {
      width: 33%;
      margin-bottom: 6px;
      font-size: 12px;
   }
   #special .song-txt-box {
      margin-top: 0;
   }
   #special .block-summary h3.ttl {
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.09em;
   }
   #special .special-tag::before {
      content: url(../img/common/ttl-arrow-left.png);
      position: relative;
      margin-right: 6px;
      top: -2px;
   }
   #special .subnav {
      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;
      max-width: 810px;
      margin: 0 auto 40px;
   }
   #special .subnav .category {
      border-left: 1px solid #333;
      width: 24%;
      text-align: center;
      margin: 8px 0;
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0.08em;
      line-height: 0.8;
   }
   #special .subnav li a {
      font-size: 14px;
   }
   #special h1.special-ttl {
      font-size: 28px;
      line-height: 1.6;
      margin: 0;
   }
   #special h1.campaign-ttl {
      font-size: 28px;
      line-height: 1.6;
   }
   #special .block-summary .product-img {
      margin-bottom: 40px;
   }
   #special .block-summary .product-img .img {
      width: 50%;
      margin: 0 auto 0;
   }
   #special h1.page_ttl, h1.page_ttl_story {
      padding: 80px 0;
   }
   #special .subnav li:nth-child(2) {
      border-right: none;
   }
   #special .subnav li:nth-child(4) {
      border-right: 1px solid #333;
   }
   #special .special_wrap .block-summary .wrap {
      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;
   }
   #special .special_wrap .block-summary .box {
      width: 42%;
      margin: 0 4%;
   }
   #special .special_wrap .block-summary .box:first-child {
      margin-left: 0;
   }
   #special .special_wrap .block-summary .box:last-child {
      margin-right: 0;
   }
   #special .block-summary .wrap .box .product-img .img {
      width: 100%;
   }
   #special .special_wrap .block-summary .border-top {
      border-top: 1px solid #333;
      margin-top: 60px;
      padding-top: 60px;
   }
   #special .special_wrap .block-summary .wrap .box .block-cond {
      font-size: 15px;
      margin: 0 0 30px;
   }
   #special .special_wrap .block-special-ttl .special-ttl .summary {
      font-size: 16px;
      margin-top: 0;
   }
   #special .special_wrap .block-special-ttl .campaign-ttl .souki-ttl {
      font-size: 19px;
      text-align: center;
   }
   #special .special_wrap .block-special-ttl .release {
      margin-top: 12px;
      font-size: 16px;
   }
   #special .ttl-sml {
      font-size: 13px;
   }
}
/* --------------------------------------------------------------

				リンクニメーション

-----------------------------------------------------------------*/
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;
}