@charset "UTF-8";

/* =====================================================================
   ポピンズ プロフェッショナル リニューアル 共通CSS
   ---------------------------------------------------------------------
   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
       SPヘッダー（閉） 70:3286
       SPドロワー（開） 70:3576
       SPフッター       12:942（コンポーネント "footer（変わります）" の
                                device=SP, type=pro バリアント 12:884）
       PCヘッダー       52:2410（0514ワイヤーフレーム。確定デザイン未提供）
       PCフッター       … 提供なし（全バリアントが device=SP のみ）

   ■ 配色について（方針確定 A / C-1）
     ドロワー・PCヘッダーは pro/main #00778A・pro/bg #D9F0F4 を使用。
     旧サイトの主色 #009BB4 からの変更は意図的なものとして受け入れている。
     フッターのサイトマップ枠線・別窓アイコンは Figma の指定が
     nanny/main #F6BECA・nanny/text/accent #BC326C（ファミリーケアの
     バリアブル）だが、Figma通りに実装する方針で確定している。

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

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

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

:root {
  /* -------------------------------------------------------------
     カラー（Figma登録バリアブル準拠）
     ------------------------------------------------------------- */
  --rnw-text:    #444444;  /* 本文                   common/text/bk */
  --rnw-caption: #626262;  /* キャプション・点線罫線 common/text/gray */
  --rnw-white:   #FFFFFF;  /* common/white */
  --rnw-heading: #333333;  /* フッター見出し         Fill/Default */
  --rnw-line:    #EDEDED;  /* 淡い区切り線（Figma 12:959） */
  --rnw-border:  #E2E2E2;  /* 区切り線（PCフッター上端 I318:20175;4478:14002） */

  /* プロフェッショナル配色 */
  --rnw-main: #00778A;  /* pro/main（CTA背景） */
  --rnw-bg2:  #D9F0F4;  /* pro/bg（ドロワー背景） */

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

  /* -------------------------------------------------------------
     タイポグラフィ
     --rnw-font-icon は旧CSSの @font-face（/professional/css/fonts/poppins.*）
     をそのまま流用する。\e901 = 矢印（icon-arrow_line）、
     \e902 = 別窓（icon-blank）。旧 /professional/css/common.css の
     56〜70行目で定義されている。
     ------------------------------------------------------------- */
  --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';

  /* -------------------------------------------------------------
     レイアウト
     ※ ヘッダー高は旧CSSが本文オフセットを固定値で持っているため、
        旧値と同一にする（旧CSSは編集禁止のためヘッダー側を合わせる方針）。
          /professional/css/common.css    header { height: 90px }        … PC
                                          （767px以下） { height: 70px } … SP
          /professional/css/contents.css  .breadcrumbs_wrap { margin: 90px 0 0 } … PC
                                          （767px以下）     { margin: 70px 0 0 } … SP
          /professional/css/index.css     #key_field { margin: 90px auto 88px }  … PC

        Figma の SPヘッダーは実測59px（px-20 / py-12 / ロゴ35px）だが、
        旧CSSの本文オフセットが70pxのため min-height を70pxにして
        本文と重ならないようにしている。内側のパディングはFigma通り。
     ------------------------------------------------------------- */
  --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: 13;                /* ドロワーはヘッダーごと覆うため上に置く */
  --rnw-z-pagenav: 10;             /* ページ内ナビ帯。ヘッダーより下、本文より上 */

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

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


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

/* --- 日本語の行末禁則 ---
   既定（line-break: auto）だと、ブラウザによって小書きのかな（ャュョッ）や
   長音符（ー）が行頭に来ることがある。strict にすると JIS の厳格な禁則が
   適用され、「保育士等キャリア／アップ研修」のような割れ方を防げる。
   ▼旧CSSの body には line-break の指定が無いため、ここでの上書きは安全。
     このファイルはリニューアル対象ページでしか読まれない。 */
body {
  line-break: strict;
}

/* --- アイコン（単色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:3606 /
   12:948）では 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-t {
  --rnw-dash-c: var(--rnw-caption);
  --rnw-dash-w: 1px;
  background-repeat: no-repeat;
  background-size: 100% var(--rnw-dash-w);
  background-image: repeating-linear-gradient(
    to right,
    var(--rnw-dash-c) 0 2px,
    transparent 2px 4px
  );
}
.rnw-dash-b { background-position: left bottom; }
.rnw-dash-t { background-position: left top; }

/* --- 画面読み上げ用の非表示 --- */
.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:3606 / 12:948）
   ===================================================================== */

.rnw-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 32px;            /* Figma実測（ドロワーCTA 70:3606） */
  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); }

/* 遷移先未確定のCTA（<span> 出力）。
   2026-08-28、薄く（opacity .6）していたのをやめた。Figmaでは
   「資料請求」も他のボタンと同じ濃さの塗り（363:26146）で、
   下層ページ側の .rnw-*-btn--pending も既に cursor だけにしてある。
   押せないことはカーソルと <span> 出力（リンクにしない）で示す。 */
.rnw-btn--pending { cursor: default; }

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


/* =====================================================================
   4. ヘッダー
   ---------------------------------------------------------------------
   旧CSSの `header { min-width:1126px; opacity:0; padding:0 16px;
   height:90px; 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:3286）
------------------------------------ */
.rnw-header__sp {
  display: none;  /* PCでは非表示。SP側のメディアクエリで解除 */
  align-items: center;
  min-height: var(--rnw-header-h-sp);   /* 旧CSSの本文オフセットに合わせる */
  padding: 12px 20px;                   /* Figma実測 */
  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;
}

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

/* ハンバーガー（Figma 70:3286 内 ci:hamburger-md / 35x35） */
.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 335:9356 / 確定デザイン）
   Figmaのヘッダー高は88pxだが、旧CSSが本文オフセットを90pxで持っているため
   min-height は --rnw-header-h-pc（90px）のまま。内側の値は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（上下はmin-heightで確保） */
  background-color: var(--rnw-white);
  box-sizing: border-box;
}

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

.rnw-header__pc-logo {
  display: block;
  flex: 0 0 auto;   /* 伸ばさない。伸ばすとナビとCTAが右端まで届かない */
  width: 300px;     /* Figma実測 335:9357 */
}
.rnw-header__pc-logo img {
  display: block;
  width: 100%;
  height: auto;
  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実測 335:9359 */
  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:9731 / 335:9782 / 335:9839）。
   開閉は renewal/js/header.js が .is-open を付け外しする。
   CSSの :hover ではなくJSで持たせているのは、項目とパネルの間を
   マウスが横切ると :hover が切れてパネルが閉じてしまうため
   （斜めに動かした場合も同様）。 */
.rnw-header__nav-item.is-open > .rnw-header__nav-link {
  background-color: #D9F0F4;  /* Figma pro/bg */
}

/* 採用情報（2段組み） */
.rnw-header__nav-link--stacked {
  flex-direction: column;
  gap: 4px;  /* Figma実測 335:9375 */
}
.rnw-header__nav-sub {
  font-size: 10px;   /* Figma実測 335:9380 */
  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:49635 type=pro）
   ---------------------------------------
   2026-09-12 横1列のリストから、左にカテゴリ・右にその中身の2カラムへ変更。
   左のカテゴリを選ぶと右の内容が入れ替わる（既定は先頭）。
   ファミリーケア（familycare/poppins-familycare/renewal/css/common.css 4-3節）と
   同じ作りで、違いは2つだけ。
     ・選択中カテゴリの地色  pro/bg #D9F0F4（ファミリーケアは nanny/bg #FAEEF1）
     ・パネル上辺の罫線      pro/main（ファミリーケアは nanny/text/accent #BC326C）
   開閉とカテゴリ切替は 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 var(--rnw-main);  /* Figma pro/main #00778A */
  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="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: 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;
}
/* 選択中のカテゴリ。開いている帯の項目（4-2の .is-open）と同じ地色。
   ▼--rnw-bg2 はドロワーの背景として使っている変数なので、意味が混ざらないよう
     ここでは値を直書きしている（4-2 の .rnw-header__nav-link と同じ扱い）。 */
.rnw-header__nav-tab.is-active { background-color: var(--rnw-nav-panel-bg, #FAEEF1); }
/* 項目を持たない単独リンク（For International Guests）はシェブロン無し。
   地色は他のカテゴリと同じ .is-active（renewal/js/header.js が付け外しする）。
   ▼旧サイトの /professional/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 1400:49635 の実測は本文と同じ #444444 で、
     グレー（--rnw-caption #626262）ではない。ファミリーケア／総合トップも同じ。 */
}

/* カテゴリの矢印は右向き（chevronアセットは上向き） */
.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; }
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;
  /* ▼色を指定しないこと（.rnw-header__nav-tabsub と同じ理由）。 */
}

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

/* PCヘッダーのCTA（Figma 335:9355 資料請求 / 335:9390 お問い合わせ）。
   2本とも塗りボタンで、色だけが違う。 */
.rnw-header__ctas {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 24px;  /* Figma実測 335:9358 の gap をそのまま使う */
  margin: 0;
  padding: 0;
  list-style: none;
}

.rnw-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;            /* Figma実測 */
  padding: 16px 28px;      /* Figma実測 12px + 内側Text Containerの16px */
  border: 0;
  border-radius: 8px;      /* Figma実測 */
  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); /* Figma common/white */
  white-space: nowrap;
  text-decoration: none;
  box-sizing: border-box;
}
.rnw-header__cta--main   { background-color: var(--rnw-main); }  /* pro/main #00778A */
.rnw-header__cta--accent { background-color: #912344; }          /* common/accent/red */

/* 遷移先未確定（<span> 出力）。
   見た目はデザイン通りのままにして、押せないことだけを示す。
   薄くするとデザインと違って見えるため、opacity は掛けない。 */
.rnw-header__cta--pending { cursor: default; }

/* =====================================================================
   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パターンを同じ見た目に揃える）
   Figma 1302:62753 ほか。 */
.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:3604 / 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); }

/* 2階層目で子を持たない項目（For International Guests）。
   子を持つ「◯◯を探す」は下の .rnw-nav__subhead。 */
.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 閉 1302:62705・開 1302:62749）
   ---------------------------------------
   2026-09-12 2階層から3階層に変更。ファミリーケアと同じ項目・同じ作りにした
   （familycare/poppins-familycare/renewal/css/common.css 5-1節）。
   1階層目（個人向けサービス／法人向けサービス）─ 2階層目（◯◯を探す）─
   3階層目（各サービス。行頭に色付きのドット）。
   項目間24px ＋ 各項目下に点線罫線、という並びを上下パディング＋.rnw-dash-b で
   再現している。
------------------------------------ */
.rnw-nav--drawer .rnw-nav__list { padding-top: 20px; }  /* Figma 1302:62705 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 1302:62812 gap-4）。
   2・3階層目の .rnw-nav__label / .rnw-nav__sub には効かせたくないので、
   見出しの直下だけに限定している。 */
.rnw-nav--drawer .rnw-nav__head > .rnw-nav__label { flex: 0 0 auto; }
.rnw-nav--drawer .rnw-nav__head > .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階層目（For International Guests） */
.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;
}
.rnw-nav__subhead[aria-expanded="true"] .rnw-nav__caret { transform: rotate(0deg); }

/* --- 3階層目（個別サービス）。行頭に色付きのドット。色は2階層目の tone から降ってくる。
       1つのドロワーの中で3色が同時に要るため、--rnw-main 等の変数は使わない。 --- */
.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;
}
/* 遷移先未確定は <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-2. PCヘッダー時のスタイルは無い
   ---------------------------------------
   PC確定デザイン（335:9356）に合わせて、PCのグローバルナビは
   header.php の $rnw_pc_nav ＋ .rnw-header__nav 系（上の 4-2 / 4-3）へ移した。
   .rnw-nav--header は出力されないため、ここには何も置かない。
------------------------------------ */


/* =====================================================================
   6. SPドロワー（Figma 70:3576）
   ---------------------------------------------------------------------
   ドロワーは自前のヘッダー（ロゴ＋閉じる / 70:3577）を持ち、
   画面全体（ページヘッダーごと）を覆う。
   /top/ のドロワーと違い「ポピンズ提供サービス」カードは無い。
   ===================================================================== */

.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:3577）
------------------------------------ */
/* 中身が画面高を超えたときに閉じるボタンが流れていかないよう sticky にしている
   （Figmaは静止画のためスクロール時の指定は無い）。 */
.rnw-menu__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  /* ▼高さは閉じた状態（.rnw-header__sp = 70px）と必ず揃える。
     Figmaのドロワーヘッダーは75px（padding 16 ＋ 閉じるボタン43）だが、
     閉じた状態は旧CSSの本文オフセットに縛られて70px固定。
     Figma通り75pxにすると、開閉のたびにロゴが5px動いて見える。
     閉じるボタンのサイズ（43px）はFigmaのまま、上下paddingだけ13pxにして
     43 + 13*2 + 罫線1px = 70px に合わせている。 */
  min-height: var(--rnw-header-h-sp);
  padding: 13px 20px;
  border-bottom: 1px solid var(--rnw-caption);  /* Figma実測 #626262 */
  background-color: var(--rnw-white);
  box-sizing: border-box;
}

.rnw-menu__logo {
  display: block;
  flex-shrink: 0;
  width: 266.977px;  /* Figma実測 */
  height: 35px;      /* Figma実測 */
}
.rnw-menu__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 閉じるボタン（Figma 70:3580 material-symbols:close-rounded / 43x43） */
.rnw-menu__close {
  display: block;
  flex-shrink: 0;
  width: 43px;   /* Figma実測 */
  height: 43px;  /* Figma実測 */
  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:3582 / 70:3583）
------------------------------------ */
.rnw-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;      /* Figma実測 */
  width: 330px;   /* Figma実測（375 - 22.5*2） */
  max-width: calc(100% - 45px);
  margin: 0 auto;
  padding-bottom: 40px;  /* Figma実測 pb-40 */
}

/* ------------------------------------
   6-3. CTA・SNS（Figma 70:3606 / 70:3607）
------------------------------------ */
/* 塗りは common/accent/red #912344（Figma 363:26146 資料請求 / 363:26147 お問い合わせ）。
   2026-08-28の更新で pro/main（teal）から変わった。2本とも赤。
   .rnw-btn--main（teal）に後から重ねて背景だけ差し替える。
   ▼旧デザインのフッターCTA（.rnw-footer__cta / 12:948）は
     最新のSPフッター（694:19934）に無いため撤去済み。 */
.rnw-menu__cta {
  flex-shrink: 0;
  background-color: #912344;
}

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


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

   ▼ 2026-09-01 最新デザイン（694:19934）に差し替えた。旧 12:942 との違い：
     ・ロゴ／CTA「資料請求」／グループロゴ（株式会社ポピンズ・ポピンズサービス
       TOP）のブロックが無くなった。先頭はSNSだけ（中央寄せ）
     ・コンテナ上端の区切り線（12:944 / #626262）が無くなった。
       サイトマップ上端の淡い線（#EDEDED）だけ残る
     ・サービス紹介の構成がPCフッターと同じ4グループになり、項目の
       キャプション（介護・育児コンサルティング）が無くなった
     ・単独リンクから「助成金・補助金制度について」が無くなった
   ===================================================================== */

.rnw-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;          /* Figma実測 31.99 */
  padding: 60px 0 0;  /* Figma実測 pt-60 */
  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: 40px 15px 0; /* Figma実測 pt-40 / px-15 */
  box-sizing: border-box;
}
/* ------------------------------------
   7-1. SNS（Figma 694:19939）
   ▼ 2026-09-01 ロゴとCTAが無くなり、この列はSNSだけになった。
------------------------------------ */
.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 694:19948）
------------------------------------ */
.rnw-footer__nav {
  position: relative;
  padding-top: 8px;  /* Figma実測 pt-8 */
}
/* 上端の淡い区切り線（Figma 694:19949 / 左右に-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 12:965 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 694:19957 ほか / Fill/Default #333）。
   PIICSの単独リンクはサービス名としてレギュラーで表示する。 */
.rnw-footer__nav-heading {
  display: block;
  margin: 0;
  padding: 4px 12px;  /* Figma実測 px-12 py-4 */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-heading);
}
.rnw-footer__nav-heading--government { padding-left: 1em; }
a.rnw-footer__nav-heading { font-weight: 400; }
.rnw-footer__service-name { white-space: nowrap; }

/* ▼ 2026-09-01 最新デザインでは全グループに pb-24 が付く（694:19959 ほか）。
     旧デザインは1グループ目だけだったため --gap 修飾子は廃止した。 */
.rnw-footer__nav-sublist {
  margin: 0;
  padding: 0 0 24px 20px;  /* Figma実測 pl-20 / pb-24 */
  list-style: none;
}

.rnw-footer__nav-row { padding: 16px 12px 16px 0; }  /* Figma実測 py-16 / pr-12 */
/* 各グループの最終行は点線を出さない（Figma 694:19972 / 694:19981） */
.rnw-footer__nav-row:last-child { background-image: none; }

.rnw-footer__nav-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}

/* 単独リンク（Figma 694:19986） */
.rnw-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__links-item { padding: 32px 24px 32px 0; }  /* Figma実測 py-32 / pr-24 */
.rnw-footer__links-link {
  position: relative;
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
/* 「採用情報」の補足テキスト（2026-09-25 追加）。
   総合トップのSPフッター（top/poppins-top の .rnw-footer__links-sub）と同じ値。
   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;
}
/* ▼ 2026-09-01 最新デザインでは単独リンクが3項目（よくあるご質問／お知らせ／
     ご利用者様の声）になり、別窓アイコンが付く項目（助成金・補助金制度について）
     が無くなったため .rnw-footer__links-link--external を廃止した。
     PCフッター側（.rnw-footer-pc__links-link--external）には残っている。
   ▼ 同じく、グループロゴのブロック（旧 7-3 / 12:1001 の
     .rnw-footer__group ほか）も無くなったため撤去した。 */

/* ------------------------------------
   7-3. 最下部（Figma 694:19996）
------------------------------------ */
.rnw-footer__legal {
  width: 100%;
  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 694:19999 / 左右に-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 694:20004）。
   ▼ 2026-09-01 追加。Figmaはこの2つが40pxで離れているが、
     従来のマークアップは無クラスの <div> でまとめていて間隔が付いていなかった。 */
.rnw-footer__legal-body {
  display: flex;
  flex-direction: column;
  gap: 40px;  /* Figma実測 */
}

/* ポリシー系リンク（Figma 694:20005） */
.rnw-footer__policy {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer__policy-link {
  position: relative;
  display: block;
  padding: 8px 18px;  /* Figma実測 */
  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） */
.rnw-footer__policy-link::before {
  content: "\e901";
  position: absolute;
  top: 50%;
  left: 6.69px;       /* Figma実測 */
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 7px;     /* Figma実測 */
  line-height: 10.5px;
  letter-spacing: 0.91px;
}
/* 別窓のみラベル末尾に \e902 を付ける */
.rnw-footer__policy-link--external::after {
  content: "\e902";
  margin-left: 4px;
  font-family: var(--rnw-font-icon);
  font-size: 10px;    /* Figma実測 */
  letter-spacing: 1.3px;
}

.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 318:20175「footer（変わります）」device=PC, type=pro）
   ---------------------------------------------------------------------
   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の打ち消し
     旧 /professional/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-1. 白帯（Figma I318:20175;4478:14001）
------------------------------------ */
.rnw-footer-pc__container {
  position: relative;
  width: 100%;
  padding: 48px 40px;    /* Figma実測 pt-48。下は 7-5-2 のコメント参照 */
  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 のみ。詰まりすぎ防止の下限 */
  /* ▼ 2026-09-01 Figmaの h-521 は「サイトマップ＋その下の余白」の合計。
       中身が521pxを超えると下の余白がゼロになり、グレー帯と詰まって見えた。
       余白ぶん（48px）をコンテナの padding-bottom に出し、min-height は
       その差引き（521−48）にする。1440px時の総高は変わらない。 */
  min-height: 473px;
  max-width: 1280px; /* Figma実測（1440 − px-80×2） */
  margin: 0 auto;
}

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

.rnw-footer-pc__logo {
  display: block;
  width: 300px;  /* Figma実測 */
}
.rnw-footer-pc__logo img {
  display: block;
  width: 100%;
  height: 39.29px;  /* logo_professional.svg の比率（327.85 : 42.942）で300px時の高さ */
  object-fit: contain;
}

.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 I318:20175;4478:14017）
------------------------------------ */
.rnw-footer-pc__nav {
  display: flex;
  align-items: flex-start;
  gap: 40px;  /* Figma実測 */
}

.rnw-footer-pc__services {
  flex: 0 1 600px;  /* Figma実測 w-600 */
  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 {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 24px;  /* Figma実測（グループ間） */
  min-width: 0;
}

/* 見出し＋その配下の項目のまとまり。間隔は .rnw-footer-pc__col の gap で持つ */
.rnw-footer-pc__group { min-width: 0; }

/* 「国・自治体向けサービス」「法人のお客様」「個人のお客様」。
   下罫線は点線（.rnw-dash-b / Figma stroke-dasharray 2 2）。
   PIICSのように配下の項目が無いグループには .rnw-dash-b が付かない。 */
.rnw-footer-pc__group-title {
  display: block;
  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);
}
.rnw-footer-pc__group--government .rnw-footer-pc__group-title { padding-left: 1em; }
a.rnw-footer-pc__group-title { font-weight: 400; }
.rnw-footer-pc__service-name { white-space: nowrap; }
.rnw-footer-pc .rnw-footer-pc__group--government a.rnw-footer-pc__link { color: var(--rnw-text); white-space: normal; }

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

/* 1項目に複数リンクが入る場合は8pxで並ぶ（Figma実測。「個人のお客様」だけ） */
.rnw-footer-pc__item {
  display: flex;
  flex-direction: column;
  gap: 8px;                /* Figma実測 */
  padding: 16px 12px 0 0;  /* Figma実測 pt-16 / pr-12 */
}

/* ▼ nowrap を付ける理由
     Figmaではこの項目は全て1行（例「居宅訪問型保育従事者向け研修」は
     w-240 で折り返し無し）。カラムの内寸も 272 − pl20 − pr12 = 240px で同値だが、
     ブラウザは最後の1文字のうしろにも letter-spacing を入れるため
     16px × 14文字 + 1.2px × 14 = 240.8px となり、0.8px はみ出して折り返してしまう。
     はみ出すぶんはカラム間の56pxの溝に入るので、旧 #container の下限（1126px）まで
     縮めても見た目は崩れない。
     PIICSの単独リンクはサービス名を1行に保ち、略称の前だけで改行する。 */
.rnw-footer-pc__link {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;
}

/* 単独リンク（Figma I318:20175;4478:14052） */
.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 {
  position: relative;
  display: inline-block;
  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;
}
/* 別窓アイコン（Figma I318:20175;4478:14057 / 旧アイコンフォント \e902）。
   SPフッター（12:1000）と違い色は common/text/gray。
   ▼どの項目に付くかはFigmaでは判然としない（アイコンのyが「会社情報」の行に
     掛かっているが、会社情報はサイト内リンクで別窓になる項目ではない）。
     SPフッターと同じく「助成金・補助金制度について」に付ける扱いにしている。 */
.rnw-footer-pc__links-link--external::after {
  content: "\e902";
  margin-left: 8px;
  font-family: var(--rnw-font-icon);
  font-size: 10px;    /* Figma実測 */
  letter-spacing: 0.9px;
  color: var(--rnw-caption);
  vertical-align: middle;
}

/* 「採用情報」の補足テキスト（2026-09-25 追加）。
   総合トップのフッター（top/poppins-top の .rnw-footer-pc__links-sub）と同じ値。 */
.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 I318:20175;4478:14059）
------------------------------------ */
.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 I318:20175;4478:14061） */
.rnw-footer-pc__cert {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;     /* Figma実測 */
  width: 340px;  /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-footer-pc__cert img {
  display: block;
  width: 165px;  /* Figma実測 */
  height: 62px;  /* 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 I318:20175;4478:14067）
   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〜1439px）でPC版を出すための縮め
   ---------------------------------------
   ヘッダーは1125pxでハンバーガーに替わるが、フッターは従来どおり
   768pxまでPC版のまま出す（出し分けは9節・767/768のまま）。
   1440px前提の固定値（ロゴ300px・サービス紹介600px・JQA 340px）と
   nowrap のテキストがそのままでは収まらないので、余白・文字を
   段階的に小さくして収めている。

   ▼縮めの帯が1439pxまである理由
     このフッターは中身の実寸で約1314px必要（ロゴ300 ＋ サービス紹介600 ＋
     単独リンク「助成金・補助金制度について」254 ＋ gap40×2 ＋ 左右padding40×2）。
     1440px時にちょうど収まる作りなので、1439px以下では必ず横に溢れる。

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

   ▼nowrap は最後の段（〜900px）まで外さない（7-5-3のコメント参照）。
     折り返させるとFigmaの見た目が変わるため、まず余白と文字サイズで詰める。
   ▲総合トップ（poppins-top）の 7-5-6 と同じ考え方。
------------------------------------ */

/* ---- 第1段（768〜1439px）：Figma固定値を一段落とす ---- */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
  /* 1126px前提の下限幅を解除する（横スクロールの直接原因） */
  .rnw-footer-pc { min-width: 0; }

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

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

  /* サイトマップ。600px固定をやめて中身なりに縮ませる */
  .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__group-title    { padding: 4px 8px; font-size: 14px; }
  .rnw-footer-pc__list           { padding-left: 12px; }
  .rnw-footer-pc__item           { padding: 12px 8px 0 0; }
  .rnw-footer-pc__link           { font-size: 13px; }
  .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__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; }
}

/* ---- 第2段（768〜1023px）：ロゴと文字をもう一段落とす ---- */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .rnw-footer-pc__container { padding: 32px 16px; }
  .rnw-footer-pc__inner     { gap: 16px; }

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

  .rnw-footer-pc__nav            { gap: 16px; }
  .rnw-footer-pc__services-title { font-size: 16px; }
  .rnw-footer-pc__services-cols  { gap: 16px; }
  .rnw-footer-pc__group-title    { font-size: 13px; }
  .rnw-footer-pc__link           { font-size: 12px; }
  .rnw-footer-pc__links-link     { font-size: 13px; }
  .rnw-footer-pc__links-sub      { font-size: 11px; }

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

/* ---- 第3段（768〜836px）：ここだけ nowrap を外す ---- */
/* 「居宅訪問型保育従事者向け研修」（14文字）が2カラムぶん並ぶため、
   文字を落としきってもこの幅では1行に入らない（実測：837pxまでは収まる）。
   横スクロールを出さないことを優先して、この帯だけ折り返しを許す。
   ▼これ以上は下げられない。さらに狭める必要が出たらデザイン側の判断
     （サイトマップをロゴの下段へ回す等）。 */
@media only screen and (min-width: 768px) and (max-width: 836px) {
  .rnw-footer-pc__link       { white-space: normal; }
  .rnw-footer-pc__links-link { white-space: normal; }
}


/* ------------------------------------
   7-5-5. ホバー
   旧 /professional/css/common.css の
     body:not(.tab_view) a:hover { opacity:.6; color:#912344 }
   がPC幅で全リンクに効くため、そのままだとフッターの文字が
   ホバー時だけ赤紫（#912344）に化ける。旧CSSと同じ `body:not(.tab_view)` に
   クラスを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__link: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); }

  /* 2026-09-25 どこがリンクかわかるよう、テキストリンクだけホバーで下線を出す（Kaori指示）。
     ロゴ・SNSアイコンは対象外。url 空の項目は <span> なので付かない。 */
  body:not(.tab_view) a.rnw-footer-pc__group-title:hover,
  body:not(.tab_view) .rnw-footer-pc__link:hover,
  body:not(.tab_view) .rnw-footer-pc__links-link:hover,
  body:not(.tab_view) .rnw-footer-pc__policy-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}


/* =====================================================================
   7-6. 旧CSSのホバーを打ち消す（2026-09-12）
   ---------------------------------------------------------------------
   旧CSSの汎用ホバーがPC幅（768px〜）で全ての <a> に効くため、
   リニューアル側のリンク・ボタンの文字色がホバー時だけ薄い水色に化ける。
     /professional/css/common.css 1993行
       body:not(.tab_view) a:hover { opacity:.6; color:#bc326c }
     /professional/css/professional.css 271行
       同じセレクタで color:#009BB4 に上書き

   旧CSSと同じ `body:not(.tab_view)` にクラスを1つ足して詳細度を上げ
   （旧 0,2,2 に対して 0,3,1）、色を元に戻す。透過は 0.6 だと文字が地色に
   沈むので、フッター（7-5-5）と同じ 0.7 に揃えた。

   ▼ホバーで色を変えないのがリニューアルの既定。色を変えたい箇所が出たら
     ここではなく各コンポーネント側に書く。
   ▼**新しく色付きのリンク／ボタンを足したら、このリストにも足すこと。**
     旧CSSは編集禁止なので、打ち消しはここでしかできない。
     modifier は基本クラスと詳細度が同じなので、必ず基本クラスより後に置く。
   ===================================================================== */
@media only screen and (min-width: 768px) {
  /* --- 透過は全体で 0.7 に揃える --- */
  body:not(.tab_view) .front-btn--outline:hover,
  body:not(.tab_view) .front-btn--red-fill:hover,
  body:not(.tab_view) .front-cta__btn--contact:hover,
  body:not(.tab_view) .front-cta__btn--service:hover,
  body:not(.tab_view) .rnw-btn--main:hover,
  body:not(.tab_view) .rnw-care-btn--outline:hover,
  body:not(.tab_view) .rnw-care-btn--red:hover,
  body:not(.tab_view) .rnw-care-cta__btn:hover,
  body:not(.tab_view) .rnw-care-cta__btn--main:hover,
  body:not(.tab_view) .rnw-care-menu__item:hover,
  body:not(.tab_view) .rnw-footer-pc__logo:hover,
  body:not(.tab_view) .rnw-global-btn--outline:hover,
  body:not(.tab_view) .rnw-global-cta__btn:hover,
  body:not(.tab_view) .rnw-global-menu__item:hover,
  body:not(.tab_view) .rnw-global-news__more:hover,
  body:not(.tab_view) .rnw-header__cta:hover,
  body:not(.tab_view) .rnw-header__logo:hover,
  body:not(.tab_view) .rnw-header__pc-logo:hover,
  body:not(.tab_view) .rnw-hvt-btn--main:hover,
  body:not(.tab_view) .rnw-hvt-btn--red:hover,
  body:not(.tab_view) .rnw-hvt-cta-fixed__btn:hover,
  body:not(.tab_view) .rnw-hvt-cta-fixed__btn--main:hover,
  body:not(.tab_view) .rnw-hvt-link:hover,
  body:not(.tab_view) .rnw-hvt-menu__item:hover,
  body:not(.tab_view) .rnw-hvt-red:hover,
  body:not(.tab_view) .rnw-menu__logo:hover,
  body:not(.tab_view) .rnw-nav__head:hover,
  body:not(.tab_view) .rnw-nav__link:hover,
  body:not(.tab_view) .rnw-nav__sublink:hover,
  body:not(.tab_view) .rnw-news__link:hover {
    opacity: 0.7;
  }

  /* --- 自前の色を持つもの：その色のまま（基本クラス）--- */
  body:not(.tab_view) .rnw-care-cta__btn:hover { color: var(--care-cta-txt); }
  body:not(.tab_view) .rnw-global-cta__btn:hover { color: var(--global-cta-txt); }
  body:not(.tab_view) .rnw-global-news__more:hover { color: var(--global-red); }
  body:not(.tab_view) .rnw-hvt-cta-fixed__btn:hover { color: var(--hvt-cta-txt); }
  body:not(.tab_view) .rnw-hvt-red:hover { color: var(--hvt-red); }
  body:not(.tab_view) .rnw-hvt-link:hover { color: var(--rnw-main); }
  body:not(.tab_view) .rnw-nav__head:hover,
  body:not(.tab_view) .rnw-nav__link:hover,
  body:not(.tab_view) .rnw-nav__sublink:hover { color: var(--rnw-text); }
  body:not(.tab_view) .rnw-header__cta:hover { color: var(--rnw-white); }

  /* --- 自前の色を持つもの：その色のまま（modifier。上より後）--- */
  body:not(.tab_view) .rnw-btn--main:hover { color: var(--rnw-cta-text); }
  body:not(.tab_view) .front-btn--outline:hover,
  body:not(.tab_view) .rnw-care-btn--outline:hover,
  body:not(.tab_view) .rnw-global-btn--outline:hover { color: var(--rnw-main); }
  body:not(.tab_view) .front-cta__btn--service:hover { color: var(--rnw-text); }
  body:not(.tab_view) .front-btn--red-fill:hover,
  body:not(.tab_view) .front-cta__btn--contact:hover,
  body:not(.tab_view) .rnw-care-btn--red:hover,
  body:not(.tab_view) .rnw-care-cta__btn--main:hover,
  body:not(.tab_view) .rnw-hvt-btn--main:hover,  /* 2026-09-25 追加研修(5科目)のボタン。リストから漏れていて文字が旧CSSの色に化けていた */
  body:not(.tab_view) .rnw-hvt-btn--red:hover,
  body:not(.tab_view) .rnw-hvt-cta-fixed__btn--main:hover { color: var(--rnw-white); }

  /* --- 自前の色を持たないもの：親から受け継いだ色のまま --- */
  body:not(.tab_view) .rnw-care-menu__item:hover,
  body:not(.tab_view) .rnw-footer-pc__logo:hover,
  body:not(.tab_view) .rnw-global-menu__item:hover,
  body:not(.tab_view) .rnw-header__logo:hover,
  body:not(.tab_view) .rnw-header__pc-logo:hover,
  body:not(.tab_view) .rnw-hvt-menu__item:hover,
  body:not(.tab_view) .rnw-menu__logo:hover,
  body:not(.tab_view) .rnw-news__link:hover { color: inherit; }

  /* 遷移先未確定の項目（--pending）は <span> で出るのでもともと旧CSSの
     対象外。上のクラス指定に巻き込まれて透けないよう、最後に打ち消す。 */
  body:not(.tab_view) [class*="--pending"]:hover { opacity: 1; }
}


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

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

   .sp_lang_area（旧CSS 880行付近）は旧JSが挿入する言語切替（日本語／ENGLISH）。
   通常は #sp_menu の中に入るので上記だけで消えるが、professional の
   /professional/js/function.js は未取得で挿入先を実物で確認できていないため、
   単独でも消えるようセレクタに含めている。

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


/* =====================================================================
   8-2. ページ内ナビバー（Figma 335:13130 type=pro 下段 "_menu"）
   ---------------------------------------------------------------------
   ページごとの項目もレンダラも renewal/pagenav.php に一元化している。
   ヘッダーとは別の固定要素として扱う（ヘッダー内に入れないこと）。
     初期表示   … ヘッダー直下（上から --rnw-header-h-pc）
     スクロール後 … 画面下端に追従（.is-docked / renewal/js/header.js）
     フッター到達 … 追従を解除してフッターのCTAとの被りを避ける
   背景は pro/bg #D9F0F4 ＝ --rnw-bg2 と同値のためそのまま使う。
   SPでは出さない（professional のドロワーにはカードが無い）。
   ===================================================================== */

/* ページ内ナビ帯の高さ。header.php が body に data-pagenav を出す。
     tall … ラベル2行（65px）/ short … 1行（56px）/ none … 帯なし
   帯は position:fixed で本文を押し下げないため、この値は #container に
   足す余白の計算にだけ使う（→「9. レスポンシブ」）。 */
body[data-pagenav="tall"]  { --rnw-pagenav-h: 65px; }
body[data-pagenav="short"] { --rnw-pagenav-h: 56px; }
body[data-pagenav="none"]  { --rnw-pagenav-h: 0px; }

.rnw-pagenav--bar {
  display: none;  /* 〜1125px は非表示。1126px〜で解除（9節） */
  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);
  align-items: center;
  justify-content: center;
  justify-content: safe center;  /* 収まる時は中央 / 溢れる時は左寄せ */
  flex-wrap: nowrap;             /* 帯は常に1行 */
  gap: 40px;                     /* Figma実測 */
  padding: 10px 20px;            /* Figma実測 py-10。高さは中身と合わせて 56px / 65px */
  overflow-x: auto;
  background-color: var(--rnw-bg2);
  font-family: var(--rnw-font-jp);
  box-sizing: border-box;
}

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

/* 遷移先未確定の項目。<a> ではなく <span> で出るためリンクにならない。
   href="#" を出さないのは renewal/nav.php と同じ理由（unkerScroll 対策）。 */
.rnw-pagenav__link--pending {
  color: var(--rnw-caption);
  cursor: default;
}

.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;
  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;
  gap: 20px;         /* Figma実測 */
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-pagenav--bar .rnw-pagenav__item { 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-main); }
.rnw-pagenav--bar .rnw-pagenav__link:focus-visible {
  outline: 2px solid var(--rnw-main);
  outline-offset: 2px;
}

/* 1440px未満では項目が1行に収まらないことがあるため間隔を詰める
   （帯が出るのはPCナビと同じ1126px〜。9節） */
@media only screen and (min-width: 1126px) and (max-width: 1439px) {
  .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; }
}


/* ---------------------------------------------------------------------
   8-3. ページ内ナビ：SPドロワー内のカード（Figma 129:25535）
   ---------------------------------------------------------------------
   帯（.rnw-pagenav--bar）と同じ renewal/pagenav.php から出力される。
   項目セットが帯と違うため、データ側で bar / card を分けている。
   ドロワーの先頭、グローバルナビ（.rnw-nav--drawer）の上に置く。
   --------------------------------------------------------------------- */

/* ヘッダー下端からカード上端まで30px（Figma 214:106541 → 214:106542 の y=30）。
   これが無いとカードがヘッダーに貼り付いて、ドロワーの上部が詰まって見える。
   カードの下は .rnw-menu__inner の gap:20px と
   .rnw-nav--drawer .rnw-nav__list の padding-top:20px で40px（Figma実測）。 */
.rnw-menu__card-wrap { padding-top: 30px; }

.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;
  justify-content: center;
  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-main);
  width: 143px;  /* Figma実測 */
  max-width: calc(50% - 6px);
}
/* 1行目のみ上罫線あり */
.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;
  /* 項目枠143px / 内側のテキスト枠137px。左右は (143-137)/2 = 3px、上下はデザイン値16px */
  padding: 16px 3px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
  text-align: center;
  white-space: nowrap;
  word-break: keep-all;
  text-decoration: none;
  box-sizing: border-box;
}

/* カード下のボタン（Figma 129:25567「コラム」）。
   白地＋pro/main の枠線と文字。ドロワーCTA（.rnw-btn--main）とは別。 */
.rnw-btn--sub {
  background-color: #FFFFFF;
  border: 1px solid var(--rnw-main);
  color: var(--rnw-main);
}
.rnw-btn--sub .rnw-btn__icon { color: var(--rnw-main); }


/* =====================================================================
   9. レスポンシブ
   ---------------------------------------------------------------------
   本文とフッターのデザイン切替は旧CSSと同じ 767/768（この節を入れる前のまま）。
   ヘッダーだけ 1125/1126 で分岐する。
   あわせて、旧CSSがページ全体に掛けている下限幅 min-width:1126px は
   〜1125px で打ち消す（横スクロールを出さないため。下のブロック）。

   ▼ヘッダーだけ境目が違う理由
     PCナビは下の「詰め」を全部かけても約1133px必要で、768pxでは入らない
     （CTA「お問い合わせ」が右に切れる）。
       ロゴ180 ＋ グループgap16×2 ＋ ナビ621 ＋ CTA252 ＋ 左右padding24×2
     旧CSSの #container / header の下限が1126pxなので、そこを境目にする。
     1126px未満はドロワー（.rnw-header__sp）。
   ===================================================================== */

/* ---------- ヘッダー：〜1125px はドロワー ---------- */
@media only screen and (max-width: 1125px) {
  /* 旧CSS `#container { min-width:1126px }` `header { min-width:1126px }` の
     打ち消し。これを外さないと、画面幅が1126px未満のとき中身が収まっていても
     横スクロールが出る（＝エデュケアと同じ打ち消し）。 */
  #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ナビと同じ幅から */
  .rnw-pagenav--bar { display: none; }

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

/* ---------- ヘッダー：1126px〜 はPCナビ ---------- */
@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 に余白を足す。既存のヘッダー分の
     オフセットには触らず、足すのは「帯を追加したことによる増分」だけ。 */
  body:not([data-pagenav="none"]) #container {
    padding-top: var(--rnw-pagenav-h);
  }
}

/* ---------- PCヘッダーの詰め（1126〜1439px） ----------
   確定デザイン（335:9356）は1440px基準で、そのままだと1368px必要。
   PCナビの下限は1126pxなので、そこに収まるよう余白・間隔・ロゴ幅だけを
   縮める（項目は落とさない）。
     左右padding 40 → 24  （-32）
     ナビ gap    32 → 16  （-64）
     グループ gap 24 → 16 （-16）
     CTA間 gap   24 → 12  （-12）
     CTA padding 28 → 16  （-48）
     ロゴ       300 → 220 （-80）
   1440px以上には適用しないので、フル幅の見た目はFigmaどおり。 */
@media only screen and (min-width: 1126px) and (max-width: 1439px) {
  .rnw-header__pc { padding-left: 24px; padding-right: 24px; }

  .rnw-header__pc-logo  { width: 220px; }
  .rnw-header__pc-group { gap: 16px; }
  .rnw-header__nav      { gap: 8px; }
  .rnw-header__nav-link { gap: 6px; padding: 0 4px; font-size: 14px; }
  .rnw-header__ctas     { gap: 12px; }

  .rnw-header__cta { padding-left: 16px; padding-right: 16px; }

  /* 展開パネル（4-3）も1440px前提の余白では収まらないため詰める */
  .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; }
}

/* ---------- PCヘッダーの詰め（1126〜1199px）----------
   上の詰めだけでは下限の1126pxに入りきらない。
   ロゴと間隔をもう一段縮める（実測 約1133px → 1126px幅で右余白が
   24pxから17pxに詰まるところまで）。
     ロゴ       220 → 180 （-40）
     ナビ gap    16 → 12  （-16）
     CTA padding 16 → 12  （-16）
   ▼これ以上は下げられない。必要ならデザイン側の判断
     （項目を減らす／CTAをアイコン化する等）。 */
@media only screen and (min-width: 1126px) and (max-width: 1199px) {
  .rnw-header__pc-logo { width: 180px; }
  .rnw-header__nav     { gap: 8px; }
  .rnw-header__cta     { padding-left: 12px; padding-right: 12px; }

  /* 展開パネルをもう一段詰める */
  .rnw-header__nav-tabs        { width: 260px; }
  .rnw-header__nav-sublist     { column-gap: 32px; row-gap: 24px; }
}

/* ---------- ページ内ナビ帯：1126〜1439px は横スクロールさせない ----------
   帯は 1126px から出るが、Figma（1440px基準）の余白と文字のままだと
   項目の多いページで収まらず、overflow-x のスクロールバーが出る。
   いちばん長い居宅訪問型保育基礎研修（見出し＋8項目）で実測 約1383px。
     見出し 189 ＋ 見出しと列の gap 40 ＋ 項目8つ 974 ＋ 項目間 gap 20×7 ＋ 左右 padding 20×2
   1126px に収めるため、余白と文字を一段ずつ落として約259px詰める。
     帯の左右 padding 20 → 12  （-16）
     見出しと列の gap 40 → 24  （-16）
     項目間 gap        20 → 12 （-56）
     項目の左右 padding 20 → 12（-128）
     項目の文字        14 → 13 （-43）
   1440px以上には掛けないので、フル幅の見た目はFigmaどおり。
   ▼これ以上は詰められない。項目が増えるページが出たらデザイン側の判断
     （項目を減らす／2段にする等）。 */
@media only screen and (min-width: 1126px) and (max-width: 1439px) {
  .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: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
}


/* ---------- フッター：旧CSSと同じ 767/768 で分岐 ---------- */
@media only screen and (max-width: 767px) {
  /* フッター：SP幅はSPデザイン */
  .rnw-footer    { display: flex; }
  .rnw-footer-pc { display: none; }
}

@media only screen and (min-width: 768px) {
  /* フッター：PC幅はPCデザイン（Figma 318:20175 / 7-5節） */
  .rnw-footer    { display: none; }
  .rnw-footer-pc { display: flex; }
}

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

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

/* 固定ページの自動パンくず。ニュース・ご利用者様の声は既存表示。 */
#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 .rnw-breadcrumb + :is(.rnw-care, .rnw-global, .rnw-hvt) {
  padding-top: 0;
}

#container .rnw-breadcrumb + #rnw-cpro { padding-top: 32px; }