@charset "utf-8";

/* 925jewelry list */
.p-jewelry-category .p-collection-list__body .row-fluid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px 4px;
}

.p-jewelry-category .p-collection-list__body .row-fluid [class*="span"] {
  width: 100%;
}

/* CSSでグリッド */
.p-jewelry-category .p-collection-list__body .row-fluid [class*="span"]:nth-of-type(10) {
  grid-row: 7 / span 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
}

.p-jewelry-category .p-collection-list__body .row-fluid [class*="span"]:nth-of-type(5) {
  grid-row: 3 / span 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
}

/* php側でクラスを追加する */
/* .p-jewelry-category .m-item-card-big-banner{
  grid-row: 1 / span 2;
  -ms-grid-column: 3;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
} */

.p-jewelry-category .m-impression-card-big-banner-1 {
  grid-row: 11 / span 2;
  grid-column: 1 / span 2;
}

.p-jewelry-category .m-impression-card-big-banner-1 img {
  width: 100%;
}

.p-jewelry-category .m-impression-card-big-banner-2 {
  grid-row: 5 / span 2;
  grid-column: 1 / span 2;
}

.p-jewelry-category .m-impression-card-big-banner-2 img {
  width: 100%;
}

.p-jewelry-category .m-impression-card-big-banner-3 {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.p-jewelry-category .m-impression-card-big-banner-3 img {
  width: 100%;
}

.p-jewelry-category__list-bottom-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px 4%;
}

.p-jewelry-category__list-bottom-image img {
  width: 100%;
}

@media ( max-width: 767px ) {
  .p-jewelry-category .p-collection-list__body .row-fluid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .p-jewelry-category #wrapper ul.liquid-column2 > li {
    width: 100%;
  }

  .p-jewelry-category .m-impression-card-big-banner-1 {
      grid-row: 13 / span 1;
      grid-column: 1 / span 2;
  }

  .p-jewelry-category .m-impression-card-big-banner-2 {
    grid-row: 7 / span 1;
    grid-column: 1 / span 2;
  }

  .p-jewelry-category .m-impression-card-big-banner-3 {
    grid-row: 2 / span 1;
    grid-column: 1 / span 2;
  }

  .p-jewelry-category .p-collection-list__body .row-fluid [class*="span"]:nth-of-type(10) {
    grid-row: 10 / span 1;
    grid-column: 1 / span 2;
  }

  .p-jewelry-category .p-collection-list__body .row-fluid [class*="span"]:nth-of-type(5) {
    grid-row: 4 / span 2;
    grid-column: 1 / span 2;
  }
}