html, body {
/*   height: 100%;
  overflow: hidden; */
}
body{
  background: #000;
  margin: 0;
  padding: 0;
}
.body_inner{
  max-width: 1800px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  /*padding: 16px;*/
  box-sizing: border-box;
}
.thums{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  margin:12px 0;
  padding:0;
  list-style:none;
}
.thums li {
  width: 20%;
  max-width: 100px;
  max-height: min(20vh,96px);
}
.thums li picture {
  display: contents;
}
.thums li img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.thums li img:not(.active):hover {
  transform: scale(1.15);
}
.thums li img.active {
  animation: thumPulse 0.7s ease-in-out infinite alternate;
  border:solid 1px #fff;
}
@keyframes thumPulse {
  from { transform: scale(1); }
  to   { transform: scale(0.8); }
}
.viewer {
  flex: 1;
  min-height: 0;
  position: relative;
  margin-top: 16px;
}
.viewer picture {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.viewer img {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  cursor: pointer;
}
.viewer img.visible {
  opacity: 1;
}
.works_title {
  flex-shrink: 0;
  color: #fff;
  text-align: center;
  font-size: 0.9rem;
  padding: 4px 0 8px;
  min-height: 1.4em;
}
.auto-mode .thums,
.auto-mode .works_title {
  display: none;
}
.auto-mode .viewer {
  margin-top: 0;
}
.auto-mode .viewer img {
  cursor: default;
}

/* フェード無しモード */
.no-fade-mode .viewer img {
  transition: none;
}

/* thums_only モード：viewer を非表示にしてサムネイルを大きく中央表示 */
.thums-only-mode .viewer,
.thums-only-mode .works_title {
  display: none;
}
.thums-only-mode .thums {
  flex: 1;
  align-items: stretch;
  gap: min(1vw , 16px);
}
.thums-only-mode .thums li {
  width: auto;
  max-width: none;
  max-height: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thums-only-mode .thums li img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.thums-only-mode .thums li img.active {
  animation: none;
}

/* .fslightbox-slide-btn-container {
display: none !important;
} */
/* fsLightbox は開いている間 html を overflow:hidden にしてスクロールバーを消すため、
   その幅を gutter として予約しておき、中央寄せレイアウトの横ズレを防ぐ */
html.fslightbox-open {
  scrollbar-gutter: stable;
}