@charset "UTF-8";
/* ============================================================
   共通の骨格（レイアウトのみ）
   色・装飾は theme-a.css、書体は fonts.css で指定する
   ============================================================ */

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 「動きを減らす」設定の方には、ページ内ジャンプのスルスル移動もさせない（監査3-7） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  /* 実際の書体は fonts.css の --font-jp（Noto Sans JP）で上書きされる。
     ここはフォントの読み込みが終わるまでの保険 */
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.95;
}
img { max-width: 100%; height: auto; display: block; }
/* WebPの出し分けに使う <picture> は、入れ物としてだけ使いレイアウトには関わらせない。
   ⚠️ display:contents にしないと picture が行内要素として箱を作り、画像の下に隙間ができる。
   ⚠️⚠️ display:contents にすると、中の <source> まで親のレイアウトの一員になってしまう。
        flexやgridの中では <source> が「幅0の項目」として数えられ、gap の分だけ画像がずれる
        （実際にフッターバナーの画像が20pxずれた）。source は必ず非表示にすること。
        CSSで非表示にしてもWebPの出し分けには影響しない（画像の選択はCSSより前に行われる）。 */
picture { display: contents; }
picture > source { display: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; font-size: inherit; font-weight: inherit; }
a { text-decoration: none; color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ============================================================
   タップ領域 44px 以上（計画書 5-3）
   ============================================================ */
.gnav a, .ft__menu a, .spbar a, .btn, .hd__cta { min-height: 44px; }

/* 上の指定では 44px に届かない3か所を、**見た目を変えずに**押せる範囲だけ広げる。
   ⚠️ 要素の大きさ（width/height）を変えると並びがずれるので、
      透明な当たり判定（::after）を重ねる方法をとっている。
      擬似要素への操作は親のリンク・ボタンへの操作として扱われる。 */
.hd__logo a, .hero__dots button, .ft__sns a { position: relative; }
.hd__logo a::after, .hero__dots button::after, .ft__sns a::after {
  content: ""; position: absolute; /* 見えない当たり判定 */
}
/* ロゴ：スマホで高さ39px → 45px */
.hd__logo a::after { inset: -3px 0; }
/* SNSアイコン：高さ17.5px → 45.5px（左右は元のまま78px）
   ⚠️ 画像は80×18指定だが、実際の表示は78×17.5px。-13px だと43.5pxで44に届かない */
.ft__sns a::after { inset: -14px 0; }
/* ヒーローの丸：10×10px → 20×44px。
   ⚠️ 左右は隣の丸との隙間（10px）の半分までしか広げられない。
      これ以上広げると隣の丸の当たり判定と重なり、押した丸と違う写真に切り替わる。
      44px四方にするには丸の間隔自体を広げる必要があり、見た目が変わってしまう。 */
.hero__dots button::after { inset: -17px -5px; }

/* ---------- 共通コンテナ ---------- */
.hd__inner, .omoi__row, .wide__inner,
.diary, .news, .fcontact__inner, .fbnr__list, .ft {
  width: min(1160px, 100% - 48px);
  margin-inline: auto;
}

/* ============================================================
   ヘッダー
   ロゴの右に「メニュー2行」を積み、その右にボタン。全体で1段に収める
   ============================================================ */
.hd { position: sticky; top: 0; z-index: 60; }
.hd__inner { display: flex; align-items: center; gap: 24px; }
.hd__logo { line-height: 0; flex: none; }
.hd__logo img { width: 300px; height: auto; }   /* 現行サイトと同じ大きさ */

.hd__nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.hd__menus { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* 折り返しは禁止。入らなくなったらハンバーガーへ切り替える方針なので、
   中途半端に2段・3段へ折れる状態を作らない */
.gnav--main ul { display: flex; justify-content: flex-end; flex-wrap: nowrap; }
.gnav--main a { display: flex; align-items: center; justify-content: center; padding: 7px 14px; white-space: nowrap; }

/* 各園（区名は横並び。CSSで丸括弧を足すので原稿の文字は増やさない） */
.gnav--parks .gnav__row { display: flex; justify-content: flex-end; }
.gnav--parks .gnav__row > li { position: relative; }
.gnav--parks .gnav__row > li > a {
  display: flex; flex-direction: row; align-items: baseline; justify-content: center;
  gap: 2px; white-space: nowrap; padding: 7px 14px;
}
.gnav--parks .gnav__row > li > a small::before { content: "（"; }
.gnav--parks .gnav__row > li > a small::after  { content: "）"; }

.hd__cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; white-space: nowrap;
}

.hd__burger { display: none; width: 52px; height: 52px; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; flex: none; margin-left: auto; }
.hd__burger i { display: block; width: 26px; height: 1.5px; background: currentColor;
  transition: transform .3s ease, opacity .25s ease; }
.hd__burger span { font-size: 10px; letter-spacing: .1em; line-height: 1.2; margin-top: 3px; }

/* ドロップダウン（現行サイトの下層リンクを1本も減らさない） */
.gnav__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 268px; z-index: 40;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
/* ⚠️ この「開く」指定は必ず PC幅（＝横並びメニューの幅）だけに閉じ込めること。
   ハンバーガー側でも効いてしまうと、＋ボタンを押した瞬間に :focus-within が成立して
   transform: translateX(-50%) が掛かり、開いたメニューが画面の左外へ飛び出す。 */
@media (min-width: 1080px) {
  .gnav--parks .gnav__row > li:hover .gnav__sub,
  .gnav--parks .gnav__row > li:focus-within .gnav__sub {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
}
.gnav__sub a {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  padding: 11px 22px; white-space: nowrap; text-align: left; font-size: .88rem;
}

/* 各園メニューの開閉ボタン。スマホ専用なのでPCでは出さない */
.gnav__toggle { display: none; }

/* 読み上げソフト・キーボード操作の方向けの「本文へ進む」。
   ふだんは画面の上に隠れており、Tabキーでフォーカスしたときだけ降りてくる（監査3-7）。
   色は theme-a.css 側 */
.skiplink {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  padding: 12px 20px; font-size: .84rem;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skiplink:focus { transform: none; }

/* タブレット幅（768〜1079px）だけに出すお問い合わせボタン（監査3-6）。
   既定では出さない。表示の指定は下のタブレット用メディアクエリにある */
.hd__cta--tab { display: none; }

/* ============================================================
   ヒーロー
   既定は「写真の上に文字を重ねる」。C案だけ左右に分ける
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  /* 背景画像はHTML側のstyle属性で指定
     （CSS変数経由だと相対パスがCSSファイル基準で解決されてしまうため） */
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero__slide.is-active { opacity: 1; }

.hero__panel { position: relative; z-index: 2; display: flex; }
.hero__inner {
  width: min(1160px, 100% - 48px); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center;
}
.hero__copies { display: grid; }
.hero__copy {
  grid-area: 1 / 1;                       /* 3枚を同じ位置に重ねてクロスフェード */
  opacity: 0; transition: opacity 1.1s ease;
  pointer-events: none;
}
.hero__copy.is-active { opacity: 1; pointer-events: auto; }

.hero__dots { display: flex; gap: 10px; }
.hero__dots button { width: 10px; height: 10px; border-radius: 50%; padding: 0; }

/* ============================================================
   想い＋特徴
   DOMは必ず「文章 → 写真」の順。PCでは1段ごとに写真の左右を入れ替える
   ============================================================ */
.omoi__row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.omoi__row--rev .omoi__media { order: -1; }   /* 写真を左へ */
.omoi__body h3 { line-height: 1.6; }
.omoi__btns { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============================================================
   保育内容について（帯）
   ============================================================ */
.wide {
  /* 背景画像はHTML側のstyle属性で指定（理由は .hero__slide と同じ） */
  background-size: cover; background-position: center;
  position: relative;
}
.wide__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  text-align: center;
}

/* ============================================================
   セクション見出し
   ============================================================ */
.sec__head { text-align: center; }
.sec__more { display: flex; justify-content: center; }

/* ============================================================
   園日記
   ============================================================ */
.diary__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.diary__list a { display: block; height: 100%; }
.diary__img { display: block; overflow: hidden; }
.diary__img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .7s ease; }
.diary__list a:hover .diary__img img { transform: scale(1.04); }
.diary__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.park-tag { font-size: .7rem; padding: 3px 11px; line-height: 1.7; letter-spacing: .04em; }
.diary__title { line-height: 1.6; }

/* ============================================================
   お知らせ
   ============================================================ */
.news__list a { display: grid; grid-template-columns: 128px 1fr; gap: 24px; align-items: center; }
.news__img img { width: 100%; aspect-ratio: 128/84; object-fit: cover; }
.news__body { display: block; }
.news__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.news__meta time { font-size: .8rem; }
.news__meta .cat { font-size: .7rem; padding: 3px 11px; line-height: 1.7; letter-spacing: .04em; }
.news__title { display: block; margin-top: 5px; line-height: 1.65; }

/* ============================================================
   ボタン
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 42px; text-align: center;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.btn--lg { padding: 18px 56px; }

/* ============================================================
   フッター 問い合わせ
   ============================================================ */
.fcontact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fcontact__col { text-align: center; }
.fcontact__tel { display: inline-flex; align-items: baseline; gap: 10px; }

/* ============================================================
   フッターバナー3枚
   ============================================================ */
.fbnr__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fbnr__list a { display: flex; align-items: center; gap: 20px; height: 100%; padding: 18px; }
.fbnr__list img { width: 92px; flex: none; }

/* ============================================================
   フッター
   ============================================================ */
.ft { text-align: center; }
.ft__menu { display: flex; flex-wrap: wrap; justify-content: center; }
.ft__menu a { display: flex; align-items: center; padding: 9px 18px; font-size: .84rem; }
.ft__sns { display: flex; justify-content: center; gap: 20px; }
.ft__sns img { width: 78px; height: auto; }

/* ============================================================
   ページ先頭へ戻る
   ============================================================ */
.returntop {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 16px; font-size: .66rem; letter-spacing: .12em;
  /* ⚠️ 開いた直後は出さない。1画面分スクロールしたら main.js が is-visible を付ける（監査2-4）。
     ページの先頭では戻る意味が無いうえ、スマホで本文・フォームの入力欄に重なっていた */
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.returntop.is-visible { opacity: 1; visibility: visible; transform: none; }
/* フォーム入力中は下部バーと同じく隠す（入力欄との重なり防止・監査2-4） */
body.is-typing .returntop { opacity: 0; visibility: hidden; }

/* ============================================================
   ここから下層ページ（トップページでは使わない）
   ------------------------------------------------------------
   ⚠️ トップページの見た目に影響しないよう、クラス名はすべて新しいものにしてある。
      既存の指定は1行も書き換えていない。
   ============================================================ */

/* ---------- 現行サイトが外部から読み込んでいたアイコン2種 ----------
   現行は Font Awesome を use.fontawesome.com から読み込んでいる。
   新サイトは外部読み込みゼロの方針なので、同じ形をSVGで埋め込む。
   ⚠️ mask を使うと color でそのまま色が変わる（画像ファイルを色ごとに作らなくてよい）。
   ⚠️ 現行はアイコンと文字の間を全角・半角スペースで空けているが、
      アイコンに接するスペースはこの余白（gap／margin）に置き換えている。 */
/* ⚠️ ＊を出す場所を増やすときは、この一覧に必ず足すこと。
      足し忘れると theme-a.css で色だけ指定されたアイコンが「出ない」状態になる。 */
.price__h3::before,
.price__h3--both::after,
.price__tabletitle::before,
.price__entry::before, .price__entry::after,
.pmenu__title::before, .pmenu__title::after,
.price__note li::before,
.vs__note::before,
.svc__cat::before, .svc__cat::after,
.pmenu__link::after {
  content: ""; display: inline-block; flex: none;
  background-color: currentColor;
  -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-asterisk); mask-image: var(--icon-asterisk);
  width: .72em; height: .72em;
}
/* 矢印だけは別の形（園メニューの行末） */
.pmenu__link::after {
  width: .62em; height: .62em;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
}
/* はてなマーク（よくあるご質問。現行の fa-question-circle と同じ形） */
.faq__q::before {
  content: ""; display: inline-block; flex: none;
  background-color: currentColor;
  -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-question); mask-image: var(--icon-question);
  width: 1.06em; height: 1.06em;
}
:root {
  --icon-asterisk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M478.21 334.09L336 256l142.21-78.09c11.8-6.48 15.96-21.39 9.23-33.04l-19.48-33.74c-6.73-11.65-21.72-15.5-33.23-8.52L296 186.72l3.48-162.2C299.76 11.06 288.94 0 275.48 0h-38.96c-13.46 0-24.29 11.06-24 24.51L216 186.72 77.27 102.61c-11.51-6.98-26.5-3.13-33.23 8.52l-19.48 33.74c-6.73 11.65-2.56 26.56 9.23 33.04L176 256 33.79 334.09c-11.8 6.48-15.96 21.39-9.23 33.04l19.48 33.74c6.73 11.65 21.72 15.5 33.23 8.52L216 325.28l-3.48 162.21C212.24 500.94 223.06 512 236.52 512h38.96c13.46 0 24.28-11.06 24-24.51L296 325.28l138.73 84.11c11.51 6.98 26.5 3.13 33.23-8.52l19.48-33.74c6.73-11.65 2.56-26.56-9.23-33.04z'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z'/%3E%3C/svg%3E");
  /* よくあるご質問の「？」（現行の fa-question-circle と同じ形） */
  --icon-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z'/%3E%3C/svg%3E");
  /* スマホ下部バーの電話・メール（現行サイトのバーにもアイコンがあった。2026年8月15日・実機確認による改善） */
  --icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E");
}

/* ---------- ページ見出し（帯写真） ---------- */
.phead {
  position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; padding: 44px 24px; text-align: center;
}
.phead__inner { position: relative; z-index: 1; }
/* ⚠️ 園名は字間を広く取っているので、gap を足すと「園」と「（」の間が空きすぎる。
   間隔は字間だけに任せる */
.phead__park { display: inline-flex; align-items: baseline; gap: 0; }
/* 区名の丸括弧はCSSで足す（ヘッダーと同じやり方。原稿の文字は増やさない） */
.phead__park small::before { content: "（"; }
.phead__park small::after  { content: "）"; }

/* ---------- パンくず ---------- */
.crumb { width: min(1160px, 100% - 48px); margin: 22px auto 0; }
.crumb__list { display: flex; flex-wrap: wrap; align-items: center; }
.crumb__item { display: flex; align-items: center; }
/* 区切りの「＞」。現行と同じ位置に出す */
.crumb__item + .crumb__item::before { content: "＞"; margin: 0 .5em; }
.crumb__item a { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.crumb__home { width: 1em; height: 1em; flex: none; }
/* タップ領域44px（計画書 5-3）。
   ⚠️ 文字が小さいので、そのままでは高さ23pxしかない。
      見た目を変えずに押せる範囲だけ広げる（トップページのロゴ・SNSと同じやり方）。
   ⚠️ 左右には広げない。パンくずは横に並んでいるため、広げると隣のリンクと当たり判定が重なる。 */
.crumb__item a::after { content: ""; position: absolute; inset: -11px 0; }

/* ---------- 下層ページの本文 ----------
   ⚠️ クラス名が `price__*` なのは、**第2段階の料金ページで最初に作ったから**であって、
      料金ページ専用という意味ではない。**実体は各園の下層ページ共通のレイアウト**で、
      区切り③で作る27枚（3園×9枚）もすべてこのクラスを使う。
      （名前を `pg__*` に付け替える案は、承認済みの料金ページに手を入れることになるため
        見送った。完成後の整理として提案リストに記録してある） */
.price { width: min(1160px, 100% - 48px); margin: 0 auto; padding: 74px 0 40px; }
.price__sec + .price__sec { margin-top: 112px; }
.price__h2 { text-align: center; }
.price__h3 { display: flex; align-items: center; gap: .5em; }
/* ＊の代わりにピンクの短い下線を敷く見出し（2026年8月13日・山田さん指示）。
   トップページ「まほうの保育園の想い」の見出し（.omoi__body h3）と同じ形。
   ⚠️ ＊が並びすぎて重く見えるページ（/policy/ /recruit/）で使う。
      本文の中の＊（福利厚生の一覧など）は変えない。
   ⚠️ .price__h3::before を打ち消すので、--both（左右に＊）とは併用しない。 */
.price__h3--line { display: block; position: relative; padding-bottom: .9em; }
.price__h3--line::before { content: none; }
.price__h3--line::after {
  content: ""; position: absolute; left: 0; bottom: .3em;
  width: 34px; height: 1px;
}
.price__body > * + * { margin-top: 1.5em; }
.price__body > .price__h3 { margin-top: 2.4em; }
/* ⚠️ 一時保育のページだけ、見出しと説明の余白を詰める（2026年8月13日・山田さん指示）。
      このページは「見出し＋1行の説明」の組が続くため、既定の余白
      （見出しと説明のあいだ1.5em・組と組のあいだ2.4em）では差が小さく、
      文字が少ないのに間延びして写真とのつり合いが悪く見えていた。
      説明を見出しに近づけ、組と組のあいだを広げて、かたまりが分かるようにする。 */
.price--ichiji .price__body > .price__h3 + p { margin-top: .55em; }
.price--ichiji .price__body > p + .price__h3 { margin-top: 2.7em; }

/* 文章 ｜ 写真 の2段組。
   ⚠️ DOMは必ず「文章 → 写真」の順にする。スマホで写真が先に来ないようにするため
      （トップページの .omoi と同じ考え方）。PCで写真を左に置きたい行だけ --rev を付ける。

   ⚠️⚠️ 比率は 1.5 : 1（文章が広い）。**等分にしないこと。**
      2026年8月12日・山田さん判断。第2段階では 1 : 1 で作っていたが、
      現行サイトを実測したところ写真はもっと小さく表示されていた。

        現行の写真の表示幅  料金ページ 473px ／ 他園との違い 440px ／ アクセス 345px
        新サイト 1 : 1     548px（元画像が600pxなので、ほぼ原寸まで引き伸ばされる）
        新サイト 1.5 : 1   438px ← 現行とほぼ同じ

      写真を元のサイズより小さく置くと輪郭がくっきりして上品に見え、
      A案「白磁」の余白を広く取る方向にも合う。
      文章側も1行35文字→43文字になり、日本語が読みやすいとされる範囲に入る。

   ⚠️ 写真を左に置く行（--rev）は、**列の比率も左右を入れ替える**こと。
      order だけ入れ替えると、狭い方の列に文章が入ってしまう。 */
/* ⚠️ 縦の位置は「上ぞろえ」。2026年8月12日・山田さん判断（現行サイトと同じ）。
      一度は中央ぞろえにしたが、文章が長い行で写真が宙に浮いて見えた。
      上ぞろえだと、文章の書き出しと写真の上端がそろって整然と見える。 */
.price__row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; }
.price__row + * { margin-top: 76px; }
.price__row--rev { grid-template-columns: 1fr 1.5fr; }
.price__row--rev .price__media { order: -1; }

/* ---------- 各園のご紹介ページだけ、文章と写真を等分にする ----------
   2026年8月12日・山田さん判断。`/kounanshibaura/` は Google広告・Yahoo!広告の
   **メインのリンク先**なので、トップページの「まほうの保育園の想い」（`.omoi__row`）と
   同じバランス（等分・写真が大きい）にした方が印象が良いか比べるため。

     ふつうの下層ページ  文章 658px ／ 写真 438px（1.5 : 1・gap 64px）
     このページ          文章 544px ／ 写真 544px（1 : 1・gap 72px）← 想いと同じ

   ⚠️ **元に戻すときは `index.astro` の `<main class="price price--intro">` から
      `price--intro` を外すだけ。** CSSは触らなくてよい。
   ⚠️ 1080px以上だけに掛ける。この指定はセレクタが長い（＝優先度が高い）ため、
      タブレット・スマホの「縦積み」指定を打ち消してしまう。必ずこの囲みの中に置くこと。
   ⚠️ 写真は元画像600pxを544pxで表示する（引き伸ばしてはいない）。
      1.5 : 1 を選んだ理由（原寸まで引き伸ばさない）とはぎりぎりの兼ね合いになる。 */
@media (min-width: 1080px) {
  .price--intro .price__row,
  .price--intro .price__row--rev { grid-template-columns: 1fr 1fr; gap: 72px; }
}

/* ⚠️ 写真をスクロールに追従させる（position: sticky）指定を一度入れたが、**取りやめた。**
   2026年8月12日・山田さん判断：「写真が動くとテキストが読みづらくなる。
   デザインが良くなっても読みづらくなるのは本末転倒」。
   **写真は上ぞろえで固定する。** 同じ提案を繰り返さないこと。 */
/* ⚠️ 1つの行に写真を2枚置く場合がある（文章が長い行。2026年8月12日・山田さん判断で
      お預かりした写真を足した）。縦に並べて間隔をあける。1枚だけの行は見た目が変わらない。 */
.price__media { display: grid; gap: 24px; align-content: start; }
.price__media img { width: 100%; aspect-ratio: 600 / 420; object-fit: cover; }

.price__btns { display: flex; flex-wrap: wrap; gap: 16px; }
.price__btns--right { justify-content: flex-end; }
/* ボタンのすぐ下に次の行（表など）が密着しないようにする（2026年8月13日・山田さん指示）。
   ⚠️ .price__row + * の指定はあったが、ボタン → 行 の順のときだけ余白が0になっていた
      （/ichijihoiku/ の「お問い合わせ・ご予約」のボタンの下がその状態だった）。 */
.price__btns + .price__row,
.price__btns + .price__full { margin-top: 64px; }
/* ⚠️ ボタンが .price__center（中央ぞろえの一群）の中にある場合も同じ余白を入れる。
      /ichijihoiku/ の「お問い合わせ・ご予約」がこの形で、
      ボタンのすぐ下に施設情報の表が密着していた（2026年8月13日・山田さんご指摘）。 */
.price__center + .price__row,
.price__center + .price__full { margin-top: 64px; }
/* 行の外に置いた見出し（.price__entry）と次の行のあいだの余白。
   .price__h2 + * と同じ 46px にそろえてある。 */
.price__entry + .price__row,
.price__entry + .price__full { margin-top: 46px; }

/* 注記（現行の well2）。行頭に＊を置く（＊の指定は上のアイコン一覧にまとめてある） */
.price__note li { display: flex; align-items: baseline; gap: .5em; }
.price__note li + li { margin-top: .4em; }
.price__note li::before { width: .68em; height: .68em; }

/* 箇条書き（現行の ul） */
.price__list li { position: relative; padding-left: 1.1em; }
.price__list li + li { margin-top: .7em; }
.price__list li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 5px; height: 5px; border-radius: 50%;
}

/* 入園金（現行は見出しタグだが、内容は金額の掲示）。
   ⚠️ すぐ下が料金表なので、上下に十分な余白を取らないと表の見出しの一部に見えてしまう */
.price__entry {
  margin-top: 64px; margin-bottom: 64px;
  display: flex; align-items: center; justify-content: center; gap: .7em;
  text-align: center;
}

/* ---------- 区切り③（各園の下層）で足したもの ----------
   ⚠️ ここから下は新しいクラス名だけを使っている。
      料金ページの指定は1行も書き換えていない（トップページのときと同じ約束）。 */

/* 見出しの前後に＊を出す（現行の「＊ 英語 ＊」と同じ形）。
   ⚠️ ＊の実体は上の「アイコン2種」の一覧にある。増やすときは必ずそちらにも足すこと。 */
.price__h3--both { justify-content: flex-start; }

/* リード文（現行の row1 にある中央寄せの導入文） */
.price__intro { text-align: center; margin-top: 32px; }
/* ⚠️ 見出しとリード文のすぐ下に写真の行が来ると、リード文が写真の説明に見えてしまう。
      現行と同じく、ここでひと呼吸置く */
.price__intro + .price__row { margin-top: 64px; }

/* ⚠️ 写真の縦の位置は「上ぞろえ」。2026年8月12日・山田さん判断（現行サイトと同じ）。
   .price__row の align-items: start がその指定で、行ごとの指定は要らないため
   一度作った .price__row--top は使っていない。
   （※このコメントは以前「中央に置く」と書いてあったが、実装は上ぞろえ。
     2026年8月12日・山田さんのご指摘で記述を実態に合わせた） */

/* 3列（アクセスページの「表 ｜ 写真 ｜ 写真」）
   ⚠️ 3等分にしてはいけない。住所「東京都港区港南３－５－１０ １階」が2行に折り返す。
      現行サイトも3等分ではなく、表の列だけ広く取っている（実測 566 : 345 : 345）。
      同じ考え方で 1.6 : 1 : 1 にしてある（2026年8月12日に現行を実測して修正）。 */
.price__row--three { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }

/* ---------- 本文の中のリンク ----------
   ⚠️ 2026年8月12日・山田さんのご指摘：
      「“プラリバ”の詳細（外部サイト）」などのリンクが本文と同じ見た目で、
      **リンクがあることに気づけない。**
      → 下線を必ず付ける。**色だけで示さない**（色覚特性のある方への配慮でもある。
        計画書4-3「色だけに頼らず必ずテキストを併記する」と同じ考え方）。

   ⚠️ 文字の色は本文より濃い --ink（8.53:1）のまま。
      ピンク（--rose-deep）にすると 3.54:1 で計画書の基準（4.5:1）を下回るため、
      **色ではなく下線でリンクを示す**（料金表・他園との違いと同じ扱い）。
   ⚠️ 下線は文字から少し離す（日本語は「ぱ」「ぷ」の丸が下線と重なって読みにくくなるため）。

   ⚠️⚠️ **対象は「文章の中に埋もれている素のリンク」だけ。** 次の2つは対象外にしてある
      （2026年8月12日・山田さんのご指摘で除外した）。
      ・**ボタン（.btn）** … 料金ページの「提携福利厚生サービスを見る」「一時保育のご案内」は
        `<p class="price__btns"><a class="btn">` という作りで、下線が付くと
        ボタンの中に線が入って崩れる
      ・**福利厚生・提携店舗の行（.svc__site）** … 行頭の → と「HPを見る」が
        もともとピンクで、リンクだと分かる形になっている */
.price__body p:not(.svc__site):not(.price__btns) a:not(.btn),
.price__body li a:not(.btn),
.price__body td a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.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 {
  text-decoration-thickness: 2px;
}

/* ---------- 写真のない行（全幅） ----------
   ⚠️ 現行サイトにも写真が無いセクション（サービスの「補助金や割引クーポン」
      「提携店舗のご優待サービス」）で使う。**写真を足さずに全幅で見せる。**
      2段組にしないので、写真の下の余白という問題自体が起きない。
   ⚠️ 文章が横に広がりすぎないよう、読みやすい幅で止める（記事ページと同じ考え方）。 */
/* ⚠️ 2026年8月13日・山田さんのご指摘で中央寄せにした。
      それまでは max-width だけで左に寄っており、右側に300px近い余白ができていた
      （/policy/ /recruit/ /consulting/ /webcamera/ /privacy/ /sitemap/ と
        区切り③のサービス・保育料金のページが該当）。
      margin-inline（左右だけ）を使い、上下の余白の指定には触れていない。 */
.price__full { max-width: 860px; margin-inline: auto; }
.price__full + * { margin-top: 76px; }

/* ---------- 中央寄せの一群（現行 row1 の「導入文＋電話番号＋ボタン」） ----------
   ⚠️ 現行は本文全体が中央寄せ（text-align: center）だが、新サイトで中央寄せにするのは
      ページ先頭のこの一群だけ。2段組の中の文章まで中央寄せにすると、行の始まりが
      そろわず読みにくくなる（1行43文字あるため）。 */
.price__center { text-align: center; }
/* ⚠️ margin-top は、説明文とボタンがくっついて見えないための余白
   （2026年8月12日・山田さんのご指摘。「保育活動中の様子」のボタンが詰まって見えた）。 */
.price__center .price__btns { justify-content: center; margin-top: 34px; }
/* ⚠️ 見出しは display:flex（＊アイコンを並べるため）なので、
      text-align: center では中央に寄らない。justify-content で寄せる。 */
.price__center .price__h3 { justify-content: center; }

/* ---------- 電話番号（現行の「TEL: 03-3471-7731」） ----------
   ⚠️ 現行はただのテキストで、スマホから押せない（計画書 5-1）。
      新サイトでは tel: リンクにする。**表示される文字は現行のまま**。
   ⚠️ 現行は数字だけ 30px と大きくしている。その差はそのまま再現する。 */
.price__tel { display: flex; align-items: baseline; justify-content: center; gap: .5em; flex-wrap: wrap; }
.price__tel a { display: inline-flex; align-items: center; position: relative; }
/* タップ領域44px（計画書 5-3）。見た目を変えずに押せる範囲だけ広げる */
.price__tel a::after { content: ""; position: absolute; inset: -8px -12px; }

/* ---------- ご入園までの流れの5段階（現行の well2 ＋ 下向き矢印） ----------
   ⚠️ 現行は番号と項目名を #ff7f50（オレンジ）にしている。**2.44:1 で読みにくい**ため、
      料金表・他園との違いと同じ扱いでA案の色に置き換える（訂正メモ 訂正35）。
      「番号と項目名を目立たせ、説明はひかえめ」という**意味はそのまま**保つ。
   ⚠️ 現行の下向き矢印は Font Awesome（fa-angle-down）。新サイトは外部読み込みゼロなので、
      共通のSVG（--icon-arrow）を90度回して使う。 */
.steps { margin-top: 1.6em; }
.step { padding: 16px 20px; }
.step__name { display: block; }
.step__desc { display: block; margin-top: .55em; }
.step__arrow { display: flex; justify-content: center; padding: 12px 0; }
.step__arrow::before {
  content: ""; width: .9em; height: .9em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  transform: rotate(90deg);
}

/* ---------- 園の写真スライダー（各園のご紹介ページ） ----------
   現行サイトは slick（jQuery依存の外部ライブラリ）。新サイトは同じ動きを自前のJSで出す。
   ⚠️ 大きい写真＋下のサムネイルという構成は現行のまま（現行の asNavFor）。
   ⚠️ 写真は重ねて置き、`is-active` の1枚だけを見せる。
      JSが動かなくても1枚目は見える（HTML側で最初から is-active を付けてある）。
   ⚠️ 高さが写真ごとに変わると下の要素が飛び跳ねるので、比率で固定する。 */
.gal__stage { position: relative; aspect-ratio: 600 / 420; overflow: hidden; }
.gal__item {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s ease; pointer-events: none;
}
.gal__item.is-active { opacity: 1; pointer-events: auto; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
.gal__nav { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.gal__nav button { display: block; padding: 0; background: none; border: 0; cursor: pointer; line-height: 0; }
.gal__nav img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- 福利厚生サービス・提携店舗（サービスページ） ----------
   現行サイトのマークアップ（1つの段落を <br> で3〜5行に折った形）：
     <p><i class="fa fa-asterisk"></i> 月極保育補助金 <i class="fa fa-asterisk"></i><br>
        <i class="fa fa-arrow-circle-right"></i> <a>ベネフィット・ワン</a>　福利厚生サービス　…　　　<a><i class="fa fa-desktop"></i> HPを見る</a><br>
        本文…</p>

   ⚠️ 新サイトでは「見出し／提供元とリンク／説明」の3つに分ける。**文字は1字も変えない。**
   ⚠️ 現行のアイコンは3種（＊・▶・パソコン）。新サイトは外部読み込みゼロのため
      共通のSVG2種（＊と→）だけで組む。パソコンのアイコンは出さない。
      → 承認済みの差として data/verify-approved.json に記録すること。
   ⚠️ 社名のあとの全角スペース（`　福利厚生サービス　…　　　`）は**原稿なのでそのまま残す**。
      アイコンに接する半角スペースだけCSSの余白に置き換えてある（料金ページと同じ扱い）。 */
.svc__item + .svc__item { margin-top: 2em; }
.svc__cat { display: flex; align-items: center; gap: .5em; }
.svc__site { display: flex; align-items: baseline; flex-wrap: wrap; margin-top: .7em; }
.svc__site::before {
  content: ""; flex: none; width: .72em; height: .72em; margin-right: .5em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* 「HPを見る」。⚠️ 外部サイトなので別タブで開く（rel="noopener" 必須） */
.svc__hp { display: inline-flex; align-items: center; position: relative; }
/* タップ領域44px（計画書 5-3） */
.svc__hp::after { content: ""; position: absolute; inset: -12px -8px; }
.svc__body { margin-top: .5em; }

/* ---------- 番号付きの箇条書き（取り組みの「徹底した衛生管理」7項目） ----------
   ⚠️ 現行は <ol>。番号は情報の一部なので、記号の箇条書き（.price__list）に変えない。
   ⚠️ 「他園との違い」の .vs__ol と同じ見た目。あちらの指定は書き換えず、別に定義してある
      （承認済みのページに手を入れないため）。 */
.price__ol { margin-top: .8em; padding-left: 1.6em; list-style: decimal; }
.price__ol li + li { margin-top: .5em; }

/* ---------- よくあるご質問 ----------
   現行サイトのマークアップ：
     <p class="well2"><span style="color:#6e4a55"><strong><i class="fa fa-question-circle"></i> 質問</strong></span><br>答え</p>
   ⚠️ 現行は1つの段落を <br> で折り返しているが、新サイトでは質問と答えを分ける。
      **本文の文字は1字も変わらない。**
   ⚠️ 現行の色（#6e4a55）はコントラスト 7.36:1 で読める。**A案の --ink（8.53:1）に置き換える**
      （料金表・他園との違いと同じ扱い。新しい色を増やさないため）。 */
.faq__item + .faq__item { margin-top: 1.8em; }
.faq__q { display: flex; align-items: baseline; gap: .5em; }
.faq__a { margin-top: .5em; }

/* ---------- 時刻・月の表（一日の流れ・年間行事） ----------
   ⚠️ 現行は td だけで組まれているが、左の列は「その行の見出し」なので
      th scope="row" にする（読み上げソフトが「7：00 順次登園」と正しく読む）。
      **画面に出る文字は1字も変わらない。**
   ⚠️ 列幅は現行と同じ 30% : 70%。時刻・月は現行どおり中央寄せ。
   ⚠️ 右の列だけ左寄せにしてある。現行は中央寄せだが、9：30の行は60字を超えるため、
      中央寄せだと最終行だけ中央に寄って読みにくい（新サイトは列幅が狭いのでさらに折り返す）。
      **文字は1字も変えていない。寄せ方だけの違い。** */
.ttable { width: 100%; border-collapse: collapse; }
.ttable th, .ttable td { padding: 12px 10px; vertical-align: middle; }
.ttable th { width: 30%; white-space: nowrap; text-align: center; }
.ttable td { text-align: left; }

/* ---------- 施設情報の表（アクセスページ・現行の pb_simple_table） ---------- */
.itable { width: 100%; border-collapse: collapse; }
.itable th, .itable td { padding: 13px 14px; text-align: left; vertical-align: top; }
.itable th { width: 26%; white-space: nowrap; }

/* ---------- 地図（アクセスページ） ----------
   ⚠️ 新サイトで唯一、外部（Google）へ通信する箇所。
      地図は見学に来ていただくための重要な情報のため、現行どおり埋め込む
      （2026年8月11日・山田さん判断）。
   ⚠️ iframe は既定で枠線が付くので border:0 で消す（現行の frameborder="0" と同じ）。 */
.gmap { margin-top: 56px; }
.gmap iframe { display: block; width: 100%; height: 450px; border: 0; }

/* ---------- 他園との違い：2つの保育園の対比 ----------
   ⚠️ 対比の見せ方は「ラベルの下の細い下線」。**地の色で囲む形にしないこと。**
      2026年8月12日・山田さん判断。実測で決めた経緯は次のとおり。

        現行サイト  文章 696px ／ 写真の下の余白 409px
        地の色の枠  文章 1174px ／ 余白 867px  ← 上下の余白が1項目あたり80px増える
        縦線        文章 978px ／ 余白 671px（−23%）

      新サイトは現行より文字が大きく（14→14.88px）字間も広いため、
      同じ文章でも縦に長くなる。そのうえ枠で囲むと写真との差が開きすぎた。

   ⚠️⚠️ **2026年8月12日・山田さん判断で「左の縦線」から「ラベルの下線」に変更。**
      「縦線が入るとデザインが気になる」というご指摘による。
      ・【港南芝浦園】… ピンクの下線 ／【一般的な保育園】… うすいグレーの下線
      ・下線はラベルの文字の幅ぶんだけ。行いっぱいには引かない
        （32項目×2本＝64本になるため、行いっぱいだと区切り線に見えて重くなる）
      ・太さ1pxは `.price__h2::after` などと同じ、この設計の下線の作法にそろえてある

   ⚠️ 下線は `border-bottom` ではなく **`text-decoration`** で引くこと。
      `border-bottom`（＋ padding）だと**1項目あたり約21px縦に伸び、余白が
      最大553→572pxに増えた**（2026年8月12日に実測）。`text-decoration` は
      いまある行の高さの中に線を引くので、**縦の高さがまったく変わらない。**
      本文の中のリンクの下線（`.price__body p a`）と同じやり方。 */
.vs__item + .vs__item { margin-top: 2.2em; }
.vs__ours { margin-top: .7em; }
.vs__other { margin-top: .5em; }
.vs__ours strong, .vs__other strong {
  display: block;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
/* 「衛生管理」だけにある番号付きの7項目 */
.vs__ol { margin-top: .8em; padding-left: 1.6em; list-style: decimal; }
.vs__ol li + li { margin-top: .5em; }
/* 「＊超電水とは」などの補足。行頭に＊を置く */
.vs__note { margin-top: 1em; display: flex; flex-wrap: wrap; }
.vs__note::before { margin-right: .4em; align-self: flex-start; margin-top: .55em; }

/* ---------- 料金の表 ---------- */
/* ⚠️ ここだけは等分のまま。左右とも表なので、片方を広くする理由がない
      （上の .price__row を 1.5 : 1 にしたとき、この行だけ明示的に戻した） */
.price__row--tables { align-items: start; gap: 48px; grid-template-columns: 1fr 1fr; }
.price__tabletitle { display: flex; align-items: center; gap: .5em; margin-bottom: 16px; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th, .ptable td { padding: 13px 8px; text-align: center; }
/* 現行と同じ列幅（1列目34%・残り22%ずつ）。延長料金の表は4等分 */
.ptable th:first-child { width: 34%; }
.price__tablewrap + .price__tablewrap .ptable th { width: 25%; }
.price__caption { margin-top: 16px; }

/* ---------- 記事の一覧（/blog/ ・/news/ とそのページ送り） ----------
   ⚠️ 幅は記事ページと同じ860px。一覧と記事で本文の左右の位置がそろう。 */
.archive { width: min(860px, 100% - 48px); margin: 0 auto; padding: 56px 0 40px; }
.archive__head { text-align: center; }
.archive__lead { margin-top: 18px; }

/* 記事が1件も無いカテゴリー（/category/未分類/）の案内。文言は現行サイトのまま */
.alist__empty { margin-top: 48px; text-align: center; }

/* 1件分：写真 ｜ 記事名・日付 の横並び */
.alist { margin-top: 48px; }
.alist__item + .alist__item { margin-top: 4px; }
.alist__item a { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; padding: 20px 6px; }
.alist__img { display: block; overflow: hidden; }
/* ⚠️ 写真の縦横はばらばら（830×510／383×510 など）。
   一覧では同じ大きさの枠に収めたいので、枠の比率を決めて切り抜く。 */
.alist__img img { width: 100%; aspect-ratio: 830 / 510; object-fit: cover; transition: transform .7s ease; }
.alist__item a:hover .alist__img img { transform: scale(1.04); }
.alist__body { display: block; }
.alist__title { display: block; }
.alist__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; }

/* ページ送り。
   ⚠️ 現在地の前後2ページと最初・最後だけを出す省略形（2026年8月11日・山田さん判断）。
      現行サイトは37個すべて並べていたが、スマホで7行・画面の4割を占めていた。
      ページそのものは37枚すべて作るのでURLは1本も減らない。
   ⚠️ 1つ1つは44px以上にして押しやすくする（計画書 5-3）。 */
.pager { margin-top: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.pager__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pager__num, .pager__nav {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 6px;
}
/* 「…」は押せないので枠を付けない */
.pager__gap { display: flex; align-items: flex-end; justify-content: center; min-width: 24px; min-height: 44px; padding-bottom: 12px; }

/* ◀ ▶ の矢印。⚠️ 現行サイトは外部から読み込んだアイコンを使っているが、
   新サイトは外部読み込みゼロの方針なので、共通のSVG（--icon-arrow）を使う。 */
.pager__nav::before {
  content: ""; width: .72em; height: .72em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.pager__nav--prev::before { transform: scaleX(-1); }

/* ---------- 記事ページ（園日記・お知らせ） ----------
   ⚠️ 幅は下層ページ（1160px）より狭い860px。長い文章は横に広すぎると
      目線が戻れなくなって読みにくいため。写真（830px）はこの中に収まる。 */
.post__wrap { width: min(860px, 100% - 48px); margin: 0 auto; padding: 56px 0 40px; }
.post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
/* ⚠️ 写真の上と下は同じだけ空ける。
   下を空けないと、写真と本文がくっついて読みにくい（2026年8月11日・山田さんのご指摘）。 */
.post__image { margin-top: 26px; }
.post__image img { width: 100%; height: auto; }
.post__content { margin-top: 26px; }
.post__content > * + * { margin-top: 1.5em; }
.post__content img { max-width: 100%; height: auto; }
/* WordPressの「埋め込みカード」の残骸は表示しない（監査1-1）。
   現行は style属性の clip で見えなくしていたが、新サイトのHTMLにはその属性が無く、
   読み込み先の /embed/ も無いため「404の窓」がそのまま見えてしまう。
   ⚠️ 対象は園日記「ちょうちょ」の1記事だけ（550枚を機械検索して確認済み）。
      原稿（microCMSの本文）には触れず、見た目だけを現行と同じ「見えない」状態に戻す */
.wp-embedded-content { display: none; }
.post__meta--bottom { margin-top: 30px; }

/* ⚠️ カテゴリー名はリンクではなく文字（2026年8月11日・山田さん判断）。
   押せる範囲を広げる指定は不要になったので入れていない。 */

/* 見学予約・お問い合わせ（計画書 4-5） */
.post__cta { margin-top: 52px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* 前の記事・次の記事。⚠️ 片方しか無いとき（最初と最後の記事）も
   左右の位置が入れ替わらないように、列を明示する */
.post__nav { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* ⚠️ HTMLの中身は現行サイトと同じ「記事名 → ラベル」の順に置いてある。
   画面ではラベル（前の記事／次の記事）を上に見せたいので、ここで並べ替える。 */
.post__nav-item { display: flex; flex-direction: column-reverse; gap: 7px; padding: 16px 20px; min-height: 44px; }
.post__nav-item--prev { grid-column: 1; }
.post__nav-item--next { grid-column: 2; text-align: right; }

/* 記事の下の「最新の保育活動中の様子」（現行の #single_news_list） */
.postlist { margin-top: 88px; }
.postlist__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.postlist__list { margin-top: 18px; }
.postlist__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  padding: 15px 4px; min-height: 44px;
}
.postlist__date { flex: none; }

/* お知らせの「関連記事」（現行の #related_post） */
.related { margin-top: 88px; }
.related__list { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.related__list a { display: block; height: 100%; }
.related__img { display: block; overflow: hidden; }
.related__img img { width: 100%; aspect-ratio: 830 / 510; object-fit: cover; transition: transform .7s ease; }
.related__list a:hover .related__img img { transform: scale(1.04); }
.related__name { display: block; margin-top: 12px; }

/* ---------- 園ごとの全メニュー（ページ末尾・計画書 4-2） ---------- */
.pmenu { margin-top: 104px; }
.pmenu__title { text-align: center; display: flex; align-items: center; justify-content: center; gap: .7em; }
.pmenu__list { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
/* コンサルティングのご案内は4項目なので2列にする（2026年8月13日・山田さん指示）。
   ⚠️ 園メニュー（10項目）の5列のままだと5列目が空き、右側に余白ができていた。
      2列なら4項目が2行×2列でぴったり埋まり、長い項目名も折り返さずに収まる。 */
.pmenu--consult .pmenu__list { grid-template-columns: repeat(2, 1fr); }
.pmenu__link {
  display: flex; align-items: center; justify-content: center; gap: .6em;
  height: 100%; min-height: 62px; padding: 14px 16px; text-align: center;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

/* ---------- ページ末尾のボタン ---------- */
.price__foot { margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

/* ============================================================
   スマホ固定バー（PCでは非表示）
   ============================================================ */
.spbar { display: none; }

/* ============================================================
   中間幅（横並びのメニューのまま、少しだけ詰める範囲）
   ★ 1080px を下回ったらメニューは横並びをやめてハンバーガーになる
     （実測：折り返しを禁止すると 1020px まで1段に収まる。60px の余裕を見て 1080px）
   ============================================================ */
@media (max-width: 1259px) and (min-width: 1080px) {
  .hd__logo img { width: 236px; }
  .gnav--main a { padding: 6px 10px; font-size: .86rem; }
  .gnav--parks .gnav__row > li > a { padding: 6px 10px; font-size: .86rem; }
  .hd__cta { padding: 12px 18px; font-size: .78rem; }
  .hd__inner { gap: 14px; }
  .hd__nav { gap: 14px; }
}

/* ============================================================
   ★ ハンバーガーメニューに切り替わる幅（1079px以下）
     メニューが1行に収まらなくなったら、中途半端に折り返さず
     スマホと同じ3本線のメニューにする
   ============================================================ */
@media (max-width: 1079px) {
  /* ⚠️ backdrop-filter が付いた要素は、その中の position:fixed の基準になってしまう。
     ヘッダーに掛かっていると、メニュー（.hd__nav）が画面全体に広がらず
     ヘッダーの高さで切れてしまうため、この幅では必ず無効にする。 */
  .hd { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

  .hd__inner { gap: 0; justify-content: space-between; padding: 8px 0; }
  .hd__logo img { width: 236px; }
  .hd__burger { display: flex; }

  /* --- スマホメニュー本体（開くと画面いっぱいに出る） --- */
  .hd__nav {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 65;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 76px 20px calc(90px + env(safe-area-inset-bottom));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-100%); opacity: 0; visibility: hidden;
    transition: transform .34s ease, opacity .28s ease, visibility .34s;
  }
  body.is-menu-open .hd__nav { transform: translateY(0); opacity: 1; visibility: visible; }
  body.is-menu-open { overflow: hidden; }

  .hd__menus { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .gnav--main ul { flex-direction: column; justify-content: flex-start; }
  .gnav--main a { justify-content: flex-start; padding: 15px 4px; font-size: 1rem; }

  .gnav--parks .gnav__row { flex-direction: column; justify-content: flex-start; }
  /* 1行目＝園名（左）と開閉ボタン（右）、2行目＝下層メニュー */
  .gnav--parks .gnav__row > li {
    position: static;
    display: grid; grid-template-columns: 1fr 52px;
  }
  .gnav--parks .gnav__row > li > a { grid-column: 1; justify-content: flex-start; padding: 15px 4px; font-size: 1rem; }

  /* ＋／− の開閉ボタン（現行サイトと同じ操作感）。閉じているときは＋、開くと− */
  .gnav__toggle {
    grid-column: 2; display: block; position: relative;
    width: 52px; min-height: 44px;
  }
  .gnav__toggle::before, .gnav__toggle::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 15px; height: 1.5px; background: currentColor;
    transform: translate(-50%, -50%); transition: transform .3s ease;
  }
  .gnav__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
  .gnav__toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(0deg); }

  /* 下層リンクは最初は閉じておく（開いたままだと画面3枚分の長さになるため）。
     ＋を押した園だけ開く */
  /* 各案のCSSが .gnav__sub に付けている余白を確実に打ち消すため、
     閉じている状態はセレクタを長くして優先度を上げてある */
  .gnav--parks .gnav__row > li > .gnav__sub {
    grid-column: 1 / -1;
    position: static; transform: none; opacity: 1; pointer-events: auto;
    min-width: 0; box-shadow: none; padding: 0; margin: 0;
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .34s ease, visibility .34s, padding .34s ease, margin .34s ease;
  }
  .gnav--parks .gnav__row > li.is-open > .gnav__sub {
    max-height: 640px; visibility: visible; padding: 4px 0 10px; margin: 0 0 6px;
  }
  .gnav__sub a { padding: 11px 4px 11px 22px; font-size: .9rem; white-space: normal; }

  .hd__cta { width: 100%; margin-top: 22px; padding: 17px 20px; }

  /* ハンバーガーが×に変わる */
  body.is-menu-open .hd__burger { position: relative; z-index: 70; }
  body.is-menu-open .hd__burger i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.is-menu-open .hd__burger i:nth-child(2) { opacity: 0; }
  body.is-menu-open .hd__burger i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  body.is-menu-open .returntop, body.is-menu-open .spbar { display: none; }

  /* --- 下層ページ --- */
  /* 表を2つ横に並べると1つあたりが狭くなりすぎるので、この幅から縦に積む */
  .price__row--tables { grid-template-columns: 1fr; gap: 56px; }
  .price__tablewrap + .price__tablewrap .ptable th { width: 25%; }
  /* メニュー10件は5列だと窮屈なので3列に */
  .pmenu__list { grid-template-columns: repeat(3, 1fr); }

  /* アクセスページの「表 ｜ 写真 ｜ 写真」は3列だと表が潰れるので、
     表を全幅に、写真2枚を横並びにする */
  .price__row--three { grid-template-columns: 1fr 1fr; gap: 32px; }
  .price__row--three > .price__body { grid-column: 1 / -1; }
}

/* タブレット〜小さめのノートPCでは、メニューの中身を中央に寄せて
   横に間延びしないようにする */
@media (max-width: 1079px) and (min-width: 768px) {
  .hd__menus, .hd__cta { max-width: 620px; margin-inline: auto; }
  .hd__nav { padding-top: 96px; }

  /* タブレット幅だけのお問い合わせボタン（監査3-6）。
     ロゴと menu の間に出す。⚠️ 上の .hd__cta の共通指定（width100%・中央寄せ）を
     ここで打ち消す（このボタンはメニューの中ではなくヘッダーに直接置くため） */
  .hd__cta--tab {
    display: inline-flex;
    width: auto; max-width: none;
    margin: 0 16px 0 auto;
    padding: 11px 20px; font-size: .8rem;
  }

  /* ---------- 下層ページ：文章と写真を縦に並べる ----------
     2026年8月12日・山田さん判断。
     ⚠️ この幅で横に並べると、文章が1行25文字・写真が256pxとどちらも窮屈になる
        （実測。768pxのとき）。縦に並べれば文章は1行47文字、写真も大きく出せる。
     ⚠️ 縦に並べると写真が画面幅いっぱい（最大1031px）まで引き伸ばされる。
        元画像は600pxなので、それ以上には広げない。中央に置く。 */
  .price__row, .price__row--rev { grid-template-columns: 1fr; gap: 32px; }
  .price__row--rev .price__media { order: 0; }   /* 縦のときは必ず「文章 → 写真」 */
  .price__media img { max-width: 600px; display: block; margin-inline: auto; }
}

/* ============================================================
   スマホ（レイアウトを1列にする範囲）
   ============================================================ */
@media (max-width: 767px) {
  .hd__logo img { width: 180px; }              /* 現行サイトのスマホ用と同じ */

  .omoi__row { grid-template-columns: 1fr; }
  .omoi__row--rev .omoi__media { order: 0; }   /* スマホは必ず「文章→写真」 */
  .diary__list { grid-template-columns: 1fr; gap: 26px; }
  .news__list a { grid-template-columns: 96px 1fr; gap: 16px; }
  .fcontact__inner { grid-template-columns: 1fr; gap: 34px; }
  .fbnr__list { grid-template-columns: 1fr; gap: 12px; }

  .returntop { right: 12px; bottom: 74px; }

  /* ---------- 下層ページ ---------- */
  /* ⚠️ 白い四角の左右の余白（86px）はスマホでは画面をはみ出すので必ず詰める */
  .phead { min-height: 220px; padding: 30px 18px; }
  .price { padding: 46px 0 24px; }
  .price__sec + .price__sec { margin-top: 72px; }
  .price__row { grid-template-columns: 1fr; gap: 28px; }
  .price__row--rev .price__media { order: 0; }   /* スマホは必ず「文章→写真」 */
  .price__row + * { margin-top: 48px; }
  .price__row--tables { gap: 44px; }
  .price__entry { margin-top: 40px; }

  /* --- 区切り③（各園の下層）で足したもの --- */
  .price__row--three { grid-template-columns: 1fr; gap: 28px; }
  /* 地図は高さを詰める（450pxのままだとスマホの画面をほぼ埋めてしまう） */
  .gmap { margin-top: 36px; }
  .gmap iframe { height: 300px; }
  /* ⚠️ スマホでは表を「項目名の下に内容」の縦積みにする（2026年8月13日・山田さん指示）。
        横並びのままだと `white-space: nowrap` の見出し列が
        **375px幅で200px**まで広がり、長い住所やアクセスの説明が
        残り112pxに押し込まれて非常に読みにくかった（実測）。
        縦積みにすると内容が画面幅いっぱいに使える。
     ⚠️ 見出しは背景色（--paper-2）が付いたまま帯のように出るので、
        どこが項目名かは変わらず分かる。 */
  .itable, .itable tbody, .itable tr, .itable th, .itable td { display: block; width: auto; }
  .itable th, .itable td { padding: 11px 12px; }
  .itable th { white-space: normal; border-bottom: 0; padding-bottom: 8px; }
  .itable td { padding-top: 8px; }
  /* 区切り線は行ごとに1本。最後の行の下は元の表と同じく線を残す */
  .itable tr { border-bottom: 1px solid var(--line); }
  .itable td { border-bottom: 0; }

  /* ---------- 記事の一覧 ---------- */
  .archive { padding: 36px 0 24px; }
  .alist { margin-top: 30px; }
  /* スマホは写真を上、記事名を下に積む（横並びだと写真も文字も小さくなりすぎる） */
  .alist__item a { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
  .pager { margin-top: 40px; }

  /* ---------- 記事ページ ---------- */
  .post__wrap { padding: 36px 0 24px; }
  .post__cta { gap: 12px; }
  /* 前後の記事は縦に積む。⚠️ 積んだときは右寄せを解除する（中央の細い画面で読みにくいため） */
  .post__nav { grid-template-columns: 1fr; gap: 12px; }
  .post__nav-item--prev, .post__nav-item--next { grid-column: 1; text-align: left; }
  .postlist { margin-top: 60px; }
  .related { margin-top: 60px; }
  .related__list { grid-template-columns: 1fr; gap: 20px; }

  .pmenu { margin-top: 68px; }
  .pmenu__list { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  /* スマホでは項目名が長いコンサルも1列にそろえる（上の2列指定を打ち消す） */
  .pmenu--consult .pmenu__list { grid-template-columns: 1fr; }
  .pmenu__link { min-height: 56px; justify-content: space-between; text-align: left; }
  .price__foot { margin-top: 52px; }
  .price__btns--right { justify-content: center; }

  /* 料金の表を、年齢ごとの「まとまり」に積み替える（2026年8月9日・山田さん判断）。
     ⚠️ 表のマークアップは1つのまま。列の名前（月100時間など）は
        各セルの data-label から出しているので、原稿の文字は増えていない。
     ⚠️ 行の並び順は現行のまま（0歳児保育料 → 0歳児 補助金利用後 → 1歳児保育料 → …）。 */
  .ptable, .ptable thead, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; }
  .ptable thead { display: none; }                    /* 列見出しは各セルの前に出すので隠す */
  .ptable th:first-child,
  .price__tablewrap + .price__tablewrap .ptable th { width: auto; }
  .ptable tr { overflow: hidden; }
  .ptable tr + tr { margin-top: 12px; }
  .ptable tbody th { text-align: left; padding: 11px 15px; }
  .ptable td {
    display: grid; grid-template-columns: auto 1fr; gap: 14px;
    text-align: right; padding: 10px 15px;
  }
  .ptable td::before { content: attr(data-label); text-align: left; }

  /* 下部バー：左1/3=電話 ／ 右2/3=お問い合わせ（計画書 5-2） */
  .spbar {
    display: grid; grid-template-columns: 1fr 2fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding-bottom: env(safe-area-inset-bottom);   /* iOSセーフエリア（計画書 5-3） */
  }
  .spbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* ⚠️ 受付時間を2行にしたぶん、少しだけ高くしてある（62→68px。2026年8月15日・実機確認）。
          下の body { padding-bottom } と必ず同じ数字にすること */
    min-height: 68px; line-height: 1.35; padding: 6px 8px;
  }
  .spbar small { font-size: .64rem; line-height: 1.5; text-align: center; }
  /* ボタンの中のアイコン（電話・封筒）。色は theme-a.css 側 */
  .spbar__ico {
    display: inline-block; flex: none;
    width: .92em; height: .92em; margin-right: .45em;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .spbar__ico--tel { -webkit-mask-image: var(--icon-tel); mask-image: var(--icon-tel); }
  .spbar__ico--mail { -webkit-mask-image: var(--icon-mail); mask-image: var(--icon-mail); }
  .spbar strong, .spbar__ctaline { display: inline-flex; align-items: center; }
  body { padding-bottom: 68px; }
  body.is-typing .spbar { display: none; }       /* フォーム入力中は隠す（計画書 5-3） */
}

/* 各園のご紹介（/nursery/）で、園カードの見出しの下に写真を1枚置くための指定。
   ⚠️ 写真は列の幅いっぱい。比率は元画像のまま（縦横比を変えない）。
   ⚠️ 新しい色は増やしていない（余白と角の丸みだけ。theme-a.css 側の変更なし）。 */
.price__cardpic { margin: 18px 0 22px; }
/* ⚠️ 3園の写真は縦横の比率がそろっていない（830×510／1200×800／1200×900）ため、
      そのまま並べると高さが違い、下の表の位置までずれていた（2026年8月13日・山田さんご指摘）。
      表示の比率を 3:2 にそろえて高さを合わせる。
      **写真そのものは加工していない**（切り取って見せているだけ。元の画像はそのまま）。
      トップページの .omoi__media img と同じやり方。 */
.price__cardpic img { width: 100%; height: auto; display: block; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- 保育内容（/policy/）で使う指定 ----------
   ⚠️ 現行の Font Awesome を自前のSVGで再現している（外部読み込みゼロ）。
      アイコンに接していた半角スペースは、この余白（gap／margin）に置き換えてある。 */

/* 理念の4行（現行は1つの段落の中で <br> 区切り・行頭に fa-arrow-circle-right） */
.price__arrows span { display: block; padding-left: 1.5em; text-indent: -1.5em; }
.price__arrows span + span { margin-top: .5em; }
.price__arrows span::before {
  content: ""; display: inline-block; width: .72em; height: .72em; margin-right: .55em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* “おけいこ”の語の並び（現行は語の前に fa-asterisk）。
   ⚠️ 語のあいだの全角スペースは原稿の文字なのでHTML側に残してある。 */
.price__oke span::before {
  content: ""; display: inline-block; width: .72em; height: .72em; margin-right: .4em;
  background-color: currentColor;
  -webkit-mask-image: var(--icon-asterisk); mask-image: var(--icon-asterisk);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* 5つの約束・まほう式保育の項目（現行は番号がオレンジ #ff7f50＝2.44:1 で読みにくい） */
.price__num + .price__num { margin-top: 1.6em; }

/* 中央寄せの1行（現行 style="text-align:center" の段落） */
.price__center-text { text-align: center; }
.price__btns--center { justify-content: center; }

/* ---------- 採用情報（/recruit/）の職種タブ ----------
   現行は外部ライブラリのタブUI。同じ動きを自前で書いている。
   ⚠️ JavaScriptが動かない環境では9職種すべてが縦に並んで見える
      （JSが動いたときだけ、選ばれていないパネルに hidden が付く）。 */
.jobs { margin-top: 28px; }
.jobs__tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 28px; padding: 0; }
.jobs__tab {
  font: inherit; cursor: pointer; padding: 10px 18px; min-height: 44px;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  letter-spacing: .08em;
}
.jobs__panel + .jobs__panel { margin-top: 56px; }
/* ⚠️ 職種の見出し・注記・表のあいだの余白（2026年8月13日・山田さん指示）。
      .price__body > * + * は price__body の直下にしか効かないため、
      パネルの中（見出し → 表）が詰まって見えていた。 */
.jobs__panel > * + * { margin-top: 1.5em; }
.jobs__panel > .price__h3 + * { margin-top: 1.8em; }
.jobs__apply { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }

@media (max-width: 767px) {
  .jobs__tabs { gap: 6px; }
  .jobs__tab { padding: 9px 14px; font-size: .92rem; }
}

/* 見出しの列に長い項目がある表だけ、狭い画面で折り返しを許す
   （既定の .itable は nowrap。短い見出しの表の見た目は変えない） */
@media (max-width: 767px) {
  .itable--wrap th { white-space: normal; }
}

/* 3つを等分に並べる行（WEBカメラの3園）。狭い画面では縦に積む */
.price__row--eq3 { grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 767px) {
  .price__row--eq3 { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- サイトマップ（/sitemap/）のリンク一覧 ----------
   現行は6列のグリッドに散らして置いているが、読む順（左から右）は同じなので
   新サイトでは幅に応じて2〜3列に自動で折り返す形にする。 */
.smap { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.smap + .smap { margin-top: 32px; padding-top: 32px; }
.smap li { padding-left: 1.2em; text-indent: -1.2em; }
.smap li::before {
  content: ""; display: inline-block; width: .6em; height: .6em; margin-right: .6em;
  background-color: currentColor; vertical-align: middle;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ============================================================
   フォーム（区切り⑤：お問い合わせ／ご見学予約／一時保育／スタッフ応募）

   ⚠️ **確認画面は作らない。** 現行サイトにも無い（計画書「4フォームの完全仕様」）。
      誤送信を防ぐため、送信ボタンの真上に入力内容の要約（.form__summary）を出す。
   ⚠️ **同意チェックボックスは置かない**（訂正メモ 訂正56）。
      送信ボタンの下に、プライバシーポリシーへの1行のリンク（.form__note）だけを置く。
   ⚠️ 入力欄の文字は **16px**。これより小さいと iPhone が入力時に勝手に画面を拡大し、
      戻したときに横スクロールが残る。
   ⚠️ **新しい色は増やしていない。** エラーの表示も色だけに頼らず、
      文字・枠線・左の縦線の3つで示す（色覚特性のある方にも伝わるように）。
   ============================================================ */
/* ⚠️ 入力欄とボタンは、指定しないとブラウザ既定の書体（Arial など）のままになる。
      本文の書体を受け継がない仕様のため、まとめて受け継がせておく。
      いま画面に出る欄は下の .form__control で指定済みだが、
      新しい欄を足したときに書き忘れても本文と同じ書体になる（2026年8月15日・山田さんのご指示）。
      ⚠️ 見た目は変わらない（実測済み）。ラジオ・チェックは絵なので元から文字が無い。 */
input, select, textarea, button { font-family: inherit; }

.form { max-width: 680px; margin: 0 auto; }
.form__field + .form__field { margin-top: 26px; }
.form__label { display: block; margin-bottom: .5em; line-height: 1.8; }

.form__control {
  display: block; width: 100%;
  font-family: inherit; font-size: 16px; font-weight: 300; line-height: 1.6;
  padding: 13px 14px; border-radius: 4px;
  -webkit-appearance: none; appearance: none;
}
textarea.form__control { min-height: 170px; resize: vertical; }

/* プルダウンの下向き矢印。共通の矢印SVGを90度回して使う（外部読み込みゼロ） */
.form__select { position: relative; }
.form__select .form__control { padding-right: 42px; }
.form__select::after {
  content: ""; position: absolute; right: 16px; top: 50%; pointer-events: none;
  width: .58em; height: .58em; transform: translateY(-50%) rotate(90deg);
  background-color: currentColor;
  -webkit-mask-image: var(--icon-arrow); mask-image: var(--icon-arrow);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ラジオ・チェックボックス（スタッフ応募の性別・希望勤務形態・保有資格）
   ⚠️ 押せる範囲は44px以上（計画書 5-3）。 */
.form__choices { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.form__choice { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; cursor: pointer; }
.form__choice input { width: 20px; height: 20px; flex: none; margin: 0; }

/* エラー（未入力・形式ちがい）。文字・枠線・左の縦線の3つで示す */
.form__error { display: none; margin-top: .5em; padding-left: .8em; font-size: .9rem; line-height: 1.7; }
.form__field.is-error .form__error { display: block; }

/* 送信ボタンの真上に出す「入力内容の要約」（確認画面の代わり） */
.form__summary { margin-top: 40px; padding: 20px 22px; border-radius: 4px; font-size: .93rem; }
.form__summary-title { font-size: 1rem; margin: 0 0 .8em; }
.form__summary dl { display: grid; grid-template-columns: 10em 1fr; gap: .5em 1em; margin: 0; line-height: 1.8; }
.form__summary dt { margin: 0; }
.form__summary dd { margin: 0; overflow-wrap: anywhere; }

/* ボット対策（Cloudflare Turnstile）の置き場 */
.form__widget { margin-top: 28px; display: flex; justify-content: center; }
/* ハニーポット（.form__pot）は2026年8月16日に廃止（訂正メモ 訂正95） */

.form__actions { margin-top: 30px; text-align: center; }
.form__note { margin-top: 18px; text-align: center; font-size: .86rem; line-height: 1.8; }
/* 入力欄の記入例（例：9月10日（木）11:00）。ラベルの下に小さく出す（監査2-6）。色は theme-a.css 側 */
.form__hint { margin-top: 4px; font-size: .8rem; line-height: 1.6; }

/* 各園のご紹介：帯のすぐ下の「ご見学予約フォーム」への近道（監査4-5）。色は theme-a.css 側 */
.quicklink {
  width: min(1160px, 100% - 48px); margin: 14px auto 0;
  text-align: right; font-size: .86rem;
}
.quicklink a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }

/* 送信できなかったときのお知らせ（画面の先頭に出す） */
.form__alert { margin-bottom: 30px; padding: 16px 20px; border-radius: 4px; line-height: 1.9; }

@media (max-width: 767px) {
  .form__summary dl { grid-template-columns: 1fr; gap: .1em; }
  .form__summary dd + dt { margin-top: .7em; }
}

/* ---------- ご見学可能時間（ご見学予約フォーム） ----------
   ⚠️ 2026年8月14日・山田さんのご提案で作った部分。
      **施設を選ぶと、その園の見学できる時間だけが出る**（main.js の「7.」）。
      現行サイトはタブで3園を切り替える形だったが、フォームの中でも
      もう一度同じ施設を選ばせていたため、選択と連動させて1回にまとめた。
   ⚠️ **まだ選んでいないとき、JavaScriptが動かないときは3園すべてを出す**
      （情報が消えないようにするため）。 */
.form__hours { margin: -4px 0 26px; padding: 16px 18px; border-radius: 4px; }
.form__hours-title { margin: 0 0 .7em; font-size: .95rem; }
.form__hours-park { margin: 0 0 .35em; font-weight: 500; }
.form__hours p:last-child { margin-bottom: 0; }
.form__hours-item + .form__hours-item { margin-top: 1.2em; }

/* フォームの中の小見出し（ご見学予約の「■ご希望の見学日時」）。
   ⚠️ 現行サイトでは入力欄のラベルと同じ <label> で書かれているが、
      3つの希望日時をまとめる見出しの役割なので、新サイトでは小見出しにする。
      **文字は現行のまま**（■も含めてそのまま）。 */
.form__group-title { margin: 0 0 .6em; line-height: 1.8; }
.form__field + .form__group-title { margin-top: 30px; }

/* 「■ご希望の見学日時」の下の説明文（ご見学予約フォーム） */
.form__group-note { margin: -.2em 0 1.1em; font-size: .93rem; line-height: 1.9; }