@charset "UTF-8";
/* ==============================
   Config
============================== */
:root {
  --slideshow-width: 330px;
  --slideshow-height: 290px;
  --thumb-size: 65px
}

/* ===== メインスライド ===== */
.galleria {
  position: relative;
  overflow: hidden;
  width: var(--slideshow-width);
  height: var(--slideshow-height);
  margin: 30px 0px 10px 0px;
}

.galleria img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--slideshow-height);
  opacity: 0;
  object-fit: cover
  transform: translateX(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.galleria img.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}

/* ===== サムネイル ===== */
.galleria-thumb {
  display: flex;
  align-items: center;
  overflow: hidden;
  width: var(--slideshow-width);
  height: var(--thumb-size);
  position: relative;
  z-index: 1;
}

.thumb-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
  width: 100%;
  height: var(--thumb-size);
}

.thumb-track img {
  width: var(--thumb-size);
  height: var(--thumb-size);
  object-fit: cover;
  cursor: pointer;
  opacity: 0.8;
}

.thumb-track img.active {
  opacity: 1;
  object-fit: cover !important;
}
.thumb-track img:hover {
  opacity: 0.6;
}
/*--------------------------------
        サムネイル 変遷用 Nav
---------------------------------*/
/* color変更用指定 */
#leftBox a.thumb-prev,
#leftBox a.thumb-next {
  color: #fff;
}
/* 矢印レイアウト */
.thumb-prev,
.thumb-next {
  cursor: pointer;
  display: block;
  width: 20px;
  height:  var(--thumb-size);
  line-height: var(--thumb-size);
  text-align: center;
  background: #3b8dfb;
  position: absolute;
  z-index: 1000;
  top: 0;
  }
  .thumb-prev {
    left: 0;
  }
  .thumb-next {
    right: 0;
}