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

							Layout

-----------------------------------------------------------------*/
.character-wrap h2 {
   margin-bottom: 56px;
}
#character h1.page_ttl {
   background-position: top 3px left 20px;
   width: 308px;
}
#character .character-tag {
   font-size: 13px;
   font-weight: bold;
   color: #fff100;
}
#character .character-tag::before {
   content: url("../img/common/ttl-arrow-left.png");
   position: relative;
   margin-right: 6px;
   top: -1px;
}
#character .character-tag::after {
   content: url("../img/common/ttl-arrow-right.png");
   position: relative;
   margin-left: 4px;
   top: -1px;
}
#character .block-character-ttl {
   text-align: center;
   letter-spacing: 0.09em;
   line-height: 2;
   margin: 30px 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#character .artist-name {
   font-size: 10px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
#character h1.character-ttl {
   width: 100%;
   font-size: 20px;
   font-weight: normal;
   letter-spacing: 0.08em;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   line-height: 1.6;
}
#character .character-data {
   max-width: 300px;
   margin: auto;
   text-align: left;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: justify;
   /*padding: 0 24px;*/
   margin-bottom: 50px;
   font-size: 13px;
   line-height: 2em;
}
#character .bd-tag {
    color: #fff100;
    font-size: 13px;
    font-weight: normal;
    /* margin-top: 7%; */
    text-align: center;
    margin: 8px 0;
}
#character .bd-tag::before {
    content: url("../img/common/ttl-arrow-left.png");
    position: relative;
    margin-right: 6px;
    top: -2px;
}
#character .bd-tag::after {
    content: url("../img/common/ttl-arrow-right.png");
    position: relative;
    margin-left: 4px;
    top: -2px;
}
#character .subnav .category {
    border-left: 1px solid #333;
    width: 44%;
    text-align: center;
    margin: 8px 0;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 0.8;
}
#character .subnav li.category:nth-child(2) {
   border-right: 1px solid #333;
}
#character .subnav li a {
    border-radius: 0;
    border: none;
    color: #fff;
    display: block;
    text-align: center;
    height: auto;
    line-height: 41px;
    width: 100%;
    padding: 0;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
#character .subnav {
    margin-bottom: 40px;
}
.swiper-character-wrap {
   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;
}
.swiper-character-box {
   width: 38%;
   margin: 6%;
}
@media screen and (min-width:960px) {
   #character .subnav .category {
       border-left: 1px solid #333;
       width: 48%;
       text-align: center;
       margin: 8px 0;
       font-size: 20px;
       font-weight: 300;
       letter-spacing: 0.08em;
       line-height: 0.8;
   }
   #character .character-wrap {
      width: 660px;
      margin: 0 auto 180px;
   }
   #character .chart-wrap {
      width: 660px;
      margin: 0 auto 0;
   }
   #character .chart-wrap .chart {
      margin-bottom: 180px
   }
   #character .chart img {
      width: 100%;
   }
   .character-wrap h2 {
      margin-bottom: 70px;
   }
   #character #main {
      margin: 0 auto;
      float: left;
      padding: 0;
      padding-left: 256px;
      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;
   }
   #character h1.page_ttl {
      background-position: top 45px left 35px;
      width: 347px;
      margin: auto;
   }
   #character .block-character-ttl {
      text-align: center;
      letter-spacing: 0.09em;
      margin: 30px 0;
   }
   #character .character-tag::before {
      content: url("../img/common/ttl-arrow-left.png");
      position: relative;
      margin-right: 6px;
      top: -2px;
      line-height: 3;
   }
   #character .block-character h2.artist-name-yellow {
      margin: 20px 0;
      font-size: 28px;
      text-align: center;
      color: #fff100;
      letter-spacing: 0.1em;
   }
}
/* --------------------------------------------------------------

							slider

-----------------------------------------------------------------*/
.swiper-wrapper {
   text-align: center;
}
.swiper-wrapper .swiper-slide {
   text-align: center;
   /*background-color: #0f0f0f;*/
   padding: 0;
   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;
   width: 100% !important;
}
.swiper-wrapper img {
   display: block;
   /*max-width: 300px;*/
   width: 100%;
   margin: auto;
}
.thumbnail-type .thumbnail .swiper-slide {
   cursor: pointer;
   margin: 1% !important;
   padding: 0 !important;
   width: 46px !important;
   height: 46px;
   background-color: #000;
   border: none;
   border: 1px solid #333;
}
.thumbnail-type .thumbnail .swiper-slide img {
   width: 46px !important;
   height: 46px;
   opacity: .4;
}
.thumbnail-type .thumbnail .swiper-slide img:hover {
   width: 46px !important;
   height: 46px;
   opacity: 1;
   transition: 3.0s;
}
.thumbnail-type .thumbnail .swiper-slide-active {
   width: 46px !important;
   height: 46px;
   background: none;
   border: none;
}
.thumbnail-type .thumbnail .swiper-slide-active img {
   opacity: 1;
   width: 46px !important;
   height: 46px;
}
.thumbnail-type .thumbnail .swiper-wrapper {
   transform: translate3d(0px, 0px, 0px) !important;
   transition-duration: 0ms;
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-flow: row wrap;
   flex-wrap: wrap;
   -ms-flex-pack: space-between;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   flex-wrap: wrap;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
   background-image: url("../img/character/slide-arrow-next.png") !important;
   right: 0 !important;
   left: auto;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
   background-image: url("../img/character/slide-arrow-preview.png") !important;
   left: 0 !important;
   right: auto;
}
.swiper-button-next, .swiper-button-prev {
    position: absolute;
    top: 63% !important;
    width: 17px !important;
    height: 34px !important;
    margin-top: 200px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 17px 34px !important;
    -webkit-background-size: 17px 34px !important;
    background-size: 17px 34px !important;
    background-position: center;
    background-repeat: no-repeat;
}
.swiper-container {
   margin-bottom: 33px;
   width: 90%;
}

@media screen and (min-width:960px) {
   .swiper-container {
      margin-bottom: 0;
      max-width: 660px;
      width: 100%;
   }
   .thumbnail-type .thumbnail .swiper-wrapper {
      transform: translate3d(0px, 0px, 0px) !important;
      transition-duration: 0ms;
      background: none;
      border: none;
      padding: 0;
      margin-bottom: 40px;
      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;
   }
   .thumbnail-type .thumbnail .swiper-slide {
      cursor: pointer;
      margin: 1.1% !important;
      padding: 0 !important;
      width: 68px !important;
      height: 68px;
      background-color: #000;
      border: none;
   }
   .thumbnail-type .thumbnail .swiper-slide-active {
      width: 68px !important;
      height: 68px;
      background: none;
      border: none;
   }
   .thumbnail-type .thumbnail .swiper-slide-active img {
      opacity: 1 !important;
      width: 68px !important;
      height: 68px;
   }
   .thumbnail-type .thumbnail .swiper-slide img {
      width: 68px !important;
      height: 68px;
      opacity: .3;
      border: 1px solid #ccc;
   }
   .thumbnail-type .thumbnail .swiper-slide img:hover {
      width: 68px !important;
      height: 68px;
      opacity: 1;
      transition: 3.0s;
   }
   /*.thumbnail-type .thumbnail .swiper-slide:first-child {
      margin-left: 0 !important;
   }*/
   /*.thumbnail-type .thumbnail .swiper-slide:last-child {
      margin-right: 0 !important;
   }*/
   .swiper-wrapper img {
      display: block;
      max-width: 570px;
      width: 100%;
      margin: auto;
   }
   #character .character-data {
      max-width: 60%;
       margin: auto;
       text-align: left;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       text-align: justify;
       padding: 0;
       margin-bottom: 50px;
       text-align: justify;
       font-size: 15px;
       line-height: 2.2;
       letter-spacing: 0.02em;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   }
   .swiper-button-next, .swiper-button-prev {
      top: 30% !important;
   }
   .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
      background-image: url("../img/character/slide-arrow-next.png") !important;
      right: 0px !important;
      left: auto;
   }
   .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
      background-image: url("../img/character/slide-arrow-preview.png") !important;
      left: 0px !important;
      right: auto;
   }
   .swiper-wrapper .swiper-slide {
      padding: 20px 0 40px;
   }
   #character h1.character-ttl {
      font-size: 28px;
   }
   #character .artist-name {
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
   }
}
@media screen and (min-width:767px) {
   .swiper-button-next, .swiper-button-prev {
       top: 30% !important;
   }
}
@media screen and (min-width:599px) {
   .thumbnail-type .thumbnail .swiper-slide {
       margin: 2% 2% 2% 0;
   }
}

/* --------------------------------------------------------------

				リンクニメーション

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