@charset "utf-8";
/* スライダー枠
========================= */
.sliderWrapper{
  margin: 0 auto 30px;
}
/*スライダー　（js挙動までいったん非表示）*/
.slider {
  display:none;
}
.slider.slick-initialized {
    display: block;/*プログラムが動いたら表示*/
}
/*スライダー横幅*/
.mypattern{
  width: 100%;
}
/* 画像と画像の余白を0に */
.mypattern .slick-slide{
  margin: 0;
}

/* スライダーイメージ
========================= */
.slick-slide img {
  width: 100%;
  max-width: 1200px;
  height: auto;
}
/* ホバーしても画像を透過させない */
.slick-slide a:hover img {
opacity: 1;
}

/* 左右のナビゲーション
========================= */
.slick-arrow{
  position: absolute;
  top: 0;
  /*画面幅から画像1枚分の幅を引く。その後にスクロールバーの横幅を引く。その数字を割る２することで左右の画像の横幅を算出する*/
  width: calc((100vw - 1200px - (100vw - 100%)) / 2);
  background: rgba(255,255,255,0.5);
  height: 100%;
  z-index: 1;
}
/*矢印*/
.slick-arrow span{
  position: absolute;
  top: 50%;
  right: -34px;
  margin-top: -30px;
  width: 34px;
  height: 60px;
  z-index: 3;
  background-color: rgba(255,255,255,0.5);
}
.slick-arrow span::before{
  position: absolute;
  top: 50%;
  right: 50%;
  margin: -8px -12px 0 0;
  content: "";
  width: 16px;
  height: 16px;
  border-top: 2px solid #444;
  border-left: 2px solid #444;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.slick-arrow:hover span::before{
}
.slick-arrow:hover{
  cursor: pointer;
}
/*ナビゲーション　next*/
.slick-arrow.slick-next{
  right: 0;
}
.slick-arrow.slick-next span{
  left: -34px;
}
/*矢印　next*/
.slick-arrow.slick-next span::before{
  margin: -8px -6px 0 0;
transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-webkit-transform: rotate(-225deg);
}
.slick-arrow.slick-next:hover span::before{
}

/* スライダー下ナビゲーション（フッターコンテンツ用と違うため.sliderを親に設定）
========================= */
.slider .slick-dots{
  bottom: -25px;
  height: 6px;
  line-height: 40px;
}
/* ボタンのスタイル削除 */
.slider .slick-dots li button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.slider .slick-dots li,
.slider .slick-dots li button,
.slider .slick-dots li button::before{
  width: 40px;
  height: 6px;
  line-height: 20px;
}