/* ----------------------------------------------------------------------------------------------------
voice
---------------------------------------------------------------------------------------------------- */
/* voice
----------------------------------------------------------------------*/
.voice {
  padding-block: 2.5rem 4rem;
  background-color: #fff;
}
.voice .voiceList__contents {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 4rem;
}

@media screen and (min-width: 60rem) {
  .voice {
    padding-bottom: 5rem;
  }
  .voice .voiceList__contents {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.75rem;
    margin-bottom: 4rem;
  }
}
/* voiceTags
----------------------------------------------------------------------*/
.voiceTags {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
.voiceTags::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 100vw;
  height: 1px;
  background-color: #d5dbe6;
}
.voiceTags .voiceTags__title {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}
.voiceTags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.voiceTags li {
  line-height: 1.25rem;
}
.voiceTags li span,
.voiceTags li a {
  padding: 0.5rem 0.75rem;
  border-radius: 100vmax;
}
.voiceTags li span {
  background-color: #26b2ed;
  color: #ffffff;
  font-weight: 700;
}
.voiceTags li a {
  background-color: #ecf8fc;
  color: #656f84;
  transition: box-shadow 0.2s;
}
@media (any-hover: hover) {
  .voiceTags li a:hover {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  }
}
@media (any-hover: none) {
  .voiceTags li a:active {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  }
}

@media screen and (min-width: 60rem) {
  .voiceTags {
    margin-bottom: 3.375rem;
  }
  .voiceTags::before {
    width: calc(100vw - 1.25rem);
  }
  .voiceTags .voiceTags__title {
    margin-bottom: 1.25rem;
  }
}
/* voiceItems
----------------------------------------------------------------------*/
.voiceItems {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 4rem;
}

@media screen and (min-width: 60rem) {
  .voiceItems {
    gap: 1.5rem;
    margin-bottom: 7.5rem;
  }
}
/* voiceItem
----------------------------------------------------------------------*/
.voiceItem {
  padding-bottom: 1rem;
  border-bottom: 1px solid #d5dbe6;
}
.voiceItem .voiceItem__thumbnail {
  overflow: hidden;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
}
.voiceItem .voiceItem__thumbnail img {
  width: 100%;
  aspect-ratio: 335/190;
  transition: scale 0.2s;
}
.voiceItem .voiceItem__category {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: #27b2ed;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.0625rem;
  letter-spacing: 0.05em;
}
.voiceItem .voiceItem__title {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.05em;
}
.voiceItem .worksItem__excerpt {
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
}
.voiceItem .worksItem__review {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.voiceItem .worksItem__review .review__item {
  display: flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 100vmax;
  background-color: #f2f4f8;
}
.voiceItem .worksItem__review .review__name {
  margin-right: 0.375rem;
  color: #676c77;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.0625rem;
  letter-spacing: 0.05em;
}
.voiceItem .worksItem__review .review__bar {
  display: flex;
  align-items: center;
}
.voiceItem .worksItem__review .review__number {
  margin-left: 0.25rem;
  color: #a0a7b7;
  font-size: 0.75rem;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
}
.voiceItem .voiceItem__btn {
  display: none;
}
@media (any-hover: hover) {
  .voiceItem:hover .voiceItem__thumbnail img {
    scale: 1.1;
  }
}
@media (any-hover: none) {
  .voiceItem:active .voiceItem__thumbnail img {
    scale: 1.1;
  }
}

@media screen and (min-width: 60rem) {
  .voiceItem {
    display: grid;
    grid-template-columns: 22.5rem 1fr;
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    align-items: center;
    padding-right: 3.75rem;
    padding-bottom: 1.5rem;
  }
  .voiceItem .voiceItem__thumbnail {
    margin-bottom: 0;
  }
  .voiceItem .voiceItem__thumbnail img {
    aspect-ratio: 360/204;
  }
  .voiceItem .voiceItems__info {
    display: grid;
    grid-template-columns: 1fr 1.75rem;
    -moz-column-gap: 2.625rem;
         column-gap: 2.625rem;
    align-items: center;
  }
  .voiceItem .voiceItem__category {
    margin-bottom: 0.25rem;
  }
  .voiceItem .voiceItem__title {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.8125rem;
  }
  .voiceItem .worksItem__excerpt {
    margin-bottom: 0.75rem;
  }
  .voiceItem .worksItem__review {
    max-width: 21.25rem;
  }
  .voiceItem .voiceItem__btn {
    display: flex;
    justify-content: flex-end;
  }
  .voiceItem .voiceItem__btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: #ffb427;
  }
}
/* pagination
----------------------------------------------------------------------*/
.pagination {
  display: flex;
  justify-content: center;
}
.pagination ul {
  display: flex;
  align-items: center;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.pagination li:has(img) a {
  transition: box-shadow 0.2s;
}
@media (any-hover: hover) {
  .pagination li:has(img) a:hover {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  }
}
@media (any-hover: none) {
  .pagination li:has(img) a:active {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2);
  }
}
.pagination li:has(img):first-child a, .pagination li:has(img):last-child a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #f8f8f8;
  border-radius: 50%;
}
.pagination li:has(img):first-child {
  margin-right: 3.125rem;
}
.pagination li:has(img):first-child img {
  rotate: -90deg;
}
.pagination li:has(img):last-child {
  margin-left: 3.125rem;
}
.pagination li:has(img):last-child img {
  rotate: 90deg;
}
.pagination li:not(:has(img)) a,
.pagination li:not(:has(img)) span {
  font-size: 1rem;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.1em;
}
.pagination li:not(:has(img)) a {
  transition: color 0.2s;
}
@media (any-hover: hover) {
  .pagination li:not(:has(img)) a:hover {
    color: #26b2ed;
  }
}
@media (any-hover: none) {
  .pagination li:not(:has(img)) a:active {
    color: #26b2ed;
  }
}

/* works
----------------------------------------------------------------------*/
#works {
  background-color: #fff;
}
#works .works__inner {
  overflow-x: hidden;
  padding-bottom: 4rem;
}

@media screen and (min-width: 60rem) {
  #works .works__inner {
    padding-bottom: 7.5rem;
  }
}/*# sourceMappingURL=voice.css.map */