@charset "UTF-8";
/* =========================================================
   認定こども園 日高ななつ星 — TOP（PROD-20261108-nanatsu-01）
   ベース：日高さくらの木 TOP（hitaka-sakuranoki/coding・PROD-20261023-hitaka-16 時点）を複製し、色と写真をななつ星に置き換え
   色の対応（ロゴデータ hitakagroup_logo_color.ai の実測）：さくらの木の茶 #845C40 → ななつ星の青 #396BA3／ピンク #F3B0CD → オレンジ #F8B73D
   元のコメント：デザインの正＝さくらの木TOPデザイン.jpg（1673×9282）
   PC（1024px以上）はデザインの寸法を --u（デザイン1px）で持ち、
   1440px でデザインの 0.861 倍に固定、それより狭い幅では比例縮小する。
   1023px 以下は1カラムに組み替える。
   ========================================================= */

:root {
  /* 色（デザイン実測） */
  --c-pink-bg: #FDEBC9;     /* 当園について・お知らせの地 */
  --c-pink-bg2: #FBD48C;    /* お問い合わせの地 */
  --c-pink-box: #FCE4B5;    /* 対象の囲み・子育て支援の背面 */
  --c-pink: #F9BC4C;        /* ボタン（ピンク） */
  --c-pink-tag: #FACE7A;    /* 子育て支援のラベル */
  --c-pink-pill: #F8B73D;   /* お知らせのカテゴリ */
  --c-pink-deep: #EE8C00;   /* 見出しのピンク文字・線 */
  --c-brown: #396BA3;       /* 当園で伸びる力の地 */
  --c-brown-ft: #396BA3;    /* フッター */
  --c-brown-h: #396BA3;     /* 見出し */
  --c-brown-btn: #396BA3;   /* 茶ボタン・対象ラベル */
  --c-text: #23344D;        /* 本文 */
  --c-green: #F8B73D;       /* 見出しの1文字だけの緑 */
  --c-white: #fff;

  /* 書体：デザイン（＝パンフの AB-kirigirisu／TA-koigokoro 系）に近い Google Fonts で代用（U-55・U-46） */
  /* フォントはサイト内で2つだけ（RYO「統一しろよサイト内のフォント」）
     見出し・ナビ・ボタン・ラベル＝Yusei Magic（パンフの見出し書体 AB-kirigirisu に近い無料フォント。比較 _shots/top2026/font/）
     本文＝Zen Maru Gothic（パンフの本文 秀英丸ゴシックに近い） */
  --f-head: "Yusei Magic", "Zen Maru Gothic", sans-serif;
  --f-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;

  /* デザイン 1px（1673幅）。1440px以上は 1440/1673 で固定 */
  --u: min(calc(100vw / 1673), 0.8607px);
  --gutter: 24px;
}
@media (max-width: 767px) { :root { --gutter: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .06em;
  overflow-x: clip;
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}
main, .ft { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
em { font-style: normal; }
address { font-style: normal; }
small { font-size: inherit; }
.center { text-align: center; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #fff; padding: 8px 16px; }
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--c-brown-h); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(1673 * var(--u)); margin-inline: auto; padding-inline: calc(125 * var(--u)); }
br.pc { display: inline; }

/* ---------- 部品：見出し ---------- */
.h-ttl {
  position: relative;
  font-family: var(--f-head);
  font-weight: 400;
  color: var(--c-brown-h);
  font-size: calc(76 * var(--u));
  line-height: 1.3;
  letter-spacing: .1em;
}
.h-ttl, .power__ttl, .news__ttl { -webkit-text-stroke: .012em currentColor; } /* 「園」の中が詰まらない太さ */
.h-ttl .g { color: var(--c-green); }
.h-ttl .p { color: var(--c-pink-deep); }
.h-ttl--ic { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.h-ic { width: calc(112 * var(--u)); height: auto; flex: none; }
.crayon {
  position: absolute; left: calc(110 * var(--u)); bottom: calc(-26 * var(--u));
  width: calc(530 * var(--u)); height: calc(26 * var(--u)); color: var(--c-pink-deep);
}
.sec-lead { font-size: calc(25 * var(--u)); line-height: 1.85; letter-spacing: .1em; font-weight: 500; color: var(--c-text); }

/* ---------- 部品：ステッカー（さくらマーク＋白フチ） ---------- */
.sticker { position: absolute; display: block; width: calc(140 * var(--u)); z-index: 3; pointer-events: none; }
.sticker img { width: 100%; filter: drop-shadow(0 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 3px 6px rgba(20,40,80,.18)); }
.sticker--s { width: calc(76 * var(--u)); }

/* ---------- 部品：ボタン ---------- */
.btn-w, .btn-line, .btn-b, .btn-o, .btn-p, .btn-ft {
  display: inline-flex; align-items: center; justify-content: center; gap: .9em;
  font-family: var(--f-head); font-weight: 400; letter-spacing: .1em; line-height: 1.4; text-align: center;
  transition: transform .2s, box-shadow .2s, background-color .2s, opacity .2s;
}
.btn-w svg, .btn-line svg, .btn-b svg, .btn-o svg, .btn-p svg, .btn-ft svg { width: 1em; height: 1em; flex: none; }
.btn-w {
  justify-content: space-between;
  width: calc(462 * var(--u)); min-height: calc(92 * var(--u));
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(56 * var(--u));
  border: 2px solid var(--c-brown-h); border-radius: 999px; background: #fff;
  color: var(--c-brown-h); font-size: calc(24 * var(--u)); letter-spacing: .1em; white-space: nowrap;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(57,107,163,.10);
}
.btn-w__ic { display: grid; place-items: center; width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%; background: var(--c-pink-deep); color: #fff; font-style: normal; flex: none; }
.btn-w__ic svg { width: 46%; height: 46%; }
.btn-line {
  width: calc(594 * var(--u)); min-height: calc(110 * var(--u));
  border: 2px solid rgba(255,255,255,.92); border-radius: 999px; color: #fff; font-size: calc(28 * var(--u));
}
.btn-b {
  width: calc(400 * var(--u)); min-height: calc(86 * var(--u));
  border-radius: 999px; background: var(--c-brown-btn); color: #fff; font-size: calc(25 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(57,107,163,.22);
}
.btn-o {
  width: calc(590 * var(--u)); min-height: calc(90 * var(--u));
  border: 2px solid var(--c-brown-h); border-radius: 999px; background: #fff; color: var(--c-brown-h);
  font-size: calc(28 * var(--u)); position: relative;
}
.btn-o svg { position: absolute; right: calc(40 * var(--u)); }
/* お知らせ一覧へ：デザインどおり茶色地（形・大きさはほかのボタンと同じ） */
.btn-o--brown { background: var(--c-brown-btn); color: #fff; }
.btn-o--full { width: 100%; }
/* 形（枠・文字・高さ・影なし）は全ボタン共通。--ft・--w は幅だけ変える（RYO「ボタン統一して／最初のに」） */
.btn-o--ft { width: calc(400 * var(--u)); }
.btn-o--w { width: calc(506 * var(--u)); }
.btn-p {
  position: relative;
  width: calc(536 * var(--u)); min-height: calc(104 * var(--u));
  border-radius: 999px; background: var(--c-pink); color: var(--c-brown-h); font-size: calc(30 * var(--u));
}
.btn-p svg { position: absolute; right: calc(48 * var(--u)); }
.btn-p--wide { width: 100%; min-height: calc(96 * var(--u)); }
.btn-ft {
  position: relative; width: calc(305 * var(--u)); min-height: calc(58 * var(--u));
  border: 1.5px solid #fff; border-radius: 999px; color: #fff; font-size: calc(22 * var(--u)); font-weight: 500;
}
.btn-ft svg { position: absolute; right: calc(28 * var(--u)); }
@media (hover: hover) {
  .btn-w:hover, .btn-b:hover, .btn-o:hover, .btn-p:hover { transform: translateY(-2px); }
  .btn-line:hover, .btn-ft:hover { background: rgba(255,255,255,.12); }
  .btn-p:hover { background: #F7AE24; }
}

/* ---------- ヘッダー ---------- */
.hd { background: #fff; position: relative; z-index: 50; }
.hd__brand { display: flex; justify-content: center; padding-top: calc(32 * var(--u)); }
.hd__logo { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.hd__mark { width: calc(94 * var(--u)); }
.hd__text { width: calc(140 * var(--u)); }
.menu-btn { display: none; }
.gnav {
  margin: calc(28 * var(--u)) calc(8 * var(--u)) 0;
  background: #fff;
  border-radius: calc(6 * var(--u));
}
.gnav__list {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: calc(68 * var(--u));
  padding-inline: calc(38 * var(--u));
}
.gnav__list li { display: flex; align-items: center; }
.gnav__list li + li::before { content: ""; width: 1.5px; height: calc(22 * var(--u)); background: #B5C6DD; margin-inline: calc(19 * var(--u)); }
.gnav__list a {
  font-family: var(--f-head); font-weight: 400; color: #396BA3;
  font-size: calc(20 * var(--u)); letter-spacing: .06em; white-space: nowrap;
}
.gnav__list a:hover { color: var(--c-pink-deep); }
.drawer, .drawer-overlay { display: none; }

/* ---------- FV ---------- */
.fv { height: calc(832 * var(--u)); background: #AEAEAE; overflow: hidden; }
.fv img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 当園について ---------- */
.about { background: var(--c-pink-bg); padding: calc(95 * var(--u)) 0 calc(200 * var(--u)); position: relative; }
.about__in { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr; column-gap: calc(35 * var(--u)); align-items: center; padding-left: calc(180 * var(--u)); padding-right: calc(150 * var(--u)); }
.about__txt { position: relative; padding-top: calc(80 * var(--u)); }
.about__ttl { font-size: calc(76 * var(--u)); letter-spacing: .08em; padding-left: calc(18 * var(--u)); white-space: nowrap; }
.spark3 { position: absolute; left: calc(-34 * var(--u)); top: calc(-30 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u)); color: var(--c-pink-deep); }
.about .btn-o { width: 100%; max-width: calc(508 * var(--u)); }
.about__lead { margin-top: calc(80 * var(--u)); font-family: var(--f-body); font-size: calc(25 * var(--u)); line-height: 1.85; letter-spacing: .04em; font-feature-settings: "palt"; color: var(--c-text); }
.about__lead .g { color: var(--c-green); }
.about .btn-o { margin-top: calc(60 * var(--u)); }
.about__ph { position: relative; height: calc(650 * var(--u)); } /* 写真の高さを文字の列に近づける（RYO「写真の方高さ抑えて」） */
.about__ph figure { position: absolute; overflow: hidden; border: calc(5 * var(--u) + 1px) solid #fff; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(60,90,140,.12); }
.about__ph img { width: 100%; height: 100%; object-fit: cover; }
.about__p1 { left: 0; top: 0; width: calc(790 * var(--u)); height: calc(370 * var(--u)); border-radius: 46% 40% 18% 24% / 22% 26% 30% 34%; }
.about__p2 { left: calc(-18 * var(--u)); top: calc(362 * var(--u)); width: calc(360 * var(--u)); height: calc(285 * var(--u)); border-radius: 30% 34% 26% 22% / 24% 30% 26% 30%; transform: rotate(-3deg); }
.about__p3 { left: calc(345 * var(--u)); top: calc(340 * var(--u)); width: calc(460 * var(--u)); height: calc(305 * var(--u)); border-radius: 34% 26% 30% 24% / 30% 26% 30% 26%; transform: rotate(2deg); }
.about__st1 { right: calc(-16 * var(--u)); top: calc(-24 * var(--u)); width: calc(132 * var(--u)); }
.about__st2 { left: calc(14 * var(--u)); top: calc(320 * var(--u)); width: calc(84 * var(--u)); }
.about__st3 { left: calc(225 * var(--u)); bottom: calc(-60 * var(--u)); width: calc(132 * var(--u)); }

/* ---------- 当園で伸びる力 ---------- */
.power { position: relative; z-index: 1; background: var(--c-brown); color: #fff; padding: calc(150 * var(--u)) 0 calc(180 * var(--u)); margin-top: calc(-80 * var(--u)); }
.power::before { /* 上辺の円弧 */
  content: ""; position: absolute; left: 50%; top: calc(-90 * var(--u)); transform: translateX(-50%);
  width: calc(2200 * var(--u)); height: calc(400 * var(--u)); border-radius: 50%; background: var(--c-brown); z-index: 0;
}
.power .wrap { position: relative; z-index: 1; padding-inline: calc(30 * var(--u)); }
.power__ttl {
  font-family: var(--f-head); font-weight: 400; text-align: center;
  font-size: calc(124 * var(--u)); line-height: 1.2; letter-spacing: .1em; color: #fff;
}
/* 手書きの揺れ：1文字ずつ角度と高さを少しずらす（デザインの文字の傾き・上下に合わせた） */
.power__ttl .g { color: var(--c-green); }
.power__lead { margin-top: calc(28 * var(--u)); text-align: center; font-size: calc(25 * var(--u)); line-height: 1.85; letter-spacing: .18em; font-weight: 500; }
.power__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); margin-top: calc(36 * var(--u)); }
.pcard { position: relative; background: #fff; border-radius: calc(22 * var(--u)); color: var(--c-brown-h); padding: 0 0 calc(24 * var(--u)); border: calc(3 * var(--u)) solid #fff; box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(10,20,40,.2); }
.pcard__ph { height: calc(250 * var(--u)); border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0; overflow: hidden; }
.pcard__ph img { width: 100%; height: 100%; object-fit: cover; }
.pcard__badge { position: absolute; left: calc(14 * var(--u)); top: calc(178 * var(--u)); width: calc(118 * var(--u)); height: calc(102 * var(--u)); display: grid; place-items: center; }
.pcard__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #fff; stroke: var(--c-brown-h); stroke-width: 2.2; }
.pcard__badge b { position: relative; font-family: var(--f-head); font-weight: 400; font-size: calc(50 * var(--u)); color: var(--c-brown-h);  line-height: 1; padding-top: calc(16 * var(--u)); }
.pcard__ttl { margin-top: calc(18 * var(--u)); text-align: center; font-family: var(--f-head); font-weight: 400; font-size: calc(26 * var(--u)); line-height: 1.32; letter-spacing: .08em;  }
.pcard__txt { margin: calc(10 * var(--u)) calc(24 * var(--u)) 0; font-family: var(--f-body); font-weight: 500; font-size: calc(18.5 * var(--u)); line-height: 1.7; letter-spacing: 0; font-feature-settings: "palt"; color: #396BA3; }
.power .btn-o { margin-top: calc(40 * var(--u)); }

/* ---------- 入園案内（デザインに無い：子育て支援の型を左右反転） ---------- */
.adm { padding: calc(250 * var(--u)) 0 calc(80 * var(--u)); position: relative; }
.adm__in { display: grid; grid-template-columns: 1fr calc(620 * var(--u)); column-gap: calc(80 * var(--u)); align-items: center; padding-left: calc(115 * var(--u)); }
.adm__ph { position: relative; }
.adm__ph figure { position: relative; z-index: 1; aspect-ratio: 782 / 510; border-radius: calc(26 * var(--u)); overflow: hidden; }
.adm__ph img { width: 100%; height: 100%; object-fit: cover; }
.adm .h-ttl { font-size: calc(76 * var(--u)); letter-spacing: .12em; }
.adm .sec-lead { margin-top: calc(36 * var(--u)); } /* 見出し下の線を消した分を詰める（RYO「見出しの下余白開きすぎ」） */
.adm .tags li { width: auto; padding-inline: calc(30 * var(--u)); }
.adm .btn-o { margin-top: calc(40 * var(--u)); }

/* ---------- お知らせ・ブログ ---------- */
.news { position: relative; background: var(--c-pink-bg); padding: calc(90 * var(--u)) 0 calc(170 * var(--u)); }
.news::after { content: ""; position: absolute; left: 50%; bottom: calc(-110 * var(--u)); transform: translateX(-50%); width: calc(2400 * var(--u)); height: calc(360 * var(--u)); border-radius: 50%; background: var(--c-pink-bg); z-index: 0; }
.news__in { position: relative; z-index: 1; display: grid; grid-template-columns: calc(460 * var(--u)) 1fr; padding-left: calc(125 * var(--u)); padding-right: calc(195 * var(--u)); align-items: start; }
.news__head { position: relative; padding-top: calc(180 * var(--u)); padding-left: calc(80 * var(--u)); }
.news__bird { position: absolute; left: calc(130 * var(--u)); top: calc(30 * var(--u)); width: calc(300 * var(--u)); }
.news__ttl { font-family: var(--f-head); font-weight: 400; color: var(--c-brown-h); font-size: calc(92 * var(--u)); line-height: 1.12; letter-spacing: .04em;  transform: rotate(-5deg); transform-origin: left top; }
.news__body { margin-top: calc(135 * var(--u)); }
.news__list { background: #fff; border-radius: calc(44 * var(--u)); padding: calc(18 * var(--u)) calc(52 * var(--u)) calc(60 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(230,160,60,.14); }
.news__list li { border-bottom: 1.5px solid #FCDFA9; }
.news__list a { display: grid; grid-template-columns: calc(165 * var(--u)) calc(185 * var(--u)) 1fr auto; align-items: center; column-gap: 0; min-height: calc(88 * var(--u)); color: #396BA3; font-size: calc(19 * var(--u)); font-weight: 500; letter-spacing: .03em; }
.news__list time { font-size: calc(21 * var(--u)); letter-spacing: .04em; }
.news__list .cat { justify-self: start; display: inline-grid; place-items: center; min-width: calc(148 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: var(--c-pink-pill); color: #fff; font-size: calc(17 * var(--u)); letter-spacing: .06em; line-height: 1.6; white-space: nowrap; }
.news__chev { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #396BA3; }
.news__list a:hover .news__t { color: var(--c-pink-deep); }
.news__more { margin-top: calc(-30 * var(--u)); position: relative; }

/* ---------- 子育て支援 ---------- */
.shien { padding: calc(80 * var(--u)) 0 calc(80 * var(--u)); position: relative; }
.shien__in { display: grid; grid-template-columns: calc(600 * var(--u)) 1fr; column-gap: calc(50 * var(--u)); align-items: center; padding-right: calc(115 * var(--u)); }
.shien__txt { position: relative; padding-top: calc(30 * var(--u)); }
.shien .h-ttl { font-size: calc(76 * var(--u)); letter-spacing: .12em; }
.shien .sec-lead { margin-top: calc(36 * var(--u)); }
.tags { display: flex; gap: calc(30 * var(--u)); margin-top: calc(36 * var(--u)); }
.tags li { font-family: var(--f-head); font-weight: 400 !important; display: grid; place-items: center; width: calc(276 * var(--u)); min-height: calc(58 * var(--u)); border-radius: 999px; background: var(--c-pink-tag); color: var(--c-brown-h); font-weight: 500; font-size: calc(25 * var(--u)); letter-spacing: .14em; }
.shien .btn-o { margin-top: calc(32 * var(--u)); }
.shien__ph { position: relative; }
.shien__ph figure { position: relative; z-index: 1; aspect-ratio: 782 / 510; border-radius: calc(26 * var(--u)); overflow: hidden; }
.shien__ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 一時預かり ---------- */
.tc { padding: calc(80 * var(--u)) 0 calc(80 * var(--u)); }
.tc__in { display: grid; grid-template-columns: calc(715 * var(--u)) 1fr; column-gap: calc(100 * var(--u)); align-items: center; padding-left: calc(85 * var(--u)); padding-right: calc(155 * var(--u)); }
.tc__ph { position: relative; padding-top: calc(80 * var(--u)); }
.tc__ph figure { aspect-ratio: 715 / 480; border-radius: calc(28 * var(--u)); overflow: hidden; }
.tc__ph img { width: 100%; height: 100%; object-fit: cover; }
.tc__ttl { font-size: calc(76 * var(--u)); letter-spacing: .06em; padding-left: calc(40 * var(--u)); }
.tc__ttl .crayon { left: calc(10 * var(--u)); width: calc(440 * var(--u)); bottom: calc(-22 * var(--u)); }
.tc .sec-lead { margin-top: calc(62 * var(--u)); }
.target { display: flex; align-items: flex-start; gap: calc(32 * var(--u)); }
.target dt { flex: none; display: grid; place-items: center; min-width: calc(138 * var(--u)); min-height: calc(56 * var(--u)); padding-inline: calc(20 * var(--u)); border-radius: 999px; font-weight: 500; font-size: calc(23 * var(--u)); letter-spacing: .2em; color: #fff; }
.target dd { font-weight: 500; font-size: calc(24 * var(--u)); line-height: 1.7; letter-spacing: .1em; color: var(--c-brown-h); padding-top: calc(4 * var(--u)); }
.target dt { background: var(--c-brown-btn); } /* 「対象」ラベルは3か所とも同じ茶色の丸い札（RYO「揃える」） */
.tc .btn-o { margin-top: calc(42 * var(--u)); }

/* ---------- 誰でも通園制度 ---------- */
.dr { padding: calc(80 * var(--u)) 0 calc(80 * var(--u)); }
.dr__in { display: grid; grid-template-columns: calc(720 * var(--u)) 1fr; column-gap: calc(45 * var(--u)); align-items: center; padding-left: calc(105 * var(--u)); padding-right: calc(118 * var(--u)); }
.dr .h-ttl { font-size: calc(76 * var(--u)); letter-spacing: .04em; gap: calc(14 * var(--u)); }
.dr .h-ttl .crayon { left: calc(0 * var(--u)); width: calc(530 * var(--u)); }
.dr .sec-lead { margin-top: calc(62 * var(--u)); }
.target--box { margin-top: calc(30 * var(--u)); align-items: center; gap: 0; background: linear-gradient(90deg, #FCDFA9, #FDEFD3); border-radius: calc(18 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)) calc(26 * var(--u)) calc(36 * var(--u)); }
.target--box dt { margin-right: calc(32 * var(--u)); }
.target--box dd { border-left: 1.5px dashed #E9C27A; padding: 0 0 0 calc(40 * var(--u)); }
.dr .btn-o { margin-top: calc(32 * var(--u)); }
.dr__ph { position: relative; }

/* ---------- 産後ケア ---------- */
.pc-care { padding: calc(80 * var(--u)) 0 calc(150 * var(--u)); }
.pc-care .wrap { padding-inline: calc(60 * var(--u)); }
.pc-care__ttl { font-size: calc(76 * var(--u)); letter-spacing: .1em; margin-bottom: calc(36 * var(--u)); }
.pc-care__in { display: grid; grid-template-columns: calc(700 * var(--u)) 1fr; column-gap: calc(62 * var(--u)); align-items: center; }
.pc-care__ph { aspect-ratio: 700 / 460; border-radius: calc(20 * var(--u)); overflow: hidden; box-shadow: calc(-8 * var(--u)) calc(6 * var(--u)) 0 #F9BE51; }
.pc-care__ph img { width: 100%; height: 100%; object-fit: cover; }
.pc-care__txt { padding-top: 0; }
.pc-care .sec-lead { letter-spacing: .06em; }

.pc-care__btn { margin-top: calc(40 * var(--u)); padding-left: calc(125 * var(--u)); }

/* ---------- 採用ページ（デザインに無い：淡いピンクの横長の箱） ---------- */
.recruit { padding: 0 0 calc(150 * var(--u)); }
.recruit .wrap { padding-inline: calc(240 * var(--u)); }
.recruit__box { position: relative; text-align: center; background: var(--c-pink-box); border-radius: calc(40 * var(--u)); padding: calc(70 * var(--u)) calc(60 * var(--u)) calc(76 * var(--u)); }
.recruit__ttl { font-size: calc(76 * var(--u)); letter-spacing: .12em; }
.recruit__txt { margin-top: calc(24 * var(--u)); }
.recruit .btn-o { margin-top: calc(36 * var(--u)); width: calc(520 * var(--u)); }

/* ---------- お問い合わせ ---------- */
.contact { position: relative; background: var(--c-pink-bg2); padding: calc(58 * var(--u)) 0 calc(110 * var(--u)); overflow: hidden; }
.contact__ribbon { position: absolute; left: 0; bottom: calc(10 * var(--u)); width: 100%; height: calc(230 * var(--u)); }
.contact__in { position: relative; z-index: 1; padding-inline: calc(155 * var(--u)); }
.contact__ttl { text-align: center; justify-content: center; font-size: calc(76 * var(--u)); letter-spacing: .12em; }
.contact__ttl .h-ic { width: calc(104 * var(--u)); }
.contact__lead { text-align: center; margin-top: calc(8 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 500; letter-spacing: .12em; color: var(--c-brown-h); }
.contact__cards { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)); margin-top: calc(30 * var(--u)); }
.ccard { background: #fff; border-radius: calc(16 * var(--u)); min-height: calc(262 * var(--u)); padding: calc(28 * var(--u)) calc(40 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--c-brown-h); }
.ccard__lbl { display: flex; align-items: center; gap: calc(30 * var(--u)); font-weight: 500; font-size: calc(24 * var(--u)); letter-spacing: .12em; }
.ccard__ic { width: calc(84 * var(--u)); height: calc(78 * var(--u)); color: var(--c-brown-h); }
.ccard__ic--chat { width: calc(78 * var(--u)); height: calc(70 * var(--u)); }
.ccard__tel { font-family: var(--f-body); font-weight: 800; font-size: calc(70 * var(--u)); line-height: 1.15; letter-spacing: .06em; margin-top: calc(4 * var(--u)); }
.ccard__time { font-weight: 500; font-size: calc(24 * var(--u)); letter-spacing: .12em; }
.btn-o--line { margin-top: calc(18 * var(--u)); }
.contact .btn-o--w { margin-top: calc(36 * var(--u)); }

/* ---------- フッター ---------- */
.ft { position: relative; background: var(--c-brown-ft); color: #fff; padding: calc(110 * var(--u)) 0 calc(60 * var(--u)); overflow: hidden; }
.ft__in { position: relative; z-index: 1; display: grid; grid-template-columns: calc(600 * var(--u)) 1fr; padding-inline: calc(155 * var(--u)); }
.ft__logo img { width: calc(470 * var(--u)); }
.ft__addr { margin-top: calc(22 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.65; letter-spacing: .1em; }
.btn-o--ft { margin-top: calc(14 * var(--u)); }
.ft__nav { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: calc(28 * var(--u)); }
.ft__nav li { margin-bottom: calc(30 * var(--u)); }
.ft__nav a { display: inline-flex; align-items: center; gap: calc(18 * var(--u)); font-size: var(--fs-body); letter-spacing: .1em; line-height: 1.6; } /* 本文と同じ（RYO「ここも文字デカくなってないか？」） */
.ft__nav a::before { content: ""; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-top: 2.5px solid #F9C25A; border-right: 2.5px solid #F9C25A; transform: rotate(45deg); }
.ft__nav a:hover { color: #FCDB9F; }
.ft__bottom { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: calc(80 * var(--u)); padding-inline: calc(155 * var(--u)); }
.ft__bottom::before { content: ""; position: absolute; left: calc(158 * var(--u)); right: calc(155 * var(--u)); top: calc(-42 * var(--u)); height: 1.5px; background: #FCDB9F; }
.ft__corp, .ft__copy { font-size: calc(16 * var(--u)); letter-spacing: .06em; }
.ft__top { justify-self: end; display: grid; place-items: center; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; background: #F9C25A; color: var(--c-brown-h); }
.ft__top svg { width: 46%; height: 46%; transform: rotate(-90deg); }

/* =========================================================
   TB・SP（1023px以下）：1カラム
   ========================================================= */
@media (max-width: 1023px) {
  :root { --u: 1px; }
  body { font-size: 16px; }
  br.pc { display: none; }
  .wrap { max-width: 720px; padding-inline: var(--gutter); }

  /* ヘッダー：横並びロゴ＋ハンバーガー */
  .hd { position: sticky; top: 0; box-shadow: 0 1px 0 #FCDFA9; }
  .hd__brand { justify-content: space-between; align-items: center; padding: 10px var(--gutter); }
  .hd__logo { flex-direction: row; gap: 8px; }
  .hd__mark { width: 44px; }
  .hd__text { width: 130px; }
  .gnav { display: none; }
  .menu-btn { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--c-pink); cursor: pointer; padding: 0; }
  .menu-btn__bar, .menu-btn__bar::before, .menu-btn__bar::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--c-brown-h); position: relative; }
  .menu-btn__bar::before, .menu-btn__bar::after { content: ""; position: absolute; left: 0; }
  .menu-btn__bar::before { top: -6px; }
  .menu-btn__bar::after { top: 6px; }
  .drawer { display: block; position: fixed; top: 0; right: 0; left: auto; height: 100vh; height: 100dvh; width: min(84vw, 360px); background: var(--c-pink-bg); z-index: 120; padding: 72px 28px 40px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform .3s, visibility .3s; }
  .drawer[data-open="true"] { transform: none; visibility: visible; }
  .drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(20,30,60,.35); z-index: 110; }
  .drawer-overlay[hidden] { display: none; }
  .drawer__close { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--c-pink); cursor: pointer; }
  .drawer__close span::before, .drawer__close span::after { content: ""; position: absolute; left: 14px; top: 23px; width: 20px; height: 2px; background: var(--c-brown-h); transform: rotate(45deg); }
  .drawer__close span::after { transform: rotate(-45deg); }
  .drawer__list li { border-bottom: 1.5px dashed #F9BF53; }
  .drawer__list a { display: block; padding: 14px 4px; font-family: var(--f-head); font-size: 18px; color: var(--c-brown-h); letter-spacing: .08em; }

  .fv { height: auto; aspect-ratio: 4 / 3; }

  .h-ttl { font-size: 36px; }
  .h-ic { width: 54px; }
  .h-ttl--ic { gap: 10px; }
  .crayon { left: 64px; bottom: -14px; width: 250px; height: 14px; }
  .sec-lead { font-size: 16px; line-height: 1.9; letter-spacing: .06em; }
  .sticker { width: 80px; }
  .sticker--s { width: 46px; }

  .btn-o { width: 100%; max-width: 400px; min-height: 60px; font-size: 16px; padding-inline: 48px; }
  .btn-w { padding: 8px 10px 8px 32px; }
  .btn-w__ic { width: 42px; height: 42px; }
  .btn-o svg { right: 22px; }
  .btn-o--full { max-width: none; }
  .btn-o.btn-o--ft { width: 100%; max-width: 280px; }

  /* 当園について */
  .about { padding: 64px 0 120px; }
  .about__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 48px; }
  .about__txt { padding-top: 40px; }
  .about__ttl { font-size: 36px; padding-left: 0; }
  .about__lead { margin-top: 48px; font-size: 16px; }
  .about .btn-o { margin-top: 32px; }
  .about__ph { height: auto; aspect-ratio: 806 / 860; max-width: 640px; width: 100%; margin-inline: auto; --k: calc(min(100vw - var(--gutter) * 2, 640px) / 806); }
  .about__p1 { width: calc(790 * var(--k)); height: calc(500 * var(--k)); border-width: 5px; }
  .about__p2 { left: 0; top: calc(490 * var(--k)); width: calc(360 * var(--k)); height: calc(360 * var(--k)); border-width: 5px; }
  .about__p3 { left: calc(345 * var(--k)); top: calc(462 * var(--k)); width: calc(460 * var(--k)); height: calc(390 * var(--k)); border-width: 5px; }
  .about__st1 { right: -8px; top: -14px; width: calc(132 * var(--k)); }
  .about__st2 { left: 6px; top: calc(440 * var(--k)); width: calc(84 * var(--k)); }
  .about__st3 { left: calc(225 * var(--k)); bottom: calc(-50 * var(--k)); width: calc(132 * var(--k)); }

  /* 当園で伸びる力 */
  .power { padding: 80px 0 90px; margin-top: -40px; }
  .power::before { width: 220vw; height: 200px; top: -40px; }
  .power .wrap { padding-inline: var(--gutter); }
  .power__ttl { font-size: clamp(30px, 8.4vw, 64px); white-space: nowrap; }
  .power__lead { font-size: 16px; letter-spacing: .08em; text-align: left; line-height: 1.9; }
  .power__list { grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
  .pcard { border-radius: 16px; padding-bottom: 16px; border-width: 2px; }
  .pcard__ph { height: auto; aspect-ratio: 16 / 9; border-radius: 14px 14px 0 0; }
  .pcard__badge { left: 8px; top: auto; width: 68px; height: 60px; margin-top: -40px; position: relative; }
  .pcard__badge b { font-size: 26px; padding-top: 6px; }
  .pcard__ttl { margin-top: -6px; font-size: 16px; }
  .pcard__txt { margin: 6px 16px 0; font-size: 14px; letter-spacing: .04em; line-height: 1.7; }
  .power .btn-o { margin-top: 36px; }

  /* お知らせ */
  .news { padding: 56px 0 72px; }
  .news::after { width: 220vw; height: 160px; bottom: -60px; }
  .news__in { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .news__head { padding: 70px 0 0; }
  .news__bird { left: 120px; width: 150px; }
  .news__ttl { font-size: 44px; transform: rotate(-4deg); }
  .news__body { margin-top: 28px; }
  .news__list { border-radius: 24px; padding: 6px 20px 40px; }
  .news__list a { grid-template-columns: auto 1fr auto; grid-template-areas: "d c ch" "t t ch"; column-gap: 12px; row-gap: 4px; padding: 16px 0; font-size: 15px; min-height: 0; }
  .news__list time { grid-area: d; font-size: 14px; }
  .news__list .cat { grid-area: c; min-width: 0; font-size: 12px; padding: 1px 12px; }
  .news__t { grid-area: t; line-height: 1.7; }
  .news__chev { grid-area: ch; width: 16px; height: 16px; }
  .news__more { margin-top: -28px; }
  .btn-b { max-width: 300px; }

  /* 子育て支援 */
  .shien { padding: 40px 0; }
  .shien__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 48px; }
  .shien .h-ttl { font-size: 36px; }
  .shien .sec-lead { margin-top: 24px; }
  .tags { gap: 12px; margin-top: 22px; }
  .tags li { width: auto; flex: 1; max-width: 200px; min-height: 42px; font-size: 15px; }
  .shien .btn-o { margin-top: 24px; }
  .shien__ph { max-width: 640px; width: calc(100% - 20px); margin-inline: auto 10px; }
  .shien__ph figure { border-radius: 18px; }

  /* 入園案内 */
  .adm { padding: 130px 0 40px; }
  .adm__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 48px; }
  .adm__ph { order: 2; max-width: 640px; width: calc(100% - 20px); margin-inline: 10px auto; }
  .adm__ph figure { border-radius: 18px; }
  .adm .h-ttl { font-size: 36px; }
  .adm .sec-lead { margin-top: 24px; }
  .adm .tags li { flex: none; max-width: none; padding-inline: 18px; }
  .adm .btn-o { margin-top: 24px; }

  /* 採用ページ */
  .recruit { padding: 0 0 64px; }
  .recruit .wrap { padding-inline: var(--gutter); }
  .recruit__box { border-radius: 24px; padding: 44px 20px 40px; }
  .recruit__ttl { font-size: 36px; }
  .recruit__txt { margin-top: 16px; text-align: left; }
  .recruit .btn-o { margin-top: 24px; width: 100%; padding-inline: 20px 44px; }

  /* 一時預かり */
  .tc { padding: 40px 0; }
  .tc__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 36px; }
  .tc__ph { order: 2; padding-top: 30px; max-width: 640px; width: 100%; margin-inline: auto; }
  .tc__ph figure { border-radius: 18px; }
  .tc__ttl { font-size: 36px; padding-left: 0; }
  .tc__ttl .crayon { left: 0; width: 230px; bottom: -14px; }
  .tc .sec-lead { margin-top: 36px; }
  .target { gap: 16px; }
  .target dt { min-width: 76px; min-height: 36px; font-size: 14px; letter-spacing: .14em; padding-inline: 12px; }
  .target dd { font-size: 15px; letter-spacing: .04em; padding-top: 3px; }
  .tc .btn-o, .dr .btn-o { margin-top: 28px; }

  /* 誰でも通園制度 */
  .dr { padding: 40px 0; }
  .dr__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 36px; }
  .dr .h-ttl { font-size: 36px; }
  .dr .h-ttl .crayon { left: 0; width: 250px; }
  .dr .sec-lead { margin-top: 36px; }
  .target--box { padding: 16px; border-radius: 14px; }
  .target--box dt { margin-right: 16px; }
  .target--box dd { padding-left: 16px; font-size: 15px; }
  .dr__ph { max-width: 560px; width: 100%; margin-inline: auto; }

  /* 産後ケア */
  .pc-care { padding: 40px 0 80px; }
  .pc-care .wrap { padding-inline: var(--gutter); }
  .pc-care__ttl { font-size: 36px; }
  .pc-care__in { grid-template-columns: 1fr; row-gap: 28px; }
  .pc-care__txt { order: -1; }
  .pc-care__ttl { margin-bottom: 24px; }
  .pc-care__ph { max-width: 621px; width: calc(100% - 6px); margin-left: 6px; border-radius: 16px; box-shadow: -6px 5px 0 #F9BE51; }
  .pc-care__txt { padding-top: 0; }
  .pc-care .sec-lead { line-height: 1.9; }
  .pc-care__btn { margin-top: 28px; padding-left: 0; text-align: center; }

  /* お問い合わせ */
  .contact { padding: 56px 0 80px; }
  .contact__ribbon { height: 120px; }
  .contact__in { padding-inline: var(--gutter); }
  .contact__ttl { font-size: 36px; }
  .contact__ttl .h-ic { width: 50px; }
  .contact__lead { font-size: 16px; letter-spacing: .04em; text-align: left; margin-top: 16px; }
  .contact__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .ccard { min-height: 0; padding: 24px 20px; border-radius: 14px; }
  .ccard__lbl { gap: 14px; font-size: 15px; letter-spacing: .06em; }
  .ccard__ic { width: 40px; height: 38px; }
  .ccard__ic--chat { width: 40px; height: 36px; }
  .ccard__tel { font-size: clamp(32px, 9vw, 42px); margin-top: 8px; }
  .ccard__time { font-size: 14px; }
  .btn-o--line { margin-top: 14px; padding-inline: 16px 40px; }
  .contact .btn-o--w { margin-top: 28px; max-width: 360px; }

  /* フッター */
  .ft { padding: 56px 0 32px; }
  .ft__in { grid-template-columns: 1fr; padding-inline: var(--gutter); row-gap: 36px; }
  .ft__logo img { width: 280px; }
  .ft__addr { font-size: 14px; margin-top: 16px; }
  .btn-o--ft { margin-top: 14px; }
  .ft__nav { grid-template-columns: 1fr 1fr; column-gap: 16px; padding-top: 0; }
  .ft__nav ul:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .ft__nav li { margin-bottom: 14px; }
  .ft__nav a { gap: 10px; }
  .ft__nav a::before { width: 7px; height: 7px; border-width: 2px; }
  .ft__bottom { grid-template-columns: 1fr auto; padding-inline: var(--gutter); margin-top: 40px; row-gap: 4px; }
  .ft__bottom::before { left: var(--gutter); right: var(--gutter); top: -20px; }
  .ft__corp, .ft__copy { font-size: 12px; }
  .ft__copy { grid-row: 2; }
  .ft__top { grid-row: 1 / 3; grid-column: 2; width: 46px; height: 46px; }
}

@media (max-width: 767px) {
  .power__list { grid-template-columns: 1fr; gap: 20px; }
  .pcard__ttl { font-size: 17px; }
  .pcard__txt { font-size: 15px; margin-inline: 20px; }
  .ccard__lbl { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 1024〜1279px：比例縮小で小さくなりすぎる文字の下限 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .news__list a { font-size: 14px; grid-template-columns: 104px 136px 1fr auto; }
  .news__list time { font-size: 14px; }
  .news__list .cat { font-size: 12px; }
  .pcard__txt { font-size: 13.5px; margin-inline: 16px; }
  .ft__corp, .ft__copy, .ft__addr { font-size: 13px; }
}

/* 改行：語の途中で折り返さない（.nb）。デザインの改行位置（br.w）は1280px以上で有効 */
.nb { display: inline-block; text-indent: 0; }
br.w { display: none; }
@media (min-width: 1280px) { br.w { display: inline; } }
/* 「当園で伸びる力！」の「！」：デザインどおり斜めで前に詰める */

/* 写真の見せ方（子育て支援〜産後ケアで統一）：ピンクの太い枠・角丸・少し傾ける・右下に白い線の飾り
   見本＝誰でも通園制度。RYO「写真にピンクボーダーで統一／写真の裏に背景色つけたりしてるけどそれをボーダーに」 */
figure.ph-frame { position: relative; padding: calc(18 * var(--u)); background: #F9C664; border-radius: calc(40 * var(--u)); overflow: visible; box-shadow: none; }
figure.ph-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(22 * var(--u)); } /* 枠の外と内の角丸を同心に（外40－枠18＝内22）。傾けない（RYO「角丸汚くない？／まっすぐにしていいから」） */
.ph-scr { position: absolute; right: calc(20 * var(--u)); bottom: calc(10 * var(--u)); width: calc(140 * var(--u)); height: calc(90 * var(--u)); }
@media (max-width: 1023px) {
  figure.ph-frame { padding: 10px; border-radius: 24px; }
  figure.ph-frame img { border-radius: 14px; }
  .ph-scr { width: 80px; height: 52px; right: 12px; bottom: 6px; }
}

/* 「対象」：4か所とも ピンクの箱＋茶色の丸い札（RYO「まかせる」→ 誰でも通園制度の形に統一） */
.tc .target--box, .pc-care .target--box, .shien .target--box { margin-top: calc(32 * var(--u)); }
@media (max-width: 1023px) {
  .tc .target--box, .pc-care .target--box, .shien .target--box { margin-top: 22px; }
}

/* 伸びる力の下部：パンフと同じ子どもの切り抜き写真（RYO「パンフみたいに子供切り抜き写真いれたい」） */
@media (max-width: 1023px) {
}

/* 本文の文字サイズを1つに（RYO「本文文字大きさ統一して」）
   対象：各セクションの説明文・当園について本文・伸びる力のリードとカード本文・お知らせの記事名・「対象」の文・お問い合わせの説明とラベル・受付時間
   PC 19u（1440で16.4px・最小14px）／1023px以下 15px。太さは本文500（RYO「本文はfont-weight: 500;でいいわ」）
   対象外（意図あり）：見出し・ボタン・ナビ（見出し書体）、「対象」札・お知らせの日付とカテゴリ（ラベル）、電話番号（強調）、フッター（補足情報） */
:root { --fs-body: max(14px, calc(19 * var(--u))); } /* 小さい方（お知らせ・カード本文）に合わせる：RYO「なんででかい方に合わせるんだよ」 */
.sec-lead, .about__lead, .power__lead, .contact__lead, .pcard__txt, .news__t, .target dd, .target--box dd, .ccard__lbl, .ccard__time { font-size: var(--fs-body); font-weight: 500; }
@media (max-width: 1023px) { :root { --fs-body: 15px; } }

/* 花のロゴは見出しではなく写真の右上に統一（入園案内〜産後ケア。RYO「写真の方に統一」） */
.ph-st { right: calc(-36 * var(--u)); top: calc(-46 * var(--u)); width: calc(140 * var(--u)); }
@media (max-width: 1023px) { .ph-st { right: -8px; top: -26px; width: 72px; } }

/* お問い合わせ：LINEボタンはデザインどおりピンク地（RYO「デザインと違うぞ」） */
.btn-o--pink { background: var(--c-pink); border-color: var(--c-pink); color: var(--c-brown-h); }
/* 伸びる力：お問い合わせのピンクの太い波線と同じ形を、明るい茶色で背景に（RYO「この太線背景につけれないかな」） */
.power { overflow-x: clip; } /* 横だけ切る。縦は切らない（上辺の楕円 .power::before が上にはみ出して描かれるため） */
.power__ribbon { position: absolute; left: 0; width: 100%; height: calc(260 * var(--u)); fill: #89A1D3; z-index: 0; pointer-events: none; }
.power__ribbon--1 { top: calc(330 * var(--u)); }
.power__ribbon--2 { top: calc(930 * var(--u)); transform: scaleX(-1); }
.power .wrap { position: relative; z-index: 1; }
@media (max-width: 1023px) {
  .power__ribbon { height: 120px; }
  .power__ribbon--1 { top: 260px; }
  .power__ribbon--2 { top: auto; bottom: 34%; }
}

/* フッター：ロゴはロゴ元データ（hitaka_group_logo.ai）から作った横組みの白＋ピンク版／右下は明るい茶色の太い円弧2つ（デザインどおり） */
.ft__arc { position: absolute; border-radius: 50%; border: calc(46 * var(--u)) solid #4E7CB0; pointer-events: none; }
.ft__arc--1 { left: calc(1530 * var(--u)); top: calc(225 * var(--u)); width: calc(720 * var(--u)); height: calc(720 * var(--u)); }
.ft__arc--2 { left: calc(1480 * var(--u)); top: calc(490 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); }
@media (min-width: 1674px) { .ft__arc--1 { left: auto; right: calc(-597 * var(--u)); } .ft__arc--2 { left: auto; right: calc(-427 * var(--u)); } }
@media (max-width: 1023px) {
  .ft__arc { border-width: 22px; }
  .ft__arc--1 { left: auto; right: -260px; top: 60px; width: 340px; height: 340px; }
  .ft__arc--2 { left: auto; right: -230px; top: auto; bottom: -200px; width: 300px; height: 300px; }
}
/* 切り抜き写真（パンフの素材）：ほかのセクションにも（RYO「他セクションでも入れれたら入れて欲しい」） */
.cutx { position: absolute; height: auto; pointer-events: none; z-index: 2; }
.about, .shien { overflow: hidden; } /* .news は楕円（::after）が下にはみ出すので切らない */
.cutx--net { left: calc(210 * var(--u)); bottom: calc(100 * var(--u)); width: calc(105 * var(--u)); } /* 見出しのすぐ下へ（RYO「これもセクションに近づけて」） */
.shien .h-ttl { display: inline-block; }
.recruit__box { overflow: visible; }
.cutx--kids3 { right: calc(-20 * var(--u)); bottom: 0; width: calc(240 * var(--u)); }
.cutx--shovel { left: calc(30 * var(--u)); bottom: 0; width: calc(100 * var(--u)); }
@media (max-width: 1023px) {
  .cutx--net { display: none; }
  .recruit__box { padding-bottom: 150px; }
  .cutx--kids3 { right: 10px; width: 150px; }
  .cutx--shovel { left: 16px; width: 62px; }
}

/* 伸びる力：切り抜き（子ども2人・三輪車）をカード写真の上の左端・右端に立たせる（RYO「この2つは写真の上に配置」） */
.power__list { position: relative; margin-top: calc(150 * var(--u)); }
.power__cutwrap { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; z-index: 2; }
.power__cut { position: absolute; bottom: calc(-6 * var(--u)); height: auto; display: block; }
.power__cut--kids { left: calc(20 * var(--u)); width: calc(250 * var(--u)); }
.power__cut--tri { right: calc(20 * var(--u)); width: calc(210 * var(--u)); }
/* ボタンの上の余白（RYO「ボタンの上余白狭い」）／カード本文は見出しより小さく（RYO「文字デカすぎだろ／見出しと変わらんやん」） */
.power .btn-o { margin-top: calc(80 * var(--u)); }
@media (max-width: 1023px) {
  .power__list { margin-top: 120px; }
  .power__cut--kids { left: 0; width: 150px; }
  .power__cut--tri { right: 0; width: 126px; }
  .power .btn-o { margin-top: 48px; }
}

/* 当園についての写真の上の白い3本線（デザインの4か所。RYO「デザインみたいに写真の上に白3本線乗せて」） */
.wsp { position: absolute; z-index: 3; width: calc(64 * var(--u)); height: calc(64 * var(--u)); color: #fff; pointer-events: none; filter: drop-shadow(0 0 2px rgba(0,0,0,.08)); }
.wsp--1 { left: 50%; top: 36%; transform: rotate(-110deg); }
.wsp--2 { left: 88%; top: 25%; transform: rotate(80deg); }
.wsp--3 { left: 3%; top: 74%; transform: rotate(-20deg); }
@media (max-width: 1023px) { .wsp { width: 36px; height: 36px; } }

/* お知らせ：虫とり網の子の横に切り株（RYO「写真1枚だけ寂しい」） */

/* 写真の上のロゴは文字の列と反対側の角へ（RYO「写真の上のロゴの位置／文字セクションと反対方向に」）。写真が左＝入園案内・一時預かり・産後ケア */
@media (min-width: 1024px) {
  .adm .ph-st, .tc .ph-st, .pc-care .ph-st { right: auto; left: calc(-36 * var(--u)); }
}

/* 入園案内〜産後ケア：文字の列の幅・写真の列の幅・ボタンの幅を全セクションで同じに
   （RYO「セクションごとに／テキスト部分の横幅違うのマジで気持ち悪いんだけど」「そのせいでボタンの幅も違って気持ち悪い」）
   左右の余白 125u／文字の列 600u／間 90u／写真の列 残り。文字の列の中のボタン・「対象」の箱は列の幅いっぱい */
@media (min-width: 1024px) {
  .adm__in, .shien__in, .tc__in, .dr__in, .pc-care .wrap { padding-inline: calc(125 * var(--u)); }
  .shien__in, .dr__in { grid-template-columns: calc(600 * var(--u)) 1fr; column-gap: calc(90 * var(--u)); }
  .adm__in, .tc__in, .pc-care__in { grid-template-columns: 1fr calc(600 * var(--u)); column-gap: calc(90 * var(--u)); }
  .tc__ph { padding-top: 0; }
  .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o { width: 100%; max-width: none; }
  .pc-care__btn { padding-left: 0; }
  .target { width: 100%; }
}

/* 見出し下の線は全部削除（RYO「見出ししたの線消せって言わなかったか」）→ 見出しと説明文の間を他と同じに */
.tc .sec-lead, .dr .sec-lead { margin-top: calc(36 * var(--u)); }
@media (max-width: 1023px) { .tc .sec-lead, .dr .sec-lead { margin-top: 24px; } }

/* 本文を小さく・行間を詰める（RYO「どうみても本文でかいし行間空いてるし／そのせいで写真より大幅に文字のセクション高くなってるじゃん」） */
:root { --fs-body: max(14px, calc(17 * var(--u))); }
@media (max-width: 1023px) { :root { --fs-body: 15px; } }
@media (min-width: 1024px) {
  .sec-lead { line-height: 1.75; letter-spacing: .06em; }
  .target dd, .target--box dd { line-height: 1.6; letter-spacing: .06em; }
  .tags { gap: calc(24 * var(--u)); margin-top: calc(28 * var(--u)); }
  .tags li { min-height: calc(48 * var(--u)); font-size: calc(21 * var(--u)); }
  .target--box { padding-block: calc(20 * var(--u)); }
  .target dt { min-height: calc(48 * var(--u)); font-size: calc(20 * var(--u)); }
  .tc .target--box, .pc-care .target--box, .shien .target--box, .target--box { margin-top: calc(28 * var(--u)); }
  .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o { margin-top: calc(32 * var(--u)); }
}

/* 伸びる力の切り抜き：写真に重ねない。カードの後ろに立たせ、切り口はカードで隠す（RYO「乗せ方雑やな綺麗におのせろよ」「写真に被ってるだろ」） */
.power__cutwrap { z-index: 0; }
.power__list > .pcard { z-index: 1; }
.power__cut--kids { bottom: calc(-24 * var(--u)); }
.power__cut--tri { bottom: 0; }
@media (max-width: 1023px) { .power__cut--kids { bottom: -16px; } .power__cut--tri { bottom: 0; } }

/* PROD-15 追加2 */
/* 本文：14.6px は小さすぎ（RYO「文字小さすぎるだろ」）→ 18u（1440で15.5px）。行間は 1.75 のまま */
:root { --fs-body: max(14px, calc(18 * var(--u))); }
@media (max-width: 1023px) { :root { --fs-body: 15px; } }
/* 伸びる力のリード：大きな見出しの下なので本文より一段大きく（RYO「見出しに対して本文小さすぎて」） */
.power__lead { font-size: calc(22 * var(--u)); letter-spacing: .12em; }
@media (max-width: 1023px) { .power__lead { font-size: 16px; letter-spacing: .08em; } }
/* カード見出しを大きく・見出しの下の余白を広く（RYO「見出しの下余白／見出しもっと大きく」） */
.pcard__ttl { font-size: calc(31 * var(--u)); }
.pcard__txt { margin-top: calc(20 * var(--u)); }
@media (max-width: 1023px) { .pcard__ttl { font-size: 18px; } .pcard__txt { margin-top: 12px; } }
@media (max-width: 767px) { .pcard__ttl { font-size: 19px; } }
/* お知らせ：楕円がある分ボタン下を詰め、楕円の下（入園案内の上）を広げる（RYO「楕円ある分お知らせ一覧ボタンの下の余白狭めろ」「逆に楕円の下はもっと余白開けろ」） */
.news { padding-bottom: calc(70 * var(--u)); }
.adm { padding-top: calc(340 * var(--u)); }
@media (max-width: 1023px) { .news { padding-bottom: 40px; } .adm { padding-top: 160px; } }
/* 当園について：上下の余白を広げる（RYO「当園について／セクション上下余白もっと開けろ」） */
.about { padding-top: calc(170 * var(--u)); padding-bottom: calc(280 * var(--u)); }
@media (max-width: 1023px) { .about { padding-top: 96px; padding-bottom: 150px; } }
/* 白い3本線：子どもの顔の横に置く（RYO「これとかどこに線置いてるわけ？」）。線は右下（顔の方）に向く */
.wsp--1 { left: 77%; top: 7%; transform: none; }          /* 大きい写真：右の男の子の顔の左上 */
.wsp--2 { left: 17%; top: 73%; transform: rotate(90deg); } /* 虫とり網の写真：女の子の顔の右上 */
.wsp--3 { left: 72%; top: 60%; transform: none; }          /* 砂場の写真：真ん中の女の子の顔の左上 */

/* PROD-15 追加3：本文16px。16pxだと大きい箇所だけ15px（RYO「本文16px／16だと大きいと思う箇所だけ15にする」） */
:root { --fs-body: 16px; }
@media (max-width: 1023px) { :root { --fs-body: 16px; } }
/* 15pxにした箇所：伸びる力のカード本文（4列で幅が狭い）／お知らせの記事名（1行に収める）／対象の箱の中（箱の中の補足）／フッターのナビ */
.pcard__txt, .news__t, .target dd, .target--box dd, .ft__nav a { font-size: 15px; }
@media (max-width: 1023px) { .pcard__txt, .news__t, .target dd, .target--box dd, .ft__nav a { font-size: 15px; } }
/* 伸びる力の見出しを小さく（RYO「当園で伸びる力！はまだでかいぞ」）：124u→96u */
.power__ttl { font-size: calc(96 * var(--u)); }
@media (max-width: 1023px) { .power__ttl { font-size: clamp(30px, 8.4vw, 56px); } }
/* 伸びる力のリードが1024付近で本文より小さくならないように */
@media (min-width: 1024px) { .power__lead { font-size: max(17px, calc(22 * var(--u))); } }
/* 楕円の幅を画面幅に連動させる（--u は 0.8607px で頭打ちのため、1440px より広い画面で楕円の端が見えて段差になっていた。RYO「マジ何してんの？」） */
@media (min-width: 1024px) {
  .power::before { width: max(calc(2200 * var(--u)), 132vw); }
  .news::after { width: max(calc(2400 * var(--u)), 144vw); }
}
/* 虫とり網の子：広い画面でも見出しの近くに（中身の中央基準で配置） */
@media (min-width: 1024px) { .cutx--net { left: calc(50% - 626.5 * var(--u)); } }
/* 見出し→説明文の余白を、入園案内〜産後ケア（36u／SP 24px）にそろえる。お問い合わせは説明文→カードも広げる
   （RYO「見出しと本文としたのカードの余白狭いなぁ／TOPの他のセクションと比べて」） */
.contact__lead, .recruit__txt, .power__lead { margin-top: calc(36 * var(--u)); }
.contact__cards { margin-top: calc(56 * var(--u)); }
@media (max-width: 1023px) {
  .contact__lead, .recruit__txt, .power__lead { margin-top: 24px; }
  .contact__cards { margin-top: 32px; }
}
/* お問い合わせ：カード→ボタンの余白も説明文→カードと同じに。セクション上下も少し広げる（制作判断：他セクションと比べて詰まっていたため） */
.contact .btn-o--w { margin-top: calc(56 * var(--u)); }
.contact { padding-top: calc(100 * var(--u)); padding-bottom: calc(130 * var(--u)); }
@media (max-width: 1023px) { .contact .btn-o--w { margin-top: 32px; } .contact { padding-top: 64px; padding-bottom: 88px; } }

/* ===== PROD-15 追加3（RYO「スマホの時3本線はみ出してるし／スマホの時はセンター揃え／しかもスマホの時は写真が先に表示」＋DIR-08 F1〜F6） ===== */
/* F3：当園についての文字の列を他と同じ 600u に（写真の位置は左余白を減らして保つ） */
@media (min-width: 1024px) {
  .about__in { grid-template-columns: calc(600 * var(--u)) 1fr; padding-left: calc(140 * var(--u)); }
}
/* F6：当園についての見出し→本文も 36u／SP 24px */
.about__lead { margin-top: calc(36 * var(--u)); }
@media (max-width: 1023px) { .about__lead { margin-top: 24px; } }
/* F2：伸びる力の見出しは他の見出しの約1.26倍（PC 96u:76u と同じ比）。SP も同じ比で、375 では画面に収まる大きさまで */
@media (max-width: 1023px) { .power__ttl { font-size: clamp(36px, 9.6vw, 45px); letter-spacing: .04em; } }
/* F5：伸びる力のリードは本文 16px */
.power__lead, .power__lead { font-size: 16px; }
@media (min-width: 1024px) { .power__lead { font-size: 16px; } }
/* F4：ボタンの幅をそろえる（PC 600u＝1440で516px／SP 幅いっぱい・最大400px・中央）。カード内の LINE とフッターは除く */
@media (min-width: 1024px) {
  .about .btn-o, .power .btn-o, .news__more .btn-o, .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o, .recruit .btn-o, .contact .btn-o--w { width: calc(600 * var(--u)); max-width: none; padding-inline: calc(60 * var(--u)); }
}
@media (max-width: 1023px) {
  .about .btn-o, .power .btn-o, .news__more .btn-o, .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o, .recruit .btn-o, .contact .btn-o--w { width: 100%; max-width: 400px; margin-inline: auto; padding-inline: 48px; }
}
/* 1024 付近で小さくなりすぎる文字に下限（DIR-08 所見） */
@media (min-width: 1024px) {
  .tags li { font-size: max(14px, calc(21 * var(--u))); }
  .target dt { font-size: max(14px, calc(20 * var(--u))); }
  .news__list .cat { font-size: max(13px, calc(17 * var(--u))); }
  .ft__addr, .ft__corp, .ft__copy { font-size: max(14px, calc(16 * var(--u))); }
}
/* お知らせの日付を記事名（15px）と同じに（DIR-08 所見：日付の方が大きかった） */
.news__list time { font-size: 15px; }

/* SP：写真を先に・センター揃え（RYO） */
@media (max-width: 1023px) {
  .about__ph, .adm__ph, .shien__ph, .tc__ph, .dr__ph, .pc-care__ph { order: -1; }
  .pc-care__txt { order: 0; }
  .about__txt, .adm__txt, .shien__txt, .tc__txt, .dr__txt, .pc-care__txt { text-align: center; }
  .about__txt .h-ttl, .adm__txt .h-ttl, .shien__txt .h-ttl, .tc__txt .h-ttl, .dr__txt .h-ttl, .pc-care__txt .h-ttl { justify-content: center; text-align: center; }
  .about__ttl, .shien .h-ttl { display: inline-block; }
  .tags { justify-content: center; }
  .target--box { text-align: left; }
  /* 3本線：見出しの左上に収める（画面からはみ出さない） */
  .spark3 { left: -24px; top: -16px; width: 32px; height: 32px; }
  /* お知らせ：一覧ボタンを白いカードに重ねない（RYO「ボタン白に被せる必要ないよね」） */
  .news__more { margin-top: 32px; }
  .news__list { padding-bottom: 8px; }
}
/* F1：虫とり網の子を見出しに重ねない（見出しの左、見出しの下端にそろえる） */
@media (min-width: 1024px) { .cutx--net { left: calc(50% - 761 * var(--u)); bottom: calc(205 * var(--u)); } }
/* SP：自分で見つけて直した箇所（RYO「スマホの時おかしくない？／どこがおかしいか考えて修正してみて」） */
@media (max-width: 1023px) {
  /* 見出しが中央なのに説明文が左寄せだった：伸びる力・採用ページ・お問い合わせ */
  .power__lead, .recruit__txt, .contact__lead { text-align: center; }
  /* お知らせの見出しだけ左寄せだった → 中央に */
  .news__head { text-align: center; }
  .news__ttl { display: inline-block; text-align: left; }
  .news__bird { left: calc(50% + 10px); }
  /* 写真の枠の幅と位置がセクションごとに違った（左寄せ・右寄せ・幅いっぱい）→ 全部同じ幅で中央 */
  .adm__ph, .shien__ph, .tc__ph, .dr__ph, .pc-care__ph { width: calc(100% - 20px); max-width: 640px; margin-inline: auto; }
  /* 採用ページのボタンの文字が2行に折れていた */
  .recruit .btn-o { padding-inline: 20px 40px; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 1023px) {
  /* 写真→見出しの間がセクションごとに 28〜88px とバラバラだった → 40px にそろえる */
  .about__in, .adm__in, .shien__in, .tc__in, .dr__in, .pc-care__in { row-gap: 40px; }
  .about__txt, .adm__txt, .shien__txt, .tc__txt, .dr__txt, .pc-care__txt { padding-top: 0; margin-top: 0; }
}
.about__ttl { padding-left: 0; } /* 見出しと本文の左端をそろえる（他セクションと同じ） */
@media (max-width: 1023px) { .target--box { max-width: 640px; margin-inline: auto; } } /* TB幅で対象の箱だけ写真より広かった */
/* ===== DIR-20261022-hitaka-09 対応 ===== */
@media (max-width: 1023px) {
  /* F2：当園についての写真のまとまりも他の写真と同じ幅（画面幅−20px・最大640px）で中央 */
  .about__ph { width: calc(100% - 20px); max-width: 640px; --k: calc(min(100vw - var(--gutter) * 2 - 20px, 640px) / 806); }
  /* F1：下の花のロゴを写真のまとまりの内側に収め、見出しに近づけない */
  .about__st3 { bottom: 0; }
  /* 所見：お知らせの見出しの2行も中央／小さすぎる文字の下限 */
  .news__ttl { text-align: center; }
  .news__list .cat { font-size: 13px; }
  .ft__corp, .ft__copy { font-size: 13px; }
}
/* F3：伸びる力の見出しを、どの幅でも他の見出しの1.1倍にそろえる（PC 76u×1.1＝84u／SP 36px×1.1＝39.6px。狭い画面では1行に収まる大きさまで） */
.power__ttl { font-size: calc(84 * var(--u)); }
@media (max-width: 1023px) { .power__ttl { font-size: min(39.6px, calc((100vw - 40px) / 8.6)); letter-spacing: .02em; } }
@media (max-width: 1023px) { .about__txt { margin-top: 13px; } } /* 写真→見出しの文字を他セクションと同じ 37px に */

/* 一時預かりの見出しだけ文字が 40u 右にずれていた（左の余白の消し忘れ）→ 他の見出しと同じく本文の左端から */
@media (min-width: 1024px) { .tc__ttl { padding-left: 0; letter-spacing: .1em; } }
/* 見出しの字間をそろえる（実測で .04〜.12em とバラバラだった）→ 当園について・入園案内〜産後ケア・採用ページ・お問い合わせは .12em。
   伸びる力（大見出し・SPで1行に収める）とお知らせ（手書き風に傾けた見出し）は別扱い */
#about-ttl, #adm-ttl, #shien-ttl, #tc-ttl, #dr-ttl, #pcc-ttl, #rc-ttl, #ct-ttl { letter-spacing: .12em; }
/* 768〜1023 で説明文の行の長さが偏らないように（対応ブラウザのみ。非対応でも折り返し位置は文節のまま） */
/* text-wrap: balance は折り返し位置が変わる（DIR-12 F1）ので外した */
@media (max-width: 374px) { .about__lead, .power__lead, .sec-lead, .contact__lead { font-size: 15px; letter-spacing: .02em; } } /* 320px 幅で文節の途中で折れないように */
/* ===== DIR-20261022-hitaka-13（320px 幅）===== */
@media (max-width: 1023px) {
  /* F1：タグが文字の列からはみ出さないように（入らなければ2段に） */
  .tags { flex-wrap: wrap; }
  .tags li { max-width: 100%; }
}
@media (max-width: 414px) {
  .adm .tags li { padding-inline: 14px; font-size: 14px; letter-spacing: .08em; }
  .tags { gap: 8px; }
}
@media (max-width: 374px) {
  /* F2：狭い画面では見出しも一緒に小さくして、伸びる力は他の1.1倍を保つ */
  .h-ttl:not(.power__ttl) { font-size: calc((100vw - 40px) / 9.46); }
  /* 所見：ボタン・カードのラベル・フッターのナビが2行に折れないように */
  .about .btn-o, .power .btn-o, .news__more .btn-o, .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o, .contact .btn-o--w, .btn-o--line { padding-inline: 16px 36px; font-size: 14px; letter-spacing: .06em; }
  .ccard__lbl { font-size: 13px; gap: 8px; letter-spacing: .02em; }
  .ft__nav a { font-size: 13px; letter-spacing: .02em; gap: 6px; }
  .ft__nav, .ft__nav ul:nth-child(3) { column-gap: 8px; }
}
@media (max-width: 374px) {
  /* 対象の箱：320px で右の文字の欄が狭く、文節の途中で折れていた → 札と線の間を詰める */
  .target--box { padding: 14px 12px; }
  .target--box dt { margin-right: 10px; min-width: 60px; padding-inline: 8px; }
  .target--box dd { padding-left: 12px; font-size: 14px; letter-spacing: .02em; }
}
/* ===== DIR-20261022-hitaka-14（374px 以下）：15px 未満の文字をなくす ===== */
@media (max-width: 1023px) { .recruit .btn-o { font-size: 16px; } } /* 採用ページのボタンも他のボタンと同じ 16px */
@media (max-width: 374px) {
  .about .btn-o, .power .btn-o, .news__more .btn-o, .adm .btn-o, .shien .btn-o, .tc .btn-o, .dr .btn-o, .pc-care .btn-o, .recruit .btn-o, .contact .btn-o--w, .btn-o--line { font-size: 15px; letter-spacing: .04em; padding-inline: 12px 34px; }
  .target--box dd { font-size: 15px; }
  .ccard__lbl { font-size: 15px; letter-spacing: 0; }
  .ft__nav a { font-size: 15px; letter-spacing: 0; }
  /* F2：お知らせの見出しも他の見出しとの比（375以上と同じ 1.22倍）を保つ */
  .news__ttl { font-size: calc((100vw - 40px) / 9.46 * 1.222); }
}
@media (max-width: 414px) { .adm .tags li { font-size: 15px; } } /* タグも 15px 未満にしない（入らなければ2段に折り返す） */
@media (max-width: 374px) {
  /* 対象の箱：札を上・文を下に積む（横並びだと 320px で文節の途中で折れるため） */
  .target--box { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .target--box dt { margin-right: 0; }
  .target--box dd { border-left: 0; padding-left: 0; }
}
@media (max-width: 374px) { .btn-o.btn-o--ft { font-size: 15px; } }
/* ===== DIR-20261022-hitaka-15（320px）===== */
@media (max-width: 374px) {
  /* ボタンの文字と「>」の間：カードと採用ページの箱の内側の余白を詰めて、ボタンの幅を広げる */
  .ccard { padding-inline: 10px; }
  .recruit__box { padding-inline: 10px; }
  .btn-o--line, .recruit .btn-o { padding-inline: 10px 34px; letter-spacing: 0; }
  /* フッターのナビ：左右の列の間を広げる（行頭の「>」を詰める） */
  .ft__nav, .ft__nav ul:nth-child(3) { column-gap: 18px; }
  .ft__nav a { gap: 4px; }
  /* 同じカードの中で文字の大きさをそろえる */
  .ccard__time { font-size: 15px; }
}
/* DIR-16 所見：1024幅でフッターのナビの列が詰まる（文字は15pxで固定、列の幅は画面幅に比例するため）
   → 列の幅を中身に合わせ、余った分を列の間に配る。1024〜1279 は左の列を少し狭く */
@media (min-width: 1024px) {
  .ft__nav { grid-template-columns: repeat(3, max-content); justify-content: space-between; column-gap: 24px; }
  .ft__nav a { letter-spacing: .06em; }
}
/* 当園について（PC）：文字と写真の間を広げる（RYO「だから写真とテキスト近すぎるって」）。
   左右の余白を他セクションと同じ 125u にし、写真のまとまりを 90% に縮めて右に寄せる。セクション下の余白も広げる（RYO「後セクション下の余白ももっと大きく」） */
@media (min-width: 1024px) {
  .about__in { grid-template-columns: calc(600 * var(--u)) 1fr; padding-left: calc(125 * var(--u)); padding-right: calc(125 * var(--u)); column-gap: 0; }
  .about__ph { transform: scale(.85); transform-origin: right center; }
  .about { padding-bottom: calc(360 * var(--u)); }
}
/* 伸びる力：リード→カードの余白を詰める（RYO「写真の上なんでこんな余白あるの？」）。切り抜きはリード文の左右の空きに立たせる */
@media (min-width: 1024px) { .power__list { margin-top: calc(56 * var(--u)); } }
/* 伸びる力の背景の線：パンフ（pamphlet_sakuranoki.pdf 2ページ目右半分「当園で伸びる力！」）に合わせる
   パンフ：明るい茶の細めの波線が、見出しの高さを左から右へ波打って横切り（切り抜きの子どもの後ろ）、ページの下端にも1本。写真の上は通らない
   → 線を細く（帯の太さ 約36u）し、1本目は見出し〜リードの高さ、2本目はボタンの下の余白に。カードの上は通さない */
.power__ribbon { height: calc(150 * var(--u)); }
.power__ribbon--1 { top: calc(110 * var(--u)); transform: none; }
.power__ribbon--2 { top: auto; bottom: calc(10 * var(--u)); transform: scaleX(-1); }
@media (max-width: 1023px) {
  .power__ribbon { height: 70px; }
  .power__ribbon--1 { top: 56px; }
  .power__ribbon--2 { top: auto; bottom: 8px; }
}
/* 採用ページ：箱を茶色地に、見出し・説明文・ボタンを白に（RYO「ピンク背景→茶色背景／ボタンや文字白に」） */
.recruit__box { background: var(--c-brown); }
.recruit__ttl, .recruit__txt { color: #fff; }
.recruit .btn-o.btn-o--brown { background: #fff; color: var(--c-brown-h); border-color: #fff; }

/* ===== 産後ケア：レイアウトを RYO の参考画像（images/69.webp）に（RYO「ここだけ背景ピンクに／レイアウトはこれで」）=====
   見出しは花のロゴ付きで上に中央寄せ／写真は枠なし／説明文の下にピンクの点線／「対象」の札と文を1行／ボタンはピンク地 */
.pc-care .pc-care__ttl { display: flex; align-items: center; justify-content: center; gap: calc(20 * var(--u)); margin: 0 0 calc(56 * var(--u)); text-align: center; }
.pc-care__mark { width: 1.15em; height: auto; flex: none; }
.pc-care figure.pc-care__ph { padding: 0; background: none; border-radius: calc(28 * var(--u)); overflow: hidden; box-shadow: none; aspect-ratio: auto; margin-left: 0; }
.pc-care figure.pc-care__ph img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.pc-care .sec-lead { margin-top: 0; }
.target--line { display: flex; align-items: center; gap: calc(28 * var(--u)); margin-top: calc(34 * var(--u)); padding-top: calc(34 * var(--u)); border-top: 2px dashed #F9C25A; background: none; }
.target--line dd { padding: 0; }
.pc-care .pc-care__btn { display: flex; justify-content: center; }
.pc-care .btn-o.btn-o--pink { margin-top: calc(44 * var(--u)); }
@media (min-width: 1024px) {
  .pc-care .pc-care__in { grid-template-columns: 1fr calc(600 * var(--u)); column-gap: calc(90 * var(--u)); align-items: center; }
  .pc-care .btn-o.btn-o--pink { width: calc(420 * var(--u)); }
}
@media (max-width: 1023px) {
  .pc-care .pc-care__ttl { gap: 10px; margin-bottom: 32px; }
  .pc-care figure.pc-care__ph { border-radius: 18px; width: calc(100% - 20px); max-width: 640px; margin-inline: auto; }
  .target--line { justify-content: center; gap: 14px; margin-top: 24px; padding-top: 24px; max-width: 640px; margin-inline: auto; }
  .pc-care .btn-o.btn-o--pink { margin-top: 28px; }
}
@media (max-width: 374px) { .target--line { flex-direction: column; gap: 10px; } }
@media (min-width: 375px) { .target--line dd { text-align: left; } }
/* 産後ケア：セクションの背景をピンクに（RYO「ここだけ背景ピンクに」・DIR-17 F1）。当園について・お知らせと同じ地の色。
   地がピンクになるので、点線は少し濃いピンクに。上下の余白も地の色に合わせて広げる */
.pc-care { background: var(--c-pink-bg); padding-top: calc(130 * var(--u)); padding-bottom: calc(150 * var(--u)); }
.target--line { border-top-color: #F7AE24; }
@media (max-width: 1023px) { .pc-care { padding-top: 72px; padding-bottom: 80px; } }
/* 産後ケアの地がピンクになり、採用ページの箱がピンクの地の下端にくっついて見えたので、採用ページの上に余白を足す */
.recruit { padding-top: calc(130 * var(--u)); }
@media (max-width: 1023px) { .recruit { padding-top: 64px; } }
/* SPの産後ケアも写真が先（RYO「写真が先」）：見出しを写真の下へ。写真→見出しは他セクションと同じ 40px */
@media (max-width: 1023px) {
  .pc-care .wrap { display: flex; flex-direction: column; }
  .pc-care .pc-care__in { display: contents; }
  .pc-care figure.pc-care__ph { order: -1; }
  .pc-care .pc-care__ttl { order: 0; margin-top: 40px; margin-bottom: 0; }
  .pc-care .pc-care__txt { order: 1; margin-top: 24px; }
}
/* 伸びる力の上の線：横にまっすぐ横切らない形に（RYO「上は見出しに被ってるし微妙／横に真っ直ぐ以外でなんかないの」）。
   パンフ2ページ目右半分の、ページの左上・右上の角から端に沿って下りる線にならい、左右の角から切り抜きの子どもの後ろを通ってカードの後ろへ下りる2本の弧に。見出し・リード文の上は通らない */
.power__wave { position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); bottom: calc(-60 * var(--u)); height: calc(420 * var(--u)); pointer-events: none; }
.power__cutwrap .power__cut { z-index: 1; }
@media (max-width: 1023px) { .power__wave { height: 140px; bottom: -30px; } }
/* お知らせ：日付とカテゴリの間を詰める（RYO「日付とカテゴリの距離離れすぎ」） */
@media (min-width: 1024px) { .news__list a { grid-template-columns: max-content calc(185 * var(--u)) 1fr auto; } .news__list time { margin-right: 24px; } }
/* PCの本文を 17px に（RYO「本文基本17pxにしようか／PCは」）。前に 15px にしていた箇所（カード本文・お知らせの記事名・対象の文・フッターのナビ）は本文より1段小さい 16px に */
@media (min-width: 1024px) {
  :root { --fs-body: 17px; }
  .pcard__txt, .news__t, .target dd, .target--box dd, .ft__nav a { font-size: 16px; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .pcard__txt, .news__t { font-size: 15px; } } /* 1024〜1279 はカードと記事名の欄が狭く、16pxだと短い行・1語だけの行ができるため */
/* 産後ケア：「対象」の札をピンク、「産後ケアを見る」を茶色のボタンに（RYO「対象ピンク／ｓンゴケアを見る／は茶色ボタン」） */
.pc-care .target--line dt { background: var(--c-pink-deep); color: #fff; }
.pc-care .btn-o.btn-o--brown { margin-top: calc(44 * var(--u)); }
@media (min-width: 1024px) { .pc-care .btn-o.btn-o--brown { width: calc(420 * var(--u)); } }
@media (max-width: 1023px) { .pc-care .btn-o.btn-o--brown { margin-top: 28px; } }
/* 産後ケアの写真に白い枠（RYO「産後ケア写真白ボーダー」）。当園についての写真の白枠と同じ太さ */
.pc-care figure.pc-care__ph { border: calc(5 * var(--u) + 1px) solid #fff; }
@media (max-width: 1023px) { .pc-care figure.pc-care__ph { border-width: 5px; } }
/* 産後ケアの「対象」も、入園案内〜誰でも通園制度と同じ箱のデザインに。箱の地は白（RYO「産後ケアも対象／デザイン合わせて／背景は白がいいかな」） */
.pc-care .target--box { background: #fff; margin-top: calc(32 * var(--u)); }
@media (max-width: 1023px) { .pc-care .target--box { margin-top: 22px; } }
/* 説明文→対象の箱の間をそろえる（PC 28u・SP 22px。産後ケア PC と誰でも通園制度 SP だけ違っていた） */
.pc-care .target--box { margin-top: calc(28 * var(--u)); }
@media (max-width: 1023px) { .pc-care .target--box, .dr .target--box { margin-top: 22px; } }
/* 産後ケアのボタン：対象の箱→ボタンの間を他セクションと同じに（ボタンを入れている枠の余白を外す） */
.pc-care .pc-care__btn { margin-top: 0; }
@media (max-width: 1023px) { .pc-care .btn-o { margin-top: 28px; } }
/* SPのお知らせ：見出しを大きく（RYO「スマホの時見出し大きく」）、鳥を見出しから離す（RYO「スマホの時鳥近い」） */
@media (max-width: 1023px) {
  .news__ttl { font-size: 52px; }
  .news__head { padding-top: 96px; }
  .news__bird { top: 0; left: calc(50% + 30px); width: 140px; }
}
@media (max-width: 374px) { .news__ttl { font-size: calc((100vw - 40px) / 5.6); } }
/* SPの見出しを大きく（RYO「スマホの時見出し大きく」「こことか見出しと本文さがないじゃん」）
   セクション見出し 36→40px、伸びる力はその1.1倍の 44px（1行に入らない幅では「当園で／伸びる力！」の2行）、お知らせは1.22倍の 49px、カードの見出し 19→22px */
@media (max-width: 1023px) {
  .h-ttl:not(.power__ttl) { font-size: 40px; }
  .power__ttl { font-size: 44px; letter-spacing: .04em; line-height: 1.25; }
  .news__ttl { font-size: 49px; }
  .pcard__ttl { font-size: 22px; }
  /* 鳥を見出しからさらに離す */
  .news__head { padding-top: 124px; }
}
@media (max-width: 374px) {
  .h-ttl:not(.power__ttl) { font-size: min(40px, calc((100vw - 40px) / 8)); }
  .power__ttl { font-size: min(44px, calc((100vw - 40px) / 8 * 1.1)); }
  .news__ttl { font-size: min(49px, calc((100vw - 40px) / 8 * 1.222)); }
}
@media (max-width: 1023px) { .power__ttl { white-space: normal; } } /* 1行に入らない幅では「当園で／伸びる力！」で折り返す */
/* お知らせ：虫とり網の子を、伸びる力と同じように白い箱の上の辺に立たせる（箱の後ろに立ち、下は箱で隠れる）
   （RYO「代わりに白ボックスの上に／当園で伸びる力！／見たいｂに写真乗せて」） */
.news__body { position: relative; }
.news__list { position: relative; z-index: 1; }
.news__cut { position: absolute; z-index: 0; right: calc(70 * var(--u)); top: calc(-150 * var(--u)); width: calc(110 * var(--u)); height: auto; pointer-events: none; }
@media (max-width: 1023px) {
  .news__body { margin-top: 96px; }
  .news__cut { right: 24px; top: -92px; width: 66px; }
}
@media (max-width: 1023px) { .news__cut { right: 6px; } }
@media (max-width: 1023px) { .news__body { margin-top: 116px; } } /* 切り抜きが見出しの下端と重ならないように */
/* ヘッダーのロゴ：支給のロゴデータ（hitaka_group_logo.ai 2ページ目・左のカラー版）をそのまま1枚の画像に。色・形・並びは変えていない
   （RYO「ヘッダー部分／ロゴ触った？／パンフレットと違うけど」。前はマークと文字を別の画像にして並べていた） */
.hd__logoimg { display: block; width: calc(140 * var(--u)); height: auto; }
@media (max-width: 1023px) { .hd__logoimg { width: auto; height: 48px; } }
/* 当園についての写真の白い枠：PCは今の見た目から +1px、SPは -1px（RYO「PCの時／登園についての写真ボーダー1px太く／スマホの時は1px細く／今の数値からね」）
   PCは写真のまとまりを 85% に縮めているので、見た目で +1px になるよう CSS 上は +1.18px（1 ÷ 0.85） */
@media (min-width: 1024px) { .about__ph figure { border-width: calc(5 * var(--u) + 2.18px); } }
@media (max-width: 1023px) { .about__ph figure { border-width: 5px; } }
.wsp--1 { left: 34%; top: 12%; transform: none; } /* 1枚目の写真を変えたので、手前の男の子の顔の左上に置き直す */
/* DIR-19 F1：当園についての写真の白い枠は、元の値（5u＋1px）から CSS で +1px（どの幅でも +1px） */
@media (min-width: 1024px) { .about__ph figure { border-width: calc(5 * var(--u) + 2px); } }
/* DIR-19 F2：PCでは伸びる力のリード文も本文と同じ 17px */
@media (min-width: 1024px) { .power__lead { font-size: var(--fs-body); } }
/* DIR-19 F3：320px で鳥が画面の外に出ないように */
@media (max-width: 374px) { .news__bird { left: calc(50% + 10px); width: 120px; } }
/* 産後ケアの写真の白い枠を、当園についての写真の白い枠と同じ値に（RYO「産後ケアの写真ボーダー他と合わせてよ太さ」） */
@media (min-width: 1024px) { .pc-care figure.pc-care__ph { border-width: calc(5 * var(--u) + 2px); } }
@media (max-width: 1023px) { .pc-care figure.pc-care__ph { border-width: 5px; } }
/* お知らせ一覧ボタンを白い箱より手前に（22:14 に箱へ z-index:1 を付けたため、箱がボタンの上半分を覆っていた。RYO「ボタン上だろふざけてんのか／推せねえだろ」） */
.news__more { position: relative; z-index: 2; }
/* 伸びる力の上の線（3回目・RYO「背景の線／微妙だろ自分で見てそう思わないの」）
   パンフ2ページ目右半分の上の線（見出しの横から大きく上下に波打ち、切り抜きの子どもの後ろで下がる）にならい、
   見出しより上を大きく波打って横切り、左右の端では切り抜きの子どもの後ろまで下がる1本に。見出し・リード文には重ならない */
.power__wave2 { position: absolute; left: 0; top: 0; width: 100%; height: calc(300 * var(--u)); z-index: 0; pointer-events: none; }
@media (max-width: 1023px) { .power__wave2 { height: 66px; top: 4px; } }
/* お知らせの白い箱の上にもう1枚（RYO「写真もう1枚追加して」）：パンフ素材 DSC04870.psd の切り抜き（女の子）を箱の上の辺の左寄りに。下の切り口は箱の後ろに隠す */
.news__cut--girl { right: auto; left: calc(70 * var(--u)); top: calc(-136 * var(--u)); width: calc(120 * var(--u)); }
@media (max-width: 1023px) { .news__cut--girl { left: 6px; right: auto; top: -76px; width: 70px; } }
/* 伸びる力の札：RYO 支給の画像（power-1〜4.png・幸／自／人／命）に差し替え（RYO「power-1／power-2／power-3／power-4／ダウンロードフォルダに保存／確認してサイトに反映」）
   画像は正方形なので、札の中心の位置は前と同じまま正方形に */
.pcard__badge { width: calc(118 * var(--u)); height: calc(118 * var(--u)); top: calc(170 * var(--u)); }
.pcard__badge img { display: block; width: 100%; height: 100%; }
@media (max-width: 1023px) { .pcard__badge { width: 68px; height: 68px; margin-top: -44px; } }
@media (min-width: 1024px) { .pcard__badge { top: calc(146 * var(--u)); } } /* 札がカード見出しの1行目に触れないように少し上へ */
@media (max-width: 1023px) { .pcard__badge { top: auto; } } /* SPは前と同じく写真の下端に重ねる（PC用の top 指定がSPにも効いて本文の上に重なっていた） */
@media (max-width: 374px) { .pcard__badge { width: 60px; height: 60px; margin-top: -40px; } }
/* PCの当園について：写真の幅はそのまま、高さを少しだけ出す（RYO「写真もう少しだけ高さ出して」）。各写真の高さを約1割増し */
@media (min-width: 1024px) {
  .about__ph { height: calc(715 * var(--u)); }
  .about__p1 { height: calc(410 * var(--u)); }
  .about__p2 { top: calc(402 * var(--u)); height: calc(310 * var(--u)); }
  .about__p3 { top: calc(380 * var(--u)); height: calc(330 * var(--u)); }
  .about__st2 { top: calc(360 * var(--u)); }
}
/* 伸びる力の札を小さく（RYO「さっき差し替えた幸自人命／もう少し小さく」）：PC 118u→96u／SP 68→56px／374以下 60→50px */
@media (min-width: 1024px) { .pcard__badge { width: calc(96 * var(--u)); height: calc(96 * var(--u)); top: calc(160 * var(--u)); } }
@media (max-width: 1023px) { .pcard__badge { width: 56px; height: 56px; margin-top: -36px; } }
@media (max-width: 374px) { .pcard__badge { width: 50px; height: 50px; margin-top: -32px; } }
/* 産後ケアの「対象」の箱：「背景は白」を取り消し（RYO「産後ケアの『背景は白』は忘れて」）→ 他セクションと同じピンクの箱に戻す */
.pc-care .target--box { background: linear-gradient(90deg, #FCDFA9, #FDEFD3); }

/* ===== PROD-15 追加分19（2026-10-23）===== */
/* 伸びる力の上の線：フッター右下と同じ太い弧を左右に（RYO「当園で伸びる力！の上の線／こんな感じを左右に」images/86.png） */
.power__arc { position: absolute; border-radius: 50%; border: calc(46 * var(--u)) solid #89A1D3; pointer-events: none; z-index: 0; }
.power__arc--r1 { right: calc(-560 * var(--u)); top: calc(-40 * var(--u)); width: calc(720 * var(--u)); height: calc(720 * var(--u)); }
.power__arc--r2 { right: calc(-440 * var(--u)); top: calc(230 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); }
.power__arc--l1 { left: calc(-560 * var(--u)); top: calc(-40 * var(--u)); width: calc(720 * var(--u)); height: calc(720 * var(--u)); }
.power__arc--l2 { left: calc(-440 * var(--u)); top: calc(230 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); }
@media (max-width: 1023px) {
  .power__arc { border-width: 22px; }
  .power__arc--r1, .power__arc--l1 { width: 300px; height: 300px; top: -20px; }
  .power__arc--r2, .power__arc--l2 { width: 260px; height: 260px; top: 120px; }
  .power__arc--r1 { right: -250px; } .power__arc--r2 { right: -215px; }
  .power__arc--l1 { left: -250px; } .power__arc--l2 { left: -215px; }
}
/* 札の画像を差し替え（RYO の上書き版 536px）、位置を少しだけ左下へ */
@media (min-width: 1024px) { .pcard__badge { left: calc(6 * var(--u)); top: calc(172 * var(--u)); } }
@media (max-width: 1023px) { .pcard__badge { left: 2px; margin-top: -30px; } }
@media (max-width: 374px) { .pcard__badge { margin-top: -26px; } }
/* 誰でも通園制度と産後ケアの間を広げる（RYO「セクション間もっと開けて」） */
.dr { padding-bottom: calc(170 * var(--u)); }
@media (max-width: 1023px) { .dr { padding-bottom: 80px; } }
/* 産後ケアの写真の枠：誰でも通園制度の写真の枠（ピンクの枠 18u／SP 10px）と同じ太さに（色は白のまま） */
@media (min-width: 1024px) { .pc-care figure.pc-care__ph { border-width: calc(18 * var(--u)); } }
@media (max-width: 1023px) { .pc-care figure.pc-care__ph { border-width: 10px; } }
/* 産後ケアの対象の箱は白（RYO「対象の背景を白に」＝秘書の質問の B） */
.pc-care .target--box { background: #fff; }
/* 写真に載せている飾りのロゴを RYO 支給の logo-v.png に（画像に白いふちがあるので、CSS の白いふちは外す） */
.sticker img { filter: drop-shadow(0 3px 6px rgba(20,40,80,.18)); }
/* お知らせの白い箱の上に切り抜きを足す（RYO「お知らせ上写真もっと足して欲しい」）：左から 女の子・三輪車の男の子・走る女の子・虫とり網の子 */
.news__cut--bike { right: auto; left: calc(290 * var(--u)); top: calc(-150 * var(--u)); width: calc(100 * var(--u)); }
.news__cut--run { right: auto; left: calc(470 * var(--u)); top: calc(-152 * var(--u)); width: calc(78 * var(--u)); }
@media (max-width: 1023px) {
  .news__cut--bike { left: 30%; top: -96px; width: 60px; }
  .news__cut--run { left: 54%; top: -98px; width: 46px; }
}
/* FV：RYO 支給の FV 画像（fv-pc.jpg 1920×900／fv-sp.jpg 700×1168）。文字・ロゴ入りの画像なので切らずに全体を表示（RYO「FV画像保存したから差し替え」） */
.fv { height: auto; aspect-ratio: auto; background: none; }
.fv picture, .fv img { display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1023px) { .fv { height: auto; aspect-ratio: auto; } }
/* 弧の調整：もっと内側に見せる／上の楕円の外（当園についての地）にはみ出さない位置まで下げる */
@media (min-width: 1024px) {
  .power__arc--r1 { right: calc(-470 * var(--u)); top: calc(90 * var(--u)); }
  .power__arc--r2 { right: calc(-360 * var(--u)); top: calc(360 * var(--u)); }
  .power__arc--l1 { left: calc(-470 * var(--u)); top: calc(90 * var(--u)); }
  .power__arc--l2 { left: calc(-360 * var(--u)); top: calc(360 * var(--u)); }
}
@media (max-width: 1023px) { .power__arc--r1, .power__arc--l1 { top: 40px; } .power__arc--r2, .power__arc--l2 { top: 170px; } }
@media (min-width: 1024px) {
  .power__arc--r1 { right: calc(-400 * var(--u)); } .power__arc--l1 { left: calc(-400 * var(--u)); }
  .power__arc--r2 { right: calc(-300 * var(--u)); } .power__arc--l2 { left: calc(-300 * var(--u)); }
}
@media (max-width: 1023px) { .power__arc--r1, .power__arc--l1 { top: 300px; } .power__arc--r2, .power__arc--l2 { top: 430px; } }
/* 白い3本線を各写真の中に入れ、写真に対する位置（%）で置く：写真の高さや画面幅が変わっても同じ子どもの横に来る（RYO「写真と3本線ずれてる」） */
.about__ph figure .wsp { position: absolute; z-index: 2; }
.about__p1 .wsp--1 { left: 34%; top: 20%; transform: none; }
.about__p2 .wsp--2 { left: 40%; top: 46%; transform: rotate(90deg); }
.about__p3 .wsp--3 { left: 46%; top: 20%; transform: none; }
@media (min-width: 1024px) { .about { padding-top: calc(90 * var(--u)); } } /* 当園についての上の余白を小さく（RYO「当園についてのセクション上余白もっと小さく」）170u→90u */
/* PCの見出し：字間 .12em→.06em、大きさ 76u→84u（RYO「PC見出し／文字間もう少し狭くしてもう少し大きく」）。伸びる力は他の見出しの1.1倍のまま（92u） */
@media (min-width: 1024px) {
  #about-ttl, #adm-ttl, #shien-ttl, #tc-ttl, #dr-ttl, #pcc-ttl, #rc-ttl, #ct-ttl { font-size: calc(84 * var(--u)); letter-spacing: .06em; }
  .power__ttl { font-size: calc(92.4 * var(--u)); }
}
/* 伸びる力の上の線（RYO「ちがう／もっと自然な感じに」）：正円の弧をやめ、images/86.png のように画面の端から大きくゆるく曲がって下りる2本の線に（右・左に1組ずつ）。線の下はカードの後ろへ */
.power__arc { display: none; }
.power__sweep { position: absolute; top: calc(110 * var(--u)); width: calc(320 * var(--u)); height: calc(760 * var(--u)); z-index: 0; pointer-events: none; }
.power__sweep--r { right: 0; }
.power__sweep--l { left: 0; transform: scaleX(-1); }
@media (max-width: 1023px) { .power__sweep { top: 300px; width: 110px; height: 262px; } }
@media (max-width: 1023px) { .power__sweep { top: 360px; } }
/* SPの札を大きく（RYO「スマホの時このアイコン大きく」）：SP 56→72px／374以下 50→64px */
@media (max-width: 1023px) { .pcard__badge { width: 72px; height: 72px; margin-top: -40px; } }
@media (max-width: 374px) { .pcard__badge { width: 64px; height: 64px; margin-top: -36px; } }
@media (max-width: 1023px) { .news__head { padding-top: 16px; } } /* 鳥を消した分の余白を詰める（RYO「スマホの時お知らせブログのセクション上の余白大きすぎ」） */
/* 上の線を小さく・細く、線の端を切らずに丸く収める（RYO「いやだから／線切れてるし大きすぎるしさりげなく入れれないの」） */
.power__sweep { top: calc(130 * var(--u)); width: calc(150 * var(--u)); height: calc(300 * var(--u)); overflow: visible; }
@media (max-width: 1023px) { .power__sweep { top: 380px; width: 60px; height: 120px; } }
/* 下の線を少し高く（RYO「下の線の位置もう少し高く」）：下端から 10u→50u */
.power__ribbon--2 { bottom: calc(50 * var(--u)); }
@media (max-width: 1023px) { .power__ribbon--2 { bottom: 30px; } }
/* 当園についての見出しも、伸びる力と同じく他の見出しの1.1倍に（RYO「当園についても1、1倍に」）：PC 84u→92.4u／SP 40→44px／374以下は他の見出しの1.1倍 */
@media (min-width: 1024px) { #about-ttl { font-size: calc(92.4 * var(--u)); } }
@media (max-width: 1023px) { #about-ttl { font-size: 44px; } }
@media (max-width: 374px) { #about-ttl { font-size: min(44px, calc((100vw - 40px) / 8 * 1.1)); } }
/* 当園についての見出しも、伸びる力と同じく他の見出しの1.1倍に（RYO「当園についても1、1倍に」） */
@media (min-width: 1024px) { #about-ttl { font-size: calc(92.4 * var(--u)); } }
@media (max-width: 1023px) { #about-ttl { font-size: 44px; } }
@media (max-width: 374px) { #about-ttl { font-size: min(44px, calc((100vw - 40px) / 8 * 1.1)); } }
/* SPのお知らせの白い箱：上下の余白を広げる（RYO「スマホの時お知らせ／白ボックス／上下／特に下側余白なさすぎて／ピンク線と白背景の終わりが近すぎる」） */
@media (max-width: 1023px) { .news__list { padding-top: 14px; padding-bottom: 32px; } }
/* DIR-23 F1：SPで下の線がボタンの左下にぶつかっていた → セクション下の余白を 90→120px に（線は下端から 30px のまま＝PCと同じく下端より上） */
@media (max-width: 1023px) { .power { padding-bottom: 120px; } }
/* DIR-23 F2：PC 1024 前後で「行事・園の様子」の札と記事名がくっついていた → 札の欄の幅を最小 140px に（記事名の頭は3件そろったまま） */
@media (min-width: 1024px) { .news__list a { grid-template-columns: max-content max(calc(185 * var(--u)), 140px) 1fr auto; } }

/* PROD-20261023-hitaka-16：当園について1枚目の白い3本線を、手前の男の子の頭（帽子）の左上に寄せる。
   線の集まる点（記号の 40/60・45/60）を写真の横 40%・縦（PC 40.6%／TB・SP 42.2%）＝帽子の左上の少し外に置く。
   写真は object-fit: cover で幅によって切り取りが変わるため、PC と TB・SP で縦の値を分けている */
.about__p1 .wsp--1 { left: calc(40% - 64 * var(--u) * .667); top: calc(40.6% - 64 * var(--u) * .75); }
@media (max-width: 1023px) { .about__p1 .wsp--1 { left: calc(40% - 24px); top: calc(42.2% - 27px); } }

/* PROD-20261023-hitaka-16：LINEのボタンを LINE とわかる緑に（RYO「LINEのボタンはLINEとわかるように緑で」）。LINE の公式の緑 #06C755・白文字 */
.btn-o.btn-o--line { background: #06C755; border-color: #06C755; color: #fff; }


/* =========================================================
   PROD-20261108-nanatsu-01：ななつ星で足したもの
   ========================================================= */
/* フッターロゴ：横組みロゴは RYO 支給待ち。仮に縦組みのカラー版（白地のまま・無加工）を置く */
.ft__logo--tmp img { width: calc(170 * var(--u)); }
@media (max-width: 1023px) { .ft__logo--tmp img { width: 120px; } }
/* グローバルナビ：ななつ星は11項目（放課後児童クラブ・子供の居場所づくりが増え、産後ケアが無い）。さくらの木と同じ文字サイズのまま区切りの間隔だけ詰めて1行に収める */
.gnav__list { padding-inline: calc(14 * var(--u)); }
.gnav__list li + li::before { margin-inline: calc(12 * var(--u)); }
.gnav__list a { letter-spacing: .03em; }
/* 見出しの1文字の色：パンフ（ななつ星）は「伸」「育」などをオレンジにしている。白〜薄地の見出しは濃いオレンジ、青地の「伸」はロゴのオレンジ */
.h-ttl .g, .about__lead .g { color: var(--c-pink-deep); }
:root { --c-pink-bg: #FEF4E0; }
/* お問い合わせの地：さくらの木のピンク地をオレンジの薄地に */
.contact { background: #FDE7BF; }
/* 放課後児童クラブ：8文字の見出しが1行に収まるよう、この見出しだけ字間と大きさを詰める */
@media (min-width: 1024px) { .ac .h-ttl { font-size: calc(66 * var(--u)); letter-spacing: .04em; } }
/* お知らせの切り抜き：パンフの切り抜きは6点のみのため3点（赤ちゃん・積み木・男の子） */
.news__cut { width: calc(150 * var(--u)); right: calc(60 * var(--u)); top: calc(-148 * var(--u)); }
.news__cut--girl { left: calc(70 * var(--u)); right: auto; width: calc(92 * var(--u)); top: calc(-132 * var(--u)); }
.news__cut--bike { left: calc(250 * var(--u)); right: auto; width: calc(78 * var(--u)); top: calc(-96 * var(--u)); }
@media (max-width: 1023px) {
  .news__cut { width: 84px; right: 10px; top: -84px; }
  .news__cut--girl { left: 10px; right: auto; width: 54px; top: -78px; }
  .news__cut--bike { left: 30%; right: auto; width: 46px; top: -56px; }
}
/* 採用ページの切り抜き：ツリーハウス1点（パンフの切り抜き） */
.cutx--kids3 { width: calc(190 * var(--u)); }
@media (max-width: 1023px) { .cutx--kids3 { width: 110px; } }
/* 子供の居場所づくり（SP）：9文字の見出しが2行になるため、マークを文字の上に置く */
@media (max-width: 767px) {
  .pc-care .pc-care__ttl { flex-direction: column; align-items: center; gap: 4px; }
  .ac .h-ttl { font-size: 36px; letter-spacing: .04em; }
}
/* DIR-20261109-nanatsu-01 F1：当園についての白い3本線を、ななつ星の写真ごとに顔の左上へ置き直す
   （3本線の先＝線の画像の 60%・77% の点を、顔の左上の点に合わせる。さくらの木と同じ考え方） */
.about__p2 .wsp--2 { transform: none; left: calc(46% - 64 * var(--u) * .6); top: calc(36% - 64 * var(--u) * .77); }  /* 真ん中で笑う女の子の顔の左上（後ろは木の壁） */
.about__p3 .wsp--3 { transform: none; left: calc(52% - 64 * var(--u) * .6); top: calc(23% - 64 * var(--u) * .77); }  /* 男の子の顔の左上（後ろが青緑の壁） */
@media (max-width: 1023px) {
  .about__p2 .wsp--2 { left: calc(46% - 22px); top: calc(36% - 28px); }
  .about__p3 .wsp--3 { left: calc(52% - 22px); top: calc(23% - 28px); }
}
/* DIR-20261109-nanatsu-01 F2：フッターナビ。項目の並びを 4／4／3 にした（HTML）。SPで「子供の居場所づくり」が2行に折り返さないよう、1行のまま（右の列の始まりまで届かないことを 375・320 で実測） */
@media (max-width: 767px) { .ft__nav a { white-space: nowrap; } }
/* DIR-20261109-nanatsu-01 F3：採用ページの箱（≦1023）。さくらの木は左右に切り抜き2点を置くため箱の下を150px空けていた。ななつ星の切り抜きはツリーハウス1点なので、箱の下の空きを切り抜き1点分に縮め、真ん中に置く */
@media (max-width: 1023px) {
  .recruit__box { padding-bottom: 112px; }
  .cutx--kids3 { right: auto; left: 50%; transform: translateX(-50%); width: 124px; }
}
/* DIR-20261109-nanatsu-01 r2 F4：SP（≦767）のフッターナビ。3つ目のリストの1項目目「子供の居場所づくり」を1行（2列ぶん）に置き、
   次の行の「採用ページ」「お問い合わせ」が上の2列と同じ位置から始まるようにする（列幅は文字の長さで広がらない minmax(0,1fr)） */
@media (max-width: 767px) {
  .ft__nav, .ft__nav ul:nth-child(3) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* DIR-20261109-nanatsu-01 r3 F5：上の「子供の居場所づくり」を2列ぶんの1段にする指定は撤去（5段目の右が空いていたため）。
   ≦767 も 768〜1023 と同じ並び（5段目＝子供の居場所づくり／採用ページ、6段目＝お問い合わせ）。空きは最後の段の右だけ。
   列幅は minmax(0,1fr) のままなので、「子供の居場所づくり」が長くても右の列の書き出しは上の段とそろう */
/* RYO「写真の縁は青にしようか」（2026-11-09）：入園案内〜放課後児童クラブの写真の縁（オレンジ）を青に */
figure.ph-frame { background: #396BA3; }
/* RYO「写真枠もう少し薄い青にできる？／こんな感じ」（2026-11-09・参考画像 RYO指示_20261109/photo-frame-light-blue.webp の枠の色を実測＝#7EA6D4） */
figure.ph-frame { background: #7EA6D4; }
/* RYO「あとセクション間の余白さくらの木と違くない？」（2026-11-09）
   さくらの木は「誰でも通園制度」が帯（産後ケア）の直前なので下の余白を大きく（170u／SP 80px）している。
   ななつ星は「誰でも通園制度」の後に「放課後児童クラブ」が入るため、大きい下余白を「放課後児童クラブ」に移し、
   「誰でも通園制度」は他のセクションと同じ（80u／SP 40px）に戻す */
.dr { padding-bottom: calc(80 * var(--u)); }
.ac { padding-bottom: calc(170 * var(--u)); }
@media (max-width: 1023px) {
  .dr { padding-bottom: 40px; }
  .ac { padding-bottom: 80px; }
}
/* RYO「採用ページに載せてる切り抜き写真微妙／他のを」（2026-11-09）：ツリーハウスをやめ、スコップで泥をすくう男の子（写真 25082000043 を macOS の被写体切り抜き〔Vision〕で切り抜き。写真の端で体が切れていないものを選んだ）に。
   PCは箱の右下（右端から少しはみ出す・さくらの木の採用の切り抜きと同じ置き方）。SPはボタンの下の真ん中（ボタンに重ならない高さ 104px） */
.cutx--kids3 { right: calc(-12 * var(--u)); width: calc(130 * var(--u)); }
@media (max-width: 1023px) { .cutx--kids3 { right: auto; left: 50%; transform: translateX(-50%); width: 78px; } }
/* RYO「さくらの木は複数写真使ってるじゃん／なんで1つｄけなの」（2026-11-09）：さくらの木と同じく2点に。
   右下＝スコップの男の子（043）、左下＝座っている2人（写真 25082000032 を macOS の被写体切り抜きで作成。写真の端で体が切れていない）。
   置き方はさくらの木の採用（右 kids-3／左 shovel）と同じ：PCは箱の左右下、SPはボタンの下の左右で箱の下を150px空ける（さくらの木と同じ） */
.cutx--kids3 { right: calc(-12 * var(--u)); width: calc(130 * var(--u)); }
.cutx--pair { left: calc(20 * var(--u)); bottom: 0; width: calc(150 * var(--u)); }
@media (max-width: 1023px) {
  .recruit__box { padding-bottom: 150px; }
  .cutx--kids3 { left: auto; right: 10px; transform: none; width: 100px; }
  .cutx--pair { left: 12px; width: 118px; }
}
/* RYO「微妙すぎるから一旦消そうか」（2026-11-09）：採用セクションの切り抜き写真（右 スコップの男の子・左 座っている2人）を撤去。
   SPで切り抜きを置くために空けていた箱の下の150pxも、元の 40px（箱の上下の余白と同じ作り）に戻す */
@media (max-width: 1023px) { .recruit__box { padding-bottom: 40px; } }