@charset "UTF-8";

/* =====================================================================
   ポピンズ English リニューアル Poppins Nanny ページ専用CSS
   ---------------------------------------------------------------------
   本文は renewal/pages/nanny.html（固定ページ本文に貼り付け）。
   共通部分（ヘッダー・フッター・見出し h2・ボタン・タグ・スライダー・
   お客様の声カード・お問い合わせ）は renewal/css/common.css。

   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
     PC 453:35234 ／ SP 545:48853

   ■ 記述順
     SPファースト。768px以上でPCレイアウトに切り替える。
     （Figmaは PC 1440 / SP 375 の2種類のみ）
   ===================================================================== */

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

/* 本文要素の余白リセット。
   ▼:where() で包んでいるのは、要素セレクタで詳細度が上がって
     後続のクラス指定（.rnw-card__body の padding 等）を
     打ち負かさないようにするため。front.css と同じ考え方。 */
.rnw-nanny :where(p, ul, ol, li, h2, h3, h4, table, thead, tbody, tr, th, td) {
  margin: 0;
  padding: 0;
}


/* =====================================================================
   ページ内で使い回す部品
   ===================================================================== */

/* --- カード列（横スクロール）。PCでは3枚並びに切り替える --- */
.rnw-cards {
  display: flex;
  gap: 16px;                          /* Figma実測 */
  margin: 0;
  padding: 0 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

/* --- カード（Figma 453:35296 ほか）--- */
.rnw-card {
  display: flex;
  flex: 0 0 300px;
  flex-direction: column;
  scroll-snap-align: start;
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, .08));   /* Figma実測 */
}

.rnw-card__photo {
  background-color: var(--rnw-white);
  overflow: hidden;
}

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

.rnw-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;                          /* Figma実測 */
  padding: 16px;                      /* Figma実測 */
  background-color: var(--rnw-white);
}

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

.rnw-card__text {
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* --- 写真の上に重ねる白ボックス（各セクションの見出し帯） --- */
.rnw-nanny .rnw-headbox {
  position: relative;
  width: 300px;                       /* Figma SP実測 */
  margin: -40px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}


/* --- ページ内ナビのアンカー先。固定ヘッダー（＋PCの帯）に隠れないよう
       各セクションの上に逃げを作る。 --- */
.rnw-nanny [id] {
  scroll-margin-top: calc(var(--rnw-header-h-sp) + 16px);
}


/* =====================================================================
   0. ページ内ナビ（SP：Figma 545:48905）
   ---------------------------------------------------------------------
   PCはヘッダー下の帯（renewal/pagenav.php → common.css「8-2」）。
   SPはFigmaが本文の途中（「Find Your Hotel & Book Now」の下）に置いている
   ため、本文HTML側に出している。帯が出ない 1023px以下（SP・タブレット）で
   表示する。
   ===================================================================== */

.rnw-pagenav--sp {
  display: flex;
  flex-direction: column;
  gap: 8px;                           /* Figma実測 */
  padding: 56px 24px;                 /* Figma実測 */
  background: var(--rnw-contact-gra); /* Figma実測 nanny/gra2 */
}

/* ▼align-items は基底（PC帯 .rnw-pagenav__list）が center を持っている。
     そのままだとSPカードの項目が文字幅に縮んで中央に寄るので、
     stretch で打ち消して全項目を同じ幅（カード幅いっぱい）に揃える
     （Figma 694:90501 は5項目とも同幅）。 */
.rnw-pagenav--sp .rnw-pagenav__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-pagenav--sp .rnw-pagenav__item { width: 100%; }

.rnw-pagenav--sp .rnw-pagenav__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Figma実測は上下も16pxだが、実機で詰まって見えるため上下だけ少し広げている。 */
  padding: 20px 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
  filter: drop-shadow(0 4px 28px rgba(0, 0, 0, .08));   /* Figma実測 */
  font-family: var(--rnw-font-jp);
  font-size: 12px;                    /* Figma実測 common/text/caption */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-decoration: none;
  color: var(--rnw-text);
}

.rnw-pagenav--sp .rnw-pagenav__icon {
  width: 14px;                        /* Figma実測 */
  height: 14px;
}

/* SPカードのホバー（Figmaに指定なし。PC帯と同じ塗り反転に揃えている）。
   アイコンは currentColor なので文字色に追従する。 */
@media (hover: hover) {
  .rnw-pagenav--sp .rnw-pagenav__link:hover {
    opacity: 1;
    background-color: var(--rnw-main-text);
    color: var(--rnw-white);
  }
}


/* =====================================================================
   1. FV（Figma PC 1702:13574［差し替え後］ ／ SP 545:48855）
   ---------------------------------------------------------------------
   PCは2026-09-17に差し替え。写真を右へ寄せ、左に地色（#EFF1F3）を出し、
   白カードを左端に置く構成（旧：写真が全面・カード右）。SPは変更なし。
   ===================================================================== */

.rnw-nfv {
  position: relative;
  padding-bottom: 32px;
  background-color: var(--rnw-white);
}

.rnw-nfv__media {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 490;            /* Figma SP実測 */
  overflow: hidden;
}

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

/* 紙のテクスチャ（Figma image 4 / mix-blend-darken・opacity 40%）。
   アセットはトップページと同一のため front/ のものを共用する。 */
.rnw-nfv__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-nfv__box {
  position: relative;
  /* Figma SP実測は -224px（写真490の上端から266の位置）だが、白ボックスが
     人物に被るためトップと同じく150px下げている。2026-09-17 */
  margin: -74px 16px 0;
  padding: 16px;
  background-color: rgba(255, 255, 255, .9);
}

.rnw-nfv__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--rnw-font-display);
  font-weight: 400;
  letter-spacing: 6.8669px;           /* Figma実測 */
}

.rnw-nfv__title-main {
  display: block;
  font-size: 26px;
  line-height: 1.3;
  color: var(--rnw-main-text);        /* Figma実測 nanny/text/accent */
}

.rnw-nfv__title-sub {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  color: var(--rnw-text);
}

.rnw-nfv__lead {
  margin-top: 11px;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}


/* =====================================================================
   2. 提携ホテルのロゴ（Figma PC 453:35244 ／ SP 545:48862）
   ===================================================================== */

.rnw-hotellogo {
  padding: 32px 0;
  background-color: var(--rnw-white);
  /* ▼要確認：Figmaの section（453:35244）に黒1pxの線が入っている。
     ガイド用の残りに見えるが、デザイン値どおり実装している。
     不要なら次の1行を消すだけでよい。 */
  border: 1px solid #000000;
}

.rnw-hotellogo__title {
  margin-bottom: 24px;                /* Figma実測 */
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text);
}

/* SPは横スクロール（Figmaは幅1282pxのまま画面外へ出ている） */
.rnw-hotellogo__list {
  display: flex;
  gap: 14px;                          /* Figma実測 */
  margin: 0;
  padding: 0 16px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

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

/* ロゴ画像は未支給。Figmaはグレーのプレースホルダ。 */
/* ロゴが支給されてリンクになったとき用のホバー。 */
@media (hover: hover) {
  a.rnw-hotellogo__item:hover { opacity: .8; }
}

.rnw-hotellogo__item {
  flex: 0 0 202px;                    /* Figma実測 */
  height: 129.671px;                  /* Figma実測 */
  background-color: #C1C1C1;          /* Figma実測 */
}


/* =====================================================================
   3. Find Your Hotel & Book Now（Figma PC 453:35254 ／ SP 545:48872）
   ===================================================================== */

.rnw-book {
  padding: 56px 16px 40px;
  background-color: var(--rnw-white);   /* Figma実測 PC 694:36331 ／ SP 694:90532 */
}

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

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

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

.rnw-book__lead {
  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);
}


/* =====================================================================
   4. What We Offer（Figma PC 453:35287 ／ SP 545:48936）
   ===================================================================== */

.rnw-offer {
  padding-bottom: 40px;
  background-color: var(--rnw-bg-main);   /* Figma実測 nanny/bg */
}

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

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

.rnw-offer__head-box {
  position: relative;
  width: 300px;
  margin: -40px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}


/* =====================================================================
   5. Our Prestigious Partners ＋ ホテル一覧
      （Figma PC 453:35318 ／ SP 545:48978）
   ===================================================================== */

.rnw-partners {
  padding-bottom: 40px;
  background: var(--rnw-contact-gra);     /* Figma実測 nanny/gra2 */
}

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

.rnw-partners__head-photo img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rnw-partners__head-box {
  position: relative;
  width: 300px;
  margin: -40px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}

.rnw-partners__note {
  margin-top: 16px;
  font-family: var(--rnw-font-jp);
  font-size: 14px;                    /* Figma実測 */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text);
}

.rnw-partners__panel {
  margin: 0 16px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
}

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

/* 見出し下の点線（Figma 453:35329 Vector 13）。
   border-style:dashed は破線長を指定できないため背景で再現する。 */
.rnw-partners__panel-title::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 32px;                   /* Figma実測（40 → 104） */
  background-image: repeating-linear-gradient(
    to right,
    var(--rnw-main) 0 4px,
    transparent 4px 8px
  );
}

/* ---------- ホテル一覧（Figma 453:35330） ---------- */

.rnw-hotels__scroll {
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rnw-hotels {
  width: 100%;
  min-width: 700px;                   /* 3列が潰れない下限。SPは横スクロール */
  border-collapse: separate;
  border-spacing: 1.441px 0;          /* Figma実測（セル間の隙間） */
  font-family: var(--rnw-font-jp);
}

.rnw-hotels__th {
  padding: 8.644px 14.407px;          /* Figma実測 */
  background-color: var(--rnw-caption);   /* Figma実測 common/text/gray */
  font-size: 12.966px;                /* Figma実測 */
  font-weight: 700;
  line-height: 15.775px;              /* Figma実測 */
  letter-spacing: .4322px;            /* Figma実測 */
  color: var(--rnw-white);
  white-space: nowrap;
}

.rnw-hotels__th--hotel   { width: 244.914px; text-align: center; }  /* Figma実測 */
.rnw-hotels__th--place   { width: 432.201px; text-align: left; }    /* Figma実測 */
.rnw-hotels__th--contact { text-align: left; }

/* エリア見出しの行（Figma 453:35338） */
.rnw-hotels__area td {
  padding: 10.805px 14.407px 11.886px;   /* Figma実測 */
  background-color: var(--rnw-main);     /* Figma実測 nanny/main */
  font-size: 12.966px;
  font-weight: 700;
  line-height: 15.775px;
  letter-spacing: .4322px;
  text-align: center;
  color: var(--rnw-white);
}

.rnw-hotels__name,
.rnw-hotels__place {
  padding: 8.644px 14.407px;          /* Figma実測 */
  font-size: 10.805px;                /* Figma実測 */
  font-weight: 400;
  line-height: 15.775px;
  letter-spacing: .4322px;
  color: var(--rnw-text);
}

.rnw-hotels__name {
  background-color: var(--rnw-bg2);   /* Figma実測 common/bg2 */
  text-align: center;
}

.rnw-hotels__place {
  border-bottom: 1.441px solid var(--rnw-white);   /* Figma実測 */
  background-color: var(--rnw-white);
}

.rnw-hotels__link { width: 200px; }   /* Figma実測 */

/* ▼リンク先が未確定のため今は <span>。<a> にしたときにも効くよう
     ホバーを先に用意してある。 */
@media (hover: hover) {
  a.rnw-hotels__btn:hover { opacity: .8; }
}

.rnw-hotels__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40.699px;                   /* Figma実測 */
  padding: 10.805px 14.407px 11.886px;
  background-color: var(--rnw-main-text);   /* Figma実測 nanny/text/accent */
  font-size: 14.407px;                /* Figma実測 */
  font-weight: 500;
  line-height: 1;
  letter-spacing: .3602px;            /* Figma実測 */
  text-align: center;
  color: var(--rnw-white);
}


/* =====================================================================
   6. The Poppins Quality Standard（Figma PC 453:35535 ／ SP 545:49256）
   ===================================================================== */

.rnw-quality {
  padding-bottom: 40px;
  background: var(--rnw-contact-gra);     /* Figma実測 nanny/gra2 */
}

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

.rnw-quality__head-photo img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rnw-quality__head-box {
  position: relative;
  width: 300px;
  margin: -40px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}

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


/* =====================================================================
   7. Moments for You（Figma PC 453:35566 ／ SP 545:49300）
   ===================================================================== */

.rnw-scene {
  padding-bottom: 40px;
  background: var(--rnw-contact-gra);
}

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

/* SPは画面幅いっぱい（100%）。高さは画像の比率どおりに伸ばし、トリミングしない。
   SP用画像は375:200で書き出してある。
   ※<picture> はインライン要素なので、block にして幅を持たせないと中の img が
     HTMLの width 属性（375px）のまま出て左右に余白ができる。 */
.rnw-scene__head-photo {
  display: block;
  /* 親に左右の余白が付いていても画面幅いっぱいに出す（フルブリード）。
     100%だと親の内寸までしか広がらず、左右が空いてしまう。 */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.rnw-scene__head-photo picture {
  display: block;
  width: 100%;
}

.rnw-scene__head-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.rnw-scene__head-box {
  position: relative;
  width: 300px;
  /* 写真との重なりはFigma実測40pxだが、少し下げて20pxにしている。2026-09-17 */
  margin: -20px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}

.rnw-scene__lead {
  margin-top: 16px;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text);
}


/* =====================================================================
   8. How to Arrange（Figma PC 453:35597 ／ SP 545:49342）
   ===================================================================== */

.rnw-arrange {
  padding: 40px 16px;
  background: var(--rnw-contact-gra);
}

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

.rnw-arrange__item {
  display: flex;
  align-items: center;
  gap: 12px;                          /* Figma実測 */
  padding: 16px 12px;                 /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
}

.rnw-arrange__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;                        /* Figma実測 */
  height: 50px;
  border-radius: 31.737px;            /* Figma実測 */
  background-color: #FAF7F2;          /* Figma実測 common/bg */
  font-family: var(--rnw-font-display);
  font-size: 22px;                    /* Figma実測 */
  line-height: 1;
  letter-spacing: 1.2px;
  color: var(--rnw-main-text);
}

.rnw-arrange__text {
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}


/* =====================================================================
   9. Pricing（Figma PC 453:35619 ／ SP 545:49366）
   ===================================================================== */

.rnw-pricing {
  padding: 40px 16px;
  background-color: var(--rnw-bg2);   /* Figma実測 common/bg2 */
}

.rnw-pricing__box {
  margin-top: 32px;
  padding: 16px 12px;                 /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  font-size: 16px;                    /* Figma実測 */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text);
}


/* =====================================================================
   10. Guest Testimonials（Figma PC 453:35625 ／ SP 545:49375）
   ===================================================================== */

/* ▼Guest Testimonials は非表示にしている（2026-08-31 指示）。
     マークアップ（renewal/pages/nanny.html の .rnw-reviews）とスタイルは
     そのまま残してあるので、出すときはこの1ブロックを消すだけでよい。
     あわせて renewal/pagenav.php のSPナビからも Testimonials を外している。 */
.rnw-reviews { display: none; }

.rnw-reviews {
  padding-bottom: 40px;
  background: var(--rnw-contact-gra);
}

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

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

.rnw-reviews__head-photo img {
  display: block;
  width: 50%;
  height: 200px;
  object-fit: cover;
}

.rnw-reviews__head-box {
  position: relative;
  width: 300px;
  margin: -40px auto 0;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, .8);
}

/* ▼絞り込みタグ（旧 453:35634 / .rnw-reviews__filter）はFigma改訂
   （694:36311 / 694:90482）で削除されたため、マークアップごと外した。
   .rnw-tag--current は他で使う可能性があるため定義は残す。 */

/* 選択中のタグ（Figma 453:35635 "ALL"）は塗り。 */
.rnw-tag--current {
  border-color: var(--rnw-white);
  background-color: var(--rnw-main-text);
  color: var(--rnw-white);
}

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


/* =====================================================================
   11. FAQ（Figma PC 453:35705 ／ SP 545:49435）
   ---------------------------------------------------------------------
   開閉は <details>/<summary>。JSは使わない。
   ===================================================================== */

.rnw-faq {
  padding: 40px 16px;
  background-color: var(--rnw-bg2);   /* Figma実測 common/bg2 */
}

/* FAQの見出しだけ左寄せ（Figma 453:35706 は items-start） */
.rnw-h2--left { text-align: left; }

.rnw-faq__list { margin-top: 32px; }

.rnw-faq__item { border-bottom: 1px solid var(--rnw-text); }   /* Figma実測 */

.rnw-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;                          /* Figma実測 */
  padding: 20px 0;                    /* Figma実測 */
  cursor: pointer;
  list-style: none;                   /* 既定の三角を消す */
}

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

@media (hover: hover) {
  .rnw-faq__q:hover { opacity: .7; }
}

.rnw-faq__q { transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
  .rnw-faq__q { transition: none; }
}

.rnw-faq__mark {
  flex-shrink: 0;
  font-family: var(--rnw-font-display);
  font-size: 24px;                    /* Figma実測 */
  font-weight: 700;
  line-height: 36px;                  /* Figma実測 */
  color: var(--rnw-text);
}

.rnw-faq__qtext {
  flex: 1 1 auto;
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 右端の ＋／− （Figma 453:35713 / 453:35720） */
.rnw-faq__q::after {
  content: '';
  flex-shrink: 0;
  width: 13px;                        /* Figma実測 */
  height: 13px;
  background-color: var(--rnw-text);
  -webkit-mask: url('../../img/nanny/icon_faq_plus.svg') center / contain no-repeat;
          mask: url('../../img/nanny/icon_faq_plus.svg') center / contain no-repeat;
}

.rnw-faq__item[open] .rnw-faq__q::after {
  -webkit-mask-image: url('../../img/nanny/icon_faq_minus.svg');
          mask-image: url('../../img/nanny/icon_faq_minus.svg');
}

.rnw-faq__a {
  display: flex;
  gap: 10px;                          /* Figma実測 */
  padding: 0 0 20px 40px;             /* Figma実測 */
}

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


/* =====================================================================
   12. PCレイアウト（768px以上）
   ===================================================================== */

/* SPのページ内ナビはPCでは出さない（PCはヘッダー下の帯）。
   帯の表示はヘッダーと同じ 1024px で切り替わるので、こちらも同じ幅で切る。
   768〜1023pxはヘッダーがドロワー＝帯が出ないため、このカードを残す。 */
@media only screen and (min-width: 1024px) {
  .rnw-pagenav--sp { display: none; }
}


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

  /* アンカーの逃げはPCヘッダー＋帯のぶん。
     768〜1023pxでは common.css 側で --rnw-header-h-pc がSPの高さに、
     --rnw-pagenav-h が0pxに落ちるので、この式のままで正しい値になる。 */
  .rnw-nanny [id] {
    scroll-margin-top: calc(var(--rnw-header-h-pc) + var(--rnw-pagenav-h) + 16px);
  }

  /* ---------------- 内容幅の頭打ちについて ----------------
     Figmaのアートボードは1440px。左右paddingだけだと画面幅なりに内容が
     伸びるので、1440pxを超えたぶんは padding に足して内容の最大幅を保つ。
     背景は全幅のままにしたいので、セクションに max-width は掛けない。

       px120 のセクション → 内容 1200px（1440 - 120*2）
       px80  のセクション → 内容 1280px（1440 - 80*2）

     各セクションの padding にそのまま書いてある（下記）。
     ------------------------------------------------------ */

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

  .rnw-nfv { padding-bottom: 0; }

  .rnw-nfv__media {
    aspect-ratio: 1440 / 707;         /* Figma実測 */
    max-height: 707px;
    /* PCのトリミングでは写真が左端まで届かず、この地色が出る（下のimg指定を参照）。
       SPは写真が全面を覆うので見えない。 */
    background-color: #EFF1F3;        /* Figma実測（変数未登録） */
  }

  /* ▼PCのFV写真は object-fit:cover ではなく、Figmaのトリミング指定どおりに置く。
       Figma（1702:13575）は幅93.36% / 左35.13% / 上-13.39%（いずれも枠に対する％）。
       写真は右に寄り、枠の左側（0〜35.13%）には .rnw-nfv__media の地色が出る。
       写真ファイル自体は変更なし（旧デザインと同一アセット）。
       ※SPのトリミングは変わっていないため、SP側の cover 指定は残している。 */
  .rnw-nfv__media img {
    position: absolute;
    top: -13.39%;
    left: 35.13%;
    width: 93.36%;
    height: auto;
    /* common.css の `.rnw-page img { max-width:100% }` に負けて
       93.36% が丸められないよう解除しておく（トップFVと同じ理由）。 */
    max-width: none;
  }

  /* ボックスはFigmaで左端から80px（1702:13576 の left 80 / 1440）。
     1440pxを超える画面では、中央1440pxの帯の左端から80pxの位置に置く。 */
  .rnw-nfv__box {
    position: absolute;
    /* 広い画面は35.6%（Figma 251.77 / 707）。～1325pxで写真が低くなるとカードを
       写真内に収める位置まで上げ、さらに狭いと上端に隠れないよう床24px（430px≈カード高さ）。 */
    top: clamp(24px, calc(100% - 430px), 35.6%);
    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-nfv__title { gap: 7.424px; }   /* Figma実測 */
  /* 1325px以下でカード内文字を段階縮小（1325px以上は従来値）。 */
  .rnw-nfv__title-main { font-size: clamp(24px, 3.02vw, 40px); }
  .rnw-nfv__title-sub  { font-size: clamp(16px, 1.81vw, 24px); }
  .rnw-nfv__lead { margin-top: 20.415px; font-size: clamp(13px, 1.21vw, 16px); }

  /* ---------------- 提携ホテルのロゴ ---------------- */

  .rnw-hotellogo { padding: 56px 16px; }        /* Figma実測 */
  .rnw-hotellogo__title { font-size: 24px; }    /* Figma実測 */

  .rnw-hotellogo__list {
    justify-content: center;
    padding: 0;
    overflow-x: visible;
    flex-wrap: wrap;
  }

  /* ---------------- Find Your Hotel & Book Now ---------------- */

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

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

  .rnw-book__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-book__photo {
    position: absolute;
    top: 0;
    left: 21.9%;                      /* Figma実測 280 / 1280 */
    width: 78.1%;                     /* Figma実測 1000 / 1280 */
    margin: 0;
  }

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

  .rnw-book__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-book .rnw-h2 { font-size: 40px; }   /* Figma実測（このセクションだけ40px） */
  .rnw-book__lead { margin-top: 0; }

  /* ---------------- 見出し帯（写真の上に重ねる白ボックス）共通 ---------------- */

  .rnw-offer__head,
  .rnw-partners__head,
  .rnw-quality__head,
  .rnw-scene__head,
  .rnw-reviews__head {
    position: relative;
    margin-bottom: 56px;              /* Figma実測 */
  }

  /* 1440px幅いっぱいの帯（Figma 453:35320 / 453:35568 / 453:35627） */
  /* SPで入れているフルブリードはPCでは不要（帯がもともと全幅）。 */
  .rnw-scene__head-photo {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }

  .rnw-partners__head-photo img,
  .rnw-scene__head-photo img,
  .rnw-reviews__head-photo img {
    height: auto;
    max-height: 400px;                /* Figma実測 */
    object-fit: cover;
  }

  .rnw-partners__head-photo img,
  .rnw-scene__head-photo img { aspect-ratio: 1440 / 400; }

  .rnw-reviews__head-photo img { aspect-ratio: 720 / 400; }

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

  /* ---------------- What We Offer ---------------- */

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

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

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

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

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

  /* ---------------- Our Prestigious Partners ---------------- */

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

  .rnw-partners__note { margin-top: 24px; }

  .rnw-partners__panel {
    width: 100%;
    max-width: 1200px;                /* Figma実測 */
    margin: 0 auto;
    padding: 40px;                    /* Figma実測 */
  }

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

  .rnw-hotels { min-width: 0; }

  /* ---------------- The Poppins Quality Standard ---------------- */

  .rnw-quality {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;                        /* Figma実測 */
    padding: 120px max(80px, calc((100% - 1280px) / 2));   /* Figma実測 px80 */
  }

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

  /* このセクションだけ写真が右・ボックスが左（Figma 453:35537） */
  .rnw-quality__head-photo {
    position: absolute;
    top: 0;
    right: 0;
    width: 78.1%;                     /* Figma実測 1000 / 1280 */
  }

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

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

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

  /* ---------------- Moments for You ---------------- */

  .rnw-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;                        /* Figma実測 */
    padding: 0 0 80px;                /* Figma実測（上余白なし） */
  }

  .rnw-scene__head { width: 100%; margin-bottom: 0; }

  .rnw-scene__head-box { display: flex; flex-direction: column; gap: 24px; }

  .rnw-scene__lead { margin-top: 0; font-size: 16px; }

  /* ---------------- カード列（PCは3枚並び） ---------------- */

  .rnw-offer .rnw-slider,
  .rnw-quality .rnw-slider,
  .rnw-scene .rnw-slider {
    /* 従来 width:100%/max-width:1280 だと、ビューポート～1280以下で全幅になり
       カードが端に接触する。min()で上限1280、それ以下でも左右合計48px（24px）の余白を確保。 */
    width: min(100% - 48px, 1280px);
    margin-inline: auto;
  }

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

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

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

  .rnw-card__photo img { height: 250px; }   /* Figma実測 */

  .rnw-card__title { font-size: 24px; }     /* Figma実測 */

  /* ---------------- How to Arrange ---------------- */

  .rnw-arrange {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;                        /* Figma実測 */
    padding: 80px max(120px, calc((100% - 1200px) / 2));   /* Figma実測 px120 */
  }

  .rnw-arrange__list {
    flex-direction: row;
    gap: 16px;                        /* Figma実測 */
    width: 100%;
    margin-top: 0;
  }

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

  /* ---------------- Pricing ---------------- */

  .rnw-pricing {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 56px;                        /* Figma実測 */
    padding: 80px max(120px, calc((100% - 1200px) / 2));   /* Figma実測 px120 */
  }

  .rnw-pricing .rnw-h2 { width: 343px; flex-shrink: 0; }   /* Figma実測 */

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

  /* ---------------- Guest Testimonials ---------------- */

  .rnw-reviews {
    padding-bottom: 80px;
  }

  .rnw-reviews__head { width: 100%; }


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

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

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

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

  /* ---------------- FAQ ---------------- */

  .rnw-faq { padding: 80px max(120px, calc((100% - 1200px) / 2)); }   /* Figma実測 px120 */

  .rnw-faq__list { margin-top: 32px; }   /* Figma実測 */
}

/* 1441px以上：FV写真を1440px時の大きさ・位置で固定し、中央1440pxの帯に置く。
   枠の高さは max-height:707px で止まるのに写真は幅なりに拡大し続けるため、
   広い画面では写真の下（赤ちゃんの顔）が切れていた。トップFVと同じ対処。2026-09-26
   値はPCブロックの％指定を1440px基準で換算したもの
   （幅93.36% / 左35.13% / 上-13.39%×707）。 */
@media only screen and (min-width: 1441px) {
  .rnw-nfv__media img {
    top: -94.67px;
    left: calc((100% - 1440px) / 2 + 505.87px);
    width: 1344.38px;
  }
}


/* =====================================================================
   SPだけの地色（Figma 694:90482）
   ---------------------------------------------------------------------
   SPカンプとPCカンプで背景が食い違っているセクションだけをここで上書きする。
   PC側（694:36311）はカンプどおりなので base の値をそのまま使う。

     .rnw-nfv     FV      PC:白      → SP:common/bg2（写真の下に地色が出る）
     .rnw-offer   Offer   PC:nanny/bg → SP:common/bg2
     .rnw-quality Quality PC:nanny/gra2 → SP:common/bg2

   実測は Figma のセクションから直接ピクセルを拾ったもの（#EEE8DE）。
   ===================================================================== */

@media only screen and (min-width: 768px) and (max-width: 1040px) {
  /* quality：offerと同型。見出しボックス(top 62%)が幅狭で head をはみ出し
     下のカードに重なる。見出しは offer より短いので位置上げ中心＋軽めの縮小で収める。 */
  .rnw-quality__head-box { top: min(62%, calc(100% - 185px)); padding: 24px; }
  .rnw-quality__head-box .rnw-h2 { font-size: clamp(22px, 3.6vw, 36px); }
  .rnw-quality__head-box .rnw-h2__sub { font-size: clamp(16px, 2.1vw, 24px); }
}

@media only screen and (min-width: 768px) and (max-width: 1120px) {
  /* offer：見出しボックス(top 61.9%)が、幅が狭くなると head(aspect 1280/560)をはみ出し
     下のカードに重なる。見出しを縮小してボックスを短くし、位置も少し上げて head 内に収める。 */
  .rnw-offer__head-box { top: min(61.9%, calc(100% - 210px)); padding: 24px; }
  .rnw-offer__head-box .rnw-h2 { font-size: clamp(22px, 3.1vw, 32px); }
  .rnw-offer__head-box .rnw-h2__sub { font-size: clamp(16px, 1.8vw, 22px); }
}

@media only screen and (min-width: 768px) and (max-width: 1160px) {
  /* book(Find Your Hotel & Book Now)：Aboutと同型の重ね箱。幅が狭くなると
     下固定ボックスの見出しが左上ロゴに衝突するため、ロゴ/見出し/リード/余白を縮小。 */
  .rnw-book__logo { width: 17%; top: 4%; }
  .rnw-book .rnw-h2 { font-size: clamp(26px, 3.45vw, 40px); }
  .rnw-book__lead { font-size: clamp(13px, 1.4vw, 16px); }
  .rnw-book__box { gap: 16px; padding: 24px; }
}

@media only screen and (min-width: 768px) and (max-width: 870px) {
  /* 870px以下：まだ衝突するためもう一段縮小。 */
  .rnw-book__logo { width: 14%; top: 3%; }
  .rnw-book .rnw-h2 { font-size: clamp(22px, 3.1vw, 30px); }
  .rnw-book__lead { font-size: clamp(12px, 1.5vw, 14px); }
  .rnw-book__box { gap: 12px; padding: 18px; }
}

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

@media only screen and (max-width: 767px) {
  .rnw-book__photo img,
  .rnw-offer__head-photo img,
  .rnw-partners__head-photo img,
  .rnw-quality__head-photo img { object-position: center top; }
}

/* 幅の広いSP（590〜767px）：写真の高さを固定せず、元画像の比率（3:2）のまま出す＝切らない。
   589px以下は Figma SP実測の高さ固定のまま。2026-09-27
   ※Moments の見出し写真はもともと比率どおり（height:auto）なので対象外。 */
@media only screen and (min-width: 590px) and (max-width: 767px) {
  .rnw-book__photo img { height: auto; }

  .rnw-offer__head-photo img,
  .rnw-partners__head-photo img,
  .rnw-quality__head-photo img { height: auto; }

  /* 見出しの白ボックス：300px固定だと広い幅で細く見えるので、左右16pxを残して幅いっぱいに。 */
  .rnw-offer__head-box,
  .rnw-partners__head-box,
  .rnw-quality__head-box,
  .rnw-scene__head-box { width: auto; margin-left: 16px; margin-right: 16px; }
}

/* 700px前後ではSceneの白ボックスと文字を縮小し、写真との余白を確保する。 */
@media only screen and (min-width: 640px) and (max-width: 1023px) {
  .rnw-scene__head-box {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100% - 48px));
    margin-inline: auto;
    padding: 20px 24px;
    gap: 12px;
  }

  .rnw-scene__head-box .rnw-h2 { font-size: 32px; }
  .rnw-scene__head-box .rnw-h2__sub { font-size: 20px; }
  .rnw-scene__lead { margin-top: 0; font-size: 14px; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* 768〜1023px：PCの3列並びのままだと1枚が細く、文字が1行1〜2語で縦に伸びるため
     カード（Offer / Quality / Moments）は2列（3枚目は下の段）、How to Arrange は縦1列にする。2026-09-27
     カード写真は幅に比例（3:2）。PCの 250px 固定のままだと上下が大きく切れる。 */
  .rnw-cards { flex-wrap: wrap; }
  .rnw-card { flex: 0 0 calc((100% - 16px) / 2); }   /* gap 16px ぶんを引いて半分 */
  .rnw-card__photo img { height: auto; aspect-ratio: 3 / 2; }

  .rnw-arrange__list { flex-direction: column; }
  .rnw-arrange__item { flex: 0 0 auto; }

  /* Pricing：見出し（343px固定）と箱の横並びを縦にする。間隔はSPと同じ32px。 */
  .rnw-pricing { flex-direction: column; align-items: stretch; gap: 32px; }
  .rnw-pricing .rnw-h2 { width: auto; }
  .rnw-pricing__box { flex: 0 0 auto; }

  /* ページ内リンクのカード（What We Offer〜FAQ）：縦1列だと横に間延びするので2列にする。 */
  .rnw-pagenav--sp .rnw-pagenav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  /* ---------- 地色 ---------- */
  .rnw-nfv     { background-color: var(--rnw-bg2); }
  .rnw-offer   { background-color: var(--rnw-bg2); }
  .rnw-quality { background: none; background-color: var(--rnw-bg2); }

  /* ---------- FV（Figma 694:90484〜90490）----------
     SPだけ写真の上に黒10%が乗る。テクスチャ（::after）より下に敷く。
     見出しはPCと同じ Lusitana だが、字間とサイズが別値。
     リード文もSPだけ Lusitana Bold 10px（PCは Zen Kaku Medium 16px）。 */

  .rnw-nfv__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .1);
    pointer-events: none;
  }

  .rnw-nfv__title      { letter-spacing: 3.7px; }   /* Figma実測 694:90488 */
  .rnw-nfv__title-main { font-size: 23px; }         /* Figma実測 */

  .rnw-nfv__title-sub {
    font-size: 14px;                  /* Figma実測 694:90489 */
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1.2px;
  }

  .rnw-nfv__lead {
    font-family: var(--rnw-font-display);   /* Figma実測 Lusitana Bold */
    font-size: 10px;                        /* Figma実測 694:90490 */
    font-weight: 700;
  }

  /* ---------- 本文まわり（SP/text/defalut/medium＝14px）----------
     PCカンプは同じ箇所がすべて16pxなので、SPだけ落とす。
       .rnw-card__text    Figma 694:90593
       .rnw-book__lead    Figma 694:90564
       .rnw-arrange__text Figma 694:90982
       .rnw-faq__qtext    Figma 694:91058
       .rnw-faq__atext    Figma 694:91062 */
  .rnw-card__text,
  .rnw-book__lead,
  .rnw-arrange__text,
  .rnw-faq__qtext,
  .rnw-faq__atext {
    font-size: 14px;
  }

  /* Pricing の箱（Figma 694:91003）。SPは本文と同じ14px Medium・左寄せ。
     PCカンプ（694:36701）は16px Bold・中央のまま。 */
  .rnw-pricing__box {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }
}

/* Center the Contact Poppins button on the Nanny page. */
.rnw-nanny .rnw-contact__btn {
  margin-left: auto;
  margin-right: auto;
}