@charset "UTF-8";

/* =====================================================================
   ポピンズ familycare リニューアル
   ナニーサービス紹介ページ（/familycare/service-nanny/）専用CSS
   Figma: SP 214:44482 / PC 318:22315
   ---------------------------------------------------------------------
   - 固定ページ本文のHTMLに対応する。header.php で is_page('service-nanny')
     のときだけ renewal/css/common.css の後に読み込む（後勝ちで上書き可能）
   - 変数（--rnw-*）は common.css の :root / [data-property] を利用する
   - 旧CSS（/familycare/css/contents.css）と同居するため全クラスに rnw- を付与
   - 値は全てFigmaの実測値。px・%・letter-spacing はデザイン値をそのまま記載し、
     由来のnode-idをコメントに残す
   ===================================================================== */

/* =====================================================================
   0. ページ共通
   ===================================================================== */

/* 旧CSSは box-sizing を全体に指定していない（reset.css にも無い）ため、
   このページのスコープ内だけ border-box に揃える。
   これをしないと padding を含むFigmaの幅指定が合わなくなる。 */
.rnw-nanny,
.rnw-nanny *,
.rnw-nanny *::before,
.rnw-nanny *::after {
  box-sizing: border-box;
}

.rnw-nanny {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

/* display と height は詳細度0で当てる。要素セレクタを含む形だと、各画像の
   height:200px や display:none に勝ってしまう。 */
:where(.rnw-nanny) img {
  display: block;
  height: auto;
}

.rnw-nanny img { max-width: 100%; }

/* 絞り込みで hidden を付けた要素が flex/grid の display に負けないようにする */
.rnw-nanny [hidden] { display: none; }

/* 見出し・段落のブラウザ既定マージンを打ち消す。
   本番では旧 reset.css が効くが、固定ページ本文は管理画面プレビューなど
   reset.css の無い文脈で描画されることがあるため、このCSS単体でも
   Figmaどおりの余白になるようにしておく。
   ▼:where() で囲って詳細度を0にしている。これが無いと要素セレクタを含む分
     詳細度が勝ってしまい、下のコンポーネント側の padding（タグ類など）を
     打ち消してしまう。 */
:where(.rnw-nanny) :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

:where(.rnw-nanny) :where(ul, ol) {
  list-style: none;
}

/* --- 見出し h2（Figma コンポーネント "title/h2"）---
   ③以降のセクションで共通。英字サブ＋日本語見出しの2段。
   Figma上、中央寄せの回（ナニーサービスとは／特徴／コース／活用事例／お客様の声）と
   左寄せの回（ご利用までの流れ／お知らせ／よくある質問）があるため修飾子で分ける。 */
.rnw-nanny-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rnw-nanny-h2__en {
  color: var(--rnw-accent);          /* nanny/text/accent #BC326C */
  font-family: var(--rnw-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-nanny-h2__jp {
  color: var(--rnw-text);            /* common/text/bk #444444 */
  font-family: var(--rnw-font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-nanny-h2--center { text-align: center; }

/* PC/SPで改行位置が変わる箇所の出し分け（--pc はPCだけ折る／--sp はSPだけ折る） */
.rnw-nanny-br-pc { display: none; }

/* --- 本文テキスト（Figma トークン SP/text/defalut/medium）--- */
.rnw-nanny-text {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* =====================================================================
   1. メインビジュアル＋リード（Figma 214:44484）
   ===================================================================== */

.rnw-nanny-mv {
  padding-bottom: 16px;          /* section高さ558 − カード下端542 */
  background-color: var(--rnw-bg3);   /* Figma common/bg2 = #EEE8DE */
}

/* --- 写真エリア（Figma 13:3128 "image 1" / 375.317 × 490）---
   高さを固定せず aspect-ratio で持たせているのは、内側の写真の拡大率・位置を
   Figmaと同じ「%」で指定するため。固定高さ＋%指定だと375px以外の幅で
   写真の縦横比が崩れる。 */
.rnw-nanny-mv__media {
  position: relative;
  aspect-ratio: 375.317 / 490;
  overflow: hidden;
}

/* Figmaの配置値そのまま（拡大 227.71% / 位置 left -55.54%, top -12.96%）。
   ▼セレクタを2クラスにしているのは詳細度のため。上の `.rnw-nanny img`
     （要素セレクタを含むため詳細度が高い）の max-width:100% / height:auto に
     負けると、拡大率とクロップ位置が効かなくなる。 */
.rnw-nanny-mv__media .rnw-nanny-mv__img {
  /* position: absolute;
  top: -12.96%;
  left: -55.54%;
  width: 227.71%;
  height: 116.29%;
  max-width: none; */
  position: absolute;
  top: 70px;
  left: 0;
  width: 100%;
  height: auto;
  max-width: none;
}

/* 写真の上に黒10%（Figma: bg-[rgba(0,0,0,0.1)]） */
.rnw-nanny-mv__media::before {
  position: absolute;
  inset: 0;
  content: '';
  background-color: rgba(0, 0, 0, 0.1);
}

/* さらに紙テクスチャを重ねる（Figma: mix-blend-darken / opacity 40% /
   タイル 245.76 × 163.86px）。装飾のみのため aria から外す必要は無いが
   要素は持たせず擬似要素で描画する。 */
.rnw-nanny-mv__media::after {
  position: absolute;
  inset: 0;
  content: '';
  background-image: url('../../img/service-nanny/texture_paper.jpg');
  background-repeat: repeat;
  background-position: left top;
  background-size: 245.76px 163.86px;
  opacity: 0.4;
  mix-blend-mode: darken;
}

/* --- テキストカード（Figma 13:3129 / w343 top407 padding16 bg white 90%）---
   写真の下端に53pxかぶせる指定（top 407 − 写真高さ490 = −83px）。 */
.rnw-nanny-mv__card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: calc(100% - 32px);      /* 375 − 16 × 2 = 343 */
  max-width: 343px;
  margin: -83px auto 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

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

/* Figma 13:3131 Lusitana Regular 14 / lh1.3 / tracking3.7 / nanny/text/accent */
.rnw-nanny-mv__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
}

/* Figma 13:3132 Yu Mincho Pr6N D 26 / lh1.3 / tracking1.2 / common/text/bk */
.rnw-nanny-mv__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;           /* Figma: whitespace-nowrap */
}

/* Figma 13:3133 Zen Kaku Gothic New Bold 10 / lh1.8 / tracking1.2 */
.rnw-nanny-mv__lead {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* =====================================================================
   2. 支援バナー（Figma 214:44491）
   ---------------------------------------------------------------------
   カード内はFigmaと同じ絶対配置で組む（高さ100px固定のため）。
   ▼座標の扱い：Figmaの子要素座標はカードの外枠（border box）基準、CSSの
     absolute はボーダーの内側（padding box）基準。カードは2pxボーダーのため、
     Figmaの値から一律 2px を引いた値を指定している。
   ===================================================================== */

.rnw-nanny-support {
  padding: 24px 16px;                 /* section高さ264 = 24+100+16+100+24 */
  background-color: var(--rnw-bg3);
}

.rnw-nanny-support__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 343px;
  margin-inline: auto;
}

/* 下段2枚（Figma 13:3145 justify-between / 165px + 13px + 165px = 343） */
.rnw-nanny-support__row {
  display: flex;
  justify-content: space-between;
}

/* --- バナー共通（Figma 13:3136 / 13:3146 / 13:3154） --- */
.rnw-nanny-banner {
  position: relative;
  display: block;
  height: 100px;
  border: 2px solid var(--rnw-accent);         /* nanny/text/accent #BC326C */
  border-radius: 8px;
  background-color: var(--rnw-bg2);            /* nanny/bg #FAEEF1 */
  overflow: hidden;                            /* チケットイラストの右側をカット */
  text-decoration: none;
}

.rnw-nanny-banner--wide { width: 100%; }

/* 165px 固定だと狭幅端末で2枚が収まらないため、343px時に165pxとなる式で指定
   （343 ÷ 2 − 6.5 = 165 / gap13px相当） */
.rnw-nanny-banner--half {
  width: calc(50% - 6.5px);
  max-width: 165px;
}

/* --- 矢印（共通アイコン .rnw-icon--arrow を流用）---
   右向きへの回転は common.css 側で共通化しているため、ここでは指定しない
   （transform を再指定すると回転が上書きされて向きが狂う）。 */
.rnw-nanny-banner__arrow {
  position: absolute;
  top: 36.96px;
  right: 10px;
  width: 22px;
  height: 22px;
  color: var(--rnw-accent);
}

/* --- 上段：補助金制度（Figma 13:3136） --- */

/* Figma 13:3139 Zen Kaku Gothic New Bold 24 / lh1.3 / tracking0.4669 / common/accent/red */
.rnw-nanny-banner__title {
  position: absolute;
  top: 30.2px;
  left: 21.66px;
  transform: translateY(-50%);
  color: var(--rnw-link);                      /* #912344 */
  font-family: var(--rnw-font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.4669px;
  white-space: nowrap;
}

/* Figma 13:3138 10px / lh1.3 / tracking1.2 / common/text/bk
   ▼要確認：Figmaのフォント指定は Zen Kaku Gothic "Antique"。他は全て
     Zen Kaku Gothic New で、Antiqueは未読み込みのためNewで実装している。 */
.rnw-nanny-banner__note {
  position: absolute;
  top: 65.3px;
  left: 21.66px;
  transform: translateY(-50%);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* Figma 13:3140 チケットのイラスト（6.11度回転／右端は overflow で切れる） */
.rnw-nanny-banner__illust {
  position: absolute;
  top: 9.48px;
  left: 193.88px;
  width: 165.63px;
  height: 83.301px;
  transform: rotate(6.11deg);
}

/* --- 下段：2枚共通のテキスト --- */

/* Figma 13:3148 / 13:3162 / 13:3163 Medium 14 / lh1.3 / common/accent/red */
.rnw-nanny-banner__lead {
  position: absolute;
  left: 12px;
  transform: translateY(-50%);
  color: var(--rnw-link);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.4176px;
  white-space: nowrap;
}

/* Figma 13:3149 / 13:3161 Bold 20 / lh1.3 / common/accent/red */
.rnw-nanny-banner__name {
  position: absolute;
  left: 12px;
  transform: translateY(-50%);
  color: var(--rnw-link);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.4669px;
  white-space: nowrap;
}

/* 活用ガイド（Figma 13:3146）：2行リード＋中央寄せの見出し */
.rnw-nanny-banner--guide .rnw-nanny-banner__lead { top: 34.03px; }
.rnw-nanny-banner--guide .rnw-nanny-banner__name {
  top: 66.97px;
  left: 63px;
  transform: translate(-50%, -50%);            /* Figma: 中央基準の配置 */
}

/* 東京都ベビーシッター利用支援事業（Figma 13:3154）：見出し＋2行リード */
.rnw-nanny-banner--tokyo .rnw-nanny-banner__name { top: 29px; letter-spacing: 0.4176px; }
.rnw-nanny-banner--tokyo .rnw-nanny-banner__lead--1 { top: 53px; }
/* Figma上この行だけ tracking が 0.4669（他は0.4176）。デザイン値のまま。 */
.rnw-nanny-banner--tokyo .rnw-nanny-banner__lead--2 { top: 70px; letter-spacing: 0.4669px; }

/* --- ピックアップバナー（Figma 214:44521 CMS入稿枠） ---
   固定ページの入力欄にアップした画像を1枚敷く。灰色の背景と
   .rnw-nanny-banner__pickup-text は、画像を入れる前のプレースホルダ
   （renewal/pages/_preview-service-nanny.html）用に残している。 */
.rnw-nanny-banner--pickup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 入稿した画像をそのまま見せるため、共通バナーの枠線は出さない */
  border: 0;
  background-color: var(--rnw-caption);        /* common/text/gray #626262 */
}

/* 枠は343×100。比率の違う画像は中央基準で切り取る（余白で歪ませない） */
.rnw-nanny-banner__pickup-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rnw-nanny-banner__pickup-text {
  color: #FFFFFF;
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.4176px;
  text-align: center;
}

/* =====================================================================
   3. ナニーサービスとは？（Figma 214:44523）
   ===================================================================== */

.rnw-nanny-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 56px 16px;
  background-color: #FFFFFF;         /* common/white */
}

/* ロゴロックアップ（Figma 13:3166 276×120）。
   SPは見出しとの間が56px（body の gap32 ＋ この24px）。 */
.rnw-nanny-about__logo {
  width: 276px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px;
}

.rnw-nanny-about__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 343px;
}

/* SPは 見出し → 写真 → バッジ → 本文 の順。PCでは見出しと本文が1枚のカードに
   まとまるため、カードを display:contents で解いて order で並べ替える。 */
.rnw-nanny-about__card { display: contents; }

.rnw-nanny-about__card > .rnw-nanny-h2 { order: 1; }
.rnw-nanny-about__media { order: 2; }
.rnw-nanny-stats        { order: 3; }
.rnw-nanny-about__inner { order: 4; }

/* 写真（Figma 13:3193 高さ250／内側 13:3194 は 766.869×369.382 を左-8.43で配置）。
   MVと同じく aspect-ratio ＋ % 指定で、幅が変わっても比率が崩れないようにする。 */
.rnw-nanny-about__media {
  position: relative;
  aspect-ratio: 343 / 250;
  overflow: hidden;
}

.rnw-nanny-about__media .rnw-nanny-about__img {
  position: absolute;
  top: 0;
  left: -2.46%;                      /* -8.43 ÷ 343 */

  /* width: 223.58%;                    766.869 ÷ 343
  height: 147.75%;                   369.382 ÷ 250 */
  width: 100%;
  height: auto;

  max-width: none;
  object-fit: cover;
}

.rnw-nanny-about__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* --- 実績バッジ（Figma 214:44554 月桂冠＋数値の2枚） --- */
.rnw-nanny-stats {
  display: flex;
  gap: 12px;
  padding-inline: 16px;
}

.rnw-nanny-stat {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* 右側は同じアセットの左右反転（Figma 214:44570） */
.rnw-nanny-stat__laurel {
  flex: none;
  width: 31.664px;
  height: 75.998px;
}

.rnw-nanny-stat__laurel--r { transform: scaleX(-1); }

.rnw-nanny-stat__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--rnw-text);
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* TODO[フォント] Figma指定は MOBO-SemiBold（未導入）。共通の日本語フォントで代替 */
.rnw-nanny-stat__label {
  font-family: var(--rnw-font-jp);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.8;
}

.rnw-nanny-stat__value {
  display: flex;
  align-items: baseline;
  font-family: var(--rnw-font-jp);
  font-weight: 500;
  line-height: 1;
}

.rnw-nanny-stat__num  { font-size: 38px; }
.rnw-nanny-stat__unit { font-size: 31px; }
.rnw-nanny-stat__unit--jp { font-size: 24px; }

/* 数値の出典（Figma 694:22328） */
.rnw-nanny-stat__note {
  color: var(--rnw-caption);         /* common/text/gray #626262 */
  font-family: var(--rnw-font-jp);
  font-size: 6px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

/* =====================================================================
   4. ページ内メニュー（Figma 214:44612）
   ---------------------------------------------------------------------
   PCデザインには無いためSPのみ表示する。
   ===================================================================== */

.rnw-nanny-menu {
  padding: 56px 16px;
  background-image: linear-gradient(to bottom, #FCF7F8 0%, var(--rnw-main) 52.404%);
}

.rnw-nanny-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
}

/* Figma 214:44613 幅160 / padding16 / 角丸8 / drop-shadow */
.rnw-nanny-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-decoration: none;
  white-space: nowrap;
}

.rnw-nanny-menu__icon {
  flex: none;
  width: 14px;
  height: 14px;
  background-image: url('../../img/service-nanny/icon_menu_down.svg');
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

/* =====================================================================
   5. 横スライダー（共通パーツ）
   ---------------------------------------------------------------------
   Figma 13:3256（コントロール）＋ 13:3271（カード列）。特徴・活用事例・
   お客様の声で同じ構造が出てくるため共通化する。
   JSが無くても指でスワイプできるよう、素のスクロール＋scroll-snapで実装し、
   前後ボタンと進捗バーだけを renewal/js/service-nanny.js から制御する。
   ===================================================================== */

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

/* --- コントロール（Figma 13:3256 幅239 / 高さ24） --- */
.rnw-nanny-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin-inline: auto;
}

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

.rnw-nanny-slider__btn img { width: 24px; height: 24px; }

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

/* 端に到達したボタンは半透明（Figma 13:3257 opacity 50%） */
.rnw-nanny-slider__btn[disabled] { opacity: 0.5; cursor: default; }

/* --- 進捗バー（Figma 13:3263 160×1px ＋ 13:3264 65.341×3px r10） --- */
.rnw-nanny-slider__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-accent);
}

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

/* --- カード列（Figma 13:3271 gap16 / カード幅300） ---
   セクションの左右パディング16pxを打ち消して全幅スクロールにし、
   内側に同じ16pxを持たせて先頭カードの位置をFigmaと合わせる。 */
.rnw-nanny-slider__track {
  display: flex;
  gap: 16px;
  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-nanny-slider__track::-webkit-scrollbar { display: none; }

.rnw-nanny-slider__item {
  flex: 0 0 300px;
  scroll-snap-align: start;
}

/* =====================================================================
   6. ポピンズナニーサービスの特徴（Figma 214:44661）
   ===================================================================== */

.rnw-nanny-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 0 16px 80px;
  background-color: var(--rnw-bg2);  /* nanny/bg #FAEEF1 */
}

/* 写真は左右のパディングを無視した全幅（Figma 13:3252 幅375） */
.rnw-nanny-features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% + 32px);
  margin-inline: -16px;
}

.rnw-nanny-features__head-img {
  width: 100%;
  height: 200px;
  margin-bottom: -40px;              /* Figma 13:3252 mb -40：白カードを重ねる */
  object-fit: cover;
}

/* Figma 13:3253 幅300 / 上下padding24 / 白90% */
.rnw-nanny-features__head-card {
  position: relative;                /* 写真より前面に */
  width: 300px;
  max-width: calc(100% - 32px);
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

/* リード文はPCのみ（SPのFigmaには無い） */
.rnw-nanny-features__lead { display: none; }

/* --- カード（Figma 13:3272 / 13:3278 / 13:3285） --- */
.rnw-nanny-fcard {
  display: flex;
  flex-direction: column;
  /* Figma effect drop-shadow: offset(0,4) / radius 56 / #00000014 */
  box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
}

.rnw-nanny-fcard__media {
  width: 100%;
  height: 200px;
  background-color: #FFFFFF;
  object-fit: cover;
}

/* 2枚目は白地の上にイラストを乗せる（Figma 13:3280 181×182 / left59.5 top11） */
.rnw-nanny-fcard__media--illust {
  position: relative;
  overflow: hidden;
}

.rnw-nanny-fcard__illust {
  position: absolute;
  top: 11px;
  left: 50%;                    /* 固定59.5pxをやめ、カード幅に依らず中央に */
  transform: translateX(-50%);
  width: 181px;
  height: 182px;
  mix-blend-mode: darken;
}

.rnw-nanny-fcard__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: #FFFFFF;
}

/* Figma トークン SP/title/h3 */
.rnw-nanny-fcard__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-nanny-fcard__text { text-align: justify; }

/* =====================================================================
   7. コース（Figma 214:44704）
   ---------------------------------------------------------------------
   セクション背景は白。プレミアムコースのブロックだけ #EEE8DE の角丸パネル。
   背景色は書き出し画像から実測して確認済み。
   ▼Figma上、セクション直下に Carbon Design System の既定ボタン
     （13:3297 "Primary Action" 青 #0F62FE / Roboto）が紛れているが、
     デザインの一部ではないため実装していない。
   ===================================================================== */

.rnw-nanny-course {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 80px;
  background-color: #FFFFFF;
}

/* --- 見出し（Figma 13:3293。写真の上に白カードを40px重ねる） --- */
.rnw-nanny-course__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rnw-nanny-course__head-media {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 200;
  margin-bottom: -40px;
  overflow: hidden;
}

.rnw-nanny-course__head-media .rnw-nanny-course__head-img {
  position: absolute;
  top: -13.85%;
  left: -2.27%;
  width: 104.54%;
  height: 130.7%;
  max-width: none;
  object-fit: cover;
}

/* Figma 13:3295 幅300 / 高さ126 / 白90% */
.rnw-nanny-course__head-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  max-width: calc(100% - 32px);
  height: 126px;
  background-color: rgba(255, 255, 255, 0.9);
}

/* リード文はPCのみ（SPのFigmaには無い） */
.rnw-nanny-course__head-lead { display: none; }

/* --- プレミアムコース パネル（Figma 13:3298 x16-359 / 角丸8 / #EEE8DE） --- */
.rnw-nanny-course__premium {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-inline: 16px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--rnw-bg3);
}

.rnw-nanny-course__block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Figma 13:3301 白50%の帯（コース名） */
.rnw-nanny-course__label {
  padding: 20px 0;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* Figma 13:3302 Lusitana 14 / common/accent/gold2 */
.rnw-nanny-course__label-en {
  display: block;
  color: var(--rnw-gold2);
  font-family: var(--rnw-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

/* Figma 13:3303 トークン SP/title/h3 */
.rnw-nanny-course__label-jp {
  display: block;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

/* Figma 13:3307 トークン SP/text/large/medium */
.rnw-nanny-course__catch {
  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-nanny-course__lead {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

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

.rnw-nanny-course__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* --- タグ（3種：金枠・ピンク枠・ピンク枠の等幅） --- */
.rnw-nanny-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

/* Figma 13:3311 プレミアムの特徴タグ */
.rnw-nanny-tag--gold {
  border: 0.745px solid var(--rnw-gold);
  color: var(--rnw-gold2);
}

/* Figma 13:3396 スタンダードの特徴タグ */
.rnw-nanny-tag--pink {
  border: 0.745px solid var(--rnw-main);
  color: var(--rnw-accent);
}

/* Figma 13:3354 ほか サービス一覧タグ（幅146・2列・gap3・行間1.8） */
.rnw-nanny-tags--grid { gap: 3px; }

.rnw-nanny-tag--wide {
  width: 146px;
  max-width: calc(50% - 1.5px);
  border: 1px solid var(--rnw-main);
  color: var(--rnw-accent);
  line-height: 1.8;
  letter-spacing: 0.168px;
  text-align: center;
}

/* --- Point 01-03（Figma 214:44730） --- */
.rnw-nanny-points {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rnw-nanny-point {
  display: flex;
  flex-direction: column;
}

.rnw-nanny-point__photo {
  width: 100%;
  height: 230px;
  margin-bottom: -80px;              /* Figma 214:44731 mb -57 */
  object-fit: cover;
}

/* Figma 214:44733 全幅 / padding16 / 白90% */
.rnw-nanny-point__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-nanny-point__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Figma 13:3325 トークン SP/text/point（Lusitana 32 / lh1） */
.rnw-nanny-point__num {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
  white-space: pre;                  /* Figma上 "Point  01" と空白2つ */
}

/* Figma 13:3326 トークン SP/text/large/bold（tracking 0.216） */
.rnw-nanny-point__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
}

/* --- その他サービス（Figma 13:3350 白カード） --- */
.rnw-nanny-course__services {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Figma 694:69361 はカード幅311・内寸295で、タグ2列（146+3+146）がぴったり収まる。
     幅を絞らないと内寸が広がり、右側だけが余る。 */
  max-width: 311px;
  margin-inline: auto;
  padding: 16px 8px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

/* Figma 13:3352 / 13:3393 見出し（18px / lh1.8 / tracking0.216 / 中央） */
.rnw-nanny-course__subtitle {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

/* --- スタンダードコース（Figma 13:3387） --- */
.rnw-nanny-course__standard {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-inline: 16px;
}

.rnw-nanny-course__standard-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Figma 13:3389 nanny/bg のカード */
.rnw-nanny-course__card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--rnw-bg2);
}

.rnw-nanny-course__card-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-nanny-course__card-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figma 13:3394 本文（両端揃え） */
.rnw-nanny-course__justify { text-align: justify; }

/* Figma 13:3402 注釈（common/text/gray / Bold14 / tracking0.168）
   SP確定版（694:69398 配下）には無いため、SPでは出さない。 */
.rnw-nanny-course__note {
  display: none;
  color: var(--rnw-caption);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

.rnw-nanny-course__note a {
  color: var(--rnw-link);
  text-decoration: underline;
}

/* Figma 13:3403 法人のお客様カード（白地＋#444の1px枠） */
.rnw-nanny-course__corp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 24px 16px;
  border: 1px solid var(--rnw-text);
  border-radius: 8px;
  background-color: #FFFFFF;
}

.rnw-nanny-course__corp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 見出しは中央、本文は左揃え（Figma 13:3406 は min-w-full ＋ 揃え指定なし） */
.rnw-nanny-course__corp-head p { width: 100%; }

/* Figma 13:3405 トークン SP/title/h3 */
.rnw-nanny-course__corp-title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

/* --- ボタンの派生（共通 .rnw-btn を土台に、このページ固有の差分だけ） --- */

/* Figma 13:3400 / 13:3407：枠線と文字が common/accent/red のsubCTA */
.rnw-nanny-btn--red {
  border-color: var(--rnw-link);
  color: var(--rnw-link);
}

.rnw-nanny-btn--red .rnw-btn__icon { color: var(--rnw-link); }

/* Figma 13:3317 のみ行間1.8・tracking0.216（同じ文言の 13:3386 は 1.3/1.2）。
   ▼Figma側の不統一だが、デザイン値どおりに実装している。 */
.rnw-nanny-btn--loose {
  line-height: 1.8;
  letter-spacing: 0.216px;
}

/* =====================================================================
   8. 活用事例（Figma 214:44815）
   ---------------------------------------------------------------------
   背景のグラデーションはフッターのお問い合わせと同値のため、
   common.css の --rnw-contact-gra をそのまま使う。
   ===================================================================== */

.rnw-nanny-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 16px 80px;
  background-image: var(--rnw-contact-gra);   /* 白→nanny/main 52.404% */
}

/* --- 見出し（写真2枚を横並び＋白カードを40px重ね） --- */
.rnw-nanny-shead {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% + 32px);
  margin-inline: -16px;
}

.rnw-nanny-shead__media {
  display: flex;
  width: 100%;
  margin-bottom: -40px;
}

.rnw-nanny-shead__frame {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 200px;
  overflow: hidden;
}

.rnw-nanny-shead__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左の写真だけ拡大＋左寄せのトリミング（Figma 13:3412） */
.rnw-nanny-shead__frame--crop img {
  position: absolute;
  top: 0;
  left: -17.64%;
  width: 159.98%;
  max-width: none;
}

/* SPは白カードが見出しだけを囲み、リード文はその下（セクション地色の上）に置く。
   PCでは白カードが見出しとリード文の両方を囲む。 */
.rnw-nanny-shead__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-inline: 16px;
}

.rnw-nanny-shead__card > .rnw-nanny-h2 {
  justify-content: center;
  width: 300px;
  max-width: 100%;
  height: 126px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-nanny-shead__lead { width: 100%; }

.rnw-nanny-case__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* --- 絞り込みタグ（Figma 214:44825） --- */
.rnw-nanny-ftags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  list-style: none;
}

.rnw-nanny-ftag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 19.926px;            /* Figma: 外側8px＋内側11.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;
}

/* 選択中（Figma 13:3419「すべて」） */
.rnw-nanny-ftag--current {
  border-color: #FFFFFF;
  background-color: var(--rnw-accent);
  color: #FFFFFF;
}

/* --- カテゴリごとの行（Figma 214:44846） ---
   SPはカードごとの帯、PCは行ごとの帯で見せるため、両方をマークアップに持たせて
   表示側で出し分ける。 */
.rnw-nanny-case__groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.rnw-nanny-cgroup__head { display: none; }

/* --- 事例カード（Figma 214:44848 幅311） --- */
.rnw-nanny-cgroup .rnw-nanny-slider__item { flex-basis: 311px; }

.rnw-nanny-ccard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rnw-main);
  border-radius: 8px;
  background-color: #FFFFFF;
  overflow: hidden;
}

/* Figma 214:44849 見出し帯 */
.rnw-nanny-ccard__head {
  padding: 17px 27px;
  border-bottom: 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: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

.rnw-nanny-ccard__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px;
}

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

/* ▼TODO: 写真未支給のカード（Figmaは「Poppins Nanny」の仮画像） */
.rnw-nanny-ccard__media--empty {
  background-color: var(--rnw-bg2);
  background-image: url('../../img/service-nanny/logo_nanny_service.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% auto;
}

.rnw-nanny-ccard__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Figma 214:44855 トークン SP/text/defalut/medium */
.rnw-nanny-ccard__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* Figma トークン SP/text/defalut/thin（本文だけ Regular） */
.rnw-nanny-ccard__text .rnw-nanny-text,
.rnw-nanny-ccard__note {
  font-weight: 400;
}

.rnw-nanny-ccard__note {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* --- 下部ボタン（Figma 13:3466 gap10） --- */
.rnw-nanny-case__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* =====================================================================
   9. お客様の声
   ===================================================================== */

.rnw-nanny-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 16px 80px;
  background-color: #FFFFFF;
}

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

/* 新デザインのカードは帯・タイトル・本文のみ（写真と地域タグは出さない） */
.rnw-nanny-voice .rnw-voice-card__media,
.rnw-nanny-voice .rnw-voice-card__tags { display: none; }

/* =====================================================================
   10. ご利用までの流れ（Figma 214:44998）
   ===================================================================== */

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

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

.rnw-nanny-flow__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 縦の矢印（Figma 13:3511 left37 / top53 / 11.547×426.5）。
   ▼原稿が変わって各項目の高さが変わると矢印の終点がずれるため、
     原稿確定後に長さを見直すこと（Figmaの実寸をそのまま入れている）。 */
.rnw-nanny-flow__line {
  position: absolute;
  top: 53px;
  left: 37px;                        /* 項目のpadding12 ＋ 丸50の半径25 */
  width: 11.547px;
  height: 426.5px;
  transform: translateX(-50%);
}

/* Figma 13:3512 Item */
.rnw-nanny-flow__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  border-radius: 8px;
  background-color: #FFFFFF;
  overflow: hidden;
}

/* Figma 13:3513 丸（common/bg #FAF7F2） */
.rnw-nanny-flow__num {
  display: flex;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 31.737px;
  background-color: var(--rnw-bg1);
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
}

.rnw-nanny-flow__body {
  flex: 1 0 0;
  min-width: 0;
}

/* Figma 13:3517 トークン SP/text/large/bold（tracking 0.216） */
.rnw-nanny-flow__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
}

/* Figma 13:3544 トークン common/text/caption */
.rnw-nanny-flow__note {
  color: var(--rnw-caption);
  font-family: var(--rnw-font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

/* =====================================================================
   11. お知らせ（Figma 214:45037）
   ---------------------------------------------------------------------
   一覧は [display_news cats="nanny" count=3]（旧デザイン）に差し替え。
   ===================================================================== */

.rnw-nanny-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  padding: 80px 16px;
  background-color: #FFFFFF;
}

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

/* SPは 見出し → 一覧 → ボタン の縦並び。PCは見出しの右にボタンを寄せる。 */

/* =====================================================================
   12. よくあるご質問（Figma 214:45076）
   ---------------------------------------------------------------------
   開閉は <details>/<summary> で実装（JS不要。JSが動かない環境でも開ける）。
   ▼Figmaの1問目だけデザインシステムのフォント（Lusitana / Zen Kaku Gothic New
     14px lh1.8）で、2問目以降は Times New Roman / Noto Sans JP lh1.6 になって
     いる。後者はコンポーネント未適用による地のフォントと判断し、全問を
     1問目の指定に揃えている。
   ===================================================================== */

.rnw-nanny-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--rnw-bg3);  /* common/bg2 #EEE8DE */
}

.rnw-nanny-faq__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.rnw-nanny-faq__tags { gap: 12px; }  /* Figma 214:45082 */

/* SPのFAQカテゴリは文字数に合わせた幅で、収まる数だけ横に並べる。 */
@media only screen and (max-width: 767px) {
  .rnw-nanny .rnw-nanny-faq__tags {
    gap: 8px;
  }

  .rnw-nanny .rnw-nanny-faq__tags > li {
    min-width: 0;
    max-width: 100%;
  }

  .rnw-nanny .rnw-nanny-faq__tags .rnw-nanny-ftag {
    max-width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.6px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* 下部の「他の質問カテゴリを見る」から選んだときの戻り先（renewal/js/service-nanny.js）。
   固定ヘッダーに潜らないよう、common.css の section[id] と同じ余白を持たせる。 */
.rnw-nanny-faq__list {
  width: 100%;
  scroll-margin-top: calc(var(--rnw-header-h-sp) + 16px);
}

/* --- 他の質問カテゴリを見る（Q&Aの下。SPのみ／PCデザインには無い） --- */
.rnw-nanny-faq__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

.rnw-nanny-faq__more-title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}

/* チップは上部の絞り込みと同じ .rnw-nanny-ftag。中央寄せだけ差し替える */
.rnw-nanny-faq__more-tags {
  justify-content: center;
  gap: 8px;
}

/* Q行（Figma 13:3596 py20 / 下線 #444 / gap10） */
.rnw-nanny-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rnw-text);
  cursor: pointer;
  list-style: none;
}

.rnw-nanny-faq__q::-webkit-details-marker { display: none; }

/* Q. / A. の記号（Lusitana Bold 24 / lh36px） */
.rnw-nanny-faq__mark {
  flex: 0 0 auto;
  color: var(--rnw-text);
  font-family: var(--rnw-font-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

/* Figma 13:3599 トークン SP/text/defalut/bold（tracking 0.168） */
.rnw-nanny-faq__qtext {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

/* 開閉アイコン（Figma 13:3607 ＝ 13px の＋ / 開いている時は横線のみ） */
.rnw-nanny-faq__toggle {
  display: flex;
  flex: 0 0 13px;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

.rnw-nanny-faq__icon--minus { transform: rotate(90deg); }   /* Figma 13:3600 と同じ */

.rnw-nanny-faq__item[open] .rnw-nanny-faq__icon--plus  { display: none; }
.rnw-nanny-faq__item:not([open]) .rnw-nanny-faq__icon--minus { display: none; }

/* A行（Figma 13:3601 上に20px / 左インデント40px / 下線 #444） */
.rnw-nanny-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 0 0 20px 40px;
  border-bottom: 1px solid var(--rnw-text);
}

.rnw-nanny-faq__atext {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* =====================================================================
   13. 追従CTA（Figma 214:45127）
   ---------------------------------------------------------------------
   画面下部に固定表示。Figma上のコンポーネントは0.962倍で配置されているため
   padding等が端数になっている（33px→31.731px 等）。見た目を合わせるため
   表示されている実寸のまま記載している。
   影は Figmaトークン dp-follow（0 -10px 24px #00000014）を使用。
   ===================================================================== */

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

.rnw-nanny-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.rnw-nanny-cta__btn--contact {
  background-color: var(--rnw-main);  /* nanny/main #F6BECA */
  color: var(--rnw-text);
}

.rnw-nanny-cta__btn--join {
  border-left: 0.962px solid #FFFFFF;
  background-color: var(--rnw-accent);
  color: #FFFFFF;
}

/* =====================================================================
   14. レスポンシブ（旧CSSと同じ 767/768 で分岐）
   ===================================================================== */

/* ---------- PC（Figma 694:22265）----------
   1440px幅・コンテンツ1280px・左右余白80pxで設計されている。
   余白は狭い画面でも詰まるよう clamp で可変にする。
   ------------------------------------------------------------------ */
@media only screen and (min-width: 768px) {

  .rnw-nanny {
    --pc-pad: clamp(24px, 5.56vw, 80px);
    --pc-max: 1280px;
  }

  /* --- 見出し・本文（Figma PC/title/h2・PC/text/dafalut/medium） --- */
  .rnw-nanny-h2 { gap: 8px; }
  .rnw-nanny-h2__en { font-size: 24px; }
  .rnw-nanny-h2__jp { font-size: 42px; }
  .rnw-nanny-text  { font-size: 16px; }

  /* PCだけの改行（Figma 694:22442 プレミアムのリード4行 / 694:22529 法人のリード2行） */
  .rnw-nanny-br-pc { display: inline; }

  /* SPだけの改行（Figma 694:22401 見出しは「ポピンズ／ナニーサービスの特徴」の2行） */
  .rnw-nanny-br-sp { display: none; }

  /* --- ボタン（Figma 318:22478 幅480。padding・字送りは common.css と同値） --- */
  .rnw-nanny .rnw-btn {
    width: 480px;
    max-width: 100%;
  }

  /* SPで折っている文言はPCでは1行に戻す */
  .rnw-nanny .rnw-btn br { display: none; }

  /* SPだけの要素 */
  .rnw-nanny-menu,
  .rnw-nanny-cta { display: none; }

  /* PCだけの要素 */
  .rnw-nanny-features__lead,
  .rnw-nanny-course__head-lead { display: block; }

  /* ---------- 1. メインビジュアル（Figma 318:22317） ---------- */
  .rnw-nanny-mv {
    position: relative;
    padding-bottom: 0;
  }

  .rnw-nanny-mv__media { aspect-ratio: 1440 / 707; }

  /* PCフレームには黒10%とテクスチャの重ねが無い */
  .rnw-nanny-mv__media::before,
  .rnw-nanny-mv__media::after { display: none; }

  .rnw-nanny-mv__media .rnw-nanny-mv__img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Figma 318:22320 右寄せ640px / 白80% / padding30 */
  .rnw-nanny-mv__card {
    position: absolute;
    right: var(--pc-pad);
    bottom: 9.9%;                    /* 70 ÷ 707 */
    gap: 20px;
    width: min(640px, 50%);
    max-width: none;
    margin: 0;
    padding: 30px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .rnw-nanny-mv__head { gap: 7px; }
  .rnw-nanny-mv__en    { font-size: 26px; letter-spacing: 6.87px; }
  .rnw-nanny-mv__title { font-size: 42px; letter-spacing: 1.2px; }   /* PC/title/h1 */
  .rnw-nanny-mv__lead  { font-size: 16px; letter-spacing: 1.2px; }   /* PC/text/dafalut/medium */

  /* ---------- 2. 支援バナー（Figma 318:22385） ---------- */
  .rnw-nanny-support { padding: 24px var(--pc-pad); }

  /* Figmaは343px×4枚（合計1420）で1280からはみ出すため、4等分に収める */
  .rnw-nanny-support__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: var(--pc-max);
  }

  .rnw-nanny-support__row {
    display: contents;               /* 下段2枚を親グリッドの列に流す */
  }

  .rnw-nanny-banner--half {
    width: 100%;
    max-width: none;
  }

  /* ---------- 3. ナニーサービスとは？（Figma 694:22305） ----------
     写真とロゴを1行目に重ね、2行目のカードをマイナスマージンで
     写真に食い込ませる。値は全て「幅に対する％」なので画面幅が変わっても
     Figmaどおりの比率で保たれる。実績バッジはカードの中に入る。 */
  .rnw-nanny-about {
    display: block;
    padding: 80px var(--pc-pad);
  }

  .rnw-nanny-about__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  /* ロゴロックアップ（Figma 318:22479 x70 / y40） */
  .rnw-nanny-about__logo {
    grid-area: 1 / 1;
    z-index: 2;
    justify-self: start;
    align-self: start;
    margin: 40px 0 0 70px;
  }

  /* 写真は右寄せ（Figma 694:22308 1000×700） */
  .rnw-nanny-about__media {
    grid-area: 1 / 1;
    justify-self: end;
    width: 78.125%;                  /* 1000 ÷ 1280 */
    aspect-ratio: 1000 / 700;
  }

  .rnw-nanny-about__media .rnw-nanny-about__img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 本文カード（Figma 694:22310 左寄せ640px / 白80% / padding32）。
     上に -35.47%（＝写真下端54.69% − カード上端19.22%）ずらす。 */
  .rnw-nanny-about__card {
    grid-area: 2 / 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-self: start;
    width: 50%;                      /* 640 ÷ 1280 */
    margin-top: -35.47%;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .rnw-nanny-about__inner { gap: 24px; }

  /* 実績バッジ（Figma 694:22312 見出しの下・横並び・中央） */
  .rnw-nanny-stats {
    justify-content: center;
    padding-inline: 0;
  }

  .rnw-nanny-stat { flex: 0 0 auto; }

  /* 創業だけ 数値 → ラベル の順（Figma 694:22352） */
  .rnw-nanny-stat--founded .rnw-nanny-stat__body { flex-direction: column-reverse; }
  .rnw-nanny-stat--founded .rnw-nanny-stat__num  { font-size: 35px; letter-spacing: -0.8px; }
  .rnw-nanny-stat--founded .rnw-nanny-stat__unit--jp { font-size: 21px; }

  /* ---------- 5. 横スライダー（PCは行内に収まる分をグリッドで並べる） ---------- */
  .rnw-nanny-slider__ctrl { width: 400px; }
  .rnw-nanny-slider__bar  { width: 260px; }

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

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

  /* ---------- 6. 特徴（Figma 318:22504） ---------- */
  .rnw-nanny-features {
    display: block;
    padding: 120px var(--pc-pad);
  }

  /* 見出しは左に写真・右にカード（Figma 318:22507） */
  .rnw-nanny-features__head {
    position: relative;
    display: block;
    width: 100%;
    max-width: var(--pc-max);
    margin: 0 auto 56px;
    aspect-ratio: 1280 / 560;
  }

  .rnw-nanny-features__head-img {
    width: 78.125%;                  /* 1000 ÷ 1280 */
    height: 100%;
    margin-bottom: 0;
  }

  .rnw-nanny-features__head-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 50%;                      /* 640 ÷ 1280 */
    max-width: none;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .rnw-nanny-features__lead { text-align: justify; }

  /* カード3枚（Figma 318:22513 416×3 / gap16） */
  .rnw-nanny-features .rnw-nanny-slider { gap: 0; }

  .rnw-nanny-features .rnw-nanny-slider__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: var(--pc-max);
    margin-inline: auto;
    padding-inline: 0;
    overflow: visible;
  }

  .rnw-nanny-features .rnw-nanny-slider__item { flex: none; }

  .rnw-nanny-fcard__body { gap: 12px; }
  .rnw-nanny-fcard__title { font-size: 24px; }
  .rnw-nanny-fcard__text  { font-size: 16px; }

  /* ---------- 7. コース（Figma 318:22534） ---------- */
  .rnw-nanny-course {
    gap: 0;
    padding: 120px 0;
  }

  /* 見出しは右に写真・左にテキスト（Figma 318:22536） */
  .rnw-nanny-course__head {
    position: relative;
    display: block;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin: 0 auto 56px;
    aspect-ratio: 1280 / 560;
  }

  .rnw-nanny-course__head-media {
    position: absolute;
    top: 0;
    right: 0;
    width: 78.125%;
    height: 100%;
    aspect-ratio: auto;
    margin-bottom: 0;
  }

  .rnw-nanny-course__head-media .rnw-nanny-course__head-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .rnw-nanny-course__head-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    gap: 24px;
    width: 50%;
    max-width: none;
    height: auto;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.8);
  }

  .rnw-nanny-course__head-lead { text-align: justify; }

  /* プレミアムのパネル（Figma 694:22433 padding56） */
  .rnw-nanny-course__premium {
    gap: 32px;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin-inline: auto;
    padding: 56px;
  }

  /* 概要は左テキスト・右写真の2カラム（Figma 318:22544）。
     SPの入れ子（__lead）を display:contents で解いて1つのグリッドに並べる。 */
  .rnw-nanny-course__block--intro {
    display: grid;
    grid-template-columns: 1fr 600px;
    column-gap: 24px;
    row-gap: 24px;
    align-content: start;
  }

  .rnw-nanny-course__block--intro .rnw-nanny-course__lead { display: contents; }

  /* 概要とPoint列の間だけ80px（Figma 694:22447 y602） */
  .rnw-nanny-course__block--intro { margin-bottom: 48px; }

  /* キャッチと本文の間は16px（Figma 694:22440） */
  .rnw-nanny-course__block--intro .rnw-nanny-course__lead > .rnw-nanny-text { margin-top: -8px; }

  .rnw-nanny-course__block--intro .rnw-nanny-course__label   { grid-column: 1; grid-row: 1; }
  .rnw-nanny-course__block--intro .rnw-nanny-course__catch   { grid-column: 1; grid-row: 2; }
  .rnw-nanny-course__block--intro .rnw-nanny-course__lead > .rnw-nanny-text { grid-column: 1; grid-row: 3; }
  .rnw-nanny-course__block--intro .rnw-nanny-course__actions { grid-column: 1; grid-row: 4; }

  .rnw-nanny-course__block--intro .rnw-nanny-course__photo {
    grid-column: 2;
    grid-row: 1 / span 4;
    height: 100%;
  }

  .rnw-nanny-course__label { padding-block: 24px; }
  .rnw-nanny-course__label-en { font-size: 16px; }
  .rnw-nanny-course__label-jp { font-size: 24px; }

  .rnw-nanny-course__catch {
    font-size: 20px;
    font-weight: 700;
    text-align: left;
  }

  /* PCデザインには Point のタグ列が無い */
  .rnw-nanny-course__lead .rnw-nanny-tags { display: none; }

  .rnw-nanny-course__actions { gap: 24px; }

  /* Point 01-03 は3カラム（Figma 318:22557） */
  .rnw-nanny-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .rnw-nanny-point { height: 100%; }

  .rnw-nanny-point__photo { margin-bottom: -40px; 
    margin-bottom: -57px;              /* Figma 214:44731 mb -57 */
  }

  .rnw-nanny-point__card { flex: 1; padding: 16px; }

  /* その他サービス（Figma 318:22589 見出し左・タグ右） */
  .rnw-nanny-course__services {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    max-width: none;          /* SPで掛けた311pxの制限を外す */
    padding: 24px;
  }

  .rnw-nanny-course__services .rnw-nanny-course__subtitle {
    flex: none;
    font-size: 20px;
    white-space: nowrap;
  }

  .rnw-nanny-course__services .rnw-nanny-tags--grid {
    flex: 1 0 0;
    gap: 8px;
    min-width: 0;
  }

  .rnw-nanny-tag--wide {
    width: 210px;
    max-width: none;
    font-size: 16px;
    letter-spacing: 1.2px;
  }

  .rnw-nanny-course__block--services { align-items: center; }

  .rnw-nanny-course__note { display: block; }

  /* スタンダードと法人を2カラム（Figma 318:22625） */
  .rnw-nanny-course__standard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin: 56px auto 0;
    padding-inline: 0;
  }

  .rnw-nanny-course__standard-inner { height: 100%; }

  .rnw-nanny-course__card {
    flex: 1;
    gap: 32px;
    padding: 24px;
  }

  .rnw-nanny-course__card-body { align-items: center; }
  .rnw-nanny-course__card .rnw-nanny-tags { display: none; }
  .rnw-nanny-course__justify { text-align: center; }
  .rnw-nanny-course__subtitle { font-size: 24px; }
  .rnw-nanny-course__corp-title { font-size: 24px; }
  .rnw-nanny-course__corp-head p { text-align: center; }
  .rnw-nanny-course__corp { justify-content: center; gap: 32px; height: 100%; padding: 24px; }

  /* ---------- 8. 活用事例（Figma 694:22532） ---------- */
  .rnw-nanny-case {
    gap: 56px;
    padding: 0 0 80px;
  }

  /* PCデザインには末尾のボタンが無い */
  .rnw-nanny-case__actions { display: none; }

  /* 見出しは全幅の写真2枚＋中央の白カード（Figma 318:22643） */
  .rnw-nanny-shead {
    position: relative;
    width: 100%;
    margin-inline: 0;
    height: 400px;
  }

  .rnw-nanny-shead__media {
    height: 100%;
    margin-bottom: 0;
  }

  .rnw-nanny-shead__frame { height: 100%; }

  .rnw-nanny-shead__frame--crop img {
    position: static;
    left: auto;
    width: 100%;
  }

  /* Figma 318:22647 中央640px / padding32 / 白80% */
  .rnw-nanny-shead__card {
    position: absolute;
    top: 50%;
    left: 50%;
    gap: 24px;
    width: 640px;
    max-width: calc(100% - var(--pc-pad) * 2);
    padding: 32px;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.8);
  }

  .rnw-nanny-shead__card > .rnw-nanny-h2 {
    width: 100%;
    height: auto;
    background-color: transparent;
  }

  .rnw-nanny-shead__lead { text-align: center; }

  .rnw-nanny-case__body {
    gap: 56px;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  /* 絞り込みタグは中央寄せ（Figma 318:22651） */
  .rnw-nanny-ftags {
    gap: 12px;
    justify-content: center;
  }

  .rnw-nanny-ftag { font-size: 16px; }

  /* カテゴリごとの行（Figma 318:22659）。SPのカード帯を隠して行の帯を出す */
  .rnw-nanny-case__groups { gap: 56px; }

  .rnw-nanny-cgroup { gap: 12px; }

  .rnw-nanny-cgroup__head {
    display: block;
    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-nanny-ccard__head { display: none; }

  /* 3枚ぶんで1280に収まる幅。4枚目以降は横スクロール（Figma 318:22710） */
  .rnw-nanny-cgroup .rnw-nanny-slider__track {
    gap: 12px;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }

  .rnw-nanny-cgroup .rnw-nanny-slider__item {
    flex-basis: calc((100% - 24px) / 3);
  }

  /* 明示的な高さが入ると stretch が効かないため、行内で高さを揃える */
  .rnw-nanny-cgroup .rnw-nanny-ccard {
    height: auto;
    align-self: stretch;
  }

  .rnw-nanny-ccard__title { font-size: 20px; font-weight: 700; }
  .rnw-nanny-ccard__note  { font-size: 16px; }

  .rnw-nanny-case__actions {
    flex-direction: row;
    gap: 24px;
    justify-content: center;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  /* ---------- 9. お客様の声（Figma 694:22895） ---------- */
  .rnw-nanny-voice {
    gap: 56px;
    padding: 0 0 80px;
  }

  .rnw-nanny-voice__body {
    gap: 56px;
    width: calc(100% - var(--pc-pad) * 2);
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  /* ---------- 10. ご利用までの流れ（Figma 318:23754） ---------- */
  .rnw-nanny-flow { padding: 80px var(--pc-pad); }

  .rnw-nanny-flow__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  .rnw-nanny-flow .rnw-nanny-h2 { text-align: center; }

  /* 縦線は使わず4カラムのカードに（Figma 318:23758） */
  .rnw-nanny-flow__line { display: none; }

  .rnw-nanny-flow__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
  }

  .rnw-nanny-flow__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 24px;
    border-radius: 8px;
    background-color: #FFFFFF;
  }

  /* Figma 318:23760 64pxの円 / common/bg #FAF7F2 */
  .rnw-nanny-flow__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--rnw-bg1);
    color: var(--rnw-accent);
    font-family: var(--rnw-font-en);
    font-size: 32px;
    line-height: 1;
  }

  .rnw-nanny-flow__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .rnw-nanny-flow__title { font-size: 20px; }
  .rnw-nanny-flow__note  { align-self: flex-start; }

  /* ---------- 11. お知らせ（Figma 318:23787） ---------- */
  .rnw-nanny-news { padding: 80px var(--pc-pad); }

  /* 見出しの右にボタン、その下に一覧（Figma 318:23789） */
  .rnw-nanny-news__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 56px 24px;
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  .rnw-nanny-news__title { grid-column: 1; grid-row: 1; align-self: end; }
  .rnw-nanny .rnw-nanny-news__btn { grid-column: 2; grid-row: 1; align-self: end; width: 301px; }
  .rnw-nanny-news__inner > :not(.rnw-nanny-news__title):not(.rnw-nanny-news__btn) {
    grid-column: 1 / -1;
  }

  /* ---------- 12. よくあるご質問（Figma 318:23826） ---------- */
  .rnw-nanny-faq {
    gap: 56px;
    padding: 80px var(--pc-pad);
  }

  /* 見出し・チップ・Q&A・ボタンを同じ1280の幅に揃える */
  .rnw-nanny-faq > * {
    width: 100%;
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  /* PCデザインには無い */
  .rnw-nanny-faq__more { display: none; }

  .rnw-nanny-faq__list { scroll-margin-top: calc(var(--rnw-header-h-pc) + 16px); }

  .rnw-nanny-faq .rnw-nanny-h2 { text-align: center; }

  .rnw-nanny-faq__body {
    display: flex;
    flex-direction: column;
    gap: 56px;
  }

  .rnw-nanny-faq__tags { justify-content: flex-start; }

  /* Figma 318:23840 Q行 padding20 / Lusitana Bold 24 */
  .rnw-nanny-faq__q { padding-block: 20px; }
  .rnw-nanny-faq__mark { font-size: 24px; line-height: 36px; }
  .rnw-nanny-faq__qtext { font-size: 16px; }
  .rnw-nanny-faq__a { padding-left: 40px; padding-bottom: 20px; }
  .rnw-nanny-faq__atext { font-size: 16px; }

  /* PCデザインには「もっと見る」が無い */
  .rnw-nanny-faq > .rnw-btn { display: none; }
}
/* ---------- タブレット（768〜1199px） ----------
   PCレイアウトのまま幅だけ狭めると、Figmaの1440固定値がそのまま効いて
   溢れる／痩せすぎる箇所が出るため、列数と文字サイズだけ落とす。
   ------------------------------------------------------------------ */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  /* 48px＋nowrap ではカードに収まらない */
  .rnw-nanny-mv__card  { width: min(640px, 60%); padding: 24px; }
  .rnw-nanny-mv__en    { font-size: 20px; letter-spacing: 4px; }
  .rnw-nanny-mv__title { font-size: 32px; white-space: normal; }
  .rnw-nanny-mv__lead  { font-size: 16px; letter-spacing: 1.2px; }

  /* 見出しカードは絶対配置をやめる。幅から高さが決まる箱に対して中身が
     収まらず、次のセクションに溢れるため。写真の下端に重ねる形にする。 */
  .rnw-nanny-features__head,
  .rnw-nanny-course__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: auto;
  }

  .rnw-nanny-features__head-img {
    width: 100%;
    height: 360px;
    margin-bottom: -40px;
  }

  .rnw-nanny-course__head-media {
    position: static;
    width: 100%;
    aspect-ratio: 1000 / 560;
    margin-bottom: -40px;
  }

  .rnw-nanny-features__head-card,
  .rnw-nanny-course__head-card {
    position: static;
    top: auto;
    transform: none;
    width: min(640px, calc(100% - 48px));
  }

  /* 写真列の 600px 固定を外す */
  .rnw-nanny-course__block--intro { grid-template-columns: 1fr minmax(0, 45%); }

  .rnw-nanny-course__premium { padding: 32px; }

  /* コースと法人は縦積み */
  .rnw-nanny-course__standard { grid-template-columns: 1fr; }

  /* 中身が343px前提の絶対配置なので、4列だと文字が切れる */
  .rnw-nanny-support__inner { grid-template-columns: repeat(2, 1fr); }

  /* 1枚あたりが痩せすぎるので2列に落とす */
  .rnw-nanny-features .rnw-nanny-slider__track { grid-template-columns: repeat(2, 1fr); }
  .rnw-nanny-points   { grid-template-columns: repeat(2, 1fr); }
  .rnw-nanny-flow__list { grid-template-columns: repeat(2, 1fr); }

  .rnw-nanny-cgroup .rnw-nanny-slider__item { flex-basis: calc((100% - 12px) / 2); }
  .rnw-nanny-voice .rnw-voice-group .rnw-voice-card { flex-basis: calc((100% - 12px) / 2); }
}

/* ---------- 狭幅SP（Figma基準375px未満） ---------- */
@media only screen and (max-width: 374px) {
  /* 「ポピンズナニーサービス」（11文字）は 26px＋tracking1.2px で約299px必要。
     320px幅ではカード内寸が256pxしかないため、nowrap のまま収まる22pxに落とす
     （11文字 × 22px ＋ tracking 13.2px ≒ 255px）。 */
  .rnw-nanny-mv__title {
    font-size: 22px;
  }
}

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

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

/* =====================================================================
   MV写真の切り抜き：デザイン案どおり「ナニーを左に寄せる」（2026-09-18／PC上書き）
   ---------------------------------------------------------------------
   これまでは object-fit: cover の既定（中央基準）で切り抜いていたため、
   人物が中央に来て右の窓だけが大きく空き、さらに上端で頭が切れていた。
   デザインは写真を少し寄って左端に寄せた切り抜き。

   ▼ transform ではなく width/height と left/top で寄せているのは、
     .rnw-kenburns（common.css）が img の transform をアニメで使っており、
     ここで transform を書いても上書きされて効かないため。

   数値：写真は 1710×1140。枠（1440×707）に対して 121% 幅＝1742px に拡大し、
   右端を枠に合わせる（left: -21%）と、写真左側が枠外に出て人物が左に寄る。
   height 164% は 1742 ÷ 1.5（写真の縦横比）＝1162px ≒ 707 × 1.64 で、
   拡大した箱の比率を写真と揃えて object-fit の二重トリミングを避けるため。
   top は頭の上に余白を残す位置。Ken Burns が1.10〜1.30倍に寄せるぶん上へ抜けるため、
   静止状態でちょうどに合わせると寄ったときに頭が切れる。寄っている間も切れない -6% にしている。
   ===================================================================== */
@media only screen and (min-width: 768px) {
  .rnw-nanny-mv__media .rnw-nanny-mv__img {
    /* width: 121%;
    height: 164%;
    top: -6%;
    left: -21%; */
    /* Ken Burns の拡大中心を、実際に見えている範囲の中心に合わせる。
       中央基準のままだと枠外（写真左側）へ向かって寄っていき、人物が流れる。 */
    width: 100%;
    height: auto;
    top: 60px;
    left: 0;
    transform-origin: 59% 41%;
  }
}

/* --- 2026-09-27 MVの高さ・写真の引き（PC上書き） ---
   ■ 高さ：デザイン比率（1440×707）のままだと、横長の画面ではヘッダー＋MVだけで1画面を超え、
     支援バナーがファーストビューに入らない→ 上限を「画面の高さ − ヘッダー − 支援バナー（24+100+24）」にする。
     画面が極端に低いときにカードがはみ出さないよう下限420px。
   ■ 写真：MVの上端はヘッダー（--rnw-header-h-pc）の下に潜っているので、写真はその下から置き、
     枠の比率ぶん＋ヘッダーぶんの高さを取って、写真（1440×708）全体をデザインどおりに見せる。
     上限で枠が低くなったときは横幅いっぱいのまま上基準で切り抜く（頭を残し、下側が切れる）。
       ※縮めて全体を見せる案は右に空きが出て見栄えが悪かったため不採用（2026-09-27）。
   ■ Ken Burns：共通は1.10倍から始まって寄りすぎるので、このMVだけ等倍（デザインの引き）から寄せる。 */
@media only screen and (min-width: 768px) {
  .rnw-nanny-mv__media {
    aspect-ratio: auto;
    height: min(calc(100vw * 708 / 1440 + var(--rnw-header-h-pc)), max(420px, calc(100vh - var(--rnw-header-h-pc) - 148px)));
    height: min(calc(100vw * 708 / 1440 + var(--rnw-header-h-pc)), max(420px, calc(100svh - var(--rnw-header-h-pc) - 148px)));
  }
  .rnw-nanny-mv__media .rnw-nanny-mv__img {
    top: var(--rnw-header-h-pc);
    left: 0;
    width: 100%;
    height: calc(100% - var(--rnw-header-h-pc));
    max-width: none;
    object-fit: cover;
    object-position: center top;
    animation-name: rnw-nanny-mv-kenburns;
  }
}

@keyframes rnw-nanny-mv-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* --- 2026-09-27 プレミアムコース概要：960px未満だと、左列のボタン（幅480px）に押されて右の写真列が痩せ、
       写真が細長く切り抜かれ、本文もPC用の改行と重なって1文字だけ次の行に落ちる→
       この幅だけ2カラムをやめてSPと同じ縦積み（ラベル → キャッチ → 本文 → 写真 → ボタン）にする。
       960px以上はそのまま（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .rnw-nanny-course__block--intro {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .rnw-nanny-course__block--intro .rnw-nanny-course__lead {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .rnw-nanny-course__block--intro .rnw-nanny-course__lead > .rnw-nanny-text { margin-top: 0; }
  .rnw-nanny-course__block--intro .rnw-nanny-course__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 467;
  }
}

/* --- 2026-09-27 特徴カード1枚目の写真：<picture> の img に高さ指定が無く、画像の比率なりの高さになる
       （カード幅で変わり、2・3枚目の200px固定と揃わない）→ 他のカードと同じ200px固定・cover にする（全幅） --- */
.rnw-nanny-fcard > picture > img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* --- 2026-09-27 コース見出し（768～1199）：上の調整で写真枠を position:static にしたため、中の写真（absolute・100%）が
       外側の見出しブロック全体を基準に広がり、見出しカード「Course／コース」を覆って消していた→
       写真枠を基準（relative）に戻し、カードは写真より手前に出す（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-nanny-course__head-media { position: relative; }
  .rnw-nanny-course__head-card  { position: relative; z-index: 1; }
}

/* --- 2026-09-27 プレミアムコース概要（960～1199）：左列のボタン（幅480px）に押されて写真列が45%より細くなる→
       文章と写真を半分ずつに固定する。狭くなる文章列に合わせ、ボタンは列幅いっぱい＋ボタン内の改行を有効にし、
       本文のPC用改行は外して自然に折り返す（「伺／い、」の1文字落ちを防ぐ）。959px以下は縦積み（上の指定）（PC上書き） --- */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .rnw-nanny-course__block--intro { grid-template-columns: 1fr 1fr; }
  .rnw-nanny-course__block--intro .rnw-btn    { width: 100%; }
  .rnw-nanny-course__block--intro .rnw-btn br { display: inline; }
  .rnw-nanny-course__block--intro .rnw-nanny-br-pc { display: none; }
}

/* --- 2026-09-27 支援バナー（768～1199・2列）：列を幅いっぱいに広げていたため、高さ100px固定のまま横長になり、
       CMS入稿のピックアップバナー（343×100前提）が上下を切られて文字が欠ける→
       1枚の幅を最大343px（デザインの原寸）にして中央に寄せる（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-nanny-support__inner {
    grid-template-columns: repeat(2, minmax(0, 343px));
    justify-content: center;
  }
}

/* --- 2026-09-27 特徴見出し（768～1199）：写真の下端にカードを40px重ねる形だが、カードが写真の奥に回り
       「Features」が写真に隠れていた→ カードを写真より手前に出す（コース見出しと同じ直し方）（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-nanny-features__head-card { position: relative; z-index: 1; }
}

/* --- 2026-09-27 特徴カード：768～1199で2列に落としていたため、1170px前後ではカードが約510px幅に広がり、
       高さ200px固定の写真の見え方がPC（3列）と変わっていた→ 1100px以上はPCと同じ3列のまま。2列は1099px以下だけ
       （960pxまで3列にすると見出し「厳選された採用基準と」が折れるため1100pxから）（PC上書き） --- */
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
  .rnw-nanny-features .rnw-nanny-slider__track { grid-template-columns: repeat(3, 1fr); }
}

/* --- 2026-09-27 その他プレミアムサービス（768～1199）：見出しの右の余りに210px固定のタグが2つ並ばず、1列に縦長に積まれる→
       見出しを上・タグを下に置き、タグは幅に合わせて複数列に並べる（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-nanny-course__services {
    flex-direction: column;
    align-self: stretch;     /* 親が align-items:center なので、放っておくと中身の幅まで縮んで細い箱になる */
    width: 100%;
    margin-inline: 0;        /* SPの margin-inline:auto が残ると stretch より優先されて縮む */
    box-sizing: border-box;
    align-items: stretch;
    gap: 24px;
  }
  .rnw-nanny-course__services .rnw-nanny-course__subtitle { text-align: center; }
  .rnw-nanny-course__services .rnw-nanny-tags--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    flex: none;
  }
  .rnw-nanny-course__services .rnw-nanny-tag--wide { width: auto; }
}

/* --- 2026-09-27 スタンダードコースの箱：見出し・本文は中央揃えなのに、ボタン（幅480px）だけ左に寄っていた→ ボタンも中央に揃える（PC上書き） --- */
@media only screen and (min-width: 768px) {
  .rnw-nanny-course__card .rnw-nanny-course__actions { align-items: center; }
}

/* --- 2026-09-27 ナニーサービスとは？（768～1199）：PCの「写真右78%＋カード左50%を重ねる」配置のまま縮めていたため、
       カードが縦に伸びて本文が左の細い列に流れ、写真の下の右側が空いていた→
       特徴・コースの見出しと同じく、写真は幅いっぱい（ロゴは左上に重ねる）、カードは写真の下端に重ねて中央に置く（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .rnw-nanny-about__media {
    justify-self: stretch;
    width: 100%;
  }
  .rnw-nanny-about__logo {
    width: 200px;
    height: auto;
    margin: 16px 0 0 16px;
  }
  .rnw-nanny-about__card {
    justify-self: center;
    width: min(640px, calc(100% - 48px));
    margin-top: -40px;
  }
  .rnw-nanny-about__inner { align-items: center; }   /* お問い合わせボタンも中央に */
}

/* --- 2026-09-27 セクション見出しの写真（幅の広いSP 590～767）：高さ200px固定のまま横だけ広がるため、写真が拡大されて頭が切れる→
       589px幅のときの比率（589×200）のまま、幅に合わせて高さも伸ばす（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-features__head-img,
  .rnw-nanny-shead__frame { height: auto; aspect-ratio: 589 / 200; }
}

/* --- 2026-09-27 プレミアムコースの写真・Point写真（幅の広いSP 590～767）：高さ固定（200px／230px）のまま横だけ広がり、写真が拡大されて頭が切れる→
       Point写真は589px幅のときの比率（幅525×230）のまま、幅に合わせて高さも伸ばす。
       プレミアムコースの写真は高さ固定を外し、元画像の比率（700×466）のまま切らずに出す（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-course__photo { height: auto; }
  .rnw-nanny-point__photo  { height: auto; aspect-ratio: 525 / 230; }
}

/* --- 2026-09-27 Point写真の白カード（幅の広いSP 590～767）：写真に80px重なり、人物の顔にかかる→ 重なりを40px（タブレットと同じ）にして下げる（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-point__photo { margin-bottom: -40px; }
}

/* --- 2026-09-27 Point写真（SP）：中央基準の切り抜きで、Point 02 の3人の頭が枠の上で切れる→ 上基準で切り抜く（SP上書き） --- */
@media only screen and (max-width: 767px) {
  .rnw-nanny-point__photo { object-position: center top; }
}

/* --- 2026-09-27 MVの見出しカード（幅の広いSP 590～767）：幅343px固定のまま写真だけ大きくなり、カードが小さく見える→ 最大520pxまで広げる（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-mv__card { max-width: 520px; }
}

/* --- 2026-09-27 MVの高さ（幅の広いSP 590～767）：枠が 375:490 の比率で幅に比例して伸び、738px幅で約960pxと画面いっぱいになる→
       枠の高さの上限を589px幅のときの高さ（769px）にする。写真は幅いっぱいのまま、はみ出した下側だけ切れる（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-mv__media {
    aspect-ratio: auto;   /* 比率指定と max-height を併用すると幅まで縮むため、高さを直接決める */
    height: min(calc(100vw * 490 / 375.317), 769px);
  }
}
/* --- 2026-09-27 特徴の見出し写真（SP）：中央基準の切り抜きで、人物の頭の上が枠の上で切れる→ 上基準で切り抜く（高さは比例のまま）（SP上書き） --- */
@media only screen and (max-width: 767px) {
  .rnw-nanny-features__head-img { object-position: 50% 12%; }
}

/* --- 2026-09-27 特徴の見出し写真（幅の広いSP 590～767）：589×200 の比率で切り抜かれ、頭の上と体が切れる→
       高さ固定を外し、元画像の比率（1000×560）のまま切らずに出す（SP上書き） --- */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-nanny-features__head-img { height: auto; aspect-ratio: auto; }
}