@charset "UTF-8";
/**
 * Colors
==================== */
/**
 * Gradients
==================== */
/**
 * Breakpoints
 ==================== */
/**
 * Design Sizes
==================== */
/**
 * Spacing Units
==================== */
/**
 * Radius
==================== */
/**
 * vw変換
==================== */
/**
 * em変換
==================== */
/**
 * mixins
==================== */
.pagination {
  display: flex;
  justify-content: center;
  min-height: 14.358974359vw;
  font-family: "Roboto", sans-serif;
}
@media (min-width: 1021px) {
  .pagination {
    min-height: 3.8888888889vw;
  }
}
.pagination__list {
  display: flex;
  align-items: center;
  gap: 2.0512820513vw;
}
@media (min-width: 1021px) {
  .pagination__list {
    gap: 0.5555555556vw;
  }
}
.pagination__btn {
  display: flex;
  width: 10.7692307692vw;
  height: 100%;
  padding: 2.0512820513vw 1.2820512821vw;
  align-items: center;
  justify-content: center;
  border-radius: 2.0512820513vw;
  border: 1px solid var(--clr-gray-02);
  background: var(--clr-tomoku-white);
  transition: background 0.3s, border-color, 0.3s;
}
@media (min-width: 1021px) {
  .pagination__btn {
    width: 3.3333333333vw;
    padding: 0.8333333333vw 0.5555555556vw;
    border-radius: 0.5555555556vw;
  }
}
.pagination__btn span {
  color: var(--clr-tomoku-vivid-blue);
  text-align: center;
  font-size: 4.1025641026vw;
  font-weight: 700;
  line-height: normal;
  transition: color 0.3s;
}
@media (min-width: 1021px) {
  .pagination__btn span {
    font-size: 1.1111111111vw;
  }
}
.pagination__btn svg * {
  transition: fill 0.3s;
}
.pagination__btn.-current {
  background: var(--clr-tomoku-vivid-blue);
  border-color: var(--clr-tomoku-vivid-blue);
}
.pagination__btn.-current span {
  color: var(--clr-tomoku-white);
}
@media (min-width: 1021px) {
  .pagination__btn:hover {
    background: var(--clr-tomoku-vivid-blue);
    border-color: var(--clr-tomoku-vivid-blue);
  }
  .pagination__btn:hover span {
    color: var(--clr-tomoku-white);
  }
  .pagination__btn:hover svg * {
    fill: var(--clr-tomoku-white);
  }
}
.pagination__dots {
  color: var(--clr-text-gray);
  text-align: center;
  font-size: 3.0769230769vw;
  font-weight: 400;
  line-height: normal;
}
@media (min-width: 1021px) {
  .pagination__dots {
    font-size: 0.9027777778vw;
  }
}

.interviews__list {
  width: 100%;
  background: var(--clr-bg-gray);
}
.interviews__list-inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10.2564102564vw;
  padding: 8.2051282051vw 6.1538461538vw;
}
@media (min-width: 1021px) {
  .interviews__list-inner {
    max-width: 86.1111111111vw;
    gap: 2.7777777778vw;
    padding: 5.5555555556vw 5.5555555556vw 5.5555555556vw 8.3333333333vw;
  }
}
.interviews__list-main {
  display: grid;
  gap: 10.2564102564vw;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 1021px) {
  .interviews__list-main {
    gap: 4.4444444444vw 2.7777777778vw;
    grid-template-columns: repeat(3, 1fr);
  }
}
.interviews__card {
  padding: 3.0769230769vw;
  align-self: stretch;
  background: var(--clr-tomoku-white);
  border-radius: 3.0769230769vw;
}
@media (min-width: 1021px) {
  .interviews__card {
    padding: 1.1111111111vw;
    border-radius: 0.8333333333vw;
  }
}
@media (min-width: 1021px) {
  .interviews__card:hover .interviews__card-img {
    transform: scale(1.08);
  }
}
.interviews__card:hover .interviews__link-arrow {
  padding-right: 0.5555555556vw;
  background-color: var(--clr-tomoku-vivid-blue);
  border-color: var(--clr-tomoku-vivid-blue);
}
.interviews__card-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.interviews__card-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2.0512820513vw;
  position: relative;
}
@media (min-width: 1021px) {
  .interviews__card-img-wrap {
    border-radius: 0.5555555556vw;
  }
}
.interviews__card-img {
  transition: transform 0.3s;
}
.interviews__link-arrow {
  position: absolute;
  bottom: 3.0769230769vw;
  right: 3.0769230769vw;
  width: 12.3076923077vw;
  height: 12.3076923077vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 256.1538461538vw;
  border: 1px solid var(--clr-tomoku-white);
  padding: 0 3.0769230769vw 1.0256410256vw 2.0512820513vw;
  align-self: flex-end;
  justify-self: flex-end;
  background-color: rgba(140, 140, 140, 0.4);
}
@media (min-width: 1021px) {
  .interviews__link-arrow {
    bottom: 0.8333333333vw;
    right: 0.8333333333vw;
    width: 3.3333333333vw;
    height: 3.3333333333vw;
    border-radius: 69.375vw;
    padding: 0 0.8333333333vw 0.2777777778vw 0.5555555556vw;
    transition: padding-right 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  }
}
.interviews__link-arrow-inner {
  display: block;
  width: 100%;
  height: 2.5641025641vw;
  transform-origin: bottom right;
  position: relative;
}
@media (min-width: 1021px) {
  .interviews__link-arrow-inner {
    height: 0.6944444444vw;
  }
}
.interviews__link-arrow-inner::before {
  content: "";
  display: block;
  width: 0.5128205128vw;
  height: 100%;
  background-color: var(--clr-tomoku-white);
  transition: background-color 0.3s ease;
  position: absolute;
  top: 0;
  right: 0;
  clip-path: shape(from 0 0.2564102564vw, arc to 50% 0 of 0.2564102564vw 0.2564102564vw cw rotate 90deg, arc to 100% 0.2564102564vw of 0.2564102564vw 0.2564102564vw cw rotate 90deg, line to 100% 100%, line to 0 calc(100% - 1.0256410256vw), close);
  transform: rotate(-50deg);
  transform-origin: bottom right;
}
@media (min-width: 1021px) {
  .interviews__link-arrow-inner::before {
    width: 0.1388888889vw;
    clip-path: shape(from 0 0.0694444444vw, arc to 50% 0 of 0.0694444444vw 0.0694444444vw cw rotate 90deg, arc to 100% 0.0694444444vw of 0.0694444444vw 0.0694444444vw cw rotate 90deg, line to 100% 100%, line to 0 calc(100% - 0.2777777778vw), close);
  }
}
.interviews__link-arrow-inner::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5128205128vw;
  background-color: var(--clr-tomoku-white);
  transition: background-color 0.3s ease;
  position: absolute;
  bottom: 0;
  right: 0;
  clip-path: shape(from 0 0.2564102564vw, arc to 0.2564102564vw 0 of 0.2564102564vw 0.2564102564vw cw rotate 90deg, line to calc(100% - 1.0256410256vw) 0, line to 100% 100%, line to 0.2564102564vw 100%, arc to 0 0.2564102564vw of 0.2564102564vw 0.2564102564vw cw rotate 90deg, close);
}
@media (min-width: 1021px) {
  .interviews__link-arrow-inner::after {
    height: 0.1388888889vw;
    clip-path: shape(from 0 0.1041666667vw, arc to 0.1041666667vw 0 of 0.1041666667vw 0.1041666667vw cw rotate 90deg, line to calc(100% - 0.2777777778vw) 0, line to 100% 100%, line to 0.1041666667vw 100%, arc to 0 0.1041666667vw of 0.1041666667vw 0.1041666667vw cw rotate 90deg, close);
  }
}
.interviews__card-detail {
  display: flex;
  gap: 2.0512820513vw;
  flex-direction: column;
  padding: 4.1025641026vw 2.0512820513vw 0;
}
@media (min-width: 1021px) {
  .interviews__card-detail {
    gap: 0.5555555556vw;
    padding: 1.3888888889vw 0.5555555556vw 0;
  }
}
.interviews__card-detail-upper {
  display: flex;
  gap: 1.0256410256vw;
  flex-direction: column;
}
@media (min-width: 1021px) {
  .interviews__card-detail-upper {
    gap: 0.2777777778vw;
  }
}
.interviews__card-job {
  align-self: stretch;
  color: var(--clr-tomoku-vivid-blue);
  font-size: 3.5897435897vw;
  font-weight: 500;
  line-height: 165%;
  letter-spacing: 0.0717948718vw;
}
@media (min-width: 1021px) {
  .interviews__card-job {
    font-size: 0.9722222222vw;
    letter-spacing: 0.0194444444vw;
  }
}
.interviews__card-initial {
  flex: 1 0 0;
  color: var(--clr-text-black);
  font-size: 5.1282051282vw;
  font-weight: 700;
  line-height: 165%;
}
@media (min-width: 1021px) {
  .interviews__card-initial {
    font-size: 1.3888888889vw;
  }
}
.interviews__card-description {
  flex: 1 0 0;
  font-size: 4.1025641026vw;
  font-weight: 700;
  line-height: 165%;
  letter-spacing: 0.0820512821vw;
}
@media (min-width: 1021px) {
  .interviews__card-description {
    font-size: 1.25vw;
    letter-spacing: 0.025vw;
  }
}

/*# sourceMappingURL=interviews-list.css.map */