@charset "UTF-8";

/* =====================================================================
   ポピンズ 総合トップ リニューアル 共通CSS
   ---------------------------------------------------------------------
   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
       SPドロワー 70:1987 ／ SPフッター 1400:51477
       PCヘッダー（GNAV） 318:19379
       PCフッター 1400:51703

   ■ 旧CSSとの関係（旧 /css/*.css と旧 /js/function.js は編集禁止）
     - 旧CSSと同居するため、全クラスに `rnw-` を付与
     - 旧CSSは接頭辞なし（.logo / .menu_btn / .glonav / .mddNav 等）なので
       名前空間は分離済み（旧CSS・旧JSに rnw 接頭辞は1件も無いことを確認済み）
     - 旧CSSが要素セレクタ `header {}` `footer {}` を持つため、
       .rnw-header / .rnw-footer 側で該当プロパティを明示的に打ち消している
     - 衝突はすべてこのファイル側で吸収する
   ===================================================================== */

/* Lusitana はフッター「Company」の見出し（Figma PC/title/h2-sub）で使う。
   フッターは全ページに出るので front.css 側ではなくここで読み込む。 */
@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登録バリアブル準拠）
     ドロワー／フッターともファミリーケア（nanny）の配色が
     指定されているため、その値をそのまま採用している。
     ------------------------------------------------------------- */
  --rnw-text:    #444444;  /* 本文           common/text/bk */
  --rnw-caption: #626262;  /* キャプション・点線罫線 common/text/gray */
  --rnw-white:   #FFFFFF;  /* common/white */
  --rnw-main:    #F6BECA;  /* メイン         nanny/main（サイトマップ枠線） */
  --rnw-accent:  #BC326C;  /* アクセント     nanny/text/accent（CTA背景・別窓アイコン） */
  --rnw-bg2:     #FAEEF1;  /* ドロワー背景   nanny/bg */
  --rnw-line:    #EDEDED;  /* 淡い区切り線（Figma 70:2099） */
  --rnw-border:  #E2E2E2;  /* 区切り線       common/border（PCフッター上端） */
  --rnw-text-strong: #333333;  /* 小見出し   Fill/Default（PCフッターの「個人のお客様」等） */
  --rnw-red:     #912344;  /* common/accent/red（PCヘッダーのCTA背景） */

  /* CTA */
  --rnw-cta-bg:   var(--rnw-accent);
  --rnw-cta-text: var(--rnw-white);

  /* PCヘッダー（Figma 318:19379 GNAV）の配色・間隔 */
  --rnw-pc-nav-text: #2A2220;  /* ナビの文字（Figma実測） */
  --rnw-pc-nav-sub:  #7A6E68;  /* 「ポピンズで働く」等の補足（Figma実測） */
  --rnw-pc-nav-gap:  32px;     /* ナビ項目の間隔（Figma実測） */

  /* -------------------------------------------------------------
     タイポグラフィ
     --rnw-font-icon は旧 /css/common.css の @font-face（/css/fonts/poppins.*）
     をそのまま流用する。\e901 = 矢印、\e902 = 別窓。
     ------------------------------------------------------------- */
  --rnw-font-jp:    'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --rnw-font-noto:  'Noto Sans JP', sans-serif;
  --rnw-font-serif: 'Times New Roman', 'Times', serif;
  --rnw-font-icon:  'poppins';
  /* フッター「Company／企業情報」の見出し用。
     --rnw-font-serif は最下部コピーライトの Times 用なので別に持つ。
     front.css の --rnw-top-font-mincho と同じ指定だが、front.css は
     総合トップでしか読まれないため、全ページに出るフッター用にここでも定義する。 */
  --rnw-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  /* 英字。日本語が混ざる箇所は明朝にフォールバックする */
  --rnw-font-en:     'Lusitana', var(--rnw-font-mincho);

  /* -------------------------------------------------------------
     レイアウト
     ※ ヘッダー高は旧CSSが本文オフセットを固定値で持っているため、
        旧値と同一にする（旧CSSは編集禁止のためヘッダー側を合わせる方針）。
          /css/contents.css  .breadcrumbs_wrap { margin: 128px 0 0 }  … PC
                             （767px以下）      { margin:  70px 0 0 }  … SP
          /css/index.css     #key_field { margin: 128px auto 88px }   … PC
     ------------------------------------------------------------- */
  --rnw-header-h-sp: 70px;
  /* PCヘッダー高＝Figma 318:19379 の 88px（padding 20 ＋ 中身48 ＋ padding 20）。
     旧CSSは本文オフセットを128px固定で持っているため、下の 9節で
     旧クラス（.breadcrumbs_wrap）側を88pxに合わせ直している。 */
  --rnw-header-h-pc: 88px;
  --rnw-container-min-pc: 1126px;  /* 旧 #container の min-width に合わせる */
  --rnw-z-header: 12;              /* 旧 header の z-index と同値 */
  --rnw-z-menu: 13;                /* ドロワーはヘッダーごと覆うため上に置く */
}

/* プロパティ可変カラー。
   総合トップは配色が1系統のため現状は1つだけ。
   サービス別配色が必要になったら renewal/functions-renewal.php の
   rnw_property() に判定を足してブロックを増やす。 */
[data-property="top"] {
  /* 現状は :root の値をそのまま使う */
}


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

/* --- アイコン（単色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/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'); }
.rnw-icon--chevron    { -webkit-mask-image: url('../img/icon_chevron.svg');      mask-image: url('../img/icon_chevron.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のボタン（70:2031）では
   scaleY(-1)+rotate(90deg) が掛かって見た目は「右向き」。CSS側で向きを合わせる。 */
.rnw-icon--arrow      { -webkit-mask-image: url('../img/icon_arrow_circle.svg'); mask-image: url('../img/icon_arrow_circle.svg'); transform: rotate(-90deg); }

/* --- 点線罫線（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. ボタン（Figma 70:2031）
   ===================================================================== */

.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;         /* Figma実測 */
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
}

/* CTA（塗り） */
.rnw-btn--main {
  background-color: var(--rnw-cta-bg);
  border: 0.745px solid var(--rnw-white);  /* Figma実測 */
  color: var(--rnw-cta-text);
}
.rnw-btn--main .rnw-btn__icon { color: var(--rnw-cta-text); }

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

/* ホバー。
   ▼旧 /css/common.css:2070 が全リンクに
       body:not(.tab_view) a:hover { opacity:.6; color:#912344 }
     を掛けており、放っておくと
       ・塗りボタン … 文字が背景と同色(#912344)になって消える
       ・白抜きボタン … サービス色の文字が赤紫に化ける
     となる。旧CSSと同じ `body:not(.tab_view)` ＋ 同じブレークポイントで、
     詳細度を1つ上（クラスを1つ足す）にして打ち消す。
   ▼見せ方は「ボタンごと70%に透かす・色味は変えない」。opacity は旧CSSの
     0.6 を 0.7 に上書きするだけで、色を戻すのは各バリアント側の責務。
   ▼タッチ端末（body.tab_view）でホバーが残らないのは旧CSSと同じ挙動。 */
@media only screen and (min-width: 768px) {
  body:not(.tab_view) .rnw-btn:hover { opacity: 0.7; }
  body:not(.tab_view) .rnw-btn--main:hover { color: var(--rnw-cta-text); }
}


/* =====================================================================
   4. ヘッダー
   ---------------------------------------------------------------------
   旧CSSの `header { min-width:1126px; opacity:0; padding:0 16px;
   height:128px; position:fixed; z-index:12 }` を明示的に上書きする。
   opacity:0 は旧JSが load時に $('header').animate({opacity:1}) する前提の
   ため、打ち消さないと初期表示で見えない。
   ===================================================================== */

.rnw-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--rnw-z-header);
  width: 100%;
  min-width: var(--rnw-container-min-pc);
  height: auto;
  padding: 0;
  opacity: 1;  /* 旧CSS `header{opacity:0}` の打ち消し */
  background-color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

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

/* ------------------------------------
   4-1. SPヘッダー（閉じた状態）
   ドロワー内ヘッダー（Figma 70:1988）の実測値を流用している。
------------------------------------ */
.rnw-header__sp {
  display: none;  /* PCでは非表示。SP側のメディアクエリで解除 */
  align-items: center;
  min-height: var(--rnw-header-h-sp);
  padding: 16px 20px;                       /* Figma実測 */
  border-bottom: 1px solid var(--rnw-caption);  /* Figma実測 #626262 */
  background-color: var(--rnw-white);
  box-sizing: border-box;
}

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

/* 幅はロゴの縦横比に合わせる。/img/common/logo_pc.svg は 193.211×52.895 なので
   高さ35pxなら 128px（旧ファミリーケアロゴは Figma実測 241.744×35 だった）。 */
.rnw-header__logo {
  display: block;
  flex-shrink: 0;
  width: 128px;
  height: 35px;  /* Figma実測 */
  margin: 0;
}
.rnw-header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ハンバーガー（Figmaには閉じた状態のフレームが無いため familycare のアセットを流用） */
.rnw-header__toggle {
  display: block;
  flex-shrink: 0;
  width: 35px;
  height: 35px;
  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%; }

/* ------------------------------------
   4-2. PCヘッダー（Figma 373:37491 / 確定デザイン）
   高さ88px＝padding 20 ＋ お問い合わせボタン48 ＋ padding 20。
   Figmaに下線は無い（白帯のみ）。
------------------------------------ */
.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実測 px-40 */
  background-color: var(--rnw-white);
  box-sizing: border-box;
}

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

/* プロパティ名の付かない「Poppins」ロゴ（Figma 373:37493 / 153.481×42.002）。
   素材は旧トップと同じ /img/common/logo_pc.svg（193.211×52.895・同比率）。 */
.rnw-header__pc-logo {
  display: block;
  flex: 0 0 auto;   /* 伸ばさない。伸ばすとナビとCTAが右端まで届かない */
  width: 153.481px;
}
.rnw-header__pc-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* 展開パネルへマウスを移す途中で :hover が切れないよう、
   ナビ項目の当たり判定をヘッダーの高さいっぱいに広げる。 */
.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実測 373:37596 */
  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 */
  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;
}
.rnw-header__nav-link--pending { color: var(--rnw-caption); cursor: default; }

/* 開いている項目は薄い地色が付く（Figma 373:37599） */
.rnw-header__nav-item.is-open > .rnw-header__nav-link {
  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実測 373:37609 */
}
.rnw-header__nav-sub {
  font-size: 10px;   /* Figma実測 373:37614 */
  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;
  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 373:37623 ほか）
   ---------------------------------------
   他プロパティ（横1列）と違い、左にカテゴリ・右にその中身の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: var(--rnw-white);
  /* パネルが本文に重なるため、下辺に影を落として境目を出す。
     値はファミリーケア／プロフェッショナルの同パネルと同じ。 */
  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="pro"] { --rnw-nav-panel-bg: #D9F0F4; }

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

/* --- 左：カテゴリ（Figma 373:37624）--- */
.rnw-header__nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  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: var(--rnw-white);
  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); }
/* 項目を持たない単独リンク（For International Guests）はシェブロン無し。
   地色は他のカテゴリと同じ .is-active（renewal/js/header.js が付け外しする）。
   ▼旧サイトの /css/common.css に `body:not(.tab_view) a:hover { opacity:.6; color:#912344 }`
     があり、<a> で出しているこの項目だけホバーで文字がピンクになって薄くなる。
     セレクタの詳細度で上回るよう .rnw-header__nav-tabs から書いて打ち消す。 */
.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;
}

/* カテゴリの矢印は右向き（Figma実測 7.669×13.339 ＝ 縦長の枠に -90度） */
.rnw-header__nav-tabcaret {
  display: none;
}

/* --- 右：選択中のカテゴリの項目（Figma 373:37647）--- */
.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;
  /* Figma実測：横64px（373:37647）／縦40px（373:37860 の2行の間隔）。
     Figmaは行ごとにフレームを分けているが、項目数がページ変更で増減しても
     破綻しないよう、こちらは折り返しで表現している。 */
  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; }
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="pro"]     .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="pro"]     .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 373:37618 / 170×48） */
.rnw-header__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 48px;                 /* Figma実測 */
  padding: 16px 28px;           /* Figma実測 12+16=28 */
  border: 0;
  border-radius: 8px;           /* Figma実測 */
  background-color: var(--rnw-red);
  font-family: inherit;
  font-size: 18px;              /* Figma SP/button/big */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-white);
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  box-sizing: border-box;
}

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


/* ------------------------------------
   4-4. PCナビの詰め（1024〜1279px）
   ---------------------------------------
   確定デザイン（373:37491）は1440px基準。PCナビの下限は1024pxなので、
   そこまでは余白・間隔・文字を一段小さくして「項目を落とさず」収める。
   1280px以上には掛からないので、広い画面の見た目はFigmaのまま。

   ▼総合トップは他プロパティと違い、展開パネルが
     「左カテゴリ（330px）＋右に項目」の2カラム。
     ヘッダーの1行だけでなくパネル側も詰めないと、
     1024px幅では右カラムが潰れて項目が2行になる。
   ▼これ以上は下げられない。狭める必要が出たら
     デザイン側の判断（項目を減らす／CTAをアイコン化する等）。
------------------------------------ */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
  .rnw-header__pc       { padding: 0 24px; }
  .rnw-header__pc-group { gap: 16px; }
  .rnw-header__pc-logo  { width: 132px; }

  .rnw-header__nav      { gap: 8px; }
  .rnw-header__nav-link { gap: 6px; padding: 0 4px; font-size: 14px; }
  .rnw-header__nav-sub  { font-size: 10px; }

  .rnw-header__cta { padding: 16px 20px; font-size: 16px; }
  .rnw-header__login { padding: 0 14px; }

  /* --- 展開パネル --- */
  .rnw-header__nav-tabs     { width: 280px; }
  .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; }
}


/* =====================================================================
   5. 共通ナビ（.rnw-nav）
   ---------------------------------------------------------------------
   SPドロワーとPCヘッダーで「同一のマークアップ」を出力し、
   見た目と挙動の差だけをここで吸収する。
   出力は renewal/nav.php の rnw_nav_render() が担当し、
   外側の <nav> に付く data-rnw-nav / rnw-nav--* だけが両者で異なる。

     data-rnw-nav="drawer" … SP：アコーディオン（複数同時に開ける）
     data-rnw-nav="header" … PC：ドロップダウン（同時に1つ）

   ※ 項目の追加・変更は renewal/nav.php の rnw_nav_items() のみ。
     このCSSもマークアップも項目数に依存しない作りにしてある。
   ===================================================================== */

/* .rnw-menu__nav / .rnw-header__nav は「どこに置かれているか」を示す配置用の
   BEMミックス。.rnw-menu__nav は現状スタイル不要のため定義を持たない
   （.rnw-menu__inner の flex 子として並ぶだけ）。
   .rnw-nav__subitem も同様に、将来のPCドロップダウン用の予約フックで
   現状はスタイルを持たない。どちらも消さないこと。 */

.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; }

/* 採用情報の補足テキスト（Figma 70:2029 / SP/text/defalut/medium） */
.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; }

/* ------------------------------------
   5-1. SPドロワー時（アコーディオン / Figma 70:2010）
   項目間 24px ＋ 各項目下に点線罫線、という並びを
   上下パディング＋.rnw-dash-b で再現している。
------------------------------------ */
.rnw-nav--drawer .rnw-nav__list { padding-top: 20px; }  /* Figma 70:2009 pt-20 */

.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 70:2024 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階層目の最後の項目は点線を出さない。
   すぐ下に1階層目（.rnw-nav__item）の点線が来るため、そのままだと
   40px（16＋24）の隙間を空けて線が2本並んでしまう。
   ▼以前は末尾に「For International Guests」が入っていて2本の間が
     埋まっていたが、その項目を外したので重なりが見えるようになった。 */
.rnw-nav--drawer .rnw-nav__sublist > .rnw-nav__subitem:last-child {
  background-image: none;
}

/* ------------------------------------
   5-1-1. 2階層目「◯◯を探す」（Figma 1291:19157）
          ラベルの下に補足、右端に開閉シェブロン。
------------------------------------ */
.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;
}

/* ------------------------------------
   5-1-2. 3階層目（個別サービス / Figma 1291:19255）
          行頭に色付きのドット。色は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-main));
}

.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;
}
/* 遷移先未確定（児童発達支援など）は <span> で出る */
.rnw-nav__link--pending { color: var(--rnw-caption); cursor: default; }

/* ラベル右の別窓アイコン（Figma 1291:19255 のポピンズシッター／ペットケア） */
/* 別窓アイコンはラベル文字列の末尾に置くため、.rnw-icon の display:block を
   打ち消してインラインに戻す（block のままだと単独の行に落ちる）。 */
.rnw-nav__external {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--rnw-caption);
}

/* ------------------------------------
   5-2. PCヘッダー時のスタイルは無い
   ---------------------------------------
   PC確定デザイン（373:37491）に合わせて、PCのグローバルナビは
   header.php の $rnw_pc_nav ＋ .rnw-header__nav 系（上の 4-2 / 4-3）へ移した。
   .rnw-nav--header は出力されないため、ここには何も置かない。
------------------------------------ */



/* =====================================================================
   6. SPドロワー（Figma 70:1987）
   ---------------------------------------------------------------------
   ドロワーは自前のヘッダー（ロゴ＋閉じる / 70:1988）を持ち、
   画面全体（ページヘッダーごと）を覆う。
   ===================================================================== */

.rnw-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--rnw-z-menu);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--rnw-bg2);
  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;
}

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

/* body スクロールロック。
   旧JSの bodyFixedOff() は body のインラインstyle（overflow）を空にするだけで、
   このクラス側の指定は残るため競合しない。 */
.rnw-menu-open { overflow: hidden; }

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

/* ------------------------------------
   6-1. ドロワー内ヘッダー（Figma 70:1988）
------------------------------------ */
/* 中身が画面高を超えたときに閉じるボタンが流れていかないよう sticky にしている
   （Figmaは375x860の静止画のためスクロール時の指定は無い）。 */
.rnw-menu__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  min-height: var(--rnw-header-h-sp);
  padding: 16px 20px;                           /* Figma実測 */
  border-bottom: 1px solid var(--rnw-caption);  /* Figma実測 #626262 */
  background-color: var(--rnw-white);
  box-sizing: border-box;
}

/* 幅は .rnw-header__logo と同じ考え方（ロゴの縦横比 193.211×52.895 に合わせる）。 */
.rnw-menu__logo {
  display: block;
  flex-shrink: 0;
  width: 128px;
  height: 35px;  /* Figma実測 */
}
.rnw-menu__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rnw-menu__close {
  display: block;
  flex-shrink: 0;
  width: 35px;   /* 閉じた状態の .rnw-header__toggle と同寸 */
  height: 35px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rnw-text);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-menu__close .rnw-icon { width: 100%; height: 100%; }

/* ------------------------------------
   6-2. ドロワー本体（Figma 70:1993）
------------------------------------ */
.rnw-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;      /* Figma実測 */
  width: 330px;   /* Figma実測 */
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding-bottom: 40px;  /* Figma実測 pb-40 */
}

/* ------------------------------------
   6-3. ポピンズ提供サービス
        2026-09-06 のデザイン更新で廃止（Figma 1291:18895）。
        ドロワーはヘッダーの直下がそのままナビになる。
------------------------------------ */

/* ------------------------------------
   6-4. CTA・SNS（Figma 70:2031 / 70:2032）
------------------------------------ */
.rnw-menu__cta { flex-shrink: 0; }

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

/* 会員ログイン（2026-09-24）。familycare の .rnw-menu__login と同じ（Figma 1726:19515）。
   SNSとの間隔は .rnw-menu__inner の gap 20px が付くので margin は持たない。
   地色は透明にして文字だけに見せる。 */
.rnw-menu__login {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-red);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}


/* ------------------------------------
   6-5. お問い合わせモーダル
        Figma 1291:23447（閉）/ 1291:23541（開）
        SP 1291:18930・1291:18985・1291:19082
        PC・SPで同じもの。幅だけ変えている。
        ▼旧サイトのモーダル（/include/modal.html の modal02）は使わない。
------------------------------------ */
.rnw-contact {
  position: fixed;
  inset: 0;
  z-index: 15;   /* ドロワー（13）・追従CTA（14）より上に出す */
  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;   /* Figma実測（カードとCLOSEの間） */
  width: 600px;  /* Figma実測 */
  max-width: 100%;
}

.rnw-contact__dialog {
  width: 100%;
  padding: 24px;   /* Figma実測 */
  border-radius: 8px;
  background-color: var(--rnw-white);
  box-sizing: border-box;
  /* SPは中身が画面に収まらないのでカードの中でスクロールさせる
     （Figma 1291:18985 にスクロールバーが描かれている）。
     引く値はCLOSEボタン55 ＋ gap24 ＋ 上下padding32 ＋ 余白 */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* Figma 1291:23525（中央・common/accent/red） */
.rnw-contact__title {
  margin: 0 0 32px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-red);
  text-align: center;
}

/* グループを縦に積むだけの入れ物。区切り線は .rnw-dash-b が持つ */
.rnw-contact__groups {
  display: flex;
  flex-direction: column;
}

.rnw-contact__group { padding-bottom: 24px; }
.rnw-contact__group + .rnw-contact__group { padding-top: 24px; }

/* 「個人のお客様」「法人のお客様」（Figma 1291:23528 / 1291:23533） */
.rnw-contact__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.rnw-contact__group-title { flex: 1 1 auto; }

.rnw-contact__caret {
  width: 10.607px;   /* Figma実測（ドロワーのシェブロンと同寸） */
  height: 14.607px;
  transform: rotate(180deg);   /* アセットは上向き。既定は下向き */
  transition: transform 0.2s ease-out;
}
.rnw-contact__head[aria-expanded="true"] .rnw-contact__caret { transform: rotate(0deg); }

/* 開閉パネル。ドロワーと同じく max-height のトランジション */
.rnw-contact__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease-out;
}
.rnw-contact__head[aria-expanded="true"] + .rnw-contact__panel { max-height: 100vh; }

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

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

.rnw-contact__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 16px;   /* Figma実測（グループ見出しより1段下げる） */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}
/* 行末の「>」。アセットは上向きなので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;
}
/* 遷移先未確定（<span> 出力）。決まれば rnw_contact_groups() の url を埋めるだけ */
.rnw-contact__link--pending { color: var(--rnw-caption); cursor: default; }

/* CLOSE（Figma 1291:23536 / 200×55） */
.rnw-contact__close {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;   /* Figma実測（文字と×の間） */
  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: var(--rnw-white);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-contact__close-icon {
  width: 12px;   /* Figma実測 */
  height: 12px;
}

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

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


/* ------------------------------------
   6-6. 会員ログインモーダル（2026-09-24）
        PCヘッダー右上の「ログイン」とドロワーの「会員ログイン」から開く。
        作り・寸法は 6-5 のお問い合わせモーダルと同じ（familycare の .rnw-login と共通）。
        項目が3つなのでアコーディオンは持たず、一覧だけを置く。
        ▼旧サイトのモーダル（/include/modal.html の modal01）は使わない。
------------------------------------ */
.rnw-login {
  position: fixed;
  inset: 0;
  z-index: 15;   /* お問い合わせモーダルと同じ。ドロワー（13）・追従CTA（14）より上 */
  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;
  width: 600px;
  max-width: 100%;
}

.rnw-login__dialog {
  width: 100%;
  padding: 24px;
  border-radius: 8px;
  background-color: var(--rnw-white);
  box-sizing: border-box;
  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: var(--rnw-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;
  transition: opacity 0.15s ease-out;
}
/* 別サイトへ出るので外部リンクのアイコンを出す */
.rnw-login__labelrow {
  display: flex;
  align-items: center;
}
.rnw-login__external {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  color: var(--rnw-caption);
}

/* 行末の「>」。アセットは上向きなので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 の a:hover の色替えを打ち消す） */
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: var(--rnw-accent);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-white);
  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; }
}


/* =====================================================================
   7. フッター（SP新デザイン / Figma 1400:51477）
   ---------------------------------------------------------------------
   旧CSSの要素セレクタ `footer {}` を打ち消すため、
   背景・パディング等を明示している。
   ===================================================================== */

/* ▼余白の持ち方（Figma 1400:51477）
     Figmaは「企業情報のセクション」と「Pagefooter」が root の直下に並び、
     pt-60 と gap-32 は Pagefooter 側が持っている。
     ここで gap を使うと企業情報とサイトマップの間にもその値が入ってしまうため、
     gap は使わず、下の __container / __legal 側の余白で組んでいる。 */
.rnw-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;  /* 旧CSS `footer{padding}` の打ち消しも兼ねる */
  background-color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

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

.rnw-footer__container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;             /* Figma実測 39.99 */
  width: 341.25px;       /* Figma実測 */
  max-width: 100%;
  padding: 100px 15px 0; /* Figma実測 Pagefooterの pt-60 ＋ Containerの pt-40 / px-15 */
  box-sizing: border-box;
}
/* ▼上端にあった濃い区切り線は 2026-09-06 のデザイン更新で無くなった。
     SNSの下（.rnw-footer__nav::before の淡い線）だけが残る。 */

/* ------------------------------------
   7-0. 企業情報（SP: Figma 1400:51478 / PC: Figma 1400:51704）
        ▼2026-09-06 のデザイン更新でSPに追加。旧「サイトマップエリア」
          （グループ会社2社のテキストリンク）を置き換えたもの。
        ▼2026-09-13 のデザイン更新で背景がグラデーションになり、
          PCにも同じセクションが付いた。SP・PCで共通のマークアップを使い、
          違うぶんだけ .rnw-footer-company--pc で上書きする（7-5-0節）。
------------------------------------ */
.rnw-footer-company {
  width: 100%;   /* 親（.rnw-footer）が align-items:center のため明示する */
  padding: 56px 16px;   /* Figma実測 px-16 / py-56 */
  box-sizing: border-box;
  /* Figma 1400:51478 のグラデーション。白が0%、#912344 に 52.404% で到達する */
  background-image: linear-gradient(180deg, var(--rnw-white) 0%, var(--rnw-red) 52.404%);
}

/* 見出しを載せる白帯（Figma 1400:51481）。SPのみで、PCは帯に載らない。
   PC側は7-5-0節でこのボックスごと出力しない。 */
.rnw-footer-company__heading-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 126px;    /* Figma実測 h-126 */
  margin-bottom: 24px;  /* Figma実測 gap-24 */
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-footer-company__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;   /* Figma実測 */
  margin: 0;
  padding: 0;
}
.rnw-footer-company__heading-en {
  font-family: var(--rnw-font-en);
  font-size: 18px;   /* Figma SP/title/h2-sub */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-accent);   /* Figma nanny/text/accent。PCは common/accent/red */
}
.rnw-footer-company__heading-jp {
  font-family: var(--rnw-font-mincho);
  font-size: 28px;   /* Figma SP/title/h2 */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* Holdings Company / Group Company（Figma 1400:51484 / 1400:51492） */
.rnw-footer-company__blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;      /* Figma実測 */
  /* Figmaは375px時の実測343pxだが、固定すると画面が広いときだけ
     見出しの白帯（.rnw-footer-company__heading-box）より内側に入って
     幅が揃わない。帯と同じくセクションのpadding内いっぱいに広げる。 */
  width: 100%;
  margin: 0 auto;
}

.rnw-footer-company__block {
  padding: 24px 16px;   /* Figma実測 px-16 / py-24 */
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-footer-company__title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-red);   /* Figma common/accent/red #912344 */
}

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

.rnw-footer-company__link {
  display: flex;
  align-items: center;
  gap: 16px;   /* Figma実測 */
}
.rnw-footer-company__logo {
  display: block;
  flex-shrink: 0;
  width: 75px;    /* Figma実測 */
  height: 75px;
  object-fit: contain;
}
.rnw-footer-company__name {
  font-size: 14px;   /* Figma SP/text/defalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}


/* ------------------------------------
   7-1. SNS（Figma 1400:51513）
        ▼ロゴとCTAボタン「ご入会のお問い合わせ」は 2026-09-06 の
          デザイン更新で無くなった。
------------------------------------ */
.rnw-footer__brand {
  display: flex;
  flex-direction: column;
}

.rnw-footer__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__sns li:first-child { padding-right: 16px; }  /* Figma実測 */
.rnw-footer__sns img {
  display: block;
  width: 28px;   /* Figma実測（Instagramは29pxだが1px差のため揃える） */
  height: 28px;
  object-fit: contain;
}

/* ------------------------------------
   7-2. サイトマップ（Figma 70:2098）
------------------------------------ */
.rnw-footer__nav {
  position: relative;
  padding-top: 8px;  /* Figma実測 pt-8 */
}
/* 上端の淡い区切り線（Figma 70:2099 / 左右に-4%はみ出す） */
.rnw-footer__nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4%;
  right: -4%;
  height: 1px;
  background-color: var(--rnw-line);
}

.rnw-footer__nav-group { padding: 32px 0; }  /* Figma実測 py-32 */

.rnw-footer__nav-title {
  display: block;
  margin: 0;
  padding-right: 56px;  /* Figma実測 */
  font-size: 14px;      /* Figma SP/text/defalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
/* 「サービス紹介」は下に子リストが続くため下余白だけ詰める（Figma 70:2105 pb-12） */
.rnw-footer__nav-title--tight { padding-bottom: 12px; }

.rnw-footer__services-toggle { display: none; }
.rnw-footer__services-panel[hidden] { display: none; }
@media only screen and (max-width: 767px) {
  .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: 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 1400:51531 / 1400:51569）。
   2026-09-06 のデザイン更新でPCと同じ入れ子構造になった。 */
.rnw-footer__nav-col + .rnw-footer__nav-col { margin-top: 16px; }

.rnw-footer__nav-col-title {
  margin: 0;
  padding: 4px 0 4px 12px;   /* Figma実測 pl-12 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
.rnw-footer__nav-col--government .rnw-footer__nav-col-title { padding-left: 1em; }
.rnw-footer .rnw-footer__nav-col--government a.rnw-footer__nav-note { color: var(--rnw-caption); }

.rnw-footer__nav-sublist {
  margin: 0;
  padding: 0 0 0 20px;  /* Figma実測 pl-20 */
  list-style: none;
}

.rnw-footer__nav-row { padding: 16px 12px 16px 0; }  /* Figma実測 py-16 / pr-12 */
/* 最終行は点線を出さない（Figma 1400:51566） */
.rnw-footer__nav-row:last-child { background-image: none; }

.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-label.rnw-dash-b {
  display: block;
  padding-bottom: 4px;
}

/* ブランド名（Figma 1400:51537 ほか / common/text/caption） */
.rnw-footer__nav-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;   /* Figma実測（2本のときy=0とy=24＝16pxの行に8pxのgap） */
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__nav-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
}

.rnw-footer__nav-external {
  width: 16px;   /* Figma実測 */
  height: 16px;  /* Figma実測 */
  color: var(--rnw-caption);
}

/* 単独リンク（Figma 70:2128） */
.rnw-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__links-item {
  display: flex;         /* 「採用情報」の補足テキストをラベルの右に並べる */
  align-items: center;
  gap: 12px;             /* Figma実測（1834:18665） */
  padding: 32px 24px 32px 0;  /* Figma実測 py-32 / pr-24 */
}
.rnw-footer__links-link {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}

/* 「採用情報」の補足テキスト（2026-09-23 追加。Figma 1834:18665）。
   PC（.rnw-footer-pc__links-sub）と違い、SPは灰色ではなく本文色。 */
.rnw-footer__links-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;
}

/* ------------------------------------
   7-4. 最下部（Figma 70:2157）
------------------------------------ */
.rnw-footer__legal {
  width: 100%;
  margin-top: 32px;            /* Figma実測 gap-31.99（.rnw-footer の gap の代わり） */
  padding: 40px 16.87px 24px;  /* Figma実測 */
  background-color: var(--rnw-caption);
  box-sizing: border-box;
}

.rnw-footer__legal-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;  /* Figma実測 */
  width: 341.25px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* JQAマーク（Figma 70:2160 / 左右に-8pxはみ出す） */
.rnw-footer__cert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 -8px;
  padding: 0;
  list-style: none;
}
.rnw-footer__cert img {
  display: block;
  width: 157.05px;  /* Figma実測 */
  height: 59px;     /* Figma実測 */
  max-width: 100%;
  object-fit: contain;
}

/* ポリシー系リンク（Figma 70:2166） */
.rnw-footer__policy {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__policy-link {
  position: relative;
  display: block;
  padding: 8px 0;   /* 行頭矢印が無くなったので左右の余白も落とす */
  font-family: var(--rnw-font-noto);
  font-size: 13px;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: 1.3px;
  color: var(--rnw-white);
}
/* ▼行頭の矢印（\e901）と別窓アイコン（\e902）は 2026-09-06 の
     デザイン更新で無くなった。テキストだけを出す。 */

.rnw-footer__copyright {
  display: block;
  font-family: var(--rnw-font-serif);
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.4);  /* Figma実測 */
  text-align: center;
}

/* ---------------------------------------------------------------------
   7-5. PCフッター（Figma 1400:51703「footer/PC/TOP」）
   ---------------------------------------------------------------------
   SP（.rnw-footer）とは項目構成そのものが違うためマークアップを分けている。
   理由は footer.php の冒頭コメントを参照。出し分けは9節のメディアクエリ。

   ■ 左右の余白について
     Figmaのフレーム幅は1440pxで、白帯は px-80（内容幅1280）、
     グレー帯は px-157（内容幅1126）。これをそのまま padding で持つと
     旧 #container の min-width（1126px）まで縮んだときに内容が潰れる。
     padding は小さめの固定値にして、内容側の max-width で
     「1440px時にFigmaと同じ余白になる」形にしている。

   ■ 旧CSSの打ち消し
     旧 /css/common.css の要素セレクタ `footer {}` が効くため、
     .rnw-footer と同様に背景・パディング等を明示している。
   --------------------------------------------------------------------- */

.rnw-footer-pc {
  display: none;  /* SPでは非表示。9節のメディアクエリで解除 */
  flex-direction: column;
  align-items: center;
  min-width: var(--rnw-container-min-pc);
  padding: 0;  /* 旧CSS `footer{padding}` の打ち消し */
  background-color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

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

/* ------------------------------------
   7-5-0. 企業情報（Figma 1400:51704）
   ---------------------------------------
   2026-09-13 のデザイン更新でPCにも付いた。マークアップはSPと共通で、
   ここでは違うぶんだけ上書きする。
     - 見出しが白帯（__heading-box）に載らない（PHP側で出力していない）
     - 見出しの文字が大きく、英字が common/accent/red になる
     - カードが横並び（Holdings 340px固定＋Group が残り幅）
     - Group の4社が2列×2行
   ▼表示のON/OFFは親（.rnw-footer-pc）の display に任せている。
     ここで display を持つと9節の出し分けと二重になる。
------------------------------------ */
.rnw-footer-company--pc {
  width: 100%;
  /* Figmaは px-80（1440px時）。旧 #container の下限1126pxまで縮んでも
     潰れないよう padding は小さめにし、内容側の max-width で1440px時の
     余白を合わせる（7-5節の「左右の余白について」と同じ考え方）。 */
  padding: 56px 40px;
  box-sizing: border-box;
}

.rnw-footer-company--pc .rnw-footer-company__heading {
  max-width: 1280px;    /* Figma実測（1440 − px-80×2） */
  margin: 0 auto 24px;  /* Figma実測 gap-24 */
}
.rnw-footer-company--pc .rnw-footer-company__heading-en {
  font-size: 24px;        /* Figma PC/title/h2-sub */
  color: var(--rnw-red);  /* Figma common/accent/red。SPは nanny/text/accent */
}
.rnw-footer-company--pc .rnw-footer-company__heading-jp {
  font-size: 42px;   /* Figma PC/title/h2 */
}

/* Holdings（340px固定）＋ Group（残り幅）の横並び。
   高さはFigmaが self-stretch なので align-items は stretch のまま。 */
.rnw-footer-company--pc .rnw-footer-company__blocks {
  flex-direction: row;
  width: 100%;
  max-width: 1280px;
}
.rnw-footer-company--pc .rnw-footer-company__block:first-child {
  flex: 0 0 340px;   /* Figma実測 w-340 */
}
.rnw-footer-company--pc .rnw-footer-company__block:last-child {
  flex: 1 1 0;
  min-width: 0;
}

/* Group の4社は2列×2行（Figma 1400:51721）。縦に読ませる並びなので
   grid-auto-flow:column ＋ 2行固定にしている（row だと左右が入れ替わる）。
   ▼Holdings（:first-child）には掛けない。1社しか無いのに2行を切ると、
     空の2行目ぶんの gap がカードの下に残ってしまう。 */
.rnw-footer-company--pc .rnw-footer-company__block:last-child .rnw-footer-company__list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  justify-content: start;
  gap: 16px 56px;   /* Figma実測 */
}
.rnw-footer-company--pc .rnw-footer-company__name {
  font-size: 18px;          /* Figma SP/text/large/bold。SPフッターは14px */
  letter-spacing: 0.216px;  /* Figma実測 */
}

/* ------------------------------------
   7-5-1. 白帯（Figma 1400:51736）
------------------------------------ */
.rnw-footer-pc__container {
  position: relative;
  width: 100%;
  padding: 48px 40px 24px;  /* Figma実測 pt-48 / pb-24 */
  box-sizing: border-box;
}
/* 上端の区切り線。Figmaでは padding の外側＝画面幅いっぱいに伸びる */
.rnw-footer-pc__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--rnw-border);
}

.rnw-footer-pc__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;         /* Figmaは justify-between のみ。詰まりすぎ防止の下限 */
  min-height: 521px; /* Figma実測 h-521（＝サイトマップ下の余白ぶん） */
  max-width: 1280px; /* Figma実測（1440 − px-80×2） */
  margin: 0 auto;
}

/* ------------------------------------
   7-5-2. ロゴ／SNS（Figma 1400:51740）
------------------------------------ */
.rnw-footer-pc__brand {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 56px;  /* Figma実測 */
}

.rnw-footer-pc__logo {
  display: block;
  width: 144px;  /* Figma実測（2026-09-13 の更新で 300px から縮んだ） */
}
.rnw-footer-pc__logo img {
  display: block;
  width: 100%;
  height: 40px;  /* Figma実測 */
  object-fit: contain;
  object-position: left center;  /* 幅の狭いロゴが中央に寄らないよう左寄せ（下のSNSアイコンと左を揃える） */
}

.rnw-footer-pc__sns {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer-pc__sns li:first-child { padding-right: 16px; }  /* Figma実測 */
.rnw-footer-pc__sns img {
  display: block;
  width: 28px;   /* Figma実測（Instagramは29pxだが1px差のため揃える） */
  height: 28px;
  object-fit: contain;
}

/* ------------------------------------
   7-5-3. サイトマップ（Figma 1400:51752）
------------------------------------ */
.rnw-footer-pc__nav {
  display: flex;
  align-items: flex-start;
  gap: 40px;  /* Figma実測 */
}

/* 1カラム280px。枠の幅は 280×2 ＋ gap56 = 616px（Figma実測は w-600 ＝ 272px）。
   折り返し位置は footer.php 側の「|」で明示しているので、幅を変えても崩れない。 */
.rnw-footer-pc__services {
  flex: 0 1 616px;
  min-width: 0;
}

.rnw-footer-pc__services-title {
  margin: 0;
  padding: 0 56px 12px 0;  /* Figma実測 pr-56 / pb-12 */
  font-size: 20px;         /* Figma PC/text/large/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

.rnw-footer-pc__services-cols {
  display: flex;
  align-items: flex-start;
  gap: 56px;  /* Figma実測 */
}

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

/* 「個人のお客様」「法人・自治体のお客様」。下罫線は点線（.rnw-dash-b） */
.rnw-footer-pc__col-title {
  margin: 0;
  padding: 4px 12px;  /* Figma実測 py-4 / px-12 */
  font-size: 16px;    /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text-strong);
  white-space: nowrap;  /* Figma whitespace-nowrap */
}

/* カテゴリ（訪問サービスを探す／施設を探す 等。Figma 1400:51761 ほか）。
   2026-09-13 のデザイン更新で入った階層。
   カテゴリ同士の隙間はFigmaに指定が無く、各カテゴリの先頭（見出し）が
   持つ pt-16 がそのまま間隔になる。 */
.rnw-footer-pc__groups {
  display: flex;
  flex-direction: column;
}

/* カテゴリ見出し。Figmaでリンクになっているのは「海外の方向け」だけで、
   そこだけ <a>、ほかは <p> で出る（見た目は同じ）。 */
.rnw-footer-pc__group-title {
  display: block;
  margin: 0;
  /* Figma実測は pt-16 / pr-12。右余白は .rnw-footer-pc__group-sub と同じ理由で
     0にしている（カラム幅を全部使わせて折り返しを減らすため）。 */
  padding: 16px 0 0;
  font-size: 16px;         /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}
.rnw-footer-pc__group-title.rnw-dash-b { padding-bottom: 8px; }
.rnw-footer-pc__group--government .rnw-footer-pc__group-title { padding: 16px 0 8px 1em; }
.rnw-footer-pc .rnw-footer-pc__group--government a.rnw-footer-pc__item-label { color: var(--rnw-text); }

/* 見出しの下の補足（ベビーシッター・介護・ペットケア等）

   ▼padding-right を 0 にしている理由（2026-09-16）
     Figmaはこの枠に pr-12 が付いているが、「ベビーシッター・介護・ペットケア等」の
     テキスト（1400:51766）は幅258pxで、枠の252pxをはみ出したまま1行で描かれている。
     ブラウザははみ出せないので、pr-12 を残すと使える幅が260pxしか無く、
     258.4px のこの行が折り返しやすい（余裕1.6px）。
     pr-12 を外してカラム幅272px全部を使わせると1行に収まる。
     これより長い「保育園・学童・インターナショナルスクール等」等は
     272pxでも収まらず、Figmaと同じ位置で2行になる。 */
.rnw-footer-pc__group-sub {
  margin: 0;
  padding: 0;
  font-size: 14px;   /* Figma PC/text/dafalut/thin の14px相当 */
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

.rnw-footer-pc__list {
  margin: 0;
  padding: 0 0 0 20px;  /* Figma実測 pl-20 */
  list-style: none;
}

.rnw-footer-pc__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* <a> が横幅いっぱいに伸びないようにする */
  padding: 16px 12px 0 0;   /* Figma実測 pt-16 / pr-12 */
}

/* ブランド名（ナニーサービス 等）。リンクになるのはこちら側。

   ▼ nowrap を付けない理由
     旧デザイン（16px・2階層）では nowrap でカラム間の溝にはみ出させていたが、
     新デザインはこの行が14pxに下がり、代わりに
     「インターナショナルスクール/バイリンガルスクール」
     「海外共同研究/国際シンポジウム（PIICS）」のような長い項目が入った。
     Figmaでもこれらは2行に折り返しているため、折り返しを許している。 */
.rnw-footer-pc__item-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 14px;   /* Figma SP/text/defalut/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}

.rnw-footer-pc__item-external {
  flex-shrink: 0;
  width: 16px;   /* Figma実測 */
  height: 16px;  /* Figma実測 */
  color: var(--rnw-text);
}

/* サービスの種類（教育ベビーシッター 等）。灰色の小さい行 */
.rnw-footer-pc__item-caption {
  margin: 0;
  font-size: 12px;   /* Figma common/text/caption */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
}

/* 単独リンク（Figma 1400:51880） */
.rnw-footer-pc__links {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 16px;  /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer-pc__links-link {
  display: inline-flex;   /* 別窓アイコンをラベルの右に並べる */
  align-items: center;
  font-size: 20px;  /* Figma PC/text/large/bold */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;
}

/* 別窓アイコン。ラベルは20pxだが、同じ大きさだと文字に張り付いて見えるため
   サービス紹介の項目と同じ16pxにして、左に4px空けている。 */
.rnw-footer-pc__links-external {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  color: var(--rnw-text);
}

/* 「採用情報」の補足テキスト（2026-09-16 追加）。
   PCヘッダーのメガメニューと同じ「ラベル＋補足」の形。 */
.rnw-footer-pc__links-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
  white-space: nowrap;
}

/* ------------------------------------
   7-5-4. 最下部（Figma 1400:51885）
------------------------------------ */
.rnw-footer-pc__legal {
  width: 100%;
  padding: 24px 40px;  /* Figma実測 py-24 */
  background-color: var(--rnw-caption);
  box-sizing: border-box;
}

.rnw-footer-pc__legal-inner {
  display: flex;
  align-items: center;
  gap: 16px;         /* Figma実測 */
  max-width: 1126px; /* Figma実測（1440 − px-157×2） */
  margin: 0 auto;
}

/* JQAマーク（Figma 1400:51887） */
.rnw-footer-pc__cert {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;        /* Figma実測 */
  width: 339.64px;  /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer-pc__cert img {
  display: block;
  width: 164.78px;  /* Figma実測 */
  height: 61.91px;  /* Figma実測 */
  object-fit: contain;
}

.rnw-footer-pc__legal-body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;  /* Figma実測 */
  min-width: 0;
}

/* ポリシー系リンク（Figma 1400:51893）
   Figmaは2段組だが、これは1行に収まらないぶんが右寄せで折り返した形。
   flex-wrap で同じ見え方になる（項目が増減しても崩れない）。
   SPと違い、行頭矢印（\e901）も別窓アイコン（\e902）も付かない。 */
.rnw-footer-pc__policy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 24px;  /* Figma実測 行間4 / 項目間24 */
  width: 100%;
  margin: 0;
  padding: 0 8px;  /* Figma実測 px-8 */
  list-style: none;
  box-sizing: border-box;
}
.rnw-footer-pc__policy-link {
  font-size: 16px;  /* Figma PC/text/dafalut/thin */
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-white);
  white-space: nowrap;
}

.rnw-footer-pc__copyright {
  display: block;
  font-family: var(--rnw-font-serif);
  font-size: 14px;  /* Figma実測 */
  line-height: 21px;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.4);  /* Figma実測 */
  text-align: right;
}

/* ------------------------------------
   7-5-6. タブレット幅（768〜1125px）でPC版を出すための縮め
   ---------------------------------------
   ヘッダーは1023pxでハンバーガーに替わるが、フッターは従来どおり
   768pxまでPC版のまま。1440px前提の固定値（ロゴ144px・サービス紹介600px・
   企業情報のHoldings 340px・JQA 339.64px）がそのままでは収まらないので、
   余白・文字を一段（1023px以下はもう一段）小さくして収めている。

   ▼min-width の解除が必須
     .rnw-footer-pc は旧 #container に合わせて min-width:1126px を持っている。
     外さないと768〜1125pxで必ず横スクロールが出る。

   ▼2026-09-13 の更新で、サービス紹介の項目名（__item-label）から
     nowrap を外した。長い項目（インターナショナルスクール/バイリンガル
     スクール 等）はFigmaでも折り返しているため、狭い幅では素直に折り返させる。
------------------------------------ */
@media only screen and (min-width: 768px) and (max-width: 1125px) {
  /* 1126px前提の下限幅を解除する */
  .rnw-footer-pc { min-width: 0; }

  /* ---- 白帯 ---- */
  .rnw-footer-pc__container { padding: 32px 20px 40px; }
  .rnw-footer-pc__inner     { gap: 24px; min-height: 0; }

  /* ---- 企業情報 ---- */
  .rnw-footer-company--pc { padding: 40px 20px; }
  .rnw-footer-company--pc .rnw-footer-company__heading-en { font-size: 20px; }
  .rnw-footer-company--pc .rnw-footer-company__heading-jp { font-size: 32px; }
  /* Holdings の340pxとGroupの2列（間隔56px）が1126px以下で収まらないため、
     カードの固定幅と列間を詰める。ロゴは75pxのまま（縮めると粗が出る）。 */
  .rnw-footer-company--pc .rnw-footer-company__block:first-child { flex: 0 0 260px; }
  .rnw-footer-company--pc .rnw-footer-company__block:last-child .rnw-footer-company__list { gap: 12px 24px; }
  .rnw-footer-company--pc .rnw-footer-company__name { font-size: 15px; }

  /* ---- ロゴ／SNS ---- */
  .rnw-footer-pc__brand    { gap: 32px; }
  .rnw-footer-pc__logo     { width: 120px; }
  /* 幅を縮めたぶん高さは比率任せにする（固定高のままだと縦に潰れる） */
  .rnw-footer-pc__logo img { height: auto; }

  /* ---- サイトマップ ---- */
  .rnw-footer-pc__nav            { gap: 24px; }
  .rnw-footer-pc__services       { flex: 0 1 auto; }
  .rnw-footer-pc__services-title { padding-right: 24px; font-size: 17px; }
  .rnw-footer-pc__services-cols  { gap: 24px; }
  .rnw-footer-pc__col-title      { padding: 4px 8px; font-size: 14px; }
  .rnw-footer-pc__group-title    { padding: 12px 8px 0 0; font-size: 14px; }
  .rnw-footer-pc__group-sub      { padding-right: 8px; font-size: 13px; }
  .rnw-footer-pc__list           { padding-left: 12px; }
  .rnw-footer-pc__item           { padding: 12px 8px 0 0; }
  .rnw-footer-pc__item-label     { font-size: 13px; }
  .rnw-footer-pc__item-external  { width: 14px; height: 14px; }
  .rnw-footer-pc__item-caption   { font-size: 11px; }
  .rnw-footer-pc__links          { gap: 12px; }
  .rnw-footer-pc__links-link     { font-size: 15px; }
  .rnw-footer-pc__links-sub      { font-size: 12px; }
  .rnw-footer-pc__links-external { width: 14px; height: 14px; }

  /* ---- 最下部 ---- */
  .rnw-footer-pc__legal       { padding: 20px; }
  .rnw-footer-pc__legal-inner { gap: 12px; }
  .rnw-footer-pc__cert        { width: 240px; }
  .rnw-footer-pc__cert img    { width: 115px; height: auto; }
  .rnw-footer-pc__policy      { gap: 4px 16px; }
  .rnw-footer-pc__policy-link { font-size: 13px; }
  .rnw-footer-pc__copyright   { font-size: 12px; }
}

/* もう一段（768〜1023px）。
   ヘッダーがハンバーガーになる幅。上の値では「法人・自治体のお客様」（見出し）と
   企業情報のカード2枚が入りきらないので、ロゴ・文字・会社ロゴをさらに1段落とす。
   ▼これ以上は下げられない。狭める必要が出たらデザイン側の判断
     （右列を下段へ回す・企業情報のGroupを1列にする等）。 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .rnw-footer-pc__container { padding: 24px 16px 32px; }
  .rnw-footer-pc__inner     { gap: 16px; }

  .rnw-footer-company--pc { padding: 32px 16px; }
  .rnw-footer-company--pc .rnw-footer-company__heading-en { font-size: 18px; }
  .rnw-footer-company--pc .rnw-footer-company__heading-jp { font-size: 28px; }
  .rnw-footer-company--pc .rnw-footer-company__block             { padding: 16px 12px; }
  .rnw-footer-company--pc .rnw-footer-company__block:first-child { flex: 0 0 220px; }
  .rnw-footer-company--pc .rnw-footer-company__title { font-size: 17px; }
  .rnw-footer-company--pc .rnw-footer-company__block:last-child .rnw-footer-company__list { gap: 12px 16px; }
  .rnw-footer-company--pc .rnw-footer-company__link  { gap: 8px; }
  .rnw-footer-company--pc .rnw-footer-company__logo  { width: 56px; height: 56px; }
  .rnw-footer-company--pc .rnw-footer-company__name  { font-size: 13px; }

  .rnw-footer-pc__brand { gap: 24px; }
  .rnw-footer-pc__logo  { width: 104px; }

  .rnw-footer-pc__nav            { gap: 16px; }
  .rnw-footer-pc__services-title { font-size: 16px; }
  .rnw-footer-pc__services-cols  { gap: 16px; }
  .rnw-footer-pc__col-title      { font-size: 13px; }
  .rnw-footer-pc__group-title    { font-size: 13px; }
  .rnw-footer-pc__group-sub      { font-size: 12px; }
  .rnw-footer-pc__item-label     { font-size: 12px; }
  .rnw-footer-pc__item-caption   { font-size: 11px; }
  .rnw-footer-pc__links-link     { font-size: 13px; }
  .rnw-footer-pc__links-sub      { font-size: 11px; }
  .rnw-footer-pc__links-external { width: 12px; height: 12px; }

  .rnw-footer-pc__legal    { padding: 16px; }
  .rnw-footer-pc__cert     { width: 200px; }
  .rnw-footer-pc__cert img { width: 95px; }
}


/* ------------------------------------
   7-5-5. ホバー
   旧 /css/common.css:2070 の
     body:not(.tab_view) a:hover { opacity:.6; color:#912344 }
   がPC幅で全リンクに効くため、そのままだとフッターの文字が
   ホバー時だけ赤紫（#912344）に化ける。旧CSSと同じ `body:not(.tab_view)` に
   クラスを1つ足して詳細度を上げ（0-3-2 / 0-3-1）、色だけ元に戻す。
   見せ方はボタン（3節）と揃えて「色は変えず70%に透かす」。
------------------------------------ */
@media only screen and (min-width: 768px) {
  body:not(.tab_view) .rnw-footer-pc a:hover { opacity: 0.7; }

  body:not(.tab_view) .rnw-footer-pc__group-title:hover { color: var(--rnw-text); }
  body:not(.tab_view) .rnw-footer-pc__item-label:hover  { color: var(--rnw-text); }
  body:not(.tab_view) .rnw-footer-pc__links-link:hover  { color: var(--rnw-text); }
  body:not(.tab_view) .rnw-footer-pc__policy-link:hover { color: var(--rnw-white); }
  /* 企業情報の会社名は <a> の中の <span> が自前の色を持つため、
     旧CSSの a:hover{color:#912344} には元から影響されない（打ち消し不要）。 */

  /* リンクであることが分かるよう、ホバーで下線を出す。
     ▼.rnw-footer（SP用マークアップ）はPC幅では非表示だが、タブレット幅で
       出る場合に備えて同じ指定を当てておく。 */
  body:not(.tab_view) .rnw-footer-pc a:hover,
  body:not(.tab_view) .rnw-footer a:hover {
    text-decoration: underline;
  }
}


/* ---------------------------------------------------------------------
   8. 旧SPメニューの無効化
   ---------------------------------------------------------------------
   旧 /js/function.js が実行時に下記をDOMへ動的挿入するため、
   header.php からマークアップを削除しても表示が残ってしまう。
   （テーマのPHPには .sp_menu_wrap / #sp_menu のマークアップは一切無い＝
     JS生成の証拠。/js/function.js の 90〜97行目）

     $('header').append('<div class="sp_menu_wrap">…#btn_menu…</div>')
       … 旧ハンバーガー（fixed / z-index:15）
     $('header').append('<div id="sp_menu"></div>')
     $('.mddNav').clone().appendTo('#sp_menu')
       … 旧SPメニュー本体。新ヘッダーに .mddNav が無いため中身は空になるが、
         枠だけは残るので併せて非表示にする。

   旧JSは編集禁止のため削除できない。ここで非表示にして
   新ヘッダーのハンバーガーだけを残す。
   旧JSが slideDown() 等でインラインstyleを付けるため !important を付けている。
   ※ 旧実装を完全撤去できる段階になったら、この節ごと削除してよい。
   --------------------------------------------------------------------- */
.sp_menu_wrap,
#sp_menu {
  display: none !important;
}


/* =====================================================================
   9. レスポンシブ
   ---------------------------------------------------------------------
   ▼ヘッダーとフッターで分岐点が違う。混ぜないこと。

     ヘッダー … 1023 / 1024
       タブレット（〜1023px）はハンバーガー＋ドロワー。
       ファミケア／pro（1125/1126）ではなくエデュケアと同じ1023/1024に
       合わせている。総合トップのPCナビは2カラムの展開パネルを持つため、
       1024px未満まで引っ張ると左カテゴリ（330px）と右の項目が入らない。

     フッター … 767 / 768（従来どおり）
       768px以上はPC版を出し、1125pxまでは 7-5-6 の縮めで収める。

   ▼#container（旧CSS min-width:1126px）はここでは触らない。
     総合トップだけ renewal/css/pages/front.css 側で解除している。
     旧マークアップのページ（single-news / archive-news / page 等）は
     1126px前提で組まれているため、解除すると本文が潰れる。
   ===================================================================== */

/* ---------- ヘッダーの下限幅の解除：〜1125px ----------
   旧CSS `header { min-width:1126px }` の打ち消し。
   外さないと画面より広いヘッダーになり、
     ・〜1023px … 右端のハンバーガーが画面外へ出て押せない
     ・1024〜1125px … お問い合わせボタンが画面外へ出る
   ▼#container（同じく1126px）はここでは外していない。
     総合トップだけ front.css 側で外している（理由は上のコメント）。 */
@media only screen and (max-width: 1125px) {
  .rnw-header {
    min-width: auto;
    min-width: initial;
  }
}

/* ---------- ヘッダー：〜1023px はハンバーガー ---------- */
@media only screen and (max-width: 1023px) {
  .rnw-header__sp { display: flex; }
  .rnw-header__pc { display: none; }

  /* ▼本文のヘッダー分オフセットもドロワーの高さに合わせる。
     ページ側のCSS（pages/*.css）と下の .breadcrumbs_wrap は 768px〜で
     --rnw-header-h-pc を使ってヘッダー分の余白を確保している。
     この幅のヘッダーはハンバーガー（70px＋下線1px）なので、
     変数の側を合わせておかないと本文の頭に18pxの隙間ができる。
     PCヘッダーはこの幅では出ないので他への影響は無い。
     （ファミケア／エデュケアと同じやり方） */
  :root { --rnw-header-h-pc: calc(var(--rnw-header-h-sp) + 1px); }
}

/* ---------- ヘッダー：1024px〜 はPCナビ ---------- */
@media only screen and (min-width: 1024px) {
  .rnw-header__sp { display: none; }
  .rnw-header__pc { display: flex; }

  /* PCナビ時はドロワーを使わない */
  .rnw-menu { display: none; }
}

/* ---------- フッター：〜767px ---------- */
@media only screen and (max-width: 767px) {
  /* フッター：SPは .rnw-footer（Figma 1400:51477） */
  .rnw-footer    { display: flex; }
  .rnw-footer-pc { display: none; }
}

/* ---------- フッター：768px〜 ---------- */
@media only screen and (min-width: 768px) {
  /* フッター：PCは .rnw-footer-pc（Figma 1400:51703 / スタイルは7-5節）。
     768〜1125pxは 7-5-6 で文字と余白を一段小さくしている。 */
  .rnw-footer    { display: none; }
  .rnw-footer-pc { display: flex; }
}

/* ---------- 旧CSSの本文オフセット調整 ----------
   旧 /css/contents.css は PCで .breadcrumbs_wrap に margin-top:128px を
   与えている（旧ヘッダー高と同値）。ヘッダーを Figma の88pxにしたため、
   そのままだと40pxぶん余白が余る。旧CSSは編集禁止なのでここで打ち消す。
   総合トップ以外のページ（single-news / archive-news / page 等）向け。
   768〜1023pxはヘッダーがハンバーガーに替わるが、上のブロックで
   --rnw-header-h-pc 自体をその高さに差し替えているのでここは1本でよい。 */
@media only screen and (min-width: 768px) {
  .breadcrumbs_wrap { margin-top: var(--rnw-header-h-pc); }
}

/* ---------- 狭幅SP（Figma基準375px未満） ---------- */
@media only screen and (max-width: 374px) {
  .rnw-menu__inner { max-width: calc(100% - 24px); }
  .rnw-header__logo,
  .rnw-menu__logo { width: auto; max-width: 128px; }
}

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