/* style.css — 十日町福祉会 トップページモックアップ (DESIGN.md 準拠) */

/* ===== 1. トークン (DESIGN.md §2) ===== */
:root {
  /* §2.1 共通色 */
  --c-green: #006937;
  --c-green-dark: #04582F;
  --c-green-btn: #005830;
  --c-green-deep: #004825;
  --c-brown: #8C6239;
  --c-red: #F22C24;
  --c-red-imp: #F15A24;
  --c-pink: #EC739C;
  --c-red-sun: #EC2027;
  --c-blue-sat: #0064D9;
  --c-blue-cal: #3F64F5;
  --c-blue-spcard: #62B0E3;
  --c-chip-info: #567F5B;
  --c-cream: #F8F6E1;
  --c-cal-bg: #E7F4EC;
  --c-cal-head: #F2F9F4;
  --c-pill: #D6E4D2;
  --c-label-bg: #D7DED8;
  --c-mt-light: #94A08B;
  --c-mt-mid: #557356;
  --c-sp-line: #285837;
  --c-sp-calhead: #DEF0E3;
  --c-ink: #140700;
  --c-text: #000000;
  --c-border-gray: #ABABAB;
  --c-placeholder: #E6E6E6;
  --c-petal-blue: #00B4ED;
  --c-petal-pink: #EA609E;
  --c-petal-green: #6FBA2C;
  --c-petal-yellow: #FABE00;

  /* §2.3 タイポグラフィ */
  --font-base: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
               "HG丸ｺﾞｼｯｸM-PRO", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Bahnschrift", "Arial Narrow", "Avenir Next Condensed", var(--font-base);

  --fs-tile: 2.125rem;       /* 34px */
  --fs-tile-sub: 1.125rem;   /* 18px */
  --fs-h2: 1.3125rem;        /* 21px */
  --fs-body: 0.875rem;       /* 14px */
  --fs-small: 0.75rem;       /* 12px */
  --fs-chip: 0.6875rem;      /* 11px */
  --fs-date: 0.875rem;       /* 14px */
  --fs-cal-date: 1.375rem;   /* 22px */
  --fs-cal-title: 1.25rem;   /* 20px */
  --fs-hdr-label: 1.0625rem; /* 17px */
  --fs-hdr-tel: 3.1875rem;   /* 51px */
  --fs-hdr-btn: 1rem;        /* 16px */
  --fs-banner-t: 1.6875rem;  /* 27px */
  --fs-contact-h: 1.25rem;   /* 20px */
  --fs-contact-tel: 3.8125rem; /* 61px */
  --fs-tag: 0.8125rem;       /* 13px */
  --fs-card-label: 1rem;     /* 16px */
  --fs-fax: 1.125rem;        /* 18px */
  --fs-utility: 0.875rem;    /* 14px */
  --fs-foot-h: 1.3125rem;    /* 21px */
  --fs-foot-link: 0.875rem;  /* 14px */
  --fs-foot-small: 0.75rem;  /* 12px */
  --fs-btn-list: 0.875rem;   /* 14px */

  /* §2.4 余白・寸法 */
  /* 🔴 ⑤レビュー修正: box-sizing:border-box + padding-inline:24px なので
     1200px だと**中身が 1152px** になり、9タイル 376px (原本 392) / パネル 566px (原本 590) と
     全ブロックが 48px 細くなっていた (実測)。原本の内容領域 x=120–1320 = 1200 を出すため 1248 にする。 */
  /* 🔴 L6: 内容 1296 + padding-inline 24×2 = 1344。第2階層 (--l2-container:1296) と内容領域を統一
     (BRIEF-L6 §2。社長裁定「トップを広げる」)。1296 の根拠は L2 確定PDF実測 x=72–1368 (DESIGN-L2 §0)。
     box-sizing:border-box なので padding 48px を足す (第1便 REVIEW-IMPL §重大1 の再発防止)。 */
  --container: 1344px;
  --sp-pad: 18px;
  --gap: 12px;
  --radius-tile: 12px;
  --radius-panel: 8px;
  --radius-btn: 6px;
}

/* SP 専用トークン (フォントサイズ = PDF÷3、DESIGN §2.3) */
@media (max-width: 767px) {
  :root {
    --fs-tile: 0.919rem;        /* 14.7px */
    --fs-tile-sub: 0.5625rem;   /* 9px */
    --fs-h2: 0.919rem;          /* 14.7px */
    --fs-body: 0.75rem;         /* 12px */
    --fs-small: 0.52rem;        /* 8.3px */
    --fs-chip: 0.65rem;         /* 10.4px */
    --fs-date: 0.72rem;         /* 11.5px */
    --fs-cal-date: 0.8125rem;   /* 13px */
    --fs-cal-title: 0.75rem;    /* 12px */
    --fs-hdr-label: 0.625rem;   /* 10px */
    --fs-hdr-tel: 2.269rem;     /* 36.3px */
    --fs-hdr-btn: 0.875rem;     /* 14px */
    --fs-banner-t: 0.919rem;    /* 14.7px */
    --fs-contact-h: 0.919rem;   /* 14.7px */
    --fs-contact-tel: 1.4rem;   /* 22.4px */
    --fs-tag: 0.5rem;           /* 8px */
    --fs-card-label: 0.75rem;   /* 12px */
    --fs-fax: 1.0625rem;        /* 17px */
    --fs-foot-link: 0.669rem;   /* 10.7px */
    --fs-foot-small: 0.75rem;   /* 12px */
    --fs-btn-list: 0.75rem;     /* 12px */
  }
}

/* ===== 2. リセット・ベース ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--c-text);
  font-weight: 400;
  line-height: 1.5;
  background: #fff;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
svg { display: block; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  background: var(--c-green);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  left: 8px;
  top: 8px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}

/* ===== 3. ユーティリティバー (§5.1, PCのみ) ===== */
.utility {
  background: #fff;
  /* 原本はドット (ref/design-A-1.png y=79 を画素走査: 点ピッチ≈5px)。dashed だと破線になり別物 */
  border-bottom: 1px dotted var(--c-green-dark);
}
.utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 80px;
  flex-wrap: wrap;
  padding-block: 8px;
}
.utility__label {
  font-size: var(--fs-utility);
  color: var(--c-ink);
  /* 原本のグループ区切りは点線 (ref x=315 の縦走査: dark y=[24,29,38,43,52,57] = ドット) */
  border-left: 1px dotted var(--c-ink);
  padding-left: 14px;
  height: 40px;
  display: flex;
  align-items: center;
}
.seg {
  display: flex;
}
.seg button {
  height: 40px;
  min-width: 60px;
  padding-inline: 10px;
  border: 1px solid var(--c-ink);
  border-left: none;
  background: #fff;
  color: var(--c-ink);
  font-size: var(--fs-utility);
}
.seg button:first-child { border-left: 1px solid var(--c-ink); }
.seg[data-a11y="theme"] button[data-value="contrast"] { min-width: 120px; }
.seg[data-a11y="ruby"] button { min-width: 45px; }
/* L10: デザイナー要望により3機能 (文字サイズ・配色・ふりがな) とも選択中を着色に変更
   (原本忠実だった旧判断は L10 依頼①で発注側から更新された)。
   ドロワーは当初から3機能着色でありPC側をそれに揃えた (旧 .drawer__seg 個別ルールは削除)。 */
.seg button[aria-pressed="true"] {
  background: #558D60;
  color: #fff;
  border-color: var(--c-green-dark);
  font-weight: 700;
}
/* 配色状態別のアクティブ色は a11y.css (§4.1) */
.utility__link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-utility);
  color: var(--c-ink);
  height: 40px;
}
.utility__link svg { width: 20px; height: 20px; color: var(--c-ink); }

/* ===== 4. ヘッダー (§5.2) ===== */
.site-header {
  border-bottom: 1px solid #eee;
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 130px;
  padding-block: 12px;
}
.site-header__logo {
  grid-column: 1;
  grid-row: 1;
  width: 343px;
  height: auto;
}
.contact-block {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  text-align: center;
}
.contact-block__circle { display: none; }
.contact-block__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--fs-hdr-label);
  color: var(--c-text);
  line-height: 1.2;
  min-width: 0;
}
.contact-block__label svg { width: 22px; height: 23px; color: var(--c-text); flex: none; }
.contact-block__label-text, .contact-block__tel-text { min-width: 0; }
.contact-block__tel {
  font-family: var(--font-num);
  font-size: var(--fs-hdr-tel);
  color: var(--c-text);
  line-height: 1.2;
  white-space: nowrap;
  min-width: 0;
}
.contact-block__hours {
  font-size: var(--fs-hdr-label);
  color: var(--c-text);
  line-height: 1.2;
}
.hdr-buttons {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 13px;
}
.hdr-btn {
  width: 122px;
  min-height: 106px;
  border-radius: var(--radius-tile);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: var(--fs-hdr-btn);
  line-height: 1.3;
  padding: 8px;
}
.hdr-btn svg { width: 34px; height: 34px; color: #fff; }
.hdr-btn--mail { background: var(--c-green-btn); }
.hdr-btn--access { background: var(--c-brown); }
/* TEXT-0928 (S2 MAJOR-1): 文字サイズ「大」では「お問い合わせ」が 122px に収まらず「お問い合わ／せ」の3行に割れる
   （メールボタンは以前から同じ）。「大」のときだけ幅を文字に合わせて広げ、2行に保つ。中・小は 122px のまま。 */
html[data-fontsize="l"] .hdr-btn { width: auto; min-width: 122px; }

/* ハンバーガー (SPのみ表示) */
.hamburger {
  display: none;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  border: 1px solid #898989;
  background: #fff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
}
.hamburger span {
  display: block;
  width: 19px;
  height: 2.7px;
  background: #898989;
}

/* ===== 5. 9タイルナビ (§5.3) ===== */
.tile-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-top: 24px;
}
.nav-tile {
  display: flex;
  align-items: center;
  min-height: 140px;
  border-radius: var(--radius-tile);
  background: var(--t-main);
  color: #fff;
  border: 1px solid transparent;
  padding-inline: 30px 17px;
  transition: filter .15s;
}
.nav-tile:hover { filter: brightness(1.06); }
.nav-tile__icon {
  width: 84px;
  height: 84px;
  flex: none;
  /* color を指定しない: .nav-tile の color (標準/高コントラスト=#fff, 反転=--t-dark) を継承して
     currentColor のアイコンが追従する (DESIGN §4.1)。#fff を書くと反転でアイコンが白のまま消える */
}
.nav-tile__icon svg { width: 100%; height: 100%; }
.nav-tile__text {
  flex: 1;
  /* 右側は矢印までの余白。⑤レビュー修正: 16px だと旧文言「利用の流れ・料金・申込み」(18px×12字=216px) が
     211px に収まらず 2 行に折り返した。原本 (新丸ゴ) は「・」が半角幅で 197px に収まっている。
     文字の開始 x (=原本 255) は変えず、矢印側の余白だけ詰めて確保する。
     L14 ADD-59: 文言が「サービス一覧・ご利用の流れ」(13字×18px=234px) と「施設一覧・条件から探す」(11字 198px) に変わった。
     .container 1344px 以上のタイル 424px で文字の箱は約 251px なので1行に収まる (実測は VERDICT-S3-ADD59.txt)。 */
  padding-inline: 16px 8px;
  min-width: 0;
}
.nav-tile__label {
  display: block;
  font-size: var(--fs-tile);
  line-height: 1.1;
  font-weight: 700;
}
.nav-tile__sub {
  display: block;
  font-size: var(--fs-tile-sub);
  line-height: 1.3;
  margin-top: 4px;
}
.nav-tile__arrow {
  width: 16px;
  height: 25px;
  flex: none;
  /* color は .nav-tile から継承 (反転時に --t-dark へ追従。§4.1) */
}
.nav-tile__arrow svg { width: 100%; height: 100%; }

/* 配色状態別 (--t-dark/--t-pale切替・反転時の花弁ブランドカラー) は a11y.css (§4.1) */

/* タイル9色 (DESIGN §2.2) */
.nav-tile--houjin   { --t-main:#74AB5F; --t-dark:#506331; --t-pale:#F1F8DD; }
.nav-tile--shisetsu { --t-main:#558D61; --t-dark:#04582F; --t-pale:#F1F8E9; }
.nav-tile--riyou    { --t-main:#659ED6; --t-dark:#014A9F; --t-pale:#ECF4FC; }
.nav-tile--saiyou   { --t-main:#24548C; --t-dark:#003084; --t-pale:#F3F5F9; }
.nav-tile--faq      { --t-main:#7B71BE; --t-dark:#43108E; --t-pale:#F6F4F5; }
.nav-tile--kokai    { --t-main:#626262; --t-dark:#373B3D; --t-pale:#F2F2F2; }
.nav-tile--event    { --t-main:#E39901; --t-dark:#F27F02; --t-pale:#FFECE1; }
.nav-tile--fureai   { --t-main:#EA637A; --t-dark:#D74962; --t-pale:#FEEFF0; }
.nav-tile--chiiki   { --t-main:#009A9C; --t-dark:#168377; --t-pale:#EBF3EF; }

/* ===== 6. 重要なお知らせ / イベントカレンダー (§5.4, §5.5) ===== */
.news-cal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.panel {
  border-radius: var(--radius-panel);
  min-height: 348px;
  overflow: hidden;
}
.panel--news { background: var(--c-cream); border: 1px solid var(--c-green); }
.panel--cal  { background: var(--c-cal-bg); border: 1px solid var(--c-green); } /* L10: ピンク→グリーン統一 (--c-pink 変数自体は .chip--important 巻き添え回避のため不変) */

.panel__header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding-inline: 19px;
  /* 原本の行区切りは全て #006937 の実線 (行矩形のサンド構造。pdfminer で確認、破線オブジェクトは無い) */
  border-bottom: 1px solid var(--c-green);
}
.panel--cal .panel__header { background: var(--c-cal-head); }
.panel__header svg { width: 42px; height: 42px; flex: none; }
.panel--news .panel__header svg { width: 46px; height: 35px; color: var(--c-green); }
.panel__header h2 {
  margin: 0;
  font-size: var(--fs-h2);
  color: var(--c-text);
  flex: 1;
}

.btn-list {
  /* 原本は「一覧を見る」の文字のみで矢印なし (ref y=720-770 を拡大目視で確認)。88×36 */
  min-width: 88px;
  min-height: 36px;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-btn);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  font-size: var(--fs-btn-list);
  color: var(--c-green);
  flex: none;
  white-space: nowrap;
}

/* 区切り線が原本どおりパネル全幅に届くよう、余白はリストではなく行側に持たせる */
.news-list, .cal-list { padding-inline: 0; }
.news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 53.6px;
  padding-block: 10px;
  padding-inline: 19px;
  border-bottom: 1px solid var(--c-green);
}
.news-item:last-child { border-bottom: none; }
.news-item time {
  font-family: var(--font-num);
  font-size: var(--fs-date);
  flex: none;
  width: 90px;
}
.chip {
  min-width: 54px;
  min-height: 22px;
  border-radius: 4px;
  font-size: var(--fs-chip);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 4px;
  flex: none;
  text-align: center;
}
.chip--important { background: var(--c-red-imp); border: 1px solid var(--c-pink); }
.chip--info { background: var(--c-chip-info); }
.news-item__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* admin 第2便 2-E3（DESIGN-ADMIN-2E3.md §2-4）: 発信元ラベル。タイトルの右。 */
.news-item__src {
  flex: none; max-width: 10em; font-size: var(--fs-small); line-height: 1.5; color: var(--c-green);
  border: 1px solid var(--c-green); border-radius: 3px; padding: 0 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.news-item__src--honbu { color: #fff; background: var(--c-green); }
.news-item svg.arrow, .cal-item svg.arrow { width: 8px; height: 13px; flex: none; color: var(--c-text); }

.cal-item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 90px;
  padding-block: 10px;
  padding-inline: 19px;
  /* 原本の行は bg #F2F9F4 の矩形 + #006937 実線ストローク (pdfminer 実測。dashed #ACC5B0 は
     アンチエイリアスされたヘアラインを画素サンプルした誤記だった) */
  background: var(--c-cal-head);
  border-bottom: 1px solid var(--c-green);
}
.cal-item:last-child { border-bottom: none; }
/* 🔴 ⑤レビュー修正: 原本は「7/21（火）」が**1行** (textmap L51 y=818 に日付+タイトルが同一行、
   施設名だけ次行 y=849)。`.d`/`.w` を block にすると日付が 2 行に割れて原本と別物になる。 */
.cal-item__date {
  flex: none;
  width: 106px;   /* 原本: 日付 x=752 → タイトル x=858 = 106px の列 */
  text-align: center;
  white-space: nowrap;
}
.cal-item__date .d { font-family: var(--font-num); font-size: var(--fs-cal-date); line-height: 1.1; }
.cal-item__date .w { font-size: var(--fs-date); }
.cal-item--sun .d, .cal-item--sun .w { color: var(--c-red-sun); }
.cal-item--sat .d, .cal-item--sat .w { color: var(--c-blue-sat); }
.cal-item__body { flex: 1; min-width: 0; }
/* 🔴 ⑤レビュー修正: span のままだとインラインで連結し「タイトル 施設名」が同じ行に流れていた */
.cal-item__title { display: block; font-size: var(--fs-cal-title); color: var(--c-text); }
.cal-item__place { display: block; font-size: var(--fs-small); color: var(--c-text); margin-top: 2px; }
/* admin 第2便 2-E3（DESIGN-ADMIN-2E3.md §2-4）: 本部のイベントだけ会場欄に「法人本部」。 */
.cal-item__place--honbu { color: var(--c-green); }
.cal-item svg.arrow { width: 12px; height: 19px; }

/* ===== 7. 3バナー (§5.6) ===== */
.banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 40px;
}
.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 140px;
  background: #fff;
  border: 1px solid var(--c-border-gray);
  border-radius: 10px;
  padding-inline: 20px;
}
.banner__icon { width: 65px; flex: none; }
.banner__icon svg { width: 100%; height: auto; }
.banner__body { flex: 1; min-width: 0; }
/* 🔴 ⑤レビュー修正: span のままだと説明文が見出しと同じ行に流れていた
   (原本 textmap L69 y=1133 見出し / L72 y=1177 説明文 = 別行) */
.banner__title {
  display: block;
  font-size: var(--fs-banner-t);
  margin: 0 0 6px;
}
.banner--intro .banner__title { color: var(--c-green); }
.banner--family .banner__title,
.banner--biz .banner__title { color: var(--c-text); }
.banner__desc { display: block; font-size: var(--fs-small); color: var(--c-text); line-height: 1.4; }
.banner svg.arrow { width: 16px; height: 25px; flex: none; color: var(--c-text); }

.only-sp { display: none; }
@media (max-width: 767px) {
  .only-pc { display: none; }
  .only-sp { display: inline; }
}

/* ===== 8. 問い合わせブロック (§5.7) ===== */
.contact {
  display: flex;
  min-height: 204px;
  background: #fff;
  border: 5px solid var(--c-green);
  border-radius: var(--radius-tile);
  margin-top: 23px;
  overflow: hidden;
}
.contact__left, .contact__right {
  flex: 1 1 0;
  padding: 16px 20px;
  min-width: 0;
}
.contact__right { flex-grow: 1.15; }
.contact__left { border-right: 1px solid var(--c-green); }
.contact__heading {
  font-size: var(--fs-contact-h);
  color: var(--c-green);
  margin: 0 0 8px;
}
.contact__tel-row { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.contact__circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.contact__circle svg { width: 34px; height: 43px; color: #fff; }
.contact__tel {
  font-family: var(--font-num);
  font-size: var(--fs-contact-tel);
  color: var(--c-green);
  white-space: nowrap;
  line-height: 1.1;
}
.contact__hours { font-size: var(--fs-hdr-label); color: var(--c-text); margin-bottom: 8px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  min-height: 28px;
  padding-inline: 12px;
  border-radius: 16px;
  background: var(--c-pill);
  border: 1px solid var(--c-green);
  color: var(--c-green);
  font-size: var(--fs-tag);
  display: flex;
  align-items: center;
}
.contact__note { font-size: var(--fs-small); color: var(--c-text); line-height: 1.4; margin-bottom: 10px; }
.contact-cards { display: flex; gap: 2px; margin-top: 16px; flex-wrap: wrap; }
/* 原本のカード: 大アイコン (実測 40〜48px) が左、右に2行テキスト。ブロック全体が
   カード内で上下左右センター。2行目はアイコンではなく1行目の文字の下に揃う。
   → grid 1列 (幅=最長行) を中央配置し、2行目に アイコン幅+gap のインデントを付ける */
.contact-card {
  width: 182px;
  min-height: 107px;
  background: #fff;
  border: 1px solid var(--c-green);
  border-radius: var(--radius-panel);
  padding: 10px;
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-content: center;
  row-gap: 4px;
}
.contact-card__row1 { display: flex; align-items: center; gap: 10px; }
.contact-card__row1 svg { width: 44px; height: 38px; color: var(--c-green); flex: none; }
.contact-card__label { font-size: var(--fs-card-label); color: var(--c-green); }
.contact-card__label small { font-size: var(--fs-small); color: var(--c-text); }
.contact-card__sub { font-size: var(--fs-small); color: var(--c-text); padding-left: 54px; }
.contact-card__fax { font-family: var(--font-num); font-size: var(--fs-fax); color: var(--c-text); padding-left: 54px; }

/* 🔴 第7便 ⑤実装レビュー (REVIEW-IMPL-L7 §3-2 F-1): PC で文字サイズ「大」にすると
   お問い合わせカード (FAX 025-761-7341 / 窓口のご案内) の中身が 182px 固定枠を
   +4px / +7px はみ出し、緑の枠線を文字が跨いでいた (第6便以前からの既存事象。
   ④の検査は .contact-card を root として測っていなかったため検出できていなかった)。
   DESIGN-L7 §3-2 C-1 (.l2-header__tel) と同じ方針=「読めることを固定幅より優先」を適用し、
   **文字サイズ「大」のときだけ** 枠を内容幅に追従させる。
   標準・中は 182px 固定のまま完全に不変 (実測でカード幅 182/182/182・1行を確認済み)。
   横パディングを 10px→6px にするのは 1280px で3枚が1行に収まりきるようにするため。 */
@media (min-width: 768px) {
  html[data-fontsize="l"] .contact-card { width: auto; min-width: 182px; padding: 10px 6px; }
  /* L14 ADD-62 B（2026-09-29 社長）: 「FAXで送る」削除で 2 枚になったカード（メール／窓口）を行で等分する（Q-1 既定）。
     中身は既存の grid 中央寄せのまま。SP（≤767px の縦積み・枠なし）は対象外。 */
  .contact-cards .contact-card { flex: 1 1 0; width: auto; min-width: 182px; }
}

/* ===== 9. よくご利用いただくリンク (§5.8) ===== */
.quick-links {
  display: flex;
  align-items: center;
  min-height: 50px;
  background: #fff;
  border: 1px solid #B7CCBD;
  border-radius: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.quick-links__label {
  /* 原本のラベル欄は 210px (x=120–330, 文字 x=133–312=179px)。
     🔴 ⑤レビュー修正: 代替フォントでは同じ12文字が 193px あり 2 行に折り返していた。
     見出しが折り返す方が原本との差が大きいので、欄幅を内容に合わせて伸ばす (nowrap)。 */
  min-width: 210px;
  white-space: nowrap;
  min-height: 50px;
  background: var(--c-label-bg);
  border-right: 1px solid #8FAE95;
  display: flex;
  align-items: center;
  padding-inline: 16px;
  font-size: var(--fs-hdr-btn);
  color: var(--c-text);
  flex: none;
}
.quick-links__list {
  /* 原本は5等分カラムで、文字は左寄せ・矢印は各カラム右端 (ref の矢印 x が約197px 等間隔)。
     文字直後に矢印を置くと代替フォントの字幅差がそのまま矢印位置のばらつきになる */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex: 1;
}
.quick-links__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* 代替フォント (全角括弧) で最長リンク14字が 198px 列に収まる余白。原本の字下げ15px より
     詰まるが、折り返す方が原本との差が大きい */
  padding-inline: 8px 4px;
  font-size: var(--fs-small);
  color: var(--c-text);
}
.quick-links__list svg { width: 8px; height: 13px; color: var(--c-text); }

/* ===== 10. フッター (§5.9〜5.11) ===== */
.mountains {
  background-image: url('../assets/icons/wave-footer-pc.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  background-color: var(--c-green-dark);
  min-height: 160px;
  margin-top: 44px;
}
.site-footer {
  background: var(--c-green-dark);
  color: #fff;
}
.footer-top {
  display: grid;
  /* 白縦罫の実測 x=397/595/792/990 (ref を画素走査) に合わせた列組み。
     罫線は各列の border-left。container 起点で 277/198/197/198/残り */
  grid-template-columns: 277px 198px 197px 198px 1fr;
  gap: 0;
  padding-block: 18px 102px;
}
.footer-logo { width: 280px; height: auto; margin-left: -2px; }   /* 原本 x=118 (container-2px) */
.footer-address { font-size: var(--fs-foot-small); margin-top: 12px; }
.footer-rule { border: none; border-top: 1px dashed #fff; width: 251px; margin: 12px 0; }
.footer-philosophy { font-size: var(--fs-foot-small); line-height: 1.5; }
.footer-philosophy p { margin: 0; }
.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 254px;
  min-height: 50px;
  border: 1px solid #fff;
  border-radius: var(--radius-panel);
  color: #fff;
  font-size: 18px;
  margin-top: 14px;
}
.footer-btn svg { width: 8px; height: 13px; color: #fff; }

.footer-nav {
  border-left: 1px solid #fff;   /* 原本の列間白縦罫 (x=397/595/792/990) */
  padding-left: 36px;            /* 罫 → 見出し文字 34〜38px (実測) */
}
.footer-nav h3 {
  font-size: var(--fs-foot-h);
  margin: 0 0 12px;
  font-weight: 700;
}
.footer-nav ul { display: flex; flex-direction: column; }
.footer-nav li { min-height: 33px; display: flex; align-items: center; }
.footer-nav a { display: flex; align-items: center; gap: 8px; font-size: var(--fs-foot-link); }
/* 🔴 原本はリンクの**矢印が文字の左** (ref: 各リンク先頭に白矢印。右ではない) */
.footer-nav svg { width: 8px; height: 13px; color: #fff; flex: none; order: -1; }

.footer-side { display: flex; flex-direction: column; gap: 16px; border-left: 1px solid #fff; padding-left: 46px; }
/* 🔴 L6 §1-3: トップ原本 (1200) も L2 確定PDF (1296) も「SNSカード右端 = コンテナ右端」。
   実装は padding-left:46px の左詰め固定で、1200 時代はたまたま右端が揃っていただけ。
   1296 化で 96px 右が空くため、右端揃えを明示する (適用は --container がフルに効く 1344px 以上のみ)。
   REVIEW-DESIGN-L6 D-3: © と固定「ページの先頭へ」円の交差は margin-right の帳尻合わせ (案A) では
   1440px でも新規に41px の重なりが生じることを④が実測で確認したため、案B (予約幅) を採用した。 */
@media (min-width: 1344px) {
  .footer-side { align-items: flex-end; }
  /* 案B: fixed 円 (right:24 + w:89 → 右端から vw-113px) の予約幅。コンテナ右端は (vw+1344)/2 − 予約
     (vw>=1344 で centering。padding-right が .container の 24px を上書きする)。
     交差ゼロの条件: (vw+1344)/2 − 予約 ≦ vw−113 ⇔ 予約 ≧ 785 − vw/2。
     vw が広がるほど必要量が減る一次式なので、`vw/2 = 50vw` の CSS 式でそのまま追従させ、
     4px の安全マージンを足す (789px − 50vw)。vw≈1578 以降は 0 (予約不要) にクランプする
     (④実測で 1344/1400/1440/1920 の4幅とも交差 0 を確認 — DONE-S3-L6 参照)。 */
  .footer-bottom-bar__inner { padding-right: max(0px, calc(789px - 50vw)); }
}
.sns-card {
  width: 284px;
  min-height: 130px;
  background: #fff;
  border-radius: var(--radius-panel);
  padding: 16px;
  color: #000;
}
.sns-card p { font-size: var(--fs-card-label); color: #000; margin-bottom: 12px; }
.sns-card__icons { display: flex; gap: 19px; }
.sns-card__icons img { width: 46px; height: 46px; }
.opinion-card {
  width: 284px;
  min-height: 80px;
  border: 1px solid #fff;
  border-radius: var(--radius-panel);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  /* 🔴 ⑤レビュー修正: 原本は「文字が左・鉛筆が右」。実装は逆だった (DOM 順を入れ替え済み) */
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-card-label);
  color: #fff;
}
.opinion-card svg { width: 35px; height: 35px; color: #fff; flex: none; }

.footer-rule-full { border: none; border-top: 1px dashed #fff; margin: 0; }

/* アコーディオン: PC は常時展開・見出し扱い */
.foot-acc__head {
  display: none;
}
@media (min-width: 768px) {
  .foot-acc__list { display: block !important; }
}

/* 外部リンクバナー (§5.10) */
.ext-banners {
  background: var(--c-green-dark);
  padding-block: 24px;
}
.ext-banners__list {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ext-banner {
  width: 230px;
  min-height: 80px;
  background: var(--c-placeholder);
  border-radius: var(--radius-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  color: var(--c-green-dark);
  text-align: center;
}

/* 最下部 (§5.11) */
.footer-bottom-wave {
  background-image: url('../assets/icons/wave-bottom-pc.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  background-color: var(--c-green-deep);
  min-height: 80px;
}
/* 🔴 ⑤レビュー修正: 原本の白バーは**全幅** (y=2300–2400 は紙の白がそのまま出ている)。
   `.footer-bottom-bar container` だと白がコンテンツ幅 1200 しか塗らず、左右に緑が残っていた。
   → 外側 = 全幅の白、内側 = container。y アンカーは外側 `.footer-bottom-bar` のままなので不変。 */
.footer-bottom-bar {
  background: #fff;
}
.footer-bottom-bar__inner {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 16px;
}
.footer-bottom-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-bottom-links a { font-size: var(--fs-foot-small); color: var(--c-text); }
.footer-copyright { font-size: var(--fs-small); color: var(--c-text); }

/* ページの先頭へ (固定, PC) */
.pagetop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 89px;
  height: 89px;
  border-radius: 50%;
  border: 1px solid var(--c-green);
  background: #fff;
  color: var(--c-green);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}
.pagetop svg { width: 14px; height: 9px; color: var(--c-green); transform: rotate(-90deg); margin-bottom: 4px; }
.pagetop--fixed {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pagetop--inline { display: none; }
.quicklinks-pagetop-wrap { display: none; }
.footer-bottom-sp { display: none; }

/* ===== 11. ドロワー (SPのみ、§4.6) ===== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.drawer[data-open="true"] { display: block; }
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 90;
}
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: #fff;
  overflow-y: auto;
  padding: 20px;
  z-index: 100;
}
.drawer__close {
  margin-left: auto;
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  background: #fff;
  font-size: 18px;
}
.drawer__section { margin-top: 16px; }
.drawer__section-label { font-size: var(--fs-body); color: var(--c-ink); margin-bottom: 8px; display: block; }
.drawer__seg { display: flex; flex-wrap: wrap; gap: 4px; }
.drawer__seg button {
  min-height: 36px;
  padding-inline: 10px;
  border: 1px solid var(--c-ink);
  background: #fff;
  font-size: var(--fs-body);
}
/* L10: 個別ルールは削除。.seg button[aria-pressed="true"] (style.css:207) に一本化 (drawer__seg は seg も併持) */
.drawer hr { border: none; border-top: 1px solid #ddd; margin: 16px 0; }
.drawer__nav { display: flex; flex-direction: column; gap: 8px; }
.drawer__nav a { display: flex; align-items: center; gap: 8px; padding: 8px 0; font-size: var(--fs-body); }
.drawer__nav svg { width: 24px; height: 24px; flex: none; }
.drawer__contact { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.drawer__contact a { display: block; padding: 8px 0; font-size: var(--fs-body); }

@media (min-width: 768px) {
  .drawer { display: none !important; }
}

/* ===== 12. SP レイアウト (§6, ≤767px) ===== */
@media (max-width: 767px) {
  .container { max-width: none; padding-inline: var(--sp-pad); }

  /* ユーティリティバーは非表示 (機能はドロワーへ) */
  .utility { display: none; }

  /* ヘッダー: ロゴ+ハンバーガー / 電話ブロック / 3ボタン の縦積み */
  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    min-height: auto;
    gap: 0;
    padding-block: 16px;
  }
  .site-header__logo { grid-column: 1; grid-row: 1; width: 202px; align-self: center; }
  .hamburger { display: flex; grid-column: 2; grid-row: 1; align-self: center; }

  .contact-block {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    margin-top: 47px;
    width: 100%;
    min-height: 83px;
    background: #fff;
    border: 3px double var(--c-green);
    border-radius: var(--radius-panel);
    padding: 6px 14px;
    /* 🔴 ⑤レビュー修正: 原本 SP は「1行目=見出し(中央) / 2行目=受付時間(左) と 電話番号(右)」の
       2行構成 (実測: 見出し y=117.3 中央 / 受付時間 y=142.7 x=35.7 の2行 / 円アイコン x=123.3 + 番号 x=159.3)。
       縦積み1列だと受付時間が番号の下に落ちて原本と別物になる。 */
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 8px;
    text-align: left;
  }
  .contact-block__label { grid-column: 1 / -1; justify-content: center; font-size: var(--fs-h2); }
  .contact-block__label svg { display: none; }   /* 原本 SP の見出しには電話アイコンが無い */
  .contact-block__hours { grid-column: 1; grid-row: 2; font-size: var(--fs-hdr-label); min-width: 0; }
  .contact-block__tel { grid-column: 2; grid-row: 2; min-width: 0; }
  /* 文字サイズ「大」では受付時間が広がって電話番号 (36.3px 固定) の桁が入らなくなるため、
     原本と同じ 2 行組みをやめて縦積みに戻す (どちらも縮めずに横あふれを防ぐ)。⑤レビューで実測。 */
  html[data-fontsize="l"] .contact-block { grid-template-columns: 1fr; }
  html[data-fontsize="l"] .contact-block__tel,
  html[data-fontsize="l"] .contact-block__hours { grid-column: 1; grid-row: auto; }
  html[data-fontsize="l"] .contact-block__tel { justify-self: end; }
  .contact-block__tel {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 原本 36.3px は Bahnschrift (コンデンス体) 前提。代替フォントの字幅では 9vw (35.4px) だと
       393px 幅で数字が枠線を越えて x=389 まで達していた (⑤公開版のスクショを画素実測)。
       7.6vw (=29.9px@393) なら受付時間・円と合わせて枠内に収まる */
    font-size: clamp(20px, 7.6vw, 36.3px);
    color: var(--c-green-btn);
    align-self: flex-end;
    max-width: 100%;
  }
  .contact-block__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--c-green-btn);
    flex: none;
  }
  .contact-block__circle svg { width: 18px; height: 18px; color: #fff; }

  .hdr-buttons {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 14px;   /* 原本: 電話ブロック下端 193.4 → 3ボタン 207 */
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }
  /* L14 ADD-55: 「緊急の方へ連絡先一覧」を削除して2ボタンになった。space-between のままだと
     左右両端に離れて中央が空くため、従来の3ボタンと同じく行幅いっぱいに等分する */
  .hdr-btn { flex: 1 1 0; width: auto; min-height: 97px; }
  .hdr-btn svg { width: 30px; height: 30px; }

  /* 9タイル: 2列×5行 (10セル目=ページの先頭へ) */
  /* minmax(0,1fr): サブラベル nowrap の min-content で列が膨らむのを防ぐ (文字サイズ「大」対策) */
  .tile-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 16px; padding-bottom: 16px; }
  .nav-tile { min-height: 64px; border-radius: var(--radius-btn); padding-inline: 14px 8px; }
  .nav-tile__icon { width: 35px; height: 35px; }
  /* PC 同様、矢印側の余白を詰めてラベル 6 文字 (14.7px×6=88.2px) が 1 行に収まるようにする */
  .nav-tile__text { padding-inline: 10px 4px; min-width: 0; }
  /* 原本のサブラベルは常に1行 (SP 原本は文言自体が短い: 「…料金・申込」「…財務情報」)。
     PC 全文を折り返すと2行になり原本と別物 → §5.12 のとおり ellipsis で1行に保つ */
  .nav-tile__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-tile__arrow { width: 7px; height: 11px; }
  .tile-nav__pagetop { display: flex; justify-self: end; align-self: center; }

  /* 重要なお知らせ / イベントカレンダー: 1カラム縦積み */
  .news-cal { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .panel { min-height: auto; }
  .panel--news { width: 100%; min-height: 320px; }
  .panel__header { min-height: 48px; padding-inline: 12px; }
  .panel__header h2 { font-size: var(--fs-h2); }
  .panel--news .panel__header svg { width: 24px; height: 18px; }
  .btn-list { min-width: 65px; min-height: 22px; font-size: var(--fs-btn-list); padding-inline: 6px; }
  .news-list, .cal-list { padding-inline: 0; }
  .news-item {
    /* 原本 SP の行区切りは #285837 の実線ストローク (行矩形。pdfminer 実測) */
    padding-inline: 12px;
    border-bottom-color: var(--c-sp-line);
    /* 原本 SP の行ピッチは 54.7px (textmap: 日付 y=2714 → 2878 の 164pt ÷3)。
       ⑤レビュー修正: padding-block 10px のままだと日付(11.5px)+チップ(19px)+gap で 59px になり、
       5 行で +21px ずれてイベントカレンダー以降が全部下がっていた。 */
    min-height: 54px;
    padding-block: 6px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }
  .news-item time { grid-column: 1; grid-row: 1; width: auto; font-size: var(--fs-date); }
  .chip { grid-column: 1; grid-row: 2; width: 50px; min-width: 50px; min-height: 19px; }
  .news-item__title { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-body); }
  .news-item svg.arrow { grid-column: 3; grid-row: 1 / span 2; }
  /* admin 第2便 2-E3（DESIGN-ADMIN-2E3.md §2-4）: SP は既存 grid の2行目・チップの横にラベル。
     ラベルの無い行（2-E3以前の描画・0件時）は現行と同じ配置（:has() は既にこのファイルで使用済み）。 */
  .news-item__src { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; }
  .news-item:has(.news-item__src) .news-item__title { grid-row: 1; }

  .panel--cal { background: transparent; border: none; border-radius: 0; }
  .panel--cal .panel__header {
    background: var(--c-sp-calhead);
    border: 1px solid var(--c-blue-spcard);
    /* L10: 下角も角にして行カードと密着させる (デザインPDF実測=ヘッダーと行が一体の1枚カード)。
       0件時 (cal-list:empty) はヘッダー単独になるため下角を戻して箱を閉じる。 */
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    min-height: 48px;
  }
  .panel--cal:has(.cal-list:empty) .panel__header { border-radius: var(--radius-panel); }
  .panel--cal .panel__header svg { color: var(--c-blue-cal); width: 24px; height: 24px; }
  .cal-item {
    background: var(--c-cal-head);
    border-inline: 1px solid var(--c-blue-spcard);
    border-bottom: 1px solid var(--c-blue-spcard);
    border-radius: 0;
    min-height: 54px;
    /* 原本のカードは 3 枚とも h=54 (1行)。代替フォントでは 1 件目のタイトル (18字) が
       12px×18=228px 必要なので、左右余白を詰めて 229px 確保する (⑤レビュー実測)。 */
    padding-inline: 8px;
    gap: 8px;
  }
  /* L10: 先頭行の border-top を削除 (ヘッダーの border-bottom が接合の単線1pxになる。二重罫の解消) */
  .cal-item:last-of-type { border-radius: 0 0 var(--radius-panel) var(--radius-panel); }
  .cal-item__date { width: 60px; }
  .cal-item__date .w { font-size: 0.5rem; } /* L10: デザイン実測は8px。2桁日付でのあふれを抑える */
  .cal-item svg.arrow { width: 8px; height: 13px; }

  /* バナー + 問い合わせ: 2カラム */
  .banner-contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* 原本 SP 実測 (pdfminer): カレンダー最終カード下端 1296 → バナー節上端 1328.6 = 32.6px。
       ⑤レビュー修正: 6px では 31px 上に詰まっていた。 */
    margin-top: 36px;
  }
  /* 原本のバナー 3 枚は 172×96.7 でピッチ 106.7 = gap 10 (節全体 310.2px) */
  .banners { grid-template-columns: 1fr; gap: 10px; margin-top: 0; }
  /* 🔴 ⑤レビュー修正: 原本 SP のバナーは **アイコン左・文字右** (実測: カード x=18.8、
     見出し x=76.7 = 左から 58px の位置にある = 左にアイコン列がある)。矢印も右端に出る。
     ②/③の縦積み (アイコンの下に文字) は原本と別物だった。 */
  .banner { flex-direction: row; align-items: center; min-height: 97px; padding: 8px 6px 8px 10px; gap: 0; text-align: left; }
  .banner__icon { width: 28px; flex: none; margin-right: 20px; }   /* 原本: 見出しがカード左から 58px */
  .banner svg.arrow { margin-left: 6px; }
  .banner__title { font-size: var(--fs-h2); margin-bottom: 10px; line-height: 1.2; } /* L10: デザイン実測10.5px */
  .banner__desc { font-size: var(--fs-small); line-height: 1.75; } /* L10: デザイン実測 行送り14px=1.75 */
  .banner svg.arrow { width: 7px; height: 11px; }

  .contact {
    flex-direction: column;
    min-height: 310px;
    border: 3px double var(--c-green);
    margin-top: 0;
  }
  .contact__left, .contact__right { padding: 8px 10px; border-right: none; }
  /* 原本 SP はカード右半分の見出し・注記が中央寄せ (ref 実測) */
  .contact__right .contact__heading { text-align: center; }
  .contact__right .contact__note { text-align: center; }
  .contact__note { margin-bottom: 3px; line-height: 1.75; } /* L10 D-9: デザインPDF実測 (折返し2行の行送り比率1.75) */
  .contact__left { border-bottom: 1px solid var(--c-green); }
  /* 🔴 第7便 DESIGN-L7 §3-2 C-2: nowrap+ellipsis は代替フォントの字幅差で標準サイズですら
     5.5px 切れており (ellipsisはruby要素に効かず、そのまま描画がはみ出ていた)、文字サイズ「大」で
     +27.5px まで悪化する。折返しを許可し「切れる1行」より「折返す2行」を採る。 */
  .contact__heading { font-size: var(--fs-h2); margin: 0 0 8px; } /* L10: デザイン実測8.3px */
  /* 原本 SP は 円+番号 が1行。代替フォントの字幅では 円30px+gap8px だと 172px 列に収まらず
     番号が円の下に落ちていた → 円28px+gap5px+nowrap で1行に収める (18px×12桁≈112 + 33 = 145 ≤ 152) */
  .contact__tel { font-size: 18px; flex-shrink: 0; }
  .contact__tel-row { flex-wrap: nowrap; gap: 5px; margin-bottom: 5px; justify-content: center; } /* L10: デザイン実測4.9px */
  .contact__circle { width: 28px; height: 28px; }
  .contact__circle svg { width: 14px; height: 17px; }
  .contact__hours { font-size: var(--fs-small); margin-bottom: 14px; line-height: 1.75; } /* L10: margin実測16.5px相当(タグ側と合算)・line-height はD-9でPDL実測1.75に統一 */
  .tag-list { gap: 8px 6px; } /* L10: デザイン実測 行ピッチ25.7px相当 */
  .tag { font-size: var(--fs-tag); min-height: 18px; padding-inline: 5px; } /* L10: デザイン実測タグ高18px */
  .contact-cards { flex-direction: column; gap: 1px; margin-top: 3px; }
  /* 原本 SP のメール/FAX/窓口は**枠なし** (実測: この領域の矩形はタグ4個だけ)。左寄せ */
  .contact-card { width: 100%; min-height: auto; padding: 2px 8px; row-gap: 0; border: none; justify-content: start; }
  .contact-card__sub { line-height: 1.75; } /* L10 D-9: デザインPDF実測 (contact-card__fax は数字1行のため非対象) */
  .contact-card__fax { line-height: 1.1; }
  .contact-card__row1 svg { width: 20px; height: 18px; }
  .contact-card__row1 { gap: 5px; }
  .contact-card__sub { font-size: 8px; padding-left: 25px; }
  .contact-card__fax { font-size: var(--fs-fax); padding-left: 25px; }
  /* 🔴 第7便 DESIGN-L7 §3-2 C-2 残課題: 文字サイズ「大」で FAXカードの数字行が +2px はみ出す
     (padding-left 25px + 拡大された数字幅)。数字行だけ左詰めを 2px 切り詰めて 0px にする
     (見た目の変化は色の帯1本分未満で目視不可)。 */
  html[data-fontsize="l"] .contact-card__fax { padding-left: 23px; }
  /* 原本 SP のメール行は「メールで お問い合わせ」が1行 (ref 実測)。FAX/窓口は2行のまま */
  .contact-cards .contact-card:first-child { grid-template-columns: max-content max-content; align-items: baseline; column-gap: 5px; }
  .contact-cards .contact-card:first-child .contact-card__sub { padding-left: 0; }

  /* よく利用リンク: 縦積みピル */
  .quick-links {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    background: none;
    border: none;
    /* 原本 SP 実測: バナー節下端 1638.8 → 「よくご利用いただくリンク」1673 = 34.2px */
    margin-top: 34px;
  }
  .quick-links__label {
    width: auto;
    min-height: auto;   /* PC の 50px 固定が残ると原本 (ラベル→1個目のピル 27px) より 24px 空く */
    background: none;
    border-right: none;
    padding-inline: 0;
    font-size: var(--fs-h2);
    color: var(--c-green);
  }
  .quick-links__list {
    display: flex;
    flex-direction: column;
    gap: 7.4px;
    padding-inline: 0;
    margin-top: 8px;
  }
  .quick-links__list a {
    min-height: 26px;
    background: var(--c-cal-head);
    border: 1px solid var(--c-sp-line);
    /* 原本の角丸は小さい (フル解像度で r≈12〜14px = CSS 4px。左端プロファイルを画素実測)。
       ③レビューの「角丸13 (ピル)」は h=77pt の半分と取り違えた誤記 */
    border-radius: 4px;
    padding-inline: 14px;
    justify-content: space-between;
    /* 原本 SP のリンク行は 10.2px 相当 (例「広報誌「十日町福祉会だより」」14字 143px)。
       --fs-small (8.3px) では 112px しか出ず明らかに小さかった (⑤レビュー実測)。 */
    font-size: var(--fs-foot-link);
  }

  /* フッター — 🔴 ⑤レビュー: 原本 SP の実測 (pdfminer, CSS px) に合わせた
     山並み帯 1894→1946 (52px) / 緑地 1946 / ロゴ 1964 / 破線 2094.6 / 理念ボタン 2214.8 h=68 /
     破線 2310.9 / アコーディオン 2339・2378.4・2417.8 / SNS 2466 h=139.4 / ご意見 2623.8 h=96.7 /
     最下部リンク 2733.7 / 円 2751.8 / 濃緑波帯 2760.1 h=80.4 / 白バー 2840.5 */
  .mountains { background-image: url('../assets/icons/wave-footer-sp.svg'); min-height: 52px; margin-top: 0; }
  .footer-top {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    /* 原本の縦位置に合わせた行間 (アコーディオン ピッチ 39.4 = 高さ30 + 9.4) */
    gap: 9.4px;
    padding-block: 20px 13px;
  }
  .footer-logo { width: 289px; }
  /* 理念ブロックの下の白破線 = 原本 y=2310.9 (ボタン下端 2282.8 の 28px 下) */
  .footer-left { width: 100%; padding-bottom: 28px; border-bottom: 1px dashed #fff; }
  .footer-address { margin-top: 20px; }
  .footer-rule { margin: 27px auto 0; width: 100%; }   /* 原本 SP の破線は全幅 (PC の 251px ではない) */
  .footer-philosophy { text-align: left; width: 100%; max-width: 320px; margin-top: 17px; }
  .footer-left + .footer-nav { margin-top: 18.6px; }   /* 破線 (2310.9) → 1個目のアコーディオン 2339 */
  .footer-side { margin-top: 8.6px; }
  /* 原本 SP の理念ボタンは全幅 356 (pdfminer: x=18.3 w=356.3)。「全幅-36」は②の誤記 */
  .footer-btn { width: 100%; max-width: none; min-height: 68px; margin-top: 48px; }
  .footer-nav { width: 100%; text-align: left; border-left: none; padding-left: 0; }
  .footer-nav h3 { display: none; }
  .foot-acc__head {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    padding-inline: 12px;
    background: none;
    border: 1px solid #F2F9F4;
    border-radius: 6px;
    color: #fff;
    font-size: var(--fs-foot-link);
  }
  .foot-acc__mark { font-size: 16px; }
  .footer-nav .foot-acc__list { display: none; padding-top: 8px; }
  .footer-nav .foot-acc__head[aria-expanded="true"] + .foot-acc__list { display: block; }
  .footer-side { align-items: center; width: 100%; border-left: none; padding-left: 0; }
  /* 原本 SP は SNS・ご意見とも全幅 356 (pdfminer: w=355.8 / 356.3) */
  .sns-card, .opinion-card { width: 100%; max-width: none; }
  .sns-card { min-height: 139px; }
  /* 原本 SP の SNS アイコンは 56px (FB 円の実測 168px÷3)。中央寄せ・gap≈20 */
  .sns-card__icons { justify-content: center; gap: 20px; }
  .sns-card__icons img { width: 56px; height: 56px; }
  .sns-card { text-align: center; }
  /* 原本 SP: 文字 20px (「ご意見／ご要望を」8字が 158px) + 鉛筆 30px (DESIGN §6)。
     文字はカード左から 46px・鉛筆は右から 28px (ref 実測) */
  .opinion-card { min-height: 97px; font-size: 20px; line-height: 1.35; padding: 14px 28px 14px 46px; }
  .opinion-card svg { width: 30px; height: 30px; }
  /* 原本 SP の © は 10.4px 相当 (13字 135px)。--fs-small(8.3px) では 108px */
  .footer-copyright { font-size: var(--fs-chip); }
  /* 原本 SP の SNS 見出しは 14.7px 相当 (13字 191px)。--fs-card-label(12px) では 145px (⑤レビュー実測) */
  .sns-card p { font-size: var(--fs-h2); }
  /* 最下部リンクと円は緑地側 (.footer-bottom-sp) に出し、白バーは © だけ (原本 h=45) */
  .footer-bottom-sp {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-top: 14px;
  }
  .footer-bottom-sp .footer-bottom-links { flex-direction: column; align-items: flex-start; gap: 5px; }
  .footer-bottom-sp .footer-bottom-links a { color: #fff; }
  .footer-bottom-bar .footer-bottom-links,
  .footer-bottom-bar .pagetop--inline { display: none; }
  /* PC 用の白破線 (外部バナー上 y=2081)。SP 原本のご意見カード〜最下部リンク間に線は無い */
  .footer-rule-full { display: none; }
  .footer-bottom-bar__inner { flex-direction: column; padding-block: 0; min-height: 45px; }

  .ext-banners { display: none; }

  /* 原本の濃緑波帯は 2760.1 から h=80.4。最下部リンク (2733.7〜2817) はその上に重なるので、
     帯を負マージンで持ち上げてリンクを透かす (地色は同じ濃緑なので見た目は原本どおり)。 */
  .footer-bottom-wave { background-image: url('../assets/icons/wave-bottom-sp.svg'); min-height: 80px; margin-top: -73px; }
  .footer-bottom-sp { position: relative; z-index: 1; }

  .pagetop--fixed { display: none; }
  /* 🔴 ⑤レビュー修正: 原本 SP の円は **66.7px** (pdfminer 実測: x=312.9 w=66.7 の白円 + 緑枠、
     中に矢印 18.3×11.4 と「ページの/先頭へ」9px の2行)。②設計の 37px・font-size:0 は誤りで、
     文字が消えて原本と別物になっていた。 */
  .pagetop--inline { display: flex; width: 66px; height: 66px; font-size: 9px; line-height: 1.2; margin-left: auto; }
  .pagetop--inline svg { width: 18px; height: 11px; margin-bottom: 2px; }
  /* 原本では円 (1891.9) が山並み帯 (1894〜) に重なる。負マージンで重ねる。 */
  .quicklinks-pagetop-wrap { display: block; margin-top: 16px; margin-bottom: -64px; position: relative; z-index: 1; }
}

/* ===== L2 ===== */
/* DESIGN-L2.md 準拠。第2階層 (法人について / 施設を探す) 共通コンポーネント */

:root {
  --l2-container: 1296px;
  --c-l2-sep:     #868175;
  --c-l2-sep2:    #333333;
  --c-l2-head:    #4D4D4D;
  --c-l2-ink:     #1B1B1B;
  --c-l2-navbd:   #659ED6;
  --c-l2-navhov:  #E4EAF6;
  --c-l2-navarw:  #6699CC;
  --c-l2-tblkey:  #DBDBDC;
  --c-l2-tblval:  #EDEDED;
  --c-l2-cardbd:  #BFBFBF;
  --c-l2-photo:   #B1B2B4;
  --c-sec-korei:  #004825;
  --c-line-korei: #006937;
  --c-sec-shogai: #24548C;
  --c-sec-kodomo: #F27F02;
  --c-sec-sonota: #8C6239;
  --c-sec-kyosei: #C2185B;   /* FAC-0929（FAC-D-05、S2 MINOR-3）: 共生型総合施設の見出し・タグ文字 = 濃いピンク（白地 5.87:1、タグ地上 4.62:1）。枠線は --c-petal-pink */
  --c-tag-korei:  #B6D1B1;
  --c-tag-shogai: #DAE4F4;
  --c-tag-kodomo: #F9DEBC;
  --c-tag-sonota: #E3D7C2;
  --c-tag-kyosei: #FBDCE8;   /* FAC-0929: 花弁ピンクの淡色（既存3節の淡色と同じ明度帯） */
  --c-map-bg:     #F9F1DB;
  --c-chip-korei: #B3CCA7;
  --c-chip-shogai:#AECFDA;
  --c-chip-kodomo:#FFD8A5;

  --fs-l2-h1: 2.125rem;        /* 34px */
  --fs-l2-h1-shisetsu: 2.25rem; /* 36px */
  --fs-l2-sub: 1.125rem;       /* 18px */
  --fs-l2-lead: 0.875rem;      /* 14px */
  --fs-l2-heading: 1.5rem;     /* 24px */
  --fs-l2-nav: 1rem;           /* 16px */
  --fs-l2-body: 0.875rem;      /* 14px */
  --fs-l2-small: 0.75rem;      /* 12px */
  --fs-l2-year: 1.5rem;        /* 24px */
  --fs-l2-tab: 0.75rem;        /* 12px */
  --fs-l2-util: 0.544rem;      /* 8.7px */
}

/* DESIGN-L3 §5-1: L2 SP タイポグラフィのトークン更新 (トップには波及させない。body.l2 限定) */
@media (max-width: 767px) {
  body.l2 {
    --fs-l2-lead: 1rem;        /* 14 → 16px */
    --fs-l2-body: 1rem;        /* 14 → 16px */
    --fs-l2-small: 0.8125rem;  /* 12 → 13px */
  }
}

/* DESIGN-L3 §3-1: 1440px は min(1296,1404)=1296 で1px も動かない。1332px 以下で左右18pxの余白が効く */
.l2-container { width: min(var(--l2-container), 100% - 2 * var(--sp-pad)); margin-inline: auto; }

/* DESIGN-L3 §2-2 (③レビュー修正): 未実装ナビ (aria-disabled) の hover 演出を消す。
   🔴 background は触らない — テーマの hover は .nav-tile の filter だけなので filter/cursor で足りる
   (revert-layer は @layer 未使用のテーマでは revert と同義になり、7枚の背景が hover で透明化する事故を招く)。 */
a[aria-disabled="true"]:hover { filter: none; cursor: default; }

/* ===== L2-1. ヘッダー ===== */
.l2-header {
  background: #fff;
  min-height: 108px;
}
.l2-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 108px;
  padding-block: 12px;
}
.l2-header__logo { flex: none; display: block; }
.l2-header__logo img { display: block; width: 304px; height: 70px; }
/* 🔴 第7便 DESIGN-L7 §3-2 C-1: 216px 固定だと文字サイズ「標準」でも+3px・「大」で+44pxあふれる
   (font-size は rem でスケールするが箱は px 固定だったため)。内容幅に追従させ、電話番号が
   読めることを固定幅より優先する (アクセシビリティ機能=文字サイズ拡大の趣旨)。 */
.l2-header__tel { flex: none; width: auto; }
.l2-header__tel .contact-block__label-text,
.l2-header__tel .contact-block__hours { font-size: 0.7375rem; }
.l2-header__tel .contact-block__label { display: flex; align-items: center; gap: 4px; margin: 0; }
.l2-header__tel .contact-block__label svg { width: 14px; height: 14px; flex: none; }
.l2-header__tel .contact-block__tel { display: flex; align-items: center; gap: 4px; margin: 2px 0; }
.l2-header__tel .contact-block__circle { width: 18px; height: 18px; }
.l2-header__tel .contact-block__circle svg { width: 100%; height: 100%; }
.l2-header__tel .contact-block__tel-text { font-size: 2.2rem; font-family: var(--font-num); color: #005830; }
.l2-header__btns { flex: none; display: flex; gap: 13px; }
.l2-btn {
  width: 126px; height: 63px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  gap: 8px; color: #fff; font-size: 0.694rem; line-height: 1.35; text-align: left;
}
.l2-btn svg, .l2-btn img { width: 28px; height: 28px; flex: none; }
.l2-btn--mail { background: var(--c-green-btn); }
.l2-btn--access { background: var(--c-brown); }
.l2-header__utility { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-left: auto; }
.l2-utility__row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: var(--fs-l2-util); }
/* 🔴 .utility__label はトップ用に font-size:14px / 点線区切り / height:40px を持つ。
   L2 は DESIGN-L2 §1 で「文字 8.7px」かつ点線区切り無し。継承では上書きされないので明示する。
   14px のままだと「文字サイズ」「配色変更」がユーティリティ枠 (x=1068〜) から左にはみ出し、
   左隣のボタン列に重なる (当時は赤の「緊急の方へ 連絡先一覧」ボタン 〜x=1044。L14 ADD-55 で削除)。 */
.l2-utility__row .utility__label {
  white-space: nowrap; font-size: var(--fs-l2-util);
  border-left: 0; padding-left: 0; height: auto;
}
/* 🔴 transform: scale() は見た目だけ縮めてレイアウト幅は元のまま。
   そのぶん行の内容幅が枠(300px)を超え、ラベルが左にはみ出して3ボタンに重なっていた。
   実寸で縮める (DESIGN-L2 §1: ボタン h=24.7 / 小・標準・大 の幅 37.1、文字 8.7px)。 */
.l2-utility__row .seg button {
  min-height: 24.7px; height: 24.7px; padding-inline: 6px;
  font-size: var(--fs-l2-util); line-height: 1.2;
}
.l2-utility__row .seg[data-a11y="fontsize"] button { min-width: 37.1px; }
/* トップ用の min-width (60px / 高コントラスト 120px) は L2 の縮小版では大きすぎ、
   配色変更の行が枠を 62px はみ出す。L2 では文字幅で決めさせる。 */
.l2-utility__row .seg button,
.l2-utility__row .seg[data-a11y="theme"] button[data-value="contrast"] { min-width: 0; }
.l2-utility__row .utility__link { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.l2-utility__row .utility__link svg { width: 14px; height: 14px; }
.l2-header__inner .hamburger { display: none; }

/* DESIGN-L3 §3-2: 768–1439px は3ボタン+ユーティリティが折返して重ならないようにする。
   1440px 以上は全子要素が1行に収まるため wrap は発火しない = 既定表示は不変。 */
.l2-header__inner { flex-wrap: wrap; row-gap: 8px; justify-content: space-between; }
@media (min-width: 768px) and (max-width: 1439px) {
  .l2-header__inner { padding-block: 10px; }
  /* L14 ADD-55（独立S4 MAJOR-1）: flex-basis 0 ＋ min-width 0 だと折返しの判定で幅0とみなされ、
     ボタン列が2つに減った 904〜1184px では折返さずに潰れて、中身がボタンへはみ出す。
     中身の幅を basis にして、入らなければ2段目の右寄せへ折返させる。1440px 以上は対象外 = 既定表示は不変。 */
  .l2-header__utility { margin-left: auto; flex: 1 0 auto; }
}

/* DESIGN-L3 §4-2: PC はタブ帯を sticky 化 (スクロールしてもメニュー到達手段を消さない) */
@media (min-width: 768px) {
  .l2-tabs { position: sticky; top: 0; z-index: 60; }
  body.admin-bar .l2-tabs { top: 32px; }
}
/* ページ内アンカーが sticky 帯の下に潜らないように (L2 限定) */
body.l2 [id] { scroll-margin-top: 88px; }
@media (max-width: 767px) { body.l2 [id] { scroll-margin-top: 96px; } }

/* SP (≤767px): L2ヘッダーはトップの SP ヘッダーと同型 (ロゴ+ハンバーガーのみ)。
   ユーティリティ2段・電話ブロック・3ボタンは非表示 (機能はドロワー。DESIGN-L2 §1 SP注記) */
@media (max-width: 767px) {
  .l2-header { min-height: auto; }
  .l2-header__inner { min-height: auto; padding-block: 16px; gap: 0; justify-content: space-between; }
  .l2-header__logo img { width: 202px; height: 47px; }
  .l2-header__tel, .l2-header__btns, .l2-header__utility { display: none; }
  .l2-header__inner .hamburger { display: flex; }
  /* DESIGN-L3 §4-3: SP はヘッダーを sticky 化 (ハンバーガー=完全なメニューが常に1タップ) */
  body.l2 .l2-header { position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
}

/* ===== L2-2. タブナビ帯 ===== */
.l2-tabs { background: var(--c-green-btn); }
.l2-tabs__list {
  display: flex; width: 1298px; max-width: 100%; margin-inline: auto;
  justify-content: space-between; list-style: none; padding: 0;
}
.l2-tab {
  width: 124.6px; min-height: 40px; margin-block: 8px 7px; border-radius: 8px;
  background: var(--t-main); color: #fff; display: flex; align-items: center;
  gap: 6px; padding-inline: 10px; font-size: var(--fs-l2-tab); text-decoration: none;
  line-height: 1.2;
}
.l2-tab__icon { width: 20px; height: 20px; flex: none; }
.l2-tab__icon svg { width: 100%; height: 100%; }
.l2-tab.is-current {
  background: #fff; color: var(--t-main); border-radius: 8px 8px 0 0;
  margin-bottom: 0; min-height: 48px;
}
.l2-tab--houjin   { --t-main:#74AB5F; --t-dark:#506331; --t-pale:#F1F8DD; }
.l2-tab--shisetsu { --t-main:#558D61; --t-dark:#04582F; --t-pale:#F1F8E9; }
.l2-tab--riyou    { --t-main:#659ED6; --t-dark:#014A9F; --t-pale:#ECF4FC; }
.l2-tab--saiyou   { --t-main:#24548C; --t-dark:#003084; --t-pale:#F3F5F9; }
.l2-tab--faq      { --t-main:#7B71BE; --t-dark:#43108E; --t-pale:#F6F4F5; }
.l2-tab--kokai    { --t-main:#626262; --t-dark:#373B3D; --t-pale:#F2F2F2; }
.l2-tab--event    { --t-main:#E39901; --t-dark:#F27F02; --t-pale:#FFECE1; }
.l2-tab--fureai   { --t-main:#EA637A; --t-dark:#D74962; --t-pale:#FEEFF0; }
.l2-tab--chiiki   { --t-main:#009A9C; --t-dark:#168377; --t-pale:#EBF3EF; }

/* DESIGN-L3 §4-1: PC 768–1333px はタブを折り返して全部見せる (社長の「＞」案は PC では不採用)。
   実内容幅は 1121px なので 1140px 未満で崩れる。1333px は安全マージン (ref-l3/s2/s2_sweep.py)。
   1334px 以上 (=既定の1440px含む) は変更しない = 1行のまま不変。 */
@media (min-width: 768px) and (max-width: 1333px) {
  .l2-tabs__list {
    width: calc(100% - 2 * var(--sp-pad));
    flex-wrap: wrap;
    justify-content: flex-start; gap: 12px;
  }
}

/* タブ帯 SP: 横スクロール1行 (DESIGN-L2 §2 C-2)。
   🔴 .l2-tabs__list 自体を可視ビューポート幅に収め (width:100%)、はみ出す分だけを
   overflow-x:auto でスクロールさせる。width:max-content にすると要素自体が広がり
   ドキュメント全体が横スクロールしてしまう (stress test で発覚)。 */
@media (max-width: 767px) {
  .l2-tabs { overflow: hidden; position: relative; }
  .l2-tabs__list { width: 100%; max-width: 100%; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; padding-inline: 18px; justify-content: flex-start; gap: 12px; }
  .l2-tabs__list::-webkit-scrollbar { display: none; }
  .l2-tab { flex: none; min-height: 44px; }

  /* DESIGN-L3 §4-4: 操作手がかり3点セット (a) 送りボタン (b) scroll-snap */
  .l2-tabs__list { scroll-snap-type: x proximity; scroll-padding-inline: 44px; }
  .l2-tab { scroll-snap-align: start; }
  .l2-tabs__more {
    position: absolute; top: 0; bottom: 0; width: 44px; border: 0; padding: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; z-index: 2;
  }
  .l2-tabs__more--next { right: 0;
    background: linear-gradient(to right, rgba(0,88,48,0), var(--c-green-btn) 55%); }
  .l2-tabs__more--prev { left: 0;
    background: linear-gradient(to left,  rgba(0,88,48,0), var(--c-green-btn) 55%); }
  .l2-tabs__more svg { width: 12px; height: 20px; filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
  .l2-tabs__more[hidden] { display: none; }
}
@media (min-width: 768px) { .l2-tabs__more { display: none !important; } }

/* ===== L2-3. パンくず ===== */
.breadcrumb { background: #fff; min-height: 35px; display: flex; align-items: center; font-size: var(--fs-l2-small); }
.breadcrumb .l2-container { padding-block: 8px; }
.breadcrumb a { color: var(--c-ink); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .breadcrumb { min-height: 28px; font-size: 0.6875rem; }
}

/* スクリーンリーダー専用 (見た目に一切影響させない) */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ===== L2 ページタイトル共通 ===== */
.page-title { display: flex; align-items: center; gap: 16px; padding-top: 32px; }
.page-title img { width: 70px; height: 70px; flex: none; }
.page-title h1 { font-size: var(--fs-l2-h1); line-height: 1.2; margin: 0; }
.page-title__sub { font-size: var(--fs-l2-sub); color: var(--c-l2-head); margin: 4px 0 0; }
.page-title--houjin h1 { color: var(--t-dark); }
/* 🔴 DESIGN-L3 §5-8: 施設ページタイトルのアイコンが黒 (PC/SP 共)。
   svg は currentColor 継承なので親に color を置く。h1 は個別指定 (var(--t-main)) が勝つので不変。 */
.page-title--shisetsu { color: var(--t-main); }
.page-title--shisetsu h1 { color: var(--t-main); font-size: var(--fs-l2-h1-shisetsu); }
/* 🔴 DESIGN-L2 §4-1「タイトル色はそのページのタイルの --t-dark」/ §4-2 の●/ §4-4 の縦線 は
   すべて var(--t-*) を参照するが、--t-* は .nav-tile--* / .l2-tab--* にしか定義が無く、
   ページ本文のスコープでは未定義 = 無効値になっていた (h1 が黒・●と縦線が透明で不可視)。
   L2 の各ページに body クラスでトークンを張る。 */
body.page-template-page-about, body.page-template-page-houjin { --t-main:#74AB5F; --t-dark:#506331; --t-pale:#F1F8DD; }
body.post-type-archive-facility,
body.single-facility { --t-main:#558D61; --t-dark:#04582F; --t-pale:#F1F8E9; }
/* DESIGN-L4 §1-4: 第4便9ページの --t-* トークン (値はタブ既存定義 .l2-tab--* と同一)。
   WP は page-{slug} クラスを自動で付けないため functions.php の body_class フィルタで補っている。 */
body.page-guide      { --t-main:#659ED6; --t-dark:#014A9F; --t-pale:#ECF4FC; }
body.page-recruit    { --t-main:#24548C; --t-dark:#003084; --t-pale:#F3F5F9; }
body.page-faq        { --t-main:#7B71BE; --t-dark:#43108E; --t-pale:#F6F4F5; }
body.page-disclosure { --t-main:#626262; --t-dark:#373B3D; --t-pale:#F2F2F2; }
body.post-type-archive-event,
body.single-event    { --t-main:#E39901; --t-dark:#F27F02; --t-pale:#FFECE1; }
body.page-products   { --t-main:#EA637A; --t-dark:#D74962; --t-pale:#FEEFF0; }
body.page-community  { --t-main:#009A9C; --t-dark:#168377; --t-pale:#EBF3EF; }
body.page-contact,
body.page-privacy    { --t-main:#005830; --t-dark:#04582F; --t-pale:#F2F9F4; }  /* ナビ外2ページはサイト基調緑 (--c-green-btn/--c-green-dark/--c-cal-head と同値) */
@media (max-width: 767px) {
  .page-title img { width: 48px; height: 48px; }
  .page-title h1 { font-size: 1.5rem; }
  .page-title__sub { font-size: 0.8125rem; }
}

/* ===== L2-4. 法人について ===== */
.houjin-hero {
  background: url('../assets/l2/image101@2x.png') right top / cover no-repeat;
  /* DESIGN-L2 §4-1: 帯 y=199.7–620、ナビ最終行 569.2+48=617.2 → 下余白は 2.8px */
  padding-bottom: 2.8px;
}
/* リードは PDF 実測で 2行 (y=340 / 364.5)。折返し幅はナビ2列ブロック (240.3×2 + 20.7 = 501.3) に揃える。
   640px だと 1440 幅で1行に収まってしまい、ページ内ナビが 24.5px 上にずれる */
.houjin-hero__lead { font-size: var(--fs-l2-lead); line-height: 1.75; margin: 24px 0 21px; max-width: 501.3px; }
@media (max-width: 767px) {
  /* SP は cover 表示で白フェード焼込み部分が画角外に出やすく、文字が緑葉に重なり視認性が落ちる。
     デザイン未支給 (推測・要実機確認) のため、白グラデーションを重ねて可読性を確保する。 */
  .houjin-hero { background-image: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.3) 100%), url('../assets/l2/image101@2x.png'); }
}

.anchor-nav {
  display: grid; grid-template-columns: repeat(2, 240.3px); gap: 7.8px 20.7px; list-style: none; padding: 0;
}
.anchor-nav__item {
  display: flex; align-items: center;
  width: 240.3px; height: auto; min-height: 48px; padding-block: 6px; line-height: 1.3;
  background: #fff; border: 1px solid var(--c-l2-navbd); border-radius: 6px;
  padding-inline: 25px 20px; font-size: var(--fs-l2-nav); color: var(--c-l2-head); text-decoration: none;
}
/* 🔴 justify-content:space-between は <ruby> ごとを flex アイテムとして引き離すため使わない。
   矢印だけ margin-left:auto で右端に寄せる。 */
.anchor-nav__item svg { width: 7.8px; height: 12.5px; color: var(--c-l2-navarw); flex: none; margin-left: auto; }
.anchor-nav__item:hover, .anchor-nav__item:focus-visible { background: var(--c-l2-navhov); }
/* L14 (HP-ABOUT-01, DESIGN §3-1 / REVIEW-DESIGN-L14 D-20): svg を除く子要素を1個の .anchor-nav__label に
   まとめ、ruby が個別 flex アイテム化して1文字ずつ縦積みになる事故を防ぐ。理念項目だけ折返し制御が要る。 */
.anchor-nav__label { flex: 1 1 auto; min-width: 0; }
.anchor-nav__label--rinen { word-break: keep-all; overflow-wrap: normal; }
.nobr { white-space: nowrap; }   /* L14: §3-1 と §3-9 で共用。1回だけ定義 */
@media (max-width: 767px) {
  /* DESIGN-L3 §3-3: 固定172px×2+gapは360pxで収まらない (実測 356>324)。1fr化して流動させる */
  .anchor-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  /* DESIGN-L3 §5-4: height 48px (44px以上維持) */
  .anchor-nav__item { width: auto; height: auto; min-height: 48px; font-size: 0.8125rem; padding-inline: 14px 10px; }
  .anchor-nav__item svg { width: 6px; height: 10px; }
}

.l2-section { padding-block: 48px; }
.l2-section--divider { border-top: 3px dotted var(--c-l2-sep); }
/* DESIGN-L2 §4-2: 法人概要+理事長あいさつは y=620–1039 (h=419)。
   上下48px均等だと h=441.5 になり、以降の点線区切り・沿革が 22.5px ずつ下にずれる */
.l2-section--gaiyo { padding-bottom: 25.5px; }
/* DESIGN-L2 §4-4: タイムライン下端 3177.2 → ボタン 3255.4 (78.2) / ボタン下端 3304.5 → §4-5 開始 3395 (90.5) */
/* L14 (HP-ABOUT-09): 「沿革の詳細を見る」ボタン削除に伴い #enkaku > .btn-l2 ルールは不要のため削除。
   #enkaku 側の余白 (次セクションとの間隔) は維持する。 */
#enkaku { padding-bottom: 90.5px; }
/* DESIGN-L2 §4-5: セクション 3395–3800、見出し 3456.1 (pt=61.1)、ボタン 3705、連絡帯 3852.4 */
.l2-3cards { padding-top: 61.1px; padding-bottom: 45.9px; margin-bottom: 46.5px; }
.l2-3cards .btn-l2 { margin-top: 23.3px; }
/* 🔴 flex + gap にすると隣り合う <ruby> が別々の flex アイテムになり、
   「法人概要」が「法人　概要」のように割れる (ふりがな OFF でも発生)。
   ● は ::before の inline-block + margin で置く。 */
.l2-heading {
  font-size: var(--fs-l2-heading); color: var(--c-l2-head);
  font-weight: 700; margin: 0 0 24px;
}
.l2-heading::before {
  content: ""; display: inline-block; width: 21.4px; height: 21.4px; border-radius: 50%;
  background: var(--t-dark); margin-right: 10px; vertical-align: -3px;
}
/* DESIGN-L4 §1-3 (REVIEW-DESIGN-L4 D-6 修正): 新しい確定デザインの見出し規則 (文字色・●とも --t-main)。
   guide (確定ページ) が使うため L4-draft ブロックではなくここ (L2 共通/凍結セクション) に置く —
   L4-draft ブロックは「9ページ確定後に丸ごと削除できる」設計なので、確定ページが依存してはいけない。 */
.l2-heading--main { color: var(--t-main); }
.l2-heading--main::before { background: var(--t-main); }
/* 写真プレースホルダ (第2便の Photo仮 運用と整合)。同じ理由で guide が使うため L2 側に置く。 */
.photo-pending {
  background: var(--c-l2-photo); border-radius: 4px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: var(--fs-l2-small);
}
.l2-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.houjin-table { display: grid; grid-template-columns: 110.7px 1fr; gap: 7.4px 5.6px; margin: 0; }
.houjin-table dt {
  background: var(--c-l2-tblkey); display: flex; align-items: center; padding-inline: 12px;
  min-height: 36.7px; font-size: var(--fs-l2-body); white-space: pre;
}
.houjin-table dd {
  background: var(--c-l2-tblval); display: flex; align-items: center; padding-inline: 12px; margin: 0;
  min-height: 36.7px; font-size: var(--fs-l2-body);
}
.chairman { display: flex; gap: 24px; align-items: flex-start; }
.chairman__photo { width: 193px; height: 219px; object-fit: cover; flex: none; border-radius: 4px; }
.chairman__body { font-size: var(--fs-l2-body); line-height: 1.75; }
/* L14 ADD-13: 理事長あいさつを複数段落に変更したため、段落間の余白を明示する（従来は単一段落で余白が不要だった）。 */
.chairman__body > p { margin: 0 0 1em; }
.chairman__body > p:last-child { margin-bottom: 0; }
.chairman__sign { text-align: right; margin-top: 16px; }
@media (max-width: 767px) {
  .l2-cols2 { grid-template-columns: 1fr; gap: 32px; }
  .houjin-table { grid-template-columns: 90px 1fr; }
  /* DESIGN-L3 §5-3: dd は16px化 (トークン継承)、dt は字取り語のため14px据え置き。タップ標的44px */
  .houjin-table dt { font-size: 0.875rem; min-height: 44px; }
  .houjin-table dd { min-height: 44px; line-height: 1.75; }  /* DESIGN-L3 §5-0 D4: 行間 >=1.7 */
  /* DESIGN-L3 §5-2 (D8): 中央揃え本文の禁止。写真だけ中央、本文は左揃え、署名だけ右揃え */
  .chairman { flex-direction: column; align-items: stretch; text-align: left; }
  .chairman__photo { width: 140px; height: 159px; align-self: center; }
  .chairman__sign { text-align: right; }
}

.rinen-block { margin-bottom: 40px; }
.rinen-block:last-child { margin-bottom: 0; }
.rinen-block p { font-size: var(--fs-l2-body); line-height: 1.75; margin: 0 0 8px; }
/* ADD-07 (D-034/D-037): 経営理念の本文だけを均等配置にし、最終行は左揃えにする。
   1段落化（page-about.php）とセットで初めて効く（2段落のままだと行2・行3が各段落の
   最終行になり、見た目が変わらないことを実測で確認済み）。
   経営方針・事業部理念・職員行動規範には波及させないため専用クラス限定にする
   （:first-child は「事業部理念」にも当たるので使わない）。
   768-1023px のタブレット帯は2カラムで本文が最も狭くなるが、依頼はSPの見えについてなので
   ここは左揃えのまま（Q-21）。広げる場合は max-width を 1023px にするだけでよい。
   text-align-last 非対応の環境（iOS Safari 16 未満など）では auto にフォールバックし、
   text-align:justify と組み合わせると最終行は start＝左揃えになる。実測でも
   「justify のみ」と「justify + text-align-last:left」の行組みは完全に一致した。 */
@media (max-width: 767px) {
	.rinen-block--rinen p { text-align: justify; text-align-last: left; }
}
.rinen-item__head { font-size: 1.125rem; font-weight: 700; margin: 16px 0 4px; }
/* 🔴 S4修正: 支給PDF実測 (法人についてPDF p1: 見出し x=785.9 / チップ x=787.5 / 理念文 x=787.5) は
   ラベル・本文とも列の左端で揃う。align-items:center だとラベルが中央 (実測 x=977.75) に寄り、
   text-align:left だけでは DESIGN-L3 §5-2 の DoD (本文左端=チップ左端 ±4px) を満たせない。PC/SP 共通で左揃え */
.jigyobu-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; }
.jigyobu-chip:last-child { margin-bottom: 0; }
.jigyobu-chip__label {
  display: flex; align-items: center; justify-content: center; width: 152.5px; height: 27.5px;
  border-radius: 14px; font-size: 1.125rem; font-weight: 700;
}
.jigyobu-chip--korei .jigyobu-chip__label { background: var(--c-chip-korei); }
.jigyobu-chip--shogai .jigyobu-chip__label { background: var(--c-chip-shogai); }
.jigyobu-chip--kodomo .jigyobu-chip__label { background: var(--c-chip-kodomo); }
/* 🔴 DESIGN-L3 §5-2 (D8): 中央揃え本文の禁止。PDF 実測でも左揃え (x=787.5) — PC/SP 共通で左揃えに */
.jigyobu-chip__text { font-size: 1rem; font-weight: 700; color: var(--c-green-btn); text-align: left; }
.koudou-kihan__base { font-size: 1.125rem; font-weight: 700; margin: 24px 0 8px; }
.koudou-kihan ul { list-style: none; padding: 0; margin: 0; }
.koudou-kihan li { font-size: 1rem; line-height: 1.75; margin-bottom: 4px; }
@media (max-width: 767px) {
  .rinen-item__head { font-size: 1rem; }
  .jigyobu-chip__label { width: 140px; height: 24px; font-size: 0.875rem; }
  /* DESIGN-L3 §5-1: ○のぶら下げで折返しを揃える */
  .koudou-kihan li { padding-left: 1em; text-indent: -1em; }
}

/* 沿革タイムライン */
.enkaku-intro { font-size: var(--fs-l2-body); line-height: 1.75; margin-bottom: 32px; }
.timeline { position: relative; display: grid; grid-template-columns: 1fr 282px; gap: 0 32px; }
.timeline__list { position: relative; padding-left: 56px; list-style: none; margin: 0; }
.timeline__list::before {
  content: ""; position: absolute; left: 10px; top: 17px; bottom: 17px; width: 2.8px; background: var(--t-dark);
}
.timeline__item { position: relative; margin-bottom: 9px; }
.timeline__dot {
  position: absolute; left: -46px; top: 17px; width: 21px; height: 21px; border-radius: 50%;
  box-sizing: border-box; background: #fff; border: 2px solid var(--c-green);
}
.timeline__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-green);
}
.timeline__card {
  position: relative; min-height: 78px; background: #fff; border: 1.4px solid var(--c-l2-cardbd);
  border-radius: 6px; padding: 15px 20px; display: flex; align-items: flex-start; gap: 20px;
}
.timeline__card::before {
  content: ""; position: absolute; left: -11px; top: 18px; width: 16px; height: 16px;
  background: #fff; border-left: 1.4px solid var(--c-l2-cardbd); border-bottom: 1.4px solid var(--c-l2-cardbd);
  transform: rotate(45deg);
}
/* L14 (HP-ABOUT-10, DESIGN §3-8): 固定100pxだと文字サイズ「大」で「（平成30年）」が2段に折れる。
   fs-l2-body 追従の可変幅にして全段の日付列幅を揃えたまま防ぐ (m: 14px*7.2=100.8px ≒ 現行100px)。 */
.timeline__year { flex: none; width: calc( var(--fs-l2-body) * 7.2 ); color: var(--c-green); font-weight: 700; line-height: 1.2; }
.timeline__year .y { font-size: var(--fs-l2-year); }
.timeline__year .unit { font-size: var(--fs-l2-body); font-weight: 400; }
.timeline__year .wareki { font-size: var(--fs-l2-body); font-weight: 400; display: block; white-space: nowrap; }
.timeline__rows { flex: 1; color: var(--c-l2-ink); }
/* DESIGN-L2 §4-4。行送りは本文が「24」と書く一方、カード高の実測 (99=3行 / 147=5行) と
   縦線 h=1235.1 は 1行あたり約23px でないと合わない。縦線の高さは独立に実測された値なので
   そちらを正とし 1.44 (=23.04px) にする。1.5 だとタイムライン全体が 33px 伸び、
   以降 (沿革ボタン〜白バー) が 22〜32px 下にずれる。
   日付 x=288.5 / 内容 x=402.6 の2カラム (114.1px) — インラインに流すと折返しが内容列で揃わない */
.timeline__row { font-size: 1rem; line-height: 1.44; margin-bottom: 0; display: grid; grid-template-columns: 114.1px 1fr; }
.timeline__row .date { font-weight: 500; }
.timeline__photos { display: flex; flex-direction: column; gap: 24px; padding-top: 4px; }
.timeline__photos img { width: 100%; height: auto; aspect-ratio: 282 / 180; object-fit: cover; background: var(--c-l2-photo); border-radius: 4px; }
/* L14 (HP-ABOUT-02): 実写真になったためキャプションを追加。figure の既定マージンを打ち消す。 */
.timeline__photos figure { margin: 0; }
.timeline__photos figcaption { font-size: 0.8125rem; line-height: 1.5; margin-top: 6px; color: var(--c-l2-ink); }
.btn-l2 {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 348.5px; height: 49.1px;
  margin-inline: auto; background: #fff; border: 1px solid var(--c-green); border-radius: 8px;
  color: var(--c-green-dark); font-size: 1.125rem; text-decoration: none; margin-top: 32px;
}
.btn-l2 svg { width: 10px; height: 16px; }
@media (max-width: 767px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline__list { padding-left: 40px; }
  .timeline__dot { left: -34px; width: 16px; height: 16px; }
  .timeline__card { flex-direction: column; gap: 8px; padding: 14px; }
  .timeline__year .y { font-size: 1.0625rem; }
  /* DESIGN-L3 §5-5-2: 日付114px+内容の2カラムを縦積みに。日付13px Medium→内容15px の順 */
  .timeline__row { display: block; font-size: 0.9375rem; line-height: 1.7; }  /* DESIGN-L3 §5-0 D4 */
  .timeline__row .date { display: block; font-size: 0.8125rem; }
  /* L14 (HP-ABOUT-02, D-009): 実写真になったため SP でも表示する (仮画像時代の非表示ルールを撤回)。
     タイムライン下に1列で表示。 */
  .timeline__photos { display: flex; margin-top: 24px; }
  .timeline__photos img { width: 100%; height: auto; aspect-ratio: 282 / 180; object-fit: cover; }
  .btn-l2 { width: 100%; max-width: 348.5px; height: 44px; font-size: 0.875rem; }
}

.l2-3cards { display: grid; grid-template-columns: repeat(3, 1fr); }
.l2-3card {
  padding-inline: 32px; text-align: center; display: flex; flex-direction: column; align-items: center;
  border-left: 3px dotted var(--c-l2-sep);
}
.l2-3card:first-child { border-left: 0; }
/* DESIGN-L2 §4-5「●見出し 24px」。テキストの ● ではなく .l2-heading と同じ円にして
   大きさ・色を揃える (テンプレート側の文字 ● は削除済み) */
.l2-3card__heading { font-size: var(--fs-l2-heading); color: var(--c-l2-head); font-weight: 700; margin: 0 0 24px; }
.l2-3card__heading::before {
  content: ""; display: inline-block; width: 21.4px; height: 21.4px; border-radius: 50%;
  background: var(--t-dark); margin-right: 10px; vertical-align: -3px;
}
.l2-3card__icon { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.l2-3card__icon img { max-width: 100%; max-height: 100%; }
.l2-3card p { font-size: 1rem; line-height: 1.6; margin: 0 0 24px; }
@media (max-width: 767px) {
  .l2-3card p { line-height: 1.7; }  /* DESIGN-L3 §5-0 D4: 本文行間 >=1.7 (SP のみ。PC は支給準拠のまま) */
  .l2-3cards { grid-template-columns: 1fr; gap: 32px; }
  .l2-3card { border-left: 0; border-top: 3px dotted var(--c-l2-sep); padding-top: 32px; }
  .l2-3card:first-child { border-top: 0; padding-top: 0; }
}

/* DESIGN-L3 §3-4 (③レビュー追加): PC 768–1439px の横スクロール真因2件。
   🔴 1440px には一切効かせない (max-width:1439px)。20/20 アンカーを守るため。
   真因1: .btn-l2 の固定幅 348.5px が .l2-3cards (repeat(3,1fr)) の下限を押し上げる。
   真因2: .footer-side + .sns-card/.opinion-card が 768–1439px で未流動化 (SP用流動化しか無い)。 */
@media (min-width: 768px) and (max-width: 1439px) {
  .l2-3cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .l2-3card .btn-l2 { width: 100%; max-width: 348.5px; }

  /* フッターは L2 だけに絞る。トップのフッターは支給準拠なので触らない (BRIEF §7-3)。
     トップ PC 中間域は OPEN-QUESTIONS-L3 §5 のまま次便送り。 */
  .site-footer--l2 .footer-side { padding-left: 24px; min-width: 0; }
  .site-footer--l2 .sns-card,
  .site-footer--l2 .opinion-card { width: 100%; max-width: 284px; }
  .site-footer--l2 .footer-main { min-width: 0; }
}

/* L14 (HP-ABOUT-11, DESIGN §3-9): L2 フッターはナビ3列を持たないため2列。🔴 SP の
   .footer-top{grid-template-columns:1fr} (0,1,0) を詳細度 (0,2,0) で潰さないよう、
   必ず min-width:768px の中に置く (REVIEW-DESIGN-L14 D-1)。 */
@media (min-width: 768px) {
  .site-footer--l2 .footer-top { grid-template-columns: 1fr auto; }
}
.site-footer--l2 .footer-philosophy p { word-break: keep-all; overflow-wrap: normal; }  /* プレーン文字間の折返しを止める (D-8)。ruby 境界は .nobr で束ねる (D-20) */

/* ===== L2-5. 施設を探す ===== */
.shisetsu-layout { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; padding-top: 32px; }
/* DESIGN-L3 §6-1: 検索あり時は DOM 順を「結果→絞り込み」に変えるが、PC の視覚配置 (左サイド/右結果) は
   grid-area で DOM 順と独立に維持する。SP は単一カラム = DOM 順どおり「結果が先」。 */
@media (min-width: 768px) {
  .shisetsu-layout--result { grid-template-columns: 380px 1fr; grid-template-areas: "side main"; }
  .shisetsu-layout--result .shisetsu-sidebar { grid-area: side; }
  .shisetsu-layout--result .shisetsu-main   { grid-area: main; }
}
.shisetsu-sidebar__lead { font-size: var(--fs-l2-lead); line-height: 1.75; margin: 16px 0 24px; }
.shisetsu-panel { background: var(--c-l2-tblval); border-radius: 8px; padding: 22px; margin-bottom: 24px; }
/* 🔴 flex + gap は <ruby> ごとに間隔を空けてしまう (l2-heading と同じ) */
.shisetsu-panel__heading {
  font-size: 1rem; color: var(--c-green); font-weight: 700; margin: 0 0 16px;
}
.shisetsu-panel__heading::before { content: "▶"; font-size: 0.7em; margin-right: 8px; }
.shisetsu-select {
  width: 100%; height: 30px; background: #fff; border: 1px solid var(--c-ink); border-radius: 4px;
  font-size: 0.75rem; padding-inline: 10px; margin-bottom: 7px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1.4 1.6L6 6.2l4.6-4.6' fill='none' stroke='%23140700' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.shisetsu-search-btn {
  width: 100%; height: 30px; background: var(--c-green); color: #fff; border: 0; border-radius: 4px;
  font-size: 0.875rem; display: flex; align-items: center; justify-content: center; cursor: pointer;
  position: relative;
}
/* 🔴 flex は残す (縦センターに要る)。gap は使わない
   — gap を付けると <ruby> の切れ目にも同じ隙間が入って「検索 する」のように割れる。
   虫眼鏡は PDF 実測どおり右端に絶対配置 (文字は中央のまま) */
.shisetsu-search-btn svg { width: 16px; height: 16px; flex: none; position: absolute; right: 10px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, 162.2px); gap: 14px 11.7px; }
.svc-btn {
  width: 162.2px; height: 41.1px; background: #fff; border: 1px solid var(--c-ink); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--c-ink);
  text-decoration: none;
}
/* 🔴 gap は <ruby> ごとの隙間にもなるのでアイコン側の margin で空ける */
.svc-btn svg { width: 24px; height: 24px; color: var(--c-line-korei); flex: none; margin-right: 8px; }
.map-window { width: 100%; max-width: 336px; border-radius: 6px; border: 1px solid var(--c-ink); overflow: hidden; background: var(--c-map-bg); }
.map-window img { display: block; width: 100%; height: auto; }
.area-btn-list { display: flex; flex-direction: column; gap: 8.3px; }
.area-btn {
  width: 100%; height: 30px; background: var(--c-green); color: #fff; border-radius: 4px;
  display: flex; align-items: center; padding-inline: 10px; font-size: 0.875rem;
  text-decoration: none;
}
/* 🔴 space-between だと「十日町」と「エリア」が左右に離れる。矢印だけ auto で右端へ */
.area-btn svg { width: 10px; height: 16px; flex: none; margin-left: auto; }
@media (max-width: 767px) {
  /* 🔴 grid item の暗黙最小サイズ (min-content) 対策: minmax(0,1fr) が無いと fontsize=l で
     sidebar/main の min-content がトラック幅を押し広げ、ドキュメントが横スクロールする (実測 393→416px) */
  .shisetsu-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .shisetsu-sidebar, .shisetsu-main { min-width: 0; }
  /* DESIGN-L3 §3-3: container が既に左右余白を持つので自己制限は不要 (むしろ二重に効いて縮む) */
  .shisetsu-panel { width: 100%; max-width: none; margin-inline: auto; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  /* DESIGN-L3 §5-8: タップ標的 44px (現行 41.1)。PC は PDF 寸法のまま触らない */
  .svc-btn { width: 100%; min-height: 44px; }
  .area-btn { min-height: 44px; }
  /* DESIGN-L3 §6-5: iOS ズーム対策 (16px 未満だとフォーカス時に画面ごと拡大される) */
  .shisetsu-select { font-size: 1rem; min-height: 48px; }
  .shisetsu-search-btn { font-size: 1rem; min-height: 48px; }
}

.facility-section { margin-bottom: 56px; }
.facility-section__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px dotted var(--c-l2-sep2); padding-bottom: 12px; margin-bottom: 4px;
}
.facility-section__title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.facility-section__sub { font-size: 0.625rem; letter-spacing: 0.15em; color: var(--c-ink); flex-basis: 100%; margin-top: -8px; }
.facility-section__count { font-size: 0.625rem; white-space: nowrap; }
@media (max-width: 767px) {
  /* DESIGN-L3 §5-1: 補足系 10px→11px */
  .facility-section__sub { font-size: 0.6875rem; }
  .facility-section__count { font-size: 0.6875rem; }
  /* 🔴 .facility-section__intro-body の SP 指定はここに書くと後続の基底宣言 (同一詳細度・後勝ち)
     に負けて 10px のままになる。基底宣言の直後に移した (S4 実測で発覚)。 */
}
.facility-section__count strong { font-weight: 700; }
.facility-section--korei  .facility-section__title { color: var(--c-sec-korei); }
.facility-section--shogai .facility-section__title { color: var(--c-sec-shogai); }
.facility-section--kodomo .facility-section__title { color: var(--c-sec-kodomo); }
.facility-section--sonota .facility-section__title { color: var(--c-sec-sonota); }
.facility-section--kyosei .facility-section__title { color: var(--c-sec-kyosei); }
/* DESIGN-L2 §5-3: 見出し上端→1枚目カード = 232.1 (高齢実測)。イントロ下marginで吸収する */
.facility-section__intro { margin: 16px 0 48px; }
.facility-section__intro-title { font-size: var(--fs-l2-body); font-weight: 700; margin: 0 0 8px; }
.facility-section__intro-body { font-size: 0.625rem; line-height: 1.8; margin: 0; }
/* DESIGN-L3 §5-1「施設 イントロ本文 10px → 13px (10px は D2 違反の最大源)」。
   🔴 基底宣言より後に置くこと (ソース順で後勝ちのため)。 */
@media (max-width: 767px) { .facility-section__intro-body { font-size: 0.8125rem; } }
.facility-section__empty { font-size: 0.875rem; color: var(--c-l2-head); padding: 16px 0; }

/* DESIGN-L3 §6-2/§6-3: 検索結果サマリー (PC/SP 共通)。既存トークンのみ使用・新規色トークンは作らない。
   タイル/タブ系ではないので配色3種で変化しない (a11y.css への追記は不要)。 */
.search-summary {
  background: var(--c-cal-head, #F2F9F4); border: 1px solid var(--c-green); border-radius: 8px;
  padding: 16px; margin-bottom: 32px;
}
.search-summary__count { font-size: 1rem; margin: 0 0 12px; }
.search-summary__count strong { font-weight: 700; }
.search-summary--empty p { font-size: 0.9375rem; margin: 0 0 16px; }
.search-summary__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.search-summary__chips:empty { margin: 0; }
.search-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 14px;
  background: #fff; border: 1px solid var(--c-green); border-radius: 16px;
  font-size: 0.875rem; color: var(--c-green); text-decoration: none;
}
.search-chip__x { font-size: 1rem; line-height: 1; }
.search-summary__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.search-summary__clear, .search-summary__edit { font-size: 0.875rem; color: var(--c-green); }
@media (max-width: 767px) {
  .search-chip { height: 44px; }
  .search-summary__clear, .search-summary__edit { min-height: 44px; display: inline-flex; align-items: center; }
}

.facility-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 22.1px; list-style: none; padding: 0; margin: 0; }
.facility-card {
  position: relative; display: flex; gap: 16px; background: var(--c-cream); border-radius: 8px; padding: 11px; min-height: 150px;
  text-decoration: none; color: inherit; transition: filter .15s;
}
.facility-card:hover { filter: brightness(1.03); }
.facility-card__photo { flex: none; width: 171px; height: 131px; border-radius: 6px; overflow: hidden; background: var(--c-l2-photo); }
.facility-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility-card__body { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; }
.facility-card__type { font-size: 0.75rem; margin: 0 0 6px; }
.facility-card__name { font-size: 1.125rem; font-weight: 500; margin: 0 0 8px; }
.facility-card__tags { display: flex; flex-wrap: wrap; gap: 6px 4.7px; margin-bottom: auto; }
.f-tag { display: inline-flex; align-items: center; height: 20px; padding-inline: 8px; border-radius: 10px; font-size: 0.5rem; }
.facility-card__area { display: flex; align-items: center; font-size: 0.625rem; margin-top: 8px; }
/* 🔴 gap ではなくピン側の margin (gap だと <ruby> の切れ目にも隙間が入る) */
.facility-card__area svg { width: 9.5px; height: 13.8px; color: var(--c-brown); flex: none; margin-right: 4px; }
.facility-card__arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 10.6px; height: 17.2px; color: var(--c-ink); }
.facility-card--korei  { border: 1px solid var(--c-line-korei); }
.facility-card--korei  .f-tag { background: var(--c-tag-korei); color: var(--c-line-korei); }
.facility-card--shogai { border: 1px solid var(--c-sec-shogai); }
.facility-card--shogai .f-tag { background: var(--c-tag-shogai); color: var(--c-sec-shogai); }
.facility-card--kodomo { border: 1px solid var(--c-sec-kodomo); }
.facility-card--kodomo .f-tag { background: var(--c-tag-kodomo); color: var(--c-sec-kodomo); }
.facility-card--sonota { border: 1px solid var(--c-sec-sonota); }
.facility-card--sonota .f-tag { background: var(--c-tag-sonota); color: var(--c-sec-sonota); }
.facility-card--kyosei { border: 1px solid var(--c-petal-pink); }   /* 枠線はロゴの花弁ピンク（非文字。白地 3.15:1） */
.facility-card--kyosei .f-tag { background: var(--c-tag-kyosei); color: var(--c-sec-kyosei); }
@media (max-width: 767px) {
  /* 🔴 grid item の暗黙最小サイズ対策 (.shisetsu-layout と同じ理由。fontsize=l で実測 393→416px) */
  .facility-grid { grid-template-columns: minmax(0, 1fr); }
  .facility-card { flex-direction: row; min-height: auto; }
  .facility-card__photo { width: 120px; height: 92px; }
  /* DESIGN-L3 §5-1: 種別11px / 名前16px / タグ10px / エリア11px */
  .facility-card__type { font-size: 0.6875rem; }
  .facility-card__name { font-size: 1rem; }
  /* 🔴 実測: fontsize=l + ruby=on の組み合わせで読みが長いタグ (「小規模多機能型…」等) が
     カード幅 (164px) を超えて横スクロールを誘発する (360px で scrollWidth 376)。
     固定高さ1行を諦めて2行まで折返し可能にする。 */
  .f-tag { font-size: 0.625rem; height: auto; min-height: 20px; max-width: 100%; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
  /* 🔴 実測: ruby の rt (ふりがな) が基底文字より長い場合、ruby 全体の描画幅が rt 側基準になり
     タグの折返しだけでは吸収しきれない (「小規模多機能型…」で 189px、カード内幅は約140-160px)。
     タグ内に限定して rt を縮小し、ruby グループ自体の最大幅を折返し可能な範囲に収める。 */
  .f-tag rt { font-size: 0.5em; }
  .facility-card__area { font-size: 0.6875rem; }

  /* 🔴 DESIGN-L3 §5-7-1 (③レビュー: 必ず SP 限定にする。PC に効かせるとアンカー 20/20→14/20 に壊れる実測済み)。
     タグ×矢印・施設名×矢印の重なり (実測7組) を解消。矢印レーンを常時確保する。 */
  .facility-card__arrow { right: 13.6px; top: 50%; transform: translateY(-50%); }
  .facility-card__body  { padding-right: 28px; }
}

/* ===== L2-7. 連絡帯 + フッター ===== */
/* DESIGN-L2 §7-1: 帯は 1440×100.4 (内容 h=72 → 上下 14.2px)。24px 均等だと h=120 になり
   §7-2 の「帯下端 3952.8 → 山並み 3985.3」の 32.5px の地色余白が潰れる */
.l2-contact-band { background: var(--c-cal-head, #F2F9F4); padding-block: 14.2px; }
.l2-contact-band .l2-container { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.l2-contact-band__label { font-size: 1.375rem; margin: 0; flex: none; }
.l2-contact-band__label small { display: block; font-size: 0.6875rem; font-weight: 400; }
.l2-contact-band__tel { display: flex; align-items: center; gap: 10px; flex: none; }
.l2-contact-band__circle {
  width: 35.7px; height: 35.7px; border-radius: 50%; background: var(--c-green); display: flex;
  align-items: center; justify-content: center; flex: none;
}
.l2-contact-band__circle svg { width: 18px; height: 18px; color: #fff; }
.l2-contact-band__tel-text { font-size: 2rem; font-family: var(--font-num); color: var(--c-green); display: block; }
.l2-contact-band__hours { font-size: 0.6875rem; margin: 2px 0 0; }
.l2-contact-band__btns { display: flex; gap: 7.6px; flex-wrap: wrap; margin-left: auto; }
.l2-contact-band__btn {
  width: 207.8px; height: 49.1px; background: #fff; border: 1px solid var(--c-green); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: var(--c-ink);
}
.l2-contact-band__btn svg { width: 24px; height: 24px; flex: none; }
/* DESIGN-L4 §2-6 (REVIEW-DESIGN-L4 D-1 修正版): PDF実測 (利用案内 8/18確定) はメール=1行/FAX=1行/窓口=2行。
   strong の display:block が「メール」と「で」を分離し3行化していたバグの修正 (§0-6)。
   🔴 fontsize=l (アクセシビリティ「大」) では文字が伸びるため、その場合のみ帯高さを可変にする
   (無条件で height:auto にすると fs=m でも 49.1→50px に動き、支給デザインの高さが変わってしまう)。 */
.l2-contact-band__btn strong { color: var(--c-green); font-size: 1rem; }
.l2-contact-band__btn span.sub { font-size: 0.75rem; display: inline-block; }
/* L14 (HP-ABOUT-07/08, DESIGN §3-6 / REVIEW-DESIGN-L14 D-21): 「メールで」/「お問い合わせ」
   「FAX」/番号を2段表示にするため常に可変高にする (fontsize=l 限定をやめる。3ボタンの高さは
   flex stretch で揃う)。 */
.l2-contact-band__btn { height: auto; min-height: 49.1px; }
.l2-contact-band__btn--stack { padding-block: 4px; }
.l2-contact-band__btn .l2-contact-band__btn-text--stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.l2-contact-band__btn .l2-contact-band__btn-text--stack .sub { font-size: 1rem; }   /* 「メールで」と同サイズにする ((0,3,0) で既存 (0,2,1) に勝つ) */
.l2-contact-band__btn .fax-num { font-size: 1.125rem; color: var(--c-ink); white-space: nowrap; }
@media (max-width: 767px) {
  /* DESIGN-L3 §5-6: 連絡帯 SP 再設計。ボタン内テキストが枠を突き抜けていた (固定44px + 改行入りテキスト) */
  .l2-contact-band .l2-container { flex-direction: column; align-items: stretch; gap: 16px; }
  .l2-contact-band__btns { width: 100%; flex-direction: column; }
  .l2-contact-band__label { font-size: 1.125rem; }
  .l2-contact-band__tel-text { font-size: 1.75rem; white-space: nowrap; }
  .l2-contact-band__btn {
    width: 100%; height: auto; min-height: 56px;   /* 🔴 固定44px廃止。fontsize=l は伸びて吸収 */
    justify-content: flex-start; gap: 12px; padding: 8px 16px;
  }
  .l2-contact-band__btn-text { display: flex; flex-direction: column; align-items: flex-start; }
  .l2-contact-band__btn-text br { display: none; }
  .l2-contact-band__btn strong { font-size: 1rem; }
  .l2-contact-band__btn span.sub { font-size: 0.8125rem; }
  .l2-contact-band__btn .fax-num { font-size: 1.125rem; white-space: nowrap; }
}

.l2-mountains {
  min-height: 33px;
  /* DESIGN-L2 §7-2: 連絡帯下端→稜線の地色余白。法人PDFは32.5、施設PDFは24.5 と 8px 食い違うため中間値 */
  margin-top: 28.5px;
  background: url('../assets/icons/wave-l2.svg') bottom / 100% auto no-repeat, var(--c-green-dark);
}
/* DESIGN-L2 §7-2: 本体上端4018.3 → ロゴ/ナビ見出し 4054 (pt=35.7)、
   左列ボタン下端4290.8 → 濃緑波帯 4309.6 (pb=18.8)。上下40px均等では白バーが30px下がる */
.site-footer--l2 .footer-top { padding-top: 35.7px; padding-bottom: 14.1px; }
.site-footer--l2 .footer-logo { width: 254px; height: 59px; }
.site-footer--l2 .footer-bottom-wave {
  background-image: url('../assets/icons/wave-bottom-l2.svg');
  min-height: 38.8px;
}
.site-footer--l2 .footer-bottom-bar__inner { min-height: 64.7px; }
@media (max-width: 767px) {
  /* DESIGN-L3 §5-8 (D5): タップ標的 44px。トップの支給準拠 (30px) は変えず L2 だけ引き上げる */
  .site-footer--l2 .foot-acc__head { min-height: 44px; }
}
@media (max-width: 767px) {
  .l2-mountains { min-height: 20px; }
  .site-footer--l2 .footer-bottom-wave { min-height: 30px; }
  /* DESIGN-L3 §4-5: L2 は原本座標が無いので波帯の重ね演出をやめ通常フローに戻す。
     トップの波高80pxでは -73px でも収まるが、L2 の波高30pxだと最下部リンク後半2本が波帯/白バーに潜っていた。
     🔴 トップ (footer-front) は触らない (支給準拠の重ね演出は原本どおり)。 */
  .site-footer--l2 .footer-bottom-wave { margin-top: 0; }
  .site-footer--l2 .footer-bottom-sp { padding-bottom: 12px; }
  .site-footer--l2 .footer-bottom-sp .footer-bottom-links a {
    display: flex; align-items: center; min-height: 44px;
  }
}

/* ===== L4-draft =====
   第4便たたき台専用 (DESIGN-L4 §4)。確定デザイン実装時に該当ページの draft- 依存を外し、
   9ページすべて確定したらこのブロックごと削除する (DESIGN-L4 §1-1)。
   🔴 REVIEW-DESIGN-L4 D-6: guide (確定ページ) が依存する .l2-heading--main / 写真プレースホルダは
   ここではなく L2 共通セクション (.photo-pending) に置いた。このブロックは本当に「たたき台のみ」。 */
.draft-hero { background: var(--t-pale); padding-block: 8px 32px; }
.draft-hero .page-title, .draft-hero .page-title h1 { color: var(--t-main); }
.draft-lead { font-size: var(--fs-l2-lead); line-height: 1.75; margin: 20px 0 0; max-width: 720px; }
.draft-catch { font-size: 1.3125rem; font-weight: 700; color: var(--t-main); margin: 24px 0 0; }

/* たたき台ページのタイトルアイコン (タイルSVG流用。§1-3)。既定 70x70。
   🔴 REVIEW-DESIGN-L4 D-7: guide 用の 75x58 は L4-guide 側で .page-title--guide にスコープする
   (ここに書くと全ページに波及して guide 以外まで潰れる)。 */
.page-title__icon { flex: none; display: inline-flex; }
.page-title__icon svg { width: 70px; height: 70px; }

.draft-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--c-cal-head, #F2F9F4);
  border: 1px solid var(--c-green); border-radius: 8px; padding: 14px 18px;
  font-size: var(--fs-l2-body); margin-block: 24px;
}
/* products-faq-20260919 (依頼4-3): /faq/ のヒーロー下文章だけ、通知枠を外した「通常文字組」にする。
   文言・掲載箇所は変えず、背景色・枠・パディングだけ解除する。 */
.draft-note--plain {
  display: block; background: none; border: 0; border-radius: 0; padding: 0;
  color: var(--c-l2-head); margin-block: 0 24px;
}
.draft-pending {
  background: var(--c-l2-tblval); border-radius: 8px; padding: 32px 24px; text-align: center;
  font-size: var(--fs-l2-body); line-height: 1.75; color: var(--c-l2-head);
}

.draft-cards { display: grid; gap: 20px; }
.draft-cards--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.draft-cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.draft-cards--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.draft-cards--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.draft-card {
  background: #fff; border: 1px solid var(--c-l2-cardbd); border-radius: 8px;
  padding: 20px 16px; text-align: center;
}
.draft-card__icon { display: flex; justify-content: center; margin-bottom: 12px; }
.draft-card__icon svg { width: 40px; height: 40px; color: var(--t-main); }
.draft-card__title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.draft-card__desc { font-size: var(--fs-l2-small); line-height: 1.7; text-align: left; margin: 0; }
a.draft-card { text-decoration: none; color: inherit; }
a.draft-card:hover, a.draft-card:focus-visible { background: var(--c-l2-navhov); }
/* L14 ADD-59 ⑧ (地域の方へ): パネルのアイコンは SDGs ロゴを除いて #009A9C (= body.page-community の --t-main) に統一。
   支給の info_icon 派生 SVG は塗り指定を持たず、ic-megaphone は #006937 の直書きなので、図形要素ごとに currentColor を当てる。
   SDGs ロゴ (.draft-card__icon--sdgs) は各要素の fill 属性の原色のまま。他ページの .draft-card__icon には効かない (page-community スコープ)。 */
body.page-community .draft-card__icon:not(.draft-card__icon--sdgs) svg :is(path, rect, polygon, circle, ellipse) { fill: currentColor; }
/* SDGs ロゴは横長 (viewBox 604.27×75.03)。40×40 の枠では判読できないので、カード幅いっぱい (上限 12.5rem)・高さ 40px の枠に収める (中央寄せ・比率維持) */
body.page-community .draft-card__icon--sdgs svg { width: 100%; max-width: 12.5rem; height: 40px; }

.draft-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c-l2-cardbd); }
.draft-list li {
  display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 8px 12px;
  border-bottom: 1px solid var(--c-l2-cardbd); font-size: var(--fs-l2-body);
}
.draft-list li strong { flex: none; min-width: 9em; font-weight: 700; color: var(--t-main); }

.draft-dl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.draft-dl a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px;
  background: #fff; border: 1px solid var(--c-l2-cardbd); border-radius: 6px;
  font-size: var(--fs-l2-body); color: var(--c-ink); text-decoration: none;
}
.draft-dl a:hover, .draft-dl a:focus-visible { background: var(--c-l2-navhov); }
.draft-dl .dl-meta { margin-left: auto; font-size: var(--fs-l2-small); color: var(--c-l2-head); flex: none; }

.draft-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.draft-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 18px;
  background: #fff; border: 1px solid var(--t-main); border-radius: 22px;
  font-size: var(--fs-l2-body); color: var(--t-main); text-decoration: none;
}
.draft-chip:hover, .draft-chip:focus-visible { background: var(--t-pale); }

.draft-qlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.draft-q {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--c-l2-cardbd); border-radius: 6px; font-size: 1rem;
}
/* products-faq-20260919: FAQ xlsx の回答を追加したため Q/A の2行構成にする (旧: 質問のみ1行)。
   🔴 テキストは必ず1個の .draft-q__text にまとめて渡す。fukushikai_ruby() の出力 (ruby要素と
   地の文テキストノードが交互に並ぶ) を display:flex の直接の子として置くと、各ノードが
   個別の匿名flexアイテムになり、flex-wrap無指定のため折り返せずに1文字ずつ縦積みで
   崩れる (実機のSP幅で再現・確認済み)。 */
.draft-q__q, .draft-q__a { display: flex; align-items: flex-start; gap: 12px; margin: 0; line-height: 1.7; }
.draft-q__text { flex: 1 1 auto; min-width: 0; }
.draft-q__a { color: var(--c-l2-head); }
/* 🔴 2026-09-19 高橋社長指示: 回答が未作成の6問は、法人側が対応を忘れないよう**赤字**で目立たせる。
   確定した回答が届いたら inc/faq-data.php の 'a' を埋めるだけで通常表示（--c-l2-head）に戻る。 */
.draft-q__a--pending { color: var(--c-red); font-style: italic; font-weight: 500; }
.draft-q__a--pending .draft-q__mark--a { background: var(--c-red); }
.draft-q__mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--t-main);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; font-family: var(--font-num); margin-top: 2px;
}
.draft-q__mark--a { background: var(--c-l2-head); }

/* ===== L14-ADD access (DESIGN-ADD v5 §2-4). デザイン元: 20260914_総合ページ_第3階層_アクセスページ.pdf (1 unit = 1px) ===== */
body.page-access { --t-main:#74AB5F; --t-dark:#506331; --t-pale:#F1F8DD; }      /* 法人について配下の配色 */
.access-page { padding-block: 24px 64px; }
@media (min-width: 768px) {
  /* 固定「ページの先頭へ」(right:24 + 幅89px) と右列の交差回避。
     🔴 v5/IA-3: 768px から適用する（v4 は 900px 以上だけだった）。`.pagetop--fixed` はサイト全体の
     767px ブレークポイントで 768px から可視になるのに対し、この表は 899px まで縦積みで右列が
     width:100% まで伸びるため、v4 では 768〜899px に「pagetop は可視・右余白は 0」という帯が残り、
     200px 刻みスクロールで交差 23 件が出る（S3 が実測発見。§11-3 差異 (2)）。
     余白は `.access-table__side` ではなく `.access-page` に置く: side 側に置くと縦積み時に
     値ボックスだけが全幅のまま残り、上下に積まれた箱の右端が 112px ずれる（IA-3）。 */
  .access-page { padding-right: 112px; }
}
.access-title { font-size: var(--fs-l2-h1); font-weight: 700; color: var(--t-dark); margin: 0 0 40px; }
.access-fac { margin-bottom: 27px; }                                              /* 表下端→次の heading ボックス上端 27px (= PDF ●基準 34.7 − ●オフセット。A-27) */
.access-fac__heading { display: block; margin-bottom: 8px; }                      /* heading 下端→表上端 8px (= PDF ●基準 14.5 − オフセット)。flex にしない (A-4。§6 #31 が computed display で検査) */
.access-fac__detail { display: inline-flex; align-items: center; gap: 4px; margin-left: 20px; min-height: 24px; padding-block: 2px; vertical-align: baseline;
                      font-size: 0.875rem; font-weight: 700; color: var(--t-dark); text-decoration: none; }
.access-fac__detail svg { width: 7px; height: 12px; flex: none; }
.access-fac__detail:hover, .access-fac__detail:focus-visible { text-decoration: underline; }
.access-table { margin: 0; display: grid; gap: 9px; }
.access-table__row { display: grid; grid-template-columns: 109px minmax(0,1fr); gap: 0 15px; }
.access-table dt { margin: 0; min-height: 36px; display: flex; align-items: center; justify-content: center; background: #E1E1E1; font-size: 1rem; }
.access-table dd { margin: 0; min-width: 0; display: flex; align-items: stretch; gap: 15px; }
.access-table__value { flex: 1 1 auto; min-width: 0; min-height: 36px; display: flex; align-items: center; padding-inline: 16px; background: #EFF0F0;
                       font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; line-break: strict; }   /* keep-all は使わない (A-24/A-30)。禁則は strict */
.access-table__side { flex: 0 0 152px; display: flex; }
/* 🔴 v5/IA-2: 右列は「白地＋2px #E1E1E1 枠」。v4 の `background:#E1E1E1; border:0`（A-28）は誤りだった（D-032）。
   PDF の 35 パスは外周 winding −1 ＋ 内側 winding +1 の 2 サブパスで、内側が穴＝白に抜けるフレーム形状。
   枠の実測は 2.126px → CSS は 2px。`box-sizing:border-box` により外形は 152×36 のまま変わらない。 */
.access-map-btn, .access-area { flex: 1 1 auto; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
                                background: #fff; border: 2px solid #E1E1E1; border-radius: 0; box-sizing: border-box; text-decoration: none; }
.access-map-btn { color: #005830; font-weight: 700; font-size: 1rem; }
.access-map-btn svg { width: 18px; height: 22px; flex: none; }
.access-map-btn:hover, .access-map-btn:focus-visible { background: var(--t-pale); }   /* 白地ボタンの hover は薄い地色 (= .draft-chip と同じ流儀)。v4 の #D3D3D3 は塗り前提だったため廃止 */
.access-area { font-size: 0.875rem; color: #4D4D4D; }
@media (max-width: 899px) {   /* 🔴 このページだけ縦積みの境界を 899px に上げる (A-42: 768〜850px で値列が 329px まで縮み番地が割れるため。実測 768/820/899 で1文字行 0・横溢れ 0) */
  .access-title { font-size: 1.5rem; margin-bottom: 28px; }
  .access-fac { margin-bottom: 28px; }
  .access-fac__detail { margin-left: 12px; }
  .access-table__row { grid-template-columns: 1fr; gap: 0; }
  .access-table dt { justify-content: flex-start; padding-inline: 14px; min-height: 40px; }
  .access-table dd { flex-direction: column; gap: 8px; }
  .access-table__value { padding: 10px 14px; min-height: 44px; }
  .access-table__side { flex: none; }
  .access-table__side:empty { display: none; }
  .access-map-btn, .access-area { min-height: 44px; width: 100%; }                 /* タップ標的 44px (SP。border 込みで 44px = box-sizing:border-box)。PC は PDF の 36px */
}

.draft-product { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start;
  padding-block: 24px; border-bottom: 1px solid var(--c-l2-cardbd); }
/* 🔴 S4(⑤)修正: <img width="1600" height="1200"> の height 属性が presentational hint として
   height:1200px を作るため、width と height が両方確定して aspect-ratio が無視され、
   商品写真が 320×1200px / 320×1600px の縦長で描かれていた。height:auto で比率を効かせる。 */
.draft-product img, .draft-product .photo-pending { width: 320px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.draft-product__name { font-size: 1.3125rem; font-weight: 700; margin: 0 0 12px; }
.draft-product__desc { font-size: var(--fs-l2-body); line-height: 1.75; margin: 0 0 12px; }
.draft-product__meta { font-size: var(--fs-l2-body); color: var(--c-l2-head); margin: 0; }

/* ===== /products/ 自主製品／クラフトファクトリー (products-faq-20260919) ===== */
/* ADD-60: PC (900px〜) は右列に新画像1枚 (透過PNG・幅600px程度)、SP (〜899px) は従来の3枚を縦積み。
   PC の本文は画像の高さに合わせて上下中央に置く。読点・句点の区切りで改行する (.product-intro__br) の
   境目は、文字サイズ「大」(html[data-fontsize="l"]) では孤立行が消える最小幅 1260px から、
   それ以外の文字サイズ「中」(既定。JS無効で data-fontsize が無いときも中扱い) では 1080px から出す。
   5px刻みの走査で両文字サイズ・ふりがな off/on とも孤立行 0 幅であることを確認済み (DESIGN-ADD60.md §5-3、
   S2 MAJOR-1)。この2幅に満たない PC 幅と SP では改行を入れず自然に折り返す。 */
.product-intro { display: grid; grid-template-columns: minmax(0, 1fr) min(600px, 50%); gap: 48px; align-items: center; }
.product-intro__text p { font-size: var(--fs-l2-body); line-height: 1.9; margin: 0 0 20px; }
.product-intro__br { display: none; }
@media (min-width: 1080px) { html:not([data-fontsize="l"]) .product-intro__br { display: inline; } }
@media (min-width: 1260px) { html[data-fontsize="l"] .product-intro__br { display: inline; } }
.product-intro__text p:last-child { margin-bottom: 0; }
.product-intro__visual { display: block; width: 100%; height: auto; }
.product-intro__photos { display: none; gap: 12px; }
.product-intro__photos img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; }

.product-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; }
.product-section__head .l2-heading { margin-bottom: 0; }
.product-section__more { flex: none; font-size: var(--fs-l2-small); color: var(--t-main); white-space: nowrap; }
.product-section__more:hover, .product-section__more:focus-visible { text-decoration: none; }

.product-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.product-feature__card { background: var(--t-pale); border-radius: 12px; padding: 24px; }
.product-feature__card img { width: 100%; height: auto; aspect-ratio: 1200 / 494; object-fit: cover; border-radius: 8px; margin-bottom: 16px; }
.product-feature__side { display: grid; gap: 16px; align-content: start; }
.product-feature__side-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-feature__side-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.product-feature__catch { font-size: 1.375rem; font-weight: 700; line-height: 1.5; margin: 0; color: var(--c-l2-head); }
.product-feature__catch-desc { font-size: var(--fs-l2-body); line-height: 1.8; margin: 8px 0 0; }

.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.product-card { background: var(--t-pale); border-radius: 12px; padding: 20px; }
.product-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; margin-bottom: 14px; }
.product-card__badge { font-size: var(--fs-l2-small); color: var(--t-dark); margin: 0 0 6px; }
.product-card__name { font-size: 1.125rem; font-weight: 700; margin: 0 0 8px; }
.product-card__desc { font-size: var(--fs-l2-small); line-height: 1.75; margin: 0 0 10px; }
.product-card__meta { font-size: var(--fs-l2-small); color: var(--c-l2-head); margin: 0 0 10px; }
.product-card__meta:last-child { margin-bottom: 0; }
.product-card__soon-note { color: var(--t-dark); }
.product-card--text { display: flex; flex-direction: column; justify-content: center; }
.product-card--text .product-card__name:not(:first-child) { margin-top: 14px; }

.product-banner { display: block; grid-column: span 1; border-radius: 12px; overflow: hidden; align-self: center; }
.product-banner img { width: 100%; height: auto; display: block; }

.product-footnote { font-size: var(--fs-l2-small); color: var(--c-l2-head); margin: 24px 0 0; }

@media (max-width: 899px) {
  .product-intro { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .product-intro__visual { display: none; }
  .product-intro__photos { display: grid; }
  .product-feature { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 599px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-feature__side-photos { grid-template-columns: 1fr 1fr; }
}
/* L14 ADD-62 A③（2026-09-29 社長）: わっかふぇ料理写真の直下に「※イメージです」（Q-6 既定: 右寄せ・小さい薄字。写真下 6px、名前との間 10px） */
.product-card__note { font-size: var(--fs-l2-small); color: var(--c-l2-head); text-align: right; margin: -8px 0 10px; }

.draft-event-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.draft-event-list a {
  display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 10px 18px;
  background: #fff; border: 1px solid var(--c-l2-cardbd); border-radius: 8px;
  font-size: 1rem; color: var(--c-ink); text-decoration: none;
}
.draft-event-list a:hover, .draft-event-list a:focus-visible { background: var(--c-l2-navhov); }
.draft-event-list .ev-date { flex: none; min-width: 96px; font-family: var(--font-num);
  font-weight: 700; color: var(--t-dark); }
.draft-event-list .ev-place { margin-left: auto; font-size: var(--fs-l2-small); color: var(--c-l2-head); flex: none; }
/* admin 第2便 2-E3（DESIGN-ADMIN-2E3.md §2-3）: /events/ 一覧も本部のイベントだけ「法人本部」。 */
.draft-event-list .ev-place--honbu { color: var(--c-green); }

.draft-form { display: grid; gap: 20px; max-width: 720px; }
.draft-form label { font-size: 1rem; font-weight: 700; display: block; margin-bottom: 6px; }
.draft-form .req { color: var(--c-red, #EC2027); font-size: var(--fs-l2-small); font-weight: 400; margin-left: 8px; }
.draft-form input[type="text"], .draft-form input[type="tel"], .draft-form input[type="email"],
.draft-form select,   /* L14 CONTACT-0930 ②: 宛先の select を入力欄と同じ枠に（DESIGN-CONTACT0930.md §2-5） */
.draft-form textarea {
  width: 100%; min-height: 48px; font-size: 1rem; padding: 10px 12px;
  border: 1px solid var(--c-ink); border-radius: 4px; background: #fff;
}
.draft-form textarea { min-height: 160px; }
.draft-form .form-note { font-size: var(--fs-l2-small); color: var(--c-l2-head); margin-top: 4px; }
.draft-form fieldset { border: 0; padding: 0; margin: 0; }
.draft-form .radio-row { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 1rem; }
.draft-form button[disabled] {
  width: 100%; max-width: 357.9px; min-height: 48px; margin-inline: auto;
  background: var(--c-l2-tblval); color: var(--c-l2-head); border: 1px solid var(--c-l2-cardbd);
  border-radius: 6px; font-size: 1rem; cursor: not-allowed;
}

@media (max-width: 767px) {   /* SP: L3 の確立規則。全カード1カラム化・16px本文・44px標的 */
  .draft-lead { font-size: 1rem; }
  .draft-cards--2, .draft-cards--3, .draft-cards--4 { grid-template-columns: 1fr; }
  .draft-cards--5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .draft-card__desc { font-size: 0.8125rem; }
  .draft-q { font-size: 0.9375rem; }
  .draft-product { grid-template-columns: 1fr; }
  .draft-product img, .draft-product .photo-pending { width: 100%; }
  .draft-list li strong { min-width: 7em; }
  .draft-event-list a { flex-wrap: wrap; }
  .draft-event-list .ev-place { margin-left: 116px; }
}

/* ===== L4-guide ===== (確定・利用案内 20260818 PDF 実測準拠。DESIGN-L4 §3-1-5〜7)
   guide は draft- を使わない確定ページなので、このブロックは9ページ確定後も削除しない。 */
.guide-layout { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 36px; }
.page-title--guide h1 { font-size: 2.25rem; }      /* 36px。--t-main 色は共通規則 (下) */
.page-title--guide, .page-title--guide h1 { color: var(--t-main); }
/* REVIEW-DESIGN-L4 D-7 修正: guide にスコープ (共通既定は L4-draft の 70x70) */
.page-title--guide .page-title__icon svg { width: 75px; height: 58px; }
.guide-lead { font-size: var(--fs-l2-lead); line-height: 1.75; margin: 24px 0 21px; }
.guide-nav { display: flex; flex-direction: column; gap: 7.8px; }
.guide-nav__item {
  display: flex; align-items: center; height: 48px; background: #fff;
  border: 1px solid var(--c-l2-navbd); border-radius: 6px; padding-inline: 25px 20px;
  font-size: var(--fs-l2-nav); color: var(--c-l2-head); text-decoration: none;
}
.guide-nav__item svg { width: 7.8px; height: 12.5px; color: var(--c-l2-navarw); flex: none; margin-left: auto; }
.guide-nav__item--parent { background: var(--c-l2-navhov); }
.guide-nav__item--parent .guide-nav__caret { transform: rotate(90deg); }
.guide-nav__item--child { margin-left: 27.3px; }
.guide-nav__item:hover, .guide-nav__item:focus-visible { background: var(--c-l2-navhov); }
.guide-hero-photo { width: 100%; height: 433px; object-fit: cover; display: block; margin-bottom: 0; }
.guide-main .l2-heading--main:first-of-type { margin-top: 0; }
.guide-svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px 22px; }
.guide-svc-card { position: relative; background: var(--c-cream); border: 1px solid var(--c-l2-navbd);
  border-radius: 8px; min-height: 210px; padding: 20px; display: grid;
  grid-template-columns: minmax(0,1fr) 170px; grid-template-rows: auto 1fr auto; gap: 8px 16px; }
.guide-svc-card__head { font-size: 1.3125rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.guide-svc-card__head svg { width: 30px; height: 30px; }
/* L14 ADD-57 ①〜④: 見出しの文字を1つの span に包み、flex アイテムを svg と文字の2つにする。
   ruby と地の文が別々の flex アイテムになると gap:8px が文字の間にも入り (「高齢者 福祉」)、
   狭い幅では各アイテムが1文字幅まで縮んで縦積みになっていた。前例 .anchor-nav__label (REVIEW-DESIGN-L14 D-20) と同じ形。 */
.guide-svc-card__label { min-width: 0; }
.guide-svc-card__desc { font-size: var(--fs-l2-small); line-height: 1.67; grid-column: 1; }
.guide-svc-card__photo { grid-column: 2; grid-row: 1 / 4; }   /* L4: photo-pending / L11: 実画像 (img) */
.guide-svc-card__more { grid-column: 1; justify-self: start;
  display: inline-flex; align-items: center; gap: 8px; width: 139.4px; height: 30px; justify-content: center;
  background: #fff; border: 1px solid var(--c-l2-navbd); border-radius: 4px;
  font-size: var(--fs-l2-small); color: var(--c-l2-navbd); text-decoration: none; }
/* 🔴 S4(⑤)修正: viewBox="0 0 8 13" のシェブロンに width/height 属性が無く、CSS 寸法も
   無かったため、flex の空きいっぱいに伸びて 88×143px / 247×401px の巨大な矢印が
   ページ中央に描かれていた (mockup/CLAUDE.md §2 の viewBox の落とし穴)。
   同種の .guide-nav__item svg (7.8×12.5px) と同じ扱いに揃える。 */
.guide-svc-card__more svg { width: 7.8px; height: 12.5px; flex: none; }
.guide-steps { display: grid; grid-template-columns: repeat(3, 238px); column-gap: 57.7px; row-gap: 31.5px; }
.guide-steps > :nth-child(n+4) { margin-left: 46px; }   /* 下段の右シフト 46.2 実測 */
.guide-step { position: relative; background: #F2F2F2; border: 1px solid var(--c-l2-navbd); border-radius: 8px;
  min-height: 303px; padding: 24px 20px; text-align: center; }
.guide-step:not(:nth-child(3)):not(:nth-child(6))::after {   /* カード間シェブロン */
  content: ""; position: absolute; right: -38px; top: 50%; width: 14px; height: 14px;
  border-top: 3px solid var(--c-ink); border-right: 3px solid var(--c-ink);
  transform: translateY(-50%) rotate(45deg); }
.guide-step__no { font-family: var(--font-num); font-size: 1.3125rem; color: var(--c-l2-navbd); }
/* L14 ADD-57 ⑤〜⑩: STEP 01〜06 の下のアイコン (支給 info_icon_001〜006 の派生。色は支給どおり)。
   大きさは施設ページの STEP アイコン (.lp-steps svg 2.75rem) に揃える。viewBox だけの SVG なので寸法を必ず指定する */
.guide-step__icon { display: block; }
.guide-step__icon svg { display: block; width: 2.75rem; height: 2.75rem; margin: 12px auto 0; }
.guide-step__name { font-size: 1.1875rem; font-weight: 700; margin: 12px 0 8px; }
.guide-step__desc { font-size: var(--fs-l2-small); line-height: 1.67; text-align: left; }
.guide-note { font-size: var(--fs-l2-small); margin: 40px 0; }
/* PC中間域 (768-1439px): 固定238px×3列 (=1440px前提のPDF実測値) では収まらないため流動化する。
   タブ帯の768-1333pxブレークポイント (L2-2) と同じ考え方。ピクセル精度は1440px以上でのみ保証。 */
@media (min-width: 768px) and (max-width: 1439px) {
  .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .guide-steps > :nth-child(n+4) { margin-left: 0; }
  .guide-step::after { display: none; }
  .guide-svc-card { grid-template-columns: minmax(0,1fr) 120px; }
}
/* L14 ADD-57 利用案内②（ADD57-D-18）: 768〜1199px は サイドナビ380px＋カード2列＋写真列120px で、見出しの列が 0〜85px まで潰れ
   「障がい者福祉」等が1文字ずつ縦に積まれていた（実測: 768〜976px で全見出しが1文字/行）。この帯だけカードを1列にして横書きを保つ。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .guide-svc-grid { grid-template-columns: minmax(0,1fr); }
}
.guide-info2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.guide-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 357.9px; height: 48px; background: #fff;
  border: 1px solid var(--c-l2-navbd); border-radius: 6px;
  color: var(--c-l2-head); font-size: 1rem; text-decoration: none; margin-top: 24px; }
.guide-btn svg { width: 7.8px; height: 12.5px; flex: none; }   /* 🔴 S4(⑤)修正: 同上 */
@media (max-width: 767px) {   /* SP 導出: L3 の確立規則 (16px本文 / 全幅356 / 44px標的 / 1カラム) */
  .guide-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .guide-lead { font-size: 1rem; }
  .guide-hero-photo { height: 220px; }
  .guide-svc-grid { grid-template-columns: minmax(0,1fr); }
  /* 🔴 S4(⑤)修正: 1fr のままだと本文列が min-content 未満に縮めず、SP360 + 文字サイズ大で
     カードが 28px はみ出す (docSW=388 / vw=360)。PC中間域の同種指定 (minmax(0,1fr) 120px) に揃える。 */
  .guide-svc-card { grid-template-columns: minmax(0,1fr) 120px; }
  .guide-svc-card__desc { font-size: 0.8125rem; }
  .guide-steps { grid-template-columns: 1fr; row-gap: 40px; }
  .guide-steps > :nth-child(n+4) { margin-left: 0; }
  .guide-step { min-height: 0; }
  .guide-step::after { display: none; }
  .guide-info2 { grid-template-columns: 1fr; }
  .guide-nav__item { height: 48px; }
}

/* ===== L8-entry ===== (第8便新設 single.php。post/event 個別ページ。デザインPDF無し = 改変自由の領域) */
.entry { padding-block: 24px 48px; }
.entry-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: var(--fs-date); color: var(--c-text); }
.entry-meta time { font-variant-numeric: tabular-nums; }
.entry-meta__place { color: var(--c-l2-head); }
.entry-content { font-size: 1rem; line-height: 1.9; }
.entry-content p { margin: 0 0 1em; }
.entry-source { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--c-l2-navbd); font-size: 0.9375rem; }
.entry-source a { color: var(--t-main, var(--c-green-btn)); }
.entry-back { margin-top: 24px; }
.entry-back a { color: var(--c-ink); text-decoration: none; }
.entry-back a:hover { text-decoration: underline; }

/* ===== L5-lp ===== (第5便・三好園LP。確定PDF実測準拠。DESIGN-L5 + REVIEW-DESIGN-L5 D-1〜D-20 反映)
   🔴 セレクタは全て body.lp-facility 配下 + .lp- 接頭辞。既存セレクタの値は1件も変更していない。
   🔴 D-2: 寸法は px 実測値の rem 換算 (16px基準)。html[data-fontsize] の % スケールに追従する。 */
body.lp-facility {
  --lp-green-deep: #386B4E;
  --lp-green: #4A7E57;
  --lp-cream: #EFECC2;
  --lp-sand-1: #FBFAF7;   /* D-12実測: フッター上端は白に近いオフホワイト */
  --lp-sand-2: #DDC280;
  --lp-hill-light: #517253;   /* D-12実測: 山並み(明) */
  --lp-hill-dark: #295735;    /* D-12実測: 山並み(暗) */
  --lp-pine: #23452D;         /* D-12実測: 最下帯(コピーライト) */
  --lp-ink: #100F10;
  --lp-card-border: #C6C6C6;
  --lp-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --lp-container: 1080px;
  /* L11 依頼1: 見出しの「飾り」トークン。意匠を差し替える時はここだけ触る (DESIGN-L11 §4-2)。
     角丸バーにする例: --lp-deco-w:.5rem; --lp-deco-h:1.6em; --lp-deco-radius:999px */
  --lp-deco-w: 1.125rem;
  --lp-deco-h: 1.125rem;
  --lp-deco-radius: 50%;
  --lp-deco-bg: var(--lp-green-deep);
  --lp-deco-gap: 0.75rem;
  background: #fff;
  color: var(--lp-ink);
  font-family: var(--font-base);
}
html[data-theme="contrast"] body.lp-facility {
  --lp-green: #2C5E3C;
  --lp-sand-1: #EDE6D5;
  --lp-sand-2: #C9A75E;
}
body.lp-facility .lp-container { width: min(var(--lp-container), 100% - 2 * var(--sp-pad)); margin-inline: auto; }

/* --- ヘッダー (白地 + 施設名バッジ、ヒーローに重ねる) --- */
body.lp-facility .lp-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  background: #fff; height: 4.25rem; display: flex; align-items: center;
}
body.lp-facility .lp-header__inner { display: flex; align-items: center; gap: 2rem; height: 100%; }
body.lp-facility .lp-header__logo img { display: block; width: 9.5rem; height: auto; }
body.lp-facility .lp-badge { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem;
  background: var(--lp-cream); border-radius: 6px; padding: 0.375rem 1rem; margin: 0; }
body.lp-facility .lp-badge__type { font-size: 0.75rem; color: var(--lp-ink); }
body.lp-facility .lp-badge__name { font-size: 1.625rem; color: var(--lp-green-deep); font-weight: 700; line-height: 1.2; }

/* --- ヒーロー (全幅ブリード + 左白フェード + ヘッダーへの重なり。D-3実測: img-000 x118-1315/y22-566) --- */
body.lp-facility .lp-hero-wrap { position: relative; margin-top: 0; }
body.lp-facility .lp-hero { position: relative; background: #fdfcfa; overflow: hidden; padding-top: 1.5rem; }
body.lp-facility .lp-hero__inner { position: relative; min-height: 24.5rem; display: flex; align-items: center; }
body.lp-facility .lp-hero__visual {
  position: absolute; right: calc(-1 * var(--sp-pad)); top: 0; height: 100%; width: 68%; max-width: none;
  object-fit: cover; object-position: right center; display: block;
}
body.lp-facility .lp-hero__text { position: relative; z-index: 1; max-width: 34rem; padding-block: 2rem 5rem; }
body.lp-facility .lp-hero__catch {
  font-family: var(--lp-font-serif); font-weight: 300; font-size: 2.5rem; line-height: 1.4;
  letter-spacing: 0.1em; color: var(--lp-ink); margin: 0 0 1.25rem;
}
body.lp-facility .lp-hero__lead { font-size: 0.875rem; line-height: 2; color: var(--lp-ink); margin: 0; }

/* --- CTAバー (濃緑帯、ヒーロー下部に重ねる) --- */
body.lp-facility .lp-cta {
  position: relative; z-index: 2; margin-top: -3.5rem; margin-bottom: 2.5rem;
  background: var(--lp-green-deep); border-radius: 16px; color: #fff;
  display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 2rem; flex-wrap: wrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
body.lp-facility .lp-cta__btn {
  display: flex; align-items: center; gap: 0.75rem; background: #fff; color: var(--lp-ink);
  border-radius: 10px; padding: 0.75rem 1.25rem; text-decoration: none; min-width: 13rem;
}
body.lp-facility .lp-cta__btn svg { width: 2rem; height: 2rem; flex: none; }
body.lp-facility .lp-cta__btn strong { display: block; font-size: 1rem; }
body.lp-facility .lp-cta__btn span { display: flex; flex-direction: column; gap: 0.125rem; font-size: 0.75rem; }
body.lp-facility .lp-cta__tel { margin-left: auto; text-align: right; }
body.lp-facility .lp-cta__tel-label { font-size: 0.875rem; margin: 0 0 0.25rem; }
body.lp-facility .lp-cta__tel-num {
  font-family: var(--font-num); font-size: 2.25rem; display: flex; align-items: center; justify-content: flex-end;
  gap: 0.5rem; margin: 0;
}
body.lp-facility .lp-cta__tel-num svg { width: 1.5rem; height: 1.5rem; }
body.lp-facility .lp-cta__tel-hours { font-size: 0.75rem; margin: 0.25rem 0 0; }

/* --- 汎用: 見出し・カード・区切り --- */
/* L11 依頼1: 「丸数字＋項目名」→「飾り＋項目名」。飾りは ::before 1個 (--lp-deco-* で差し替え可)。
   🔴 gap は 0 に固定し、間隔は ::before の margin-right で作る。第9便LPの見出しは <ruby> を含み、
   flex の gap だと ruby ごとに隙間が入る (旧 L9-fix と同じ理由)。bespoke 4LP も同じ規則に揃える。 */
body.lp-facility .lp-heading {
  display: flex; align-items: center; gap: 0; font-size: 1.3125rem; color: var(--lp-green);
  font-weight: 700; margin: 0 0 1.25rem;
}
body.lp-facility .lp-heading::before {
  content: ""; flex: none; width: var(--lp-deco-w); height: var(--lp-deco-h);
  border-radius: var(--lp-deco-radius); background: var(--lp-deco-bg); margin-right: var(--lp-deco-gap);
}
body.lp-facility .lp-section { margin-bottom: 3rem; }
body.lp-facility .lp-dots {
  height: 1px; margin: 2.5rem 0;
  background-image: repeating-linear-gradient(to right, #999 0 3px, transparent 3px 7px);
}
body.lp-facility .lp-2col { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2.6875rem; margin-bottom: 3rem; }
body.lp-facility .lp-2col--cards { margin-bottom: 0; }
body.lp-facility .lp-card {
  background: #fff; border: 1px solid var(--lp-card-border); border-radius: 12px; padding: 1.75rem;
}

/* --- ①施設基本情報 / ⑧来訪情報 (dl テーブル) --- */
body.lp-facility .lp-info-table { margin: 0; }
body.lp-facility .lp-info-table > div {
  display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: 0.5rem 1rem;
  padding: 0.625rem 0; border-bottom: 1px solid #E5E5E5; align-items: baseline;
}
body.lp-facility .lp-info-table > div:last-child { border-bottom: 0; }
body.lp-facility .lp-info-table dt { margin: 0; font-size: 0.875rem; color: var(--lp-green); font-weight: 700; }
body.lp-facility .lp-info-table dd { margin: 0; font-size: 0.875rem; line-height: 1.6; }
body.lp-facility .lp-info-table--raiho > div { grid-template-columns: 6rem minmax(0,1fr); }

/* --- ②お知らせ --- */
body.lp-facility .lp-news { list-style: none; margin: 0 0 1.25rem; padding: 0; }
body.lp-facility .lp-news li { border-bottom: 1px solid #E5E5E5; }
body.lp-facility .lp-news a,
body.lp-facility .lp-news .lp-news__row {
  display: flex; align-items: center; gap: 1rem; padding: 0.625rem 0; text-decoration: none; color: var(--lp-ink);
  cursor: default;
}
body.lp-facility .lp-news__date { font-family: var(--font-num); font-size: 0.875rem; color: var(--lp-green); flex: none; }
body.lp-facility .lp-news__title { font-size: 0.875rem; flex: 1 1 auto; }
body.lp-facility .lp-news a svg,
body.lp-facility .lp-news .lp-news__row svg { width: 0.5rem; height: 0.8125rem; flex: none; color: var(--lp-card-border); }
body.lp-facility .lp-news__more { text-align: right; margin: 0; }
body.lp-facility .lp-pill {
  display: inline-block; padding: 0.5rem 1.5rem; border-radius: 999px; border: 1px solid var(--lp-green);
  color: var(--lp-green); font-size: 0.875rem; text-decoration: none; cursor: default;
}
/* admin CURSOR (AD-D-212): お知らせ行・イベント行・お問い合わせピルは今は本物の <a href> なので、
   実リンク (a[href]) だけ指カーソルにする。上の2規則の cursor:default は消さない
   (リンクでない .lp-news__row や準備中の p の見え方を変えないため)。色・下線・hover は変えない。
   ADD-54 の a.lp-doc-card と同じ流儀。なかまの家専用の2行 (旧 body.lp-facility--nakama-no-ie …。行の方は
   .lp-news__row (0,3,1) に負けて効いていなかった) はここへ統合した。 */
body.lp-facility .lp-news a[href] { cursor: pointer; }
body.lp-facility a.lp-pill[href] { cursor: pointer; }

/* --- ③事業のご紹介 --- */
body.lp-facility .lp-jigyo-top { display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2rem; }
body.lp-facility .lp-jigyo-top__photo { width: 32.5rem; max-width: 48%; height: auto; border-radius: 8px; flex: none; }
body.lp-facility .lp-jigyo-top__text { flex: 1 1 auto; }
body.lp-facility .lp-jigyo-top__text p { font-size: 0.875rem; line-height: 2; margin: 0 0 0.5rem; }
body.lp-facility .lp-photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
body.lp-facility .lp-photo-grid figure { margin: 0; }
body.lp-facility .lp-photo-grid img { width: 100%; height: 10.75rem; object-fit: cover; border-radius: 8px; display: block; }
body.lp-facility .lp-photo-grid figcaption { font-size: 0.875rem; text-align: center; margin-top: 0.5rem; }
body.lp-facility .lp-svc-panels { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
body.lp-facility .lp-svc-panel {
  background: var(--lp-green); color: #fff; border-radius: 8px; padding: 1.25rem 1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
body.lp-facility .lp-svc-panel svg { width: 2.25rem; height: 2.25rem; }
body.lp-facility .lp-svc-panel span { font-size: 1rem; font-weight: 500; line-height: 1.5; }

/* --- ④対象者 / ⑤利用条件について --- */
body.lp-facility .lp-2col p { font-size: 0.75rem; line-height: 1.8; margin: 0 0 0.75rem; }
body.lp-facility .lp-bullets { list-style: none; margin: 0 0 1rem; padding: 0; }
body.lp-facility .lp-bullets li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1rem; font-weight: 500; margin-bottom: 0.375rem; }
body.lp-facility .lp-bullets__mark { color: var(--lp-green); font-size: 0.75em; }
/* ADD-09 (D-042): 「※見学対応：可」が小さいとのご指摘により 12px → 14px、ウエイトは 500。
   0.875rem は LP ブロックで 13 規則が使っている既存の一段上のステップ（--fs-body と同値）。
   🔴 font-weight:500 は、現在の --font-base（丸ゴシック系／Yu Gothic Medium／Meiryo）では
      いずれも単一ウェイト相当に落ちるため見た目は変わらない（合成太字は 600 以上で発動）。
      600 にすると 700 と同じ合成太字になり注記の役割に合わないので採らない（Q-29）。
      指定は依頼の意図の表明と、将来の多ウェイト和文への差し替えに備えるためのもの。
   🔴 .lp-2col の中にある3件（三好園／なかまの家／しんざこども園の「※詳細は…」）は、
      body.lp-facility .lp-2col p (0,2,2) が本規則 (0,2,1) より固有度が高いため 12px のまま。
      依頼の対象は「※見学対応：可」なので、これは意図どおり（Q-29）。
      3件も揃える場合は body.lp-facility .lp-2col p.lp-note を併記する。 */
body.lp-facility .lp-note { font-size: 0.875rem; font-weight: 500; color: #555; }

/* --- ⑥ご利用までの流れ --- */
body.lp-facility .lp-steps { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: none; }
body.lp-facility .lp-steps > li { position: relative; text-align: center; padding: 0 0.75rem; }
body.lp-facility .lp-steps > li:not(:last-child)::after {
  content: ""; position: absolute; right: -0.25rem; top: 2.75rem; width: 0.5rem; height: 0.5rem;
  border-top: 2px solid var(--lp-card-border); border-right: 2px solid var(--lp-card-border); transform: rotate(45deg);
}
body.lp-facility .lp-steps__badge {
  display: inline-block; background: var(--lp-green-deep); color: #fff; font-family: var(--font-num);
  font-size: 0.875rem; padding: 0.125rem 0.75rem; border-radius: 999px; margin-bottom: 0.75rem;
}
body.lp-facility .lp-steps svg { display: block; margin: 0 auto 0.75rem; width: 2.75rem; height: 2.75rem; padding: 0.5rem;
  background: var(--lp-green); color: #fff; border-radius: 50%; box-sizing: content-box; }
/* L10: ic-calendar の fill=#3F64F5 ハードコードをステップ内でだけ白に矯正 (青いままの STEP が3箇所あった:
   三好園STEP05・なかまの家STEP03/04。他アイコンは元々 fill=currentColor で無変化)。
   CTA「見学予約」の青カレンダーはスコープ外 (.lp-steps 限定) のため巻き添えなし。 */
body.lp-facility .lp-steps svg path { fill: currentColor; }
body.lp-facility .lp-steps__name { font-size: 1rem; font-weight: 500; margin: 0 0 0.5rem; }
body.lp-facility .lp-steps__desc { font-size: 0.75rem; line-height: 1.67; margin: 0; color: #444; }

/* --- ⑦アクセス + 地図 / ⑧来訪情報 (D-7実測: 左360px / 右690px / gap30px) --- */
body.lp-facility .lp-2col--access { grid-template-columns: 360px minmax(0,1fr); gap: 1.875rem; align-items: start; }
body.lp-facility .lp-access-col { display: flex; flex-direction: column; gap: 2rem; }
body.lp-facility .lp-access__addr { font-size: 0.75rem; margin: 0 0 1rem; }
body.lp-facility .lp-access__label { font-size: 0.875rem; font-weight: 700; margin: 0 0 0.5rem; }
body.lp-facility .lp-access__list { list-style: none; margin: 0; padding: 0; font-size: 0.75rem; line-height: 2; }
body.lp-facility .lp-map-wrap { position: relative; }
body.lp-facility .lp-map { width: 100%; height: 24.375rem; border: 0; border-radius: 8px; display: block; }
body.lp-facility .lp-map__caption { font-size: 0.8125rem; margin: 0 0 0.5rem; } /* L14 v4 (FAC-GEJO-08): 座標指定。D-020 */
body.lp-facility .lp-map__fallback { font-size: 0.75rem; text-align: right; margin: 0.5rem 0 0; }
body.lp-facility .lp-map__fallback a { color: var(--lp-green); }

/* --- ⑨各種書類ダウンロード (D-19: ▼見出し2本/行、5列グリッドに掛かる) --- */
body.lp-facility .lp-doc-heads { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0 1rem; margin: 0 0 0.75rem; }
body.lp-facility .lp-doc-heads p { grid-column: span 2; font-size: 0.875rem; font-weight: 700; margin: 0; }
body.lp-facility .lp-doc-heads p:last-child { grid-column: 3 / 6; }
body.lp-facility .lp-doc-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; margin-bottom: 2rem; }
body.lp-facility .lp-doc-grid--row2 { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.lp-facility .lp-doc-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem;
  border: 1px solid var(--lp-card-border); border-radius: 8px; padding: 1.25rem 0.75rem; text-decoration: none;
  color: var(--lp-ink); cursor: default; background: #fff;
}
body.lp-facility .lp-doc-card svg { width: 2rem; height: 2rem; color: var(--lp-green); }
body.lp-facility .lp-doc-card__label { font-size: 0.875rem; line-height: 1.5; }
body.lp-facility .lp-doc-card__status { font-size: 0.75rem; color: #888; }
/* L14 ADD-54: 実リンク化されたカード (a.lp-doc-card) だけクリック可能であることを示す。
   準備中カード (div のまま) は cursor:default を継続。ホバーは他カード類と同じ brightness 系に揃える */
body.lp-facility a.lp-doc-card { cursor: pointer; }
body.lp-facility a.lp-doc-card:hover { filter: brightness(1.03); }

/* --- ⑩お問い合わせ先 --- */
body.lp-facility .lp-contact3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; text-align: center; }
body.lp-facility .lp-contact3__label { font-size: 0.875rem; font-weight: 700; margin: 0 0 0.75rem; }
body.lp-facility .lp-contact3__num {
  font-family: var(--font-num); font-size: 2.3375rem; display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; margin: 0;
}
body.lp-facility .lp-contact3__num--mail { font-size: 1.3125rem; line-height: 1.4; }
body.lp-facility .lp-contact3__num svg { width: 1.75rem; height: 1.75rem; color: var(--lp-green); flex: none; }
body.lp-facility .lp-contact3__sub { font-size: 0.75rem; margin: 0.5rem 0 0; color: #555; }

/* --- フッター (D-12実測: 白→砂グラデ→山並み2層→最下帯#23452D) --- */
body.lp-facility .lp-footer__top {
  position: relative; padding: 4rem 0 5.5rem; overflow: hidden;
  background: linear-gradient(to bottom, var(--lp-sand-1) 0%, var(--lp-sand-2) 80%, var(--lp-hill-light) 92%, var(--lp-hill-dark) 100%);
}
body.lp-facility .lp-footer__top::before {   /* 雪玉ドット装飾 (近似。DESIGN-L5 §4 の許可どおりCSS近似) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 40%, transparent 42%),
    radial-gradient(circle, rgba(255,255,255,0.45) 40%, transparent 42%),
    radial-gradient(circle, rgba(255,255,255,0.5) 40%, transparent 42%);
  background-size: 90px 90px, 60px 60px, 70px 70px;
  background-position: 8% 20%, 88% 12%, 45% 6%;
  background-repeat: no-repeat;
}
body.lp-facility .lp-footer__grid {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  gap: 0.75rem 3rem; align-items: start;
}
body.lp-facility .lp-footer__brand { grid-row: 1 / 3; }
body.lp-facility .lp-footer__badge { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; padding-right: 1.5rem; border-right: 1px solid rgba(0,0,0,0.2); }
body.lp-facility .lp-footer__badge span { font-size: 0.75rem; }
body.lp-facility .lp-footer__badge strong { font-size: 1.625rem; color: var(--lp-green-deep); }
body.lp-facility .lp-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
body.lp-facility .lp-footer__links a { font-size: 0.75rem; color: var(--lp-ink); text-decoration: none; }
body.lp-facility .lp-footer__links a:hover { text-decoration: underline; }
body.lp-facility .lp-footer__address { font-size: 0.75rem; margin: 0; }
/* L10: .lp-footer__pagetop 一式は削除 (footer-lp.php からブロック撤去済み。追従版 .pagetop--fixed は非接触) */
body.lp-facility .lp-footer__bottom { background: var(--lp-pine); color: #fff; text-align: center; padding: 0.75rem 0; }
body.lp-facility .lp-footer__bottom p { margin: 0; font-size: 0.75rem; }

/* --- SP (768px以下。確定デザインは1440のみ支給されていないため折返し規則として本設計で規定・DESIGN-L5 §6) --- */
@media (max-width: 767px) {
  body.lp-facility .lp-header { position: relative; height: auto; padding: 0.75rem 0; }
  body.lp-facility .lp-hero__inner { flex-direction: column; align-items: flex-start; min-height: 0; }
  body.lp-facility .lp-hero__visual { position: relative; width: 100%; height: 12rem; right: 0; margin-bottom: 1rem; }
  body.lp-facility .lp-hero__text { max-width: none; padding-block: 0 3rem; }
  body.lp-facility .lp-hero__catch { font-size: 1.75rem; }
  body.lp-facility .lp-cta { flex-direction: column; align-items: stretch; margin-top: -2rem; }
  body.lp-facility .lp-cta__btn { min-width: 0; }
  body.lp-facility .lp-cta__tel { margin-left: 0; text-align: left; }
  body.lp-facility .lp-cta__tel-num { justify-content: flex-start; }
  body.lp-facility .lp-2col,
  body.lp-facility .lp-2col--access { grid-template-columns: minmax(0,1fr); }
  body.lp-facility .lp-jigyo-top { flex-direction: column; }
  body.lp-facility .lp-jigyo-top__photo { width: 100%; max-width: none; }
  body.lp-facility .lp-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.lp-facility .lp-svc-panels { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.lp-facility .lp-steps { grid-template-columns: minmax(0,1fr); }
  body.lp-facility .lp-steps > li::after { display: none; }
  body.lp-facility .lp-doc-heads,
  body.lp-facility .lp-doc-grid,
  body.lp-facility .lp-doc-grid--row2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.lp-facility .lp-doc-heads p,
  body.lp-facility .lp-doc-heads p:last-child { grid-column: span 1; }
  body.lp-facility .lp-contact3 { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  body.lp-facility .lp-map { height: 18.75rem; }
  body.lp-facility .lp-footer__grid { grid-template-columns: minmax(0,1fr); }
  body.lp-facility .lp-footer__brand { grid-row: auto; }
  body.lp-facility .lp-footer__badge { border-right: 0; padding-right: 0; }
}

/* ===== L6-hero =====
   第6便: 設計PDF無し7ページのヒーロー背景 (AI生成・仮素材。BRIEF-L6 §3)。
   /about/ (houjin-hero) の「右に写真・左に白域+テキスト」構造の踏襲。
   白域は画像焼き込み (about 方式) ではなく CSS グラデで持つ — 生成画像を1枚差し替えるだけで
   白フェードの再加工が不要 (about が 768–1439px で起こす文字/写真の重なりも構造的に回避する)。
   🔴 REVIEW-DESIGN-L6 D-1/D-2 の差し戻しを④が反映 (理由は DONE-S3-L6 参照):
   - background-position は about の `right top` ではなく `right center` にする。about の画像は
     3.42:1 = 枠と同比でクロップが起きないが、生成画像 (21:9=2.33:1) は cover で縦方向がクロップ
     される。`center` にして主題を帯の垂直中央に保つ (プロンプト側も「主題は右半分・上下は
     クロップ許容」に変更済み)。狭幅では逆に横方向がクロップされるため `right` も残す
     (右寄りの主題を保つ)。 */
.draft-hero--photo {
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg,
      #fff 0,
      #fff max(42%, 605px),
      rgba(255,255,255,.55) max(53%, 730px),
      rgba(255,255,255,0) max(66%, 900px)),
    var(--l6-hero);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 416px;   /* about ヒーローの 1440px 実測高に一致 (DESIGN-L6 §0-5) */
}
/* 文字ブロックを白域内に収める (about の lead 501.3px 幅 [DESIGN-L2 §4-1] に準じ、
   catch 最長行 recruit 23字×21px≒483px が1行のままでいられる 520px) */
.draft-hero--photo .draft-catch,
.draft-hero--photo .draft-lead { max-width: 520px; }

/* 🔴 D-2 対処: 上のグラデは px フロアが 605/730/900 で、768–1099px 帯では最後の停止点 (900) が
   枠幅を超え、透過に到達できず「画像が消える/霞む」(REVIEW-DESIGN-L6 実測: 768px で最暗列 164)。
   .l2-container は width:min(1296, 100% - 36px) で、768–1331px の間は左端が常に x=18 で一定
   (100%-36 の centering が px 側で効くため) なので、テキスト右端は 18+520=538px で不変。
   この帯だけ px 単独の小さいグラデに差し替える (580px までを純白 = 538px に42pxの余裕)。 */
@media (max-width: 1099px) {
  .draft-hero--photo {
    background-image:
      linear-gradient(90deg,
        #fff 0,
        #fff 580px,
        rgba(255,255,255,.5) 630px,
        rgba(255,255,255,0) 680px),
      var(--l6-hero);
  }
}
@media (max-width: 767px) {
  /* SP: about の SP 対処 (style.css L1530 相当) と同じ縦グラデ方式。
     🔴 D-4 対処: 元の下端不透明度 (35%) だと本文が写真に直接乗る (③実測: recruit/community の
     catch・lead が帯の 70〜95% の位置にあり、そこでの白は 41〜65% しかなかった)。
     下端の不透明度を引き上げ、実ピクセルのコントラスト実測 (C-B6) で担保する。 */
  .draft-hero--photo {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.92) 55%, rgba(255,255,255,.88) 100%),
      var(--l6-hero);
    min-height: 220px;
  }
}
/* 🔴 D-2 対処 (④判断。②への差し戻しの代わりに④が最小修正として実施 — 理由は DONE-S3-L6):
   contact/privacy はリード文が無く (h1 のみ)、min-height 416 だと白域が縦に伸びるだけの帯になる
   (REVIEW-DESIGN-L6 実測: 現状ヒーロー高さ 112.8px に対し +303px の空白)。
   この2ページだけ帯を低くする。SP は元々 220px で contact/privacy 向けに導出済みの値
   (DESIGN-L6 §2-2) なのでここでは触らない (768px 以上にのみ適用)。 */
@media (min-width: 768px) {
  body.page-contact .draft-hero--photo,
  body.page-privacy .draft-hero--photo { min-height: 240px; }
}

/* ページ別の画像パス。--l6-hero 未定義のページでは background-image 宣言全体が無効になり、
   既存の色面 (--t-pale) にフォールバックする (= 撤去は変数1行を消すだけでよい構造)。
   🔴 REVIEW-DESIGN-L6 D-9: 画像ファイルだけを消しても background-image 宣言自体は有効なままなので
   色面には戻らず「左が純白・右が --t-pale に溶ける帯」になる (グラデ層は変数の有無に関わらず描画
   されるが、画像レイヤーだけ読み込み失敗として無視される)。撤去手順は必ず変数削除で行うこと。 */
body.page-recruit            { --l6-hero: url('../assets/l11/recruit/hero.jpg'); }  /* L11: デザイナー支給の正式画像に差し替え (DESIGN-L11 §11-1) */
body.page-faq                { --l6-hero: url('../assets/l6/hero-faq.jpg'); }
body.page-products           { --l6-hero: url('../assets/l4/hero-products.jpg'); }  /* products-faq-20260919: クライアント支給ヒーロー画像 */
body.page-disclosure         { --l6-hero: url('../assets/l6/hero-disclosure.jpg'); }
body.post-type-archive-event { --l6-hero: url('../assets/l6/hero-events.jpg'); }   /* 🔴 page-events ではない (archive-event.php) */
body.page-community          { --l6-hero: url('../assets/l6/hero-community.jpg'); }
body.page-contact            { --l6-hero: url('../assets/l6/hero-contact.jpg'); }
body.page-privacy            { --l6-hero: url('../assets/l6/hero-privacy.jpg'); }

/* ===== L8-lp (なかまの家) =====
   L11 依頼2: なかまの家の色トークンは L9-lp の障がい7施設ブロック (下記 body.lp-facility--nagomi-no-ie, …)
   に統合した (なごみの家と同値。DESIGN-L11 §5-2)。以下はなかまの家専用の部品 (ピル・2フロー・書類2列) の規則。 */

/* --- ②お知らせ (準備中表示・実リンク化) --- */
body.lp-facility--nakama-no-ie .lp-news__pending { font-size: 0.875rem; color: #666; margin: 0 0 1.25rem; }

/* --- ③サービスピル5個 (4+1段組。小型ピルボタン風。L5の4大パネルとは別意匠) --- */
body.lp-facility--nakama-no-ie .lp-pill-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem;
}
body.lp-facility--nakama-no-ie .lp-pill-item {
  display: flex; align-items: center; gap: 0.75rem; background: var(--lp-green);
  color: #fff; border-radius: 999px; padding: 0.875rem 1.25rem;
}
body.lp-facility--nakama-no-ie .lp-pill-item svg { width: 1.75rem; height: 1.75rem; flex: none; color: #fff; }
body.lp-facility--nakama-no-ie .lp-pill-item span { font-size: 1rem; font-weight: 500; line-height: 1.4; }

/* --- ⑥ご利用までの流れ: 帯ラベル付き2フロー構成 (.lp-flow = 帯 + .lp-steps) --- */
body.lp-facility--nakama-no-ie .lp-flow { margin-bottom: 2.5rem; }
body.lp-facility--nakama-no-ie .lp-flow:last-child { margin-bottom: 0; }
body.lp-facility--nakama-no-ie .lp-flow__label {
  background: #F0F0F0; color: var(--lp-ink); text-align: center; font-size: 1.125rem; font-weight: 700;
  padding: 0.625rem; border-radius: 6px; margin: 0 0 1.5rem;
}
/* 既存 .lp-steps は6列固定 (L5)。なかまの家は5列/6列の2種を使うため列数だけ上書きする
   (body.lp-facility--nakama-no-ie 修飾で詳細度を確保し、L5 側の定義には触れない)。 */
body.lp-facility--nakama-no-ie .lp-steps--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
body.lp-facility--nakama-no-ie .lp-steps--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }

/* --- ⑨各種書類ダウンロード: なかまの家は2枚のみ (三好園--row2の3列でなく2列にする) --- */
body.lp-facility--nakama-no-ie .lp-doc-grid--row2 { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 27rem; }

/* --- SP (768px以下。L5 §6 の折返し規則を踏襲) --- */
@media (max-width: 767px) {
  body.lp-facility--nakama-no-ie .lp-pill-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.lp-facility--nakama-no-ie .lp-doc-grid--row2 { max-width: none; }
  body.lp-facility--nakama-no-ie .lp-steps--5,
  body.lp-facility--nakama-no-ie .lp-steps--6 { grid-template-columns: minmax(0,1fr); }
}

/* ===== L9-lp ===== (第9便: 残り15施設LP。DESIGN-L9.md §2 / REVIEW-DESIGN-L9 D-1・D-11・D-12 反映)
   🔴 既存セレクタ (L5-lp / L8-lp) の値は1件も変更していない。ここは追記のみ。
   新規コンポーネントの接頭辞は `lp9-` (既存 `lp-` 部品はそのまま再利用)。
   参考サイトのクラス語彙 (c- / p- / u- / l- の接頭辞) とは無関係の自前語彙 (tests/check_l9_nocopy.py が照合)。
   🔴 L11: 旧コメント文中にコメント終端記号が誤って含まれ、直後の1ルール (--lp9-accent 等) が
   誤認で捨てられていた事故を修正 (DESIGN-L11 §1-1 / §8-2)。 */

/* --- アクセント4ファミリー (§2-5)。淡色は「施設を探す」確定PDF由来のタグ色の実値をそのまま使う --- */
body.lp-facility { --lp9-accent: var(--lp-green-deep); --lp9-accent-2: var(--lp-green); --lp9-pale: var(--lp-cream); }

/* 高齢6施設 (miyoshien / akane-en / miyoshien-shinza / miyoshien-yotsumiya / yoshida / miyoshidai / ueno)
   = 既定 (L5-lp の深緑をそのまま継承。上書きなし) */

/* 障がい7施設 (nakama-no-ie を L11 依頼2で追加 / nagomi-no-ie / work-center-nagomi / work-center-kawanishi / aozora / gejo / senju-katakuri)
   確定 --c-sec-shogai #24548C / --c-tag-shogai #DAE4F4 (施設を探すPDF由来の実値をそのまま使用) */
body.lp-facility--nakama-no-ie,
body.lp-facility--nagomi-no-ie,
body.lp-facility--work-center-nagomi,
body.lp-facility--work-center-kawanishi,
body.lp-facility--aozora,
body.lp-facility--gejo,
body.lp-facility--senju-katakuri {
  --lp-green-deep: #24548C;
  --lp-green:      #3D6FA5;
  --lp-cream:      #DAE4F4;
  --lp-sand-2:     #B9CCE4;
  --lp-hill-light: #6C8CB0;
  --lp-hill-dark:  #24548C;
  --lp-pine:       #1A3E68;
}
html[data-theme="contrast"] body.lp-facility--nakama-no-ie,
html[data-theme="contrast"] body.lp-facility--nagomi-no-ie,
html[data-theme="contrast"] body.lp-facility--work-center-nagomi,
html[data-theme="contrast"] body.lp-facility--work-center-kawanishi,
html[data-theme="contrast"] body.lp-facility--aozora,
html[data-theme="contrast"] body.lp-facility--gejo,
html[data-theme="contrast"] body.lp-facility--senju-katakuri {
  --lp-green-deep: #1A3E68; --lp-green: #1A3E68;
}

/* こども2施設 (shinza-kodomoen / ueno-kodomoen)
   🔴 D-1 対応: 確定 --c-sec-kodomo #F27F02 は白地2.69:1でAA不適合 (文字色に使われる箇所が既存CSSに
   多数ある: .lp-heading / .lp-info-table dt / .lp-news__date / .lp-pill / .lp-map__fallback a)。
   中間色でも4.5に届かない (③実測 #C25E00=4.29) ため、文字が載る --lp-green / --lp-green-deep は
   両方とも導出色 #A65600 (5.31) に統一する。確定値 #F27F02 は文字色としては一切使わない
   (装飾のみに使うなら --lp9-accent-2 とは別に直接 #F27F02 を宣言ブロックの背景以外へは充てない方針)。
   淡色 --lp-cream #F9DEBC は確定 --c-tag-kodomo の実値そのまま。 */
body.lp-facility--shinza-kodomoen,
body.lp-facility--ueno-kodomoen {
  --lp-green-deep: #A65600;
  --lp-green:      #A65600;
  --lp-cream:      #F9DEBC;
  --lp-sand-2:     #F0CE9E;
  --lp-hill-light: #C97A18;
  --lp-hill-dark:  #A65600;
  --lp-pine:       #7A4200;
}
html[data-theme="contrast"] body.lp-facility--shinza-kodomoen,
html[data-theme="contrast"] body.lp-facility--ueno-kodomoen {
  --lp-green-deep: #7A4200; --lp-green: #7A4200;
}

/* その他1施設 (wac-cafe)。確定 --c-sec-sonota #8C6239 は装飾スロットとして使用可 (5.36:1)。
   deep側は既存部品の白文字下地 (.lp-cta 等) 用に、確定値よりさらに暗い導出値を使う。 */
body.lp-facility--wac-cafe {
  --lp-green-deep: #6E4B2A;
  --lp-green:      #8C6239;
  --lp-cream:      #E3D7C2;
  --lp-sand-2:     #D2BE9C;
  --lp-hill-light: #A08464;
  --lp-hill-dark:  #6E4B2A;
  --lp-pine:       #503620;
}
html[data-theme="contrast"] body.lp-facility--wac-cafe {
  --lp-green-deep: #503620; --lp-green: #503620;
}

/* --- (0) ヒーロー3変種 (§2-2-0) --- */
body.lp-facility .lp9-hero-wrap { position: relative; }
body.lp-facility .lp9-hero { position: relative; overflow: hidden; }
body.lp-facility .lp9-hero--wide .lp9-hero__bleed { height: 22rem; }
body.lp-facility .lp9-hero--wide .lp9-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.lp-facility .lp9-hero--wide .lp9-hero__catchwrap { padding-block: 2rem 5rem; }
body.lp-facility .lp9-hero--plain {
  background: var(--lp9-pale); padding-block: 3rem 5rem;
}
body.lp-facility .lp9-hero__plainwrap { text-align: center; }
body.lp-facility .lp9-hero__icon {
  width: 5rem; height: 5rem; margin: 0 auto 1.5rem; color: var(--lp9-accent);
}
body.lp-facility .lp9-hero__icon svg { width: 100%; height: 100%; }
body.lp-facility .lp9-hero--plain .lp-hero__catch,
body.lp-facility .lp9-hero--plain .lp-hero__lead { text-align: center; }

/* --- (A) 紹介 (2列: 本文+写真) --- */
body.lp-facility .lp9-intro { display: grid; grid-template-columns: minmax(0,1fr) 20rem; gap: 2rem; align-items: start; }
body.lp-facility .lp9-intro--nophoto { grid-template-columns: minmax(0,1fr); }
body.lp-facility .lp9-intro__photo { width: 100%; height: 14rem; object-fit: cover; border-radius: 12px; }
body.lp-facility .lp9-intro__text p { font-size: 0.9375rem; line-height: 1.9; margin: 0 0 1em; }

/* L10: 高齢LP「事業の紹介」冒頭の空撮 (5施設。三好園は独自 .lp-jigyo-top__photo を使うため非対象) */
body.lp-facility .lp9-jigyo-aerial { width: 32.5rem; max-width: 60%; height: auto; border-radius: 8px; margin-bottom: 1.5rem; display: block; }
@media (max-width: 767px) { body.lp-facility .lp9-jigyo-aerial { width: 100%; max-width: none; } }

/* --- (B) 事業のご紹介: 番号付き柱カード (kakumagumiの構成を翻案。マークアップ・CSSとも新規自作) --- */
body.lp-facility .lp9-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
body.lp-facility .lp9-pillar {
  background: #fff; border: 1px solid var(--lp-card-border); border-radius: 12px; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
body.lp-facility .lp9-pillar__num {
  font-family: var(--font-num); font-size: 1.5rem; color: var(--lp9-accent); font-weight: 700;
}
body.lp-facility .lp9-pillar__icon { width: 2.5rem; height: 2.5rem; color: var(--lp9-accent); }
body.lp-facility .lp9-pillar__icon svg { width: 100%; height: 100%; }
body.lp-facility .lp9-pillar h3 { font-size: 1.0625rem; margin: 0.25rem 0 0; }
body.lp-facility .lp9-pillar__fact { font-size: 0.8125rem; color: #555; margin: 0; }
/* L14 追補4 ADD-17④: 事業カード内の補足説明。fact より1行分あけ、本文として読める行間にする。 */
body.lp-facility .lp9-pillar__note { font-size: 0.8125rem; color: #555; margin: 8px 0 0; line-height: 1.7; text-align: left; }

/* L14 追補 ADD-05/06 (DESIGN-ADD §4-4): 事業のご紹介・施設画像帯 (柱カードの直後)。 */
body.lp-facility .lp9-jigyo-gallery { margin-top: 2rem; }

/* --- (C) 施設の様子: ギャラリー (2〜4枚=1段 / 5枚以上=mosaic) --- */
body.lp-facility .lp9-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
body.lp-facility .lp9-gallery figure { position: relative; margin: 0; }
body.lp-facility .lp9-gallery img { width: 100%; height: 11rem; object-fit: cover; border-radius: 8px; display: block; }
body.lp-facility .lp9-gallery--mosaic { grid-template-columns: repeat(4, minmax(0,1fr)); }
body.lp-facility .lp9-gallery--mosaic figure:first-child { grid-column: span 2; grid-row: span 2; }
body.lp-facility .lp9-gallery--mosaic figure:first-child img { height: 100%; min-height: 22.5rem; }
body.lp-facility .lp9-room-chip {
  position: absolute; top: 0.5rem; left: 0.5rem; background: var(--lp9-pale); color: var(--lp-ink);
  font-size: 0.75rem; line-height: 1; padding: 0.375rem 0.75rem; border-radius: 999px;
}

/* --- (G) 同じ事業の施設 --- */
body.lp-facility .lp9-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; }
body.lp-facility .lp9-related__card {
  display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: var(--lp-ink);
  border: 1px solid var(--lp-card-border); border-radius: 12px; padding: 1rem; background: #fff;
}
body.lp-facility .lp9-related__thumb { width: 100%; height: 8rem; object-fit: cover; border-radius: 8px; }
body.lp-facility .lp9-related__type { font-size: 0.75rem; color: #666; }
body.lp-facility .lp9-related__name { font-size: 0.9375rem; font-weight: 700; }

/* --- (I) 写真仮注記 --- */
body.lp-facility .lp9-photo-note { font-size: 0.75rem; color: #666; text-align: center; margin: 2rem 0 0; }

/* --- SP (768px以下) --- */
@media (max-width: 767px) {
  body.lp-facility .lp9-hero--wide .lp9-hero__bleed { height: 14rem; }
  body.lp-facility .lp9-intro { grid-template-columns: minmax(0,1fr); }
  body.lp-facility .lp9-intro__photo { height: 11rem; }
  body.lp-facility .lp9-gallery--mosaic { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.lp-facility .lp9-gallery--mosaic figure:first-child { grid-column: span 2; grid-row: span 1; }
  body.lp-facility .lp9-gallery--mosaic figure:first-child img { min-height: 11rem; }
}

/* ===== L9-fx ===== (第9便ゴールC: 確定PDFが無いページ限定の演出。DESIGN-L9.md §1-6 / §3)
   参考にした点: birusisu.co.jp の「静かな出現・ゆったりした減速」という質感。
   自前で決めた実装: イージング数値・変数名・クラス名は全て自作 (REVIEW-DESIGN-L9 D-20 に由来メモ)。
   `--fx-ease` の由来: 「速く出て長く据わる」感触を狙って ④ が試作した自作カーブ。
   easeOutQuart cubic-bezier(0.165,0.84,0.44,1) と先頭2値が近い形になったが、後半2値は別の値へ変更した
   自作曲線であり、birusisu の --ease-out-expo cubic-bezier(0.19,1,0.22,1) とも数値が一致しない。 */
body.fx {
  --fx-ease: cubic-bezier(0.16, 0.84, 0.28, 0.99);
  --fx-dur: 0.45s;
  --fx-dur-hover: 0.25s;
}

/* --- 出現 (reveal): JS が <html> に fx-on を足したときだけ初期状態が発生 (no-JS安全)
   🔴 詳細度に注意: 隠すルールを `:not(.fx-in)` で終了条件と排他にし、.fx-in 側は transform を
   宣言しない (= 素の値に戻る)。こうすると .fx-lift:hover の transform と競合しない
   (④実測で発覚: 両方が transform を宣言すると詳細度次第でカードの hover 浮き上がりが効かなくなる)。 --- */
html.fx-on body.fx .fx-reveal:not(.fx-in) { opacity: 0; transform: translateY(16px); }
body.fx .fx-reveal.fx-in {
  opacity: 1;
  transition: opacity var(--fx-dur) var(--fx-ease), transform var(--fx-dur) var(--fx-ease);
}

/* --- hover: カード浮き上がり / 画像ズーム --- */
body.fx .fx-lift { transition: transform var(--fx-dur-hover) var(--fx-ease), box-shadow var(--fx-dur-hover) var(--fx-ease); }
body.fx .fx-lift:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
body.fx .fx-zoom { overflow: hidden; display: block; }
body.fx .fx-zoom img { transition: transform var(--fx-dur-hover) var(--fx-ease); }
body.fx .fx-zoom:hover img { transform: scale(1.04); }

/* --- focus-visible: 既存の focus 表現を上書きしない (fx 配下の interactive 要素に明瞭なリングを足すだけ) --- */
body.fx a:focus-visible,
body.fx button:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}

/* --- prefers-reduced-motion: reduce では丸ごと無効化 (JS側も fx-on を付けずに終了する二重の安全) --- */
@media (prefers-reduced-motion: reduce) {
  html.fx-on body.fx .fx-reveal { opacity: 1; transform: none; }
  body.fx .fx-reveal.fx-in { transition: none; }
  body.fx .fx-lift, body.fx .fx-lift:hover { transition: none; transform: none; }
  body.fx .fx-zoom img, body.fx .fx-zoom:hover img { transition: none; transform: none; }
}

/* ===== L9-fix ===== (2026-08-20) 見出しの gap:0 は L11 で基底 .lp-heading に統合した。
   .lp-heading__num は L11 依頼1で廃止 (span 自体を出力しない)。ここに規則は無い。 */

/* ===== L10: 確定PDF 2LP (しんざこども園/わっかふぇ) ===== */
/* ヒーローoverlay型: markup は lp9-hero--wide lp9-hero--overlay を併用する (D-8: 併用で
   .lp9-hero--wide の img width/height/object-fit を受けつつ、overlay 側で catchwrap を
   画像上に重ねる)。
   L11 依頼3/5: PC でキャッチがヘッダー (absolute 4.25rem) に潜っていた。真因は catchwrap の中央寄せ基準が
   ヘッダー高を含んでいたこと + 帯高 22rem が確定PDF (72dpi 実測 534〜554px) の 65% しか無かったこと。
   帯を PDF どおり 33.75rem にし、中央寄せの基準からヘッダー高 (top) と CTA の食い込み (padding-bottom 3.5rem
   = .lp-cta の margin-top:-3.5rem) を除く。🔴 .lp9-hero--overlay 配下のみ = しんざこども園・わっかふぇの2施設限定。 */
body.lp-facility .lp9-hero--overlay { position: relative; }
body.lp-facility .lp9-hero--overlay .lp9-hero__bleed { height: 33.75rem; }          /* was 22rem */
body.lp-facility .lp9-hero--overlay .lp9-hero__catchwrap {
  position: absolute; inset: 0; top: 4.25rem; padding-bottom: 3.5rem;               /* top / padding-bottom を追加 */
  display: flex; flex-direction: column; justify-content: center;
}
/* D-7: 支給画像は場所により暗部があり (山影・木立など)、実測でコントラストが 4.16〜4.18:1 まで
   落ちる区間があった (AA 4.5 未満)。文字の後ろに半透明の白スクリムを敷いて画像内容によらず
   コントラストを確保する (デスクトップ幅のみ。SP は退避後の通常レイアウトなので不要)。 */
@media (min-width: 768px) {
  body.lp-facility .lp9-hero--overlay .lp-hero__catch,
  body.lp-facility .lp9-hero--overlay .lp-hero__lead {
    display: inline-block; width: fit-content;
    background: rgba(255,255,255,0.85); padding: 0.2em 0.6em; border-radius: 6px;
  }
  body.lp-facility .lp9-hero--overlay .lp-hero__lead { margin-top: 0.5rem; }
}
@media (max-width: 767px) { /* SP版デザイン未支給のため overlay を解除し既存 wide と同じ「画像の下に文言」へ退避 */
  body.lp-facility .lp9-hero--overlay .lp9-hero__bleed { height: 14rem; }
  body.lp-facility .lp9-hero--overlay .lp9-hero__catchwrap { position: static; padding-block: 1rem 5rem; }  /* L11: 下 1.5rem→5rem (CTAの-3.5rem食い込み分。wide型と同じ+48px。依頼外だが同一部品の欠陥 §6-4) */
}
/* D-1: 7 STEP (こども園)。詳細度が既存の1カラム規則 (2494行) と同じため後勝ちで7列のまま残る不具合を
   SP用の明示的な打ち消しで解消 (なかまの家の lp-steps--5/--6 と同じパターンを踏襲)。 */
body.lp-facility .lp-steps--7 { grid-template-columns: repeat(7, minmax(0,1fr)); }
@media (max-width: 767px) {
  body.lp-facility .lp-steps--7 { grid-template-columns: minmax(0,1fr); }
}
/* わっかふぇ由来 */
/* L11 依頼5-②: ロゴ実画像が入ったため原寸 (292×86) 表示に変更 (旧: 30rem=480pxへ引き伸ばす死んだ規則) */
body.lp-facility .lp-yurai__logo { width: 292px; max-width: 100%; height: auto; margin: 0 0 1.25rem; display: block; }
body.lp-facility .lp-yurai__list { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 1rem; line-height: 2; }

/* ===== L11 ===== (第11便 DESIGN-L11.md) */
/* 利用案内: サービス一覧4カードの写真。写真準備中 (span.photo-pending) を実画像に置換。枠 (grid 170×行高) は L4 のまま */
img.guide-svc-card__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; display: block; }
#svc-kodomo img.guide-svc-card__photo { object-position: 60% 50%; }  /* 3:2 → ほぼ正方形の cover で左端の園児の顔が半分切れるため右へ寄せる (DESIGN-L11 §10-3) */

/* 依頼4-②: うえのこども園の「施設の様子」室名チップを白抜き (アクセント地に白文字)。
   施設スコープ = body.lp-facility--ueno-kodomoen。他16施設は非対象。
   白 on --lp9-accent(#A65600) = 5.31:1 / contrast テーマ (#7A4200) = 8.06:1。
   代替 (依頼者の意図が「写真に直接白文字」だった場合): background: rgba(0,0,0,.55) に差し替える (1行)。 */
body.lp-facility--ueno-kodomoen .lp9-room-chip { background: var(--lp9-accent); color: #fff; }

/* 採用情報: 帯 1440×416 に 2.64:1 画像を cover すると縦24%が切れる。right center では上段職員の顔が
   目の高さで切れるため上寄りにする (DESIGN-L11 §11-2)。recruit 限定 (他6ページの right center は不変)。 */
body.page-recruit .draft-hero--photo { background-position: right 30%; }

/* ===== L12 ===== (第12便 DESIGN-L12.md §4-3 / §4-6 / §4-9) */
/* 流れ節を 17 施設共通に (なかまの家専用 2622-2631 と同値。専用側の詳細度が高いので なかまの家の見た目は不変) */
body.lp-facility .lp-flow { margin-bottom: 2.5rem; }
body.lp-facility .lp-flow:last-child { margin-bottom: 0; }
body.lp-facility .lp-flow__label { background: #F0F0F0; color: var(--lp-ink); text-align: center; font-size: 1.125rem; font-weight: 700; padding: 0.625rem; border-radius: 6px; margin: 0 0 1.5rem; }
body.lp-facility details.lp-flow > summary { list-style: none; cursor: pointer; position: relative; }
body.lp-facility details.lp-flow > summary::-webkit-details-marker { display: none; }
body.lp-facility details.lp-flow > summary::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 2px solid var(--lp-green); border-bottom: 2px solid var(--lp-green); transform: translateY(-70%) rotate(45deg); }
body.lp-facility details.lp-flow[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
body.lp-facility details.lp-flow:not([open]) { margin-bottom: 1rem; }
body.lp-facility details.lp-flow:not([open]) > summary { margin-bottom: 0; }
body.lp-facility .lp-steps--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
body.lp-facility .lp-steps--5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
body.lp-facility .lp-steps--6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
/* お問い合わせ 4 枠 (電話/FAX/メール/フォーム) は 2×2 */
body.lp-facility .lp-contact3--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* tel: リンク (§4-9。表示は不変) */
body.lp-facility a.lp-tel { color: inherit; text-decoration: none; }
body.lp-facility a.lp-tel:hover, body.lp-facility a.lp-tel:focus-visible { text-decoration: underline; }
@media (max-width: 767px) {
  body.lp-facility .lp-steps--4, body.lp-facility .lp-steps--5, body.lp-facility .lp-steps--6 { grid-template-columns: minmax(0,1fr); }
  body.lp-facility .lp-contact3--4 { grid-template-columns: minmax(0,1fr); }
}

/* ===== L14 追補3 (DESIGN-ADD3) ===== */

/* ADD-10 ② (D-062): 三好園しんざのヒーローは side 型で、PC ではコピーが写真の左端に最大 224px 重なり、
   写真の暗部では実測コントラストが 1.09:1 まで落ちる。見本のしんざこども園 (.lp9-hero--overlay,
   css/style.css:2964-2971) と同じ「透明度のある白マド」を敷き、画像の内容によらず可読にする
   (最悪ケースでも 13.5:1)。overlay のレイアウト自体は移植しない (side 型は既に文字が写真に重なっている)。
   🔴 slug スコープ = 三好園しんざ 1 施設限定。同じ side 型の千手かたくり・ワークセンターなごみにも波及しない。
   🔴 基底 (body.lp-facility .lp-hero__catch / __lead) と同詳細度のため、必ず基底より後ろ = このファイルの
      末尾に置くこと。先頭へ移すと効かない (検査 #44 のネガティブコントロール)。
   🔴 767px 以下は写真が文字の上へ回り重なりが消えるため当てない (SP の見えは現状から変わらない)。 */
@media (min-width: 768px) {
  body.lp-facility--miyoshien-shinza .lp-hero__catch,
  body.lp-facility--miyoshien-shinza .lp-hero__lead {
    display: inline-block; width: fit-content;
    background: rgba(255,255,255,0.85); padding: 0.2em 0.6em; border-radius: 6px;
  }
}

/* ADD-11 ② (D-066): みよし台は事業が 1 件しかないため auto-fit が余った 3 トラックを 0px に畳み、
   1 枚のパネルが本文幅いっぱい (1440px で 1080x199 = 5.43:1) に伸びていた。auto-fill はトラックを
   畳まないので、パネルは見本 (三好園しんざ) と同じ 1 トラック幅になる
   (実測 1440/1200:255px, 1024:232px, 900:274.7px, 768:230.7px, 390:354px, 320:284px = しんざと同値)。
   🔴 slug スコープ = みよし台 1 施設限定 (事業 1 件の LP は 17 施設中ここだけ)。
   🔴 基底 (css/style.css:2850) と同詳細度のため、必ず末尾に置くこと。 */
/* L14 追補4 (IE-1): ワークセンターかわにしも ADD-17②⑤ で事業が 1 件になったため、みよし台と同じ現象
   (PC 1440 でカード 1 枚が 1080x259 の帯に伸びる) が起きる。同じ auto-fill 修正を適用する。
   事業 1 件の LP はこの 2 施設のみ。HTML は変わらないので #36 / #51 には影響しない。 */
body.lp-facility--miyoshidai .lp9-pillars,
body.lp-facility--work-center-kawanishi .lp9-pillars { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }

/* ADD-12 ⑩ (D-070): グループホーム施設一覧。枠と行の体裁は基本情報 (.lp-card + .lp-info-table) を
   そのまま流用し、SP だけ施設名と住所を縦積みにする (縦積みなしだと 320px x 文字大で住所が 8 行に割れ、
   枠の高さが 1508px になる。縦積みで 1027px・全行 2 行に収まる)。 */
@media (max-width: 767px) {
  body.lp-facility .lp-info-table--gh > div { grid-template-columns: minmax(0,1fr); gap: 0.25rem; }
}

/* L14 追補7 ADD-33 (D-118 / レビュー ID-2): グループホーム施設一覧の PC 表示。
   基本情報から継承した dt 列 7rem (112px) では 8 施設すべての名称が 2 行に折り返していた
   (最長「グループホーム上野なでしこ」= 13 文字 ≒ 182px)。PC だけ dt 列を 15rem (240px) に広げて
   全 8 行を 1 行に収める。SP (767px 以下) は上の縦積みのままで不変。 */
@media (min-width: 768px) {
  body.lp-facility .lp-info-table--gh > div { grid-template-columns: 15rem minmax(0,1fr); }
}

/* ===== admin 第2便 2-E1（DESIGN-ADMIN-2E.md §2-2 M-2(a)）=====
   /management/ の装飾エディタ（文字色6・マーカー3）が生成する固定パレット class。
   `style="color:rgb(...)"` は WP コアの safecss_filter_attr() が `(` を含む宣言を捨てて
   保存時に消えるため、色は class 方式で表す（app.js が保存前に rgb() の span を class に置換し、
   サーバ側 wp_kses 後の WP_HTML_Tag_Processor がこの9個以外の class を落とす）。
   お知らせ・イベントの本文（the_content()）にそのまま出るため、公開側 CSS に置く。 */
.fx-c-green  { color: #006937; }
.fx-c-red    { color: #c0392b; }
.fx-c-orange { color: #d35400; }
.fx-c-blue   { color: #1f5fbf; }
.fx-c-gray   { color: #666; }
.fx-c-black  { color: #111; }
.fx-m-yellow { background-color: #fff59d; }
.fx-m-pink   { background-color: #f8bbd0; }
.fx-m-green  { background-color: #c8e6c9; }

/* ===== L14 ADD-60b (2026-09-25): しんざこども園ヒーローの位置調整 =====
   (DESIGN-ADD60B.md §4 の S1 案 + REVIEW-DESIGN-ADD60B.md §3/§4 の S2 必須事項。ADD60B-D-01〜10)
   新ヒーロー (assets/l14/shinza-kodomoen/hero.jpg 1983×793) は4人が右 56% に集まっており、
   帯高 33.75rem 固定の cover では人物群とキャッチの白マドが横に並ばない。幅帯ごとに:
   SP は右基準の切り抜き、768〜1279px は「画像の下に文言」(SP と同じ縦並び)、1280px 以上は
   文言を 2.5rem 上げ縦の切り抜きを上寄りに。
   S2 で見つかった残存 FAIL への追加手当て (MAJOR-1・MAJOR-2、ADD60B-D-09/10):
   - SP の帯高 min(14rem,70vw): 文字サイズ「大」で帯が伸び、右基準の切り抜きでも男の子が切れるのを防ぐ。
   - 1280px 以上の帯高 max(33.75rem,27vw): 2000px を超える幅で被覆が再発する (2560px で更に悪化) のを防ぐ。
   - 1280〜1359px は文字サイズ「大」限定でタブレット帯と同じ縦並びに延長 (大では白マドが広がり、
     この帯でも人物群と並ばない)。
   - 1360px 以上は文字サイズ「大」限定でリードの幅を 25em に詰め、右端が男の子の顔にかからないようにする。
   🔴 スコープ = body.lp-facility--shinza-kodomoen の1施設限定 (functions.php の body_class)。
   同じ class は /facilities/shinza-kodomoen/contact/ にも付くが、そのページに .lp9-hero--overlay
   は無いので、すべて .lp9-hero--overlay を含む本節のセレクタは当たらない (ADD60B-D-07、S3 で画素一致を確認)。
   同じ .lp9-hero--overlay を使うわっかふぇ (contact 含む) と他16施設には当たらない (S3 で画素一致を確認)。
   🔴 既存の L10 節 (.lp9-hero--overlay 基底、上のほう) と同詳細度のため、必ずそれより後ろ = この
   ファイルの末尾に置くこと。先頭へ移すと効かない (S3 変異 M-6 のネガティブコントロール)。 */
@media (max-width: 767px) {
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__img { object-position: 100% 50%; }
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__bleed { height: min(14rem, 70vw); }
}
@media (min-width: 768px) and (max-width: 1279px) {
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay { padding-top: 4.25rem; }            /* = .lp-header の高さ (absolute) */
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__bleed { height: auto; }
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__img { height: auto; }     /* 原寸比 1983:793 で全幅 (切り抜き無し) */
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__catchwrap { position: static; padding-block: 1.5rem 5rem; }
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__catch,
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__lead { display: block; width: auto; background: none; padding: 0; border-radius: 0; }
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__lead { margin-top: 0; }
}
@media (min-width: 1280px) {
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__catchwrap { padding-bottom: 8.5rem; }   /* 3.5rem → 中央寄せの基準を 2.5rem 上げる */
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__img { object-position: 50% 30%; }
  body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__bleed { height: max(33.75rem, 27vw); }  /* MAJOR-2: 2000px 以上は幅なりに帯を伸ばす */
}
@media (min-width: 1280px) and (max-width: 1359px) {
  /* MAJOR-1: 文字サイズ「大」だけ、768〜1279px と同じ縦並びをこの帯まで延長する (白マドが広がり右の園児と並ばない) */
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay { padding-top: 4.25rem; }
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__bleed { height: auto; }
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__img { height: auto; }
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp9-hero__catchwrap { position: static; padding-block: 1.5rem 5rem; }
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__catch,
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__lead { display: block; width: auto; background: none; padding: 0; border-radius: 0; }
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__lead { margin-top: 0; }
}
@media (min-width: 1360px) {
  /* MAJOR-1: 文字サイズ「大」だけリードを詰め、右端が男の子の顔にかからないようにする */
  html[data-fontsize="l"] body.lp-facility--shinza-kodomoen .lp9-hero--overlay .lp-hero__lead { max-width: 25em; }
}

/* ===== L14 LP-COMMON-0929 ===== (DESIGN-LPCOMMON0929.md §3・§5・§11。高橋社長 2026-09-29 05:30Z)
   既存行は書き換えず、ここに追記する。すべて body.lp-facility 修飾なので施設 LP 以外 (/guide/ の .guide-steps 等) には届かない。 */

/* ① 文字組 (LPCOMMON-D-01): STEP 名と説明文だけ PC (768px 以上) で左揃え。
   バッジと丸アイコンは li の text-align:center と svg の margin:auto のまま中央。767px 以下は li の center を継承。 */
@media (min-width: 768px) {
  body.lp-facility .lp-steps__name,
  body.lp-facility .lp-steps__desc { text-align: left; }
}

/* ① 間隔 (LPCOMMON-D-02): 旧 gap:0。列間 768〜1023px 1rem／1024px 以上 1.5rem、SP (767px 以下) は行間 2rem。
   矢印 ::after は間隔の中央へ (right = -(gap/2) - 0.25rem)。帯 .lp-flow の間隔と列数の規則は変えない。 */
body.lp-facility .lp-steps { gap: 1rem; }
body.lp-facility .lp-steps > li:not(:last-child)::after { right: -0.75rem; }
/* S2 MAJOR-1: 間隔を広げると 7 列の 768〜856px で「STEP 01」が 2 行に割れるため、バッジは折り返さない。
   768〜1023px はバッジと li の左右 padding を詰めて、文字「大」でもバッジが隣に届かない幅を確保する
   (文字ブロック間は 1rem + 0.5rem×2 = 32px。1024px 以上は 1.5rem + 0.75rem×2 = 48px)。 */
body.lp-facility .lp-steps__badge { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  body.lp-facility .lp-steps__badge { padding-inline: 0.375rem; }
  body.lp-facility .lp-steps > li { padding-inline: 0.5rem; }
}
@media (min-width: 1024px) {
  body.lp-facility .lp-steps { column-gap: 1.5rem; }
  body.lp-facility .lp-steps > li:not(:last-child)::after { right: -1rem; }
}
@media (max-width: 767px) {
  body.lp-facility .lp-steps { row-gap: 2rem; }
}

/* ③ 「※見学対応：可」は全施設 18px (LPCOMMON-D-04。D-047 の 14px を置き換える)。
   .lp-2col p (0,2,2) と .lp-note (0,2,1) のどちらより固有度が高い (0,3,1) ので、
   三好園 (.lp-2col の中) も共通 12 施設と同じ値になる。太さ・色は .lp-note (500 / #555) を継承。
   .lp-2col 内の「※詳細は…」(lp-note--kengaku 無し) は 12px のまま。 */
body.lp-facility .lp-section .lp-note--kengaku { font-size: 1.125rem; }

/* ===== L14 ADD-61（2026-09-29 社長依頼。DESIGN-ADD61.md §2-2・§2-6・§11） ===== */
/* 基本情報の種別が全角スペースで複数語のとき、語ごとの span (template-parts/facility-lp.php・single-facility-miyoshien.php)
   を inline-block にして、スマホで語の途中から割れないようにする (S2 MAJOR-1、ADD61-D-04)。
   語が行に入らないときはその語の前で改行し、語そのものが行より長いときだけ語の中で折り返す (nowrap と違いはみ出さない)。 */
body.lp-facility .lp-info-table .lp-kihon-type__w { display: inline-block; }
/* S4 MAJOR-1（ADD61-D-21）: 本便で長くした施設名がスマホで「…あかね／園」のように 1 字だけの行にならないよう、
   基本情報の 1 行目（施設名）の dd だけ text-wrap: pretty（最後の行が短くなる割り方を避ける。文字は変えない）。
   対象は依頼の 13 施設だけ（他 4 施設・2 行目以降・他ページの折り返しは変えない）。1 行目が施設名であることは check_add61 K2 が保証する。
   種別（2 行目）には当てない: 文字「中」で 1 字行は元から 0 件で、pretty にするとげじょうの 392〜458px で U+3000 が 2 行目の頭へ移り
   「　児童福祉」と字下げになるため（DESIGN-ADD61 §12）。text-wrap: pretty に未対応のブラウザ（Firefox など）は宣言を無視し、今までの折り返しのまま。
   ADD-62-FAC: 千手かたくり・わっかふぇを追加（Q-4 はコーディネーター決定で pretty を当てる。ADD62F-D-06。DESIGN-ADD62FAC.md §2-2・§11） */
body.lp-facility:is(.lp-facility--miyoshien, .lp-facility--akane-en, .lp-facility--miyoshien-shinza, .lp-facility--miyoshien-yotsumiya,
  .lp-facility--yoshida, .lp-facility--miyoshidai, .lp-facility--ueno, .lp-facility--nakama-no-ie, .lp-facility--nagomi-no-ie,
  .lp-facility--work-center-nagomi, .lp-facility--work-center-kawanishi, .lp-facility--aozora, .lp-facility--gejo, .lp-facility--senju-katakuri, .lp-facility--wac-cafe)
  #kihon .lp-info-table > div:first-child > dd { text-wrap: pretty; }
/* なかまの家①: ヒーロー 2048×768（比 2.667）は枠より横長で、right center のままだと左端の利用者が切れる。
   人物が x 11〜78% に集まるので位置を左へ (ADD61-D-08。他施設は不変) */
body.lp-facility--nakama-no-ie .lp-hero__visual { object-position: 40% 50%; }
@media (min-width: 768px) and (max-width: 1023px) {
  /* 768〜1023px は枠 498〜 ×392 で文言が画像の左に重なるため、テーブルの一群を中央に */
  body.lp-facility--nakama-no-ie .lp-hero__visual { object-position: 50% 50%; }
}

/* ===== L14 ADD-62-FAC（2026-09-29 社長依頼。DESIGN-ADD62FAC.md §2-1 (d)・§11-1） ===== */
/* 千手かたくり③: ヒーロー 2048×768（比 2.667）は枠より横長で、right center のままだと人物（原本 x 205〜1468）の左側が切れ、右 1/3 は無人の居室。
   S2 が引き直した顔 12 群の矩形で 0〜50% を走査し、360〜767px と 1023px 以上で全員が枠内かつ文言と非交差になる 22% を採った
   （ADD62F-D-05。320〜359px・768〜1022px は枠が狭く右手前の車いすの方はどの値でも入らない。媒体クエリは足さない。他施設は不変） */
body.lp-facility--senju-katakuri .lp-hero__visual { object-position: 22% 50%; }
/* 千手かたくり③ S3 fix（独立S4 MAJOR-1、ADD62F-D-15）: 22% で切り抜くと 768〜1023px で文言の右端が紺の服の職員・黒いズボンの上に乗り、
   リード「…グループホーム。」の「ム」「。」が 0.93〜1.1:1 まで落ちる（文字「大」は 768〜1000px で複数字）。
   しんざ（D-062）と同じ「透明度のある白マド」を 768px 以上に敷き、画像の内容によらず可読にする（顔の切り抜き＝22% は変えない）。
   🔴 slug スコープ = 千手かたくり 1 施設限定（他 16 施設に当たらない）。基底と同詳細度のため、このファイルの末尾に置くこと。
   🔴 767px 以下は写真が文字の上へ回り重なりが消えるため当てない。副作用として文字の左端が 0.6em 内側へ寄る（しんざの Q-34 と同じ）。 */
@media (min-width: 768px) {
  body.lp-facility--senju-katakuri .lp-hero__catch,
  body.lp-facility--senju-katakuri .lp-hero__lead {
    display: inline-block; width: fit-content;
    background: rgba(255,255,255,0.85); padding: 0.2em 0.6em; border-radius: 6px;
  }
}

/* L14 TEMPCLOSE-0930（DESIGN-TEMPCLOSE0930.md §2-4、TC-D-07）: トップ下部のバナー 3 枚を出さない間（front-page.php の banner-contact--solo）。
   PC はバナー節の margin-top:40px（.banners）をお問い合わせ帯が引き継ぐ。SP は 2 カラムの grid を 1 カラムにする（.contact の margin-top:0 はそのまま）。 */
.banner-contact--solo .contact { margin-top: 40px; }
/* S2 MINOR-1: 採用エントリーを出さない間の「よくご利用いただくリンク」は 4 本。PC の 5 等分 grid（.quick-links__list）を 4 等分にして右端に空きを残さない。
   SP は flex の縦積みなので影響しない。 */
.quick-links__list--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .banner-contact--solo { grid-template-columns: 1fr; }
  .banner-contact--solo .contact { margin-top: 0; }
}

/* ===== admin 第2便 2-5b（DESIGN-ADMIN-2-5b.md §3-4-5。ADD-62-FAC が末尾に足す規則の後ろに置く） ===== */
/* /management/ で差し替えた空撮（DB の写真）だけ、コード側の空撮（1600×900）と同じ 16:9 の枠に収める（縦長でも縦に伸びない）。
   未保存のページには class が無い＝見え方は変わらない。aspect-ratio 未対応のブラウザは今どおり縦横比そのまま。 */
body.lp-facility .lp9-jigyo-aerial--db { aspect-ratio: 16 / 9; object-fit: cover; }
/* 写真の並びで「部屋の名前」を空にした行は、中身の無い丸いチップを出さない（コード側の行は全部 room が非空＝見え方不変） */
body.lp-facility .lp9-room-chip:empty { display: none; }
/* 写真の並びの 5 枚以上（mosaic）の先頭の大きな枠は、写真の縦横比で高さが決まる（コード側の先頭はすべて 1600×1067）。
   /management/ で差し替えた写真（DB の写真）だけ、コード側と同じ 1600:1067 の枠に収める（縦長の写真で並びが縦に伸びない。AD-D-328） */
body.lp-facility .lp9-gallery--mosaic figure:first-child img.lp9-gallery__img--db { aspect-ratio: 1600 / 1067; }
/* MAGI-CONTACT-1001（2026-10-01）: /contact/ の送信（確認・完了・エラー・ボタン）。既存の .draft-form の枠に合わせる */
.draft-form .pc-legend { font-size: 1rem; font-weight: 700; margin-bottom: 6px; padding: 0; }
.draft-form .pc-agree label { font-weight: 400; line-height: 1.75; }
.draft-form .pc-agree input[type="checkbox"] { width: 1.1em; height: 1.1em; margin-right: 6px; vertical-align: -2px; }
.draft-form .form-error { color: var(--c-red-sun, #EC2027); font-size: var(--fs-l2-small); margin-top: 4px; }
.draft-form .pc-errors, .draft-form .pc-notice { border: 1px solid var(--c-red-sun, #EC2027); background: #FFF5F5; border-radius: 8px; padding: 12px 16px; color: var(--c-red-sun, #EC2027); }
.draft-form .pc-errors ul { margin: 6px 0 0 1.2em; }
.draft-form .pc-errors a { color: inherit; }
.draft-form .pc-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 357.9px; min-height: 48px; margin-inline: auto;
  background: var(--c-green-btn, #005830); color: #fff; border: 1px solid var(--c-green-btn, #005830); border-radius: 6px; font-size: 1rem; cursor: pointer; text-decoration: none;
}
.draft-form .pc-btn:hover { background: var(--c-green, #006937); }
.draft-form .pc-btn:focus-visible { outline: 2px solid var(--c-green, #006937); outline-offset: 3px; }
.draft-form .pc-btn--secondary { background: #fff; color: var(--c-green-btn, #005830); }
.draft-form .pc-btn--secondary:hover { background: var(--c-cal-head, #F2F9F4); }
.draft-form .pc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0; }
.draft-form .pc-confirm { display: grid; grid-template-columns: 12em 1fr; border-top: 1px solid var(--c-l2-cardbd, #ddd); margin: 0; }
.draft-form .pc-confirm dt, .draft-form .pc-confirm dd { padding: 12px 8px; border-bottom: 1px solid var(--c-l2-cardbd, #ddd); margin: 0; }
.draft-form .pc-confirm dt { font-weight: 700; background: var(--c-cal-head, #F2F9F4); }
.draft-form .pc-confirm dd { overflow-wrap: anywhere; }
.pc-done__title { font-size: 1.25rem; font-weight: 700; color: var(--c-green, #006937); }
@media (max-width: 767px) { .draft-form .pc-confirm { grid-template-columns: 1fr; } .draft-form .pc-confirm dd { padding-top: 0; } }
.page-contact .cf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }