@charset "utf-8";
/* CSS Document */

.voice-filter{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  padding:14px;
  margin:20px auto 26px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  max-width:1000px;
}

.voice-filter__btn{
  border:1px solid #e6e8ef;
  background:#fff;
  color:#334155;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  line-height:1;
  transition:.15s;
}
.voice-filter__btn:hover{ transform:translateY(-1px); }

.voice-filter__btn.is-active{
  background:#4f62ff;
  border-color:#4f62ff;
  color:#fff;
}

/* 非表示用（JSで付ける） */
.is-hidden{ display:none !important; }

/* 該当なし */
.voice-empty{
  text-align:center;
  color:#64748b;
  padding:10px 0 30px;
}

/* h4の中を「バッジ + 残りテキスト」にする */
.text-parts h4{
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.8;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* バッジ共通 */
.voice-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:20px 20px;
  border-radius:6px;
  font-size:16px;
  font-weight:700;
  line-height:1.8;
  white-space:nowrap;
}

/* 種類別（色はお好みで） */
.voice-badge--join{ background:#EEF2FF; color:#3B5BFF; }   /* 入社 */
.voice-badge--job { background:#E9FBF4; color:#0F766E; }   /* 職種 */
.voice-badge--age { background:#F1F5F9; color:#334155; }   /* 年代（任意） */

/* バッジの「点アイコン」 */
.voice-badge__dot{
  width:8px; height:8px; border-radius:50%;
  background: currentColor;
  opacity:.45;
}

/* 職種ごとの色分け */
.voice-badge.job-nurse{           /* 看護師系 */
  background:#0369A1;
  color:#E0F2FE;
}
.voice-badge.job-careworker{      /* 介護福祉士 */
  background:#166534;
  color:#DCFCE7;
}
.voice-badge.job-helper{          /* 初任者・ヘルパー */
  background:#854D0E;
  color:#FEF9C3;
}
.voice-badge.job-practitioner{    /* 実務者 */
  background:#9D174D;
  color:#FCE7F3;
}
/* バッジは左右だけ広めにする（最終勝ち） */
.voice-badge.voice-badge--join{
  padding-left: 10px;
  padding-right: 10px;
}
.voice-badge.voice-badge--job{
  padding-left: 10px;
  padding-right: 10px;
}
.voice-badge.voice-badge--age{
  padding-left: 10px;
  padding-right: 10px;
}

/* アイコン点の色も合わせたい場合（currentColorなのでOKのまま） */