
/*Slick　サムネイル固定スライダー（SP）
--------------------------------------------------------*/
.sliderbox,.sliderbox2{
	width: 100%;
	height: auto;
}

.dlc_img{
	width: 90%;
	height: auto;
	position: static;
	margin: 0 auto;
}

.wrap_chara_box, .custom_box,.wrap_dlc_box {
  background-color: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:auto;/*100vh*/
	
}
.wrap_chara_box:after, .custom_box:after ,.wrap_dlc_box:after{
    content:" ";
    display:block;
    clear:both;
}
.slider,.slider2 {
  width: 100%;
  margin: 0 auto 0; }

.slide-item img {
  width: 100%;
  height: auto;
}

.thumbnail-list {
  width: 95%;
  margin: 0 auto 0 !important;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
position: static;
	cursor: pointer;
}

.thumbnail-list2 {
  width: 65%;
  margin: 0 auto 0 !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
position: static;
	cursor: pointer;
}

.thumbnail-item {
  flex: 0 1 13%;
  margin-bottom: 10px;
  box-sizing: border-box;
  position: relative; 
}
.thumbnail-item2 {
  flex: 0 1 19%;
  margin-bottom: 10px;
	margin-left: 5px;
	margin-right: 5px;
  box-sizing: border-box;
  position: relative; 
}
.new::before{
	background-image: url(../img/chara_bnr_new.png);
	background-repeat: no-repeat;
	position: absolute;
	z-index: 9999;
	bottom: 0;
	left: 0;
	}

.thumbnail-item:after,.thumbnail-item2:after {
    content: '';
	background: url(../img/chara_bnr_white.png) no-repeat;/*追加*/
	background-size:auto 100%;/*追加*/
    /*background-color: rgba(255, 255, 255, 0.5);*/
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;/*１*/
    transition: .3s opacity linear;
	cursor : pointer;
}
  .thumbnail-item.thumbnail-current:after,
.thumbnail-item2.thumbnail-current2:after{
    opacity: 0; 
}
  .thumbnail-item img,.thumbnail-item2 img {
    width: 100%;
    margin: 0 auto; }

/* Tablet （画面481px以上1023以下）
=================================================*/
@media screen and (min-width:481px) {

}


/* PC 画面サイズ1024px以上
=================================================*/
@media screen and (min-width: 1024px) { 
	
/*Slick　サムネイル固定スライダー（PC）
--------------------------------------------------------*/
.wrap_chara_box,.wrap_dlc_box{
		width: 1100px;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
.sliderbox,.sliderbox2{
	width: 1100px;
	height: 1100px;
}
.dlc_img{
	width: auto !important;
	height: auto;
	top:0px;
	left: 0px;
	position: absolute;
}
.chara01{background-image: url(../img/chara_01.png);}
.chara02{background-image: url(../img/chara_02.png);}
.chara03{background-image: url(../img/chara_03.png);}
.chara04{background-image: url(../img/chara_04.png);}
.chara05{background-image: url(../img/chara_05.png);}
.chara06{background-image: url(../img/chara_06.png);}
.chara07{background-image: url(../img/chara_07.png);}
.chara08{background-image: url(../img/chara_08.png);}
.chara09{background-image: url(../img/chara_09.png);}
.chara10{background-image: url(../img/chara_10.png);}
.chara11{background-image: url(../img/chara_11.png);}
.chara12{background-image: url(../img/chara_12.png);}
.chara13{background-image: url(../img/chara_13.png);}
.chara14{background-image: url(../img/chara_14.png);}
.chara15{background-image: url(../img/chara_15.png);}
.chara16{background-image: url(../img/chara_16.png);}
.chara17{background-image: url(../img/chara_17.png);}
.chara18{background-image: url(../img/chara_18.png);}
	
.chara01,.chara02,.chara03,.chara04,.chara05,.chara06,.chara07,
.chara08,.chara09,.chara10,.chara11,.chara12,.chara13,.chara14,
.chara15,.chara16,.chara17,.chara18{
	background-repeat: no-repeat;
	background-position: top right;
	position: absolute;
	width: 1100px;
	height: 1100px;
	
}
	
	
.slider {
  width: 1100px;
  margin: 0 auto 1em; 
	}
.slider2 {
  width: 1100px;
  margin: 0 auto 1em; 
	}

.thumbnail-list {
  width: 1100px; 
	margin: 0px auto 0;
	position: absolute;
	z-index: 9998;
	top:720px;
	left: 0;
}
.thumbnail-list2 {
  width: 500px; 
	margin: 0px auto 0;
	position: absolute;
	z-index: 9998;
	top:750px;
	left: 50px;
}
	
.thumbnail-item {
  flex: 0 1 6.5%;/*2段は13%*/
}
.thumbnail-item2 {
  flex: 0 1 16%;
}
	

	
#chara_img01,#chara_img02,#chara_img03,#chara_img04,#chara_img05,#chara_img06,#chara_img07,
#chara_img08,#chara_img09,#chara_img10,#chara_img11,#chara_img12,#chara_img13,#chara_img14,
#chara_img15,#chara_img16,#chara_img17,#chara_img18
{width: auto; height: auto;
position: absolute;
top:0px;
left: 0px;
z-index: 888;
}

.targetImg img{
		width: auto;
	}

}
/* IE11 
=================================================*/
 @media all and (-ms-high-contrast:none){
      *::-ms-backdrop, .thumbnail-item{
	
		 } 
      *::-ms-backdrop, .thumbnail-item:after {
    
}
    }
