/* ============================================================
   pastel-common.css  —  全ページ共通のパステル装飾層
   既存CSS（base/components/page）の後に、全ページで読み込む。
   反映：見出しフォント／色味／見出し下の点線／共通パーツの角丸。
   ※ヒーロー固有の調整は front-page 限定の pastel-overlay.css 側。
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

/* 1) 見出しに丸ゴシック（本文は既存 M PLUS 1p のまま） */
.h-title,
.page-hero h1,
.contact-banner h2,
.hero-title,
.heart-card h3,
.care-body h3,
.schedule h4,
.day-step .label{
  font-family:"Zen Maru Gothic","M PLUS 1p",sans-serif;
}

/* 2) 色味をパステル寄りに（全ページ共通・変数の上書きのみ）
   ※2026-07-31 修正：地色は base.css 本来の暖色に戻した。
     先方の要望は「パステル調で温かみ」＋「どこかに海・波」。
     海・波は波／点線／ドットのモチーフで表現し、地色まで青くしない。
     --c-bg-warm はトップ・園について・園の生活・子育て支援の主要セクション背景、
     住所バー、波の色を兼ねているため、ここ1つで全体の温度が決まる。 */
:root{
  --c-bg-warm:#FAF8F3;      /* 温かいオフ白（base.css 本来の値） */
  --c-border-soft:#F2EEE3;  /* 同上・温かいグレージュ */
  --c-bg-sky:#EAF5FB;       /* 空色は「海」のアクセントとして残す */
  --c-bg-cream:#FBF4E6;
  --c-blue-100:#DCEDF6;
  --c-blue-200:#B7DCEC;     /* 点線・波の青 */
}

/* 3) 見出し下の点線（全ページ共通の区切り）
   margin-bottom は直後の要素の margin-top と相殺（マージンの相殺）されるので、
   すでに余白を持っている箇所では二重にならず、持っていない箇所だけが 20px 空く。
   （2026-09-07 山本さん指示：点線が直後の要素に干渉していた） */
.h-title::after,
.page-hero h1::after{
  content:""; display:block; width:56px; height:0;
  border-top:3px dotted var(--c-blue-200);
  margin-top:14px; margin-bottom:20px; border-radius:2px;
}
.text-center .h-title::after{ margin-inline:auto; }

/* 4) 共通パーツの角丸・点線の統一 */
.map-frame{ border-radius:24px; }
.info-grid{ border-radius:16px; overflow:hidden; }
.schedule .row{ border-top-style:dotted; }
.access-info .routes{ border-top-style:dotted; }

/* 5) 複数行の項目を「1行目＝見出し／2行目以降＝段落ち」で読ませる（2026-07-31 追加）
      対象：子育て支援ページの開催日時・申込方法・利用時間・料金など */
.info-value .v-line{ display:block; }
.info-value .v-line-1{ font-weight:700; }
.info-value .v-line + .v-line{
  margin-top:5px; padding-left:1.1em; text-indent:-1.1em;
  color:var(--c-text-sub);
}
.info-value .v-line + .v-line::before{
  content:"└ "; color:var(--c-blue-200); font-weight:700;
}

/* トップ「直近の予定」も日付と内容を段落ちさせる */
.schedule .when small{ padding-left:1.1em; text-indent:-1.1em; }
.schedule .when small::before{ content:"└ "; color:var(--c-blue-200); font-weight:700; }

/* メールアドレス（JSで組み立てるまで空になるので高さを保つ） */
.umi-mail{ display:inline-block; min-height:1em; }
.umi-mail a{ color:inherit; text-decoration:underline; }

/* ══ 2026-09-01 先方指示（2026-08-31 赤入れ）════════════════
   「各ページの背景の色（薄く）　水色　ピンク　橙　黄色　黄緑　紫　赤」
   ページごとに --umi-tint を切り替え、ページヘッダーと地色に使う。
   body のクラスは functions.php の body_class フィルタで付けている。
   ═══════════════════════════════════════════ umi-page-tint */
:root{ --umi-tint:#D6EBF7; }                  /* 既定（トップと同じ空色） */

/* 2026-09-09 先方指示「もう少し色を濃くしてほしいです」で一段濃くした。
   （もとの薄い値：水色#EAF5FB ピンク#FBEFF2 橙#FDF1E5 黄#FCF6E1 黄緑#EFF6E7 紫#F1EDF7 赤#FBEDEC） */
body.umi-page-about   { --umi-tint:#D6EBF7; } /* 園の紹介 … 水色 */
body.umi-page-life    { --umi-tint:#F8DFE6; } /* 園の生活 … ピンク */
body.umi-page-support { --umi-tint:#FBE3CC; } /* 子育て支援 … オレンジ */
body.umi-page-start   { --umi-tint:#FAEFC6; } /* 入園について … 黄色 */
body.umi-page-news    { --umi-tint:#E2EFD3; } /* お知らせ … 黄緑 */
body.umi-page-contact { --umi-tint:#E5DDF2; } /* アクセス・お問い合わせ … 紫 */
body.umi-page-sonoyosu{ --umi-tint:#F8DCD9; } /* 保護者専用ページ（園の様子） … 赤 */

/* ページヘッダーの帯（8/25「ページヘッダーの背景色」もこれ） */
.page-hero{
  background:
    radial-gradient(120% 80% at 100% 0%,var(--c-blue-100) 0%,transparent 50%),
    radial-gradient(80% 100% at 0% 100%,var(--c-bg-cream) 0%,transparent 60%),
    var(--umi-tint);
}

/* ページごとの色は「セカンドページヘッダー」（.page-hero）だけに出す。
   ページ全体の地色は変えない。全面に敷くとヘッダーとの境目が消えるため。
   （2026-09-07 山本さん指示） */

/* ── 星を下層ページの空きスペースにも
   「この星を色々なページの空きスペースに載せてほしいです。文字だけだとつまらないので。」 */
body[class*="umi-page-"]:not(.umi-page-home) .page-hero{ position:relative; overflow:hidden; }
body[class*="umi-page-"]:not(.umi-page-home) .page-hero::before,
body[class*="umi-page-"]:not(.umi-page-home) .page-hero::after{
  content:""; position:absolute; top:0; width:200px; height:100%;
  pointer-events:none; background-repeat:no-repeat; z-index:0;
}
body[class*="umi-page-"]:not(.umi-page-home) .page-hero::before{
  left:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.3 5 5.4.6-4.1 3.6 1.2 5.3L12 15.3 7.2 18.1l1.2-5.3-4.1-3.6 5.4-.6z' fill='%23F5C76A' stroke='%23F5C76A' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.3 5 5.4.6-4.1 3.6 1.2 5.3L12 15.3 7.2 18.1l1.2-5.3-4.1-3.6 5.4-.6z' fill='%23B7DCEC' stroke='%23B7DCEC' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 24px 28px, 82px 92px;
  background-size: 34px, 22px;
}
body[class*="umi-page-"]:not(.umi-page-home) .page-hero::after{
  right:0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.3 5 5.4.6-4.1 3.6 1.2 5.3L12 15.3 7.2 18.1l1.2-5.3-4.1-3.6 5.4-.6z' fill='%23B7DCEC' stroke='%23B7DCEC' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.3 5 5.4.6-4.1 3.6 1.2 5.3L12 15.3 7.2 18.1l1.2-5.3-4.1-3.6 5.4-.6z' fill='%23F5C76A' stroke='%23F5C76A' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 140px 24px, 66px 96px;
  background-size: 32px, 21px;
}
.page-hero .container-x{ position:relative; z-index:1; }
@media(max-width:1100px){
  body[class*="umi-page-"] .page-hero::before,
  body[class*="umi-page-"] .page-hero::after{ display:none; }
}

/* 「背景の色を統一（薄いピンク）」「背景をオレンジに統一」への対応。
   白と暖色（--c-bg-warm）の交互という作りは残したまま、暖色側だけを
   そのページの色に置き換える。ページ全体を塗るとヘッダーとの境目が消える。
   （先方指示 2026-08-31／2026-09-07 実装） */
body.umi-page-about   .about-section.bg-warm,
body.umi-page-life    .life-section.bg-warm,
body.umi-page-support .service-section.bg-warm,
body.umi-page-start   .adm-section.bg-warm,
body.umi-page-contact .contact-section.bg-warm{ background:var(--umi-tint); }
body.umi-page-support .service-section.bg-warm .service-note{ background:#fff; }

/* 給食費・アレルギーの行を1段で見せる（先方指示「できれば1段で」） */
body.umi-page-life #lunch .info-label{ white-space:nowrap; }
body.umi-page-life #lunch .info-value{ white-space:nowrap; }
@media(max-width:899px){
  body.umi-page-life #lunch .info-value{ white-space:normal; }
}

/* 費用の表など、項目名の列は「その表でいちばん長い項目名」に幅をそろえる。
   行ごとに grid を組むと行ごとに幅が変わってしまうので、表そのものを grid にして、
   行は display:contents で列を共有させる。罫線は行から各セルへ移す。
   （先方指示 2026-08-25「タイトルが段落ちしている」／2026-09-07「一番長いタイトルに幅を揃える」） */
.info-grid{ display:grid; grid-template-columns:max-content 1fr; }
.info-row{ display:contents; }
.info-label{ white-space:nowrap; }
.info-label,
.info-value{ border-bottom:1px solid var(--c-border-soft); }
.info-row:last-child > .info-label,
.info-row:last-child > .info-value{ border-bottom:0; }

@media(max-width:599px){
  .info-grid{ grid-template-columns:1fr; }
  .info-label{ white-space:normal; border-bottom:0; }
}