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

							Layout

-----------------------------------------------------------------*/
#episode h1.page_ttl {
   background-position: top 3px left -40px;
   width: 155px;
}
#episode .episode_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;
}
#episode .block-episode-ttl {
   text-align: center;
   letter-spacing: 0.09em;
   margin-bottom: 20px;
}
#episode .episode-tag {
   margin-bottom: 0;
   font-size: 14px;
   font-weight: bold;
   color: #fff100;
   font-weight: 300;
}
#episode .episode-tag::before {
   content: url(../img/common/ttl-arrow-left.png);
   position: relative;
   margin-right: 4px;
   top: -2px;
}
#episode .episode-tag::after {
   content: url(../img/common/ttl-arrow-right.png);
   position: relative;
   margin-left: 4px;
   top: -2px;
}
#episode h1.song-ttl {
   width: 100%;
   font-size: 20px;
   line-height: 1.8;
   font-weight: 300;
   letter-spacing: 0.08em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#episode .artist-name {
   font-size: 24px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#episode .episode-list {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: left;
   -webkit-justify-content: left;
   justify-content: left;
   flex-wrap: wrap;
   width: 90%;
   margin: 0 auto 20px;
}
#episode .episode-number {
   border-left: 1px solid #333;
   width: 24%;
   text-align: center;
   margin: 8px 0;
   font-size: 14px;
   font-weight: 300;
   letter-spacing: 0.08em;
   line-height: 0.8;
}
#episode .episode-list li:last-child {
   border-right: 1px solid #333;
}
#episode .episode-list li:nth-child(4), #episode .episode-list li:nth-child(8) {
   border-right: 1px solid #333;
}
#episode .cut-wrap {
   width: 100%;
   margin: 0 auto;
   text-align: center;
}
#episode .main-image img {
   text-align: center;
   width: 100%;
}
#episode .thumbnails {
   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;
}
#episode .thumbnails li {
   width: 30%;
   margin: 2%;
}
#episode .thumbnails li:first-child {
   margin-left: 0;
}
#episode .thumbnails li:last-child {
   margin-right: 0;
}
#episode .thumbnails img {
   width: 100%;
   display: block;
}
#episode .thumbnails .thumbnails-last {
   margin-right: 0;
}
#episode .staff-txt {
   font-size: 12px;
   margin: 20px 0;
   color: #888;
}
#episode .ttl-jp {
   font-weight: normal;
   font-size: 13px;
   text-align: center;
}
#episode .story-txt-box {
   text-align: justify;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#episode .sp-thumbnails-last {
   margin-right: 0;
}
#episode .episode_wrap .cut-wrap .main-image {
   width: 100%;
   display: block;
   margin-bottom: 1%;
}
#episode .episode_wrap .cut-wrap .thumbnails .sp-mgr0 {
   margin-right: 0;
}
#episode .episode_wrap .cut-wrap .thumbnails .sp-mgl0 {
   margin-left: 0;
}
#episode .bxslider li img {
   width: 100%;
}
#episode .bx-pager a img {
   width: 100%;
   display: block;
}
#episode .bx-pager a {
   display: block;
   width: 23%;
   margin: 1%;
}
.bxslider a:nth-child(1), .bxslider a:nth-child(5) {
   margin-left: 0;
}
#episode .bxslider img {
   display: block;
}
#episode .bx-pager {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
}
#episode .bx-wrapper {
   margin: 0;
   padding-left: 0;
   margin-bottom: 10px;
}
.bx-wrapper .bx-viewport {
   left: 0 !important;
}
.bx-viewport .bxslider li {
   z-index: 0 !important;
}
.bx-controls-direction {
   display: none !important;
}
#episode .episode_wrap .movie {
   border-top: 1px solid #333;
   margin-top: 30px;
   padding-top: 30px;
}
#episode .movie .white-tag {
   margin-bottom: 15px;
   font-size: 14px;
   font-weight: bold;
   color: #fafafa;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#episode .movie .white-tag::before {
   content: url(../img/common/ttl-arrow-white-left.png);
   position: relative;
   margin-right: 8px;
   top: -2px;
}
#episode .movie .white-tag::after {
   content: url(../img/common/ttl-arrow-white-right.png);
   position: relative;
   margin-left: 8px;
   top: -1px;
}
@media screen and (min-width:960px) {
   #episode #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;
   }
   #episode h1.page_ttl {
      background-position: top 45px left -35px;
      width: 170px;
      margin: auto;
   }
   #episode .episode_wrap {
      width: 660px;
      margin: auto auto 60px;
      background-color: #0f0f0f;
      border: 1px solid #333333;
      padding: 50px 60px 40px;
      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;
   }
   #episode .block-episode-ttl {
      text-align: center;
      letter-spacing: 0.09em;
      margin-bottom: 30px;
   }
   #episode .episode-tag::before {
      content: url(../img/common/ttl-arrow-left.png);
      position: relative;
      margin-right: 6px;
      top: -2px;
   }
   #episode .episode-tag {
      font-size: 15px;
      font-weight: bold;
      color: #fff100;
      font-weight: 300;
   }
   #episode .block-song h2.artist-name-yellow {
      margin: 20px 0;
      font-size: 28px;
      text-align: center;
      color: #fff100;
      letter-spacing: 0.1em;
   }
   #episode .episode-list {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-flow: row wrap;
      flex-wrap: wrap;
      -ms-flex-pack: left;
      -webkit-justify-content: left;
      justify-content: left;
      flex-wrap: wrap;
      width: 780px;
      margin: 0 auto 40px;
   }
   #episode h1.song-ttl {
      width: 100%;
      margin: 8px 0 13px;
      font-size: 28px;
      font-weight: normal;
      letter-spacing: 0.08em;
      line-height: 1.4em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-weight: 300;
   }
   #episode .thumbnails li {
      width: 15%;
      margin: 1%;
   }
   #episode .episode_wrap .cut-wrap .thumbnails .sp-mgr0 {
      margin-right: auto;
   }
   #episode .episode_wrap .cut-wrap .thumbnails .sp-mgl0 {
      margin-left: auto;
   }
   #episode .bx-pager a {
      display: block;
      width: 13%;
   }
   #episode .bx-pager a {
      margin: 0
   }
   #episode .bx-pager {
      justify-content: space-between;
   }
   #episode .episode-number {
      margin: 12px 0;
   }
   #episode .ttl-jp {
      font-weight: normal;
      font-size: 15px;
      
   }
   #episode .episode_wrap .movie {
      border-top: 1px solid #333;
      margin-top: 60px;
      padding-top: 60px;
   }
}
/* --------------------------------------------------------------

				リンクニメーション

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