@charset "utf-8";

/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 80%; /* 幅を80%に統一 */
  max-width: 1000px; /* 最大幅を指定（必要に応じて変更） */
  height: auto;
  margin: 0 auto; /* 自動で中央寄せ */
  padding: 0; /* 余白をリセット */
}

.slider__img {
  width:100%;/*スライダー内の画像を横幅100%に*/
  margin:0 auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
  margin:0 30px;
  height: auto;
}

.slick-list{
  padding: 0;
}

/*矢印の設定*/

.slick-track{
  margin: 0;
}

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
  position: absolute;/*絶対配置にする*/
  top: 45%;
  cursor: pointer;/*マウスカーソルを指マークに*/
  outline: none;/*クリックをしたら出てくる枠線を消す*/
  border-top: 5px solid #453800;/*矢印の色*/
  border-right: 5px solid #453800;/*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
  left: -1%;
  transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
  right: -1%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots li {
  display:inline-block;
  margin:0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width:12px;/*ドットボタンのサイズ*/
  height:12px;/*ドットボタンのサイズ*/
  display:block;
  border-radius:50%;
  background-size: cover;
  background-color:#ccc5ab;/*ドットボタンの色*/
  align-items: center;
}

.slick-dots .slick-active button{
  background-image:url(../images/himawari__btn.png);
  width: 30px;
  height: 30px;
  padding-top: 7px;
  background-size: contain;
  background-color: inherit;
}

.slick-active{
  padding-top:20px ;
}

.slick-dots{
  margin-bottom: 10px;
}


/*========= レイアウトのためのCSS ===============*/

h2,p {
    text-align:center;
    padding:20px;
}

ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

a:hover,
a:active{
  text-decoration: none;
}

@media screen and (max-width: 768px){
  .slider{
    width: 90%;
  }
  
  .slider__img{
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }  

  .slick-slide{
    float: left;
  }
}