@charset "UTF-8";
/* CSS Document */

#usio{}
#usio .container {
 /* margin: 30px auto 0;*/
  max-width: 620px;
  width: 100%;
}
#usio img {
  height: auto;
  width: 100%;
}
#usio .thumbnail .slick-track {
  transform: unset !important;
}
#usio .thumbnail-img {
  opacity: 1;
  transition: opacity .3s linear;
}
#usio .thumbnail .slick-current {
  /*opacity: 1;*/
}
#usio .thumbnail .slick-current span{opacity: 0.3;}


#usio .thumbnail2 .slick-track {
  transform: unset !important;
}
#usio .thumbnail-img {
  opacity: 1;
  transition: opacity .3s linear;
}
#usio .thumbnail2 .slick-current {
 /* opacity: 0.3;*/
}
#usio .thumbnail2 .slick-current span{opacity: 0.3;}

#usio .thumbnail,
#usio .thumbnail2{width: 467px;}

#usio .thumbnail-img{margin-right: 5px; margin-top: 10px;}

.thumbnail-img{position: relative;}
.thumbnail-img span{position: absolute; top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%; 
  color: #fff; text-align: center;}
  
/* #usio .thumbnail-img {background: #000;}
 #usio .thumbnail-img img{mix-blend-mode: multiply;}*/


/*タブレット縦・スマホ横*/
@media screen and (max-width: 900px){}


/*スマホ縦*/
@media screen and (max-width: 480px){
#usio .container{width: 100%; max-width: 100%;}
#usio .thumbnail, #usio .thumbnail2{width: 100%;}

#usio .slick-track div:last-child{margin-right: 0;}

#usio .thumbnail .slick-track,
#usio .thumbnail2 .slick-track{display: flex; justify-content: space-between;}

.thumbnail-img span{font-size: 11px;}

}