/*body {
margin: 0;
padding: 50px 20px;
background-color: #fff;
font-family: sans-serif;
}*/
.custom-slider-container {
width: 100%;
max-width: 960px;
margin: 0 auto 20px;
background: #fff;
padding: 0px;
/*box-shadow: 0 4px 10px rgba(0,0,0,0.1);
border-radius: 8px;*/
}
.splide__slide {
background: #fff;
}

.slide-comment {
margin-top: 5px;
text-align: left;
/*font-size: 16px;
font-weight: bold;
color: #333;
line-height: 1.4;*/
}
.slide-comment P.infotext{
height:auto;
}
/* ドットナビの位置調整 */
.splide__pagination {
position: relative !important;
bottom: 0 !important;
margin-top: 15px !important;
padding: 0 !important;
}
.splide__pagination__page {
background: #ccc !important;
}
.splide__pagination__page.is-active {
background: #696969 !important;/*#dc143c*/
transform: none;/*scale(1.2)*/
}
/* --- 左右の矢印をオンマウス時だけ表示する設定 --- */

/* 1. 普段（マウスが乗っていないとき）は矢印を透明にして隠す */
.custom-slider-container .splide__arrow {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important; /* ふわっと切り替わるアニメーション（0.3秒） */
}

/* 2. スライダー全体にマウスが乗ったときだけ矢印を表示する */
.custom-slider-container:hover .splide__arrow {
  opacity: 1 !important;
  visibility: visible !important;
}
/* --- 左右の矢印の「背景」と「中の矢印」の色を反転させる --- */

/* 1. 矢印の丸い背景を「濃い色」にする */
.custom-slider-container .splide__arrow {
  background: rgba(51, 51, 51, 0.8) !important; /* 濃いグレー（透明度80%） */
}

/* 2. マウスを直接矢印に乗せた時の背景（お好みで調整してください） */
.custom-slider-container .splide__arrow:hover {
  background: rgba(0, 0, 0, 0.9) !important; /* マウスオン時はさらに濃い黒に */
}

/* 3. 中の「＞」の矢印マークを「薄い（白い）色」にする */
.custom-slider-container .splide__arrow svg {
  fill: #ffffff !important; /* 矢印の色を完全に「白」にします */
}
/*ページネーション*/
.splide__pagination {
  justify-content: flex-end; /* 右寄せにする */
  right: 0;                  /* 必要に応じて位置調整 */
  left: auto;                /* デフォルトの左位置を解除 */
  padding: 0 1rem;           /* 端からの余白を調整（任意） */
}