/* 中央寄せ＋最低限の余白 */
.gs-slideshow { max-width: 960px; margin: 1.5rem auto; position: relative; }
.gs-viewport {
  position: relative; overflow: hidden; border-radius: 12px;
  background: #000; aspect-ratio: 16/9; /* 好みで 3/2, 4/3 などに変更可 */
}
.gs-viewport img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .6s ease-in-out;
}
.gs-viewport img.gs-active { opacity: 1; }

/* 前後ボタン */
.gs-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: none; background: rgba(0,0,0,.4); color: #fff;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
}
.gs-prev { left: 8px; } .gs-next { right: 8px; }
.gs-nav:hover { background: rgba(0,0,0,.6); }

/* ドット（中央揃え） */
.gs-dots { display: flex; gap: 8px; justify-content: center; margin: .75rem 0 0; }
.gs-dots button {
  width: 8px; height: 8px; border-radius: 50%; border: none; background: #cfcfcf; cursor: pointer;
}
.gs-dots button[aria-current="true"] { background: #333; }

/* キャプション（中央） */
.gs-caption { margin: .5rem 0 0; color: #555; text-align: center; }

/* モバイル余白を少し増やす（任意） */
@media (max-width: 576px){
  .gs-slideshow { margin: 1.25rem auto; }
}