@charset "utf-8";
/* ===================================================================
   site.css ― 小規模保育園 みつば
   色・余白・タイポの正本は tokens.css。ここに直値の色を書かない。
   ブレークポイントは 900px と 768px の2本だけ。
   レスポンシブは全部メディアクエリ。JSで画面幅を見て切り替えない。
   =================================================================== */

/* -------------------------------------------------------------------
   0. 追加トークン
   tokens.css に無く、実装上どうしても必要になった3つだけ。理由を書く。
   ------------------------------------------------------------------- */
:root {
  /* 固定ヘッダーのぶんの押し下げ。JSが実測値で上書きする（CSSでは測れない）。
     JSが走る前でもズレないよう、実測に合わせた初期値を置いている。 */
  /* 実測：下層4ページ 200px／TOP 190px（現在地の点3つのぶん差が出る）／モバイル 68px */
  --header-h: 200px;
  /* 768px以下のページヘッダー h1。--fs-logo と同値だが用途が違うので別に持つ。 */
  --fs-page-h1-sp: calc(30 / 16 * 1rem);
  /* ナビ項目の区切り点線の高さ。圧縮時に縮む。
     元実装は .header-compact で --sp-80 そのものを上書きしていたが、
     サイト共通の余白トークンを書き換えると事故るので専用に分けた。 */
  --nav-rule-h: var(--sp-80);
}

/* -------------------------------------------------------------------
   1. レイアウトの基盤
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.page { background: var(--base); color: var(--ink); }

.container { max-width: var(--container); margin-inline: auto; width: 100%; }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; width: 100%; }

.section { position: relative; padding: var(--section-pad) var(--sp-24); }
.section--info { padding: var(--section-pad-info) var(--sp-24); }
/* 斜めの切り返しを下端に置くセクションは、その分だけ下余白を足す */
.section--wedge { padding-bottom: calc(var(--section-pad-info) + var(--edge-wedge-h)); }

.bg-base  { background: var(--base);       color: var(--ink); }
.bg-warm  { background: var(--base-warm);  color: var(--ink); }
.bg-green { background: var(--base-green); color: var(--ink); }

.stack { display: flex; flex-direction: column; }
.stack-24 { gap: var(--sp-24); }
.stack-40 { gap: var(--sp-40); }
.stack-48 { gap: var(--sp-48); }
.stack-80 { gap: var(--sp-80); }
.stack--center { align-items: center; }
.pos-relative { position: relative; }
.icon-sm-img { width: var(--icon-sm); height: var(--icon-sm); object-fit: contain; }
.deco-inline-48 { width: var(--sp-48); object-fit: contain; }
.deco-inline-40 { width: var(--sp-40); object-fit: contain; }

/* 装飾を本文の下に敷くための層。z-index の関係は
   装飾(0) < 本文(1) < 境界の帯(2) で固定する。 */
.layer-body { position: relative; z-index: 1; }
/* 葉形の装飾が本文にかからないよう、お知らせだけ本文を1段上げる */
.layer-body--top { z-index: 2; }

/* -------------------------------------------------------------------
   2. セクション境界（もこもこ）
   アニメーションさせない。最初から完成形で表示する。
   帯の色は「下のセクションの色」を選ぶ。
   ------------------------------------------------------------------- */
.edge {
  position: absolute; left: 0; bottom: -1px;
  width: 100%; z-index: 2; pointer-events: none;
}
.edge--wave { height: var(--edge-h); }
.edge--scallop { height: var(--edge-h-lg); }
/* 下層ページヘッダー専用。イラストの下余白が24pxしかないので16px以内に抑える */
.edge--shallow { height: var(--sp-16); }

.edge--base  { color: var(--base); }
.edge--warm  { color: var(--base-warm); }
.edge--green { color: var(--base-green); }
.edge--deep  { color: var(--primary-deep); }
.edge--ink   { color: var(--ink); }

.edge-wedge {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: var(--edge-wedge-h);
  background: var(--primary-deep);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* 境界をまたぐ葉形。% だけで指定すると広い画面で際限なく大きくなる */
.edge-leaf {
  position: absolute; bottom: 0; right: 8%;
  width: min(40%, 440px); aspect-ratio: 1 / 1;
  transform: translateY(45%);
  z-index: 1; pointer-events: none;
  color: color-mix(in srgb, var(--base-warm) 95%, var(--ink));
}

/* -------------------------------------------------------------------
   3. ヘッダー
   スクロール圧縮だけJS（スクロール量に反応するのでCSSでは書けない）。
   ------------------------------------------------------------------- */
.site-header { background: var(--base); color: var(--ink); padding-bottom: var(--sp-8); }
.header-spacer { height: var(--header-h); }
/* TOP以外は skirt を出さないので、白い波のぶんの余白も要らない */

.header-inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--header-pad) var(--sp-24) 0;
}
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16);
}
.header-logo {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  min-height: var(--tap-min); text-decoration: none; color: var(--ink);
}
.header-logo:hover, .header-logo:focus { color: var(--ink); }
.header-logo img { width: 52px; height: 52px; display: block; }
.header-logo-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.header-logo-sub { font-size: calc(13 / 16 * 1rem); font-weight: 500; letter-spacing: 0.12em; color: var(--primary-deep); }
.header-logo-name { font-size: calc(27 / 16 * 1rem); font-weight: 700; letter-spacing: 0.02em; }

.header-pill {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  background: var(--primary-pale); color: var(--primary-deep);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.03em;
  border-radius: var(--r-pill); padding: var(--sp-8) var(--sp-24);
  text-decoration: none;
}
.header-pill:hover, .header-pill:focus { background: var(--primary-pale); color: var(--primary-deep); }

.header-burger {
  display: none; /* 900px以下で出す */
  width: var(--tap-min); height: var(--tap-min);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 0;
}
.header-burger span { width: 24px; height: 2px; background: var(--ink); }

/* .header-navrow / .header-logomark / .header-compact は tokens.css 側 */
.header-nav { grid-column: 2; display: flex; justify-content: center; }

.nav-item {
  position: relative; width: var(--nav-item-w);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8); text-decoration: none;
  background: transparent; color: var(--ink);
  border-radius: var(--r-card);
  transition: color 0.25s, background 0.25s, transform 0.25s;
}
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); height: var(--nav-rule-h);
  border-left: var(--rule-dotted);
}
.nav-item:hover, .nav-item:focus {
  background: var(--primary-pale); color: var(--primary-deep);
}
.nav-item:hover { transform: translateY(-2px); }
.nav-item img { width: var(--icon-nav); height: var(--icon-nav); object-fit: contain; transition: width 0.25s, height 0.25s; }
.nav-item-label { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }
.nav-rule-end {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); height: var(--nav-rule-h);
  border-left: var(--rule-dotted);
}
.header-compact { --nav-rule-h: var(--sp-48); }

.nav-current { display: flex; gap: 4px; margin-top: -4px; }
.nav-current i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--soil); }

.header-logomark img { width: 40px; height: 40px; display: block; }
.header-logomark .header-logo-sub { font-size: calc(12 / 16 * 1rem); }
.header-logomark .header-logo-name { font-size: calc(20 / 16 * 1rem); }

.header-skirt {
  position: absolute; left: 0; width: 100%;
  color: var(--base); z-index: 5; pointer-events: none;
}
.header-skirt--default { bottom: -59px; height: 60px; }
.site-header.header-scrolled .header-skirt { display: none; }

.mobile-menu { display: none; flex-direction: column; padding: var(--sp-8) var(--sp-24) var(--sp-24); }
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  display: flex; align-items: center; gap: var(--sp-16);
  min-height: var(--tap-min); padding: var(--sp-8) 0;
  text-decoration: none; background: var(--base); color: var(--ink);
  font-weight: 700; border-top: 1px solid var(--line);
}
.mobile-menu a:hover, .mobile-menu a:focus { background: var(--base); color: var(--ink); }
.mobile-menu img { width: var(--icon-sm); height: var(--icon-sm); object-fit: contain; }
/* メニュー内のピルは .mobile-menu a より詳細度が低いので、
   背景と文字色を対で書き直しておく（片方だけだと白地に白文字になる） */
.mobile-menu .header-pill {
  margin-top: var(--sp-16); justify-content: center;
  background: var(--primary-pale); color: var(--primary-deep);
  border-top: none; font-weight: 500;
}
.mobile-menu .header-pill:hover, .mobile-menu .header-pill:focus {
  background: var(--primary-pale); color: var(--primary-deep);
}

/* -------------------------------------------------------------------
   4. ボタン
   ------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(var(--btn-w), 100%); height: var(--btn-h);
  font-family: inherit; font-size: var(--fs-btn); font-weight: 700;
  letter-spacing: 0.05em; line-height: 1;
  border: none; border-radius: var(--r-card);
  text-decoration: none; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
}
.btn--primary { background: var(--accent-deep); color: var(--base); }
.btn--primary:hover, .btn--primary:focus { background: var(--accent-deep-hover); color: var(--base); }
.btn--primary:hover { transform: translateY(-2px); }

.btn--outline {
  width: auto; height: auto; min-height: var(--tap-min);
  padding: var(--sp-16) var(--sp-40);
  background: var(--base); color: var(--ink);
  border: 1px solid var(--ink);
  font-size: var(--fs-body); white-space: nowrap;
}
.btn--outline:hover, .btn--outline:focus { background: var(--primary-pale); color: var(--ink); }

/* -------------------------------------------------------------------
   5. セクション見出し
   ------------------------------------------------------------------- */
.sec-head { display: flex; flex-direction: column; gap: var(--sp-16); }
.sec-head--center { align-items: center; text-align: center; }
/* 見出しの右にボタンを置く形（TOP 09 お知らせ） */
.sec-head--split { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap; }
.sec-head--narrow { max-width: var(--container-narrow); margin-inline: auto; }
.sec-headline { display: flex; align-items: center; gap: var(--sp-24); }
.sec-title { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; }
.sec-lead { margin: 0; font-size: var(--fs-lead); line-height: 1.8; }
/* 見出しアイコンはセクション上端の余白に16px食い込ませる */
.sec-icon { width: var(--icon-heading); height: var(--icon-heading); object-fit: contain; margin-top: -16px; }
.sec-icon--flat { margin-top: 0; }
.rot-3  { transform: rotate(3deg); }
.rot-n3 { transform: rotate(-3deg); }
.rot-4  { transform: rotate(4deg); }
.rot-n4 { transform: rotate(-4deg); }
.rot-n8 { transform: rotate(-8deg); }
.rot-8  { transform: rotate(8deg); }

.head-dots { display: flex; gap: var(--sp-8); }
.head-dots--center { justify-content: center; }
.head-dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--soil); }

.sub-title { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; }
/* 見出しの下に置く、本文より一段大きいリード（太字にしない） */
.lead-h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.8; text-wrap: pretty; }
.body-text { margin: 0; font-size: var(--fs-body); line-height: 1.8; }
.note-text { margin: 0; font-size: var(--fs-small); color: var(--ink-weak); letter-spacing: 0.03em; }
.note-text--center { text-align: center; }

/* 見出しの色分け。
   --accent-gold と --accent-deep は DADS の 4.5:1 を満たさないが「現状維持」で決着済み。
   そのかわり、クリーム --base-warm(#FFF6E5) 以上に明るい地色でしか使わない。
      白 #FFFFFF     … red 4.62:1 / gold 4.02:1
      クリーム #FFF6E5 … red 4.40:1 / gold 3.74:1
      カード #FFF9EE  … クリームより明るいので可 */
.hl-red   { color: var(--accent-deep); }
.hl-gold  { color: var(--accent-gold); }
.hl-green { color: var(--primary-deep); }

/* 淡緑 --base-green(#EFF6E8) はクリームより暗い。
   この上では red 4.27:1 / gold 3.64:1 まで落ちるので、色分けを
   --primary-deep(5.32:1) に寄せる。新しい色は足さない。 */
.bg-green .hl-red,
.bg-green .hl-gold { color: var(--primary-deep); }
/* ただしカード・パネルは自前の明るい地色を持つので、そちらは元の色分けのまま */
.bg-green .card .hl-red,  .bg-green .panel .hl-red  { color: var(--accent-deep); }
.bg-green .card .hl-gold, .bg-green .panel .hl-gold { color: var(--accent-gold); }

/* -------------------------------------------------------------------
   6. 写真
   本文中の写真は黄金比の枠に固定して object-fit: cover で切り取る
   ------------------------------------------------------------------- */
/* <picture> は箱を持たせない。中の <img> をそのまま親のレイアウトに参加させる。
   こうしておくと .photo-frame img { height:100% } などが今までどおり効く。 */
picture { display: contents; }

.photo-frame { aspect-ratio: 1.618 / 1; overflow: hidden; border-radius: var(--r-card); }
.photo-frame--wide { aspect-ratio: 16 / 9; border-radius: var(--r-panel); }
.photo-frame--43 { aspect-ratio: 4 / 3; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* はたけの写真は手描きの角丸マスク（雲形は写真の上部を削るので使わない） */
.blob-photo {
  aspect-ratio: 3 / 2; overflow: hidden;
  -webkit-mask-image: url('../assets/masks/mask-blob-3x2.svg');
  -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat;
  mask-image: url('../assets/masks/mask-blob-3x2.svg');
  mask-size: 100% 100%; mask-repeat: no-repeat;
}
.blob-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* -------------------------------------------------------------------
   7. カード・パネル・表
   ------------------------------------------------------------------- */
.card {
  background: var(--card-warm); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--sp-16);
}
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-3col); }

.panel {
  background: var(--card-warm); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--card-pad);
}
.panel--plain { border: none; }
.panel--note { padding: var(--sp-24) var(--card-pad); }
.text-center { text-align: center; }

/* 濃緑の面。文字は必ず白で対にする */
.band-green {
  position: relative; overflow: hidden;
  background: var(--primary-deep); color: var(--base);
  border-radius: var(--r-panel); padding: var(--card-pad);
}
.band-green .sub-title, .band-green .body-text { color: var(--base); }
.band-green .hl-pale { color: var(--primary-pale); }
.band-clover {
  position: absolute; left: -40px; top: 50%; margin-top: -120px;
  width: 240px; height: 240px; opacity: 0.2;
  color: var(--pale-green); pointer-events: none;
}

.spec-table { width: 100%; border-collapse: collapse; text-align: left; }
.spec-table th {
  display: table-cell; width: 200px; font-weight: 700; text-align: left;
  padding: var(--sp-24) var(--sp-24) var(--sp-24) 0;
  border-bottom: 1px solid var(--line-structural);
  vertical-align: top;
}
.spec-table td {
  display: table-cell;
  padding: var(--sp-24) 0;
  border-bottom: 1px solid var(--line-structural);
  vertical-align: top;
}
.spec-table--boxed {
  background: var(--base); color: var(--ink);
  border-radius: var(--r-card); padding: var(--sp-16) var(--card-pad);
}

/* 罫線だけの情報リスト（アクセス・TOP 02） */
.info-list { display: flex; flex-direction: column; justify-content: center; }
.info-item { padding: var(--sp-24) 0; border-bottom: 1px solid var(--line-structural); }
.info-item h3 { margin: 0 0 var(--sp-8); font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; }

/* -------------------------------------------------------------------
   8. StepFlow（入園までの流れ・駅からの道のり）
   デスクトップは横並び、900px以下は縦並び。矢印の向きもCSSで変える。
   ------------------------------------------------------------------- */
.stepflow { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-16); }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); max-width: 220px; text-align: center; }
.step-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--step-circle); height: var(--step-circle);
  border-radius: var(--r-pill);
  background: var(--primary-deep); color: var(--base);
  font-size: var(--fs-h3); font-weight: 700; line-height: 1;
  flex: none;
}
.step-label { font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; }
.step-body { font-size: var(--fs-small); color: var(--ink-weak); line-height: 1.7; letter-spacing: 0.03em; }

.arrow {
  flex: 1; min-width: var(--sp-40); max-width: 160px;
  height: var(--step-circle);
  display: flex; align-items: center;
  transform-origin: left center;
}
.arrow-line { flex: 1; height: 2px; background: var(--ink); }
.arrow-head {
  width: 0; height: 0;
  border-left: 8px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* route 変種：番号のない丸＋土色の矢印 */
.stepflow--route .step-circle { background: var(--primary); }
.stepflow--route .step-label { font-size: var(--fs-body); color: var(--primary-deep); }
.stepflow--route .arrow-line { background: var(--soil); }
.stepflow--route .arrow-head { border-left-color: var(--soil); }

/* -------------------------------------------------------------------
   9. DotsDiagram（定員19名／職員10名の内訳）
   ------------------------------------------------------------------- */
.dots { display: flex; flex-direction: column; gap: var(--sp-24); }
.dots--panel {
  background: var(--card-warm); color: var(--ink);
  border-radius: var(--r-panel); padding: var(--card-pad);
  gap: 0;
}
.dots--panel .dots-title { margin: 0 0 var(--sp-24); }
.dots-title { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; }
.dots-groups { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-40) var(--gap-2col); }
.dots-group { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.dots-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8); max-width: 280px; }
.dots-label { font-size: var(--fs-body); font-weight: 700; }
.dot { width: var(--dot); height: var(--dot); border-radius: var(--r-pill); background: var(--primary); }
.dot--soil { background: var(--soil); }

/* -------------------------------------------------------------------
   10. CtaBlock
   ------------------------------------------------------------------- */
/* 地色は .cta 自身にも持たせる。.cta-bg は装飾を重ねるための面で、
   これが無くても「濃緑＋白」の対が崩れないようにしておく。 */
.cta {
  position: relative; overflow: hidden;
  padding: var(--cta-band-pad) var(--sp-24);
  background: var(--primary-deep); color: var(--base);
}
.cta-bg { position: absolute; inset: 0; background: var(--primary-deep); }
.cta-ellipse {
  position: absolute; right: -80px; top: 50%; margin-top: -192px;
  width: 480px; height: 480px; opacity: 0.18;
  color: var(--pale-cream); pointer-events: none;
}
.cta-inner {
  position: relative; max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-40) var(--gap-2col); flex-wrap: wrap;
}
.cta-text { display: flex; flex-direction: column; gap: var(--sp-16); flex: 1; min-width: 280px; }
.cta-heading { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; color: var(--base); }
.cta-body { margin: 0; font-size: var(--fs-body); line-height: 1.8; color: var(--base); }

/* -------------------------------------------------------------------
   11. フッター
   ------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--ink); color: var(--base);
  padding: var(--sp-48) var(--sp-24) var(--sp-40);
}
.footer-inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
/* 上段は2カラム。左＝園の情報／右＝サイト内の案内。
   縦に積むより低く収まる。DOM順も左→右にしてあるので Tab順序が見た目と一致する。 */
.footer-top {
  width: 100%;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-40) var(--gap-2col); flex-wrap: wrap;
  text-align: left;
}
.footer-info { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); line-height: 1.7; letter-spacing: 0.03em; }
/* リンクの箱はタップ領域44px以上のために48pxある（文字は約24pxなので上下に12pxずつ余白）。
   ここに行の間隔を足すと見た目のすきまが倍近くになるので、行間は0にして箱の余白だけにする。 */
.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.footer-nav { display: flex; justify-content: flex-end; gap: var(--sp-8) var(--sp-40); flex-wrap: wrap; }
.footer-sub { display: flex; justify-content: flex-end; gap: var(--sp-8) var(--sp-24); flex-wrap: wrap; }
.sample-note { margin-top: var(--sp-48); }
.footer-copy { margin-top: var(--sp-24); }

/* フッターのリンクは常に下線を引く。
   周囲の園名・住所も同じ白文字なので、下線が無いと「色だけ」でも区別できない。
   （1.4.1 色の使用 レベルA） */
.footer-nav a, .footer-sub a, .footer-info a, .footer-acc-list a {
  color: var(--base); text-decoration: underline; text-underline-offset: 0.2em;
  min-height: var(--tap-min); display: inline-flex; align-items: center;
}
.footer-nav a:hover, .footer-sub a:hover, .footer-info a:hover, .footer-acc-list a:hover,
.footer-nav a:focus, .footer-sub a:focus, .footer-info a:focus, .footer-acc-list a:focus {
  color: var(--base); text-decoration-thickness: 2px; /* 太さだけ変える。字送りが動かない */
}
.footer-nav a { font-size: var(--fs-body); font-weight: 700; }
.footer-sub a { font-size: var(--fs-body); }
.footer-info { font-size: var(--fs-body); }
.footer-name { font-size: var(--fs-h3); font-weight: 700; }

.footer-acc { display: none; flex-direction: column; width: 100%; text-align: left; }
.footer-acc-btn {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap-min);
  background: none; border: none; border-bottom: 1px solid var(--line);
  color: var(--base); font-family: inherit; font-size: var(--fs-body);
  font-weight: 700; letter-spacing: 0.02em; cursor: pointer; padding: 0;
}
.footer-acc-list { display: none; flex-direction: column; }
.footer-acc-list.is-open { display: flex; }
.footer-acc-list a { font-weight: 700; border-bottom: 1px solid var(--line); width: 100%; }
/* テンプレートの見本であることの明示。
   焦げ茶の面に置くので、背景と文字色を対で書く（白 8.56:1）。 */
.sample-note {
  /* 右下の固定電話ボタンに文字が隠れないよう、コンテンツ幅より内側に収める */
  max-width: var(--container-narrow); margin-inline: auto; width: 100%;
  padding: var(--sp-16) var(--sp-24);
  background: var(--ink); color: var(--base);
  /* 枠線は --soil だと焦げ茶の上で 2.68:1 しかない。--line なら 6.47:1 */
  border: 1px solid var(--line); border-radius: var(--r-card);
  font-size: var(--fs-body); line-height: 1.8; letter-spacing: 0.03em;
  text-align: center; text-wrap: pretty;
}
.sample-note strong { font-weight: 700; }
.footer-copy { margin: 0; text-align: center; font-size: var(--fs-tag); }
.footer-deco { position: absolute; bottom: var(--sp-24); width: var(--sp-48); height: var(--sp-48); object-fit: contain; }
.footer-deco--l { left: var(--sp-24); }
.footer-deco--r { right: var(--sp-24); }

/* -------------------------------------------------------------------
   12. 固定の電話CTA
   .float-tel（右下の丸ボタン・デスクトップ圧縮時）は tokens.css 側。
   .fixed-tel-cta（画面下端の帯）はモバイル専用。
   ------------------------------------------------------------------- */
.fixed-tel-spacer, .fixed-tel-cta { display: none; }

/* -------------------------------------------------------------------
   13. 下層ページのヘッダー帯
   イラストは地色が #FFF6E5 ちょうど。角丸・影・背景を付けない。
   帯の地色は --base-warm 以外にしない。
   ------------------------------------------------------------------- */
.page-hero-band { position: relative; background: var(--base-warm); color: var(--ink); }
.page-hero { height: 200px; padding: 0 var(--sp-24); }
.page-hero-inner {
  max-width: var(--container); height: 100%; margin-inline: auto;
  display: flex; flex-direction: row; align-items: center;
  justify-content: space-between; gap: var(--sp-40);
}
.page-hero-text { display: flex; flex-direction: column; gap: var(--sp-8); }
.page-eyebrow { font-size: var(--fs-eyebrow); font-weight: 500; color: var(--ink-weak); letter-spacing: 0.18em; line-height: 1; }
.page-title { margin: 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em; }
.page-lead { margin: 0; font-size: var(--fs-lead); line-height: 1.8; text-wrap: pretty; }
.page-hero-art { flex: 0 1 600px; width: auto; margin: 0; height: 200px; }
.page-hero-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* お知らせだけ帯用のイラストが引き渡しに無いので、ナビと同じ封筒アイコンを置く。
   専用イラスト（illust-header-news）が用意できたら .page-hero-art に戻す。 */
.page-hero-art--icon { display: flex; align-items: center; justify-content: center; }
.page-hero-art--icon img { width: auto; height: 100%; max-height: 140px; }
/* 記事ページは見出しが長くなるので帯の高さを内容にまかせる */
.page-hero--auto { height: auto; min-height: 200px; padding-block: var(--sp-24); }
.page-title--article { font-size: var(--fs-h2); }

/* -------------------------------------------------------------------
   14. TOP
   ------------------------------------------------------------------- */
/* FV */
.fv { position: relative; }
.fv-media { position: relative; overflow: hidden; }
.fv-photo { height: 640px; }
.fv-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 65%; display: block; }
.fv-badge {
  position: absolute; top: var(--sp-96); right: var(--sp-24); z-index: 3;
  background: var(--base); color: var(--ink);
  font-size: var(--fs-small); font-weight: 700;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-card);
}
.fv-overlay { position: absolute; inset: 0; pointer-events: none; }
.fv-body {
  max-width: var(--container); height: 100%; margin-inline: auto;
  padding: var(--sp-48) var(--sp-24);
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: var(--sp-16);
}
.fv-catch { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-8); }
.catch-band {
  display: inline-block; background: var(--primary-deep);
  padding: var(--sp-8) var(--sp-24); border-radius: var(--r-card);
  transform-origin: left center;
}
.catch-text {
  display: inline-block; color: var(--base);
  font-size: var(--fs-h1); font-weight: 700; line-height: 1.4; letter-spacing: 0.02em;
}
.fv-specs { display: flex; flex-direction: column; gap: var(--sp-8); align-items: flex-start; }
.fv-spec {
  background: var(--base); color: var(--ink);
  font-weight: 700; line-height: 1.8;
  padding: 0 var(--sp-16); border-radius: var(--r-card);
}
.fv-cta { pointer-events: auto; }

/* 02 通えるか */
.split-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-40) var(--gap-2col); }
.split-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-40) var(--gap-2col); align-items: center; }
.split-half { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-40) var(--gap-2col); align-items: center; }
.split-3-2--mid { align-items: center; }
.map-frame { position: relative; min-height: 320px; border-radius: var(--r-panel); overflow: hidden; }
.map-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.map-frame--43 { min-height: 0; aspect-ratio: 4 / 3; }

/* 03 入れるか */
.path-row { display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap; justify-content: center; }
.path-box {
  flex: 1; min-width: 240px;
  background: var(--primary-pale); color: var(--primary-deep);
  border-radius: var(--r-card); padding: var(--sp-24) var(--sp-40);
  text-align: center; font-weight: 700; font-size: var(--fs-h3);
}
.path-arrow { width: var(--sp-80); display: flex; align-items: center; transform-origin: left center; }

/* 三つ葉の図解（about） */
.clover-figure { display: flex; flex-direction: column; align-items: center; }
.clover-leaf {
  width: 128px; height: 128px; border-radius: var(--r-pill);
  background: var(--primary-pale); color: var(--primary-deep);
  font-size: var(--fs-h3); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.clover-row { display: flex; gap: var(--sp-16); margin-top: calc(var(--sp-16) * -1); }

/* 04 みつばの一日 */
.day-col { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); }
.day-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; }
.day-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.day-tag {
  background: var(--primary-pale); color: var(--primary-deep);
  font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.05em; line-height: 1;
  padding: var(--sp-8) var(--sp-24); border-radius: var(--r-card);
}
.day-list { margin: 0; width: 100%; display: grid; grid-template-columns: 64px 1fr; gap: var(--sp-16); }
.day-list dt { margin: 0; font-weight: 700; }
.day-list dd { margin: 0; font-size: var(--fs-body); line-height: 1.8; }

/* 05 はたけ */
.hatake-deco { display: flex; gap: var(--sp-16); align-items: flex-end; margin-top: var(--sp-8); }

/* 08 費用 */
.fee-em { margin: 0; text-align: center; font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; }
.fee-line { display: block; width: var(--sp-96); height: 1px; background: var(--soil); }

/* 09 お知らせ */
.news-card { display: flex; flex-direction: column; gap: var(--sp-16); text-decoration: none; color: var(--ink); transition: transform 0.3s; }
.news-card:hover, .news-card:focus { color: var(--ink); }
.news-card:hover { transform: translateY(-4px); }
.news-thumb { aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.3s; }
.news-card:hover .news-thumb img { transform: scale(1.04); }
.news-tag {
  align-self: flex-start;
  background: var(--primary-pale); color: var(--primary-deep);
  font-size: var(--fs-tag); font-weight: 500; letter-spacing: 0.05em; line-height: 1;
  padding: var(--sp-8) var(--sp-16); border-radius: var(--r-card);
}
.news-date { font-size: var(--fs-small); color: var(--ink-weak); letter-spacing: 0.03em; line-height: 1; }
.news-title {
  font-size: var(--fs-h3); font-weight: 700; line-height: 1.6;
  color: var(--ink); text-decoration: underline; text-underline-offset: 0.2em;
  transition: color 0.3s;
}
.news-card:hover .news-title { color: var(--primary-deep); }

/* お知らせ一覧・記事ページ */
.article-meta { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.article-body { display: flex; flex-direction: column; gap: var(--sp-24); }
.article-body p { margin: 0; font-size: var(--fs-body); line-height: 1.8; }
.article-foot { display: flex; justify-content: center; }
/* 一覧の並び。件数が増えても同じカードのまま折り返す */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap-3col) var(--gap-3col); }

/* 10 見学予約 */
.visit-tail { display: flex; flex-direction: column; align-items: center; gap: var(--sp-16); text-align: center; }
.visit-phone { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.visit-phone-label { margin: var(--sp-8) 0 0; font-size: var(--fs-body); font-weight: 700; }
.visit-phone-num { font-size: var(--fs-h2); font-weight: 700; line-height: 1.5; color: var(--ink); text-decoration: none; }
.visit-phone-num:hover, .visit-phone-num:focus { color: var(--ink); text-decoration: underline; }

/* -------------------------------------------------------------------
   15. 見学予約フォーム
   ------------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-40) var(--gap-2col); align-items: start; max-width: var(--container-narrow); margin-inline: auto; width: 100%; }
.visit-form { display: flex; flex-direction: column; gap: var(--sp-24); }
.field { display: flex; flex-direction: column; gap: var(--sp-8); }
.field-head { display: flex; align-items: center; gap: var(--sp-8); }
.field label { font-weight: 700; }
.req-tag {
  background: var(--accent-deep); color: var(--base);
  font-size: var(--fs-tag); font-weight: 700; line-height: 1;
  padding: var(--sp-8); border-radius: var(--r-card);
}
.field input {
  display: block; width: 100%; min-height: var(--tap-min);
  padding: var(--sp-8) var(--sp-16);
  font-family: inherit; font-size: var(--fs-body);
  background: var(--base); color: var(--ink);
  border: 1px solid var(--line-structural); border-radius: var(--r-input);
  transition: border-color 0.2s;
}
.field input:focus { border-color: var(--primary-deep); }
.field-error { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--accent-deep); }
.visit-form .btn { margin-top: var(--sp-16); }

.phone-box {
  background: var(--card-warm); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  padding: var(--card-pad);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-8);
  text-align: center;
}
.phone-box-num {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  font-size: var(--fs-h2); font-weight: 700; line-height: 1.5;
  color: var(--ink); text-decoration: none;
}
.phone-box-num:hover, .phone-box-num:focus { color: var(--ink); text-decoration: underline; }

/* よくある質問 */
.faq { margin: 0 auto; max-width: var(--container-narrow); width: 100%; display: flex; flex-direction: column; gap: var(--sp-24); }
.faq-item { background: var(--base); color: var(--ink); border-radius: var(--r-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--sp-16); }
.faq-item dt { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; color: var(--primary-deep); }
.faq-item dd { margin: 0; font-size: var(--fs-body); line-height: 1.8; padding-top: var(--sp-16); border-top: var(--rule-dotted); }

/* えらばなかったこと（about） */
.reason-list { display: flex; flex-direction: column; gap: var(--sp-40); }
.reason { display: flex; flex-direction: column; gap: var(--sp-8); }
.reason h3 { margin: 0; display: flex; align-items: center; gap: var(--sp-16); font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; letter-spacing: 0.02em; }
.reason h3::before { content: ''; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--accent-deep); flex: none; }
.reason p { margin: 0; max-width: 640px; padding-left: var(--sp-24); font-size: var(--fs-body); line-height: 1.8; }

/* 3つの方針（about） */
.policy { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-24) var(--gap-2col); align-items: center; }
.policy-text { order: 1; display: flex; flex-direction: column; gap: var(--sp-16); }
.policy-photo { order: 0; }
.policy--photo-right .policy-photo { order: 2; }
.policy-num { font-size: var(--fs-num); font-weight: 700; line-height: 1; color: var(--soil); }

/* 部屋の写真2枚（about） */
.room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }

/* 慣らし保育（admission） */
.narashi { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-40) var(--gap-2col); align-items: center; }

/* -------------------------------------------------------------------
   15b. 装飾の置き場所
   .deco-layer（コンテンツ幅＋両側bleedで中央固定）は tokens.css 側。
   またぐ装飾は「上のセクション」の中に置く。下から突き出すと本文を隠す。
   ------------------------------------------------------------------- */
.deco { position: absolute; pointer-events: none; }
.deco-emblem { display: flex; justify-content: center; }
.deco-emblem img { width: 96px; height: 96px; display: block; }
.only-desktop { display: initial; }

/* TOP 04 みつばの一日 */
.deco-04-cloud { left: 25%; bottom: 0; transform: translateY(50%); width: var(--sp-80); z-index: 3; }
.deco-04-leaf  { left: var(--sp-48); bottom: 30%; width: var(--sp-48); }
/* TOP 05 はたけ */
.deco-05-a { left: var(--sp-48); top: var(--sp-120); width: var(--icon-heading); }
.deco-05-b { right: var(--sp-48); top: var(--sp-96); width: var(--sp-48); }
.deco-05-c { right: var(--sp-40); top: 45%; width: var(--sp-48); }
/* TOP 07 安心 */
.deco-07 { right: 20%; bottom: 0; transform: translateY(45%); width: var(--sp-48); z-index: 3; }
/* TOP 08 費用 */
.deco-08 { left: 15%; bottom: 0; transform: translateY(45%); width: var(--sp-48); z-index: 3; }
/* TOP 10 見学予約 */
.deco-10-a { left: 12%; bottom: calc(var(--edge-h) - 4px); width: var(--sp-48); z-index: 2; }
.deco-10-b { right: var(--sp-40); top: var(--sp-120); width: var(--sp-48); }
/* TOP 07 職員の図解にまたがる雲 */
.deco-staff { position: absolute; top: -24px; right: var(--sp-40); width: var(--sp-80); z-index: 2; pointer-events: none; }
/* 下層 */
.deco-about-1 { left: 15%; bottom: 0; transform: translateY(45%); width: var(--sp-48); z-index: 3; }
.deco-about-2 { right: 18%; bottom: 0; transform: translateY(45%); width: var(--sp-48); z-index: 3; }
.deco-side-r  { right: var(--sp-48); top: var(--sp-96); width: var(--sp-48); }
.deco-side-l  { left: var(--sp-48); top: var(--sp-96); width: var(--icon-heading); }
.deco-under-l { left: 20%; bottom: 0; transform: translateY(50%); width: var(--sp-80); z-index: 3; }
.deco-under-r { right: 15%; bottom: 0; transform: translateY(50%); width: var(--sp-80); z-index: 3; }
.deco-admission { right: 20%; bottom: 0; transform: translateY(45%); width: var(--sp-48); z-index: 3; }

/* 右下の電話ボタン（tokens.css の .float-tel を補う） */
.float-tel:hover, .float-tel:focus { color: inherit; }
.float-tel-circ svg { display: block; }

/* ページ読み込み時の白いオーバーレイ。
   CSSアニメーションだけで消えるので、JSやGSAPが落ちても白いまま残らない。 */
.page-loader {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--base);
  animation: loader-out 0.4s ease 0.5s forwards;
}
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .page-loader { display: none; } }

/* ===================================================================
   16. 〜900px
   2カラム→1カラム、表→ブロック、ヘッダーのナビ、
   フローティング電話ボタンを隠す
   =================================================================== */
@media (max-width: 900px) {
  /* ヘッダー：ナビ2段目が消えるぶん低くなる */
  :root { --header-h: 68px; }
  /* 上段のピルだけを隠す。メニュー内のピルは残すので .header-pill 全体を消さない */
  .header-top > .header-pill { display: none; }
  .header-burger { display: flex; }
  .header-navrow { display: none; }

  /* 2カラム→1カラム */
  .split-3-2, .split-2-3, .split-half, .form-grid, .policy, .narashi, .room-grid {
    grid-template-columns: 1fr;
  }
  /* 写真をテキストの前に出す */
  .policy-photo, .policy--photo-right .policy-photo { order: 0; }
  .policy-text { order: 1; }
  .hatake-swap .blob-photo { order: 0; }
  .hatake-swap .hatake-text { order: 1; }

  /* 表→ブロック */
  .spec-table th {
    display: block; width: auto;
    padding: var(--sp-24) 0 var(--sp-8);
    border-bottom: none;
  }
  .spec-table td { display: block; padding: 0 0 var(--sp-24); }

  /* StepFlow を縦に */
  .stepflow { flex-direction: column; align-items: center; }
  .step { max-width: 280px; }
  .arrow {
    flex: none; min-width: 0; max-width: none;
    width: auto; height: var(--sp-40);
    flex-direction: column; align-items: center;
  }
  .arrow-line { flex: 1; width: 2px; height: auto; }
  .arrow-head {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid var(--ink);
    border-bottom: none;
  }
  .stepflow--route .arrow-head { border-top-color: var(--soil); border-left-color: transparent; }

  /* FV：写真の下に文字を置く */
  .fv-photo { height: auto; aspect-ratio: 4 / 3; }
  .fv-photo img { object-position: 42% center; }
  .fv-badge { top: var(--sp-80); right: var(--sp-16); font-size: var(--fs-tag); }
  .fv-overlay { position: static; pointer-events: auto; }
  .fv-body { height: auto; padding: var(--sp-24); }
  .catch-band { padding: var(--sp-8) var(--sp-16); }
  .catch-text { font-size: var(--fs-h2); }
  .fv-spec { background: transparent; color: var(--ink); padding: 0; }
  .fv-cta { width: 100%; height: auto; min-height: var(--btn-h); }

  /* 見学予約フォームまわり */
  .phone-box { padding: var(--sp-24); }
  .phone-box-num { font-size: var(--fs-h3); }

  /* フッターは1カラムに戻して中央揃え。サイトマップはアコーディオンに */
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-info { align-items: center; text-align: center; }
  /* モバイルはアコーディオンの区切り線とサブリンクが接するので、少し空ける */
  .footer-links { width: 100%; align-items: center; text-align: center; gap: var(--sp-16); }
  .footer-nav { display: none; }
  .footer-sub { justify-content: center; }
  .footer-acc { display: flex; }

  /* 画面下端の電話帯（モバイルのみ） */
  .fixed-tel-spacer { display: block; height: var(--tap-min); }
  .fixed-tel-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; gap: var(--sp-8);
    min-height: var(--tap-min);
    background: var(--primary-deep); color: var(--base);
    font-size: var(--fs-body); font-weight: 700; text-decoration: none;
  }
  .fixed-tel-cta:hover, .fixed-tel-cta:focus { background: var(--primary-deep); color: var(--base); }

  /* 狭い画面で本文に重なる装飾だけを落とす */
  .only-desktop { display: none; }
}

/* ===================================================================
   17. 〜768px
   下層ページのヘッダー帯だけの追加調整
   =================================================================== */
@media (max-width: 768px) {
  .page-hero { height: auto; padding: var(--sp-24) 20px 0; }
  .page-hero-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-16); }
  .page-title { font-size: var(--fs-page-h1-sp); }
  .page-hero-art {
    flex: none;
    width: calc(100% + 40px);
    margin: 0 -20px var(--sp-16);
    height: 112px;
  }
}