@charset "utf-8";
#mainvis {
  position: relative;
  width: 100%;
  /* height: 100vh;  画面の高さに合わせたい場合 */
  background: url("/common/images/indexmain.jpg") no-repeat center center;
  background-size: cover;  /* 画像を拡大縮小して全体をカバー */
}
#mainvis #slideshow{
  position: relative;
	width: 1200px;
	margin: 0 auto;
	height: 700px;
	overflow: hidden;
}
#slideshow img {
  display: block;
  width: 100%;
  height: 900px;
  object-fit: cover;
  object-position: center 20px; /* ← 中央より100px上を基準に */
}

/* スライダーの親要素に relative をつけておく */
#slideshow {
  position: relative;
}

/* ドット全体の位置（下中央に固定） */
#slideshow .slick-dots {
  position: absolute;
  bottom: 20px;               /* 画像の下から20px上 */
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;   /* 横並び */
  gap: 8px;                   /* ドット間の隙間 */
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 各ドットのボタン */
#slideshow .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 50%;      /* 丸 */
  background: #fff;        /* 白い丸 */
  border: none;
  opacity: 0.6;
  cursor: pointer;
  text-indent: -9999px;    /* 数字を非表示 */
  transition: opacity 0.3s, transform 0.3s;
}

/* アクティブ状態 */
#slideshow .slick-dots li.slick-active button {
  opacity: 1;
  transform: scale(1.2);   /* ほんの少し大きく */
}

/* slick のデフォルト「●」を消す */
#slideshow .slick-dots li button:before {
  content: none;
}



@media screen and (max-width: 768px) {
#mainvis{
	width: 100%;
	margin: 0 0;
}
#mainvis #slideshow {
  width: 100%;
  height: min(240px, 75vw); /* 4:3 の高さは 75% の幅。上限240pxと比較して小さい方 */
  overflow: hidden;
}
#mainvis #slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -20px; /* ← 中央より100px上を基準に */
}



/* ドット全体の位置（下中央に固定） */
#slideshow .slick-dots {
  position: absolute;
  bottom: 5px;               /* 画像の下から20px上 */
  left: 50%;
  transform: translateX(-50%);
  display: flex !important;   /* 横並び */
  gap: 8px;                   /* ドット間の隙間 */
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
}


