@charset "UTF-8";

/* =====================================================================
   ポピンズ familycare リニューアル 共通CSS
   ---------------------------------------------------------------------
   - 旧 /familycare/css/common.css と同居するため、全クラスに `rnw-` を付与
   - 旧CSSは接頭辞なし（.logo / .menu_btn / .glonav 等）なので名前空間は分離済み
   - 旧CSSが要素セレクタ `header {}` `footer {}` を持つため、
     .rnw-header / .rnw-footer 側で該当プロパティを明示的に打ち消している
   - 色は全て CSS変数経由。値はFigma登録バリアブル準拠の確定値（下記 :root 参照）
   ===================================================================== */

/* Lusitana は Contact見出し(Regular) に加え、VIPケアの電話番号(Figma 12:343)で
   Bold を使うため 400/700 の両方を読み込む。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Lusitana:wght@400;700&display=swap');

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

:root {
  /* -------------------------------------------------------------
     カラー：全プロパティ共通（確定値 / Figma登録バリアブル準拠）
     ------------------------------------------------------------- */
  --rnw-text:    #444444;  /* 本文       common/text/bk */
  --rnw-caption: #626262;  /* キャプション・点線罫線 common/text/gray */
  --rnw-link:    #912344;  /* リンク     common/accent/red ※ヘッダー／フッターには該当箇所なし（本文用） */
  --rnw-heading: #333333;  /* 見出し     Fill/Default */
  --rnw-gold:    #C9A96E;  /* 金（枠線） common/accent/gold  ※本文用。定義表に無かったため追加（2026-08-12） */
  --rnw-gold2:   #867047;  /* 金（文字） common/accent/gold2 ※本文用。定義表に無かったため追加（2026-08-12） */
  --rnw-bg1:     #FAF7F2;  /* 背景1      ※ヘッダー／フッターには該当箇所なし（本文用） */
  --rnw-bg3:     #EEE8DE;  /* 背景3      common/bg2 ※本文用。ナニー本文のメインビジュアル／
                              支援バナー等の地色。定義表への追加を確認済み（2026-08-12） */
  /* --rnw-bg2 は nanny/bg と vipcare/bg で値が異なるためプロパティ可変セクションに置く。
     ページ内ナビ帯（6節）専用。SPドロワーの地色は #FAEEF1 固定で、ここは通さない。 */

  /* PCヘッダーの仮デザイン用プレースホルダは 2026-08-26 に撤去した。
     確定デザイン（Figma 335:9326 / 展開 335:9667・335:10093）へ差し替え済み。
     ヘッダーは page=common の共通デザインで、VIPケア配下でも色は変わらない。
     プロパティ可変の変数（--rnw-main / --rnw-bg2 / --rnw-cta-bg）を
     ヘッダーに使わないこと。 */

  /* -------------------------------------------------------------
     タイポグラフィ
     ------------------------------------------------------------- */
  --rnw-font-jp:     'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --rnw-font-serif:  'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  --rnw-font-en:     'Lusitana', serif;
  --rnw-font-icon:   'poppins';  /* 旧common.css の @font-face を流用（\e901=矢印 / \e902=別窓） */

  /* -------------------------------------------------------------
     レイアウト
     ※ ヘッダー高は旧 contents.css / index.css が
        .breadcrumbs_wrap {margin-top:90px} / #key_field {margin:90px auto 88px}
        で本文オフセットを取っているため、旧値と同一に固定する。
        （旧CSSは編集禁止のため、ヘッダー側を合わせる方針）
        Figma実寸は SP 59px / PC 84px だが、内側のpaddingはデザイン値のまま残し、
        差分は min-height + align-items:center で吸収している。
     ------------------------------------------------------------- */
  --rnw-header-h-sp: 70px;
  --rnw-header-h-pc: 90px;
  --rnw-container-min-pc: 1126px;  /* 旧 #container の min-width に合わせる */
  --rnw-z-header: 12;              /* 旧 header の z-index と同値 */
  --rnw-z-menu: 11;
  --rnw-z-pagenav: 10;                 /* ページ内ナビバー。ヘッダーより下、本文より上 */

  --rnw-pagenav-h: 0px;            /* ページ内ナビバーの高さ。body[data-pagenav] で上書き */
}

/* -------------------------------------------------------------
   ページ内ナビバーの高さ。header.php が body に data-pagenav を出す。
     tall  … ラベル2行（Figma 153px − ヘッダー88px）
     short … ラベル1行（Figma 144px − ヘッダー88px）
     none  … バーを出さないページ
   バー自体は position:fixed で本文を押し下げないため、この値は
   パンくずのオフセット計算にだけ使う（→「11-2. 固定ヘッダーのオフセット」）。
   ------------------------------------------------------------- */
body[data-pagenav="tall"]  { --rnw-pagenav-h: 65px; }
body[data-pagenav="short"] { --rnw-pagenav-h: 56px; }
body[data-pagenav="none"]  { --rnw-pagenav-h: 0px; }

/* -------------------------------------------------------------
   カラー：プロパティ可変
   body（またはコンテナ）の data-property で切り替える。
   出力は functions.php の rnw_property() が判定：
     ・/service-vipcare/ 配下        → "vipcare"
     ・voiceでカテゴリ「VIPケア」    → "vipcare"
     ・上記以外（デフォルト）        → "nanny"
   ------------------------------------------------------------- */
[data-property="nanny"] {
  --rnw-main:         #F6BECA;  /* メイン        nanny/main */
  --rnw-bg2:          #FAEEF1;  /* 背景2         nanny/bg（SPメニュー展開時の背景） */
  /* CTA背景。Figmaの確定版ではボタンの塗りは common/accent/red で、
     nanny/text/accent（#BC326C）ではない（694:22445 プレミアム／694:25792 法人ほか）。 */
  --rnw-cta-bg:       #912344;  /* CTA背景 common/accent/red */
  --rnw-cta-text:     #FFFFFF;  /* CTA文字 */
  --rnw-subcta-bg:    #FFFFFF;  /* subCTA背景 */
  --rnw-subcta-text:  #BC326C;  /* subCTA文字・枠線 */
  --rnw-subcta2-bg:   #F6BECA;  /* subCTA2背景 */
  --rnw-subcta2-text: #333333;  /* subCTA2文字 */

  /* 罫線・見出し等に使うアクセント色（Figma nanny/text/accent）。
     点線罫線・Contact見出し・別窓アイコンに加え、本文ページの h2 サブ英字
     （Figma title/h2 の "What is Nanny？" 等）でも使用する。
     定義表への追加を確認済み（2026-08-12）。 */
  --rnw-accent:       #BC326C;

  /* お問い合わせセクションの背景グラデーション（Figma 12:136） */
  --rnw-contact-gra:  linear-gradient(to bottom, #FFFFFF 0%, #F6BECA 52.404%);
}

/* 旧ヘッダーの追従ボタン（封筒アイコンの「ご入会のお問い合わせ」）。
   旧CSSは767px以下でしか消しておらず、768px以上では出たままになる。
   リニューアル後のヘッダーには無い要素なので、幅を問わず出さない。 */
header .menu_btn { display: none; }

/* 日本語の禁則を厳格にする（「っ」「ゃ」等の小書き文字や長音記号を行頭に置かない） */
body {
  line-break: strict;
}

/* -------------------------------------------------------------
   VIPケア（Figma 12:322 "device=SP, type=vipcare" / 18:2968）
   確定値の出所：
     ・colors-vipcare.css  … main / cta / subcta
     ・Figma登録バリアブル  … vipcare/bg, vipcare/accent
   ※ colors-vipcare.css には bg2 / accent の記載が無いため、
      Figma登録バリアブル値を採用している。要確認。
   ※ subcta2 は colors-nanny.css に「ナニーのみ存在」と明記があり、
      VIPケアのFigmaにも使用箇所が無いため意図的に未定義。
      （= VIPケア配下で .rnw-btn--sub2 は使わないこと）
   ------------------------------------------------------------- */
[data-property="vipcare"] {
  --rnw-main:         #4FBAA1;  /* メイン        vipcare/main（colors-vipcare.css と一致） */
  --rnw-bg2:          #D8EEE9;  /* 背景2         vipcare/bg ※要確認 */
  --rnw-cta-bg:       #4FBAA1;  /* CTA背景 */
  --rnw-cta-text:     #FFFFFF;  /* CTA文字 */
  --rnw-subcta-bg:    #FFFFFF;  /* subCTA背景 */
  --rnw-subcta-text:  #4FBAA1;  /* subCTA文字・枠線 */

  --rnw-accent:       #327666;  /* vipcare/accent ※要確認 */

  /* お問い合わせセクションの背景グラデーション（Figma 12:323）。
     ナニー(#FFF 0% → main 52.404%)と停止位置・色ともに異なり、
     終端色 #77D0BB は --rnw-main(#4FBAA1) ではない別値（Figma vipcare/gra2）。 */
  --rnw-contact-gra:  linear-gradient(to bottom, #FFFFFF 6.731%, #77D0BB 81.731%);
}


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

/* --- アイコン（単色SVGを mask で描画し、色は background-color から供給）---
   これにより色未確定でも変数の差し替えだけでアイコン色が追従する */
.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/icon_hamburger.svg');         mask-image: url('../img/icon_hamburger.svg'); }
.rnw-icon--close        { -webkit-mask-image: url('../img/icon_close.svg');             mask-image: url('../img/icon_close.svg'); }
/* 矢印はFigma上「白線」「濃赤線」の2種があるが形状は同一。
   maskで描画し色はCSS側（.rnw-btn--main / --sub）から与えるため1ファイルに集約。
   ▼アセットは「下向き」シェブロンで書き出されているが、Figmaのボタンでは
     Down コンポーネントに scaleY(-1)+rotate(90deg) が掛かっており見た目は
     「右向き」。CSS側で -90度回転させて向きを合わせる。
     （この回転が無いと、ヘッダー／フッターのCTAボタンの矢印も下向きになる） */
.rnw-icon--arrow        { -webkit-mask-image: url('../img/icon_arrow_circle.svg');      mask-image: url('../img/icon_arrow_circle.svg'); transform: rotate(-90deg); }
.rnw-icon--chevron      { -webkit-mask-image: url('../img/icon_chevron.svg');           mask-image: url('../img/icon_chevron.svg'); }
.rnw-icon--chevron-bold { -webkit-mask-image: url('../img/icon_chevron_bold.svg');      mask-image: url('../img/icon_chevron_bold.svg'); }
.rnw-icon--instagram    { -webkit-mask-image: url('../img/icon_instagram.svg');         mask-image: url('../img/icon_instagram.svg'); }
.rnw-icon--facebook     { -webkit-mask-image: url('../img/icon_facebook.svg');          mask-image: url('../img/icon_facebook.svg'); }
.rnw-icon--link-share   { -webkit-mask-image: url('../img/icon_link_share.svg');        mask-image: url('../img/icon_link_share.svg'); }

/* --- 点線罫線（Figma: stroke-dasharray="2 2"）---
   CSSの border-style:dashed は破線長を指定できないため背景で再現。
   色は --rnw-dash-c、太さは --rnw-dash-w を上書きして変更する。 */
.rnw-dash-b {
  --rnw-dash-c: var(--rnw-caption);
  --rnw-dash-w: 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% var(--rnw-dash-w);
  background-image: repeating-linear-gradient(
    to right,
    var(--rnw-dash-c) 0 2px,
    transparent 2px 4px
  );
}

/* --- 画面読み上げ用の非表示 --- */
.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;
}


/* =====================================================================
   3. ボタン
   ===================================================================== */

.rnw-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 32px;
  border-radius: 65.96px;
  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;
}
/* お問い合わせモーダルを開くCTAは <a> ではなく <button> で出す。
   ブラウザ既定の見た目を消して <a> のときと同じに見せる。 */
button.rnw-btn {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
/* ドロワーのCTA（縦積みの中で潰れないように）。
   地色はどのプロパティでもエンジ（common/accent/red）。VIPケア配下の
   --rnw-cta-bg はミントなので、ここだけ変数を上書きする（2026-09-25） */
.rnw-menu__cta {
  flex-shrink: 0;
  --rnw-cta-bg: #912344;
  --rnw-cta-text: #FFFFFF;
}

/* CTA（塗り） */
.rnw-btn--main {
  background-color: var(--rnw-cta-bg);
  border: 0.745px solid #FFFFFF;
  color: var(--rnw-cta-text);
}
.rnw-btn--main /* 遷移先未確定。renewal/pagenav.php が <a> ではなく <span> で出す。 */
.rnw-btn--pending { cursor: default; opacity: 0.6; }

.rnw-btn__icon { color: var(--rnw-cta-text); }

/* subCTA（白地・枠線） */
.rnw-btn--sub {
  background-color: var(--rnw-subcta-bg);
  border: 2px solid var(--rnw-subcta-text);
  color: var(--rnw-subcta-text);
}
.rnw-btn--sub .rnw-btn__icon { color: var(--rnw-subcta-text); }

/* subCTA2（メインカラー塗り）
   ヘッダー／フッターのFigmaフレームには未登場だが、確定カラーに
   --rnw-subcta2-* があるため対のコンポーネントとして定義しておく。 */
.rnw-btn--sub2 {
  background-color: var(--rnw-subcta2-bg);
  border: 0.745px solid var(--rnw-subcta2-bg);
  color: var(--rnw-subcta2-text);
}
.rnw-btn--sub2 .rnw-btn__icon { color: var(--rnw-subcta2-text); }

.rnw-btn__icon {
  width: 22px;
  height: 22px;
}

/* 縦に伸びるCTA（フッターのご入会ボタン） */
.rnw-btn--tall { padding-top: 24px; padding-bottom: 24px; }

/* --- ホバー ---
   旧 common.css の `body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }` が
   ボタンの文字色まで塗り替えるため、CTA（塗り）では文字が背景と同色になって消える。
   旧CSSは編集禁止なので、こちらで文字色だけ元に戻す（opacity 0.6 は活かす）。
   ▼旧ルールの詳細度が (0,2,2) のため body:not(.tab_view) を付けて上回らせている。
   アイコンは .rnw-btn__icon が自前で color を持つため影響を受けない。 */
body:not(.tab_view) .rnw-btn--main:hover { color: var(--rnw-cta-text); }
body:not(.tab_view) .rnw-btn--sub:hover  { color: var(--rnw-subcta-text); }
body:not(.tab_view) .rnw-btn--sub2:hover { color: var(--rnw-subcta2-text); }


/* =====================================================================
   4. ヘッダー
   ---------------------------------------------------------------------
   旧CSSの `header { min-width:1126px; opacity:0; padding:0 16px; height:90px;
   position:fixed; z-index:12 }` を明示的に上書きする。
   （クラスセレクタなので詳細度は勝つが、opacity:0 は旧JS依存のため要注意）
   ===================================================================== */

.rnw-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--rnw-z-header);
  width: 100%;
  min-width: var(--rnw-container-min-pc);  /* 旧 #container の min-width と揃える */
  height: auto;
  padding: 0;
  opacity: 1;  /* 旧CSS `header{opacity:0}` の打ち消し（旧JSでのfade-in前提を無効化） */
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

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

/* ------------------------------------
   4-1. SPヘッダー（Figma 12:71）
------------------------------------ */
.rnw-header__sp {
  display: none;  /* PCでは非表示。SP側のメディアクエリで解除 */
  align-items: center;
  min-height: var(--rnw-header-h-sp);
  padding: 12px 20px;                                   /* Figma実測 */
  border-bottom: 1px solid #DDE1E6;   /* Figma実測 #DDE1E6 */
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.rnw-header__sp-inner {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.rnw-header__logo {
  display: block;
  flex-shrink: 0;
  width: 225.62px;   /* Figma実測 */
  height: 32.666px;  /* Figma実測 */
  margin: 0;
}
.rnw-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ハンバーガー / クローズ */
.rnw-header__toggle {
  display: block;
  flex-shrink: 0;
  width: 35px;   /* Figma実測 */
  height: 35px;  /* Figma実測 */
  padding: 0;
  border: 0;
  background: none;
  color: var(--rnw-text);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.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; }

/* メニュー展開中はヘッダー下線の色が変わる（Figma 13:3868） */
.rnw-menu-open .rnw-header__sp { border-bottom-color: var(--rnw-caption); }

/* ------------------------------------
   4-2. PCヘッダー（Figma 13:1250 上段）
   ※ Figmaがトークン未適用の仮デザイン（Roboto / 黒罫線）のため、
     実測値のまま暫定実装。デザイン確定後にトークンへ差し替える。
------------------------------------ */
.rnw-header__pc {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--rnw-header-h-pc);
  /* 上下の余白は min-height + align-items:center で取る。
     padding にすると、高さいっぱいに広げたナビ項目の下端が
     ヘッダー下端（＝展開パネルの上端）まで届かず、
     マウスを移す途中で :hover が切れる。 */
  padding: 0 40px;                           /* Figma実測（上下はmin-heightで確保） */
  background-color: #FFFFFF;
  box-sizing: border-box;
}

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

.rnw-header__pc-logo {
  display: block;
  flex: 0 0 auto;   /* 伸ばさない。伸ばすとナビとCTAが右端まで届かない */
  width: 300px;     /* Figma実測 335:9327 */
}
.rnw-header__pc-logo img {
  display: block;
  width: 297px;   /* Figma実測 */
  height: 43px;   /* Figma実測 */
  object-fit: contain;
}

/* 展開パネルへマウスを移す途中で :hover が切れないよう、
   ナビ項目の当たり判定をヘッダーの高さいっぱいに広げる。
   ヘッダー下端＝パネル上端なので、項目とパネルの間に隙間ができない。
   見た目（地色の当たる範囲）はリンク側のpaddingのままで変わらない。 */
.rnw-header__pc-group > nav {
  display: flex;
  align-self: stretch;
  margin-left: auto;   /* ナビとCTAをひとまとまりで右端へ寄せる（Figma justify-between） */
}

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

/* 展開パネルをヘッダー幅いっぱいに置くため、基準は .rnw-header 側。
   項目を position:relative にしないこと。 */
.rnw-header__nav-item {
  position: static;
  display: flex;
  align-items: center;  /* 項目は高さいっぱい、中のリンクは縦中央 */
}

.rnw-header__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;  /* Figma実測 */
  padding: 0 10px;      /* Figma実測 px-10。高さは line-height 1.8 で出す */
  border: 0;
  border-radius: 4px;   /* Figma実測 */
  background: none;
  font-family: inherit;
  font-size: 16px;      /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);   /* Figma common/text/bk #444444 */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}

/* 遷移先未確定（<span> で出る） */
.rnw-header__nav-link--pending { color: var(--rnw-caption); cursor: default; }

/* 開いている項目は薄い地色が付く（Figma 335:9667 / 335:10093）。
   開閉は renewal/js/header.js が .is-open を付け外しする。
   CSSの :hover ではなくJSで持たせているのは、項目とパネルの間に
   ヘッダーの border-bottom ぶんの隙間があり、そこを横切ると
   :hover が切れてパネルが閉じてしまうため（斜めに動かした場合も同様）。 */
.rnw-header__nav-item.is-open > .rnw-header__nav-link {
  /* ▼ ここは --rnw-bg2 を使わないこと。
     ヘッダーの展開はサイト共通のデザイン（335:9667 は type=Familycare, page=common）で、
     VIPケア配下でも色は変わらない。プロパティ可変の変数を使うと
     /service-vipcare/ 配下でミントに転ぶ。 */
  background-color: #FAEEF1;  /* Figma nanny/bg */
}

/* 外部サイトへ出る項目（採用情報）に付く別窓アイコン。
   寸法と色はドロワーの .rnw-nav__external に合わせている。 */
.rnw-header__nav-labelrow {
  display: flex;
  align-items: center;
}
.rnw-header__nav-external {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--rnw-caption);  /* Figma common/text/gray #626262 */
}

/* 採用情報（2段組み）。補足「ポピンズで働く」はラベルの左端に揃える
   （align-items が center のままだとラベル幅の中央に寄る）。 */
.rnw-header__nav-link--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;  /* Figma実測 */
}
.rnw-header__nav-sub {
  font-size: 10px;   /* Figma実測 */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--rnw-caption);  /* Figma common/text/gray #626262 */
}

/* ドロップダウン開閉の矢印 */
.rnw-header__nav-caret {
  width: 13.339px;  /* Figma実測 */
  height: 7.669px;  /* Figma実測 */
  transform: rotate(180deg);  /* 既定は下向き（chevronアセットは上向き） */
  transition: transform 0.2s ease-out;
}
.rnw-header__nav-item.is-open .rnw-header__nav-caret { transform: rotate(0deg); }


/* ------------------------------------
   4-3. グローバルナビの展開パネル（Figma 1400:49549）
   ---------------------------------------
   左にカテゴリ・右にその中身の2カラム。左のカテゴリを選ぶと右の内容が
   入れ替わる（既定は先頭）。総合トップと同じ構成。
   開閉とカテゴリ切替は renewal/js/header.js。
------------------------------------ */
.rnw-header__nav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 0;
  border-top: 1px solid #BC326C; /* Figma nanny/text/accent。お問い合わせの #912344 とは別 */
  background-color: #FFFFFF;
  /* パネルが本文に重なるため、下辺に影を落として境目を出す。
     値はサイト内の他のカード（pages/personal-plan.css 等）と同じ。 */
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.rnw-header__nav-item.is-open > .rnw-header__nav-panel { display: block; }
.rnw-header__nav-panel[data-tone="nanny"] { --rnw-nav-panel-bg: #FAEEF1; }
.rnw-header__nav-panel[data-tone="educare"] { --rnw-nav-panel-bg: #E7EFFB; }
.rnw-header__nav-panel[data-tone="professional"] { --rnw-nav-panel-bg: #D9F0F4; }

.rnw-header__nav-panel-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

/* --- 左：カテゴリ --- */
.rnw-header__nav-tabs {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
  width: 26%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-header__nav-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background-color: #FFFFFF;
  font-family: inherit;
  color: var(--rnw-text);
  text-align: left;
  text-decoration: none;
  cursor: default;
  box-sizing: border-box;
  transition: background-color 0.15s ease-out;
}
/* 左の選択行と右の一覧を同じ色でつなぎ、左のほかの行は白にする。 */
.rnw-header__nav-tab.is-active { background-color: var(--rnw-nav-panel-bg, #FAEEF1); }
/* 単独リンクが再び追加された場合の表示。 */
.rnw-header__nav-tab--link { cursor: pointer; }
.rnw-header__nav-tabs .rnw-header__nav-tab--link:hover {
  opacity: 1;
  color: var(--rnw-text);
}
.rnw-header__nav-tab--pending { color: var(--rnw-caption); cursor: default; }

.rnw-header__nav-tabtext {
  display: flex;
  flex-direction: column;
  letter-spacing: 1.2px;
}
.rnw-header__nav-tabtitle {
  font-size: 16px;   /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
}
.rnw-header__nav-tabsub {
  font-size: 12px;   /* Figma common/text/caption */
  font-weight: 500;
  line-height: 1.3;
}

/* PCのカテゴリ右端の矢印は表示しない。 */
.rnw-header__nav-tabcaret {
  display: none;
}

/* --- 右：選択中のカテゴリの項目 --- */
.rnw-header__nav-groups {
  flex: 1 0 0;
  min-width: 0;
  padding: 24px 56px;
  background-color: var(--rnw-nav-panel-bg, #FAEEF1);
  box-sizing: border-box;
}

.rnw-header__nav-sublist {
  display: none;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  /* 項目数がページ変更で増減しても破綻しないよう、折り返しで組んでいる */
  column-gap: 64px;
  row-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-header__nav-sublist.is-active { display: flex; }
.rnw-header__nav-sublist[data-tone="nanny"] > li { min-width: 220px; }

.rnw-header__nav-sublink {
  display: flex;
  align-items: center;
  gap: 16px;  /* Figma実測 */
  color: var(--rnw-text);
  text-decoration: none;
}
.rnw-header__nav-sublink--pending { color: var(--rnw-caption); cursor: default; }
/* 旧共通CSSのホバー時のピンク指定を上書きし、通常の文字色を保つ。 */
body:not(.tab_view) .rnw-header__nav-sublink:hover { color: var(--rnw-text); }
/* 左のカテゴリ矢印は消すが、右の遷移リンクは画像と同じ右向き矢印を残す。 */
a.rnw-header__nav-sublink:not([target="_blank"])::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 12px;
  background-color: currentColor;
  transform: rotate(90deg);
  -webkit-mask: url('../img/icon_chevron.svg') no-repeat center / contain;
          mask: url('../img/icon_chevron.svg') no-repeat center / contain;
}

/* 項目頭の丸。色はカテゴリ（data-tone）ごとに変わる。
   ▼--rnw-main 等の変数を使わないこと。1つのパネルの中で3色が同時に必要になるため、
     プロパティ可変の変数では表現できない。 */
.rnw-header__nav-dot {
  flex-shrink: 0;
  width: 16px;   /* Figma実測 */
  height: 16px;
  border-radius: 50%;
  background-color: var(--rnw-caption);  /* tone未設定時の保険 */
}
.rnw-header__nav-sublist[data-tone="nanny"]        .rnw-header__nav-dot { background-color: #F6BECA; }  /* nanny/main */
.rnw-header__nav-sublist[data-tone="educare"]      .rnw-header__nav-dot { background-color: #00429A; }  /* educare/main */
.rnw-header__nav-sublist[data-tone="professional"] .rnw-header__nav-dot { background-color: #00778A; }  /* pro/main */

/* 1項目だけカテゴリと色が違う場合（法人の「介護コンサルティング・育児コンサルティング」）。
   カテゴリ側の指定に必ず勝たせるため、sublist から書き下している。 */
.rnw-header__nav-sublist .rnw-header__nav-subitem[data-tone="nanny"]        .rnw-header__nav-dot { background-color: #F6BECA; }
.rnw-header__nav-sublist .rnw-header__nav-subitem[data-tone="educare"]      .rnw-header__nav-dot { background-color: #00429A; }
.rnw-header__nav-sublist .rnw-header__nav-subitem[data-tone="professional"] .rnw-header__nav-dot { background-color: #00778A; }

.rnw-header__nav-subtext {
  display: flex;
  flex-direction: column;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.rnw-header__nav-subtitle {
  font-size: 16px;   /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
}
.rnw-header__nav-subnote {
  font-size: 12px;   /* Figma common/text/caption */
  font-weight: 500;
  line-height: 1.3;
}

/* 別窓アイコン（Figma streamline-sharp:link-share-2 24px）。
   テキストとの間隔はFigma実測8px。sublinkのgap16pxから差し引く。 */
.rnw-header__nav-blank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: -8px;
  color: var(--rnw-text);
}

/* PCヘッダーのお問い合わせボタン（Figma 335:9351）。
   プロパティ可変ではない。ヘッダーは page=common の共通デザインで、
   VIPケア配下でも濃赤のまま（--rnw-cta-bg を使わないこと）。 */
.rnw-header__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 48px;                /* Figma実測 */
  padding: 16px 28px;          /* Figma実測 12px + 内側Text Containerの16px */
  border: 0;
  border-radius: 8px;          /* Figma実測 */
  background-color: #912344;   /* Figma common/accent/red */
  font-size: 18px;             /* Figma SP/button/big */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;       /* Figma実測 */
  color: #FFFFFF;              /* Figma common/white */
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  /* 遷移せずモーダルを開くので <button>。ブラウザ既定の見た目を消す。 */
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* --- 会員ログイン（Figma 6046:18091 / 100×48・枠線2px・角丸8）---
   お問い合わせの右に並べる。間隔は .rnw-header__pc-group の gap 24px。
   遷移せずモーダルを開くだけなので <button>。 */
.rnw-header__login {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 48px;                /* Figma実測 */
  padding: 0 20px;             /* Figma実測 4px + Text Container の16px */
  border: 2px solid #912344;   /* Figma common/accent/red */
  border-radius: 8px;          /* Figma実測 */
  background-color: transparent;
  font-family: inherit;
  font-size: 14px;             /* Figma実測 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;       /* Figma実測 */
  color: #912344;
  white-space: nowrap;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease-out;
}
body:not(.tab_view) .rnw-header__login:hover { background-color: #FAEEF1; }

/* ホバー。旧 common.css の `body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }`
   が文字色まで塗り替えて濃赤地に沈むため、文字色だけ白に戻す（opacity 0.6 は活かす）。
   .rnw-btn--main と同じ理由・同じ詳細度の上げ方。 */
body:not(.tab_view) .rnw-header__cta:hover { color: #FFFFFF; }


/* =====================================================================
   5. SPメニュー展開パネル（Figma 13:3867）
   ===================================================================== */

.rnw-menu {
  position: fixed;
  top: var(--rnw-header-h-sp);
  left: 0;
  z-index: var(--rnw-z-menu);
  width: 100%;
  height: calc(100vh - var(--rnw-header-h-sp));
  height: calc(100dvh - var(--rnw-header-h-sp));
  padding: 0 0 40px;  /* Figma実測 pb-40 */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 既定は総合トップのドロワーと同じ地色。
     ヘッダーの帯と展開パネルは page=common の共通デザインなので触らないが、
     ドロワーの地色はプロパティに合わせる（下の vipcare の上書き）。 */
  background-color: #FAEEF1;  /* Figma nanny/bg */
  font-family: var(--rnw-font-jp);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
  box-sizing: border-box;
}

/* VIPケア配下はミント。 */
[data-property="vipcare"] .rnw-menu { background-color: var(--rnw-bg2); }  /* vipcare/bg #D8EEE9 */

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

/* body スクロールロック */
.rnw-menu-open { overflow: hidden; }

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

.rnw-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* Figma実測 */
  width: 330px;  /* Figma実測 */
  max-width: calc(100% - 32px);
  margin: 0 auto;
}

/* ------------------------------------
   5-1. サービスカード
------------------------------------ */
/* ページ内ナビ（カード）の配置スロット。カードを持つページだけ出力される。 */
.rnw-menu__card-wrap { padding-top: 30px; }  /* Figma実測 pt-30 */

.rnw-pagenav--card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測 */
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

.rnw-pagenav--card .rnw-pagenav__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--rnw-caption);
  text-align: center;
}
.rnw-pagenav--card .rnw-pagenav__label-main {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;  /* Figma実測 */
}
.rnw-pagenav--card .rnw-pagenav__label-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;  /* Figma実測 */
}

/* 2列のリンクグリッド */
.rnw-pagenav--card .rnw-pagenav__list {
  display: flex;
  flex-wrap: wrap;
  /* 項目数が奇数のとき、最後の1つが行の中央に寄らないよう左詰めにする
     （例：首都圏／東海／関西 の「関西」。2026-09-21）。
     グリッド自体は幅298px固定で親が中央に置くため、見た目は左右対称のまま。 */
  justify-content: flex-start;
  gap: 0 12px;  /* Figma実測 行gap0 / 列gap12 */
  width: 298px;  /* Figma実測 = 143px * 2 + 12px */
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-pagenav--card .rnw-pagenav__item {
  --rnw-dash-c: var(--rnw-accent);
  width: 143px;  /* Figma実測 */
  max-width: calc(50% - 6px);
}
/* 1行目のみ上罫線あり（Figma 13:3882 / 13:3884） */
.rnw-pagenav--card .rnw-pagenav__item:nth-child(-n + 2) {
  background-position: left top, left bottom;
  background-size: 100% 1px, 100% 1px;
  background-image:
    repeating-linear-gradient(to right, var(--rnw-dash-c) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to right, var(--rnw-dash-c) 0 2px, transparent 2px 4px);
}
.rnw-pagenav--card .rnw-pagenav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma実測: 項目枠143px / 内側のテキスト枠137px（13:3883）。
     左右16pxだと文字領域が111pxとなり「ご利用までの流れ」(8文字≒113px)が
     2行に割れるため、左右は (143-137)/2 = 3px とする。上下はデザイン値の16px。 */
  padding: 16px 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;  /* Figma実測 */
  color: var(--rnw-text);
  text-align: center;
  white-space: nowrap;   /* ラベルを折り返さない */
  word-break: keep-all;  /* 日本語の文節途中での改行も抑止 */
  box-sizing: border-box;
}

/* --- VIPケアのサービスカード（Figma 18:2968 / 18:2975）---
   寸法（330 / p16 / gap24 / グリッド298・列gap12・項目143）はナニーと同一。
   異なるのは以下3点のみ。 */

/* 1) 点線罫線の色：ナニーは accent(#BC326C) だが VIPケアは main(#4FBAA1)。
      Figma上そう指定されているため踏襲。要確認（accent #327666 ではない）。 */
[data-property="vipcare"] .rnw-pagenav--card .rnw-pagenav__item { --rnw-dash-c: var(--rnw-main); }

/* 2) 文字色がナニーと入れ替わっている（Figma実測）。
      ナニー  : カード見出し #626262 / グリッド #444444
      VIPケア : カード見出し #444444 / グリッド #626262
      デザイン側の意図か不揃いかは要確認。 */
[data-property="vipcare"] .rnw-pagenav--card .rnw-pagenav__label  { color: var(--rnw-text); }
[data-property="vipcare"] .rnw-pagenav--card .rnw-pagenav__link  { color: var(--rnw-caption); }

/* 3) 「家事・家事プラスコース」だけ2行になる（Figma実測 項目高82px）。
      折り返しをブラウザ任せにすると改行位置がFigma（家事・家事プラス／コース）と
      ずれるため、header.php 側でラベルを配列にして <br> を明示的に入れている。
      白スペース設定は .rnw-pagenav--card .rnw-pagenav__link（nowrap / keep-all）のままでよい
      ＝ <br> は nowrap でも改行されるため、CSS側の上書きは不要。 */

/* ------------------------------------
   5-2. グローバルナビ（.rnw-nav ／ 3階層のアコーディオン）
   ---------------------------------------
   総合トップと同じ構成。マークアップは renewal/nav.php の rnw_nav_render()、
   開閉は renewal/js/header.js。項目数に依存しない作りにしてある。
     1階層目 … 個人向けサービス／法人向けサービス／国・自治体向け／会社情報／採用情報
     2階層目 … 各カテゴリ
     3階層目 … 個別サービス（行頭に色付きのドット）
   .rnw-menu__nav は「どこに置かれているか」を示す配置用のBEMミックスで、
   .rnw-menu__inner の flex 子として並ぶだけなのでスタイルを持たない。
------------------------------------ */
.rnw-nav a,
.rnw-nav button { text-decoration: none; }

.rnw-nav__list,
.rnw-nav__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 見出し（<button> / <a> / <span> の3パターンを同じ見た目に揃える） */
.rnw-nav__head {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 18px;          /* Figma SP/text/large/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;  /* Figma実測 */
  color: var(--rnw-text);
  text-align: left;
  -webkit-appearance: none;
          appearance: none;
}
button.rnw-nav__head,
a.rnw-nav__head { cursor: pointer; }

/* 遷移先未確定の項目（<span> 出力）。
   renewal/nav.php の該当項目に url が入れば自動的に <a> になる。 */
.rnw-nav__head--pending {
  color: var(--rnw-caption);
  cursor: default;
}

.rnw-nav__label { flex: 1 1 auto; }

/* 採用情報の補足テキスト */
.rnw-nav__sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
}

.rnw-nav__caret {
  width: 10.607px;   /* Figma実測 */
  height: 14.607px;  /* Figma実測 */
  transform: rotate(180deg);  /* 既定は下向き（アセットは上向き） */
  transition: transform 0.2s ease-out;
}
.rnw-nav__head[aria-expanded="true"] .rnw-nav__caret { transform: rotate(0deg); }

.rnw-nav__sublink {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
.rnw-nav__sublink--pending { color: var(--rnw-caption); cursor: default; }

/* --- ドロワー時（項目間24px ＋ 各項目下に点線罫線） --- */
.rnw-nav--drawer .rnw-nav__list { padding-top: 20px; }

.rnw-nav--drawer .rnw-nav__item { padding-bottom: 24px; }
.rnw-nav--drawer .rnw-nav__item + .rnw-nav__item { padding-top: 24px; }

.rnw-nav--drawer .rnw-nav__head { justify-content: space-between; gap: 4px; }

/* 「採用情報」のように補足テキストを持つ項目は、ラベルの右に並べる（Figma実測 gap-4） */
.rnw-nav--drawer .rnw-nav__label { flex: 0 0 auto; }
.rnw-nav--drawer .rnw-nav__sub   { flex: 1 1 auto; margin-left: 4px; }

/* 開閉パネル。max-height のトランジションで開閉する。
   値は「十分に大きい」だけで実寸ではない（項目数が増えても破綻しない）。
   ▼1階層目は中で2階層目が開くぶん、100vhでは足りずに切れる。 */
.rnw-nav--drawer .rnw-nav__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease-out;
}
.rnw-nav--drawer .rnw-nav__head[aria-expanded="true"] + .rnw-nav__panel { max-height: 400vh; }
.rnw-nav--drawer .rnw-nav__subhead[aria-expanded="true"] + .rnw-nav__panel--deep { max-height: 100vh; }

/* 子を持たない2階層目のリンク用 */
.rnw-nav--drawer .rnw-nav__sublink { padding: 12px 0 0 16px; }

/* --- 2階層目「◯◯を探す」。ラベルの下に補足、右端に開閉シェブロン。 --- */
.rnw-nav--drawer .rnw-nav__subitem--has-child { padding: 16px 0 16px 16px; }  /* Figma実測 */

.rnw-nav__subhead {
  /* ラベルと補足を縦に積み、シェブロンは2行ぶんの中央に置く */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label caret"
    "sub   caret";
  column-gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  color: var(--rnw-text);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-nav__subhead .rnw-nav__label {
  grid-area: label;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.192px;
}
.rnw-nav__subhead .rnw-nav__sub {
  grid-area: sub;
  font-size: 12px;
  line-height: 1.3;
}
.rnw-nav__subhead .rnw-nav__caret {
  grid-area: caret;
  align-self: center;
}

/* --- 3階層目（個別サービス）。行頭に色付きのドット。色は2階層目の tone から降ってくる。 --- */
.rnw-nav__subitem--nanny        { --rnw-nav-dot: #F6BECA; }  /* nanny/main */
.rnw-nav__subitem--educare      { --rnw-nav-dot: #00429A; }  /* educare/main */
.rnw-nav__subitem--professional { --rnw-nav-dot: #00778A; }  /* pro/main */

.rnw-nav__leaflist {
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.rnw-nav__leaf {
  position: relative;
  padding: 12px 0 0 40px;   /* Figma実測（ドットぶん左に寄せる） */
}
/* 行頭のドット。ラベル1行目の中央に合わせる（16px × 1.8 ÷ 2 ＝ 14.4） */
.rnw-nav__leaf::before {
  content: "";
  position: absolute;
  top: calc(12px + 14.4px - 5px);
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--rnw-nav-dot, var(--rnw-caption));
}

.rnw-nav__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  color: var(--rnw-text);
}
.rnw-nav__link .rnw-nav__label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.192px;
}
.rnw-nav__link .rnw-nav__sub {
  font-size: 12px;
  line-height: 1.3;
}
/* 遷移先未確定（PIICSなど）は <span> で出る */
.rnw-nav__link--pending { color: var(--rnw-caption); cursor: default; }

/* ラベル右の別窓アイコン（ポピンズシッター／ペットケア）。
   .rnw-icon は display:block なので、ラベルと同じ行に並べるため inline-block に戻す。 */
.rnw-nav__external {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--rnw-caption);
}

/* ------------------------------------
   5-3. SNS
------------------------------------ */
.rnw-menu__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;  /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-menu__sns .rnw-icon {
  width: 40px;   /* Figma実測 */
  height: 40px;  /* Figma実測 */
  color: var(--rnw-text);
}

/* --- 会員ログイン（Figma 1726:19515 / 幅いっぱい・高さ48）---
   ▼地色はFigmaでは nanny/bg #FAEEF1（＝ドロワーの地色）で、見た目は文字だけ。
     ここで #FAEEF1 を指定すると、地色がミントのVIPケア配下でピンクの箱が浮く。
     透明にして、どのプロパティでも文字だけに見せる。 */
.rnw-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;        /* Figma実測 */
  margin-top: 20px;    /* Figma実測 SNSとの間隔 */
  padding: 0;
  border: 0;
  border-radius: 8px;  /* Figma実測 */
  background-color: transparent;
  font-family: inherit;
  font-size: 18px;     /* Figma実測 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;  /* Figma実測 */
  color: #912344;      /* Figma common/accent/red */
  cursor: pointer;
}


/* ---------------------------------------------------------------------
   5-4. 旧SPメニューの無効化
   ---------------------------------------------------------------------
   旧 /familycare/js/function.js が実行時に下記をDOMへ動的挿入するため、
   header.php からマークアップを削除しても表示が残ってしまう。
   （テーマのPHPには .sp_menu_wrap / #sp_menu のマークアップは一切無いが、
     旧common.css には 936行〜/1003行〜 にスタイルだけが存在する＝JS生成の証拠）

     .sp_menu_wrap > .sp_menu_btn > #btn_menu  … 旧ハンバーガー（64x64 / fixed / z-index:15）
     #sp_menu                                   … 旧SPメニュー本体

   旧JSは「一切消さない・並び替えない」要件のため削除できないので、
   ここで非表示にして新ヘッダーのハンバーガーだけを残す。
   旧JSが jQuery の show()/slideDown() 等でインラインstyleを付ける可能性があるため
   !important を付けている。
   ※ PCフッターと同様、旧実装を完全撤去できる段階になったら
     この節ごと削除してよい。
   --------------------------------------------------------------------- */
.sp_menu_wrap,
#sp_menu {
  display: none !important;
}


/* =====================================================================
   6. ページ内ナビバー（Figma 335:13130 下段 "_menu"）
   ---------------------------------------------------------------------
   ページごとの項目もレンダラも renewal/pagenav.php に一元化している。
   ヘッダーとは別の固定要素として扱う（ヘッダー内に入れないこと）。
     初期表示 … ヘッダー直下（上から --rnw-header-h-pc）
     スクロール後 … 画面下端に固定（.is-docked / renewal/js/header.js）
   背景はプロパティ可変。nanny/bg #FAEEF1 ／ vipcare/bg #D8EEE9 で、
   どちらも --rnw-bg2 と同値のためそのまま使う。
   SPでは出さない（項目はSPメニューのサービスカード側に入る）。
   ===================================================================== */

.rnw-pagenav--bar {
  display: none;  /* SPでは非表示。PC側のメディアクエリで解除 */
  position: fixed;
  top: var(--rnw-header-h-pc);
  left: 0;
  z-index: var(--rnw-z-pagenav);
  width: 100%;
  min-width: var(--rnw-container-min-pc);  /* 旧 #container の min-width と揃える */
  align-items: center;
  justify-content: center;
  justify-content: safe center;  /* 収まる時は中央 / 溢れる時は左寄せ（先頭が切れるのを防ぐ） */
  flex-wrap: nowrap;             /* 帯は常に1行 */
  gap: 40px;                     /* Figma実測 */
  padding: 10px 20px;            /* Figma実測 py-10。高さはこのpaddingと中身で 56px / 65px になる */
  overflow-x: auto;              /* 収まらない場合は横スクロール */
  background-color: var(--rnw-bg2);
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

/* 遷移先未確定の項目。<a> ではなく <span> で出るためリンクにならない。
   href="#" を出さないのは、旧 function.js が a[href^="#"] を全て捕捉して
   $(href).offset().top を読むため（renewal/pagenav.php の冒頭コメント参照）。 */
.rnw-pagenav__link--pending {
  color: var(--rnw-caption);
  cursor: default;
}

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

.rnw-pagenav--bar .rnw-pagenav__label {
  display: flex;
  flex: 0 0 auto;  /* 縮まない */
  flex-direction: column;
  color: var(--rnw-text);   /* Figma common/text/bk #444444 */
  letter-spacing: 1.2px;    /* Figma実測 */
  white-space: nowrap;
}
.rnw-pagenav--bar .rnw-pagenav__label-main {
  margin: 0;
  font-size: 16px;     /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
}
.rnw-pagenav--bar .rnw-pagenav__label-sub {
  margin: 0;
  font-size: 12px;     /* Figma common/text/caption */
  font-weight: 500;
  line-height: 1.3;
}

.rnw-pagenav--bar .rnw-pagenav__list {
  display: flex;
  flex: 0 0 auto;      /* ← ここが縮むと内部が折り返して崩れるため固定 */
  align-items: center;
  flex-wrap: nowrap;   /* 常に1行 */
  gap: 20px;           /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 各項目は縮まない＝ラベルが2行に割れない（Figma上も全項目1行） */
.rnw-pagenav--bar .rnw-pagenav__list > li { flex: 0 0 auto; }

.rnw-pagenav--bar .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: #FFFFFF;  /* Figma common/white */
  font-size: 14px;       /* Figma SP/button/small */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;   /* ラベルを折り返さない */
  word-break: keep-all;  /* 日本語の文節途中での改行も抑止 */
  text-decoration: none;
  box-sizing: border-box;
}
.rnw-pagenav--bar .rnw-pagenav__link:hover { color: var(--rnw-accent); }
.rnw-pagenav--bar .rnw-pagenav__link:focus-visible {
  outline: 2px solid var(--rnw-accent);
  outline-offset: 2px;
}

/* 旧 #container の min-width 1440px 未満では、項目数の多いページ
   （ナニー9項目 = 約1386px）が1行に収まらない。Figmaの間隔を保ったまま
   横スクロールに逃がすと先頭が隠れるため、この幅帯だけ間隔を詰める。 */
@media only screen and (min-width: 1126px) and (max-width: 1439px) {
  .rnw-header__pc { padding-left: 24px; padding-right: 24px; }
  .rnw-header__pc-group { gap: 16px; }
  .rnw-header__pc-logo { width: 220px; }
  .rnw-header__pc-logo img { width: 217px; }
  .rnw-header__nav { gap: 8px; }
  .rnw-header__nav-link { gap: 6px; padding: 0 4px; font-size: 14px; }
  .rnw-pagenav--bar       { gap: 24px; padding-left: 12px; padding-right: 12px; }
  .rnw-pagenav--bar .rnw-pagenav__list { gap: 12px; }
  .rnw-pagenav--bar .rnw-pagenav__link { padding-left: 16px; padding-right: 16px; }

  /* グローバルナビの展開パネル（4-3）も1440px前提の余白では収まらないため詰める。 */
  .rnw-header__nav-tabs     { width: 300px; }
  .rnw-header__nav-groups   { padding: 20px 32px; }
  .rnw-header__nav-tabtitle { font-size: 15px; }
  .rnw-header__nav-tabsub   { font-size: 11px; }

  .rnw-header__nav-sublist  { column-gap: 40px; row-gap: 28px; }
  .rnw-header__nav-sublink  { gap: 12px; }
  .rnw-header__nav-subtitle { font-size: 15px; }
  .rnw-header__nav-subnote  { font-size: 11px; }
  .rnw-header__nav-dot      { width: 14px; height: 14px; }
  .rnw-header__nav-blank    { width: 20px; height: 20px; margin-left: -4px; }
}


/* =====================================================================
   7. フッター（SP Figma 12:135 ／ PC 403:45239）
   ---------------------------------------------------------------------
   PC用のレイアウトは「9. レスポンシブ」の 769px〜 のブロックにある
   （ヘッダーの分岐は1126pxだが、フッターは769pxまでPC版を出す）。
   ===================================================================== */

.rnw-footer {
  display: block;
  position: relative;
  font-family: var(--rnw-font-jp);
}
.rnw-footer a { text-decoration: none; }
.rnw-footer ul { margin: 0; padding: 0; list-style: none; }

/* ------------------------------------
   7-1. お問い合わせセクション（Figma 12:136）
------------------------------------ */
.rnw-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測 */
  padding: 56px 16px;  /* Figma実測（ナニー12:136 / VIPケア12:323 とも同値） */
  /* グラデーションはプロパティごとに停止位置・色が異なるため変数化 */
  background-image: var(--rnw-contact-gra);
  box-sizing: border-box;
}

.rnw-footer__contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* Figma実測 */
  width: 100%;
  height: 126px;  /* Figma実測 */
  background-color: rgba(255, 255, 255, 0.9);  /* Figma実測 */
  text-align: center;
  box-sizing: border-box;
}
.rnw-footer__contact-en {
  margin: 0;
  font-family: var(--rnw-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-accent);
}
.rnw-footer__contact-ja {
  margin: 0;
  font-family: var(--rnw-font-serif);
  font-size: 28px;  /* Figma実測 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

.rnw-footer__contact-card {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* Figma実測 */
  /* 上の見出しブロック（-head は width:100%）と左右を揃える。
     Figma実測は343pxだが、375pxより広い端末では見出しだけが伸びて段差になる。 */
  width: 100%;
  padding: 24px 16px;  /* Figma実測 */
  border-radius: 8px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}
.rnw-footer__contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;  /* Figma実測 */
}
.rnw-footer__contact-block .rnw-btn {
  align-items: center;
}
.rnw-footer__contact-block .rnw-btn > span:first-child {
  display: block;
  align-self: center;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}
.rnw-footer__contact-title {
  margin: 0;
  font-size: 20px;  /* Figma実測 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}
/* カード内の区切り（Figma 12:148 : 2px / #BC326C / dasharray 2 2） */
.rnw-footer__contact-divider {
  --rnw-dash-c: var(--rnw-accent);
  --rnw-dash-w: 2px;
  height: 2px;
  border: 0;
  margin: 0;
}

/* 「お電話でのお問い合わせ」見出しはSPのみ common/text/gray（#626262）。
   PC（Figma 1258:14012）は1段目と同じ common/text/bk で、769px〜 で戻す。 */
.rnw-footer__contact-title--gray { color: var(--rnw-caption); }

/* フォーム側ボタンの最後の1本は common/accent/red（#912344）。
   VIPケアだと --rnw-cta-bg が vipcare/main（#4FBAA1）なので、そのままだと
   ミントに転ぶ。2本出すページ（事例・お客様の声）は上の1本がミント、
   下の1本が濃赤になる（Figma 1258:21287）。出し分けは footer.php。 */
.rnw-footer__contact .rnw-btn--red {
  background-color: #912344;  /* common/accent/red */
}

/* 活用事例の一覧・詳細だけ、1本目「ご相談はこちら」もSPでは濃赤になる。
   PCは1本目がミントのまま（Figma SP 1297:38922 / PC 1258:21171）。2026-09-21 */
@media only screen and (max-width: 767px) {
  .rnw-footer__contact .rnw-btn--red-sp {
    background-color: #912344;
  }
}

/* --- VIPケア専用のお問い合わせブロック（Figma 1258:14012） ---
   ブロック構成がナニーと異なる：
     1段目「フォームでのお問い合わせ」+ CTAボタン1本
     2段目「お電話でのお問い合わせ」+ 受付時間 + 電話番号（ボタンなし）
   2段目の見出しだけSPで common/text/gray（#626262）。PCは2段とも
   common/text/bk（#444444）。
   共通の .rnw-footer__contact / -head / -card / -block / -divider はそのまま流用し、
   VIPケアにしか存在しない要素だけをここで定義する。 */

/* 受付時間などの注記（Figma 12:342） */
.rnw-footer__contact-note {
  margin: 0;
  font-size: 14px;         /* Figma実測 */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px; /* Figma実測 */
  color: var(--rnw-text);
  align-self: stretch;     /* 親が align-items:center のため左揃えに戻す */
}

/* 電話番号（Figma 12:343） */
.rnw-footer__contact-tel {
  margin: 0;
  font-family: var(--rnw-font-en);
  font-size: 45px;         /* Figma実測 */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;   /* Figma実測 */
  color: var(--rnw-text);
  white-space: nowrap;
}
.rnw-footer__contact-tel a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------
   7-2. サイト情報（Figma 12:155）
------------------------------------ */
.rnw-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 31.99px;  /* Figma実測 */
  padding-top: 60px;  /* Figma実測 */
}

.rnw-footer__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 39.99px;  /* Figma実測 */
  width: 341.25px;  /* Figma実測 */
  max-width: 100%;
  padding: 40px 15px 0;  /* Figma実測 */
  border-top: 1px solid var(--rnw-caption);  /* Figma 12:157 */
  box-sizing: border-box;
}

.rnw-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 40px;  /* Figma実測 */
}

.rnw-footer__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 311.25px;  /* Figma実測 */
  margin: 0 auto;
}
.rnw-footer__logo img {
  display: block;
  width: 296.852px;   /* Figma実測 */
  height: 42.942px;   /* Figma実測 */
  max-width: 100%;
  object-fit: contain;
}

.rnw-footer__sns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rnw-footer__sns li:first-child { padding-right: 16px; }  /* Figma実測 */
.rnw-footer__sns img {
  display: block;
  width: 28px;   /* Figma実測 */
  height: 28px;
}
.rnw-footer__sns li:last-child img { width: 29px; height: 29px; }  /* Figma実測 */

/* ------------------------------------
   7-3. サイトマップ（Figma 12:216 / 12:259）
------------------------------------ */
.rnw-footer__nav { padding-top: 8px; }

.rnw-footer__nav-group { --rnw-dash-c: var(--rnw-caption); }

.rnw-footer__nav-title {
  display: block;
  margin: 0;
  padding: 32px 56px 32px 0;  /* Figma実測 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;  /* Figma実測 */
  color: var(--rnw-text);
}
.rnw-footer__nav-title--tight { padding-bottom: 12px; }  /* Figma 12:221 */

.rnw-footer__services-toggle { display: none; }
.rnw-footer__services-panel { display: contents; }
.rnw-footer__services-panel[hidden] { display: none; }

@media only screen and (max-width: 768px) {
  .rnw-footer__services-panel { display: block; }
  .rnw-footer__nav-group--services.is-accordion-ready > .rnw-footer__nav-title { display: none; }
  .rnw-footer__nav-group--services.is-accordion-ready > .rnw-footer__services-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 32px 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.168px;
    color: var(--rnw-text);
    text-align: left;
    cursor: pointer;
  }
  .rnw-footer__services-indicator {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }
  .rnw-footer__services-indicator::before,
  .rnw-footer__services-indicator::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 16px;
    height: 1px;
    background-color: currentColor;
  }
  .rnw-footer__services-indicator::after { transform: rotate(90deg); }
  .rnw-footer__services-toggle[aria-expanded="true"] .rnw-footer__services-indicator::after { display: none; }
}

/* お客様区分の見出し（Figma 12:224 / 12:251 は Fill/Default #333333） */
.rnw-footer__nav-segment {
  display: flex;
  align-items: center;
  padding: 4px 12px;  /* Figma実測 */
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-heading);
}

.rnw-footer__nav-sublist { padding: 0 0 24px 20px; }  /* Figma実測 */
.rnw-footer__nav-sublist--nested { padding: 0 0 0 20px; }

.rnw-footer__nav-row {
  display: flex;
  align-items: center;
  padding: 16px 12px 16px 0;  /* Figma実測 */
}
.rnw-footer__nav-row-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 */
}
.rnw-footer__nav-label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
.rnw-footer__nav-row--government .rnw-footer__nav-row-inner { width: 100%; }
.rnw-footer__nav-label--government { padding: 0 0 8px 1em; }
.rnw-footer .rnw-footer__nav-row--government a.rnw-footer__nav-service { color: var(--rnw-caption); }
.rnw-footer__nav-services {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 */
}
.rnw-footer__nav-service {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12px;   /* Figma実測 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
}
.rnw-footer__nav-service .rnw-icon--link-share {
  width: 16px;   /* Figma実測 */
  height: 16px;
  color: var(--rnw-caption);
}

/* 単独リンクのリスト（よくあるご質問 等） */
.rnw-footer__links { --rnw-dash-c: var(--rnw-caption); }
.rnw-footer__links-item { padding-bottom: 1px; }
.rnw-footer__links-link {
  display: block;
  position: relative;
  padding: 32px 24px 32px 0;  /* Figma実測 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
/* 別窓アイコン（旧common.cssの poppins アイコンフォント \e902 を流用） */
.rnw-footer__links-link[target="_blank"]::after,
.rnw-footer__nav-title[target="_blank"]::after {
  content: "\e902";
  font-family: var(--rnw-font-icon);
  font-size: 10px;
  letter-spacing: 0.9px;
  color: var(--rnw-caption);
  margin-left: 4px;
}

/* 採用情報（2026-09-25 追加）。ラベルの下に補足「ポピンズで働く」を出す。
   別窓で開くがFigmaにアイコンが無いので、上の別窓アイコンを消す。
   補足の値は総合トップのフッター（.rnw-footer-pc__links-sub）に合わせている。 */
.rnw-footer__nav-group--recruit .rnw-footer__nav-title::after { content: none; }
.rnw-footer__nav-title-main,
.rnw-footer__nav-title-sub { display: block; }
.rnw-footer__nav-title-sub {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
  white-space: nowrap;
}

/* ------------------------------------
   7-4. グループ会社（Figma 12:273）
------------------------------------ */
.rnw-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 */
}
.rnw-footer__group-link {
  display: flex;
  position: relative;
  align-items: center;
  padding: 1px;  /* Figma実測 */
  border: 1px solid var(--rnw-main);  /* Figma実測 */
}
.rnw-footer__group-link img {
  display: block;
  width: 49px;   /* Figma実測 */
  height: 49px;
  margin-right: 16px;  /* Figma実測 */
}
.rnw-footer__group-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
.rnw-footer__group-link::after {
  content: "\e902";  /* 別窓アイコン */
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 13.5px;  /* Figma実測 */
  letter-spacing: 0.9px;
  color: var(--rnw-accent);
}

/* ------------------------------------
   7-5. 最下部（Figma 12:288）
------------------------------------ */
.rnw-footer__legal {
  width: 100%;
  padding: 40px 16.87px 24px;  /* Figma実測 */
  background-color: var(--rnw-caption);  /* Figma実測 #626262 */
  box-sizing: border-box;
}
.rnw-footer__legal-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;  /* Figma実測 */
  width: 341.25px;  /* Figma実測 */
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

.rnw-footer__cert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 -8px;  /* Figma実測 left/right -8px */
}
.rnw-footer__cert li { flex: 1 0 0; min-width: 0; }
.rnw-footer__cert img {
  display: block;
  width: 157.05px;   /* Figma実測 */
  height: 59px;      /* Figma実測 */
  max-width: 100%;
}

.rnw-footer__policy-link {
  display: flex;
  position: relative;
  align-items: flex-end;
  gap: 4px;  /* Figma実測 */
  padding: 8px 18px;  /* Figma実測 */
  font-family: 'Noto Sans JP', sans-serif;  /* Figma実測 */
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 1.3px;  /* Figma実測 */
  color: #FFFFFF;
}
/* 行頭の矢印アイコン（旧common.css \e901） */
.rnw-footer__policy-link::before {
  content: "\e901";
  position: absolute;
  top: 18.75px;   /* Figma実測 */
  left: 6.69px;   /* Figma実測 */
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 7px;  /* Figma実測 */
  letter-spacing: 0.91px;
}
.rnw-footer__policy-link[target="_blank"]::after {
  content: "\e902";
  font-family: var(--rnw-font-icon);
  font-size: 10px;  /* Figma実測 */
  letter-spacing: 1.3px;
}

/* ホバーは白＋下線。背景が濃いグレーのため、旧CSSの
   `body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }` では文字が沈んで読めない。
   旧ルールの詳細度が (0,2,2) なので body:not(.tab_view) を付けて上回らせている。 */
body:not(.tab_view) .rnw-footer__policy-link:hover {
  opacity: 1;
  color: #FFFFFF;
  text-decoration: underline;
}

/* フッターの文字リンクはホバーで下線を出す（2026-09-25）。
   お問い合わせのボタン（.rnw-btn）・ロゴ・SNSアイコンは文字リンクではないので対象外。
   グループ会社は枠ごとリンクなので、社名にだけ下線を引く。 */
body:not(.tab_view) a.rnw-footer__nav-title:hover,
body:not(.tab_view) .rnw-footer__nav-service:hover,
body:not(.tab_view) .rnw-footer__links-link:hover,
body:not(.tab_view) .rnw-footer__contact-tel a:hover,
body:not(.tab_view) .rnw-footer__group-link:hover .rnw-footer__group-name {
  text-decoration: underline;
}
/* 別窓アイコン（::after）には下線を引かない。inline-block にすると下線が伝わらない */
.rnw-footer__links-link[target="_blank"]::after,
.rnw-footer__nav-title[target="_blank"]::after { display: inline-block; }

.rnw-footer__copyright {
  display: block;
  font-family: 'Times New Roman', 'Noto Serif JP', serif;  /* Figma実測 */
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.4);  /* Figma実測 */
  text-align: center;
}


/* =====================================================================
   8. 旧フッター
   ---------------------------------------------------------------------
   マークアップ・クラス名は旧のまま（旧common.cssのスタイルがそのまま効く）。
   現在はSP／PCとも非表示。ラッパーの .rnw-footer-legacy で出し分ける。
   ===================================================================== */

.rnw-footer-legacy { display: block; }


/* =====================================================================
   8-2. スクロール演出
   ---------------------------------------------------------------------
   初期状態（透明）は <html class="rnw-fx"> が付いているときだけ効く。
   このクラスは header.php のインラインスクリプトが付けるため、
   JS無効の環境では中身が出たままになる。制御は renewal/js/scroll-fx.js。
   ===================================================================== */

/* --- 下から fade-in ---
   要素に data-rnw-fade、コンテナに data-rnw-fade="children" で直下の子を順番に。
   ずらしに transform ではなく translate を使うのは、対象が中央寄せなどで
   すでに transform を持っていても打ち消さないため。 */
.rnw-fx [data-rnw-fade]:not([data-rnw-fade="children"]),
.rnw-fx [data-rnw-fade="children"] > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.7s ease-out, translate 0.7s ease-out;
}

.rnw-fx [data-rnw-fade].is-rnw-shown,
.rnw-fx [data-rnw-fade="children"] > .is-rnw-shown {
  opacity: 1;
  translate: none;
}

/* --- Ken Burns（写真をゆっくり寄せながら流す）---
   親に .rnw-kenburns（overflow: hidden が要る）、動くのは直下の img。
   始点から1.08倍に寄せてあるのは、横移動したときに写真の端が出ないよう
   余白を持たせるため。往復させるのは、片道だとループの継ぎ目で戻りが出るため。 */
.rnw-kenburns { overflow: hidden; }

.rnw-kenburns > img {
  transform-origin: center center;
  backface-visibility: hidden;
  /* 等速。ease系だと開始直後がほぼ止まって見え、動いていないと受け取られる */
  animation: rnw-kenburns 14s linear infinite alternate;
}

/* 画面に入っている間だけ動かす。写真の上にテクスチャ（mix-blend-mode）が
   乗るぶん再描画が重いため、見えていない写真は止めて合成レイヤーも持たせない。
   クラスは renewal/js/scroll-fx.js が付け外しする。 */
.rnw-kenburns:not(.is-rnw-offscreen) > img { will-change: transform; }
.rnw-kenburns.is-rnw-offscreen > img { animation-play-state: paused; }

@keyframes rnw-kenburns {
  from { transform: scale(1.10) translate(-3%, -2%); }
  to   { transform: scale(1.30) translate(3%, 2%); }
}


/* =====================================================================
   9. レスポンシブ（1125/1126 で分岐）
   ---------------------------------------------------------------------
   旧CSSが #container / header に min-width:1126px を持っており、767/768 で
   切ると 768〜1125px では中身が収まっていても横スクロールが出る（iPad 768 /
   1024）。PCヘッダーもタブレット幅には収まらないため、1126px未満はSPドロワー
   で出す。
   ▼PCヘッダーのデザイン確定後に分岐を1024まで下げ、1024〜1199pxの詰めを
     入れること。それまで1024pxのiPadもドロワー表示になる。
   ===================================================================== */

/* ---------- SP・タブレット（〜1125px） ---------- */
@media only screen and (max-width: 1125px) {
  /* 旧CSS `#container { min-width:1126px }` / `header { min-width:1126px }` の
     打ち消し。旧CSSはリニューアル対象外のページにも効くため編集しない。 */
  #container {
    min-width: auto;
    min-width: initial;
  }

  .rnw-header {
    min-width: auto;
    min-width: initial;
  }
  .rnw-header__sp { display: flex; }
  .rnw-header__pc { display: none; }

  /* ▼本文のヘッダー分オフセットもドロワーの高さに合わせる。
     各ページのCSS（pages/*.css）は768px〜で --rnw-header-h-pc を使って
     ヘッダー分の余白を確保している。この幅のヘッダーはドロワー（70px）なので、
     変数の側を合わせておかないと本文の頭に20pxの隙間ができる。
     PCヘッダーとページ内ナビバーはこの幅では出ないので、他への影響は無い。 */
  :root { --rnw-header-h-pc: var(--rnw-header-h-sp); }

  /* ページ内ナビバーはPCのみ（SPでは項目がメニューのサービスカードに入る） */
  .rnw-pagenav--bar { display: none; }

  /* SPメニューから同一ページ内へ飛んだ先が固定ヘッダーに潜らないようにする */
  #container section[id],
  #container article[id] { scroll-margin-top: calc(var(--rnw-header-h-sp) + 16px); }

  /* フッター：新デザインを出し、旧フッターは隠す。
     レイアウトは769px以上ならこの幅でもPC版（下の 769px〜 のブロック）。 */
  .rnw-footer        { display: block; }
  .rnw-footer-legacy { display: none; }
}

/* ---------- PC（1126px〜） ---------- */
@media only screen and (min-width: 1126px) {
  .rnw-header__sp { display: none; }
  .rnw-header__pc { display: flex; }

  /* PCでもメニューパネルは使わない */
  .rnw-menu { display: none; }

  /* ページ内ナビバーは項目を持つページだけ出力される（PHP側で制御） */
  .rnw-pagenav--bar { display: flex; }

  /* ジャンプ先が固定ヘッダーに潜らないようにする。
     ジャンプ直後はナビバーが画面下端へ移っているため、確保するのはヘッダー分だけでよい。 */
  #container section[id],
  #container article[id] { scroll-margin-top: calc(var(--rnw-header-h-pc) + 16px); }

  /* ナビバーのぶんだけ本文を下げる。
     バーは position:fixed で本文を押し下げないため、その高さと同じだけ
     #container に余白を足す。既存のヘッダー分のオフセット（旧CSSの
     .breadcrumbs_wrap {margin-top:90px} など）はそのまま活きるので、
     ここで足すのは「バーを追加したことによる増分」だけ。
     ＝バーを出しても、出さないページと本文の見え方が変わらない。 */
  body:not([data-pagenav="none"]) #container {
    padding-top: var(--rnw-pagenav-h);
  }


  /* ページ内ナビバーはこの幅だけ出るため、その高さぶんフッター最下部を下げる。
     地色が途切れないようフッター側ではなく最下部ブロックに入れる。 */
  body:not([data-pagenav="none"]) .rnw-footer__legal {
    padding-bottom: calc(24px + var(--rnw-pagenav-h));
  }
}

/* =====================================================================
   フッター PC版（769px〜）（Figma PC 403:45239）
   ---------------------------------------------------------------------
   1440px幅・コンテンツ1280px・左右余白80pxのレイアウト。
   ヘッダーの分岐（1126px）と違い、フッターは769pxまでPC版を出す。
   Figmaの固定幅のままでは1125px以下で横に溢れるため、769〜1125pxの
   詰め（下のブロック）で幅を可変にし、文字を一段落とす。
   ▼ 旧フッターのマークアップは footer.php に残したまま非表示にしている。
   ===================================================================== */
@media only screen and (min-width: 769px) {
  .rnw-footer        { display: block; }
  .rnw-footer-legacy { display: none; }

  /* SPだけの改行 */
  .rnw-footer__br--sp { display: none; }

  /* --- お問い合わせ --- */
  .rnw-footer__contact {
    gap: 56px;
    padding: 56px 80px;
  }

  .rnw-footer__contact-head {
    width: 640px;
    height: auto;
    padding: 0 32px;
    background-color: transparent;
  }

  .rnw-footer__contact-en { font-size: 24px; }
  .rnw-footer__contact-ja { font-size: 42px; }

  .rnw-footer__contact-card {
    flex-direction: row;
    align-items: stretch;
    gap: 0;           /* 間隔は -divider の左右marginで取る（合計64px） */
    width: 1280px;
    padding: 24px 40px;  /* Figma実測 */
    border-radius: 8px;  /* Figma実測 */
  }

  .rnw-footer__contact-block {
    flex: 1 0 0;
    min-width: 0;
    justify-content: flex-start;
  }

  .rnw-footer__contact-title { font-size: 24px; }
  .rnw-footer__contact-title--gray { color: var(--rnw-text); }
  .rnw-footer__contact-note { font-size: 16px; }
  .rnw-footer__contact-tel  { font-size: 64px; }

  .rnw-footer__contact-block .rnw-btn {
    width: 100%;
  }

  /* 2段目は「見出し＋受付時間」と電話番号の横並び（Figma 1258:14012）。
     マークアップは3つが並ぶだけなので、gridで2列に組み替える。 */
  .rnw-footer__contact-block--tel {
    flex: 0 1 820px;  /* Figma実測。左のフォーム側が残りを取る */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tel"
      "note  tel";
    align-items: start;
    gap: 16px;  /* Figma実測 */
  }
  .rnw-footer__contact-block--tel .rnw-footer__contact-title { grid-area: title; text-align: center; }
  .rnw-footer__contact-block--tel .rnw-footer__contact-note  { grid-area: note; }
  .rnw-footer__contact-block--tel .rnw-footer__contact-tel   { grid-area: tel; align-self: center; }

  /* SPは横の点線、PCは縦の点線 */
  .rnw-footer__contact-divider {
    width: var(--rnw-dash-w);
    height: auto;
    align-self: stretch;
    margin: 0 32px;
    background-position: left top;
    background-size: var(--rnw-dash-w) 100%;
    background-image: repeating-linear-gradient(
      to bottom,
      var(--rnw-dash-c) 0 2px,
      transparent 2px 4px
    );
  }

  /* --- サイト情報 --- */
  .rnw-footer__body {
    gap: 0;
    padding-top: 0;
  }

  .rnw-footer__container {
    flex-direction: row;
    gap: 65px;
    width: 100%;
    max-width: 1440px;
    padding: 48px 80px 71px;
    border-top-color: #E2E2E2;
  }

  /* --- ロゴ・SNS --- */
  .rnw-footer__brand {
    flex-shrink: 0;
    gap: 56px;
    width: 300px;
  }

  .rnw-footer__logo {
    max-width: 300px;
    margin: 0;
    justify-content: flex-start;
  }

  .rnw-footer__logo img {
    width: 300px;
    height: 43.434px;
  }

  /* PCデザインに無い */
  .rnw-footer__brand .rnw-btn,
  .rnw-footer__group { display: none; }

  .rnw-footer__sns { justify-content: flex-start; }

  /* --- サイトマップ ---
     左に「サービス紹介」、右に単独リンク＋会社情報を置く */
  .rnw-footer__nav {
    display: grid;
    grid-template-columns: 600px 275px;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    column-gap: 40px;
    row-gap: 16px;
    padding-top: 0;
  }

  .rnw-footer__nav-group:nth-of-type(1) { grid-column: 2; grid-row: 2; }
  .rnw-footer__nav-group:nth-of-type(2) { grid-column: 1; grid-row: 1 / span 3; }
  .rnw-footer__links                    { grid-column: 2; grid-row: 1; }
  /* 採用情報は会社情報の下（2026-09-25） */
  .rnw-footer__nav-group--recruit       { grid-column: 2; grid-row: 3; }
  .rnw-footer__nav-title-sub            { font-size: 14px; }

  /* グループの区切り点線はPCでは出ない */
  .rnw-footer__nav-group { background-image: none; }

  /* 「サービス紹介」の中は 個人／法人・自治体 の2列 */
  .rnw-footer__nav-group:nth-of-type(2) {
    display: grid;
    grid-template-columns: 272px 272px;
    column-gap: 56px;
  }

  .rnw-footer__nav-title--tight { grid-column: 1 / -1; }

  .rnw-footer__nav-segment--personal { grid-column: 1; grid-row: 2; }
  .rnw-footer__nav-segment--corporate { grid-column: 2; grid-row: 2; }
  .rnw-footer__nav-sublist                { grid-column: 1; grid-row: 3; }
  .rnw-footer__nav-sublist--nested        { grid-column: 2; grid-row: 3; }

  .rnw-footer__nav-title {
    padding: 0;
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 1.2px;
  }

  .rnw-footer__nav-title--tight { padding-bottom: 12px; }

  .rnw-footer__nav-segment { font-size: 16px; }

  .rnw-footer__nav-sublist,
  .rnw-footer__nav-sublist--nested { padding: 0 0 0 20px; }

  .rnw-footer__nav-row {
    padding: 16px 0 0;
    background-image: none;
  }

  .rnw-footer__nav-label {
    font-size: 16px;
    letter-spacing: 1.2px;
  }

  .rnw-footer__nav-service {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
  }

  /* --- 単独リンク --- */
  .rnw-footer__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .rnw-footer__links-item {
    padding-bottom: 0;
    background-image: none;
  }

  .rnw-footer__links-link {
    padding: 0;
    font-size: 20px;
    line-height: 1.8;
    letter-spacing: 1.2px;
    white-space: nowrap;
  }

  /* --- 最下部 --- */
  .rnw-footer__legal { padding: 24px 157px; }

  .rnw-footer__legal-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
    max-width: 1126px;
    padding: 0;
  }

  .rnw-footer__cert {
    flex: 0 0 339.64px;
    gap: 10px;
    margin: 0;
  }

  .rnw-footer__cert img {
    width: 164.78px;
    height: 61.91px;
  }

  .rnw-footer__legal-inner > div {
    flex: 1 0 0;
    min-width: 0;
  }

  .rnw-footer__legal-inner > div > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    justify-content: flex-end;
  }

  .rnw-footer__policy-link {
    padding: 0;
    font-family: var(--rnw-font-jp);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 1.2px;
  }

  /* PCデザインには行頭の矢印が無い */
  .rnw-footer__policy-link::before { content: none; }

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

  .rnw-footer__copyright {
    margin-top: 10px;
    text-align: right;
  }
}

/* ---------- フッターSP版（〜768px）の要素（Figma 694:70419） ----------
   確定版のSPフッターは、ロゴ・「ご入会のお問い合わせ」ボタン・グループ会社を
   持たず、SNSアイコン2つだけが並ぶ。PC版（769px〜）にはロゴがあるため、
   ここで消すのはSPの幅だけ。 */
@media only screen and (max-width: 768px) {
  .rnw-footer__logo,
  .rnw-footer__brand .rnw-btn,
  .rnw-footer__group { display: none; }
}

/* ---------- フッターPC版の中間幅（769〜1125px）の詰め ----------
   Figmaの固定幅（contact-card 1280 / nav 600+275 / brand 300 など）を
   可変にし、文字を一段落として横スクロールを出さない。
   数値はデザイン値ではなく、この幅に収めるための調整値。 */
@media only screen and (min-width: 769px) and (max-width: 1125px) {
  /* --- お問い合わせ --- */
  .rnw-footer__contact { gap: 32px; padding: 40px 24px; }

  .rnw-footer__contact-head { width: 100%; padding: 0; }
  .rnw-footer__contact-en { font-size: 20px; }
  .rnw-footer__contact-ja { font-size: 32px; }

  .rnw-footer__contact-card { width: 100%; padding: 24px 8px; }
  .rnw-footer__contact-title { font-size: 18px; }
  .rnw-footer__contact-note { font-size: 12px; }
  .rnw-footer__contact-tel { font-size: 28px; }

  /* 電話ブロックの横並びはこの幅だと収まらないため縦積みに戻す */
  .rnw-footer__contact-block--tel {
    flex: 1 0 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "note"
      "tel";
    justify-items: center;
  }

  .rnw-footer__contact-block .rnw-btn {
    width: 100%;
    gap: 8px;
    padding: 14px 20px;
    font-size: 15px;
    letter-spacing: 0.4px;
  }

  .rnw-footer__contact-divider { margin: 0 16px; }

  /* --- サイト情報 --- */
  .rnw-footer__container { gap: 32px; padding: 40px 24px 48px; }

  .rnw-footer__brand { width: 160px; gap: 32px; }
  .rnw-footer__logo { max-width: 160px; }
  .rnw-footer__logo img { width: 160px; height: auto; }

  /* --- サイトマップ --- */
  /* 固定幅（600px/275px）をやめ、残り幅を分け合う */
  .rnw-footer__nav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 160px);
    column-gap: 24px;
  }

  .rnw-footer__nav-group:nth-of-type(2) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 24px;
  }

  .rnw-footer__nav-title { font-size: 16px; letter-spacing: 0.6px; }
  .rnw-footer__nav-title-sub { font-size: 12px; letter-spacing: 0.6px; }
  .rnw-footer__nav-segment { font-size: 14px; }
  .rnw-footer__nav-sublist,
  .rnw-footer__nav-sublist--nested { padding-left: 12px; }
  .rnw-footer__nav-label { font-size: 13px; letter-spacing: 0.4px; }
  .rnw-footer__nav-service { font-size: 13px; }

  /* 1行に収まらない項目は折り返させる（PCの nowrap を解除） */
  .rnw-footer__links-link { font-size: 16px; letter-spacing: 0.6px; white-space: normal; }

  /* --- 最下部 --- */
  .rnw-footer__legal { padding: 24px; }
  .rnw-footer__legal-inner { max-width: 100%; gap: 16px; }

  .rnw-footer__cert { flex: 0 0 240px; gap: 8px; }
  .rnw-footer__cert img { width: 116px; height: auto; }

  .rnw-footer__legal-inner > div > ul { gap: 4px 16px; }
  .rnw-footer__policy-link { font-size: 13px; letter-spacing: 0.4px; }
  .rnw-footer__copyright { font-size: 11px; }
}

/* ---------- 狭幅SP（Figma基準375px未満）の微調整 ---------- */
@media only screen and (max-width: 374px) {
  .rnw-menu__inner        { max-width: calc(100% - 24px); }
  .rnw-footer__container,
  .rnw-footer__legal-inner { padding-left: 8px; padding-right: 8px; }
}

/* ---------- モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
  .rnw-menu,
  .rnw-nav--drawer .rnw-nav__panel,
  .rnw-nav__caret,
  .rnw-header__nav-caret {
    transition: none;
  }

  .rnw-fx [data-rnw-fade]:not([data-rnw-fade="children"]),
  .rnw-fx [data-rnw-fade="children"] > * {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .rnw-kenburns > img { animation: none; }
}

/* --- 2026-09-08 旧テーマの追従お問い合わせボタン（旧 css/common.css:1719 の
       #contact_fixed）はリニューアル後は出さない。ナニーのピンク固定で
       VIPケア配下にも出てしまうため。マークアップは旧テーマ側にあり、
       ここは header.php で旧CSSの後に読まれるので display で消す。 --- */
#contact_fixed { display: none !important; }


/* =====================================================================
   お問い合わせモーダル（2026-09-21）
   ---------------------------------------------------------------------
   ヘッダー右上のCTAとSPドロワーのCTAから開く。
   中は「個人のお客様」「法人のお客様」の2リンクだけ。
   作り・寸法は下の会員ログインモーダルと同じで、クラス名だけ違う。
   ===================================================================== */
.rnw-contact {
  position: fixed;
  inset: 0;
  z-index: 15;   /* ヘッダー（12）・ドロワー（11）・追従CTA（13）より上に出す */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
/* hidden 属性を display:flex に負けさせない */
.rnw-contact[hidden] { display: none; }

/* 背面。クリックで閉じる */
.rnw-contact__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.rnw-contact__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;     /* カードとCLOSEの間 */
  width: 600px;
  max-width: 100%;
}

.rnw-contact__dialog {
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  /* SPで画面に収まらないときはカードの中でスクロールさせる。
     引く値はCLOSEボタン55 ＋ gap24 ＋ 上下padding32 ＋ 余白 */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.rnw-contact__title {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: #912344;   /* common/accent/red */
  text-align: center;
}

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

.rnw-contact__item { padding: 16px 0; }
/* 最終行は点線を出さない */
.rnw-contact__item:last-child { background-image: none; }

.rnw-contact__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-decoration: none;
}
/* 別窓の項目を足したときのための指定（現状の2項目では出ない）。 */
.rnw-contact__labelrow {
  display: flex;
  align-items: center;
}
.rnw-contact__external {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--rnw-caption);   /* common/text/gray #626262 */
}

/* 行末の「>」。アセットは上向きなので90度回して右向きにする */
.rnw-contact__link::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 12px;
  background-color: currentColor;
  transform: rotate(90deg);
  -webkit-mask: url('../img/icon_chevron.svg') no-repeat center / contain;
          mask: url('../img/icon_chevron.svg') no-repeat center / contain;
}
/* ホバーは文字を薄くするだけ。色は変えない
   （旧 common.css の `body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }` の
     色替えだけを打ち消す）。 */
.rnw-contact__link { transition: opacity 0.15s ease-out; }
body:not(.tab_view) .rnw-contact__link:hover { opacity: 0.6; color: var(--rnw-text); }

/* CLOSE（200×55） */
.rnw-contact__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 200px;
  max-width: 100%;
  padding: 16px 32px;
  border: 0;
  border-radius: 65.96px;
  background-color: var(--rnw-accent);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-contact__close-icon {
  width: 12px;
  height: 12px;
}

/* モーダルを開いている間は背面をスクロールさせない。
   ドロワーから開いたときは .rnw-menu-open も付いたままなので、
   片方を外してもロックは残る。 */
.rnw-contact-open { overflow: hidden; }

/* SPは文字を一段落とす */
@media only screen and (max-width: 767px) {
  .rnw-contact__title { margin-bottom: 24px; font-size: 20px; }
  .rnw-contact__link  { font-size: 16px; }
}


/* =====================================================================
   会員ログインモーダル（2026-09-18）
   ---------------------------------------------------------------------
   PCヘッダー右上の「ログイン」とドロワーの「会員ログイン」から開く。
   作り・寸法は総合トップのモーダル（top/.../renewal/css/common.css の
   .rnw-contact）と同じものを、クラス名だけ変えて持ってきている。
   総合トップはグループのアコーディオンを持つが、ここは項目が2つなので
   一覧だけを置く。
   ===================================================================== */
.rnw-login {
  position: fixed;
  inset: 0;
  z-index: 15;   /* ヘッダー（12）・ドロワー（11）・追従CTA（13）より上に出す */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
/* hidden 属性を display:flex に負けさせない */
.rnw-login[hidden] { display: none; }

/* 背面。クリックで閉じる */
.rnw-login__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.rnw-login__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;     /* カードとCLOSEの間 */
  width: 600px;
  max-width: 100%;
}

.rnw-login__dialog {
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-sizing: border-box;
  /* SPで画面に収まらないときはカードの中でスクロールさせる。
     引く値はCLOSEボタン55 ＋ gap24 ＋ 上下padding32 ＋ 余白 */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.rnw-login__title {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: #912344;   /* common/accent/red */
  text-align: center;
}

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

.rnw-login__item { padding: 16px 0; }
/* 最終行は点線を出さない */
.rnw-login__item:last-child { background-image: none; }

.rnw-login__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-decoration: none;
}
/* 別サイトへ出るので外部リンクのアイコンを出す。
   寸法と色はヘッダーの .rnw-header__nav-external に合わせている。 */
.rnw-login__labelrow {
  display: flex;
  align-items: center;
}
.rnw-login__external {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--rnw-caption);   /* common/text/gray #626262 */
}

/* 行末の「>」。アセットは上向きなので90度回して右向きにする */
.rnw-login__link::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 12px;
  background-color: currentColor;
  transform: rotate(90deg);
  -webkit-mask: url('../img/icon_chevron.svg') no-repeat center / contain;
          mask: url('../img/icon_chevron.svg') no-repeat center / contain;
}
/* ホバーは文字を薄くするだけ。色は変えない
   （旧 common.css の `body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }` の
     色替えだけを打ち消す）。 */
.rnw-login__link { transition: opacity 0.15s ease-out; }
body:not(.tab_view) .rnw-login__link:hover { opacity: 0.6; color: var(--rnw-text); }

/* CLOSE（200×55） */
.rnw-login__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 200px;
  max-width: 100%;
  padding: 16px 32px;
  border: 0;
  border-radius: 65.96px;
  background-color: #912344;   /* エンジ（common/accent/red）。見出しと同じ色で、ナニー・VIPケアどちらのページでも変えない */
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-login__close-icon {
  width: 12px;
  height: 12px;
}

/* モーダルを開いている間は背面をスクロールさせない。
   ドロワーから開いたときは .rnw-menu-open も付いたままなので、
   片方を外してもロックは残る。 */
.rnw-login-open { overflow: hidden; }

/* SPは文字を一段落とす */
@media only screen and (max-width: 767px) {
  .rnw-login__title { margin-bottom: 24px; font-size: 20px; }
  .rnw-login__link  { font-size: 16px; }
}

/* PCヘッダーが1126～1279pxでも5項目のナビを収める。 */
@media only screen and (min-width: 1126px) and (max-width: 1279px) {
  .rnw-header__pc           { padding-left: 24px; padding-right: 24px; }
  .rnw-header__pc-group     { gap: 16px; }
  .rnw-header__pc-logo      { width: 190px; }
  .rnw-header__pc-logo img  { width: 190px; height: 35px; }
  .rnw-header__nav          { gap: 8px; }
  .rnw-header__cta          { padding-left: 20px; padding-right: 20px; }

  /* 文字も小さくしてナビ5項目を収める。 */
  .rnw-header__nav-link     { gap: 6px; padding: 0 4px; font-size: 13px; letter-spacing: 0.4px; }
  .rnw-header__cta          { font-size: 16px; letter-spacing: 0.8px; }
  .rnw-header__login        { font-size: 13px; letter-spacing: 0.8px; padding-left: 16px; padding-right: 16px; }
}

/* --- 2026-09-27 ページ内ナビ帯：1126～1279pxでは上の1439px以下の詰め方でも項目（ナニー8項目・41文字）が約1130px必要で、
       スクロールバーの分も含めて入りきらず横スクロールバーが出る→ 文字・余白・間隔をもう1段詰めて約950pxに収める（PC上書き） --- */
@media only screen and (min-width: 1126px) and (max-width: 1279px) {
  .rnw-pagenav--bar                       { gap: 16px; }
  .rnw-pagenav--bar .rnw-pagenav__list    { gap: 8px; }
  .rnw-pagenav--bar .rnw-pagenav__link    { padding-left: 12px; padding-right: 12px; font-size: 13px; letter-spacing: 0.6px; }
  .rnw-pagenav--bar .rnw-pagenav__label-main { font-size: 14px; }
  .rnw-pagenav--bar .rnw-pagenav__label-sub  { font-size: 11px; }
}

/* 固定ページの自動パンくず。ニュース・ご利用者様の声は既存表示。 */
#container .rnw-breadcrumb {
  position: relative;
  margin: var(--rnw-header-h-sp, 70px) auto 0;
  padding: 16px 24px;
  max-width: 1440px;
  box-sizing: border-box;
  color: var(--rnw-text, #555);
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
}
#container .rnw-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; }
#container .rnw-breadcrumb li { display: flex; align-items: baseline; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
#container .rnw-breadcrumb li + li::before { content: "›"; color: #888; }
#container .rnw-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#container .rnw-breadcrumb a:hover { text-decoration: none; }
@media (min-width: 768px) {
  #container .rnw-breadcrumb { margin-top: var(--rnw-header-h-pc, 90px); padding: 20px clamp(24px, 5.56vw, 80px); font-size: 13px; }
}

/* SP：パンくずは1行の横スクロール。本文のヘッダー用余白は二重に取らない。 */
@media (max-width: 767px) {
  #container .rnw-breadcrumb {
    padding: 10px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #container .rnw-breadcrumb ol {
    flex-wrap: nowrap;
    width: max-content;
  }
  #container .rnw-breadcrumb li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* PCでもパンくず側でヘッダー分を確保するため、本文との重複を除く。 */
#container:has(.rnw-breadcrumb) .rnw-plan,
#container .rnw-breadcrumb + :is(.rnw-plan, .rnw-subsidy-ticket, .rnw-subsidy, .rnw-subsidy-system, .rnw-subsidy-support) {
  padding-top: 0;
}

/* VIPケアの受付説明の語尾だけが折り返されるのを防ぐ。 */
.rnw-footer__contact-note .rnw-footer__contact-note-ending { white-space: nowrap; }