@charset 'UTF-8';

/*　横並びを回避　*/
.top-slider,
.artist1-slider {
  opacity: 0;
  transition: opacity .3s linear;
}
.slick-initialized{
  opacity: 1;
}

/* slider */
.top-slider-f{
    margin-bottom: 4em;
}
.top-slider{
}
.top-slider .thumb,
.top-slider .movie {
  aspect-ratio: 2560 / 715;
}
.top-slider .thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.top-slider .thumb{
    border: none;
}
.top-slider .thumb img{
    width: 100%;
    height: auto;
    border-radius: 20px;
}
/*　slick左右余白　*/
.slick-list {
  margin: 0 -45px;
}
.slick-slide {
  margin: 0 45px;
}
/* ドット */
/* dotsを丸くカスタマイズするCSS */
.slick-dots {
    display: flex;
    justify-content: center;
}
.slick-dots li {
    width: 5px;
    height: 5px;
    margin: 0 5px;
    background: var(--color_gray1);
    border-radius: 50%;
    cursor: pointer;
}
.slick-dots li:hover,
.slick-dots li.slick-active {
    background: var(--color_gray3);
}
.slick-dots li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}
.slick-dots{
    bottom: -50px !important;
}
.slick-dots li button:before{
        color: var(--color_gray1) !important;
}
.slick-dots li:hover button:before,
.slick-dots li.slick-active button:before{
        color: var(--color_gray3) !important;
}


/*センタリング削除*/
.top-f .slick-track{
  margin-left: unset;
}
/*メインスライダーのみセンタリング*/
.top-slider .slick-track{
  margin-left: auto;
}
.popular-entry-card-thumb img,
.artist1-slider img{
    opacity: 1;
    width: 100%;
    border-radius: 15px;
}
.popular-entry-card-thumb img:hover,
.artist1-slider img:hover{
    opacity: 1;
    transition: 0.3s;
}

@media screen and (max-width: 1440px){
/*　slick左右余白　*/
.slick-list {
  margin: 0 -15px;
}
.slick-slide {
  margin: 0 15px;
}
.pickup-slider .slick-prev{
  left: 3%;
}
.pickup-slider .slick-next{
  right: 3%;
}
}

@media screen and (max-width: 768px){
.pickup-slider .slick-next,.pickup-slider .slick-prev{
  width: 35px;
  height: 35px;
}  
.pickup-slider .slick-prev{
  left: 2%;
}
.pickup-slider .slick-next{
  right: 2%;
}
}


/*480px以下*/
@media screen and (max-width: 480px){
/*　slick左右余白　*/
.slick-list {
  margin: 0 -10px;
}
.slick-slide {
  margin: 0 10px;
}
.pickup-slider .slick-prev{
  left: 8%;
}
.pickup-slider .slick-next{
  right: 8%;
}
.pickup-slider .slick-next,.pickup-slider .slick-prev{
  width: 25px;
  height: 25px;
}
}