@charset "utf-8";

#vegas-slider.vegas-container {
  width: 100%;
  margin: auto;
  height: 700px !important;  /* 高さを固定してレイアウトのズレを防ぐ */
  position: relative;
  overflow: hidden;
}

#caption {
  width: 100%;
  margin: auto;
  text-align:center;
  color: #696a6a;
  min-height:32px;
}

/* しきい値は各テンプレートで調整すること */
@media screen and (min-width:900px){

  #vegas-slider.vegas-container {
    width: 80%;
  }

  #caption {
    width: 80%;
  }
}

.thumbs { 
  margin-top: 10px;
  text-align: center;
}

/* サムネイル枠 */
.thumbs .thumb {
  width: 100px;          /* サムネイル幅 */
  height: 100px;         /* サムネイル高さ（正方形） */
  margin: 0 5px;
  display: inline-block;
  overflow: hidden;      /* 画像を枠内にクリップ */
  border: 2px solid transparent;
  border-radius: 4px;    /* お好み（丸み） */
  cursor: pointer;
  background: #f0f0f0;   /* 読み込み前の背景 */
}

/* 実際の画像 */
.thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 画像を中央でトリミング */
  object-position: center;
  display: block;
}

.thumbs .thumb.active {
  border-color: #08f;
}