@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル
   児童発達支援ページ専用CSS
   （/educare/service/development-support/）
   Figma: SP 363:29717 ／ PC 453:38227
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が is_page(['service/development-support', 'development-support'])
     のときだけ、renewal/css/common.css の後に読み込む。

   ■ 名前空間
     ページ固有の接頭辞は `rnw-cd-`（cd = child development）。
     旧CSS7ファイル（reset/common/contents/index/form/slick/aos）に
     `rnw` が1件も無いことは確認済み。

   ■ 旧CSSとの同居について
     このページは旧 header.php の分岐で css/contents.css が読み込まれる。
     contents.css の装飾ルールはほぼ `main …` 配下にスコープされているため、
     本文で <main> を使わず .rnw-cd でラップすることで大半を回避している。
     素の要素マージン等だけ下の 0. で打ち消す。

   ■ 画像・アイコン
     本文（固定ページ）側はPHPが動かず rnw_asset_url() を呼べないため、
     アイコンは全てこのCSSの mask-image / background-image（相対パス）で描画し、
     本文には src 属性を置いていない（写真の <img> だけ [theme_uri] を使う）。

     ・流用（複製しない）※Figmaからの書き出しとパス比較で同一を確認済み
         img/school-children/wave.svg               … セクション上端の波形（パス933）
         img/school-children/icon_head_features.svg … 見出しアイコン
                                                       （3セクションとも同一グラフィック）
         img/school-children/icon_head_faq.svg      … FAQの見出しアイコン
         img/nursery-school/icon_menu_caret.svg     … ページ内メニューの14px丸キャレット
         img/icon_arrow_circle.svg                  … ボタンの22px丸矢印（maskで着色）
         img/front/icon_slider_next.svg             … スライダーの前後ボタン
         img/front/mv_illust.svg                    … リード下のイラスト帯
         img/front/texture_paper.jpg                … 紙テクスチャ
         img/nursery-school/fv_wave.svg             … PCのFV下端の波形（453:38231）
         img/nursery-school/fv_illust.png           … PCのFV下部のイラスト（453:38232）
         img/nursery-school/fv_stripes.png          … PCのFV下部の斜線（453:38251）

       PCのFV装飾3枚は、サイズ・位置・回転がナーサリースクールのPC版FVと
       完全に一致したため img/nursery-school/ のものをそのまま使っている。

     ・新規（img/development-support/）
         photo_mv.jpg           … MV（363:30189「写真変更」で支給された）
         photo_head_service.jpg … 「ポピンズの児童発達支援とは？」の見出し写真
         photo_head_support.jpg … 「オーダーメイド支援」の見出し写真
         photo_feature03.jpg    … 特徴カード3枚目
         photo_school01.jpg     … 「ポピンズブルーム豊中」の写真
       ※未支給（グレーのベタ塗り）が残っているところは .rnw-cd-ph の
         プレースホルダーのまま。内訳は本文（development-support.html）の
         「■ 画像の入れ方」を参照。
       ※アイコンの新規書き出しは0点。

   ■ フォント
     このページも MOBO と Zen Kaku Gothic New が混在する（Figmaのトークンどおり）。
       ・MOBO-Bold / MOBO-SemiBold … MVの見出し、セクション見出し、
                                      オーダーメイド支援の見出し帯・本文・ボタン、
                                      スクール紹介のタイトル・本文
       ・Zen Kaku Gothic New       … サービス概要のリード文、特徴／利用者の声の
                                      カード、タグ、「詳細はこちら」ボタン
     MOBO はWeb配信が未確定のため --rnw-font-educare-title 経由で
     Zen Kaku Gothic New にフォールバックする（定義は common.css）。

   ■ 動き（Figma Annotation 363:29633「【動きについて】」／High priority）
     1. Ken Burns … 写真1枚ずつを .rnw-kb の枠で包み、中の
                    .rnw-kb__img がゆっくり拡大する（1-0 参照）。
     2. fade-in  … [data-rnw-reveal] が画面に入ったら .is-revealed が付く。
                    制御は renewal/js/reveal.js。初期状態を .rnw-reveal-ready
                    配下に閉じ込めているので、JSが落ちても本文は消えない。
     どちらも prefers-reduced-motion: reduce のときは止める（末尾）。

   ■ FAQ
     Q&A本体はショートコード [educare_faq] に委ねているため、
     このCSSにはセクション枠と見出しのスタイルしか無い。
     出力側のスタイルは renewal/css/faq.css。
     カテゴリタグ（タブ）は Figmaのコメント 363:30312「タグ削除」に合わせ、
     ショートコード側（renewal/faq.php）で全ページ出さないようにしている。

   ■ PC（末尾 11.）
     Figma 453:38227（1440幅）。ブレークポイントは他ページと同じ768px。
     ▼PCフレームに無いのでPC幅で消しているもの
         ・イラスト帯（363:29733）… FV側に別デザインの装飾が入るため
         ・追従CTA（363:30184）
         ・特徴スライダーのコントロール（363:29836）… 3列グリッドになるため
         ・スクールのご紹介の見出し写真（363:29921）
     ▼SPフレームに無いがPCで出しているもの
         ・スクールのご紹介の上端の波形（453:38402 / .rnw-cd-wave--pc）
     ▼コンテンツ幅
         --cd-pad-1280 … FV・サービス概要のリード・利用者の声（1440幅で80px）
         --cd-pad-1248 … 特徴のカード列（1440幅で96px）
         --cd-pad-1200 … 見出しブロック・オーダーメイド支援・スクール紹介・FAQ
   ===================================================================== */


/* =====================================================================
   0. ルート・リセット
   ===================================================================== */

/* Figma の SPフレーム自体が紙テクスチャ地。セクション側で背景指定が無い
   ところ（MV・リード・施設検索・FAQ）はこの地色がそのまま出る。
   4%の重ねを擬似要素なしで再現するため、地色を96%の単色レイヤーとして
   テクスチャの上に敷いている。 */
.rnw-cd {
  padding-top: var(--rnw-header-h-sp);  /* 固定ヘッダーの高さぶん */
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  background-color: #FDF6F4;
  background-image:
    linear-gradient(rgba(253, 246, 244, 0.96), rgba(253, 246, 244, 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;
}

.rnw-cd *,
.rnw-cd *::before,
.rnw-cd *::after { box-sizing: border-box; }

/* :where() で詳細度0にしておく。ここを .rnw-cd img（0-1-1）で書くと
   height:auto が .rnw-cd-head__ph 等（0-1-0）の固定高さに勝ってしまう。 */
:where(.rnw-cd) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.rnw-cd) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

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

:where(.rnw-cd) :is(h1, h2, h3, h4) {
  font-family: var(--rnw-font-jp);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--rnw-text);
}

/* 追従CTA（.rnw-cta）とその下端の逃げ余白は renewal/css/common.css
   「8. SPの追従CTA」へ移した。マークアップも footer.php が出すようになり、
   有無・文言は renewal/functions-renewal.php の RNW_PAGE_CTA が持つ。 */

/* PCのFigmaにしか無い改行。既定は出さない（11. で表示する）。 */
.rnw-cd-pc-only,
.rnw-cd-br-pc { display: none; }

/* ページ内アンカーの着地位置を固定ヘッダーのぶん下げる。 */
.rnw-cd-service,
.rnw-cd-support,
.rnw-cd-school,
.rnw-cd-voice,
.rnw-cd-faq {
  scroll-margin-top: var(--rnw-header-h-sp);
}


/* =====================================================================
   1. 共通パーツ
   ===================================================================== */

/* --- 写真プレースホルダー ---
   実写真が入る <img> にも、未支給の <div> にも付く共通の枠。
   このページは未支給が多い（MV・特徴カード・各見出し・利用者の声カード）。
   Figma上はグレー #D9D9D9 / #626262 の2種類だが、未支給枠だと分かるよう
   他ページと同じ #D9D9D9 に統一している。 */
.rnw-cd-ph {
  background-color: #D9D9D9;
  object-fit: cover;
}

/* --- 1-0. 動き（Figma Annotation 363:29633）---------------------------
   Ken Burns（.rnw-kb / .rnw-kb__img）とスクロール追従の fade-in
   （[data-rnw-reveal]）は全ページ共通の指定なので
   renewal/css/common.css「8. 動き」へ集約した。
   このファイルが持つのは写真枠の大きさ・角丸だけ（.rnw-cd-*__ph）。 */


/* --- 本文テキスト（Figma SP/title/educare/text）---
   オーダーメイド支援・スクール紹介の説明文で使う。MOBO-SemiBold 系。 */
.rnw-cd-text {
  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-text);
}

/* --- セクション見出しブロック（写真帯＋カード）---
   サービス概要（129:28529）は bg2 のカード、
   オーダーメイド支援（129:28591）／スクール紹介（129:28634）／
   利用者の声（129:28662）は白カード。
   FAQ（129:28710）は写真もカード地色も無い。 */
.rnw-cd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.rnw-cd-head__ph {
  width: 100%;
  height: 200px;  /* Figma実測 */
}

.rnw-cd-head__card {
  /* margin-top のマイナス値だけでは写真に重ならない。
     CSSの描画順では、ブロックの背景（step 4）より <img> のような置換要素
     （step 7）のほうが後に描かれるため、位置指定の無いカードは写真の下に
     潜ってしまう。position を付けて positioned な要素（step 8）にし前面へ。 */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;                   /* Figma実測 */
  width: calc(100% - 32px);    /* Figma実測 343 ＝ 375 − 16×2 */
  max-width: 343px;
  margin-top: -40px;           /* Figma実測 写真の mb-40 */
  padding: 24px;
  border-radius: 20px;
  background-color: #FFFFFF;
  text-align: center;
}

/* サービス概要のカードだけ educare/bg2 地（Figma 129:28531） */
.rnw-cd-head__card--bg2 { background-color: var(--rnw-bg2); }

/* --noicon（利用者の声 129:28664）はアイコンが無いだけで、
   カードの見た目は同じ。子が1つなので gap も効かない。
   マークアップ側の目印としてクラスだけ付けており、スタイルは持たせていない。 */

/* 写真が無いセクション（FAQ）は重ねる相手が無いのでマイナスマージンを戻す。 */
.rnw-cd-head--noimage .rnw-cd-head__card { margin-top: 0; }

/* FAQ は地色も角丸も無く、左右24pxだけ（Figma 129:28710） */
.rnw-cd-head__card--plain {
  padding: 0 24px;
  border-radius: 0;
  background-color: transparent;
}

/* 見出しアイコン。多色SVGのため mask ではなく背景画像で描く。
   サービス概要・オーダーメイド支援・スクール紹介の3つとも school-children の
   icon_head_features.svg と同一グラフィックのため、既定値にしている。 */
.rnw-cd-head__icon {
  flex-shrink: 0;
  width: 42.222px;  /* Figma実測 */
  height: 40px;
  background-image: url('../../img/school-children/icon_head_features.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rnw-cd-head__icon--faq {
  width: 55.729px;  /* Figma実測 */
  background-image: url('../../img/school-children/icon_head_faq.svg');
}

.rnw-cd-head__text {
  display: flex;
  flex-direction: column;
  gap: 4px;  /* Figma実測 */
  width: 100%;
}

.rnw-cd-head__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-accent);              /* educare/accent #EC6E43 */
}

.rnw-cd-head__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: var(--rnw-main2);                     /* educare/main2 #507CB8 */
}

/* --- 波形（Figma パス933）---
   白のシェイプをmaskで描き、色はモディファイア側から渡す。
     --white … サービス概要（129:28526）
     --bg2   … オーダーメイド支援（129:28588）
     --flip  … Figma上で180度回転＋上下反転＝左右反転（2枚とも該当）
   ※スクールのご紹介（129:28631）には波形が無い。 */
/* ▼2026-09-22 新デザインで山形から円弧に変わった。
     PC（1440×160）は circle cx=720 cy=1670.22 r=1670.22、
     SP（375×89.3064）は circle cx=186.221 cy=369.51 r=369.51。
     r÷幅が 1.160 と 0.985 で違うため、1枚を引き伸ばしても同じ形にならない。
     SPは wave_arc_sp.svg、PCは wave_arc.svg（下の @media で差し替え）。
     帯の高さ（375:89.3064）は旧デザインの山と同じ比率なので変えていない。
     塗り（--white / --bg2）は新デザインでも同じ値だったので据え置き。 */
.rnw-cd-wave {
  width: 100%;
  aspect-ratio: 375 / 89.3064;  /* 書き出しSVGの viewBox */
  -webkit-mask-image: url('../../img/front/wave_arc_sp.svg');
          mask-image: url('../../img/front/wave_arc_sp.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

.rnw-cd-wave--white { background-color: #FFFFFF; }
.rnw-cd-wave--bg2   { background-color: var(--rnw-bg2); }
.rnw-cd-wave--flip  { transform: scaleX(-1); }

/* PCフレームにだけある波形の帯（スクールのご紹介の上端 / Figma 453:38402）。
   SPは前セクションから地続きで波形が無いので出さない。 */
.rnw-cd-wave--pc { display: none; }

/* --- 角丸ボタン ---
   塗り（129:28546 施設検索）と枠線（129:28609 / 129:28659）の2種類。 */
/* gap は「最低これだけは空ける」の意味しか持たない（justify-content が
   space-between なので実際の間隔は余りで決まる）。
   「児童発達支援スクール一覧」はSP幅で 文字230px＋左右padding64px＋アイコン22px
   ＝316px と、ボタン幅327pxに対して余りが11pxしかない。ここを16pxにすると
   入りきらずに文字が2行に折れるので、Figmaの実測（11px）を下回る8pxにしている。 */
.rnw-cd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px 32px;      /* Figma実測 */
  border-radius: 65.96px;  /* Figma実測 */
  font-family: var(--rnw-font-jp);  /* Figma SP/button/big */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-decoration: none;
}

.rnw-cd-btn--fill {
  border: 0.745px solid #FFFFFF;  /* Figma実測 */
  background-color: var(--rnw-main);
  color: #FFFFFF;
}

.rnw-cd-btn--outline {
  border: 2px solid var(--rnw-main);  /* Figma実測 */
  background-color: #FFFFFF;
  color: var(--rnw-main);
}

/* 「おすすめのスクール」だけ Zen Kaku ではなく MOBO-Bold で行送りも1.8
   （Figma 129:28609 ほか）。同じボタン部品でも指定が違うので分けている。 */
.rnw-cd-btn--mobo {
  font-family: var(--rnw-font-educare-title);
  line-height: 1.8;
}

/* 遷移先未確定のボタン。<a> ではなく <span> で出しているので、
   リンクに見えないようカーソルだけ戻す（見た目はデザインどおり）。 */
.rnw-cd-btn--pending,
.rnw-cd-menu__item--pending { cursor: default; }

/* 丸矢印。アセットは下向きで書き出されているので -90度回して右向きにする。
   mask の共通指定は common.css の .rnw-icon が持っている。 */
.rnw-cd-btn__icon {
  width: 22px;  /* Figma実測 */
  height: 22px;
  -webkit-mask-image: url('../../img/icon_arrow_circle.svg');
          mask-image: url('../../img/icon_arrow_circle.svg');
  transform: rotate(-90deg);
}

/* --- メニュー項目（Figma 129:28488 ほか）--- */
.rnw-cd-menu__list > li {
  display: flex;
}

.rnw-cd-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-text);
  text-decoration: none;
}

.rnw-cd-menu__label {
  font-family: var(--rnw-font-jp);  /* Figma common/text/caption */
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-cd-menu__icon {
  width: 14px;  /* Figma実測 */
  height: 14px;
  -webkit-mask-image: url('../../img/nursery-school/icon_menu_caret.svg');
          mask-image: url('../../img/nursery-school/icon_menu_caret.svg');
}


/* =====================================================================
   2. メインビジュアル（Figma 129:28419）
   ===================================================================== */

/* Figmaのフレーム塗りは #FDF6F4 の単色だが、内側のテキスト面と波形には
   紙テクスチャが乗っている。地色・テクスチャとも .rnw-cd から継承させる。 */
.rnw-cd-mv {
  position: relative;
}

.rnw-cd-mv__ph {
  width: 100%;
  height: 400px;  /* Figma実測 129:28421 */
}

/* 写真の下端に70px重なるテキスト面（Figma 129:28420 の mb-70）。
   下余白0.49pxはFigmaのフレーム高さ448pxとの差分。 */
.rnw-cd-mv__panel {
  position: relative;
  margin-top: -70px;
  padding: 52.31px 16px 0.49px;  /* Figma実測 テキスト面 mt52.31 */
}

/* 波形（Figma 129:28423 Union）。パス933と同一シェイプに紙テクスチャが
   乗ったもの。アセットを増やさないよう wave.svg のマスク＋テクスチャ背景で描く。 */
.rnw-cd-mv__panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 375.192 / 89.3069;  /* Figma実測 */
  background-color: #FDF6F4;
  background-image:
    linear-gradient(rgba(253, 246, 244, 0.96), rgba(253, 246, 244, 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;
  -webkit-mask-image: url('../../img/school-children/wave.svg');
          mask-image: url('../../img/school-children/wave.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left top;
          mask-position: left top;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  pointer-events: none;
}

.rnw-cd-mv__head {
  position: relative;  /* 波形より前面に出す */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;  /* Figma実測 129:28426 */
  text-align: center;
}

.rnw-cd-mv__en {
  font-family: 'Krona One', sans-serif;  /* Figma実測 */
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
  color: var(--rnw-accent);
}

.rnw-cd-mv__h1 {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 32px;                             /* SP/title/educare/h1 */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main2);
}

/* リード文（Figma SP 363:29732 ／ PC 453:38250）。
   SPのFigmaでは下のイラスト帯のセクション（363:29729）の中にあるが、
   PCではFV左カラムの一部なのでマークアップはMV側に置いている。
   SPの見た目を元どおりにするため、
   12.49px ＝ テキスト面の下余白0.49px ＋ 帯セクションの上余白12px。
   左右8px ＝ テキスト面の16px と合わせて24px（Figma実測）。 */
.rnw-cd-mv__lead {
  position: relative;  /* 波形より前面に出す */
  z-index: 1;
  margin-top: 12.49px;
  padding: 0 8px;
  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-text);
  text-align: left;
}

/* FV下部の斜線はPCだけ（Figma 453:38251）。 */
.rnw-cd-mv__deco {
  display: none;
}


/* =====================================================================
   3. イラスト帯（Figma 363:29733）
   ---------------------------------------------------------------------
   リード文はMV側（.rnw-cd-mv__lead）に移したので、ここは帯だけ。
   上余白24pxはFigmaのリード文 → 帯の間隔。PCでは出さない。
   ===================================================================== */

.rnw-cd-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0;  /* Figma実測（下余白なし） */
}

/* イラスト帯（Figma 363:29733）。親の左右24pxを打ち消して全幅で出す。 */
/* ▼2026-09-22 の更新でイラスト帯からピンクの円2つに変わった。
     ナーサリー・トップ・アフタースクールと同じ図形だったので
     renewal/img/front/mv_circles_sp.svg をそのまま流用する（複製しない）。 */
.rnw-cd-lead__illust {
  width: calc(100% + 48px);
  margin: 0 -24px;
  aspect-ratio: 375.192 / 89.3069;  /* 書き出しSVGの viewBox */
  background-image: url('../../img/front/mv_circles_sp.svg');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  mix-blend-mode: multiply;
}


/* =====================================================================
   4. ページ内メニュー（Figma SP 363:29771 ／ PC 453:38276）
   ===================================================================== */

.rnw-cd-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;           /* Figma実測 */
  padding: 44px 24px;  /* Figma実測 */
}

/* ▼施設検索カード（旧 .rnw-cd-search）のスタイルは削除した。
   コメント 363:30230「施設検索ボタン削除」でSP・PCとも新デザインから消え、
   マークアップごと外したため。戻す場合は school.css の .rnw-is-search 一式が
   同じコンポーネント（フッターの施設検索カードと共通）なのでそこから移せる。 */

/* ------------------------------------
   4-2. ページ内メニュー（Figma 129:28486）
------------------------------------ */
.rnw-cd-menu {
  width: 100%;
  padding: 24px 16px;  /* Figma実測 */
  border-radius: 20px;
  background-color: var(--rnw-bg2);  /* educare/bg2 #E7EFFB */
}

/* 2列×3行。Figmaは項目幅141px固定・行間20px・列間12px。 */
.rnw-cd-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 141px);
  gap: 20px 12px;  /* Figma実測 */
  justify-content: center;
}


/* =====================================================================
   5. スライダー（特徴 129:28549 ／ 利用者の声 129:28668 で共通）
   ---------------------------------------------------------------------
   スクロールはCSS（overflow-x + scroll-snap）、前後ボタンと進捗バーは
   renewal/js/front.js が [data-rnw-slider] 契約で制御する。
   JSが落ちても指でのスワイプはそのまま効く。

   ※このページは左右16pxの余白を親側（.rnw-cd-features / .rnw-cd-voice）が
     持っているので、.rnw-cd-slider 自体には padding を付けていない。
   ===================================================================== */

.rnw-cd-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 コントロール → カード列 */
  width: 100%;
}

.rnw-cd-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;  /* Figma実測 */
  height: 24px;
}

/* Figma の swiper_prev2.svg は swiper_next2.svg と同一グラフィックの180度回転
   なので、アセットは1本だけ持ち「前へ」はCSSで回す。 */
.rnw-cd-slider__btn {
  flex-shrink: 0;
  width: 24px;  /* Figma実測 */
  height: 24px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-image: url('../../img/front/icon_slider_next.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.rnw-cd-slider__btn--prev { transform: rotate(180deg); }

/* --next は既定の向きのままなのでスタイルを持たせていない。
   --prev と対になる目印としてマークアップにだけ付けている。 */

/* Figmaでは先頭表示のため「前へ」が opacity 50%。
   JSが disabled を立てると同じ見た目になる。 */
.rnw-cd-slider__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

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

.rnw-cd-slider__bar-thumb {
  position: absolute;
  top: -1px;   /* Figma実測 */
  left: 0;
  width: 40%;  /* JSがスクロール量から上書きする */
  height: 3px; /* Figma実測 */
  border-radius: 10px;
  background-color: var(--rnw-main);
}

/* カード列。親の左右16pxを打ち消して全幅で流し、内側で16pxを取り直す
   （Figmaの Features フレームが親より広い375pxで置かれ、その内側で
     px16 を取っている構造をそのまま再現している）。 */
.rnw-cd-slider__track {
  display: flex;
  align-items: stretch;
  gap: 16px;  /* Figma実測 */
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* 旧Edge */
}
.rnw-cd-slider__track::-webkit-scrollbar { display: none; }

/* カード（特徴 129:28566 ほか／利用者の声 129:28685 ほか）。
   両方まったく同じ組みなので共通クラスにしている。角丸なしはデザインどおり。
   ※利用者の声のカードはFigmaで高さ458px固定だが、原稿が確定すると
     文字量が変わるため、ここでは列内で高さを揃える（align-items:stretch）
     方式にしている。 */
.rnw-cd-fcard {
  display: flex;
  flex: 0 0 300px;  /* Figma実測 */
  flex-direction: column;
  background-color: #FFFFFF;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);  /* Figma実測 drop */
  scroll-snap-align: start;
}

.rnw-cd-fcard__ph {
  width: 100%;
  height: 200px;  /* Figma実測 */
}

.rnw-cd-fcard__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;  /* Figma実測 */
  padding: 16px;
  background-color: #FFFFFF;
}

/* このカードは見出しも本文も Zen Kaku Gothic New（Figma SP/title/h3 と
   SP/text/defalut/medium）。MOBO系ではない。 */
.rnw-cd-fcard__title {
  width: 100%;
  font-family: var(--rnw-font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-align: center;
}

.rnw-cd-fcard__text {
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-align: justify;
}


/* =====================================================================
   6. ポピンズの児童発達支援とは？＋特徴（Figma 129:28524）
   ===================================================================== */

/* セクション枠自体は塗り無し（.rnw-cd の紙テクスチャ地が出る）。
   波形の下から白地になる。 */
.rnw-cd-service {
  display: flex;
  flex-direction: column;
}

.rnw-cd-service__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;             /* Figma実測 見出し → リード → 特徴 */
  padding-bottom: 56px;  /* Figma実測 */
  background-color: #FFFFFF;
}

.rnw-cd-service__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 本文 → ボタン */
  width: 100%;
  padding: 0 24px;
}

/* このリード文だけ MOBO ではなく Zen Kaku Gothic New Medium（Figmaのトークン
   SP/text/defalut/medium。ウェイト名の綴りはFigma側の表記ママ）。 */
.rnw-cd-service__text {
  width: 100%;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-align: justify;
}

/* 特徴（Figma 129:28547）。上の余白はセクションの gap 24px ＋ ここの 56px。 */
.rnw-cd-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 56px 16px 0;  /* Figma実測 */
  background-color: #FFFFFF;
}


/* =====================================================================
   7. 親子に寄り添う、オーダーメイド支援（Figma 129:28587）
   ===================================================================== */

/* 上下グラデーション地（Figma educare/gra2）。
   common.css の --rnw-contact-gra は開始色が #FFFFFF だが、ここは #F3F5F6。
   停止位置52.404%は同じ。値が違うので変数は使わず実測値で置いている。 */
.rnw-cd-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80px;  /* Figma実測 */
  background-image: linear-gradient(to bottom, #F3F5F6 0%, #6F9CD9 52.404%);
}

.rnw-cd-support__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 見出し → 項目 */
  width: 100%;
}

.rnw-cd-support__list {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* Figma実測 */
  width: 100%;
  padding: 0 16px;
}

/* 枠付きの項目（Figma 129:28603 ほか）。角丸なし。
   ※Figmaでは外枠（1px）と見出し帯（1px）の両方に罫線が引かれており、
     見出し帯の上・左・右は2本ぶん重なって見える。デザインどおりに
     そのまま再現している（1本にしたい場合は下の __head から border を外す）。 */
.rnw-cd-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--rnw-main);  /* Figma実測 */
  background-color: #FFFFFF;
}

.rnw-cd-item__head {
  width: 100%;
  padding: 16px 26px;  /* Figma実測 363:29890 */
  border: 1px solid var(--rnw-main);
  background-color: var(--rnw-bg2);
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 18px;     /* SP/title/educare/text/large */
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  text-align: center;
}

/* コメント 363:30271「ボタン削除、画像差し込み」で、
   「おすすめのスクール」ボタンが外れ、写真が入った。 */
.rnw-cd-item__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;  /* Figma実測 363:29892 */
  width: 100%;
  padding: 16px;
}

/* 項目の写真（Figma 363:29893 ほか／PC 453:38378）。
   SPは 311×200、PCは 250×160。 */
.rnw-cd-item__ph {
  width: 100%;
  height: 200px;  /* Figma実測 */
}


/* =====================================================================
   8. スクールのご紹介（Figma 129:28631）
   ---------------------------------------------------------------------
   このセクションだけ上端に波形が無い。前セクションと同じグラデーションが
   もう一度始まるが、見出し写真（全幅200px）が境目を覆うため段差は出ない。
   ===================================================================== */

.rnw-cd-school {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 80px;  /* Figma実測 */
  background-image: linear-gradient(to bottom, #F3F5F6 0%, #6F9CD9 52.404%);
}

.rnw-cd-school__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 */
  width: 100%;
}

.rnw-cd-school__list {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* カードが増えたときの間隔 */
  width: 100%;
  padding: 0 16px;
}

/* スクールカード（Figma 129:28646）。
   地色は白の90%で、下のグラデーションを少し透かす。 */
.rnw-cd-scard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測 */
  width: 100%;
  padding: 24px 16px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.9);
}

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

/* 対応年齢・種別のタグ（Figma 129:28649 / 129:28650）。角丸8pxの箱型。 */
.rnw-cd-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;                          /* Figma実測 */
  border: 0.745px solid var(--rnw-main);  /* Figma実測 */
  border-radius: 8px;
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);  /* Figma SP/button/small */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  text-align: center;
}

.rnw-cd-scard__title {
  width: 100%;
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  text-align: center;
}

.rnw-cd-scard__media {
  display: flex;
  flex-direction: column;
  gap: 12px;  /* Figma実測 */
  width: 100%;
}

.rnw-cd-scard__ph {
  width: 100%;
  height: 200px;  /* Figma実測 */
}


/* =====================================================================
   9. 利用者の声（Figma 129:28660）
   ===================================================================== */

.rnw-cd-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;              /* Figma実測 見出し → スライダー */
  padding: 0 16px 80px;   /* Figma実測 */
  background-color: #FFFFFF;
}


/* =====================================================================
   9-2. 追従CTA
   ---------------------------------------------------------------------
   renewal/css/common.css「8. SPの追従CTA」へ移した。
   同じデザインが4ファイルに複製されていたため1本化している。
   マークアップは footer.php、有無・文言は
   renewal/functions-renewal.php の RNW_PAGE_CTA。
   ===================================================================== */


/* =====================================================================
   10. よくあるご質問（Figma 129:28709）
   ---------------------------------------------------------------------
   Q&A本体はショートコード [educare_faq] の出力に委ねているため、ここは
   セクション枠と見出しだけ。出力側のスタイルは renewal/css/faq.css。
   ===================================================================== */

.rnw-cd-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;           /* 見出し → ショートコード出力の間 */
  padding: 56px 24px;  /* Figma実測 */
  /* 地色・テクスチャは .rnw-cd から継承 */
}


/* =====================================================================
   11. PC（Figma 453:38227 ／ 1440×9576）
   ---------------------------------------------------------------------
   ■ 横幅の考え方（nursery-school / school-children / school と同じ）
     Figmaは1440固定だが、写真が画面端まで抜けるデザイン（FV・見出しブロック・
     利用者の声）なのでページ全体は固定幅にせず、地色と写真は全幅、中身だけを
     中央寄せする。Figmaの左右余白はセクションごとに3種類あるので変数にしている。
     1440より広い画面では中身が中央に寄り、狭い画面では24pxまで詰まる。

   ■ Figmaと違えているところ
     1. ページ内メニューのラベル。PCフレーム（453:38278）が
        「5つの特徴／教育方針／1日の流れ／保護者アンケート／よくあるご質問／
         お問い合わせ」とナーサリースクールのままなので、SP（363:29773）の
        6項目を採用している。本文は共通なのでデザイン側が直れば自動で追従する。
     2. オーダーメイド支援の見出し写真。SPフレーム（363:29878）はグレーの
        ベタ塗りのままだが、PCフレーム（453:38360）に写真が入っているので
        支給済みと判断してSP/PCとも出している。
     3. 利用者の声のカード枚数。PCフレームは5枚だが中身は全てダミーなので、
        SPと同じ4枚に揃えている（非CMSなのでマークアップの足し引きで増減する）。
     4. スクールのご紹介の見出し写真。PCフレーム（453:38404）には無いので
        PC幅では消している（SPフレームにはグレーの枠がある）。
   ===================================================================== */

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

  /* ---------------------------------------------------------------
     11-0. 全体
     --------------------------------------------------------------- */

  /* ▼ 変数の中の 100% は、変数を「使う側」の包含ブロック幅で解決される。
        以下で使っているのはすべて全幅のブロックなので画面幅と一致する。 */
  .rnw-cd {
    --cd-pad-1280: max(24px, calc((100% - 1280px) / 2));
    --cd-pad-1248: max(24px, calc((100% - 1248px) / 2));
    --cd-pad-1200: max(24px, calc((100% - 1200px) / 2));
    padding-top: var(--rnw-header-h-pc);
  }

  .rnw-cd-service,
  .rnw-cd-features,
  .rnw-cd-support,
  .rnw-cd-school,
  .rnw-cd-voice,
  .rnw-cd-faq {
    scroll-margin-top: var(--rnw-header-h-pc);
  }

  /* PCのFigmaにしか無い改行を出す。 */
  .rnw-cd-pc-only,
  .rnw-cd-br-pc { display: inline; }

  /* 波形。SPは幅に対する比率で高さが決まるが、PCは画面幅によらず160px固定
     （Figma 453:38315 / 453:38356 / 453:38402 の帯）。 */
  .rnw-cd-wave {
    height: 160px;
    aspect-ratio: auto;
    /* ▼2026-09-22 PCの円弧はSPと別形（1440×160 / r=1670.22）。 */
    -webkit-mask-image: url('../../img/front/wave_arc.svg');
            mask-image: url('../../img/front/wave_arc.svg');
  }

  /* スクールのご紹介の上端の波形はPCだけ（Figma 453:38402）。 */
  .rnw-cd-wave--pc { display: block; }

  /* 本文テキスト（PC/educare/text/small = MOBO-SemiBold 18px）。
     スクールカードだけ別指定なので 11-7 で戻す。 */
  .rnw-cd-text {
    font-size: 18px;
    font-weight: 600;
  }


  /* ---------------------------------------------------------------
     11-1. セクション見出しブロック
     写真あり … 児童発達支援とは？ 453:38319（写真右・カード左）
                オーダーメイド支援 453:38359（写真左・カード右）
                利用者の声 453:38431（全幅の写真帯・カード中央）
     写真なし … スクールのご紹介 453:38406 ／ FAQ 453:38487
     --------------------------------------------------------------- */

  .rnw-cd-head {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: 0 var(--cd-pad-1200);
  }

  .rnw-cd-head__ph {
    flex: 0 1 1000px;  /* Figma実測。狭い画面では縮める */
    width: auto;
    height: 530px;     /* Figma実測 453:38320 ▼ 2026-08-30 12章で上書き（iPad縦の比率保持） */
    border-radius: 20px;
  }

  .rnw-cd-head__card {
    position: absolute;
    top: 50%;
    flex-direction: row;
    gap: 40px;         /* Figma実測 */
    width: 510px;      /* Figma実測 453:38323 */
    max-width: calc(100% - var(--cd-pad-1200) * 2);
    height: 200px;
    margin-top: 0;     /* SPの写真への食い込み（-40px）は使わない */
    padding: 24px;
    /* reveal の移動は translate を使っているのでここと衝突しない。 */
    transform: translateY(-50%);
  }

  .rnw-cd-head--noimage {
    justify-content: center;
  }

  .rnw-cd-head--noimage .rnw-cd-head__card,
  .rnw-cd-head__card--plain {
    position: static;
    width: auto;
    max-width: none;
    height: auto;
    transform: none;
  }

  /* FAQ の見出しは地色も内側余白も持たない（Figma 453:38487）。 */
  .rnw-cd-head__card--plain {
    padding: 0 24px;
  }

  /* アイコンはSPのちょうど2倍（Figma実測 高さ80px）。 */
  .rnw-cd-head__icon {
    width: 84.444px;   /* Figma 453:38324 */
    height: 80px;
  }

  .rnw-cd-head__icon--faq {
    width: 111.457px;  /* Figma 453:38488 */
  }

  .rnw-cd-head__text { width: auto; }
  .rnw-cd-head__en   { font-size: 20px; }  /* Figma実測 */
  .rnw-cd-head__ja   { font-size: 32px; }  /* PC/educare/title/h2 */


  /* ---------------------------------------------------------------
     11-2. スライダー共通（PCで横スクロールが残るのは利用者の声だけ）
     Figma 453:38440
     --------------------------------------------------------------- */

  .rnw-cd-slider__ctrl {
    width: 400px;      /* Figma実測 */
    height: 40px;
  }

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

  .rnw-cd-slider__bar { width: 260px; }  /* Figma実測 */

  .rnw-cd-slider__bar-thumb {
    top: -1.67px;      /* Figma実測 */
    height: 4px;
    border-radius: 16.736px;
  }


  /* ---------------------------------------------------------------
     11-3. メインビジュアル（Figma 453:38230）
     写真は右端まで抜け、テキストは左。下端に装飾が3枚重なる。
       背面 … パス933（fv_wave.svg）→ イラスト（fv_illust.png）
       前面 … 斜線（fv_stripes.png / .rnw-cd-mv__deco）
     3枚ともナーサリースクールのPC版FVとサイズ・位置が一致したので
     img/nursery-school/ のアセットをそのまま流用している（複製しない）。
     --------------------------------------------------------------- */

  .rnw-cd-mv {
    height: 750px;   /* Figma実測 */
    overflow: hidden;
    background-color: #FFFFFF;
  }

  .rnw-cd-mv::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    /* ▼2026-09-22 イラスト（fv_illust.png）は新デザインで無くなった。
         残るのはパス933だけ（1440×349.447 / #FAF8F2）。 */
    background-image: url('../../img/nursery-school/fv_wave.svg');
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 349.447px;  /* Figma実測 453:38231 */
    pointer-events: none;
  }

  /* 斜線（Figma 453:38251）。左24.673%＝355.285/1440。
     Figmaでは 1187.8×156.4 で右と下にはみ出しているので、
     枠内に見えている 1084.715×146.729 ぶんだけを出している。 */
  .rnw-cd-mv__deco {
    display: block;
    position: absolute;
    z-index: 2;
    /* ▼2026-09-22 斜線（fv_stripes.png）からピンクの円2つに変わった（1440×184）。
         書き出したSVGが img/nursery-school/fv_circles.svg と一致したので流用する。
         Figmaでは最前面にあり写真の上にも重なる。掛け算で重ねる。 */
    inset: 0;
    background-image: url('../../img/nursery-school/fv_circles.svg');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;  /* SVGは1440×184。高さは幅に追従 */
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* 写真（Figma 453:38243）。右端まで抜けるので左側だけ角丸。
     幅は 800/1440 の比率で持つ（px固定にするとタブレット幅で痩せるため）。 */
  .rnw-cd-mv__ph {
    position: absolute;
    z-index: 1;
    top: 80px;   /* Figma実測 */
    right: 0;
    /* ▼2026-09-22 1440px以上の 800px 頭打ち（min()）をやめた。
       テキスト側は画面が広がるほど右へ寄るのに写真だけ800pxで止まるため、
       増えた幅がまるごと中央の余白になっていた（ナーサリースクールと同じ対応）。
       1440px以下は 55.556% < 800px なので見た目は変わらない。
       ▼2026-09-26 800px 頭打ちに戻した（ナーサリースクール・アフタースクールと同じ対応）。
       高さ590px固定のまま幅だけ伸びると枠が横長になり、写真の上下が削られて顔が切れるため。
       1441px以上はテキストと写真の間が空くが、それは許容（ハワイ英語と同じ形）。 */
    width: min(800px, 55.556%);  /* 800 / 1440。1441px以上は800pxで止める */
    height: 590px;
    border-radius: 20px 0 0 20px;
  }

  /* SPの波形（363:29723 Union）はPCでは使わない。 */
  .rnw-cd-mv__panel::before { content: none; }

  /* 左のテキストカラム（Figma 453:38245）。上下中央。
     幅はFigma実測450pxだが、写真（右44.444%〜）と最低24px空けたいので、
     残りが450pxに満たない幅ではそちらに合わせて縮める。 */
  .rnw-cd-mv__panel {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: var(--cd-pad-1280);
    width: min(450px, calc(44.444% - var(--cd-pad-1280) - 24px));
    margin-top: 0;
    padding: 0;
    transform: translateY(-50%);
  }

  .rnw-cd-mv__head {
    align-items: flex-start;
    gap: 16px;      /* Figma実測 453:38246 */
    text-align: left;
  }

  .rnw-cd-mv__en { font-size: 20px; }  /* Figma実測 */
  .rnw-cd-mv__h1 { font-size: 48px; }  /* Figma実測 453:38248 */

  .rnw-cd-mv__lead {
    margin-top: 4px;   /* 453:38245 の gap 20px − 見出しブロックの gap 16px */
    padding: 0;
    font-size: 18px;   /* PC/educare/text/small */
  }


  /* ---------------------------------------------------------------
     11-4. イラスト帯
     PCではFV側に別デザインの装飾が入るのでセクションごと出さない。
     --------------------------------------------------------------- */

  .rnw-cd-lead { display: none; }


  /* ---------------------------------------------------------------
     11-5. ページ内メニュー（Figma 453:38276）
     施設検索カードが無いので、1000px幅のメニューを中央に置くだけ。
     --------------------------------------------------------------- */

  .rnw-cd-nav {
    padding: 80px 24px;  /* Figma実測（左右はメニューを中央に置くための逃げ） */
  }

  /* 252×3 ＋ 列間24×2 ＋ 左右padding24×2 の外側にさらに余白があり、
     Figmaの箱は1000px（453:38278）。 */
  .rnw-cd-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1000px;
    max-width: 100%;
    padding: 24px;
  }

  .rnw-cd-menu__list {
    grid-template-columns: repeat(3, 252px);  /* ▼ 2026-08-30 12章で上書き（iPad縦はみ出し対応） */
    gap: 24px;  /* Figma実測 */
  }

  .rnw-cd-menu__item { padding: 16px; }

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


  /* ---------------------------------------------------------------
     11-6. 児童発達支援とは？＋特徴（Figma 453:38317）
     見出しの写真は右寄せ、カードはその左に重なる。
     特徴はスライダーをやめて3列（1248 ＝ 400×3 ＋ 24×2）にする。
     --------------------------------------------------------------- */

  .rnw-cd-service__body {
    gap: 80px;                /* Figma実測 */
    padding: 80px 0 120px;    /* Figma実測 453:38317 */
  }

  /* 写真は右端から120px内側まで。カードは中身の左端から80px内側（実測200px）。 */
  .rnw-cd-service .rnw-cd-head {
    justify-content: flex-end;
    padding: 0 var(--cd-pad-1200) 0 0;
  }

  .rnw-cd-service .rnw-cd-head__card {
    left: calc(var(--cd-pad-1200) + 80px);
  }

  .rnw-cd-service__lead {
    gap: 80px;                      /* Figma実測 453:38332 */
    padding: 0 var(--cd-pad-1280);
  }

  /* PCは MOBO-SemiBold 18px の中央揃え（Figma 453:38333）。 */
  .rnw-cd-service__text {
    font-family: var(--rnw-font-educare-title);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }

  /* 施設検索ボタンは400px固定（Figma 453:38334）。 */
  .rnw-cd-service__lead .rnw-cd-btn {
    width: 400px;
    max-width: 100%;
  }

  /* 上の余白はセクションの gap 80px が持つ。 */
  .rnw-cd-features { padding: 0 var(--cd-pad-1248); }

  .rnw-cd-features .rnw-cd-slider__ctrl { display: none; }

  .rnw-cd-features .rnw-cd-slider__track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;   /* Figma実測 453:38336 */
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .rnw-cd-features .rnw-cd-fcard {
    flex: 0 0 400px;      /* Figma実測 453:38337 ▼ 2026-08-30 12章で上書き（iPad縦の2列化） */
    border-radius: 20px;
    overflow: hidden;     /* 角丸で写真の上端を切る */
    box-shadow: 0 4px 56px rgba(0, 0, 0, 0.08);
  }

  .rnw-cd-features .rnw-cd-fcard__body {
    gap: 12px;            /* Figma実測 */
    padding: 24px 40px;   /* Figma実測 453:38339 */
  }

  /* PCは MOBO 系に変わる（Figma 453:38340 / 453:38342）。 */
  .rnw-cd-features .rnw-cd-fcard__title {
    font-family: var(--rnw-font-educare-title);
    font-size: 24px;   /* PC/educare/title/h3 */
  }

  .rnw-cd-features .rnw-cd-fcard__text {
    font-family: var(--rnw-font-educare-title);
    font-size: 18px;   /* PC/educare/text/small */
    font-weight: 600;
  }


  /* ---------------------------------------------------------------
     11-7. 親子に寄り添う、オーダーメイド支援（Figma 453:38358）
     SPのグラデーション地はPCでは #E7EFFB のベタ塗り。
     見出しは写真が左・カードが右。項目は4列。
     --------------------------------------------------------------- */

  /* ▼波形の帯（Figma 453:38356）は「帯の地＝前セクションの色（白）／
       波形のシェイプ＝このセクションの色（bg2）」という重なり。
       セクション全体を bg2 で塗ると白い帯が消えて波形が見えなくなるので、
       上端160pxぶんだけ白のレイヤーを敷いている。
       .rnw-cd-wave--bg2 がその上に bg2 のシェイプを描く。 */
  .rnw-cd-support {
    padding-bottom: 120px;   /* Figma実測 453:38370 */
    background-color: var(--rnw-bg2);
    background-image: linear-gradient(#FFFFFF, #FFFFFF);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 160px;   /* 波形の帯の高さ */
    /* PCはグラデーション地を使わないので、SP用に付けた .rnw-gra-move
       （グラデーションのゆらぎ）は止める。ここの background-position を
       動かされると上端の帯がずれる。 */
    animation: none;
  }

  .rnw-cd-support__body { gap: 80px; }  /* Figma実測 */

  .rnw-cd-support .rnw-cd-head {
    justify-content: flex-start;
    padding: 0 0 0 var(--cd-pad-1200);
  }

  .rnw-cd-support .rnw-cd-head__ph { height: 535px; }  /* Figma実測 453:38360 ▼ 2026-08-30 12章で上書き（iPad縦の比率保持） */

  /* カードは中身の右端から70px内側（Figma実測 x730／幅520）。 */
  .rnw-cd-support .rnw-cd-head__card {
    left: auto;
    right: calc(var(--cd-pad-1200) + 70px);
    width: 520px;
  }

  .rnw-cd-support__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* ▼ 2026-08-30 12章で上書き（768～1024は2列） */
    gap: 24px;   /* Figma実測 453:38373 */
    padding: 0 var(--cd-pad-1200);
  }

  /* 見出し帯は2行組み（Figma 453:38376 は MOBO-SemiBold 20px）。 */
  .rnw-cd-item__head {
    font-size: 20px;
    font-weight: 600;
  }

  .rnw-cd-item__ph { height: 160px; }  /* Figma実測 453:38378 ▼ 2026-08-30 12章で上書き（≤1024は高さauto） */


  /* ---------------------------------------------------------------
     11-8. スクールのご紹介（Figma 453:38404）
     SPのグラデーション地はPCでは白。見出し写真はPCフレームに無い。
     カードは2列グリッド（いまは1枚なので左に置かれる）。
     --------------------------------------------------------------- */

  /* ▼こちらは逆向き。帯の地＝前セクションの bg2／シェイプ＝白（453:38402）。 */
  .rnw-cd-school {
    padding-bottom: 120px;   /* Figma実測 */
    background-color: #FFFFFF;
    background-image: linear-gradient(var(--rnw-bg2), var(--rnw-bg2));
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 160px;   /* 波形の帯の高さ */
    /* PCはグラデーション地を使わないので、SP用に付けた .rnw-gra-move
       （グラデーションのゆらぎ）は止める。ここの background-position を
       動かされると上端の帯がずれる。 */
    animation: none;
  }

  .rnw-cd-school__body { gap: 80px; }  /* Figma実測 */

  /* PCフレームには見出し写真が無い。 */
  .rnw-cd-school .rnw-cd-head__ph { display: none; }

  .rnw-cd-school .rnw-cd-head {
    justify-content: center;
    padding: 0 var(--cd-pad-1200);
  }

  /* 写真が無くなるのでカードは通常フローに戻す（Figma 453:38406）。 */
  .rnw-cd-school .rnw-cd-head__card {
    position: static;
    width: auto;
    max-width: none;
    height: 200px;
    padding: 24px 40px;
    background-color: var(--rnw-bg2);
    transform: none;
  }

  .rnw-cd-school__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;   /* Figma実測 453:38416 */
    padding: 0 var(--cd-pad-1200);
  }

  .rnw-cd-scard {
    padding: 40px;                /* Figma実測 453:38417 */
    background-color: #FAF7F2;    /* PCは紙色のカード（ベージュ）。▼2026-09-23 地色の一括置換で
                                     ピンクになっていたのを戻した */
  }

  .rnw-cd-tag { font-size: 18px; }  /* Figma実測 453:38420 */

  /* PCではタイトルが #E7EFFB の帯になる（Figma 453:38423）。 */
  .rnw-cd-scard__title {
    padding: 24px 0;
    border-radius: 8px;
    background-color: var(--rnw-bg2);
    font-family: var(--rnw-font-jp);  /* Figma 453:38424 Zen Kaku Gothic New Bold */
    font-size: 24px;
  }

  .rnw-cd-scard__media { gap: 24px; }   /* Figma実測 453:38422 */

  .rnw-cd-scard__ph { height: 300px; }  /* Figma実測 453:38425 ▼ 2026-08-30 12章で上書き（≤1024は高さauto） */

  /* 説明文 → ボタンだけ間隔が広い（Figma 453:38417 の gap 56）。
     他の子は24pxなので差分の32pxをボタン側に足している。 */
  .rnw-cd-scard > .rnw-cd-btn {
    width: 400px;
    max-width: 100%;
    margin-top: 32px;
  }

  /* スクールカードの説明文だけ Zen Kaku Gothic New Medium 16px
     （Figma 453:38427）。11-0 の MOBO 18px を戻す。 */
  .rnw-cd-scard .rnw-cd-text {
    font-family: var(--rnw-font-jp);
    font-size: 16px;
    font-weight: 500;
  }


  /* ---------------------------------------------------------------
     11-9. 利用者の声（Figma 453:38429）
     見出しは全幅400pxの写真帯に白80%のカードを重ねる。
     カード列はPCでも横スクロールのまま（Figma 453:38454 は1564pxで
     1280pxの枠からはみ出す）。
     --------------------------------------------------------------- */

  .rnw-cd-voice {
    gap: 56px;             /* Figma実測 */
    padding: 0 0 80px;     /* Figma実測 453:38429 */
  }

  .rnw-cd-voice .rnw-cd-head {
    justify-content: center;
    padding: 0;
  }

  .rnw-cd-voice .rnw-cd-head__ph {
    flex: 1 1 100%;
    width: 100%;
    height: 400px;      /* Figma実測 453:38432 */
    border-radius: 0;
  }

  /* 写真帯の中央に重なる白80%のカード（Figma 453:38433）。角丸なし。 */
  .rnw-cd-voice .rnw-cd-head__card {
    left: 50%;
    width: 640px;
    max-width: calc(100% - 48px);
    height: auto;
    padding: 32px;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
  }

  .rnw-cd-voice .rnw-cd-slider {
    gap: 32px;                      /* Figma実測 453:38438 */
    padding: 0 var(--cd-pad-1280);
  }

  /* カードは300pxのまま。枠からはみ出したぶんが横スクロールになる。 */
  .rnw-cd-voice .rnw-cd-fcard__body {
    padding: 16px;   /* Figma実測 453:38457 */
  }

  .rnw-cd-voice .rnw-cd-fcard__title {
    font-family: var(--rnw-font-educare-title);
    font-size: 24px;   /* Figma実測 453:38458 */
  }

  .rnw-cd-voice .rnw-cd-fcard__text {
    font-family: var(--rnw-font-educare-title);
    font-size: 18px;   /* Figma実測 453:38460 */
    font-weight: 600;
  }


  /* ---------------------------------------------------------------
     11-10. よくあるご質問（Figma 453:38485）
     --------------------------------------------------------------- */

  .rnw-cd-faq {
    gap: 56px;                       /* Figma実測 */
    padding: 80px var(--cd-pad-1200);
  }
}


/* ---------- モーション低減 ---------- */
@media (prefers-reduced-motion: reduce) {
  .rnw-cd-slider__track {
    scroll-behavior: auto;
  }
}


/* =====================================================================
   12. 調整ログ（2026-08-30～）
   ---------------------------------------------------------------------
   ここより下は、既存章の後に日付順で追記する調整履歴。
   ■ ルール
     ・変更は原則ここに追記し、既存章側には「▼ 日付 12章で上書き」の目印を残す。
     ・SP/PCで値を分ける場合は必ず @media で包む（素の追記はSP・PC両方に勝ってしまう）。
     ・元が複合セレクタなら同等以上の詳細度で書く。
   ===================================================================== */

/* --- 2026-08-30 ページ内メニュー：iPad縦（768～）で3列がはみ出す（PC上書き） --- */
@media only screen and (min-width: 768px) {
  .rnw-cd-menu__list { grid-template-columns: repeat(3, minmax(0, 252px)); }
}

/* --- 2026-08-30 見出しブロックの写真：iPad縦で固定高のため縦に間延び（PC上書き） --- */
/* 幅連動の aspect-ratio に。features=530、support=535。flexはgrowなしで幅≤1000px→高さも上限で頭打ち、PCは不変。 */
@media only screen and (min-width: 768px) {
  .rnw-cd-head__ph                   { aspect-ratio: 1000 / 530; height: auto; }
  .rnw-cd-support .rnw-cd-head__ph   { aspect-ratio: 1000 / 535; height: auto; }
}

/* --- 2026-08-30 特徴：iPad縦（768～871）で1列に落ちる（PC上書き） --- */
/* basisを344pxに下げる（折り返し判定はbasis基準でshrinkだけでは2列にならない）。max-widthで≥1248pxは従来の400px×3列。 */
@media only screen and (min-width: 768px) {
  .rnw-cd-features .rnw-cd-fcard { flex: 1 1 344px; max-width: 400px; }
}

/* --- 2026-08-30 オーダーメイド支援：iPad縦で4カラムは窮屈→768～1024は2カラム（PC上書き） --- */
/* SPは元々1カラム（flex縦積み）なので、768～1024に限定してSPには触れない。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-cd-support__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 2026-08-30 カード写真（オーダーメイドitem／スクールのご紹介scard）：固定高coverで切れる→高さauto（≤1024限定、PCは従来の固定高） --- */
/* 特徴カードの写真（fcard__ph）は未支給の空ボックスが混在するため対象外（autoだと潰れる）。 */
@media only screen and (max-width: 1024px) {
  .rnw-cd-item__ph               { height: auto; }
  .rnw-cd-item__ph .rnw-kb__img  { height: auto; }
  .rnw-cd-scard__ph              { height: auto; }
  .rnw-cd-scard__ph .rnw-kb__img { height: auto; }
}

/* --- 2026-09-01 スライダー：カード下のドロップシャドウが切れる（全ページ共通の修正） --- */
/* overflow-x:auto のトラックは横だけでなく下方向も切り抜くため、
   .rnw-cd-fcard の box-shadow(0 4px 28px) の下端が欠けて影が消えて見えていた。
   下に32pxの内側余白を取り、同じだけ負のマージンで戻す（front / consulting と同じ形）。
   ショートハンドだと既存の左右指定を潰すので longhand で足している。
   PCで overflow:visible になる「5つの特徴」だけは余白を戻す。 */
.rnw-cd-slider__track {
  padding-bottom: 32px;
  margin-bottom: -32px;
}

@media only screen and (min-width: 768px) {
  .rnw-cd-features .rnw-cd-slider__track {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* ▼2026-09-23 「特徴」へのページ内リンクが固定ヘッダーの下に潜る問題。
     common.css の scroll-margin は #container section[id] / article[id] だけが対象で、
     .rnw-cd-features は <div id="..."> なので効いていなかった。ここで同じ余白を持たせる。 */
.rnw-cd-features {
  scroll-margin-top: calc(var(--rnw-header-h-sp) + 16px);
}
@media only screen and (min-width: 768px) {
  .rnw-cd-features { scroll-margin-top: calc(var(--rnw-header-h-pc) + 16px); }
}

/* spのみ表示 */
.rnw-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .rnw-sp-only {
    display: block;
  }
}