@charset "UTF-8";
/* --------------------------------

  スワップギャラリー スライダー

-------------------------------- */
.swap-gallery {
 margin: 0 0 7rem 0;
}
@media screen and (max-width: 767.98px) {
 .swap-gallery {
   margin: 0 0 3rem 0;
 }
}
.swap-gallery .swiper {
 overflow: visible;
 /* max-width: 1000px; */
 margin: 0 auto 2.5rem;
}
@media screen and (max-width: 767.98px) {
 .swap-gallery .swiper {
    margin: 0 auto 2rem;
 }
}
.swap-gallery .swiper .swiper-fade .swiper-slide-active {
 pointer-events: auto;
}
.swap-gallery .swiper .swiper-fade .swiper-slide {
 -webkit-transition-property: opacity, -webkit-transform !important;
 transition-property: opacity, -webkit-transform !important;
 transition-property: opacity, transform !important;
 transition-property: opacity, transform, -webkit-transform !important;
 pointer-events: none;
}
.swap-gallery .swiper-slide .slide {
 position: relative;
 display: block;
 overflow: hidden;
}
.swap-gallery .swiper-slide .slide-media {
 position: relative;
 overflow: hidden;
}
.swap-gallery .swiper-slide .slide-media::before {
 content: "";
 display: block;
 padding-top: 66%;
}
.swap-gallery .swiper-slide .slide-media img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -o-object-fit: contain;
 object-fit: contain;
}
.swap-gallery .thumb-wrapper {
 /* max-width: 1000px;
 margin: 0 auto; */
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 1rem;
}
@media screen and (max-width: 767.98px) {
 .swap-gallery .thumb-wrapper {
   grid-template-columns: repeat(3, 1fr);
   gap: 0.3rem;
 }
}
.swap-gallery .thumb-media {
 position: relative;
 overflow: hidden;
 cursor: pointer;
 border: 1px solid #000;
 -webkit-transition: opacity 0.3s ease;
 transition: opacity 0.3s ease;
}
.swap-gallery .thumb-media::before {
 content: "";
 display: block;
 padding-top: 66%;
}
.swap-gallery .thumb-media.thumb-media-active {
 opacity: 0.3;
}
.swap-gallery .thumb-media:hover {
 opacity: 0.3;
}
.swap-gallery .thumb-media img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 -o-object-fit: contain;
 object-fit: contain;
}