/* =======================================================
Sliders (gallery area)
======================================================= */
#slide {
width: 100%;
max-width: 700px;
margin: 10px auto 80px auto;
position: relative;
}
/* slick を当てる ul */
#slide ul {
margin: 0;
padding: 0;
list-style: none;
}
/* 各スライド(li) */
#slide .slider {
display: flex;
justify-content: center;
}
/* 画像の基本スタイル */
#slide img,
#slide .slick-slide img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: center;
}
/* =======================================================
Slick arrows (always visible)
======================================================= */
#slide .slick-prev,
#slide .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 56px;
height: 56px;
border-radius: 50%;
background: #2c8f45;
color: #fff;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
padding: 0;
transition:
background .25s,
transform .2s,
box-shadow .25s !important;
}
/* 左右位置 */
#slide .slick-prev {
left: -20px;
}
#slide .slick-next {
right: -20px;
}
/* アイコンSVG */
#slide .slick-prev svg,
#slide .slick-next svg {
width: 28px;
height: 28px;
}
/* デフォルト矢印テキスト非表示 */
#slide .slick-prev::before,
#slide .slick-next::before {
content: none !important;
}
/* ホバー時 */
#slide .slick-prev:hover,
#slide .slick-next:hover {
background: rgba(0, 123, 255, 0.9);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 0 12px rgba(0, 123, 255, 0.6);
}
/* disabled でも見えたまま */
#slide .slick-arrow.slick-disabled {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}

/* Slick の遅延フェード対策 */
#slide .slick-slider .slick-arrow {
transition-delay: 0s !important;
}

/* -------------------------------------------------------
レスポンシブ（スマホで矢印を中に寄せる）
------------------------------------------------------- */
@media (max-width: 768px) {
#slide {
width: 100%;
max-width: 100%;
margin: 10px auto 50px auto;
position: relative;
}
#slide .slick-prev,
#slide .slick-next {
width: 30px;
height: 30px;
}

#slide .slick-prev {
left: -10px;
}
#slide .slick-next {
right: -10px;
}
}

/* =======================================================
Slick dots
======================================================= */

#slide .slick-dots {
display: flex !important;
justify-content: center;
align-items: center;
gap: 8px;
position: absolute;
bottom: -30px;  /* 位置調整 */
width: 100%;
padding: 0;
margin: 0;
}

#slide .slick-dots li {
list-style: none;
margin: 0;
padding: 0;
}
#slide .slick-dots li button {
width: 12px;
height: 12px;
border-radius: 50%;
background: #ccc;
border: none;
padding: 0;
cursor: pointer;
transition: background .3s, transform .2s;
text-indent: -9999px; /* デフォ文字を消す */
}
/* アクティブ dot */
#slide .slick-dots li.slick-active button {
background: #2c8f45;
transform: scale(1.3);
}
/* ホバー */
#slide .slick-dots li button:hover {
background: #007bff;
transform: scale(1.2);
}
/* スマホ */
@media (max-width: 768px) {
#slide .slick-dots {
bottom: -25px;
}
#slide .slick-dots li button {
width: 10px;
height: 10px;
}
}