@charset "UTF-8";


#main {
   background-image: url(../character/img/bg-chara_sp.jpg);
   color:#fff;
   text-align: center;
   line-height: 2.1em;
}


#character {
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  text-align: center;
  color: #fff;
  line-height: 2.1em;
  font-size: 0.8em; }
 .wrap_chara {
    padding-bottom: 50px;
    height: auto; }
   .wrap_chara .swiper-slide {
      background-size: 650px;
      background-repeat: no-repeat;
      background-position: right top;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-right: 700px;
      padding-left: 50px;
      text-align: left; }
   .wrap_chara .swiper-container {
      width: 100%;
      height: 300px;
      margin-left: auto;
      margin-right: auto; }
   .wrap_chara .gallery-top {
      height: 80%;
      width: 100%; }
     .wrap_chara .gallery-top .swiper-slide {
        background-position: center top;
        background-size: 100%;
        background-repeat: no-repeat;
        padding-right: 20px;
        padding-left: 20px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box; }
       .wrap_chara .gallery-top .swiper-slide .name-chara {
         font-family:  'Noto Serif JP','Playfair Display',"游明朝体", "Yu Mincho", YuMincho, serif;
          font-size: 3em;
          padding-top: 300px;
          padding-bottom: 30px;
          color: #ffdb12;
          line-height: 1.2em; }
        .wrap_chara .gallery-top .swiper-slide .text_s {
          font-size: 2.8em!important;
        }

       .wrap_chara .gallery-top .swiper-slide .cv-chara {
         font-family:  'Noto Serif JP','Playfair Display',"游明朝体", "Yu Mincho", YuMincho, serif;
          padding-bottom: 20px;
          font-size: 1.5em; }
       .wrap_chara .gallery-top .swiper-slide .data-chara {
          line-height: 2em;
          font-size: 1.2em; }
     .wrap_chara .gallery-top .swiper-button-next,.wrap_chara .gallery-top .swiper-button-prev {
        top: 30%; }
     .wrap_chara .gallery-top .swiper-button-next,.wrap_chara .gallery-top .swiper-container-rtl .swiper-button-prev {
        right: 0;
        left: auto; }
   .wrap_chara .gallery-thumbs {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      height: 200px; }
     .wrap_chara .gallery-thumbs .swiper-wrapper {
        -webkit-box-pack: center;
        flex-wrap: wrap;
      align-content:flex-start;
        -ms-flex-pack: center;
        justify-content: center; }
   .wrap_chara .gallery-thumbs .swiper-slide {
      opacity: 0.4;
      padding: 0;
      margin: 0;
      cursor: pointer;
      background-size: 50px;
      padding-right: 0;
      width: 50px !important;
      margin-bottom: 10px;
      height: 50px; }

   .wrap_chara .gallery-thumbs .swiper-slide-thumb-active {
      opacity: 1; }
 .wrap_chara .txt_l {
    font-size: 1.4em;
    line-height: 2em;
    letter-spacing: 0.05em; }

@media screen and (min-width: 768px) and (max-width: 959px) {
   .wrap_chara .gallery-top .swiper-slide {
      margin: 0 auto;
      -webkit-background-size: 70%;
      background-size: 70%;
      background-position: center 0;
   }

   .wrap_chara .gallery-top .swiper-slide .name-chara {
      padding-top: 400px;
   }
   .wrap_chara .gallery-thumbs {
      height: 130px;
   }
}

@media screen and (min-width: 960px) {
   #main {
   background-image: url(../character/img/bg-chara.jpg);
   }
     .wrap_chara {
      font-size: 1em;
      letter-spacing: 0.05em;
      line-height: 2.5em;
      padding-bottom: 100px;
      height: 1000px;
      width: 800px;
      margin: 0 auto;
      }

     .wrap_chara .swiper-container {
        width: 100%;
        height: 150px;
        margin-left: auto;
        margin-right: auto; }
     .wrap_chara .gallery-top {
        height: 80%;
        width: 100%; }
       .wrap_chara .gallery-top .swiper-slide {
          background-position: right top;
          background-size: 800px;
          background-repeat: no-repeat;
          padding-right: 350px;
          padding-left: 70px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box; }
         .wrap_chara .gallery-top .swiper-slide .name-chara {
            font-size: 4em;
            padding-top: 50px;
            padding-bottom: 30px; }
         .wrap_chara .gallery-top .swiper-slide .cv-chara {
            padding-bottom: 20px;
            font-size: 1.5em; }
         .wrap_chara .gallery-top .swiper-slide .data-chara {
            line-height: 2em;
            font-size: 1em; }
     .wrap_chara .gallery-thumbs {
      width: 750px;
      height: auto;
      margin: 0 auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0; }
     .wrap_chara .gallery-thumbs .swiper-slide {
        opacity: 0.4;
        margin: 5px 2px; }
     .wrap_chara .gallery-thumbs .swiper-slide-thumb-active,.wrap_chara .gallery-thumbs .swiper-slide:hover {
        opacity: 1; }
     .wrap_chara .gallery-thumbs .swiper-slide {
        background-size: 80px;
        padding-right: 0;
        width: 80px !important;
        height: 80px;
      }
   .wrap_chara .ttl_cts {
      color: #fff; }
   .wrap_chara .txt_l {
      font-size: 1.7em;
      line-height: 2em;
      letter-spacing: 0em; }
   #chara1 {
      background-image:url(../character/img/chara1.png)!important;
   }
   #chara2 {
      background-image:url(../character/img/chara2.png)!important;
   }
   #chara3 {
      background-image:url(../character/img/chara3.png)!important;
   }
   #chara4 {
      background-image:url(../character/img/chara4.png)!important;
   }
   #chara5 {
      background-image:url(../character/img/chara5.png)!important;
   }
   #chara6 {
      background-image:url(../character/img/chara6.png)!important;
   }
   #chara7 {
      background-image:url(../character/img/chara7.png)!important;
   }
   #chara8 {
      background-image:url(../character/img/chara8.png)!important;
   }
   #chara9 {
      background-image:url(../character/img/chara9.png)!important;
   }
   #chara10 {
      background-image:url(../character/img/chara10.png)!important;
   }
   #chara11 {
      background-image:url(../character/img/chara11.png)!important;
   }
   #chara12 {
      background-image:url(../character/img/chara12.png)!important;
   }
   #chara13 {
      background-image:url(../character/img/chara13.png)!important;
   }

   #chara14 {
      background-image:url(../character/img/chara14.png)!important;
   }

   #chara15 {
      background-image:url(../character/img/chara15.png)!important;
   }

   #chara16 {
      background-image:url(../character/img/chara16.png)!important;
   }

   #chara17 {
      background-image:url(https://isekai-cheat-magician.com/character/img/chara17.png)!important;
   }






}