/* ==========================================================================
   voice-style.css
   お客様の声ページ（page-voice.php / page-voice-dog.php / page-voice-cat.php）専用スタイル
   デザイントークン：ネイビー #004183／コーラル #C63031
   フォント：Zen Old Mincho（見出し）／Zen Kaku Gothic New（本文）
   company-style.css / scientific-hub-style.css の構成に準拠（子テーマ内トーン統一のため）
   2026-07-20新規作成：スラッグ /taikendan/ が既存WPで使用中だったため /voice/ で新規実装。

   ★2026-07-30：スマホ表示で文字が小さいとのフィードバックにより、ヒーロー以外の
     本文系フォントサイズ（タブ・フィルター・カード・準備中ボックス）に、
     company-style.css / scientific-hub-style.css で適用済みの一律×1.2スケールを
     揃えて適用。ヒーロー（.vo-hero系）は2026-07-29に他ページと高さ統一済みで、
     その時点で既にcompany/Scientific Hubと同じ拡大後の数値になっているため対象外。
   ========================================================================== */

.vo-page {
  --vo-navy: #004183;
  --vo-coral: #C63031;
  --vo-bg-soft: #F7F9FB;
  --vo-text: #262626;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: var(--vo-text);
  line-height: 1.8;
}

.vo-page h1,
.vo-page h2,
.vo-page h3 {
  font-family: "Zen Old Mincho", serif;
  color: var(--vo-navy);
}

.vo-page section > div {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* グリッド/フィルターセクションのみ少し広めのコンテナ幅にして3列表示に余裕を持たせる */
.vo-filter-bar > div,
.vo-grid > div {
  max-width: 1180px;
}

.vo-section-title {
  text-align: center;
  font-size: 1.92rem;
  margin-bottom: 12px;
  position: relative;
}
.vo-section-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--vo-coral);
  margin: 12px auto 0;
}
.vo-section-lead {
  text-align: center;
  font-size: 1.32rem; /* 旧1.1rem×1.2 */
  color: #666;
  margin: 0 0 36px;
}

/* ---------- ヒーロー ---------- */
.vo-hero {
  position: relative;
  background: var(--vo-navy);
  padding: 88px 0;
  text-align: center;
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
}
.vo-hero .vo-hero__inner { width: 100%; }
.vo-hero .vo-hero__bg {
  position: absolute;
  inset: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  z-index: 0;
}
.vo-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2026-07-30：スマホ実機で女性の顔が画面端で不快に切れる不具合を修正。
     モバイル幅（横390px程度）では画像1736x906に対しobject-fit:coverの
     横クロップ幅が約785px（全体の45%）になり、デフォルトのcenter(50%)だと
     可視領域が横25.2%〜74.8%となって被写体（女性の顔・髪）の左側が
     ちょうど画面左端で切れていた（実機スクリーンショット＋ORB特徴点マッチングで
     src⇔実描画のアフィン変換を解析し検証済み）。object-positionを20%に
     寄せることで女性の顔・髪を余白付きでフレーム内に収める。
     PC版（768px以上）は元々横方向のクロップが発生しない構図のため、
     本値変更による見た目への影響なし（縦方向のみ均等クロップのまま）。
     voice-hero-cat.jpg（猫ページ）でも同様に確認済み、20%指定で問題なし。 */
  object-position: 20% center;
  display: block;
  opacity: 0.85;
}
.vo-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,65,131,0.3), rgba(0,65,131,0.5));
}
.vo-hero__inner {
  position: relative;
  z-index: 1;
}
.vo-hero .vo-hero__title {
  /* company/scientific-hubで発生した詳細度バグの再発防止のため、
     ダーク背景h1は必ず「.vo-hero .vo-hero__title」の2クラス詳細度で白文字を維持する */
  color: #fff;
  font-size: 2.52rem;
  margin: 0 0 16px;
}
.vo-hero__eyebrow {
  color: #fff;
  opacity: 0.7;
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.vo-hero__sub {
  color: #fff;
  opacity: 0.92;
  font-size: 1.2rem;
  line-height: 1.9;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- カテゴリータブ（すべて／犬／猫） ---------- */
.vo-tabs {
  background: #fff;
  padding: 32px 0 0;
}
.vo-tabs__list {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vo-tabs__link {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  border: 1px solid var(--vo-navy);
  color: var(--vo-navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.22rem; /* 旧1.02rem×1.2 */
  transition: background 0.2s ease, color 0.2s ease;
}
.vo-tabs__link:hover {
  background: var(--vo-bg-soft);
  color: var(--vo-navy);
}
.vo-tabs__link.is-active {
  background: var(--vo-navy);
  color: #fff;
}

/* ---------- 年齢／製品フィルターバー（2026-07-28追加） ---------- */
.vo-filter-bar {
  background: var(--vo-bg-soft);
  padding: 24px 0;
  border-top: 1px solid #E5EAF0;
  border-bottom: 1px solid #E5EAF0;
  margin-top: 24px;
}
.vo-filter-bar__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.vo-filter-bar__row:last-of-type {
  margin-bottom: 0;
}
.vo-filter-bar__label {
  font-weight: 700;
  font-size: 1.1rem; /* 旧0.92rem×1.2 */
  color: var(--vo-navy);
}
.vo-chip-group {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.vo-chip {
  flex: none;
  appearance: none;
  border: 1px solid #C9D3DE;
  background: #fff;
  color: var(--vo-text);
  font-family: inherit;
  font-size: 1.08rem; /* 旧0.9rem×1.2 */
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vo-chip:hover {
  border-color: var(--vo-navy);
}
.vo-chip.is-active {
  background: var(--vo-navy);
  border-color: var(--vo-navy);
  color: #fff;
}
.vo-select {
  appearance: none;
  width: 100%;
  max-width: 320px;
  font-family: inherit;
  font-size: 1.13rem; /* 旧0.94rem×1.2。iOS自動ズーム対策の16px相当は下回らないため据え置きで問題なし */
  color: var(--vo-text);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23004183'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
  border: 1px solid #C9D3DE;
  border-radius: 8px;
  padding: 10px 40px 10px 14px;
  cursor: pointer;
}
.vo-select:focus {
  outline: 2px solid var(--vo-navy);
  outline-offset: 1px;
}
.vo-filter-bar__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px dashed #D6DEE7;
}
.vo-filter-bar__count {
  font-size: 1.03rem; /* 旧0.86rem×1.2 */
  color: #666;
}
.vo-filter-bar__reset {
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.03rem; /* 旧0.86rem×1.2 */
  color: var(--vo-coral);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 0;
}
.vo-filter-bar__reset:hover {
  opacity: 0.75;
}

/* ---------- 準備中プレースホルダー（実データ未収集時に表示） ---------- */
.vo-empty {
  background: #fff;
  padding: 64px 0 80px;
}
.vo-empty__box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  background: var(--vo-bg-soft);
  border-radius: 12px;
  padding: 48px 32px;
}
.vo-empty__box p {
  font-size: 1.3rem; /* 旧1.08rem×1.2 */
  margin: 0 0 8px;
}
.vo-empty__box p:last-child {
  margin-bottom: 0;
}
.vo-empty__note {
  font-size: 1.13rem; /* 旧0.94rem×1.2 */
  color: #888;
}

/* ---------- 体験談カード：フォトカードグリッド（2026-07-28、アンチノール参考に刷新） ---------- */
.vo-grid {
  background: #fff;
  padding: 32px 0 72px;
}
.vo-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 20px;
}
.vo-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* 写真エリア（実写真 or プレースホルダー＋見出しオーバーレイ） */
.vo-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #eee;
  overflow: hidden;
}
.vo-card__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vo-card__photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(255,255,255,0.85);
}
.vo-card__photo--dog .vo-card__photo-placeholder {
  background: linear-gradient(155deg, #0A5CB8 0%, var(--vo-navy) 70%);
}
.vo-card__photo--cat .vo-card__photo-placeholder {
  background: linear-gradient(155deg, #E2564F 0%, var(--vo-coral) 70%);
}
.vo-card__paw {
  width: 40px;
  height: 40px;
  fill: rgba(255,255,255,0.55);
}
.vo-card__photo-label {
  font-size: 0.91rem; /* 旧0.76rem×1.2 */
  letter-spacing: 0.05em;
}

/* 製品バッジ（写真左上）
   2026-08-02：複数サプリ対応のため、位置指定は.vo-card__badges（親ラッパー）側に移し、
   .vo-card__badge自体は単なる並べるピル要素にした（1件で複数バッジがある場合に折り返し表示するため）。 */
.vo-card__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 24px);
}
.vo-card__badge {
  background: rgba(255,255,255,0.92);
  color: var(--vo-coral);
  font-size: 0.91rem; /* 旧0.76rem×1.2 */
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1.6;
}

/* 見出しオーバーレイ（写真下部にグラデーション＋白文字、アンチノール参考） */
.vo-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 40px 16px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 85%);
}
.vo-card__headline {
  margin: 0;
  color: #fff;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.22rem; /* 旧1.02rem×1.2 */
  line-height: 1.5;
}

/* 白背景の本文エリア */
.vo-card__body {
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vo-card__quote {
  font-size: 1.15rem; /* 旧0.96rem×1.2 */
  line-height: 1.85;
  margin: 0 0 14px;
}
.vo-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
}
.vo-card__pet-name {
  font-weight: 700;
  color: var(--vo-navy);
  font-size: 1.15rem; /* 旧0.96rem×1.2 */
}
.vo-card__breed {
  font-size: 1.03rem; /* 旧0.86rem×1.2、.vo-card__ownerと同じトーン */
  color: #777;
  background: #f3f3f3;
  padding: 1px 8px;
  border-radius: 999px;
}
.vo-card__owner {
  font-size: 1.03rem; /* 旧0.86rem×1.2 */
  color: #777;
}
.vo-card__disclaimer {
  font-size: 0.94rem; /* 旧0.78rem×1.2 */
  color: #999;
  margin: auto 0 0;
}

.vo-grid__empty-filtered {
  text-align: center;
  padding: 56px 16px;
  color: #777;
}
.vo-grid__empty-filtered p {
  margin: 0 0 14px;
}

/* ---------- CTA ---------- */
.vo-cta {
  padding: 56px 0 80px;
  text-align: center;
  background: var(--vo-bg-soft);
}
.vo-cta__button {
  display: inline-block;
  background: var(--vo-coral);
  color: #fff;
  font-weight: 700;
  font-size: 1.26rem;
  padding: 16px 52px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.vo-cta__button:hover {
  opacity: 0.85;
  color: #fff;
}

/* ---------- レスポンシブ ---------- */
/* モバイルを主戦場としつつ、576px以上で2列、900px以上で3列（アンチノール参考ページに近い密度） */
@media (min-width: 576px) {
  .vo-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .vo-filter-bar__row {
    flex-direction: row;
    align-items: center;
  }
  .vo-filter-bar__label {
    flex: none;
    width: 140px;
  }
  .vo-chip-group {
    flex: 1;
  }
}

@media (min-width: 768px) {
  .vo-hero {
    /* 2026-07-29：全ページ共通のコンテンツ最大値に合わせた固定height＋flex中央寄せ方式
       （詳細はcompany-style.css .co-heroのコメント参照） */
    height: 437px;
    padding: 110px 0;
  }
  .vo-hero .vo-hero__title {
    font-size: 3rem;
  }
}

@media (min-width: 900px) {
  .vo-grid__list {
    grid-template-columns: repeat(3, 1fr);
  }
}