@charset "UTF-8";

/* =====================================================================
   ポピンズ English リニューアル トップページ専用CSS
   ---------------------------------------------------------------------
   本文は renewal/pages/front.html（固定ページ本文に貼り付け）。
   共通部分（ヘッダー・ボタン・タグ・アイコン）は renewal/css/common.css。

   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
     PC 453:35883 ／ SP 363:34280

   ■ 記述順
     SPファースト。768px以上でPCレイアウトに切り替える。
     （Figmaは PC 1440 / SP 375 の2種類のみ。中間幅の指定は無いため、
       中間は「SPレイアウトを伸ばす」ではなく「PCレイアウトを詰める」で
       成立させている＝共通CSSのヘッダーと同じ考え方）

   ■ 旧 style.css の打ち消し
     .rnw-page 側の共通打ち消しは common.css にある。ここでは
     h1{background:url(img/h1_rogo.png)} など、このページ固有のものだけ潰す。
   ===================================================================== */

/* 旧 style.css の h1 はロゴ画像を背景に敷く指定（width:220px / height:60px）。
   FVの見出しに <h1> を使うため、このページのぶんだけ打ち消す。 */
.rnw-front h1 {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
}

/* 本文要素の余白リセット。
   旧 style.css のリセットが p / ul / li / h2 / h3 の margin・padding を
   既に0にしているが、プレビュー（旧CSS非読込）でも同じ見え方になるよう
   ここでも入れておく。

   ▼:where() で包んでいる理由
     `.rnw-front li` のように要素セレクタを足すと詳細度が (0,1,1) になり、
     あとから書く `.rnw-svc__item { padding:40px 56px 56px }` のような
     クラス指定 (0,1,0) を打ち負かしてしまう。
     :where() は詳細度に加算されないため (0,1,0) に揃い、後勝ちで上書きできる。 */
.rnw-front :where(p, ul, ol, li, h2, h3, h4) {
  margin: 0;
  padding: 0;
}


/* =====================================================================
   共通コンポーネントについて
   ---------------------------------------------------------------------
   見出し（.rnw-h2）／横スライダー（.rnw-slider__*）／お客様の声カード
   （.rnw-voice__card*）は、ナニーサービスページ等でも同じものを使うため
   renewal/css/common.css の「5-2〜5-4」に移してある。
   このファイルにはトップ固有の指定だけを置く。
   ===================================================================== */

/* カード列（横スクロール）。カードの幅・見た目は各セクション側で指定する。 */
.rnw-support__cards {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.rnw-support__cards::-webkit-scrollbar { display: none; }


/* =====================================================================
   1. FV（Figma PC 1702:13565［差し替え後］ ／ SP 363:34282）
   ---------------------------------------------------------------------
   PCは2026-09-17に差し替え。写真を右へ寄せ、左に地色＋グラデーションを敷き、
   白カードを左端に置く構成（旧：写真左・カード右）。SPは変更なし。
   ===================================================================== */

/* SPカンプ（694:91542）は帯全体が common/bg2。写真は490pxで、下の68pxぶんが
   この地色として出る。PCカンプ（694:36314）は写真が全面なので白のまま。 */
.rnw-fv {
  position: relative;
  padding-bottom: 20px;   /* Figma SP実測（ボックス下端から20px） */
  background-color: var(--rnw-bg2);
}

.rnw-fv__media {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 490;   /* Figma SP実測 */
  overflow: hidden;
  /* PCのトリミングでは写真が左端まで届かず、この地色が出る（下のPCブロック参照）。
     SPは写真が全面を覆うので見えない。 */
  background-color: #F6F7F9;   /* Figma実測（変数未登録） */
}

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

/* 写真の上に黒10%（Figma SP 694:91543）。テクスチャより下に敷く。
   PCカンプ（694:36315）には無いのでPCブロックで消している。 */
.rnw-fv__media::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .1);
  pointer-events: none;
}

/* 紙のテクスチャ（Figma image 4 / mix-blend-darken・opacity 40%） */
.rnw-fv__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../../img/front/fv_texture.png') left top / 245.76px 163.86px;
  mix-blend-mode: darken;
  opacity: .4;
  pointer-events: none;
}

.rnw-fv__box {
  position: relative;
  /* Figma SP実測は -213px（写真490の上端から277の位置）だが、実機で白ボックスが
     赤ちゃんに被るため約150px下げている。2026-09-17 */
  margin: -63px 16px 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, .9);
}

.rnw-fv__title {
  display: flex;
  flex-direction: column;
  gap: 4px;                /* Figma SP実測 */
  font-family: var(--rnw-font-display);
  font-weight: 400;
  letter-spacing: 6.8669px;  /* Figma実測 */
  color: var(--rnw-text, #4A4A4A);
}

.rnw-fv__title-main { display: block; font-size: 26px; line-height: 1.3; }
.rnw-fv__title-sub  { display: block; font-size: 22px; line-height: 1.3; }

.rnw-fv__lead {
  margin-top: 11px;        /* Figma SP実測 */
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}


/* =====================================================================
   2. 実績バー（Figma PC 453:35894 ／ SP 363:34290）
   ===================================================================== */

.rnw-stats {
  padding: 24px 16px;                 /* Figma SP実測 */
  background-color: var(--rnw-bg2);
}

.rnw-stats__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 343px;                   /* Figma SP実測 */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 月桂樹はSVG1点を左右で使い回す（右は反転）。
   Figmaでは Group 115876 / 115877 の2レイヤーだが同じ図形。 */
.rnw-stats__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 26px;                    /* 月桂樹のぶんの余白 */
  /* 左の月桂樹は背景で、右は反転が要るので ::after で置く */
  background: url('../../img/front/laurel.svg') left center / auto 54px no-repeat;
  text-align: center;
}

.rnw-stats__item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 22.5px;                      /* Figma SP実測 */
  height: 54px;
  transform: translateY(-50%) scaleX(-1);
  background: url('../../img/front/laurel.svg') center / contain no-repeat;
}

.rnw-stats__main {
  font-family: var(--rnw-font-mobo);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2.0991px;           /* Figma実測 */
  color: var(--rnw-text, #4A4A4A);
}

.rnw-stats__main--line { font-size: 15px; }

.rnw-stats__num  { display: block; font-size: 24px; }
.rnw-stats__unit { display: block; font-size: 15px; }

.rnw-stats__sub {
  margin-top: 2px;
  font-family: var(--rnw-font-mobo);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 2.0991px;
  color: var(--rnw-text, #4A4A4A);
}


/* =====================================================================
   3. About Poppins（Figma PC 453:35974 ／ SP 363:34370）
   ===================================================================== */

.rnw-about {
  padding: 56px 16px 40px;            /* Figma SP実測（ロゴ上56px） */
  background-color: var(--rnw-white);
}

.rnw-about__logo {
  display: block;
  width: 276px;                       /* Figma実測 */
  height: auto;
  margin: 0 auto 56px;
}

.rnw-about__photo { margin-bottom: 32px; }

.rnw-about__photo img {
  display: block;
  width: 100%;
  height: auto;                       /* SPは写真の比率のまま（旧 Figma SP実測 250px）2026-09-27 */
  object-fit: cover;
}

.rnw-about__lead {
  margin-top: 32px;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}

.rnw-about__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;                          /* Figma実測 */
  margin-top: 32px;
}

/* 見出しは <h2> の位置がSPだけロゴの下に来る（Figma 363:34398） */
.rnw-about .rnw-h2 { margin-bottom: 32px; }


/* =====================================================================
   4. How Can We Support Your Family?（Figma PC 453:36011 ／ SP 363:34407）
   ===================================================================== */

.rnw-support {
  padding: 0 0 40px;
  background-color: var(--rnw-white);   /* Figma実測 SP 694:91667 */
}

.rnw-support__head { position: relative; margin-bottom: 32px; }

.rnw-support__head-photo img {
  display: block;
  width: 100%;
  height: auto;                       /* SPは写真の比率のまま（旧 Figma SP実測 200px）2026-09-27 */
  object-fit: cover;
}

/* 写真の下端に白ボックスを重ねる（Figma SP 363:34411） */
.rnw-support__head-box {
  position: relative;
  width: 300px;                       /* Figma SP実測 */
  margin: -40px auto 0;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, .8);
}

.rnw-support__cards { padding: 0 16px; }

.rnw-support__card {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;                    /* Figma SP実測 */
  scroll-snap-align: start;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, .08));  /* Figma実測 */
}

/* Figma改訂（694:35991 / 694:36010）で写真からイラストに変わった。
   地色 #F9F9F9 は画像（SVG）側に含めてあるので、ここでは高さだけを持たせる。
   SP 140px / PC 300px はいずれもFigma実測。 */
.rnw-support__card-photo img {
  display: block;
  width: 100%;
  height: auto;                       /* SPは画像の比率のまま（旧 Figma SP実測 140px）2026-09-27 */
  object-fit: cover;
}

.rnw-support__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 16px;                      /* Figma SP実測 */
  background-color: var(--rnw-bg2);   /* Figma SP実測 common/bg2（694:91701） */
}

.rnw-support__card-title {
  font-family: var(--rnw-font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text, #4A4A4A);
}

.rnw-support__card-catch {
  margin-top: 24px;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}

.rnw-support__card-list {
  margin-top: 16px;                   /* Figma実測 */
  padding-left: 24px;                 /* Figma実測（ms-24px） */
  list-style: disc;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}

/* ボタンはカード下端に揃える（Figma 453:36022 の justify-between）。
   リストとの最小間隔はリスト側の下マージンで取る。ボタンに margin-top を
   置くと margin-top:auto が打ち消され、本文量の違うカード同士で
   ボタンの高さが揃わなくなる。 */
.rnw-support__card-list { margin-bottom: 40px; }
.rnw-support__card-btn  { margin-top: auto; }


/* =====================================================================
   5. Our Services（Figma PC 453:36040 ／ SP 363:34448）
   ===================================================================== */

/* 地色はグラデーション（Figma実測 nanny/gra2）。
   #FCF7F8 から #F6BECA へ、52.404%で止まる。 */
.rnw-svc {
  padding-bottom: 40px;
  background: var(--rnw-contact-gra);
}

.rnw-svc__head { margin-bottom: 32px; }

.rnw-svc__head-photo img {
  display: block;
  width: 100%;
  height: 200px;                      /* Figma SP実測 */
  object-fit: cover;
}

.rnw-svc__head-box {
  position: relative;
  width: 300px;                       /* Figma SP実測 */
  margin: -40px auto 0;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, .8);
}

.rnw-svc__list {
  display: flex;
  flex-direction: column;
  gap: 32px;                          /* Figma SP実測 */
  margin: 0 16px;
  padding: 0;
  list-style: none;
}

.rnw-svc__item {
  padding: 24px 16px;                 /* Figma SP実測 */
  border-radius: 8px;
  background-color: rgba(255, 255, 255, .9);  /* Figma実測 */
}

.rnw-svc__badge { text-align: center; }

.rnw-svc__body {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}

/* SPカンプ（694:91739）ではピンクの帯が無く、文字だけ。
   帯が付くのはPCカンプ（694:36042）だけなのでPCブロックで足している。 */
.rnw-svc__title {
  order: 0;
  font-family: var(--rnw-font-jp);
  font-size: 20px;                    /* Figma SP実測 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-main-text);
}

/* SPは 見出し → 写真 → 本文 → タグ の順（Figma 363:34456）。
   PCは 見出し → 本文 → タグ ／ 右に写真（Figma 453:36051）。 */
.rnw-svc__photo {
  order: 1;
  margin-top: 24px;
}

.rnw-svc__photo img {
  display: block;
  width: 100%;
  /* SPは高さ auto（写真の比率のまま・トリミングしない）。2026-09-27
     以前は Figma SP実測の 200px 固定で、幅の広いSP（733px付近）では上下が大きく切れていた。
     object-fit はPCの 372px 固定で使うので残す。 */
  height: auto;
  object-fit: cover;
}

/* SPでは .rnw-svc__text を display:contents にして、中の見出し・本文・タグを
   .rnw-svc__body の直下の並びに参加させる。こうしないと写真（textの兄弟）を
   見出しと本文のあいだに差し込めない。PCでは通常の flex に戻す。 */
.rnw-svc__text { display: contents; }

.rnw-svc__desc {
  order: 2;
  margin-top: 24px;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}

.rnw-svc__tags {
  display: flex;
  order: 3;
  flex-wrap: wrap;
  gap: 12px;                          /* Figma実測 */
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.rnw-svc__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;                          /* Figma実測 */
  margin-top: 40px;
}


/* =====================================================================
   6. Trusted Worldwide.（Figma PC 453:36113 ／ SP 363:34524）
   ===================================================================== */

/* SPカンプ（694:91803）は common/bg2。
   ▼PCカンプ（694:36103）の地色は未確認のため、PCブロックで従来の
     nanny/bg を維持している。PCも bg2 なら下の指定を消すこと。 */
.rnw-voice {
  padding-bottom: 40px;
  background-color: var(--rnw-bg2);
}

.rnw-voice__head { margin-bottom: 24px; }

.rnw-voice__head-photo { display: flex; }

/* Figma改訂（1706:13860）で左右2枚から1枚の横長写真に変わった。
   枠に対して画像は高さ239.95%・上-19.97% ＝ 縦位置14.3%のトリミング。 */
.rnw-voice__head-photo img {
  display: block;
  width: 100%;
  height: 200px;                      /* Figma SP実測 */
  object-fit: cover;
  object-position: 50% 14.3%;         /* Figma実測 */
}

.rnw-voice__head-box {
  position: relative;
  width: 300px;                       /* Figma SP実測 */
  margin: -40px auto 0;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, .8);
}

/* SPではリード文がボックスの外（写真の下）に出る（Figma 363:34532） */
.rnw-voice__lead {
  margin: 24px 16px 0;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text, #4A4A4A);
}

.rnw-voice__btn { margin: 32px 16px 0; }


/* =====================================================================
   8. PCレイアウト（768px以上）
   ---------------------------------------------------------------------
   Figmaは1440幅で作られている。1440未満では内側の余白と写真の重なりを
   詰めて成立させ、1440以上は中央寄せで頭打ちにする。
   ===================================================================== */

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

  /* ---------------- FV ---------------- */

  .rnw-fv {
    position: relative;
    padding-bottom: 0;
    background-color: var(--rnw-white);
  }

  /* 黒10%はSPカンプだけ（PC 694:36315 には無い）。
     PCではこの疑似要素を写真左のグラデーション（Figma 1702:13566）に使い回す。
     #F6F7F9 が 32.72% まで不透明 → 50% で透明。写真の左端をぼかして地色に溶かす。 */
  .rnw-fv__media::before {
    display: block;
    /* PCでは写真が position:absolute になり、DOM順で ::before より後に描かれる。
       重ね順はFigmaのレイヤー順（写真 → テクスチャ → グラデーション）に合わせる。 */
    z-index: 2;
    background: linear-gradient(to right, #F6F7F9 32.72%, rgba(246, 247, 249, 0) 50%);
  }

  .rnw-fv__media::after { z-index: 1; }   /* テクスチャは写真の上・グラデーションの下 */

  .rnw-fv__media {
    aspect-ratio: 1440 / 707;         /* Figma PC実測 */
    max-height: 707px;
    /* 下の ::before / ::after の z-index を写真枠の中だけで効かせる。
       これが無いとグラデーションが .rnw-fv__box（白カード）の上まで出てしまう。 */
    isolation: isolate;
  }

  /* ▼PCのFV写真は object-fit:cover ではなく、Figmaのトリミング指定どおりに置く。
       Figma（1702:13566）は幅101.81% / 左29.64% / 上-14.81%（いずれも枠に対する％）。
       写真は右に寄り、枠の左側（0〜29.64%）には .rnw-fv__media の地色が出る。
       その境目は上のグラデーション（::before）でぼかす。
       写真ファイル自体は変更なし（旧デザインと同一アセット）。
       ※SPのトリミングは変わっていないため、SP側の cover 指定は残している。 */
  .rnw-fv__media img {
    position: absolute;
    top: -14.81%;
    left: 29.64%;
    width: 101.81%;
    height: auto;
    /* common.css の `.rnw-page img { max-width:100% }` に負けて
       101.81% が 100% に丸められるのを防ぐ。 */
    max-width: none;
  }

  /* ボックスはFigmaで左端から80px（1702:13567 の left 79.8 / 1440）。
     1440pxを超える画面では、中央1440pxの帯の左端から80pxの位置に置く。 */
  .rnw-fv__box {
    position: absolute;
    /* 広い画面は従来どおり top:37.5%（Figma 264.77 / 707）。幅が狭くなり写真が低くなると、
       カード下端が写真内に収まる位置まで自動で上げる（445px≈カード高さ）。 */
    top: min(37.5%, calc(100% - 445px));
    left: max(80px, calc((100% - 1440px) / 2 + 80px));
    right: auto;
    width: min(640px, 44.5%);         /* Figma実測 640 / 1440 */
    margin: 0;
    padding: 29.695px;                /* Figma実測 */
  }

  .rnw-fv__title { gap: 7.424px; }    /* Figma実測 */
  /* 945px以下でカード内文字を段階縮小（945px以上は従来値）。 */
  .rnw-fv__title-main { font-size: clamp(26px, 4.23vw, 40px); }
  .rnw-fv__title-sub  { font-size: clamp(18px, 2.54vw, 24px); }
  .rnw-fv__lead { margin-top: 20.415px; font-size: clamp(14px, 1.69vw, 16px); }

  /* ---------------- 実績バー ---------------- */

  .rnw-stats { padding: 40px 16px; }  /* Figma PC実測 */

  .rnw-stats__list {
    gap: 20px;                        /* Figma PC実測 */
    max-width: 1000px;
  }

  .rnw-stats__item {
    flex: 0 1 auto;
    padding: 0 48px;
    background-size: auto 94.458px;   /* Figma PC実測 */
  }

  .rnw-stats__item::after {
    width: 39.359px;                  /* Figma PC実測 */
    height: 94.458px;
  }

  .rnw-stats__main--line { font-size: 34px; }   /* Figma PC実測 */
  .rnw-stats__num  { font-size: 47.23px; }      /* Figma PC実測 */
  .rnw-stats__unit { font-size: 29.738px; }     /* Figma PC実測 */
  .rnw-stats__sub  { font-size: 14px; }

  /* ---------------- About ---------------- */

  .rnw-about { padding: 80px 16px; }  /* Figma PC実測 */

  .rnw-about__inner {
    position: relative;
    width: 100%;
    max-width: 1280px;                /* Figma PC実測 */
    margin: 0 auto;
    aspect-ratio: 1280 / 640;
  }

  /* ロゴ・写真・白ボックスを重ねる（Figma 453:35976） */
  .rnw-about__logo {
    position: absolute;
    top: 6.25%;                       /* Figma実測 39.99 / 640 */
    left: 5.5%;                       /* Figma実測 70 / 1280 */
    z-index: 2;
    width: 21.6%;                     /* Figma実測 276 / 1280 */
    margin: 0;
  }

  .rnw-about__photo {
    position: absolute;
    top: 0;
    left: 21.9%;                      /* Figma実測 280 / 1280 */
    width: 78.1%;                     /* Figma実測 1000 / 1280 */
    margin: 0;
  }

  .rnw-about__photo img { height: auto; aspect-ratio: 1000 / 560; }

  .rnw-about__box {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;                        /* Figma実測 */
    width: 50%;                       /* Figma実測 640 / 1280 */
    padding: 32px;                    /* Figma実測 */
    background-color: rgba(255, 255, 255, .8);
  }

  .rnw-about .rnw-h2 { margin-bottom: 0; font-size: 40px; }  /* Figma実測 */
  .rnw-about__lead { margin-top: 0; width: 100%; }

  .rnw-about__btns {
    width: 400px;                     /* Figma実測 */
    max-width: 100%;
    margin-top: 0;
    padding-top: 16px;                /* Figma実測 */
  }

  /* ---------------- Support ---------------- */

  .rnw-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;                        /* Figma実測 */
    padding: 120px 16px;              /* Figma実測 */
  }

  .rnw-support__head {
    position: relative;
    width: 100%;
    max-width: 1280px;                /* Figma実測 */
    margin: 0;
    aspect-ratio: 1280 / 560;
  }

  .rnw-support__head-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 78.1%;                     /* Figma実測 1000 / 1280 */
  }

  .rnw-support__head-photo img { height: auto; aspect-ratio: 1000 / 560; }

  .rnw-support__head-box {
    position: absolute;
    top: 61.9%;                       /* Figma実測 346.63 / 560 */
    left: 50%;                        /* Figma実測 640 / 1280 */
    width: 50%;
    margin: 0;
    padding: 32px;                    /* Figma実測 */
  }

  /* PCは2枚が並ぶのでスライダーの操作UIは出さない（Figmaにも無い） */
  .rnw-support .rnw-slider__nav { display: none; }

  .rnw-support .rnw-slider { width: 100%; max-width: 1280px; }

  .rnw-support__cards {
    padding: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

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

  .rnw-support__card-photo img { height: 300px; }   /* Figma実測 */

  .rnw-support__card-body {
    padding: 24px 40px;               /* Figma実測 */
    background-color: var(--rnw-white);
  }

  .rnw-support__card-title { font-size: 42px; }     /* Figma実測 */

  .rnw-support__card-catch { margin-top: 40px; }    /* Figma実測 */

  /* ---------------- Our Services ---------------- */

  .rnw-svc { padding-bottom: 80px; }  /* Figma実測 */

  .rnw-svc__head {
    position: relative;
    margin-bottom: 56px;              /* Figma実測 */
  }

  .rnw-svc__head-photo img { height: auto; aspect-ratio: 1440 / 400; max-height: 400px; }

  .rnw-svc__head-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;                     /* Figma実測 */
    max-width: 90%;
    margin: 0;
    padding: 32px;                    /* Figma実測 */
    transform: translate(-50%, -50%);
  }

  .rnw-svc__list {
    gap: 24px;                        /* Figma実測 */
    width: 100%;
    max-width: 1200px;                /* Figma実測 */
    margin: 0 auto;
    padding: 0 16px;
  }

  .rnw-svc__item { padding: 40px 56px 56px; }   /* Figma実測 */

  /* Figma 453:36048 は「バッジ＋本文」のまとまり（453:36049）と
     ボタン列（453:36061）を gap56 で並べ、まとまりの中は gap24。
     ここではSPと同じくマージンで取る（gapと二重に効かせない）。 */
  .rnw-svc__body {
    flex-direction: row;
    gap: 24px;                        /* Figma実測 */
  }

  .rnw-svc__text {
    display: flex;
    order: 0;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
  }

  .rnw-svc__photo {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
    margin-top: 0;
  }

  /* PCの写真はFigma（1706:13803）で高さ372px固定・幅は残り半分。
     ※以前はこの img がすぐ下の .rnw-svc__title とセレクタが繋がっており、
       写真にピンクの帯と padding が乗って高さもSPの200pxのままだった。 */
  .rnw-svc__photo img { height: 372px; }   /* Figma実測 */

  .rnw-svc__title {
    padding: 24px 8px;                /* Figma実測 */
    border-radius: 8px;
    background-color: var(--rnw-bg-main);
    font-size: 24px;                  /* Figma実測 */
  }

  .rnw-svc__btns {
    flex-direction: row;
    justify-content: center;
    gap: 24px;                        /* Figma実測 */
    margin-top: 56px;                 /* Figma実測（本文下端→ボタン上端） */
  }

  .rnw-svc__btns > * { width: 400px; }   /* Figma実測 */

  /* ---------------- Trusted Worldwide. ---------------- */

  .rnw-voice {
    padding-bottom: 56px;
    background-color: var(--rnw-bg-main);
  }

  .rnw-voice__head {
    position: relative;
    margin-bottom: 56px;              /* Figma実測 */
  }

  .rnw-voice__head-photo img { height: auto; aspect-ratio: 1440 / 400; max-height: 400px; }

  .rnw-voice__head-box {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 24px;                        /* Figma実測 */
    width: 640px;                     /* Figma実測 */
    max-width: 90%;
    margin: 0;
    padding: 32px;                    /* Figma実測 */
    transform: translate(-50%, -50%);
  }

  /* PCはリード文がボックスの中に入る（Figma 453:36121） */
  .rnw-voice__lead { margin: 0; }

  .rnw-voice__slider {
    width: 100%;
    max-width: 1280px;                /* Figma実測 */
    margin: 0 auto;
    padding: 0 16px;
  }

  .rnw-voice .rnw-slider__nav {
    gap: 30px;                        /* Figma実測（40+30+260+30+40 = 400） */
    width: 400px;
    margin-bottom: 32px;
  }

  .rnw-voice .rnw-slider__btn { width: 40px; height: 40px; }   /* Figma実測 */
  .rnw-voice .rnw-slider__bar { width: 260px; }                /* Figma実測 */

  .rnw-voice__btn {
    width: 400px;                     /* Figma実測 */
    margin: 56px auto 0;
  }

}

/* 1441px以上：FV写真を1440px時の大きさ・位置で固定し、中央1440pxの帯に置く。
   枠の高さは max-height:707px で止まるのに写真は幅なりに拡大し続けるため、
   広い画面では写真の下（赤ちゃんの顔）が切れていた。2026-09-25
   値はPCブロックの％指定を1440px基準で換算したもの
   （幅101.81% / 左29.64% / 上-14.81%×707 / グラデーション32.72%・50%）。 */
@media only screen and (min-width: 1441px) {
  .rnw-fv__media img {
    top: -104.71px;
    left: calc((100% - 1440px) / 2 + 426.82px);
    width: 1466.06px;
  }

  .rnw-fv__media::before {
    background: linear-gradient(to right,
      #F6F7F9 calc((100% - 1440px) / 2 + 471.17px),
      rgba(246, 247, 249, 0) calc((100% - 1440px) / 2 + 720px));
  }
}


/* =====================================================================
   9. SPだけの文字指定（Figma 694:91540）
   ---------------------------------------------------------------------
   SPカンプとPCカンプで型が違うものだけをここに集める。
   PC値（694:35859 / 694:35950 / 694:36001 / 694:36036）は照合済みで、
   base とPCブロックの値はカンプどおり。差分はすべてSP側だった。

     FV見出し   PC:Lusitana・字間6.8669px → SP:Yu Mincho・字間1.2px
     FVリード   PC:16px Medium            → SP:12px Bold
     実績バー   PC:47.23/29.738/34/14px   → SP:27/17/14/8px
     本文類     PC:16px Medium            → SP:14px
     サービス説明 PC:16px Medium          → SP:14px Regular
     タグ       PC:18px                   → SP:14px（common.css 側）
   ===================================================================== */

@media only screen and (min-width: 768px) and (max-width: 1160px) {
  /* About：幅が狭くなると inner(アスペクト比)が低くなり、下固定のボックス上端
     （About Poppins）が左上のロゴ(logo_nanny_service)に衝突する。背景が白なので
     innerを高くすると写真下に白余白が出るため、重ね構造は維持し、
     ロゴを小さく・少し上へ、見出し/リードを縮小、ボックス余白を詰めて衝突を回避。 */
  .rnw-about__logo { width: 17%; top: 4%; }
  .rnw-about .rnw-h2 { font-size: clamp(26px, 3.45vw, 40px); }
  .rnw-about__lead { font-size: clamp(13px, 1.4vw, 16px); }
  .rnw-about__box { gap: 16px; padding: 24px; }
}

@media only screen and (min-width: 768px) and (max-width: 870px) {
  /* 870px以下：まだ衝突するため、ロゴをさらに小さく・上へ、
     ボックスの余白・gapと見出し/リードをもう一段詰める。 */
  .rnw-about__logo { width: 14%; top: 3%; }
  .rnw-about .rnw-h2 { font-size: clamp(22px, 3.1vw, 30px); }
  .rnw-about__lead { font-size: clamp(12px, 1.5vw, 14px); }
  .rnw-about__box { gap: 12px; padding: 18px; }
}

@media only screen and (min-width: 768px) and (max-width: 906px) {
  /* 907px以下：写真が低くなりカードが上にはみ出して隠れるため、
     文字をさらに縮小してカードを短くし、写真内で天地中央に置く（下げる）。 */
  .rnw-fv__box { top: 50%; transform: translateY(-50%); }
  .rnw-fv__title-main { font-size: clamp(22px, 3.8vw, 34px); }
  .rnw-fv__title-sub  { font-size: clamp(15px, 2.3vw, 20px); }
  .rnw-fv__lead { font-size: clamp(13px, 1.5vw, 14px); }
}

/* 幅の広いSP（590〜767px）：FV写真は 375:490 のまま幅なりに伸びると、白ボックスが
   最初の画面に入らない。589px幅のときの高さ（約769px）で頭打ちにし、切るときは上を基準にする。2026-09-27 */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-fv__media { max-height: 769px; }
  .rnw-fv__media img { object-position: center top; }

  /* 見出しの白ボックス：300px固定だと広い幅で細く見えるので、左右16pxを残して幅いっぱいに（ナニーと同じ）。 */
  .rnw-support__head-box,
  .rnw-svc__head-box,
  .rnw-voice__head-box { width: auto; margin-left: 16px; margin-right: 16px; }

  /* Support のカード2枚：300px固定だと右に余白が残るので、余った幅を2枚で分けて広げる
     （300px未満には縮めない＝入りきらない幅では今までどおり横スクロール）。 */
  .rnw-support__card { flex: 1 0 300px; }
}

@media only screen and (max-width: 767px) {

  /* FV見出し（Figma 694:91545〜91547）。SPだけ明朝で字間も詰まる。 */
  .rnw-fv__title {
    font-family: var(--rnw-font-serif);
    letter-spacing: 1.2px;
  }

  /* FVリード（Figma 694:91549） */
  .rnw-fv__lead {
    font-size: 12px;
    font-weight: 700;
  }

  /* 実績バー（Figma 694:91564〜91618）。
     ※カンプは「Highest Quality」14px／「Like Family」13px と1pxだけ違うが、
       同じ役割なので14pxに揃えている。 */
  .rnw-stats__main--line { font-size: 14px; }
  .rnw-stats__num        { font-size: 27px; }
  .rnw-stats__unit       { font-size: 17px; }
  .rnw-stats__sub        { font-size: 8px; }

  /* 本文（Figma 694:91663 / 91704 / 91811） */
  .rnw-about__lead,
  .rnw-support__card-catch,
  .rnw-support__card-list,
  .rnw-voice__lead {
    font-size: 14px;
  }

  /* サービスの説明文だけ SPは Regular（Figma 694:91744） */
  .rnw-svc__desc {
    font-size: 14px;
    font-weight: 400;
  }

  /* お問い合わせの文（Figma 694:91863;3489:5812） */
  .rnw-contact__text { font-size: 20px; }
}


/* =====================================================================
   Support choice modal
   ===================================================================== */

.rnw-support-modal[hidden] {
  display: none;
}

.rnw-support-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.rnw-support-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .5);
}

.rnw-support-modal__body {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
}

.rnw-support-modal__dialog {
  padding: 40px 48px;
  border-radius: 16px;
  background-color: #FFFFFF;
}

.rnw-support-modal__title {
  margin: 0 0 32px;
  font-family: var(--rnw-font-jp);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: var(--rnw-main-text, #8F2048);
}

.rnw-support-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-support-modal__item + .rnw-support-modal__item {
  border-top: 1px dashed #777777;
}

.rnw-support-modal__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  color: var(--rnw-text, #4A4A4A);
  font-family: var(--rnw-font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.rnw-support-modal__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--rnw-main-text, #8F2048);
}

.rnw-support-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: min(400px, calc(100% - 64px));
  margin: 24px auto 0;
  padding: 18px 32px;
  border: 0;
  border-radius: 999px;
  background-color: var(--rnw-main-text, #8F2048);
  color: #FFFFFF;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.2px;
  cursor: pointer;
}

.rnw-support-modal__close-mark {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

body.is-rnw-support-modal-open {
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .rnw-support-modal {
    padding: 20px 16px;
  }

  .rnw-support-modal__body {
    width: 100%;
  }

  .rnw-support-modal__dialog {
    padding: 28px 24px;
    border-radius: 12px;
  }

  .rnw-support-modal__title {
    margin-bottom: 20px;
    font-size: 24px;
  }

  .rnw-support-modal__link {
    padding: 22px 0;
    font-size: 18px;
  }

  .rnw-support-modal__close {
    width: min(320px, calc(100% - 32px));
    margin-top: 16px;
    padding: 16px 24px;
    font-size: 18px;
  }
}

/* Support card CTA: original alignment */
.rnw-support__card-btn {
  justify-content: space-between !important;
  text-align: left !important;
}

.rnw-support__card-btn > span:first-child {
  text-align: left !important;
}

.rnw-support__card-btn .rnw-btn__icon {
  margin-left: auto;
}



/* =====================================================================
   Contact section: center text and CTA
   ===================================================================== */

.rnw-contact__box {
  text-align: center;
}

.rnw-contact__text {
  text-align: center;
}

.rnw-contact__btn {
  margin-left: auto;
  margin-right: auto;
}


/* Modal must stay above the SP fixed CTA */
.rnw-support-modal {
  z-index: 2147483647;
}

body.is-rnw-support-modal-open {
  overflow: hidden;
}

/* Hide fixed/sticky bottom CTA while the modal is open.
   JS adds the body class only during this modal. */
body.is-rnw-support-modal-open .rnw-fixed-cta,
body.is-rnw-support-modal-open .rnw-follow-cta,
body.is-rnw-support-modal-open .rnw-sp-cta,
body.is-rnw-support-modal-open .rnw-bottom-cta {
  visibility: hidden;
}