@charset "UTF-8";
/* ==========================================================
   03-voice — 事例紹介（黒帯 + イラレ完成カード4枚）
   カード画像はチップ・ロゴ・角丸焼き込み済みの完成素材
   （jirei-top01〜04.png、幅違い・高さ1000で統一）
   ========================================================== */

.voice {
  background: var(--white);
  padding: 36px 0 40px;
}
/* 黒帯の代わりの見出し（2026-09-16） */
.voice__lead {
  text-align: center;
  font-size: 24px; /* 2026-09-16 FB: もう少し大きく 18→24 */
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: .04em;
  font-feature-settings: "palt";
  text-wrap: balance;
  word-break: auto-phrase;
  margin: 0 0 28px;
}

/* ---------- 黒帯（ヒーロー直下・全幅） ---------- */
.voice__band {
  background: var(--ink-strong);
  padding: 18px 24px;
}
.voice__band-text {
  color: var(--white);
  text-align: center;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .32em;
  text-indent: .32em; /* 末尾トラッキング分のセンター補正 */
  font-feature-settings: "palt" 1;
}

/* ---------- カード4枚 ---------- */
.voice > .l-container {
  max-width: 1680px; /* FVと同幅 */
  padding-inline: clamp(24px, 3.5vw, 64px);
  padding-top: 48px;
}
/* 高さ揃え・幅は素材比率のまま: 各カードの幅を画像のアスペクト比で
   比例配分すると、同じ高さ1000pxの素材同士は表示高さが完全に一致する */
.voice__list {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.voice-card { min-width: 0; }
.voice-card:nth-child(1) { flex: 1390 1 0%; } /* jirei-top01: 1390x1000 */
.voice-card:nth-child(2) { flex: 1445 1 0%; } /* jirei-top02: 1445x1000 */
.voice-card:nth-child(3) { flex: 1438 1 0%; } /* jirei-top03: 1438x1000 */
.voice-card:nth-child(4) { flex: 1496 1 0%; } /* jirei-top04: 1496x1000（9/17 差し替え後の比率。ここが古いと4枚目だけ高さがズレる） */

.voice-card__media { margin: 0; }
.voice-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.voice-card__comment {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  color: var(--ink);
  line-break: strict;
  word-break: auto-phrase;
  text-wrap: balance;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .voice { padding-bottom: 32px; }
  .voice__band-text {
    font-size: 16px;
    letter-spacing: .18em;
    text-indent: .18em;
  }
  .voice > .l-container { padding-top: 36px; }
  /* 2枚ずつ折り返し（行内でも比率配分なので行ごとに高さが揃う） */
  .voice__list { flex-wrap: wrap; gap: 32px 24px; }
  .voice-card:nth-child(1) { flex: 1390 1 40%; }
  .voice-card:nth-child(2) { flex: 1445 1 40%; }
  .voice-card:nth-child(3) { flex: 1438 1 40%; }
  .voice-card:nth-child(4) { flex: 1496 1 40%; }
}

@media (max-width: 768px) {
  .voice__band { padding: 14px 20px; }
  .voice__band-text {
    font-size: 14px;
    letter-spacing: .1em;
    text-indent: .1em;
  }
  .voice > .l-container { padding-top: 28px; }
  .voice__list {
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .voice-card {
    flex: none;
    width: 100%;
    max-width: 400px;
  }
  .voice-card__comment { font-size: 16px; }
}

/* 事例カードのリンク化（河底は記事へ、他は一覧へ） */
.voice-card__link { display: block; color: inherit; transition: opacity .25s; }
.voice-card__link:hover { opacity: .88; }

/* 2026-09-17 村上FB: SPの横スワイプは廃止し、4枚を2列×2行で全部表示 */
@media (max-width: 768px) {
  .voice { padding-top: 28px; }
  .voice__lead { font-size: 17px; margin-bottom: 18px; }
  .voice__list {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px 12px;
  }
  .voice__list > .voice-card:nth-child(n) { /* :nth-child 付きの画像比率ルールより優先させる */
    flex: 0 0 calc((100% - 12px) / 2);
    width: auto;
    max-width: none;
  }
  .voice-card__comment {
    font-size: 13px;
    line-height: 1.6;
    margin-top: 8px;
  }
}
/* ≤1024の2列では幅がほぼ同じになるので、画像比率の差（1.39〜1.50）で高さが揃わない
   → 共通の比率に固定し、はみ出す分は右端を切る（名前ピル・ロゴは左寄せなので無事） */
@media (max-width: 1024px) {
  .voice-card__media {
    aspect-ratio: 1445 / 1000;
    overflow: hidden;
  }
  .voice-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
  }
}
}