/* =========================================================
   p-facility.css — 施設紹介ページ固有スタイル
   原稿(facility-full.png) 忠実再現。style.css は触らない。
   配色/フォントは style.css の CSS変数を使用。
   ========================================================= */

/* ---- ページ全体ラッパ ---- */
.fac{
  position:relative;
  padding:0 0 10px;
  overflow:hidden;
}

/* ---- ページ大見出し「施設紹介」(main.js が1文字ずつ出現) ---- */
.page-title{
  text-align:center;
  font-family:var(--font-r);
  color:var(--aqua);
  font-weight:500;
  font-size:25px;
  letter-spacing:.28em;
  margin:30px 0 18px;
  text-indent:.28em; /* letter-spacingの右ズレ補正 */
}

/* =========================================================
   施設紹介イントロ + 桜写真
   ========================================================= */
.fac-intro{padding:8px 24px 4px;text-align:center}
.fac-lead{
  font-family:var(--font-g);
  color:#54514C; /* 設計実測 本文濃色(#5F5C58 相当) */
  font-size:14px;
  line-height:2.0;
  letter-spacing:.06em;
  max-width:420px;
  margin:0 auto 22px;
  text-align:left;
}
.fac-photo{margin:0 auto 8px;border-radius:4px;overflow:hidden}
.fac-photo img{
  width:100%;
  aspect-ratio:1.333/1; /* 設計実測: 1011w×758h = 4:3 */
  object-fit:cover;
  display:block;
  border-radius:4px;
}

/* =========================================================
   セクション共通
   ========================================================= */
.fac-sec{position:relative;padding:30px 24px 6px}
.fac-sec .sec-head{margin:16px 0 0}
/* 養育目標は上部点線との間隔を詰める(先方指摘: 開きすぎ)。SP/PC共通でセクション上余白を縮小 */
.sec-goal{padding-top:6px}
.sec-goal .sub-head{margin-top:0}
/* 点線(.dots)は設計では写真と同幅(約1010px)で中央。section paddingに広がりすぎないよう制御 */
.fac .dots{margin-left:auto;margin-right:auto;max-width:1010px;width:100%}

/* sub-head（左寄せ水色 小見出し: 基本理念/基本方針/養育目標/沿革） */
.sub-head{
  font-family:var(--font-r);
  color:var(--aqua);
  font-weight:500;
  font-size:17px;
  letter-spacing:.12em;
  margin:4px 0 8px;
}

/* 本文ブロックの中央寄せ幅 */
.creed-block{max-width:760px;margin:0 auto;position:relative}

/* =========================================================
   園長のあいさつ
   ========================================================= */
.director{max-width:800px;margin:6px auto 4px;text-align:left}
.director__pic{flex-shrink:0}
.director__pic img{width:130px;border-radius:4px;display:block}
.director__body p{
  font-size:13.5px;
  color:var(--ink); /* 設計実測 本文濃色(#474542 相当) */
  line-height:2.05;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.director__body .greet-open{
  font-family:var(--font-r);
  color:var(--aqua);
  font-weight:500;
  font-size:15px;
  margin-bottom:18px;
}
.director__body .greet-sign{
  text-align:right;
  color:var(--ink);
  font-family:var(--font-r);
  font-size:14px;
  letter-spacing:.1em;
  margin-top:4px;
  margin-bottom:0;
}

/* =========================================================
   理念と方針 / 養育目標
   ========================================================= */
.creed-text{
  font-size:14px;
  color:var(--ink);
  line-height:1.9;
  letter-spacing:.04em;
}
.policy-list{list-style:none;margin:4px 0 0}
.policy-list li{
  font-size:13.5px;
  color:var(--ink);
  line-height:1.95;
  letter-spacing:.03em;
  margin-bottom:14px;
  position:relative;
  padding-left:1.2em;
}
.policy-list li:last-child{margin-bottom:0}
.policy-list li::before{
  content:"○";
  position:absolute;left:0;top:0;
  color:var(--ink);
}
.policy-list .indent{display:inline-block;padding-left:0}   /* 先方指摘: 継続行の行頭を1行目に揃える(二重インデント解消) */

.goal-intro{
  font-size:13.5px;
  color:var(--ink); /* 設計実測 本文濃色 */
  line-height:1.9;
  letter-spacing:.04em;
  margin-bottom:14px;
}
.goal-list{list-style:none;margin:0}
.goal-list li{
  font-size:13.5px;
  color:var(--ink);
  line-height:1.9;
  letter-spacing:.03em;
  margin-bottom:12px;
  position:relative;
  padding-left:1.2em;
}
.goal-list li::before{
  content:"○";
  position:absolute;left:0;top:0;
  color:var(--ink);
}

/* =========================================================
   施設の概要 (spec-table は style.css のクラスを流用)
   設計: 罫線なし・余白区切りのみ
   ========================================================= */
.sec-spec .spec-table{max-width:760px;border-top:none;margin-top:6px}
.sec-spec .spec-row{border-bottom:none}
/* 施設の概要 見出し: 設計は左寄せ・大きめ(沿革と同格)。中央寄せ sec-head ではない。 */
.spec-head{max-width:760px;margin:0 auto 8px;font-size:21px;letter-spacing:.14em;text-align:left}
.link-pill{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--aqua-btn);
  color:#fff;
  font-family:var(--font-r);
  font-weight:500;
  font-size:12px;
  letter-spacing:.06em;
  padding:5px 18px;
  border-radius:30px;
  line-height:1.4;
  transition:transform .35s var(--ease-soft),background .35s;
}
.link-pill:hover{transform:scale(1.03);background:var(--aqua-btn-d)}
.link-pill:active{transform:scale(.97)}

/* =========================================================
   沿革
   ========================================================= */
.hist-head{font-size:21px;letter-spacing:.14em;margin-bottom:10px}
.hist-intro{
  font-size:13.5px;
  color:var(--ink);
  line-height:2.0;
  letter-spacing:.04em;
  margin-bottom:22px;
}
.history{margin:6px 0 0;border-top:none}
.history .spec-row{
  grid-template-columns:130px 1fr;
  border-bottom:none;
  padding:9px 2px;
  align-items:start;
}
.history .spec-row dt{
  color:var(--aqua);
  font-family:var(--font-r);
  font-weight:500;
  font-size:13px;
  letter-spacing:.04em;
}
.history .spec-row dd{
  font-size:13px;
  color:var(--ink);
  line-height:1.7;
}

/* =========================================================
   水彩の木・葉 装飾 (絶対配置・SPは小さめ/一部のみ)
   ========================================================= */
.fac-deco{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.92;
}
.creed-block,.director,.sec-head,.spec-table,.dots{position:relative;z-index:1}

/* SP: 右端/左端に控えめに配置 */
.d-greet-r{width:48px;top:60px;right:10px}
.d-greet-l{display:none}
.d-creed-l{display:none}
.d-policy-r{width:40px;top:-6px;right:8px}
.d-goal-l{display:none}
.d-spec-r{width:54px;top:54px;right:8px}
.d-hist-l{display:none}
.d-hist-r{display:none}

/* =========================================================
   PC レイアウト (原稿 約1000pt 幅 忠実再現)
   ========================================================= */
@media (min-width:860px){
  .fac{padding-bottom:0}
  /* 沿革(最終セクション)末→marquee の間隔。設計実測: 沿革表末(orig~6975)→marquee文字top(orig~7240)
     = gap約167px(logical)。marquee自体の line-box 上余白を差し引いた値を margin-top に設定し、
     白特大文字が沿革「開園80周年」行に重ならないよう確実に分離する */
  .sec-history{padding-bottom:0}
  .sec-history .history{margin-bottom:0}
  body.facility .marquee{margin-top:166px;margin-bottom:40px}

  /* ---- ページ大見出し (設計実測: 字高 orig52px@2202幅 ÷1.586DPR ≒33px logical → font-size 36px相当) ---- */
  .page-title{
    font-size:33px;
    font-weight:500;
    letter-spacing:.29em;
    margin:150px 0 32px;
  }

  /* ---- イントロ + 桜写真 (設計: lead=左寄せ中央列 幅~520 / 写真=4:3 幅1010) ---- */
  .fac-intro{padding:6px 60px 10px}
  .fac-lead{
    font-size:15px;
    line-height:2.1;
    letter-spacing:.06em;
    max-width:520px;
    margin:0 auto 36px;
    text-align:left;
  }
  .fac-photo{max-width:1010px;margin:0 auto;border-radius:6px}
  .fac-photo img{aspect-ratio:1.333/1;border-radius:6px}

  /* ---- セクション (設計の縦リズム: 計測ベースで節ごとに padding-top 指定) ---- */
  .fac-sec{padding:96px 60px 0}
  /* 中央寄せ大見出し(園長のあいさつ/理念と方針): 設計実測 字幅276(6文字)に合わせ 37px へ拡大
     style.css の 30px では細く小さい(先方指摘) ため facility 限定で上書き */
  .fac-sec .sec-head{margin:0;font-size:37px;letter-spacing:.12em;font-weight:500}
  /* 小見出し(基本理念/基本方針/養育目標): 設計実測 字幅117(4文字) に合わせ 27px へ拡大
     拡大分の縦伸びを margin 縮小で相殺し縦リズムを維持 */
  .sub-head{font-size:27px;letter-spacing:.12em;margin:4px 0 10px}
  /* 設計: 本文列は写真フレーム(1010)より内側 790px・左端 x~300 */
  .creed-block{max-width:790px}
  /* 点線: 設計実測 x201-1182(幅~981)中央 */
  .fac .dots{max-width:981px;margin-top:30px;margin-bottom:30px}

  /* ---- 園長のあいさつ (設計実測: title→園長head gap=1319(logical) に合わせ padding-top 拡大) ---- */
  .sec-greeting{padding-top:333px}
  .sec-greeting .dots{margin-top:24px;margin-bottom:34px}
  /* 設計: 左に園長写真(x202-377 幅175)・右に本文(x381-1166)。写真は非表示だが本文の幾何を維持
     フレーム1010px中央(左端190) → padding-left191で本文左381 / padding-right33で本文右1167 */
  .director{max-width:1010px;margin:0 auto 6px;padding-left:191px;padding-right:33px;box-sizing:border-box}
  .director__body p{font-size:15px;line-height:2.45;letter-spacing:.05em;margin-bottom:22px}
  .director__body .greet-open{font-size:17px;margin-bottom:26px}
  .director__body .greet-sign{font-size:16px;margin-top:22px;margin-right:0}

  /* ---- 理念と方針 (設計実測: head 2296 / greeting末~2200 → gap ~96) ---- */
  /* 設計内訳: 理念head 2296 → dots 2373 → 基本理念 2441 → dots 2548 → 基本方針 2600 → list → dots 2828 */
  .sec-creed{padding-top:96px}
  .sec-creed .dots{margin-top:33px;margin-bottom:33px}
  .sec-creed .sub-head{margin:0 0 14px}
  .sec-creed .creed-block{margin-bottom:0}
  .creed-text{font-size:16px;line-height:2.0}
  .policy-list li{font-size:15px;line-height:2.3;margin-bottom:22px}

  /* ---- 養育目標 (先方指摘2回目: 上部点線との間が広すぎ → 他の点線リズムに合わせ大幅縮小) ---- */
  .sec-goal{padding-top:6px}
  .sec-goal .sub-head{margin-top:0}
  .goal-intro{font-size:15px;margin-bottom:14px;line-height:1.95}
  .goal-list li{font-size:15px;line-height:2.0;margin-bottom:12px}

  /* ---- 施設の概要 (設計: 先頭に点線→左寄せ大見出し→表(罫線なし)) ---- */
  /* 設計実測: 養育目標→施設概要head gap=324(logical)。padding-top を縮小し設計の縦リズムに一致 */
  .sec-spec{padding-top:30px}
  /* 概要head→事業主体(設計実測 約59px)。head 直後の余白は控えめに */
  .spec-head{max-width:790px;font-size:30px;letter-spacing:.16em;margin:40px auto 12px}
  .sec-spec .spec-table{max-width:790px;margin:0 auto}
  /* 先頭点線(養育→概要の区切り): 設計どおり / 末尾点線(概要→沿革)は gap~99 に合わせ控えめ */
  .sec-spec .dots:first-of-type{margin-top:30px;margin-bottom:30px}
  /* 第三者評価→沿革head 設計実測139px。末尾点線+沿革padding で確保 */
  .sec-spec .dots:last-of-type{margin-top:30px;margin-bottom:28px}
  /* 設計実測: dt左x300 / dd左x422 → 第1列幅~122 / 行ピッチ~50 */
  .sec-spec .spec-row{grid-template-columns:122px 1fr;padding:11px 0}
  .sec-spec .spec-row dt{color:var(--aqua);font-size:15px;letter-spacing:.08em}
  .sec-spec .spec-row dd{font-size:15px}
  .link-pill{font-size:14px;padding:7px 26px}

  /* ---- 沿革 (設計実測: 施設表末~3811 → 点線3872 → head 3928 / 第三者評価→沿革 gap~85) ---- */
  .sec-history{padding-top:8px}
  .sec-history .creed-block{margin-top:0}
  .hist-head{font-size:30px;letter-spacing:.16em;margin-bottom:14px}
  .hist-intro{font-size:15px;line-height:2.3;margin-bottom:14px;max-width:790px}
  .history{max-width:790px}
  .history .spec-row{grid-template-columns:237px 1fr;padding:10px 0}
  .history .spec-row dt{font-size:15px}
  .history .spec-row dd{font-size:15px;line-height:1.95}

  /* ---- 装飾: 設計実測の各葉の位置/サイズ (各 top はその section の枠上端基準) ---- */
  /* sec-greeting(sectop~1288): greeting本文の右に淡桃青の木 (設計 y~1739) */
  .d-greet-r{width:min(122px, calc(50% - 525px));top:421px;right:max(8px, calc(50% - 639px));animation:floaty 7s ease-in-out infinite}
  .d-greet-l{display:none}
  /* sec-creed(sectop~2170): 左に緑の木(設計 y~2180) / 基本方針の右に木(設計 y~2661) */
  .d-creed-l{display:block;width:min(100px, calc(50% - 525px));top:-30px;left:max(8px, calc(50% - 617px));animation:floaty 6.5s ease-in-out .6s infinite}
  .d-policy-r{display:block;width:min(92px, calc(50% - 525px));top:451px;right:max(8px, calc(50% - 609px));animation:floaty 7.2s ease-in-out .3s infinite}
  /* sec-goal(sectop~2878): 養育目標の左に緑の木(設計 y~3221) */
  .d-goal-l{display:block;width:min(95px, calc(50% - 525px));top:299px;left:max(8px, calc(50% - 612px));animation:floaty 6.8s ease-in-out .7s infinite}
  /* sec-spec(sectop~3349): 概要の右に淡桃の木(設計 y~3480) */
  .d-spec-r{width:min(75px, calc(50% - 525px));top:101px;right:max(8px, calc(50% - 592px));animation:floaty 7s ease-in-out infinite}
  /* sec-history(sectop~3967): 沿革の左に青の木(設計 y~3998) / 右に緑の木(設計 y~4277) */
  .d-hist-l{display:block;width:min(90px, calc(50% - 525px));top:-9px;left:max(8px, calc(50% - 607px));animation:floaty 6.6s ease-in-out .4s infinite}
  .d-hist-r{display:block;width:min(112px, calc(50% - 525px));top:263px;right:max(8px, calc(50% - 629px));animation:floaty 7s ease-in-out .2s infinite}
}

/* 中幅では width:min(maxW, calc(50% - 525px)) が左右余白に応じて装飾木を
   自動縮小し、画面内に収めつつ本文に被らせない(2026-06-26 先方指摘で非表示→縮小に変更)。
   余白が尽きると width が 0 に収束し自然に消える。SP(<860)は従来どおり個別制御。 */

/* 超ワイド: コンテンツ幅を伸ばしすぎない */
@media (min-width:1500px){
  .fac-sec{padding-left:0;padding-right:0}
  .fac-sec .sec-head,.fac-intro,.creed-block,.director,.spec-table,.dots,.history{margin-left:auto;margin-right:auto}
}

/* =========================================================
   SP専用(<860px): 点線に被る装飾木を非表示(先方指摘 2026-06-25)
   ========================================================= */
@media (max-width:859px){
  .d-greet-r,   /* 園長のあいさつ 右の木 */
  .d-spec-r{    /* 施設の概要 右の木 */
    display:none;
  }
}