/* ==========================================================================
   Voice (住人の声)
   ========================================================================== */
.voice {
  padding: 32px 0;
  background-color: var(--color-main);
}

.voice__title {
  text-align: center;
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: 0.04em;
}

.voice__list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.voice__card {
  position: relative;
  z-index: 0;
  width: 262px;
  max-width: 100%;
  /* SP版: 高さをauto(内容依存)のままにすると、下記でテキストグループを
     上へ詰めた際にカード自体(=大きな白円の描画エリア)まで縮んでしまい、
     「白円のサイズは変更しない」という条件に反してしまう。
     現在の内容がぴったり収まっている実測高さ(315px)を明示指定して
     固定することで、大きな白円のサイズは今のまま維持しつつ、
     内側のコンテンツだけを自由に動かせるようにする。 */
  height: 315px;
  padding: 56px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.voice__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../images/voice/sp-voice-card-bg.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
}

.voice__list li:last-child.voice__card::before {
  background-image: url("../../images/voice/sp-voice-card-bg3.svg");
}

/* SP版: 以前はスプライトシート(voice-avatar-sprite.png)を
   background-size:500% 200% + background-positionのパーセント指定で
   切り出していたが、スプライト内での各人物イラストの余白が
   セルごとに微妙に異なっていたため、切り出し位置(グリッド計算上は
   正しい)と実際に見える顔の位置がズレ、人物ごとに上下の見え方が
   バラついていた。PC版は個別に書き出し済みの画像(voice-avatar-N.png)
   を background-position:center; background-size:cover; で表示する
   方式に修正済みだったため、同じ考え方をSP版にも適用する。 */
.voice__avatar {
  width: 77px;
  height: 78px;
  border-radius: 50%;
  background-color: var(--color-base);
  background-position: center;
  background-size: cover;
  border: 3px solid var(--color-base);
  box-shadow: 0 2px 6px rgba(44, 40, 35, 0.15);
  /* SP版: sp-voice-card-bg.svgの上の小さいバンプ円の中心はカード上端から
     約48.7pxだが、パス形状はバンプから本体へのくびれ(ネック)が
     真円より早く絞り込まれているため、アバター(半径39px)をバンプ中心に
     ぴったり合わせると、アバター下部がくびれの外側にはみ出し、
     背景の水色が隙間として見えてしまっていた(境界の段差の原因)。
     アバターがネックの絞り込みより下の、本体側の十分幅がある位置に
     収まるよう、中心をさらに下げて重ねることで隙間をなくす。
     transformはレイアウト(他要素の位置)に影響しないため、
     「40代・自営業」等の位置は変わらない。 */
  transform: translateY(-44px);
}

.voice__avatar--1 { background-image: url("../../images/voice/voice-avatar-1.png"); }
.voice__avatar--2 { background-image: url("../../images/voice/voice-avatar-2.png"); }
.voice__avatar--3 { background-image: url("../../images/voice/voice-avatar-3.png"); }

.voice__age {
  font-weight: 900;
  font-size: 1.6rem;
  color: var(--color-blue-text);
  /* SP版: 「年齢・名前＋ライン＋コメント」のグループを一つの塊として
     上へ移動する。マイナスmargin-topをグループ先頭要素(.voice__age)に
     付与すると、flexのgap計算はこの要素の(移動後の)margin box基準で
     後続要素に伝播するため、グループ内の間隔(age-divider間、
     divider-comment間のgap:16px)は一切変えずに、グループ全体を
     まとめて上へ引き上げられる。人物アイコン(.voice__avatar)は
     このグループより前の要素なので影響を受けない。 */
  margin-top: -32px;
}

.voice__divider {
  width: 100%;
  height: 1px;
  /* SP版: 「40代・自営業」等の年齢・名前(.voice__age)に実際に適用されて
     いる color 値(var(--color-blue-text))と完全に同じ値をラインにも
     使用する(以前は var(--color-text) + opacity:0.3 でグレーに見えていた)。 */
  background-color: var(--color-blue-text);
}

.voice__comment {
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 2;
}

@media (min-width: 768px) {
  .voice {
    padding: 76px 0;
  }

  .voice__title {
    font-size: 3.2rem;
  }

  .voice__list {
    margin-top: 48px;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    flex-wrap: nowrap;
  }

  .voice__card {
    width: 344px;
    height: 385.866px;
    padding: 9px 30px 0;
    gap: 26px;
    z-index: 0;
  }

  .voice__card::before {
    background-image: url("../../images/voice/voice-card-bg.svg");
    z-index: -2;
  }

  /* 人物アイコンの白い円とカード白背景を構造的につなげるための白いレイヤー。
     カード本体(::before)の「上端」を、人物アイコンの白い円の裏側まで
     確実に潜り込ませる形で上方向へ拡張する。アイコン自体の位置・サイズ・
     顔画像・カード横幅・カード下端・カード内テキストは一切変更しない。
     ::before(-2)より手前、人物アイコン(z-index:auto)より奥になるよう
     z-indexを明示指定し、重なり順序を確定させる。
     人物アイコン上端(padding-top:9px)に対して、この白いレイヤーは
     card上端から-10px(=アイコン上端から19px分)上まで、アイコンの
     円(直径88px)を大きく上回る直径160pxで覆っており、
     アイコン下端(97px)〜このレイヤー下端(150px)まで53px分、
     アイコンの外周全体を白背景と確実に重ねている。 */
  .voice__card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -10px;
    width: 160px;
    height: 160px;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: var(--color-base);
    z-index: -1;
  }

  .voice__list li:last-child.voice__card::before {
    background-image: url("../../images/voice/voice-card-bg3.svg");
  }

  .voice__avatar {
    width: 88px;
    height: 88px;
    background-position: center;
    background-size: cover;
    /* PC版はSP用のtransformを打ち消し、従来通りの位置に戻す */
    transform: none;
  }

  .voice__avatar--1 { background-image: url("../../images/voice/voice-avatar-1.png"); }
  .voice__avatar--2 { background-image: url("../../images/voice/voice-avatar-2.png"); }
  .voice__avatar--3 { background-image: url("../../images/voice/voice-avatar-3.png"); }

  .voice__age {
    font-size: 2.4rem;
    /* PC版はSP用のmargin-topを打ち消す */
    margin-top: 0;
  }

  .voice__divider {
    /* PC版はSP用の色変更を打ち消し、従来通りのグレーに戻す */
    background-color: var(--color-text);
    opacity: 0.3;
  }

  .voice__comment {
    font-size: 2rem;
    line-height: 1.4;
  }
}