@charset "UTF-8";

/* ============================================
   top.css — 愛媛幼稚園 トップページ
   ヘッダー ＋ ヒーロー（ファーストビュー）
============================================= */

/* ============================================
   変数
============================================= */
:root {
  /* ブランドカラー（緑基調） */
  --green:        #7cc24a;   /* 明るい葉っぱ緑（ボタン・バッジ） */
  --green-dark:   #5aa832;
  --green-deep:   #2f8f36;   /* ロゴの濃い緑 */

  /* テキスト */
  --ink:          #3a4038;   /* カード見出しの濃いチャコールグリーン */
  --ink-soft:     #5b6158;
  --sub:          #8f8f84;   /* サブ・小さめグレー */
  --label:        #9a9a90;

  /* カード・地面 */
  --card-bg:      #ffffff;
  --btn-beige:    #e7e1d2;
  --btn-yellow:   #f4e179;
  --accent-yellow:#f5d94b;

  /* 地面の緑（2トーン） */
  --ground-back:  #d3ecac;
  --ground-front: #bfe390;
  --ground-deep:  #a7d976;

  /* レイアウト */
  --wrap: 1360px;

  /* フォント */
  --font-base:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                "Yu Gothic", "Meiryo", sans-serif;
  --font-round: "Zen Maru Gothic", "Noto Sans JP", "Hiragino Maru Gothic ProN",
                sans-serif;
  --font-body-mobile: 13.5px;
}

/* ============================================
   リセット / ベース
============================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  color: var(--ink);
  line-height: 1.7;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  /* PC レイアウトの下限幅。これより狭くなると横スクロールバーが出て、
     1280px 時点の見た目を保つ（絶対配置ヘッダーの基準にするため position: relative）。
     モバイル（max-width: 1024px）では下記メディアクエリで解除する。 */
  position: relative;
  min-width: 1280px;
}

a   { text-decoration: none; color: inherit; cursor: pointer; }
p   { margin: 0; }
ul  { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.sp-only { display: none; }

/* クリック可能な要素（バナー・ボタン・リンク）はホバー時に手のカーソル */
a, button, [role="button"],
.garden-card, .garden-card__btn,
.promo-card, .promo-card__more,
.news-list__link, .news__more,
.rinen__link, .reason-card__more,
.header-cta, .global-nav__link,
.nav-toggle { cursor: pointer; }


/* ============================================
   ヘッダー（ヒーローに重ねて表示・白背景）
============================================= */
.site-header {
  /* スクロールしても上部に固定 */
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* body の下限幅に合わせ、狭幅時（横スクロール発生時）も内容と幅を揃える */
  min-width: 1280px;
}

/* 全ページ共通：幼稚園切り替え */
.garden-switcher { position:relative; z-index:221; display:grid; grid-template-columns:1fr 1fr; height:50px; color:#425044; font-family:var(--font-round); font-size:17px; font-weight:700; letter-spacing:.06em; }
.garden-switcher__button { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; padding:0 24px; transition:background-color .2s ease,color .2s ease; }
.garden-switcher__button--hoshioka { background:#eee7d4; }
.garden-switcher__button--sanbancho { background:#ffe976; }
.garden-switcher__button:hover,.garden-switcher__button:focus-visible { background:#70bf45; color:#fff; }
.garden-switcher__arrow { width:15px; height:15px; flex:0 0 15px; border-radius:50%; background-color:var(--green); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10'%3E%3Cpath d='M2 1.5v7L6.5 5Z' fill='%23fff' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:6px 8px; }
.garden-switcher__button.is-current { background:#70bf45; color:#fff; cursor:default; }
.garden-switcher__button.is-current .garden-switcher__arrow { background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='m2 5 2 2 4-4' fill='none' stroke='%2370bf45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:10px 10px; }
@media (max-width:1024px) { .garden-switcher { height:42px; font-size:14px; } .garden-switcher__button { padding-inline:12px; } }
@media (max-width:600px) { .garden-switcher { height:38px; font-size:12px; letter-spacing:.02em; } .garden-switcher__button { gap:6px; padding-inline:5px; text-align:center; } .garden-switcher__arrow { width:13px; height:13px; flex-basis:13px; } }

/* 白い帯。下端は波線（wave）で仕上げる */
.site-header__bar {
  position: relative;
  background: #ffffff;
  padding: 14px 40px 16px;
}

/* ヘッダー下端の波線
   園共通の理念（.rinen__wave）と同じ形の波を、CSS背景の repeat-x で並べる。
   タイル幅を px 固定（480px=1周期）にすることで、ブラウザ幅が変わっても
   波の周期・大きさが一定に保たれる（SVGの preserveAspectRatio=none のような伸縮をしない）。 */
.site-header__wave {
  display: block;
  width: 100%;
  height: 32px;
  /* 白バーの下に8px深く食い込ませ、上部の白ベタ帯がバーの白と重なるようにして隙間を完全に消す */
  margin-top: -8px;
  /* タイル上部に約9pxの白ベタ帯（塗りは y9 から波打つ）。viewBox 0 0 480 32 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='32' viewBox='0 0 480 32'%3E%3Cpath fill='%23ffffff' d='M0,0 L480,0 L480,27 L432,25.5 L384,21.5 L336,16.5 L288,12.5 L240,11 L192,12.5 L144,16.5 L96,21.5 L48,25.5 L0,27 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  /* タイル幅を狭めて波を1つ分増やす（周期 480px → 360px） */
  background-size: 360px 32px;
  filter: drop-shadow(0 5px 6px rgba(60, 80, 40, 0.06));
}

.site-header__inner {
  max-width: 1720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ロゴ（位置微調整） */
.site-header__logo { display: block; flex-shrink: 0; position: relative; top: 2px; }
.site-header__logo img { width: auto; height: 68px; }

/* ナビ＋ボタンのまとまり */
.header-right {
  display: flex;
  align-items: center;
  gap: 34px;
}

/* グローバルナビ */
.global-nav__list {
  display: flex;
  align-items: flex-end;
  gap: 30px;
}

.global-nav__list > li {
  position: relative;
}

.global-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-round);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.global-nav__link:hover { color: var(--green-dark); }

.global-nav__icon {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.global-nav__text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* ドロップダウンの下向き三角 */
.global-nav__caret {
  width: 10px;
  height: 7px;
  flex: 0 0 10px;
  margin-left: 2px;
  background: var(--green);
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  stroke: none;
}
.global-nav__caret path {
  display: none;
}

/* 園別サブメニュー */
.global-subnav {
  position: absolute;
  z-index: 210;
  top: calc(100% + 16px);
  left: 50%;
  width: max-content;
  min-width: 200px;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 30px rgba(50, 70, 36, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.global-subnav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

.global-subnav::after {
  content: "";
  position: absolute;
  inset: -18px 0 auto;
  height: 18px;
}

.global-nav__list > li:hover > .global-subnav,
.global-nav__list > li:focus-within > .global-subnav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.global-subnav a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 43px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--ink);
  font-family: var(--font-round);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color .2s, background .2s;
}

.global-subnav a::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7'%3E%3Cpath d='M1.5 1.5h5L4 5.5Z' fill='%23fff' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.global-subnav a:hover,
.global-subnav a:focus-visible {
  color: var(--green-dark);
  background: #f2f7ec;
}

@media (max-width: 1024px) {
  .global-nav { overflow-y: auto; }
  .global-nav__list > li { width: 100%; }
  .global-subnav {
    position: static;
    width: 100%;
    margin-top: 7px;
    padding: 5px 8px 8px 22px;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .global-subnav::before,
  .global-subnav::after { display: none; }
  .global-subnav a {
    min-height: 38px;
    padding-block: 6px;
    font-size: 13px;
  }
  .global-nav__list > li:hover > .global-subnav,
  .global-nav__list > li:focus-within > .global-subnav { transform: none; }
}

/* 見学のお申込みボタン */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;            /* 幅が狭くても縮めない（テキストの縦折れ防止） */
  white-space: nowrap;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  padding: 16px 30px;
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.header-cta:hover,
.header-cta:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(67, 132, 42, .24);
  filter: brightness(1.04);
}
.header-cta__icon {
  width: 30px;
  height: auto;
  transform-origin: 50% 100%;
  transition: transform .3s ease;
}
.header-cta:hover .header-cta__icon,
.header-cta:focus-visible .header-cta__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

/* 1360〜1440px 前後では、ロゴとCTAを少しコンパクトにして
   ナビ項目同士の余白を確保する。 */
@media (min-width: 1025px) and (max-width: 1500px) {
  .site-header__bar {
    padding-right: clamp(18px, 1.5vw, 22px);
    padding-left: clamp(18px, 1.5vw, 22px);
  }
  .site-header__inner {
    gap: 18px;
  }
  .site-header__logo img {
    height: 60px;
  }
  .header-right {
    gap: 20px;
  }
  .global-nav__list {
    gap: clamp(24px, 1.9vw, 28px);
  }
  .global-nav__link {
    font-size: clamp(15px, 1.08vw, 16px);
  }
  .global-nav__icon {
    height: 38px;
  }
  .global-nav__text {
    gap: 8px;
  }
  .header-cta {
    gap: 8px;
    padding: 14px 20px;
    border-radius: 16px;
    font-size: 15px;
  }
  .header-cta__icon {
    width: 27px;
  }
}

/* ハンバーガー（モバイル用・PCでは非表示） */
.nav-toggle { display: none; }


/* ============================================
   スクロール・フェードイン（下から上へ）
   セクションの背景・波線は動かさず、中のコンテンツだけを
   ふわっと持ち上げながらフェードイン（波線の境目から下のレイヤーが
   透けて見えるのを防ぐため、セクション自体はフェードしない）。
   JS有効時（html.js）のみ隠す → 表示域に入ったら .is-visible で表示。
   JS無効・失敗時はクラスが付かないため必ず表示される。
============================================= */
.js .scroll-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.js .scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* 視差効果を減らす設定のユーザーにはアニメーションなしで常時表示 */
@media (prefers-reduced-motion: reduce) {
  .js .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ============================================
   ヒーロー（ファーストビュー）
============================================= */
.hero {
  position: relative;
  overflow: hidden;
  /* 園切り替えボタンの追加高ぶん、写真・コピー・装飾を構図ごと下げる */
  margin-top: 50px;
  /* カードが写真の下枠から半分はみ出す分（155px）＋カードの影が
     overflow: hidden で切れないための余白（60px）。
     背景は次セクション（お知らせ）と同色にして地続きに見せる */
  --hero-overhang: 215px;
  padding-bottom: var(--hero-overhang);
  background: #f6f4ec;
}

@media (max-width: 1024px) {
  .hero { margin-top: 42px; }
}

@media (max-width: 600px) {
  .hero { margin-top: 38px; }
}

/* ============================================
   全ページ共通：説明本文の可読性調整
============================================= */
.garden-card__desc,
.promo-card__sub,
.rinen__lead,
.reason__lead,
.reason-card__text {
  font-size: 16.5px;
}

@media (max-width: 600px) {
  .garden-card__desc,
  .promo-card__sub,
  .rinen__lead,
  .reason__lead,
  .reason-card__text {
    font-size: var(--font-body-mobile);
  }
}

/* 背景写真
   高さを固定 px にして、ウィンドウの幅・高さが変わっても写真の見える高さ・範囲を一定に保つ。
   （100vh だとウィンドウの高さに追従して変わってしまうため固定にする）
   幅方向は object-fit: cover ＋ object-position で中央基準にトリミングされる。 */
.hero__bg {
  position: relative;
  width: 100%;
  height: 895px;   /* デザインリファレンス（1440px幅・写真下端まで）準拠 */
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
/* フォトギャラリー：フェードイン・フェードアウトで切り替え */
.hero__slide {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active {
  opacity: 1;
}
/* 視差効果を減らす設定のユーザーにはフェードなしで即時切り替え */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
/* 写真下端の波線区切り
   ヘッダー下端の波（.site-header__wave）と同じタイルを上下反転し、
   下のベージュ帯と同色で写真に食い込ませる。周期・振幅はヘッダーと同一 */
.hero__bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* SVG タイルはアスペクト比維持（480→360 で縦も 0.75 倍）で描画されるため、
     タイル下端に約4pxの透明帯ができる。6px 食い込ませて透明帯を写真の外
     （下のベージュ帯の上）へ逃がし、写真が細く覗く隙間を消す */
  bottom: -6px;
  height: 32px;
  z-index: 2;                /* 写真・暗幕（::after）より前 */
  transform: scaleY(-1);     /* 上下反転：ベタ帯が下・波が上を向く */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='32' viewBox='0 0 480 32'%3E%3Cpath fill='%23f6f4ec' d='M0,0 L480,0 L480,27 L432,25.5 L384,21.5 L336,16.5 L288,12.5 L240,11 L192,12.5 L144,16.5 L96,21.5 L48,25.5 L0,27 Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 360px 32px;
}

/* 写真をわずかに沈ませ、白文字を読みやすく */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 40, 20, 0.18) 0%, rgba(30, 40, 20, 0) 40%);
}

/* --- キャッチコピー（バッジとコピーを1行に横並び・中央寄せ） --- */
.hero__head {
  position: absolute;
  /* ヘッダー（約123px）より確実に下に来る固定オフセット。
     ％指定だと幅が狭まってヒーローが縮んだ際にヘッダーへ潜り込んでしまうため。 */
  top: 170px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 0 40px;
}

/* キャッチコピー背後の薄いグラデーションマスク
   （上＝黒／下＝透明で文字の視認性を上げつつ、下の子ども写真は暗くしすぎない） */
.hero__head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* %（コピー高さ基準）だと幅が狭まった際にマスク上端がヘッダーの波の下へ
     はみ出して横一線の境目が見えるため、ヒーロー上端（top: 170px の打ち消し）まで
     固定 px で伸ばし、境目を写真の上端に一致させて見えなくする */
  top: -170px;
  bottom: -70%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 15, 0.34) 0%,
    rgba(20, 30, 15, 0.20) 45%,
    rgba(20, 30, 15, 0) 100%
  );
}

/* 「学校法人 愛媛幼稚園」リボンバッジ
   中央の帯を前面に出し、左右の帯（尻尾）は後ろへ回して少し下げる */
.hero__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.hero__badge-end {
  position: relative;
  z-index: 1;
  width: auto;
  height: 2.1vw;
  min-height: 26px;
  display: block;
}
/* 尻尾を本体の裏へ潜り込ませ、さらに下へずらす */
.hero__badge-end--left  { margin-right: -1.1vw; transform: translateY(1.1vw); }
.hero__badge-end--right { margin-left:  -1.1vw; transform: translateY(1.1vw); }
.hero__badge-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: #7cc24a;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 1.35vw;
  letter-spacing: 0.06em;
  padding: 0.35vw 1.3vw;
  white-space: nowrap;
  border-radius: 3px;
}

/* メインコピー（中央寄せ） */
.hero__copy {
  position: relative;
  margin: 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 2.9vw;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(20, 40, 10, 0.35);
}

/* --- 左右の装飾（背景パーツ＋キャラクター）のステージ ---
   画面全幅・左右の端を基準に px で配置（デザインリファレンス 1440px 幅準拠） */
.hero__deco-layer {
  position: absolute;
  /* bottom は写真の下端（はみ出し余白の上）に合わせる */
  inset: 0 0 var(--hero-overhang);
  pointer-events: none;
  z-index: 4;                 /* 写真より前・カードより奥 */
}
.hero__deco {
  position: absolute;
  height: auto;
}

/* 左：白斜線サークル（左端で半分見切れる）／右：白三角サークル（右端で見切れる） */
.hero__deco--stripes   { left: -135px;  top: 460px;   width: 330px; opacity: 0.55; }
.hero__deco--triangles { right: -140px; bottom: 36px; width: 275px; opacity: 0.5; }   /* 下端の波にかからない高さ */

/* 画面幅 1440px 未満では「1440px 幅・中央基準」の固定ステージにする。
   各装飾は 1440px 時点の位置のまま動かず、
   はみ出した左右が .hero の overflow: hidden で切れる。 */
@media (max-width: 1440px) {
  .hero__deco-layer {
    left: 50%;
    right: auto;
    width: 1440px;
    transform: translateX(-50%);
  }
}

/* --- イラスト（カード幅＝1080px に合わせて中央固定） ---
   画面幅を変えてもリキッドで動かず、常にカードにくっついた位置を保つ */
.hero__buddies {
  position: absolute;
  left: 50%;
  bottom: 60px;               /* カード下端（.hero__cards の bottom）に揃える */
  transform: translateX(-50%);
  width: 100%;
  max-width: 1080px;
  height: 400px;
  pointer-events: none;
  z-index: 7;                 /* カードより前（上に重ねる） */
}
.hero__buddy {
  position: absolute;
  height: auto;
}
/* カード（bottom: 0 = セクション下端）に対する相対位置。
   カードが下がってもイラストはカードにくっついたまま追従する */
/* 左：ちょうちょ・草（glass3）・ワニ */
.hero__buddy--butterfly { left: -105px;  bottom: 200px; width: 58px; }
.hero__buddy--grass     { left: -158px;  bottom: 40px;  width: 44px; }   /* ワニの手と重ならない位置 */
.hero__buddy--alligator { left: -92px;   bottom: -3px;  width: 136px; }
/* 右：ハチ・花・ライオン */
.hero__buddy--bee       { right: -72px;  bottom: 262px; width: 60px; }
.hero__buddy--flower    { right: -120px; bottom: 238px; width: 40px; }
.hero__buddy--lion      { right: -143px; bottom: 10px;  width: 185px; }

/* --- 園振り分けカード --- */
.hero__cards {
  position: absolute;
  left: 50%;
  /* 写真の下枠からカードの約半分（155px）がはみ出す位置。
     下に 60px 残すことでカードの影が overflow: hidden で切れずに収まる */
  bottom: 60px;
  transform: translateX(-50%);
  z-index: 6;
  width: 100%;
  max-width: 1080px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;   /* 2枚のカードの高さを揃える */
}

.garden-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;            /* 内容（園名）で幅が広がらないようにして2枚を等幅に */
  background: var(--card-bg);
  border-radius: 28px;
  padding: 24px 34px 20px;
  box-shadow: 0 20px 44px rgba(40, 60, 20, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* カード全体がリンク：ホバーで少し浮き上がる */
.garden-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 52px rgba(40, 60, 20, 0.22);
}

/* カード上部：ラベル＋園名（丸写真は絶対配置で右上に重ねる） */
.garden-card__head {
  display: block;
  padding-right: 160px;
}
.garden-card__tag {
  font-size: 13px;
  font-weight: 500;
  color: var(--label);
  letter-spacing: 0.12em;
}
.garden-card__name {
  margin-top: 4px;
  margin-left: -10px;    /* アイコン＋園名を少し左へ寄せる */
  display: flex;
  align-items: center;
  gap: 3px;              /* アイコンと園名の余白を詰める */
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;   /* 園名は改行させず1行に収める */
}
/* 園名の左に添えるアクセントアイコン（星／お日様） */
.garden-card__mark {
  flex-shrink: 0;
  width: 46px;
  height: auto;
}
/* 短いアクセント下線（緑＋黄） */
.garden-card__line {
  display: block;
  width: 56px;
  height: 5px;
  margin-top: 22px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--green) 0 50%, var(--accent-yellow) 50% 100%);
}

/* 丸写真（右上・上端が枠からはみ出す・大きめ） */
.garden-card__photo {
  position: absolute;
  top: -30px;
  right: 10px;
  z-index: 2;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 6px 16px rgba(40, 60, 20, 0.18);
  background: #dfe6d3;
}
.garden-card__photo img { width: 100%; height: 100%; object-fit: cover; }

/* カード本文 */
.garden-card__catch {
  margin-top: 14px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.garden-card__desc {
  margin-top: 4px;
  margin-bottom: auto;   /* 余った縦スペースを吸収し、ボタンを下端に揃える */
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
  color: var(--sub);
  letter-spacing: 0.02em;
}

/* カードボタン（テキスト中央・右端に矢印でクリックできると分かる表示） */
.garden-card__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
  padding: 15px 44px;
  border-radius: 16px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: 0.03em;
  transition: filter 0.15s;
}
.garden-card__btn:hover { filter: brightness(0.96); }
.garden-card__btn--beige  { background: var(--btn-beige); }
.garden-card__btn--yellow { background: var(--btn-yellow); }
/* 右端の矢印（カードのホバーで少し右へ動く） */
.garden-card__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  color: var(--ink);
  transition: transform 0.18s ease;
}
.garden-card:hover .garden-card__btn-arrow {
  transform: translate(4px, -50%);
}


/* ============================================
   お知らせ（Topics）
============================================= */
.news {
  position: relative;
  overflow: hidden;
  background: #f6f4ec;
  padding: 76px 0 72px;
}

/* 背景の木（右上） */
.news__deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.news__deco--trees { top: 44px; right: 60px;  width: 118px; }
.news__deco--tree2 { top: 96px; right: 150px; width: 92px;  }

.news__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: 64px;
  align-items: start;
}

/* --- 左：見出し＋マスコット --- */
.news__label {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.news__title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: 0.12em;
  color: var(--ink);
  margin: 0;
}

/* マスコット（猫のイラスト・チューリップ） */
.news__mascot {
  position: relative;
  margin-top: 18px;
  height: 180px;
}
.news__animal {
  position: absolute;
  left: 74px;
  bottom: 0;
  width: 122px;
}
.news__tulip {
  position: absolute;
  width: 30px;
}
.news__tulip--l { left: 6px;   bottom: 78px; }
.news__tulip--r { left: 190px; bottom: 40px; }

/* --- 右：お知らせリスト --- */
.news-list {
  /* 一番上の点線は非表示（各項目の下線のみで区切る） */
}
.news-list__item {
  border-bottom: 1px dashed #cfcabb;
}
.news-list__link {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 6px;
  transition: color 0.15s;
}
.news-list__link:hover { color: var(--green-dark); }
/* 記事タイトルはホバーで緑に変わる（テキストに明示色があるため個別指定） */
.news-list__text { transition: color 0.15s; }
.news-list__link:hover .news-list__text { color: var(--green-dark); }
.news-list__date {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.news-list__tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  padding: 4px 12px;
  border-radius: 5px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}
.news-list__tag--all       { background: #6f92c6; }
.news-list__tag--hoshioka  { background: #f2a0bd; }
.news-list__tag--sanbancho { background: #f1b24c; }
.news-list__text {
  font-family: var(--font-round);
  font-size: 16px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 一覧を見る */
.news__more {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0 auto;
  width: fit-content;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  transition: color 0.15s;
}
.news__more:hover { color: var(--green-dark); }

.icon-play { width: 28px; height: 28px; flex-shrink: 0; }

@media (max-width: 680px) {
  .icon-play {
    width: 22px;
    height: 22px;
  }
}

/* 丸型リンクアイコン内の三角形は全ページ共通で角丸にする */
.icon-play path[fill="#fff"],
.icon-play path[fill="#ffffff"] {
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.icon-play path[fill="#5aa832"] { stroke: #5aa832; }
.icon-play path[fill="#7bbf5a"] { stroke: #7bbf5a; }
.icon-play path[fill="#5aa832"],
.icon-play path[fill="#7bbf5a"] {
  stroke-width: 1.8;
  stroke-linejoin: round;
}

/* --- 下部：プロモバナー2枚 --- */
.promo {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.promo-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* 写真の実寸（186px）に高さを固定 → 写真が cover で上下ぴったり収まり隙間が出ない */
  height: 186px;
  border-radius: 22px;
  color: #fff;
  /* 影はぼかしではなく、下に3pxだけ濃い緑を出して立体感を表す */
  box-shadow: 0 3px 0 rgba(60, 100, 30, 0.35);
  transition: transform 0.15s, filter 0.15s, box-shadow 0.15s;
}
/* ホバーで縦横1pxずつ沈み、その分ベタ影を詰めて押し込まれたように見せる */
.promo-card:hover {
  filter: brightness(1.03);
  transform: translate(1px, 1px);
  box-shadow: 0 2px 0 rgba(60, 100, 30, 0.35);
}
.promo-card--a {
  background: linear-gradient(135deg, #7ec152 0%, #6bb544 100%);
  box-shadow: 0 3px 0 #4d9531;   /* カード色より濃い緑の底面 */
}
.promo-card--b {
  background: linear-gradient(135deg, #a7d06a 0%, #96c757 100%);
  box-shadow: 0 3px 0 #74ab3d;
}

.promo-card__body {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 32px 0 32px 40px;
}
.promo-card__title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.promo-card__sub {
  margin-top: 8px;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0.95;
}
.promo-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
}

/* 写真エリア（アーチ形は PNG 側に含まれる）。
   写真はトリミングせずそのまま（幅100%・縦横比維持）表示し、少し下げて上に余白を作る。
   カード高さより下にはみ出た分は overflow: hidden でマスクして消す。 */
.promo-card__photo {
  flex: 0 0 40%;
  max-width: 240px;
  align-self: stretch;
  overflow: hidden;
}
.promo-card__photo img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 18px;   /* 少し下げる（上の余白） */
}

/* ============================================
   園共通の理念（Philosophy）
============================================= */
.rinen {
  position: relative;
  overflow: hidden;
  min-height: 712px;
  padding: 122px 20px 130px;
  background: #eeecc5;
}

/* 上下の波線（セクション境界） */
.rinen__wave {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 26px;
  display: block;
  z-index: 4;
  pointer-events: none;
}
.rinen__wave--top    { top: 0; }
.rinen__wave--bottom { bottom: 0; }
.rinen__wave--top path    { fill: #f6f4ec; }
.rinen__wave--bottom path { fill: #f7f5ed; }

/* 装飾ステージ（最大1440pxで中央固定・本文の背面） */
.rinen__stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 1440px;
  margin-inline: auto;
  pointer-events: none;
  z-index: 1;
}

.rinen-deco { position: absolute; height: auto; }
.rinen-deco--tri      { left: 54px;   top: 66px;  width: 104px; }
/* シカ：縦長素材。小さめにして足元の位置はライオン時代と揃える */
.rinen-deco--deer     { left: 215px;  top: 108px; width: 120px; }
.rinen-deco--flower   { left: 100px;  top: 250px; width: 44px;  }
.rinen-deco--balloon  { left: 214px;  top: 330px; width: 58px;  }
.rinen-deco--boy      { left: 326px;  top: 496px; width: 92px;  z-index: 3; }
/* リス・斜線は右写真と同じ右端基準にして、幅が変わっても写真との位置関係を保つ */
/* リス：右写真の左端をまたぎ、左へはみ出させる（写真より前面） */
.rinen-deco--squirrel { right: 210px; left: auto; top: 110px; width: 122px; z-index: 3; }
.rinen-deco--lion-mobile { display: none; }
/* 斜線パーツ：1.6倍・写真の左下に少し重ねる（右へ寄せて重なりを深める） */
.rinen-deco--stripe   { right: 200px; left: auto; top: 296px; width: 157px; }
/* 右側の装飾は全て右端基準にそろえ、幅が狭くても位置関係を保つ（音符が消えない・芝生とカバが重ならない） */
.rinen-deco--onpu     { right: 32px;  left: auto; top: 428px; width: 36px;  }
/* カバ：縮小（縦長のためライオン相当の見た目）＋芝生と重ならないよう右へ */
.rinen-deco--hippo    { right: 140px; left: auto; top: 452px; width: 106px; }
.rinen-deco--grass    { right: 352px; left: auto; top: 540px; width: 62px;  }

/* 丸写真（左右の端で見切れる） */
.rinen-photo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: #dfe6d3;
  box-shadow: 0 8px 20px rgba(60, 70, 30, 0.08);
}
.rinen-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 左写真：拡大して気球・男の子に重ね、その分やや下へ */
.rinen-photo--left  { left: -44px;  top: 414px; width: 410px; height: 410px; }
/* 右写真：少し小さく・少し左へ寄せる */
.rinen-photo--right { right: -16px; top: 60px;  width: 262px; height: 262px; }

/* --- 本文 --- */
.rinen__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* リボンバッジ（緑・共通） */
.ribbon-badge { display: inline-flex; align-items: center; }
.ribbon-badge__end {
  position: relative;
  z-index: 1;
  height: 34px;
  width: auto;
  display: block;
}
.ribbon-badge__end:first-child { margin-right: -12px; transform: translateY(8px); }
.ribbon-badge__end:last-child  { margin-left:  -12px; transform: translateY(8px); }
.ribbon-badge__body {
  position: relative;
  z-index: 2;
  background: #7cc24a;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  padding: 5px 18px;
  border-radius: 3px;
}
/* 園共通の理念バッジ：文字色を淡い黄色に（リファレンス準拠） */
.rinen .ribbon-badge__body { color: #f7ee9a; }

/* 見出し（緑＋点線アンダーライン。下線は行ごとの文字幅に合わせる） */
.rinen__title {
  margin: 30px auto 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.rinen__title .is-green { color: #6bb23c; }
.rinen__title-line {
  display: block;
  width: fit-content;
  margin: 0 auto;
  white-space: nowrap;
  padding: 0 34px 16px;
  border-bottom: 2px dotted #b0a566;
}
.rinen__title-line + .rinen__title-line { margin-top: 18px; }

/* リード文（全丸ゴシック・色は濃いめ） */
.rinen__lead {
  margin-top: 34px;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: #5f6156;
}

/* リンク */
.rinen__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 28px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--ink);
  transition: color 0.2s;
}
.rinen__link:hover { color: var(--green-dark); }

/* Philosophy：タブレット以下 */
@media (max-width: 1024px) {
  .rinen {
    min-height: 0;
    padding: 92px 24px 104px;
  }
  .rinen__stage {
    opacity: 0.45;
  }
  .rinen-photo--left {
    left: -120px;
    top: 390px;
    width: 320px;
    height: 320px;
  }
  .rinen-photo--right {
    right: -92px;
    top: 78px;
    width: 210px;
    height: 210px;
  }
  .rinen-deco--deer,
  .rinen-deco--squirrel,
  .rinen-deco--stripe,
  .rinen-deco--hippo,
  .rinen-deco--grass {
    transform: scale(0.82);
    transform-origin: center;
  }
  .rinen__title {
    font-size: 34px;
  }
  .rinen__title-line {
    padding-inline: 20px;
  }
}

/* Philosophy：スマホ */
@media (max-width: 680px) {
  .rinen {
    padding: 66px 22px 74px;
  }
  .rinen__stage {
    display: block;
    opacity: 1;
  }
  .rinen__stage > * {
    display: none;
  }
  .rinen__stage .rinen-deco--deer,
  .rinen__stage .rinen-deco--lion-mobile,
  .rinen__stage .rinen-deco--tri,
  .rinen__stage .rinen-deco--stripe,
  .rinen__stage .rinen-deco--onpu,
  .rinen__stage .rinen-deco--grass {
    display: block;
    transform: none;
  }
  .rinen__stage .rinen-deco--deer {
    top: 38px;
    left: 12px;
    width: 62px;
  }
  .rinen__stage .rinen-deco--lion-mobile {
    top: auto;
    right: 10px;
    bottom: 28px;
    width: 76px;
  }
  .rinen__stage .rinen-deco--tri {
    top: 18px;
    right: -8px;
    left: auto;
    width: 78px;
    opacity: .52;
  }
  .rinen__stage .rinen-deco--stripe {
    top: auto;
    right: auto;
    bottom: 12px;
    left: 8px;
    width: 82px;
    opacity: .58;
  }
  .rinen__stage .rinen-deco--onpu {
    top: auto;
    right: 18px;
    bottom: 118px;
    width: 27px;
  }
  .rinen__stage .rinen-deco--grass {
    top: auto;
    right: 82px;
    bottom: 18px;
    width: 42px;
  }
  .rinen__title {
    margin-top: 24px;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .rinen__title-line {
    width: fit-content;
    max-width: 100%;
    padding: 0;
    white-space: nowrap;
    border-bottom: none;
  }
  .rinen__title-line + .rinen__title-line {
    margin-top: 14px;
  }
  .rinen__lead {
    margin-top: 26px;
    font-size: 14px;
    line-height: 1.95;
    text-align: left;
  }
  .rinen__lead br {
    display: none;
  }
  .rinen__lead-ending {
    white-space: nowrap;
  }
  .rinen__link {
    margin-top: 24px;
    font-size: 15px;
  }
  .reason__lead,
  .reason-card__text,
  .policy__lead,
  .life-card__text,
  .adm-card__text,
  .garden-card__desc {
    text-align: left;
  }
}


/* ============================================
   レスポンシブ
============================================= */
@media (max-width: 1280px) {
  .global-nav__list { gap: 20px; }
  .global-nav__link { font-size: 15px; }
  .global-nav__icon { height: 40px; }
}

/* PCナビの最小幅付近でも、長い「入園案内と各種費用」と申込ボタンを画面内に収める */
@media (min-width: 1025px) and (max-width: 1280px) {
  .site-header__inner { gap: 14px; }
  .site-header__logo img { height: 58px; }
  .header-right { gap: 16px; }
  .global-nav__list { gap: 14px; }
  .global-nav__link { font-size: 14px; }
  .global-nav__icon { height: 34px; }
  .header-cta { gap: 8px; padding: 13px 18px; font-size: 14px; }
}

/* 横スクロール帯（1025〜1279px）では、ヒーローのキャッチコピー・バッジ・装飾の
   vw 依存サイズを 1280px 時点の px に固定し、ヘッダーと同じく 1280px の見た目を保つ
   （vw のままだと画面幅に追従して縮み、固定にならないため）。 */
@media (min-width: 1025px) and (max-width: 1279px) {
  .hero__badge-end        { height: 26.9px; }
  .hero__badge-end--left  { margin-right: -14.1px; transform: translateY(14.1px); }
  .hero__badge-end--right { margin-left:  -14.1px; transform: translateY(14.1px); }
  .hero__badge-body       { font-size: 17.3px; padding: 4.5px 16.6px; }
  .hero__copy             { font-size: 37.1px; }
}

/* ハンバーガーへの切替は、レイアウトが縦積みへ切り替わる 1024px に合わせる。
   1025〜1279px は横スクロールで 1280px の見た目を保つため、PC ナビ（コンパクト表示）を維持する。 */
@media (max-width: 1024px) {
  .pc-only { display: none !important; }
  .sp-only { display: inline !important; }

  .global-nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 24px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(40, 60, 20, 0.16);
    padding: 10px;
    z-index: 200;
  }
  .global-nav.is-open { display: block; }
  .global-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .global-nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 16px;
    font-size: 15px;
    border-radius: 8px;
  }
  .global-nav__link:hover { background: #f2f7ec; }
  .global-nav__icon { height: 26px; width: 30px; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
  }
  .nav-toggle__bar {
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--green-dark);
  }
  .header-cta { padding: 13px 22px; font-size: 15px; }
}

@media (max-width: 1024px) {
  /* モバイル（縦積み）レイアウトでは下限幅を解除し、通常の可変レイアウトに戻す */
  body { min-width: 0; }
  .site-header { min-width: 0; }
  .site-header__bar {
    z-index: 220;
  }
  .site-header__inner {
    gap: 16px;
  }
  .site-header__logo,
  .nav-toggle {
    position: relative;
    z-index: 230;
  }
  .header-right {
    gap: 16px;
  }

  /* PCナビを全画面オーバーレイ型のモバイルナビへ */
  .global-nav {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 58px 28px 36px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 0.28s ease,
      visibility 0.28s ease,
      transform 0.28s ease;
  }
  .global-nav.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .global-nav__list {
    width: min(100%, 420px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .global-nav__link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: #f6f8ef;
    border-radius: 14px;
    font-size: 17px;
  }
  .global-nav__text {
    gap: 10px;
  }
  .global-nav__icon {
    width: 34px;
    height: 30px;
  }
  .header-cta { display: none; }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
  }
  .nav-toggle__bar {
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 auto;
    border-radius: 2px;
    background: var(--green-dark);
    transition:
      transform 0.24s ease,
      opacity 0.18s ease;
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* モバイルナビ：項目を詰め、サブメニューはタップ時だけ展開する */
  .global-nav {
    flex-direction: column;
    align-items: stretch;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 130px 20px calc(86px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .global-nav__list {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: 4px;
  }
  .global-nav__link {
    min-height: 58px;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 15px;
  }
  .global-nav__icon {
    width: 28px;
    height: 26px;
  }
  .global-nav__text {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .global-nav__caret {
    width: 6px;
    height: 9px;
    flex-basis: 6px;
    margin-left: auto;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transition: transform .2s ease;
  }
  .global-subnav {
    display: none;
  }
  .global-nav__list > li.is-subnav-open > .global-subnav {
    display: block;
    margin: 6px 0 8px;
    padding: 4px 8px 6px 28px;
    background: transparent;
  }
  .global-subnav a {
    min-height: 44px;
    padding: 9px 8px;
    font-size: 13px;
  }
  .global-subnav li:not(:last-child) {
    border-bottom: 2px dotted #cbd8bd;
  }
  .global-subnav a::before {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
    background-size: 6px 6px;
  }

  .hero__cards {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    z-index: 5;
    grid-template-columns: 1fr;
    max-width: 640px;
    gap: 38px;
    margin: -60px auto 0;
    padding: 0 20px 40px;
  }
  /* モバイルはカードが通常フローのため、はみ出し余白は不要・背景は従来の薄緑 */
  .hero { padding-bottom: 24px; background: #eef3e6; }
  /* 写真下端の波はモバイルの背景色（薄緑）に合わせる */
  .hero__bg::before {
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='32' viewBox='0 0 480 32'%3E%3Cpath fill='%23eef3e6' d='M0,0 L480,0 L480,27 L432,25.5 L384,21.5 L336,16.5 L288,12.5 L240,11 L192,12.5 L144,16.5 L96,21.5 L48,25.5 L0,27 Z'/%3E%3C/svg%3E");
  }
  /* モバイルは縦積みレイアウトのため写真高さは可変に戻す */
  .hero__bg {
    z-index: 1;
    height: auto;
    aspect-ratio: 5 / 4;
    min-height: 470px;
  }
  .hero__bg img {
    object-position: center 42%;
  }
  .hero__deco-layer,
  .hero__buddies { display: none; }

  /* コピーは縦積み・折り返し可
     top の % 基準は .hero 全体（カード込み）の高さになってしまうため、
     写真の高さ（= max(80vw, 440px)：aspect-ratio 5/4 と min-height 440px）から
     計算し、写真下端の 230px 上に固定する（狭幅でもカードに重ならない） */
  .hero__head {
    display: none;
    top: 170px;
    flex-direction: column;
    gap: 12px;
  }
  /* top: 34%（ヒーロー高さ基準）のため -170px では足りず、マスク上端の境目が
     写真の途中に見えてしまう。ヒーロー上端より確実に上（34% の最大値≒280px 超）まで
     伸ばし、.hero の overflow: hidden で写真上端にクリップさせて見えなくする */
  .hero__head::before { top: -300px; }
  .hero__copy {
    font-size: 28px;
    white-space: normal;
    text-align: center;
  }
  .hero__badge-body { font-size: 15px; }
  .hero__badge-end { height: 32px; }

  /* お知らせ：縦積み */
  .news { padding: 56px 0 56px; }
  .news__inner {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 0 24px;
  }
  .news__deco--trees { top: 24px; right: 24px;  width: 92px; }
  .news__deco--tree2 { top: 66px; right: 96px;  width: 72px; }
  .news__mascot { display: none; }
  .news__title { font-size: 32px; }
  .news__more { margin-top: 18px; }

  .promo {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
    padding: 0 24px;
  }
  .promo-card__title { font-size: 22px; }
}

@media (max-width: 1024px) {
  .site-header__wave,
  .rinen__wave,
  .policy__wave,
  .life__wave,
  .admission__wave,
  .fcontact__wave {
    height: 26px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 26px;
  }

  .site-header__wave {
    background-size: 100% 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .hero__bg::before {
    height: 26px;
    background-repeat: no-repeat;
    background-size: 100% 26px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23eef3e6' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .rinen__wave path,
  .policy__wave path,
  .life__wave path,
  .admission__wave path,
  .fcontact__wave path {
    display: none;
  }

  .rinen__wave--bottom {
    transform: scaleY(-1);
  }

  .policy__wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f5ed' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .rinen__wave--top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f4ec' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .rinen__wave--bottom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f5ed' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .life__wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f4ea' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .admission__wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f7f4ea' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }

  .fcontact__wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23e7e6b3' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }
}

@media (max-width: 600px) {
  .site-header__bar { padding: 5px 18px 2px; }
  .site-header__wave {
    height: 18px;
    background-size: 100% 18px;
  }
  .site-header__inner { gap: 10px; }
  .site-header__logo {
    min-width: 0;
  }
  .site-header__logo img {
    width: auto;
    height: 40px;
    max-width: min(52vw, 188px);
    object-fit: contain;
  }
  .header-right { gap: 10px; }
  .header-cta {
    width: 46px;
    height: 46px;
    justify-content: center;
    padding: 0;
    border-radius: 14px;
  }
  .header-cta span { display: none; }
  .header-cta__icon { width: 27px; }
  .hero__copy { font-size: 26px; }
  .hero__head {
    padding: 0 22px;
  }
  .hero__badge { font-size: 15px; }
  .hero__badge-body {
    font-size: 14px;
    padding: 5px 14px;
  }
  .hero__badge-end { height: 28px; }
  .garden-card { padding: 28px 24px 26px; }
  .garden-card__head { padding-right: 94px; }
  .garden-card__name {
    margin-left: -6px;
    gap: 1px;
    font-size: 24px;
  }
  .garden-card__mark { width: 38px; }
  .garden-card__photo { width: 96px; height: 96px; }
  .garden-card__catch { font-size: 18px; }
  .garden-card__desc { font-size: 14px; }
  .garden-card__btn {
    padding: 14px 38px 14px 18px;
    font-size: 15px;
    border-radius: 14px;
  }
  .garden-card__btn-arrow { right: 16px; }

  /* お知らせ：狭幅調整 */
  .news__deco--trees {
    top: 34px;
    right: 22px;
    width: 70px;
  }
  .news__deco--tree2 {
    top: 70px;
    right: 84px;
    width: 54px;
  }
  .news__label {
    font-size: 15px;
  }
  .news__title {
    font-size: 28px;
  }
  .news-list__link { flex-wrap: wrap; gap: 8px 14px; padding: 16px 4px; }
  .news-list__text { flex-basis: 100%; white-space: normal; }
  .promo-card__body {
    min-height: 100%;
    padding: 22px 24px;
  }
  /* 狭幅では文字の折り返しでカードが伸びるため高さ固定を解除 */
  .promo-card {
    align-items: stretch;
    height: auto;
    min-height: 178px;
  }
  .promo-card__photo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    max-width: 180px;
    height: 48%;
    min-height: 96px;
    overflow: visible;
  }
  .promo-card__photo img {
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: contain;
    object-position: right bottom;
  }
  .promo-card__title {
    white-space: nowrap;
  }
  .promo-card__sub {
    max-width: 66%;
    line-height: 1.55;
  }
  .promo-card__more {
    position: relative;
    z-index: 2;
    margin-top: 18px;
  }
}

@media (max-width: 374px) {
  .site-header__bar { padding-inline: 14px; }
  .site-header__logo img {
    height: 40px;
    max-width: 48vw;
  }
  .header-cta,
  .nav-toggle {
    width: 40px;
    height: 40px;
  }
  .hero__copy { font-size: 23px; }
  .rinen__title { font-size: 19.5px; }
  .garden-card { padding: 26px 20px 24px; }
  .garden-card__head { padding-right: 78px; }
  .garden-card__name { font-size: 21px; }
  .garden-card__mark { width: 32px; }
  .garden-card__photo {
    width: 82px;
    height: 82px;
  }
  .garden-card__btn { font-size: 14px; }
  .promo-card__title { font-size: 20px; }
  .promo-card__sub { max-width: 68%; }
  .promo-card {
    min-height: 168px;
  }
  .promo-card__body {
    padding: 20px 22px;
  }
  .promo-card__photo {
    width: 40%;
    min-height: 90px;
  }
}


/* ============================================
   共通：リボンバッジ（見出し上の緑の帯）
============================================= */
.ribbon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ribbon-badge__end {
  position: relative;
  z-index: 1;
  width: auto;
  height: 30px;
  display: block;
}
.ribbon-badge__end:first-child { margin-right: -10px; transform: translateY(9px); }
.ribbon-badge__end:last-child  { margin-left:  -10px; transform: translateY(9px); }
.ribbon-badge__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  padding: 6px 20px;
  white-space: nowrap;
  border-radius: 3px;
}


/* ============================================
   保護者に最も選ばれている理由（Reason）
============================================= */
.reason {
  position: relative;
  overflow: hidden;
  background: #f7f5ed;
  padding: 88px 0 96px;
}

/* 背景の幾何パターン装飾 */
.reason__pattern {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.reason__pattern--tri {
  top: 0;
  right: 0;
  width: 320px;
  /* 角側を中心にハードな円形で切り出し（ベタ・切れなしのドーム） */
  -webkit-mask-image: radial-gradient(circle 290px at 100% 34%, #000 99%, transparent 100%);
          mask-image: radial-gradient(circle 290px at 100% 34%, #000 99%, transparent 100%);
}
.reason__pattern--stripe { top: 845px; left: -24px; width: 173px; }

/* --- 見出し --- */
.reason__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}
.reason__title {
  margin: 22px 0 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--ink);
  /* リファレンス：見出し下に破線 */
  display: inline-block;
  padding-bottom: 22px;
  border-bottom: 2px dashed #c9d3bd;
}
.reason__title .is-green { color: var(--green-dark); }

.reason__lead {
  margin: 22px 0 0;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* --- カード群 --- */
.reason__cards {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 54px auto 0;
  padding: 0 40px;
}

/* 装飾イラスト（カードステージ基準に絶対配置） */
.reason__illust { position: absolute; z-index: 3; pointer-events: none; }
.reason__illust--sun       { top: -44px; left: 4px;  width: 92px; }
.reason__illust--kids      { bottom: -44px; left: -6px; width: 168px; height: 112px; }
.reason__kid               { position: absolute; bottom: 0; }
.reason__kid--girl         { width: 80px; left: 0;   }
.reason__kid--boy          { width: 80px; left: 88px; }
.reason__illust--alligator { bottom: -44px; right: -30px; width: 126px; }

/* カード共通 */
.reason-card {
  position: relative;
  background: var(--card-bg);
  border-radius: 20px;
  /* ぼかしなしのソリッド影を右下へ落とす */
  box-shadow: 7px 8px 0 rgba(199, 192, 172, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* ホバーで縦横1pxずつ沈み、影を1pxずつ詰めて押し込まれたように見せる */
.reason-card:hover {
  transform: translate(1px, 1px);
  box-shadow: 6px 7px 0 rgba(199, 192, 172, 0.55);
}
/* 写真はカード内側に余白をとった角丸インセットで配置 */
.reason-card__photo {
  display: block;
  overflow: hidden;
  border-radius: 14px;
}
.reason-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reason-card__title {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--ink);
}
/* 短いアクセント下線（黄→緑） */
.reason-card__bar {
  display: block;
  width: 56px;
  height: 5px;
  margin: 16px 0 18px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-yellow) 0 50%, var(--green) 50% 100%);
}
.reason-card__text {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
/* 「詳しく見る」リンク */
.reason-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.15s;
}
.reason-card__more:hover { color: var(--green-dark); }

/* 「詳しく見る」は全ページ共通で、矢印を動かさずリンク面を変化させる */
.reason-card__more,
.promo-card__more,
.feature-card__more {
  padding: 7px 11px;
  margin-left: -11px;
  border-radius: 20px;
  transition: color .2s ease, background-color .2s ease;
}

.reason-card__more:hover,
.reason-card__more:focus-visible,
.feature-card__more:hover,
.feature-card__more:focus-visible {
  color: #4ba95a;
  background-color: rgba(105, 194, 111, .12);
}

.promo-card__more:hover,
.promo-card__more:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, .18);
}
/* カード全体をクリック可能に（ストレッチリンク）：
   「詳しく見る」リンクの擬似要素をカード全面に広げ、どこを押しても遷移させる */
.reason-card__more::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.reason-card { cursor: pointer; }

/* カード1（横並び・大） */
.reason-card--wide {
  display: grid;
  grid-template-columns: 40% 1fr;
  align-items: stretch;
  gap: 0;
  padding: 22px;              /* 内側余白：写真の周囲に余白をつくる */
}

.reason-card--wide .reason-card__more {
  align-self: flex-start;
}
.reason-card--wide .reason-card__photo {
  min-height: 360px;
}
.reason-card--wide .reason-card__body {
  padding: 26px 26px 26px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 蝶（カード右下・右端から少しはみ出す） */
.reason-card__butterfly {
  position: absolute;
  right: -22px;
  bottom: 46px;
  width: 68px;
  height: auto;
  pointer-events: none;
  z-index: 3;
}

/* 下段：縦積みカード2枚 */
.reason__row {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}
.reason-card--v { text-align: center; padding: 20px 20px 0; }
.reason-card--v .reason-card__photo {
  aspect-ratio: 16 / 10;
}
.reason-card--v .reason-card__body {
  padding: 24px 14px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reason-card--v .reason-card__title { font-size: 22px; }
.reason-card--v .reason-card__bar   { margin: 14px 0 16px; }


/* ============================================
   教育方針・園の特色（Policy）
============================================= */
.policy {
  position: relative;
  overflow: hidden;
  min-height: 811px;
  background: #8ed2e7;
}

/* 上部の波線（白 → 水色） */
.policy__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  display: block;
  z-index: 4;
  pointer-events: none;
}

/* 中央ステージ（最大1440pxで中央固定・参照デザイン基準） */
.policy__inner {
  position: relative;
  max-width: 1440px;
  height: 811px;
  margin: 0 auto;
}

/* 背景装飾：左上のドット（bg-elements/pattern-dots-blue.svg・写真の上に重ねる） */
.policy__dots {
  position: absolute;
  top: 54px;
  left: 4px;
  width: 232px;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* 背景装飾：右の斜線（bg-elements/pattern-stripes-white-soft.svg・写真の背面） */
.policy__stripe {
  position: absolute;
  top: 448px;
  right: 0;
  width: 210px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* 写真カード（右上に見出し用の切り欠き＝ノッチを持つ）
   右端基準の固定幅にして clip-path 座標を安定させる。
   ノッチ左上・右下は写真の丸角（凸）／内角（左下）は凹。 */
.policy__photo {
  position: absolute;
  top: 137px;
  right: 115px;
  width: 1185px;
  height: 575px;
  z-index: 2;
  overflow: hidden;
  clip-path: path("M 30,0 L 1005,0 A 30 30 0 0 1 1035,30 L 1035,290 A 30 30 0 0 0 1065,320 L 1155,320 A 30 30 0 0 1 1185,350 L 1185,545 A 30 30 0 0 1 1155,575 L 30,575 A 30 30 0 0 1 0,545 L 0,30 A 30 30 0 0 1 30,0 Z");
}
.policy__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.policy__photo:hover img,
.policy__photo:focus-visible img {
  transform: scale(1.025);
}

/* 縦書きの見出し（写真のノッチ上に重ねる・白文字・2列）
   背景は写真のノッチ越しにセクション背景が見えるため透明。 */
.policy__vtitle {
  position: absolute;
  top: 137px;            /* 写真の上端に揃える */
  right: 115px;          /* 写真の右端に揃える */
  width: 150px;
  height: 320px;
  z-index: 3;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  padding: 2px 4px 0;
  font-family: var(--font-round);
  font-weight: 700;
  color: #ffffff;
}
.policy__vcol {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-shadow: 0 2px 6px rgba(30, 90, 120, 0.18);
}

/* リード文（白い角丸ボックス・写真左下に重ねる） */
.policy__lead {
  position: absolute;
  left: 162px;
  bottom: 121px;
  width: 504px;
  z-index: 3;
  margin: 0;
  padding: 26px 30px 28px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(30, 80, 110, 0.14);
  font-size: 15px;
  line-height: 2.0;
  letter-spacing: 0.02em;
  color: #45504a;
}

.policy__lead > p {
  margin: 0;
}

.policy__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  color: #34483c;
  font-family: var(--font-round);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: color .2s ease, background-color .2s ease;
}

.policy__more > span {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #69c26f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='10' viewBox='0 0 8 10'%3E%3Cpath d='M2 1.5v7L6.5 5Z' fill='%23fff' stroke='%23fff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 10px no-repeat;
}

.policy__more:hover,
.policy__more:focus-visible {
  color: #4ba95a;
  background: rgba(105, 194, 111, .12);
}

/* 装飾イラスト */
.policy__birds {
  position: absolute;
  left: 168px;
  top: 438px;
  width: 138px;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.policy__lion {
  position: absolute;
  right: 34px;
  bottom: 64px;
  width: 236px;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* Policy：タブレット以下は縦積みに切り替え */
@media (max-width: 1180px) {
  .policy { min-height: 0; }
  .policy__inner {
    max-width: 760px;
    height: auto;
    padding: 44px 24px 56px;
  }
  .policy__dots   { top: 24px; left: 10px; width: 110px; height: auto; z-index: 0; }
  .policy__stripe { display: none; }

  /* 見出しを横書きに */
  .policy__vtitle {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 0;
    justify-content: center;
    margin: 0 0 26px;
    padding: 0;
    background: none;
    clip-path: none;
    border-radius: 0;
    color: #2c7f99;
  }
  .policy__vcol {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 32px;
    letter-spacing: 0.08em;
    text-shadow: none;
  }

  .policy__photo {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    clip-path: none;
    border-radius: 20px;
  }
  .policy__lead {
    position: relative;
    left: auto;
    bottom: auto;
    width: 90%;
    max-width: 560px;
    margin: -44px auto 0;
  }
  .policy__birds { position: static; display: block; margin: 18px auto -6px 8px; }
  .policy__lion  { position: static; right: auto; bottom: auto; width: 150px; margin: 8px 0 0 auto; display: block; }
}

@media (max-width: 600px) {
  .policy__inner {
    padding-top: 118px;
    padding-bottom: 40px;
  }
  .policy__vtitle {
    position: absolute;
    top: 62px;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    justify-content: center;
    margin: 0;
    text-align: center;
  }
  .policy__vcol { font-size: 25px; }
  .policy__lead {
    z-index: 4;
    font-size: 14px;
    line-height: 1.9;
    padding: 22px 22px 24px;
  }
  .policy__birds {
    display: none;
  }
  .policy__lion {
    position: relative;
    z-index: 5;
    width: 112px;
    margin: -56px 4px 0 auto;
  }
}


/* --- タブレット --- */
@media (max-width: 1024px) {
  .reason { padding: 64px 0 72px; }
  .reason__title { font-size: 30px; }
  .reason__lead { font-size: 15px; }
  .reason__cards { padding: 0 24px; }

  .reason-card--wide { grid-template-columns: 38% 1fr; padding: 18px; }
  .reason-card--wide .reason-card__photo { min-height: 300px; }
  .reason-card--wide .reason-card__body { padding: 18px 18px 18px 30px; }
  .reason-card__title { font-size: 22px; }

  .reason__row { gap: 24px; }

  /* 装飾は控えめに */
  .reason__illust--sun       { width: 72px; top: -32px; }
  .reason__illust--alligator { width: 96px; right: 0; }
  .reason-card__butterfly    { width: 54px; right: -12px; bottom: 30px; }
}

/* --- スマホ --- */
@media (max-width: 720px) {
  .reason { padding: 52px 0 60px; }
  .reason__title {
    font-size: 24px;
    padding-bottom: 16px;
  }
  .reason__lead br { display: none; }

  .reason__cards { padding: 0 20px; margin-top: 40px; }

  /* カード1：縦積みへ */
  .reason-card--wide { grid-template-columns: 1fr; padding: 10px 10px 0; }
  .reason-card--wide .reason-card__photo {
    min-height: 0;
    aspect-ratio: 16 / 8.5;
  }
  .reason-card--wide .reason-card__body { padding: 17px 10px 20px; }
  .reason-card__butterfly { display: none; }

  /* 下段：1カラム */
  .reason__row { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .reason-card--v { padding: 10px 10px 0; }
  .reason-card--v .reason-card__photo { aspect-ratio: 16 / 8.5; }
  .reason-card--v .reason-card__body { padding: 17px 10px 20px; }
  .reason-card__title,
  .reason-card--v .reason-card__title { font-size: 20px; }
  .reason-card__bar,
  .reason-card--v .reason-card__bar { margin: 10px 0 12px; }
  .reason .reason-card__text {
    font-size: 13.5px;
    line-height: 1.7;
  }
  .reason-card__more {
    margin: 12px auto 0;
    font-size: 14px;
  }
  .reason-card__text br { display: none; }

  /* 装飾 */
  .reason__pattern--tri    { width: 130px; }
  .reason__pattern--stripe { display: none; }
  .reason__illust--sun       { width: 60px; top: -26px; left: 0; }
  .reason__illust--kids      { left: 12px; bottom: -28px; }
  .reason__kid--girl, .reason__kid--boy { width: 52px; }
  .reason__kid--boy { left: 46px; }
  .reason__illust--alligator { width: 78px; right: 12px; bottom: -28px; }
}

@media (max-width: 374px) {
  .reason__illust--kids {
    left: 10px;
    width: 88px;
    height: 96px;
  }
  .reason__kid--girl,
  .reason__kid--boy {
    width: 46px;
  }
  .reason__kid--boy {
    left: 40px;
  }
  .reason__illust--alligator {
    right: 10px;
    width: 68px;
  }
}


/* ============================================
   園での生活（Life）
============================================= */
.life {
  position: relative;
  overflow: hidden;
  background: #f7f4ea;
  padding: 0 0 96px;
  /* 固定ヘッダーの下に虹アイコンから見える位置でアンカー停止 */
  scroll-margin-top: 120px;
}

.admission { scroll-margin-top: 120px; }

@media (max-width: 1024px) {
  .life,
  .admission { scroll-margin-top: 95px; }
}

@media (max-width: 600px) {
  .life,
  .admission { scroll-margin-top: 90px; }
}

/* 上部の波線（Policy の水色から続く） */
.life__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  display: block;
  z-index: 3;
  pointer-events: none;
}

/* 背景の雨だれ装飾 */
.life__bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.life__bg--tr { top: 40px;    right: 60px; width: 340px; }
.life__bg--bl { bottom: 20px; left: -20px; width: 300px; }

/* 中央ステージ */
.life__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 76px 40px 0;
}

/* 見出し */
.life__head {
  text-align: center;
  margin-bottom: 64px;
}
.life__rainbow {
  display: inline-block;
  width: 116px;
  margin-bottom: 6px;
}
.life__rainbow img { display: block; width: 100%; height: auto; }
.life__title {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* 装飾イラスト */
.life__illust {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  height: auto;
}
.life__mice {
  position: absolute;
  z-index: 3;
  top: 198px;
  left: 34px;
  width: 132px;
  pointer-events: none;
}
.life__mice .life__mouse { width: 100%; display: block; }
.life__mice .life__onpu {
  position: absolute;
  top: -30px;
  left: 30px;
  width: 40px;
}
.life__illust--tulipL { top: 336px; left: -48px;  width: 38px; }
.life__illust--tree   { top: 760px; right: 40px;  width: 122px; }
.life__illust--rabbit { bottom: -6px; right: 150px; width: 78px; }
.life__illust--tulipR { bottom: 12px; right: 20px; width: 50px; }

/* カード群（上段3・下段2をずらし配置） */
.life__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 34px;
  row-gap: 52px;
}
.life-card:nth-child(1) { grid-column: 1 / span 2; }
.life-card:nth-child(2) { grid-column: 3 / span 2; }
.life-card:nth-child(3) { grid-column: 5 / span 2; }
.life-card:nth-child(4) { grid-column: 2 / span 2; }
.life-card:nth-child(5) { grid-column: 4 / span 2; }

/* カード全体をクリック可能に（<a> でラップ）。ホバーで軽く浮かせる */
.life-card {
  display: block;
  color: inherit;
  transition: transform 0.18s ease;
}
.life-card:hover { transform: translateY(-4px); }
.life-card:hover .life-card__photo { filter: drop-shadow(0 12px 22px rgba(90, 90, 60, 0.2)); }

/* 各カード（写真右上にノッチ＝切り欠き。縦書き見出しをそこに重ねる）
   ノッチは clip-path で作成（Policyと同じあしらい）。見出し長でノッチ深さが
   変わるため、深さ違いの clip-path を nth-child で出し分ける。 */
.life-card__figure {
  position: relative;
}
.life-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  filter: drop-shadow(0 8px 16px rgba(90, 90, 60, 0.12));
  /* 既定＝短い見出し（D120）。長い見出しのカードは下で上書き */
  clip-path: path("M 22,0 L 281,0 A 16 16 0 0 1 297,16 L 297,104 A 16 16 0 0 0 313,120 L 335,120 A 16 16 0 0 1 351,136 L 351,259 A 22 22 0 0 1 329,281 L 22,281 A 22 22 0 0 1 0,259 L 0,22 A 22 22 0 0 1 22,0 Z");
}
.life-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 見出し長ごとのノッチ深さ */
/* 保育園部門（0〜2歳）＝2列の縦書き見出しが収まる幅広・深めのノッチ */
.life-card:nth-child(1) .life-card__photo {
  clip-path: path("M 22,0 L 247,0 A 16 16 0 0 1 263,16 L 263,136 A 16 16 0 0 0 279,152 L 335,152 A 16 16 0 0 1 351,168 L 351,259 A 22 22 0 0 1 329,281 L 22,281 A 22 22 0 0 1 0,259 L 0,22 A 22 22 0 0 1 22,0 Z");
}
/* 幼稚園部門・預かり保育＝中 */
.life-card:nth-child(3) .life-card__photo,
.life-card:nth-child(4) .life-card__photo {
  clip-path: path("M 22,0 L 281,0 A 16 16 0 0 1 297,16 L 297,134 A 16 16 0 0 0 313,150 L 335,150 A 16 16 0 0 1 351,166 L 351,259 A 22 22 0 0 1 329,281 L 22,281 A 22 22 0 0 1 0,259 L 0,22 A 22 22 0 0 1 22,0 Z");
}

/* 縦書きのラベル（写真右上のノッチに重ねる・上端は写真より少し上）
   main と sub をそれぞれ縦書きの列にして、2列（縦2行）で並べる */
.life-card__label {
  position: absolute;
  top: -6px;
  right: 18px;
  margin: 0;
  display: flex;
  flex-direction: row-reverse;   /* main を右、sub を左の列に */
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.life-card__label-main {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 27px;
  letter-spacing: 0.06em;
}
.life-card__label-sub {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* 説明文（キャプション・丸ゴシック） */
.life-card__text {
  margin: 18px 0 0;
  font-family: var(--font-round);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* Life：タブレット */
@media (max-width: 1024px) {
  .life { padding-bottom: 72px; }
  .life__inner { padding: 60px 28px 0; }
  .life__head { margin-bottom: 44px; }
  .life__title { font-size: 34px; }

  /* 3列グリッド：オフセット解除で 3＋2 の均等並び */
  .life__grid { grid-template-columns: repeat(3, 1fr); column-gap: 24px; row-gap: 40px; }
  .life-card:nth-child(n) { grid-column: auto / span 1; }

  /* 可変幅になるためノッチ（固定px clip-path）は解除し、見出しは写真の右横に戻す */
  .life-card__figure { display: flex; align-items: flex-start; gap: 10px; }
  .life-card__photo,
  .life-card:nth-child(1) .life-card__photo,
  .life-card:nth-child(3) .life-card__photo,
  .life-card:nth-child(4) .life-card__photo {
    clip-path: none;
    border-radius: 20px;
    flex: 1 1 auto;
    min-width: 0;
    filter: none;
    box-shadow: 0 10px 20px rgba(90, 90, 60, 0.12);
  }
  .life-card__label { position: static; top: auto; right: auto; margin: -4px 0 0; }

  .life__mice   { width: 108px; top: 120px; left: 0; }
  .life__illust--tree   { width: 92px; right: -10px; top: 380px; }
  .life__illust--rabbit { left: 52%; width: 64px; }
  .life__illust--tulipL { display: none; }
  .life__bg--tr { width: 240px; right: 10px; }
  .life__bg--bl { width: 220px; }
}

/* Life：スマホ */
@media (max-width: 680px) {
  .life { padding-bottom: 60px; }
  .life__inner { padding: 48px 0 0; }
  .life__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(390px, calc(100vw - 36px));
    margin: 0 auto 20px;
    transform: translateX(-15px);
  }
  .life__rainbow { width: 48px; margin: 0; }
  .life__title { font-size: 24px; }

  .life__grid {
    grid-template-columns: 1fr;
    row-gap: 12px;
    width: min(390px, calc(100vw - 36px));
    max-width: 390px;
    margin: 0 auto;
  }

  .life-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    min-height: 112px;
    padding: 8px 34px 8px 8px;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(90, 90, 60, .1);
  }
  .life-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--green);
    border-right: 2px solid var(--green);
    transform: translateY(-50%) rotate(45deg);
  }
  .life-card__figure {
    display: contents;
  }
  .life-card__figure::after {
    display: none;
  }
  .life-card__photo,
  .life-card:nth-child(1) .life-card__photo,
  .life-card:nth-child(3) .life-card__photo,
  .life-card:nth-child(4) .life-card__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 112px;
    height: 96px;
    aspect-ratio: auto;
    clip-path: none;
    border-radius: 13px;
    filter: none;
    box-shadow: none;
  }
  .life-card:hover {
    transform: none;
  }
  .life-card:hover .life-card__photo {
    filter: none;
  }
  .life-card__label {
    position: static;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    margin: 8px 0 0;
    line-height: 1.35;
  }
  .life-card__label-main {
    writing-mode: horizontal-tb;
    font-size: 17px;
    letter-spacing: .03em;
  }
  .life-card__label-sub  {
    writing-mode: horizontal-tb;
    font-size: 12px;
    letter-spacing: 0;
  }
  .life-card__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0;
  }
  .life-card__text br { display: none; }

  /* 装飾は最小限に */
  .life__mice { display: none; }
  .life__illust--tree, .life__illust--rabbit { display: none; }
  .life__illust--tulipR { display: none; }
  .life__bg--tr { width: 160px; opacity: 0.6; }
  .life__bg--bl { width: 130px; }
}


/* ============================================
   入園について（Admission）
============================================= */
.admission {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eff0cd 0%, #e7e6b3 100%);
  padding: 0 0 108px;
}

/* 上部の波線（Life のクリームから続く） */
.admission__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  display: block;
  z-index: 3;
  pointer-events: none;
}

/* 背景の三角パターン（ベタ／フェード無し。角側を中心にハードな円形で切り出し、
   端の三角が直線でスパッと切れて見えないようにする） */
.admission__pattern {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.admission__pattern--tr {
  top: 40px;
  right: 0;
  width: 340px;
  -webkit-mask-image: radial-gradient(circle 300px at 100% 42%, #000 99%, transparent 100%);
          mask-image: radial-gradient(circle 300px at 100% 42%, #000 99%, transparent 100%);
}
.admission__pattern--bl {
  bottom: 40px;
  left: 0;
  width: 340px;
  -webkit-mask-image: radial-gradient(circle 300px at 0% 58%, #000 99%, transparent 100%);
          mask-image: radial-gradient(circle 300px at 0% 58%, #000 99%, transparent 100%);
}

/* 中央ステージ */
.admission__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 94px 40px 0;
}

/* 見出し（左右に動物・中央にドア＋タイトル。動物はタイトルの近くに寄せる） */
.admission__head {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 76px;
  margin-bottom: 52px;
}
.admission__headline {
  flex: 0 0 auto;
  text-align: center;
}
.admission__door {
  display: block;
  width: 100px;
  margin: 0 auto 2px;
}
.admission__door img { display: block; width: 100%; height: auto; }
.admission__title {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: 0.12em;
  color: var(--ink);
}

/* 両脇の動物（タイトルを挟む） */
.admission__animals {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.admission__animal { height: 84px; width: auto; display: block; }
.admission__animal--giraffe  { height: 120px; }  /* 一番大きく */
.admission__animal--elephant { height: 96px; }
.admission__animal--bear     { height: 86px; }
.admission__animal--squirrel { height: 84px; }

/* カード群（3列） */
.admission__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* 各カード（白・写真＋タイトル＋バー＋説明・全体リンク） */
.adm-card {
  display: block;
  background: #fff;
  border-radius: 22px;
  padding: 12px 12px 20px;
  text-align: center;
  color: inherit;
  box-shadow: 0 16px 30px rgba(150, 140, 70, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.adm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 38px rgba(150, 140, 70, 0.2);
}

/* カードのPCホバーは共通で少し上へ。ホバー時に影を強くしない */
@media (hover: hover) and (pointer: fine) {
  .garden-card:hover,
  .promo-card:hover,
  .reason-card:hover,
  .life-card:hover,
  .adm-card:hover,
  .feature-card:hover,
  .hoshioka-life-card:hover {
    transform: translateY(-4px);
  }

  .garden-card:hover { box-shadow: 0 20px 44px rgba(40, 60, 20, .16); }
  .promo-card--a:hover { box-shadow: 0 3px 0 #4d9531; }
  .promo-card--b:hover { box-shadow: 0 3px 0 #74ab3d; }
  .reason-card:hover { box-shadow: 7px 8px 0 rgba(199, 192, 172, .55); }
  .life-card:hover .life-card__photo { filter: drop-shadow(0 8px 16px rgba(90, 90, 60, .12)); }
  .adm-card:hover { box-shadow: 0 16px 30px rgba(150, 140, 70, .14); }
}
.adm-card__photo {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
}
.adm-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.adm-card__title {
  margin: 18px 0 0;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.adm-card__bar {
  display: block;
  width: 58px;
  height: 5px;
  margin: 12px auto 16px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-yellow) 0 50%, var(--green) 50% 100%);
}
.adm-card__text {
  margin: 0;
  font-family: var(--font-round);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* Admission：タブレット */
@media (max-width: 1024px) {
  .admission { padding-bottom: 80px; }
  .admission__inner { padding: 58px 28px 0; }
  .admission__head { margin-bottom: 44px; }
  .admission__title { font-size: 34px; }
  .admission__animals--left  { left: 40px; }
  .admission__animals--right { right: 40px; }
  .admission__animal { height: 54px; }
  .admission__animal--giraffe { height: 68px; }
  .admission__cards { gap: 24px; }
  .adm-card__title { font-size: 22px; }
  .admission__pattern--tr { width: 150px; }
  .admission__pattern--bl { width: 140px; }
}

/* Admission：スマホ */
@media (max-width: 680px) {
  .admission { padding-bottom: 60px; }
  .admission__inner { padding: 46px 22px 0; }
  .admission__head { margin-bottom: 34px; }
  .admission__title { font-size: 27px; }
  .admission__animals { display: none; }
  .admission__cards {
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(390px, calc(100vw - 36px));
    max-width: 390px;
    margin: 0 auto;
  }
  .adm-card {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 14px;
    min-height: 112px;
    padding: 8px 34px 8px 8px;
    overflow: hidden;
    border-radius: 18px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(90, 90, 60, .1);
  }
  .adm-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--green);
    border-right: 2px solid var(--green);
    transform: translateY(-50%) rotate(45deg);
  }
  .adm-card__photo {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 112px;
    height: 96px;
    aspect-ratio: auto;
    border-radius: 13px;
  }
  .adm-card__title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 8px 0 0;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: .02em;
  }
  .adm-card__bar {
    display: none;
  }
  .adm-card__text {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 5px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 0;
  }
  .adm-card__text br { display: none; }
  .admission__pattern--tr { width: 120px; opacity: 0.6; }
  .admission__pattern--bl { width: 110px; opacity: 0.6; }
}


/* ============================================
   フッター（Contact ＋ 園カード ＋ 緑地 ＋ ナビ）
============================================= */
.site-footer { position: relative; }

/* --- Contact（写真背景＋グリーンのオーバーレイ） --- */
.fcontact {
  position: relative;
  /* 写真を緑地の裏まで少し延ばして丘のへこみの白い隙間を埋めるため overflow は掛けない */
  padding: 96px 24px 235px;
  text-align: center;
}
.fcontact__wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  display: block;
  z-index: 4;
  pointer-events: none;
}
.fcontact__bg { position: absolute; top: 0; left: 0; right: 0; bottom: -300px; z-index: 0; }
.fcontact__bg img { width: 100%; height: 100%; object-fit: cover; }
.fcontact__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58, 92, 60, 0.66) 0%, rgba(24, 44, 26, 0.78) 100%);
}
.fcontact__deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
}
.fcontact__deco--stripe { top: 40px;  left: 0;  width: 240px; }
.fcontact__deco--dots   { top: 200px; right: 0; width: 300px; }

.fcontact__inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}
.fcontact__label {
  margin: 0 0 20px;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.22em;
}
.fcontact__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 46px;
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.fcontact__line {
  display: table;
  margin: 0 auto;
  padding-bottom: 16px;
}
.fcontact__line + .fcontact__line { margin-top: 20px; }
.fcontact__line::after {
  content: "";
  display: block;
  margin-top: 14px;
  border-top: 2px dotted rgba(255, 255, 255, 0.55);
}
.fcontact__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  background: var(--green);
  color: #fff;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  padding: 18px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.fcontact__btn:hover,
.fcontact__btn:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26);
  filter: brightness(1.05);
}
.fcontact__btn-icon {
  width: 40px;
  height: auto;
  transform-origin: 50% 100%;
  transition: transform .3s ease;
}
.fcontact__btn:hover .fcontact__btn-icon,
.fcontact__btn:focus-visible .fcontact__btn-icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

.fcontact__illust { position: absolute; z-index: 2; pointer-events: none; }
.fcontact__illust--butterfly { width: 58px; top: 96px;  left: 12%; }
.fcontact__illust--bee       { width: 64px; top: 78px;  right: 12%; }

/* --- 緑地（丘＋カード＋イラスト＋ナビ） --- */
.ffield {
  position: relative;
  /* ベタ塗りはしない。背景は丘イラストのみで敷く（上端が丘のカーブになる） */
}
/* 丘のクリップ用ラッパー（緑地の範囲だけに丘を収める。カードは上へはみ出させたいので
   overflow はこのラッパーだけに掛ける） */
.ffield__hills {
  position: absolute;
  top: -260px;      /* 丘の丸い頂が Contact 側にはみ出す分まで見せる */
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* 丘：大きく敷いて背景そのものにする。
   hill1（濃いめ）＝全面を覆うメイン・上レイヤー／hill2（明るめ）＝右上に高く見せる下レイヤー */
.ffield__hill {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  max-width: none;
  height: auto;
}
.ffield__hill--left  {   /* 濃いめ・左の丘・上レイヤー（さらに左へ・丸い頂を見せる） */
  z-index: 1;
  width: 4400px;
  left: 50%;
  margin-left: -2980px;
  top: 305px;            /* コンテナ上端(-260)基準。丘を50px上げた位置 */
}
.ffield__hill--right {   /* 明るめ・右の丘・下レイヤー（丸い頂を右に見せる） */
  z-index: 0;
  width: 3000px;
  left: 50%;
  margin-left: -1000px;
  top: 323px;
}

/* 園カード（ファーストビューと同一仕様＝.garden-card を流用。境界に重ねる） */
.fgardens {
  position: relative;
  z-index: 5;
  max-width: 1080px;
  margin: -150px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}
/* フッターカードの住所（.garden-card 内・ボタンを下端に揃える） */
.garden-card__addr {
  margin-top: 20px;
  margin-bottom: auto;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 500;
}

/* 装飾イラスト（中央固定＝ブラウザ幅で位置不変・カード背面・左右に広く散らす） */
.fscene {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -150px;
  width: 100%;
  max-width: 1500px;
  height: 460px;
  z-index: 2;
  pointer-events: none;
}
.fscene__item { position: absolute; height: auto; }
/* 左グループ（外側へ散らす・木は大きめに） */
.fscene__item--treeL1   { left: 6px;    top: 96px;  width: 150px; }
.fscene__item--treeL2   { left: 118px;  top: 140px; width: 108px; }
.fscene__item--tulipL   { left: 40px;   top: 296px; width: 42px; }
.fscene__item--deer     { left: 74px;   top: 300px; width: 118px; }
.fscene__item--grassL1  { left: 30px;   top: 386px; width: 24px; }
.fscene__item--grassL2  { left: 214px;  top: 380px; width: 22px; }
/* 右グループ */
.fscene__item--treeR    { right: 4px;   top: 90px;  width: 150px; }
.fscene__item--treeR2   { right: 128px; top: 150px; width: 104px; }
.fscene__item--squirrel { right: 44px;  top: 288px; width: 104px; }
.fscene__item--tulipR   { right: 148px; top: 310px; width: 30px; }
.fscene__item--grassR1  { right: 4px;   top: 388px; width: 24px; }
.fscene__item--grassR2  { right: 155px; top: 380px; width: 22px; }

/* 子どもたち（カード幅基準・カードに少しかぶせる＝前面・幅が変わっても位置不変） */
.fkids {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -150px;
  width: 100%;
  max-width: 1080px;
  height: 420px;
  z-index: 6;
  pointer-events: none;
}
.fkids__kid { position: absolute; width: 94px; height: auto; }
.fkids__kid--girl { left: -26px;  top: 228px; }
.fkids__kid--boy  { right: -26px; top: 228px; }

/* ナビゲーション */
.ffield__inner {
  position: relative;
  z-index: 3;
  max-width: 1080px;
  margin: 0 auto;
  padding: 90px 40px 0;
}
.fnav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fnav__title {
  margin: 0 0 22px;
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: #fff;
}
.fnav__list li { margin-bottom: 13px; }
.fnav__list a {
  color: #ffffff;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: opacity 0.15s ease;
}
.fnav__list a:hover { opacity: 0.75; text-decoration: underline; }
.fnav__sub { padding-left: 18px; position: relative; }
.fnav__sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
}

/* コピーライト */
.fbottom {
  position: relative;
  z-index: 3;
  margin-top: 54px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}
.fbottom__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fbottom__copy { margin: 0; color: #fff; font-size: 14px; letter-spacing: 0.02em; }
.fbottom__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: opacity 0.15s ease;
}
.fbottom__link:hover { opacity: 0.8; }
.fbottom__link .icon-play { width: 22px; height: 22px; flex-shrink: 0; }

/* --- フッター：タブレット --- */
@media (max-width: 1024px) {
  .fcontact { padding: 72px 24px 160px; }
  .fcontact__title { font-size: 36px; }
  .fgardens { max-width: 760px; gap: 28px; padding: 0 28px; margin-top: -130px; }
  .ffield__inner { padding: 100px 28px 0; }
  .fnav { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .fscene, .fkids { display: none; }
}

/* --- フッター：スマホ --- */
@media (max-width: 680px) {
  .fcontact { display: none; }
  .fcontact__label { font-size: 16px; }
  .fcontact__title {
    font-size: 23px;
    line-height: 1.05;
  }
  .fcontact__line {
    padding-bottom: 6px;
  }
  .fcontact__line + .fcontact__line { margin-top: 6px; }
  .fcontact__line::after { margin-top: 5px; }
  .fcontact__btn { margin-top: 29px; font-size: 16px; padding: 16px 26px; }
  .fcontact__illust--butterfly,
  .fcontact__illust--bee { display: none; }

  .fgardens {
    display: none;
  }
  .ffield {
    position: relative;
    padding-top: 0;
    background: #7fc57d;
  }
  .ffield::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -25px;
    z-index: 2;
    height: 26px;
    /* SVG上側の透明領域にも直前セクションの色を敷き、白い継ぎ目を出さない */
    background-color: var(--footer-wave-source, #ffffff);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%237fc57d' d='M0,22 C20,26 40,26 60,22 C80,18 100,18 120,22 C140,26 160,26 180,22 C200,18 220,18 240,22 V26 H0 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 26px;
    pointer-events: none;
  }
  .ffield__hills { display: none; }
  .ffield__inner { display: none; }
  .fnav { display: none; }
  .fbottom {
    margin-top: 0;
    padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
    border-top: 0;
  }
  .fbottom__inner {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .fbottom__link { order: -1; }

  /* スマホのセクション境界は、横長の大波ではなく共通の細かな波形に統一 */
  body .azukari-fees::before,
  body .ichiji-fees::before,
  body .circle-info::before,
  body .yochien-growth::before,
  body .news-archive::before,
  body .news-article::before {
    height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23f8f6f0' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E") top left / 100% 26px no-repeat !important;
  }

  body .man3-recommend::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%23eef5dd' d='M0,22 C20,26 40,26 60,22 C80,18 100,18 120,22 C140,26 160,26 180,22 C200,18 220,18 240,22 V26 H0 Z'/%3E%3C/svg%3E") bottom left / 100% 26px no-repeat !important;
  }
}

.mobile-menu-actions { display: none; }

@media (max-width: 680px) {
  body {
    padding-bottom: 0;
  }
  .fixed-news-link {
    display: none !important;
  }
  .mobile-menu-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 14px auto 0;
    padding: 16px 0 max(10px, env(safe-area-inset-bottom));
    border-top: 2px dotted #cbd8bd;
  }
  .mobile-menu-actions a {
    min-width: 0;
    min-height: 66px;
    border-radius: 15px;
    font-family: var(--font-round);
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-menu-actions__contact,
  .mobile-menu-actions__news {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    box-shadow: 0 5px 14px rgba(57, 91, 41, .12);
    text-align: left;
  }
  .mobile-menu-actions__contact {
    background: #70c346;
    color: #fff;
  }
  .mobile-menu-actions__news {
    border: 2px solid #70c346;
    background: #fff;
    color: #477a35;
  }
  .mobile-menu-actions__contact img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    object-fit: contain;
  }
  .mobile-menu-actions a > span:nth-child(2) {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
  }
  .mobile-menu-actions strong {
    font-size: 15px;
    line-height: 1.35;
  }
  .mobile-menu-actions small {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    opacity: .86;
  }
  .mobile-menu-actions__news-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #70c346;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9.8 20a2.4 2.4 0 0 0 4.4 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M9.8 20a2.4 2.4 0 0 0 4.4 0' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .mobile-menu-actions__arrow {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
  }

  /* トップページ：星岡園ページのお知らせ見出しと同じ寸法 */
  body.home .news__label {
    font-size: 18px;
  }
  body.home .news__title {
    font-size: 24px;
    line-height: 1.4;
  }
}

/* 全ページ共通：説明本文の最終サイズ指定 */
.garden-card__desc,
.promo-card__sub,
.rinen__lead,
.reason__lead,
.reason-card__text { font-size: 16.5px; }

@media (max-width: 600px) {
  .garden-card__desc,
  .promo-card__sub,
  .rinen__lead,
  .reason__lead,
  .reason-card__text { font-size: var(--font-body-mobile); }
}

/* トップヒーローの園紹介カード：3段目の補足文を1行に収める */
@media (min-width: 1025px) {
  .hero .garden-card__desc {
    font-size: 14px;
    letter-spacing: 0;
    white-space: nowrap;
  }
}

/* 入園説明会カードの補足文 */
.promo-card--a .promo-card__sub {
  font-size: 14px;
}

@media (max-width: 600px) {
  .promo-card--a .promo-card__sub {
    font-size: 13px;
  }
}

@media (max-width: 680px) {
  .policy__more > span {
    width: 18px;
    height: 18px;
    background-size: 6px 8px;
  }
}

/* 全ページ共通：右サイド固定のお知らせリンク */
.fixed-news-link {
  position: fixed;
  top: 52%;
  right: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 15px 11px 18px;
  border-radius: 18px 0 0 18px;
  background: #70c346;
  color: #fff;
  box-shadow: 0 8px 22px rgba(49, 89, 48, .2);
  font-family: var(--font-round);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  transform: translateY(-50%);
  transition: padding-right .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.fixed-news-link::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background: #fff;
  -webkit-mask: url("../images/common/illust/news.svg") center / contain no-repeat;
  mask: url("../images/common/illust/news.svg") center / contain no-repeat;
}

.fixed-news-link span {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.fixed-news-link:hover,
.fixed-news-link:focus-visible {
  padding-right: 17px;
  background: #ffcd37;
  color: #34413a;
  box-shadow: 0 10px 26px rgba(108, 88, 25, .27);
}

.fixed-news-link:hover::before,
.fixed-news-link:focus-visible::before {
  background: #34413a;
}

.fixed-news-link:focus-visible {
  outline: 3px solid #ffd64b;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .fixed-news-link {
    top: auto;
    right: 10px;
    bottom: 14px;
    flex-direction: row;
    gap: 7px;
    padding: 10px 15px 10px 11px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: .06em;
    transform: none;
  }

  .fixed-news-link::before {
    width: 18px;
    height: 18px;
  }

  .fixed-news-link span {
    writing-mode: horizontal-tb;
  }

  .fixed-news-link:hover,
  .fixed-news-link:focus-visible {
    padding-right: 18px;
  }
}

/* 高さの低いスマホ：メニュー項目を詰め、展開後も操作領域を確保 */
@media (max-width: 600px) and (max-height: 680px) {
  .global-nav {
    padding-top: 116px;
  }

  .global-nav__list {
    gap: 3px;
  }

  .global-nav__link {
    min-height: 52px;
    padding-block: 10px;
    font-size: 14px;
  }

  .global-nav__icon {
    width: 25px;
    height: 23px;
  }

  .global-subnav a {
    min-height: 40px;
    padding-block: 8px;
    font-size: 12.5px;
  }
}

/* トップ：スマホの案内バナーを縦方向にコンパクト化 */
@media (max-width: 600px) {
  .news { padding-bottom: 24px; }
  .promo { gap: 14px; }
  .promo-card {
    height: 145px;
    min-height: 145px;
  }
  .promo-card__body {
    min-height: 0;
    padding: 16px 20px;
  }
  .promo-card__title {
    font-size: 19px;
    line-height: 1.35;
  }
  .promo-card__sub {
    margin-top: 5px;
    line-height: 1.45;
  }
  .promo-card__more {
    margin-top: 11px;
    font-size: 14px;
  }
  .promo-card__more .icon-play {
    width: 20px;
    height: 20px;
  }
  .promo-card__photo {
    width: 52%;
    height: 68%;
    min-height: 84px;
  }
  .hero .garden-card__head { padding-right: 108px; }
  .hero .garden-card__photo {
    width: 108px;
    height: 108px;
  }
  .life__wave {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='26' viewBox='0 0 240 26' preserveAspectRatio='none'%3E%3Cpath fill='%238ed2e7' d='M0,0 H240 V22 C220,18 200,18 180,22 C160,26 140,26 120,22 C100,18 80,18 60,22 C40,26 20,26 0,22 Z'/%3E%3C/svg%3E");
  }
}

@media (max-width: 374px) {
  .hero .garden-card__head { padding-right: 94px; }
  .hero .garden-card__photo {
    width: 96px;
    height: 96px;
  }
}