@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル 共通CSS
   ---------------------------------------------------------------------
   - 旧 /educare/css/common.css と同居するため、全クラスに `rnw-` を付与
   - 旧CSSは接頭辞なし（.logo / .menu_btn / .glonav / .mddNav 等）なので
     名前空間は分離済み（旧CSS・旧PHP・旧JSに rnw- は1件も無いことを確認済み）
   - 旧CSSが要素セレクタ `header {}` `footer {}` を持つため、
     .rnw-header / .rnw-footer 側で該当プロパティを明示的に打ち消している
   - 色は全てCSS変数経由。値は「Figma登録バリアブルを正」として採用している
     （カラー定義表と食い違う箇所はバリアブル優先。詳細は下記 :root のコメント）

   ■ 参照Figma（file: YPBBXtzkb5y8Z0LPmrQFsD）
     SPドロワー   53:5956（SPヘッダー 53:5958 を内包）
     SPフッター   12:511 "device=SP, type=educare"（フッターコンポーネント全体）
                    ├ 12:512 施設検索
                    ├ 12:529 お問い合わせ
                    └ 12:555 Footer - Pagefooter（本体 12:556 / 最下部 12:635）
     PCヘッダー   52:3160 ※仮デザイン
     PCフッター   318:19249 "footer（変わります）"（SPフッターと同じ4ブロック構成）
     カラー定義表 53:5836

   ■ 2026-09-24 ハワイ日本語ページのヘッダー・フッターを総合トップのもの
     （renewal/site-header.php / site-footer.php ＋ renewal/css/common.css）に
     差し替えた。同じクラス名（.rnw-header / .rnw-menu / .rnw-footer / .rnw-footer-pc /
     .rnw-btn / .rnw-icon--* など）の指定がここに残っているとトップの見た目を崩すため、
     ハワイの3ページ（日本語・英語・お問い合わせ）で使っていないものだけを外してある。
     ヘッダー・フッターの見た目を直すときは総合トップの renewal/css/common.css を直す。
   ===================================================================== */

/* Krona One はフッター施設検索カードの「SEARCH」（Figma 12:517）専用。 */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&family=Krona+One&display=swap');

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

:root {
  /* -------------------------------------------------------------
     カラー：全プロパティ共通
     ※ familycareで確定済みの :root と同一値。エデュケアでは動かさない。
     ------------------------------------------------------------- */
  --rnw-text:    #444444;  /* 本文       common/text/bk */
  --rnw-caption: #626262;  /* キャプション・点線罫線 common/text/gray */
  --rnw-link:    #912344;  /* リンク     common/accent/red ※本文用。ヘッダー／フッターには該当箇所なし */
  --rnw-heading: #333333;  /* 見出し     Fill/Default */
  --rnw-bg1:     #FAF7F2;  /* 背景1      common/bg-tex（PCフッターのサイトマップ地色） */
  --rnw-border:  #E2E2E2;  /* 区切り線   common/border（PCフッター サイトマップ上端の線） */

  /* -------------------------------------------------------------
     タイポグラフィ
     ------------------------------------------------------------- */
  --rnw-font-jp:   'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  --rnw-font-noto: 'Noto Sans JP', sans-serif;   /* フッター最下部リンク（Figma実測） */
  --rnw-font-serif: 'Times New Roman', 'Noto Serif JP', serif;  /* コピーライト（Figma実測） */
  --rnw-font-icon: 'poppins';  /* 旧common.css の @font-face を流用（\e901=矢印 / \e902=別窓） */

  /* エデュケアの見出しフォント（Figma変数 SP/title/educare/*）。
     ▼要確認：MOBO はフォントワークスの商用フォントで、Google Fonts等の
       Webフォント配信が無い。ライセンス・配信方法が未確定のため、
       現状は指定だけ入れて実表示は --rnw-font-jp にフォールバックさせている。
       Webフォント化する場合はここに @font-face を追加すること。 */
  --rnw-font-educare-title: 'MOBO', 'MOBO-Bold', 'MOBO-SemiBold', var(--rnw-font-jp);

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

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

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

   ■ 値の出所：Figma登録バリアブル（カラー定義表 53:5836 と食い違う場合は
     バリアブルを正とする方針。食い違いの内訳）
       ・educare/main  #00429A … 定義表「アクセント」／CTA背景。一致。
       ・educare/main2 #507CB8 … 定義表「メインカラー」。用途表に行が無い。
                                  Figma上はSPドロワーのCTA背景で使用されている。
       ・educare/bg    #E7EFFB … 定義表「サブベースカラー」。SPドロワーの地色。
       ・定義表の「ベースカラー #FAF7F2」はバリアブル未登録。
         ヘッダー／フッターでの使用箇所も無いため、ここでは定義しない
         （共通 :root の --rnw-bg1 に既存値がある）。
       ・定義表の「アクセント #E8791E（オレンジ）」は値が古い。
         登録バリアブルは educare/accent = #EC6E43。バリアブル優先で後者を採用。
         （フッター施設検索カードの虫眼鏡イラスト Figma 12:524 で使用）
       ・定義表の「リンク #912344」はエデュケアのバリアブルに存在しない。
         共通 :root の --rnw-link（familycare確定値）をそのまま使う。
       ・定義表の「本文カラー」スウォッチは #333333 だが、用途表とバリアブル
         common/text/bk は #444444。バリアブル優先で #444444（--rnw-text）。
   ------------------------------------------------------------- */
[data-property="educare"] {
  --rnw-main:      #00429A;  /* メイン      educare/main（フッターCTA・グループ枠線・別窓アイコン） */
  --rnw-main2:     #507CB8;  /* メイン2     educare/main2（ドロワーCTA・カード内点線罫線） */
  --rnw-bg2:       #E7EFFB;  /* 背景2       educare/bg（SPドロワー展開時の地色） */

  --rnw-cta-bg:    #00429A;  /* CTA背景     Figma 12:561 */
  --rnw-cta-text:  #FFFFFF;  /* CTA文字     common/white */
  --rnw-cta2-bg:   #507CB8;  /* CTA背景2    Figma 53:6011（ドロワーのみ色が異なる） */
  --rnw-cta2-text: #FFFFFF;

  --rnw-accent:    #EC6E43;  /* アクセント  educare/accent（オレンジ）
                                施設検索カードの虫眼鏡イラスト。色はSVGに直接入っているため
                                CSSからは未使用だが、値の出所を残すため定義しておく。 */

  /* お問い合わせセクションの背景グラデーション（Figma 12:529 / educare/gra2）。
     終端色 #6F9CD9 は --rnw-main2(#507CB8) とは別値。停止位置52.404%は
     familycareのお問い合わせ背景と同一。 */
  --rnw-contact-gra: linear-gradient(to bottom, #FFFFFF 0%, #6F9CD9 52.404%);

  /* PCのお問い合わせ背景（Figma I318:19249;4476:52599）。
     停止位置・終端色はSPと同じで、開始色だけ #FFFFFF ではなく #F3F5F6。 */
  --rnw-contact-gra-pc: linear-gradient(to bottom, #F3F5F6 0%, #6F9CD9 52.404%);

  /* ★要確認：お問い合わせ見出しの「Contact」（Figma I12:533;12:79）と
     カード内の点線罫線（Figma 12:541 / 12:548）に割り当てられている色。
     Figma上のバインド先が educare/* ではなく vipcare/accent (#327666＝緑) になっており、
     エデュケアの配色（青／オレンジ）と明らかに合わない。
     VIPケアのフッターを複製した際のトークン差し替え漏れと思われる。
     現状はデザインの見た目どおり #327666 で実装している。
     修正時はこの1行を var(--rnw-accent) か var(--rnw-main) に差し替えるだけでよい。 */
  --rnw-contact-accent: #327666;

  /* 施設検索カードの「SEARCH」（Figma 12:517）。バリアブル未登録の実測値。 */
  --rnw-search-en: #FDFF9C;
}


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

/* 日本語の禁則を厳格にする（小書き文字・長音符などを行頭に置かない）。
   このCSSはLP以外の全ページで読まれるので、エデュケア全体に効く。
   旧CSSの body には指定が無いため、ここで足している。 */
body {
  line-break: strict;
}

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



/* ▼アセットは「下向き」シェブロンで書き出されているが、Figmaのボタンでは
     Down コンポーネントに scaleY(-1)+rotate(90deg) が掛かっており見た目は
     「右向き」。CSS側で -90度回転させて向きを合わせる。 */




/* SPドロワーのSNS（Figma 694:83307 bi:youtube）。エデュケアは全ページ
   YouTube + Instagram で統一する（フッターも同じ組み合わせ）。 */
.rnw-icon--youtube   { -webkit-mask-image: url('../img/icon_youtube.svg');      mask-image: url('../img/icon_youtube.svg'); }

/* --- 点線罫線（Figma: stroke-dasharray="2 2" / stroke #626262）---
   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
  );
}

/* --- 画面読み上げ用の非表示 --- */



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



/* CTA（塗り）＝ フッター（Figma 12:561 / educare/main #00429A） */



/* CTA2（塗り）＝ SPドロワー（Figma 53:6011 / educare/main2 #507CB8）
   フッターのCTAと同じ文言・同じ形だが、Figma上で背景色だけが異なる。
   意図的な使い分けか不揃いかは要確認だが、デザイン値どおり実装している。 */
.rnw-btn--main2 {
  background-color: var(--rnw-cta2-bg);
  border: 0.745px solid #FFFFFF;  /* Figma実測 */
  color: var(--rnw-cta2-text);
}


/* CTA（塗り・赤）＝ フッターのお問い合わせ（Figma 694:81020）と
   SPドロワーのお問い合わせ（Figma 694:81058 ほか）。common/accent/red #912344。
   ★要確認：ポピンズプラスのドロワーだけFigmaが educare/main2（青塗り）だが、
     他4ページの「お問い合わせ」は全部この赤なので直し忘れとみて赤に揃えている。 */
.rnw-btn--accent {
  background-color: var(--rnw-link);  /* common/accent/red #912344 */
  border: 0.745px solid #FFFFFF;      /* Figma実測。--main と同じ */
  color: #FFFFFF;
}


/* CTA（白地・枠線）＝ SPドロワーでボタンが2つ並ぶときの副ボタン
   （Figma 694:81057 TOP / 694:86921 法人向け）。
   枠と文字は educare/main #00429A、枠線2px。 */
.rnw-btn--outline {
  background-color: #FFFFFF;
  border: 2px solid var(--rnw-main);  /* Figma実測 */
  color: var(--rnw-main);
}


/* 遷移先が未確定でリンクにできないもの。<a> ではなく <span> で出すため、
   見た目はそのままにカーソルだけ戻す（renewal/pagenav.php と同じ規約）。 */
.rnw-btn--pending { cursor: default; }



/* 縦に伸びるCTA（フッター 12:561 は py-24） */
.rnw-btn--tall { padding-top: 24px; padding-bottom: 24px; }


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





/* ------------------------------------
   4-1. SPヘッダー（Figma 53:5957 / 53:5958）
   ※ 単独のSPヘッダー（閉じた状態）フレームは提供されていないため、
     SPドロワー内のヘッダー部分を実測している。
------------------------------------ */







/* ハンバーガー / クローズ */



/* 開いている間はクローズアイコンに差し替え */




/* ------------------------------------
   4-2. PCヘッダー（Figma 335:9394 / 確定デザイン）
   Figmaのヘッダー高は88pxだが、旧CSSが本文オフセットを90pxで持っているため
   min-height は --rnw-header-h-pc（90px）のまま。内側の値はFigma通り。
------------------------------------ */







/* 展開パネルへマウスを移す途中で :hover が切れないよう、
   ナビ項目の当たり判定をヘッダーの高さいっぱいに広げる。
   ヘッダー下端＝パネル上端なので、項目とパネルの間に隙間ができない。 */




/* 展開パネルをヘッダー幅いっぱいに置くため、基準は .rnw-header 側。
   項目を position:relative にしないこと。 */




/* 遷移先未確定（<span> で出る） */


/* 開いている項目は薄い地色が付く（Figma 335:10378 / 335:10563）。
   開閉は renewal/js/header.js が .is-open を付け外しする。
   CSSの :hover ではなくJSで持たせているのは、項目とパネルの間を
   マウスが横切ると :hover が切れてパネルが閉じてしまうため。 */


/* 採用情報（2段組み） */



/* 開閉の矢印 */




/* ------------------------------------
   4-3. グローバルナビの展開パネル
        （Figma 335:10407 個人向け / 335:10563 法人向け）
   ---------------------------------------
   プルダウン（縦のリスト）ではなく、ヘッダーの下に横1列で開く。
   開閉は renewal/js/header.js が .is-open で行う。
------------------------------------ */








/* 項目頭の丸 */






/* PCヘッダーのCTA（Figma 335:9419 施設を探す / 335:9424 お問い合わせ）。
   施設を探すは枠線、お問い合わせは塗り。 */
.rnw-header__ctas {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 24px;  /* Figma実測 335:9396 の gap をそのまま使う */
  margin: 0;
  padding: 0;
  list-style: none;
}


/* 施設を探す：白地＋2px枠（Figma 335:9419） */
.rnw-header__cta--outline {
  border: 2px solid #00429A;  /* Figma educare/main */
  color: #00429A;
}
/* お問い合わせ：塗り（Figma 335:9424） */
.rnw-header__cta--accent {
  background-color: #912344;  /* Figma common/accent/red */
  color: #FFFFFF;             /* Figma common/white */
}
/* 遷移先未確定（<span> 出力）。見た目はデザイン通りのまま */
.rnw-header__cta--pending { cursor: default; }


/* =====================================================================
   5. SPドロワー（Figma 53:5956）
   ===================================================================== */





/* body スクロールロック */






/* ------------------------------------
   5-1. 現在地カード（Figma 53:5965 / ページ別の例 129:28884・129:29624）
   ---------------------------------------
   中身は renewal/pagenav.php が出力する（帯と同じデータソース）。
   見出しがページごとに変わるため、ここに直書きしない。
   .rnw-menu__card-wrap は置き場所、.rnw-pagenav--card が本体。
------------------------------------ */
.rnw-menu__card-wrap { padding-top: 30px; }  /* Figma実測 53:5964 */

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

.rnw-pagenav--card .rnw-pagenav__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--rnw-text);  /* Figma実測 #444 */
  text-align: center;
}
.rnw-pagenav--card .rnw-pagenav__label-main {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;  /* Figma実測 */
}
.rnw-pagenav--card .rnw-pagenav__label-sub {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;  /* Figma実測 */
}

/* 2列のリンクグリッド（Figma 53:5971） */
.rnw-pagenav--card .rnw-pagenav__list {
  display: flex;
  flex-wrap: wrap;
  /* 項目数が奇数のとき、最終行の1件は左寄せ（Figma 368:29886 の「お問い合わせ」）。
     リスト自体は幅298px固定でカード内に中央配置されるので、
     偶数件のページの見た目は center のときと変わらない。 */
  justify-content: flex-start;
  gap: 0 12px;   /* Figma実測 行gap0 / 列gap12 */
  width: 298px;  /* Figma実測 = 143px * 2 + 12px */
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnw-pagenav--card .rnw-pagenav__item {
  --rnw-dash-c: var(--rnw-main2);  /* Figma実測 #507CB8 */
  width: 143px;  /* Figma実測 */
  max-width: calc(50% - 6px);
}
/* 罫線は各項目の上下に入る（Figma実測 368:29886 ポピンズ ハワイ）。
   行間はgap0で隣接するため、下の罫線と次の行の上の罫線は重なって1本に見える。
   項目数がページによって変わる（3件〜6件）ので、nth-child で行を数えず
   全項目に同じ指定を当てる。
   レンダラが付ける .rnw-dash-b（下罫線のみ）はこの指定で打ち消される。
   ※旧 53:5971（ナーサリーの例）は最終行の下に罫線が無いが、
     368系のほうが新しいためそちらに合わせている。 */
.rnw-pagenav--card .rnw-pagenav__item {
  background-repeat: no-repeat, no-repeat;
  background-position: left top, left bottom;
  background-size: 100% 1px, 100% 1px;
  background-image:
    repeating-linear-gradient(to right, var(--rnw-dash-c) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to right, var(--rnw-dash-c) 0 2px, transparent 2px 4px);
}
.rnw-pagenav--card .rnw-pagenav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma実測: 項目枠143px / 内側のテキスト枠137px（53:5973）。
     左右16pxだと文字領域が111pxとなり「保護者アンケート」(8文字≒113px)が
     2行に割れるため、左右は (143-137)/2 = 3px とする。上下はデザイン値の16px。 */
  padding: 16px 3px;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;   /* Figma実測 */
  color: var(--rnw-caption);  /* Figma実測 #626262 */
  text-align: center;
  /* ラベルはページによって長さが違う（「プログラムメニュー表」など）。
     Figmaの129系カードは項目がナニー用のプレースホルダのままで、
     長いラベルの設計が無いため、はみ出さないよう折り返しを許可する。
     word-break: keep-all で文節の途中では折らない。
     行の高さは flex の stretch で揃うので、点線罫線もずれない。 */
  width: 100%;
  height: 100%;
  word-break: keep-all;
  /* keep-all だけだと「プログラムメニュー表」のように区切りの無い語が
     枠からはみ出す。はみ出す時だけ途中で折る。 */
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
/* レンダラが付ける .rnw-dash-b の下罫線を、3行目（5項目め以降）で打ち消す。
   罫線の入り方は上の nth-child 指定がFigma実測。 */
.rnw-pagenav--card .rnw-pagenav__item:nth-child(n + 5) { background-image: none; }

/* 遷移先未確定（<span> 出力） */
.rnw-pagenav--card .rnw-pagenav__link--pending { color: var(--rnw-caption); cursor: default; }

/* ------------------------------------
   5-2. アコーディオン付きリスト（Figma 53:5989）
------------------------------------ */
.rnw-menu__list {
  padding-top: 20px;  /* Figma実測 */
  margin: 0;
  list-style: none;
}
/* Figma 53:5990 は gap:24px の縦並び。項目と点線罫線が交互に並ぶ構造のため、
   罫線を項目の下線として扱い、上下 24px の余白で再現している。 */
.rnw-menu__list-item { padding-bottom: 24px; }
.rnw-menu__list-item + .rnw-menu__list-item { padding-top: 24px; }

.rnw-menu__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;  /* Figma実測 53:6004 */
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;  /* Figma実測 */
  color: var(--rnw-text);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* 「採用情報」の補足テキスト（Figma 53:6009 は Zen Kaku Gothic New Medium） */
.rnw-menu__list-note {
  /* 左の余白は .rnw-menu__list-head の gap:4px（Figma実測）が担当する */
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: #798083;  /* Figma実測 53:6009（トークン未適用のドロワー専用色） */
}
/* 採用情報の行はラベルとノートを左詰めで並べる */
.rnw-menu__list-head--inline { justify-content: flex-start; }

.rnw-menu__list-caret {
  width: 10.607px;   /* Figma実測 53:5993 */
  height: 14.607px;
  transform: rotate(180deg);
  transition: transform 0.2s ease-out;
}
.rnw-menu__list-head[aria-expanded="true"] .rnw-menu__list-caret { transform: rotate(0deg); }

/* アコーディオン中身 */
.rnw-menu__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease-out;
}
.rnw-menu__list-head[aria-expanded="true"] + .rnw-menu__sublist { max-height: 100vh; }

/* 項目（Figma 1301:43151 / 1301:43152）。左 16px・先頭に上 16px・項目間 24px。
   .rnw-menu__sublist は畳むとき max-height:0 になるが padding はその高さに
   含まれないため、余白はコンテナ側ではなく項目側に持たせている。 */
.rnw-menu__sublist-item { padding-left: 16px; }
.rnw-menu__sublist-item:first-child { padding-top: 16px; }
.rnw-menu__sublist-item + .rnw-menu__sublist-item { padding-top: 24px; }

/* 中身の組みはPCヘッダーの .rnw-header__nav-sublink と同じ（Figma 1301:43153）。
   PC側は横1列のため nowrap だが、ドロワーは幅が狭いので折り返させる。 */
.rnw-menu__sublist-link {
  display: flex;
  align-items: center;
  gap: 16px;  /* Figma実測 */
  color: var(--rnw-text);
  text-decoration: none;
}
/* 遷移先未確定（<span> 出力） */
.rnw-menu__sublist-link--pending { cursor: default; }

/* 項目頭の丸 */
.rnw-menu__sublist-dot {
  flex-shrink: 0;
  width: 16px;   /* Figma実測 */
  height: 16px;
  border-radius: 50%;
  background-color: #00429A;  /* Figma educare/main。PC側と同じ理由で変数を使わない */
}

.rnw-menu__sublist-text {
  display: flex;
  flex-direction: column;
  letter-spacing: 1.2px;
}
.rnw-menu__sublist-title {
  font-size: 16px;   /* Figma PC/text/dafalut/bold */
  font-weight: 700;
  line-height: 1.8;
}
.rnw-menu__sublist-note {
  font-size: 12px;   /* Figma common/text/caption */
  font-weight: 500;
  line-height: 1.3;
  /* サブも本文色。PCヘッダーの subnote と同じ */
}

.rnw-menu__sublist-link--pending .rnw-menu__sublist-dot { background-color: var(--rnw-caption); }
.rnw-menu__sublist-link--pending .rnw-menu__sublist-text { color: var(--rnw-caption); }

/* ------------------------------------
   5-3. SNS（Figma 53:6012）
------------------------------------ */


/* 遷移先未確定で <a> にできないもの。<a> と同じ箱にして見た目を揃える。 */
.rnw-menu__sns-link--pending {
  display: block;
  cursor: default;
}

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

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

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


/* =====================================================================
   6. フッター（Figma 12:555）
   ===================================================================== */



/* リストの既定余白リセット。
   :where() で詳細度を 0 にしているのは、後続の
   .rnw-footer__nav-sublist（padding-left）や .rnw-footer__cert（margin 0 -8px）を
   打ち消さないため。`.rnw-footer ul {}`（詳細度 0-1-1）だと
   クラス単体のルール（0-1-0）に勝ってしまい、インデントやはみ出しが消える。 */


/* ------------------------------------
   6-1. 施設検索（Figma 12:512）
   フッターコンポーネント 12:511 の先頭ブロック。
------------------------------------ */
.rnw-footer__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;                 /* Figma実測 */
  padding: 56px 24px 24px;   /* Figma実測 pt-56 / px-24 / pb-24 */
  background-color: #FFFFFF;
  box-sizing: border-box;
}

.rnw-footer__search-card {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 24px;  /* Figma実測 */
  width: 100%;
  padding: 24px;
  border-radius: 20px;  /* Figma実測 */
  background-color: var(--rnw-main2);  /* Figma実測 educare/main2 #507CB8 */
  box-sizing: border-box;
}

/* 虫眼鏡イラスト（Figma 12:524）。カード上辺からはみ出して重なる。
   Figma実測の left:116.29px はカード幅327.317pxのちょうど中央
   （116.29 + 94.732/2 = 163.66 = 327.317/2）なので、
   幅に追従するよう 50% + translateX(-50%) で置いている。 */
.rnw-footer__search-illust {
  display: flex;
  position: absolute;
  top: -39.67px;  /* Figma実測 */
  left: 50%;
  align-items: center;
  justify-content: center;
  width: 94.732px;   /* Figma実測 */
  height: 96.672px;  /* Figma実測 */
  transform: translateX(-50%);
  pointer-events: none;
}
.rnw-footer__search-illust img {
  display: block;
  width: 55.557px;  /* Figma実測 */
  height: 80px;
  transform: rotate(41.78deg);  /* Figma実測 */
}

.rnw-footer__search-body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10px;  /* Figma実測 */
  min-width: 0;
  padding-top: 30px;  /* Figma実測（イラストの逃げ） */
}
.rnw-footer__search-head {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Figma実測 */
}
.rnw-footer__search-en {
  font-family: 'Krona One', sans-serif;  /* Figma実測 */
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;  /* Figma実測 */
  color: var(--rnw-search-en);
}
.rnw-footer__search-ja {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: #FFFFFF;
}
.rnw-footer__search-lead {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: #FFFFFF;
}

/* 白丸＋紺矢印の2色アイコン。単色maskにできないため img で配置する。
   アセットは下向きシェブロンなので -90度回して右向きにする（円は回転しても同じ）。 */
.rnw-footer__search-arrow {
  display: block;
  flex-shrink: 0;
  width: 50px;   /* Figma実測 12:520 */
  height: 50px;
  transform: rotate(-90deg);
}

.rnw-footer__search-note {
  width: 100%;
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);  /* Figma実測 #626262 */
}

/* ------------------------------------
   6-2. お問い合わせ（Figma 12:529）
------------------------------------ */
.rnw-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;         /* Figma実測 */
  padding: 56px 16px;  /* Figma実測 */
  background-image: var(--rnw-contact-gra);
  box-sizing: border-box;
}

.rnw-footer__contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;  /* Figma実測 */
  width: 100%;
  height: 126px;  /* Figma実測 12:532 */
  background-color: rgba(255, 255, 255, 0.9);  /* Figma実測 */
  text-align: center;
  box-sizing: border-box;
}
.rnw-footer__contact-en {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-contact-accent);  /* ★要確認：Figmaのバインドが vipcare/accent */
}
.rnw-footer__contact-ja {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

.rnw-footer__contact-card {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* Figma実測 */
  /* ★見出し（.rnw-footer__contact-head）は width:100% なので、カードだけ
     343px固定にすると375pxより広い端末で左右の幅が揃わない。100%に合わせる。
     375px幅では従来どおり343px（セクションの左右padding 16px を引いた値）になる。 */
  width: 100%;
  padding: 24px 16px;  /* Figma実測 */
  border-radius: 8px;
  background-color: #FFFFFF;
  box-sizing: border-box;
}
.rnw-footer__contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;  /* Figma実測 */
}
/* 見出し・本文は MOBO ではなく Zen Kaku Gothic New（Figma SP/title/h3・SP/text/large/bold） */
.rnw-footer__contact-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}
.rnw-footer__contact-text {
  width: 100%;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;  /* Figma実測 */
  color: var(--rnw-text);
}
/* お問い合わせボタンは 3章の .rnw-btn--accent を使う。
   ★要確認：SPの基本形（Figma 833:30260）は educare/main #00429A の紺だが、
     FIX版の各ページ（694:81020 / 694:86169 / 694:86780）は
     common/accent/red #912344 でPCと同じ。FIX版に合わせている。
     紺に戻す場合は footer.php のクラスを .rnw-btn--main に戻すだけでよい。 */

/* 点線罫線（Figma 12:541 / 12:548：2px / dasharray 2 2） */
.rnw-footer__contact-divider {
  --rnw-dash-c: var(--rnw-contact-accent);  /* ★要確認：Figmaのバインドが vipcare/accent */
  --rnw-dash-w: 2px;
  width: 100%;
  height: 2px;
  margin: 0;
  border: 0;
}

/* ------------------------------------
   6-3. サイト情報（Figma 12:556）
------------------------------------ */
.rnw-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 60px;  /* Figma実測 12:556 の y=60 */
}





/* ロゴはFIX版のSPフッターに無いため現在は未使用。戻す場合に備えて残してある。 */
.rnw-footer__logo {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.rnw-footer__logo img {
  display: block;
  width: 100%;
  aspect-ratio: 268 / 43;  /* Figma実測 12:560 */
  max-width: 100%;
  object-fit: contain;
}


  /* Figma実測 12:563 */

  /* Figma実測 12:569 */

/* ------------------------------------
   6-4. サイトマップ（Figma 12:571）
------------------------------------ */

/* サイトマップ上端の細い区切り（Figma 12:572：#EDEDED / 左右 -4% にはみ出す） */





  /* Figma 12:578 */

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

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


.rnw-footer__nav-row-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 12:584 */
}

/* サービス名の副題（Figma 12:586 は common/text/caption 12px #626262） */
.rnw-footer__nav-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;  /* Figma実測 */
  color: var(--rnw-caption);
}

/* 単独リンク（Figma 12:606） */



/* 行末アイコン（Figma 12:619：\e901 / 10px / #626262 を右端に配置） */
.rnw-footer__links-link--icon::after {
  content: "\e901";
  position: absolute;
  top: 50%;
  right: 10px;  /* Figma実測 12:619（枠311.25px 内の x=296.34px） */
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 10px;  /* Figma実測 */
  font-weight: 400;
  letter-spacing: 0.9px;
  color: var(--rnw-caption);
}

/* ------------------------------------
   6-5. グループ会社（Figma 12:620）※現在は未使用
   ---------------------------------------------------------------------
   FIX版のSPフッターにこのブロックが無いため footer.php から出力を外した。
   復活させる場合に備えて定義は残してある。
------------------------------------ */
.rnw-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 */
}
.rnw-footer__group-link {
  display: flex;
  position: relative;
  align-items: center;
  padding: 1px;  /* Figma実測 */
  border: 1px solid var(--rnw-main);  /* Figma実測 educare/main #00429A */
}
.rnw-footer__group-link img {
  display: block;
  width: 49px;   /* Figma実測 12:624 */
  height: 49px;
  margin-right: 16px;  /* Figma実測 12:623 pr-16 */
}
.rnw-footer__group-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  color: var(--rnw-text);
}
.rnw-footer__group-link::after {
  content: "\e902";  /* 別窓アイコン */
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 13.5px;  /* Figma実測 12:627 */
  font-weight: 400;
  letter-spacing: 0.9px;
  color: var(--rnw-accent);  /* Figma実測 educare/main */
}

/* ------------------------------------
   6-6. 最下部（Figma 12:635）
------------------------------------ */








/* 行頭の矢印アイコン（旧common.css \e901） */
/* ★旧デザイン 12:644 には行頭矢印（\e901）と別窓アイコン（\e902）が付いていたが、
   FIX版（694:81020 の最下部）はどちらも無い。デザインに合わせて出さない。
   復活させる場合はこのコメントを外すだけでよい。
.rnw-footer__policy-link::before {
  content: "\e901";
  position: absolute;
  top: 18.75px;
  left: 6.69px;
  transform: translateY(-50%);
  font-family: var(--rnw-font-icon);
  font-size: 7px;
  letter-spacing: 0.91px;
}
.rnw-footer__policy-link[target="_blank"]::after {
  content: "\e902";
  font-family: var(--rnw-font-icon);
  font-size: 10px;
  letter-spacing: 1.3px;
}
*/




/* =====================================================================
   7. PCフッター（Figma 318:19249「footer（変わります）」）
   ---------------------------------------------------------------------
   SP（.rnw-footer）とはブロック構成は同じだが中身の組み方が違うため、
   マークアップごと分けている。差分は footer.php の冒頭コメントを参照。
   出し分けは11節のメディアクエリ（768/769 で分岐）。769〜1125pxは 7-7 で縮める。

   ■ 左右の余白について
     Figmaのフレーム幅は1440px。4ブロックとも帯自体は画面幅いっぱいに出し、
     内容だけが「1440px時にFigmaと同じ余白」になるようにしている。
       施設検索・お問い合わせ … 左右paddingで内容幅1280pxを作る
       サイトマップ・グレー帯 … 内容側の max-width（1280 / 1126）で中央寄せ
     ※Figma上は施設検索とお問い合わせだけ w-1440 のセクションになっているが、
       そのまま1440pxで止めると幅の広い画面で下2ブロックと食い違い、
       左右に地色が出て枠だけが浮いて見えるため全幅に揃えている。

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





/* リストの既定余白リセット。:where() で詳細度0にして、後続の
   .rnw-footer-pc__list（padding-left）を打ち消さないようにしている
   （.rnw-footer 側と同じ理由）。 */


/* ------------------------------------
   7-1. 施設検索（Figma I318:19249;4468:42121）
------------------------------------ */
/* Figmaのセクションは w-1440 / p-80 だが、幅を1440pxで止めると
   全幅で出る下のサイトマップ・グレー帯と食い違って左右に地色が出る。
   セクションは全幅にして、左右paddingで内容幅1280px（＝1440px時に左右80px）を作る。
   ※Figmaには border-3 #E2E2E2 が付いているが、全幅にすると左右の線が
     画面端に張り付くだけで意味を持たないため入れていない。 */
.rnw-footer-pc__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;  /* Figma実測（カード ↔ 注記）。セクションのgap-56は子が1つなので効かない */
  width: 100%;
  padding: 80px max(24px, calc((100% - 1280px) / 2));  /* Figma実測 p-80 */
  background-color: #FFFFFF;
}

.rnw-footer-pc__search-card {
  display: flex;
  position: relative;
  align-items: center;
  gap: 24px;      /* Figma実測 */
  width: 600px;   /* Figma実測 */
  max-width: 100%;
  padding: 24px;
  border-radius: 20px;  /* Figma実測 */
  background-color: var(--rnw-main2);  /* Figma実測 educare/main2 #507CB8 */
}

/* 虫眼鏡イラスト（Figma I318:19249;4468:42536）。
   実測 left:252.64px はカード幅600pxのちょうど中央
   （252.64 + 94.732/2 = 300 = 600/2）なので、幅に追従するよう
   50% + translateX(-50%) で置く。SPと同じ扱いで、上へのはみ出し量だけ違う。 */
.rnw-footer-pc__search-illust {
  display: flex;
  position: absolute;
  top: -45.67px;  /* Figma実測（SPは-39.67px） */
  left: 50%;
  align-items: center;
  justify-content: center;
  width: 94.732px;   /* Figma実測 */
  height: 96.672px;  /* Figma実測 */
  transform: translateX(-50%);
  pointer-events: none;
}
.rnw-footer-pc__search-illust img {
  display: block;
  width: 55.557px;  /* Figma実測 */
  height: 80px;
  transform: rotate(41.78deg);  /* Figma実測 */
}

/* SPはイラストがテキストの真上に来るため pt-30 の逃げが要るが、
   PCはテキストが左寄せでイラストがカード中央のため逃げは不要。 */
.rnw-footer-pc__search-body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10px;  /* Figma実測 */
  min-width: 0;
}
.rnw-footer-pc__search-head {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Figma実測 */
}
.rnw-footer-pc__search-en {
  font-family: 'Krona One', sans-serif;
  font-size: 16px;        /* Figma実測（SPは12px） */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;  /* Figma実測 */
  color: var(--rnw-search-en);
}
.rnw-footer-pc__search-ja {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 32px;  /* Figma PC/educare/title/h2（SPは24px） */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: #FFFFFF;
}
.rnw-footer-pc__search-lead {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 18px;  /* Figma PC/educare/text/small（SPは14px・SemiBold） */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: #FFFFFF;
}

/* 白丸＋紺矢印の2色アイコン。単色maskにできないため img で配置する。
   アセットは下向きなので -90度回して右向きにする（円は回転しても同じ）。 */
.rnw-footer-pc__search-arrow {
  display: block;
  flex-shrink: 0;
  width: 50px;   /* Figma実測 */
  height: 50px;
  transform: rotate(-90deg);
}

.rnw-footer-pc__search-note {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
  text-align: center;  /* Figma実測（SPは左寄せ） */
}

/* ------------------------------------
   7-2. お問い合わせ（Figma I318:19249;4476:52599）
------------------------------------ */
/* 施設検索と同じ理由で全幅。左右paddingで内容幅1280pxを作る。 */
.rnw-footer-pc__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;  /* Figma実測 */
  width: 100%;
  padding: 56px max(24px, calc((100% - 1280px) / 2));  /* Figma実測 py-56 / px-80 */
  background-image: var(--rnw-contact-gra-pc);
}

/* 見出し。SPは白ボックス（高さ126px）に載るが、PCはグラデーションの上に直接置く。 */
.rnw-footer-pc__contact-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;        /* Figma実測 */
  width: 640px;    /* Figma実測 */
  max-width: 100%;
  padding: 0 32px; /* Figma実測 */
  text-align: center;
}
/* SPの「Contact」はFigmaのバインドが vipcare/accent（緑）のままだが、
   PCは educare/main #00429A が入っている。PC側はデザインどおり main を使う。 */
.rnw-footer-pc__contact-en {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold ※要確認 */
  font-size: 20px;  /* Figma PC/educare/text/large */
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
}
.rnw-footer-pc__contact-ja {
  margin: 0;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold ※要確認 */
  font-size: 32px;  /* Figma PC/educare/title/h2 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* SPは縦積み＋横の点線区切り、PCは横並び＋縦の点線区切り。 */
.rnw-footer-pc__contact-card {
  display: flex;
  align-items: stretch;  /* 縦罫線をカード高さいっぱいに伸ばす */
  gap: 32px;             /* Figma実測 */
  width: 100%;
  padding: 24px 16px;    /* Figma実測 py-24 / px-16 */
  border-radius: 8px;
  background-color: #FFFFFF;
}
.rnw-footer-pc__contact-block {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 16px;  /* Figma実測 */
  min-width: 0;
}
/* 見出し・本文は MOBO ではなく Zen Kaku Gothic New（SPと同じ） */
.rnw-footer-pc__contact-title {
  margin: 0;
  font-size: 20px;  /* Figma SP/title/h3 */
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;
}
/* ★要確認：Figmaは1ブロック目20px（SP/title/h3）・2ブロック目24px（PC/title/h3）で
   見出しの大きさが揃っていない。デザイン値どおり実装している。 */
.rnw-footer-pc__contact-title--lg { font-size: 24px; }

.rnw-footer-pc__contact-text {
  width: 100%;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;  /* Figma実測 */
  color: var(--rnw-text);
}

/* ブロック間の縦点線（Figma I318:19249;4476:52611）。
   共通ユーティリティ .rnw-dash-b は下罫線専用なので、ここで縦向きに組み直す。
   ★要確認：色はSPのカード内点線（--rnw-contact-accent）に合わせている。
     Figma側のバインドが読めないため、SPと揃える判断。 */
.rnw-footer-pc__contact-divider {
  --rnw-dash-c: var(--rnw-contact-accent);
  --rnw-dash-w: 2px;
  flex-shrink: 0;
  width: var(--rnw-dash-w);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: var(--rnw-dash-w) 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rnw-dash-c) 0 2px,
    transparent 2px 4px
  );
}

/* お問い合わせボタン（Figma I318:19249;4476:52617）。形は .rnw-btn のまま。
   ★要確認：SPのCTA（.rnw-btn--main / educare/main #00429A）と違い、
     PCは common/accent/red #912344 が指定されている。デザイン値どおり。 */
.rnw-footer-pc__contact-btn {
  width: 480px;  /* Figma実測 */
  max-width: 100%;
  border: 0.745px solid #FFFFFF;      /* Figma実測 */
  background-color: var(--rnw-link);  /* common/accent/red #912344 */
  color: #FFFFFF;
}


/* ------------------------------------
   7-3. サイトマップ（Figma I318:19249;4468:42142）
------------------------------------ */
.rnw-footer-pc__body {
  position: relative;
  width: 100%;
  padding: 48px 40px 0;  /* Figma実測 pt-48 */
  /* Figmaは地色 #FAF7F2 に紙テクスチャを4%で重ねている。
     擬似要素を使わずに、地色を96%の単色レイヤーとしてテクスチャの上に敷いて
     再現する（renewal/css/pages/*.css の .rnw-is と同じ手法）。 */
  background-color: var(--rnw-bg1);
  background-image:
    linear-gradient(rgba(250, 247, 242, 0.96), rgba(250, 247, 242, 0.96)),
    url('../img/front/texture_paper.jpg');
  background-repeat: repeat, repeat;
  background-position: left top, left top;
  background-size: auto, 1228.8px 819.3px;  /* Figma実測 */
}
/* 上端の区切り線。paddingの外側＝画面幅いっぱいに伸びる */
.rnw-footer-pc__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--rnw-border);
}








  /* Figma実測 */

  /* Figma実測 */



/* min-width は既定の auto のまま（0 にしない）。
   0 にするとカラムが中身より狭くなれてしまい、下の nowrap と噛み合わずに
   隣のカラムへ文字がはみ出す。 */




/* 「個人のお客様」「法人・自治体のお客様」。下罫線は点線（.rnw-dash-b） */


  /* Figma実測 pl-20 */



/* サービスの種類（保育園／学童・児童館）。
   法人・自治体カラムではFigmaが #444 の太字の単独項目になっているため、
   同じスタイルをそのままリンクとして使っている。 */


/* ブランド名（ナーサリースクール 等）。

   ▼ nowrap を付ける理由
     Figmaはこの2つのテキストに whitespace-nowrap を指定している。
     「インターナショナルスクール/バイリンガルスクール」はテンプレート側の <br> で
     2行に割っているので、nowrap を付けても意図した2行のまま。
     付けないと1行目がさらに折り返して3行になる。 */
.rnw-footer-pc__note {
  display: block;
  font-size: 16px;  /* Figma PC/text/dafalut/medium */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);
  white-space: nowrap;  /* Figma whitespace-nowrap */
}
/* 上に見出しを持たない項目（インターナショナルスクール／ポピンズプラス／
   児童発達支援）は、Figmaでは同じ灰色のまま Bold になっている。 */
.rnw-footer-pc__note--solo { font-weight: 700; }

/* 単独リンク（Figma I318:19249;4468:42200） */



/* ------------------------------------
   7-4. 最下部（Figma I318:19249;4468:42207）
------------------------------------ */








/* ポリシー系リンク（Figma I318:19249;4468:42215）
   Figmaは2段組だが、これは1行に収まらないぶんが右寄せで折り返した形。
   flex-wrap で同じ見え方になる（項目が増減しても崩れない）。
   SPと違い、行頭矢印も別窓アイコンも付かない。 */





/* ------------------------------------
   7-4-1. 下端に固定したページ内ナビ帯との逃げ
   ---------------------------------------------------------------------
   帯（.rnw-pagenav--bar.is-docked）は position:fixed で画面下端に居座るので、
   そのままだとフッター最下部の著作権表示に重なる。帯を出すページだけ、
   帯の高さぶんを下に足す（body[data-pagenav] の値ごとに高さが変わる）。
   帯を出さないページ（data-pagenav="none"）では 0px なので余白は増えない。
   ＝familycare の同じ指定（common.css の .rnw-footer__legal）と同じ考え方。

   ▼フッター（.rnw-footer-pc）ではなく最下部ブロックに入れているのは、
     グレーの地色が途切れないようにするため。
   ▼帯の表示は1024px〜、フッターの切替は769pxなので、1024px以上で出るのは
     常にPC版フッター。SP版（.rnw-footer__legal）への指定は現在は効かないが、
     分岐を戻したときのために残してある。
------------------------------------ */



/* ------------------------------------
   7-5. サービス紹介が Figma どおり入らない幅
   ---------------------------------------------------------------------
   Figmaは1440px前提。サービス紹介を実測どおり600px（1カラム272px）で置くには
     左右padding 80 ＋ ロゴ300 ＋ gap40 ＋ サービス600 ＋ gap40 ＋ 右リンク列276
     ＝ 1336px
   が必要。それ未満は2段構えで落とす。

     〜1335px … 間隔だけ詰める。カラムは中身ぶんまで縮められる
                （最長は法人「保育園運営コンサルティング」と
                  個人「インターナショナルスクール/」で、
                  pl-20・pr-12 を足して1カラム約264px）
     〜1279px … 2カラムを縦積みにする。1カラムなら下限1126pxでも余裕で収まる

   nowrap（上の .rnw-footer-pc__note ほか）と min-width:auto の組み合わせで
   カラムは中身より狭くならないので、この分岐が文字の折り返しと
   横スクロールの両方を防いでいる。
   フッター自体のSP/PC出し分け（1125/1126）とは別物。
------------------------------------ */




/* ------------------------------------
   7-7. タブレット幅（769〜1125px）でPC版を出すための縮め
   ---------------------------------------------------------------------
   フッターのSP/PC分岐を 1125/1126 から 768/769 に下げたため、
   1440px前提で組んである .rnw-footer-pc を769pxまで収める必要がある。
   ここは「文字を一段小さくして、左右の余白と間隔を詰める」だけで、
   構造（カラムの積み方など）は 7-5 の分岐にそのまま任せている。

   ▼収まりの計算（下限769px）
     左右padding 24×2 を引いた 721px に、サイトマップの3列を入れる。
       ロゴ200 ＋ gap16 ＋ サービス紹介228 ＋ gap16 ＋ 右リンク列208 ＝ 668px
     サービス紹介の228pxは、nowrap の最長ラベル
     「インターナショナルスクール/」14文字×14px に pl-20 / pr-12 を足した値。
     右リンク列の208pxは「助成金・補助金制度について」13文字×16px。
     ▼ラベルを長くすると下限が伸びる。増やしたときはこの値を見直すこと。

   ▼min-width の解除が必須
     .rnw-footer-pc は旧 #container に合わせて min-width:1126px を持っている。
     外さないと769〜1125pxで必ず横スクロールが出る。
     （#container 側の打ち消しは 11章「〜1125px」で既に入っている）
------------------------------------ */
@media only screen and (min-width: 769px) and (max-width: 1125px) {
  /* 1126px前提の下限幅を解除する */
  

  /* ---- 左右の余白 ---- */
  .rnw-footer-pc__search  { padding: 48px 24px; }
  .rnw-footer-pc__contact { padding: 40px 24px; }
  .rnw-footer-pc__body    { padding: 40px 24px 0; }
  

  /* ---- 施設検索 ---- */
  .rnw-footer-pc__search-en   { font-size: 14px; }
  .rnw-footer-pc__search-ja   { font-size: 26px; }
  .rnw-footer-pc__search-lead { font-size: 16px; }
  .rnw-footer-pc__search-note { font-size: 13px; }

  /* ---- お問い合わせ ---- */
  .rnw-footer-pc__contact-en        { font-size: 18px; }
  .rnw-footer-pc__contact-ja        { font-size: 26px; }
  .rnw-footer-pc__contact-card      { gap: 24px; padding: 24px 12px; }
  .rnw-footer-pc__contact-block     { gap: 12px; }
  .rnw-footer-pc__contact-title     { font-size: 18px; }
  .rnw-footer-pc__contact-title--lg { font-size: 20px; }
  .rnw-footer-pc__contact-text      { font-size: 16px; }

  /* ---- サイトマップ ---- */
  
  
  
  /* ロゴは高さを比率任せにする（固定高のままだと縦に潰れる） */
  
  
  
  
  
  
  
  .rnw-footer-pc__note           { font-size: 13px; }
  

  /* ---- 最下部 ---- */
  
  
  
  
  
}


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

  
  body:not(.tab_view) .rnw-footer-pc__note:hover        { color: var(--rnw-caption); }
  
  
  body:not(.tab_view) .rnw-footer-pc__contact-btn:hover { color: #FFFFFF; }
}


/* =====================================================================
   8. SPの追従CTA（Figma 694:81022 ほか）
   ---------------------------------------------------------------------
   画面下端に固定するボタン。ページによって有無・ボタン数・文言が変わるので、
   マークアップは footer.php が renewal/functions-renewal.php の
   RNW_PAGE_CTA を見て組み立てる。

   ▼経緯
     以前は front-page.php と renewal/pages/*.html に同じものが4つ複製されて
     いた（.front-cta / .rnw-cs-cta / .rnw-is-cta / .rnw-cd-cta）。CSSは
     クラス名以外まったく同じだったので、ここに1本化した。

   ▼2種類ある
     .rnw-cta--duo   2ボタン。左が薄青（educare/bg2）、右が赤（accent/red）
     .rnw-cta--quad  4ボタン。アイコン付きで最後だけ青（educare/main2）。
                     施設詳細（Figma 694:86170）だけがこちら。

   ▼z-index
     ヘッダー（12）・SPドロワー（11）より低くして、ドロワー展開時に
     前面へ出ないようにしている。

   ▼PC幅では出さない
     どのページのPCデザインにも無いため 768px 以上で非表示。
     #container の下余白も同じ幅で解除する。
   ===================================================================== */

.rnw-cta {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 1.923px;  /* Figma実測 */
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 -6.779px 7.344px rgba(0, 0, 0, 0.08);  /* Figma実測 */
}

/* リンクとして出せないもの（遷移先未確定）は <span>。
   見た目は同じで、カーソルとホバーだけ変える。 */
.rnw-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;  /* Figma実測 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.rnw-cta__btn--pending { cursor: default; }

/* 地色。duo / quad で文字色が違うのでトーンごとに分けている。 */
.rnw-cta__btn--sub {
  background-color: var(--rnw-bg2);  /* educare/bg2 #E7EFFB */
}
.rnw-cta__btn--accent {
  border-left: 0.962px solid #FFFFFF;  /* Figma実測 */
  background-color: var(--rnw-link);   /* common/accent/red #912344 */
  color: #FFFFFF;
}
.rnw-cta__btn--main {
  background-color: var(--rnw-main2);  /* educare/main2 #507CB8 */
  color: #FFFFFF;
}

/* ---------- 2ボタン（Figma 694:81022 / 694:82015 / 694:83312 / 694:84051 / 694:86782） ---------- */
.rnw-cta--duo .rnw-cta__btn {
  font-family: var(--rnw-font-jp);
  font-size: 14px;  /* SP/button/small */
}
.rnw-cta--duo .rnw-cta__btn--sub { color: var(--rnw-text); }

/* ---------- 4ボタン（Figma 694:86170 / 施設詳細） ---------- */
.rnw-cta--quad {
  border-top: 2px solid #FFFFFF;  /* Figma実測 */
}
.rnw-cta--quad .rnw-cta__btn {
  flex-direction: column;
  gap: 9.615px;  /* Figma実測 */
  /* 見出し系と同じ MOBO。SP/title/educare/text/small */
  font-family: var(--rnw-font-educare-title);
  font-size: 12px;
}
/* 2ボタンと違い、薄青の文字色は educare/main（#00429A）。 */
.rnw-cta--quad .rnw-cta__btn--sub { color: var(--rnw-main); }

.rnw-cta__icon {
  display: block;
  flex-shrink: 0;
  width: 27.04px;   /* Figma実測 */
  height: 25.617px;
}

/* ---------- CTAとフッターが重なるのを防ぐ余白 ---------- */
/* body[data-cta] は header.php が付ける。高さはCTAの実寸ぶん。 */
body[data-cta] #container         { padding-bottom: 48.51px; }  /* Figma 694:81022 の高さ */
body[data-cta="quad"] #container  { padding-bottom: 70px; }     /* Figma 694:86170 の高さ */

/* ---------- PC幅（768px〜）では出さない ---------- */
@media only screen and (min-width: 768px) {
  .rnw-cta { display: none; }
  body[data-cta] #container,
  body[data-cta="quad"] #container { padding-bottom: 0; }
}


/* =====================================================================
   9. 動き（Figma Annotation「【動きについて】」／High priority）
   ---------------------------------------------------------------------
   Figmaの注記は各ページのSPフレームに1枚ずつ貼られているが、書かれている
   内容はどのページも同じなので、ここに1本化して全ページへ効かせている。
     エデュケアTOP SP … 694:81064（グラデーション＋Key Burns）
                        694:81142（追従メニュー ※.front-cta で実装済み）
                        694:81103（各見出し・コンテンツの fade-in）
     自主事業施設 SP … 363:28932（同内容。実装の先行例）

     1. 画像            … Key Burns（Ken Burns）でゆっくり拡大・縮小
     2. グラデーション地 … ふわっと（ゆっくり）動く
     3. 各見出し・コンテンツ … スクロール追従で下から上に fade-in

   ▼ページ個別CSSに同じ指定を書かないこと
     school / poppinsplus / development-support が各自持っていた同内容の
     ブロックはこのファイルへ集約した。common.css は header.php:38 で
     ページ個別CSSより先に読み込まれるので、サイズ・角丸だけを
     ページ側の枠（.rnw-is-mv__ph などのモディファイア）が持てばよい。

   ▼JS
     3. だけ renewal/js/reveal.js が要る（footer.php が全ページで読む）。
     1. 2. はCSSアニメーションのみで完結する。
   ===================================================================== */

/* ---------- 1. Ken Burns（画像） ----------
   transform: scale で拡大するので、はみ出しを切る枠が写真と同じ大きさで要る。
   切る役を親セクションに持たせると、拡大した写真が「枠の中にいるまま」
   下のテキストへ覆いかぶさってしまう（overflow は枠の外しか切らない）。
   そのため写真1枚ごとに .rnw-kb の枠で包む。
   大きさ・角丸は枠側が持ち、中の <img class="rnw-kb__img"> は
   枠いっぱいに伸びてから拡大する。 */
@keyframes rnw-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.rnw-kb {
  display: block;
  overflow: hidden;
}

/* height:100% は旧CSS／ページCSSの img { height:auto } に勝たせるため明示する。 */
.rnw-kb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ▼2026-09-01 Ken Burns はここでは掛けない。
     全ページの写真すべてが拡大し続けていたため、MVの写真だけに限定した（下の指定）。 */
}

/* Ken Burns は各ページのメインビジュアルの写真だけに掛ける（2026-09-01）。
   枠のクラスは front-mv__ph / rnw-ns-mv__ph / rnw-as-mv__ph / rnw-is-mv__ph /
   rnw-cd-mv__ph / rnw-cs-mv__ph / rnw-pp-mv__ph / rnw-hw-mv__ph / rnw-hwe-mv__ph と
   ページごとに接頭辞が違うだけなので、末尾の -mv__ph でまとめて拾っている。 */
[class*="-mv__ph"] .rnw-kb__img {
  animation: rnw-kenburns 10s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- 2. グラデーション地のゆらぎ ----------
   地の高さより背景を大きく取り、位置をゆっくり往復させる。
   グラデーションの色・向きはページ側（background-image）が持つので、
   このクラスは「動かし方」だけを足す。
   ▼背景を複数レイヤー重ねている面には付けないこと
     background-size が全レイヤーに効くため、紙テクスチャ等と重ねている
     面では見た目が変わる。単層のグラデーション地にだけ付ける。 */
@keyframes rnw-gra-drift {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

.rnw-gra-move {
  /* 地の高さ＋120px。パーセントで大きくすると背の高いセクションほど
     移動量が増えて「ふわっと」でなくなるため、追加分を実寸で固定している。
     background-position: 50% 100% はこの追加分120pxぶんだけ下げた位置になる。 */
  background-size: 100% calc(100% + 120px);
  background-repeat: no-repeat;
  animation: rnw-gra-drift 24s ease-in-out infinite alternate;
  will-change: background-position;
}

/* ---------- 3. スクロール追従の fade-in ----------
   初期状態を .rnw-reveal-ready（renewal/js/reveal.js が <html> に付ける印）の
   配下に限定しているので、JSが読めなかった場合は何も隠れない。
   移動に transform ではなく translate を使っているのは、PC幅で
   transform（中央寄せの translateY(-50%)）を持つ要素と衝突させないため。 */
.rnw-reveal-ready [data-rnw-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.8s ease, translate 0.8s ease;
}

.rnw-reveal-ready [data-rnw-reveal].is-revealed {
  opacity: 1;
  translate: none;
}

/* ---------- モーション低減 ----------
   OSの「視差効果を減らす」が有効なときは3つとも止める。
   reveal.js 側も同じ条件で .rnw-reveal-ready を付けないので二重に効く。 */
@media (prefers-reduced-motion: reduce) {
  .rnw-kb__img,
  .rnw-gra-move {
    animation: none;
  }

  .rnw-reveal-ready [data-rnw-reveal] {
    opacity: 1;
    translate: none;
    transition: none;
  }
}


/* =====================================================================
   10. 保護者アンケート／満足度ドーナツ（.rnw-voice）
   ---------------------------------------------------------------------
   Figma SP 694:82454（ナーサリースクール）／ 694:81747（アフタースクール）
        PC 694:32638（ナーサリースクール）
   FIX版で入った共通コンポーネント。旧版の「円グラフ＋お客様の声カード」を
   置き換えるもので、いまはナーサリースクールとアフタースクールが使う。
   ページ側のCSSには何も書かないこと。

   ■ 使い方（本文側）
     <section class="rnw-XX-survey rnw-voice-sec">     ← 地色・波形はページ側
       <div class="rnw-voice-sec__body">
         見出し（.rnw-XX-head__card の中に .rnw-voice__illust）
         <div class="rnw-voice">                        ← PCではパネルになる
           <div class="rnw-voice__gauge">…ドーナツ・「通ってよかった！」・カギ線…</div>
           .rnw-voice__balloon--a〜d ／ .rnw-voice__deco--*
         </div>
         <span class="rnw-voice__pdf">
       </div>
     </section>

   ■ 位置の決め方
     ドーナツ・カギ線・吹き出し・装飾はFigmaの実測値を px で置いている。
     SPとPCで並びそのものが違う（SPは吹き出しがセクション上部の波形へ抜け、
     PCはパネルの中でドーナツを囲む）ため、％にしても両方には合わない。
     左右対称のものは片側だけ実測値を持ち、右側は left ではなく right に
     同じ値を入れて scaleX(-1) で反転させている。

   ■ PCの分岐が768pxなのはこの章だけ
     このファイルの他の分岐（1024 / 1126）とは別。使っているページ2枚の
     個別CSSが768pxで組まれているのに合わせている。
     .rnw-voice* は当該2ページにしか出ないので他ページには影響しない。
   ===================================================================== */

.rnw-voice-sec {
  /* SPの吹き出しはこのセクションを基準に置く（.rnw-voice には
     position を付けないので、absolute の基準がここまで上がる）。 */
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--rnw-bg2);  /* educare/bg2 #E7EFFB */
}

.rnw-voice-sec__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;             /* Figma実測 694:82457（見出し → パネル） */
  padding-bottom: 56px;  /* Figma実測 */
  background-color: #FFFFFF;
}


/* --- 9-1. 見出し（Figma 694:82459）---
   このセクションだけ見出しアイコンではなく女の子のイラストが付く。
   SPは縦積み（イラスト → 英字 → 和文）、PCは横並びだが、どちらも
   .rnw-ns-head__card の既定の並びがそのまま使えるので上書きは大きさだけ。 */
.rnw-voice__illust {
  flex-shrink: 0;
  width: 51.782px;  /* Figma実測 694:82460 */
  height: 40px;
}

/* 英字はSPとPCで原稿が違う（SP 694:82478「Voice」／PC 694:32659「Parents Voices」）。
   どちらもFigmaに明記があるので幅で出し分ける。 */
.rnw-voice__en--pc { display: none; }


/* --- 9-2. 満足度パネル（Figma SP 694:82480 ／ PC 694:32661）---
   SPでは地色も枠も持たない素の入れ物。PC幅でだけ #E7EFFB のパネルになる。 */
.rnw-voice {
  width: 100%;
}

.rnw-voice__gauge {
  position: relative;
  width: 296.5px;   /* Figma実測 694:82481 */
  height: 282.4px;
  margin: 0 auto;
}

/* --- ドーナツ（Figma 694:82484）---
   リングは conic-gradient、内側の白円は ::after。
   リングの太さはSP・PCとも約30.5pxで共通（外径だけが違う）。 */
.rnw-voice__ring {
  /* リングの割合。実データ確定時はここと本文の「00」を直す。 */
  --ns-voice-rate: 95%;
  position: absolute;
  left: 31px;       /* Figma実測 */
  top: 42.4px;
  width: 240px;     /* Figma実測 */
  height: 240px;
  border-radius: 50%;
  background-image: conic-gradient(
    var(--rnw-main) 0 var(--ns-voice-rate, 95%),
    #E2E2E2 var(--ns-voice-rate, 95%) 100%
  );
}

.rnw-voice__ring::after {
  content: '';
  position: absolute;
  inset: 30.5px;    /* Figma実測 (240 − 178.9) ÷ 2 */
  border-radius: 50%;
  background-color: #FFFFFF;
}

/* 数字はリングの内側。::after より前面に出す。 */
.rnw-voice__meter {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--rnw-main);  /* Figma #00429A */
  text-align: center;
}

.rnw-voice__label {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 18px;   /* Figma実測 694:82491 */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-voice__num {
  font-family: var(--rnw-font-educare-title);
  font-size: 95px;   /* Figma実測 694:82489 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -5.8px;
}

.rnw-voice__pct {
  font-size: 31px;   /* Figma実測 694:82490 */
  letter-spacing: -4.8px;
}

/* --- 「通ってよかった！」（Figma 694:82492）---
   楕円のパスに沿ったテキスト。フォント（Koburina Gothic StdN W6）が
   Web配信されないため画像で置いている。 */
.rnw-voice__copy {
  position: absolute;
  left: 46.4px;   /* Figma実測（テキストの描画範囲の左上） */
  top: 7.7px;
  width: 213px;
  height: auto;
}

/* --- 強調のカギ線（Figma 694:82493〜82496）---
   1つのアセットを上下2種・左右4か所で使う。角度はFigmaの回転値。 */
/* left / top は「回転する前の要素の箱」の位置。Figmaの回転行列から
   描画後の外接矩形を求め、その中心が合うように戻した値を入れている。 */
.rnw-voice__kagi {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rnw-voice__kagi--tl,
.rnw-voice__kagi--tr {
  width: 37.7px;   /* Figma実測（PCの50.52をSP比 0.7465 で縮めた値） */
  height: 11.3px;
  background-image: url('../img/nursery-school/deco_kagi_lg.svg');
}

.rnw-voice__kagi--bl,
.rnw-voice__kagi--br {
  width: 21.8px;   /* Figma実測（PCの29.21をSP比で縮めた値） */
  height: 9.2px;
  background-image: url('../img/nursery-school/deco_kagi_sm.svg');
}

.rnw-voice__kagi--tl { left: 14.1px;  top: 55.5px; transform: rotate(17.5deg); }
.rnw-voice__kagi--bl { left: 23.1px;  top: 70.6px; transform: rotate(-7.15deg); }
.rnw-voice__kagi--tr { right: 5.6px;  top: 63.5px; transform: scaleX(-1) rotate(17.5deg); }
.rnw-voice__kagi--br { right: 14.6px; top: 78.6px; transform: scaleX(-1) rotate(-7.15deg); }


/* --- 9-3. 吹き出し（Figma SP 694:82507 / 694:82512）---
   SPでは2枚だけがセクション上部（波形に重なる位置）に出る。
   .rnw-voice に position が無いので、基準は .rnw-voice-sec。
   しっぽは ::after の三角。本体の高さ（72px）にしっぽ（17px）が足される。 */
.rnw-voice__balloon {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 133.9px;   /* Figma実測 */
  height: 72px;     /* Figma実測（しっぽを除いた本体） */
  margin: 0;
  padding: 0 10px;
  border-radius: 20px;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 12px;   /* Figma実測 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-voice__balloon::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 17px solid;  /* 色は各モディファイアの border-top-color */
}

/* SPは右が淡い地（694:82508）、左が濃い地（694:82513）。PCでは逆になる。 */
.rnw-voice__balloon--a {
  /* ▼2026-09-01 左端からの固定pxだと、幅375pxちょうどのときしか合わない。
     360px幅では右にはみ出して切れ、376px以上では中央のイラストから離れる。
     イラストが中央寄せなので、中央からのオフセット（Figma実測 228.2 − 187.5）に直した。 */
  left: calc(50% + 40.7px);   /* Figma実測 375px幅で left:228.2px */
  top: 63.3px;
  background-color: var(--rnw-bg2);
  color: var(--rnw-main);
}

.rnw-voice__balloon--a::after {
  left: 68%;   /* Figma実測 Polygon 1 の位置 */
  border-right: 39px solid transparent;
  border-top-color: var(--rnw-bg2);
}

.rnw-voice__balloon--b {
  left: calc(50% - 175.1px);   /* Figma実測 375px幅で left:12.4px（--a と同じ理由） */
  top: 75.3px;
  background-color: #507CB8;
  color: #FFFFFF;
}

.rnw-voice__balloon--b::after {
  left: 39%;   /* Figma実測 Polygon 1 の位置 */
  border-left: 39px solid transparent;
  border-top-color: #507CB8;
}

/* 後ろ2枚と装飾はPCフレームにしか無い。 */
.rnw-voice__balloon--c,
.rnw-voice__balloon--d,
.rnw-voice__deco {
  display: none;
}


/* --- 9-4. アンケートPDFボタン（Figma SP 694:82497 ／ PC 694:32722）---
   FIX版でSPフレームにも入ったので、PC限定の出し分けをやめた。
   Figmaは線が内側に付くので、高さを固定して padding は左右だけにする。 */
.rnw-voice__pdf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 327.2px;   /* Figma実測 */
  max-width: calc(100% - 48px);
  height: 78px;     /* Figma実測 */
  margin-top: 16px; /* Figma実測 32 − 親の gap 16 */
  padding: 0 32px;  /* Figma実測 */
  border: 2px solid var(--rnw-main);
  border-radius: 66px;
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);  /* Figma SP/button/big */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
}

/* mask の共通指定は common.css の .rnw-icon が持っている。 */
.rnw-voice__pdf-icon {
  flex-shrink: 0;
  width: 24px;   /* Figma実測 */
  height: 24px;
  -webkit-mask-image: url('../img/nursery-school/icon_pdf.svg');
          mask-image: url('../img/nursery-school/icon_pdf.svg');
}


/* ---------- PC（Figma 694:32638） ---------- */
@media only screen and (min-width: 768px) {

  /* ---------------------------------------------------------------
     11-10. 保護者アンケート（Figma 694:32638）
     PCでは #E7EFFB・角丸20pxのパネル（1200×500）の中に、ドーナツを
     4つの吹き出しと装飾が囲む。座標はすべてパネル基準のFigma実測値。
     --------------------------------------------------------------- */

  .rnw-voice-sec__body {
    gap: 40px;                /* Figma実測（見出し → パネル） */
    padding: 80px 0 120px;    /* Figma実測 */
    container-type: inline-size;  /* [2026-08-30] 下の .rnw-voice の zoom が参照する 100cqw の基準 */
  }

  /* イラストはSPの2倍（Figma実測 694:32641 は 104×80）。 */
  .rnw-voice__illust {
    width: 103.564px;
    height: 80px;
  }

  .rnw-voice__en--sp { display: none; }
  .rnw-voice__en--pc { display: block; }

  /* パネル。ここに position が付くことで、吹き出しと装飾の absolute が
     セクションではなくパネル基準に切り替わる。 */
  .rnw-voice {
    position: relative;
    width: 1200px;    /* Figma実測 694:32661 */
    height: 500px;    /* Figma実測 */
    /* [2026-08-30] 1248px未満はパネルを丸ごと等倍縮小して収める（SP切替はやめた）。
       固定px座標の吹き出し・ドーナツの構図を保ったまま縮めるため zoom を使う。
       zoom = min(1, (パネル可用幅 − 48px)/1200)。可用幅は __body 基準の 100cqw。
       length同士の比は calc 不可なので tan(atan2()) で無単位化している。 */
    zoom: min(1, tan(atan2(100cqw - 48px, 1200px)));
    margin: 0 auto;
    padding-top: 48px;  /* Figma実測 パネル上端 →「通ってよかった！」の上端 */
    border-radius: 20px;
    background-color: var(--rnw-bg2);
  }

  .rnw-voice__gauge {
    width: 373px;     /* Figma実測（カギ線まで含めた描画範囲） */
    height: 367.9px;
  }

  .rnw-voice__ring {
    left: 23.4px;     /* Figma実測 */
    top: 46.4px;
    width: 321.5px;   /* Figma実測 */
    height: 321.5px;
  }

  .rnw-voice__ring::after {
    inset: 30.75px;   /* Figma実測 (321.5 − 260) ÷ 2 */
  }

  .rnw-voice__label { font-size: 24.11px; }  /* Figma実測 694:32672 */
  .rnw-voice__num   { font-size: 127.26px; letter-spacing: -7.77px; }
  .rnw-voice__pct   { font-size: 41.53px;  letter-spacing: -6.43px; }

  .rnw-voice__copy {
    left: 44px;       /* Figma実測 */
    top: 0;
    width: 285.3px;
  }

  .rnw-voice__kagi--tl,
  .rnw-voice__kagi--tr { width: 50.52px; height: 15.08px; }

  .rnw-voice__kagi--bl,
  .rnw-voice__kagi--br { width: 29.21px; height: 12.37px; }

  .rnw-voice__kagi--tl { left: 1.1px;   top: 63.5px; }
  .rnw-voice__kagi--bl { left: 12.7px;  top: 84px; }
  .rnw-voice__kagi--tr { right: 1.1px;  top: 81.5px; }
  .rnw-voice__kagi--br { right: 12.8px; top: 94.7px; }

  /* ---- 吹き出し（Figma 694:32678 / 32683 / 32688 / 32693）----
     SPとは配色が逆で、右列が濃い地・左列が白地。
     上段（a・b）はしっぽが下向き、下段（c・d）は内側（ドーナツ側）を向く。 */
  .rnw-voice__balloon {
    width: auto;
    height: 132px;    /* Figma実測（しっぽを除いた本体） */
    padding: 0 32px;
    border-radius: 36.5px;   /* Figma実測 */
    font-size: 21.9px;       /* Figma実測 */
    letter-spacing: 2.19px;
    text-align: left;
  }

  .rnw-voice__balloon--c,
  .rnw-voice__balloon--d { display: flex; }

  .rnw-voice__balloon--a {
    left: 812.4px;   /* Figma実測 */
    top: 68px;
    width: 288.2px;
    background-color: #507CB8;
    color: #FFFFFF;
  }

  .rnw-voice__balloon--a::after {
    left: 12%;
    border-left: 0;
    border-right: 44px solid transparent;
    border-top: 24px solid #507CB8;   /* Figma実測 156.3 − 132 */
  }

  .rnw-voice__balloon--b {
    left: 105.3px;   /* Figma実測 */
    top: 98px;
    width: 297.7px;
    background-color: #FFFFFF;
    color: var(--rnw-main);
  }

  .rnw-voice__balloon--b::after {
    left: 62%;
    border-left: 44px solid transparent;
    border-right: 0;
    border-top: 24px solid #FFFFFF;
  }

  /* 下段はしっぽが横向き。::after の三角を左右に付け替える。 */
  .rnw-voice__balloon--c {
    left: 786px;     /* Figma実測 762 ＋ しっぽ24 */
    top: 294.2px;
    width: 285.4px;
    background-color: #507CB8;
    color: #FFFFFF;
  }

  .rnw-voice__balloon--c::after {
    left: auto;
    right: 100%;
    top: 50%;
    margin-top: -18px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-right: 24px solid #507CB8;
  }

  .rnw-voice__balloon--d {
    left: 85.7px;    /* Figma実測 */
    top: 307.2px;
    width: 341px;
    background-color: #FFFFFF;
    color: var(--rnw-main);
  }

  .rnw-voice__balloon--d::after {
    left: 100%;
    top: 50%;
    margin-top: -18px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 24px solid #FFFFFF;
  }

  /* ---- 装飾（PCのみ）----
     いずれも多色SVGなので mask ではなく背景画像で描く。 */
  .rnw-voice__deco {
    position: absolute;
    z-index: 3;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* 葉（Figma 694:32715） */
  .rnw-voice__deco--leaf {
    left: 105.7px;
    top: 85.7px;
    width: 57.8px;
    height: 49.1px;
    background-image: url('../img/nursery-school/deco_leaf.svg');
  }

  /* クレヨン2本（Figma 694:32699。Figmaの枠で切れる形も再現している） */
  .rnw-voice__deco--crayon {
    left: 1037.1px;
    top: 82px;
    width: 45.5px;
    height: 43.1px;
    background-image: url('../img/nursery-school/deco_crayon.svg');
  }

  /* 花（Figma 694:32712） */
  .rnw-voice__deco--flower {
    left: 998.4px;
    top: 309.2px;
    width: 52.9px;
    height: 40.9px;
    background-image: url('../img/nursery-school/deco_flower.svg');
  }

  /* ハート（Figma 694:32698） */
  .rnw-voice__deco--heart {
    left: 364.5px;
    top: 321px;
    width: 30.7px;
    height: 30.7px;
    background-image: url('../img/nursery-school/deco_heart.svg');
  }

  /* ---- PDFボタン（Figma 694:32722）。PCは1行組み。 ---- */
  .rnw-voice__pdf-label br { display: none; }

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


/* =====================================================================
   11. レスポンシブ
   ---------------------------------------------------------------------
   分岐が2種類ある。旧CSSの都合で「ヘッダーの切替」と「ページ全体の
   下限幅／フッターの切替」を同じ幅に揃えられないため。

     ヘッダー           1023 / 1024
     下限幅・フッター   1125 / 1126

   ▼なぜ 767/768 をやめたか
     旧CSSが
       #container { min-width:1126px }   （767px以下でしか解除されない）
       header     { min-width:1126px }
     を持っているため、768〜1125pxでは中身が収まっていてもページ全体が
     1126pxに広がり、必ず横スクロールが出ていた（iPad mini 768 / 1024）。
     さらにPCヘッダーは、Figma実測値のままだと
       左右padding 100 ＋ ロゴ268 ＋ gap24 ＋ ナビ610 ＋ gap24 ＋ CTA159
       ＝ 1185px
     が下限で、そもそもタブレット幅に収まらない。

   ▼ヘッダーを1024pxで切り替えられるようにした方法
     1200pxでハンバーガーに落とすとノートPCの幅まで巻き込むため、
     1024〜1199pxの間だけPCヘッダーを詰めて成立させている（下の
     「PCヘッダーの詰め」ブロック）。1200px以上はFigma実測値のまま。
     ▼ナビの項目やラベルを増やすと下限が伸びる。増やしたときは
       この詰めの値と分岐幅を見直すこと。

   ▼旧CSSは編集していない
     このファイルは header.php で旧 /educare/css/common.css より後に
     読み込まれるので、下の #container / .rnw-header の指定で打ち消している。
     旧CSS側を直すとリニューアル対象外のページにも影響するため触らない。

   ※ ページ個別CSS（renewal/css/pages/*.css）の分岐は768pxのままにしてある。
     .rnw-voice（保護者アンケート）のパネルは、768～1247pxで zoom による等倍縮小で収めている（[2026-08-30]）。
      ナーサリースクールはPCレイアウトがタブレット幅でも収まることを
      確認済み。他ページは375px中央寄せの暫定指定なのでそのまま出る。
   ===================================================================== */

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

/* ページ内ナビ帯の高さ。header.php が body に data-pagenav を出す。
     wide … ラベルが同じ字送りで2行（Figma 335:10290 インターナショナル 78px）
     tall … ラベル＋補足の2行（65px）/ short … 1行（56px）/ none … 帯なし
   帯は position:fixed で本文を押し下げないため、この値は #container に
   足す余白の計算にだけ使う。 */
body[data-pagenav="wide"]  { --rnw-pagenav-h: 78px; }
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;  /* 〜1023px は非表示。1024px〜で解除 */
  position: fixed;
  top: var(--rnw-header-h-pc);
  left: 0;
  z-index: var(--rnw-z-pagenav);
  width: 100%;
  align-items: center;
  justify-content: center;
  justify-content: safe center;  /* 収まる時は中央 / 溢れる時は左寄せ */
  flex-wrap: nowrap;             /* 帯は常に1行 */
  gap: 40px;                     /* Figma実測 */
  padding: 10px 20px;            /* Figma実測 py-10。高さは中身と合わせて 56/65/78px */
  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/pagenav.php の冒頭コメント参照。 */
.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;      /* 折り返しは <br> で明示した位置のみ */
}
.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;
}

/* PCナビと同じ 1024〜1199px の詰めに合わせ、帯も間隔を縮める */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
  .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; }
}


/* ---------- ヘッダー：〜1023px はドロワー ---------- */
@media only screen and (max-width: 1023px) {
  
  

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

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

/* ---------- ヘッダー：1024px〜 はPCナビ ---------- */
@media only screen and (min-width: 1024px) {
  
  

  /* PCでもドロワーは使わない */
  

  /* ページ内ナビ帯は項目を持つページだけ出力される（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ヘッダーの詰め（1024〜1439px） ----------
   確定デザイン（335:9394）は1440px基準。1440px未満では余白・間隔・ロゴ幅
   だけを縮める（項目は落とさない）。1440px以上には適用しないので、
   フル幅の見た目はFigmaどおり。 */
@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  

  
  
  
  .rnw-header__ctas     { gap: 12px; }

  

  /* 展開パネルも横幅に合わせて詰める */
  
}

/* ---------- PCヘッダーの詰め（1024〜1199px） ----------
   PCナビの下限は1024px。上の詰めだけでは入りきらないので、
   ロゴと間隔をもう一段縮める。
   ▼これ以上は下げられない。必要ならデザイン側の判断
     （項目を減らす／CTAをアイコン化する等）。 */


/* ---------- ページ全体の下限幅：〜1125px ---------- */
/* フッターの切替はここではなく、下の768/769の分岐で行う。 */
@media only screen and (max-width: 1125px) {
  /* 旧CSS `#container { min-width:1126px }` の打ち消し。
     これを外すと、中身が収まっていても横スクロールが出る。 */
  #container {
    min-width: auto;
    min-width: initial;
  }

  

}

/* ---------- フッター：〜768px ---------- */
/* フッターの切替だけ768/769。ページ全体の下限幅（上の1125/1126）とは別物。
   769px以上はPC版を出し、1125pxまでは7-7の縮めで収める。 */


/* ---------- フッター：769px〜 ---------- */


/* ---------- 狭幅SP（Figma基準375px未満）の微調整 ---------- */


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

/* =====================================================================
   2026-09-01 追記
   ===================================================================== */

/* --- SPの吹き出し：文字が枠からはみ出して切れる（9-3上書き） --- */
/* 幅133.9px・高さ72pxはFigma（MOBO）実測。MOBOはWeb配信が未確定で
   Zen Kaku Gothic New にフォールバックしており字幅が広いため、
   マークアップの <br> で決めた行がさらに折り返し、固定高からあふれていた。
   行は <br> だけで決める（white-space:nowrap）ことにして、枠は中身に合わせて
   広がるようにする。最小サイズはFigma実測のまま。
   右の吹き出し（--a）は右端を基準にして、広がっても画面外へ出ないようにする。
   PC（≥768px）は幅・字送りが別指定なので対象外。 */
@media only screen and (max-width: 767px) {
  .rnw-voice__balloon {
    width: max-content;
    min-width: 133.9px;   /* Figma実測 */
    height: auto;
    min-height: 72px;     /* Figma実測（しっぽを除いた本体） */
    white-space: nowrap;
  }

  .rnw-voice__balloon--a {
    left: auto;
    right: calc(50% - 174.6px);   /* Figma実測 375px幅で right:12.9px */
  }
}