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

/* ============================================================
   地色 — デザイン案6ページの温かみのあるオフホワイト
   （サブページ共通の白地 #ffffff をこのページだけ上書き）
   ============================================================ */
body.page-nyuuen {
  background-color: #F8F3F1;
}

/* ヒーロー下端の波はセクションの地色と同色でないと継ぎ目が出るため、
   白ではなくオフホワイトで塗り直す（形状は style.css と同一） */
.page-nyuuen .page-hero::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='100' viewBox='0 0 1200 100' preserveAspectRatio='none'><path fill='%23F8F3F1' d='M0,95.39 L20,90.13 L40,85.13 L60,80.35 L80,75.77 L100,71.34 L120,67.06 L140,62.91 L160,58.87 L180,54.94 L200,51.1 L220,47.36 L240,43.71 L260,40.16 L280,36.7 L300,33.35 L320,30.1 L340,26.98 L360,23.98 L380,21.11 L400,18.38 L420,15.81 L440,13.4 L460,11.17 L480,9.11 L500,7.25 L520,5.58 L540,4.12 L560,2.88 L580,1.85 L600,1.04 L620,0.46 L640,0.12 L660,0 L680,0.17 L700,0.69 L720,1.55 L740,2.75 L760,4.28 L780,6.12 L800,8.26 L820,10.7 L840,13.4 L860,16.37 L880,19.58 L900,23 L920,26.64 L940,30.46 L960,34.45 L980,38.61 L1000,42.91 L1020,47.36 L1040,51.95 L1060,56.68 L1080,61.55 L1100,66.6 L1120,71.83 L1140,77.28 L1160,82.98 L1180,89 L1200,95.39 L1200,100 L0,100 Z'/></svg>");
}

/* ============================================================
   認定区分と保育時間
   デザイン案どおり、見出し（1号認定 等）・ラベル・値をすべて左寄せにし、
   値の開始位置を2カラムグリッドで揃える
   ============================================================ */
.schedule-plain {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 48px 64px;
}

.schedule-block {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}

/* デザイン案では区分名は太字にせず、本文よりわずかに大きい程度 */
.schedule-block h3 {
  font-size: 1.12rem;
  font-weight: 400;
  color: #555555;
  margin-bottom: 20px;
  letter-spacing: 0.04em;
  text-align: left;
}

.schedule-list {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 10px 28px;
  font-size: 1rem;
}

.schedule-list dt {
  color: #555555;
  white-space: nowrap;
  line-height: 1.7;
  text-align: left;
}

.schedule-list dd {
  color: #4a4a4a;
  line-height: 1.7;
  text-align: left;
}

@media (max-width: 768px) {
  .schedule-plain {
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .schedule-block {
    flex: 1 1 auto;
  }

  .schedule-list {
    font-size: 0.95rem;
    gap: 8px 24px;
  }
}

/* ============================================================
   保護者の皆様へ
   小見出しは本文と同じ左寄せ。本文よりはっきり大きく・太くして
   3つのメッセージの見出しであることを分かりやすくする
   ============================================================ */
#message .hoiku-heart {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

#message .hoiku-heart h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #555555;
  text-align: left;
  margin-bottom: 16px;
}

#message .hoiku-heart p {
  text-align: left;
  max-width: none;
  margin: 0;
}

@media (max-width: 768px) {
  #message .hoiku-heart h3 {
    font-size: 1.2rem;
  }
}


/* ============================================================
   背景バンド（デザイン案6ページ）
   各バンドは対象セクションの内側に置き、セクションの上端／下端を基準に配置する。
   （ページ全体の高さは画面幅で変わるため、ページ上端基準の px 指定だとズレる）
   帯SVGの塗りは box の上から 6.9%（左端の上端）〜 88.6%（左端の下端）に現れ、
   25%〜70.5% は左右とも塗りつぶし。波の形は SVG 側で固定。
   ・.nyuuen-band-mint  … ミント：「子どもの発想を〜」〜泥あそび写真〜「認定区分」見出し
                          #message の下端基準（見出しは次セクションにあるため下へはみ出す）
   ・.nyuuen-band-peach … ペーチ：「定額制でオムツを利用できます」見出しまわり
                          #tebura の上端基準（上端の波は直前の写真の下に隠す）
   ・.nyuuen-band-sky   … ラベンダー：「情報開示」のPDF一覧
                          #disclosure の上端基準（下端はフッターの下へ逃がす）
   ============================================================ */
.nyuuen-band {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: -1;
  object-fit: fill;
  pointer-events: none;
}

/* ── PC ── */
.nyuuen-band-mint {
  bottom: -181px;
  height: 618px;
}

.nyuuen-band-peach {
  top: -183px;
  height: 387px;
}

.nyuuen-band-sky {
  top: 66px;
  height: 433px;
}

/* ── スマホ（幅768px以下） ── */
@media (max-width: 768px) {
  .nyuuen-band-mint {
    bottom: -144px;
    height: 548px;
  }

  .nyuuen-band-peach {
    top: -88px;
    height: 247px;
  }

  .nyuuen-band-sky {
    top: 52px;
    height: 483px;
  }
}

/* ============================================================
   情報開示（PDF一覧）
   デザイン案どおり、カード枠を持たせずアイコン＋タイトルを左に並べる
   ============================================================ */
.disclosure-list {
  padding: 0;
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.disclosure-list a {
  display: flex;
  align-items: center;
  gap: 26px;
  text-decoration: none;
  color: var(--c-text);
  transition: opacity var(--t);
}

.disclosure-list a:hover {
  opacity: 0.65;
}

.disclosure-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}

.disclosure-icon svg {
  width: 46px;
  height: 46px;
}

.disclosure-title {
  flex: 1;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: #4a4a4a;
}

@media (max-width: 768px) {
  /* デザイン案では一覧が本文よりわずかに内側から始まる */
  .disclosure-list {
    gap: 14px;
    padding-left: 18px;
  }

  .disclosure-list a {
    gap: 20px;
  }

  .disclosure-title {
    font-size: 0.95rem;
  }
}

/* ========== セクション間の写真（デザイン案どおり）========== */
.nyuuen-photo {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
  /* PCでは他ページ（hoiku / shokuiku / トップのティーザー）の写真と同じく、
     有機的に歪んだ形でくり抜く。スマホは下部メディアクエリで矩形に戻す */
  border-radius: 26% 22% 28% 24% / 30% 26% 24% 30%;
  overflow: hidden;
}

.nyuuen-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 「保護者の皆様へ」の後：横長の帯（デザイン案 204pt×62.5pt） */
.nyuuen-photo--band {
  /* 横長の帯は hoiku-band / shokuiku-band と同じ blob 形状に揃える */
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

.nyuuen-photo--band img {
  aspect-ratio: 204 / 62.5;
  object-position: center 50%;
}

/* 「認定区分と保育時間」の後：3:2 のまま全体を見せる */
.nyuuen-photo--full {
  /* 写真だけで画面が埋まらないよう、帯写真より小さく抑える
     （440px 幅 = 3:2 で高さ約293px。子育て支援ページの差し込み写真と同寸） */
  max-width: 440px;
  /* 帯写真と形状に個体差をつける */
  border-radius: 42% 52% 38% 55% / 50% 38% 55% 42%;
}

.nyuuen-photo--full img {
  aspect-ratio: 3 / 2;
}

@media (max-width: 768px) {
  /* スマホは container の左右余白（24px）を打ち消して画面幅いっぱいに
     （デザイン案でも写真はページ幅いっぱい。shokuiku-band と同じ扱い） */
  .nyuuen-photo,
  .nyuuen-photo--band,
  .nyuuen-photo--full {
    max-width: none;
    width: auto;
    margin-left: -24px;
    margin-right: -24px;
    /* スマホは角丸なし（矩形・幅いっぱい）。修飾クラスの詳細度に合わせて上書き */
    border-radius: 0;
  }
}