@charset "UTF-8";

/* Lusitana は見出しの英字サブ（Merit / Voice / FAQ / Contact ほか）に使う。
   professional の renewal/css/common.css は Zen Kaku Gothic New しか
   読み込んでいないため、このページ専用CSSで追加する（common.css は編集しない）。 */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');

/* =====================================================================
   ポピンズ professional リニューアル
   育児・介護コンサルティングサービス専用CSS
   （/professional/care-consulting/ ※旧サイトは service-consulting）

   Figma
     PC        453:39760
     SP        363:25342（SP2校）
     詳細展開  SP 育児 363:25953 / SP 介護 363:25996 / PC 育児 453:40250
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が is_page(['care-consulting', 'service-consulting']) のときだけ読み込む。
     renewal/css/common.css より後に読み込むこと。
     色は原則 common.css の CSS変数から取る。

   ■ 命名
     このページ専用クラスは `rnw-care-` 接頭辞。
     familycare の service-nanny（rnw-nanny-）/ service-vipcare（rnw-vipcare-）と
     同じ付け方で、スラッグから識別語を取っている。
     共通コンポーネント（.rnw-btn / .rnw-icon）は common.css のものを流用する。

   ■ 海外研修ページ（service-global.css）との関係
     見出し・スライダー・ページ内メニュー・追従CTA・開閉バーはFigma上は同じ
     コンポーネントだが、CSSは独立させている。共通化すると接頭辞が変わり、
     本番稼働中の海外研修ページ本文の貼り直しが必要になるため。
     3ページ目が出た時点でまとめて共通レイヤーへ寄せる方針。

     FAQだけは最初から複数ページ共有前提の部品なので renewal/css/faq.css に
     切り出してある。ただし faq.css はPC対応を持たないので、
     このページのPC寸法だけ 15節で `.rnw-care-faq` 配下に限って上書きしている。

   ■ 旧CSSとの関係（旧 /professional/css/*.css は編集禁止）
     下層ページでは旧 contents.css / common.css / professional.css が
     読み込まれたままになっている。このページで打ち消しが要るのは
       ・common.css 192行 `p { line-height: 2.0 }`
       ・common.css 202行 `img { max-width:100%; vertical-align:middle }`
     の2つ。テーブルを使っていないので contents.css の table 系は無関係。

   ■ PC
     15節にまとめている。分岐は common.css・front.css と同じ 767/768。
     デザインは1440幅で、セクションは全幅・中身だけ 1280 / 1200 / 1120 に
     収まる作り。SPにあってPCに無いページ内メニューと追従CTAは
     PC幅で display:none にしている。

   ■ 前回（129:25598）からの色の変更
     塗りのCTAが pro/main（teal）から common/accent/red #912344 に変わった。
     common.css の .rnw-btn--main（teal）は使わず、.rnw-care-btn--red を当てる。

   ■ 動き（デザイナー指示）
     「グラデーションがふわっと動きます」「画像については、Key Burnsで動く想定です」
     → MVの写真に Ken Burns、pro/gra の地色にゆっくりした往復を当てている（16節）。
     どちらも prefers-reduced-motion: reduce で止まる。
     ▼要確認：指示にノード指定が無かったための当てはめ。
   ===================================================================== */


/* =====================================================================
   0. ルート・リセット
   ===================================================================== */

:root {
  /* common.css に無い色。Figmaのバリアブル名を併記する。 */
  --care-bg1:     #FAF7F2;  /* common/bg（詳細パネルの「例えばこんな時に」枠ほか） */
  --care-bg2:     #EEE8DE;  /* common/bg2（MV・サービス概要・メリット・FAQの地色） */
  --care-red:     #912344;  /* common/accent/red（塗りCTA） */
  --care-gray:    #626262;  /* common/text/gray（注釈・詳細パネルの区切り線） */
  --care-ph:      #D9D9D9;  /* 写真未支給枠のプレースホルダー */
  --care-cta-txt: #333333;  /* 追従CTAの文字（Fill/Default） */

  /* ▼要確認：お客様の声セクションだけ familycare の VIPケアの色が入っている。
     指示があれば pro/main #00778A・pro系に差し替える。 */
  --care-vipcare-main:   #4FBAA1;  /* vipcare/main（お客様の声カードの枠線） */
  --care-vipcare-accent: #327666;  /* vipcare/accent（お客様の声の英字見出し） */

  /* pro/gra。ページ内メニュー・サービス一覧・お問い合わせで同じ値を使う。 */
  --care-gra: linear-gradient(180deg, #EEF3F3 0%, #6EB2BC 52.404%);

  /* common.css の --rnw-font-serif は Times（フッターcopyright用）で
     和文明朝ではないため、このページ用に別途定義する。 */
  --care-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  --care-font-en:     'Lusitana', serif;

  /* カード影（Figma drop: 0 4 28 rgba(0,0,0,.08)） */
  --care-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
}

.rnw-care {
  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白。
     旧CSS側の上余白は #key_field / .breadcrumbs_wrap にしか付かず、
     新マークアップはどちらも持たないためここで確保する。 */
  padding-top: var(--rnw-header-h-sp);
  background-color: var(--rnw-white);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

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

:where(.rnw-care) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 見出し・段落・リストのブラウザ既定マージンと旧CSSの余白を打ち消す。
   :where() は詳細度0なので、後続の個別指定が必ず勝つ。 */
:where(.rnw-care) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}
:where(.rnw-care) :is(ul, ol) { list-style: none; }

/* 旧 common.css の `p { line-height: 2.0 }` を打ち消す。 */
.rnw-care p { line-height: 1.8; }

/* :where() で詳細度0にしておく。`.rnw-care a`（0,1,1）のままだと
   ボタン修飾クラス（0,1,0）の color に勝ってしまい、
   赤い塗りCTAの文字が本文色（#444）に化ける。 */
:where(.rnw-care) a { text-decoration: none; color: inherit; }

/* PC/SPで別ファイルの写真を出し分ける。<picture> は投稿本文で
   保存時に落ちるため使わない。 */
.rnw-care-img--pc { display: none; }

/* 改行とラベルの出し分け。既定はSP側を出す。
   .rnw-care-br-sp はSPだけで折る改行（PC幅で消す）。 */
.rnw-care-br-pc     { display: none; }
.rnw-care-swap--pc  { display: none; }


/* --- 写真未支給枠 -----------------------------------------------------
   Figma側がベタ塗り（#626262）になっている箇所。実写真が支給されたら
   同じ寸法の <img> に置き換える。
   残っているのは「なぜ必要なのか」のカード2枚とお客様の声の介護カード。 */
.rnw-care-ph {
  background-color: var(--care-ph);
}


/* =====================================================================
   1. 見出し（Figma component: title/h2）
   ---------------------------------------------------------------------
   英字サブ（Lusitana 18px / pro-main）＋和文（Yu Mincho 28px）の2段。
   PCは 24px / 42px（14節）。
   PCは15節で上書きする。
   バリエーション
     （素）      中央寄せ・背景なし
     --left      左寄せ（FAQ。PCでは中央に戻す）
     --card      白 .9 の帯に載る（SP 300px / PC 640px）
     --wide      帯が幅いっぱい・高さ126px固定（お問い合わせ。PCでは帯なし）
     --vipcare   英字が #327666（お客様の声のみ。要確認）
   ===================================================================== */

.rnw-care-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
  letter-spacing: 1.2px;
}

.rnw-care-h2__en {
  color: var(--rnw-main);
  font-family: var(--care-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.rnw-care-h2__ja {
  color: var(--rnw-text);
  font-family: var(--care-font-mincho);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

.rnw-care-h2--left { text-align: left; }

.rnw-care-h2--card {
  width: 300px;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

/* お問い合わせの帯だけ幅いっぱい・高さ固定（Figma 363:25725） */
.rnw-care-h2--wide {
  justify-content: center;
  width: 100%;
  height: 126px;
  padding: 0;
}

/* ▼要確認：familycare の vipcare/accent。他セクションの英字は pro/main。 */
.rnw-care-h2--vipcare .rnw-care-h2__en { color: var(--care-vipcare-accent); }


/* =====================================================================
   2. スライダー共通（front.js の [data-rnw-slider] 契約）
   ---------------------------------------------------------------------
   スクロール自体はCSS（overflow-x + scroll-snap）に任せ、JSは
   「ボタンで1枚ぶんスクロールさせる」「進捗バーと端のボタン状態を更新する」
   だけを担当する。JSが動かなくても指でのスワイプはそのまま機能する。
   このページはスライダーを3本使う（メリット／お客様の声×2）。入れ子は無い。
   ※導入メリットはPCデザインが4カラム並列なので、PC幅では
     トラックを並列に組み替えて前後ボタンを隠す（15節）。
   ===================================================================== */

.rnw-care-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rnw-care-merit__track,
.rnw-care-voice__track {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* 旧Edge */
}
.rnw-care-merit__track::-webkit-scrollbar,
.rnw-care-voice__track::-webkit-scrollbar { display: none; }

.rnw-care-merit__track > *,
.rnw-care-voice__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* --- 前後ボタンと進捗バー（Figma 363:25425 ほか。幅239px） --- */
.rnw-care-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin: 0 auto;
}

.rnw-care-ctrl__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-care-ctrl__btn img { width: 24px; height: 24px; }

/* アセットは「次へ」（右向き）1点だけ持ち、前へは180度回して使う。
   renewal/img/front/icon_slider_next.svg はトップ・海外研修と同一アセットの
   ため複製せずそのまま参照している。 */
.rnw-care-ctrl__btn--prev img { transform: rotate(180deg); }

/* Figma でも先頭では前へボタンが opacity 0.5。front.js が端で disabled を付ける。 */
.rnw-care-ctrl__btn[disabled] { opacity: 0.5; cursor: default; }

.rnw-care-ctrl__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-main);
}

.rnw-care-ctrl__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-main);
}


/* =====================================================================
   3. メインビジュアル（PC 453:39763 / SP 363:25344）
   ---------------------------------------------------------------------
   写真はPCとSPでトリミングが別物なので <picture> で2枚持ち。
   __media は Ken Burns（16節）のはみ出しを切るための枠。
   ===================================================================== */

.rnw-care-mv {
  position: relative;
  height: 558px;
  background-color: var(--care-bg2);
}

.rnw-care-mv__media {
  overflow: hidden;
  width: 100%;
  height: 490px;
}

.rnw-care-mv__ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rnw-care-mv__panel {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 343px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-care-mv__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rnw-care-mv__en {
  color: var(--rnw-main);
  font-family: var(--care-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
}

/* Figma（363:25349）は「コンサルティングサービス」を1行で置いていて、
   その幅325pxがパネルの内側311pxを超えている（右の内側余白が実質2px）。
   折り返すとデザインと別物になるので、1行に固定して同じ見え方にする。 */
.rnw-care-mv__h1 {
  color: var(--rnw-text);
  font-family: var(--care-font-mincho);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-care-mv__catch {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

.rnw-care-mv__lead {
  color: var(--rnw-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   4. なぜ必要なのか（PC 453:39772 / SP 363:25352）
   ===================================================================== */

.rnw-care-why {
  padding: 56px 16px;
  background-color: var(--rnw-white);
}

.rnw-care-why__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.rnw-care-why__text {
  width: 100%;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-care-why__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}


/* --- カード（Figma 453:39778 / 453:39805） -----------------------------
   「なぜ必要なのか」と「導入メリット」で同じコンポーネント。
   前者は写真（未支給）＋本文、後者はアイコン80px＋本文。 */
.rnw-care-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--rnw-white);
  box-shadow: var(--care-shadow);
}

.rnw-care-card--bordered {
  border: 1px solid var(--rnw-border);   /* common/border #E2E2E2 */
  box-shadow: none;
}

.rnw-care-card--bordered .rnw-care-card__body { padding: 24px; }

/* 導入メリットのカード。アイコンが上・中央（Figma 453:39805 は px16 py24 gap24）。 */
.rnw-care-card--icon {
  align-items: center;
  gap: 24px;
  width: 300px;
  padding: 24px 16px;
}

.rnw-care-card__icon {
  width: 80px;
  height: 80px;
}

.rnw-care-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--rnw-white);
}

/* アイコンカードは外側で padding を持つので、本文側の padding は無し。 */
.rnw-care-card--icon .rnw-care-card__body { padding: 0; }

.rnw-care-card__title {
  color: var(--rnw-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-care-card__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: justify;
}


/* =====================================================================
   5. サービス概要（PC 453:39790 / SP 363:25408）
   ---------------------------------------------------------------------
   SPは 見出し→写真→本文→ボタン の縦積み。
   PCは写真を右に敷き、白 .9 のパネル（見出し＋本文＋ボタン）を左から重ねる（15節）。

   マークアップはPCに合わせて写真とパネルを分けているため、SPでは
   パネルを display:contents にして中身を親のフレックス項目に開き、
   order で 見出し→写真→本文→ボタン の並びに戻している。
   ===================================================================== */

.rnw-care-about {
  padding: 56px 16px;
  background-color: var(--care-bg2);
}

.rnw-care-about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.rnw-care-about__panel { display: contents; }

.rnw-care-about .rnw-care-h2  { order: 1; }
.rnw-care-about__ph           { order: 2; }
.rnw-care-about__text         { order: 3; }
.rnw-care-about__btns         { order: 4; }

.rnw-care-about__ph {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.rnw-care-about__text {
  width: 100%;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 本文→ボタンは 64px（Figma 363:25413 の gap32 ＋ 363:25416 の pt32）。
   親の gap 24 に 40 を足す。 */
.rnw-care-about__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  margin-top: 40px;
}


/* =====================================================================
   6. ページ内メニュー（SP 363:25371）
   ---------------------------------------------------------------------
   SPのみ。PC（453:39760）にフレームが無いのでPC幅では消す。
   6項目とも当ページ内のセクションへのアンカー。pending は無い。
   アイコンは common.css の icon_arrow_circle.svg を mask で流用する
   （Figma 363:25374 と同一グリフ。向きは下向きなので回転させない）。
   ===================================================================== */

.rnw-care-menu {
  padding: 56px 16px;
  background: var(--care-gra);
}

.rnw-care-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
}

.rnw-care-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
  box-shadow: var(--care-shadow);
}

.rnw-care-menu__label {
  color: var(--rnw-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  word-break: break-word;
}

.rnw-care-menu__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--rnw-text);          /* Figma実測 #444444 */
  -webkit-mask-image: url('../../img/icon_arrow_circle.svg');
          mask-image: url('../../img/icon_arrow_circle.svg');
}


/* =====================================================================
   7. 導入メリット（PC 453:39800 / SP 363:25419）
   ===================================================================== */

.rnw-care-merit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 16px 80px;
  background-color: var(--care-bg2);
}

.rnw-care-merit .rnw-care-slider { gap: 32px; }

/* トラックだけセクションの左右パディングを打ち消して端まで流す
   （Figma 363:25439 は w375 + px16）。 */
.rnw-care-merit__track {
  gap: 16px;
  margin: 0 -16px;
  padding: 0 16px;
}


/* =====================================================================
   8. サービス一覧（PC 453:39844 / SP 363:25480）
   ---------------------------------------------------------------------
   2ブロックとも構造・ボタン2本・下端の開閉バーまで同一。
   バーは front.js の [data-rnw-accordion-head] 契約で hidden と
   aria-expanded を入れ替える。
   ===================================================================== */

.rnw-care-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 16px;
  background: var(--care-gra);
}

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

.rnw-care-pcard {
  display: flex;
  flex-direction: column;
}

.rnw-care-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  border-radius: 8px 8px 0 0;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-care-pcard__title {
  color: var(--rnw-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-care-pcard__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 本文→ボタンは 56px（Figma 363:25493 の gap24 ＋ 363:25495 の pt32）。 */
.rnw-care-pcard__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-care-pcard__ph {
  order: -1;                    /* SPは本文の上（Figma 363:25492） */
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rnw-care-pcard__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

.rnw-care-pcard__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}

/* --- カード下端の開閉バー（Figma 363:25498 / PC 453:39863） ---
     閉：「詳細」＋下向き、開：「閉じる」＋上向き。
     ラベルはSPの「詳細」を採る（PCの「研修内容」は海外研修ページの流用）。 */
.rnw-care-pcard__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  background-color: var(--rnw-main);
  color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* Figmaは右向き矢印を90度回して下向きにしている（363:25501）。 */
.rnw-care-pcard__caret {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url('../../img/care-consulting/icon_arrow_filled.svg') no-repeat center / 12px 24px;
          mask: url('../../img/care-consulting/icon_arrow_filled.svg') no-repeat center / 12px 24px;
  transform: rotate(90deg);
}

.rnw-care-pcard__more-close { display: none; }

.rnw-care-pcard__more[aria-expanded="true"] .rnw-care-pcard__more-open  { display: none; }
.rnw-care-pcard__more[aria-expanded="true"] .rnw-care-pcard__more-close { display: inline; }

/* 開いたら矢印を上向きに返す */
.rnw-care-pcard__more[aria-expanded="true"] .rnw-care-pcard__caret {
  transform: rotate(-90deg);
}


/* =====================================================================
   9. 詳細パネル（SP 育児 363:25953 / SP 介護 363:25996 / PC 育児 453:40250）
   ---------------------------------------------------------------------
   開閉バーの下に開く。上角は無し、下角だけ8px（カードの下端）。
   育児は「サービスプラン」1ブロック、介護はジャンプメニュー＋2ブロック。
   ▼介護のPCデザインは未受領。育児側（453:40250）と同じ2カラムで組んでいる。
   ===================================================================== */

.rnw-care-pcard__detail {
  display: flex;
  flex-direction: column;
  border-radius: 0 0 8px 8px;
  background-color: var(--rnw-white);
}

/* display 指定はUA既定の [hidden]{display:none} より強いので、閉じた状態を明示する。 */
.rnw-care-pcard__detail[hidden] { display: none; }

/* パネル内のジャンプメニュー（Figma 363:26005）。
   見た目はページ内メニューと同じ部品で、幅だけ100%。 */
.rnw-care-subnav { padding: 24px 16px 0; }

.rnw-care-subnav__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rnw-care-subnav .rnw-care-menu__item { width: 100%; }

/* ブロック（Figma 363:26024 / 363:26073） */
.rnw-care-detail__block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 16px;
}

/* 育児のパネルはブロックが1つだけで、上余白が24px（Figma 363:25961）。 */
.rnw-care-detail__block--flush { padding-top: 24px; }

/* 「仕事と介護の両立セミナー」節だけ地色が common/bg。中の枠が白になる。 */
.rnw-care-detail__block--tinted {
  margin-bottom: 24px;
  background-color: var(--care-bg1);
}

.rnw-care-detail__title {
  color: var(--rnw-main);   /* pro/main #00778A。カード見出し（.rnw-care-dcard__title）と同じ */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-care-detail__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 項目の上の区切り線。Figmaは #626262 の 2-2 破線（Vector 14 ほか）。
   CSSの border: dashed は刻みが合わないので背景で描く。 */
.rnw-care-dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 24px;
}

.rnw-care-dcard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(to right, var(--care-gray) 0 2px, transparent 2px 4px);
}

/* 育児の「個別相談」だけ上に線が無い（Figma 363:25990 は区切りの外側）。 */
.rnw-care-dcard--noline { padding-top: 0; }
.rnw-care-dcard--noline::before { content: none; }

.rnw-care-dcard__title {
  color: var(--rnw-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

/* 見出し直下の注釈（Figma 363:26079） */
.rnw-care-dcard__note {
  color: var(--care-gray);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

/* タグ（Figma component: tag。白地＋pro/main の細枠） */
.rnw-care-dcard__tag {
  align-self: center;
  padding: 12px 5px;
  border: 0.745px solid var(--rnw-main);
  border-radius: 8px;
  background-color: var(--rnw-white);
  color: var(--rnw-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}

/* タグを持たないカード（Figma 363:25990「個別相談」）。
   Figmaでは左右のカードで写真の上端が揃っていて、見出しはその余白の中で
   上下中央に置かれている。タグのぶんの高さを見出し側で確保して合わせる。
     見出し1行 18px x 1.8  = 32.4
     カードの gap          = 24
     タグの箱（実測）      = 52     ← 下記の注意を参照
                             -------
                               108.4px
   ▼タグの高さは計算では出せない。このCSSの line-height:1.3 ではなく、
     旧 /professional/css/*.css の p 指定が効いて 1.8 相当で組まれるため、
     ブラウザ実測値を入れている。タグの文字サイズ・余白を変えたら測り直すこと。
   ▼写真に margin-top を足す形にしないこと。見出しが上に寄ってFigmaとズレる。 */
.rnw-care-dcard--notag .rnw-care-dcard__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 108.4px;
}

/* ------------------------------------
   お客様の声：絞り込みタグ（Figma 694:34945 / 694:35083）
   ---------------------------------------
   ▼ 2026-09-01 新設。帯の下に「すべて／従業員様／管理職様／人事部様」を置き、
     押されたタグと各カードの data-cat を突き合わせて出し分ける。
     JSは renewal/js/front.js の initColumnFilter を流用（トップのコラムと同じ契約）。
     選択中に付くクラス名だけ data-rnw-column-on で渡している。
   ▼JSが動かない環境では全カードが出たまま。絞り込みが効かないだけで崩れない。
------------------------------------ */
.rnw-care-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;              /* Figma実測 */
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-care-filter__btn {
  display: block;
  padding: 12px 20px;          /* Figma実測 py-12 / px-8＋内側11.926 */
  border: 0.745px solid var(--rnw-main);
  border-radius: 55.96px;      /* Figma実測 */
  background-color: var(--rnw-white);
  color: var(--rnw-main);
  font-family: inherit;
  font-size: 14px;             /* PCは18px（PC節で上書き） */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
}

/* 選択中（Figma 694:34946）。地色 pro/main・文字白・枠線白。 */
.rnw-care-filter__btn--on {
  border-color: var(--rnw-white);
  background-color: var(--rnw-main);
  color: var(--rnw-white);
}

/* カード下のカテゴリタグ（Figma 694:34984 ほか） */
.rnw-care-vcard__tag {
  align-self: flex-start;
  margin-top: auto;            /* カード下端に寄せる（Figma justify-between） */
  padding: 12px 20px;
  border: 0.745px solid var(--rnw-main);
  border-radius: 55.96px;
  background-color: var(--rnw-white);
  color: var(--rnw-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-care-dcard__ph {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* 見出し＋注釈＋タグのまとまり（セミナー節だけPCで横並びになる）。 */
.rnw-care-dcard__head,
.rnw-care-dcard__headtext {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-care-dcard__lead {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

/* リード枠だが太字ではないもの（363:26047 / 453:40202）。 */
.rnw-care-dcard__lead--normal {
  font-weight: 500;
  letter-spacing: 1.2px;
}

.rnw-care-dcard__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-care-dcard__list {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}
.rnw-care-dcard__list > li {
  list-style: disc;
  margin-left: 21px;
}

/* リード文と本文・箇条書きの間だけ 8px（Figma 363:25969 の gap）。 */
.rnw-care-dcard__lead + .rnw-care-dcard__text,
.rnw-care-dcard__lead + .rnw-care-dcard__list { margin-top: -16px; }

.rnw-care-dcard__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}

/* --- 枠付きの補足（「例えばこんな時に・・・」「利用例」「セミナー例」） --- */
.rnw-care-note {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background-color: var(--care-bg1);
}

/* 地色が common/bg の節（両立セミナー）では枠のほうが白になる。 */
.rnw-care-note--plain { background-color: var(--rnw-white); }

.rnw-care-note__title {
  color: var(--rnw-main);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-care-note__text,
.rnw-care-note__list {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}
.rnw-care-note__list > li {
  list-style: disc;
  margin-left: 21px;
}

/* 「セミナー例」だけ行頭記号が無い（Figma 363:26088） */
.rnw-care-note__list--nomark > li {
  list-style: none;
  margin-left: 0;
}


/* =====================================================================
   10. お客様の声（PC 453:39888 / SP 363:25522）
   ---------------------------------------------------------------------
   育児コンサルティング6枚・介護コンサルティング7枚の2スライダー。
   育児カードはユーザーアイコン、介護カードは写真枠（未支給）。
   ▼このセクションだけ familycare の VIPケアの色が入っている。
     指示があれば --care-vipcare-* を差し替えるだけで両方追従する。
   ===================================================================== */

.rnw-care-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80px;
  background-color: var(--rnw-white);
}

.rnw-care-voice__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}

.rnw-care-voice__ph {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* 白 .9 の帯。SPは写真に -40px 重ねる（Figma 363:25527）。 */
.rnw-care-voice__band {
  position: relative;
  width: 300px;
  margin-top: -40px;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-care-voice__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 0 16px;
}

.rnw-care-voice__lead {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* リード文はPCだけ帯の中、SPだけ帯の下（それぞれのデザイン通り）。 */
.rnw-care-voice__lead--pc { display: none; }

.rnw-care-voice__group {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* グループ見出しの帯（Figma 453:39898 / 453:40017） */
.rnw-care-voice__bar {
  padding: 16px 8px;
  background-color: var(--rnw-bg2);   /* pro/bg #D9F0F4 */
  color: var(--rnw-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-care-voice__group .rnw-care-slider { gap: 32px; }

/* トラックだけセクションの左右パディングを打ち消して端まで流す */
.rnw-care-voice__track {
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px;
}

.rnw-care-vcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 311px;
  padding: 16px;
  border: 1px solid var(--care-vipcare-main);   /* ▼要確認：vipcare/main */
  background-color: var(--rnw-white);
}

/* ▼ 2026-09-01 絞り込みで hidden を付けても display:flex が勝ってしまい消えないため、
     詳細パネル（746行）と同じく閉じた状態を明示する。 */
.rnw-care-vcard[hidden] { display: none; }

.rnw-care-vcard__ph {
  width: 100%;
  height: 200px;
}

/* 育児カードはアイコン80px・中央（Figma 453:39922） */
.rnw-care-vcard--icon { align-items: center; }

.rnw-care-vcard__icon {
  width: 80px;
  height: 80px;
}

.rnw-care-vcard--icon .rnw-care-vcard__title,
.rnw-care-vcard--icon .rnw-care-vcard__text { align-self: stretch; }

.rnw-care-vcard__title {
  color: var(--rnw-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-care-vcard__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   11. よくあるご質問（PC 453:40042 / SP 363:25676）
   ---------------------------------------------------------------------
   Q&A本体は renewal/faq.php のショートコード [professional_faq] が出力し、
   その見た目は部品CSS renewal/css/faq.css が持つ（クラスは .rnw-faq__*）。
   faq.css は faq.php が自動で読み込ませるので、ここではセクション枠だけ。
   ※海外研修は白地だが、こちらは #EEE8DE（実測で確認済み）。
   PC寸法は faq.css がまだ持っていないので 15節で当ページ配下だけ上書きする。
   ===================================================================== */

.rnw-care-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--care-bg2);
}


/* =====================================================================
   12. お問い合わせ（PC 453:40089 / SP 363:25722）
   ===================================================================== */

.rnw-care-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 56px 16px;
  background: var(--care-gra);
}

.rnw-care-contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
}

.rnw-care-contact__title {
  color: var(--rnw-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

.rnw-care-contact__btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}


/* =====================================================================
   13. ボタンのバリエーション
   ---------------------------------------------------------------------
   .rnw-btn（寸法・角丸・字送り）は common.css のものを使う。
   塗りは common/accent/red #912344（PC 453:39798 / SP 363:25417）。
   common.css の .rnw-btn--main は pro/main（teal）なので使わない。
   ===================================================================== */

.rnw-care-btn--red {
  border: 0.745px solid var(--rnw-white);   /* Figma実測 */
  background-color: var(--care-red);
  color: var(--rnw-white);
}
.rnw-care-btn--red .rnw-btn__icon { color: var(--rnw-white); }

.rnw-care-btn--outline {
  border: 2px solid var(--rnw-main);
  background-color: var(--rnw-white);
  color: var(--rnw-main);
}
.rnw-care-btn--outline .rnw-btn__icon { color: var(--rnw-main); }

/* 遷移先未確定。<span> で出しているのでカーソルだけ既定に戻す。 */
.rnw-care-btn--pending { cursor: default; }

/* .rnw-btn は共通で justify-content:space-between なので、
   2行になるラベルも矢印は右端に留まる。 */
.rnw-care .rnw-btn > span:first-child { line-height: 1.3; }


/* =====================================================================
   14. 追従CTA（SP 363:25736）
   ---------------------------------------------------------------------
   SPのみ。Figmaの drop-shadow は blur を標準偏差で持つため、
   box-shadow では2倍にする（7.344 → 14.688px）。
   ▼要確認：ラベルが海外研修ページと同一のまま。差し替え文言待ち。
   ===================================================================== */

.rnw-care-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* ドロワー(13)より上。開いている間もバーを出す（2026-09-16）。 */
  z-index: 14;
  display: flex;
  gap: 1.923px;
  background-color: var(--rnw-white);
  box-shadow: 0 -6.779px 14.688px rgba(0, 0, 0, 0.08);
}

.rnw-care-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;
  box-sizing: border-box;
  background-color: var(--rnw-bg2);  /* pro/bg #D9F0F4 */
  color: var(--care-cta-txt);
  font-family: var(--rnw-font-jp);
  font-size: 14px;                   /* SP/button/small */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

/* 「お問合せ」だけ common/accent/red の塗り（Figma 363:25743）。
   左2つは pro/bg #D9F0F4 のまま。 */
.rnw-care-cta__btn--main {
  border-left: 0.962px solid #A9A9A9;   /* Figma実測 */
  background-color: var(--care-red);
  color: var(--rnw-white);
}

/* 遷移先未確定 */
.rnw-care-cta__btn--pending { cursor: default; }


/* =====================================================================
   15. PC（Figma 453:39760）
   ---------------------------------------------------------------------
   デザインは1440幅。セクションは全幅で、中身だけ
     1280（サービス概要・サービス一覧・FAQ・お問い合わせ）
     1200（導入メリット）
     1120（なぜ必要なのか）
   に収まる。SPにあってPCに無いページ内メニューと追従CTAは消す。
   ===================================================================== */

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

  /* ---------- 0. 基本 ---------- */
  .rnw-care { padding-top: var(--rnw-header-h-pc); }

  /* PCデザインに無いブロック。SP側の指定はそのまま残している。 */
  .rnw-care-menu { display: none; }
  .rnw-care-cta  { display: none; }

  /* 改行・ラベルの出し分け（SP用を消し、PC用を出す） */
  .rnw-care-img--sp  { display: none; }
  .rnw-care-img--pc  { display: block; }

  .rnw-care-br-pc    { display: inline; }
  .rnw-care-br-sp    { display: none; }
  .rnw-care-swap--pc { display: inline; }
  .rnw-care-swap--sp { display: none; }


  /* ---------- 1. 見出し ----------
     PC/title/h2-sub = Lusitana 24、PC/title/h2 = Yu Mincho 42。 */
  .rnw-care-h2__en { font-size: 24px; }
  .rnw-care-h2__ja { font-size: 42px; }

  /* 白 .9 の帯は 640px・内側32px（Figma 453:39802 / 453:39846） */
  .rnw-care-h2--card {
    width: 640px;
    max-width: 100%;
    padding: 32px;
  }

  /* FAQの見出しはPCでは中央（Figma 453:40044） */
  .rnw-care-h2--left { text-align: center; }

  /* お問い合わせの見出しはPCでは帯なし（Figma 453:40092） */
  .rnw-care-h2--wide {
    width: 640px;
    max-width: 100%;
    height: auto;
    padding: 0 32px;
    background: none;
  }


  /* ---------- 2. メインビジュアル（Figma 453:39763） ----------
     写真は全幅1440×707。白 .9 のパネルは 640px を中央から右に置く。 */
  .rnw-care-mv { height: 707px; }

  .rnw-care-mv__media { height: 707px; }

  .rnw-care-mv__panel {
    top: auto;
    bottom: 80px;              /* Figma 694:34815：707 -（255.77+371.23） */
    left: auto;                /* ▼ 2026-09-27 left:50% だと 50%+640px が画面右を超え、~1280px未満で右切れ。右基準に変更（1440pxでは right:80px＝旧left:50%と同一） */
    right: 80px;
    max-width: calc(100% - 160px);
    width: 640px;
    gap: 20px;
    padding: 30px;
    transform: none;
  }

  .rnw-care-mv__head { gap: 8px; }

  .rnw-care-mv__en {
    font-size: 26px;
    letter-spacing: 6.87px;
  }

  .rnw-care-mv__h1 { font-size: 42px; }

  .rnw-care-mv__catch {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1.2px;
  }

  .rnw-care-mv__lead {
    font-size: 16px;
    font-weight: 500;
  }


  /* ---------- 3. なぜ必要なのか（Figma 453:39772） ----------
     見出し＋リードは1280、カードは1120（552×2＋gap16）。 */
  .rnw-care-why { padding: 80px 40px; }

  .rnw-care-why__inner {
    gap: 56px;
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* 見出し→リードは24px、リード→カードは56px（親の gap）。 */
  .rnw-care-why__text {
    margin-top: -32px;
    font-size: 16px;
  }

  .rnw-care-why__list {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }

  .rnw-care-card {
    width: 552px;
    max-width: calc(50% - 8px);
  }

  /* PC 694:34828 は内側40px。 */
  .rnw-care-card--bordered .rnw-care-card__body { padding: 40px; }

  .rnw-care-card__body { gap: 12px; }

  .rnw-care-card__title { font-size: 24px; }

  .rnw-care-card__text { font-size: 16px; }


  /* ---------- 4. サービス概要（Figma 453:39790） ----------
     写真1000×560を右に敷き、白 .9 のパネル640を左から重ねる。 */
  .rnw-care-about { padding: 80px 40px; }

  .rnw-care-about__inner {
    position: relative;
    display: block;
    width: 1280px;
    max-width: 100%;
    min-height: 640px;
    margin: 0 auto;
    padding-top: 134px;
  }

  .rnw-care-about__ph {
    position: absolute;
    top: 0;
    right: 0;
    width: 1000px;
    max-width: 78.125%;
    height: 560px;
  }

  /* PCではパネルを実体に戻す（SPは display:contents で開いている）。 */
  .rnw-care-about__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 640px;
    max-width: 100%;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .rnw-care-about__text { font-size: 16px; }

  /* PCは本文→ボタンも24px（Figma 453:39794 の gap）。 */
  .rnw-care-about__btns {
    margin-top: 0;
    gap: 24px;
  }

  .rnw-care-about__btns > .rnw-btn { width: 400px; max-width: 100%; }


  /* ---------- 5. 導入メリット（Figma 453:39800） ----------
     4カラム並列。PCには前後ボタンが無いのでスライダーの操作部を消す。
     帯はセクション上端に接する（Figma 453:39802 が y=0）。 */
  .rnw-care-merit {
    gap: 56px;
    padding: 0 40px 80px;
  }

  .rnw-care-merit .rnw-care-ctrl { display: none; }

  .rnw-care-merit .rnw-care-slider { gap: 0; }

  .rnw-care-merit__track {
    justify-content: center;
    gap: 16px;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
  }

  .rnw-care-card--icon {
    width: 288px;
    max-width: calc(25% - 12px);  /* ▼ 2026-08-30 18章で上書き（≤1024は2列） */
  }

  /* 見出しは2行ぶんの高さを確保して、4枚の本文の開始位置を揃える
     （Figma 453:39812 は h64 固定）。 */
  .rnw-care-card--icon .rnw-care-card__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
    font-size: 20px;
  }


  /* ---------- 6. サービス一覧（Figma 453:39844） ----------
     カードは1280。本文左（可変）＋写真右600×347の2カラム。 */
  .rnw-care-list {
    gap: 56px;
    padding: 120px 40px;
  }

  .rnw-care-list__items {
    gap: 56px;
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
  }

  .rnw-care-pcard__body {
    gap: 56px;
    padding: 56px;
    border-radius: 12px 12px 0 0;
  }

  .rnw-care-pcard__title {
    font-size: 24px;
    text-align: left;
  }

  .rnw-care-pcard__main {
    flex-direction: row;  /* ▼ 2026-08-30 18章で上書き（≤1024は縦積み） */
    align-items: stretch;
    gap: 56px;
  }

  .rnw-care-pcard__col {
    flex: 1 0 0;
    min-width: 0;
    justify-content: space-between;
    gap: 24px;
  }

  .rnw-care-pcard__ph {
    order: 0;
    flex: 0 0 auto;
    width: 600px;
    max-width: 50%;
    height: 347px;
  }

  .rnw-care-pcard__text { font-size: 16px; font-weight: 500; }

  /* PCはボタン2本を横並びで等分（Figma 453:39858） */
  .rnw-care-pcard__btns {
    flex-direction: row;
    gap: 24px;
    padding-top: 0;
  }
  .rnw-care-pcard__btns > * { flex: 1 0 0; min-width: 0; }

  .rnw-care-pcard__more {
    padding: 16px 8px;
    font-size: 20px;
    line-height: 1.8;
  }


  /* ---------- 7. 詳細パネル（Figma 育児 453:40250 / 介護 453:40151） ----------
     内側40px、2カラム（gap56）。区切り線は「行」の上に引く。 */
  .rnw-care-pcard__detail { border-radius: 0 0 12px 12px; }

  /* パネル内のジャンプメニューは3等分の横並び（Figma 453:40159）。 */
  .rnw-care-subnav { padding: 40px 40px 0; }

  .rnw-care-subnav__list {
    flex-direction: row;
    gap: 12px;
  }
  /* フレックス項目は <li>。幅を分けるのは <li> 側に指定する。 */
  .rnw-care-subnav__list > li {
    flex: 1 1 0;
    min-width: 0;
  }
  .rnw-care-subnav .rnw-care-menu__item {
    width: 100%;
    min-width: 0;
  }

  .rnw-care-detail__block {
    gap: 40px;
    padding: 40px;
  }
  .rnw-care-detail__block--flush { padding-top: 40px; }

  /* 地色の面は左右・下とも白い余白40pxで囲む。 */
  .rnw-care-detail__block--tinted { margin: 0 40px 40px; }

  .rnw-care-detail__title { font-size: 24px; }

  .rnw-care-detail__list {
    display: grid;  /* ▼ 2026-08-30 18章で上書き（≤1024は1列） */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    row-gap: 40px;
  }

  /* セミナー節は1件だけで、カード自体が中で2カラムに分かれる。 */
  .rnw-care-detail__list--single { display: block; }

  .rnw-care-dcard { padding-top: 40px; }

  /* 線は行の左端カードから1本だけ、2カラムぶん横断して引く。 */
  .rnw-care-dcard::before { width: calc(200% + 56px); }
  .rnw-care-dcard:nth-child(even)::before { content: none; }
  .rnw-care-dcard--noline { padding-top: 40px; }
  .rnw-care-detail__list--single .rnw-care-dcard::before { width: 100%; }

  .rnw-care-dcard__title { font-size: 20px; letter-spacing: 1.2px; }

  .rnw-care-dcard__tag { font-size: 18px; }

  /* PCは 見出し20x1.8=36 ＋ gap24 ＋ タグの箱（実測）59 ＝ 119px */
  .rnw-care-dcard--notag .rnw-care-dcard__title { min-height: 119px; }

  /* お客様の声の絞り込みタグはPCで18px（Figma 694:34946）。
     カード下のカテゴリタグは14pxのまま（Figma 694:34984）。 */
  .rnw-care-filter__btn { font-size: 18px; }

  .rnw-care-dcard__ph { height: 300px; }

  .rnw-care-dcard__lead { font-size: 16px; font-weight: 500; letter-spacing: 1.2px; }

  /* 写真→リード→箇条書きの間はPCでは12px（Figma 453:40266 の gap）。 */
  .rnw-care-dcard__ph + .rnw-care-dcard__lead,
  .rnw-care-dcard__ph + .rnw-care-dcard__text,
  .rnw-care-dcard__lead + .rnw-care-dcard__text,
  .rnw-care-dcard__lead + .rnw-care-dcard__list { margin-top: -12px; }

  .rnw-care-dcard__btns {
    flex-direction: row;
    gap: 24px;
    padding-top: 8px;
  }
  .rnw-care-dcard__btns > * { flex: 1 0 0; min-width: 0; }

  /* 「見守り・家族代行サービス」のボタン2本はSPのみ（PC 453:40215 に無い）。 */
  .rnw-care-dcard__btns--sponly { display: none; }


  /* --- セミナー節のカード（Figma 453:40233）---
     左に 見出し＋注釈＋タグ／本文／セミナー例、右に写真572×400。
     ボタン2本は下に横並びで、幅400ずつ中央寄せ。 */
  .rnw-care-dcard--seminar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 572px;  /* ▼ 2026-08-30 18章で上書き（≤1024は縦積み） */
    grid-template-areas:
      "head  photo"
      "text  photo"
      "note  photo"
      "btns  btns";
    align-items: start;
    column-gap: 24px;
    row-gap: 24px;
  }

  .rnw-care-dcard--seminar .rnw-care-dcard__head { grid-area: head; }
  .rnw-care-dcard--seminar .rnw-care-dcard__text { grid-area: text; }
  .rnw-care-dcard--seminar .rnw-care-note       { grid-area: note; }
  .rnw-care-dcard--seminar .rnw-care-dcard__ph  { grid-area: photo; height: 400px; }

  .rnw-care-dcard--seminar .rnw-care-dcard__btns {
    grid-area: btns;
    justify-content: center;
    gap: 40px;
    margin-top: 24px;
    padding-top: 0;
  }
  .rnw-care-dcard--seminar .rnw-care-dcard__btns > * {
    flex: 0 0 auto;
    width: 400px;
    max-width: calc(50% - 20px);
  }

  /* 見出し・注釈は左、タグは右（Figma 453:40235）。 */
  .rnw-care-dcard--seminar .rnw-care-dcard__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
  .rnw-care-dcard--seminar .rnw-care-dcard__headtext { gap: 12px; }
  .rnw-care-dcard--seminar .rnw-care-dcard__title { text-align: left; }
  .rnw-care-dcard--seminar .rnw-care-dcard__tag {
    flex: 0 0 auto;
    align-self: flex-start;
    white-space: nowrap;
  }

  /* 本文とリードの間の詰め（-12px）はこのカードでは効かせない。 */
  .rnw-care-dcard--seminar .rnw-care-dcard__text { margin-top: 0; }


  /* --- 枠付きの補足 ---
     「例えばこんな時に・・・」「利用例」はPCでは見出し左・本文右の横組み
     （Figma 453:40191 / 453:40224。内側16px、間24px）。
     「セミナー例」（453:40242）だけPCも縦積みのまま。 */
  .rnw-care-note {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    padding: 16px;
  }

  .rnw-care-note__title {
    flex: 0 0 auto;
    max-width: 150px;
    font-size: 16px;
    text-align: left;
  }

  .rnw-care-note__text,
  .rnw-care-note__list {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rnw-care-note--plain {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
  }
  .rnw-care-note--plain .rnw-care-note__title {
    max-width: none;
    text-align: center;
  }


  /* ---------- 8. お客様の声（Figma 453:39888） ----------
     見出しの帯は写真1440×400の中央に重ねる。 */
  .rnw-care-voice { padding-bottom: 80px; }

  .rnw-care-voice__head { margin-bottom: 56px; }

  .rnw-care-voice__ph { height: 400px; }

  .rnw-care-voice__band {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 640px;
    max-width: calc(100% - 80px);
    margin-top: 0;
    padding: 32px;
    transform: translate(-50%, -50%);
  }

  .rnw-care-voice__lead--pc {
    display: block;
    font-size: 16px;
    text-align: center;
  }
  .rnw-care-voice__lead--sp { display: none; }

  .rnw-care-voice__body {
    gap: 56px;
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
  }

  .rnw-care-voice__bar {
    padding: 16px 8px;
    font-size: 24px;
    line-height: 1.6;
  }

  .rnw-care-voice__track {
    gap: 12px;
    margin: 0 -40px;
    padding: 0 40px;
  }


  /* ---------- 9. よくあるご質問（Figma 453:40042） ----------
     部品CSS（renewal/css/faq.css）はPC寸法を持たないので、
     このページ配下に限って上書きする。faq.css 自体は触らない。 */
  .rnw-care-faq {
    gap: 56px;
    padding: 80px 40px;
  }

  .rnw-care-faq > * {
    width: 1280px;
    max-width: 100%;
    margin: 0 auto;
  }

  .rnw-care-faq .rnw-faq__tag    { font-size: 18px; }
  .rnw-care-faq .rnw-faq__qtext  { font-size: 16px; }
  .rnw-care-faq .rnw-faq__atext  { font-size: 16px; }


  /* ---------- 10. お問い合わせ（Figma 453:40089） ---------- */
  .rnw-care-contact {
    gap: 56px;
    padding: 56px 40px;
  }

  .rnw-care-contact__card {
    gap: 16px;
    width: 1280px;
    max-width: 100%;
    padding: 24px 16px;
  }

  .rnw-care-contact__title { font-size: 24px; }

  .rnw-care-contact__btns {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
  .rnw-care-contact__btns > * { width: 480px; max-width: calc(50% - 12px); }
}


/* =====================================================================
   16. 動き（デザイナー指示）
   ---------------------------------------------------------------------
   「グラデーションがふわっと動きます」「画像については、Key Burnsで動く想定です」
     ・MVの写真 … 20秒かけてゆっくり拡大→戻る
     ・pro/gra の面（ページ内メニュー／サービス一覧／お問い合わせ）…
       グラデーションの位置をゆっくり往復させる
   OS側で「視差効果を減らす」設定なら止める。
   ▼要確認：指示にノード指定が無かったための当てはめ。
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .rnw-care-mv__ph {
    transform-origin: center center;
    animation: rnw-care-kenburns 10s ease-in-out infinite alternate;  /* ▼ 2026-09-01 20s→10s（動きが遅いとの指摘） */
  }

  .rnw-care-menu,
  .rnw-care-list,
  .rnw-care-contact {
    background-size: 100% 160%;
    background-position: 50% 0%;
    animation: rnw-care-gra 16s ease-in-out infinite alternate;
  }
}

@keyframes rnw-care-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes rnw-care-gra {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}


/* =====================================================================
   17. スクロール追従の fade-in
   ---------------------------------------------------------------------
   「各見出し・コンテンツ（セクションの中身）に、スクロール追従で
   fade-inアニメーションが入ります。下から上にふわっと表示されます」への対応。
   16節の Ken Burns・グラデーションと同じデザイナー指示。

   クラスは renewal/js/front.js が付ける（対象の一覧もJS側の FADE_GROUPS）。
   JSが読めない・IntersectionObserver が無い・OS側で「視差効果を減らす」に
   なっている場合は何も付かず、本文はそのまま表示される。
   CSSに最初から opacity:0 を書かないのはこのため。

   16節のグラデーション往復と同じ要素に載ることがあるが、あちらは
   background-position、こちらは opacity と transform なので干渉しない。

   クラス名がトップの .front-fade と別なのは、下層ページのクラス接頭辞を
   rnw-care- に揃えているため。動きの値は front.css と同じ。
   ===================================================================== */

.rnw-care-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.rnw-care-fade--in {
  opacity: 1;
  transform: none;
}

/* OS側で「視差効果を減らす」設定のときは動かさない。
   JS側でも発火を止めているが、途中で設定を変えた場合の保険。 */
@media (prefers-reduced-motion: reduce) {
  .rnw-care-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =====================================================================
   18. 調整ログ（2026-08-30～）
   ---------------------------------------------------------------------
   ここより下は、既存章の後に日付順で追記する調整履歴。
   ■ ルール
     ・変更は原則ここに追記し、既存章側には「▼ 日付 18章で上書き」の目印を残す。
     ・SP/PCで値を分ける場合は必ず @media で包む（素の追記はSP・PC両方に勝ってしまう）。
     ・元が複合セレクタなら同等以上の詳細度で書く。
   ===================================================================== */

/* --- 2026-08-30 seminar：テキスト1fr＋写真572px固定でテキストが潰れる→タブレットは縦積み（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-care-dcard--seminar { display: flex; flex-direction: column; }
  .rnw-care-dcard--seminar .rnw-care-dcard__ph { height: auto; }
  /* 1列化で親の align-items:start が残り __btns が中身幅・左寄せ→右はみ出し。
     全幅に伸ばし（align-self:stretch）、ボタンは縮小許可（flex:0 1 auto; min-width:0）。
     幅・中央寄せ・max-width(50%-20px)はPC規則を継承し、常に2列で収まる。（2026-09-27） */
  .rnw-care-dcard--seminar .rnw-care-dcard__btns { align-self: stretch; }
  .rnw-care-dcard--seminar .rnw-care-dcard__btns > * { flex: 0 1 auto; min-width: 0; }
}

/* --- 2026-08-30 サービス概要 pcard：2カラム→縦積み、写真は全幅・高さauto（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-care-pcard__main { flex-direction: column; }
  .rnw-care-pcard__ph { width: 100%; max-width: none; height: auto; }
}

/* --- 2026-08-30 詳細パネル dcard：2列→縦１列、写真は高さauto。接続線は１列用に100%に戻す（PC上書き） --- */
/* PCの ::before は2列横断（200%+56）＋偶数非表示。１列では各カード100%に。nolineは引き続き非表示。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-care-detail__list { display: block; }
  .rnw-care-detail__list .rnw-care-dcard:not(.rnw-care-dcard--noline)::before { content: ""; width: 100%; }
  .rnw-care-dcard__ph { height: auto; }
}

/* --- 2026-08-30 導入メリット icon cards：4列→タブレットは2列（PC上書き） --- */
/* PCのtrackは flex nowrap の4列（スライダーではない）。折り返しに flex-wrap:wrap を追加して2列×2行に。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-care-merit__track { flex-wrap: wrap; }
  .rnw-care-card--icon { max-width: calc(50% - 8px); }
}

/* =====================================================================
   ドロワーを開いている間も追従CTAを前面に出す（2026-09-16）
   ---------------------------------------------------------------------
   バーの z-index をドロワー（13）より上げたぶん、ドロワーの中身が
   バーに隠れないよう下余白をバーの高さぶん足す。
   PC幅ではバーを出さないので元（pb-40）に戻す。
   ===================================================================== */
.rnw-menu__inner { padding-bottom: calc(40px + 48.51px); }

@media only screen and (min-width: 768px) {
  .rnw-menu__inner { padding-bottom: 40px; }
}

/* --- 2026-09-27 タブレット(768–1024)：画像の高さ固定を廃止し元画像比率で全体表示。
   pcard/dcard/dcard--seminar は既に auto 済み。ここでは残りの通常写真（voice / vcard）を auto に。
   ※ MV(.rnw-care-mv__ph=ヒーロー・707px基準) と about(.rnw-care-about__ph=絶対配置の装飾) は
     高さのみ外すと配置が崩れるため対象外。全体表示にする場合は配置側の対応が別途必要。 --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-care-voice__ph,
  .rnw-care-vcard__ph { height: auto; }
}

/* --- 2026-09-27 SP(≤767px)：画像の高さ固定(200px)を廃止し元画像比率で全体表示。
   対象は通常写真（pcard / dcard〈seminar含む・SPは共通のdcard__ph〉/ voice / vcard）。
   MV(.rnw-care-mv__ph=ヒーロー) と about(.rnw-care-about__ph=絶対配置の装飾) は対象外。 --- */
@media only screen and (max-width: 767px) {
  .rnw-care-pcard__ph,
  .rnw-care-dcard__ph,
  .rnw-care-voice__ph,
  .rnw-care-vcard__ph { height: auto; }
}

/* --- 2026-09-27 pcardのボタン：1015〜1240px は2カラムで本文列が狭く、
   お問い合わせ／資料請求（flex:1・等分縮小）が縮んで文字が折り返す→
   この帯だけボタンを縦積みにして各ボタンを列幅いっぱいにし、テキストを1行に保つ。 --- */
@media only screen and (min-width: 1015px) and (max-width: 1240px) {
  .rnw-care-pcard__btns { flex-direction: column; }
}