@charset "utf-8";

.loopImgBx01:nth-child(even) {
    /* margin-top: 30px; */
}

.loopImgBx01:first-child{
    /* margin-top: 30px; */
}
/*--------------管理画面用-------------------*/

.gjs-dashed .loopWrap {
    display: block;
    height: auto;
    overflow: auto;
}

.gjs-dashed .loopImgArea {
    -webkit-animation: auto !important;
    animation: auto !important;
    flex-wrap: wrap;
}

.gjs-dashed .loopImgBx01 {
    width: 20%;
    padding-top: 15%;
    height: auto;
    margin: 0;
}

/*-----------------------------------*/


.loopImgBx01 {
    width: 240px;
    position: relative;
    height: 240px;
    margin: 0 15px;
    padding: 0 15px;
}

.loopWrap {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: auto;
}

.loopImgBx01>img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    object-fit: cover;
    height: 100%;
}

.loopImgArea {
  display: flex;
  animation: loop-slide 50s infinite linear 1s both;
}

.loopImgBx01>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 20px; */
    /* border: 3px solid #fff; */
    /* box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%); */
}

/*ここまで*/

.loopImgBx img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: auto;
}

/*アニメーション*/
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
} 



/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width:1024px) {

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
  
.loopImgBx01 {
    width: 384px;
    height: 384px;
    margin: 0 20px;
}


/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

} /* min-width: 1024px ここまで */

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */