@charset "UTF-8";
/* ==========================================================================
   voices.css — 売却された方の声 一覧
   design/07_売却された方の声_02.psb から実装。
   PC固定1320px / 寸法はデザイン(2x)の1/2 px直書き / SPは @media(max-width:768px) のみ
   ========================================================================== */

/* PSB のコンテンツ幅は var(--w-inner)（x199〜1301・1500px 中央寄せ） */
.p-voices__inner {
  width: var(--w-inner);
  margin-inline: auto;
}

/* ---- パンくず ----------------------------------------------------------- */

/* ---- ページタイトル ------------------------------------------------------ */
/* 罫（border-bottom）と padding は common.css の .p-lower__ttl に共通化済み */
.p-voices__ttl {
  /* letter-spacing: .05em; */
}

/* ==========================================================================
   カード一覧（3列グリッド）
   ========================================================================== */
.p-voices__list {
  display: grid;
  grid-template-columns: repeat(3, 352px);
  column-gap: 23px;
  row-gap: 51px;
  margin-top: 74px;
}

/* カード全体を記事へのリンクにしつつ、タグだけ絞り込み一覧への別リンクにする。
   <a> は入れ子にできないので、記事リンクを ::after で全面に広げ、
   タグと矢印を z-index で上に重ねている。 */
/* タイトルの行数が違ってもタグ・矢印の行が列（グリッドの各行）で揃うよう、
   カードを縦フレックスにして記事リンク側を伸ばし、フッターを下端に固定する */
.p-voices__item {
  display: flex;
}
.p-voices__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--c-black);
}
.p-voices__cardlink {
  display: block;
  flex: 1 0 auto;
  color: inherit;
}
.p-voices__card:hover {
  opacity: 1;
}
.p-voices__card:hover .p-voices__thumb img {
  transform: scale(1.04);
}
.p-voices__card:hover .p-voices__cardttl {
  color: var(--c-blue);
}

/* 写真 352x264（投稿画像はスマホ撮影の 4:3 前提。PSB の 352x242 から変更） */
.p-voices__thumb {
  display: block;
  width: 352px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-gray);
}
.p-voices__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

/* 日付 */
.p-voices__date {
  display: block;
  margin: 16px 0 0 6px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .075em;
  color: #787878;
}

/* タイトル（22px Bold / 行間 30px） */
/* お客様の声の一言（ACF voice_message）。案件名の下に置く */
.p-voices__voice {
  display: block;
  margin: 8px 6px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
/* 案件名。カードの見出し */
.p-voices__cardttl {
  display: block;
  margin: 2px 6px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.5;
  letter-spacing: .05em;
  transition: color .2s ease;
}

/* タグ＋丸矢印 */
.p-voices__foot {
  position: absolute;
  /* カード全面リンクより上に出す */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  top: 10px;
  left: 12px;
}
.p-voices__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 13px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 2px;
  letter-spacing: .075em;
  white-space: nowrap;
  transition: background-color .2s;
}
.p-voices__tag:hover {
  background: var(--c-deepblue);
  opacity: 1;
}
.p-voices__tag-empty {
  display: inline-block;
}
.p-voices__arrow {
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--c-black);
  display: grid;
  place-items: center;
  display: none;
}
.p-voices__arrow .c-mask {
  width: 11px;
  height: 8px;
  color: var(--c-white);
}
/* カード全面リンクの上に重なっているので、矢印自体もリンクにする
   （カード全体と同じ記事へ飛ぶ。読み上げは重複するので aria-hidden + tabindex="-1"） */
.p-voices__arrow:hover {
  opacity: 1;
  background: var(--c-blue);
}

.p-voices__empty {
  margin-top: 60px;
  font-size: var(--fz-body);
}

/* ==========================================================================
   案件タグ絞り込み一覧（/voices/tag/{slug}/）
   PSB にデザインが無いため一覧を流用。見出しの下に対象タグを出すだけ。
   ========================================================================== */
.p-voices__termlead {
  margin-top: 28px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}
.p-voices__termname {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 0 8px;
  padding: 0 13px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 14px;
  letter-spacing: .075em;
}
.p-voices__back {
  margin-top: 60px;
  text-align: center;
}

/* ==========================================================================
   ページャー（PSB の非表示レイヤー「btns」の意匠に合わせる）
   ========================================================================== */
.p-voices__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 70px;
  position: relative;
}
.p-voices__pager .page-numbers {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid var(--c-black);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--c-black);
  background: var(--c-white);
}
.p-voices__pager .page-numbers.current {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}
.p-voices__pager .page-numbers.dots {
  border: 0;
  background: none;
  width: 30px;
  font-size: 15px;
  letter-spacing: .1em;
}
/* 前後ボタン（円） */
.p-voices__pager .prev,
.p-voices__pager .next {
  position: absolute;
  width: 47px;
  height: 47px;
  border: 0;
  border-radius: 50%;
  background: var(--c-black);
  padding: 0;
}
.p-voices__pager .prev.is-disabled,
.p-voices__pager .next.is-disabled {
  background: #e6e9ec;
  pointer-events: none;
}
.p-voices__pager .is-disabled .c-mask {
  color: #b4bbc2;
}
.p-voices__pager .prev {
  left: 210px;
}
.p-voices__pager .next {
  right: 210px;
}
.p-voices__pager-arrow {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.p-voices__pager-arrow .c-mask {
  width: 21px;
  height: 7px;
  color: var(--c-white);
}
.p-voices__pager-arrow--prev {
  transform: scaleX(-1);
}

/* ==========================================================================
   SP（≤768px）
   ========================================================================== */
@media (max-width: 768px) {
  .p-voices {
    padding: 28px 0 0;
  }
  .p-voices__inner {
    width: 90%;
  }

  .p-voices__crumb {
    font-size: 12px;
  }
  .p-voices__crumb span::before,
  .p-voices__crumb a+span::before {
    margin: 0 8px;
  }

  .p-voices__ttl {
    margin-top: 16px;
  }

  .p-voices__list {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 36px;
    margin-top: 40px;
  }
  .p-voices__list li {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--c-line);
  }
  .p-voices__list li:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
  }
  .p-voices__thumb {
    width: 100%;
  }
  .p-voices__date {
    margin-left: 0;
    font-size: 12px;
  }
  .p-voices__voice {
    margin-inline: 0;
    font-size: 15px;
  }
  .p-voices__cardttl {
    margin-inline: 0;
    font-size: 17px;
  }
  .p-voices__foot {
    margin-left: 0;
  }
  .p-voices__tag {
    font-size: 12px;
    height: 24px;
    padding: 0 10px;
    white-space: normal;
  }

  .p-voices__pager {
    gap: 6px;
    margin-top: 44px;
    flex-wrap: wrap;
  }
  .p-voices__pager .page-numbers {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .p-voices__pager .prev,
  .p-voices__pager .next {
    position: static;
    width: 40px;
    height: 40px;
  }
}