@charset "UTF-8";

/* =====================================================================
   ポピンズ familycare リニューアル
   東京都ベビーシッター利用支援事業ページ
   Figma: SP 363:20172（一時預かり 363:20546 / 待機児童 363:20801）
          PC 403:44095（展開パネルは PC FIX の 一時預かり 694:27801 / 待機児童 694:28598 が最新）
   （/familycare/service-nanny/subsidy/support/）
   ---------------------------------------------------------------------
   - header.php が is_page('service-nanny/subsidy/support') のときだけ
     renewal/css/common.css の後に読み込む
   - 色は common.css の変数を経由する（既定のナニー＝ピンク）
   - ボタン（.rnw-btn--sub）と矢印（.rnw-icon--arrow / --chevron-bold）は
     common.css の共通コンポーネントを流用
   ===================================================================== */

/* =====================================================================
   0. ページ共通
   ===================================================================== */

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

.rnw-subsidy-support {
  /* Figma変数 nanny/gra2。始点の #FCF7F8 は common.css にトークンが無い */
  --rnw-subsidy-support-gra: linear-gradient(to bottom, #FCF7F8 0%, var(--rnw-main) 52.404%);

  /* 固定ヘッダー（.rnw-header）の高さぶんの上余白 */
  padding-top: var(--rnw-header-h-sp);
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
}

/* 絞り込みで hidden を付けた要素が、旧 reset.css の details{display:block} に
   負けないようにする（ブラウザ既定の [hidden] はサイト側CSSより弱い） */
.rnw-subsidy-support [hidden] { display: none; }

.rnw-subsidy-support img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.rnw-subsidy-support) :where(h1, h2, h3, h4, h5, p, ul, ol, li, dl, dt, dd, figure, figcaption, table, th, td) {
  margin: 0;
  padding: 0;
}

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

.rnw-subsidy-support a { text-decoration: none; }

/* 改行の出し分け。PCで1行に戻る箇所に付ける */


/* =====================================================================
   1. リード
   ===================================================================== */

.rnw-subsidy-support-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 16px;
  background-color: var(--rnw-main);
}

.rnw-subsidy-support-lead__card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  width: 100%;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-subsidy-support-lead__head {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  width: 100%;
}

.rnw-subsidy-support-lead__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-subsidy-support-lead__title {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-lead__body {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   2. 訴求文
   ===================================================================== */

.rnw-subsidy-support-appeal {
  padding: 56px 16px;
}

.rnw-subsidy-support-appeal__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  background-color: var(--rnw-bg2);
}

.rnw-subsidy-support-appeal__line {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  text-align: center;
}

.rnw-subsidy-support-appeal__strong {
  color: var(--rnw-accent);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.216px;
}

.rnw-subsidy-support-appeal__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}


/* =====================================================================
   3. 見出し h2（制度一覧・その他の制度で共用）
   ===================================================================== */

.rnw-subsidy-support-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  width: 300px;
  max-width: 100%;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-subsidy-support-h2__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-subsidy-support-h2__ja {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
}


/* =====================================================================
   4. 利用できる制度一覧
   ===================================================================== */

.rnw-subsidy-support-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 0 16px 80px;
  background-image: var(--rnw-subsidy-support-gra);
}

.rnw-subsidy-support-list__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* セクションの左右パディングを打ち消して全幅にする。
   ▼2クラスにしているのは詳細度のため。要素セレクタを含む上の
     `.rnw-subsidy-support img`（max-width:100% / height:auto）に負ける。 */
/* 寸法はラッパー側が持ち、写真はそれを埋める */
.rnw-subsidy-support-list__hero-wrap {
  width: calc(100% + 32px);
  height: 200px;
  margin-inline: -16px;
  overflow: hidden;
}

.rnw-subsidy-support-list__head .rnw-subsidy-support-list__hero {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* 見出しカードをヒーローに40px重ねる。旧 reset.css の
   `img { -webkit-backface-visibility: hidden }` で画像が合成レイヤーに昇格し
   前面に来るため、z-index を明示する。 */
.rnw-subsidy-support-list__head .rnw-subsidy-support-h2 {
  position: relative;
  z-index: 1;
  margin-top: -40px;
}


/* =====================================================================
   5. 制度カード（白カード＋下端の「詳細」バー）
   ===================================================================== */

/* カードとバーで角丸8pxのひとかたまりに見せる */
.rnw-subsidy-support-card {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.rnw-subsidy-support-card__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

/* タグ＋制度名。SPは縦積み、PCは横1行になる */
.rnw-subsidy-support-card__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.rnw-subsidy-support-card__tags {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  width: 100%;
}

.rnw-subsidy-support-card__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-subsidy-support-card__title {
  width: 100%;
  color: var(--rnw-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-subsidy-support-card__text {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

/* カード内のCTA。SPは幅いっぱい（Figma 694:73339） */
.rnw-subsidy-support-card__action {
  display: flex;
  width: 100%;
}

/* 「詳細」バーが展開のトリガー（<summary>） */
.rnw-subsidy-support-card__detail {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background-color: var(--rnw-cta-bg);
  color: var(--rnw-cta-text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  list-style: none;
  white-space: nowrap;
}

.rnw-subsidy-support-card__detail::-webkit-details-marker { display: none; }

.rnw-subsidy-support-card__detail-icon {
  width: 24px;
  height: 12px;
}

/* 展開中は矢印を上向きに */
.rnw-subsidy-support-card__more[open] .rnw-subsidy-support-card__detail-icon {
  transform: rotate(180deg);
}


/* =====================================================================
   6. 展開パネル（制度カードの「詳細」を開いた中身）
   ===================================================================== */

.rnw-subsidy-support-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 16px;
  background-color: rgba(255, 255, 255, 0.9);
}

.rnw-subsidy-support-panel__h2 {
  /* TODO[フォント] Figma指定は MOBO-Bold（未導入）。共通の日本語フォントで代替 */
  color: var(--rnw-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 1.2px;
  text-align: center;
  scroll-margin-top: var(--rnw-header-h-sp);
}

.rnw-subsidy-support-panel__h3 {
  width: 100%;
  color: var(--rnw-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

.rnw-subsidy-support-panel__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figmaは高さ0の破線ベクター（#626262 / dasharray 2 2）＝ .rnw-dash-b の既定値 */
.rnw-subsidy-support-panel__hr {
  width: 100%;
  height: 1px;
  margin: -0.5px 0;
  border: 0;
}

.rnw-subsidy-support-panel__block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-subsidy-support-panel__lead {
  color: var(--rnw-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

.rnw-subsidy-support-panel__lead-sub {
  font-size: 14px;
  letter-spacing: 0.168px;
}

.rnw-subsidy-support-panel__lead-plain { color: var(--rnw-text); }

.rnw-subsidy-support-panel__tags {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.rnw-subsidy-support-panel__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 5px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-panel__text {
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-panel__text-em { color: var(--rnw-accent); }

/* .rnw-btn--sub は --rnw-subcta-text を参照するので、変数の差し替えだけで
   枠線・文字・矢印がまとめて common/accent/red になる */
.rnw-subsidy-support-btn--red { --rnw-subcta-text: var(--rnw-link); }


/* --- パネル内アンカー --- */

.rnw-subsidy-support-anchor {
  padding: 0 16px;
}

.rnw-subsidy-support-anchor__list {
  display: flex;
  gap: 12px;
  width: 100%;
}

.rnw-subsidy-support-anchor__item {
  flex: 1 0 0;
  min-width: 0;
}

.rnw-subsidy-support-anchor__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
  color: var(--rnw-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

/* 共通の .rnw-icon--arrow は右向き（rotate(-90deg)）。ここは下向きで使う */
.rnw-subsidy-support-anchor__icon {
  width: 14px;
  height: 14px;
  transform: none;
}


/* --- ご利用シーン・活用例／メリット --- */

.rnw-subsidy-support-usecase {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
  padding: 24px;
  background-color: var(--rnw-bg1);
}

.rnw-subsidy-support-usecase__title {
  width: 100%;
  color: var(--rnw-accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

/* カード3枚。SPは縦積み、PCは横並びになる */
.rnw-subsidy-support-usecase__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.rnw-subsidy-support-usecase__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  border-radius: 5px;
  background-color: #FFFFFF;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
  text-align: center;
}

/* メリット（待機児童）は高さ固定ではなく上下16pxのパディング */
.rnw-subsidy-support-usecase__item--auto {
  height: auto;
  padding: 16px 0;
}

.rnw-subsidy-support-usecase__list {
  width: 100%;
  padding-left: 21px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  list-style: disc;
}


/* =====================================================================
   7. 対象エリア／対象者と補助額（[rnw_subsidy_areas] 出力）
   ===================================================================== */

.rnw-subsidy-support-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-subsidy-support-area__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}

/* 自治体名が2行になっても行内で高さが揃うようにグリッド項目を伸ばす */
.rnw-subsidy-support-area__item {
  display: flex;
}

.rnw-subsidy-support-area__link {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  height: 55px;
  border: 1px solid var(--rnw-text);
  background-color: #FFFFFF;
  color: var(--rnw-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: center;
}

.rnw-subsidy-support-aid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-subsidy-support-aid__select-wrap {
  position: relative;
  align-self: center;
}

.rnw-subsidy-support-aid__select {
  width: 100%;
  padding: 12px 34px 12px 8px;
  border: 0.745px solid var(--rnw-accent);
  border-radius: 8px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.rnw-subsidy-support-aid__select-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 14px;
  height: 14px;
  color: var(--rnw-accent);
  pointer-events: none;
  transform: translateY(-50%);   /* 共通の rotate(-90deg) を打ち消して下向きに */
}

.rnw-subsidy-support-aid__note {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.168px;
  /* 見出し「対象者と補助額」と揃えて中央寄せ（2026-09-21）。 */
  text-align: center;
}

.rnw-subsidy-support-aid__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.rnw-subsidy-support-aid__table th,
.rnw-subsidy-support-aid__table td {
  border-bottom: 2px solid #FFFFFF;
  color: var(--rnw-text);
  /* TODO[フォント] Figma指定は MOBO-SemiBold（未導入）。共通の日本語フォントで代替 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
  text-align: left;
  vertical-align: top;
}

/* 1行目が colspan=2 の行になるため、見出し列の幅は colgroup 側で決める */
.rnw-subsidy-support-aid__col { width: 130px; }

.rnw-subsidy-support-aid__table th {
  width: 130px;
  padding: 11.5px 9px 2px 8px;
  border-right: 1px solid #FFFFFF;
  background-color: var(--rnw-bg3);
}

.rnw-subsidy-support-aid__table td {
  padding: 11.28px 12px 13.39px;
  background-color: var(--rnw-bg1);
}

/* 自治体名の帯。<th colspan="2"> で出しているため、旧 contents.css の
     table th[colspan] { color:#fff; background-color:#b8a697; }   詳細度(0,1,2)
   に負けて茶色＋白文字になる。属性セレクタを足して(0,2,2)にし、
   Figma（node 1258:17588）の #F6BECA ＋ 文字 #444444 に戻す。 */
.rnw-subsidy-support-aid__group th[colspan] {
  background-color: var(--rnw-main);
  color: var(--rnw-text);
  text-align: left;
}

/* 自治体HPのURL。色は common.css の本文リンク（--rnw-link）。
   URLをそのまま出すので、列幅で折り返す（2列のPCでは列が狭い）。 */
.rnw-subsidy-support-aid__table td a {
  color: var(--rnw-link);
  overflow-wrap: anywhere;
}

/* エリア未選択のときだけ出る案内行 */
.rnw-subsidy-support-aid__placeholder td {
  padding: 12px 9px 14px 8px;
  background-color: var(--rnw-main);
}

.rnw-subsidy-support-aid__placeholder[hidden] { display: none; }

/* 独自のルールが無いグループでは行ごと消す（JSが hidden を付ける） */
.rnw-subsidy-support-aid__table tr[hidden] { display: none; }

/* PCは全グループを並べる。SPはセレクト式の1表だけ出す */
.rnw-subsidy-support-aid__sp {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rnw-subsidy-support-aid__pc { display: none; }

/* 待機児童の「ベビーシッター利用支援事業（…）」ボタン */
.rnw-subsidy-support-aid__action {
  display: flex;
  justify-content: center;
}

/* 別窓アイコン。自治体HPが確定してリンクになったときだけ出る */
.rnw-subsidy-support-area__ext::before {
  content: "\e902";
  margin-left: 4px;
  font-family: var(--rnw-font-icon);
  font-size: 12px;
}


/* =====================================================================
   8. ご利用の流れ
   ===================================================================== */

.rnw-subsidy-support-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 56px 16px;
  background-image: var(--rnw-subsidy-support-gra);
  scroll-margin-top: var(--rnw-header-h-sp);
}

.rnw-subsidy-support-flow__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.rnw-subsidy-support-flow__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-flow__ja {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-flow__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.rnw-subsidy-support-flow__item {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 12px;
  border-radius: 8px;
  background-color: #FFFFFF;
}

/* 番号どうしをつなぐ縦線。最後の1本だけ先端に下向きの三角が付く（Figma Vector 10） */
.rnw-subsidy-support-flow__item::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 36px;
  width: 2px;
  height: 16px;
  background-color: var(--rnw-accent);
}

.rnw-subsidy-support-flow__item:last-child::after { content: none; }

.rnw-subsidy-support-flow__item:nth-last-child(2)::after { height: 6px; }

.rnw-subsidy-support-flow__item:nth-last-child(2)::before {
  content: "";
  position: absolute;
  top: calc(100% + 6px);
  left: 31px;
  width: 0;
  height: 0;
  border-top: 10px solid var(--rnw-accent);
  border-right: 5.77px solid transparent;
  border-left: 5.77px solid transparent;
}

.rnw-subsidy-support-flow__num {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 31.737px;
  background-color: var(--rnw-bg1);
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1.2px;
}

.rnw-subsidy-support-flow__text {
  flex: 1 0 0;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.216px;
}


/* --- よくある質問 --------------------------------------------------
   [display_faq type="nanny"] の出力に当てるスタイル。
   実体は service-nanny.css（is_page('service-nanny') でしか読まれない）に
   あるため、同じ値をここへ転記している。service-nanny 側を直したら
   こちらも合わせること。
   ▼タグの絞り込みは service-nanny を含めどのページでも未実装（JSが無い）。
     アコーディオンは <details> のネイティブ挙動で、JSは不要。
   ------------------------------------------------------------------ */

.rnw-nanny-h2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rnw-nanny-h2__en {
  color: var(--rnw-accent);
  font-family: var(--rnw-font-en);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-nanny-h2__jp {
  color: var(--rnw-text);
  font-family: var(--rnw-font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1.2px;
}

.rnw-nanny-h2--center { text-align: center; }

.rnw-nanny-ftags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
}

.rnw-nanny-ftag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 19.926px;            /* Figma: 外側8px＋内側11.926px */
  border: 0.745px solid var(--rnw-main);
  border-radius: 55.96px;
  background-color: #FFFFFF;
  color: var(--rnw-accent);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.rnw-nanny-ftag--current {
  border-color: #FFFFFF;
  background-color: var(--rnw-accent);
  color: #FFFFFF;
}

.rnw-nanny-faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 80px 24px;
  background-color: var(--rnw-bg3);  /* common/bg2 #EEE8DE */
}

.rnw-nanny-faq__tags { gap: 12px; }

.rnw-nanny-faq__list { width: 100%; }

.rnw-nanny-faq__q {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rnw-text);
  cursor: pointer;
  list-style: none;
}

.rnw-nanny-faq__q::-webkit-details-marker { display: none; }

.rnw-nanny-faq__mark {
  flex: 0 0 auto;
  color: var(--rnw-text);
  font-family: var(--rnw-font-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
}

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

.rnw-nanny-faq__toggle {
  display: flex;
  flex: 0 0 13px;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
}

.rnw-nanny-faq__icon--minus { transform: rotate(90deg); }

.rnw-nanny-faq__item[open] .rnw-nanny-faq__icon--plus  { display: none; }
.rnw-nanny-faq__item:not([open]) .rnw-nanny-faq__icon--minus { display: none; }

.rnw-nanny-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 0 0 20px 40px;
  border-bottom: 1px solid var(--rnw-text);
}

.rnw-nanny-faq__atext {
  flex: 1 0 0;
  min-width: 0;
  color: var(--rnw-text);
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 1.2px;
}


/* =====================================================================
   9. 注意点
   ===================================================================== */

.rnw-subsidy-support-note {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rnw-subsidy-support-note__title {
  width: 100%;
  color: var(--rnw-caption);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.9px;
}

.rnw-subsidy-support-note__list {
  width: 100%;
  padding-left: 18px;
  color: var(--rnw-caption);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  list-style: disc;
}


/* =====================================================================
   10. その他の制度
   ===================================================================== */

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

.rnw-subsidy-support-other__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}


/* =====================================================================
   11. 追従CTA（SPのみ。Figma 1297:32048）
   ---------------------------------------------------------------------
   service-nanny.css の .rnw-nanny-cta と同じ作り。PCでは出さない。
   ===================================================================== */

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

.rnw-subsidy-support-cta__btn {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16.346px 31.731px;
  font-family: var(--rnw-font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.rnw-subsidy-support-cta__btn--contact {
  background-color: var(--rnw-main);
  color: var(--rnw-text);
}

.rnw-subsidy-support-cta__btn--join {
  border-left: 0.962px solid #FFFFFF;
  background-color: var(--rnw-accent);
  color: #FFFFFF;
}


/* =====================================================================
   12. レスポンシブ（旧CSSと同じ 767/768 で分岐）
   ===================================================================== */

/* ---------- PC（Figma 403:44095）----------
   1440px幅・コンテンツ1280px・左右余白80pxで設計されている。
   余白は狭い画面でも詰まるよう clamp で可変にする。
   ------------------------------------------------------------------ */
@media only screen and (min-width: 768px) {

  .rnw-subsidy-support {
    --pc-pad: clamp(24px, 5.56vw, 80px);
    --pc-max: 1280px;
    padding-top: var(--rnw-header-h-pc);
  }

  .rnw-subsidy-support-br--sp { display: none; }

  /* 追従CTAはSPだけ（PCフレームには無い） */
  .rnw-subsidy-support-cta { display: none; }

  /* ---------- 1. リード（Figma 403:44097） ---------- */
  .rnw-subsidy-support-lead {
    align-items: center;
    padding: 24px;
  }

  /* Figmaのカード幅（1440 − 左右24px）。広い画面でも伸ばさない */
  .rnw-subsidy-support-lead__card {
    max-width: 1392px;
    padding: 40px var(--pc-pad);
  }

  .rnw-subsidy-support-lead__head  { gap: 7px; }
  .rnw-subsidy-support-lead__tag   { font-size: 18px; }
  .rnw-subsidy-support-lead__title { font-size: clamp(28px, 3.28vw, 42px); }
  .rnw-subsidy-support-lead__body  { font-size: 16px; font-weight: 500; }

  /* ---------- 2. 訴求文（Figma 403:44104） ---------- */
  .rnw-subsidy-support-appeal { padding: 24px; }

  /* 1〜2行目を横1行に並べ、3行目（事業名）だけ改行して下へ落とす。
     1392pxを超える画面では左に寄ってしまうので中央に置く */
  .rnw-subsidy-support-appeal__box {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    max-width: 1392px;
    margin-inline: auto;
    padding: 24px;
  }

  .rnw-subsidy-support-appeal__line   { font-size: 16px; }
  .rnw-subsidy-support-appeal__strong { font-size: 20px; }

  .rnw-subsidy-support-appeal__title {
    width: 100%;
    font-size: 24px;
  }

  /* ---------- 3. 見出し h2（PC/title/h2） ---------- */
  .rnw-subsidy-support-h2__en { font-size: 24px; }
  .rnw-subsidy-support-h2__ja { font-size: 42px; }

  /* ---------- 4. 利用できる制度一覧（Figma 403:44115） ---------- */
  .rnw-subsidy-support-list {
    gap: 56px;
    padding: 0 var(--pc-pad) 120px;
  }

  /* ヒーローは画面幅いっぱい。見出しカードはSPのように重ねず中央に置く */
  .rnw-subsidy-support-list__head {
    position: relative;
    width: calc(100% + var(--pc-pad) * 2);
    margin-inline: calc(var(--pc-pad) * -1);
  }

  .rnw-subsidy-support-list__hero-wrap {
    width: 100%;
    height: 400px;
    margin-inline: 0;
  }

  .rnw-subsidy-support-list__head .rnw-subsidy-support-h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    max-width: calc(100% - var(--pc-pad) * 2);
    margin-top: 0;
    padding: 32px;
    background-color: rgba(255, 255, 255, 0.8);
    transform: translate(-50%, -50%);
  }

  /* ---------- 5. 制度カード ---------- */
  .rnw-subsidy-support-card {
    width: 100%;
    max-width: var(--pc-max);
  }

  /* タグと制度名は横1行。入りきらない画面幅では折り返して縦積みに戻す */
  .rnw-subsidy-support-card__body {
    align-items: center;
  }

  .rnw-subsidy-support-card__head {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: center;
  }

  .rnw-subsidy-support-card__tags { width: auto; }
  .rnw-subsidy-support-card__tag  { font-size: 18px; }

  .rnw-subsidy-support-card__title {
    width: auto;
    font-size: 24px;
    white-space: nowrap;
  }

  .rnw-subsidy-support-card__text {
    font-size: 16px;
    text-align: center;
  }

  .rnw-subsidy-support-card__action {
    justify-content: center;
    margin-top: 16px;
  }

  .rnw-subsidy-support-card__action .rnw-btn {
    width: 400px;
    max-width: 100%;
  }

  /* ---------- 6. 展開パネル（Figma PC FIX 694:27801 / 694:28598） ---------- */
  .rnw-subsidy-support-panel {
    gap: 40px;
    padding: 24px 40px;
  }

  .rnw-subsidy-support-panel__h2 {
    font-size: 24px;
    scroll-margin-top: calc(var(--rnw-header-h-pc) + var(--rnw-pagenav-h));
  }

  .rnw-subsidy-support-panel__h3   { font-size: 24px; }
  .rnw-subsidy-support-panel__body { gap: 40px; }

  .rnw-subsidy-support-panel__lead     { font-size: 24px; line-height: 1.5; }
  .rnw-subsidy-support-panel__lead-sub { font-size: 18px; }

  /* 3つのタグは横並び。文字が入りきるよう幅は等分にする */
  .rnw-subsidy-support-panel__tags {
    flex-direction: row;
    gap: 24px;
  }

  .rnw-subsidy-support-panel__tag {
    flex: 1 1 0;
    min-width: 0;
    font-size: 18px;
  }

  .rnw-subsidy-support-panel__text { font-size: 16px; }

  /* --- パネル内アンカー（Figma 403:44246） --- */
  .rnw-subsidy-support-anchor { padding: 0; }

  .rnw-subsidy-support-anchor__list {
    max-width: 1040px;
    margin-inline: auto;
  }

  .rnw-subsidy-support-anchor__link { font-size: 14px; }

  /* --- ご利用シーン・活用例／メリット（Figma 403:44274） --- */
  .rnw-subsidy-support-usecase {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }

  .rnw-subsidy-support-usecase__title {
    width: 100%;
    font-size: 24px;
  }

  /* 一時預かりはカード3枚（812）＋活用例リスト（316）が横に並ぶ。
     メリット（待機児童）はリストが無いのでカードだけで全幅になる。 */
  .rnw-subsidy-support-usecase__items {
    flex: 812 1 0;
    flex-direction: row;
    gap: 24px;
    min-width: 0;
  }

  .rnw-subsidy-support-usecase__item {
    flex: 1 1 0;
    min-width: 0;
    height: 145px;
    font-size: 20px;
  }

  .rnw-subsidy-support-usecase__item--auto { height: 145px; padding: 16px; }

  .rnw-subsidy-support-usecase__list {
    flex: 316 1 0;
    width: auto;
    min-width: 0;
    font-size: 16px;
  }

  /* --- 対象エリア（Figma 694:27849 / 694:28645） --- */
  .rnw-subsidy-support-area__list {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  }

  /* --- 対象者と補助額 --- */
  .rnw-subsidy-support-aid__sp { display: none; }

  .rnw-subsidy-support-aid__pc {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* 一時預かりは1自治体＝1表で数が多いため2列に流す（Figma 694:27995）。
     同じ行でも表の高さは揃えず上端で合わせる。 */
  .rnw-subsidy-support-aid__pc--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }

  /* 案内文は表の上に横いっぱいで置く */
  .rnw-subsidy-support-aid__pc--grid > .rnw-subsidy-support-aid__note {
    grid-column: 1 / -1;
  }

  .rnw-subsidy-support-aid__note { font-size: 16px; }

  .rnw-subsidy-support-aid__table th,
  .rnw-subsidy-support-aid__table td { font-size: 16px; }

  /* グループ名の行。表の見出しとして1行まるごと使う */
  .rnw-subsidy-support-aid__group th {
    width: auto;
    padding: 12px 9px 14px 8px;
    border-right: 0;
    background-color: var(--rnw-main);
  }

  .rnw-subsidy-support-aid__action .rnw-btn {
    width: 480px;
    max-width: 100%;
  }

  /* --- ご利用の流れ（Figma 403:44634） --- */
  .rnw-subsidy-support-flow { padding: 56px 16px; }

  .rnw-subsidy-support-flow__ja   { font-size: 42px; }
  .rnw-subsidy-support-flow__en   { font-size: 24px; }
  .rnw-subsidy-support-flow__text { font-size: 20px; }

  /* --- 注意点 --- */
  .rnw-subsidy-support-note__list { column-count: 1; }

  /* ---------- 7. よくあるご質問（service-nanny と同じ組み方） ---------- */
  .rnw-nanny-faq {
    gap: 56px;
    padding: 80px var(--pc-pad);
  }

  .rnw-nanny-faq > *,
  .rnw-nanny-faq__body {
    width: 100%;
    max-width: var(--pc-max);
    margin-inline: auto;
  }

  .rnw-nanny-faq .rnw-nanny-h2 { text-align: center; }
  .rnw-nanny-h2__en { font-size: 24px; }
  .rnw-nanny-h2__jp { font-size: 42px; }

  .rnw-nanny-faq > .rnw-btn { width: 480px; }

  /* ---------- 8. その他の制度（Figma 694:27795） ---------- */
  .rnw-subsidy-support-other {
    gap: 56px;
    padding: 80px var(--pc-pad);
    background-color: #FFFFFF;
  }

  .rnw-subsidy-support-other__list {
    flex-direction: row;
    gap: 32px;
    justify-content: center;
    width: auto;  /* ▼ 2026-09-01 12章で上書き（width:100%＋wrapで折り返し） */
  }

  .rnw-subsidy-support-other__list .rnw-btn {
    width: 480px;
    max-width: 100%;
  }
}


/* =====================================================================
   13. 調整ログ（2026-09-01～）
   既存章の後に日付順で追記。SP/PCで値を分ける場合は @media で包む。
   ===================================================================== */

/* --- 2026-09-01 その他の制度ボタン：横並びが入りきらない幅で width:auto のまま溢れて両脇が切れる→幅100%＋折り返し可に（PC上書き） --- */
@media only screen and (min-width: 768px) {
  .rnw-subsidy-support-other__list {
    width: 100%;
    flex-wrap: wrap;
  }
}

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

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

/* --- 2026-09-26 制度一覧ヒーロー：タブレット幅で中央トリミングだと右端の人物が切れる→右寄せ（写真の右端50pxだけ枠外に出す＝赤ちゃんの頭まで入る）。
       幅1340pxで中央トリミングと同じ位置になるので、それ未満だけ上書き（PC上書き） --- */
@media only screen and (min-width: 768px) and (max-width: 1339px) {
  .rnw-subsidy-support-list__head .rnw-subsidy-support-list__hero {
    object-position: right -50px top 50%;
  }
}