/* ========================================
   Voice Archive
======================================== */

.voice-archive {
  width: 100%;

  background-color: var(--color-bg);
}


/* ========================================
   Voice List
======================================== */

.voice-list {
  padding:
    var(--section-space)
    var(--container-padding);

  background-color: var(--color-bg);
}

.voice-list__inner {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
}

.voice-list__items {
  display: flex;
  flex-direction: column;

  gap: 22px;
}


/* ========================================
   Voice Card
======================================== */

.voice-card {
  display: grid;

  grid-template-columns:
    minmax(260px, 30%)
    minmax(0, 70%);

  width: 100%;

  border: 1px solid var(--color-border);

  background-color: var(--color-bg);
}


/* ========================================
   Voice Information
======================================== */

.voice-card__info {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding:
    44px
    40px;

  border-right: 1px solid var(--color-border);
}


/* ========================================
   Voice Number
======================================== */

.voice-card__number {
  position: relative;

  display: inline-block;

  margin:
    0
    0
    28px;

  padding-bottom: 18px;

  color: var(--color-main);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.4;
  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.voice-card__number::after {
  content: "";

  position: absolute;

  bottom: 0;
  left: 0;

  width: 96px;
  height: 2px;

  background: linear-gradient(
    to right,
    var(--color-main) 0 20px,
    #cfd7e3 20px 100%
  );
}


/* ========================================
   Voice Title
======================================== */

.voice-card__title {
  margin: 0;

  color: var(--color-heading);

  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 400;

  line-height: 1.65;
  letter-spacing: 0.06em;
}


/* ========================================
   Voice Industry
======================================== */

.voice-card__industry {
  margin:
    8px
    0
    0;

  color: var(--color-text-sub);

  font-size: 11px;
  font-weight: 400;

  line-height: 1.8;
  letter-spacing: 0.04em;
}


/* ========================================
   Voice Tags
======================================== */

.voice-card__tags {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 20px;
}

.voice-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding:
    5px
    13px;

  border-radius: 999px;

  background-color: var(--color-bg-sub);

  color: var(--color-main);

  font-size: 11px;
  font-weight: 500;

  line-height: 1.4;
  letter-spacing: 0.04em;
}


/* ========================================
   Voice Body
======================================== */

.voice-card__body {
  position: relative;

  display: flex;
  align-items: center;

  min-width: 0;

  padding:
    44px
    52px
    44px
    88px;
}


/* ========================================
   Quote
======================================== */

.voice-card__quote {
  position: absolute;

  top: 37px;
  left: 36px;

  color: rgba(13, 42, 77, 0.24);

  font-family: var(--font-heading);
  font-size: 48px;

  line-height: 1;
}


/* ========================================
   Voice Text
======================================== */

.voice-card__text {
  width: 100%;
  max-width: 780px;
}

.voice-card__text p {
  margin: 0;

  color: var(--color-text);

  font-size: 14px;

  line-height: 2.1;
  letter-spacing: 0.045em;
}

.voice-card__text p + p {
  margin-top: 14px;
}


/* ========================================
   Empty
======================================== */

.voice-list__empty {
  margin: 0;

  color: var(--color-text-sub);

  font-size: var(--font-size-sm);

  line-height: var(--line-height-base);
}


/* ========================================
   Pagination
======================================== */

.voice-pagination {
  margin-top: 60px;
}

.voice-pagination .navigation.pagination {
  margin: 0;
}

.voice-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 20px;
}

.voice-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 30px;
  height: 30px;

  color: var(--color-text-sub);

  font-size: 11px;

  opacity: 1;
}

.voice-pagination .page-numbers:visited {
  color: var(--color-text-sub);
}

.voice-pagination .page-numbers:hover {
  color: var(--color-main);

  opacity: 1;
}

.voice-pagination .page-numbers.current {
  border-radius: 50%;

  background-color: var(--color-main);

  color: var(--color-white);
}


/* ========================================
   Works Link
======================================== */

.voice-works {
  padding:
    86px
    var(--container-padding);

  background-color: var(--color-bg-sub);

  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.voice-works__inner {
  display: grid;

  grid-template-columns:
    32%
    minmax(0, 1fr)
    auto;

  align-items: center;

  column-gap: 56px;

  width: 100%;
  max-width: var(--container-width);

  margin: 0 auto;
}


/* ========================================
   Works Heading
======================================== */

.voice-works__heading {
  min-width: 0;
}

.voice-works__en {
  margin:
    0
    0
    12px;

  color: var(--color-text-sub);

  font-size: 11px;
  font-weight: 500;

  line-height: 1.5;
  letter-spacing: 0.16em;
}

.voice-works__title {
  margin: 0;

  color: var(--color-main);

  font-family: var(--font-heading);
  font-size: clamp(28px, 2.2vw, 36px);
  font-weight: 400;

  line-height: 1.7;
  letter-spacing: 0.07em;
}


/* ========================================
   Works Text
======================================== */

.voice-works__text-area {
  min-width: 0;

  justify-self: start;
}

.voice-works__text {
  width: 100%;
  max-width: 680px;

  margin: 0;

  color: var(--color-text-sub);

  font-size: 13px;

  line-height: 2;
  letter-spacing: 0.04em;
}


/* ========================================
   Works Link
======================================== */

.voice-works__link-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  min-width: 190px;
}

.voice-works__link {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 28px;

  padding-bottom: 8px;

  color: var(--color-main);

  font-size: 12px;

  line-height: 1.5;
  letter-spacing: 0.04em;

  white-space: nowrap;

  opacity: 1;
}

.voice-works__link:visited {
  color: var(--color-main);
}

.voice-works__link::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 1px;

  background-color: var(--color-main);

  transform: scaleX(1);
  transform-origin: right center;

  transition: transform 0.35s ease;
}

.voice-works__link:hover {
  color: var(--color-main);

  opacity: 1;
}

.voice-works__link:hover::after {
  transform: scaleX(0);
}

.voice-works__arrow {
  flex-shrink: 0;

  font-size: 14px;

  transition: transform var(--transition-base);
}

.voice-works__link:hover
.voice-works__arrow {
  transform: translateX(5px);
}


/* ========================================
   Tablet
======================================== */

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

  /* Voice List */

  .voice-list {
    padding:
      90px
      var(--container-padding);
  }


  /* Voice Card */

  .voice-card {
    grid-template-columns:
      minmax(220px, 32%)
      minmax(0, 68%);
  }


  /* Voice Information */

  .voice-card__info {
    padding:
      38px
      30px;
  }

  .voice-card__number {
    margin-bottom: 24px;

    padding-bottom: 16px;

    font-size: 12px;
  }

  .voice-card__number::after {
    width: 88px;

    background: linear-gradient(
      to right,
      var(--color-main) 0 18px,
      #cfd7e3 18px 100%
    );
  }

  .voice-card__title {
    font-size: 20px;
  }

  .voice-card__industry {
    margin-top: 7px;

    font-size: 10px;
  }

  .voice-card__tags {
    margin-top: 18px;
  }


  /* Voice Body */

  .voice-card__body {
    padding:
      38px
      34px
      38px
      72px;
  }

  .voice-card__quote {
    top: 32px;
    left: 28px;

    font-size: 42px;
  }

  .voice-card__text p {
    font-size: 13px;
  }


  /* Works Link */

  .voice-works {
    padding:
      72px
      var(--container-padding);
  }

  .voice-works__inner {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(0, 1.1fr);

    gap:
      34px
      46px;
  }

  .voice-works__link-area {
    grid-column: 2;

    justify-content: flex-start;

    min-width: 0;
  }

}


/* ========================================
   Smartphone
======================================== */

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

  /* ========================================
     Voice List
  ======================================== */

  .voice-list {
    padding:
      var(--section-space-sm)
      var(--container-padding);
  }

  .voice-list__items {
    gap: 18px;
  }


  /* ========================================
     Voice Card
  ======================================== */

  .voice-card {
    display: block;
  }


  /* ========================================
     Voice Information
  ======================================== */

  .voice-card__info {
    display: block;

    padding:
      30px
      24px
      28px;

    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .voice-card__number {
    margin-bottom: 22px;

    padding-bottom: 14px;

    font-size: 11px;
  }

  .voice-card__number::after {
    width: 78px;

    background: linear-gradient(
      to right,
      var(--color-main) 0 16px,
      #cfd7e3 16px 100%
    );
  }

  .voice-card__title {
    font-size: 19px;

    line-height: 1.7;
  }

  .voice-card__industry {
    margin-top: 6px;

    font-size: 10px;

    line-height: 1.7;
  }

  .voice-card__tags {
    margin-top: 16px;
  }

  .voice-card__tag {
    min-height: 26px;

    padding:
      4px
      11px;

    font-size: 10px;
  }


  /* ========================================
     Voice Body
  ======================================== */

  .voice-card__body {
    display: block;

    padding:
      32px
      24px
      32px
      58px;
  }

  .voice-card__quote {
    top: 27px;
    left: 21px;

    font-size: 36px;
  }

  .voice-card__text {
    max-width: none;
  }

  .voice-card__text p {
    font-size: 13px;

    line-height: 2;
  }


  /* ========================================
     Pagination
  ======================================== */

  .voice-pagination {
    margin-top: 48px;
  }


  /* ========================================
     Works Link
  ======================================== */

  .voice-works {
    padding:
      58px
      var(--container-padding);
  }

  .voice-works__inner {
    display: block;
  }

  .voice-works__title {
    font-size: 25px;
  }

  .voice-works__text-area {
    margin-top: 28px;
  }

  .voice-works__text {
    max-width: none;

    font-size: 12px;
  }

  .voice-works__link-area {
    display: block;

    min-width: 0;

    margin-top: 30px;
  }

}