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

.hoiku-page-section {
  padding-top: 72px;
  padding-bottom: 72px;
}

.page-hero+.hoiku-page-section {
  padding-top: 48px;
}

.hoiku-page-section:not(.section-bg) {
  background: #ffffff;
}

.hoiku-page-section.band-mint {
  --c-band: #DFE9E1;
  /* ミント：2.小さな会議 */
}

.hoiku-page-section.band-sky {
  --c-band: #E2E4EE;
  /* ラベンダー：生きる力を育む３つのこころ */
}

.hoiku-page-section.section-bg::before,
.hoiku-page-section.section-bg::after {
  background-color: #F6F3F2;
}

.hoiku-intro {
  text-align: center;
}

.hoiku-intro-title {
  /* 他ページの最上部見出し（.section-title h2）と同じ大きさに揃える */
  font-size: 2rem;
  font-weight: 700;
  color: #555555;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}

.hoiku-intro-body {
  font-size: 1.02rem;
  line-height: 2.1;
  color: #4a4a4a;
  text-align: left;
  max-width: 380px;
  margin: 0 auto;
}

.hoiku-intro-body p {
  margin-bottom: 28px;
}

.hoiku-intro-body p:last-child {
  margin-bottom: 0;
}

.hoiku-band {
  position: relative;
  width: 100%;
  /* PCでは画面幅いっぱいにせず、トップのティーザー写真と同じ幅・中央寄せ */
  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;
}

/* バンド写真の上に重ねる見出し（トップの teaser-head-overlay と同デザイン） */
.hoiku-band-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 32px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 40%, rgba(0, 0, 0, 0.5));
}

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

/* PC：バンド写真のテキストを中央（上下・左右）に配置 */
@media (min-width: 769px) {
  .hoiku-band-overlay {
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
  }
}

/* 2つのbandで形状に個体差をつける */
.hoiku-band:nth-of-type(2) {
  border-radius: 42% 58% 46% 54% / 48% 42% 58% 52%;
}

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

/* 各ストーリーセクションの背景に園児写真を薄く敷く
   ・.hoiku-story-bg … 写真レイヤー（本文の背面・低不透明度で白っぽく）
   ・「園のことをもっと知る」の blob と同じ有機的な丸形にくり抜いて片側に配置
   ・--a/--c は右、--b は左 */
.hoiku-story {
  position: relative;
}

.hoiku-story > .container {
  position: relative;
  z-index: 1;
}

.hoiku-story-bg {
  position: absolute;
  /* .container（z-index:1 のスタッキングコンテキスト）内で本文の背面に配置 */
  z-index: -1;
  width: clamp(200px, 30%, 340px);
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
}

/* 右側配置（shokuiku の blob と同様、本文に対して上下中央） */
.hoiku-story--a .hoiku-story-bg {
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  background-image: url("../assets/photos/gallery/01.webp?v=202609111434");
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.hoiku-story--c .hoiku-story-bg {
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
  background-image: url("../assets/photos/gallery/07.webp?v=202609111434");
  border-radius: 55% 45% 60% 40% / 42% 55% 45% 58%;
}

/* 左側配置 */
.hoiku-story--b .hoiku-story-bg {
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
  background-image: url("../assets/photos/gallery/04.webp?v=202609111434");
  border-radius: 42% 58% 46% 54% / 48% 42% 58% 52%;
}

/* スマホ：写真を大きく＆画面端で見切れさせ、文章に対して上下中央に配置 */
@media (max-width: 768px) {
  /* 見切れた分は画面外へ（横スクロール防止＆端で切れる見た目） */
  body.subpage .hoiku-story {
    overflow: hidden;
  }

  .hoiku-story-bg {
    width: clamp(240px, 70%, 360px);
  }

  .hoiku-story--a .hoiku-story-bg,
  .hoiku-story--b .hoiku-story-bg,
  .hoiku-story--c .hoiku-story-bg {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .hoiku-story--a .hoiku-story-bg,
  .hoiku-story--c .hoiku-story-bg {
    right: -18%;
    left: auto;
  }

  .hoiku-story--b .hoiku-story-bg {
    left: -18%;
    right: auto;
  }
}

.hoiku-story-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #555555;
  line-height: 1.6;
  letter-spacing: 0.03em;
  text-align: center;
  margin-bottom: 32px;
}

.hoiku-story-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
  color: #4a4a4a;
}

.hoiku-story-body p {
  margin-bottom: 22px;
}

.hoiku-story-body p:last-child {
  margin-bottom: 0;
}

.hoiku-rinen {
  text-align: center;
  /* 直前のバンド写真と見出しの間を広めにとる */
  padding-top: 120px;
  /* 理念リード下の余白を狭める */
  padding-bottom: 32px;
}

.hoiku-rinen-title {
  font-size: 1.9rem;
  font-weight: 700;
  color: #555555;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.hoiku-rinen-lead {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #4a4a4a;
  max-width: 640px;
  margin: 0 auto;
}

.hoiku-hearts {
  text-align: center;
}

.hoiku-hearts-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #555555;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.hoiku-hearts-title span {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.hoiku-hearts-lead {
  font-size: 1rem;
  line-height: 1.9;
  color: #4a4a4a;
  text-align: left;
  /* 下の各こころの本文と左端を揃える（.hoiku-hearts-grid p と同幅） */
  max-width: 720px;
  margin: 0 auto 48px;
}

.hoiku-hearts-grid {
  display: flex;
  flex-direction: column;
  gap: 44px;
  align-items: stretch;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.hoiku-hearts-grid .hoiku-heart {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .hoiku-page-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hoiku-intro-title {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  .hoiku-intro-body {
    font-size: 0.98rem;
  }

  .hoiku-band,
  .hoiku-band:nth-of-type(2) {
    /* スマホは角丸なし（矩形・幅いっぱい）。nth-of-typeの詳細度に合わせて上書き */
    border-radius: 0;
  }

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

  .hoiku-band-overlay {
    padding: 20px 22px;
  }

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

  .hoiku-story-title {
    font-size: 1.18rem;
  }

  .hoiku-rinen {
    padding-top: 88px;
  }

  .hoiku-rinen-title {
    font-size: 1.6rem;
  }

  .hoiku-hearts-title {
    font-size: 1.4rem;
  }

  .hoiku-hearts-title span {
    font-size: 1rem;
  }

  .hoiku-hearts-grid {
    flex-direction: column;
    gap: 0;
  }

  .hoiku-hearts-grid .hoiku-heart {
    margin-bottom: 44px;
  }

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


/* ============================================================
   背景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;
}

.page-shape-cream-fill {
  top: calc(5291px + 140px - 1px);
  height: calc(100% - 5291px - 140px + 1px);
}

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

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

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

  .page-shape-cream-fill {
    top: calc(5291px + 140px - 1px);
    height: calc(100% - 5291px - 140px + 1px);
  }
}