/* shokuiku.html 専用スタイル（style.css の後・_utilities.css の前に読み込む） */

/* ============================================================
   teaser-head バンド（給食の特色 / 食育の取り組み）
   トップページの teaser-head-overlay と同デザイン
   ・PC … 横長楕円（blob）・テキスト上下左右中央
   ・スマホ … 幅いっぱいの矩形・テキスト左下（下部メディアクエリ）
   ============================================================ */
.shokuiku-band {
  position: relative;
  width: 100%;
  /* トップの teaser-head と同じ幅・中央寄せ */
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  /* 有機的な丸形（blob）でくり抜く */
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  overflow: hidden;
}

/* 2つ目のバンドは形状に個体差をつける */
.shokuiku-band--alt {
  border-radius: 42% 58% 46% 54% / 48% 42% 58% 52%;
}

.shokuiku-band img {
  width: 100%;
  /* トップの teaser-head と同じ横長の高さ */
  height: 16vw;
  min-height: 110px;
  max-height: 160px;
  object-fit: cover;
  display: block;
}

.shokuiku-band-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 28px 32px;
  /* 中央テキストの視認性のため全体を軽く暗く */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
}

.shokuiku-band-overlay h2 {
  color: var(--c-white);
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* 「給食の特色」(#semibuffet) と「食育の取り組み」(#shokuiku) の
   3項目でクラス・余白・体裁を統一する。
   ・見出し(h3) … 中央寄せ  ・本文(p) … 左寄せ  ・ブロックは中央配置 */
#semibuffet .policy-list,
#shokuiku .policy-list {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  gap: 60px;
}

#semibuffet .policy-body h3,
#shokuiku .policy-body h3 {
  font-size: 1.45rem;
  text-align: center;
  margin-bottom: 18px;
}

#semibuffet .policy-body p,
#shokuiku .policy-body p {
  text-align: left;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  #semibuffet .policy-body h3,
  #shokuiku .policy-body h3 {
    font-size: 1.2rem;
  }

  /* teaser-head バンド：スマホは幅いっぱいの矩形・テキスト左下 */
  .shokuiku-band {
    max-width: none;
    width: auto;
    margin-left: -24px;
    margin-right: -24px;
    /* トップの teaser-head（スマホ）と同じく角丸なし */
    border-radius: 0;
  }

  .shokuiku-band img {
    /* トップの teaser-head（スマホ）と同じ高さ */
    height: 32vw;
  }

  .shokuiku-band-overlay {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    padding: 20px 22px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.5));
  }

  .shokuiku-band-overlay h2 {
    font-size: 1.4rem;
  }
}

/* ============================================================
   背景SVG（このページ専用）— PC / スマホで個別に調整できます
   ・.subpage-bg-green / -sky / -cream … 帯の上端位置(top:%)と高さ(height)
   ・.page-shape-cream-fill … 最下部のクリーム塗り（波直下〜ページ最下端まで伸縮）
   ・値は現状のまま。ここを編集するとこのページだけに反映されます。
   ============================================================ */
/* ── PC ── */
/* 緑帯の上端は子育て支援ページと同じ絶対位置（hero下端440px + 206px）に固定。
   %指定だとページの総丈で位置が変わり、ページごとに緑の高さがずれるため */
.subpage-bg-green {
  top: 646px;
  height: 560px;
}

.subpage-bg-sky {
  top: 39%;
  height: 1060px;
}

.subpage-bg-cream {
  top: 72%;
  height: 760px;
}

/* ── スマホ（幅768px以下） ── */
@media (max-width: 768px) {
  /* スマホも子育て支援ページと同じ絶対位置（hero下端360px + 453px） */
  .subpage-bg-green {
    top: 813px;
    height: 660px;
  }

  .subpage-bg-sky {
    top: 39%;
    height: 960px
  }

  .subpage-bg-cream {
    top: 72%;
    height: 660px
  }
}