@charset "UTF-8";
/* ============================================================
   A案「白磁（はくじ）」＝採用案（2026年8月8日決定）
   手本＝園だより。白と余白を主役に、彩度を落とした淡い色を
   「気配」として置く。文字は黒ではなくグレー。細い書体と広い字間で
   静かな高級感を作る。装飾は水彩のにじみだけ。

   ※ 比較用のB案「にじいろ」・C案「編集」は本番には入れない。
      参考として 新サイト/css/theme-b.css・theme-c.css に残してある。
   ※ 書体（--font-jp／--font-head）の指定は fonts.css 側にまとめてある。
   ============================================================ */

:root {
  --paper:     #fdfcfa;   /* 生成りの白 */
  --paper-2:   #f8f5f1;   /* ひとつ沈めた白 */
  --ink:       #4f4a46;   /* 文字（黒を使わない） */
  /* ⚠️ #7d766f（4.36:1）から微調整（監査3-7）。白地との比が基準の4.5:1を超える。見た目はほぼ変わらない */
  --ink-mid:   #757069;
  --ink-sub:   #a49c94;
  --line:      #e7e0d8;

  --rose:      #c69cae;   /* ロゴのピンクを沈めた色（下線・罫線などの飾りに使う） */
  --rose-deep: #a8798d;
  /* ⚠️ 塗りのボタンと下部バーの「お問い合わせ」側は、監査前の --rose×白文字に戻した
     （2026年8月15日・山田さん指示）。監査2-3で濃い塗り（#96687c×白文字）に変えたところ
     「デザインがかなり崩れた。元々見づらくはなかった」ため。
     読みやすさの数値（4.5:1）より見た目の質感を優先するという判断。
     下の淡いくすみピンクは下部バーの電話側だけに使う（同日・実機確認） */
  --rose-soft: #d8bfca;
  --sage:      #a9b7a6;
  --mist:      #a7b7c6;

  --park-kounan: #c08fa4;
  --park-oi:     #93ab97;
  --park-yuki:   #93a9bd;
}

body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-jp); font-weight: 300;
  font-size: 15.5px; letter-spacing: .06em;
}

/* ---------- ヘッダー ---------- */
.hd { background: rgba(253,252,250,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hd__inner { padding: 18px 0; }

.gnav--main a { color: var(--ink); font-size: .93rem; letter-spacing: .1em; position: relative; }
.gnav--main a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1px;
  background: var(--rose); transform: scaleX(0); transition: transform .35s ease;
}
.gnav--main a:hover::after { transform: scaleX(1); }

.hd__cta {
  border: 1px solid var(--rose); color: var(--rose-deep);
  border-radius: 999px; font-size: .84rem; letter-spacing: .12em;
  background: transparent;
}
.hd__cta:hover { background: var(--rose); color: #fff; border-color: var(--rose); }
.hd__burger { color: var(--ink); }
.skiplink { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }

/* 2段目：各園 */
.gnav--parks .gnav__row > li > a { color: var(--ink); font-size: .93rem; letter-spacing: .12em; }
.gnav--parks .gnav__row > li > a small { color: var(--ink-sub); letter-spacing: .08em; }
.gnav--parks .gnav__row > li > a { position: relative; }
.gnav--parks .gnav__row > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  transform: scaleX(0); transition: transform .35s ease;
}
.gnav--parks .park-kounan:hover > a::after,
.gnav--parks .park-kounan:focus-within > a::after { background: var(--park-kounan); transform: scaleX(1); }
.gnav--parks .park-higashioi:hover > a::after,
.gnav--parks .park-higashioi:focus-within > a::after { background: var(--park-oi); transform: scaleX(1); }
.gnav--parks .park-yukigaya:hover > a::after,
.gnav--parks .park-yukigaya:focus-within > a::after { background: var(--park-yuki); transform: scaleX(1); }

.gnav__sub {
  background: rgba(253,252,250,.98); border: 1px solid var(--line);
  padding: 8px 0; box-shadow: 0 18px 44px rgba(120,105,95,.10);
}
.gnav__sub a { color: var(--ink-mid); letter-spacing: .08em; }
.gnav__sub a:hover { color: var(--rose-deep); background: var(--paper-2); }

/* ---------- ヒーロー（写真は明るいまま。文字は左下に置く） ----------
   写真全体を暗くはしない。文字が乗る「下から1/3だけ」にごく淡い影を敷き、
   上半分は写真の明るさをそのまま保つ（計画書 4-1d） */
.hero { height: 74vh; min-height: 460px; max-height: 700px; }
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(62,52,48,.46) 0%, rgba(62,52,48,.22) 20%, rgba(62,52,48,.05) 38%, rgba(62,52,48,0) 56%);
}
.hero__panel { height: 100%; align-items: flex-end; }
.hero__inner { padding-bottom: 7vh; }

.hero__copy {
  font-size: clamp(1.25rem, 2.5vw, 2.05rem); font-weight: 300;
  color: #fff; letter-spacing: .14em; line-height: 2;
  text-shadow: 0 2px 24px rgba(58,46,42,.62), 0 1px 3px rgba(58,46,42,.5);
  text-wrap: balance;
}
.hero__dots { margin-top: 2.4em; }
.hero__dots button { background: rgba(255,255,255,.55); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.hero__dots button.is-on { background: #fff; }

/* ---------- 想い＋特徴 ---------- */
.omoi { padding: 130px 0 120px; position: relative; overflow: hidden; }
/* 水彩のにじみ（園だよりの装飾を CSS で） */
.omoi::before, .omoi::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.omoi::before { width: 620px; height: 520px; top: -140px; left: -180px;
  background: radial-gradient(circle, rgba(198,156,174,.20), transparent 68%); }
.omoi::after { width: 700px; height: 560px; bottom: -160px; right: -200px;
  background: radial-gradient(circle, rgba(169,183,166,.18), transparent 68%); }

.omoi__row { gap: 72px; position: relative; z-index: 1; }
.omoi__row + .omoi__row { margin-top: 120px; }
.omoi__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.omoi__body h3 {
  font-size: 1.28rem; font-weight: 400; color: var(--ink);
  letter-spacing: .14em; padding-bottom: .9em; position: relative;
}
.omoi__body h3::after {
  content: ""; position: absolute; left: 0; bottom: .3em; width: 34px; height: 1px; background: var(--rose);
}
.omoi__body h3 + p { margin-top: 1.4em; }
.omoi__body p { font-size: .93rem; line-height: 2.25; color: var(--ink-mid); }
.omoi__body h3:not(:first-child) { margin-top: 3em; }
.omoi__btns { margin-top: 2.8em; }

/* ---------- ボタン ---------- */
.btn {
  border-radius: 999px; background: var(--rose); color: #fff;
  font-size: .86rem; letter-spacing: .14em; font-weight: 400;
}
.btn:hover { background: var(--rose-deep); }
.btn--line { background: transparent; color: var(--ink-mid); border: 1px solid var(--line); }
.btn--line:hover { background: transparent; color: var(--rose-deep); border-color: var(--rose); }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.75); }
.btn--ghost:hover { background: rgba(255,255,255,.94); color: var(--ink); border-color: transparent; }
/* ヘッダーの「お問い合わせはこちら」と同じ見た目。
   塗りのボタン（.btn）と並べて、重さの違いを出したいときに使う */
.btn--cta { background: transparent; color: var(--rose-deep); border: 1px solid var(--rose); }
.btn--cta:hover { background: var(--rose); color: #fff; border-color: var(--rose); }

/* ---------- 保育内容について ---------- */
.wide { padding: 130px 0; }
.wide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(79,74,70,.12), rgba(79,74,70,.28));
}
.wide h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 300; color: #fff;
  letter-spacing: .3em; text-indent: .3em;
  text-shadow: 0 2px 22px rgba(60,50,45,.45);
}

/* ---------- セクション見出し ---------- */
.sec__title { font-size: 1.28rem; font-weight: 400; letter-spacing: .22em; text-indent: .22em; color: var(--ink); }
.sec__title--en { display: flex; flex-direction: column; align-items: center; gap: 6px; letter-spacing: .32em; text-indent: .32em; }
.sec__sub { margin-top: 6px; font-size: .76rem; letter-spacing: .18em; text-indent: .18em; color: var(--ink-sub); }
.sec__lead { margin-top: 1.2em; font-size: .9rem; color: var(--ink-sub); }
.sec__more { margin-top: 56px; }

/* ---------- 園日記 ---------- */
.diary { padding: 120px 0 110px; }
.diary__list { margin-top: 56px; }
/* ⚠️ 日付は保護者が見る情報なので --ink-sub（2.64:1）ではなく --ink-mid にする（監査3-7） */
.diary__meta { padding-top: 20px; color: var(--ink-mid); }
.diary__meta time { font-size: .78rem; letter-spacing: .1em; }
.park-tag { background: var(--paper-2); color: var(--ink-mid); border-radius: 999px; }
.park-tag.park-all { color: var(--rose-deep); background: #f9f2f5; }
.diary__title { margin-top: 8px; font-size: 1.02rem; font-weight: 400; letter-spacing: .1em; }

/* ---------- お知らせ ---------- */
.news { padding: 0 0 120px; }
.news__list { margin-top: 46px; }
.news__list a { padding: 24px 6px; border-bottom: 1px solid var(--line); transition: opacity .3s ease; }
.news__list li:first-child a { border-top: 1px solid var(--line); }
.news__list a:hover { opacity: .62; }
.news__meta time { color: var(--ink-mid); letter-spacing: .1em; }
.news__meta .cat { border-radius: 999px; background: var(--paper-2); }
.news__meta .cat.park-kounan { color: var(--park-kounan); }
.news__meta .cat.park-higashioi { color: var(--park-oi); }
.news__meta .cat.park-yukigaya { color: var(--park-yuki); }
.news__meta .cat.park-all { color: var(--ink-mid); }
.news__title { font-size: 1rem; font-weight: 400; letter-spacing: .08em; }

/* ---------- フッター 問い合わせ ---------- */
.fcontact { padding: 110px 0; background: var(--paper-2); position: relative; overflow: hidden; }
.fcontact::before {
  content: ""; position: absolute; width: 760px; height: 560px; top: -220px; left: 50%;
  transform: translateX(-50%); border-radius: 50%; filter: blur(70px); pointer-events: none;
  background: radial-gradient(circle, rgba(167,183,198,.22), transparent 66%);
}
.fcontact__inner { position: relative; z-index: 1; }
.fcontact__head { font-size: .88rem; letter-spacing: .22em; text-indent: .22em; color: var(--ink-sub); }
.fcontact__tel { margin-top: 14px; font-size: 2.35rem; font-weight: 300; letter-spacing: .06em; color: var(--ink); }
.fcontact__tel span { font-size: .95rem; letter-spacing: .16em; color: var(--ink-sub); }
.fcontact__time { margin-top: 10px; font-size: .82rem; color: var(--ink-sub); }
.fcontact .btn--lg { margin-top: 16px; }

/* ---------- フッターバナー ---------- */
.fbnr { padding: 90px 0 0; }
.fbnr__list a { border: 1px solid var(--line); transition: background-color .35s ease; }
.fbnr__list a:hover { background: var(--paper-2); }
.fbnr__list span { font-size: .95rem; letter-spacing: .14em; }

/* ---------- フッター ---------- */
.ft { padding: 80px 0 56px; }
.ft__menu a { color: var(--ink-mid); letter-spacing: .1em; }
.ft__menu a:hover { color: var(--rose-deep); }
.ft__sns { margin-top: 30px; }
.ft__copy { margin-top: 36px; font-size: .72rem; letter-spacing: .14em; color: var(--ink-sub); }

/* ---------- ページ先頭へ戻る ---------- */
.returntop { background: rgba(253,252,250,.9); color: var(--ink-mid); border: 1px solid var(--line); border-radius: 999px; }
.returntop:hover { color: var(--rose-deep); border-color: var(--rose); }

/* ============================================================
   下層ページ（トップページでは使わない）
   ⚠️ 新しい色は増やしていない。上の :root にある色だけで組んでいる。
   ============================================================ */

/* ---------- ヘッダー：いまいる園に色の下線を出す（計画書 4-2） ---------- */
.gnav--parks .park-kounan.is-current > a::after   { background: var(--park-kounan); transform: scaleX(1); }
.gnav--parks .park-higashioi.is-current > a::after { background: var(--park-oi); transform: scaleX(1); }
.gnav--parks .park-yukigaya.is-current > a::after  { background: var(--park-yuki); transform: scaleX(1); }

/* ---------- ページ見出し（帯写真）＝ C案「白い四角＋細い罫線」 ----------
   （2026年8月9日・5案を見比べて山田さんが決定。比較ページは削除済み）

   ⚠️ 写真を暗くして白文字を乗せる方法はとらない（計画書 4-1d
      「保育園で暗い印象は致命的」）。写真はそのままの明るさで残し、
      文字の後ろにだけ生成りの白い四角を置く。
   ⚠️ 四角の中は**ほぼ不透明（97%）**にしてある。ここを薄くすると
      明るい写真のときに文字が読めなくなる。**全ページの先頭に出る箇所なので、
      どんな写真が来ても読めることを最優先にする。**
   ⚠️ 罫線は「白い縁の内側に細いグレーの線」の二重にしてある。
      写真の上に置いても縁が沈まず、園だよりの上品さに近づく。 */
.phead__inner {
  background: rgba(253,252,250,.97);
  padding: 42px 86px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px var(--line);
}
.phead__title {
  font-size: clamp(1.45rem, 3vw, 1.95rem); font-weight: 300; color: var(--ink);
  letter-spacing: .28em; text-indent: .28em;
}
/* 園名の無いページだけ、ページ名の下にピンクの短い線を入れる
   （2026年8月13日・山田さん指示。各園ページの園名の上の線と同じ形・同じ34px）。
   ⚠️ 新しい色は増やしていない（--rose は下層ページの見出しと同じ）。 */
.phead--line .phead__title { padding-bottom: 20px; position: relative; }
.phead--line .phead__title::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 34px; height: 2px; background: var(--rose);
}
/* 園名は必ず文字で出す。色は添えるだけ（計画書 4-3） */
.phead__park {
  margin-top: 14px; font-size: .82rem; letter-spacing: .2em; text-indent: .2em;
  color: var(--ink-mid);
  padding-top: 12px; position: relative;
}
.phead__park::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 2px; background: var(--park-kounan);
}
.phead.park-higashioi .phead__park::before { background: var(--park-oi); }
.phead.park-yukigaya .phead__park::before  { background: var(--park-yuki); }
.phead__park small { font-size: .92em; opacity: .88; }

/* ---------- パンくず ---------- */
.crumb { font-size: .74rem; letter-spacing: .08em; color: var(--ink-sub); }
.crumb a { color: var(--ink-mid); }
.crumb a:hover { color: var(--rose-deep); }
.crumb__item + .crumb__item::before { color: var(--line); }
.crumb [aria-current="page"] { color: var(--ink-sub); }

/* ---------- 下層ページの本文 ---------- */
.price__h2 {
  font-size: 1.28rem; font-weight: 400; color: var(--ink);
  letter-spacing: .22em; text-indent: .22em;
  padding-bottom: 1.1em; position: relative;
}
.price__h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .5em; width: 34px; height: 1px; background: var(--rose);
}
/* ---------- サイトマップの見出し（2026年8月13日・山田さん指示） ----------
   ・現行サイトと同じ左寄せにする（中央寄せは見出しの数が多いページでは追いにくい）
   ・下線は34pxではなく幅いっぱいに伸ばし、区切りとして見えるようにする
   ・見出し自体がリンクなので、行末に → を出してリンクだと分かるようにする
     （→ の形は園メニューの .pmenu__link::after と同じ。新しい色・形は増やしていない） */
/* ⚠️ 幅と位置は下のリスト（.price__full＝860px・中央）にそろえてある。
      そろえないと、見出しだけが100pxほど左にはみ出して段がずれて見える。 */
.smap__h2 { text-align: left; text-indent: 0; max-width: 860px; margin-inline: auto; }
.smap__h2::after { left: 0; transform: none; width: 100%; }
.smap__h2 a { display: inline-flex; align-items: center; gap: .6em; color: inherit; }
.smap__h2 a::after {
  content: ""; display: inline-block; flex: none;
  background-color: var(--rose);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  width: .62em; height: .62em;
}
.price__h2 + * { margin-top: 46px; }
.price__h3 { font-size: 1.06rem; font-weight: 400; color: var(--ink); letter-spacing: .12em; line-height: 1.7; }
.price__h3::before { color: var(--rose); }
/* ピンクの下線の見出し（2026年8月13日・山田さん指示）。
   線の色・太さはトップページ「まほうの保育園の想い」と同じ。新しい色は増やしていない。 */
.price__h3--line::after { background: var(--rose); }
.price__body p { font-size: .93rem; line-height: 2.25; color: var(--ink-mid); }
.price__note { font-size: .9rem; color: var(--ink-mid); background: var(--paper-2); padding: 20px 24px; }
.price__note li::before { color: var(--rose); }
.price__list { font-size: .9rem; line-height: 2.1; color: var(--ink-mid); }
.price__list li::before { background: var(--rose); }
/* ⚠️ 表の下の但し書きは「※上記の金額は、港区在住の方が…」という
   料金の前提そのもの。港区以外の方にとっては決定的な情報なので、
   薄い文字（--ink-sub は 2.64:1）にしない。本文と同じ濃さにする */
.price__caption { font-size: .78rem; line-height: 1.9; color: var(--ink-mid); }

/* 入園金 */
/* ⚠️ セレクタに .price__body p を足してある（2026年8月13日）。
      これが無いと `.price__body p { font-size: .93rem }` の方が指定の力が強く、
      **見出しなのに本文より小さく表示されていた**（山田さんのご指摘で判明）。
      /policy/ の「今と未来をつなぐ保育園」／港南の「入園金」／一時保育の「初回登録料」が該当。 */
.price__entry,
.price__body p.price__entry { font-size: 1.16rem; letter-spacing: .14em; color: var(--ink); }
.price__entry::before, .price__entry::after { color: var(--rose); }

/* 園児募集の一文 */
.price__lead {
  margin-top: 96px; text-align: center; font-size: 1rem; line-height: 2.2;
  color: var(--ink); letter-spacing: .08em;
}
.price__lead strong { font-weight: 400; }

/* ============================================================
   区切り③（各園の下層）で足したもの
   ⚠️ 新しい色は1色も増やしていない。すべて :root にある色で組んでいる。
   ============================================================ */

/* 導入文（現行の row1 の中央寄せの一文） */
.price__intro { font-size: .95rem; line-height: 2.2; color: var(--ink-mid); }

/* 見出しの後ろの＊（前の＊と同じ色） */
.price__h3--both::after { color: var(--rose); }

/* ---------- 本文の中のリンク ----------
   ⚠️ 2026年8月12日・山田さんのご指摘で、下線を付けてリンクと分かるようにした。
      文字の色は本文より濃い --ink（8.53:1）。線はピンク（--rose）で、
      **文字は読みやすいまま・線でリンクと分かる**形にしてある。
      色を --rose-deep にすると 3.54:1 になり計画書の基準（4.5:1）を下回るので使わない。
   ⚠️ ボタン（.btn）と福利厚生の行（.svc__site）は対象外。common.css の同じ箇所を参照。 */
.price__body p:not(.svc__site):not(.price__btns) a:not(.btn),
.price__body li a:not(.btn),
.price__body td a:not(.btn) {
  color: var(--ink); text-decoration-color: var(--rose);
}
.price__body p:not(.svc__site):not(.price__btns) a:not(.btn):hover,
.price__body li a:not(.btn):hover,
.price__body td a:not(.btn):hover {
  color: var(--rose-deep); text-decoration-color: var(--rose-deep);
}

/* ---------- 電話番号（ご入園までの流れ・ご紹介） ----------
   ⚠️ 現行は数字を 30px にしている。本文（.93rem）との差をそのまま再現する。
   ⚠️ 色は本文と同じ濃さ（8.53:1）。電話は見学につながる大事な導線なので薄くしない。 */
.price__tel { font-size: 1.02rem; letter-spacing: .1em; color: var(--ink); margin-top: 1.6em; }
.price__tel .price__telnum { font-size: 1.62rem; letter-spacing: .06em; }
.price__tel a { color: var(--ink); }
.price__tel a:hover { color: var(--rose-deep); }

/* ---------- ご入園までの流れの5段階 ----------
   ⚠️ 現行の #ff7f50（2.44:1）は使わない。訂正メモ 訂正35と同じ扱い。
        番号・項目名 … 本文と同じ濃さ（8.53:1）＋左にピンクの縦線
        説明        … ひかえめな濃さ（4.36:1）
      「番号と項目名が目立ち、説明はひかえめ」という現行の意味は保っている。
   ⚠️ 地の色で囲まず、左の縦線にする（他園との違いと同じ。上下の余白で縦に伸びるため）。 */
.step { border-left: 3px solid var(--rose); background: var(--paper-2); }
.step__name { font-size: 1rem; letter-spacing: .1em; color: var(--ink); line-height: 1.8; }
.step__desc { font-size: .9rem; line-height: 2.05; color: var(--ink-mid); }
.step__arrow { color: var(--rose); }

/* ---------- 園の写真スライダー（各園のご紹介ページ） ----------
   ⚠️ 選んでいるサムネイルは、枠ではなく明るさで示す（新しい色を増やさないため）。 */
.gal__nav button { opacity: .55; transition: opacity .3s ease; }
.gal__nav button:hover { opacity: .8; }
.gal__nav button.is-on { opacity: 1; }
.gal__nav button.is-on img { outline: 1px solid var(--rose); outline-offset: -1px; }

/* ---------- 福利厚生サービス・提携店舗（サービスページ） ----------
   ⚠️ 見出し＝本文と同じ濃さ（8.53:1）・＊はピンク。説明＝ひかえめな濃さ（4.36:1）。
      現行は見出しだけ色を変えていたが、意味（種類の見出し・提供元・説明）は保っている。 */
.svc__cat { font-size: 1rem; letter-spacing: .1em; color: var(--ink); line-height: 1.8; }
.svc__cat::before, .svc__cat::after { color: var(--rose); }
.svc__site { font-size: .93rem; line-height: 2.05; color: var(--ink-mid); }
.svc__site::before { color: var(--rose); }
.svc__site a { color: var(--ink); border-bottom: 1px solid var(--line); }
.svc__site a:hover { color: var(--rose-deep); border-bottom-color: var(--rose); }
.svc__site a.svc__hp { color: var(--rose-deep); letter-spacing: .06em; }
.svc__body { font-size: .93rem; line-height: 2.05; color: var(--ink-mid); }

/* ---------- 番号付きの箇条書き（取り組みの「徹底した衛生管理」） ---------- */
.price__ol { font-size: .93rem; line-height: 2.1; color: var(--ink-mid); }

/* ---------- よくあるご質問 ----------
   ⚠️ 質問＝本文と同じ濃さ（8.53:1）・？はピンク。答え＝ひかえめな濃さ（4.36:1）。
      現行の「質問を目立たせ、答えはふつうの文字」という意味をそのまま保っている。 */
.faq__q { font-size: 1rem; letter-spacing: .1em; color: var(--ink); line-height: 1.8; }
.faq__q::before { color: var(--rose); }
.faq__a { font-size: .93rem; line-height: 2.1; color: var(--ink-mid); }

/* ---------- 時刻・月の表（一日の流れ・年間行事） ----------
   ⚠️ 現行は罫線（border="1"）で全周を囲んでいるが、A案は横線だけにする。
      料金表・施設情報の表と同じ組み方にそろえるため（新しい色は増やしていない）。 */
.ttable { font-size: .93rem; line-height: 1.9; }
.ttable th, .ttable td { border-bottom: 1px solid var(--line); }
.ttable tr:first-child th, .ttable tr:first-child td { border-top: 1px solid var(--line); }
.ttable th { background: var(--paper-2); color: var(--ink); font-weight: 400; letter-spacing: .08em; }
.ttable td { color: var(--ink-mid); }

/* ---------- 施設情報の表（アクセスページ） ---------- */
.itable { font-size: .93rem; line-height: 2; }
.itable th, .itable td { border-bottom: 1px solid var(--line); }
.itable th { background: var(--paper-2); color: var(--ink); font-weight: 400; letter-spacing: .08em; }
.itable td { color: var(--ink-mid); }

/* ---------- 他園との違い：2つの保育園の対比 ----------
   ⚠️ 現行は色だけで区別していたが、どちらも読みにくかった（実測）。
        【港南芝浦園】  #ff7f50 … 2.44:1
        【一般的な保育園】#3cb371 … 2.60:1
      料金表（1.77:1／2.04:1）とまったく同じ問題だったため、
      **料金表と同じ扱い**にした（2026年8月11日・山田さん判断）。

      ・自園 … 本文と同じ濃さ（8.53:1）＋ラベルの下にピンクの下線
      ・一般園 … 控えめな濃さ（4.36:1）＋ラベルの下にうすいグレーの下線

      「自園を強調・一般園は控えめ」という**意味は現行のまま**保っている。

   ⚠️ 一度は「淡いピンクの地で囲む」形にしたが、2026年8月12日に取りやめた。
      枠の上下の余白で文章が1項目あたり80px伸び、写真との差が開きすぎたため
      （common.css の同じ箇所に実測値を残してある）。
   ⚠️ 次に「左の細い縦線」にしたが、これも2026年8月12日に取りやめた。
      「縦線が入るとデザインが気になる」（山田さん）。**ラベルの下線**に変更。
      色は縦線のときと同じ2色で、**新しい色は1色も増やしていない。** */
.vs__ours { color: var(--ink); font-size: .93rem; line-height: 2.1; }
.vs__other { color: var(--ink-mid); font-size: .93rem; line-height: 2.1; }
/* 【港南芝浦園】【一般的な保育園】のラベル。
   ⚠️ A案では太字を使わない（.price__lead strong と同じ考え方）。
      濃さと下線で区別できているので、太らせる必要がない。 */
.vs__ours strong, .vs__other strong { font-weight: 400; letter-spacing: .08em; color: var(--ink); }
.vs__ours strong { text-decoration-color: var(--rose); }
.vs__other strong { color: var(--ink-mid); text-decoration-color: var(--line); }
.vs__ol { font-size: .93rem; line-height: 2.1; }
.vs__note { font-size: .88rem; line-height: 2; }
.vs__note::before { color: var(--rose); }

/* ---------- 記事の一覧（/blog/ ・/news/） ----------
   ⚠️ 新しい色は増やしていない。見出しは下層ページ（.price__h2）と同じ形。 */
.archive__title {
  font-size: 1.28rem; font-weight: 400; color: var(--ink);
  letter-spacing: .22em; text-indent: .22em;
  padding-bottom: 1.1em; position: relative;
}
.archive__title::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .5em; width: 34px; height: 1px; background: var(--rose);
}
.archive__lead { font-size: .88rem; line-height: 2.1; color: var(--ink-mid); }
/* 記事が無いカテゴリーの案内。説明文と同じ見え方にする（新しい色は増やしていない） */
.alist__empty { font-size: .88rem; line-height: 2.1; color: var(--ink-mid); }

.alist__item a { border-bottom: 1px solid var(--line); transition: opacity .3s ease; }
.alist__item:first-child a { border-top: 1px solid var(--line); }
.alist__item a:hover { opacity: .78; }
.alist__title { font-size: 1rem; font-weight: 400; line-height: 1.7; color: var(--ink); letter-spacing: .08em; }
.alist__meta { font-size: .78rem; letter-spacing: .1em; }
.alist__meta time { color: var(--ink-sub); }
.alist__cat { font-size: .7rem; padding: 3px 11px; line-height: 1.7; border-radius: 999px; background: var(--paper-2); color: var(--ink-mid); }
.alist__cat.park-kounan    { color: var(--park-kounan); }
.alist__cat.park-higashioi { color: var(--park-oi); }
.alist__cat.park-yukigaya  { color: var(--park-yuki); }

/* ページ送り */
.pager__num, .pager__nav { font-size: .84rem; letter-spacing: .06em; color: var(--ink-mid); border: 1px solid var(--line); }
a.pager__num:hover, .pager__nav:hover { color: var(--rose-deep); border-color: var(--rose); }
.pager__num--current { color: #fff; background: var(--rose); border-color: var(--rose); }
.pager__gap { color: var(--ink-sub); letter-spacing: .1em; }

/* ---------- 記事ページ（園日記・お知らせ） ----------
   ⚠️ 新しい色は増やしていない。上の変数（--ink 系・--rose 系・--park-*）だけで組む。
   ⚠️ 文字の濃さは本文と同じ --ink-mid（4.36:1）以上にする。
      薄い --ink-sub（2.64:1）は日付など補助的な文字にだけ使う。 */
.post__title {
  font-size: clamp(1.3rem, 3.4vw, 1.62rem); font-weight: 400; color: var(--ink);
  letter-spacing: .12em; line-height: 1.7;
  padding-bottom: .8em; position: relative;
}
.post__title::after {
  content: ""; position: absolute; left: 0; bottom: .35em;
  width: 34px; height: 1px; background: var(--rose);
}
.post__meta { font-size: .78rem; letter-spacing: .1em; }
.post__meta time { color: var(--ink-sub); }
/* カテゴリー名（お知らせ）。⚠️ トップページと同じく**リンクにしない**（文字のまま）。
   見た目はトップページのお知らせ一覧（.news__meta .cat）と同じ形にそろえてある。 */
.post__cat { font-size: .7rem; padding: 3px 11px; line-height: 1.7; border-radius: 999px; background: var(--paper-2); color: var(--ink-mid); }
.post__cat.park-kounan    { color: var(--park-kounan); }
.post__cat.park-higashioi { color: var(--park-oi); }
.post__cat.park-yukigaya  { color: var(--park-yuki); }

.post__content { font-size: .95rem; line-height: 2.25; color: var(--ink-mid); }
.post__content a { color: var(--rose-deep); text-decoration: underline; text-underline-offset: .25em; }
.post__content a:hover { color: var(--ink); }
.post__content strong { font-weight: 400; color: var(--ink); }

/* 前の記事・次の記事 */
.post__nav-item { border: 1px solid var(--line); background: var(--paper); transition: border-color .3s ease, background-color .3s ease; }
.post__nav-item:hover { border-color: var(--rose); background: #fdfbfc; }
.post__nav-label { font-size: .7rem; letter-spacing: .14em; color: var(--rose-deep); }
.post__nav-title { font-size: .88rem; line-height: 1.7; color: var(--ink); }

/* 記事の下の「最新の保育活動中の様子」 */
.postlist__title { font-size: 1.06rem; font-weight: 400; color: var(--ink); letter-spacing: .16em; }
.postlist__more { font-size: .78rem; letter-spacing: .1em; color: var(--ink-mid); }
.postlist__more:hover { color: var(--rose-deep); }
.postlist__list a { border-bottom: 1px solid var(--line); transition: opacity .3s ease; }
.postlist__list li:first-child a { border-top: 1px solid var(--line); }
.postlist__list a:hover { opacity: .62; }
.postlist__name { font-size: .92rem; line-height: 1.7; color: var(--ink); }
.postlist__date { font-size: .78rem; letter-spacing: .1em; color: var(--ink-sub); }

/* お知らせの「関連記事」 */
.related__title { font-size: 1.06rem; font-weight: 400; color: var(--ink); letter-spacing: .16em; }
.related__name { font-size: .92rem; line-height: 1.65; color: var(--ink); letter-spacing: .06em; }

/* ---------- 料金の表 ----------
   現行は「補助金前＝#C0C0C0（1.77:1）」「補助金後＝#f19ca7（2.04:1）」で、
   いちばん大事な「実際に払う額」がいちばん読みにくかった。
   意味（前は控えめ・後を強調）はそのままに、読める濃さに組み直す。 */
.price__tabletitle { font-size: .95rem; letter-spacing: .12em; color: var(--ink); }
.price__tabletitle::before { color: var(--rose); }
.ptable { font-size: .9rem; }
.ptable th, .ptable td { border: 1px solid var(--line); }
.ptable thead th { background: var(--paper-2); color: var(--ink); font-weight: 400; letter-spacing: .06em; }
.ptable tbody th { color: var(--ink); font-weight: 400; letter-spacing: .04em; }
/* 補助金を使う前の金額：控えめ（それでも読める濃さにする） */
.ptable__tr--before td { color: var(--ink-mid); }
/* 補助金を使った後＝実際に払う額：本文と同じ濃さ＋淡いピンクの地で目立たせる */
.ptable__tr--after { background: #f9f2f5; }
.ptable__tr--after td { color: var(--ink); }
.ptable__tr--after th { color: var(--ink); }

/* ---------- 園ごとの全メニュー ---------- */
.pmenu__title {
  font-size: 1.28rem; font-weight: 400; color: var(--ink);
  letter-spacing: .22em; text-indent: .22em;
}
.pmenu__title::before, .pmenu__title::after { color: var(--rose); }
.pmenu__link {
  font-size: .88rem; letter-spacing: .08em; color: var(--ink-mid);
  border: 1px solid var(--line); background: transparent;
}
.pmenu__link::after { color: var(--rose); }
.pmenu__link:hover { background: var(--paper-2); color: var(--rose-deep); border-color: var(--rose); }
/* いま見ているページ。色だけでなく「地の色＋左の線」で示す */
.pmenu__link.is-current {
  color: var(--ink); background: var(--paper-2);
  border-color: var(--park-kounan); cursor: default;
}
.pmenu.park-higashioi .pmenu__link.is-current { border-color: var(--park-oi); }
.pmenu.park-yukigaya .pmenu__link.is-current  { border-color: var(--park-yuki); }

/* ---------- ハンバーガーメニュー（1079px以下） ---------- */
@media (max-width: 1079px) {
  .hd__nav { background: var(--paper); }
  .gnav--main a { border-bottom: 1px solid var(--line); }
  .gnav--main a::after { display: none; }
  .gnav--parks .gnav__row > li > a,
  .gnav--parks .gnav__row > li > .gnav__toggle { border-bottom: 1px solid var(--line); }
  .gnav__toggle { color: var(--ink-sub); }
  .gnav--parks .gnav__row > li > a::after { display: none; }
  .gnav--parks .park-kounan > a { color: var(--park-kounan); }
  .gnav--parks .park-higashioi > a { color: var(--park-oi); }
  .gnav--parks .park-yukigaya > a { color: var(--park-yuki); }
  .gnav__sub { background: var(--paper-2); border: 0; border-radius: 10px; box-shadow: none; }
}

/* ---------- スマホ ---------- */
@media (max-width: 767px) {
  body { font-size: 15px; }
  .hero { height: 66vh; min-height: 420px; }
  .hero__inner { padding-bottom: 6vh; }
  /* 「”まほう”」が行をまたいで割れないサイズにする */
  .hero__copy { font-size: 1.02rem; letter-spacing: .07em; line-height: 2.1; }

  .omoi { padding: 68px 0 64px; }
  .omoi__row { gap: 28px; }
  .omoi__row + .omoi__row { margin-top: 64px; }
  .omoi__body h3 { font-size: 1.14rem; }

  .wide { padding: 74px 0; }
  .diary { padding: 64px 0 60px; }
  .news { padding: 0 0 64px; }
  .fcontact { padding: 64px 0; }
  .fcontact__tel { font-size: 1.95rem; }
  .fbnr { padding: 56px 0 0; }
  .ft { padding: 52px 0 40px; }

  /* --- 下層ページ --- */
  .phead__inner { padding: 30px 26px; }
  .phead__title { font-size: 1.34rem; letter-spacing: .2em; text-indent: .2em; }
  /* ⚠️ 字間が広いままだと「幼保無償化・補助金制度につ／いて」と
     不自然な位置で折り返す。スマホでは字間を詰めて1行に収める */
  .price__h2 { font-size: 1.12rem; letter-spacing: .12em; text-indent: .12em; }
  .pmenu__title { font-size: 1.12rem; letter-spacing: .12em; text-indent: .12em; }
  .price__h3 { font-size: 1rem; }
  .price__entry,
  .price__body p.price__entry { font-size: 1.06rem; }
  .price__lead { margin-top: 60px; font-size: .95rem; }
  .price__note { padding: 16px 18px; }
  /* 表を年齢ごとのまとまりに積み替えたときの見え方 */
  .ptable tr { border: 1px solid var(--line); border-radius: 8px; }
  .ptable th, .ptable td { border: 0; }
  .ptable tbody th { background: var(--paper-2); }
  .ptable td + td, .ptable th + td { border-top: 1px solid var(--line); }
  .ptable td::before { color: var(--ink-sub); font-size: .86em; }
  /* 補助金利用後のまとまりは、見出しの帯も淡いピンクにして続きだと分かるようにする */
  .ptable__tr--after { background: #fdf8fa; }
  .ptable__tr--after th { background: #f9f2f5; }

  /* ⚠️ 2026年8月15日・山田さんの実機確認で作り直し（詳細は SpBar.astro のコメント）。
        上端の白線＋濃いめの影で、Safariの下のバーと同化しないようにしてある */
  .spbar {
    border-top: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 -1px 0 rgba(79,74,70,.06), 0 -4px 16px rgba(120,105,95,.22);
  }
  .spbar__tel { background: var(--rose-soft); color: var(--ink); }
  .spbar__tel strong { letter-spacing: .06em; }
  .spbar__tel small { color: var(--ink); }
  /* お問い合わせ側は監査前の --rose×白文字（2026年8月15日・山田さん指示で戻した） */
  .spbar__cta {
    background: var(--rose); color: #fff;
    letter-spacing: .1em; font-weight: 400;
    border-left: 1px solid rgba(255,255,255,.75);   /* 2つのボタンの境界 */
  }
  .spbar__ico { background-color: var(--ink); }
  .spbar__cta .spbar__ico { background-color: #fff; }
}

/* ---------- 保育内容（/policy/） ----------
   ⚠️ 新しい色は1色も増やしていない（:root にある色だけ）。 */
.price__arrows span::before { color: var(--rose); }
.price__oke span::before { color: var(--rose); }
/* 現行の項目番号は #ff7f50（2.44:1）。意味（強調）は保ったままA案の色に置き換える */
.price__num strong { font-weight: 400; color: var(--ink); letter-spacing: .08em; }

/* ---------- 採用情報（/recruit/）の職種タブ ----------
   ⚠️ 新しい色は1色も増やしていない（:root にある色だけ）。 */
.jobs__tab { color: var(--ink-mid); background: var(--paper); }
.jobs__tab:hover { color: var(--rose-deep); border-color: var(--rose); }
.jobs__tab[aria-selected="true"] { color: var(--ink); background: var(--paper-2); border-color: var(--rose); }

/* ---------- サイトマップ（/sitemap/） ---------- */
.smap li::before { color: var(--rose); }
.smap + .smap { border-top: 1px solid var(--line); }
.price__h2 a { color: inherit; }
.price__h2 a:hover { color: var(--rose-deep); }

/* ---------- フォーム（区切り⑤） ----------
   ⚠️ 新しい色は1つも足していない。すべて A案「白磁」の変数のまま。 */
.form__control { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.form__control::placeholder { color: var(--ink-sub); }
.form__control:focus-visible,
.form__choice input:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 2px; }
.form__control:focus { border-color: var(--rose); }
.form__select::after { color: var(--ink-sub); }
.form__choice input { accent-color: var(--rose-deep); }

/* エラー。色だけに頼らず、枠線・左の縦線・文字でも分かるようにする */
.form__error { color: var(--ink); border-left: 3px solid var(--rose-deep); }
.form__field.is-error .form__control { border-color: var(--rose-deep); }

.form__summary { background: var(--paper-2); border: 1px solid var(--line); }
.form__summary-title { color: var(--ink); letter-spacing: .08em; }
.form__summary dt { color: var(--ink-mid); }

.form__note { color: var(--ink-mid); }
.form__alert { background: var(--paper-2); border-left: 3px solid var(--rose-deep); color: var(--ink); }

/* ご見学可能時間の枠（ご見学予約フォーム）。新しい色は増やしていない */
.form__hours { background: var(--paper-2); border-left: 3px solid var(--rose); color: var(--ink); }
.form__hours-title { color: var(--ink); letter-spacing: .08em; }
.form__hours-park { color: var(--ink); }

/* フォームの中の小見出し（ご見学予約の「■ご希望の見学日時」） */
.form__group-title { color: var(--ink); }
.form__group-note { color: var(--ink-mid); }
.form__hint { color: var(--ink-mid); }
/* 見学予約への近道。本文中のリンクと同じ「濃い文字＋ピンクの下線」のトーン */
.quicklink a {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rose);
  text-decoration-thickness: 1px; text-underline-offset: .25em;
}
.quicklink a:hover { color: var(--rose-deep); }