@charset "UTF-8";

.p-works {
  background-color: #ff6f67;
  -webkit-padding-after: 6.25rem;
  padding-block-end: 6.25rem;
}

@media (min-width: 768px) {
  .p-works {
    -webkit-padding-after: 9.375rem;
    padding-block-end: 9.375rem;
  }
}

.p-works__list {
  -webkit-margin-before: 3.125rem;
  margin-block-start: 3.125rem;
}

@media (min-width: 768px) {
  .p-works__list {
    -webkit-margin-before: 3.75rem;
    margin-block-start: 3.75rem;
  }
}

.p-works__contents {
  background-color: #ff6f67;
  position: relative;
}

.p-works__img {
  position: absolute;
  top: 0;
  right: 0;
}

.p-works__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-margin-before: -2.1875rem;
  margin-block-start: -2.1875rem;
  -webkit-margin-end: 0.625rem;
  margin-inline-end: 0.625rem;
}

.p-works__list .webgene-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22.125rem, 22.125rem));
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: 2.5rem;
  -moz-column-gap: 2.5rem;
  column-gap: 2.5rem;
  row-gap: 4.375rem;
}

.p-works__list {
  /* ページネーションをgridの横並び対象から外す */
}

.p-works__list .webgene-pagination {
  grid-column: 1/-1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1.25rem;
}

.p-works__list .webgene-item {
  width: 100%;
  width: 22.125rem;
}

.p-works__list .webgene-item .c-works__item {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media (any-hover: hover) {
  .p-works__list .webgene-item .c-works__item:hover {
    opacity: 0.7;
  }
}

@media (min-width: 768px) {
  .p-works__list .webgene-item .c-works__item {
    -webkit-column-gap: 3.125rem;
    -moz-column-gap: 3.125rem;
    column-gap: 3.125rem;
  }
}