@charset "utf-8";

.instaCont section {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.instaCont article {
  width: calc((100% - 1.5rem) / 4);
}

.instaCont section > article:nth-of-type(n + 3) {
  margin: 0;
}

.instaCont .imgBx01 {
  position: relative;
  display: block;
  padding: 0 0 100% 0;
}

.instaCont .imgBx01:hover {
  opacity: 0.7;
}

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

.instaCont .imgBx01 > span {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.instaCont .imgBx01 > img + span,
.instaCont .imgBx01 > video + span {
  display: none;
}

.instaCont .webgene-item-main-video {
  display: block;
  width: auto;
  max-width: 100%;
}

.instaCont .webgene-item .dayTxt {
  font-size: .85em;
}

.instaCont .webgene-item .snsTit {
  font-size: 1em;
  font-weight: normal;
}


/* ========================================
   1024px以下
======================================== */

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

  .instaCont section {
    gap: 0;
  }

  .instaCont article {
    width: 50%;
  }

  .instaCont section > article:nth-of-type(n + 3) {
    margin: 40px 0 0;
  }

}


/* ========================================
   767px以上
======================================== */

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

  .instaCont section {
    gap: .5rem;
  }

  .instaCont article {
    width: calc((100% - 1.5rem) / 4);
  }

  .instaCont section > article:nth-of-type(n + 2) {
    margin: 0;
  }

}