@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル
   法人・自治体向け 保育園サービス紹介ページ専用CSS
   （/educare/service/consulting/）
   Figma: SP 363:44652 ／ PC 366:26160
   ---------------------------------------------------------------------
   ■ 改訂について（2026-08-26）
     旧デザイン（SP 129:41687・PCなし）から作り直した版。
     旧ファイルは _backup/20260826-consulting-renewal/ に退避済み。
     ・サービス一覧が「詳細／閉じる」のアコーディオンになった（8. 参照）
     ・PCデザインが起きたので、375px中央寄せの暫定対応を廃止し
       11. に本実装のPCブロックを置いている

   ■ 読み込み
     header.php が is_page('service/consulting') のときだけ、
     renewal/css/common.css の後に読み込む。

   ■ 名前空間
     旧 css/contents.css が `.consulting #corporation section` `.consulting
     #strengths .clm` のように **`.consulting` を祖先クラスとして使っている**
     （旧固定ページ本文が持っていたクラス）。そのためページ名をそのまま
     接頭辞にはできない。familycare の `rnw-nc-` と同じ考え方で `rnw-cs-`
     （cs = consulting service）を使う。
     `rnw` は旧CSS7ファイル（reset/common/contents/index/form/slick/aos）に
     1件も無いことを確認済み。

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

   ■ 画像・アイコン（すべて流用。このページ専用の新規アセットは無い）
     本文（固定ページ）側はPHPが動かず rnw_asset_url() を呼べないため、
     アイコンは全てこのCSSの mask-image / background-image（相対パス）で描画し、
     本文には src 属性を置いていない。
     ・img/icon_arrow_circle.svg          … ボタン内の丸矢印（common.css の
                                            .rnw-icon--arrow）とページ内メニューの
                                            下向き丸キャレット
     ・img/front/icon_slider_next.svg     … スライダーの前後ボタン（トップと同一）
     ・img/front/mv_illust.svg            … SPのMV下部イラスト帯
                                            （トップ 105:6674 と同一）
     ・img/front/texture_paper.jpg        … 紙テクスチャ（トップと同一）
     ・img/front/icon_service_head.svg    … PCのService見出しアイコン。
                                            Figma 366:26274 はトップの 105:6778 の
                                            ちょうど2倍サイズで、4つのVectorの色・
                                            相対位置が完全一致するため流用。
     ・img/consulting/icon_caret.svg      … 「詳細／閉じる」の三角キャレット
                                            （Figma weui:arrow-filled。旧版から継続）
     ・img/nursery-school/fv_wave.svg     … PCのMV下端の波形（Figma 366:26164 パス933）
     ・img/nursery-school/fv_illust.png   … PCのMV下部イラスト（Figma 366:26165）
     ・img/nursery-school/fv_stripes.png  … PCのMV下部の斜線（Figma 366:26183）
       ▲PC用の3点は、ナーサリースクールのPC版FV（318:21691 / 318:21692 /
         318:21710）とノードのサイズ・位置・回転が完全一致することを確認済み
         （1440×349.447 ／ 1706.2×1011.89 rotate16.21 ／ 1187.8×156.42 @355.29,603.27）。
         書き出し条件も同じなので複製せずそのまま参照している。

   ■ フォント
     見出しの MOBO はフォントワークスの商用フォントでWeb配信が未確定のため、
     --rnw-font-educare-title 経由で Zen Kaku Gothic New にフォールバックする。
     （変数の定義と経緯は common.css を参照）

   ■ 目次
     0. ルート・リセット
     1. 共通パーツ
     2. メインビジュアル
     3. 導入実績
     4. スライダー（導入実績・特徴で共通）
     5. ページ内メニュー帯
     6. ポピンズグループの特徴
     7. サービス一覧（セクション枠）
     8. サービスカード（アコーディオン）
     9. 展開パネルの中身（サポート内容・ご利用の流れ）
    10. 追従CTA
    11. PC（min-width:768px）
   ===================================================================== */


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

.rnw-cs {
  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白。
     旧CSS側の上余白は #key_field / main にしか付かず、新マークアップは
     どちらも持たないためここで確保する。 */
  padding-top: var(--rnw-header-h-sp);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

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

/* :where() で詳細度0にしておく（2026-09-03 写真支給に伴い .rnw-cs img から変更）。
   ここを .rnw-cs img（0-1-1）で書くと height:auto が
   common.css の .rnw-kb__img（0-1-0）の height:100% に勝ってしまい、
   写真枠（.rnw-cs-head__ph 等）の固定高さに収まらず高さが崩れる。 */
:where(.rnw-cs) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 写真はSPとPCでトリミング比率が違うため <picture> ＋ <source media> で
   出し分けている（nursery-school と同じ作り）。
   display:contents にしておくと <picture> がボックスを作らず、
   flex / grid の子は <img> のままになる。
   ＝ <picture> を挟む前に書いたレイアウト指定がそのまま効く。 */
:where(.rnw-cs) picture {
  display: contents;
}

/* 見出し・段落のブラウザ既定マージンと旧CSSの余白を打ち消す。
   詳細度は :where() で0、:is() の中身（要素）で 0-0-1。
   コンポーネント側のクラス（0-1-0）には負けるので、
   カードやタグの内側余白を巻き込まない。 */
:where(.rnw-cs) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

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

:where(.rnw-cs) :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 が持つ。 */

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


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

/* --- 写真プレースホルダー ---
   写真が未支給のため #D9D9D9 のベタ塗りで組んでいる。
   （Figma上はグレー #626262 のベタ塗りだが、未支給枠であることが分かるよう
     front.css / familycare / professional と同じ #D9D9D9 で統一している）
   支給後は該当要素を <img class="rnw-cs-ph …"> に置き換えれば
   width/height/object-fit がそのまま効く。 */
.rnw-cs-ph {
  background-color: #D9D9D9;
  object-fit: cover;
}

/* --- 紙テクスチャ地（Figma 363:44774: 地色 educare/bg-tex #FDF6F4 ＋
       テクスチャ opacity 4% ／タイル 1228.8 × 819.3px）---
   4%の重ねを擬似要素なしで再現するため、地色を96%の単色レイヤーとして
   テクスチャの上に敷いている（＝テクスチャを4%で透かしたのと同じ見え方）。
   アセットはトップページと同一のものを流用している（複製しない）。 */
.rnw-cs-features {
  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;
}

/* --- グラデーション地（Figma educare/gra2 相当・363:44743 / 363:44823）---
   common.css の --rnw-contact-gra は開始色が #FFFFFF で別値のため、
   当ページ用に実測値でローカル定義する。 */
.rnw-cs-menu,
.rnw-cs-service {
  background-image: linear-gradient(to bottom, #F3F5F6 0%, #6F9CD9 52.404%);
}

/* --- タグ（Figma コンポーネント tag / 363:44664・363:44730）--- */
.rnw-cs-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 12px;                          /* Figma実測 */
  border: 0.745px solid var(--rnw-main);  /* Figma実測 */
  border-radius: 8px;
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  white-space: nowrap;
}

/* --- 見出し（Figma コンポーネント title/educare/h2 / 363:44780・363:44828）--- */
.rnw-cs-h2__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-cs-h2__jp {
  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 */
}

/* --- 見出し h3（Figma SP/title/h3 / 363:44709）--- */
.rnw-cs-h3 {
  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;
}

/* --- ボタン（形は common.css の .rnw-btn が持つ。色だけ差し替え）--- */

/* 塗り・赤（Figma common/accent/red #912344 / 363:44663 ほか）。
   common.css の .rnw-btn--main は educare/main #00429A で色が違うため、
   このページ用にローカル定義している。 */
.rnw-cs-btn--red {
  border: 0.745px solid #FFFFFF;      /* Figma実測 */
  background-color: var(--rnw-link);  /* #912344 */
  color: #FFFFFF;
}
.rnw-cs-btn--red .rnw-btn__icon { color: #FFFFFF; }

/* 白地・枠線（Figma 363:44734） */
.rnw-cs-btn--outline {
  border: 2px solid var(--rnw-main);
  background-color: #FFFFFF;
  color: var(--rnw-main);
}

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

/* --- 見出しブロック（写真帯＋カード。Figma 363:44776 / 363:44824）---
   写真は画面幅いっぱい（Figma実測 375px＝セクションの左右16pxを食い破る）、
   カードは343pxで写真に40px重なる。 */
.rnw-cs-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

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

.rnw-cs-head__card {
  /* margin-top のマイナス値だけでは写真に重ならない（2026-09-03 写真支給で顕在化）。
     CSSの描画順では、ブロックの背景（step 4）より <img> のような置換要素
     （インラインレベルの内容 / step 7）のほうが後に描かれるため、
     位置指定の無いカードは写真の下に潜ってしまう。
     写真が #D9D9D9 のベタ塗り <div> だった間は、どちらもブロックの背景で
     DOM順に描かれていたため問題にならなかった。
     position を付けて positioned な要素（step 8）にし、前面へ出す。 */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;                   /* Figma実測 366:26273（アイコンと文字の間。SPはアイコン無し） */
  width: calc(100% - 32px);    /* Figma実測 343 ＝ 375 − 16×2 */
  max-width: 343px;
  margin-top: -40px;           /* Figma実測 363:44776 の gap:-40 */
  padding: 24px;
  border-radius: 20px;
  background-color: #FFFFFF;
  text-align: center;
}

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

/* Service見出しのアイコン。SPフレームには無いのでPC幅でだけ出す（11-6.）。 */
.rnw-cs-head__icon {
  display: none;
}


/* =====================================================================
   2. メインビジュアル（Figma SP 363:44654 ／ PC 366:26163）
   ===================================================================== */

/* Figma 363:44655 は紙テクスチャ無しの単色 #FDF6F4。 */
.rnw-cs-mv {
  position: relative;
  background-color: #FDF6F4;
}

.rnw-cs-mv__media {
  position: relative;
  height: 400px;  /* Figma実測 363:44656 */
}

.rnw-cs-mv__ph {
  width: 100%;
  height: 100%;
}

/* 「自治体・法人のお客様」タグ（Figma 363:44664） */
.rnw-cs-mv__tag {
  position: absolute;
  top: 10px;   /* Figma実測 */
  left: 10px;
}

/* 白90%のテキスト面。写真の下端に約200px重なる（Figma実測 top 200.12）。 */
.rnw-cs-mv__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 32px);
  max-width: 343px;            /* Figma実測 363:44657 */
  margin: -199.88px auto 0;    /* Figma実測 写真高さ400 − テキスト面top200.12 */
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-cs-mv__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;        /* Figma実測 363:44658 */
  width: 100%;
  max-width: 298px; /* Figma実測 363:44658 */
}

.rnw-cs-mv__text {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 363:44659 */
  width: 100%;
}

/* Figma SP/title/educare/h1（MOBO-Bold 32px）。 */
.rnw-cs-mv__title {
  font-family: var(--rnw-font-educare-title);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-main2);
  text-align: center;
}

/* Figma 363:44662 は中央揃えの指定が無いので左揃えのまま。 */
.rnw-cs-mv__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: var(--rnw-text);
}

/* イラスト帯（Figma 363:44669）。
   トップページMV下部（105:6674）と同一アセットを流用している。
   ※ Figmaでは帯の上に12pxのテクスチャ地が乗るが、地色が下の .rnw-cs-mv と
      同じ #FDF6F4 でテクスチャは不透明度4%のため差が視認できない。
      要素を分けずイラストだけを置き、カード下端との実測差2.76pxだけ空けている。 */
/* ▼2026-09-22 の更新でイラスト帯からピンクの円2つに変わった。
     ナーサリー・トップ・アフタースクールと同じ図形だったので
     renewal/img/front/mv_circles_sp.svg をそのまま流用する（複製しない）。 */
.rnw-cs-mv__illust {
  margin-top: 2.76px;      /* Figma実測 イラスト上端478.88 − カード下端476.12 */
  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;
}


/* =====================================================================
   3. 導入実績（Figma SP 363:44707 ／ PC 366:26208）
   ===================================================================== */

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


/* =====================================================================
   4. スライダー（導入実績 363:44710 ／ 特徴 363:44782 で共通）
   ---------------------------------------------------------------------
   スクロールはCSS（overflow-x + scroll-snap）、前後ボタンと進捗バーは
   renewal/js/front.js が [data-rnw-slider] 契約で制御する。
   JSが落ちても指でのスワイプはそのまま効く。
   PC幅では横スクロールをやめてグリッドに組み替える（11-5. / 11-6.）。
   ===================================================================== */

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

/* ------------------------------------
   4-1. 前後ボタンと進捗バー
------------------------------------ */
.rnw-cs-slider__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;  /* Figma実測 */
  height: 24px;
}

/* アイコンは背景画像で描く（本文HTMLに src を置かないため）。
   Figma の swiper_prev2.svg は swiper_next2.svg と同一グラフィックの180度回転
   なので、アセットは1本だけ持ち「前へ」はCSSで回す。 */
.rnw-cs-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-cs-slider__btn--prev { transform: rotate(180deg); }

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

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

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

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

/* ------------------------------------
   4-2. カード列
   親の左右16pxを打ち消して全幅で流し、内側で16pxを取り直す。
   下方向はカードのドロップシャドウが切れないよう余白を確保している。
------------------------------------ */
.rnw-cs-slider__track {
  display: flex;
  gap: 16px;  /* Figma実測 */
  width: calc(100% + 32px);
  margin: 0 -16px -28px;
  padding: 0 16px 28px;
  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-cs-slider__track::-webkit-scrollbar { display: none; }

.rnw-cs-card {
  display: flex;
  flex: 0 0 300px;  /* Figma実測 */
  flex-direction: column;
  background-color: #FFFFFF;
  /* Figma実測 drop shadow 0 / 3.77 / 56.56 / 8% */
  box-shadow: 0 3.77px 56.56px rgba(0, 0, 0, 0.08);
  scroll-snap-align: start;
}

/* 特徴カードはFigmaで高さ483px固定。原稿差し替えで伸びる可能性があるため
   min-height にしている。 */
.rnw-cs-card--feature { min-height: 483px; }

.rnw-cs-card__ph {
  flex-shrink: 0;
  width: 100%;
  height: 200px;  /* Figma実測 */
}

/* Figma実測 Article は padding16 / gap12。
   導入実績カードだけボタンが <article> 直下（body の外）にあるため、
   本文の下padding（12px）とボタンの下マージン（16px）に割っている。 */
.rnw-cs-card__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 12px;
  background-color: #FFFFFF;
}

.rnw-cs-card--feature .rnw-cs-card__body { padding: 16px; }

.rnw-cs-card__btn {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
}

.rnw-cs-card__title {
  font-family: var(--rnw-font-jp);  /* Figma SP/title/h3 */
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  text-align: center;
}

.rnw-cs-card__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;
}


/* =====================================================================
   5. ページ内メニュー帯（Figma 363:44743）
   ===================================================================== */

.rnw-cs-menu {
  padding: 56px 16px;  /* Figma実測 */
}

.rnw-cs-menu__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;  /* Figma実測 */
  justify-content: center;
}

.rnw-cs-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;  /* Figma実測 */
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);  /* Figma実測 drop */
  color: var(--rnw-text);
  text-decoration: none;
}

/* 遷移先未確定の項目。<a> ではなく <span> で出しているのでカーソルだけ戻す。 */
.rnw-cs-menu__item--pending {
  cursor: default;
}

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

/* common.css の .rnw-icon--arrow と同じアセットだが、あちらは右向きにするため
   -90度回している。ここは下向きのまま使うので mask だけをローカル指定する。 */
.rnw-cs-menu__icon {
  width: 14px;  /* Figma実測 */
  height: 14px;
  -webkit-mask-image: url('../../img/icon_arrow_circle.svg');
          mask-image: url('../../img/icon_arrow_circle.svg');
}


/* =====================================================================
   6. ポピンズグループの特徴（Figma SP 363:44774 ／ PC 366:26231）
   ---------------------------------------------------------------------
   見出しブロックの写真を全幅で出すため、左右16pxはセクションではなく
   スライダー側に持たせている。
   ===================================================================== */

.rnw-cs-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;           /* Figma実測 */
  padding: 0 0 80px;   /* Figma実測 */
}

.rnw-cs-features__slider {
  width: 100%;
  padding: 0 16px;
}


/* =====================================================================
   7. サービス一覧（Figma SP 545:47918 ／ PC 366:26268）
   ===================================================================== */

.rnw-cs-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;           /* Figma実測 */
  padding: 0 0 80px;   /* Figma実測 */
}

.rnw-cs-service__list {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* Figma実測 545:47926 */
  width: 100%;
  padding: 0 16px;
}


/* =====================================================================
   8. サービスカード（アコーディオン）
   ---------------------------------------------------------------------
   JSを使わずに開閉する。
   ▼<details>/<summary> を使っていない理由
       <details> は閉じている間 <summary> 以外の子要素をすべて隠すため、
       「カード本体は常に見えていて、その下のボタンで展開部だけ開く」という
       このデザインには使えない（本体まで消えてしまう）。
       本体を <summary> の中に入れる手もあるが、1枚目のカードは本体に
       「お問い合わせ」の <a> を持っており、<summary> 内の入れ子リンクは
       ブラウザによって挙動が割れるため避けた。
       そこで「隠しチェックボックス ＋ <label>」の素直な作りにしている。
       ラベル（＝詳細ボタン）以外をクリックしても開かない点もデザインどおり。
   ▼余白は gap ではなく .rnw-cs-detail の margin-top で取っている
     （ボタンと展開パネルの間だけ 0 にしたいため）。
       閉：本体 →56px→ 詳細ボタン
       開：本体 →56px→ 閉じるボタン →0→ 展開パネル
   Figma 閉 545:47927 ／ 開 545:47996・545:48021・545:48091・545:48110
   ===================================================================== */

.rnw-cs-scard {
  position: relative;  /* 隠しチェックボックスの位置基準 */
  display: flex;
  flex-direction: column;
  padding: 24px 16px;                        /* Figma実測 */
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.9);
}

/* 開閉の状態を持つチェックボックス。見た目上は消すがフォーカスは受けるので、
   キーボードでも Space で開閉できる。 */
.rnw-cs-detail__toggle {
  /* ▼ 2026-09-09 12章で position:static 等に上書き（開いた時の上スクロール対策） */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rnw-cs-scard__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測 545:47945 */
  width: 100%;
}

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

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

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

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

/* 「詳細／閉じる」ボタン＝ <label>（Figma 545:47938 / 545:48008）。
   角丸なしの帯。開閉でラベルとキャレットの向きが入れ替わる。 */
.rnw-cs-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;              /* Figma実測 545:47938 / 545:48008（テキスト右端＝キャレット枠の左端）。
                          見た目の余白6pxは、24px幅のマスク枠の中でシェブロン（12px）が
                          中央に来ることで生まれる。旧デザインは24pxだった。 */
  margin-top: 56px;    /* Figma実測 545:47927 の gap */
  padding: 16px 8px;   /* Figma実測 */
  background-color: var(--rnw-main2);  /* educare/main2 #507CB8 */
  font-family: var(--rnw-font-jp);
  font-size: 18px;     /* SP/button/big */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/* キーボード操作時のフォーカス位置が分かるようにする
   （チェックボックス本体は見えないため、ラベルへ移して描く）。 */
.rnw-cs-detail__toggle:focus-visible + .rnw-cs-detail {
  outline: 2px solid var(--rnw-main);
  outline-offset: 2px;
}

/* ラベルの出し分け。閉じているときは「詳細」、開いているときは「閉じる」。 */
.rnw-cs-detail__label--close { display: none; }
.rnw-cs-detail__toggle:checked + .rnw-cs-detail .rnw-cs-detail__label--open  { display: none; }
.rnw-cs-detail__toggle:checked + .rnw-cs-detail .rnw-cs-detail__label--close { display: inline; }

/* キャレット（Figma weui:arrow-filled 12×24 を回転させたもの）。
   閉＝下向き、開＝上向き。 */
.rnw-cs-detail__icon {
  width: 24px;  /* Figma実測 */
  height: 12px;
  -webkit-mask-image: url('../../img/consulting/icon_caret.svg');
          mask-image: url('../../img/consulting/icon_caret.svg');
}

.rnw-cs-detail__toggle:checked + .rnw-cs-detail .rnw-cs-detail__icon {
  transform: rotate(180deg);
}

/* 展開パネル（Figma 545:48014 / 545:48039）。上だけ角丸8px。
   閉じている間は出さない。 */
.rnw-cs-panel {
  display: none;
  flex-direction: column;
  gap: 32px;  /* Figma実測 */
  padding: 24px 16px;
  border-radius: 8px 8px 0 0;
  background-color: #FFFFFF;
}

.rnw-cs-detail__toggle:checked ~ .rnw-cs-panel { display: flex; }

.rnw-cs-panel__block {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* Figma実測 */
}

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

/* 中身が未確定のカード（3・4枚目）は、白パネルに載らず画像枠だけが
   カードの内寸いっぱい（311px）に置かれる。Figma 545:48109 / 545:48128。
   旧デザインの実装では白パネルの中（＝279px幅）に入れていた。 */
.rnw-cs-panel--media {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

/* 仮枠の高さ。Figma 545:48109 = 311×591 ／ 545:48128 = 311×604。 */
.rnw-cs-panel__ph {
  width: 100%;
  aspect-ratio: 311 / 591;
}

.rnw-cs-panel__ph--tall {
  aspect-ratio: 311 / 604;
}

/* 区切り罫（Figma Vector 14 = 545:48017 / Vector 15 = 545:48048）。
   旧デザインの実線から、stroke-dasharray="2 2" の点線に変わった。
   描画は common.css の共通ユーティリティ .rnw-dash-b に任せる
   （hawaii.html の .rnw-hw-divider と同じ組み方）。色と太さは既定のまま
   ＝ --rnw-dash-c: var(--rnw-caption) #626262 ／ --rnw-dash-w: 1px。 */
.rnw-cs-rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
}


/* =====================================================================
   9. 展開パネルの中身（Figma 545:48045 / 545:48049）
   ===================================================================== */

/* --- 具体的なサポート内容（Figma 545:48045）--- */
.rnw-cs-support {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* Figma実測 */
  padding: 24px;
  background-color: #FDF6F4;  /* common/bg */
}

.rnw-cs-support__title {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold 545:48046 */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;  /* Figma実測（旧デザインは1.6） */
  letter-spacing: 1.2px;
  color: var(--rnw-main);
  text-align: center;
}

/* 本文は中黒つきの箇条書き（Figma 545:48047 ＝ 4項目のリスト、字下げ21px）。
   旧デザインは <br> で改行しただけのベタ書きだった。
   旧CSSが ul { list-style:none } を当てているので disc を明示する。 */
.rnw-cs-support__list {
  margin: 0;
  padding-inline-start: 21px;
  list-style: disc outside;
  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);
}

/* --- ご利用の流れ（Figma 545:48049）--- */
.rnw-cs-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;           /* Figma実測 見出し ↔ リスト */
  padding: 56px 16px;  /* Figma実測 */
  background-color: var(--rnw-bg2);  /* educare/bg2 #E7EFFB */
}

.rnw-cs-flow__title {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold / SP/title/educare/h2 */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 番号バッジを縦につなぐ線（Figma Vector 10 = 545:48054 / #00429A 2px）。
   left:37px は「項目の左padding12 ＋ バッジ半径25」＝バッジの中心。
   上下の端はFigma実測（上53px／下は下端から37px）に合わせている。
   ▼下端には下向きの矢じり（11.547×10）が付く（::after）。旧デザインには無かった。
     線（::before）はその分だけ手前で止めるので bottom は 37+10=47px。 */
.rnw-cs-flow__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;  /* Figma実測 */
}

.rnw-cs-flow__list::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 53px;
  bottom: 47px;
  left: 37px;
  width: 2px;
  margin-left: -1px;
  background-color: var(--rnw-main);
}

/* 縦線の下端の矢じり（Figma Vector 10 の三角部分 11.547×10）。
   ▼現状この矢じりは5項目めの白いカードの下に隠れて見えない。
     Figmaでも Vector 10 は List の最背面にあり、item05（y1255〜1519）が
     矢じりの位置（y1472〜1482）を覆っているため同じ見え方になる。
     デザイン側の意図どおりかは要確認だが、Figmaの見た目に合わせて
     そのまま最背面（z-index:0）に置いている。 */
.rnw-cs-flow__list::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 37px;
  left: 37px;
  width: 0;
  height: 0;
  margin-left: -5.774px;
  border-top: 10px solid var(--rnw-main);
  border-right: 5.774px solid transparent;
  border-left: 5.774px solid transparent;
}

.rnw-cs-flow__item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;          /* Figma実測 */
  padding: 16px 12px; /* Figma実測 */
  border-radius: 8px;
  background-color: #FFFFFF;
  overflow: hidden;
}

.rnw-cs-flow__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;   /* Figma実測 */
  height: 50px;
  border-radius: 50%;
  background-color: #FDF6F4;
  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);
}

.rnw-cs-flow__body {
  flex: 1 0 0;
  min-width: 0;
}

.rnw-cs-flow__head {
  font-family: var(--rnw-font-jp);  /* Figma SP/text/large/bold */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;  /* Figma実測 */
  color: var(--rnw-text);
}

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


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


/* =====================================================================
   11. PC（Figma 366:26160 / 1440×7016）
   ---------------------------------------------------------------------
   ブレークポイントは他ページ（nursery-school / school-children）と同じ768px。

   ▼PCフレームに無いのでPC幅では消しているもの
       ・MVのタグ「自治体・法人のお客様」（363:44664）
       ・MVの「お問い合わせ」ボタン（363:44663）
       ・追従CTA（363:44895）
   ▼PCフレームに無いが残しているもの
       ・ページ内メニュー帯（363:44743）
         nursery-school のPC対応と同じ扱いで、横1列に組んで出したままにする。
   ▼コンテンツ幅
       Figmaはどのセクションも 1440 に対して左右120px＝内容1200px。
       画面が狭いときは最低24pxまで詰める。
   ===================================================================== */

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

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

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

  .rnw-cs-results,
  .rnw-cs-features,
  .rnw-cs-service {
    scroll-margin-top: var(--rnw-header-h-pc);
  }


  /* ---------------------------------------------------------------
     11-1. メインビジュアル（Figma 366:26163）
     写真は右端まで抜け、テキストは左。下端に装飾が3枚重なる。
       背面 … パス933（fv_wave.svg）→ イラスト（fv_illust.png）
       前面 … 斜線（fv_stripes.png ＝ .rnw-cs-mv__illust）
     背面の2枚は重なり順が同じなので ::before に2レイヤーで置いている。
     --------------------------------------------------------------- */

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

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

  /* 写真（Figma 366:26176）。右端まで抜ける。
     幅は 800/1440 の比率で持つ。px固定＋「残りをテキストに」にすると
     タブレット幅（768px）で写真が痩せすぎるため。
     1440px以上では800pxで頭打ち（デザインどおり）。 */
  .rnw-cs-mv__media {
    position: absolute;
    z-index: 1;
    top: 80px;   /* Figma実測 */
    right: 0;
    width: min(800px, 55.556%);  /* 800 / 1440 */
    /* ▼2026-09-27 768〜1231px の高さ・768px以上の写真の基準位置・写真の左側の角丸は12章で上書き */
    height: 590px;
  }

  /* SPのみ（Figma PCフレームに無い） */
  .rnw-cs-mv__tag,
  .rnw-cs-mv__btn { display: none; }

  /* テキスト（Figma 366:26178 / 左80px・上239px・幅450px）。
     SPの白カードは背景を持たず、素のテキストブロックに戻す。 */
  .rnw-cs-mv__card {
    position: absolute;
    z-index: 2;
    top: 239px;                                       /* Figma実測 ▼2026-09-27 768〜1231px は12章で上書き */
    left: max(24px, calc((100% - 1280px) / 2));       /* 1440px時に80px */
    width: min(450px, calc(100% - 48px));             /* Figma実測 ▼2026-09-27 12章で上書き（写真にかぶる） */
    max-width: none;
    margin: 0;
    padding: 0;
    background-color: transparent;
  }

  .rnw-cs-mv__body {
    align-items: flex-start;
    gap: 20px;        /* Figma実測 366:26178 */
    max-width: none;
  }

  .rnw-cs-mv__text { gap: 16px; }  /* Figma実測 366:26179 */

  /* PC/title/educare/h1（MOBO-Bold 48px）。 */
  .rnw-cs-mv__title {
    font-size: 48px;
    text-align: left;
  }

  /* PCはリードも MOBO-Bold（Figma 366:26182）。SPの SemiBold と違う。 */
  .rnw-cs-mv__lead {
    font-size: 18px;
    font-weight: 700;
  }

  /* ▼2026-09-22 斜線（fv_stripes.png）からピンクの円2つに変わった
       （Figma 1781:11662 / 1440×184）。Ellipse 6・7 の座標がアフタースクール
       （1781:11886）と一致したので img/nursery-school/fv_circles.svg を流用する。
       写真の上にも重なる。掛け算なので写真がピンクに沈む。 */
  .rnw-cs-mv__illust {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: auto;
    height: auto;
    margin-top: 0;
    aspect-ratio: auto;
    background-image: url('../../img/nursery-school/fv_circles.svg');
    background-position: center bottom;
    background-size: 100% auto;  /* SVGは1440×184。高さは幅に追従 */
    mix-blend-mode: multiply;
    pointer-events: none;
  }


  /* ---------------------------------------------------------------
     11-2. 見出しブロック（写真＋カード）
     Figmaは特徴とサービスで写真とカードの左右が逆。
       特徴   … 写真が右（366:26233）／カードが左に重なる（366:26235）
       サービス … 写真が左（366:26272）／カードが右に重なる（366:26273）
     --------------------------------------------------------------- */

  .rnw-cs-head {
    position: relative;
    display: block;
    width: 100%;
  }

  .rnw-cs-head__card {
    position: absolute;
    gap: 40px;      /* Figma実測 */
    width: auto;
    max-width: none;
    margin: 0;
  }

  .rnw-cs-head__text { gap: 4px; }

  .rnw-cs-h2__en { font-size: 20px; }   /* Figma実測 366:26237 */
  .rnw-cs-h2__jp { font-size: 32px; }   /* Figma実測 366:26238 */

  /* ---- 特徴（Figma 366:26233）---- */
  .rnw-cs-features .rnw-cs-head {
    padding-right: var(--cs-pad-1200);
  }

  .rnw-cs-features .rnw-cs-head__ph {
    width: min(1000px, 69.444%);  /* 1000 / 1440 */
    height: 530px;                /* Figma実測 ▼ 2026-08-30 12章で上書き（iPad縦の比率保持） */
    margin-left: auto;
    border-radius: 20px;
  }

  /* ▼幅はFigma実測400pxだが、見出しの MOBO が Zen Kaku Gothic New に
        フォールバックすると「ポピンズグループの強み」が1行に収まらず折り返す。
        min-width を400pxに置いて width は中身なりに広げ、
        MOBOが入ったときはちょうど400pxになるようにしている。 */
  .rnw-cs-features .rnw-cs-head__card {
    top: 165px;                                      /* Figma実測 */
    left: max(24px, calc((100% - 1040px) / 2));      /* 1440px時に200px */
    width: max-content;
    min-width: min(400px, calc(100% - 48px));        /* Figma実測 */
    max-width: calc(100% - 48px);
    background-color: var(--rnw-bg2);                /* Figma実測 #E7EFFB */
  }

  /* ---- サービス（Figma 366:26270）----
     写真800とカード520を左右に置いた 1130px の塊を中央に寄せる。 */
  .rnw-cs-service .rnw-cs-head {
    width: min(1130px, calc(100% - 160px));  /* Figma実測 左右padding80 */
    margin: 0 auto;
  }

  .rnw-cs-service .rnw-cs-head__ph {
    width: 70.796%;   /* 800 / 1130 */
    height: 535px;    /* Figma実測 ▼ 2026-08-30 12章で上書き（iPad縦の比率保持） */
    border-radius: 20px;
  }

  .rnw-cs-service .rnw-cs-head__card {
    top: 167px;         /* Figma実測 */
    right: 0;
    width: 46.018%;     /* 520 / 1130 ▼2026-09-27 768〜1023px は12章で中身なりに上書き */
    min-width: 320px;
  }

  /* Service見出しのアイコン（Figma 366:26274）。
     トップの icon_service_head.svg（105:6778）と同一グラフィック。 */
  .rnw-cs-service .rnw-cs-head__icon {
    display: block;
    flex-shrink: 0;
    width: 84.44px;  /* Figma実測 */
    height: 80px;
    background-image: url('../../img/front/icon_service_head.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }


  /* ---------------------------------------------------------------
     11-3. スライダー → グリッド
     PCは前後ボタンも進捗バーも無く、カードが並ぶだけ。
     JS（front.js）はボタンが無ければ何もしないので、要素を消すだけでよい。
     --------------------------------------------------------------- */

  .rnw-cs-slider { gap: 0; }

  .rnw-cs-slider__ctrl { display: none; }

  .rnw-cs-slider__track {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .rnw-cs-card { flex: none; }


  /* ---------------------------------------------------------------
     11-4. 導入実績（Figma 366:26208）
     カードは「写真180×130＋テキスト」の横並び、ボタンは下段に中央寄せ。
     --------------------------------------------------------------- */

  .rnw-cs-results {
    gap: 80px;  /* Figma実測 */
    padding: 80px var(--cs-pad-1200) 120px;
  }

  /* PCの見出しは MOBO-Bold 32px・educare/main2（Figma 366:26211）。
     SPの Zen Kaku 20px・#444 とは別指定。 */
  .rnw-cs-results .rnw-cs-h3 {
    font-family: var(--rnw-font-educare-title);
    font-size: 32px;
    color: var(--rnw-main2);
  }

  .rnw-cs-results .rnw-cs-slider__track {
    grid-template-columns: repeat(2, 1fr);  /* ▼2026-09-27 768〜989px は12章で1列に上書き（右のカードがはみ出す） */
    gap: 24px;  /* Figma実測 */
  }

  .rnw-cs-card--result {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;           /* Figma実測 */
    align-content: space-between;
    padding: 24px;       /* Figma実測 */
    border-radius: 20px;
  }

  .rnw-cs-card--result .rnw-cs-card__ph {
    grid-column: 1;
    grid-row: 1;
    width: 180px;   /* Figma実測 366:26215 */
    height: 130px;
  }

  .rnw-cs-card--result .rnw-cs-card__body {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }

  .rnw-cs-card--result .rnw-cs-card__title {
    font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold 366:26218 */
    text-align: left;
  }

  .rnw-cs-card--result .rnw-cs-card__text { text-align: left; }

  .rnw-cs-card--result .rnw-cs-card__btn {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    width: min(300px, 100%);  /* Figma実測 366:26221 */
    margin: 0;
  }


  /* ---------------------------------------------------------------
     11-5. ポピンズグループの特徴（Figma 366:26231）
     カードは2列×2段。
     --------------------------------------------------------------- */

  .rnw-cs-features {
    gap: 80px;           /* Figma実測 */
    padding: 80px 0 120px;
  }

  .rnw-cs-features__slider { padding: 0 var(--cs-pad-1200); }

  .rnw-cs-features .rnw-cs-slider__track {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;  /* Figma実測 */
  }

  .rnw-cs-card--feature { min-height: 0; }

  .rnw-cs-card--feature .rnw-cs-card__ph { height: 200px; }  /* ▼ 2026-09-03 12章で上書き（FIX版で300pxに） */

  .rnw-cs-card--feature .rnw-cs-card__body {
    padding: 24px 40px;  /* Figma実測 366:26243 */
  }

  .rnw-cs-card--feature .rnw-cs-card__title {
    font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold 366:26244 */
    font-size: 24px;
  }


  /* ---------------------------------------------------------------
     11-6. サービス一覧（Figma 366:26268）
     カードは2列×2段。SPのグラデーション地はPCでは単色。
     --------------------------------------------------------------- */

  .rnw-cs-service {
    gap: 80px;             /* Figma実測 */
    padding: 120px 0;      /* Figma実測 */
    background-color: var(--rnw-bg2);  /* Figma実測 #E7EFFB */
    background-image: none;
    /* PCは単色。SP用に付けた .rnw-gra-move（グラデーションのゆらぎ）は
       動かす対象が無いので止める。 */
    animation: none;
  }

  .rnw-cs-service__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* ▼2026-09-27 768〜1023px は12章で1列に上書き */
    align-items: stretch;  /* ▼ 2026-09-09 12章で start に上書き */
    gap: 40px;  /* Figma実測 */
    padding: 0 var(--cs-pad-1200);
  }

  .rnw-cs-scard {
    padding: 40px;      /* Figma実測 366:26285 */
    border-radius: 8px; /* Figma実測（SPは20px） */
  }

  /* 同じ段のカードは高さが揃うので、本体を伸ばして
     「詳細」ボタンをカード下端に寄せる（Figma 366:26302 と同じ見え方）。 */
  .rnw-cs-scard__body { flex: 1 0 auto; }

  .rnw-cs-scard__title {
    font-family: var(--rnw-font-jp);  /* Figma Zen Kaku Bold 366:26287 */
    font-size: 24px;
  }

  .rnw-cs-scard__media { gap: 24px; }  /* Figma実測 366:26288 */

  .rnw-cs-scard__ph { height: 224px; }  /* Figma実測 366:26289　▼ 2026-09-03 12章で上書き（FIX版で300pxに） */

  .rnw-cs-detail { margin-top: 40px; }  /* Figma実測 366:26294 */

  .rnw-cs-panel { padding: 24px; }

  /* 画像だけの展開部（3・4枚目）はPCでも枠を持たない。 */
  .rnw-cs-panel--media { padding: 0; }

  /* 中身未確定の仮枠はPCの幅で間延びしないよう高さを抑える。 */
  .rnw-cs-panel__ph { aspect-ratio: 500 / 591; }
  .rnw-cs-panel__ph--tall { aspect-ratio: 500 / 604; }


  /* ---------------------------------------------------------------
     11-7. ページ内メニュー帯
     PCフレームには無い。SPの5項目を横1列にして残している。
     ▼ 2026-09-03 12章で上書き（1024px以上は非表示）
     --------------------------------------------------------------- */

  .rnw-cs-menu { padding: 56px var(--cs-pad-1200); }

  .rnw-cs-menu__list { gap: 16px; }

  /* 文字を14pxに上げると「サービスについて」が160pxに収まらずキャレットに
     ぶつかるので、160pxは下限にして中身なりに広げる。 */
  .rnw-cs-menu__item {
    gap: 16px;
    width: auto;
    min-width: 160px;
  }

  .rnw-cs-menu__label { font-size: 14px; }
}

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


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

/* --- 2026-08-30 見出しブロックの写真：iPad縦で固定高のため縦に間延び（PC上書き） --- */
/* 幅連動の aspect-ratio に。features=1000/530、service=800/535。widthは既存の min()/% で上限があるので height:auto でもPCは従来の高さに収まる（＝PC不変）。空プレースホルダーにも aspect-ratio は効く。 */
@media only screen and (min-width: 768px) {
  .rnw-cs-features .rnw-cs-head__ph { aspect-ratio: 1000 / 530; height: auto; }
  .rnw-cs-service  .rnw-cs-head__ph { aspect-ratio: 800 / 535;  height: auto; }
}


/* --- 2026-09-03 FIX版（Figma PC 1106:38444 ／ SP 1106:50059）への差し替え --- */

/* カードの写真がFIX版で大きくなった。SPは200pxのまま変更なし。
   強み   … Figma 588×300（旧 588×200）
   サービス … Figma 500×300（旧 500×224） */
@media only screen and (min-width: 768px) {
  .rnw-cs-card--feature .rnw-cs-card__ph { height: 300px; }
  .rnw-cs-scard__ph { height: 300px; }
}

/* ページ内メニュー帯は、FIX版のPCフレームでは PC_header の _menu 帯
   （renewal/pagenav.php が出す .rnw-pagenav--bar）に移った。
   帯が出るのは1024px以上（common.css）なので、そこから本文側を消す。
   768〜1023px は帯が出ないため、11-7. の横1列のまま残す。 */
@media only screen and (min-width: 1024px) {
  .rnw-cs-menu { display: none; }
}

/* --- 2026-09-09 サービス一覧：片方のアコーディオンを開くと、grid の align-items:stretch で
   もう片方のカードも同じ高さに引き伸ばされてしまう。開いたカードだけ伸びるよう start に変更。
   ※閉じた状態の高さ揃え（＝詳細ボタンの下端揃え）は stretch 前提だったため、
     1枚目の本文お問い合わせボタン分だけ、2枚目の詳細ボタン位置がやや上がる点は許容。 --- */
@media only screen and (min-width: 768px) {
  .rnw-cs-service__list { align-items: start; }
}

/* --- 2026-09-09 アコーディオンを開くと少し上にスクロールする不具合 ---
   隠しチェックボックスが position:absolute のため、flexコンテナ（カード）内では
   カード左上（flexの起点）に配置される。ラベル（＝詳細ボタン、カード下部）を
   クリックするとそのチェックボックスにフォーカスが移り、ブラウザがフォーカス先＝
   カード上部までスクロールするため「開くと上に戻る」ように見えていた。
   フローに戻してラベル直前に置き、0サイズ・opacity:0 で隠す
   （フォーカス位置がラベル付近になりスクロールが起きない。Space開閉・フォーカス表示は不変）。 --- */
.rnw-cs-detail__toggle {
  position: static;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: visible;
  clip-path: none;
}

/* --- 2026-09-27 MV写真：768〜1231pxで左の女の子の顔が切れる（11章上書き） --- */
/* 写真枠は高さ590px固定・幅55.556%なので、この幅では枠が縦長に近づき、
   写真（pc/photo_mv.jpg 1600×1180 → 表示800×590）の左右が削られる。
   Ken Burns で1.08倍まで拡大すると、さらに左右が削られる。
   残したい範囲は、左の女の子の耳（元画像 x≒100）〜右の男の子の髪（x≒1330）。
   ▼基準位置 15%（768px以上）：写真の中心より左寄りに人物がいるため。
     1440px以上は枠と写真の比率が同じなので、見た目は変わらない。
   ▼768〜1231px は位置だけでは入らないので、枠の縦横比を 116:100 で止め、高さを幅に追従させる。
     1231px→約684×590px（1232px以上の590pxとつながる）／1072px→約596×513px／
     834px→約463×399px／768px→約427×368px。
     拡大時に見える範囲はどの幅でも x≒85〜1352。3人の顔が入る。
     写真の下端が上がるため、この幅では下のピンクの円と写真は重ならない。 */
@media only screen and (min-width: 768px) {
  .rnw-cs-mv__ph .rnw-kb__img { object-position: 15% center; }
}
@media only screen and (min-width: 768px) and (max-width: 1231px) {
  .rnw-cs-mv__media {
    height: auto;
    aspect-ratio: 116 / 100;
  }
}

/* --- 2026-09-27 導入実績：768〜989pxで右のカードが画面からはみ出す（11-4上書き） --- */
/* カードは「写真180px＋間24px＋タグ」より細くなれない（タグ .rnw-cs-tag は nowrap）。
   「東京都　企業主導型保育所」のタグは約207pxあるので、カード1枚の最小幅は約460px
   （左右の余白24px×2を含む）。2枚と間の24pxで約944px必要になり、
   画面が約990pxより狭いと収まらない。この幅だけ1列に並べる。 */
@media only screen and (min-width: 768px) and (max-width: 989px) {
  .rnw-cs-results .rnw-cs-slider__track { grid-template-columns: 1fr; }
}

/* --- 2026-09-27 MVのテキスト：約1067pxより狭いと見出し・リードが写真にかぶる（11章上書き） --- */
/* 幅がFigma実測450px固定で、写真（右55.556%）の位置を見ていなかった。
   ほかのページ（アフタースクール・インターナショナル・児童発達支援）と同じく、
   写真の手前24pxまでに収まるよう縮める。1440px以上は写真が800pxで止まるが、
   44.444% はそれより狭い側に見積もるので、かぶることはない。
   768px でも見出し4行・リード5行ほどで、MVの高さ750px（top 239px）に収まる。 */
@media only screen and (min-width: 768px) {
  .rnw-cs-mv__card {
    width: min(450px, calc(44.444% - max(24px, calc((100% - 1280px) / 2)) - 24px));
  }
  /* 見出しは「新規開設・運営・」「コンサルティング」（各8文字）が1行に収まる大きさまで縮める。
     文字幅は 44.444% − 48px（1328px未満）なので、1文字＝(幅÷8)−字間1.2px ≒ 5.556vw − 7.2px。
     vw はスクロールバーを含むので少し小さめに 5.4vw − 8px とした。48px（Figma）が上限。
     768px→約33px／875px→約39px／1037px以上→48px。
     keep-all は念のため（万一あふれても「・」の後ろでしか折り返さない）。 */
  .rnw-cs-mv__title {
    font-size: min(48px, calc(5.4vw - 8px));
    word-break: keep-all;
  }
}

/* --- 2026-09-27 MVのテキスト：768〜1231pxで写真より下にずれる（11章上書き） --- */
/* テキストは top 239px 固定（Figma）。1232px以上は写真の上下中央（80px＋590÷2＝375px）と
   テキストの中央がほぼ一致している。768〜1231pxは写真枠を縮めている（上の 116:100）ので、
   写真の中央が上がり、テキストだけ下に取り残されていた。
   写真の高さ＝55.556vw÷1.16≒47.9vw なので、中央は 80px＋約23.95vw。そこにテキストの中央を合わせる。
   1231px→約375px（1232px以上とつながる）／768px→約264px。 */
@media only screen and (min-width: 768px) and (max-width: 1231px) {
  .rnw-cs-mv__card {
    top: calc(80px + 23.95vw);
    transform: translateY(-50%);
  }
}

/* --- 2026-09-27 サービス一覧：768〜1023pxでカード2列が窮屈（11-6上書き） --- */
/* 768px ではカード1枚が約340px（中身260px）しかなく、見出しが4行に割れていた。
   ヘッダーがハンバーガーになる幅（〜1023px）は1列に並べる。 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .rnw-cs-service__list { grid-template-columns: 1fr; }
}

/* --- 2026-09-27 サービス一覧の見出しカード：768〜1023pxで「サービス一覧」が折り返す（11-2上書き） --- */
/* カード幅は 46.018%（最小320px）で、アイコン84px＋間40pxを引くと文字が収まらない。
   「特徴」の見出しカードと同じく、幅を中身なりにする（右端はそのまま、左へ伸びる）。 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .rnw-cs-service .rnw-cs-head__card {
    width: max-content;
    max-width: calc(100% - 48px);
  }
}

/* --- 2026-09-27 MV写真：左側の角丸が無い（11章上書き） --- */
/* ほかのページ（ナーサリー・アフタースクールほか）の MV 写真は、右端まで抜けるので
   左側だけ角丸 20px。法人向けだけ指定が抜けていた。枠（.rnw-kb）は overflow:hidden なので
   写真も角丸で切り抜かれる。 */
@media only screen and (min-width: 768px) {
  .rnw-cs-mv__ph { border-radius: 20px 0 0 20px; }
}