/*
Theme Name: 慈光保育園 (jikou)
Theme URI: https://jikou-demo.koyama-hp.com/
Author: koyama-hp
Description: 社会福祉法人 慈光会「慈光保育園」オリジナルテーマ。水彩タッチの温かいデザイン（2026年8月 新デザイン版）。
Version: 4.12.6
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jikou
*/

/* ==========================================================================
   慈光保育園 — 共通スタイル
   .dc.html（Omelette Design Component）から変換。
   - レイアウトの大半は各ページのインラインstyleのまま（元の見た目を維持するため）
   - ここにあるのは @keyframes / @media / 疑似状態（:hover, :focus, ::after）
   - ★ メディアクエリはクラス名/ID名で当てているので、
     .hero-deco / #admission-inner / .hero-photo--small などの名前は変更しないこと
   ========================================================================== */

/* ---------- 1. ベース ---------- */
* { box-sizing: border-box; }
body { margin: 0; background: #FCF5E8; }
a { text-decoration: none; color: inherit; }

/* ---------- 2. keyframes ---------- */
@keyframes floaty     { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes floaty2    { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-9px) rotate(2deg); } }
@keyframes heroSway   { 0%,100%{ transform:translateY(0) rotate(-1.1deg); } 50%{ transform:translateY(-10px) rotate(1.1deg); } }
@keyframes heroFade   { 0%{ opacity:0; transform:scale(1.06); } 5%{ opacity:1; } 25%{ opacity:1; transform:scale(1); } 30%{ opacity:0; } 100%{ opacity:0; transform:scale(1.06); } }
@keyframes heroFade2  { 0%{ opacity:0; transform:scale(1.05); } 6%{ opacity:1; } 50%{ opacity:1; transform:scale(1); } 56%{ opacity:0; transform:scale(1); } 100%{ opacity:0; transform:scale(1.05); } }
@keyframes parade     { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hop        { 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-13px) rotate(2deg); } }
@keyframes sway       { 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(4deg); } }
@keyframes spin       { from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes wobbleSpin { 0%{ transform:rotate(-12deg) scale(1); } 50%{ transform:rotate(12deg) scale(1.08); } 100%{ transform:rotate(-12deg) scale(1); } }

/* ==========================================================================
   3. 共通ヘッダー（header.php）
   ========================================================================== */
.site-header * { box-sizing: border-box; }

@media (max-width:1280px) {
  .site-nav { display:none !important; }
  .site-hamburger { display:flex !important; }
  .site-header-inner { padding:0 20px !important; min-height:76px !important; }
}
@media (max-width:480px) {
  .site-tel-text { display:none; }
  .site-header-inner { padding:0 14px !important; gap:8px !important; min-height:68px !important; }
  .site-logo { gap:8px !important; }
  .site-logo-img { width:40px !important; height:40px !important; }
  .site-logo-name { font-size:18px !important; letter-spacing:.04em !important; }
  .site-logo-roman { display:none !important; }
  .site-actions { gap:8px !important; }
  .site-tel-btn { padding:0 10px !important; min-height:44px !important; }
  .site-tel-icon { width:24px !important; height:24px !important; }
  .site-ig-img { width:38px !important; height:38px !important; }
  .site-ig-link { min-height:44px !important; min-width:44px !important; }
}
@media (max-width:359px) {
  .site-logo-kanji { display:none !important; }
  .site-logo-name { font-size:16px !important; }
}

/* ヘッダー：疑似状態（旧 style-hover / style-focus） */
.site-nav-link:hover {
  background:#FBE9D2 !important;
  transform:translateY(-3px) !important;
  box-shadow:0 6px 14px rgba(122,92,68,.16) !important;
}
/* ドロップダウンが開いているあいだの親リンク（旧 m.openBg） */
.site-nav-item.is-open > .site-nav-link { background:#FBE9D2 !important; }

.site-subnav { display:none; }
.site-nav-item.is-open > .site-subnav { display:block; }

.site-subnav-link:hover { background:#FFF1EF !important; }
.site-subnav-link:focus-visible {
  outline:2px solid #F5C2BC !important;
  outline-offset:2px !important;
  background:#FFF1EF !important;
}

.site-tel-btn:hover {
  background:#6FA862 !important;
  color:#ffffff !important;
  transform:translateY(-3px) !important;
  box-shadow:0 8px 18px rgba(111,168,98,.4) !important;
}
.site-ig-link:hover { transform:translateY(-2px) !important; }

/* ハンバーガー：開閉でアイコンを差し替え */
.site-hamburger .icon-close { display:none; }
.site-header.is-menu-open .site-hamburger .icon-open  { display:none; }
.site-header.is-menu-open .site-hamburger .icon-close { display:block; }

/* モバイルメニュー：既定は非表示。1280px超では絶対に出さない */
.mobile-menu-panel { display:none; }
.site-header.is-menu-open .mobile-menu-panel { display:flex; }
@media (min-width:1281px) { .mobile-menu-panel { display:none !important; } }

/* --- モバイルメニューのアコーディオン ---
   サブメニューは既定で閉じておき、シェブロンのボタンで開閉する。
   一度に開くのは1つだけ（開閉は js/main.js）。 */
.mobile-subnav { display: none; }
.mobile-nav-group.is-sub-open .mobile-subnav { display: flex; }
.mobile-nav-group.is-sub-open .mobile-sub-chevron { transform: rotate(180deg); }
.mobile-sub-toggle:focus-visible { outline: 3px solid #6B4F3A; outline-offset: -3px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) {
  .mobile-sub-chevron { transition: none !important; }
}

/* ==========================================================================
   4. 共通フッター（footer.php）
   ========================================================================== */

/* ★ 2つのリンク列のラッパー。PCでは display:contents にして、
   子（2列）を .footer-grid の 1.2fr 1fr 1fr にそのまま並べる＝3列レイアウトを維持。
   600px以下でだけ実体のある2列グリッドとして働かせ、メニューを2列で読ませる。 */
.footer-cols-wrap { display: contents; }

/* --- 860px以下：3列 → 2列（ブランドは全幅） --- */
@media (max-width:860px) {
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:26px 20px !important; padding:32px 0 20px !important; }
  .footer-brand { grid-column:1 / -1; }
}

/* --- 600px以下：PCの20px/60pxのままだと電話番号がボタンからはみ出すため縮める --- */
@media (max-width:600px) {
  .footer-tel { width:100%; justify-content:center; height:56px !important; padding-inline:16px !important; font-size:17px !important; letter-spacing:0 !important; white-space:nowrap; }
  .footer-tel img { width:24px !important; height:24px !important; }
  .footer-actions { gap:14px !important; }
  .footer-ig span { font-size:16px !important; }
  .footer-ig img { width:36px !important; height:36px !important; }
  .footer-grid { grid-template-columns:1fr !important; gap:22px !important; }
  .footer-cols-wrap { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .footer-bottom { padding:22px 0 !important; }
}

/* --- 360px以下：さらに詰める --- */
@media (max-width:360px) {
  .footer-tel { font-size:15.5px !important; padding-inline:12px !important; gap:8px !important; }
}
.footer-tel-btn:hover { background:#F4FAEE !important; }
.footer-tel-btn:focus-visible { outline:2px solid #fff !important; outline-offset:2px !important; }
.footer-ig-link:hover { transform:translateY(-1px) !important; }
.footer-link:hover { transform:translateX(4px) !important; text-decoration:underline !important; }
.footer-link:focus-visible { outline:2px solid #fff !important; outline-offset:2px !important; }
.footer-privacy:hover { text-decoration:underline !important; }
.footer-privacy:focus-visible { outline:2px solid #fff !important; outline-offset:2px !important; }

/* ==========================================================================
   5. トップページ（index.php）
   ========================================================================== */

/* --- ヒーロー --- */
.hero-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:center; }
@media (min-width:1200px) { .hero-grid { grid-template-columns:minmax(360px,0.8fr) minmax(560px,1.2fr); gap:20px; } }
.hero-visual { position:relative; }
@media (max-width:1199px) {
  .hero-visual { display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"img img" "p1 p2"; gap:14px; }
  .hero-visual > img.hero-main-img { grid-area:img; width:100%; max-width:640px; margin:0 auto; }
  .hero-photo--small { grid-area:p1; }
  .hero-photo--large { grid-area:p2; }
  .hero-photo { position:relative !important; width:100% !important; max-width:100% !important; min-width:0; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; animation:none !important; aspect-ratio:4/3 !important; }
}

/* ヒーローのモバイル余白。★ 上の (max-width:1199px) より後、(max-width:390px) より前に
   置くこと。1199px側の .hero-main-img の margin:0 auto を上書きする必要があるため、
   順序を入れ替えると余白が戻る。 */
@media (max-width:767px) {
  /* 挿絵は radial マスクで周囲がフェードするため、素の余白ぶんを詰めて縦の空きを抑える */
  .hero-section { padding-top:10px !important; }
  .hero-grid { gap:4px !important; }
  .hero-copy { padding-top:6px; }
  .hero-copy p { margin-bottom:20px !important; }
  .hero-visual { gap:6px !important; }
  /* pointer-events:none は、はみ出した挿絵がCTAボタンのタップを奪わないようにするため */
  .hero-visual > img.hero-main-img { margin-top:-8px; margin-bottom:-6px; max-width:520px !important; pointer-events:none; }
  .hero-photo { margin-top:0 !important; }
}

@media (max-width:390px) {
  .hero-photo--small { display:none; }
  .hero-visual { grid-template-areas:"img img" "p2 p2" !important; }
  .hero-visual > .hero-photo--large { width:min(100%, 300px) !important; margin-inline:auto !important; }
}
.hero-cta-btn { display:inline-block; border-radius:100px; transition:transform .22s ease, filter .22s ease; }
.hero-cta-btn img { transition:transform .22s ease; }
.hero-cta-btn:hover, .hero-cta-btn:focus-visible { transform:translateY(-3px); }
.hero-cta-btn:hover img, .hero-cta-btn:focus-visible img { transform:scale(1.04); }
.hero-cta-btn:active img { transform:scale(0.98); filter:brightness(.94); }
.hero-cta-btn:focus-visible { outline:3px solid #6B4F3A; outline-offset:4px; }
/* ★ img側の width は !important 必須。
   .dc.html のCTA画像はインラインで width:auto を持っており、
   インラインstyle は クラスセレクタより強いため !important が無いと負ける。
   その場合 height:auto !important だけが効いて画像が原寸(956x348)まで
   膨らみ、スマホで巨大化する。 */
@media (max-width:767px) {
  .hero-cta-btn { flex:1 1 0; max-width:210px; }
  .hero-cta-btn img { width:100% !important; max-width:100% !important; height:auto !important; min-height:44px; }
}
@media (max-width:1024px) { .hero-deco { display:none !important; } }

/* --- パレード（動物の行進） --- */
.parade-strip { height:clamp(76px,9.4vw,132px); }
.parade-track { display:flex; width:max-content; }
.parade-set { display:flex; align-items:flex-end; justify-content:space-around; min-width:100vw; gap:clamp(16px,3vw,52px); padding:0 clamp(8px,1.5vw,26px); }

/* --- メニューカード --- */
.menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1040px; margin:0 auto; }
@media (max-width:1024px) { .menu-grid { grid-template-columns:repeat(2,1fr); gap:20px; max-width:720px; } }
@media (max-width:600px)  { .menu-grid { grid-template-columns:1fr; gap:12px; max-width:420px; } .menu-card { display:grid !important; grid-template-columns:78px 1fr; column-gap:14px; row-gap:3px; align-items:center; padding:12px 14px !important; } .menu-card-circle { grid-column:1; grid-row:1 / span 2; width:78px !important; margin:0 !important; } .menu-card-head { grid-column:2; grid-row:1; } .menu-card-desc { grid-column:2; grid-row:2; margin:0 !important; } }
.menu-card { transition:transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease; }
.menu-card:hover, .menu-card:focus-visible { transform:translateY(-4px); box-shadow:0 14px 26px rgba(160,120,75,.22); }
.menu-card:active { transform:translateY(-1px); }
.menu-card:focus-visible { outline:3px solid #6B4F3A; outline-offset:3px; }
.menu-card-circle { transition:transform .28s ease; }
.menu-card:hover .menu-card-circle, .menu-card:focus-visible .menu-card-circle { transform:scale(1.03); }
.menu-card-label { transition:color .28s ease; }
/* カードごとの色は index.php 側で --hover-bg / --hover-border / --accent を渡している */
.menu-card:hover, .menu-card:focus-visible {
  background: var(--hover-bg) !important;
  border-color: var(--hover-border) !important;
}
.menu-card:hover .menu-card-label,
.menu-card:focus-visible .menu-card-label { color: var(--accent) !important; }

@media (prefers-reduced-motion: reduce) {
  .menu-card, .menu-card-circle, .menu-card-label, .hero-cta-btn, .hero-cta-btn img, .hero-photo { transition:none !important; animation:none !important; }
}

/* --- お知らせ / 配布物 --- */
@media (max-width:860px) { #news-grid { grid-template-columns:1fr !important; gap:34px !important; } }
.news-item:hover { background:#FFF9F1 !important; }
.doc-item:hover  { background:#FFF9F1 !important; }

/* --- 「くわしく見る →」リンク --- */
.more-link:hover { background:#5E8A46 !important; }

/* --- 取り組みカード --- */
.activity-card:hover { transform:translateY(-5px) !important; box-shadow:0 10px 20px rgba(122,92,68,.14) !important; }

/* --- 入園案内バナー / アクセス --- */
@media (max-width:1100px) {
  #admission-inner { flex-direction:column !important; }
  #admission-inner > div:first-child { flex:none !important; width:100% !important; max-width:420px !important; }
  #admission-inner > div:last-child  { flex:none !important; width:100% !important; max-width:560px !important; }
  #access-grid { grid-template-columns:1fr !important; }
}
.admission-tel-btn:hover {
  transform:translateY(-2px) !important;
  background:#FFEBA8 !important;
  box-shadow:0 6px 14px rgba(107,79,58,.1) !important;
}
.admission-tel-btn:focus-visible { outline:2px solid #E6C264 !important; outline-offset:2px !important; }
.admission-link-btn:hover { background:rgba(124,170,114,.1) !important; }
.admission-link-btn:hover .arrow-icon { transform:translateX(3px) !important; }
.access-tel-link:hover { color:#4F8D46 !important; }
.access-tel-link:focus-visible { outline:2px solid #C9E0B4 !important; outline-offset:3px !important; border-radius:8px !important; }

/* --- Google Maps 経路ボタン --- */
.map-route-btn { background-color:#FCFBF4; border:2px solid #4F8D46; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.map-route-btn:focus-visible { outline: 3px solid rgba(79,141,70,.35); outline-offset: 4px; }
@media (hover: hover) {
  .map-route-btn:hover { background-color:#EEF6E9; border-color:#3F7E38; color:#3F7E38; box-shadow:0 5px 14px rgba(79,141,70,.12); transform:translateY(-1px); }
  .map-route-btn:hover .map-pin-icon, .map-route-btn:hover .external-link-icon { stroke:#3F7E38; }
  .map-route-btn:hover .map-route-text { color:#3F7E38; }
}
.map-route-btn:active { background-color:#E4F0DF; box-shadow:none; transform:translateY(0); }

/* --- 1日の流れ：中央レールへ伸びる接続線（旧 style-after） --- */
.scene-stub--left::after  { content:''; position:absolute; top:20px; right:-30px; width:30px; height:2px; background:#E9DAC5; }
.scene-stub--right::after { content:''; position:absolute; top:20px; left:-30px;  width:30px; height:2px; background:#E9DAC5; }

/* --- フッターまわりのレスポンシブ（元 index.dc.html の helmet より） --- */
@media (max-width: 720px) {
  #footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; padding: 32px 0 !important; }
  #footer-grid a, #footer-grid p { text-align: left !important; }
  #footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
}

/* --- 1日の流れ（タイムライン）：トップページと園の生活ページの共通ルール ---
   ★ 720px ではなく 900px。3カラムのグリッドが 334+120+334+gap60 = 848px 固定のため、
     721〜847px ではみ出していた。
   ★ トップページ（front-page.php）と園の生活（page-life.php）の両方で同じ markup
     （.life-row / .life-time / .life-dash / .life-side / data-age）を使うので
     スコープは付けない。片方だけ変えたくなったときは body クラスで分けること。 */
@media (max-width: 900px) {
  /* 中央レール・年齢見出しは1カラムでは意味を持たないため隠し、各項目に年齢タグを付ける */
  #life-age-labels, #life-rail { display: none !important; }
  #life-timeline { max-width: 520px; margin-inline: auto; }
  .life-row { grid-template-columns: 1fr !important; row-gap: 12px !important; margin-bottom: 34px !important; align-items: stretch !important; }
  /* 時刻バッジをカードの上へ */
  .life-time { order: -1; margin-top: 0 !important; justify-content: flex-start !important; }
  /* バッジ両脇の接続線。インラインstyleの属性セレクタでは serialization の差で
     外れるため、markup 側に .life-dash を付けてクラスで隠している */
  .life-dash { display: none !important; }
  .life-side { width: 100% !important; text-align: left !important; }
  .life-side::after { display: none !important; }
  .life-side::before {
    content: attr(data-age); display: block; width: fit-content; margin: 0 0 8px;
    font-family: 'Zen Maru Gothic'; font-weight: 900; font-size: 12px; color: #fff;
    padding: 3px 11px; border-radius: 100px; letter-spacing: .02em;
  }
  .life-side--02::before { background: #F0938A; }
  .life-side--35::before { background: #5FA8BE; }
  p.life-side { padding: 14px 16px; border-radius: 20px; }
  p.life-side--02 { background: #FDF0EC; }
  p.life-side--35 { background: #EDF7F8; }
  #life-timeline .life-photo { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 4/3 !important; margin: 0 auto !important; }
  #life-timeline .scene-stub::after { display: none !important; }
}

/* --- 720px以下：園の生活・年間行事・入園案内・アクセス --- */
@media (max-width: 720px) {
  #yearly-events > div:nth-of-type(1) { grid-template-columns: 1fr !important; }
  #season-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; }
  #life-heading { font-size: 25px !important; gap: 9px !important; margin: 0 0 40px !important; }
  #life-heading img { width: 35px !important; height: 35px !important; }
  #admission-inner { flex-direction: column !important; gap: 26px !important; }
  #admission-inner > div:first-child { flex: none !important; width: 100% !important; max-width: 340px !important; }
  #admission-inner > div:last-child { flex: none !important; width: 100% !important; padding: 26px !important; }
  #admission-inner > div:first-child img[src*="butterfly"] { width: 50px !important; right: -12px !important; bottom: -14px !important; }
  #access-grid { grid-template-columns: 1fr !important; }
  #access-grid > div:first-child { order: 2 !important; }
  #access-grid > div:last-child { order: 1 !important; }
  #admission-inner > div:last-child p { text-align: left !important; }
  .season-illust { width: 90px !important; margin-top: -22px !important; }
  .season-deco { width: 118px !important; left: -6px !important; bottom: -6px !important; }
}

/* ==========================================================================
   6. 下層ページ共通（page-*.php）
   ページごとの背景は header.php の .page-wrap に body クラスで当てる。
   ========================================================================== */

/* ページ内アンカー（/about/#aisatsu など）で見出しが sticky ヘッダーに隠れないように。
   ★ section だけでなく全ての id 付き要素に必要。
     #life-heading(h3) / #yearly-events(div) / #newsletter-card(div) など
     section 以外もメニューのリンク先になっている。
   ★ モバイルはヘッダーが約76pxなので 80px。approach の各セクションは
     インラインで scroll-margin-top:120px を持つため !important で上書きする。 */
[id] { scroll-margin-top: 132px; }   /* PCヘッダー実測121px + 余白11px */
@media (max-width: 1280px) {
  [id] { scroll-margin-top: 80px !important; }
}

/* 動きを減らす設定のユーザーには全アニメーションを止める
   （元 .dc.html は各ページの helmet で * に対して指定していた） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* 下層ページ共通のタイトル帯 */
.subpage-hero-band { height: 280px; }
@media (max-width: 860px) { .subpage-hero-band { height: 220px !important; } }

/* パンくずの「ホーム」 */
.crumb-home:hover { color:#6FA862 !important; }

/* 入園・見学CTA（下層ページ共通コンポーネント） */
.cta-tel-btn:hover   { background:#FCE8AE !important; }
.cta-ghost-btn:hover { background:rgba(124,170,114,.08) !important; }

/* ==========================================================================
   7. 園の紹介（page-about.php）
   元 about.dc.html の <helmet> より。★ クラス名を変えるとレスポンシブが崩れる
   ========================================================================== */

body.page-about .page-wrap {
  background: #FCF5E8 url('assets/deco/paper-texture-cream.png') repeat !important;
  background-size: 520px !important;
  overflow-x: clip !important;
}

/* 概要テーブル内のボタン */
.ov-btn-map:hover { background:#DCEEF3 !important; }
.ov-btn-tel:hover { background:#E3F0DA !important; }

/* 情報公開のPDF行 */
.doc-link:hover { background:#F4FAEE !important; }

/* --- 「保育目標」パネルのうさぎ / 「方針・特色」パネルのクマ ---
   うさぎの元データは top:279px / left:919px の固定px指定で、パネル幅 min(1500px,82vw) が
   縮むと本文に重なる・画面外へ消えるという問題があった。テンプレート側で
   right:2% / bottom:4% のパネル右下基準へ変更してある（page-about.php）。
   ★ .dc.html 側は今も top:279px / left:919px のままなので、再生成するときは要注意。
   幅ごとの扱い:
     〜860px      … 本文の下へ回り込ませる（position:relative）
     861〜1280px  … 幅を絞ってパネル内に収める（下の min-width:861px ブロック）
     1281px〜     … インラインの right:2% / bottom:4% のまま */

/* この帯ではクマの最小幅210px・うさぎの最小幅220pxがパネル幅に対して大きく、本文に重なる */
@media (min-width: 861px) and (max-width: 1100px) {
  .policy-bear { width: clamp(140px, 17vw, 180px) !important; top: 86% !important; left: -2% !important; }
}
/* ★ うさぎだけ 1280px まで絞る。1100px で解除すると幅が 190px→220px に戻り、
   1101px 付近で本文（.panel-text）と水平方向に8px重なるため。
   1281px 以上はインラインの right:2% で十分な余白が取れる（実測27px）。 */
@media (min-width: 861px) and (max-width: 1280px) {
  .goal-rabbit { width: clamp(150px, 18vw, 190px) !important; }
}

@media (max-width: 1100px) and (min-width: 861px) {
  .panel-heading { font-size: 22px !important; }
  .panel-copy .panel-text { font-size: 15px !important; }
  .panel-copy .lead-text  { font-size: 16px !important; }
  .panel-copy .body-text  { font-size: 15px !important; }
}

@media (max-width: 860px) {
  #jikou-about-wave svg { height: clamp(36px,16vw,70px) !important; }
  /* ガーランドは幅が足りず上下に回り込んでしまうため、見出しの上に1つだけ残して大きく見せる */
  #jikou-rinen-head { flex-wrap: wrap; gap: 8px !important; }
  #jikou-rinen-head img { width: 190px !important; max-width: 58% !important; }
  #jikou-rinen-head img:last-of-type { display: none !important; }
  #jikou-rinen-head h2 { flex: 1 0 100% !important; white-space: normal !important; }

  .ai-greet-grid { grid-template-columns: 1fr !important; }
  .ai-greet-grid > div:last-child { order: -1; max-width: 220px; margin: 0 auto 20px; }
  .ai-gallery-grid { grid-template-columns: 1fr !important; }
  .ai-gallery-grid > div { width: 100% !important; }

  .ai-ov-table { display: none !important; }
  .ai-ov-list  { display: flex !important; }

  /* 年月・丸・本文の3カラムは狭い画面で本文が潰れるため、年月を本文の上へ出し、丸と縦線は左に残す */
  .ai-hist-row { grid-template-columns:20px 1fr !important; }
  .ai-hist-row > div:first-child {
    grid-column:2; grid-row:1;
    text-align:left !important; padding:0 0 6px 14px !important; font-size:13.5px !important;
  }
  .ai-hist-row > div:nth-child(2) { grid-column:1; grid-row:1 / span 2; }
  .ai-hist-row > div:nth-child(2) > span:first-child { margin-top:2px !important; }
  .ai-hist-row > div:last-child { grid-column:2; grid-row:2; padding:0 0 16px 14px !important; }
  .ai-hist-row > div:last-child p { padding:12px 16px !important; font-size:14.5px !important; }

  .policy-row, .goal-row {
    width: 100% !important; margin-left: 0 !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    padding: 8px 0 44px !important;
  }
  .panel-visual { width: 100% !important; margin-left: 0 !important; aspect-ratio: auto !important; }
  .panel-background { width: 110% !important; left: -5% !important; object-fit: fill !important; }
  /* ★ 幅基準だと縦長の .policy-photo が高さ500px近くまで伸びるため、高さ基準にしている */
  .policy-photo, .goal-photo {
    position: relative !important; left: auto !important; right: auto !important; top: auto !important;
    display: block !important; width: auto !important; max-width: 74% !important; max-height: 300px !important; height: auto !important;
    margin: -18px auto 0 !important; z-index: 2 !important; order: 1;
  }
  /* 園長の方針の縦長写真はスマホでは出さない（保育目標の横長 .goal-photo は残す）
     ★ 上の共有ルールより「後」に置くこと。どちらも !important で詳細度が同じ(0,1,0)のため、
       前に置くと後勝ちで display:block に負けて消えない。 */
  .policy-photo { display: none !important; }
  .panel-copy {
    position: relative !important; left: auto !important; top: auto !important; width: auto !important;
    padding: 46px 26px clamp(78px, 8vw, 94px) !important; gap: 14px !important;
  }
  .panel-heading {
    font-size: clamp(22px, 6vw, 30px) !important; padding: 10px 20px !important;
    white-space: normal !important; text-align: center !important; line-height: 1.35 !important;
  }
  .panel-copy .panel-text { font-size: 16px !important; }
  .panel-copy .lead-text  { font-size: 17px !important; }
  .panel-copy .body-text  { font-size: 15px !important; }
  /* 「園の概要」上の余白を詰める（下の64pxは維持） */
  body.page-about .gaiyou-section { padding-top: 32px !important; }
  /* 住所・電話の値とインラインボタンの間に余白（縦積み時） */
  body.page-about .ov-inline-btn { display:flex !important; margin:10px 0 0 !important; width:fit-content; }
  /* 見学CTAの2ボタンはスマホで横幅いっぱいに揃える（PCは280px固定） */
  body.page-about #admission .cta-tel-btn,
  body.page-about #admission .cta-ghost-btn { width:100% !important; }
  /* クマとうさぎは絶対配置のままだと本文に重なるため、本文の下へ回り込ませる */
  .policy-bear, .goal-rabbit {
    position: relative !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    display: block !important; width: min(148px, 40%) !important; height: auto !important;
    margin: -14px auto -10px !important;
  }
  .policy-bear  { margin-right: 10% !important; margin-left: auto !important; }
  .goal-rabbit  { margin-left: 10% !important; margin-right: auto !important; }
}

/* ==========================================================================
   8. 園の生活（page-life.php）
   タイムラインのルールは §5 の @media (max-width:900px) に統合済み
   （トップページと同じ markup・同じ内容のため）。
   ここに残すのは、トップページと挙動が違うものだけ。
   ★ テンプレート側で $body_class = 'page-life' を設定すること。
   ========================================================================== */

@media (max-width: 900px) {
  /* 季節カードはトップpage では 720px で1列（§5）。園の生活ページだけ 900px で1列にする */
  body.page-life #season-grid { grid-template-columns: 1fr !important; }
}
/* ==========================================================================
   9. 園の取り組み（page-approach.php）
   approach.dc.html の <helmet> を移植したもの。
   ★ body.page-approach でスコープしている。.panel-heading は about でも
     使っているため、スコープを外すと about の値パネルに影響する。
   ★ @keyframes floaty / sway は §2 の既存定義を使う（approach版は floaty の
     振れ幅が -10px と 2px だけ違うが、再定義するとトップページに影響するため）。
   ★ テンプレート側で $body_class = 'page-approach' を設定すること。
   ========================================================================== */

body.page-approach .page-wrap { background:#FFF9EE !important; min-height:100vh; }

/* 慈光の保育：900px以下の写真スライドショー（2枚を9秒周期でクロスフェード） */
@keyframes jikoSlideFade { 0%,42% { opacity:0; } 50%,92% { opacity:1; } 100% { opacity:0; } }
body.page-approach .jiko-slide--2 { animation: jikoSlideFade 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .jiko-slide--2 { animation:none !important; opacity:0 !important; }
}

/* ★ 装飾イラストは z-index:1〜4 を持つのに本文は通常フロー（z-index:auto）なので、
   位置指定された装飾のほうが必ず上に描画され、文字が読めなくなる箇所があった。
   本文側を position:relative + z-index:5 で持ち上げて解消する。
   （実測で確認した被害箇所: 「ほかにも、こんな教室があります」は全幅で不可視、
     きずなの説明文は375pxでキツネに、「食育の取り組み」は768〜1920pxで写真に隠れていた） */
body.page-approach .lessons-more-heading { position: relative; z-index: 5; }
body.page-approach .lessons-intro__grid .initiative-panel__text { position: relative; z-index: 5; }
body.page-approach #kizuna .initiative-panel__text { position: relative; z-index: 5; }
/* きずなのキツネは、狭い幅だと本文がキツネの絵の上に乗って読みづらくなる。
   z-index を上げるだけでは可読性が確保できないため、620px以下では隠す。 */
@media (max-width: 620px) {
  body.page-approach #kizuna .initiative-panel__animal { display: none !important; }
}
body.page-approach #shokuiku .shoku-block > h3 { position: relative; z-index: 5; }

/* パンくず／CTA（下層共通クラスに寄せたもの） */
body.page-approach .cta-lift-btn:hover { transform:translateY(-3px); }

html { scroll-behavior: smooth; }
body.page-approach .nav-card {
    display:flex; align-items:center; gap:13px; min-height:92px; padding:16px 18px; border-radius:28px;
    text-decoration:none; font-family:'Zen Maru Gothic'; font-weight:700; font-size:clamp(16px,1.15vw,19px);
    line-height:1.45; letter-spacing:.02em; color:#6B4F3A; border:2px solid rgba(107,79,58,.08);
    box-shadow:0 6px 0 rgba(107,79,58,.08), 0 10px 20px rgba(107,79,58,.07);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
/* 行のstretchで、隣カードのラベルが長い分だけ短いカードの中身が上下に間延びしていた */
body.page-approach .navigation-grid { align-items: start; }
body.page-approach .nav-card__icon { width:52px; height:52px; flex-shrink:0; border-radius:50%; background:#FFF9EE; display:grid; place-items:center; }
body.page-approach .nav-card__icon img, body.page-approach .nav-card__icon svg { transition: transform .25s ease; }
body.page-approach .nav-card__arrow { margin-left:auto; flex-shrink:0; transition: transform .25s ease; }
body.page-approach .nav-card--hoiku:hover { background:#F6CEC9; border-color:rgba(200,105,90,.35); }
body.page-approach .nav-card--lessons:hover { background:#D2E5CA; border-color:rgba(95,131,87,.35); }
body.page-approach .nav-card--shokuiku:hover { background:#F9E0A0; border-color:rgba(181,121,36,.35); }
body.page-approach .nav-card--kizuna:hover { background:#CFE4EB; border-color:rgba(91,130,144,.35); }
body.page-approach .nav-card:hover { transform:translateY(-3px); box-shadow:0 8px 0 rgba(107,79,58,.10), 0 14px 26px rgba(107,79,58,.10); }
body.page-approach .nav-card:hover .nav-card__icon img, body.page-approach .nav-card:hover .nav-card__icon svg { transform:scale(1.06); }
body.page-approach .nav-card:hover .nav-card__arrow { transform:translateX(4px); }
body.page-approach .nav-card:active { transform:translateY(0); box-shadow:0 3px 0 rgba(107,79,58,.08), 0 6px 12px rgba(107,79,58,.06); }
body.page-approach .nav-card:focus-visible { outline:3px solid #6B4F3A; outline-offset:4px; }
body.page-approach .nav-card.is-active { box-shadow:0 0 0 4px rgba(255,255,255,.75), 0 8px 18px rgba(107,79,58,.10); }
body.page-approach .nav-card--hoiku.is-active { border-color:#C8695A; }
body.page-approach .nav-card--lessons.is-active { border-color:#5F8357; }
body.page-approach .nav-card--shokuiku.is-active { border-color:#B57924; }
body.page-approach .nav-card--kizuna.is-active { border-color:#5B8290; }
@media (max-width: 1024px) {body.page-approach .navigation-grid { grid-template-columns:repeat(2,1fr) !important; gap:14px !important; width:calc(100% - 48px) !important; }
  }
@media (max-width: 600px) {body.page-approach .navigation-grid { gap:10px !important; width:calc(100% - 28px) !important; }body.page-approach .nav-card { min-height:88px; padding:12px; font-size:14px; }body.page-approach .nav-card__icon { width:44px; height:44px; }body.page-approach .nav-card__icon img, body.page-approach .nav-card__icon svg { width:38px !important; height:38px !important; }body.page-approach .nav-card__arrow { width:15px !important; height:15px !important; }
  }
@media (prefers-reduced-motion: reduce) {html { scroll-behavior:auto; }body.page-approach .nav-card, body.page-approach .nav-card__arrow, body.page-approach .nav-card__icon img, body.page-approach .nav-card__icon svg { transition:none !important; transform:none !important; }
  }
@media (max-width: 860px) {body.page-approach .kizuna-info-grid { grid-template-columns:1fr !important; }body.page-approach .kizuna-photo-collage { min-height:0 !important; max-width:420px !important; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:14px; }body.page-approach .kizuna-collage-photo { position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:100% !important; }body.page-approach .kizuna-collage-photo--b, body.page-approach .kizuna-collage-photo--c { display:none !important; }
  }
@keyframes popIn { 0%{ transform:translateY(14px) scale(.96); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes fadeIn { from{ opacity:0; } to{ opacity:1; } }
body.page-approach .initiative-panel__content { display:flex; flex-direction:column; }
body.page-approach .initiative-panel__photo { flex:none; border:0; box-shadow:none; }
body.page-approach .initiative-panel__text { flex:1 1 320px; min-width:280px; text-align:left; }
body.page-approach .effort-pill-row { display:flex; flex-wrap:wrap; gap:12px; }
body.page-approach .shun-instagram-button {
    background: linear-gradient(110deg,#ff9a3c 0%,#f04a78 28%,#d62976 52%,#962fbf 76%,#515bd4 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    box-shadow: 0 8px 18px rgba(214,41,118,.25);
    transition: background-position .35s ease, transform .35s ease, box-shadow .35s ease;
  }
body.page-approach .shun-instagram-button:hover, body.page-approach .shun-instagram-button:focus-visible, body.page-approach .shun-instagram-button:active {
    background-position: 100% 50%;
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 11px 24px rgba(150,47,191,.32);
  }
body.page-approach .shun-instagram-button img { transition: transform .35s ease; }
body.page-approach .shun-instagram-button:hover img, body.page-approach .shun-instagram-button:focus-visible img, body.page-approach .shun-instagram-button:active img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {body.page-approach .shun-instagram-button, body.page-approach .shun-instagram-button img { transition: background-position .35s ease; transform:none; }
  }
body.page-approach .swimming-instagram-button {
    /* カード内側いっぱいの幅にして大きく見せる。box-sizing:border-box + max-width:100% で
       padding込みでもカードからは絶対にはみ出さない。 */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    /* ★ <a> のインラインstyle（font-size:12px / padding:8px 16px / gap:6px）に勝つため !important。
       これが無いと幅だけ広がって文字とアイコンが小さいままになる。 */
    font-size: 15px !important;
    padding: 13px 18px !important;
    gap: 8px !important;
    min-height: 54px !important;
    color: #fff;
    background: linear-gradient(110deg,#f58529 0%,#dd2a7b 35%,#962fbf 68%,#515bd4 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    transition: background-position .45s ease, transform .3s ease, box-shadow .3s ease;
  }
body.page-approach .swimming-instagram-button:hover, body.page-approach .swimming-instagram-button:focus-visible, body.page-approach .swimming-instagram-button:active {
    background-position: 100% 50%;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(150,47,191,.28);
  }
/* img もインラインで 16px 指定があるので !important */
body.page-approach .swimming-instagram-button img { width: 22px !important; height: 22px !important; transition: transform .3s ease; }
/* カードの内側が狭くなる帯（〜370px と 621〜1020px）は一段小さくして折り返しを抑える */
@media (max-width: 370px), (min-width: 621px) and (max-width: 1020px) {
  body.page-approach .swimming-instagram-button {
    font-size: 13px !important;
    padding: 11px 8px !important;
    gap: 6px !important;
    min-height: 48px !important;
  }
  body.page-approach .swimming-instagram-button img { width: 18px !important; height: 18px !important; }
}
body.page-approach .swimming-instagram-button:hover img, body.page-approach .swimming-instagram-button:focus-visible img, body.page-approach .swimming-instagram-button:active img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {body.page-approach .swimming-instagram-button, body.page-approach .swimming-instagram-button img { transition:none; transform:none; }
  }
body.page-approach .shoku-menu-button {
    background:#507A3D;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
body.page-approach .shoku-menu-button::before {
    content: ""; position: absolute; top: -35%; left: -45%; width: 32%; height: 170%;
    background: linear-gradient(90deg, rgba(255,248,231,0) 0%, rgba(255,248,231,.10) 30%, rgba(255,248,231,.28) 50%, rgba(255,248,231,.10) 70%, rgba(255,248,231,0) 100%);
    transform: skewX(-18deg); pointer-events: none; z-index: 0; opacity: 0;
  }
body.page-approach .shoku-menu-button:hover::before { animation: menuButtonSweep .75s ease-out 1; }
body.page-approach .shoku-menu-icon, body.page-approach .shoku-menu-icon-img, body.page-approach .shoku-menu-arrow { transition: transform .25s ease; }
body.page-approach .shoku-menu-icon { transition: background-color .25s ease; }
body.page-approach .shoku-menu-button:hover, body.page-approach .shoku-menu-button:focus-visible {
    background:#43602F; transform:translateY(-2px);
    box-shadow:0 8px 0 rgba(61,82,54,.22), 0 15px 26px rgba(107,79,58,.15);
  }
body.page-approach .shoku-menu-button:hover .shoku-menu-icon, body.page-approach .shoku-menu-button:focus-visible .shoku-menu-icon { background:#FFEFCB; }
body.page-approach .shoku-menu-button:hover .shoku-menu-arrow, body.page-approach .shoku-menu-button:focus-visible .shoku-menu-arrow { transform:translateX(4px); }
body.page-approach .shoku-menu-button:focus-visible { outline:3px solid #C9685D; outline-offset:4px; }
body.page-approach .shoku-menu-button:active {
    background:#374F27;
    transform:translateY(1px);
    box-shadow:0 3px 0 rgba(61,82,54,.20), 0 7px 14px rgba(107,79,58,.12);
  }
@media (prefers-reduced-motion: reduce) {body.page-approach .shoku-menu-button::before { display:none !important; }body.page-approach .shoku-menu-button:hover { background-color:#43602F; transform:none; }body.page-approach .shoku-menu-button:hover .shoku-menu-arrow { transform:none; }body.page-approach .shoku-menu-button, body.page-approach .shoku-menu-arrow { transition: background-color .25s ease; }
  }
@media (max-width: 768px) {/* ★ min-height / padding / font-size はインラインにも指定があるため !important 必須
       （インライン: min-height:76px; padding:12px 28px; font-size:clamp(18px,1.35vw,23px)） */
    body.page-approach .shoku-menu-button { width:100% !important; max-width:420px !important; min-height:68px !important; padding:10px 18px !important; font-size:17px !important; gap:11px; white-space:normal; }body.page-approach .shoku-menu-icon { width:46px !important; height:46px !important; }body.page-approach .shoku-menu-icon-img { width:34px !important; }body.page-approach .shoku-menu-arrow { width:17px !important; height:17px !important; }
  }

/* 食育・給食：全幅共通の表示順（見出し→写真行→スライダー→本文カード） */
body.page-approach .shoku-inner { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:clamp(20px,3vw,48px); }
body.page-approach .shoku-inner > * { grid-column:1 / -1; }
body.page-approach .shoku-heading-wrap { grid-column:1; grid-row:1; margin-bottom:0 !important; align-self:center; }
body.page-approach .shoku-header-row { grid-column:2; grid-row:1; margin-bottom:clamp(10px,1.2vw,20px) !important; width:auto; }
body.page-approach .shoku-mobile-slider { grid-column:1 / -1; }
body.page-approach .shoku-extra-photos { position:absolute; left:0; width:100%; top:clamp(-240px,-15vw,-150px); justify-content:flex-start !important; align-items:flex-start !important; margin-top:0 !important; pointer-events:none; z-index:3; }
@media (max-width: 1420px) {body.page-approach .decor-steam-rice, body.page-approach .decor-steam-miso, body.page-approach .decor-peas, body.page-approach .decor-swirl, body.page-approach .decor-rice-grains { display:none !important; }body.page-approach .decor-spoon-fork { display:block !important; position:absolute !important; right:2px !important; top:-6px !important; left:auto !important; bottom:auto !important; width:clamp(46px,6.5vw,80px) !important; }body.page-approach .decor-pumpkin { position:absolute !important; left:2px !important; bottom:-4px !important; top:auto !important; right:auto !important; width:clamp(40px,5.5vw,68px) !important; display:block !important; }body.page-approach .decor-rice { position:absolute !important; right:2px !important; top:auto !important; bottom:-6px !important; left:auto !important; width:clamp(42px,6vw,80px) !important; display:block !important; }body.page-approach .decor-miso-soup { display:none !important; }body.page-approach .shoku-heading-wrap { position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; margin-left:auto !important; margin-right:auto !important; }body.page-approach .shoku-heading-wrap::before { content:""; display:block; position:absolute; left:2px; top:50%; transform:translateY(-50%); width:38px; height:38px; background-image:url('assets/food-education/decorations/miso-soup.png'); background-size:contain; background-repeat:no-repeat; background-position:center; }body.page-approach .decor-carrot { position:absolute !important; right:2px !important; bottom:-4px !important; left:auto !important; top:auto !important; width:clamp(48px,6.5vw,92px) !important; }body.page-approach .decor-tomato { position:absolute !important; left:2px !important; top:auto !important; bottom:clamp(-46px,-5vw,-30px) !important; right:auto !important; width:clamp(30px,4vw,55px) !important; }body.page-approach .decor-orange { position:absolute !important; right:2px !important; top:38% !important; bottom:auto !important; left:auto !important; width:32px !important; }body.page-approach .decor-broccoli { position:absolute !important; left:2px !important; bottom:-2px !important; right:auto !important; top:auto !important; width:clamp(38px,5.5vw,72px) !important; }
  }
@media (max-width: 1300px) {body.page-approach .shoku-header-photo-c, body.page-approach .shoku-header-photo-d { display:none !important; }body.page-approach .shoku-extra-photos { display:none !important; }
  }
@media (max-width: 900px) {body.page-approach .shoku-intro-grid { grid-template-columns:1fr !important; }body.page-approach #shokuiku { margin-top:0 !important; }
  }
@media (max-width: 480px) {body.page-approach .panel-heading { white-space:normal !important; text-align:center !important; line-height:1.4 !important; }
  }
@media (max-width: 400px) {body.page-approach .navigation-grid { grid-template-columns:1fr !important; }
  }
@media (max-width: 767px) {body.page-approach .dance-notes { width:min(86vw,420px) !important; }body.page-approach .shoku-block--weaning { margin-bottom:clamp(52px,7vw,72px) !important; }body.page-approach .itadakimasu-illust, body.page-approach .shoku-kotoba-grid img.itadakimasu-illust { display:block !important; position:relative !important; left:auto !important; top:auto !important; width:100px !important; height:auto !important; margin:clamp(20px,3vw,28px) auto !important; }body.page-approach .shoku-kotoba-grid img.shoku-kotoba-photo--girl, body.page-approach .shoku-kotoba-grid img.shoku-kotoba-photo--friends { display:none !important; }body.page-approach .shoku-block--kotoba { margin-bottom:clamp(24px,4vw,32px) !important; }body.page-approach .shoku-kotoba-slider { display:block !important; }body.page-approach .shoku-cards-3 { grid-template-columns:1fr !important; }body.page-approach .kizuna-info-grid { width:100% !important; padding-left:24px !important; padding-right:24px !important; padding-top:clamp(28px,4vw,40px) !important; padding-bottom:clamp(36px,5vw,54px) !important; }body.page-approach .kizuna-animals, body.page-approach #kizuna img.kizuna-animals { position:relative !important; right:auto !important; bottom:auto !important; display:block !important; width:min(92%,420px) !important; margin:clamp(6px,2vw,16px) auto clamp(4px,1.5vw,12px) !important; }body.page-approach .kizuna-photo-slider { display:block !important; }body.page-approach .kizuna-heading { white-space:normal !important; flex-direction:column; text-align:center; line-height:1.35 !important; padding:clamp(10px,3vw,16px) clamp(20px,6vw,28px) !important; align-self:center !important; margin-inline:auto !important; }body.page-approach .kizuna-heading__break { display:block; }body.page-approach .kizuna-intro-heading__break { display:block; }body.page-approach #kizuna .initiative-panel__content { padding-top:0 !important; }body.page-approach .kizuna-panel { display:flex !important; flex-direction:column !important; }body.page-approach .kizuna-photo-slider { order:1; margin-top:clamp(16px,3vw,24px) !important; }body.page-approach .kizuna-panel > .initiative-panel__content { order:2; }body.page-approach .kizuna-info-grid { order:3; }body.page-approach .kizuna-photo-collage { display:none !important; }body.page-approach .kizuna-hours { grid-template-columns:1fr !important; row-gap:4px !important; }body.page-approach .kizuna-hours dt { margin-top:8px !important; }body.page-approach .kizuna-hours dt:first-child { margin-top:0 !important; }body.page-approach .section-kizuna { margin-top:clamp(30px,4vw,44px) !important; }body.page-approach .shoku-inner { display:flex !important; flex-direction:column !important; align-items:center !important; }body.page-approach .shoku-inner > * { order:10; width:100%; }body.page-approach .shoku-heading-wrap { order:1 !important; margin-bottom:clamp(20px,3vw,28px) !important; }body.page-approach .shoku-header-row { order:2 !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; margin-bottom:0 !important; }body.page-approach .shoku-mobile-slider { order:3 !important; margin:0 auto clamp(20px,3vw,32px) !important; }body.page-approach .shoku-kotoba-grid { grid-template-columns:1fr !important; }body.page-approach .shoku-lunch-illust { width:min(50vw,220px) !important; margin:10px auto 14px !important; }body.page-approach .shoku-photo-collage { display:none !important; }body.page-approach .shoku-food-slider { display:block !important; }body.page-approach .shoku-lunch-boy-photo { display:none !important; }body.page-approach .shoku-mobile-slider { display:block !important; }body.page-approach .shoku-lunch-second-photo { display:none !important; }body.page-approach .shoku-weaning-row { flex-direction:column !important; }body.page-approach .shoku-weaning-row > div { max-width:100% !important; }body.page-approach .shoku-weaning-grid { grid-template-columns:1fr !important; }body.page-approach .shoku-rinyu-slider { display:block !important; }body.page-approach .shoku-kotoba-grid img { position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; width:min(90%,380px) !important; max-width:90% !important; margin:20px auto 0 !important; display:block !important; }body.page-approach .shoku-kotoba-col { padding-top:0 !important; }
  }
@media (min-width:768px) and (max-width:1279px) {body.page-approach .jiko-panel__photo--main { width:min(100%,460px) !important; }body.page-approach .jiko-panel__photo--sub { width:min(70%,330px) !important; }body.page-approach .jiko-panel__content { column-gap:clamp(32px,4vw,50px) !important; }body.page-approach .lessons-section-gap { margin-top:clamp(25px,3vw,40px) !important; }body.page-approach .lessons-intro__heading { margin-bottom:clamp(50px,5vw,65px) !important; }
  }
@media (max-width: 1279px) {body.page-approach .jiko-director-photo { position:relative !important; left:auto !important; top:auto !important; width:min(70vw,280px) !important; margin:20px auto 0 !important; display:block !important; }
  }
@media (min-width: 1400px) {body.page-approach .lessons-photo-sub-c, body.page-approach .lessons-squirrel { display: block !important; }
  }

/* --- 課外教室：踊るリスをカード列の「右外側」へ（相対配置） --------------------
   元のインラインは left:1223px / top:2123px という絶対px指定で、画面が広いほど
   3枚目のカード（書き方教室）の裏へ潜り込んでいた。
   カード列 .lessons-cards は「幅1150px・中央寄せ」で固定なので、
   3枚目カードの右端は常に calc(50% + 511px)（列の内側パディング64px込み）。
   そこから16px空けた位置に置き、幅は画面右端から8px内側に収まるよう自動で縮める。
   ★ left/top を絶対pxに戻さないこと。カードの位置・サイズは一切変更していない。 */
@media (min-width: 1400px) {
  body.page-approach .lessons-squirrel {
    left: calc(50% + 527px) !important;              /* カード3の右端 + 16px */
    right: auto !important;
    top: auto !important;
    bottom: 24px !important;                          /* 緑背景の下端から24px */
    width: min(194px, calc(50% - 559px)) !important;  /* 画面右端から8px以上あける */
    height: auto !important;                          /* 194x136 の比率を維持 */
  }
}
@media (max-width: 860px) {body.page-approach .lessons-sun { width:clamp(100px,16vw,130px) !important; top:clamp(-30px,-3vw,-15px) !important; }body.page-approach .lessons-airplane, body.page-approach .lessons-airplane2 { display:none !important; }body.page-approach .lessons-clouds { display:none !important; }body.page-approach .lessons-section-gap { margin-top:clamp(20px,4vw,35px) !important; }body.page-approach .lessons-intro__heading { margin-bottom:clamp(45px,6vw,58px) !important; }body.page-approach .lessons-photo-sub-c { display:block !important; width:min(80vw,320px) !important; height:220px !important; margin:24px auto 0 !important; }body.page-approach .lessons-photo-sub-c > img { border-radius: 24px !important; }body.page-approach .lessons-photo-sub-c { position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; }body.page-approach .lessons-squirrel { display:none !important; }body.page-approach .jiko-animals { position:relative !important; left:auto !important; right:auto !important; top:auto !important; bottom:auto !important; margin:24px auto 0 !important; width:min(100%,380px) !important; display:block !important; }body.page-approach .kizuna-grid { grid-template-columns: 1fr !important; }body.page-approach .shoku-grid { grid-template-columns: 1fr !important; }body.page-approach .effort-nav-row { overflow-x:auto; justify-content:flex-start !important; -webkit-overflow-scrolling:touch; }body.page-approach .initiative-panel__content { grid-template-columns:minmax(0,1fr) !important; padding:80px 24px 40px !important; row-gap:24px !important; }body.page-approach .initiative-panel__text { min-width:0 !important; }body.page-approach .initiative-panel__photo { width:100% !important; max-width:380px !important; height:min(66vw,280px) !important; margin:0 auto !important; }body.page-approach .initiative-panel__label { left:24px !important; right:auto !important; }body.page-approach .jiko-panel__content { grid-template-columns:minmax(0,1fr) !important; padding:80px 24px 40px !important; row-gap:0 !important; }body.page-approach .jiko-panel__text { order:1 !important; margin-bottom:28px !important; }body.page-approach .jiko-panel__photos { order:2 !important; align-items:center !important; gap:32px !important; }body.page-approach .jiko-panel__photo--main { width:min(92vw,420px) !important; margin-right:0 !important; }body.page-approach .jiko-panel__photo--sub { width:min(78vw,340px) !important; margin-right:0 !important; margin-bottom:0 !important; }
  }
@media (max-width: 900px) {body.page-approach .lessons-gallery__photo--swim { width:clamp(240px,36vw,320px) !important; }body.page-approach .lessons-gallery__kakikata img:first-child { width:clamp(150px,20vw,190px) !important; }body.page-approach .lessons-gallery__kakikata img:last-child { width:clamp(120px,17vw,160px) !important; }
  }
@media (max-width: 480px) {body.page-approach .panel-heading { white-space:normal !important; text-align:center !important; line-height:1.4 !important; }
  }
@media (max-width: 400px) {body.page-approach .navigation-grid { grid-template-columns:1fr !important; }
  }
@media (max-width: 767px) {body.page-approach .dance-notes { width:min(86vw,420px) !important; }body.page-approach .lessons-hedgehog { width:110px !important; right:clamp(4px,2vw,16px) !important; top:-6px !important; }body.page-approach .lessons-gallery { grid-template-columns:1fr !important; row-gap:0 !important; margin-top:0 !important; }body.page-approach .lessons-gallery__photo--bear { grid-column:1 !important; width:145px !important; height:auto !important; margin:18px auto 14px !important; transform:none !important; justify-self:center !important; }body.page-approach .lessons-gallery__photo--swim, body.page-approach .lessons-gallery__kakikata { display:none !important; }body.page-approach .lessons-cards { grid-template-columns:1fr !important; margin-top:0 !important; }body.page-approach .lessons-photo-slider { display:block !important; margin:0 auto clamp(28px,4vw,32px) !important; } body.page-approach .dance-photo-slider { width:min(94%,420px) !important; }
  }
@media (max-width: 1000px) {body.page-approach .dance-feature__grid { grid-template-columns:1fr !important; }body.page-approach .dance-feature__photos { max-width:min(90vw,480px) !important; margin:clamp(-40px,-6vw,-20px) auto clamp(60px,10vw,90px) !important; }
  }
@media (max-width: 860px) {body.page-approach .lessons-intro__grid { grid-template-columns:1fr !important; row-gap:clamp(32px,8vw,40px) !important; }body.page-approach .lessons-intro__illust { max-width:92vw !important; margin-top:0 !important; }
  }
@media (max-width: 560px) {body.page-approach .dance-feature__profile { flex-direction:column !important; align-items:center !important; text-align:center; }body.page-approach .dance-feature__profile img { width:210px !important; height:210px !important; }body.page-approach .dance-feature__profile p { text-align:left; }body.page-approach .shun-bio-text { font-size:15px !important; line-height:1.85 !important; }body.page-approach .shun-instagram-button { display:flex !important; width:fit-content !important; margin:0 auto !important; }
  }
/* --- 課外教室セクションのスマホ調整 ---
   ★ このブロックは §9 内の他の @media (max-width:860px) より後に置くこと。
     .lessons-photo-sub-c は上のブロックで display:block されているため、
     前に置くと後勝ちで打ち消される（どちらも !important・同じ詳細度）。 */
@media (max-width: 860px) {
  /* 302px の固定 margin が見出しを押し下げ、緑の背景が上へ極端に伸びていた */
  body.page-approach .lessons-intro__heading { margin-top:clamp(24px,6vw,48px) !important; }
  body.page-approach .lessons-intro__grid { margin-top:clamp(12px,3vw,24px) !important; }
  /* 引き延ばした背景画像をやめ、上端は波形にする（高さ固定の波キャップ＋下は単色） */
  body.page-approach .lessons-green-bg > img:first-of-type { display:none !important; }
  body.page-approach .lessons-green-bg { background:transparent; }
  /* 高さ固定の波キャップ。セクションの高さが変わっても波が縦に潰れない */
  body.page-approach .lessons-green-bg::before {
    content:""; position:absolute; left:0; right:0; top:0; height:clamp(26px,6vw,46px);
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,30 C110,6 210,2 330,18 C450,34 530,52 650,45 C770,38 860,12 970,8 C1070,4 1145,17 1200,32 L1200,60 Z' fill='%23EAF3E2'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
  }
  body.page-approach .lessons-green-bg::after {
    content:""; position:absolute; left:0; right:0; bottom:0; top:calc(clamp(26px,6vw,46px) - 1px);
    background:#EAF3E2;
  }
  body.page-approach .lessons-content-block { transform:none !important; margin-bottom:0 !important; }
  body.page-approach .lessons-intro { padding-block:0 clamp(28px,7vw,44px) !important; }
  /* ピンクの帯も同様に、引き延ばした波形SVGをやめてなめらかな上端に */
  body.page-approach .dance-feature { margin-top:clamp(28px,7vw,48px) !important; background:#FBE9EE; border-radius:50% 50% 0 0 / clamp(40px,10vw,70px) clamp(40px,10vw,70px) 0 0; padding-top:clamp(24px,6vw,40px); }
  body.page-approach .dance-feature__wave { display:none !important; }
  /* 中身が空のプレースホルダーが220pxの空白を作っていた */
  body.page-approach .lessons-photo-sub-c { display:none !important; }
}

/* --- 480px以下：ハリネズミをさらに小さく、見出しの余白を確保 ---
   ★ 上の @media (max-width:860px) より後に置くこと。
     .lessons-intro__heading の margin-top を両方が !important で指定しており、
     前に置くと後勝ちで 860px 側（clamp(24px,6vw,48px)）に負けて効かない。 */
@media (max-width: 480px) {
  body.page-approach .lessons-hedgehog { width:88px !important; top:-2px !important; }
  body.page-approach .lessons-intro__heading { margin-top:clamp(38px,9vw,52px) !important; }
}

/* --- 慈光の保育：900px以下は単色背景＋写真2枚構成 ---
   ★ 上の @media (max-width:860px) より後に置くこと。860px側が
     .jiko-panel__content に padding ショートハンド、
     .jiko-panel__photo--sub に width をそれぞれ !important で当てているため、
     前に置くと 860px以下（375/430px を含む）で打ち消される。 */
@media (max-width: 900px) {
  /* 引き延ばした背景画像をやめ、課外教室と同じなめらかな上端の単色背景にする */
  body.page-approach .jiko-pink-bg { display:none !important; }
  body.page-approach .jiko-panel { background:#FBE2DF; border-radius:50% 50% 50% 50% / clamp(34px,9vw,60px) clamp(34px,9vw,60px) clamp(40px,10vw,70px) clamp(40px,10vw,70px); }
  /* 見出し・本文が必ず内側に収まるようにする（左右は860px側の24pxを活かす） */
  body.page-approach .jiko-panel__content { padding-top:clamp(40px,6vw,64px) !important; padding-bottom:clamp(40px,6vw,64px) !important; }
  body.page-approach .jiko-panel__text { padding-top:0 !important; }
  /* 園長先生の単独写真を省き、メイン写真＋園児の写真の2枚構成に */
  body.page-approach .jiko-director-photo { display:none !important; }
  /* 2枚並びをやめ、1枚のスライドショーに差し替える */
  body.page-approach .jiko-panel__photos { display:none !important; }
  body.page-approach .jiko-photo-slideshow { display:block !important; }
}

/* --- 700px以下：ラベルを「きずな」表記にして4枚の高さを揃える ---
   ★ 上の body.page-approach .navigation-grid { align-items:start } より後に置くこと。
     詳細度が同じ(0,2,0)なので、前に置くと start に負けて stretch が効かない。
     700px以下は「放課後児童クラブ」表記になり全ラベルが1〜2行に収まるため、
     stretch に戻しても間延びしない。 */
@media (max-width: 700px) {
  body.page-approach .nav-card__label-suffix { display: none; }
  body.page-approach .navigation-grid { align-items: stretch; }
}

/* --- 「ほかにも、こんな教室があります」：767px以下は1枚ずつのスライダー ---
   スライダー本体は markup 側でインラインの display:none。
   767px ブロックで display:block に切り替えるので、768px以上は従来のまま。 */
@keyframes lessonsSlideIn  { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes lessonsSlideOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(-100%); opacity:0; } }
body.page-approach .lessons-slide.is-entering { animation: lessonsSlideIn 700ms ease-in-out forwards; }
body.page-approach .lessons-slide.is-leaving  { animation: lessonsSlideOut 700ms ease-in-out forwards; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .lessons-slide.is-entering,
  body.page-approach .lessons-slide.is-leaving { animation:none !important; }
}

/* --- キッズダンス：767px以下は1枚ずつのスライダー ---
   3枚を13.5秒周期（各4.5秒表示・0.8秒フェード）で自動送り。
   ドットを押すと自動再生を止めて、その1枚だけを表示する（js/main.js）。 */
@keyframes danceSlideFade {
  0%    { opacity:0; transform:scale(1.015); }
  5.9%  { opacity:1; transform:scale(1); }
  33.3% { opacity:1; transform:scale(1); }
  39.2% { opacity:0; transform:scale(1.015); }
  100%  { opacity:0; transform:scale(1.015); }
}
/* PC・スマホ共通で1つのスライダーに集約するため、元の2枚並びは全幅で隠す */
body.page-approach .dance-feature__photos { display:none !important; }
body.page-approach .dance-slide { animation: danceSlideFade 13.5s ease-in-out infinite; }
body.page-approach .dance-slide--1 { animation-delay: 0s; }
body.page-approach .dance-slide--2 { animation-delay: 4.5s; }
body.page-approach .dance-slide--3 { animation-delay: 9s; }
/* ★ .is-current の opacity はインラインの opacity:0 に勝つ必要があるため !important */
body.page-approach .dance-photo-slider.is-manual .dance-slide {
  animation:none !important; opacity:0 !important;
  transition: opacity .8s ease-in-out, transform .8s ease-in-out; transform:scale(1);
}
body.page-approach .dance-photo-slider.is-manual .dance-slide.is-current { opacity:1 !important; }

@media (prefers-reduced-motion: reduce) {
  body.page-approach .dance-slide { animation:none !important; transform:none !important; }
  body.page-approach .dance-slide--2,
  body.page-approach .dance-slide--3 { opacity:0; }
  body.page-approach .dance-photo-slider.is-manual .dance-slide { transition:none !important; }
}

/* ==========================================================================
   10. 入園案内（page-admission.php）
   admission.dc.html の <helmet> を移植。body.page-admission でスコープ。
   ★ テンプレート側で $body_class = 'page-admission' を設定すること。
   ========================================================================== */

body.page-admission .page-wrap { background:#FFF9EE !important; min-height:100vh; }
body.page-life .page-wrap { background:#FFF9EE !important; min-height:100vh; }
body.page-recruit .page-wrap { background:#FFF9EE !important; min-height:100vh; }
body.page-admission .crumb-home:hover { color:#6FA862 !important; }

/* 概要テーブルのボタン（about と同じ見た目） */
body.page-admission .ov-btn-map:hover { background:#DCEEF3 !important; }
body.page-admission .ov-btn-tel:hover { background:#E3F0DA !important; }
/* 住所・電話の値とインラインボタンの間に余白。
   縦積みリスト(.ai-ov-list)が出るのは860pxまでなので、/about/ と同じ 860px に揃える。 */
@media (max-width: 860px) {
  body.page-admission .ov-inline-btn { display:flex !important; margin:10px 0 0 !important; width:fit-content; }
}

/* 花の装飾は left/top が固定pxのため、本文が縦に伸びる520px以下で文章の上に重なる。
   純粋な装飾なので、他の .tour-* と同じ620pxで隠す。
   ただし冒頭の写真2枚（.admission-intro-photos 内）の花はPCと同じく写真の下に見せたいので、
   そこだけ復活させる。親ごと縮尺されるので left の固定値だけ right に置き換えれば
   画面右端からはみ出さない。absolute のままなので他の要素は動かず、余白も増えない。 */
@media (max-width: 620px) {
  body.page-admission .tour-decor-flowers { display: none !important; }
  /* 花は必ず2枚を左右に並べる。親（.admission-intro-photos）は画面幅に合わせて
     縮尺されるので、幅と位置を % で指定しておけば端末が変わっても横並びのまま、
     かつ親の外＝画面外へは出ない。absolute のままなので他の要素は動かない。 */
  body.page-admission .admission-intro-photos .tour-decor-flowers {
    display: block !important;
    top: auto !important;
    bottom: -4% !important;
    width: 47% !important;
    height: auto !important;
    left: 1% !important;
    right: auto !important;
  }
  body.page-admission .admission-intro-photos .tour-decor-flowers--2 {
    left: auto !important;
    right: 1% !important;
  }
}

/* --- 入園までの流れ：スクロールで順に現れる --- */
body.page-admission .flow-step { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
body.page-admission .flow-step.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  body.page-admission .flow-step { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* --- よくある質問（アコーディオン） --- */
body.page-admission .faq-item { background:#fff; }
body.page-admission .faq-item.is-open { background:#F6FAF1; }
body.page-admission .faq-panel { max-height:0; overflow:hidden; transition:max-height .28s ease; }
body.page-admission .faq-item.is-open .faq-panel { max-height:400px; }
body.page-admission .faq-arrow { transform:rotate(0deg); }
body.page-admission .faq-item.is-open .faq-arrow { transform:rotate(180deg); }
/* JSが無い環境では全部開いた状態にして内容が読めるようにする */
body.page-admission.no-js .faq-panel { max-height:none; }

@keyframes ctaSweep { 0%{ left:-45%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:120%; opacity:0; } }
body.page-admission .sweep-btn { position:relative; overflow:hidden; isolation:isolate; color:#fff; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
body.page-admission .sweep-btn::before { content:""; position:absolute; top:-35%; left:-45%; width:32%; height:170%; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.18) 70%, rgba(255,255,255,0) 100%); transform:skewX(-18deg); pointer-events:none; z-index:0; opacity:0; }
body.page-admission .sweep-btn > * { position:relative; z-index:1; }
body.page-admission .sweep-btn:hover::before, body.page-admission .sweep-btn:focus-visible::before { animation: ctaSweep .65s ease-out 1; }
body.page-admission .sweep-btn:active { transform:translateY(1px) !important; }
body.page-admission .sweep-btn--coral { background:#E68170; }
body.page-admission .sweep-btn--coral:hover, body.page-admission .sweep-btn--coral:focus-visible { background:#D66E60; transform:translateY(-2px); box-shadow:0 8px 0 rgba(150,60,50,.2), 0 14px 26px rgba(107,79,58,.18) !important; }
body.page-admission .sweep-btn--green { background:#5F8F55; }
body.page-admission .sweep-btn--green:hover, body.page-admission .sweep-btn--green:focus-visible { background:#4A7A42; transform:translateY(-2px); box-shadow:0 8px 0 rgba(60,90,50,.22), 0 14px 26px rgba(60,90,50,.16) !important; }
body.page-admission .sweep-btn:focus-visible { outline:3px solid #6B4F3A; outline-offset:3px; }
body.page-admission .tour-subcta-btn { background:#fff; color:#5F8F55; border:2px solid #5F8F55; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.page-admission .tour-subcta-btn:hover, body.page-admission .tour-subcta-btn:focus-visible { background:#EAF3E2; transform:translateY(-2px); }
body.page-admission .tour-subcta-btn:focus-visible { outline:3px solid #5F8F55; outline-offset:3px; }
body.page-admission .anchor-pill { background:#fff; color:#6B4F3A; border:1.5px solid #EFE6D3; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.page-admission .anchor-pill:hover, body.page-admission .anchor-pill:focus-visible { background:#FFF1DE; transform:translateY(-2px); box-shadow:0 6px 14px rgba(122,92,68,.12); }
body.page-admission .anchor-pill:focus-visible { outline:3px solid #6B4F3A; outline-offset:2px; }
body.page-admission .flow-step { opacity:0; transform:translateY(10px); transition: opacity .55s ease-out, transform .55s ease-out, box-shadow .2s ease; cursor:default; position:relative; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; border-radius:24px; height:390px; padding:29px 20px; }
body.page-admission .flow-step.is-visible { opacity:1; transform:translateY(0); }
body.page-admission .flow-step:hover { transform:translateY(-2px); }
body.page-admission .flow-step.is-visible:hover { transform:translateY(-2px); }
body.page-admission .flow-grid { list-style:none; margin:0; padding:0; }
body.page-admission .flow-grid > .flow-step { min-width: 0; }
body.page-admission .flow-step-num { display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#fff; font-family:'Zen Maru Gothic'; font-weight:800; font-size:21px; margin-bottom:16px; flex:none; box-shadow:0 2px 6px rgba(107,79,58,.15); }
body.page-admission .flow-step-label { margin:0; font-family:'Zen Maru Gothic'; font-weight:700; font-size:15.5px; color:#6B4F3A; line-height:1.6; }
body.page-admission .flow-step-icon { width:250px; height:183px; max-width:100%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; flex:none; }
body.page-admission .flow-step-img { height:auto; max-width:100%; object-fit:contain; }
body.page-admission .flow-card--visit .flow-step-img, body.page-admission .flow-card--admission .flow-step-img { width:230px; max-height:177px; }
body.page-admission .flow-card--application .flow-step-img { width:141px; max-height:130px; }
body.page-admission .flow-card--interview .flow-step-img { width:250px; max-height:166px; }
body.page-admission .flow-connector { position:absolute; top:50%; right:-37px; transform:translateY(-50%); display:flex; align-items:center; z-index:3; pointer-events:none; }
body.page-admission .flow-connector svg { display:block; }
@media (max-width: 900px) {body.page-admission .flow-grid { gap:20px !important; }body.page-admission .flow-connector { display:none; }
  }
/* ★ gap はインライン（gap:20px）にも指定があるため !important 必須 */
@media (max-width: 620px) {body.page-admission .flow-grid { gap:40px !important; }body.page-admission .flow-connector { display:flex; top:auto; right:auto; left:50%; bottom:-20px; transform:translateX(-50%) rotate(90deg); }
  }
@media (max-width: 900px) {body.page-admission .flow-step { height:355px; padding:26px 18px; }body.page-admission .flow-step-num { width:54px; height:54px; font-size:20px; margin-bottom:16px; }body.page-admission .flow-step-icon { width:213px; height:156px; margin-bottom:16px; }body.page-admission .flow-card--visit .flow-step-img, body.page-admission .flow-card--admission .flow-step-img { width:195px; max-height:150px; }body.page-admission .flow-card--application .flow-step-img { width:119px; max-height:111px; }body.page-admission .flow-card--interview .flow-step-img { width:213px; max-height:141px; }
  }
@media (max-width: 620px) {body.page-admission .flow-step { height:376px; padding:24px 16px; }body.page-admission .flow-step-num { width:50px; height:50px; font-size:19px; margin-bottom:10px; }body.page-admission .flow-step-icon { width:258px; height:191px; margin-bottom:10px; }body.page-admission .flow-card--visit .flow-step-img, body.page-admission .flow-card--admission .flow-step-img { width:237px; max-height:183px; }body.page-admission .flow-card--application .flow-step-img { width:146px; max-height:135px; }body.page-admission .flow-card--interview .flow-step-img { width:258px; max-height:172px; }
  }
body.page-admission .faq-question { background:transparent; border:none; width:100%; cursor:pointer; font-family:inherit; }
body.page-admission .faq-question:focus-visible { outline:3px solid #5F8F55; outline-offset:2px; }
body.page-admission .flow-step-sub { margin:6px 0 0; font-family:'Zen Kaku Gothic New'; font-weight:500; font-size:13px; line-height:1.7; color:#8A725F; }
body.page-admission .flow-cta-btn { width:fit-content; }
@media (max-width:620px) {body.page-admission .flow-cta-btn { width:100%; max-width:420px; justify-content:center; text-align:left; }
  }
@media (prefers-reduced-motion: reduce) {body.page-admission .sweep-btn, body.page-admission .tour-subcta-btn, body.page-admission .anchor-pill, body.page-admission .flow-step { transition:none !important; animation:none !important; transform:none !important; }body.page-admission .sweep-btn::before { display:none !important; }body.page-admission .flow-step { opacity:1 !important; }
  }
@media (max-width: 1000px) {body.page-admission .admission-intro-grid { grid-template-columns:minmax(0,1fr) !important; }body.page-admission .admission-intro-photos { margin:0 auto !important; }
  }
@media (max-width: 528px) {body.page-admission .admission-intro-photos { zoom: 0.72; } }
@media (max-width: 455px) {body.page-admission .admission-intro-photos { zoom: 0.61; } }
@media (max-width: 393px) {body.page-admission .admission-intro-photos { zoom: 0.52; } }
@media (max-width: 335px) {body.page-admission .admission-intro-photos { zoom: 0.43; } }
@media (max-width: 900px) {body.page-admission .ai-ov-table { display:none !important; }body.page-admission .ai-ov-list { display:flex !important; }body.page-admission .admission-hours-grid { grid-template-columns:1fr !important; }body.page-admission .info-summary-grid { grid-template-columns:1fr 1fr !important; }body.page-admission .flow-grid { grid-template-columns:1fr 1fr !important; }
  }
@media (max-width: 620px) {body.page-admission .flow-grid { grid-template-columns:1fr !important; }body.page-admission .info-summary-grid { grid-template-columns:1fr !important; }body.page-admission .temp-contact-grid { grid-template-columns:1fr !important; }body.page-admission .tour-actions-row { flex-direction:column; align-items:stretch !important; }body.page-admission .tour-actions-row > div:not(.tour-illust-row) { flex-direction:column !important; align-items:stretch !important; }body.page-admission .tour-actions-row .sweep-btn, body.page-admission .tour-actions-row .tour-subcta-btn { justify-content:center; width:100%; }body.page-admission .tour-illust-row { flex-wrap:nowrap !important; width:100% !important; gap:6px !important; }body.page-admission .tour-illust-row img { width:auto !important; max-width:48% !important; flex:1 1 0 !important; }body.page-admission .tour-illust-building { height:auto !important; }
  }
/* ==========================================================================
   11. 採用情報（page-recruit.php）
   recruit.dc.html の <helmet> を移植。body.page-recruit でスコープ。
   ★ テンプレート側で $body_class = 'page-recruit' を設定すること。
   ========================================================================== */

body.page-recruit .crumb-home:hover { color:#6FA862 !important; }

body.page-recruit a:hover { color:#5F8F55; }
body.page-recruit .sweep-btn { position:relative; overflow:hidden; isolation:isolate; color:#fff; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; }
body.page-recruit .sweep-btn--coral { background:#E68170; }
body.page-recruit .sweep-btn--coral:hover, body.page-recruit .sweep-btn--coral:focus-visible { background:#D66E60; transform:translateY(-2px); box-shadow:0 8px 0 rgba(150,60,50,.2), 0 14px 26px rgba(107,79,58,.18) !important; }
body.page-recruit .sweep-btn:focus-visible { outline:3px solid #6B4F3A; outline-offset:3px; }
body.page-recruit .anchor-pill { background:#fff; color:#6B4F3A; border:1.5px solid #EFE6D3; transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
body.page-recruit .anchor-pill:hover, body.page-recruit .anchor-pill:focus-visible { background:#FFF1DE; transform:translateY(-2px); box-shadow:0 6px 14px rgba(122,92,68,.12); }
body.page-recruit .recruit-message-section { position:relative; padding:110px 24px 140px; overflow:hidden; background:#fffaf1; }
body.page-recruit .recruit-message-inner { position:relative; width:min(100%,1500px); margin-inline:auto; min-height:920px; }
body.page-recruit .message-stack { position:relative; z-index:2; width:min(100%,840px); margin-inline:auto; display:flex; flex-direction:column; gap:28px; }
body.page-recruit .message-item { position:relative; padding:36px 44px; border:1px solid rgba(122,167,100,.24); box-shadow:0 12px 32px rgba(107,79,58,.07); border-radius:38px 28px 42px 30px; }
body.page-recruit .message-item::before { content:"\201C"; position:absolute; top:0px; left:22px; font-size:68px; line-height:1; font-family:Georgia,serif; color:rgba(240,147,138,.32); }
body.page-recruit .message-item p { margin:0; color:#6b4f3a; font-size:clamp(16px,1.25vw,19px); line-height:2; letter-spacing:.04em; position:relative; z-index:1; }
body.page-recruit .message-item:nth-child(1) { background:#fffdf9; margin-inline:auto; }
body.page-recruit .message-item:nth-child(2) { background:#f7fbf2; margin-inline:auto; }
body.page-recruit .message-item:nth-child(3) { background:#fff7f4; margin-inline:auto; }
body.page-recruit .message-decoration-photo { position:absolute; z-index:1; height:auto; object-fit:contain; pointer-events:none; filter:drop-shadow(0 12px 20px rgba(107,79,58,.10)); }
body.page-recruit .message-decoration-photo--p1 { width:clamp(190px,16vw,255px); top:30px; left:-40px; transform:rotate(-3deg); }
body.page-recruit .message-decoration-photo--p2 { width:clamp(210px,17vw,275px); top:10px; right:-45px; transform:rotate(2deg); }
body.page-recruit .message-decoration-photo--p3 { width:clamp(160px,13vw,205px); top:400px; left:-15px; transform:rotate(3deg); }
body.page-recruit .message-decoration-photo--p4 { width:clamp(175px,14vw,220px); top:410px; right:-25px; transform:rotate(-2deg); }
body.page-recruit .message-decoration-photo--p5 { width:clamp(190px,15vw,240px); bottom:40px; left:5px; transform:rotate(-2deg); }
body.page-recruit .message-decoration-photo--p6 { width:clamp(185px,15vw,235px); bottom:15px; right:15px; transform:rotate(3deg); }
/* --- 1301px以上：先輩からのメッセージ周りの写真コラージュ ---
   ★ 写真の位置・サイズは <img> のインラインstyle（px固定・1500px設計）で入っているので、
     ここで !important 付きの相対指定に置き換える。
   ・カードは常に840px固定・中央寄せ。左右の余白 = (inner - 840) / 2。
     幅を calc(50% - 435px) にすると、右端(左端)に寄せたとき必ずカードから15px離れる。
   ・inner の上限を1700pxに広げて、右側の写真を今より大きく置けるようにしている。
   ・height:auto にすると object-fit:contain のレターボックスが無くなり実寸が大きくなる。
     縦長写真は伸びすぎるので、左側は min() で上限を付けて「少しだけ大きく」に留める。 */
@media (min-width: 1301px) {
  body.page-recruit .recruit-message-section { padding-bottom:70px !important; }
  body.page-recruit .recruit-message-inner { width:min(100%,1700px) !important; min-height:1000px !important; }
  body.page-recruit .message-decoration-photo { height:auto !important; }

  /* 左側3枚：カード左端の15px手前まで。少しだけ大きく（上限あり） */
  body.page-recruit .message-decoration-photo--p1 { left:0 !important; right:auto !important; top:20px !important;  width:min(calc(50% - 435px), 300px) !important; }
  body.page-recruit .message-decoration-photo--p3 { left:0 !important; right:auto !important; top:445px !important; width:min(calc(50% - 435px), 280px) !important; }
  body.page-recruit .message-decoration-photo--p5 { left:calc(50% - 395px) !important; right:auto !important; top:680px !important; width:min(calc(50% - 385px), 370px) !important; }

  /* 右側2枚：カード右端の15px先から。上限を付けず、余白いっぱいまで大きく */
  body.page-recruit .message-decoration-photo--p2 { left:auto !important; right:0 !important; top:0px !important;   width:calc(50% - 435px) !important; }
  body.page-recruit .message-decoration-photo--p4 { left:auto !important; right:0 !important; top:370px !important; width:calc(50% - 435px) !important; }
  body.page-recruit .message-decoration-photo--p6 { left:auto !important; right:calc(50% - 395px) !important; top:680px !important; width:min(calc(50% - 385px), 400px) !important; }
}

@media (max-width:1300px) {body.page-recruit .recruit-message-section { padding:70px 24px 60px; }body.page-recruit .recruit-message-inner { min-height:0; }body.page-recruit .message-photo-collage { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:48px; }body.page-recruit .message-photo-collage .message-decoration-photo { position:static !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; transform:none !important; width:100% !important; height:auto !important; filter:drop-shadow(0 8px 14px rgba(107,79,58,.10)); }body.page-recruit .message-photo-collage > div:nth-child(2) { margin-top:16px; }body.page-recruit .message-photo-collage > div:nth-child(3) { margin-top:-6px; }body.page-recruit .message-photo-collage > div:nth-child(5) { margin-top:10px; }body.page-recruit .message-photo-collage > div:nth-child(6) { margin-top:-8px; }
  }
@media (max-width:767px) {body.page-recruit .message-item { padding:28px 24px; }body.page-recruit .message-stack { gap:20px; }
  }
/* ★ position / height / width はインラインにも指定があるため !important 必須。
   無いと写真6枚が固定px配置のまま残り、1300px以下のコラージュ（2列グリッド）にならない。 */
@media (max-width:620px) {body.page-recruit #contact a[href^="tel:"] { width:100% !important; margin-inline:auto !important; }
  }
body.page-recruit .recruit-marquee-wrap { overflow:hidden; width:100%; }
body.page-recruit .recruit-marquee-track { display:flex; align-items:center; gap:28px; width:max-content; animation: recruit-marquee-scroll 50s linear infinite; will-change:transform; }
body.page-recruit .recruit-marquee-wrap:hover .recruit-marquee-track { animation-play-state:paused; }
body.page-recruit .recruit-photo-item { flex:0 0 280px; width:280px; aspect-ratio:3/4; border-radius:28px; overflow:hidden; }
body.page-recruit .recruit-photo-item img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes recruit-marquee-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (max-width:620px) {body.page-recruit .recruit-photo-item { flex:0 0 215px; width:215px; }body.page-recruit .recruit-marquee-track { gap:24px; }
  }
body.page-recruit .recruit-decoration { width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; pointer-events:none; background-repeat:repeat-x; background-position:center; background-size:auto 100%; }
body.page-recruit .recruit-decoration--top { height:clamp(58px,4.6vw,84px); background-image:url("assets/deco/top-bunting-compact.png"); }
body.page-recruit .recruit-decoration--bottom { height:clamp(38px,3.5vw,58px); background-image:url("assets/deco/bottom-flowers-cute-v2.png"); background-position:center bottom; }
@media (max-width:767px) {body.page-recruit .recruit-decoration--top { height:clamp(42px,12vw,58px); }body.page-recruit .recruit-decoration--bottom { height:clamp(28px,8vw,38px); }body.page-recruit .recruit-hero-heading__break { display:block; }body.page-recruit .msg-break { display:block; }
  }
@media (prefers-reduced-motion: reduce) {body.page-recruit .recruit-marquee-track { animation:none; }body.page-recruit .recruit-marquee-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  }
/* ==========================================================================
   12. プライバシーポリシー（page-privacy.php）
   privacy.dc.html は本文が短くフッターが浮くため、元データでは
   ラッパーを flex 縦並び＋本文 flex:1 にしてフッターを最下部へ固定していた。
   ヘッダー/フッター共通化のため、同じことを .page-wrap に対して行う。
   ★ テンプレート側で $body_class = 'page-privacy' を設定すること。
   ========================================================================== */

body.page-privacy .page-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Zen Kaku Gothic New', sans-serif;   /* このページだけ本文フォントが違う */
}
/* フッターの手前までを伸ばす（本文セクションの flex:1 はインラインで指定済み） */
body.page-privacy .page-wrap > .site-footer,
body.page-privacy .page-wrap > footer { flex: none; }

body.page-privacy .crumb-home:hover { color:#6FA862 !important; }

/* ==========================================================================
   13. 保護者様へ（page-parents.php）
   parents.dc.html の <helmet> を移植。body.page-parents でスコープ。
   ★ 認証はサーバ側（inc/parents-auth.php）。CSS/JSに正解パスワードは無い。
   ========================================================================== */

@keyframes shake { 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }

body.page-parents .page-wrap { background:#FCF5E8 !important; }
body.page-parents .crumb-home:hover { color:#6FA862 !important; }

body.page-parents #newsletter { padding-top:36px; }
body.page-parents .parent-gap-wave svg { height:clamp(64px,7.2vw,100px) !important; }
@media (max-width:900px) {
  body.page-parents #newsletter { padding-top:26px; }
  body.page-parents .parent-gap-wave svg { height:56px !important; }
}
@media (max-width:620px) {
  body.page-parents #newsletter { padding-top:22px; }
  body.page-parents .parent-gap-wave svg { height:40px !important; }
}

body.page-parents .handout-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
@media (max-width:960px) { body.page-parents .handout-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) { body.page-parents .handout-grid { grid-template-columns:1fr; } }

body.page-parents .req-row3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
@media (max-width:860px) { body.page-parents .req-row3 { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { body.page-parents .req-row3 { grid-template-columns:1fr; } }

body.page-parents .req-wide-cols { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:860px) { body.page-parents .req-wide-cols { grid-template-columns:1fr; gap:18px; } }

body.page-parents .handout-card:hover { transform:translateY(-6px); box-shadow:0 14px 28px rgba(122,92,68,.16) !important; }
body.page-parents .handout-card:focus-visible,
body.page-parents .req-download-card:focus-visible { outline:3px solid #6B4F3A; outline-offset:2px; }
body.page-parents .req-download-card:hover { box-shadow:0 8px 18px rgba(122,92,68,.12) !important; }

body.page-parents .doc-preview-wrap { position:relative; display:block; cursor:zoom-in; border:none; background:none; padding:0; width:100%; text-align:left; }
body.page-parents .doc-preview-wrap:focus-visible { outline:3px solid #5F8F55; outline-offset:3px; }
body.page-parents .doc-preview-hover-overlay { position:absolute; inset:0; z-index:3; border-radius:14px; background:rgba(58,45,36,.38); opacity:0; transition:opacity .25s ease; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; }
body.page-parents .doc-preview-wrap:hover .doc-preview-hover-overlay,
body.page-parents .doc-preview-wrap:focus-visible .doc-preview-hover-overlay { opacity:1; }

body.page-parents .dlg-input:focus-visible { outline:none; }
body.page-parents .dlg-input:focus { border-color:#B8667E !important; }
body.page-parents .dlg-eye-btn:focus-visible,
body.page-parents .dlg-close-btn:focus-visible,
body.page-parents .dlg-submit-btn:focus-visible,
body.page-parents .viewer-tab:focus-visible,
body.page-parents .viewer-action:focus-visible { outline:3px solid #B8667E; outline-offset:2px; }
body.page-parents .dlg-submit-btn:hover:not(:disabled) { background:#A65370 !important; }
body.page-parents #dlg-back:hover { background:#FBF4EA !important; }

/* 「大きく表示・印刷」からの印刷。資料だけを出す */
@media print {
  body.page-parents * { visibility:hidden; }
  body.page-parents .print-lightbox, body.page-parents .print-lightbox * { visibility:visible; }
  body.page-parents .print-lightbox { position:fixed; top:0; left:0; width:100% !important; height:auto !important; max-width:100% !important; margin:0; padding:0; }
  /* PDFを拡大表示しているときは各ページのcanvasも印刷対象にする */
  body.page-parents #lightbox-pages canvas { width:100% !important; height:auto !important; display:block; page-break-after:always; break-after:page; }
  body.page-parents .no-print { display:none !important; }
  @page { margin:8mm; }
}

/* 食育・給食：767px以下のモバイル用3枚クロスフェード */
@keyframes shokuMobileSlideFade {
  0%    { opacity:0; transform:scale(1.015); }
  9%    { opacity:1; transform:scale(1); }
  27.3% { opacity:1; transform:scale(1); }
  36.3% { opacity:0; transform:scale(1.015); }
  100%  { opacity:0; transform:scale(1.015); }
}
body.page-approach .shoku-mobile-slide { animation: shokuMobileSlideFade 9s ease-in-out infinite; }
body.page-approach .shoku-mobile-slide--1 { animation-delay: 0s; }
body.page-approach .shoku-mobile-slide--2 { animation-delay: 3s; }
body.page-approach .shoku-mobile-slide--3 { animation-delay: 6s; }
body.page-approach .shoku-mobile-slider.is-manual .shoku-mobile-slide { animation:none !important; opacity:0 !important; transition: opacity .8s ease-in-out, transform .8s ease-in-out; transform:scale(1); }
body.page-approach .shoku-mobile-slider.is-manual .shoku-mobile-slide.is-current { opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .shoku-mobile-slide { animation:none !important; transform:none !important; }
  body.page-approach .shoku-mobile-slide--2, body.page-approach .shoku-mobile-slide--3 { opacity:0 !important; }
}

/* 食育・給食：767px以下の給食写真3枚クロスフェード */
@keyframes shokuFoodSlideFade {
  0%    { opacity:0; }
  8%    { opacity:1; }
  27.3% { opacity:1; }
  35.3% { opacity:0; }
  100%  { opacity:0; }
}
body.page-approach .shoku-food-slide { animation: shokuFoodSlideFade 9s ease-in-out infinite; }
body.page-approach .shoku-food-slide--1 { animation-delay: 0s; }
body.page-approach .shoku-food-slide--2 { animation-delay: 3s; }
body.page-approach .shoku-food-slide--3 { animation-delay: 6s; }
body.page-approach .shoku-food-slider.is-manual .shoku-food-slide { animation:none !important; opacity:0 !important; transition:opacity .7s ease-in-out; }
body.page-approach .shoku-food-slider.is-manual .shoku-food-slide.is-current { opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .shoku-food-slide { animation:none !important; }
  body.page-approach .shoku-food-slide--2, body.page-approach .shoku-food-slide--3 { opacity:0 !important; }
}

/* --- 離乳食スライダー：PC・スマホ共通の1コンポーネント -------------------------
   .shoku-rinyu-slider は .shoku-block--weaning の「先頭の子」に置いてある。
   ・スマホ … 通常フローなので「スライダー → 見出し → 文章カード」＝従来と同じ並び
   ・PC     … 下の grid-template-areas で右カラムへ寄せる（DOM順は変えずに見た目だけ移動）
   切り替えは CSS アニメーションではなく js/main.js が .is-current を付け替えて行う。
   （タブ非表示・画面外での一時停止、reduced-motion 対応が CSS だけでは書けないため）
   ★画像は 1200x900・4:3 で切り抜き済み。object-fit:contain 以外で再トリミングしないこと。
     clip-path / mask-image / border-radius / 背景色 / 枠線 / 影 を足すのも禁止。 */
body.page-approach .shoku-rinyu-slider { display: block; }
body.page-approach .shoku-rinyu-slide {
  opacity: 0 !important;
  transition: opacity .7s ease-in-out;
}
body.page-approach .shoku-rinyu-slide.is-current { opacity: 1 !important; }

@media (min-width: 768px) {
  /* PC：見出しは全幅、その下を「文章カード｜スライダー」の2カラムにする。

     ★★ .shoku-block--weaning は「離乳食」だけでなく「食事のことば」ブロックまで
        内側に抱えている（マークアップ上の入れ子）。grid にすると、そこまで2カラムに
        巻き込まれてカードが細くなる。下の :not() ルールで必ず全幅に戻すこと。 */
  body.page-approach .shoku-block--weaning {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(330px, 26vw, 400px);
    grid-template-areas:
      "head head"
      "text slider";
    column-gap: clamp(24px, 3vw, 40px);
    /* ★ center にすると、背の高いスライダーに合わせて文章カードが行の中央へ落ち、
       「離乳食について」の見出しとの間が160px以上あいてしまう。上揃えにすること。 */
    align-items: start;
  }
  body.page-approach .shoku-block--weaning > h3 { grid-area: head; }
  body.page-approach .shoku-block--weaning > .shoku-weaning-grid { grid-area: text; }
  body.page-approach .shoku-block--weaning > .shoku-rinyu-slider {
    grid-area: slider;
    width: 100% !important;
    margin: 0 !important;
  }
  /* 離乳食の3要素以外（食事のことばのスライダー・カード群など）は従来どおり全幅 */
  body.page-approach .shoku-block--weaning > *:not(h3):not(.shoku-weaning-grid):not(.shoku-rinyu-slider) {
    grid-column: 1 / -1;
  }
  /* PCはマウス操作なのでドットの当たり判定を44pxも取る必要がない。
     セクションの高さを詰めるため小さくする（スマホ側は44pxのまま）。 */
  body.page-approach .shoku-rinyu-slider__dots { margin-top: 10px !important; }
  body.page-approach .shoku-rinyu-dot { width: 26px !important; height: 26px !important; }
}

@media (min-width: 1024px) {
  /* 写真を大きく見せるための拡大。
     新しい3枚は 1200x900 の canvas のうち、実際に絵があるのは横75.8%だけ
     （左右にそれぞれ約12%の透明余白が焼き込まれている）。
     そのため枠400pxだと見た目の写真は約303pxにしかならず、
     差し替え前の哺乳瓶写真（枠400px・不透明97.7%＝見た目391px）より小さく見えていた。

     枠を490pxにすると 490 x 0.758 = 見た目371px となり、差し替え前とほぼ同じ大きさになる。
     （560pxまで広げれば見た目425pxになるが、その分だけ「食事のことば」以降が
       さらに下へずれるため、園の指示で490pxに決めた 2026-09-01）
     広げる幅は「文章カードの右側に元から空いていた余白」から取っているので、
     文章カードは max-width:460px のまま・位置も左寄せのまま変わらない
     （1024pxでも 901-560相当... の計算上、テキスト側は最低461px残る）。
     ★これ以上広げると文章カードが460pxを割って形が変わるので、560pxを超えないこと。 */
  body.page-approach .shoku-block--weaning {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 34vw, 490px);
  }

  /* 文章カードと写真のあいだの余白を詰める。
     写真は左右に約12%ずつ透明余白を持つため、枠を右端に置くと
     「カード〜写真」が約308px、「写真〜右端」が約61pxと極端に偏る。
     position:relative でスライダーを左へずらして、左右の余白をほぼ均等にする。
     ★ずらすだけなのでレイアウト（高さ・他要素の位置）には一切影響しない。
       calc(12vw - 100px) は 1024px→約23px、1892px→約127px と、
       各幅で必要なずらし量にほぼ一致する式。 */
  body.page-approach .shoku-block--weaning > .shoku-rinyu-slider {
    position: relative;
    right: clamp(0px, calc(12vw - 100px), 135px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-approach .shoku-rinyu-slide { transition: none !important; }
}

/* 食事のことば：767px以下の3枚クロスフェード */
@keyframes shokuKotobaSlideFade {
  0%    { opacity:0; }
  8%    { opacity:1; }
  27.3% { opacity:1; }
  35.3% { opacity:0; }
  100%  { opacity:0; }
}
body.page-approach .shoku-kotoba-slide { animation: shokuKotobaSlideFade 9s ease-in-out infinite; }
body.page-approach .shoku-kotoba-slide--1 { animation-delay: 0s; }
body.page-approach .shoku-kotoba-slide--2 { animation-delay: 3s; }
body.page-approach .shoku-kotoba-slide--3 { animation-delay: 6s; }
body.page-approach .shoku-kotoba-slider.is-manual .shoku-kotoba-slide { animation:none !important; opacity:0 !important; transition:opacity .7s ease-in-out; }
body.page-approach .shoku-kotoba-slider.is-manual .shoku-kotoba-slide.is-current { opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .shoku-kotoba-slide { animation:none !important; }
  body.page-approach .shoku-kotoba-slide--2, body.page-approach .shoku-kotoba-slide--3 { opacity:0 !important; }
}

/* きずな：767px以下の活動写真3枚クロスフェード */
@keyframes kizunaSlideFade {
  0%    { opacity:0; }
  8%    { opacity:1; }
  27.3% { opacity:1; }
  35.3% { opacity:0; }
  100%  { opacity:0; }
}
body.page-approach .kizuna-slide { animation: kizunaSlideFade 9s ease-in-out infinite; }
body.page-approach .kizuna-slide--1 { animation-delay: 0s; }
body.page-approach .kizuna-slide--2 { animation-delay: 3s; }
body.page-approach .kizuna-slide--3 { animation-delay: 6s; }
body.page-approach .kizuna-photo-slider.is-manual .kizuna-slide { animation:none !important; opacity:0 !important; transition:opacity .7s ease-in-out; }
body.page-approach .kizuna-photo-slider.is-manual .kizuna-slide.is-current { opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-approach .kizuna-slide { animation:none !important; }
  body.page-approach .kizuna-slide--2, body.page-approach .kizuna-slide--3 { opacity:0 !important; }
}

/* トップ「園の取り組み」カード：スマホは横並び1カラム、タブレットは2カラム */
@media (max-width: 767px) {
  body.home .activities-grid { grid-template-columns:1fr !important; gap:12px !important; }
  body.home .admission-section { padding-top:56px !important; padding-bottom:64px !important; }
  body.home .hero-desc { font-size:16.5px !important; font-weight:500 !important; color:#7A6350 !important; }
  body.home .season-range { font-family:'Zen Maru Gothic' !important; font-weight:500 !important; font-size:16px !important; color:#8A7259 !important; }
  body.home .season-item { font-family:'Zen Maru Gothic' !important; font-weight:500 !important; }
  body.home .admission-lead { font-family:'Zen Maru Gothic' !important; font-weight:700 !important; font-size:16px !important; }
  body.home .menu-card-desc { font-size:13.5px !important; font-weight:500 !important; line-height:1.7 !important; color:#6B5A47 !important; }
  body.home .news-item-row { gap:8px !important; flex-wrap:wrap !important; padding:14px 16px !important; }
  body.home .news-item-date { width:auto !important; font-size:15px !important; font-weight:700 !important; color:#7A5C44 !important; }
  body.home .news-item-title { font-size:15px !important; font-weight:500 !important; line-height:1.6 !important; display:block !important; flex:1 0 100% !important; width:100% !important; margin-top:2px !important; padding-top:8px !important; border-top:1px dashed #E7D8C4 !important; }
  body.home .doc-card-note { font-size:14px !important; font-weight:500 !important; color:#7A6350 !important; }
  body.home .about-intro-text { font-size:16px !important; }
  body.home .access-section { padding-top:0 !important; }
  body.home .activity-card { flex-direction:row !important; align-items:center !important; text-align:left !important; gap:16px; padding:14px 18px !important; border-radius:20px !important; }
  body.home .activity-card__icon { width:58px !important; height:58px !important; margin-bottom:0 !important; }
  body.home .activity-card__body { flex:1; min-width:0; }
  body.home .activity-card__body h3 { font-size:15.5px !important; }
  body.home .about-lead-text { font-size:16px !important; }
  body.home .activity-card-desc { font-size:13px !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.home .activities-grid { grid-template-columns:repeat(2,1fr) !important; }
}

/* きずな：768px以上で食育の帯にわずかに重ねて余白を圧縮 */
@media (min-width: 768px) {
  body.page-approach .section-kizuna { margin-top:clamp(-40px,-2vw,-20px) !important; }
  body.page-approach .kizuna-panel { position:relative; z-index:1; }
}

/* 767px以下：本文フォント(Zen Maru Gothic w400)が細く見えるため一段太くする
   !important を付けないので、インラインで font-weight を持つ見出し系は従来のまま */
@media (max-width: 767px) {
  p, li, dd, dt, figcaption, td, th { font-weight:500; }
}

/* 採用：767px以下の先輩メッセージ写真スライダー（6枚・18秒周期） */
@keyframes recruitSlideFade {
  0%    { opacity:0; }
  4%    { opacity:1; }
  13.7% { opacity:1; }
  17.7% { opacity:0; }
  100%  { opacity:0; }
}
body.page-recruit .recruit-slide { animation: recruitSlideFade 18s ease-in-out infinite; }
body.page-recruit .recruit-slide--1 { animation-delay: 0s; }
body.page-recruit .recruit-slide--2 { animation-delay: 3s; }
body.page-recruit .recruit-slide--3 { animation-delay: 6s; }
body.page-recruit .recruit-slide--4 { animation-delay: 9s; }
body.page-recruit .recruit-slide--5 { animation-delay: 12s; }
body.page-recruit .recruit-slide--6 { animation-delay: 15s; }
body.page-recruit .recruit-photo-slider.is-paused .recruit-slide { animation-play-state: paused; }
body.page-recruit .recruit-photo-slider.is-manual .recruit-slide { animation:none !important; opacity:0 !important; transition:opacity .7s ease-in-out; }
body.page-recruit .recruit-photo-slider.is-manual .recruit-slide.is-current { opacity:1 !important; }
@media (prefers-reduced-motion: reduce) {
  body.page-recruit .recruit-slide { animation:none !important; }
  body.page-recruit .recruit-slide--2, body.page-recruit .recruit-slide--3, body.page-recruit .recruit-slide--4, body.page-recruit .recruit-slide--5, body.page-recruit .recruit-slide--6 { opacity:0 !important; }
  body.page-recruit .recruit-slide--1 { opacity:1 !important; }
}
@media (max-width: 767px) {
  body.page-recruit .message-photo-collage { display:none !important; }
  body.page-recruit .recruit-photo-slider { display:block !important; }
}

/* --- 1280px以上：SHUN先生のプロフィール写真を約2倍に ---
   インラインで width/height:clamp(110px,9vw,150px) が入っているので !important で上書き。
   min(300px, 50%) にすることで、横に並ぶ説明文の幅を潰しきらないようにしている
   （% は .dance-feature__profile のコンテンツ幅基準）。 */
@media (min-width: 1280px) {
  body.page-approach .dance-feature__profile img {
    width: min(300px, 50%) !important;
    /* ★ height を % にすると親の「高さ」基準になって縦長になるので、
       aspect-ratio で正方形を保つ（元のインラインは width=height の正方形指定）。 */
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* --- 1280px以上：慈光の保育の本文が園長先生の写真に潜り込むのを防ぐ ---
   園長写真は .jiko-panel__content の left:44% に絶対配置。本文の max-width が680px固定だと
   画面が広いほど写真の下へ食い込む（実測 1890pxで147px、2200pxで166px重なっていた）。
   本文側を「テキスト枠の68%」で頭打ちにして、どの幅でも写真の手前で折り返させる。 */
@media (min-width: 1280px) {
  /* 園長先生の写真を本文より上へ逃がしたので、本文は元の幅（680px）に戻せる */
  body.page-approach .jiko-panel__text .body-text { max-width:680px !important; }
  /* 写真は本文・リード文より上、見出しの右どなり（メイン写真の左）へ */
  body.page-approach .jiko-director-photo {
    top: clamp(0px, 1.5%, 24px) !important;
    left: 41% !important;
  }
}

/* 課外教室の見出しの上に敷く旗の帯（採用ページ .recruit-decoration--top と同じ画像）。
   ★ 親を全幅の .lessons-content-block にしてあるので width:100% だけでよい。
     100vw + 負マージンだと、% の基準が中央寄せコンテナのコンテンツ幅になり左右にズレる
     （実測で -24〜-220px ずれた）。100% なら画面幅に関わらず左右端にぴったり合う。 */
body.page-approach .lessons-bunting-band {
  width: 100%;
  margin-top: clamp(70px,4vw,72px);
  height: clamp(58px,4.6vw,84px);
  background-image: url("assets/deco/top-bunting-compact.png");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  pointer-events: none;
  flex: none;
}
/* スマホでは旗の帯は出さない（横幅が狭く、置き場所が中途半端になるため） */
@media (max-width: 767px) {
  body.page-approach .lessons-bunting-band { display: none !important; }
}

/* 緑の背景を上へ広げて、「専門の先生と…」の本文が緑の中に入るようにする。
   画像は object-fit:fill で .lessons-content-block の高さに合わせて伸びるため、
   上へ200px出して同じだけ高さを足す（＝下端は動かさない）。
   .lessons-green-bg が overflow:clip なので、はみ出した上部は切り取られる。 */
body.page-approach .lessons-green-bg > img:first-child {
  top: -200px !important;
  height: calc(100% + 200px) !important;
}

/* --- 1280px以上：課外教室まわりの装飾の置きどころ ---
   ・動物グループ（踊る/サッカー/スイミング）は本文（max-width:680px・中央）の右側の空きへ。
     空き幅 = (コンテンツ幅 - 左右padding - 680px) / 2 なので、その中に収まる幅で計算する。
   ・紙飛行機は同じ右の空きにいたので、ぶつからないよう左側の空きへ移す。
   ・太陽は少し下げる。 */
@media (min-width: 1280px) {
  /* .lessons-intro__grid（本文と同じ枠）を基準にして、本文の右の空きへ置く。
     空き幅 = (グリッド幅 - 本文680px) / 2 なので、width は calc(50% - 360px) で収まる。 */
  body.page-approach .lessons-airplane2 {
    left:auto !important;
    right:0 !important;
    top:6px !important;
    width:min(340px, calc(50% - 360px)) !important;
    height:auto !important;
    transform:none !important;
  }
  body.page-approach .lessons-airplane { left:12% !important; }
  body.page-approach .lessons-sun { top:clamp(115px,9.5vw,175px) !important; }
  body.page-approach .lessons-hedgehog { top:clamp(60px,6vw,110px) !important; }
}
/* 768〜1279px は左右に置ける幅が無いので出さない（純粋な装飾） */
@media (min-width: 768px) and (max-width: 1279px) {
  body.page-approach .lessons-airplane2 { display:none !important; }
}

/* スマホ：課外教室の見出しの左下（太陽の下・本文の上）の空きに置く。
   親（.lessons-intro__grid）の上端から bottom:100% で吊るすので、
   本文や見出しの位置・余白は一切動かない（absolute のまま）。 */
@media (max-width: 767px) {
  body.page-approach .lessons-airplane2 {
    display: block !important;
    position: absolute !important;
    left: -40px !important;
    right: auto !important;
    top: auto !important;
    bottom: 100% !important;
    margin-bottom: 8px !important;
    width: min(calc(50vw - 82px), 120px) !important;
    height: auto !important;
    transform: none !important;
    z-index: 2 !important;
  }
}

/* --- 1024px以上：教室の写真をPC用に差し替える ---
   ★ .lessons-gallery のグリッドは .lessons-cards と同一定義（max-width:1150px /
     padding:0 40px / repeat(3,minmax(0,300px)) / 同じ column-gap）。
     ここを書き換えると写真がカードの真上から外れるので絶対に触らないこと。
   ・サッカー: 1枚目は1列目の通常フローでカードの真上、2枚目は左の余白へ（1400px以上のみ）
   ・書き方  : PC用写真を3列目の通常フローでカードの真上（既存イラストは隠す）
   1023px以下は写真ラッパーが display:none のままで、くまも通常フローのまま。 */
@media (min-width: 1024px) {
  body.page-approach .lessons-soccer-photos {
    display:flex !important;
    position:relative;
    justify-content:center !important;
  }
  /* 2枚目は左に余白ができる1400px以上でだけ出す（下の @media 参照）。
     1399px以下はギャラリーが画面幅いっぱいで左に余白が無く、置くと画面外に出るため隠す
     ＝サッカーは「カードの真上に1枚」だけになる。 */
  body.page-approach .lessons-soccer-photos img:nth-child(2) { display:none !important; }

  /* スイミング写真は justify-self:start + translateX(-8%) で左寄りだったので、
     PCではカードの真上に来るよう中央寄せにする（回転はそのまま）。 */
  body.page-approach .lessons-gallery__photo--swim {
    justify-self:center !important;
    transform:rotate(-1deg) !important;
  }

  /* 書き方教室：既存イラストを隠し、PC用写真をカードの真上（通常フロー）に置く */
  body.page-approach .lessons-gallery__photo--kakikata-mobile { display:none !important; }
  body.page-approach .lessons-gallery__photo--kakikata-pc {
    display:block !important;
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    margin-bottom:0 !important;
  }

  body.page-approach .lessons-gallery__photo--bear {
    position:absolute !important;
    left:clamp(24px,3vw,60px) !important;
    top:clamp(-140px,-8vw,-90px) !important;
    bottom:auto !important;
    grid-column:auto !important;
    width:clamp(200px,15vw,280px) !important;
    height:auto !important;
    margin-bottom:0 !important;
    z-index:2; pointer-events:none;
  }
}

/* 1400px以上：ギャラリー左に余白ができるので、サッカー2枚目をそこへ置く。
   ・1枚目より大きく（狙いは1.6倍＝25.6vw）
   ・ただし左端からはみ出さないよう、使える余白 calc(50vw - 531px) で頭打ちにする
     （余白 = (100vw-1150)/2 + ギャラリーpadding40px - 画面端の余裕。
      rotate(2.5deg)で見かけ幅が約3%増えるぶんも見込んで 555px を引いている）
   ・右マージンは正の値にして1枚目と重ならないようにする */
@media (min-width: 1400px) {
  body.page-approach .lessons-soccer-photos img:nth-child(2) {
    display:block !important;
    position:absolute !important;
    right:100% !important;
    bottom:0 !important;
    margin-left:0 !important;
    margin-right:clamp(10px,1vw,24px) !important;
    width:min(clamp(200px, 25.6vw, 496px), calc(50vw - 555px)) !important;
    z-index:1 !important;
  }
}