@charset "utf-8";

/*==================================================
スライダーのためのcss　カーセンサー
===================================*/
.slider2 img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

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

.slider2 .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}


/*==================================================
スリックのためのcss　店舗写真
===================================*/
.content_area{
  max-width: 100%;
  padding: 0px;
  margin: 0 auto;
}

.slick-track {
  display: flex;
}
.slick-slide {
  height: auto !important;
}
.slider li {
border: 1px solid #fff;
margin-left:0px
}

.slick-item .slick-content {
  background: white; /* 背景色 */
  margin: 0px; /* アイテム間の余白 */
  padding: 3%; /* 内側の余白 */
  position: relative;
  /* flexboxで中央寄せするなら以下も */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: center;*/
  min-height: 200px; /* 必要に応じて高さを指定 */
}

.slick-item .slick-content img {
  max-width: 100%; /* 画像が親要素からはみ出さないように */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 画像の下の余白をなくす */
  margin-bottom: 10px; /* 画像とテキストの間の余白 */
}

.slick-item .slick-content h4 {
    margin: 0;
    padding: 0;
}
.slick-item .slick-content p {
font-size: 0.9rem;
  line-height: 1.5; /* 行の高さ */
  margin: 0; /* pタグのデフォルトマージンをリセット */
}

/* レスポンシブ対応の調整 */
@media screen and (max-width:560px){
  .slick-item .slick-content {
    margin: 5px;
    padding: 1.5%;
    min-height: 150px; /* 必要に応じて高さを調整 */
  }
  .slick-item .slick-content img {
    margin-bottom: 5px;
  }
  .slick-item .slick-content p {
  }
}


.left, .right {
  display: inline-block;
  margin-top: auto;
}

.frame {
  display: flex;
  justify-content: space-between;
}

.arrow_box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 15px 0 0;
  position: relative;
}

.prev-arrow,
.next-arrow {
  display: block;
  width: 35px;
  height: 35px;
  background: #000;
  border-radius: 50%;
  transition: all .3s ease;
  cursor: pointer;
  position:relative;
}

.prev-arrow {
  transform: rotate(180deg);
  margin-right: 0px;
}

.prev-arrow::before,
.next-arrow::before{
  position:absolute;
  content: "";
  width:10px;
  height:10px;
  border-right: 2px solid #FFF;
  border-top: 2px solid #FFF;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  transform:rotate(45deg);
}

@media screen and (max-width:560px){
  .content_area{
    padding: 0px;
  }
  .slick-item p {
    font-size: 15px;
    line-height: 80px;
    margin: 5px;
    padding: 1.5%;
  }

  .arrow_box {
    margin: 10px 0 0;
  }

  .prev-arrow,
  .next-arrow {
    width: 35px;
    height: 35px;
  }
}

/*　追加
--------------------------------------------------------------------*/
.slick-paging {
  font-size: 16px;
  color: #333; /* 文字色はお好みで */
  margin: 0 10px; /* 矢印との間隔を調整 */
  white-space: nowrap; /* 折り返しを防ぐ */
}

@media screen and (max-width:560px){
  .slick-paging {

  }
}