@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル
   自主事業施設（ALS/PALIS）ページ専用CSS
   ＝インターナショナルスクール／バイリンガルスクール
   （/educare/service/school/）
   Figma: SP 363:29016 ／ PC 453:37949
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が is_page(['service/school', 'school']) のときだけ、
     renewal/css/common.css の後に読み込む。

   ■ 名前空間
     ページ固有の接頭辞は `rnw-is-`（is = international school）。
     ファイル名はスラッグ末尾に合わせて school.* だが、クラス接頭辞は
     アフタースクール（school-children.css / rnw-as-）と紛れないよう
     別の綴りにしている。
     旧CSS7ファイル（reset/common/contents/index/form/slick/aos）に
     `rnw` が1件も無いことは確認済み。

   ■ 旧CSSとの同居について
     このページは旧 header.php の分岐で css/contents.css が読み込まれる。
     contents.css の装飾ルールはほぼ `main …` 配下にスコープされているため、
     本文で <main> を使わず .rnw-is でラップすることで大半を回避している。
     素の要素マージン等だけ下の 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 … 見出しアイコン（サービス概要・
                                                       スクール紹介とも同一グラフィック）
         img/school-children/icon_head_faq.svg      … FAQの見出しアイコン
         img/nursery-school/icon_menu_caret.svg     … ページ内メニューの丸キャレット
         img/nursery-school/fv_wave.svg             … PCのFV下端の波形（453:37953 パス933）
         img/nursery-school/fv_illust.png           … PCのFV下部のイラスト（453:37954）
         img/nursery-school/fv_stripes.png          … PCのFV下部の斜線（453:37973）
         img/icon_arrow_circle.svg                  … ボタンの22px丸矢印（maskで着色）
         img/icon_arrow_circle_lg.svg               … 施設検索カードの50px丸矢印
         img/illust_search.svg                      … 施設検索カードの虫めがね
         img/front/icon_slider_next.svg             … スライダーの前後ボタン
         img/front/mv_illust.svg                    … リード下のイラスト帯
         img/front/texture_paper.jpg                … 紙テクスチャ

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

     ・新規（img/school/）
         photo_*.jpg … 写真8点（2倍書き出し／JPEG品質60）
         ※PC対応にあたっての書き出し追加は0点。PCのほうが表示サイズは大きいが、
           他ページのPC対応と同じくSP用の2倍書き出しを流用している。

   ■ フォント
     このページは見出しでも本文でも MOBO と Zen Kaku Gothic New が混在する
     （Figmaのトークン指定どおり）。SPとPCで指定が入れ替わっている箇所も
     Figmaのままにしている（MOBO はいずれ Zen Kaku へフォールバックするため
     見た目は変わらないが、配信が始まったときに差が出る）。
     MOBO はWeb配信が未確定のため --rnw-font-educare-title 経由で
     Zen Kaku Gothic New にフォールバックする（定義は common.css）。

   ■ 動き（Figma Annotation 363:28932「【動きについて】」／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 tabs="0"] に委ねているため、
     このCSSにはセクション枠と見出しのスタイルしか無い。
     出力側のスタイルは renewal/css/faq.css。

   ■ PC（末尾 11.）
     Figma 453:37949（1440幅）。ブレークポイントは他ページと同じ768px。
     ▼PCフレームに無いのでPC幅で消しているもの
         ・イラスト帯（363:29032）… FV側に別デザインの装飾が入るため
         ・追従CTA（363:29380）
         ・特徴スライダーのコントロール（363:29128）… 3列グリッドになるため
     ▼SPフレームに無いがPCで出しているもの
         ・施設検索カード（453:38000）
           SPはコメント363:29386「施設検索ボタン削除」で消えたが、
           PCフレームには残っているためPC幅でだけ出している。
     ▼コンテンツ幅
         --is-pad-1280 … FV・施設検索帯・サービス概要リード（1440幅で80px）
         --is-pad-1248 … 特徴のカード列（1440幅で96px）
         --is-pad-1200 … 見出しブロック・スクール紹介・FAQ（1440幅で120px）
   ===================================================================== */


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

/* Figma の SPフレーム自体が紙テクスチャ地。セクション側で背景指定が無い
   ところ（MV・リード・施設検索・FAQ）はこの地色がそのまま出る。
   4%の重ねを擬似要素なしで再現するため、地色を96%の単色レイヤーとして
   テクスチャの上に敷いている（＝テクスチャを4%で透かしたのと同じ見え方）。 */
.rnw-is {
  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白。
     旧CSS側の上余白は #key_field / main にしか付かず、新マークアップは
     どちらも持たないためここで確保する。 */
  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-is *,
.rnw-is *::before,
.rnw-is *::after { box-sizing: border-box; }

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

/* 見出し・段落のブラウザ既定マージンと旧CSSの余白を打ち消す。 */
:where(.rnw-is) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

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

:where(.rnw-is) :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-is-service,
.rnw-is-features,
.rnw-is-school,
.rnw-is-faq {
  scroll-margin-top: var(--rnw-header-h-sp);
}

/* PCのFigmaにしか無い文字・改行。既定は出さない（11. で表示する）。
     .rnw-is-pc-only … MV見出しの「／」（PC 453:37970 の3行目末）
     .rnw-is-br-pc   … PCだけ改行が入る箇所の <br> */
.rnw-is-pc-only,
.rnw-is-br-pc { display: none; }


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

/* --- 写真プレースホルダー ---
   写真の枠（.rnw-kb を兼ねる <div>）にも、未支給のベタ塗り <div> にも付く
   共通の地色。未支給（サービス概要の見出し写真）は #D9D9D9 のまま出る。
   支給後は同じ要素に rnw-kb を足して <img class="rnw-kb__img"> を
   入れれば、大きさの指定（rnw-is-*__ph）はそのまま効く。 */
.rnw-is-ph {
  background-color: #D9D9D9;
  object-fit: cover;
}

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

/* --- 本文テキスト（Figma SP/title/educare/text）---
   スクール紹介の説明文で使う。MOBO-SemiBold 系。 */
.rnw-is-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);
}

/* --- セクション見出しブロック（写真帯＋カード）---
   サービス概要（Figma SP 363:29108 ／ PC 453:38056）は写真あり＋bg2のカード。
   スクール紹介（SP 363:29170 ／ PC 453:38096）は写真なし＋白カード。
   FAQ（SP 363:29234 ／ PC 453:38150）は写真もカード地色も無い。 */
.rnw-is-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

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

.rnw-is-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;   /* スクール紹介（Figma 363:29171）はこの白地 */
  text-align: center;
}

/* サービス概要のカードは educare/bg2 地（Figma 363:29110） */
.rnw-is-head__card--bg2 { background-color: var(--rnw-bg2); }

/* 写真が無いセクションは重ねる相手が無いので、マイナスマージンだけ戻す
   （カードの地色・角丸・内側余白はそのまま）。 */
.rnw-is-head--noimage .rnw-is-head__card { margin-top: 0; }

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

/* 見出しアイコン。多色SVGのため mask ではなく背景画像で描く。
   サービス概要・スクール紹介とも school-children の
   icon_head_features.svg と同一グラフィックのため流用している。 */
.rnw-is-head__icon {
  flex-shrink: 0;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rnw-is-head__icon--service { width: 42.222px; background-image: url('../../img/school-children/icon_head_features.svg'); }
.rnw-is-head__icon--faq     { width: 55.729px; background-image: url('../../img/school-children/icon_head_faq.svg'); }

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

.rnw-is-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-is-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 … サービス概要（SP 363:29105 ／ PC 453:38052）
     --bg2   … スクール紹介（SP 363:29167 ／ PC 453:38092）
     --flip  … Figma上で180度回転＋上下反転＝左右反転が掛かっているもの
               （このページは2枚とも該当） */
/* ▼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-is-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-is-wave--white { background-color: #FFFFFF; }
.rnw-is-wave--bg2   { background-color: var(--rnw-bg2); }
.rnw-is-wave--flip  { transform: scaleX(-1); }

/* --- 角丸ボタン ---
   現在このページに残っているのは枠線タイプ（「詳細はこちら」SP 363:29193 ほか）
   だけだが、塗りタイプ（--fill）も他セクションで復活しうるので定義は残す。 */
.rnw-is-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 32px;      /* Figma実測 */
  border-radius: 65.96px;  /* Figma実測 */
  font-family: var(--rnw-font-jp);  /* Figma SP/button/big */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-decoration: none;
}

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

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

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

/* 丸矢印。アセットは下向きで書き出されているので -90度回して右向きにする
   （footer.php の .rnw-footer__search-arrow と同じ扱い）。
   mask の共通指定は common.css の .rnw-icon が持っている。 */
.rnw-is-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 SP 363:29073 ほか）--- */
/* 幅（141px）は親の grid-template-columns 側で持っている。
   行の高さいっぱいに伸ばすため、li を flex にして子を stretch させる。 */
.rnw-is-menu__list > li {
  display: flex;
}

.rnw-is-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-is-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-is-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 SP 363:29018 ／ PC 453:37952）
   ===================================================================== */

/* Figmaのフレーム塗りは #FDF6F4 の単色だが、内側のテキスト面（363:29024）と
   波形（363:29022）には紙テクスチャが乗っている。地色・テクスチャとも
   .rnw-is から継承させるため、ここでは背景を指定しない。
   overflow:hidden は 1-0 の Ken Burns 用（写真の拡大ぶんを切る）。 */
.rnw-is-mv {
  position: relative;
}

.rnw-is-mv__ph {
  width: 100%;
  height: 400px;  /* Figma実測 363:29020 */
}

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

/* 波形（Figma 363:29022 Union）。パス933と同一シェイプに紙テクスチャが
   乗ったもの（Figmaでは透過PNGとして書き出される）。
   アセットを増やさないよう wave.svg のマスク＋テクスチャ背景で描いている。 */
.rnw-is-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-is-mv__head {
  position: relative;  /* 波形より前面に出す */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;  /* Figma実測 363:29025 */
  text-align: center;
}

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

/* Figmaは3行とも32px（ナーサリースクールのような小見出し行は無い）。
   PC（453:37970）は48pxの4行組みで、増える「／」と改行は 11-3 で出す。 */
.rnw-is-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:29031 ／ PC 453:37972）。
   SPのFigmaでは下のイラスト帯のセクション（363:29028）の中にあるが、
   PCではFV左カラムの一部なのでマークアップはMV側に置いている。
   SPの見た目を元どおりにするため、
   14.29px ＝ テキスト面の下余白2.29px ＋ 帯セクションの上余白12px。
   左右8px ＝ テキスト面の16px と合わせて24px（Figma実測）。 */
.rnw-is-mv__lead {
  position: relative;  /* 波形より前面に出す */
  z-index: 1;
  margin-top: 14.29px;
  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:37973）。 */
.rnw-is-mv__deco {
  display: none;
}


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

.rnw-is-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 0;  /* Figma実測 */
}

/* イラスト帯（Figma 363:29032）。
   親の左右24pxを打ち消して全幅で出す（Figmaでも帯だけがはみ出している）。 */
/* ▼2026-09-22 の更新でイラスト帯からピンクの円2つに変わった。
     ナーサリー・トップ・アフタースクールと同じ図形だったので
     renewal/img/front/mv_circles_sp.svg をそのまま流用する（複製しない）。 */
.rnw-is-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:29070 ／ PC 453:37998）
   ===================================================================== */

.rnw-is-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;           /* PC 453:37998 実測。SPは子が1つなので効かない */
  padding: 44px 24px;  /* Figma実測（SP） */
}

/* ------------------------------------
   4-1. 施設検索カード（Figma PC 453:38000）
   ▼SPのFigmaからは削除された（コメント 363:29386「施設検索ボタン削除」）。
     PCフレームには残っているので、マークアップは残したままSP幅で消す。
     SPでの施設検索への導線は追従CTA（9.）が持つ。
------------------------------------ */
.rnw-is-search {
  display: none;  /* 11-5 で display:flex に戻す */
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 24px;  /* Figma実測 */
  width: 100%;
  padding: 24px;
  border-radius: 20px;
  background-color: var(--rnw-main2);
  color: #FFFFFF;
  text-decoration: none;
}

.rnw-is-search__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10px;          /* Figma実測 */
  min-width: 0;
  padding-top: 30px;  /* 上に出る虫めがねの逃げ */
}

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

.rnw-is-search__en {
  font-family: 'Krona One', sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 3.7px;
  color: var(--rnw-search-en);  /* #FDFF9C */
}

.rnw-is-search__ja {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

.rnw-is-search__lead {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 白丸＋紺のシェブロン。多色のため mask ではなく背景画像。 */
.rnw-is-search__arrow {
  flex-shrink: 0;
  width: 50px;   /* Figma実測 */
  height: 50px;
  background-image: url('../../img/icon_arrow_circle_lg.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-90deg);
}

/* 虫めがね（Figma 453:38010）。カード上端からはみ出して斜めに置かれる。 */
.rnw-is-search__illust {
  position: absolute;
  top: -39.67px;   /* Figma実測 */
  left: 116.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 94.734px;
  height: 96.674px;
  pointer-events: none;
}

.rnw-is-search__illust::before {
  content: "";
  width: 55.557px;   /* Figma実測 */
  height: 80.003px;
  background-image: url('../../img/illust_search.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(41.78deg);  /* Figma実測 */
}

/* ------------------------------------
   4-2. ページ内メニュー（Figma SP 363:29071 ／ PC 453:38014）
------------------------------------ */
.rnw-is-menu {
  width: 100%;
  padding: 24px 16px;  /* Figma実測 */
  border-radius: 20px;
  background-color: var(--rnw-bg2);  /* educare/bg2 #E7EFFB */
}

/* SPは2列×3行（5項目なので最終行は1つ）。
   Figmaは項目幅141px固定・行間20px・列間12px。PCは3列（11-5）。 */
.rnw-is-menu__list {
  display: grid;
  grid-template-columns: repeat(2, 141px);
  gap: 20px 12px;  /* Figma実測 */
  justify-content: center;
}


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

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

.rnw-is-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-is-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-is-slider__btn--prev { transform: rotate(180deg); }

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

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

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

.rnw-is-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-is-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-is-slider__track::-webkit-scrollbar { display: none; }


/* =====================================================================
   6. サービス概要＋特徴（Figma SP 363:29103 ／ PC 453:38054）
   ===================================================================== */

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

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

/* ▼施設検索ボタン（旧 214:103968）はコメント 363:29427「ボタン削除」で
   削除したため、いまはリード文1つだけが入る。 */
.rnw-is-service__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 24px;
}

/* このリード文だけ MOBO ではなく Zen Kaku Gothic New Medium（Figmaのトークン
   SP/text/defalut/medium。ウェイト名の綴りはFigma側の表記ママ）。
   PC（453:38070）は MOBO-SemiBold 18px の中央揃えになるので 11-6 で戻す。 */
.rnw-is-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 363:29125）。上の余白はセクションの gap 24px ＋ ここの 56px。 */
.rnw-is-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 56px;  /* Figma実測 */
  background-color: #FFFFFF;
}

/* 特徴カード（Figma SP 363:29144 ほか）。SPは角丸なし、PCは20px（11-6）。 */
.rnw-is-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-is-fcard__ph {
  width: 100%;
  height: 200px;  /* Figma実測 ▼ 2026-08-30 12章で上書き（≤1024は高さauto） */
}

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

/* SPはこのカードだけ見出しも本文も Zen Kaku Gothic New（Figma SP/title/h3 と
   SP/text/defalut/medium）。PCは MOBO 系に変わる（11-6）。 */
.rnw-is-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-is-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;
}


/* =====================================================================
   7. スクールのご紹介（Figma SP 363:29165 ／ PC 453:38094）
   ===================================================================== */

/* SPは上下グラデーション地（Figma educare/gra2）。
   common.css の --rnw-contact-gra は開始色が #FFFFFF だが、ここは #F3F5F6。
   停止位置52.404%は同じ。値が違うので変数は使わず実測値で置いている。
   PC（453:38094）は #E7EFFB のベタ塗りなので 11-7 で差し替える。 */
.rnw-is-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-is-school__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 見出し → カード列 */
  width: 100%;
}

.rnw-is-school__list {
  display: flex;
  flex-direction: column;
  gap: 32px;  /* Figma実測 カード間 */
  width: 100%;
  padding: 0 16px;
}

/* スクールカード（Figma SP 363:29181 ほか）。
   地色は白の90%で、下のグラデーションを少し透かす。 */
.rnw-is-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);
}

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

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

/* 対応年齢のタグ（Figma コンポーネント tag / SP 363:29184 ほか）。
   一日の流れ等の丸いタグとは違い、角丸8pxの箱型。 */
.rnw-is-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;
}

/* SPは地色なしの見出し。PC（453:38111）では #E7EFFB の角丸8px帯になる（11-7）。 */
.rnw-is-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-is-scard__media {
  display: flex;
  flex-direction: column;
  gap: 12px;  /* Figma実測 */
  width: 100%;
}

.rnw-is-scard__ph {
  width: 100%;
  height: 200px;  /* Figma実測 ▼ 2026-08-30 12章で上書き（≤1024は高さauto） */
}


/* =====================================================================
   8. よくあるご質問（Figma SP 363:29233 ／ PC 453:38148）
   ---------------------------------------------------------------------
   Q&A本体はショートコード [educare_faq tabs="0"] の出力に委ねているため、
   ここはセクション枠と見出しだけ。出力側のスタイルは renewal/css/faq.css。
   カテゴリタグ（タブ）はコメント 363:29468「タグ削除」に従い、
   ショートコードの tabs="0" で出力自体を止めている（CSSでは隠していない）。
   ===================================================================== */

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


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


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

   ■ Figmaと違えているところ
     1. ページ内メニューのラベル。PCフレーム（453:38015）が
        「5つの特徴／教育方針／1日の流れ／保護者アンケート／よくあるご質問／
         お問い合わせ」の6項目とナーサリースクールのままなので、
        SP（363:29072）の5項目を採用している。本文は共通なので
        デザイン側が直れば自動で追従する（3列グリッドに5項目が並ぶ）。
     2. 施設検索カード。SPでは削除指示（363:29386）が出ているが、
        PCフレーム（453:38000）には残っているのでPC幅でだけ出している。
        PCでも消すのが正なら 11-5 の .rnw-is-search の display 指定を消すこと。
     3. サービス概要の見出し写真（453:38058）は #D9D9D9 のベタ塗りで未支給。
        SPと同じくプレースホルダーのまま。
   ===================================================================== */

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

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

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

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

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

  /* 波形。SPは幅に対する比率で高さが決まるが、PCは画面幅によらず160px固定
     （Figma 453:38052 / 453:38092 の帯）。 */
  .rnw-is-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');
  }


  /* スクール紹介の説明文（Figma 453:38115）。
     SPは MOBO-SemiBold 14px だが、PCは Zen Kaku Gothic New Medium 16px。 */
  .rnw-is-text {
    font-family: var(--rnw-font-jp);
    font-size: 16px;
    font-weight: 500;
  }


  /* ---------------------------------------------------------------
     11-1. セクション見出しブロック
     写真あり … サービス概要 453:38056
       1000px幅の写真を右に寄せ、カードを重ねて絶対配置する。
     写真なし … スクール紹介 453:38096 ／ FAQ 453:38150
       アイコンと文字を横並びにして中央に置くだけ。
     --------------------------------------------------------------- */

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

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

  .rnw-is-head__card {
    position: absolute;
    top: 50%;
    flex-direction: row;
    gap: 40px;           /* Figma実測 453:38059 */
    width: 668.444px;    /* Figma実測 */
    max-width: calc(100% - var(--is-pad-1200) * 2);
    height: 240px;
    margin-top: 0;       /* SPの写真への食い込み（-40px）は使わない */
    padding: 24px 40px;
    /* Figmaのカードは写真の上下中央から20px下（165〜405 / 写真530）。
       reveal の移動は translate を使っているのでここと衝突しない。 */
    transform: translateY(calc(-50% + 20px));
  }

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

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

  /* FAQ の見出しは地色も内側余白も持たない（Figma 453:38150）。
     上の .rnw-is-head__card の padding より後に書いて打ち消す。 */
  .rnw-is-head__card--plain {
    padding: 0 24px;
  }

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

  .rnw-is-head__icon--service { width: 84.444px; }   /* Figma 453:38061 / 453:38097 */
  .rnw-is-head__icon--faq     { width: 111.457px; }  /* Figma 453:38151 */

  .rnw-is-head__text { width: auto; }
  .rnw-is-head__en   { font-size: 20px; }  /* Figma実測 */

  /* サービス概要の見出しは Figma のテキスト枠が464pxちょうどで、
     字送り1.2pxが最後の1文字ぶん余計に効くと「インターナショナルスクール・」が
     1行に収まらず折れてしまう。行末に付く字送りを負のマージンで戻している。 */
  .rnw-is-head__ja {
    font-size: 32px;      /* PC/educare/title/h2 */
    margin-right: -1.2px;
  }


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

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

  .rnw-is-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:37953 */
    pointer-events: none;
  }

  /* 斜線（Figma 453:37973）。左24.673%＝355.285/1440。
     Figmaでは 1187.8×156.4 で右と下にはみ出しているので、
     枠内に見えている 1084.715×146.729 ぶんだけを出している。 */
  .rnw-is-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:37965）。右端まで抜けるので左側だけ角丸。
     幅は 800/1440 の比率で持つ（px固定にするとタブレット幅で痩せるため）。 */
  .rnw-is-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:29022 Union）はPCでは使わない。 */
  .rnw-is-mv__panel::before { content: none; }

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

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

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

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


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

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


  /* ---------------------------------------------------------------
     11-5. 施設検索＋ページ内メニュー（Figma 453:37998）
     横並び。狭い画面では折り返してメニューが下段に落ちる。
     --------------------------------------------------------------- */

  .rnw-is-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 40px;   /* Figma実測 */
    padding: 80px var(--is-pad-1280);
  }

  /* SPで消している施設検索カードをPCだけ出す（11章の冒頭 ■2 参照）。 */
  .rnw-is-search {
    display: flex;
    flex: 0 1 410px;   /* Figma実測 453:38000 */
    width: 410px;
  }

  /* SPは虫めがねを避けるための上余白があるが、PCは中身が上下中央なので不要。 */
  .rnw-is-search__body { padding-top: 0; }

  .rnw-is-search__head { text-align: center; }
  .rnw-is-search__en   { font-size: 16px; }  /* Figma実測 453:38003 */
  .rnw-is-search__ja   { font-size: 32px; }  /* PC/educare/title/h2 */
  .rnw-is-search__lead { font-size: 18px; }  /* PC/educare/text/small */

  /* 虫めがね（Figma 453:38010） */
  .rnw-is-search__illust {
    top: -45.67px;
    left: 152.7px;
  }

  /* 252×3 ＋ 列間12×2 ＋ 左右padding24×2 ＝ 828px */
  .rnw-is-menu {
    display: flex;
    flex: 1 1 828px;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

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

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

  .rnw-is-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:38054）
     見出しの写真は右寄せ、カードはその左に重なる。
     特徴はスライダーをやめて3列（1248 ＝ 400×3 ＋ 24×2）にする。
     --------------------------------------------------------------- */

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

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

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

  .rnw-is-service__lead {
    padding: 0 var(--is-pad-1280);  /* Figma実測 453:38069 */
  }

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

  /* 上の余白はセクションの gap 80px が持つ。 */
  .rnw-is-features { padding-top: 0; }

  .rnw-is-slider { padding: 0 var(--is-pad-1248); }

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

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

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

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

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

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


  /* ---------------------------------------------------------------
     11-7. スクールのご紹介（Figma 453:38094）
     SPのグラデーション地はPCでは #E7EFFB のベタ塗り。カードは2列。
     --------------------------------------------------------------- */

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

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

  /* 見出しカードは白のまま。高さだけFigma実測（453:38096）に合わせる。 */
  .rnw-is-school .rnw-is-head__card { height: 200px; }

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

  .rnw-is-scard { padding: 40px; }  /* Figma実測 453:38107 */

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

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

  .rnw-is-scard__ph { height: 300px; }  /* Figma実測 453:38113 */

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

  /* ▼2026-09-23 PCでは1行に収める（Figma 1781:13007 のタグは1行）。
       本文HTMLの「対応年齢:2歳～未就学児<br>幼稚園・小学受験に臨む方」に
       入っている <br> を、PC幅でだけ消している。SPは2行のまま。
       ▼2026-09-23 追記
         最初 display:inline-block + width で「改行せずに空きだけ残す」形にしたが、
         <br> の強制改行は display を変えただけでは消えない（消えるのは none だけ）。
         そのため none に変更。
         2文の間の半角スペースはCSSでは入れられないので、デザインどおりに
         空けたい場合は本文HTMLの <br> を半角スペースに置き換える必要がある。 */
  .rnw-is-tag br { display: none; }

  /* ボタンはカード幅いっぱいではなく400px固定（Figma 453:38116）。
     2列に並ぶカードは高さが揃う（グリッドの stretch）ので、隣とボタンの位置が
     ずれないよう下端に寄せる。Figmaでも同じ行の2枚はボタンのy座標が同じ。
     margin-top:auto だけだと余白が無いときに 24px まで詰まってしまうため、
     最低56px（説明文の margin-bottom 32px ＋ カードの gap 24px）を確保する。 */
  .rnw-is-scard__media { margin-bottom: 32px; }

  .rnw-is-scard > .rnw-is-btn {
    width: 400px;
    max-width: 100%;
    margin-top: auto;
  }


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

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


/* ---------- モーション低減 ----------
   Ken Burns と fade-in の停止は common.css「8. 動き」側で共通に持っている。
   ここはこのページ固有の横スライダーだけ。 */
@media (prefers-reduced-motion: reduce) {
  .rnw-is-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-is-menu__list { grid-template-columns: repeat(3, minmax(0, 252px)); }
}

/* --- 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-is-fcard { flex: 1 1 344px; max-width: 400px; }
}

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

/* --- 2026-08-30 カード写真（特徴／スクールのご紹介）：固定高coverで顔が切れる→高さauto（≤1024限定、PCは従来の固定高） --- */
@media only screen and (max-width: 1024px) {
  .rnw-is-fcard__ph              { height: auto; }
  .rnw-is-fcard__ph .rnw-kb__img { height: auto; }
  .rnw-is-scard__ph              { height: auto; }
  .rnw-is-scard__ph .rnw-kb__img { height: auto; }
}

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

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

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