/* ============================================
   認定こども園 南売市保育園 — Renewed Design 2026
   Reference: mogushi.jp (DESIGN.md)
   ============================================ */
/* ---------- 殴り書きクレヨン（ヒーローキャッチコピー専用） ---------- */
@font-face {
  font-family: "Crayon";
  /* ヒーロー見出し用にサブセット化（ひらがな/カタカナ/約物/英数字のみ・4.9MB→98KB） */
  src: url("assets/fonts/crayon-hero.woff2?v=202609111434") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* block: 読み込み完了まで見出しを不可視にし FOUT を防ぐ。preload + 98KB で待ち時間は極小 */
  font-display: block;
}

/* ---------- 本文フォント（BIZ UDPGothic・自前配信） ----------
   Google Fonts から読むと日本語が文字の範囲ごとに細切れで届き、初回67ファイル・668KB
   かかるうえ、届くまで代替フォントで表示されるので途中で字体が入れ替わって見える。
   サイトで使う文字だけに絞った1ファイルを自分のサーバーから配り、クレヨンと同じく
   font-display: block で「読み込めるまで出さない」ことで字体の切り替わりを防ぐ。
   文字を追加したときは tools/build-font-subset.py で作り直す。 */
@font-face {
  font-family: "BIZ UDPGothic";
  src: url("assets/fonts/biz-udpgothic-400.woff2?v=202609111434") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "BIZ UDPGothic";
  src: url("assets/fonts/biz-udpgothic-700.woff2?v=202609111434") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* 固定ヘッダー(84px)分、アンカー(#)移動時のスクロール位置をずらす */
  scroll-padding-top: 100px;
}

body {
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Primary — メインカラー（落ち着いたセージグリーン）— サイト内の緑はすべてこの色に統一 */
  --c-sea: #A4B8A0;
  /* 旧階調（緑系すべて）は --c-sea に統一 */
  --c-sea-dark: #A4B8A0;
  /* h2見出し専用カラー（落ち着いたグレイッシュグリーン） */
  --c-h2: #556059;
  --c-sky: #A4B8A0;
  --c-sky-light: #A4B8A0;
  --c-sky-pale: #A4B8A0;

  /* Blue — ブルーグレー（#DEE3ED に統一） */
  --c-blue: #DEE3ED;

  /* Accent — アクセントカラー（CTA：コーラル） */
  --c-coral: #BBAB9F;
  /* Warm — サン（行事の秋等） */
  --c-sun: #DFAB83;

  /* Neutrals */
  --c-white: #FFFFFF;
  --c-cream: #FBF4E6;
  /* ベージュクリーム（少し濃いめ） */
  --c-gray-50: #F7F7F7;
  --c-gray-100: #EEEEEE;
  --c-gray-200: #E0E0E0;
  --c-gray-400: #BBBBBB;
  --c-gray-500: #999999;
  --c-gray-700: #666666;
  --c-text: #333333;

  /* Typography — 本文・見出しは UDフォント（BIZ UDPGothic）に統一
     ヒーローキャッチコピーのみ手書きクレヨンフォント（自前ホスト）を例外で使用 */
  --font-jp: "BIZ UDPGothic", system-ui, sans-serif;
  --font-en: "BIZ UDPGothic", system-ui, sans-serif;
  --font-hand: "Crayon", "BIZ UDPGothic", system-ui, sans-serif;

  /* Radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 9999px;

  /* Shadow — ニュートラルなグレー */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-md: 0 6px 20px rgba(0, 0, 0, 0.10);
  --sh-lg: 0 12px 28px rgba(0, 0, 0, 0.14);
  --sh-paper: 2px 3px 0 rgba(51, 51, 51, 0.08), 0 12px 24px -12px rgba(51, 51, 51, 0.22);

  /* マスキングテープ色（白枠フォト用） */
  --tape-coral: rgba(240, 171, 145, 0.7);
  --tape-sky: rgba(189, 213, 168, 0.7);
  --tape-blue: rgba(127, 198, 238, 0.7);
  --tape-sun: rgba(232, 151, 68, 0.55);

  /* セクション境目の波装飾 4パターン × 2色（cream / white） — viewBox 1200x220、 緩やか振幅18 */
  /* パターン1: sin波 左で山・右で谷 */
  --wave-1-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FBF4E6' d='M0,110 C200,92 400,92 600,110 C800,128 1000,128 1200,110 L1200,220 L0,220 Z'/></svg>");
  --wave-1-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FFFFFF' d='M0,110 C200,92 400,92 600,110 C800,128 1000,128 1200,110 L1200,220 L0,220 Z'/></svg>");
  /* パターン2: sin波 反転（左で谷・右で山） */
  --wave-2-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FBF4E6' d='M0,110 C200,128 400,128 600,110 C800,92 1000,92 1200,110 L1200,220 L0,220 Z'/></svg>");
  --wave-2-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FFFFFF' d='M0,110 C200,128 400,128 600,110 C800,92 1000,92 1200,110 L1200,220 L0,220 Z'/></svg>");
  /* パターン3: 中央で緩やかなU字 */
  --wave-3-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FBF4E6' d='M0,100 Q600,146 1200,100 L1200,220 L0,220 Z'/></svg>");
  --wave-3-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FFFFFF' d='M0,100 Q600,146 1200,100 L1200,220 L0,220 Z'/></svg>");
  /* パターン4: 細かい波（4周期）— 同じく緩やか */
  --wave-4-cream: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FBF4E6' d='M0,110 Q150,92 300,110 T600,110 T900,110 T1200,110 L1200,220 L0,220 Z'/></svg>");
  --wave-4-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='220' viewBox='0 0 1200 220' preserveAspectRatio='none'><path fill='%23FFFFFF' d='M0,110 Q150,92 300,110 T600,110 T900,110 T1200,110 L1200,220 L0,220 Z'/></svg>");

  /* Transition */
  --t: 0.3s ease;
  /* 最上部⇄スクロール時の色変化用（ヘッダー・各ボタンでゆっくり切替） */
  --t-color: 0.7s ease;
}

/* ---------- Base Typography ---------- */
body {
  font-family: var(--font-jp);
  color: var(--c-text);
  background: var(--c-white);
  line-height: 1.7;
  font-size: 16px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-jp);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-h2);
  /* FB14: 1文字だけ次行に折返さないよう日本語禁則を有効化 */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* h2見出しは全ページ統一でグレイッシュグリーン */
h2 {
  color: var(--c-h2);
}

a {
  color: var(--c-h2);
  text-decoration: none;
  transition: color var(--t);
}

a:hover {
  color: var(--c-coral);
}

/* ---------- Layout ---------- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   Background — 木のイラスト背景はクライアント要望により除去
   ============================================ */
/* ============================================
   Wave — セクション区切りの波
   ============================================ */
/* ---------- Wave Divider（セクション下辺のなみなみ波） ---------- */
.wave-divider {
  position: relative;
  height: 80px;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  pointer-events: none;
}

.wave-divider.wave-sky {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='80' viewBox='0 0 1200 80' preserveAspectRatio='none'><path fill='%23A4B8A0' d='M0,40 C300,90 600,0 900,40 C1050,60 1150,30 1200,40 L1200,80 L0,80 Z'/></svg>");
}

.wave-divider.wave-leaf {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='80' viewBox='0 0 1200 80' preserveAspectRatio='none'><path fill='%23A4B8A0' d='M0,40 C300,0 600,80 900,40 C1050,20 1150,50 1200,40 L1200,80 L0,80 Z'/></svg>");
}

.wave-divider.wave-cream {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='80' viewBox='0 0 1200 80' preserveAspectRatio='none'><path fill='%23FBF4E6' d='M0,40 C300,90 600,0 900,40 C1050,60 1150,30 1200,40 L1200,80 L0,80 Z'/></svg>");
}

/* ============================================
   Header — トップは透明、スクロール or サブページで白
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 1000;
  transition: background var(--t-color), box-shadow var(--t-color);
}

.header.scrolled {
  background: var(--c-white);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  height: 84px;
  gap: 24px;
}

.header-logo {
  justify-self: start;
}

.header-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo .logo-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.header-logo .logo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-logo .logo-main {
  font-family: var(--font-jp);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--c-sea);
  letter-spacing: 0.02em;
}

.header-logo .logo-sub {
  font-size: 0.7rem;
  color: var(--c-gray-500);
  letter-spacing: 0.05em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-self: center;
}

.header-nav a {
  position: relative;
  display: block;
  padding: 9px 11px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-text);
  border-radius: var(--r-pill);
  transition: color var(--t), background var(--t), text-shadow var(--t);
}

/* 透明ヘッダー時：ナビ文字を白＋影で視認性確保 */
.header:not(.scrolled) .header-nav a {
  color: var(--c-white);
}

.header-nav a:hover {
  background: var(--c-sea);
  color: var(--c-white);
}

.header:not(.scrolled) .header-nav a:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--c-white);
}

/* ヘッダー右端：TELボタン + ハンバーガー */
.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-sea);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-sea);
  background: var(--c-white);
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color), transform var(--t);
  white-space: nowrap;
}

.header-tel-num {
  white-space: nowrap;
}

.header-tel:hover {
  background: var(--c-sea);
  color: var(--c-white);
  transform: translateY(-1px);
}

.header-tel-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* 透明ヘッダー時：TELボタンは白枠＋白文字 */
.header:not(.scrolled) .header-tel {
  color: var(--c-white);
  border-color: var(--c-white);
  background: transparent;
}

.header:not(.scrolled) .header-tel:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--c-sea);
  border-radius: 3px;
  transition: transform var(--t), opacity var(--t), background var(--t);
}

/* 透明ヘッダー時：ハンバーガーアイコンを白に */
.header:not(.scrolled) .hamburger span {
  background: var(--c-white);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ============================================
   VR園内散歩ボタン（電話番号ボタンと同一デザイン）
   PC・SP問わずヘッダー内・電話番号の右にインライン配置
   ============================================ */
.vr-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--c-sea);
  padding: 6px 11px;
  border-radius: var(--r-pill);
  border: 2px solid var(--c-sea);
  background: var(--c-white);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-color), color var(--t-color), border-color var(--t-color), transform var(--t);
  white-space: nowrap;
}

.vr-fab:hover {
  background: var(--c-sea);
  color: var(--c-white);
  transform: translateY(-1px);
}

/* 透明ヘッダー時：VRボタンは白枠＋白文字（TELボタンと同一） */
.header:not(.scrolled) .vr-fab {
  color: var(--c-white);
  border-color: var(--c-white);
  background: transparent;
}

.header:not(.scrolled) .vr-fab:hover {
  background: rgba(255, 255, 255, 0.2);
}

.vr-fab-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.vr-fab-text {
  white-space: nowrap;
}

/* ============================================
   Hero Slider (index) — sticky で背景に固定、後続セクションが上から覆う
   初期 viewport は画像のみ表示（波装飾は hero 内部にすべて収まる）
   ============================================ */
/* 左上の白い装飾コーナー（ロゴの下敷き）。右下端が S 字カーブで写真に溶ける */
/* PC では左上の白い装飾コーナーは非表示 */
/* 後続セクションは hero より上に重ねて表示（sticky を覆い隠す） */
/* hero 配下の .section-bg：band カラーで塗りつぶし。z-index:2 で前面化し波装飾を出す */
@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 手書き風（クレヨン質）の縦書きキャッチコピー */
/* ヒーロー直後セクション：波装飾は hero 領域内側に完全に被せる
   （初期 viewport で波線が見えないように） */
/* ============================================
   Sub-page Hero — ヘッダー透過と重なるよう margin-top: 0
   画像は画面上端から box 全体に表示
   ============================================ */
.page-hero {
  position: relative;
  width: 100%;
  /* 写真の主役が切れずに収まる高さ。低すぎると帯状になり、下端の波も直線に見える */
  height: 440px;
  margin-top: 0;
  /* overflow:hidden だと ::after の bottom:-1px オーバーラップが clip されて
     次セクションとの境目に隙間が出るため visible に */
  overflow: visible;
  background: var(--c-sky-pale);
}

/* hero画像は page-hero の中に明示的に clip（overflow:visible でも box外に出ない） */
.page-hero>img {
  /* object-fit: cover で box内に収まるが、 念のため clip-path で確実に */
  clip-path: inset(0);
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hero 下端を波型に：次セクション（白背景）と同色の白い波を下端へ重ねる。
   overflow:visible の hero に bottom:-1px で置き、継ぎ目を1px重ねて隙間を防ぐ */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  /* 中央がゆるやかに上へ膨らむ弧。頂点は画面幅の約5.76%ぶん持ち上がり、
     位置は中央よりわずかに右（左から55%）。左右端は hero 下端にほぼ接する。
     波SVGは preserveAspectRatio:none で横に引き伸ばされるため、
     この高さと画面幅の比がそのままカーブの深さになる（--hero-wave-h で切り替える） */
  height: var(--hero-wave-h, 72px);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='%23FFFFFF' d='M0,95.39 L20,90.13 L40,85.13 L60,80.35 L80,75.77 L100,71.34 L120,67.06 L140,62.91 L160,58.87 L180,54.94 L200,51.1 L220,47.36 L240,43.71 L260,40.16 L280,36.7 L300,33.35 L320,30.1 L340,26.98 L360,23.98 L380,21.11 L400,18.38 L420,15.81 L440,13.4 L460,11.17 L480,9.11 L500,7.25 L520,5.58 L540,4.12 L560,2.88 L580,1.85 L600,1.04 L620,0.46 L640,0.12 L660,0 L680,0.17 L700,0.69 L720,1.55 L740,2.75 L760,4.28 L780,6.12 L800,8.26 L820,10.7 L840,13.4 L860,16.37 L880,19.58 L900,23 L920,26.64 L940,30.46 L960,34.45 L980,38.61 L1000,42.91 L1020,47.36 L1040,51.95 L1060,56.68 L1080,61.55 L1100,66.6 L1120,71.83 L1140,77.28 L1160,82.98 L1180,89 L1200,95.39 L1200,100 L0,100 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  /* オーバーレイの黒いスクリム（overlay z-index:4）より手前に白い波を出す */
  z-index: 5;
  pointer-events: none;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding: 0 48px 32px 0;
  /* 下端の白い波（::after z-index:3）より前面にテキストを出す */
  z-index: 4;
  /* 手前のテキストを読みやすくするための暗いスクリム（右下ほど濃く） */
  background: linear-gradient(to top left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 75%);
}

/* PC表示ではヒーローのテキストを上下・左右とも中央に配置 */
@media (min-width: 769px) {
  .page-hero-overlay {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
    /* 中央のテキストを読みやすくするための均一なスクリム */
    background: linear-gradient(rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.32));
  }
}

.page-hero-overlay h1 {
  font-size: 2.2rem;
  color: var(--c-white);
  margin-bottom: 6px;
  letter-spacing: 0.08em;
}

.page-hero-overlay p {
  font-family: var(--font-en);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.2em;
  font-weight: 700;
}

.page-hero {
  z-index: 2;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 12px 0 6px;
  font-size: 0.82rem;
  color: var(--c-gray-500);
  letter-spacing: 0.05em;
}

.breadcrumb a {
  color: var(--c-gray-700);
}

.breadcrumb a:hover {
  color: var(--c-h2);
}

.breadcrumb span {
  margin: 0 8px;
  color: var(--c-gray-400);
}

/* ============================================
   Section
   ============================================ */
.section {
  padding-bottom: 110px;
  position: relative;
}

/* サブページ先頭セクション：ヒーロー直下の波装飾ぶんの余白を抑え、
   タイトル上の空きを詰める */
.page-hero+.section,
.page-hero+.container+.section {
  padding-top: 40px;
}

/* セクション全体を band カラーで塗りつぶし、上下端から白い大きな波カーブが食い込む */
.section-bg {
  background: var(--c-band, var(--c-white));
  position: relative;
  overflow: hidden;
  /* 次セクションとの継ぎ目に band 色の 1〜2px 帯（薄い横線）が残るのを防ぐため
     わずかに重ねる */
  margin-bottom: -2px;
}

/* ::before / ::after は白塗り。mask-image の path により上端／下端を急カーブで切り取って白を出す */
.section-bg::before,
.section-bg::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
  pointer-events: none;
  background-color: var(--c-white);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.section-bg::before {
  top: -1px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='black' d='M0,10 C700,10 500,90 1200,90 L1200,0 L0,0 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='black' d='M0,10 C700,10 500,90 1200,90 L1200,0 L0,0 Z'/></svg>");
}

.section-bg::after {
  bottom: -1px;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='black' d='M0,90 C700,90 500,10 1200,10 L1200,100 L0,100 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='black' d='M0,90 C700,90 500,10 1200,10 L1200,100 L0,100 Z'/></svg>");
}

/* ---------- Band Color Variants — ユーザー指定のソフトパステル ---------- */
.section-bg.band-mint {
  --c-band: #E2E8E2;
}

/* ソフトセージミント */
.section-bg.band-sky {
  --c-band: #DEE3ED;
}

/* ソフトラベンダーブルー */
.section-bg.band-cream {
  --c-band: #F0EBDF;
}

/* ソフトクリーム */
/* アクセス：青・クリームはページ上端基準の背景レイヤー（.page-shape）が描くため、
   セクション自体は透明にして背面のシェイプを透かす（白地は .page-backdrop が担う） */
/* ---------- ページ上端基準の背景レイヤー ----------
   body 先頭に置いた .page-backdrop / img.page-shape を、ページ最上部からの px で配置する。
   調整は下記 body 内の変数のみ。波（cream_shape.svg）は固定高さなので
   位置や塗りの伸縮に関係なく波の形は常に一定。
   全て z:1 だが後続セクション（.hero-slider~section の z:1〜2）より DOM で前のため、
   「セクションの白地より前・セクションのコンテンツより後ろ」ではなく
   「透明化したセクションの背面」に敷く方式。白地は .page-backdrop が担う。 */
body {
  /* .page-shape の top をページ上端基準で解決させる */
  position: relative;
  --sky-top: 4600px;
  /* 青の上端（ページ上端から） */
  --sky-h: 979px;
  /* 青の高さ */
  --cream-top: 5291px;
  /* クリームの波の上端（ページ上端から） */
  --cream-wave-h: 140px;
  /* 波部分の固定高さ＝縦振幅 */
}

/* sticky ヒーローを覆う白地。ヒーロー下端からページ最下部まで */
.page-shape {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 100%;
  object-fit: fill;
  pointer-events: none;
}

/* 塗りは波の直下（1px重ね）からページ最下部まで（100% = body高さ）。
   フッター（DOM後・z:1）が上に重なって余剰分を隠す */
.page-shape-cream-fill {
  top: calc(var(--cream-top) + var(--cream-wave-h) - 1px);
  height: calc(100% - var(--cream-top) - var(--cream-wave-h) + 1px);
}

/* 背景レイヤーを透かすため、シェイプ帯に重なるセクションは地を透明にする
   （.hero-slider~section の白塗りを打ち消す。白地は .page-backdrop が担う） */
/* 緑シェイプは teaser-hoiku の底へせり上がるため、その本文地も透明化 */
/* teaser の色シェイプもページ上端基準（body直下の .page-shape）。
   本文は前面（teaser-body の container z:3）、写真は teaser-head z:2 のまま。 */
/* ---------- Section Title — 日本語+英字の2段組 ---------- */
.section-title {
  text-align: center;
  margin-bottom: 36px;
  position: relative;
}

.section-title h2 {
  font-size: 2rem;
  color: var(--c-h2);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.section-title p {
  display: none;
}

/* 「病後児保育室」＋「マリーゴールド」の2段見出し（PDF準拠） */
.section-title::after {
  display: none;
}

.section-title-sides h2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.section-title-side {
  width: 140px;
  height: auto;
  flex-shrink: 0;
}

/* ============================================
   Buttons — ピル型 (mogushi.jp style)
   ============================================ */
.btn,
.btn-primary,
.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 200px;
  padding: 14px 32px;
  background: var(--c-sea);
  color: var(--c-white);
  border: none;
  border-radius: var(--r-pill);
  font-family: var(--font-jp);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: opacity var(--t), transform var(--t);
  cursor: pointer;
}

.btn:hover,
.btn-primary:hover,
.link-arrow:hover {
  transform: translateY(-1px);
}

.btn-sea {
  color: var(--c-h2);
  border-color: var(--c-sea);
}

.btn-sea:hover {
  background: var(--c-sea);
  color: var(--c-white);
}

.btn-ghost {
  color: var(--c-gray-700);
  border-color: var(--c-gray-300);
  background: var(--c-white);
}

.btn-ghost:hover {
  background: var(--c-gray-50);
  color: var(--c-text);
}

/* HTMLに残る .leaf span を非表示（装飾を削除） */
.leaf {
  display: none;
}

/* ============================================
   About / Intro
   ============================================ */
.about-content {
  display: flex;
  gap: 48px;
  align-items: center;
}

.about-content img {
  flex: 0 0 440px;
  width: 440px;
  height: 320px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.about-text h3 {
  font-size: 1.55rem;
  color: var(--c-h2);
  margin-bottom: 20px;
}

.about-text p {
  color: var(--c-text);
  line-height: 2;
  margin-bottom: 16px;
}

.intro {
  display: flex;
  gap: 48px;
  align-items: center;
}

.intro-img {
  flex: 0 0 440px;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.intro-img img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.intro-text h3 {
  font-size: 1.5rem;
  color: var(--c-h2);
  margin-bottom: 16px;
}

.intro-text p {
  color: var(--c-text);
  line-height: 2;
}

/* ============================================
   Marquee — 正方形画像の無限横スクロール
   ============================================ */
/* マーキー（写真ギャラリー）前後のセクション余白を詰めて、
   写真まわりの大きな空白をなくす */
.section:has(+ .marquee) {
  padding-bottom: 16px;
}

/* チェキ風白枠フォト（design-2 から移植） */
/* 3パターンで微回転、チェキを無造作に並べた感じ */
@media (max-width: 768px) {
  .section:has(+ .marquee) {
    padding-bottom: 12px;
  }
}

/* ============================================
   Philosophy / Marigold（トップページ本文カード）
   ============================================ */
.philosophy-content {
  max-width: 820px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-text);
}

.philosophy-content p {
  margin-bottom: 14px;
}

.philosophy-content p:last-of-type {
  margin-bottom: 0;
}

/* ============================================
   ページリンクカード（トップ下部の「各ページへのリンク」）
   ============================================ */
/* ============================================
   園のことをもっと知る — ブロブ型フォトリンク
   有機的な曲線でマスクした写真＋下にラベルピル
   ============================================ */
/* 各ブロブに異なる曲率を割り当てて自然な不揃い感を出す */
/* VR園内散歩は橙のラベルで強調 */
/* フッター上の木のこずえがカードに重ならないよう、最下段カードと
   緑の波の稜線の間に木が顔を出すゆとりを確保する */
/* ============================================
   サブページ共通：index と同じ body直下・ページ上端基準の背景シェイプ。
   4色（緑→ペーチ→水色→クリーム）の固定高さバンドを白地に上から流す。
   各バンドは top(ページ全体に対する%) と height(固定px) で位置調整。
   地は白、全セクションは透明にして背後のバンドを見せる。
   ============================================ */
body.subpage {
  background-color: #ffffff;
  position: relative;
}

/* 全セクションを透明化して背後の背景バンドを見せる（旧 band 彩色・白波も無効化） */
body.subpage .section,
body.subpage .section-bg {
  background: transparent;
  overflow: visible;
}

body.subpage .section-bg::before,
body.subpage .section-bg::after {
  display: none;
}

/* セクションの本文は背景バンド(z:-1)より前面（通常フローで自動的に前面） */
/* ホームページ用のクリーム塗りシェイプ（z:1・不透明）はサブページでは本文を覆ってしまうため
   背面（z:-1）へ回し、下部のクリーム地としてのみ機能させる */
body.subpage .page-shape-cream-fill {
  z-index: -1;
}

/* 背景バンド：白地の上・本文の下。
   位置(top)と高さ(height)は CSS変数で制御し、ページ別 / デバイス別に上書きできる。
   ▼ 調整方法は下の「背景バンドの位置・高さ調整」ブロックを参照。 */
.subpage-bg {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  object-fit: fill;
  pointer-events: none;
}

/* 各バンドの top / height は変数から読む（未指定なら第2引数の初期値を使用） */
.subpage-bg-green {
  top: var(--bg-green-top, 16%);
  height: var(--bg-green-h, 460px);
}

.subpage-bg-sky {
  top: var(--bg-sky-top, 49%);
  height: var(--bg-sky-h, 460px);
}

.subpage-bg-cream {
  top: var(--bg-cream-top, 82%);
  height: var(--bg-cream-h, 460px);
}

/* ============================================================
   背景SVG（帯・クリーム塗り）の位置・高さ調整について
   ------------------------------------------------------------
   ▼ 調整はこのファイルではなく、各ページ専用CSSで行います。
     サブページ: css/<ページ名>.css の末尾「背景SVG（このページ専用）」ブロック
       .subpage-bg-green / -sky / -cream … 帯の top(%) と height
       .page-shape-cream-fill            … 最下部クリーム塗り
     トップ    : css/index.css の末尾「背景SVG（トップ専用）」ブロック
       .page-shape-teaser-green / -teaser-cream / -sky / -cream-wave / -cream-fill
   ・各ページファイルに PC 用ブロックと スマホ用 @media(max-width:768px) ブロックを用意済み。
     編集するとそのページ・そのデバイスだけに反映されます。
   ・下の .subpage-bg-* / 変数はページ側で未指定の場合の既定値（フォールバック）です。
   ============================================================ */
/* 全サブページ共通のスマホ既定（各ページCSSで上書きされます） */
@media (max-width: 768px) {
  body.subpage {
    --bg-green-h: 360px;
    --bg-sky-h: 360px;
    --bg-cream-h: 360px;
  }
}

/* ============================================
   Alt Row — 画像とテキストを左右に交互配置
   ============================================ */
/* 偶数番目は画像右・テキスト左 */
/* ============================================
   Photo Showcase — 3-up のフォトストリップ
   ============================================ */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.photo-strip img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

.photo-strip.photo-strip-wide {
  grid-template-columns: 2fr 1fr 1fr;
}

.photo-strip.photo-strip-wide img:first-child {
  aspect-ratio: 16 / 10;
}

@media (max-width: 768px) {
  .photo-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .photo-strip.photo-strip-wide {
    grid-template-columns: 1fr 1fr;
  }

  .photo-strip.photo-strip-wide img:first-child {
    aspect-ratio: 1 / 1;
    grid-column: span 2;
  }
}

/* ============================================
   Feature Cards
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.feature-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 0 0 32px;
  transition: transform var(--t), box-shadow var(--t);
  overflow: hidden;
  border: 2px solid var(--c-gray-200);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: var(--c-sky-light);
}

.feature-card>h3,
.feature-card>p {
  padding: 0 32px;
}

.feature-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  margin-bottom: 24px;
  display: block;
}

.feature-card h3 {
  font-size: 1.2rem;
  color: var(--c-h2);
  margin-bottom: 12px;
}

.feature-card p {
  font-size: 0.95rem;
  color: var(--c-gray-700);
  line-height: 1.9;
}

/* 4色ローテーションで見出しを着色（緑→水色→コーラル→サン） */
.features-grid .feature-card:nth-child(4n+1) h3 {
  color: var(--c-h2);
}

.features-grid .feature-card:nth-child(4n+2) h3 {
  color: var(--c-blue);
}

.features-grid .feature-card:nth-child(4n+3) h3 {
  color: var(--c-coral);
}

.features-grid .feature-card:nth-child(4n+4) h3 {
  color: var(--c-sun);
}

/* ---------- Quick Links (index top) ---------- */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.quick-card {
  background: var(--c-white);
  border-radius: var(--r-md);
  border: 1px solid var(--c-gray-200);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}

.quick-card:hover {
  transform: translateY(-4px);
}

.quick-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.quick-card-body {
  padding: 20px;
  text-align: center;
}

.quick-card-body h3 {
  font-size: 1rem;
  color: var(--c-h2);
  margin-bottom: 8px;
}

.quick-card-body p {
  font-size: 0.85rem;
  color: var(--c-gray-500);
  margin-bottom: 12px;
}

/* ============================================
   Schedule Grid — 年齢別デイリープログラム（2カラム）
   ============================================ */
/* 認定区分と保育時間：PDF準拠。色箱を持たないプレーンな見出し＋2カラムのラベル/時間リスト */
/* ============================================
   Daily Program — PDFデザイン案3 3ページ目準拠
   オフホワイト地＋背景に流れるパステルの波＋左の破線スパイン。
   各項目は色箱を持たないプレーンな見出し＋説明文（PDF準拠）
   ============================================ */
/* デイリープログラムは透明（背後の背景バンドを見せる） */
/* 左の破線スパイン（PDF準拠） */
/* 各項目の写真（本文の下） */
/* 終点（延長保育・閉園） */
/* PCでは中央の破線（時間軸）を挟み、項目を左右交互（ジグザグ）に配置 */
/* ============================================
   年間行事 — mogushi風の月次カレンダー
   ============================================ */
.daily-note {
  font-size: 0.88rem;
  color: var(--c-gray-500);
  margin: 32px auto 0;
  text-align: center;
  max-width: 800px;
}

/* ============================================
   Policy List
   ============================================ */
.policy-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.policy-item {
  display: block;
}

.policy-number {
  display: none;
}

.policy-body h3 {
  font-size: 1.25rem;
  color: var(--c-text);
  margin-bottom: 12px;
  text-align: center;
}

.policy-body p {
  line-height: 2;
  color: var(--c-text);
}

/* 食への想い「食べるってたのしい！」：番号付き本文はPCで最大幅を狭く中央寄せ */
#semibuffet .policy-list {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* 本文テキストの最大幅を狭く（子育て支援・入園案内の body.text-narrow のみ） */
.text-narrow .philosophy-content {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   Privacy List / Disclosure
   ============================================ */
/* ============================================
   Facility Info
   ============================================ */
.facility-info {
  max-width: 900px;
  margin: 0 auto;
}

.facility-info dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
}

.facility-info dt {
  padding: 18px 0;
  font-weight: 700;
  color: var(--c-text);
  border-bottom: 2px dashed var(--c-sky-light);
}

.facility-info dd {
  padding: 18px 0;
  border-bottom: 2px dashed var(--c-sky-light);
  color: var(--c-text);
}

.facility-info dl>dt:last-of-type,
.facility-info dl>dd:last-of-type {
  border-bottom: none;
}

.matterport-section {
  text-align: center;
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gray-200);
  padding: 52px 32px;
  max-width: 820px;
  margin: 0 auto;
}

.matterport-section h3 {
  font-size: 1.35rem;
  color: var(--c-h2);
  margin-bottom: 14px;
}

.matterport-section p {
  color: var(--c-gray-700);
  margin-bottom: 28px;
}

/* ---------- Map ---------- */
.map-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.map-wrap iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

.streetview-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}

.streetview-wrap iframe {
  width: 100%;
  height: 440px;
  border: none;
  display: block;
}

/* ============================================
   Infection Table
   ============================================ */
/* 感染症発生状況：1名以上発生時のみテキスト表示 */
/* ============================================
   Instagram Tabs
   ============================================ */
/* タブカラーは全て var(--c-sea) に統一 */
@keyframes insta-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.insta-embed-item {
  min-width: 0;
}

.insta-embed-item iframe {
  width: 100%;
  height: 480px;
  border: none;
  border-radius: var(--r-md);
}

/* ---------- Photos-only モード（チェキ風白枠 + マスキングテープ） ---------- */
/* ============================================
   Inquiry Form
   ============================================ */
/* ラジオの丸は黒にせず、テーマ色（コーラル）で描画する */
.form-note {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-gray-500);
}

.form-actions {
  text-align: center;
  margin-top: 32px;
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 220px;
  background: var(--c-coral);
  color: var(--c-white);
  border: 3px solid var(--c-coral);
  padding: 14px 48px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t);
  font-family: inherit;
}

.btn-submit:hover {
  background: var(--c-sun);
  border-color: var(--c-sun);
  color: var(--c-white);
  transform: translateY(-2px);
}

.btn-submit::after {
  content: "→";
  transition: transform var(--t);
}

.btn-submit:hover::after {
  transform: translateX(4px);
}

/* Notice box */
/* 番号付きリスト（PDF準拠：全角数字「１」「２」を先頭に） */
@counter-style fullwidth-num {
  system: fixed 1;
  symbols: "１" "２" "３" "４" "５" "６" "７" "８" "９";
  suffix: "　";
}

/* 注意事項（PDF準拠：見出し＋中黒「・」の箇条書き、ボックスなし） */
/* ============================================
   Contact Card
   ============================================ */
.contact-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gray-200);
  padding: 52px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.contact-card h3 {
  font-size: 1.35rem;
  color: var(--c-h2);
  margin-bottom: 26px;
}

.contact-items {
  display: flex;
  flex-direction: column;
  gap: 22px;
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
}

.contact-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.contact-item-icon {
  flex: 0 0 48px;
  height: 48px;
  background: var(--c-sky-pale);
  color: var(--c-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.contact-item-body dt {
  font-size: 0.82rem;
  color: var(--c-gray-500);
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}

.contact-item-body dd {
  font-size: 1.05rem;
  font-weight: 700;
}

.contact-item-body dd a {
  color: var(--c-h2);
  font-weight: 700;
}

.consultation-note {
  background: var(--c-cream);
  border-left: 5px solid var(--c-coral);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 24px 30px;
  max-width: 720px;
  margin: 40px auto 0;
}

.consultation-note h4 {
  color: var(--c-sun);
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.consultation-note p {
  font-size: 0.92rem;
  color: var(--c-text);
  line-height: 1.9;
}

/* ============================================
   TeOTe ロゴ / 利用の流れスクショ
   ============================================ */
/* TeOTe 予約ボタン（PDFデザイン準拠：赤 #D32231・破線サークルアイコン付き）
   ①outline＝白地・赤枠・赤文字 ②fill＝赤ベタ・白文字 */
/* ============================================
   お昼ごはん 料金（園庭開放・イベント共通）
   ============================================ */
/* ============================================
   Hoiku lead
   ============================================ */
.marigold-content {
  max-width: 840px;
  margin: 0 auto;
}

.marigold-text p {
  font-size: 0.96rem;
  color: var(--c-gray-700);
  margin-bottom: 18px;
  line-height: 2;
}

.marigold-text h3 {
  font-size: 1.05rem;
  color: var(--c-h2);
  margin-bottom: 14px;
}

.marigold-steps {
  padding-left: 20px;
  margin-bottom: 20px;
}

.marigold-steps li {
  font-size: 0.92rem;
  color: var(--c-text);
  margin-bottom: 10px;
  line-height: 1.8;
}

.marigold-note {
  font-size: 0.88rem;
  color: var(--c-white);
  background: var(--c-sky-pale);
  padding: 18px 22px;
  border-radius: var(--r-md);
  border-left: 4px solid var(--c-sea);
}

.temporary-content {
  max-width: 840px;
  margin: 0 auto;
}

.temporary-content p {
  font-size: 0.96rem;
  color: var(--c-gray-700);
  margin-bottom: 16px;
  line-height: 2;
}

.temporary-content a {
  color: var(--c-h2);
  font-weight: 700;
}

.meals-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.meals-card {
  background: var(--c-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-gray-200);
  padding: 32px 26px;
  text-align: center;
}

.meals-card h3 {
  font-size: 1.1rem;
  color: var(--c-h2);
  margin-bottom: 12px;
}

.meals-card p {
  font-size: 0.92rem;
  color: var(--c-gray-700);
  line-height: 1.9;
}

.meals-instagram-note {
  text-align: center;
  font-size: 0.92rem;
  color: var(--c-gray-700);
}

/* ============================================
   Thanks Page
   ============================================ */
/* ============================================
   バーチャル園内ツアー CTA（FB6 / URL受領後に有効化）
   ============================================ */
.virtual-tour-cta {
  padding: 40px 0;
}

.virtual-tour-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  max-width: 900px;
  margin: 32px auto;
  padding: 32px 40px;
  background: var(--c-white);
  border: 2px dashed var(--c-sky);
  border-radius: var(--r-lg);
}

.virtual-tour-text {
  flex: 1 1 320px;
}

.virtual-tour-text h2 {
  font-size: 1.25rem;
  color: var(--c-h2);
  margin-bottom: 8px;
  line-height: 1.5;
}

.virtual-tour-text p {
  font-size: 0.9rem;
  color: var(--c-text);
  margin: 0;
  line-height: 1.7;
}

.virtual-tour-btn {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .virtual-tour-card {
    padding: 24px 20px;
  }

  .virtual-tour-text h2 {
    font-size: 1.1rem;
  }

  .virtual-tour-btn {
    width: 100%;
  }
}

/* ============================================
   アクセス（住所＋Googleマップ）
   ============================================ */
/* ============================================
   Footer
   ============================================ */
.footer {
  /* 園庭写真を背景に、黄色っぽい温かみのあるオーバーレイを重ねる
     （濃さはトップページと統一。変更時は css/index.css の
       .hero-slider~footer.footer も同じ値に揃えること） */
  background:
    linear-gradient(rgba(232, 186, 96, 0.62), rgba(214, 156, 66, 0.7)),
    url("assets/photos/footer-bg.webp?v=202609111434") center / cover no-repeat;
  color: #ffffff;
  padding: 10px 0 0;
  position: relative;
  /* 全ページでフッターを独立した階層にし、背面(z-index:-1)の木が
     ページ最背面に落ちて上のセクションに隠れるのを防ぐ */
  isolation: isolate;
  margin-top: 0;
}

/* フッター直前セクションの下余白。トップ（#pages）と同じ空きを全ページで確保する */
.section:has(+ .footer.footer) {
  padding-bottom: 196px;
}

/* フッター上端の波装飾は削除（クライアント要望）。フッターは直線の上端で始まる */
.footer::before {
  display: none;
}

/* フッター上の波線上に置いていた木のイラストは非表示（クライアント要望） */
.footer::after {
  display: none;
}

.footer-inner {
  display: flex;
  gap: 56px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* 写真背景でも白文字が読めるよう、フッター全体に控えめな影を付与 */
.footer-info,
.footer-nav,
.footer-bottom {}

.footer-info h3 {
  font-size: 1.3rem;
  color: var(--c-white);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

.footer-info p {
  font-size: 0.88rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
}

.footer-info a {
  color: rgba(255, 255, 255, 0.9);
}

.footer-info a:hover {
  color: var(--c-coral);
}

.footer-nav h4 {
  font-size: 0.98rem;
  color: var(--c-white);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--t);
}

.footer-nav a:hover {
  color: var(--c-coral);
}

.footer-bottom {
  margin-top: 56px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
}

/* ============================================
   Fade-in Animation
   ============================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 初期ビューポート内の要素はアニメーションなしで最初から表示 */
.fade-in.no-anim {
  transition: none;
}

/* ============================================
   Chatbot (keep existing UX, restyled)
   ============================================ */
#chatbot {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: var(--font-jp);
}

.chatbot-toggle {
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-white);
  border: 2px solid var(--c-sea);
  border-radius: 50%;
  color: var(--c-sea);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-color), border-color var(--t-color), color var(--t-color), transform 0.25s ease, box-shadow 0.25s ease;
}

.chatbot-toggle:hover {
  transform: translateY(-2px);
}

.chatbot-toggle-img {
  width: 32px;
  height: 32px;
  display: block;
}

/* 画面最上部（フルヒーロー上）ではヘッダーと同じく透明＋白線・白アイコン */
body.at-hero-top .chatbot-toggle {
  background: transparent;
  border-color: var(--c-white);
  color: var(--c-white);
}

body.at-hero-top .chatbot-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

#chatbot.is-open .chatbot-toggle {
  display: none;
}

.chatbot-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--c-white);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: chatbot-slide-up 0.25s ease;
}

.chatbot-panel[hidden] {
  display: none;
}

@keyframes chatbot-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-header {
  background: var(--c-sea);
  color: var(--c-white);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
}

.chatbot-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  border-radius: 50%;
  transition: background var(--t);
}

.chatbot-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.chatbot-close svg {
  width: 20px;
  height: 20px;
  fill: var(--c-white);
}

.chatbot-body {
  padding: 22px;
  max-height: 60vh;
  overflow-y: auto;
}

.chatbot-greeting {
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text);
  margin-bottom: 16px;
}

.chatbot-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chatbot-back {
  background: transparent;
  border: none;
  color: var(--c-sea);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 12px;
  cursor: pointer;
  text-align: left;
}

.chatbot-back:hover {
  color: var(--c-coral);
  text-decoration: underline;
}

.chatbot-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--c-sky-pale);
  border: 2px solid var(--c-sky-light);
  color: var(--c-text);
  padding: 13px 18px;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all var(--t);
}

.chatbot-option:hover {
  background: var(--c-sea);
  color: var(--c-white);
  border-color: var(--c-sea);
}

.chatbot-option svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.chatbot-input-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--c-gray-100);
  background: var(--c-white);
}

.chatbot-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid var(--c-gray-100);
  border-radius: var(--r-pill);
  padding: 10px 18px;
  font-family: inherit;
  font-size: 14px;
  background: var(--c-gray-50);
  outline: none;
}

.chatbot-input:focus {
  border-color: var(--c-coral);
  background: var(--c-white);
}

.chatbot-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-coral);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--t);
}

.chatbot-send:hover {
  background: var(--c-sun);
}

.chatbot-send svg {
  width: 18px;
  height: 18px;
  fill: var(--c-white);
}

.chatbot-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.chatbot-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 85%;
}

.chatbot-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.chatbot-msg-bot {
  align-self: flex-start;
  align-items: flex-start;
}

.chatbot-bubble {
  padding: 11px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
}

.chatbot-msg-user .chatbot-bubble {
  background: var(--c-sea);
  color: var(--c-white);
  border-bottom-right-radius: 4px;
}

.chatbot-msg-bot .chatbot-bubble {
  background: var(--c-sky-pale);
  color: var(--c-text);
  border-bottom-left-radius: 4px;
}

.chatbot-msg-action {
  margin-top: 4px;
  width: auto;
}

/* Google Calendar Scheduling Modal */
.hur54b {
  padding: 60px 10px 10px !important;
  box-sizing: border-box !important;
}

.Xfsokf {
  top: 15px !important;
  right: 15px !important;
}

iframe[src*="calendar.google.com/calendar/appointments"] {
  border-radius: var(--r-sm);
}

/* ============================================
   画像の拡大表示（タップで全画面プレビュー）
   ============================================ */
.zoom-trigger {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: zoom-in;
}

/* 拡大表示中は背面をスクロールさせない */
body.zoom-open {
  overflow: hidden;
}

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}

.zoom-overlay[hidden] {
  display: none;
}

.zoom-overlay img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
}

/* ============================================
   Utility
   ============================================ */
.text-center {
  text-align: center;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .meals-info {
    grid-template-columns: 1fr;
  }

  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1160px) {
  .header-nav {
    display: none;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .hamburger {
    display: flex;
  }

  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 84px;
    left: 0;
    width: 100%;
    background: var(--c-white);
    padding: 18px 20px;
    gap: 6px;
    border-top: 2px solid var(--c-sky-light);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
  }

  .header-nav.open a,
  .header:not(.scrolled) .header-nav.open a {
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: var(--r-md);
    color: var(--c-text);
  }

  .vr-fab {
    gap: 5px;
    padding: 7px 12px;
    font-size: 0.92rem;
  }
}

@media (max-width: 768px) {
  .header-inner {
    grid-template-columns: 1fr auto;
    height: 68px;
    padding: 0 16px;
  }

  .header-logo .logo-image {
    width: 48px;
    height: 48px;
  }

  .header-logo .logo-text {
    display: none;
  }

  .header-nav {
    display: none;
  }

  .header-tel {
    padding: 8px;
    border: none;
    background: transparent;
  }

  .header:not(.scrolled) .header-tel {
    background: transparent;
  }

  .header-tel-num {
    display: none;
  }

  .header-tel-icon {
    width: 22px;
    height: 22px;
  }

  .header-actions {
    gap: 8px;
  }

  .header-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    background: var(--c-white);
    padding: 18px 20px;
    gap: 6px;
    border-top: 2px solid var(--c-sky-light);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
  }

  .header-nav.open a,
  .header:not(.scrolled) .header-nav.open a {
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: var(--r-md);
    /* ハンバーガー展開時は背景が白なので、 文字色は常に黒固定（影も外す） */
    color: var(--c-text);
  }

  .hamburger {
    display: flex;
  }

  .vr-fab {
    gap: 4px;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .vr-fab-icon {
    width: 17px;
    height: 17px;
  }

  .page-hero {
    height: 360px;
    margin-top: 0;
    /* スマホ幅ではカーブの深さを画面幅に比例させ、どの端末幅でも同じ波の形にする
       （536px幅 = 30.9px。デザイン確認に使った見え方をそのまま保つ比率） */
    --hero-wave-h: 5.763vw;
  }

  .page-hero-overlay {
    inset: 0;
    /* 下端の波にタイトルが被らないよう下余白を確保（波が深くなる幅では追従させる） */
    padding: 0 20px max(44px, calc(var(--hero-wave-h) * 0.61)) 0;
  }

  .page-hero-overlay h1 {
    font-size: 1.5rem;
  }

  .page-hero-overlay p {
    font-size: 0.75rem;
  }

  .section {
    padding-bottom: 50px;
  }

  .page-hero+.section,
  .page-hero+.container+.section {
    padding-top: 24px;
  }

  .section-title {
    margin-bottom: 18px;
  }

  .section-title h2 {
    font-size: 1.5rem;
  }

  .section-title-sides h2 {
    gap: 8px;
  }

  .section-title-side {
    width: 60px;
  }

  .intro,
  .about-content {
    flex-direction: column;
    gap: 24px;
  }

  .intro-img,
  .about-content img {
    flex: auto;
    width: 100%;
    height: 220px;
  }

  .about-content img {
    height: 220px;
  }

  .feature-image {
    height: 180px;
  }

  .feature-card>h3,
  .feature-card>p {
    padding: 0 22px;
  }

  .policy-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 22px;
  }

  .policy-number {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    font-size: 1rem;
  }

  .facility-info {
    padding: 28px 22px;
  }

  .facility-info dl {
    grid-template-columns: 1fr;
  }

  .facility-info dt {
    padding-bottom: 4px;
    border-bottom: none;
  }

  .facility-info dd {
    padding-top: 4px;
  }

  .map-wrap iframe {
    height: 300px;
  }

  .streetview-wrap iframe {
    height: 300px;
  }

  .contact-card {
    padding: 32px 22px;
  }

  .insta-embed-item {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }

  .insta-embed-item iframe {
    height: 420px;
  }

  .footer {
    padding: 8px 0 0;
    margin-top: 0;
  }

  .section:has(+ .footer.footer) {
    padding-bottom: 130px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 32px;
  }

  #chatbot {
    right: 16px;
    bottom: 16px;
  }

  .chatbot-toggle {
    width: 46px;
    height: 46px;
  }

  .chatbot-toggle-img {
    width: 28px;
    height: 28px;
  }

  .chatbot-panel {
    width: calc(100vw - 32px);
  }
}

/* ============================================
   TOP 導入メッセージ ＋ ページ誘導ティーザー
   （PDFデザイン案3 1ページ目に準拠）
   ============================================ */
/* ---- ティーザー ---- */
/* 色背景は写真とは無関係に「クリーム→緑→ペーチ」と連続で流れる。
   各 body は上半分＝上の色、下半分＝次の色を波状に重ねる二トーン構成。
   写真は矩形のまま、その上下で色が連続する（PDF準拠）。 */
/* ==== teaser 本文背景 ====
   保育=白地のみ。食=緑 / 子育て=クリーム は ::before ではなく
   img.teaser-shape をセクション内に絶対配置して敷く（下記参照）。 */
/* 食・子育て：カラーシェイプを SVG 要素(img)として配置し、
   セクション上端（写真上端）基準の top で位置を調整する。
   シェイプは写真の「後ろ」に置く（写真は隠さない）。
   重なり順： シェイプ(z:1) < 写真/タイトル(z:2) < 本文テキスト(z:3)。
   top にマイナスを指定すると、シェイプの波形上端が見出し写真の上
   （前セクションの白地側）へはみ出す。 */
/* 角の丸みは全セクション共通で統一する */
/* PCでは写真を左右交互にずらして、リズムのある配置にする */
.teaser-shape {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 1;
  /* 写真より後ろ、セクション背景より前 */
  pointer-events: none;
}

/* top / height は色（セクション）ごとに個別調整する */
/* 詳細ボタン：紫（子育て支援用） */
.btn-plum {
  color: #9b7fb0;
  border-color: #9b7fb0;
}

.btn-plum:hover {
  background: #9b7fb0;
  color: var(--c-white);
}

/* PDF準拠の「詳細はこちら」ボタン：塗りピル＋白文字＋文字下の点線＋白い鳥アイコン
   ※ サイズをコンパクト化し、.teaser-cta で右寄せ配置 */
/* 文字。下辺に白い点線（ドットリーダー） */
/* 右端の鳥アイコン（白）。インラインSVGでボタンの文字色(currentColor)を継承 */
/* 子育て支援：紫 */
/* 一時預かり保育（ラベンダーボタン直後のsub）の上に余白 */
/* ============================================
   保育の想いページ（デザイン案3・2ページ目レイアウト）
   ============================================ */
/* 白セクション（導入・1・3・保育理念）はトップと同じ白 */
/* section-bg の波（::before/::after）の切り欠き色を隣接する温白色に合わせ、
   純白帯が浮かないようにする */
/* ---- 導入（詩） ---- */
/* ---- 全幅画像バンド ---- */
/* ---- 物語セクション（1〜3） ---- */
/* ---- 保育理念 ---- */
/* ---- 生きる力を育む３つのこころ ---- */
/* PC：3つのこころを横並び */
.hoiku-heart {
  margin-bottom: 44px;
}

.hoiku-heart:last-child {
  margin-bottom: 0;
}

.hoiku-heart h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #555555;
  text-align: center;
  margin-bottom: 18px;
}

.hoiku-heart p {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
  color: #4a4a4a;
  text-align: left;
}

/* 入園案内「保護者の皆様へ」：PDF準拠で見出し・本文とも左寄せ（中央カラム内） */
@media (max-width: 767px) {
  .hoiku-heart h3 {
    font-size: 1.18rem;
  }
}