@charset "UTF-8";

body {
  font-size: 16px;
}

/*--------------共通--------------------------------------*/
.container {
  width: 100%;
  color: #765C36;
}
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #663300;
}
img {
  width: 100%;
}


/*------------------pc     pc---------------------*/
@media (min-width: 769px) {
  body{
      min-width: 769px;
      margin: 0 auto;
  }
  #sp {
    display: none;
  }




h2 {
  padding-left: 10%;
  border-bottom: 1px solid #716246;
  width: 30%;
  margin-left: 5%;
  margin-top: 200px;
}

footer {
  margin-top: 200px;
}
.slide {
    margin: 4%;
}



/*==================================================
スライダーのためのcss
===================================*/
.slider {
    width: 80%;
    margin: 0 auto;
}

.slider img {
    width: 30vw;
    height: 350px;
}

.slider .slick-slide {
    transform: scale(0.6);
    /*左右の画像のサイズを80%に*/
    transition: all .5s;
    /*拡大や透過のアニメーションを0.5秒で行う*/
    opacity: 0.2;
    /*透過50%*/
}

.slider .slick-slide.slick-center {
    transform: scale(1);
    /*中央の画像のサイズだけ等倍に*/
    opacity: 1;
    /*透過なし*/
}


/*矢印の設定*/

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

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

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

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align: center;
    margin: 20px 0 0 0;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 5px;
    /*ドットボタンのサイズ*/
    height:9px;
    /*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #9d896c;
    border-color: #726250;
    /*ドットボタンの色*/
}

.slick-dots .slick-active button {
    background:#726250;
    /*ドットボタンの現在地表示の色*/
}













}











/*------------------sp      sp---------------------*/
@media (max-width: 768px) {
  body{
      max-width: 768px;
      margin: 0 auto;
  }



  h2 {
    padding-left: 10%;
    border-bottom: 1px solid #716246;
    width: 45%;
    margin-left: 5%;
    margin-top: 50px;
    font-size: 1.2rem;
  }
  
  footer {
    margin-top: 150px;
  }
  .slide {
      margin: 4%;
  }
  
  
  
  /*==================================================
  スライダーのためのcss
  ===================================*/
  .slider {
      width: 90%;
      margin: 0 auto;
      padding-top: 20px;
  }
  
  .slider img {
      width: 40vw;
      height: 150px;
  }
  
  .slider .slick-slide {
      transform: scale(0.6);
      /*左右の画像のサイズを80%に*/
      transition: all .5s;
      /*拡大や透過のアニメーションを0.5秒で行う*/
      opacity: 0.2;
      /*透過50%*/
  }
  
  .slider .slick-slide.slick-center {
      transform: scale(1);
      /*中央の画像のサイズだけ等倍に*/
      opacity: 1;
      /*透過なし*/
  }
  
  
  /*矢印の設定*/
  
  /*戻る、次へ矢印の位置*/
  .slick-prev,
  .slick-next {
      position: absolute;
      /*絶対配置にする*/
      top: 42%;
      cursor: pointer;
      /*マウスカーソルを指マークに*/
      outline: none;
      /*クリックをしたら出てくる枠線を消す*/
      border-top: 2px solid #666;
      /*矢印の色*/
      border-right: 2px solid #666;
      /*矢印の色*/
      height: 15px;
      width: 15px;
  }
  
  .slick-prev {
      /*戻る矢印の位置と形状*/
      left: -1.5%;
      transform: rotate(-135deg);
  }
  
  .slick-next {
      /*次へ矢印の位置と形状*/
      right: -1.5%;
      transform: rotate(45deg);
  }
  
  /*ドットナビゲーションの設定*/
  
  .slick-dots {
      text-align: center;
      margin: 20px 0 0 0;
  }
  
  .slick-dots li {
      display: inline-block;
      margin: 0 5px;
  }
  
  .slick-dots button {
      color: transparent;
      outline: none;
      width: 2px;
      /*ドットボタンのサイズ*/
      height:5px;
      /*ドットボタンのサイズ*/
      display: block;
      border-radius: 60%;
      background: #9d896c;
      border-color: #726250;
      /*ドットボタンの色*/
  }
  
  .slick-dots .slick-active button {
      background:#726250;
      /*ドットボタンの現在地表示の色*/
  }






  

}