@charset "utf-8";
/*==================================================
スライダーのためのCSS
===================================*/
.slider-box {
  margin: 0 auto 100px;
  padding: 0; /* 不要な余白を排除 */
}

.slider {
  display: flex; /* フレックスボックスを使用 */
  justify-content: space-between; /* 左右端寄せかつ均等配置 */
  align-items: center; /* 上下中央揃え */
  margin: 0;
  padding: 0;
  list-style: none; /* リストマーカーを非表示 */
  width: 100%; /* スライダー全体を親要素いっぱいに広げる */
}

.slider li {
  flex: 1 1 calc(33.33%); /* 3つのアイテムが均等に幅を取る */
  margin: 0;
  text-align: center;
}

.slider img {
  width: 100%; /* リスト内で画像を親要素いっぱいに表示 */
  height: auto;
  border: 1px solid #4a2d04; /* 枠線の設定 */
}

.slick-list {
  margin: 0;
  padding: 0;
  overflow: hidden; /* 表示範囲外のスライドを隠す */
}

.slick-track {
  display: flex; /* フレックスボックスを使用してスライドを整列 */
  gap: 10px; /* スライド間の隙間をなくす */
}

/*矢印の設定*/
/* デフォルトの黒い矢印を完全に非表示 */
.slick-prev::before, .slick-next::before {
  content: '' !important; /* 空にして無効化 */
  display: none !important; /* 非表示 */
}
/* 縦長の三角形のカスタム矢印 */
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 0;
    height: 0;
    z-index: 100;
    background-color: transparent;
    border-style: solid;
}

/* 左矢印（縦長の三角形） */
.slick-prev {
    left: -25px;
    border-width: 20px 14px 20px 0; /* 縦を長く、横を狭く */
    border-color: transparent white transparent transparent;
}

/* 右矢印（縦長の三角形） */
.slick-next {
    right: -25px;
    border-width: 20px 0 20px 14px; /* 縦を長く、横を狭く */
    border-color: transparent transparent transparent white;
}

/* 位置調整 */
.slick-prev {
  left: -30px;
}

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

/*ドットナビゲーションの設定*/
.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.slick-dots li {
  display: none;
}

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

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

/*==================================================
ホバー時のオーバーレイアニメーション
===================================*/
/* 画像コンテナ */
.image-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

/* オーバーレイ */
.image-container .overlay {
  position: absolute;
  top: -100%; /* 初期位置を画像の上に隠す */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
  display: flex;
  align-items: center; /* テキストを垂直中央揃え */
  justify-content: center; /* テキストを水平中央揃え */
  transition: top 0.3s ease; /* アニメーションのスムーズな動き */
  z-index: 2; /* 画像より上に表示 */
  pointer-events: none; /* オーバーレイをクリック可能にしない */
}

/* 画像のスタイル */
.image-container img {
  position: relative; /* オーバーレイより後ろに配置 */
  z-index: 1;
  width: 100%;
  height: auto;
}

/* オーバーレイのテキスト */
.image-container .overlay-text {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 3; /* オーバーレイ内で最前面 */
  text-align: center;
}

/* ホバー時のアニメーション */
.image-container:hover .overlay {
  top: 0; /* 画像全体を覆う */
  transition-delay: 0.1s; /* ホバー時にディレイ */
  pointer-events: auto; /* ホバー時のみオーバーレイをイベントの対象に */
}

/* ホバー解除時のアニメーション */
.image-container:not(:hover) .overlay {
  top: -100%; /* 元の位置に戻る */
  transition-delay: 0.1s; /* ホバー解除時にディレイ */
}

/*=============================
600px以下のレスポンシブ対応
=============================*/
@media (max-width: 600px) {
  .slider-box {
    max-width: 85%;
    margin: 0 auto 40px;
    padding: 0 5px 0 0;
    position: relative;
    overflow: visible; /* 矢印が見えるように */
  }

  /* 矢印のデザインを縦長の三角形に変更 */
  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 0;
    height: 0;
    z-index: 100;
    background-color: transparent;
    border-style: solid;
  }

  /* 左矢印（縦長の三角形） */
  .slick-prev {
    left: -30px; /* 位置調整 */
    border-width: 12px 10px 12px 0; /* 縦に長く、横を狭く */
    border-color: transparent white transparent transparent;
  }

  /* 右矢印（縦長の三角形） */
  .slick-next {
    right: -34px; /* 位置調整 */
    border-width: 12px 0 12px 10px;
    border-color: transparent transparent transparent white;
  }
}