@charset "utf-8";
/*==================================================
スライダーのためのcss
===================================*/
.slider {
    width: 800px;
    margin: 20px auto;
}

.slider img {
    width: 20vw;
    height: auto;
}

/* Slick スライドのスタイル */
.slider .slick-slide {
    transform: scale(0.8);
    transition: all 0.5s;
    opacity: 0.5;
}

.slider .slick-slide.slick-center {
    transform: scale(1);
    opacity: 1;
}

@media screen and (max-width: 520px) {
  .slider {
    width: 100%;
    margin: 20px 0;
  }
  .slider img {
    width: 100vw;
    height: auto;
  }
  .slider .slick-slide {
      transform: scale(0.8);
      transition: all 0.5s;
      opacity: 0.5;
  }
}

/* 矢印のスタイル */
.slick-prev,
.slick-next {
    display: block;
    width: 30px;
    height: 30px;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

/* ドットナビゲーションの設定 */
.slick-dots {
    display : none;
}


/* メディアリンクのスタイル */
.media-news-link {
    width: 160px;
    border-radius: 15px;
    margin: 10px auto;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 2px 0;
}

.slick-prev,
.slick-next {
    position: absolute;
    display: block;
    height: 60px;
    width: 60px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: transparent;
    color: transparent;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.slick-prev {
    left: 10px; /* この位置は維持 */
}

.slick-next {
    right: 10px; /* この位置は維持 */
}

.slick-prev:before, 
.slick-next:before {
    font-family: 'slick'; /* デフォルトのフォントファミリー */
    font-size: 20px; /* 矢印の大きさ */
    color: #f4f4f4; /* 矢印の色 */
    opacity: 0.75; /* 通常時の透明度 */
    content: "←"; /* 左矢印 */
}

.slick-next:before {
    content: "→"; /* 右矢印 */
}