/*-----------------------------------------------------------*/
/*キャラクター*/
/*-----------------------------------------------------------*/
.ccc {
  overflow-x: hidden;
  max-width: 850px;
  margin: -36px  auto 0;
}

/*スライド幅*/
.characterSlide {
  overflow: hidden;
  /*画像幅850px*/
  max-width: 850px;
  width: 100%;
  margin:0 auto 0 auto;
  z-index: 60;
}

/*スライド画像をブロック要素に変更*/
.characterSlide img {
  display: block;
  /*画像幅850px*/
  max-width: 100%;
  height: auto;
}

/*-----------------------------------------------------------*/
/*キャラクターサムネイルレイアウト背景付き*/
#lower .character .thumbBox {
  display: block;
  width: auto;
  max-width: 850px;
  background: url("../../character/_image/charaNavl.png") no-repeat left center, url("../../character/_image/charaNavr.png") no-repeat right center, url("../../character/_image/charaNavline.png") no-repeat center;
  margin: 0 auto;
  padding: 0;
}

/*サムネイルスライド幅*/
.characterThumb {
  width: auto;

  max-width: 750px;
  margin: 0 auto;
}

.characterThumb .slick-slide img {
  max-width: 100%;
  display: block;
  height: auto;
}

.characterThumb .slick-track {
  transform: unset !important;
  max-width: 100% !important;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}

/*flexの値を変更し列数を変更*/
.characterThumb .slick-slide {
  display: block !important;
  float: none !important;
  flex: 0 0 10%;
  margin: 5px 2px;
}


@media screen and (max-width: 667px) {
/*-----------------------------------------------------------*/
  /*キャラクター*/
  /*-----------------------------------------------------------*/
  /*スライド幅*/
  .characterSlide {
    overflow: hidden;
    /*画像幅850px*/
    max-width: 96%;
    width: 96%;
    margin: -12px auto 0;
  }

  /*-----------------------------------------------------------*/
  /*キャラクターサムネイルレイアウト背景付き*/
  .thumbBox {
    overflow-x: hidden;
    max-width: 96%;
    background: url("../../character/_image/charaNavl.png") no-repeat left center/50px auto, url("../../character/_image/charaNavr.png") no-repeat right center/50px auto, url("../../character/_image/charaNavline.png") no-repeat center;
    margin: 0 auto;
    padding: 0;
  }

  /*サムネイルスライド幅*/
  .characterThumb {
    max-width: 90%;
    margin: 0 auto;
  }


  .characterThumb .slick-track {
    transform: unset !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
  }


  /*flexの値を変更し列数を変更*/
  .characterThumb .slick-slide {
    display: block !important;
    float: none !important;
    flex: 0 0 18%;
    margin: 5px 2px;
  }
}