/* 例：スライダー内の画像を高さ300pxで統一する場合 */
.splide__slide img,
.swiper-slide img{
  width: 100%;
  object-fit: cover; /* 画像をトリミングして綺麗に収める */
  height:340px;
  object-position: top 69% !important;
}


* スライド自体の基準（Splideがデフォルトで持っていますが念のため） */
.splide__slide {
  position: relative;
}

/* 画像の上に重ねるウォーターマークのスタイル */
.slide-watermark {
  position: absolute;
  
  /* 💡 配置したい場所（例：右下に固定） */
  bottom: 25px;
  right: 25px;
  
  /* 見た目の調整 */
  color: rgba(255, 255, 255, 0.6); /* 白文字を60%透過 */
  font-size: 14px;
  font-family: sans-serif;
  letter-spacing: 1px;
  
  /* 💡 ユーザーに文字選択やコピーをされたくない場合（ガード用） */
  pointer-events: none; /* マウスイベントを透過させてスライダーのドラッグを邪魔しない */
  user-select: none;    /* テキスト選択不可にする */
  
  /* もし背景を薄暗い黒にしたい場合はこちらを有効に */
  /* background: rgba(0, 0, 0, 0.4); */
  /* padding: 5px 10px; */
  /* border-radius: 4px; */
}

/* 💡 透かしに「画像（ロゴなど）」を使う場合のサイズ調整 */
.slide-watermark img {
  width: 100px;  /* お好みのサイズに */
  height: auto;
  opacity: 0.5;  /* 50%透過させて薄くする */
}

/* スライドの枠からはみ出る部分を丸めてカットする */
.splide__slide {
  border-radius: 16px; /* 💡 丸みの強さ（お好みで調整） */
  overflow: hidden;    /* 💡 角の枠外にはみ出る画像を非表示にする */
  
  /* Safariブラウザで角丸が効かなくなるバグの対策 */
  transform: translateZ(0); 
}


/* スマホ用設定（画面幅 768px 未満） */
@media (max-width: 767px) {
  .splide__slide img {
    width: 100%;
    object-fit: contain;       /* 画像全体を枠内に綺麗に収める（頭が切れない） */
    background-color: #ddd;    /* 左右にできる隙間の背景色（任意） */
  }
}


/* スマホ用設定（画面幅 768px 未満） */
/*
@media (max-width: 767px) {
  .splide__slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;      /* 横長（16:9）の比率で高さを自動計算させる */
    object-fit: cover;
    object-position: top 89%; /* 上基準で切り出し */
  }
}
*/