@charset "UTF-8";

/* =====================================================================
   ポピンズ familycare リニューアル
   お客様の声の絞り込みタグ＋カード＋横スライダーの共通CSS
   Figma: SP 258:9587（法人向け）／13:3474（ナニー）／18:2428（VIPケア）
   ---------------------------------------------------------------------
   - マークアップは parts/voice/display_voices.php と
     parts/voice/rnw-vipcare-slider.php
   - 3ページ（service-nanny / service-vipcare / service-nanny-corporate）で
     共通。配色は body[data-property] の変数から取る
   - 声の専用ページ（/service-nanny/voice/ ・ /service-vipcare/voice/）は
     同じクラス名の指定を各ページCSSに持っているため、このファイルは
     読み込まない（重複を避けるため）
   - 見出し・リード文は各ページの本文HTML側にある
   - JS契約は service-nanny.js の [data-rnw-slider]、
     service-vipcare-voice.js の [data-rnw-voice-filter]
   ===================================================================== */

/* 絞り込みタグ */

.rnw-voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

/* button 要素で出力するため appearance を消す */
.rnw-voice-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  padding: 12px 19.926px;
  border: 0.745px solid var(--rnw-main);
  border-radius: 55.96px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
  cursor: pointer;
}

/* 選択中 */
.rnw-voice-tag--current {
  border-color: #FFFFFF;
  background-color: var(--rnw-accent);
  color: #FFFFFF;
}


.rnw-voice-slider,
.rnw-voice-slider *,
.rnw-voice-slider *::before,
.rnw-voice-slider *::after {
  box-sizing: border-box;
}

.rnw-voice-slider {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

/* --- 操作UI（幅239 / 高さ24） --- */
.rnw-voice-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin-inline: auto;
}

.rnw-voice-slider__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.rnw-voice-slider__btn img { display: block; width: 24px; height: 24px; }

/* 「前へ」は同じアセットを180度回転 */
.rnw-voice-slider__btn--prev img { transform: rotate(180deg); }

/* 端に到達したボタンは半透明 */
.rnw-voice-slider__btn[disabled] { opacity: 0.5; cursor: default; }

/* --- 進捗バー（160×1px ＋ つまみ 33.25×3px r10） --- */
.rnw-voice-slider__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-accent);
}

.rnw-voice-slider__bar-thumb {
  position: absolute;
  top: -1px;
  left: 0;
  width: 20.8%;                      /* 33.25 ÷ 160。JS側で実際の割合に更新 */
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-accent);
}

/* --- カード列（カード幅311 / gap12）---
   セクションの左右パディング16pxを打ち消して全幅スクロールにする。 */
.rnw-voice-slider__track {
  display: flex;
  gap: 12px;
  align-items: stretch;
  width: calc(100% + 32px);
  margin-inline: -16px;
  padding-inline: 16px;
  overflow-x: auto;
  /* overflow-x を指定すると Y 方向もクリップされ、カードの drop-shadow が
     上下で切れる（overflow-y: clip は auto と混ぜると hidden に矯正されるので使えない）。
     内側に影のぶんの余白を作り、同じだけ外へ戻すので見た目の位置は変わらない。 */
  padding-block: 40px;
  margin-block: -40px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}

.rnw-voice-slider__track::-webkit-scrollbar { display: none; }


/* =====================================================================
   声カード（幅311）
   ===================================================================== */

.rnw-voice-card {
  /* 本文の長短で下端がずれないよう、行内でカードの高さを揃える */
  align-self: stretch;
  display: flex;
  flex: 0 0 311px;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--rnw-main);
  background-color: #FFFFFF;
}

/* .rnw-voice-card の display:flex が UA の [hidden] より強いため明示する */
.rnw-voice-card[hidden] { display: none; }

/* --- カテゴリ帯 --- */
.rnw-voice-card__cat {
  margin: 0;
  padding: 17px 27px;
  border: 1px solid var(--rnw-main);
  background-color: var(--rnw-bg2);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-voice-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 16px;
}

/* --- 写真（高さ200）---
   サムネイル未設定の記事では地色が出る。地色はFigmaのプレースホルダ準拠。 */
.rnw-voice-card__media {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: var(--rnw-caption);
}

/* VIPケアだけプレースホルダが薄いグレー（Figma 18:2428） */
[data-property="vipcare"] .rnw-voice-card__media {
  background-color: #D9D9D9;
}

.rnw-voice-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rnw-voice-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.rnw-voice-card__title {
  margin: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-voice-card__title a { color: inherit; text-decoration: none; }

.rnw-voice-card__excerpt,
.rnw-voice-card__excerpt p {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  white-space: pre-wrap;
}

/* Figma実測：段落間の余白は0（空行は本文中の空段落で表現される） */
.rnw-voice-card__excerpt p { margin: 0; }

/* --- 地域タグ --- */
.rnw-voice-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-voice-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 5px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}


/* =====================================================================
   タームごとの行（ナニーのPCデザイン 318:23036）
   ---------------------------------------------------------------------
   SPはカードごとの帯、PCは行ごとの帯で見せるため、両方を出して切り替える。
   ===================================================================== */

.rnw-voice-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.rnw-voice-group__head { display: none; }

.rnw-voice-group[hidden] { display: none; }


/* =====================================================================
   PC（Figma 318:23036）
   ===================================================================== */

@media only screen and (min-width: 768px) {

  .rnw-voice-tags {
    gap: 12px;
    justify-content: center;
  }

  .rnw-voice-tag { font-size: 16px; }

  .rnw-voice-slider__ctrl { width: 400px; }
  .rnw-voice-slider__bar  { width: 260px; }

  .rnw-voice-slider__btn,
  .rnw-voice-slider__btn img { width: 40px; height: 40px; }

  .rnw-voice-slider__bar-thumb { height: 4px; }

  .rnw-voice-groups { gap: 56px; }

  .rnw-voice-group { gap: 24px; }

  .rnw-voice-group__head {
    display: block;
    margin: 0;
    padding: 17px 27px;
    border: 1px solid var(--rnw-main);
    background-color: var(--rnw-bg2);
    color: var(--rnw-text);
    font-family: var(--rnw-font-jp);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.2px;
    text-align: center;
  }

  .rnw-voice-group .rnw-voice-card__cat { display: none; }

  /* 3枚ぶんで収まる幅。4枚目以降は横スクロール */
  .rnw-voice-group .rnw-voice-slider__track {
    gap: 12px;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .rnw-voice-group .rnw-voice-card { flex-basis: calc((100% - 24px) / 3); }

  .rnw-voice-card__title { font-size: 20px; font-weight: 700; }

  .rnw-voice-card__excerpt,
  .rnw-voice-card__excerpt p { font-size: 16px; }
}