@charset "UTF-8";

/* =====================================================================
   ポピンズ educare リニューアル
   ポピンズ ハワイ ページ専用CSS（英語版）
   （/educare/service/hawaii/en/）
   Figma: PC 1144:13800（セクション「英語_ポピンズハワイ」）
          SP 1144:15128（セクション「0812_【レビュー依頼】【英語】 ポピンズハワイページ制作（日英））」）
          SPの「Show Details」展開パネル 1144:15678 / 15760 / 15796
          SPドロワー 1144:15871
   ---------------------------------------------------------------------
   ■ 2026-09-04 全面差し替え
     旧デザイン（Figma 297:12811）の実装は _backup/20260904-hawaii-en-renew/ に退避。
     新デザインは**日本語版（renewal/css/pages/hawaii.css）と構成・寸法が完全に同じ**で、
     違うのは原稿だけ。そのため、このファイルは hawaii.css の接頭辞を
     `rnw-hw-` → `rnw-hwe-` ／ ローカル変数 `--hw-` → `--hwe-` に置き換えたもの。

     ▼日英どちらかだけを直すときはこのファイル単体で完結するが、
       共通の修正（余白・色・PCの組み替え等）は **hawaii.css と2か所** に
       入れること。差分が出たらこのコメントに書き足す。
       ・2026-09-04 時点：見た目の差分は無し（原稿だけが違う）

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

   ■ 名前空間
     ページ固有の接頭辞は `rnw-hwe-`（hawaii english）。
     日本語版（`rnw-hw-`）とも既存ページ（cs / cd / ns / as / is）とも衝突しない。

   ■ 画像
     **新規の書き出しは0点。** 新デザインの画像は日本語版とハッシュが全点一致
     したため、renewal/img/hawaii/ と renewal/img/hawaii/pc/ をそのまま参照する。

   ■ 以下、寸法・色・PCの組み替えの考え方は hawaii.css と同一。
     詳しい経緯は renewal/pages/hawaii.NOTE.md と hawaii-en.NOTE.md を参照。
   ===================================================================== */


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

/* Figma の SPフレーム自体が紙テクスチャ地。セクション側で背景指定が無い
   ところ（MV・口コミ）はこの地色がそのまま出る。
   4%の重ねを擬似要素なしで再現するため、地色を96%の単色レイヤーとして
   テクスチャの上に敷いている（＝テクスチャを4%で透かしたのと同じ見え方）。 */
.rnw-hwe {
  /* ▼このページのキーカラー。エデュケア共通の --rnw-main（#00429A）／
     --rnw-main2（#507CB8）とは別系統なので、変数はここで閉じる。 */
  --hwe-main:    #20BDAE;  /* Figma実測 見出し・タグ・ボタン・罫 */
  --hwe-main-bg: #EDFAF8;  /* Figma実測 PCの施設名パネル */
  --hwe-accent:  #EC6E43;  /* = --rnw-accent（英字サブ） */
  --hwe-leaf:    #EBB72F;  /* Figma実測 月桂樹（アセットに焼き込み済み） */
  --hwe-border:  #EEF2F8;  /* Figma実測 Contactの区切り線 */
  --hwe-tel:     #465484;  /* Figma実測 日本国内のTEL/MAIL */
  --hwe-gra: linear-gradient(to bottom, #F3F5F6 0%, var(--hwe-main) 52.404%);

  /* Yu Mincho Pr6N（Figma PC/title/h2）はWeb配信が無いため、
     OS搭載の游明朝→ヒラギノ明朝の順にフォールバックさせる（英語版と同じ）。 */
  --hwe-font-mincho: 'Yu Mincho Pr6N', 'Yu Mincho', YuMincho, 'Hiragino Mincho ProN', 'Noto Serif JP', serif;

  /* 固定ヘッダー（.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: #FAF7F2;
  background-image:
    linear-gradient(rgba(250, 247, 242, 0.96), rgba(250, 247, 242, 0.96)),
    url('../../img/front/texture_paper.jpg');
  background-repeat: repeat, repeat;
  background-position: left top, left top;
  background-size: auto, 1228.8px 819.3px;
}

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

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

/* <picture> はレイアウトに参加させない（枠のクラス指定がそのまま <img> に効く）。 */
:where(.rnw-hwe) picture { display: contents; }

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

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

:where(.rnw-hwe) :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);
}

/* ページ内アンカーの着地位置を固定ヘッダーのぶん下げる。
   #kids / #infant / #sitter / #event は旧サイトのトップから張られている
   リンクを引き継いだもの（本文のコメント参照）。 */
.rnw-hwe-card,
.rnw-hwe-program,
.rnw-hwe-services,
.rnw-hwe-faq,
.rnw-hwe-contact {
  scroll-margin-top: var(--rnw-header-h-sp);
}


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

/* --- 写真プレースホルダー ---
   実写真が入る <img> にも、未支給の <div> にも付く共通の枠。
   未支給は #626262 のベタ塗りで出る（Figmaの塗りに合わせている）。 */
.rnw-hwe-ph {
  background-color: #626262;
  object-fit: cover;
}

/* --- 本文テキスト（Figma SP/title/educare/text）--- */
.rnw-hwe-text {
  width: 100%;
  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 1144:16013 ほか）---
   施設カードの「対象：〜」と、詳細パネルの年齢タグで共用。 */
.rnw-hwe-tag {
  align-self: center;
  padding: 12px;                           /* Figma実測 */
  border: 0.745px solid var(--hwe-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(--hwe-main);
  white-space: nowrap;
}

/* --- セクション見出しカード（Figma 1144:16007 / 16211 / 16249 / 16307）---
   サービス一覧・Our promise・口コミ・FAQ で共用。地色だけ修飾子で変える。 */
.rnw-hwe-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.rnw-hwe-head__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;                   /* Figma実測 */
  width: 100%;
  max-width: 343px;
  padding: 24px;
  border-radius: 20px;
  background-color: #FFFFFF;
  text-align: center;
}

/* Our promise の見出しカードだけ地色が educare/bg（Figma 1144:16211）。 */
.rnw-hwe-head__card--bg2 { background-color: var(--rnw-bg2); }

/* FAQ は地色も角丸も無く、左右24pxだけ（他ページと同じ扱い）。 */
.rnw-hwe-head__card--plain {
  padding: 0 24px;
  border-radius: 0;
  background-color: transparent;
}

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

/* 英字サブ。
   ▼FigmaはSPの「FAQ」がKrona One・「Our promise」がMOBO-Bold と割れているが、
     PCは両方ともKrona Oneなので、そちらと旧実装（.rnw-hwe-head__en）に揃えた。 */
.rnw-hwe-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(--hwe-accent);               /* educare/accent #EC6E43 */
}

.rnw-hwe-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(--hwe-main);
}

/* --- 角丸ボタン ---
   枠線（MVの「ご予約はこちら」）／赤塗り（各カードの「ご予約はこちら」）／
   ティール塗り（go instagram）の3種類。高さ・角丸・内側余白は共通。 */
.rnw-hwe-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-hwe-btn--outline {
  border: 2px solid var(--hwe-main);  /* Figma実測 */
  background-color: #FFFFFF;
  color: var(--hwe-main);
}

.rnw-hwe-btn--red {
  border: 0.745px solid #FFFFFF;  /* Figma実測 */
  background-color: var(--rnw-link);  /* common/accent/red #912344 */
  color: #FFFFFF;
}

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

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

/* ▼ホバー時の文字色を据え置く。
   旧CSS（/educare/css/）に `body:not(.tab_view) a:hover { opacity:.6; color:#435488 }`
   があり、<a> にすると文字が青灰色に変わってしまう。地の薄まり（opacity）は
   サイト共通の挙動なので残し、色だけ元に戻す。
   矢印は common.css の .rnw-icon が background-color:currentColor で描いて
   いるので、color を戻せば矢印も一緒に白へ戻る。
   詳細度は 0-3-1 で、旧CSS側の 0-1-2 に勝つ。 */
.rnw-hwe a.rnw-hwe-btn:hover          { color: #FFFFFF; }
.rnw-hwe a.rnw-hwe-btn--outline:hover { color: var(--hwe-main); }

/* Contactの電話・メールも同じ理由で色を据え置く。 */
.rnw-hwe .rnw-hwe-contact__info a:hover       { color: var(--hwe-tel); }
.rnw-hwe .rnw-hwe-contact__place-info a:hover { color: var(--hwe-main); }

/* 丸矢印。アセットは下向きで書き出されているので -90度回して右向きにする。
   mask の共通指定は common.css の .rnw-icon が持っている。 */
.rnw-hwe-btn__icon {
  flex-shrink: 0;
  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);
}


/* --- スライダー ---
   スクロールはCSS（overflow-x + scroll-snap）、前後ボタンと進捗バーは
   renewal/js/front.js が [data-rnw-slider] 契約で制御する。 */

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

.rnw-hwe-slider__title {
  width: 100%;
  font-family: var(--rnw-font-educare-title);  /* Figma SP/title/educare/text/large */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--hwe-main);
  text-align: center;
}

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

/* 円はCSS、中の矢印は icon_chevron.svg のmask。
   既存の swiper_next2.svg（img/front/icon_slider_next.svg）は円が
   #00429A で焼き込まれていて、このページのティールに変えられないため。 */
.rnw-hwe-slider__btn {
  flex-shrink: 0;
  display: block;
  width: 24px;  /* Figma実測 */
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--hwe-main);
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* chevronアセットは上向き。90度回して右向き（次へ）にする。 */
.rnw-hwe-slider__btn::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  -webkit-mask-image: url('../../img/icon_chevron.svg');
          mask-image: url('../../img/icon_chevron.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  /* icon_chevron.svg は preserveAspectRatio="none"／viewBox 10.6×14.6 で、
     矢印そのものは箱の縦41%（y 4〜10）しか使っていない。
     回転後の見えを Figma の 4.6×7.5 に合わせるため、
     幅7.5px・高さ 4.6 ÷ 0.41 ≒ 11px の箱を与えている。 */
  -webkit-mask-size: 8px 11px;
          mask-size: 8px 11px;
  transform: rotate(90deg);
}

.rnw-hwe-slider__btn--prev::before { transform: rotate(-90deg); }

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

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

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

/* カード列。パネルの内側で切り取る（画面端まで流さない）。
   カードは279px・間隔20pxなので、2枚目が右端に12pxだけ覗く。 */
.rnw-hwe-slider__track {
  display: flex;
  align-items: stretch;
  gap: 20px;  /* Figma実測 */
  width: 100%;
  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-hwe-slider__track::-webkit-scrollbar { display: none; }

/* --- スライダーのカード（魅力・特長）--- */

.rnw-hwe-scard {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;      /* Figma実測 写真 → キャプション */
  width: 279px;   /* Figma実測 */
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
  scroll-snap-align: start;
}

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

.rnw-hwe-scard__text {
  width: 100%;
  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: center;
}


/* --- 注記ボックス（「対象ホテル」「利用例」）--- */

.rnw-hwe-note {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* Figma実測 */
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

.rnw-hwe-note__title {
  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(--hwe-main);
  text-align: center;
}

/* 箇条書きの「・」はFigmaのリスト書式。テキストに文字として持たせず
   ::before で出して、折り返し時に頭が揃うようにしている。 */
.rnw-hwe-note__list {
  font-family: var(--rnw-font-jp);  /* Figma common/text/caption */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: #000000;
}

.rnw-hwe-note__list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.rnw-hwe-note__list > li::before { content: '・'; }


/* --- 仕様表（Figma Table → Body）---
   <table> ではなく <dl> で組んでいる。見出しとデータの1対1の対応で、
   列見出しが無い＝表というより定義リストの構造のため。 */
.rnw-hwe-spec { width: 100%; }

.rnw-hwe-spec__row {
  display: flex;
  align-items: stretch;
}

.rnw-hwe-spec__key,
.rnw-hwe-spec__val {
  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);
  border-bottom: 2px solid #FFFFFF;  /* Figma実測 行間の白い罫 */
}

.rnw-hwe-spec__key {
  flex-shrink: 0;
  width: 130px;                    /* Figma実測 */
  padding: 11.5px 8px 2px;         /* Figma実測 */
  border-right: 1px solid #FFFFFF; /* Figma実測 */
  background-color: #EEE8DE;       /* common/bg2 */
}

.rnw-hwe-spec__val {
  flex: 1 0 0;
  min-width: 0;
  padding: 11.28px 12px 13.39px;   /* Figma実測 */
  background-color: #FAF7F2;       /* common/bg */
}


/* --- SPドロワー（Figma 1144:16700）---
   共通のドロワーは educare/bg #E7EFFB（common.css の --rnw-bg2）だが、
   このページのフレームだけ #EDFAF8。CSSがこのページでしか読まれないので、
   .rnw-menu の地色をここで上書きする（common.css は触らない）。
   中のページ内ナビのカード（.rnw-pagenav--card）は白のままで合っている。 */
.rnw-menu { background-color: var(--hwe-main-bg); }


/* =====================================================================
   2. メインビジュアル（Figma SP 1144:15913 ／ PC 1144:14473）
   ---------------------------------------------------------------------
   SPは写真（375×400）の上に、200pxの位置から白パネルが重なる構造。
   PCは白地＋線画＋下端の波形の上に、左テキスト・右写真。
   ===================================================================== */

.rnw-hwe-mv {
  position: relative;
  padding: 200px 16px 33px;  /* Figma実測 パネルの重なり位置と下の余白 */
  background-color: #FAF7F2;
  overflow: hidden;
}

.rnw-hwe-mv__ph {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;  /* Figma実測 */
}

/* 幅の広いSPで高さ400px固定だと写真の上下が切れるので、写真の比率（376×400）の
   まま幅に比例させる。白パネルは375px時と同じく、写真の下端から200px上で
   重なり始めて写真の下へはみ出す位置にする（2026-09-27 指示）。 */
@media only screen and (max-width: 767px) {
  .rnw-hwe-mv { padding-top: calc(100vw * 400 / 376 - 200px); }
  .rnw-hwe-mv__ph {
    height: auto;
    aspect-ratio: 376 / 400;
  }
}

/* Figma 1144:15916。内側の列は298px幅で中央寄せなので、左右余白を22.5pxにして
   343 − 22.5×2 ＝ 298 を作っている。 */
.rnw-hwe-mv__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                              /* Figma実測 */
  padding: 16px 22.5px;                   /* Figma実測 */
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-hwe-mv__head {
  display: flex;
  flex-direction: column;
  gap: 8px;  /* Figma実測 */
  width: 100%;
}

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

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

/* PCだけの装飾（線画・波形）。SP幅では出さない。 */
.rnw-hwe-mv__deco { display: none; }


/* =====================================================================
   3. バッジ帯（Figma SP 1144:15925 ／ PC 1144:14495）
   ---------------------------------------------------------------------
   月桂樹は左右で同じアセットを使い、右だけ左右反転する。
   アセットは英語版の img/hawaii-en/deco_leaf.svg（同一グラフィック）。
   ===================================================================== */

.rnw-hwe-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;           /* Figma実測 */
  padding: 32px;       /* Figma実測 外32/16 ＋ 内0/16 */
  background-color: #FFFFFF;
}

.rnw-hwe-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;            /* Figma実測 */
  width: 100%;
  max-width: 290px;    /* Figma実測 */
  min-height: 54px;
}

.rnw-hwe-badge__leaf {
  flex-shrink: 0;
  width: 22px;   /* Figma実測 */
  height: 54px;
  background-image: url('../../img/hawaii-en/deco_leaf.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.rnw-hwe-badge__leaf--r { transform: scaleX(-1); }

.rnw-hwe-badge__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;  /* Figma実測 */
  text-align: center;
}

.rnw-hwe-badge__title {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 20px;
  font-weight: 600;
  line-height: 1;        /* Figma実測 20px文字／高さ20px */
  letter-spacing: 1.2px;
  color: var(--rnw-text);
  white-space: nowrap;
}

.rnw-hwe-badge__note {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;      /* Figma実測 */
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}


/* =====================================================================
   4. サービス一覧（Figma SP 1144:16005 ／ PC 1144:14575）
   ---------------------------------------------------------------------
   id は旧版の #hw-hotels を引き継いでいる
   （renewal/pagenav.php のSPドロワーが参照しているため）。
   ===================================================================== */

.rnw-hwe-services {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                        /* Figma実測 見出し → カード列 */
  padding: 56px 0 80px;             /* Figma実測 */
  background-image: var(--hwe-gra);
}

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


/* --- 施設カード --- */

.rnw-hwe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;        /* Figma実測 タグ → 本文 → 詳細 */
  width: 100%;
  padding: 24px 16px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-hwe-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 紹介 → スライダー → 注記 → ボタン */
  width: 100%;
}

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

/* SPでは素のテキスト。PCだけ薄いティールのパネルになる。 */
.rnw-hwe-card__titlebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測（SPは施設名と所在地の間も24px） */
  width: 100%;
}

.rnw-hwe-card__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(--hwe-main);
  text-align: center;
}

/* 📍 は絵文字そのままFigmaのテキストに含まれている（アイコン画像ではない）。 */
.rnw-hwe-card__place {
  width: 100%;
  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: #000000;  /* Figma実測（本文の#444ではなく黒） */
  text-align: center;
}

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

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

/* 幅の広いSPで高さ200px固定だと写真の上下が切れるので、
   写真の比率（311×200）のまま幅に比例させる（2026-09-27 指示）。 */
@media only screen and (max-width: 767px) {
  .rnw-hwe-card__ph {
    height: auto;
    aspect-ratio: 311 / 200;
  }
}


/* --- 「詳細／閉じる」（Figma SP 1144:16084 ＝閉／1144:16546 ほか＝開）---
   <input type="checkbox"> ＋ <label> ＋ :checked。JSは使わない。
   PCフレームには「詳細」バーが無く仕様表が常時展開なので、
   PC幅でCSSだけ無効化できるこの方式にしている（consulting.html と同じ）。 */

/* ▼position:fixed で隠している理由
   .rnw-hwe-card は flex コンテナなので、position:absolute で隠すと
   チェックボックスの「静的位置」がカードの左上に決まる。ラベルを押すと
   ブラウザがフォーカス先（＝カード上端）を見せようと画面を戻してしまい、
   「詳細」を開いた瞬間にカードの先頭までスクロールしてしまう。
   position:fixed なら常にビューポート内にいるのでスクロールが起きず、
   その場で下に開く。pointer-events:none なので実体は触れない。 */
.rnw-hwe-detail__toggle {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
          appearance: none;
}

.rnw-hwe-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;              /* Figma実測 ラベル → キャレット */
  width: 100%;
  padding: 16px 8px;      /* Figma実測 */
  background-color: var(--hwe-main);
  font-family: var(--rnw-font-jp);  /* Figma SP/button/big */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  cursor: pointer;
}

/* ラベルは「詳細」と「閉じる」の2つを置き、:checked で出し分ける
   （CSSの content で差し替えると読み上げに乗らないため）。 */
.rnw-hwe-detail__label--close { display: none; }
.rnw-hwe-detail__toggle:checked + .rnw-hwe-detail .rnw-hwe-detail__label--open  { display: none; }
.rnw-hwe-detail__toggle:checked + .rnw-hwe-detail .rnw-hwe-detail__label--close { display: inline; }

/* キーボード操作でも開閉できるよう、フォーカスリングはラベル側に出す。 */
.rnw-hwe-detail__toggle:focus-visible + .rnw-hwe-detail {
  outline: 2px solid var(--rnw-text);
  outline-offset: 2px;
}

/* キャレット。chevronアセットは上向きなので、閉じているときだけ180度回す。
   （Figmaは weui:arrow-filled だが、同形状の既存アセットで代用している） */
.rnw-hwe-detail__caret {
  flex-shrink: 0;
  width: 24px;   /* Figma実測（weui:arrow-filled 24×12 ／ 矢印は 13×7） */
  height: 12px;
  background-color: #FFFFFF;
  -webkit-mask-image: url('../../img/icon_chevron.svg');
          mask-image: url('../../img/icon_chevron.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 13px 17px;  /* 7 ÷ 0.41 ≒ 17。上下の余白は枠で切れる */
          mask-size: 13px 17px;
  transform: rotate(180deg);
}

.rnw-hwe-detail__toggle:checked + .rnw-hwe-detail .rnw-hwe-detail__caret { transform: rotate(0deg); }

/* 開いた中身はカード全幅（343px）まで広げ、内側で16pxを取り直す。
   結果、内容幅はFigmaと同じ311pxになる。 */
.rnw-hwe-panel {
  display: none;
  flex-direction: column;
  gap: 24px;  /* Figma実測 */
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 24px 16px;
  border-radius: 0 0 20px 20px;
  background-color: #FFFFFF;  /* Figma 1144:16553 */
}

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

/* 詳細パネルの中の1プログラム（キッズプログラム／乳幼児託児）。 */
.rnw-hwe-program {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;  /* Figma実測 タグ → 本文 → 仕様表 */
  width: 100%;
}

.rnw-hwe-program__main {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* Figma実測 見出し → 本文＋写真 */
  width: 100%;
}

.rnw-hwe-program__title {
  width: 100%;
  font-family: var(--rnw-font-jp);  /* Figma SP/text/large/bold */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--hwe-main);
}

.rnw-hwe-program__media {
  display: flex;
  flex-direction: column;
  gap: 12px;  /* Figma実測 本文 → 写真 */
  width: 100%;
}

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

/* プログラム間の区切り線。点線の描画は common.css の .rnw-dash-b。 */
.rnw-hwe-rule {
  width: 100%;
  height: 1px;
  border: 0;
}


/* =====================================================================
   5. Our promise（Figma SP 1144:16209 ／ PC 1144:14860）
   ---------------------------------------------------------------------
   SPは3枚の横スライダー、PCは3列グリッド。
   Figmaが前後ボタン（見出しブロック側）とカード列を別フレームに分けて
   いるため、セクション自身に data-rnw-slider を付けて両方を包む。
   ▼本文がFIX版でも英文のまま。原稿確定後に差し替える。
   ===================================================================== */

.rnw-hwe-promise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;            /* Figma実測 */
  padding: 56px 16px;   /* Figma実測 */
  background-color: #FFFFFF;
}

.rnw-hwe-promise__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;  /* Figma実測 見出し → リード → コントロール */
  width: 100%;
}

.rnw-hwe-promise__track {
  display: flex;
  align-items: stretch;  /* 3枚の高さを揃える */
  gap: 20px;  /* Figma実測 */
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* 影が上下で切れないよう、はみ出しぶんの余白を内側に確保する。 */
  padding: 8px 0 24px;
}
.rnw-hwe-promise__track::-webkit-scrollbar { display: none; }

.rnw-hwe-pcard {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;            /* Figma実測 */
  width: 300px;         /* Figma実測 */
  padding: 32px 20px;   /* Figma実測 */
  border-radius: 30px;  /* Figma実測 */
  background-color: #FFFFFF;
  box-shadow: 0 8px 54px rgba(0, 0, 0, 0.08);  /* Figma実測 */
  scroll-snap-align: start;
}

.rnw-hwe-pcard__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-text);
}

.rnw-hwe-pcard__text {
  width: 100%;
  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はリスト書式なので ::before で描く。 */
.rnw-hwe-list {
  width: 100%;
  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: #000000;  /* Figma実測 */
}

.rnw-hwe-list > li {
  padding-left: 1em;
  text-indent: -1em;
}

.rnw-hwe-list > li::before { content: '・'; }


/* =====================================================================
   6. 口コミ（Figma SP 1144:16243 ／ PC 1144:14887）
   ---------------------------------------------------------------------
   地色・テクスチャは .rnw-hwe から継承する。
   ▼本文がFIX版でも英文のまま。原稿確定後に差し替える。
   ===================================================================== */

.rnw-hwe-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;              /* Figma実測 */
  padding: 0 16px 80px;   /* Figma実測 */
}

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

/* 写真帯は画面幅いっぱい（セクションの左右16pxを打ち消す）。 */
.rnw-hwe-voice__photos {
  display: flex;
  width: calc(100% + 32px);
  margin: 0 -16px;
}

.rnw-hwe-voice__ph {
  width: 50%;
  height: 200px;  /* Figma実測 */
}

/* 見出しカードは写真に40px重なる（Figma 1144:16245 の gap -40）。
   写真は <img>（置換要素／描画step 7）なので、位置指定が無いと
   後続ブロックの背景（step 4）が下に潜る。z-index で前面に出す。 */
.rnw-hwe-voice__head .rnw-hwe-head__card {
  position: relative;
  z-index: 1;
  margin-top: -40px;
}

.rnw-hwe-h2-serif {
  width: 100%;
  font-family: var(--rnw-font-educare-title);  /* Figma SPはMOBO-Bold */
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--hwe-main);
}

/* リードはSPが見出しカードの外、PCがパネルの中。同じ文をSP用／PC用の
   2要素で持ち、メディアクエリで出し分けている（片方は常に display:none
   なので読み上げにも1回しか乗らない）。 */
.rnw-hwe-voice__lead--pc { display: none; }

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

.rnw-hwe-voice__track {
  display: flex;
  align-items: stretch;
  gap: 16px;  /* Figma実測 */
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rnw-hwe-voice__track::-webkit-scrollbar { display: none; }

.rnw-hwe-vcard {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;                    /* Figma実測 */
  width: 311px;                 /* Figma実測 */
  padding: 16px;
  border-radius: 0 0 8px 8px;   /* Figma実測（上は角丸なし） */
  background-color: #FFFFFF;
  scroll-snap-align: start;
}

.rnw-hwe-vcard__ph {
  width: 100%;
  height: 150px;  /* Figma実測 */
}

.rnw-hwe-vcard__body {
  display: flex;
  flex-direction: column;
  gap: 16px;  /* Figma実測 */
  width: 100%;
}

.rnw-hwe-vcard__stars {
  font-family: var(--rnw-font-noto);  /* Figma Noto Sans JP */
  font-size: 16px;
  line-height: 1.8;
  color: #000000;
}

.rnw-hwe-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;  /* Figma実測 */
  width: 100%;
}

.rnw-hwe-pill {
  padding: 12px 19.93px;                   /* Figma実測 12/8 ＋ 内11.93 */
  border: 0.745px solid var(--hwe-main);    /* Figma実測 */
  border-radius: 55.96px;                  /* Figma実測 */
  background-color: #FFFFFF;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--hwe-main);
  white-space: nowrap;
}

.rnw-hwe-vcard__text {
  width: 100%;
  font-family: var(--rnw-font-jp);  /* Figma Zen Kaku Gothic New/Regular */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 読み上げ用のテキスト（★の意味を伝える）。 */
.rnw-hwe-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SNS（Figma 1144:16454）。Facebook と Instagram の2つ。 */
.rnw-hwe-sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;         /* Figma実測 */
  width: 100%;
  padding-top: 60px; /* Figma実測 */
}

/* アイコンはブランド色（Figma 1144:16456 が #1877F2 ／ Instagramはカラー）。
   renewal/img/icon_facebook.svg・icon_instagram.svg は mask 用の単色（#444）
   なので使えない。footer.php と同じく旧テーマの多色アセットを参照する。 */
.rnw-hwe-sns__link {
  display: block;
  width: 29px;   /* Figma実測 */
  height: 29px;
}

.rnw-hwe-sns__link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* =====================================================================
   7. よくあるご質問（Figma SP 1144:16306 ／ PC 1144:14951）
   ---------------------------------------------------------------------
   Q&A本体はショートコード [educare_faq] の出力に委ねているため、ここは
   セクション枠と見出しだけ。出力側のスタイルは renewal/css/faq.css。
   ▼Figmaにはカテゴリータブ（すべて／キッズプログラム／…）が描かれているが、
     エデュケアは全ページ「タグを出さない」に揃えているため出していない
     （renewal/faq.php の方針コメントを参照）。
   ===================================================================== */

.rnw-hwe-faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;           /* Figma実測 見出し → ショートコード出力の間 */
  padding: 56px 24px;  /* Figma実測 */
  background-color: #FFFFFF;
}


/* --- FAQのカテゴリータブの色 ---
   renewal/css/faq.css のタブは共通変数（--rnw-main #00429A / --rnw-main2 #507CB8）
   で組まれていて、そのままだとエデュケアの青が出る。このページのキーカラーは
   ティール（--hwe-main #20BDAE）なので、タブだけここで塗り替える。
   形（角丸・余白・線幅・字送り）は faq.css のFigma実測値のまま触らない。 */
.rnw-hwe-faq .rnw-faq__tab {
  border-color: var(--hwe-main);
  color: var(--hwe-main);
}

.rnw-hwe-faq .rnw-faq__tab.is-active {
  border-color: #FFFFFF;
  background-color: var(--hwe-main);
  color: #FFFFFF;
}


/* =====================================================================
   8. お問い合わせ（Figma SP 1144:16357 ／ PC 1144:15026）
   ===================================================================== */

.rnw-hwe-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;            /* Figma実測 */
  padding: 56px 16px;   /* Figma実測 */
  background-image: var(--hwe-gra);
}

.rnw-hwe-contact__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;  /* Figma実測 */
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.rnw-hwe-contact__en {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-SemiBold */
  font-size: 14px;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-contact-accent);            /* #327666 */
}

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

.rnw-hwe-contact__lead {
  font-family: var(--rnw-font-noto);  /* Figma Noto Sans JP */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.73;
  letter-spacing: 0.9px;
  color: var(--rnw-text);
}

.rnw-hwe-contact__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 40px 20px;  /* Figma実測 */
  background-color: #FFFFFF;
}

/* 日本国内のブロックだけ上余白が広い（Figma 1144:16362）。 */
.rnw-hwe-contact__block--jp { padding-top: 56px; }

.rnw-hwe-contact__id {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;             /* Figma実測 */
  width: 100%;
  padding-bottom: 24px;  /* Figma実測 */
}

.rnw-hwe-contact__map {
  width: 120px;   /* Figma実測 */
  height: 110px;
  background-repeat: no-repeat;
}

/* viewBoxの実寸と枠内の位置をそのまま指定する（contain で拡大しない）。 */
.rnw-hwe-contact__map--jp {
  background-image: url('../../img/hawaii/map_japan.svg');
  background-size: 111.992px 107.09px;  /* Figma実測 */
  background-position: 4px 1px;
}

.rnw-hwe-contact__map--hi {
  background-image: url('../../img/hawaii/map_hawaii.svg');
  background-size: 106.685px 69.225px;  /* Figma実測 */
  background-position: 7px 20px;
}

/* 「日本国内」＋「のお問い合わせ」。SPは縦積み、PCは横並び。 */
.rnw-hwe-contact__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 24px;                     /* Figma実測 */
  border-top: 1px solid var(--hwe-border);   /* Figma実測 HorizontalBorder */
  text-align: center;
}

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

.rnw-hwe-contact__label > span {
  font-family: var(--rnw-font-educare-title);  /* Figma MOBO-Bold */
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
  color: var(--rnw-text);
}

/* 日本国内の連絡先（Noto Sans JP 15px）。 */
/* Figmaのテキスト枠は263pxだが、Figmaの字幅で1行に収まっているだけなので
   幅で縛らない（縛るとMAILのアドレスが途中で折り返す）。 */
.rnw-hwe-contact__info {
  width: 100%;
  font-family: var(--rnw-font-noto);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.9px;
  color: var(--rnw-text);
}

.rnw-hwe-contact__info a {
  color: var(--hwe-tel);  /* Figma実測 #465484 */
  text-decoration: none;
}

/* ハワイ現地の施設ブロック。 */
.rnw-hwe-contact__places {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.rnw-hwe-contact__place + .rnw-hwe-contact__place {
  margin-top: 24px;                         /* Figma実測 */
  padding-top: 24px;                        /* Figma実測 */
  border-top: 1px solid var(--hwe-border);   /* Figma実測 */
}

.rnw-hwe-contact__place-name {
  font-family: var(--rnw-font-noto);  /* Figma Noto Sans JP/Bold */
  font-size: 17px;
  font-weight: 700;
  line-height: 1.73;
  letter-spacing: 0.9px;
  color: var(--rnw-text);
}

.rnw-hwe-contact__place-at {
  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);
}

.rnw-hwe-contact__place-info {
  margin-top: 12px;  /* Figma実測 */
  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);
}

.rnw-hwe-contact__place-info a {
  color: var(--hwe-main);  /* Figma実測 */
  text-decoration: none;
}

.rnw-hwe-contact__note {
  margin-top: 9px;  /* Figma実測 */
  font-family: var(--rnw-font-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 1.2px;
  color: var(--rnw-caption);  /* #626262 */
}


/* =====================================================================
   9. PC（Figma 1144:14471 ／ 1440幅・本文1200）
   ---------------------------------------------------------------------
   ▼ 変数の中の 100% は、変数を「使う側」の包含ブロック幅で解決される。
      以下で使っているのはすべて全幅のブロックなので画面幅と一致する。
   ===================================================================== */

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

  /* ---------------------------------------------------------------
     9-0. 全体
     --------------------------------------------------------------- */

  .rnw-hwe {
    --hwe-pad: max(24px, calc((100% - 1200px) / 2));
    padding-top: var(--rnw-header-h-pc);
  }

  .rnw-hwe-card,
  .rnw-hwe-program,
  .rnw-hwe-services,
  .rnw-hwe-faq,
  .rnw-hwe-contact {
    scroll-margin-top: var(--rnw-header-h-pc);
  }


  /* ---------------------------------------------------------------
     9-1. メインビジュアル（Figma 1144:14474）
     白地＋線画＋下端の波形。左にテキスト（450px）、右に写真（800×590）。
     線画は Figma 1144:14478 をFV枠（1440×750）で切り抜いて書き出したもの。
     白地が焼き込まれるので、書き出し後に線色から alpha を復元して
     透過PNGにしてある（波形の上に重ねるため）。
     --------------------------------------------------------------- */

  .rnw-hwe-mv {
    position: relative;
    height: 750px;   /* Figma実測 */
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
  }

  /* SPの全面写真は使わない（PCは右側の枠に入る）。 */
  .rnw-hwe-mv__ph {
    top: 80px;                      /* Figma実測 */
    left: auto;
    right: 0;
    width: min(800px, 55.556%);     /* 800 / 1440 */
    height: 590px;                  /* Figma実測 */
    z-index: 1;
  }

  /* 波形（下端349px／#FAF8F2）と線画。線画が波形の上に乗る。 */
  .rnw-hwe-mv__deco {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
      url('../../img/hawaii/pc/fv_illust.png'),
      url('../../img/nursery-school/fv_wave.svg');
    background-repeat: no-repeat, no-repeat;
    background-position: left top, left bottom;
    background-size: 1040px 750px, 100% 349.447px;  /* Figma実測 */
    pointer-events: none;
  }

  /* テキスト（Figma 1144:14486 ／ 左80px・上147px・幅450px）。
     SPの白パネルは背景を持たず、素のテキストブロックに戻す。 */
  .rnw-hwe-mv__panel {
    position: absolute;
    z-index: 2;
    top: 147px;                                  /* Figma実測 */
    left: max(24px, calc((100% - 1280px) / 2));  /* 1440px時に80px */
    align-items: flex-start;
    gap: 20px;                                   /* Figma実測 */
    /* 写真の左端の24px手前で止める（1066px以下で450pxのままだと写真に重なる）。 */
    width: min(450px, calc(100% - min(800px, 55.556%) - 48px));
    padding: 0;
    background-color: transparent;
  }

  .rnw-hwe-mv__head { gap: 20px; }  /* Figma実測 62 → 229 */

  .rnw-hwe-mv__h1 { font-size: 48px; }  /* Figma PC/title/educare/h1 */

  .rnw-hwe-mv__lead { font-size: 18px; }  /* Figma実測 */

  /* ボタンは380px（Figma 1144:14493 / 14494）。 */
  .rnw-hwe-mv__panel .rnw-hwe-btn {
    width: 380px;
    max-width: 100%;
  }

  /* 768〜1066px は文字の列が狭くなるので、見出しを1行に収め、
     ボタンがFV（750px）の下にはみ出さないよう文字を少し小さくする。 */
  @media only screen and (max-width: 1066px) {
    .rnw-hwe-mv__h1   { font-size: 36px; }
    .rnw-hwe-mv__lead { font-size: 16px; }
  }


  /* ---------------------------------------------------------------
     9-2. バッジ帯（Figma 1144:14495）
     3つを横一列。月桂樹は39×94に大きくなる。
     --------------------------------------------------------------- */

  .rnw-hwe-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;            /* Figma実測 */
    padding: 40px 44px;   /* Figma実測 外40/16 ＋ 内0/27.99 */
  }

  .rnw-hwe-badge {
    width: auto;
    max-width: none;
    gap: 4px;             /* Figma実測 */
    min-height: 94px;
  }

  .rnw-hwe-badge__leaf {
    width: 39px;   /* Figma実測 */
    height: 94px;
  }

  .rnw-hwe-badge__body { gap: 8px; }  /* Figma実測 */

  .rnw-hwe-badge__title {
    font-size: 24px;   /* Figma実測 */
    font-weight: 700;  /* Figma PCはMOBO-Bold */
    line-height: 1.6;
  }

  .rnw-hwe-badge__note {
    font-size: 14px;       /* Figma実測 */
    line-height: 1.8;
    letter-spacing: 2.1px; /* Figma実測 */
    white-space: nowrap;
  }


  /* ---------------------------------------------------------------
     9-3. サービス一覧（Figma 1144:14575）
     --------------------------------------------------------------- */

  .rnw-hwe-services {
    gap: 80px;               /* Figma実測 */
    padding: 104px 0 120px;  /* Figma実測 */
  }

  .rnw-hwe-services .rnw-hwe-head__card {
    max-width: 520px;   /* Figma実測 */
    padding: 24px;
  }

  .rnw-hwe-services .rnw-hwe-head__ja { font-size: 32px; }  /* Figma実測 */

  .rnw-hwe-services__list {
    gap: 80px;                    /* Figma実測 */
    padding: 0 var(--hwe-pad);
  }

  .rnw-hwe-card {
    gap: 56px;            /* Figma実測 */
    padding: 40px 56px 56px;
    border-radius: 8px;   /* Figma実測（SPの20pxから変わる） */
  }

  /* PCは「詳細」が無く仕様表が常時展開になるぶん、並び順が変わる。
       SP … タグ → 紹介 → スライダー → 注記 → ボタン → 詳細 → 仕様表
       PC … タグ → 紹介 → 仕様表 → スライダー → 注記 → ボタン
     .rnw-hwe-card__body を display:contents で解いてカード直下のフレックス
     アイテムにし、order で仕様表（.rnw-hwe-panel）だけを前へ動かしている。
     order を共有している3つ（スライダー・注記・ボタン）はDOM順のまま並ぶので、
     カードごとに違う「注記がスライダーの前か後か」もそのまま再現できる。 */
  .rnw-hwe-card__body { display: contents; }

  .rnw-hwe-card > .rnw-hwe-tag      { order: 1; }
  .rnw-hwe-card__intro             { order: 2; }
  .rnw-hwe-card > .rnw-hwe-panel    { order: 3; }
  .rnw-hwe-card .rnw-hwe-slider,
  .rnw-hwe-card .rnw-hwe-note,
  .rnw-hwe-card .rnw-hwe-btn        { order: 4; }

  /* 左に施設名パネル＋説明、右に写真（Figma 1144:14585）。
     .rnw-hwe-card__media は display:contents で解いて、
     中の写真と本文を直接グリッドに並べる。 */
  .rnw-hwe-card__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;  /* Figma実測 */
    row-gap: 24px;
    align-items: start;
    width: 100%;
  }

  .rnw-hwe-card__media { display: contents; }

  /* 施設名の枠。1枚目だけ薄いティール（1144:14587 #EDFAF8）、
     2〜4枚目（1144:14734 / 14794 / 14836）は白90%。

     ▼2026-09-09 修正：白90%を「カードと同じ＝見えない」と読んで塗って
       いなかったが、これは誤り。カード自体が白90%（.rnw-hwe-card）で、
       その上にもう1枚白90%が重なるので、実際は地より明るい白い帯になる。
       Figma 1144:14064（Coral Kids Club）でもカードより明るく見えている。 */
  .rnw-hwe-card__titlebox {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;                    /* Figma実測 */
    padding: 24px 0;             /* Figma実測 */
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.9);  /* Figma実測 1144:14064 */
  }

  .rnw-hwe-card__titlebox--tint { background-color: var(--hwe-main-bg); }

  .rnw-hwe-card__lead {
    grid-column: 1;
    grid-row: 2;
  }

  .rnw-hwe-card__ph {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    height: 300px;  /* Figma実測 */
  }

  .rnw-hwe-card__title {
    font-family: var(--rnw-font-jp);  /* Figma PCは Zen Kaku Gothic New/Bold */
    font-size: 24px;
  }

  /* --- スライダー（PCは前後ボタン40px・バー260px・カード300px）--- */

  .rnw-hwe-slider { gap: 32px; }  /* Figma実測 */

  .rnw-hwe-slider__title { font-size: 24px; }  /* Figma実測 */

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

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

  /* PCは Figma 7.7×12.6。SPと同じ換算で 12.6px ／ 7.7 ÷ 0.41 ≒ 19px。 */
  .rnw-hwe-slider__btn::before {
    -webkit-mask-size: 13px 19px;
            mask-size: 13px 19px;
  }

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

  .rnw-hwe-slider__bar-thumb {
    top: -1.5px;
    height: 4px;   /* Figma実測 */
  }

  .rnw-hwe-scard { width: 300px; }  /* Figma実測 */

  /* カードが枠内に収まる本数（コーラル3枚・イベント2枚）は、PCフレームに
     前後ボタンが無い（Figma 1144:14766 / 14845）。中央寄せにする。 */
  .rnw-hwe-slider--fit .rnw-hwe-slider__ctrl { display: none; }
  .rnw-hwe-slider--fit .rnw-hwe-slider__track {
    justify-content: center;
    overflow-x: visible;
  }

  /* 枠が狭い幅（3枚で940pxに満たない）では、300pxのままだと枠の左右に
     はみ出すので、カードを縮めて収める。広い幅では300pxのまま（2026-09-27）。 */
  .rnw-hwe-slider--fit .rnw-hwe-scard {
    flex: 0 1 300px;
    min-width: 0;
  }

  /* --- 詳細パネルはPCフレームに無い。常時展開して「詳細」バーを消す --- */

  .rnw-hwe-detail { display: none; }

  .rnw-hwe-panel {
    display: flex;
    gap: 56px;      /* Figma実測 プログラム間 */
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  /* 左に見出し＋本文＋写真、右に仕様表（Figma 1144:14595）。 */
  .rnw-hwe-program {
    display: grid;
    grid-template-columns: 564fr 500fr;
    column-gap: 24px;  /* Figma実測 */
    row-gap: 24px;
    align-items: start;
  }

  /* PCのタグは左寄せ（Figma 1144:14594）。カード見出しのタグだけ中央。 */
  .rnw-hwe-program > .rnw-hwe-tag {
    grid-column: 1 / -1;
    align-self: start;
    justify-self: start;
  }

  .rnw-hwe-program__main { grid-column: 1; }

  .rnw-hwe-program .rnw-hwe-spec { grid-column: 2; }

  .rnw-hwe-program__title { font-size: 24px; }  /* Figma実測 */

  .rnw-hwe-program__ph { height: 350px; }  /* Figma実測 */

  .rnw-hwe-rule { grid-column: 1 / -1; }

  /* 仕様表だけのパネル（コーラル・ベビーシッター）は
     PCフレームでもカード全幅（Figma 1144:14740 / 14799 が1088px）。 */
  .rnw-hwe-program--spec { grid-template-columns: 1fr; }
  .rnw-hwe-program--spec .rnw-hwe-spec { grid-column: 1; }

  /* 1066px以下は仕様表の列が狭く、1マスが何行にも折れるので、
     仕様表を本文＋写真の下に落とす（2026-09-27 指示）。 */
  @media only screen and (max-width: 1066px) {
    .rnw-hwe-program { grid-template-columns: 1fr; }
    .rnw-hwe-program .rnw-hwe-spec { grid-column: 1; }
  }

  /* 注記ボックス。ホテル一覧だけ1000px、他は600px（Figma実測）。 */
  .rnw-hwe-note {
    max-width: 600px;
    margin-inline: auto;
    padding: 24px;
  }

  .rnw-hwe-note--wide { max-width: 1000px; }

  .rnw-hwe-note__title { font-size: 18px; }  /* Figma実測 */
  .rnw-hwe-note__list  { font-size: 18px; line-height: 1.8; }  /* Figma実測 */

  .rnw-hwe-card .rnw-hwe-btn {
    width: 400px;  /* Figma実測 */
    max-width: 100%;
    margin: 0 auto;
  }


  /* ---------------------------------------------------------------
     9-4. Our promise（Figma 1144:14860）
     スライダーをやめて3列のグリッドにする。
     --------------------------------------------------------------- */

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

  .rnw-hwe-promise__head { gap: 24px; }  /* Figma実測 */

  .rnw-hwe-promise .rnw-hwe-head__card {
    max-width: 400px;             /* Figma実測 */
    padding: 0 24px;
    background-color: #FFFFFF;    /* PCは educare/bg ではなく白 */
  }

  .rnw-hwe-promise .rnw-hwe-head__en { font-size: 20px; letter-spacing: 3.7px; }  /* Figma実測 */
  .rnw-hwe-promise .rnw-hwe-head__ja { font-size: 32px; }                          /* Figma実測 */

  .rnw-hwe-promise .rnw-hwe-text { text-align: center; font-size: 18px; }

  /* PCフレームに前後ボタンが無い。 */
  .rnw-hwe-promise .rnw-hwe-slider__ctrl { display: none; }

  .rnw-hwe-promise__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;     /* Figma実測 */
    overflow: visible;
    padding: 8px 0 24px;
  }

  .rnw-hwe-pcard {
    width: auto;
    padding: 24px;        /* Figma実測 */
    border-radius: 20px;  /* Figma実測 */
    box-shadow: 0 3.77px 56.56px rgba(153, 115, 51, 0.08);  /* Figma実測 */
  }

  .rnw-hwe-pcard__title { font-size: 24px; }  /* Figma実測 */
  .rnw-hwe-pcard__text,
  .rnw-hwe-promise .rnw-hwe-list { font-size: 18px; }  /* Figma実測 */

  .rnw-hwe-pcard__text { font-weight: 700; }  /* Figma PCはMOBO-Bold */


  /* ---------------------------------------------------------------
     9-5. 口コミ（Figma 1144:14887）
     写真帯は全幅400px、その上に半透明の白パネルが中央で重なる。
     --------------------------------------------------------------- */

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

  .rnw-hwe-voice__head {
    position: relative;
    justify-content: center;
    width: 100%;
  }

  .rnw-hwe-voice__photos {
    width: 100%;
    margin: 0;
  }

  .rnw-hwe-voice__ph { height: 400px; }  /* Figma実測 */

  /* 1439px以下は高さ400px固定だと写真の左右が切れるので、
     写真の比率（720×400）のまま縮める（2026-09-27 指示）。 */
  @media only screen and (max-width: 1439px) {
    .rnw-hwe-voice__ph {
      height: auto;
      aspect-ratio: 720 / 400;
    }
  }

  /* 写真の上に重なる半透明パネル（Figma 1144:14893）。 */
  .rnw-hwe-voice__head .rnw-hwe-head__card {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    max-width: 640px;   /* Figma実測 */
    margin: 0;
    padding: 32px;      /* Figma実測 */
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
  }

  /* PCだけ明朝42px（Figma PC/title/h2）。 */
  .rnw-hwe-h2-serif {
    font-family: var(--hwe-font-mincho);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--rnw-text);
  }

  /* リードはパネルの中（SPはパネルの外）。SP側のリードはPCでは出さない。 */
  .rnw-hwe-voice__lead--sp { display: none; }

  .rnw-hwe-voice__lead--pc {
    display: block;
    font-family: var(--rnw-font-jp);
    font-size: 16px;   /* Figma実測 */
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 1.2px;
    color: var(--rnw-text);
    text-align: left;
  }

  /* 内容幅はFigmaの1280pxで頭打ち（1440px時に左右80px）。
     px固定にすると広い画面でカードが4枚以上見えてしまう。 */
  .rnw-hwe-voice__slider {
    gap: 32px;
    padding: 0 max(24px, calc((100% - 1280px) / 2));
  }

  .rnw-hwe-voice__track { gap: 16px; }

  .rnw-hwe-vcard { width: 400px; }  /* Figma実測 */

  .rnw-hwe-vcard__ph { height: 200px; }  /* Figma実測 */

  .rnw-hwe-vcard__text {
    font-family: var(--rnw-font-educare-title);  /* Figma PCはMOBO-SemiBold */
    font-size: 18px;
    font-weight: 600;
  }

  .rnw-hwe-pill { font-size: 18px; }  /* Figma実測 */

  .rnw-hwe-voice > .rnw-hwe-btn {
    width: 400px;  /* Figma実測 */
    margin: 0 auto;
  }

  /* SNSはSPフレームだけ（PC 1144:14471 に無い）。 */
  .rnw-hwe-sns { display: none; }


  /* ---------------------------------------------------------------
     9-6. よくあるご質問（Figma 1144:14951）
     --------------------------------------------------------------- */

  .rnw-hwe-faq {
    gap: 56px;
    padding: 80px var(--hwe-pad) 120px;
  }

  /* 見出しの箱はPCフレームでは1200px（Figma 1144:14953 / 1144:14291）。
     SPの343pxのままだと、英語版の長い見出しが3行に折り返してしまう。 */
  .rnw-hwe-faq .rnw-hwe-head__card { max-width: 1200px; }

  .rnw-hwe-faq .rnw-hwe-head__ja { font-size: 32px; }
  .rnw-hwe-faq .rnw-hwe-head__en { font-size: 20px; }


  /* ---------------------------------------------------------------
     9-7. お問い合わせ（Figma 1144:15026）
     --------------------------------------------------------------- */

  .rnw-hwe-contact {
    gap: 56px;                        /* Figma実測 */
    padding: 56px max(24px, calc((100% - 1280px) / 2));  /* 1440px時に80px */
  }

  /* PCフレームは明朝の「Contact」だけ。和文見出しとリードは持たない。 */
  .rnw-hwe-contact__head {
    padding: 0 32px;
    background-color: transparent;
  }

  .rnw-hwe-contact__en {
    font-family: var(--hwe-font-mincho);
    font-size: 42px;   /* Figma実測 */
    font-weight: 400;
    line-height: 1.3;
    color: var(--rnw-text);
  }

  .rnw-hwe-contact__h2 { display: none; }
  .rnw-hwe-contact__lead { display: block; }

  .rnw-hwe-contact__block {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 56px;       /* Figma実測 */
    padding: 40px;   /* Figma実測 */
  }

  .rnw-hwe-contact__block--jp { padding-top: 40px; }

  /* ハワイ現地は2施設が横並びになるぶん左寄せ（Figma 1144:15067）。 */
  .rnw-hwe-contact__block--hi { justify-content: flex-start; }

  .rnw-hwe-contact__id {
    flex-shrink: 0;
    width: auto;
    padding-bottom: 0;
  }

  /* PCは横並びなので内容幅に戻す（100%のままだと伸びて中央寄せが効かない）。 */
  .rnw-hwe-contact__info { width: auto; }

  .rnw-hwe-contact__label {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    width: auto;
    padding-bottom: 0;
    border-top: 0;
  }

  .rnw-hwe-contact__places {
    flex-direction: row;
    gap: 0;
    width: auto;
  }

  .rnw-hwe-contact__place { width: 444px; }  /* Figma実測 */

  .rnw-hwe-contact__place + .rnw-hwe-contact__place {
    margin-top: 0;
    padding-top: 0;
    padding-left: 24px;
    border-top: 0;
  }
}


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