@charset "UTF-8";

/* =====================================================================
   ポピンズ English リニューアル 共通CSS
   ---------------------------------------------------------------------
   - 旧 style.css と同居するため、全クラスに `rnw-` を付与
     （旧テーマ・旧CSS・旧JSに rnw 接頭辞は1件も無いことを確認済み）
   - 旧 style.css は編集しない。要素セレクタ（header / section / h1 / ul）を
     持つため、下の「旧CSSの打ち消し」ブロックで .rnw-* 側から潰している
   - 色は全てCSS変数経由。値はFigma登録バリアブルを正としている

   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
     PCヘッダー          373:37194  "type=English, page=TOP"
     PC展開 Visitors     373:38926
     PC展開 Residents    373:38956
     SPヘッダー          363:34281
     SP追従CTA           363:34579
   ===================================================================== */

/* Lusitana … FVの英字見出し（Figma 453:35891 / 453:35892）専用
   Noto Serif JP … フッターのサイトマップ（Figma 453:36198）
   Prata     … フッターの区切り「|」（Figma 453:36198）。旧 header.php も
               同じフォントを読み込んでいるが、プレビュー単体でも出るよう
               ここでも指定しておく。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400&family=Lusitana:wght@400;700&family=Prata&display=swap');

/* =====================================================================
   1. 変数
   ===================================================================== */

:root {
  /* -------------------------------------------------------------
     カラー：全プロパティ共通（Figma登録バリアブル）
     ------------------------------------------------------------- */
  --rnw-text:    #444444;  /* 本文       common/text/bk */
  --rnw-caption: #626262;  /* キャプション・プレースホルダ common/text/gray */
  --rnw-white:   #FFFFFF;  /* common/white */
  --rnw-accent:  #912344;  /* アクセント common/accent/red（PC CTA・SP CTA右） */
  --rnw-gold:    #C9A96E;  /* common/accent/gold */
  --rnw-bg2:     #EEE8DE;  /* common/bg2（実績バーの地色 Figma 453:35894） */

  /* -------------------------------------------------------------
     タイポグラフィ
     ---------------------------------------------------------------
     ▼MOBO（実績バーの数字 Figma 453:35909 など）はフォントワークスの
       商用フォントで、Google Fonts等のWebフォント配信が無い。
       ライセンス・配信方法が未確定のため、指定だけ入れて実表示は
       --rnw-font-jp にフォールバックさせている（educareと同じ扱い）。
     ▼見出し（PC/title/h2）は Yu Mincho Pr6N。Webフォント配信が無いため
       OS搭載の明朝でフォールバックする。英字はTimes系に落ちる。
     ------------------------------------------------------------- */
  --rnw-font-jp:      'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --rnw-font-mincho:  'Noto Serif JP', 'Yu Mincho', YuMincho, serif;  /* フッターのサイトマップ */
  --rnw-font-prata:   'Prata', 'Times New Roman', serif;              /* フッターの区切り「|」 */
  --rnw-font-display: 'Lusitana', 'Times New Roman', serif;
  --rnw-font-serif:   'Yu Mincho Pr6N', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Times New Roman', serif;
  --rnw-font-mobo:    'MOBO', 'MOBO-SemiBold', var(--rnw-font-jp);

  /* -------------------------------------------------------------
     レイアウト
     ---------------------------------------------------------------
     ヘッダー高はFigma実測（PC 88px / SP 59px）。
     ヘッダーは position:fixed のため、body 側に同じ分の余白を取る。
     ------------------------------------------------------------- */
  --rnw-header-h-pc: 88px;
  --rnw-header-h-sp: 59px;
  --rnw-content-max: 1440px;  /* Figmaのアートボード幅 */
  --rnw-z-header:  200;       /* 旧 header の z-index:150 より上 */
  --rnw-z-menu:    210;      /* ドロワーは自前のヘッダー行を持つのでヘッダーより上 */
  --rnw-z-spcta:   180;
  --rnw-z-pagenav: 170;       /* ページ内ナビ帯。ヘッダーより下、本文より上 */

  /* ページ内ナビ帯の高さ。header.php が body に data-pagenav を出す。
     帯は position:fixed で本文を押し下げないため、この値は
     「本文の上余白」と「フッター下の逃げ」の計算にだけ使う。 */
  --rnw-pagenav-h: 0px;

  /* SP追従CTAの高さ（Figma 363:34579 実測 55.7px）。
     本文下端にこの分の余白を確保するために使う。 */
  --rnw-spcta-h: 56px;
}

/* -------------------------------------------------------------
   カラー：プロパティ可変（English）
   ---------------------------------------------------------------
   header.php が <body data-property="english"> を出力する。
   判定は renewal/functions-renewal.php の rnw_property()。

   英語サイトはナニー系の配色（nanny/*）をベースにしている。
   ------------------------------------------------------------- */
[data-property="english"] {
  --rnw-main:         #F6BECA;  /* メイン       nanny/main（SP CTA左・タグ枠線） */
  --rnw-bg-main:      #FAEEF1;  /* 背景         nanny/bg（見出し帯・展開中ナビ） */
  --rnw-main-text:    #BC326C;  /* メイン文字   nanny/text/accent（見出し・タグ文字） */

  --rnw-cta-bg:       #912344;  /* CTA背景      common/accent/red */
  --rnw-cta-text:     #FFFFFF;

  /* お問い合わせセクションの背景グラデーション（Figma 453:36187 / nanny/gra2）。
     停止位置52.404%は familycare / educare のお問い合わせ背景と同一。 */
  --rnw-contact-gra:  linear-gradient(to bottom, #FCF7F8 0%, #F6BECA 52.404%);

  /* ▼要確認：PCナビ展開パネルの上罫線。
     Figmaの English 列にある展開バリアント（373:38926 / 373:38956）は
     コンポーネント名が "type=educare" のままで、罫線色も educare/main
     #00429A が入っている。エデュケアのバリアントを複製した名残の可能性が
     高いが、デザイン値どおり実装している。英語サイトの配色に寄せるなら
     var(--rnw-main-text) に変えるだけでよい。 */
  --rnw-panel-border: #00429A;
}


/* =====================================================================
   2. 旧 style.css の打ち消し
   ---------------------------------------------------------------------
   旧CSSは要素セレクタを持つため、リニューアル範囲だけ個別に無効化する。
     header  { border-top:3px #fcdeec / box-shadow / z-index:150 }
     section { width:1000px; margin:0 auto }   ← 新デザインの <section> を潰す
     ul      { list-style:none }               ← カード内の箇条書きが消える
     body    { font-family:'Prata'; font-size:14px; line-height:24px }
   ===================================================================== */

/* ページ内リンク（#アンカー）をなめらかに送る。
   停止位置は各ページCSSの scroll-margin-top で固定ヘッダーぶんを逃がしている。
   JSは使わない（旧 js/smooth-scroll.js は読み込んでいない）。 */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.rnw-body {
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  line-height: 1.8;
  color: var(--rnw-text);
  /* ヘッダーが position:fixed のぶんを本文で確保する */
  padding-top: var(--rnw-header-h-sp);
}

/* box-sizing はリニューアル範囲の全ルートに掛ける。
   旧 style.css は box-sizing を一切指定していないため、指定を漏らすと
   その要素だけ content-box のままになり、Figma実測の height に padding が
   外側から加算されて高さが狂う（実際にページ内ナビ帯で発生した）。
   ルートを増やしたらここにも足すこと。 */
.rnw-header,
.rnw-header *,
.rnw-menu,
.rnw-menu *,
.rnw-spcta,
.rnw-spcta *,
.rnw-pagenav,
.rnw-pagenav *,
.rnw-footer,
.rnw-footer * {
  box-sizing: border-box;
}

/* 旧 style.css の `section h3` は羽の画像を背景に敷く指定
   （PC: img/h3_left.jpg / h3_right.jpg、SP: img/sp_h3.jpg）。
   リニューアル本文の <h3> はすべて <section> の中にあるため当たってしまう。
   旧ページには影響させたくないので、旧CSSは触らずここで打ち消す。 */
.rnw-page section h3,
.rnw-page section h3 > div,
.rnw-page section h3 div div {
  height: auto;
  padding: 0;
  background: none;
}

/* 旧 header{} の装飾を打ち消す */
.rnw-header {
  border-top: 0;
  box-shadow: none;
}

/* リニューアルページ本文（renewal/pages/*.html を貼った固定ページ本文）。
   旧 section{width:1000px} を無効化し、幅の制御は各セクション側に持たせる。 */
.rnw-page,
.rnw-page * {
  box-sizing: border-box;
}

/* ▼:where() で包んでいる理由
     `.rnw-page section` のように要素セレクタを足すと詳細度が (0,1,1) になり、
     あとから書く `.rnw-svc__list { margin:0 auto }` のようなクラス指定 (0,1,0)
     を打ち負かしてしまう（要素リセットが常に勝つ）。
     :where() は詳細度に加算されないため (0,1,0) に揃い、後勝ちで上書きできる。 */
.rnw-page :where(section) {
  width: auto;
  margin: 0;
}

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

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

.rnw-page a {
  text-decoration: none;
}


/* =====================================================================
   3. 共通ユーティリティ
   ===================================================================== */

/* --- アイコン（単色SVGを mask で描画し、色は currentColor から供給）---
   色未確定でも変数の差し替えだけでアイコン色が追従する。 */
.rnw-icon {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.rnw-icon--hamburger { -webkit-mask-image: url('../img/common/icon_hamburger.svg'); mask-image: url('../img/common/icon_hamburger.svg'); }
.rnw-icon--close     { -webkit-mask-image: url('../img/common/icon_close.svg');     mask-image: url('../img/common/icon_close.svg'); }
.rnw-icon--chevron   { -webkit-mask-image: url('../img/common/icon_chevron.svg');   mask-image: url('../img/common/icon_chevron.svg'); }
.rnw-icon--instagram { -webkit-mask-image: url('../img/common/icon_instagram.svg'); mask-image: url('../img/common/icon_instagram.svg'); }
.rnw-icon--facebook  { -webkit-mask-image: url('../img/common/icon_facebook.svg');  mask-image: url('../img/common/icon_facebook.svg'); }

/* ▼アセットは「下向き」シェブロン付きの丸で書き出されているが、Figmaの
     ボタンでは Down コンポーネントに scaleY(-1)+rotate(90deg) が掛かって
     おり見た目は「右向き」。CSS側で -90度回転させて向きを合わせる。 */
.rnw-icon--arrow {
  -webkit-mask-image: url('../img/common/icon_arrow_circle.svg');
          mask-image: url('../img/common/icon_arrow_circle.svg');
  transform: rotate(-90deg);
}

/* 下向きのまま使う版（SPのページ内ナビ Figma 545:48908）。
   アセットは上と同じ「丸＋下向きシェブロン」なので回転させないだけ。 */
.rnw-icon--arrow-down {
  -webkit-mask-image: url('../img/common/icon_arrow_circle.svg');
          mask-image: url('../img/common/icon_arrow_circle.svg');
}

/* --- ホバー／フォーカスの共通ルール ---------------------------------
   Figmaにはヘッダーの展開（hover-Visitors / hover-Residents）以外の
   ホバー指定が無いため、他プロパティと同じ「薄くする」を既定にしている。
   個別に色が変わるものだけ各セクション側で上書きする。

   ▼タッチ端末では :hover が張り付くので hover: hover のときだけ効かせる。
   ▼キーボード操作用に :focus-visible も同じ扱いにする。
   -------------------------------------------------------------------- */
.rnw-header a,
.rnw-header button,
.rnw-menu a,
.rnw-menu button,
.rnw-spcta a,
.rnw-pagenav a,
.rnw-footer a,
.rnw-page a,
.rnw-slider__btn {
  transition: opacity .2s, background-color .2s, color .2s;
}

@media (hover: hover) {
  .rnw-header a:hover,
  .rnw-menu a:hover,
  .rnw-spcta a:hover,
  .rnw-footer a:hover,
  .rnw-page a:hover,
  .rnw-slider__btn:not(:disabled):hover {
    opacity: .7;
  }
}

.rnw-header a:focus-visible,
.rnw-header button:focus-visible,
.rnw-menu a:focus-visible,
.rnw-menu button:focus-visible,
.rnw-spcta a:focus-visible,
.rnw-pagenav a:focus-visible,
.rnw-footer a:focus-visible,
.rnw-page a:focus-visible,
.rnw-slider__btn:focus-visible {
  outline: 2px solid var(--rnw-main-text);
  outline-offset: 2px;
}

/* 遷移先未確定（<span> で出している項目）はホバーさせない */
.rnw-header__nav-link--pending,
.rnw-header__nav-sublink--pending,
.rnw-menu__link--pending,
.rnw-pagenav__link--pending {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .rnw-header a,
  .rnw-header button,
  .rnw-menu a,
  .rnw-menu button,
  .rnw-spcta a,
  .rnw-pagenav a,
  .rnw-footer a,
  .rnw-page a,
  .rnw-slider__btn {
    transition: none;
  }
}

/* --- 画面読み上げ用の非表示 --- */
.rnw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* =====================================================================
   4. ボタン（Figma 453:35984 / 453:35985 ほか）
   ---------------------------------------------------------------------
   px32 / py16、角丸65.96px（＝ピル）、左右振り分け、18px Bold、
   右に22pxの丸矢印アイコン。塗り・線の2種類。
   ===================================================================== */

.rnw-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 32px;      /* Figma実測 */
  border-radius: 65.96px;  /* Figma実測 */
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-decoration: none;
  box-sizing: border-box;
  transition: opacity .2s;
}

.rnw-btn:hover { opacity: .8; }

.rnw-btn__icon {
  width: 22px;   /* Figma実測 */
  height: 22px;
}

/* 塗り：common/accent/red（Figma 453:35984） */
.rnw-btn--accent {
  background-color: var(--rnw-cta-bg);
  border: 0.745px solid var(--rnw-white);  /* Figma実測 */
  color: var(--rnw-cta-text);
}

/* 塗り：nanny/text/accent（Figma 453:36029 カードのCTA） */
.rnw-btn--main {
  background-color: var(--rnw-main-text);
  border: 0.745px solid var(--rnw-white);
  color: var(--rnw-white);
}

/* 線：common/accent/red（Figma 453:36062 "more"） */
.rnw-btn--outline-accent {
  background-color: var(--rnw-white);
  border: 2px solid var(--rnw-accent);
  color: var(--rnw-accent);
}

/* 線：nanny/text/accent（Figma 453:35985 "FAQ"） */
.rnw-btn--outline-main {
  background-color: var(--rnw-white);
  border: 2px solid var(--rnw-main-text);
  color: var(--rnw-main-text);
}


/* =====================================================================
   5. タグ（Figma 453:36050 / 453:36058 ほか）
   ---------------------------------------------------------------------
   白地・nanny/main の細枠・角丸8px・18px Bold・文字は nanny/text/accent。
   ===================================================================== */

.rnw-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;                                /* Figma実測 */
  border: 0.745px solid var(--rnw-main);        /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
  color: var(--rnw-main-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* お客様の声カード内の小タグ（Figma 453:36149）。ピル形・14px。 */
/* SPカンプ（694:91737 ほか）はタグだけ14px。PCカンプ（694:36039）は18px。 */
@media only screen and (max-width: 767px) {
  .rnw-tag { font-size: 14px; }
}

.rnw-tag--pill {
  padding: 12px 20px;
  border-radius: 55.96px;
  font-size: 14px;
}


/* =====================================================================
   5-2. 見出し（title/h2 コンポーネント）
   ---------------------------------------------------------------------
   Figma の "title/h2"（2623:7973）。上に英字のサブ（Lusitana 24px /
   nanny/text/accent）、下に本見出し（Yu Mincho Pr6N 42px）。
   サブが無いバリアントもあるため、.rnw-h2__sub は任意。
   複数ページで使うため common.css に置く。
   ===================================================================== */

.rnw-h2 {
  font-family: var(--rnw-font-serif);
  /* Figma SP実測は28pxだが、実機で大きすぎるため24pxに落としている。2026-09-17 */
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  color: var(--rnw-text);
}

.rnw-h2__sub {
  display: block;
  margin-bottom: 8px;                 /* Figma実測 */
  font-family: var(--rnw-font-display);
  font-size: 18px;                    /* Figma SP実測 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main-text);
}


/* =====================================================================
   5-3. 横スライダー（前後ボタン＋進捗バー）
   ---------------------------------------------------------------------
   Figma PC 453:36125 ／ SP 363:34414。制御は renewal/js/front.js。
   トップ・ナニーサービスの両ページで使うため common.css に置く。
   ===================================================================== */

.rnw-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15.5px;         /* Figma SP実測（24 + 15.5 + 160 + 15.5 + 24 = 239） */
  width: 239px;
  margin: 0 auto 32px;
}

.rnw-slider__btn {
  width: 24px;         /* Figma SP実測 */
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url('../img/common/icon_swiper.svg') center / contain no-repeat;
  cursor: pointer;
}

/* アセットは「次へ」（右向き）。前へは反転させる。 */
.rnw-slider__btn--prev { transform: scaleX(-1); }

/* 端まで来たボタンは薄くする（Figma 453:36126 の opacity 50%） */
.rnw-slider__btn:disabled { opacity: .5; cursor: default; }

.rnw-slider__bar {
  position: relative;
  display: block;
  width: 160px;        /* Figma SP実測 */
  height: 1px;
  background-color: var(--rnw-main-text);
}

.rnw-slider__thumb {
  position: absolute;
  top: -1.67px;        /* Figma実測（バーより上に1.67pxはみ出す） */
  left: 0;
  height: 4px;         /* Figma実測 */
  border-radius: 16.736px;
  background-color: var(--rnw-main-text);
}


/* =====================================================================
   5-4. お客様の声カード（Figma 453:36141）
   ---------------------------------------------------------------------
   トップ（Trusted Worldwide.）とナニーサービス（Guest Testimonials）で
   同じカードを使うため common.css に置く。
   ===================================================================== */

.rnw-voice__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-voice__cards::-webkit-scrollbar { display: none; }

.rnw-voice__card {
  display: flex;
  flex: 0 0 311px;                    /* Figma実測 */
  flex-direction: column;
  scroll-snap-align: start;
}

.rnw-voice__card-head {
  padding: 17px 27px;                 /* Figma実測 */
  border: 1px solid var(--rnw-main);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background-color: var(--rnw-bg-main);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .216px;             /* Figma実測 */
  text-align: center;
  color: var(--rnw-text);
}

.rnw-voice__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* Figma実測 */
  padding: 16px;
  border-radius: 0 0 8px 8px;
  background-color: var(--rnw-white);
}

/* 見出し行（.rnw-voice__card-head）が無いカードは、本体だけで角丸を閉じる。
   ナニーページはFigma改訂（694:36311 / 694:90482）で見出し行が削除されたため
   本体が先頭になる。トップは見出し行が残っているので当たらない。 */
.rnw-voice__card-body:first-child { border-radius: 8px; }

/* ---------- SPのカード（Figma 694:91829） ----------
   SPカンプでは見出し行（Nanny Service）が無く、並びは
   写真 → ★ → タグ → 引用。タグも左寄せ。
   PCカンプ（694:36131）は見出し行が残り、タグは引用の下・中央寄せなので
   ここは767px以下だけに掛けている。 */

@media only screen and (max-width: 767px) {
  .rnw-voice__card-head { display: none; }
  .rnw-voice__card-body { border-radius: 8px; }
  .rnw-voice__tag   { order: 1; justify-content: flex-start; }
  .rnw-voice__quote { order: 2; }
}

.rnw-voice__photo {
  width: 100%;
  height: 150px;                      /* Figma実測 */
}

/* 写真はFigma未指定（グレーの塗りのみ）。枠だけ確保する。 */
.rnw-voice__photo--empty { background-color: var(--rnw-caption); }

.rnw-voice__stars {
  width: 100%;
  font-size: 16px;
  line-height: 1.8;
  color: #000;
}

.rnw-voice__quote {
  width: 100%;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

.rnw-voice__tag {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;                          /* Figma実測 */
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .rnw-h2 { font-size: 42px; }        /* Figma PC実測 */
  .rnw-h2__sub { font-size: 24px; }   /* Figma PC実測 */

  .rnw-voice__cards { padding: 0; }
}


/* =====================================================================
   5-5. お問い合わせ（Figma PC 453:36187 / 453:35747）
   ---------------------------------------------------------------------
   トップとナニーサービスで同じ見た目のため common.css に置く。
   ===================================================================== */

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

.rnw-contact__box {
  margin-top: 32px;
  padding: 24px 16px;                 /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
  text-align: center;
}

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

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


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

  /* ---------------- Contact ---------------- */

  /* 左右paddingはFigma実測80px。1440pxを超えたぶんはpaddingに足して
     内容の最大幅（1280px）を保ったまま中央に寄せる。 */
  .rnw-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;                        /* Figma実測 */
    padding: 56px max(80px, calc((100% - 1280px) / 2));
  }

  /* ※Figmaは中央寄せだが、本文・ボタンとも左寄せにする指示（2026-09-17）。 */
  .rnw-contact__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;                        /* Figma実測 */
    width: 100%;
    max-width: 1280px;
    margin-top: 0;
    padding: 24px 16px;               /* Figma実測 */
  }

  .rnw-contact__text {
    font-size: 24px;                  /* Figma実測 */
    text-align: left;
  }

  .rnw-contact__btn {
    width: 480px;                     /* Figma実測 */
    max-width: 100%;
    margin-top: 0;
  }
}


/* =====================================================================
   6. ヘッダー（Figma 373:37194）
   ===================================================================== */

.rnw-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--rnw-z-header);
  background-color: var(--rnw-white);
}

.rnw-header a { text-decoration: none; }

/* ---------- SP（Figma 363:34281） ---------- */

.rnw-header__sp {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--rnw-header-h-sp);
  background-color: var(--rnw-white);
}

.rnw-header__sp-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 20px;  /* Figma実測 */
}

.rnw-header__logo {
  display: block;
  width: 127px;        /* Figma実測 127.453px */
  flex-shrink: 0;
}

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

.rnw-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;         /* Figma実測 */
  height: 35px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rnw-text);
  cursor: pointer;
}

.rnw-header__toggle .rnw-icon { width: 100%; height: 100%; }
.rnw-header__toggle .rnw-icon--close { display: none; }
.rnw-header__toggle[aria-expanded="true"] .rnw-icon--hamburger { display: none; }
.rnw-header__toggle[aria-expanded="true"] .rnw-icon--close     { display: block; }

/* ---------- PC（Figma 373:37194） ---------- */

.rnw-header__pc {
  display: none;
  width: 100%;
  min-height: var(--rnw-header-h-pc);
  background-color: var(--rnw-white);
}

.rnw-header__pc-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--rnw-content-max);
  min-height: var(--rnw-header-h-pc);
  margin: 0 auto;
  padding: 20px 40px;  /* Figma実測 */
}

.rnw-header__pc-logo {
  display: block;
  width: 161px;        /* Figma実測 161.152px */
  flex-shrink: 0;
}

.rnw-header__pc-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.rnw-header__pc-right {
  display: flex;
  align-items: center;
  gap: 24px;           /* Figma実測 */
}

.rnw-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;           /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 展開パネルをヘッダー幅いっぱいに置くため、絶対配置の基準は .rnw-header 側。
   .rnw-header__nav-item は静的配置のままにしておく。 */
.rnw-header__nav-item {
  display: flex;
  align-items: center;
}

.rnw-header__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;           /* Figma実測 */
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  white-space: nowrap;
  cursor: pointer;
}

.rnw-header__nav-link--pending { cursor: default; }

/* 展開中は項目の地色が nanny/bg（Figma 373:38933 / 373:38966）。 */
.rnw-header__nav-item.is-open > .rnw-header__nav-link {
  background-color: var(--rnw-bg-main);
}

.rnw-header__nav-caret {
  width: 13.339px;     /* Figma実測 */
  height: 7.669px;
  transition: transform .2s;
}

.rnw-header__nav-item.is-open .rnw-header__nav-caret { transform: rotate(180deg); }

/* 展開パネル（Figma 373:38950 / 373:38980）。
   ヘッダー下いっぱいの帯に、項目を横1列で中央寄せ。 */
.rnw-header__nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 20px;                                    /* Figma実測 */
  border-top: 1px solid var(--rnw-panel-border);    /* ※上の要確認コメント参照 */
  background-color: var(--rnw-white);
}

.rnw-header__nav-item.is-open > .rnw-header__nav-panel { display: block; }

.rnw-header__nav-sublist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;           /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-header__nav-sublink {
  display: flex;
  align-items: center;
  gap: 16px;           /* Figma実測 */
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-header__nav-sublink--pending { cursor: default; }

.rnw-header__nav-dot {
  width: 16px;         /* Figma実測 */
  height: 16px;
  border-radius: 90px;
  background-color: var(--rnw-accent);
  flex-shrink: 0;
}

/* CTA（Figma 373:37212）。塗り common/accent/red・角丸8px・高さ48px。 */
.rnw-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;                     /* Figma実測 */
  padding: 16px 28px;               /* Figma実測 py16/px12 ＋ 内側 px16 */
  border-radius: 8px;
  background-color: var(--rnw-cta-bg);
  color: var(--rnw-cta-text);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
  transition: opacity .2s;
}

.rnw-header__cta:hover { opacity: .8; }


/* =====================================================================
   7. SPドロワー（Figma トップ 363:34786 ／ ナニー 545:49679）
   ---------------------------------------------------------------------
   グローバルナビではなく「そのページの中身への案内」。
   画面全体を覆い、上部に自前のヘッダー行（ロゴ＋閉じる）を持つため、
   固定ヘッダーより上（--rnw-z-menu）に重ねる。
   見出しと項目は renewal/pagenav.php の RNW_DRAWER。
   ===================================================================== */

.rnw-menu {
  position: fixed;
  inset: 0;
  z-index: var(--rnw-z-menu);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;                   /* Figma実測 */
  background-color: var(--rnw-bg-main);   /* Figma実測 nanny/bg #FAEEF1 */
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.rnw-menu-open .rnw-menu {
  visibility: visible;
  opacity: 1;
}

.rnw-menu-open { overflow: hidden; }

.rnw-menu a { text-decoration: none; }

/* ---------- ドロワー上部のヘッダー行（Figma 363:34787） ---------- */

.rnw-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;                          /* Figma実測 */
  border-bottom: 1px solid var(--rnw-caption); /* Figma実測 common/text/gray */
  background-color: var(--rnw-white);
}

/* ▼Figmaのロゴ（363:34789 / 241.744×35）はファミリーケア版が入ったまま。
     英語サイトなのでヘッダーと同じ Poppins ロゴを同じ幅で置く。 */
.rnw-menu__logo {
  display: block;
  width: 127px;
  flex-shrink: 0;
}

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

.rnw-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;                            /* Figma実測 */
  height: 43px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rnw-text);
  cursor: pointer;
}

.rnw-menu__close .rnw-icon { width: 100%; height: 100%; }

/* ---------- 中身 ---------- */

.rnw-menu__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                              /* Figma実測 */
  width: 330px;                           /* Figma実測 */
  max-width: calc(100% - 32px);
  padding-top: 30px;                      /* Figma実測 */
}

/* 白いカード（Figma 363:34794） */
.rnw-menu__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;                              /* Figma実測 */
  width: 100%;
  padding: 16px;                          /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
}

.rnw-menu__card-title {
  margin: 0;
  font-family: var(--rnw-font-jp);
  font-size: 18px;                        /* Figma実測 SP/text/large/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .216px;                 /* Figma実測 */
  text-align: center;
  color: var(--rnw-caption);              /* Figma実測 common/text/gray */
}

/* 2列。行間の隙間は無し（点線が上下で接する）。 */
.rnw-menu__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 12px;                       /* Figma実測 */
  row-gap: 0;
  width: 298px;                           /* Figma実測 */
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-menu__item { width: 143px; }         /* Figma実測 */

.rnw-menu__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px;                          /* Figma実測 */
  border-bottom: 1px dashed var(--rnw-main-text);   /* Figma実測 nanny/text/accent */
  font-family: var(--rnw-font-jp);
  font-size: 14px;                        /* Figma実測 SP/text/defalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: .168px;                 /* Figma実測 */
  text-align: center;
  color: var(--rnw-text);
}

/* 1行目の2項目だけ上にも点線が入る（Figma 363:34800 / 363:34802） */
.rnw-menu__item:nth-child(1) .rnw-menu__link,
.rnw-menu__item:nth-child(2) .rnw-menu__link {
  border-top: 1px dashed var(--rnw-main-text);
}

/* 遷移先未確定（<span> で出している項目） */
.rnw-menu__link--pending { cursor: default; }

.rnw-menu__cta { width: 100%; }

/* SNS（Figma 363:34820） */
.rnw-menu__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                              /* Figma実測 */
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-menu__sns a { display: block; color: var(--rnw-text); }

.rnw-menu__sns .rnw-icon {
  width: 40px;                            /* Figma実測 */
  height: 40px;
}


/* =====================================================================
   8. SP追従CTA（Figma 694:91095）
   ---------------------------------------------------------------------
   画面下端に固定。左 nanny/main、右 common/accent/red の2分割。
   文言は renewal/header.php の $rnw_sp_cta（Contact Us / Register Now）。

   ▼カンプ更新（旧 363:34579）で文字が 18px/1.8 から 14px/1.3 に縮んだ。
     文字だけだと高さが約51pxになりカンプの55.7pxに足りないので、
     帯側に min-height を持たせて高さを保っている。本文下端の逃げ
     （--rnw-spcta-h）と同じ値なので、変えるときは両方そろえること。
   ===================================================================== */

.rnw-spcta {
  display: flex;
  gap: 1.923px;                 /* Figma実測 */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: var(--rnw-spcta-h);   /* Figma実測 55.727px ≒ 56px */
  z-index: var(--rnw-z-spcta);
  background-color: var(--rnw-white);
  filter: drop-shadow(0 -6.779px 7.344px rgba(0, 0, 0, .08));  /* Figma実測 */
}

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

.rnw-spcta__btn--main {
  background-color: var(--rnw-main);
  color: var(--rnw-text);
}

.rnw-spcta__btn--accent {
  background-color: var(--rnw-accent);
  border-left: 0.962px solid var(--rnw-white);  /* Figma実測 */
  color: var(--rnw-white);
}

/* ---------- 総合TOPもナニーと同じ大きさにそろえる ----------
   カンプ上はナニー（694:91095）が 14px/1.3・帯56px、総合TOP（694:91858）が
   18px/1.8・帯65pxで違うが、2ページを並べると追従バーの高さが合わず不揃いに
   見えるため、ナニー側（base の指定）に統一する。2026-09-17。
   トップだけ大きく戻す場合は、下のコメントを外す。

body[data-page="front"] { --rnw-spcta-h: 65px; }

body[data-page="front"] .rnw-spcta__btn {
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: .216px;
}
*/

/* 追従CTAに隠れないよう本文下端に余白を足す（SPのみ） */
body.rnw-body { padding-bottom: var(--rnw-spcta-h); }


/* =====================================================================
   8-2. ページ内ナビ帯（Figma 373:38992 ヘッダー "page=Poppins Nanny" の下段）
   ---------------------------------------------------------------------
   項目とレンダラは renewal/pagenav.php に一元化している。
   ヘッダーとは別の固定要素として扱う。
     初期表示     … ヘッダー直下（上から --rnw-header-h-pc）
     スクロール後 … 画面下端に追従（.is-docked / renewal/js/header.js）
     フッター到達 … 解除せず、フッター下に帯の高さぶんの余白を足して逃げる
                    （下の「ページ内ナビ帯との逃げ」）
   表示はPCヘッダーと同じ 1024px で切り替える（SP・タブレットは本文側の
   カードで出す）。
   ===================================================================== */

/* 帯を出すページだけ高さを持たせる。header.php が data-pagenav を出力。
   高さ = py10 * 2 + 項目36px = 56px（Figma実測）。 */
body[data-pagenav="bar"]  { --rnw-pagenav-h: 56px; }
body[data-pagenav="none"] { --rnw-pagenav-h: 0px; }

.rnw-pagenav--bar {
  display: none;                 /* 〜1023px は非表示。1024px〜で解除 */
  position: fixed;
  top: var(--rnw-header-h-pc);
  left: 0;
  z-index: var(--rnw-z-pagenav);
  width: 100%;
  align-items: center;
  justify-content: center;
  justify-content: safe center;  /* 収まる時は中央 / 溢れる時は左寄せ */
  flex-wrap: nowrap;             /* 帯は常に1行 */
  gap: 40px;                     /* Figma実測 */
  padding: 10px 20px;            /* Figma実測 py10 */
  overflow-x: auto;
  background-color: var(--rnw-bg-main);   /* Figma実測 nanny/bg #FAEEF1 */
  font-family: var(--rnw-font-jp);
  scrollbar-width: none;
}

.rnw-pagenav--bar::-webkit-scrollbar { display: none; }

/* スクロール後：画面下端へ移して追従する */
.rnw-pagenav--bar.is-docked {
  top: auto;
  bottom: 0;
}

.rnw-pagenav__label {
  flex: 0 0 auto;
  margin: 0;
  font-size: 16px;               /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  white-space: nowrap;
  color: var(--rnw-text);
}

.rnw-pagenav__list {
  display: flex;
  flex: 0 0 auto;                /* 縮むと内部が折り返して崩れるため固定 */
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;                     /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-pagenav__item { flex: 0 0 auto; }

.rnw-pagenav__link {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 36px;                  /* Figma実測 */
  padding: 10px 20px;            /* Figma実測 */
  border-radius: 40px;           /* Figma実測 */
  background-color: var(--rnw-white);
  font-size: 14px;               /* Figma SP/button/small */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--rnw-text);
}

/* ホバーは塗り反転。Figmaに指定は無いが、同じピル形のタグの選択状態
   （.rnw-tag--current）と同じ配色に揃えている。 */
@media (hover: hover) {
  a.rnw-pagenav__link:hover {
    opacity: 1;                              /* 共通の薄くするルールを打ち消す */
    background-color: var(--rnw-main-text);
    color: var(--rnw-white);
  }
}

/* 遷移先未確定の項目。<a> ではなく <span> で出る（renewal/pagenav.php 参照）。 */
.rnw-pagenav__link--pending {
  color: var(--rnw-caption);
  cursor: default;
}


/* =====================================================================
   9. フッター（Figma PC 453:36198 ／ SP 833:30121）
   ---------------------------------------------------------------------
   旧 style.css の footer 指定は `footer { width:100% }` と
   `#footer_top_wrap` / `#footer_bottom_wrap` などのID限定なので、
   新フッター（.rnw-footer）とは当たらない。打ち消しは不要。

   ▼PCとSPで見た目がまったく別物なので、共通部分（背景・リセット）だけを
     素のセレクタに置き、レイアウトは 767px以下 と 768px以上 の2ブロックに
     完全に分けている。片方を直しても、もう片方に染み出さない。

   ▼レイアウトは3段階
     767px以下   … SPカンプ（833:30121）どおりの縦積み。
                    Visitors / Residents は見出し＋インデントした子、
                    Hawaii Travelers 以下は1行1項目。区切りは点線。
     768〜1199px … PC版の横1列のまま、文字サイズ・間隔・左padding だけを
                    縮めて収める（タブレットもPC版で出す方針）。
                    Figma実測のままだと左padding400px＋本文約669pxで
                    約1069px必要になるため、この帯だけ値を落としている。
     1200px以上  … PCカンプ（453:36198）実測どおり。ロゴを左に絶対配置し、
                    右側にサイトマップとサブナビを右寄せで2段。
                    コピーライトは下端中央。

   ▼マークアップ（renewal/footer.php）はPC・SP共用。SP側の出し分けに
     li の --group / --group-last / --single を使っている。
   ===================================================================== */

/* ---------- 共通 ---------- */

.rnw-footer {
  background-color: var(--rnw-bg-main);   /* nanny/bg #FAEEF1 */
}

.rnw-footer a { text-decoration: none; }

.rnw-footer__inner { position: relative; }

.rnw-footer__logo { display: block; }

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

.rnw-footer__body { display: flex; flex-direction: column; }

.rnw-footer__nav,
.rnw-footer__nav-sub,
.rnw-footer__sub {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-footer__copyright {
  font-family: var(--rnw-font-jp);
  font-weight: 400;
  font-size: 14px;                        /* Figma実測（PC・SP共通） */
  line-height: 24px;                      /* Figma実測（PC・SP共通） */
  text-align: center;
  color: #777777;                         /* Figma実測（変数未登録） */
}


/* ---------- SP（767px以下／Figma 833:30121） ----------
   Figmaは375幅、内容の実幅が311.25px（Container 341.25 の中に px15）。
   375−311.25＝63.75 の半分で左右32pxの余白として置いている。 */

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

  .rnw-footer__inner { padding: 40px 32px; }   /* Figma実測 py-40 */

  .rnw-footer__logo {
    width: 144px;                         /* Figma実測 */
    margin: 0 auto 32px;                  /* Figma実測 gap 31.99px */
  }

  /* 点線どうしが上下で接するので隙間は作らない */
  .rnw-footer__body {
    align-items: stretch;
    gap: 0;
  }

  .rnw-footer__nav { flex-direction: column; }

  .rnw-footer__nav-item {
    display: flex;
    flex-direction: column;
  }

  /* ---- 見出し（Visitors / Residents。Figma 833:30129 / 833:30135）---- */

  .rnw-footer__nav-head {
    padding: 4px 12px;                    /* Figma実測 */
    border-bottom: 1px dashed var(--rnw-caption);  /* Figma実測 common/text/gray */
    font-family: var(--rnw-font-jp);
    font-size: 14px;                      /* Figma実測 SP/text/defalut/bold */
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .168px;               /* Figma実測 */
    color: #333333;                       /* Figma実測 Fill/Default（変数未登録） */
  }

  /* ---- 子（Poppins Nanny など。Figma 833:30131 / 833:30137）----
     ▼カンプは Visitors が左20px、Residents が左40px（Frameの二重ネスト）。
       揃っていないのはネストの事故と判断して20pxで統一している。
       カンプどおりにするなら項目ごとに padding-left を出し分けること。 */

  .rnw-footer__nav-sub {
    flex-direction: column;
    padding: 0 0 24px 20px;               /* Figma実測 pl-20 / pb-24 */
  }

  .rnw-footer__nav-link {
    display: block;
    padding: 16px 12px 16px 0;            /* Figma実測 py-16 / pr-12 */
    font-family: var(--rnw-font-jp);
    font-size: 14px;                      /* Figma実測 */
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .168px;               /* Figma実測 */
    color: var(--rnw-text);               /* Figma実測 common/text/bk */
    text-decoration: none;
  }

  /* Visitors / Residents のかたまり（Figma 833:30128 "Descriptions"）の終端。
     ここだけ下の余白が広く、ブロックの区切りとして点線が入る。
     どの項目が終端かは renewal/footer.php が --group-last で示している。 */
  .rnw-footer__nav-item--group-last .rnw-footer__nav-sub {
    padding-bottom: 32px;                 /* Figma実測 py-32 の下側 */
    border-bottom: 1px dashed var(--rnw-caption);
  }

  /* ---- 1行1項目の行 ----
     Hawaii Travelers（サイトマップ側で子を持たない項目）と、
     サブナビ（Private Policy / Poppins Compliance / Contact）は
     SPでは同じ見た目の縦並びになる（Figma 833:30145 "List"）。 */

  .rnw-footer__sub { flex-direction: column; }

  .rnw-footer__nav-item--single .rnw-footer__nav-head,
  .rnw-footer__sub a {
    display: block;
    padding: 32px 24px 32px 0;            /* Figma実測 py-32 / pr-24 */
    border-bottom: 1px dashed var(--rnw-caption);
    font-family: var(--rnw-font-jp);
    font-size: 14px;                      /* Figma実測 */
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .168px;               /* Figma実測 */
    color: var(--rnw-text);               /* Figma実測 common/text/bk */
    text-decoration: none;                /* PCの下線はSPでは付かない */
  }

  .rnw-footer__copyright {
    margin: 40px 0 0;                     /* Figma実測 gap 39.99px */
  }
}


/* ---------- PC・タブレット（768px以上／Figma 453:36198） ----------
   横1列のレイアウトそのもの。値はFigma実測（1200px以上）のまま置き、
   タブレット幅の詰めは直後の 768〜1199px のブロックで上書きする。 */

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

  .rnw-footer__inner {
    width: max-content;
    margin: 0 auto;
    padding: 24px 0 30px 400px;           /* Figma実測 */
  }

  .rnw-footer__logo {
    position: absolute;
    top: 50%;
    left: 0;
    width: 144px;                         /* Figma実測 */
    margin: 0;
    transform: translateY(-50%);
  }

  .rnw-footer__body {
    align-items: flex-end;
    gap: 2px;                             /* Figma実測 */
  }

  /* ---------- サイトマップ（上段） ---------- */

  .rnw-footer__nav {
    flex-direction: row;
    align-items: center;
    gap: 12px;                            /* Figma実測 */
  }

  .rnw-footer__nav-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 12px;                            /* Figma実測 */
  }

  .rnw-footer__nav-head {
    font-family: var(--rnw-font-mincho);
    font-size: 16px;                      /* Figma実測 */
    font-weight: 400;
    line-height: 25px;                    /* Figma実測 */
    color: var(--rnw-accent);
  }

  /* 子を持たない項目（Hawaii Travelers）だけ下線付き（Figma 4632:28525） */
  .rnw-footer__nav-head--link { text-decoration: underline; }

  .rnw-footer__nav-sub {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 12px;                            /* Figma実測 */
  }

  .rnw-footer__nav-link {
    font-family: var(--rnw-font-mincho);
    font-size: 12px;                      /* Figma実測 */
    font-weight: 400;
    line-height: 25px;                    /* Figma実測 */
    color: var(--rnw-accent);
    text-decoration: underline;
  }

  /* 横1列のときだけ項目間に「|」を入れる（Figma 4632:28518 / 28523） */
  .rnw-footer__nav-item:not(:last-child)::after {
    content: '|';
    font-family: var(--rnw-font-prata);
    font-size: 14px;                      /* Figma実測 */
    line-height: 25px;
    color: var(--rnw-text);
  }

  /* ---------- サブナビ（下段） ---------- */

  .rnw-footer__sub {
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 12px;                            /* Figma実測 */
    padding-right: 12px;                  /* Figma実測 */
  }

  .rnw-footer__sub a {
    font-family: var(--rnw-font-mincho);
    font-size: 12px;                      /* Figma実測 */
    font-weight: 400;
    line-height: 24px;                    /* Figma実測 */
    color: var(--rnw-caption);
  }

  /* 区切りの「|」。Figmaでは各Itemの中にテキストとして置かれているが、
     マークアップに文字を混ぜないよう擬似要素で出す。書体はFigma実測どおり Prata。 */
  .rnw-footer__sub li:not(:last-child)::after {
    content: '|';
    margin-left: 12px;                    /* Figma実測 */
    font-family: var(--rnw-font-prata);
    font-size: 12px;
    line-height: 24px;
    color: var(--rnw-text);
  }

  /* ---------- コピーライト ----------
     Figmaでは Address が Container に対して left:0/right:0 の絶対配置。
     Container はページ中央にあるため、結果として画面中央に載る。 */

  .rnw-footer__copyright {
    position: absolute;
    right: 0;
    bottom: 6px;                          /* Figma実測 */
    left: 0;
    margin: 0;
  }
}


/* ---------- タブレット（768〜1199px）の詰め ----------
   Figma実測（左padding400px＋本文約669px＝約1069px）のままでは入らないので、
   横1列は保ったまま文字サイズ・間隔・左padding を落として収める。
   1200px以上には掛からないので、フル幅の見た目はFigmaどおり。 */

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

  /* max-content ＋ 左padding400px を、画面幅なりの箱に置き換える。
     ロゴは絶対配置のまま左端、本文は右寄せ。溢れて横スクロールが出ない
     ことを優先し、幅は max-width:100% で頭打ちにしている。 */
  .rnw-footer__inner {
    width: auto;
    max-width: 100%;
    padding: 24px 24px 30px 168px;
  }

  .rnw-footer__logo { width: 112px; }

  /* 万一入りきらない幅では折り返して逃がす（横スクロールを出さない） */
  .rnw-footer__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .rnw-footer__nav-item     { gap: 8px; }
  .rnw-footer__nav-sub      { gap: 8px; }

  .rnw-footer__nav-head     { font-size: 14px; line-height: 22px; }
  .rnw-footer__nav-link     { font-size: 11px; line-height: 22px; }

  .rnw-footer__nav-item:not(:last-child)::after {
    font-size: 12px;
    line-height: 22px;
  }

  .rnw-footer__sub {
    gap: 8px;
    padding-right: 0;
  }

  .rnw-footer__sub a { font-size: 11px; line-height: 22px; }

  .rnw-footer__sub li:not(:last-child)::after {
    margin-left: 8px;
    font-size: 11px;
    line-height: 22px;
  }

  .rnw-footer__copyright { font-size: 12px; line-height: 20px; }
}


/* =====================================================================
   10. レスポンシブ
   ---------------------------------------------------------------------
   FigmaはPC 1440 / SP 375 の2種類のみで、中間幅（タブレット）の指定は無い。
   分岐の考え方は他プロパティ（familycare / educare）に合わせている。

     ヘッダー … 〜1023px はSPドロワー、1024px〜でPCナビ。
                educare（renewal/css/common.css の同節）と同じ分岐。
                PCナビは1440px未満で余白・間隔を詰める。
     フッター … 768px〜はPC版の横1列。1199pxまでは文字と余白を縮める
                （節9の 768〜1199px ブロック）。familycare / educare は
                タブレットもSP版だが、英語版は項目が少なく横1列で収まる
                ため、こちらはPC版で出す。
     追従CTA … 767pxまで（スマホのみ）。タブレットでは出さない。
     本文     … 各ページCSS（pages/*.css）は従来どおり768pxで切り替える。

   （旧 style.css は max-width:600px の分岐しか持たず、#container の
     min-width も持たないため、この分岐は旧ページ側に影響しない）
   ===================================================================== */

/* ---------- SP追従CTA：768px〜は出さない ----------
   ヘッダーは1023pxまでドロワーだが、画面下に居座る2分割CTAはスマホ専用。
   タブレットではフッターのCTAで足りるため、ヘッダーとは別に768pxで切る。
   本文下端の逃げ（padding-bottom）も同じ幅で戻す。 */

@media only screen and (min-width: 768px) {
  .rnw-spcta { display: none; }
  body.rnw-body { padding-bottom: 0; }
}

/* ---------- ヘッダー：〜1023px はドロワー ---------- */

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

  /* この幅のヘッダーはドロワー（--rnw-header-h-sp＝59px）。
     pages/*.css は 768px〜で --rnw-header-h-pc を使ってアンカーの逃げを
     取っているため、変数の側をSPの高さに合わせておく。合わせないと
     ジャンプ先に29pxの隙間ができる（familycare と同じ手当て）。 */
  :root { --rnw-header-h-pc: var(--rnw-header-h-sp); }

  /* ページ内ナビ帯はPCのみ。出さない幅では逃げの計算も0にする
     （SPは本文側のカード .rnw-pagenav--sp で出す）。 */
  body[data-pagenav="bar"] { --rnw-pagenav-h: 0px; }
  .rnw-pagenav--bar { display: none; }
}

/* ---------- ヘッダー：1024px〜 はPCナビ ---------- */

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

  /* 固定ヘッダー＋ページ内ナビ帯のぶんを本文で確保する。
     帯を出さないページでは --rnw-pagenav-h が 0px なので増えない。 */
  body.rnw-body {
    padding-top: calc(var(--rnw-header-h-pc) + var(--rnw-pagenav-h));
  }

  .rnw-header__sp { display: none; }
  .rnw-header__pc { display: flex; }

  /* ドロワーはSP・タブレット専用（追従CTAは上の768pxブロックで消している） */
  .rnw-menu { display: none; }

  /* ページ内ナビ帯はPCのみ */
  .rnw-pagenav--bar { display: flex; }

  /* ---------- ページ内ナビ帯との逃げ ----------
     帯（.rnw-pagenav--bar.is-docked）は position:fixed で画面下端に居座るので、
     そのままだとフッター最下部のコピーライトに重なる。帯を出すページだけ、
     フッター下に帯の高さぶんを足す。
     帯を出さないページ（data-pagenav="none"）は 0px なので余白は増えない。
     ＝familycare / educare の同じ指定と同じ考え方。 */
  body[data-pagenav="bar"] .rnw-footer {
    padding-bottom: var(--rnw-pagenav-h);
  }
}

/* ---------- PCヘッダーの詰め（1024〜1439px） ----------
   Figma実測のままだと 左右padding80 ＋ ロゴ161 ＋ gap24 ＋ ナビ約380
   ＋ gap24 ＋ CTA約160 ＝ 約830px が下限。1024pxでも余裕を持たせるため、
   1440px未満では余白・間隔・ロゴ幅だけを縮める（項目は落とさない）。
   1440px以上はFigma実測値のまま。 */

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .rnw-header__pc-inner { padding: 20px 24px; }
  .rnw-header__pc-logo  { width: 144px; }
  .rnw-header__pc-right { gap: 16px; }
  .rnw-header__nav      { gap: 20px; }
  .rnw-header__cta      { padding: 16px 20px; font-size: 16px; }

  /* 展開パネルも横幅に合わせて詰める */
  .rnw-header__nav-sublist { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .rnw-btn,
  .rnw-header__cta,
  .rnw-header__nav-caret,
  .rnw-menu {
    transition: none;
  }
}


/* =====================================================================
   11. モーション（Figma注釈「動きについて」）
   ---------------------------------------------------------------------
   ▼FVの写真     … Ken Burns（ゆっくり寄る）。
   ▼各セクション … スクロールで下から上へふわっと出す（fade-in）。
                    対象の付与と発火は renewal/js/motion.js。
                    JSが動かない環境では .rnw-inview が付かないので、
                    中身はそのまま表示される（消えない）。
   ▼prefers-reduced-motion: reduce のときは両方止める。
   ===================================================================== */

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

/* トップ（.rnw-fv__media）とナニー（.rnw-nfv__media）のFV写真。
   どちらも枠側が overflow:hidden なので、はみ出しは切られる。

   ▼速度について
     最初 20s / scale(1.1) にしていたが、動きが緩すぎて気づかないため
     8s / scale(1.12) に上げている。ease-out なので序盤にいちばん動き、
     残りはゆっくり寄って止まる。
     もっと目立たせるなら 8s を短く、scale の値を大きくする。 */
.rnw-fv__media img,
.rnw-nfv__media img {
  transform-origin: center center;
  animation: rnw-kenburns 8s ease-out both;
  will-change: transform;
}

/* 出る前の状態。付けるのは renewal/js/motion.js。
   ずらし（transition-delay）もJS側がきょうだいの順番で入れる。
   ▼will-change は付けていない。対象が数十個になるので、
     常時レイヤーを作らせるほうが重くなる。 */
.rnw-inview {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}

.rnw-inview.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rnw-fv__media img,
  .rnw-nfv__media img {
    animation: none;
  }

  .rnw-inview {
    opacity: 1;
    transform: none;
    transition: none;
  }
}