@charset "UTF-8";

/* Lusitana は見出しの英字サブ（International Institute / Features / Voice /
   News / FAQ / Contact）、実績の数字、FAQの「Q.」「A.」に使う。
   professional の renewal/css/common.css は Zen Kaku Gothic New しか
   読み込んでいないため、このページ専用CSSで追加する（common.css は編集しない）。 */
@import url('https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap');

/* =====================================================================
   ポピンズ professional リニューアル
   海外研修ページ専用CSS（/professional/service-global/）
   Figma: PC 694:34143 / SP 694:87690（0829版）
   ---------------------------------------------------------------------
   ■ 読み込み
     header.php が is_page('service-global') のときだけ読み込む。
     renewal/css/common.css（変数・ボタン・アイコン・ヘッダー／フッター）より
     後に読み込むこと。色は原則 common.css の CSS変数から取る。

   ■ 命名
     このページ専用クラスは `rnw-global-` 接頭辞。
     familycare の service-nanny（rnw-nanny-）/ service-vipcare（rnw-vipcare-）と
     同じ付け方で、スラッグから service- を落とした識別語を使っている。
     共通コンポーネント（.rnw-btn / .rnw-icon）は common.css のものを流用する。

   ■ 旧CSSとの関係（旧 /professional/css/*.css は編集禁止）
     下層ページでは旧 contents.css / common.css / professional.css が
     読み込まれたままになっている（停止は未承認のため据え置き）。
     実害を確認した結果、打ち消しが必要なのは次の3系統：
       ・contents.css 574行〜 の `table` / `table th` / `table td`
         （th が中央寄せ＋#e2d6cd 塗り、td が #f7f7f7 塗り、line-height 1.46、
           table に margin-bottom 32px）→ 沿革テーブルに直撃するので
           「7. 沿革」で全て明示的に上書きしている。
       ・common.css 192行 `p { line-height: 2.0 }`
       ・common.css 202行 `img { max-width:100%; vertical-align:middle }`
     いずれも本文クラス側で明示指定して上書きする。
     index.css / aos.css / slick.css はトップ専用（is_front_page 分岐）のため
     このページでは読み込まれない。

   ■ PC
     18節にまとめている。分岐は common.css・front.css と同じ 767/768。
     デザインは1440幅で、セクションは全幅・中身だけ 1280 / 1200 / 1000 に
     収まる作り。SPにあってPCに無いページ内メニューと追従CTAは
     PC幅で display:none にしている。

   ■ PCとSPで内容が違うところ（どちらもそれぞれのデザイン通りにしている）
     ・ページ内メニュー … SPのみ（PC 694:34143 にフレームが無い）
     ・追従CTA         … SPのみ
     ・特徴の地色       … PC #D9F0F4 / SP #EEE8DE
     ・お知らせの一覧ボタン … PCは赤枠 / SPは teal 枠
     ・利用者の声の見出し … PC「ご利用者様の声」＋リード文 / SP「利用者の声」のみ
     ・よくあるご質問の見出し … PCは中央寄せ / SPは左寄せ
     ・研修内容の展開パネル … PCは横並び（3枚は3列、4枚は2列2段、2枚は2列）、
       SPは1列で項目間を点線で区切る。見出しの改行位置も一部違う

   ■ 動き（Figmaコメント）
     ・MVの Ken Burns と pro/gra の面のグラデーション往復 … 19節
     ・スクロール追従の fade-in … 20節。クラスは renewal/js/front.js が付ける
     いずれも care-consulting.css 16節・17節と同じ作りに揃えている。
   ===================================================================== */


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

/* このCSSはこのページでしか読み込まれないため :root に置いてよい。
   追従CTA（.rnw-global-cta）が .rnw-global の外にあるので、
   両方から参照できる場所に置く。 */
:root {
  /* common.css に無い色。Figmaのバリアブル名を併記する。 */
  --global-bg2:     #EEE8DE;  /* common/bg2（MV・概要・特徴・沿革・お知らせの地色） */
  --global-bg-warm: #FAF7F2;  /* common/bg（沿革の年次セル・声の引用カード） */
  --global-gold:    #C9A96E;  /* common/accent/gold（実績の月桂樹） */
  --global-cta-txt: #333333;  /* 追従CTAの文字（Fill/Default） */
  --global-red:     #912344;  /* common/accent/red（概要・お問い合わせのCTA） */

  /* pro/gra。ページ内メニュー（214:105706）・研修一覧（214:105804）・
     お問い合わせ（214:106233）で同じ値を使っている。
     研修一覧の背景は実測で確認済み（上端 #EDF2F3 → 52%地点で #6EB2BC）。 */
  --global-gra: linear-gradient(180deg, #EEF3F3 0%, #6EB2BC 52.404%);

  /* common.css の --rnw-font-serif は Times（フッターcopyright用）で
     和文明朝ではないため、このページ用に別途定義する（front.css と同じ）。 */
  --global-font-mincho: 'Yu Mincho Pr6N', 'YuMincho', 'Yu Mincho', '游明朝', 'Noto Serif JP', serif;
  --global-font-en:     'Lusitana', serif;

  /* カード影（Figma drop: 0 4 28 rgba(0,0,0,.08)） */
  --global-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
}

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

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

/* :where() で詳細度を0にしておく。素の `.rnw-global img` は詳細度が
   個別クラス（.rnw-global-mv__photo など）より高く、height:auto が
   高さ指定に勝ってしまうため。 */
:where(.rnw-global) img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 見出し・段落・リストのブラウザ既定マージンと旧CSSの余白を打ち消す。
   :where() は詳細度0なので、後続の個別指定が必ず勝つ。 */
:where(.rnw-global) :is(h1, h2, h3, p, ul, ol, li, dl, dt, dd, table, figure) {
  margin: 0;
  padding: 0;
}
:where(.rnw-global) :is(ul, ol) { list-style: none; }

/* 旧 common.css の `p { line-height: 2.0 }` を打ち消す。
   個別の行間は各ブロックで指定する。 */
.rnw-global p { line-height: 1.8; }

/* 旧CSSの a への色指定を打ち消す。ただしボタンは対象外にする。
   `.rnw-global a`（詳細度0,1,1）は common.css の .rnw-btn--main /
   .rnw-global-btn--outline（0,1,0）より強く、a要素で出しているボタン
   （概要のお問い合わせ・体験された方の声はこちら・お知らせの一覧を見る）の
   文字色を本文色 #444 に落としてしまう。span で出している他のボタンとの
   食い違いはこれが原因だった。 */
.rnw-global a { text-decoration: none; }
.rnw-global a:not(.rnw-btn) { color: inherit; }


/* --- ブレークポイントごとの改行 ---------------------------------------
   PCとSPで改行位置が違う見出し・本文用。front.css の .front-br-sp と
   同じ考え方で、片方のメディアクエリで消す。 */
.rnw-global-br-pc { display: none; }


/* =====================================================================
   1. 見出し（Figma component: title/h2）
   ---------------------------------------------------------------------
   英字サブ（Lusitana 18px / pro-main）＋和文（Yu Mincho 28px）の2段。
   バリエーション
     （素）             中央寄せ・背景なし
     --plain            英字サブが無い（直近イベント）
     --left             左寄せ（お知らせ・FAQ）
     --card             白 .9 の帯に載る（SP幅300px / PC幅640px）
     --about            この節だけ英字25・和文40（PC 489:46813）
     --overlap          直上の写真に -40px 重ねる（SPのみ。PCは写真の中央に置く）
   ===================================================================== */

.rnw-global-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
  letter-spacing: 1.2px;
}

.rnw-global-h2__en {
  color: var(--rnw-main);
  font-family: var(--global-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

.rnw-global-h2__ja {
  color: var(--rnw-text);
  font-family: var(--global-font-mincho);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}

.rnw-global-h2--left { text-align: left; }

.rnw-global-h2--card {
  width: 300px;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-global-h2--overlap {
  position: relative;
  margin-top: -40px;
}


/* =====================================================================
   2. スライダー共通（front.js の [data-rnw-slider] 契約）
   ---------------------------------------------------------------------
   スクロール自体はCSS（overflow-x + scroll-snap）に任せ、JSは
   「ボタンで1枚ぶんスクロールさせる」「進捗バーと端のボタン状態を更新する」
   だけを担当する。JSが動かなくても指でのスワイプはそのまま機能する。

   利用者の声はスライダーが入れ子になる。front.js は root.querySelector() で
   最初の一致を拾うため、外側・内側とも「コントロール → トラック」のDOM順を
   守れば正しく対応する要素を掴む。内側トラックの overscroll-behavior-x で
   端まで振ったスワイプが外側へ伝播しないようにしている。
   ===================================================================== */

.rnw-global-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* --- トラック（横スクロールする要素）の共通挙動 --- */
.rnw-global-features__track,
.rnw-global-voice__track,
.rnw-global-vcard__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* 旧Edge */
}
.rnw-global-features__track::-webkit-scrollbar,
.rnw-global-voice__track::-webkit-scrollbar,
.rnw-global-vcard__track::-webkit-scrollbar { display: none; }

.rnw-global-features__track > *,
.rnw-global-voice__track > *,
.rnw-global-vcard__track > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* --- 前後ボタンと進捗バー（Figma 214:105681 ほか。幅239px） --- */
.rnw-global-ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 239px;
  height: 24px;
  margin: 0 auto;
}

.rnw-global-ctrl__btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
.rnw-global-ctrl__btn img { width: 24px; height: 24px; }

/* アセットは「次へ」（右向き）1点だけ持ち、前へは180度回して使う。
   renewal/img/front/icon_slider_next.svg はトップと同一アセットのため
   複製せずそのまま参照している。 */
.rnw-global-ctrl__btn--prev img { transform: rotate(180deg); }

/* Figma でも先頭では前へボタンが opacity 0.5。front.js が端で disabled を付ける。 */
.rnw-global-ctrl__btn[disabled] { opacity: 0.5; cursor: default; }

.rnw-global-ctrl__bar {
  position: relative;
  width: 160px;
  height: 1px;
  background-color: var(--rnw-main);
}

.rnw-global-ctrl__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  border-radius: 10px;
  background-color: var(--rnw-main);
}


/* =====================================================================
   3. メインビジュアル（Figma 214:105590）
   ===================================================================== */

.rnw-global-mv {
  position: relative;
  background-color: var(--global-bg2);
}

.rnw-global-mv__photobox { overflow: hidden; }

.rnw-global-mv__photo {
  width: 100%;
  height: 490px;
  object-fit: cover;
  transform-origin: center center;
}

.rnw-global-mv__panel {
  position: absolute;
  top: 399px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 343px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-global-mv__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rnw-global-mv__en {
  color: var(--rnw-main);
  font-family: var(--global-font-en);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 3.7px;
}

.rnw-global-mv__h1 {
  color: var(--rnw-text);
  font-family: var(--global-font-mincho);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-global-mv__lead {
  color: var(--rnw-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-global-target__head picture {
  display: contents;
}

/* =====================================================================
   4. 実績3点（Figma 214:105597）
   ---------------------------------------------------------------------
   月桂樹は左右で同一形状（Figma上は右が左の左右反転）。
   アセットは icon_laurel.svg 1点だけ持ち、右は scaleX(-1) で反転する。
   SVGに #C9A96E が焼き込まれているので mask ではなく background-image で置く。
   ===================================================================== */

/* SPは写真の下の帯。写真(490)の下端から 68px 空けて始まる
   （Figma SP では MV枠 558 の直後＝写真下から68px）。
   パネルは position:absolute で流れから外れているので、
   この margin-top がそのまま写真からの距離になる。 */
.rnw-global-stats {
  margin-top: 68px;
  padding: 24px 16px;
  background-color: var(--global-bg2);
}

.rnw-global-stats__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.rnw-global-stats__item {
  display: flex;
  align-items: center;
  height: 55.948px;
}

.rnw-global-stats__laurel {
  flex-shrink: 0;
  width: 22.599px;
  height: 54.247px;
  background: url('../../img/service-global/icon_laurel.svg') no-repeat center / contain;
}
.rnw-global-stats__laurel--flip { transform: scaleX(-1); }

.rnw-global-stats__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--rnw-text);
  text-align: center;
  letter-spacing: 0.6781px;
  white-space: nowrap;
}

.rnw-global-stats__line { display: block; }

.rnw-global-stats__num {
  font-family: var(--global-font-en);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
}

.rnw-global-stats__unit {
  font-family: var(--global-font-mincho);
  font-size: 11.867px;
  font-weight: 600;
  line-height: 1.3;
}


/* =====================================================================
   5. 直近イベント（Figma PC 694:34234 / SP 694:87778）
   ---------------------------------------------------------------------
   0829版でキービジュアル1枚だけになった。見出し・スライダーは持たない。
   SPは上下32px・左右16px（694:87778 の中身が x=16 y=32）、
   PCは上下56px・左右120pxで、画像は1000px幅の中央寄せ。
   ===================================================================== */

.rnw-global-event {
  padding: 32px 16px;
  background-color: var(--rnw-white);
}

.rnw-global-event__kv {
  display: block;
  width: 100%;
  aspect-ratio: 2341 / 1053;   /* Figma実測。PC 1000x449.8 / SP 343x154.3 と同値 */
  object-fit: cover;
}


/* =====================================================================
   6. ポピンズの海外研修とは？（Figma PC 489:46807 / SP 363:23872）
   ---------------------------------------------------------------------
   SPは h2 → 写真 → 本文 → ボタンの縦積み。
   PCは 1280x640 の枠内で、写真（1000x560）を右上に置き、
   白 .9 のボックス（640幅）を左下に重ねて中に h2・本文・ボタンを入れる。
   ===================================================================== */

.rnw-global-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 56px 16px;
  background-color: var(--global-bg2);
}

/* SPでは箱を透過させ、中の3つをセクション直下のグリッド項目として扱う。
   そのうえで order で 見出し → 写真 → 本文 → ボタン に並べ替える
   （Figma SP 363:23872 の順）。PCではこの箱が実体を持つ（18節）。 */
.rnw-global-about__box { display: contents; }

.rnw-global-about > .rnw-global-about__photo { order: 2; }
.rnw-global-about .rnw-global-h2          { order: 1; }
.rnw-global-about__text                   { order: 3; }
.rnw-global-about .rnw-btn                { order: 4; }

.rnw-global-about__photo {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.rnw-global-about__text {
  width: 100%;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 本文→ボタンだけ 32px（Figma 214:105701 の gap）。gap 24 に 8 を足す。 */
.rnw-global-about .rnw-btn { margin-top: 8px; }


/* =====================================================================
   7. ページ内メニュー（Figma 214:105706）
   ---------------------------------------------------------------------
   6項目とも当ページ内のセクションへのアンカー。pending は無い。
   アイコンは common.css の icon_arrow_circle.svg を mask で流用する
   （Figma 214:105709 と同一グリフ。向きは下向きなので回転させない）。
   ===================================================================== */

.rnw-global-menu {
  padding: 56px 16px;
  background: var(--global-gra);
}

.rnw-global-menu__list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 8px;
}

.rnw-global-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 160px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
  box-shadow: var(--global-shadow);
}

.rnw-global-menu__label {
  color: var(--rnw-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  word-break: break-word;
}

.rnw-global-menu__icon {
  width: 14px;
  height: 14px;
  color: var(--rnw-text);          /* Figma実測 #444444 */
  -webkit-mask-image: url('../../img/icon_arrow_circle.svg');
          mask-image: url('../../img/icon_arrow_circle.svg');
}


/* =====================================================================
   8. ポピンズ海外研修の特徴（Figma PC 489:46818 / SP 363:23920）
   ---------------------------------------------------------------------
   SPは横スライダー（カード300px）、PCは1280幅に3枚横並び（gap16）。
   写真は実写に差し替え済み（旧デザインはベタ塗りのプレースホルダー）。
   ===================================================================== */

.rnw-global-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 56px 16px 80px;
  background-color: var(--global-bg2);
}

.rnw-global-features .rnw-global-slider { gap: 32px; }

/* トラックだけセクションの左右パディングを打ち消して端まで流す
   （Figma 214:105763 は w375 + px16）。 */
.rnw-global-features__track {
  gap: 16px;
  margin: 0 -16px;
  padding: 0 16px;
}

.rnw-global-fcard {
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: var(--rnw-white);
  box-shadow: var(--global-shadow);
}

.rnw-global-fcard__photo {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rnw-global-fcard__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--rnw-white);
}

.rnw-global-fcard__title {
  color: var(--rnw-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

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


/* =====================================================================
   9. こんな方におすすめ（Figma PC 489:46843 / SP 363:23961）
   ---------------------------------------------------------------------
   0826提出PC・SP2校で「4枚のカード＋ボタン」から「水色枠1枚・点線区切り」に
   変わった。項目間は 32px ＋ 点線1px ＋ 32px なので、li に margin-top:64px を
   置いて ::before をその中央（-32px）に敷いている。
   点線は common.css の .rnw-dash-b と同じ 2-2 のグラデーション。
   写真は object-fit:cover。Figmaも両ブレークポイントとも同じ元写真を
   cover しているだけなので、書き出しは無加工の4:3を1枚だけ持つ。
   ===================================================================== */

.rnw-global-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 80px;
  background-color: var(--rnw-white);
}

.rnw-global-target__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.rnw-global-target__photo {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.rnw-global-target__body {
  width: 100%;
  padding: 0 16px;
}

.rnw-global-target__list {
  display: flex;
  flex-direction: column;
  padding: 25px 27px;
  border: 1px solid var(--rnw-main);
  background-color: var(--rnw-bg2);   /* pro/bg #D9F0F4 */
}

.rnw-global-tcard {
  position: relative;
  color: var(--rnw-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;            /* Figma実測。他の18pxとは違う値 */
}

.rnw-global-tcard + .rnw-global-tcard { margin-top: 64px; }

.rnw-global-tcard + .rnw-global-tcard::before {
  content: '';
  position: absolute;
  top: -32px;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    var(--rnw-main) 0 2px,
    transparent 2px 4px
  );
}


/* =====================================================================
   10. 研修一覧（Figma 214:105804）
   ---------------------------------------------------------------------
   4ブロックとも構造・ボタン4本・タグ文言まで完全に同一。
   4ブロック目（イタリア）だけ研修期間・申込期限の <dl> が無い。
   ===================================================================== */

.rnw-global-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 56px;
  background: var(--global-gra);
}

.rnw-global-list__items {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 0 16px;
}

.rnw-global-pcard {
  display: flex;
  flex-direction: column;
}

.rnw-global-pcard__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px;
  border-radius: 8px 8px 0 0;
  background-color: rgba(255, 255, 255, 0.9);
}

/* タグ＋見出し。SPは縦積み、PCは横並び（Figma 489:46867 gap40）。 */
.rnw-global-pcard__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 写真＋本文列。SPは縦積みで写真が上（写真→本文は12px）、
   PCは左に本文列512px・右に写真600pxの2カラム（Figma 489:46870 gap56）。 */
.rnw-global-pcard__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rnw-global-pcard__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.rnw-global-pcard__tag {
  align-self: flex-start;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--rnw-caption);   /* common/text/gray #626262 */
  color: var(--rnw-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-global-pcard__title {
  color: var(--rnw-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-global-pcard__photo {
  display: block;
  width: 100%;
  /* height: 200px; */
  height: auto;
  object-fit: cover;
}

/* 写真→キャプションの 12px は .rnw-global-pcard__main の gap で取っている。 */
.rnw-global-pcard__caption {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

.rnw-global-pcard__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rnw-global-pcard__row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rnw-global-pcard__row dt {
  flex-shrink: 0;
  /* ▼ 2026-09-01 幅60pxちょうどだと「研修期間」（14px×4字＋字送り1.2×4＝60.8px）が
       0.8pxはみ出して2行に折れる。折り返しを止め、下限だけ60pxで押さえる。
       ラベルは「研修期間」「申込期限」とも4字なので、値の頭は揃ったまま。 */
  width: auto;
  min-width: 60px;                   /* Figma実測。値が x=84 から始まる */
  white-space: nowrap;
  color: var(--rnw-main);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-global-pcard__row dd {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
}

.rnw-global-pcard__btns {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}

/* --- カード下端の「研修ツアー内容」バー（Figma 214:105836） --- */
.rnw-global-pcard__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  background-color: var(--rnw-main);
  color: var(--rnw-white);
  font-family: var(--rnw-font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* Figmaは右向き矢印を90度回して下向きにしている（214:105839）。 */
.rnw-global-pcard__caret {
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url('../../img/service-global/icon_arrow_filled.svg') no-repeat center / 12px 24px;
          mask: url('../../img/service-global/icon_arrow_filled.svg') no-repeat center / 12px 24px;
  transform: rotate(90deg);
}

/* --- 開閉バーのラベル差し替え --------------------------------------- */

.rnw-global-pcard__more-close { display: none; }

.rnw-global-pcard__more[aria-expanded="true"] .rnw-global-pcard__more-open  { display: none; }
.rnw-global-pcard__more[aria-expanded="true"] .rnw-global-pcard__more-close { display: inline; }

/* 開いたら矢印を上向きに返す */
.rnw-global-pcard__more[aria-expanded="true"] .rnw-global-pcard__caret {
  transform: rotate(-90deg);
}


/* --- 展開パネル（Figma PC 694:34681 ほか / SP 694:88532 ほか） -------
   バーの下に開く。上角だけ8pxで、下角はカードの下端なので角丸なし。
   SPは1列で項目間を2-2の点線で区切る。PCは3列（gap48）で点線は無い。
   ---------------------------------------------------------------- */

.rnw-global-pcard__detail {
  border-radius: 8px 8px 0 0;
  background-color: var(--rnw-white);
}

/* SPは上下24px・左右16px（694:88539 の中身が x=16 y=24 で、下端も24px）。 */
.rnw-global-detail__list {
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.rnw-global-dcard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 項目間は 24px + 点線 + 24px（Figma SP 363:24591 の区切り線）。
   おすすめ節と同じ作りで、::before を余白の中央に敷く。 */
.rnw-global-dcard + .rnw-global-dcard { margin-top: 48px; }

.rnw-global-dcard + .rnw-global-dcard::before {
  content: '';
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 1px;
  background-image: repeating-linear-gradient(
    to right,
    var(--rnw-main) 0 2px,
    transparent 2px 4px
  );
}

.rnw-global-dcard + .rnw-global-dcard { position: relative; }

.rnw-global-dcard__title {
  color: var(--rnw-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

/* 写真→本文は12px。見出し→写真の24pxは .rnw-global-dcard の gap で取る。 */
.rnw-global-dcard__photo {
  display: block;
  width: 100%;
  /* height: 200px; */
  height: auto;
  margin-bottom: -12px;
  object-fit: cover;
}

.rnw-global-dcard__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 本文段落（PIICSブロック／Figma 1817:19153）。
   .rnw-global-pcard__caption は太字のリード文なので、
   通常の本文はこちらを使う。 */
.rnw-global-pcard__desc {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* 展開の中身が1ブロックだけのもの（PIICS／Figma 1817:19523）。
   カード3枚の .rnw-global-detail__list と違い、見出しと本文を縦に1本で置く。 */
.rnw-global-detail__solo {
  display: flex;
  flex-direction: column;
  gap: 24px;                 /* Figma実測（見出しの箱→本文） */
  padding: 24px 16px;        /* .rnw-global-detail__list と同じ */
}

.rnw-global-solo__title {
  color: var(--rnw-main);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-global-solo__text {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   11. 沿革（Figma 214:105927）
   ---------------------------------------------------------------------
   ▼ 旧 contents.css 574行〜の table 系ルールを全て打ち消している。
     打ち消し対象：table の margin-bottom、th の中央寄せ・#e2d6cd 塗り・
     border-right 0.8px、td の #f7f7f7 塗り・line-height 1.46・padding 12px、
     tr:not(:last-child) の border-bottom 2px。
     旧CSSは編集禁止のため、ここで同じプロパティを明示的に上書きする。
   ===================================================================== */

.rnw-global-history {
  padding: 56px 24px 80px;
  background-color: var(--global-bg2);
}

/* 見出しカードはセクションのパディングより広い300px中央寄せ */
.rnw-global-history .rnw-global-h2 { margin: 0 auto 32px; }

.rnw-global-history__table {
  width: 100%;
  margin: 0;                        /* 旧 table{margin:0 0 32px} の打ち消し */
  border-collapse: collapse;
  table-layout: fixed;
}

/* 2026-09-25 表を旧サイトの沿革テーブルの見た目に戻した（Kaori指示・スクショ支給）。
   値は旧 /professional/css/contents.css 574行〜の table 系ルールと同じ
   （th #e2d6cd・中央寄せ／td #f7f7f7／行間 1.46・字間 .04em／行の区切り 2px 白）。
   「第N期」の見出し行は、第1期・第2期は不要とのことで廃止し各年のセルの中に1行として入れた。
   第3期・第4期は従来どおり区切りの行（.rnw-global-history__period）で残す。 */
.rnw-global-history__table th,
.rnw-global-history__table td {
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0.04em;
  vertical-align: middle;
  border-bottom: 2px solid var(--rnw-white);
}
.rnw-global-history__table tr:last-child th,
.rnw-global-history__table tr:last-child td { border-bottom: 0; }

.rnw-global-history__table th {
  width: 90px;                      /* 2026-09-25 70px → 90px（年の列を広げる指示） */
  padding: 12px 8px;
  border-right: 0.8px solid var(--rnw-white);
  background-color: #e2d6cd;
  text-align: center;
  letter-spacing: -0.04em;          /* 旧CSSのSP指定 */
  white-space: nowrap;
}

.rnw-global-history__table td {
  padding: 12px 8px;                /* 旧CSSのSP指定 */
  background-color: #f7f7f7;
  text-align: left;
}

/* 「第N期」の行（PC 489:47025 / SP 363:24125）。第3期・第4期だけ。
   年の列を持たず、表幅いっぱいのセルに期名と副題を2行で入れる。
   ▼上の td 指定と詳細度が同じなので、必ずその後に置く。 */
.rnw-global-history__period td {
  padding: 12px 8px;
  background-color: #e2d6cd;                 /* 2026-09-25 pro/bg（水色）→ 年の列と同じ茶色 */
  text-align: center;
}

.rnw-global-history__period b {
  display: block;
  font-weight: 500;                          /* Figmaは太字ではない */
  text-align: center;
}


/* =====================================================================
   12. 利用者の声（Figma 214:105995）
   ---------------------------------------------------------------------
   外側スライダー（カード3枚）の中に、カードごとの声スライダーが入る。
   カード高さが 818 / 818 / 919px と不揃いなので align-items: stretch で
   最大高に揃える。
   ===================================================================== */

.rnw-global-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 80px;
  background-color: var(--rnw-white);
}

.rnw-global-voice__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.rnw-global-voice__photo {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* SPでは白帯は h2 側（.rnw-global-h2--card）が持つ。この箱は素通し。
   PCでは逆に、この箱が白 .9 の640pxのボックスになり h2 とリード文を包む。 */
.rnw-global-voice__headbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 見出しの和文はPC・SPで文言が違う（本文HTMLのTODO参照）。SPはSP用だけ出す。 */
.rnw-global-voice__h2--pc { display: none; }

/* リード文は0826提出PCにだけある。 */
.rnw-global-voice__lead { display: none; }

/* 見出しが2行になるぶん、この帯だけ高さが固定値（Figma 214:106000 は h=126）。
   他セクションの帯は py24 の成り行き高さで Figma と一致する。 */
.rnw-global-voice .rnw-global-h2--card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 126px;
  padding: 0;
}

.rnw-global-voice .rnw-global-slider {
  gap: 32px;
  padding: 0 16px;
}

.rnw-global-voice__track {
  gap: 32px;
  align-items: stretch;
  margin: 0 -16px;
  padding: 0 16px;
}

.rnw-global-vcard {
  display: flex;
  flex-direction: column;
  width: 343px;
  border: 1px solid var(--rnw-main);
  background-color: var(--rnw-white);
}

/* --- 上段：見出し＋円グラフ --- */
.rnw-global-vcard__chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 17px 27px;
  border: 1px solid var(--rnw-main);
  background-color: var(--rnw-bg2);   /* pro/bg #D9F0F4 */
}

.rnw-global-vcard__title {
  width: 100%;
  color: var(--rnw-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

/* 円グラフ本体。Figmaの Group ノードをそのままSVGで書き出したものを敷き、
   ラベルはHTMLテキストを絶対配置で重ねる（画像に文字を焼き込まない）。
   left/top は Figma の ml/mt 実測値をそのまま写している。 */
.rnw-global-chart {
  position: relative;
  width: 300px;
  height: 300px;
}

/* カード3は上にラベルがはみ出すぶん背が高い（Figma 214:106103 は h=325.76） */
.rnw-global-chart--tall { height: 325.76px; }
.rnw-global-chart--tall .rnw-global-chart__img { top: 25.76px; }

.rnw-global-chart__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
}

.rnw-global-chart__label {
  position: absolute;
  color: var(--rnw-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
  white-space: nowrap;
}

/* 白い扇形（10%）に載るラベルだけ文字色が本文色（Figma 214:106032） */
.rnw-global-chart__label--dark { color: var(--rnw-text); }

/* --- 下段：声スライダー --- */
.rnw-global-vcard__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.rnw-global-vcard__body .rnw-global-slider { gap: 16px; }

.rnw-global-vcard__track {
  gap: 16px;
  align-items: stretch;
  width: 279px;                     /* Figma 214:106050 実測 */
  max-width: 100%;
}

.rnw-global-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 240px;
  padding: 16px;
  background-color: var(--global-bg-warm);   /* common/bg #FAF7F2 */
}

.rnw-global-quote__mark {
  display: block;
  width: 28.9px;
  height: 20.266px;
  background: url('../../img/service-global/icon_quote.svg') no-repeat center / contain;
}

.rnw-global-quote p {
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   13. お知らせ（Figma 214:106143）
   ---------------------------------------------------------------------
   一覧本体はショートコード任せ。ここではセクション枠と見出しだけを持つ。
   ※リスト部分のCSSは当てていない。貼るショートコードのマークアップが
     決まったらここに追記する。
   ===================================================================== */

.rnw-global-news {
  padding: 80px 16px;
  background-color: var(--global-bg2);
}

.rnw-global-news__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 一覧本体はショートコードの出力。PCでグリッドの1行を占めさせるために
   ラッパーだけ置いている。中身のマークアップにはCSSを当てていない。 */
.rnw-global-news__list { min-width: 0; }


/* =====================================================================
   14. よくあるご質問（Figma 214:106182）
   ---------------------------------------------------------------------
   Q&A本体は renewal/faq.php のショートコード [professional_faq] が出力し、
   その見た目は部品CSS renewal/css/faq.css が持つ（クラスは .rnw-faq__*）。
   faq.css は faq.php が「本文にショートコードがあるページ」に自動で
   読み込ませるので、ここでは何も定義しない。

   このページが持つのはセクション枠だけ。
   ※海外研修は白地。育児・介護コンサル（129:25828）は #EEE8DE で、
     セクション枠はページごとに違うためページCSS側に置いている。
   ===================================================================== */

.rnw-global-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--rnw-white);
}


/* =====================================================================
   15. お問い合わせ（Figma 214:106233）
   ===================================================================== */

.rnw-global-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 56px 16px;
  background: var(--global-gra);
}

/* この見出しカードだけ幅いっぱい・高さ126px固定（Figma 214:106236） */
.rnw-global-contact .rnw-global-h2--card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 126px;
  padding: 0;
}

.rnw-global-contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--rnw-white);
}

.rnw-global-contact__title {
  color: var(--rnw-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
}

/* SPはボタンを縦積みで全幅（介護コンサル・居宅訪問型の __btns と同じ見え方）。
   PCは20節で 480px x 2 の横並びに上書きする。 */
.rnw-global-contact__card .rnw-btn { width: 100%; }


/* =====================================================================
   16. ボタンのバリエーション
   ---------------------------------------------------------------------
   .rnw-btn（寸法・角丸・字送り）と .rnw-btn--main（塗り）は common.css の
   ものをそのまま使う。ここでは白地・枠線のバリエーションと、
   遷移先未確定の pending 表示だけを足す。
   ===================================================================== */

.rnw-global-btn--outline {
  border: 2px solid var(--rnw-main);
  background-color: var(--rnw-white);
  color: var(--rnw-main);
}
.rnw-global-btn--outline .rnw-btn__icon { color: var(--rnw-main); }

/* 赤の塗りCTA（common/accent/red #912344）。
   0826提出PC・SP2校とも「ポピンズの海外研修とは？」の《お問い合わせ》と、
   お問い合わせ節の2本が赤で、pro/main の teal ではない。
   common.css の .rnw-btn--main に重ねて背景色だけ差し替える。 */
.rnw-global-btn--red { background-color: var(--global-red); }

/* 遷移先未確定。<span> で出しているのでカーソルだけ既定に戻す。
   （href="#" を出さない理由は本文HTMLの冒頭コメントを参照） */
.rnw-global-btn--pending { cursor: default; }

/* .rnw-btn は共通で justify-content:space-between なので、
   2行になるラベルも矢印は右端に留まる。 */
.rnw-global .rnw-btn > span:first-child { line-height: 1.3; }


/* =====================================================================
   17. 追従CTA（Figma SP 694:88321）
   ---------------------------------------------------------------------
   Figma上は独立したトップレベルのグループで、上向きのドロップシャドウが
   付いている（＝下端に固定して本文の上に重なる想定）。
   front.css の .front-cta と同型。Figmaの drop-shadow は blur を標準偏差で
   持つため、box-shadow では2倍にする（7.344 → 14.688px）。
   0829版で塗りボタンの色が pro/main から common/accent/red に変わった。
   ===================================================================== */

.rnw-global-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  /* ドロワー(13)より上。開いている間もバーを出す（2026-09-16）。 */
  z-index: 14;
  display: flex;
  gap: 1.923px;
  background-color: var(--rnw-white);
  box-shadow: 0 -6.779px 14.688px rgba(0, 0, 0, 0.08);
}

.rnw-global-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;
  box-sizing: border-box;
  background-color: var(--rnw-bg2);  /* pro/bg #D9F0F4 */
  color: var(--global-cta-txt);
  font-family: var(--rnw-font-jp);
  font-size: 14px;                   /* SP/button/small */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.rnw-global-cta__btn--main {
  border-left: 0.962px solid #A9A9A9;   /* Figma実測 */
  background-color: var(--global-red);  /* common/accent/red #912344（694:88328） */
  color: var(--rnw-white);
}

/* 遷移先未確定。<span> で出しているのでカーソルだけ既定に戻す。 */
.rnw-global-cta__btn--pending { cursor: default; }


/* =====================================================================
   18. PC（Figma 489:46697「PC」／0826提出_デザイン制作）
   ---------------------------------------------------------------------
   分岐は common.css・front.css と同じ 767/768。
   デザインは 1440 幅で、セクションは全幅・中身だけ 1280 / 1200 / 1000 に
   収まる作り。ここでは中身側に max-width と左右の余白を置き、
   1440 未満でも破綻しないようにしている。

   SPデザイン（363:23765「SP」／SP2校）にあってPCデザインに無いもの
   ── ページ内メニュー（本文5節）と追従CTA（本文14節）── は
   PC幅で display:none にする。マークアップは消していない。
   ===================================================================== */

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

  /* ---------- 0. 基本 ---------- */
  .rnw-global {
    padding-top: var(--rnw-header-h-pc);
  }

  /* PCデザインに無いブロック。SP側の指定はそのまま残している。 */
  .rnw-global-menu { display: none; }
  .rnw-global-cta  { display: none; }

  /* 改行の出し分け（SP用は消し、PC用を出す） */
  .rnw-global-br-sp { display: none; }
  .rnw-global-br-pc { display: inline; }


  /* ---------- 1. 見出し（title/h2） ----------
     PC/title/h2-sub = Lusitana 24、PC/title/h2 = Yu Mincho 42。
     「海外研修とは？」の節だけ 25 / 40（Figma I489:46813）。 */
  .rnw-global-h2__en { font-size: 24px; }
  .rnw-global-h2__ja { font-size: 42px; }

  .rnw-global-h2--about .rnw-global-h2__en { font-size: 25px; }
  .rnw-global-h2--about .rnw-global-h2__ja { font-size: 40px; }

  /* 白 .9 の帯は 640px・内側32px（Figma 489:46821 ほか） */
  .rnw-global-h2--card {
    width: 640px;
    max-width: 100%;
    padding: 32px;
  }

  /* 写真への重なりはPCデザインには無い（帯は写真の中央に置く） */
  .rnw-global-h2--overlap { margin-top: 0; }


  /* ---------- 2. スライダー共通 ----------
     前後ボタン40px・バー260px（Figma 489:46793）。 */
  .rnw-global-ctrl {
    width: 400px;
    height: 40px;
  }

  .rnw-global-ctrl__btn { width: 40px; height: 40px; }
  .rnw-global-ctrl__btn img { width: 40px; height: 40px; }

  .rnw-global-ctrl__bar { width: 260px; }
  .rnw-global-ctrl__thumb { height: 4px; }


  /* ---------- 3. メインビジュアル＋実績3点（Figma 489:46700） ----------
     写真は全幅 1440x707。白 .9 のパネルは左 750・上 279・幅 640。
     パネルの中は 見出し → リード → 実績カード の縦積みで、
     実績はマークアップ上ではMVの入れ子セクション（本文1節）。
     3列グリッドの2列目にパネルと実績を上下で並べ、写真は全面に敷く。 */
  .rnw-global-mv {
    display: grid;
    grid-template-columns: 1fr min(640px, calc(100% - 100px)) 50px;
    grid-template-rows: 279px max-content max-content 1fr;
    height: 707px;
  }

  /* 写真は全面に敷く。グリッドの升目を取るのは箱のほうで、
     写真はその中いっぱいに広がる。
     ▼ 2026-09-01 z-index:0 を追加。
       写真は置換インライン要素なので描画段階が「インラインの中身」になり、
       同じ重なり文脈では静的グリッドアイテム（パネル・実績）の背景より
       あとに塗られる。そのため白パネルが写真の下に隠れていた。
       グリッドアイテムは position:static のままでも z-index が効くので、
       写真側 z-index:0 / パネル・実績側 z-index:1 で前後関係だけを明示する。
       （position:relative にすると、SP用の top:399px / left:50% が効いて
         パネルが下へずれるので触らない。） */
  .rnw-global-mv__photobox {
    grid-area: 1 / 1 / -1 / -1;
    z-index: 0;
  }

  .rnw-global-mv__photo {
    width: 100%;
    height: 100%;
  }

  .rnw-global-mv__panel {
    position: static;
    z-index: 1;          /* ▼ 2026-09-01 追加（上のコメント参照） */
    grid-area: 2 / 2 / 3 / 3;
    transform: none;
    width: auto;
    padding: 29.695px 29.695px 0;   /* 下は実績側で受ける */
    gap: 20.415px;
  }

  .rnw-global-mv__head { gap: 7.424px; }

  .rnw-global-mv__en {
    font-size: 25.983px;
    letter-spacing: 6.867px;
  }

  .rnw-global-mv__h1 { font-size: 42px; }

  .rnw-global-mv__lead {
    font-size: 16px;
    font-weight: 500;               /* PC/text/dafalut/medium */
  }

  /* パネルの下半分。上の 20.415px はパネルの gap ぶん。 */
  .rnw-global-stats {
    z-index: 1;          /* ▼ 2026-09-01 パネルと同じ理由で写真より前に出す */
    grid-area: 3 / 2 / 4 / 3;
    margin-top: 0;
    padding: 20.415px 29.695px 29.695px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  /* 実績カード本体（Figma 489:46709） */
  .rnw-global-stats__list {
    gap: 12px;
    padding: 24px 16px;
    border-radius: 20px;
    background-color: var(--rnw-white);
  }

  .rnw-global-stats__item {
    gap: 6px;
    height: 75.484px;
  }

  .rnw-global-stats__laurel {
    width: 30.488px;
    height: 73.19px;
  }

  .rnw-global-stats__body { letter-spacing: 0.9149px; }
  .rnw-global-stats__num  { font-size: 26.984px; }
  .rnw-global-stats__unit { font-size: 16.011px; }


  /* ---------- 4. 直近イベント（Figma 694:34234） ----------
     セクションは上下56px・左右120px。中身の枠は1200pxだが、その中で
     キービジュアルは 1000x449.808 の中央寄せ。 */
  .rnw-global-event { padding: 56px max(16px, calc((100% - 1200px) / 2)); }

  .rnw-global-event__kv {
    width: 1000px;
    max-width: 100%;
    margin-inline: auto;
  }


  /* ---------- 5. ポピンズの海外研修とは？（Figma 489:46807） ----------
     1280x640 の枠。写真（1000x560）が右上、白 .9 の箱（640）が左下。
     箱はSPでは display:contents で透過しているので、ここで実体に戻す。
     列は 280 / 360 / 640、写真が2〜3列、箱が1〜2列で重なる。 */
  .rnw-global-about {
    grid-template-columns: 21.875% 28.125% 50%;   /* 280 / 360 / 640 の1280比 ▼ 2026-08-30 21章で上書き（≤1024は1列） */
    grid-template-rows: max-content max-content;
    align-items: start;
    gap: 0;
    padding: 80px max(16px, calc((100% - 1280px) / 2));
  }

  .rnw-global-about__box {
    display: flex;
    grid-area: 1 / 1 / 3 / 3;
    z-index: 1;
    flex-direction: column;
    align-self: end;
    gap: 24px;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  .rnw-global-about > .rnw-global-about__photo {
    grid-area: 1 / 2 / 2 / 4;
    width: 100%;
    height: 560px;
  }

  .rnw-global-about__text { font-size: 16px; }

  /* SPは gap 24 に 8 を足して 32 にしていたが、PCは 24 のまま。 */
  .rnw-global-about .rnw-btn {
    margin-top: 0;
    width: 480px;
    max-width: 100%;
  }


  /* ---------- 6. 特徴（Figma 489:46818） ----------
     PCはスライダーではなく 1280 幅に3枚横並び（gap16）。
     地色もPCとSPで違う（PCは pro/bg、SP2校 363:23920 は common/bg2）。
     どちらもそれぞれのデザイン通りにしている。 */
  .rnw-global-features {
    padding: 120px 16px;
    background-color: var(--rnw-bg2);   /* pro/bg #D9F0F4 */
  }

  .rnw-global-features .rnw-global-slider { gap: 56px; }

  .rnw-global-features .rnw-global-ctrl { display: none; }

  .rnw-global-features__track {
    gap: 16px;
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
    overflow-x: visible;
  }

  .rnw-global-features__track > * {
    flex: 1 1 0;  /* ▼ 2026-08-30 21章で上書き（≤1024は1列） */
    min-width: 0;
  }

  .rnw-global-fcard { width: auto; }

  .rnw-global-fcard__title { font-size: 24px; }
  .rnw-global-fcard__text  { font-size: 16px; }


  /* ---------- 7. こんな方におすすめ（Figma 489:46843） ----------
     写真は 1440x400、見出しの帯は写真の上下中央。 */
  .rnw-global-target { gap: 56px; }

  .rnw-global-target__head {
    position: relative;
    justify-content: center;
  }

  .rnw-global-target__photo { height: 400px; }

  .rnw-global-target__head .rnw-global-h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .rnw-global-target__body {
    padding: 0 max(16px, calc((100% - 1200px) / 2));
  }

  .rnw-global-target__list { padding: 41px; }

  .rnw-global-tcard {
    font-size: 20px;
    letter-spacing: 1.2px;
    text-align: center;
  }


  /* ---------- 8. 研修一覧（Figma 489:46859） ----------
     カードは 1280 幅。上段が タグ＋見出し（gap40）、
     下段が 本文列512 ＋ 写真600（gap56）。 */
  .rnw-global-list {
    gap: 56px;
    padding: 120px 16px;
  }

  .rnw-global-list__items {
    gap: 32px;
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
    padding: 0;
  }

  .rnw-global-pcard__body {
    gap: 56px;
    padding: 56px;
  }

  .rnw-global-pcard__head {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .rnw-global-pcard__tag { font-size: 16px; }

  .rnw-global-pcard__title {
    font-size: 24px;
    text-align: left;
  }

  .rnw-global-pcard__main {
    flex-direction: row-reverse;  /* ▼ 2026-08-30 21章で上書き（≤1024は縦積み） */   /* DOM順は写真→本文列。PCは本文列が左 */
    align-items: flex-start;
    gap: 56px;
  }

  .rnw-global-pcard__photo {
    flex: 0 0 600px;
    width: 600px;
    max-width: 100%;
    height: 347px;
  }

  .rnw-global-pcard__col {
    flex: 1 1 0;
    gap: 16px;
  }

  .rnw-global-pcard__caption { font-size: 16px; }

  .rnw-global-pcard__row dt,
  .rnw-global-pcard__row dd { font-size: 16px; }

  .rnw-global-pcard__row dt { width: 80px; }

  /* 「研修期間」ブロック → ボタン群は 24px（col の gap 16 に 8 を足す） */
  .rnw-global-pcard__btns {
    flex-flow: row wrap;
    gap: 24px;
    margin-top: 8px;
    padding-top: 0;
  }

  .rnw-global-pcard__btns > :last-child {
    width: 100%;
  }


  /* 上段の2本（紹介動画・コラム）だけ半分幅で横並び */
  .rnw-global-pcard__btns > :nth-child(1),
  .rnw-global-pcard__btns > :nth-child(2) { width: calc(50% - 12px); }

  .rnw-global-pcard__btns > :nth-child(n + 3) { width: 100%; }

  .rnw-global-pcard__more { padding: 16px 8px; }

  .last__card .rnw-global-pcard__btns > :nth-child(1),
.last__card .rnw-global-pcard__btns > :nth-child(2) {
  width: 100%;
}


  /* 展開パネル（Figma 694:34681 / 34775 / 34711 / 34752）。
     内側40px、gap48。1280 - 40*2 = 1200 を3列に割って1列368px。
     点線の区切りはSPだけなので消す。 */
  .rnw-global-detail__list {
    display: grid;  /* ▼ 2026-08-30 21章で上書き（≤1024は1列） */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding: 40px;
  }

  /* 3枚以外は3列に並べず、固定幅2列の中央寄せになる。
       4枚（スタンフォード 694:34719）… 368px x 2 を2段。左右に120pxの余白。
       2枚（レッジョ 694:34760）      … 384px x 2。3列時より1枚16px広い。
     余りは justify-content で左右に振る。1280未満に縮んでも
     minmax の下限0で列が縮むだけなので、はみ出さない。 */
  .rnw-global-detail__list--2col {
    grid-template-columns: repeat(2, minmax(0, 368px));
    justify-content: center;
  }

  .rnw-global-detail__list--wide {
    grid-template-columns: repeat(2, minmax(0, 384px));
  }

  .rnw-global-dcard + .rnw-global-dcard { margin-top: 0; }
  .rnw-global-dcard + .rnw-global-dcard::before { content: none; }

  /* 見出しの行数が項目ごとに違うので、そのままだと写真の上端が揃わない。
     subgrid で見出し・写真・本文を親の同じ行に載せて揃える。
     非対応ブラウザ向けに、見出しに3行ぶんの最低高さを持たせておく。 */
  .rnw-global-dcard__title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 7.2em;             /* 20px x 1.8 x 3行 = 108px（Figma 489:47299） */
    font-size: 19px;
  }

  /* @supports (grid-template-rows: subgrid) {
    .rnw-global-dcard {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 24px;
    }

    .rnw-global-dcard__title { min-height: 0; }
  } */

  .rnw-global-dcard {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .rnw-global-dcard__text { font-size: 16px; }

  .rnw-global-pcard__desc { font-size: 16px; }   /* Figma 1817:19153 */

  /* PIICSの展開（Figma 1817:19523）。内側40px、中身は816px幅で中央寄せ。
     見出しの箱は108px（1817:19526）。カード3枚側の .rnw-global-dcard__title に
     3行ぶんの最低高さを持たせているのと同じ考え方で、1行を上下中央に置く。 */
  .rnw-global-detail__solo {
    align-items: center;
    padding: 40px;
  }

  .rnw-global-solo__title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 816px;
    min-height: 108px;
    font-size: 24px;
  }

  .rnw-global-solo__text {
    width: 100%;
    max-width: 816px;
    font-size: 16px;
  }


  /* ---------- 9. 沿革（Figma 489:47000） ----------
     表は 1000 幅。年の列が 70px。期の行は pro/bg の1セル。 */
  .rnw-global-history { padding: 80px max(24px, calc((100% - 1000px) / 2)); }

  .rnw-global-history .rnw-global-h2 { margin: 0 auto 56px; }

  .rnw-global-history__table {
    width: 1000px;
    max-width: 100%;
    margin-inline: auto;
  }

  /* 年の列は旧サイトのスクショ実測（表幅の約20%）から、2026-09-25 の指示で25%に広げた。
     文字は旧CSSの本文と同じ15px */
  .rnw-global-history__table th {
    width: 25%;
    letter-spacing: 0.04em;
  }

  .rnw-global-history__table th,
  .rnw-global-history__table td { font-size: 15px; }

  .rnw-global-history__table td { padding: 12px; }

  /* 「第N期」の行はPCだけ期名20px（Figma 489:47026 / 47027） */
  .rnw-global-history__period b { font-size: 20px; }


  /* ---------- 10. 利用者の声（Figma 489:47067） ----------
     見出しは写真（1440x400）の中央に白 .9 の箱（640）。
     カードはスライダーではなく縦に3枚積む。
     カードの中は 見出し（全幅）／ 円グラフ400 ＋ 声678（gap40）。 */
  .rnw-global-voice { gap: 56px; }

  .rnw-global-voice__head { position: relative; }

  .rnw-global-voice__photo { height: 400px; }

  .rnw-global-voice__headbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 24px;
    width: 640px;
    max-width: calc(100% - 32px);
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.9);
  }

  /* 白帯は箱側が持つので、中の見出しからは外す。 */
  .rnw-global-voice .rnw-global-h2--card {
    width: 100%;
    height: auto;
    padding: 0;
    background-color: transparent;
  }

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

  .rnw-global-voice__lead {
    display: block;
    width: 100%;
    color: var(--rnw-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 1.2px;
    text-align: center;
  }

  .rnw-global-voice .rnw-global-slider { gap: 0; padding: 0; }

  .rnw-global-voice .rnw-global-slider > .rnw-global-ctrl { display: none; }

  .rnw-global-voice__track {
    flex-direction: column;
    gap: 32px;
    width: 1280px;
    max-width: calc(100% - 32px);
    margin-inline: auto;
    padding: 0;
    overflow-x: visible;
  }

  .rnw-global-voice__track > * { width: 100%; }

  .rnw-global-vcard {
    display: grid;  /* ▼ 2026-08-30 21章で上書き（≤1024は1列） */
    grid-template-columns: 400px minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 16px;
    width: 100%;
    padding: 40px 80px;
    background-color: var(--rnw-bg2);   /* pro/bg #D9F0F4 */
  }

  /* 見出しと円グラフをカード直下のグリッド項目に上げる。
     枠と塗りはカード側が持つので、この箱の border / background は消える。 */
  .rnw-global-vcard__chart { display: contents; }

  .rnw-global-vcard__title {
    grid-column: 1 / -1;
    font-size: 20px;
  }

  /* 円グラフはSPの300pxを 4/3 倍して400pxにする。
     ラベルの left / top はSPの実測値のままで、拡大がそのまま効く。
     transform はレイアウト上の大きさを変えないので、差分を margin で確保する。
     ラベルの文字（SP18px）も 4/3 で 24px になり、Figma のPC値と一致する
     （カード1だけ Figma が 23px だが、カード2・3は24px なので24に揃えた）。 */
  .rnw-global-chart {
    grid-column: 1;
    transform: scale(1.33333);
    transform-origin: top left;
    margin-right: 100px;
    margin-bottom: 100px;
  }

  .rnw-global-chart--tall { margin-bottom: 108.59px; }

  .rnw-global-vcard__body {
    grid-column: 2;
    padding: 0;
  }

  .rnw-global-vcard__body .rnw-global-ctrl { display: none; }

  .rnw-global-vcard__track {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    overflow-x: visible;
  }

  .rnw-global-vcard__track > * { width: 100%; }

  .rnw-global-quote { width: 100%; }

  .rnw-global-quote p { font-size: 16px; }


  /* ---------- 11. お知らせ（Figma 489:47158） ----------
     見出しが左、一覧を見るボタンがその右。一覧は2行目に全幅。
     トップ front.css 10節と同じ組み方。 */
  .rnw-global-news { padding: 80px max(16px, calc((100% - 1280px) / 2)); }

  .rnw-global-news__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 56px;
    row-gap: 56px;
    width: 1280px;
    max-width: 100%;
    margin-inline: auto;
  }

  .rnw-global-news__inner > .rnw-global-h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .rnw-global-news__more {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: 301px;                      /* Figma 489:47162 */
    /* PCだけ枠と文字が common/accent/red。SPは pro/main（16節）。 */
    border-color: var(--global-red);
    color: var(--global-red);
  }

  .rnw-global-news__more .rnw-btn__icon { color: var(--global-red); }

  .rnw-global-news__list {
    grid-column: 1 / -1;
    grid-row: 2;
  }


  /* ---------- 12. よくあるご質問（Figma 694:34628） ---------- */
  .rnw-global-faq {
    gap: 56px;
    padding: 80px max(24px, calc((100% - 1280px) / 2));
  }

  /* 0829版 694:34631 で見出しが中央寄せに変わった。
     SP 694:88265 は左寄せのままなので、PC側だけで上書きする。
     お知らせ（694:34592）は左寄せのままで、こちらは対象外。 */
  .rnw-global-faq .rnw-global-h2--left { text-align: center; }


  /* ---------- 13. お問い合わせ（Figma 489:47243） ----------
     見出しの帯は640px、カードは1280px。ボタンは480pxを2本横並び。 */
  .rnw-global-contact {
    gap: 56px;
    padding: 56px max(16px, calc((100% - 1280px) / 2));
  }

  /* この帯だけ上下パディングが無い（Figma 489:47246 は px32 / py0） */
  .rnw-global-contact .rnw-global-h2--card {
    width: 640px;
    max-width: 100%;
    height: auto;
    padding: 0 32px;
  }

  /* Figma 489:47248：白いカードの中で見出しが1行目、
     ボタン2本（480px）が2行目に gap24 で横並び。 */
  .rnw-global-contact__card {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;  /* ▼ 2026-08-30 21章で上書き（中央寄せにcenter） */
    gap: 16px 24px;
    padding: 24px 16px;
  }

  .rnw-global-contact__title {
    width: 100%;
    font-size: 24px;
    text-align: left;  /* ▼ 2026-08-30 21章で上書き（中央寄せにcenter） */
  }

  .rnw-global-contact__card .rnw-btn {
    width: 480px;
    max-width: 100%;
  }

}


/* =====================================================================
   19. 動き（Figmaコメント。いずれも High priority）
   ---------------------------------------------------------------------
   「グラデーションがふわっと動きます」「画像については、Key Burnsで動く想定です」
     ・MVの写真 … 20秒かけてゆっくり拡大→戻る
     ・pro/gra の面（ページ内メニュー／研修一覧／お問い合わせ）…
       グラデーションの位置をゆっくり往復させる
   OS側で「視差効果を減らす」設定なら止める。

   グラデーションの当て先は、同じ指示を先に受けている
   care-consulting.css 16節と同じ考え方に揃えた。コメントの引き出し線は
   MVを指しているが、MVの中にグラデーションと呼べる要素が無いため
   （写真の上に乗る薄い色の層は最前面の写真に完全に隠れている）、
   このページで pro/gra を敷いている3面を対象にしている。
   ▼要確認：指示にノード指定が無かったための当てはめ。
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .rnw-global-mv__photo {
    animation: rnw-global-kenburns 10s ease-in-out infinite alternate;  /* ▼ 2026-09-01 20s→10s（動きが遅いとの指摘） */
  }

  .rnw-global-menu,
  .rnw-global-list,
  .rnw-global-contact {
    background-size: 100% 160%;
    background-position: 50% 0%;
    animation: rnw-global-gra 16s ease-in-out infinite alternate;
  }
}

@keyframes rnw-global-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes rnw-global-gra {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}


/* =====================================================================
   20. スクロール追従の fade-in（Figma SP注釈「下から上にふわっと表示」）
   ---------------------------------------------------------------------
   「以下、各見出し・コンテンツ（セクションの中身）に、スクロール追従で
   fade-inアニメーションが入ります。下から上にふわっと表示されます」への対応。

   クラスは renewal/js/front.js が付ける（対象の一覧もJS側の FADE_GROUPS）。
   JSが読めない・IntersectionObserver が無い・OS側で「視差効果を減らす」に
   なっている場合は何も付かず、本文はそのまま表示される。
   CSSに最初から opacity:0 を書かないのはこのため。

   PC・SPで分けない。注釈はSP（694:87690）に付いているが、PC側で
   打ち消す指定は無いため両方に掛ける。

   クラス名がトップの .front-fade と別なのは、下層ページのクラス接頭辞を
   rnw-global- に揃えているため。動きの値は front.css と同じ。
   ===================================================================== */

.rnw-global-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.rnw-global-fade--in {
  opacity: 1;
  transform: none;
}

/* OS側で「視差効果を減らす」設定のときは動かさない。
   JS側でも発火を止めているが、途中で設定を変えた場合の保険。 */
@media (prefers-reduced-motion: reduce) {
  .rnw-global-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


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

/* --- 2026-08-30 研修一覧 pcard：写真600px固定でテキストが潰れる→≤1210pxは縦積み、写真は全幅・高さauto（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1210px) {
  /* 縦積み時は本文列を全幅に。PCの align-items:flex-start が残ると col が内容幅で左寄せ＋右余白になるため stretch に戻す（2026-09-27）。 */
  .rnw-global-pcard__main { flex-direction: column; align-items: stretch; }
  .rnw-global-pcard__photo { flex: 0 0 auto; width: 100%; max-width: none; height: auto; }
}

/* --- 2026-08-30 海外研修とは？ about：3カラム→縦１列、写真は高さauto（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-global-about { grid-template-columns: 1fr; grid-template-rows: auto; }
  .rnw-global-about > .rnw-global-about__photo { height: auto; }
}

/* --- 2026-08-30 詳細 detail(dcard)：3列/2列→縦１列、写真は高さauto（PC上書き） --- */
/* display:flex column にすれば --2col / --wide の grid 指定も無効化されて1列になる。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-global-detail__list { display: flex; flex-direction: column; }
  .rnw-global-dcard__photo { height: auto; }
}

/* --- 2026-08-30 利用者の声 vcard：円グラフ＋本文の2カラム→縦１列（PC上書き） --- */
/* 子に grid-column:1(グラフ)/2(本文) が明示されているため、display:flex column で確実に１列にし、align-items:center で中央寄せ。円グラフはPC拡大(scale1.33)を解除してSP300pxで中央に、下に24pxの間隔。 */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-global-vcard { display: flex; flex-direction: column; align-items: center; }
  .rnw-global-vcard .rnw-global-chart { transform: none; margin: 0 0 24px 0; }
  .rnw-global-voice__photo { height: auto; }
}

/* --- 2026-08-30 特徴 fcard：3列→タブレットは1列（全幅）、写真は高さauto（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-global-features__track { flex-direction: column; }
  .rnw-global-features__track > * { flex: 0 0 auto; width: 100%; }
  .rnw-global-fcard__photo { height: auto; }
}

/* --- 2026-08-30 こんな方に target：写真は高さauto（無切れ、PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .rnw-global-target__photo { height: auto; }
}

/* --- 2026-08-30 お問い合わせ：カード内が左寄せ→中央寄せ（デザイン通り、PC上書き） --- */
/* PCは justify-content:flex-start ＋ titleの text-align:left で左寄せになっていた。見出し＋ボタンを中央に。 */
@media only screen and (min-width: 768px) {
  .rnw-global-contact__card { justify-content: center; }
  .rnw-global-contact__title { text-align: center; }
}

/* --- 2026-08-30 お問い合わせ見出し：カード見出しの白背景（.rnw-global-h2--card の rgba(255,255,255,.9)）を外す（PC上書き） --- */
/* h2--card の背景は基本部で共通に付くが、contact 見出しはグラデーション上に直接なので透過にする。 */
@media only screen and (min-width: 768px) {
  .rnw-global-contact .rnw-global-h2--card { background-color: transparent; }
}

/* =====================================================================
   ドロワーを開いている間も追従CTAを前面に出す（2026-09-16）
   ---------------------------------------------------------------------
   バーの z-index をドロワー（13）より上げたぶん、ドロワーの中身が
   バーに隠れないよう下余白をバーの高さぶん足す。
   PC幅ではバーを出さないので元（pb-40）に戻す。
   ===================================================================== */
.rnw-menu__inner { padding-bottom: calc(40px + 48.51px); }

@media only screen and (min-width: 768px) {
  .rnw-menu__inner { padding-bottom: 40px; }
}