:root{--brand:#3e6916;--brand-tint:#eef3e8;--brand-ink:#ffffff;--cta:#345a12;--cta-hover:#2a4a0e;--cta-ink:#ffffff;--urgent:#bb252d;--urgent-hover:#a8202a;--urgent-ink:#ffffff;--surface-alt:#f3f6ee;--surface-dark:#223d2c;--urgent-tint:#fbeaeb}
/* ===== design/tokens/*.css をそのまま連結（colors → fonts → typography → spacing → layout → radius → base） ===== */
/* tokens/colors.css */
/* ワイヤーモード。色は3系統（brand / cta / urgent）のみ。 */
:root{
--wire-0:#ffffff;--wire-50:#f6f6f6;--wire-100:#ececec;--wire-200:#dcdcdc;--wire-300:#c4c4c4;--wire-400:#a3a3a3;--wire-500:#858585;--wire-600:#666666;--wire-700:#4d4d4d;--wire-800:#333333;--wire-900:#1f1f1f;



/* 大きな電話カードの黄色のリード（urgent・urgentHover の地で 4.5:1 以上。tests/atsugi.test.mjs で確かめる）と、カードの濃い下端（urgent を黒に寄せたベタ色） */
--accent-yellow:#ffe866;--urgent-edge:color-mix(in srgb,var(--urgent) 68%,#000000);--cta-edge:color-mix(in srgb,var(--cta) 60%,#000000);
--surface-page:var(--wire-0);--surface-card:var(--wire-0);--surface-photo:var(--wire-200);
--text-body:var(--wire-900);--text-sub:var(--wire-700);--text-note:var(--wire-600);--text-on-dark:var(--wire-0);--text-on-dark-sub:var(--wire-200);
--line:var(--wire-200);--line-strong:var(--wire-400);--line-on-dark:var(--wire-500);--focus:var(--wire-900);
}

/* tokens/fonts.css */
:root{--font-sans:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--font-num:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}

/* tokens/typography.css */
:root{
--fs-note:16px;--fs-sub:16px;--fs-body:16px;--fs-lead:20px;--fs-h4:20px;--fs-h3:24px;--fs-h2:32px;--fs-h2-sp:26px;--fs-h1:44px;--fs-h1-sp:30px;
--fs-tel:32px;--fs-tel-lg:40px;--fs-price:32px;--fs-number:48px;--fs-button:16px;
--fw-regular:400;--fw-medium:500;--fw-bold:700;
--lh-body:1.8;--lh-sub:1.7;--lh-heading:1.45;--lh-tight:1.2;
--ls-body:0.04em;--ls-heading:0.06em;
}

/* tokens/spacing.css */
:root{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:40px;--sp-8:48px;--sp-9:64px;--sp-10:80px;--sp-11:96px;--sp-12:120px;
--section-pad-pc:96px;--section-pad-sp:56px;--gutter-pc:40px;--gutter-sp:20px;--card-pad:24px;--stack-heading:48px;
}

/* tokens/layout.css */
:root{
--container-xl:1248px;--container-lg:1160px;--container-md:1040px;--container-sm:880px;
--btn-min-m:160px;--btn-min-l:260px;--btn-min-sub:300px;--btn-h-m:56px;--btn-h-l:72px;--btn-h-sub:80px;
--tap-min:44px;--header-h-pc:96px;--header-h-sp:64px;
}

/* tokens/radius.css */
:root{--radius-none:0;--radius-s:4px;--radius-m:8px;--radius-pill:999px;--radius-button:var(--radius-s);--radius-card:var(--radius-s);--radius-tag:var(--radius-s);--border-w:1px;--border-w-strong:2px}

/* tokens/base.css */
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--text-body);background:var(--surface-page)}
a{color:var(--text-body);text-decoration:underline;text-underline-offset:3px}
*,*::before,*::after{box-sizing:border-box}


/* ===== design/斎場サイト.dc.html の <style> ===== */
:root{--content-width:960px;--container-xl:var(--content-width);--container-lg:var(--content-width);--container-md:var(--content-width);--container-sm:var(--content-width)}
a:hover{color:var(--text-sub)}

/* ===== 土台 ===== */
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;line-height:var(--lh-heading);letter-spacing:var(--ls-heading)}
h1{font-size:var(--fs-h1);text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.icon{flex:none}
.skip-link{position:absolute;left:8px;top:-200px;z-index:100;padding:12px 20px;background:var(--surface-page);color:var(--text-body);font-weight:700}
.skip-link:focus{top:8px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 追従CTAに隠れない余白は、フッターの濃い背景の中に取る（bodyに付けると最下部に白い帯が出る） */
.site-footer{padding-bottom:var(--float-cta-h,120px)}

/* ===== Section ===== */
.section{background:var(--surface-page);padding-block:var(--section-pad-pc)}
.section--alt{background:var(--surface-alt)}
.section--tint{background:var(--brand-tint)}
.section--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.section--compact{padding-block:64px}
.container{max-width:var(--container-xl);margin:0 auto;padding-inline:var(--gutter-pc)}
.container--xl{max-width:var(--container-xl)}
.container--lg{max-width:var(--container-lg)}
.container--md{max-width:var(--container-md)}
.container--sm{max-width:var(--container-sm)}
/* 電話の大きなカード2枚（FV の下・ページ末）は、本文より広い幅に置いて番号を大きくする */
.container--cta{max-width:1240px}
.container > * + *{margin-top:24px}

/* ===== SectionHeading ===== */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:var(--stack-heading)}
.sec-head--left{align-items:flex-start;text-align:left}
.sec-head__sub{font-size:var(--fs-body);font-weight:500;letter-spacing:.12em;color:var(--cta)}
.sec-head__title{font-weight:700;line-height:1.45;letter-spacing:.06em;color:var(--cta)}
.sec-head__title--h2{font-size:32px}
.sec-head__title--h3{font-size:24px}
.sec-head__rule{display:block;width:48px;height:2px;background:var(--brand)}
.sec-head__lead{font-size:18px;line-height:1.8;color:var(--text-sub);max-width:var(--container-sm)}
.sec-head--on-dark .sec-head__sub,.sec-head--on-dark .sec-head__lead{color:var(--text-on-dark-sub)}
.sec-head--on-dark .sec-head__rule{background:var(--text-on-dark)}

/* ===== Button ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;border:2px solid;border-radius:var(--radius-button);font-size:var(--fs-body);font-weight:700;letter-spacing:.06em;line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s ease}
.btn--large{min-width:var(--btn-min-l);min-height:var(--btn-h-l);padding:0 32px}
.btn--medium{min-width:var(--btn-min-m);min-height:var(--btn-h-m);padding:0 24px}
.btn--sub{min-width:var(--btn-min-sub);min-height:var(--btn-h-sub);padding:12px 28px}
.btn--full{width:100%}
.btn__text{display:flex;flex-direction:column;align-items:center}
.btn__sub{font-size:var(--fs-body);font-weight:500;letter-spacing:.04em}
.btn--urgent{background:var(--urgent);color:var(--urgent-ink);border-color:var(--urgent)}
.btn--urgent:hover{background:var(--urgent-hover);color:var(--urgent-ink)}
.btn--cta{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn--cta:hover{background:var(--cta-hover);color:var(--cta-ink)}
.btn--outline{background:transparent;color:var(--text-body);border-color:var(--line-strong)}
.btn--ghost{background:transparent;color:var(--text-body);border-color:transparent}
.btn--outline:hover,.btn--ghost:hover{background:var(--surface-alt);color:var(--text-body)}
.btn--on-dark.btn--outline,.btn--on-dark.btn--ghost{color:var(--text-on-dark)}
.btn--on-dark.btn--outline{border-color:var(--text-on-dark)}
.btn--on-dark.btn--outline:hover,.btn--on-dark.btn--ghost:hover{background:var(--wire-700);color:var(--text-on-dark)}
.btn-row{display:flex;justify-content:center;margin-top:48px}

/* ===== Tag ===== */
.tag{display:inline-flex;align-items:center;min-height:32px;padding:2px 12px;border-radius:var(--radius-tag);font-size:var(--fs-body);line-height:1.5}
.tag--type{border:1px solid var(--brand);color:var(--cta)}
.tag--badge{background:var(--brand);color:var(--brand-ink);font-weight:700}
.tag-list{display:flex;flex-wrap:wrap;gap:8px}

/* ===== PhotoFrame ===== */
.photo{margin:0}
.photo img{width:100%;height:auto;aspect-ratio:1.618/1;object-fit:cover;background:var(--surface-photo)}
.photo--silver img{aspect-ratio:1.414/1}
.photo--square img{aspect-ratio:1/1}
.photo--natural img{aspect-ratio:auto}

/* ===== Card（デザインの 6px 6px 0 のベタ影） ===== */
/* リンクでないカードには影を付けない。リンクのカードだけ、ホバー・キーボードのフォーカスで線が緑になり、少し浮いて影が出る（2026-10-14 ユーザー指定。動きを減らす設定では浮かせない） */
.card{background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
a.card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
a.card:hover,a.card:focus-visible{border-color:var(--brand);transform:translateY(-2px);box-shadow:6px 6px 0 var(--wire-300)}
@media (prefers-reduced-motion:reduce){a.card{transition:none}a.card:hover,a.card:focus-visible{transform:none}}

/* ===== TelBlock ===== */
.tel-block{display:flex;flex-direction:column;gap:4px}
.tel-block__num{display:inline-flex;align-items:center;gap:8px;font-weight:700;line-height:1.2;letter-spacing:.02em;white-space:nowrap;text-decoration:none;color:var(--text-body)}
.tel-block__hours{font-size:var(--fs-body);color:var(--text-sub)}
.tel-block__lead{font-size:var(--fs-body);font-weight:500}
.tel-block--header{align-items:flex-end;gap:0;text-align:right}
.tel-block--header .tel-block__hours{line-height:1.3}
.tel-block--header .tel-block__num{font-size:24px}
.tel-block--stacked{align-items:center;text-align:center;gap:8px}
.tel-block--stacked .tel-block__num{font-size:var(--fs-tel-lg)}
.tel-block--inline{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px}
.tel-block--inline .tel-block__num{font-size:var(--fs-tel)}
.tel-block--on-dark .tel-block__num{color:var(--text-on-dark)}
.tel-block--on-dark .tel-block__hours{color:var(--text-on-dark-sub)}

/* ===== FV の下・ページ末の電話：同じ幅のカード2枚（2026-10-14 改訂。左＝運営葬儀社・urgent／右＝斎場・cta の緑） ===== */
/* ベタの地に濃い下端、黄色のリード、白い番号、白い線の札。グラデーション・透過・アニメーションは使わない。
   2枚とも同じ組み：上＝リード（斎場は斎場名の小さな札を左に／葬儀社はスタッフ写真を左に）、中＝番号、下＝札。PC では番号が同じ高さに並ぶ */
.staff-photo{flex:none;width:128px;height:128px;border-radius:50%;border:4px solid var(--surface-card);object-fit:cover;object-position:50% 25%;background:var(--surface-photo)}
.call-cta{container-type:inline-size;display:flex;flex-direction:column;gap:20px;width:100%;max-width:1080px;margin-inline:auto;text-align:left}
/* --num-room：番号の行に使える幅。番号の大きさは、Webフォントが読み込まれる前の代わりのフォント（数字が約1.5倍の幅。アイコン込みで約9.3文字分）でも収まるように決める */
.call-cta__cards{--card-pad:clamp(16px,4cqi,24px);--num-room:calc(100cqi - 2 * var(--card-pad));--num-max:32px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px 24px;padding-bottom:6px}
.big-call{--edge:var(--urgent-edge);display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lead" "num" "badges";align-content:center;column-gap:16px;row-gap:6px;min-width:0;padding:var(--card-pad);border-radius:var(--radius-m);box-shadow:0 6px 0 var(--edge);text-decoration:none;caret-color:transparent}
.big-call--op{background:var(--urgent);color:var(--urgent-ink)}
.big-call--op:hover{background:var(--urgent-hover);color:var(--urgent-ink)}
.big-call--hall{--edge:var(--cta-edge);background:var(--cta);color:var(--cta-ink)}
.big-call--hall:hover{background:var(--cta-hover);color:var(--cta-ink)}
.big-call:active{transform:translateY(4px);box-shadow:0 2px 0 var(--edge)}
.big-call--staff{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"staff lead" "num num" "badges badges"}
.big-call__staff{grid-area:staff;align-self:center;width:64px;height:auto;aspect-ratio:1/1;border-width:3px}
.big-call__lead{grid-area:lead;align-self:center;color:var(--accent-yellow);font-size:17px;font-weight:700;line-height:1.45;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.big-call__num{grid-area:num;display:flex;align-items:center;gap:.16em;min-width:0;font-size:clamp(28px,calc(var(--num-room) / 9.4),var(--num-max));font-weight:700;line-height:1.1;letter-spacing:0;white-space:nowrap}
.big-call__num .icon{flex:none;width:.72em;height:.72em}
.big-call__badges{grid-area:badges;display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.big-call__badge{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:4px 14px;border-radius:999px;background:#fff;color:var(--urgent);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.big-call--hall .big-call__badge{color:var(--cta-edge)}
.big-call__badge--free{font-weight:900;letter-spacing:.06em}
.big-call__badge .icon{flex:none;width:16px;height:16px}
.big-call__spacer{grid-area:badges;min-height:36px}
@media (max-width:767.98px){.big-call__spacer{display:none}}
/* 1枚ずつ縦に並べるが幅が広いとき（560px以上）：斎場名はリードの左、写真はリードと番号の2行の左 */
@container (min-width:560px){
  .call-cta__cards{--num-max:40px}
  .big-call__lead{font-size:18px}
  .big-call--staff{grid-template-areas:"staff lead" "staff num" "badges badges"}
  .big-call--staff .big-call__num{font-size:clamp(28px,calc((var(--num-room) - 88px) / 9.4),var(--num-max))}
  .big-call__staff{width:72px}
}
/* 768px以上で番号が28px以上で収まる幅（640px以上）：同じ幅のカード2枚を横に並べる。左＝運営葬儀社、右＝斎場（HTML の順のまま。2026-10-14 ユーザー指定） */
@media (min-width:768px){
  @container (min-width:640px){
    .call-cta__cards{--num-room:calc((100cqi - 24px) / 2 - 2 * var(--card-pad));--num-max:44px;grid-template-columns:repeat(2,minmax(0,1fr))}
    .big-call--staff{grid-template-areas:"staff lead" "num num" "badges badges"}
    .big-call--staff .big-call__num{font-size:clamp(28px,calc(var(--num-room) / 9.4),var(--num-max))}
    .big-call__staff{width:56px}
  }
  /* 900px以上：写真をリードと番号の2行の左に。番号は2枚とも同じ大きさ（写真の分を引いた幅で決める）にして、同じ高さに並べる */
  @container (min-width:900px){
    .big-call{grid-template-rows:auto auto auto;align-content:center}
    .big-call--staff{grid-template-areas:"staff lead" "staff num" "badges badges"}
    .big-call__staff{width:72px}
    .big-call .big-call__num,.big-call--staff .big-call__num{font-size:clamp(28px,calc((var(--num-room) - 88px) / 9.4),var(--num-max))}
  }
}
/* 768px未満：小さくまとめる（2026-10-14 ユーザー指定「でかすぎ」。375px で1枚170px以下）。
   上＝リード1行（葬儀社は48pxの写真を左に／斎場は斎場名の札を左に。斎場のリードは2行まで）、中＝番号1行（28〜30px）、下＝札を横1列（14pxの小さな札） */
@media (max-width:767.98px){
  .call-cta__cards{--card-pad:14px;--num-max:30px;row-gap:12px}
  .big-call{row-gap:8px;column-gap:10px}
  .big-call--staff{grid-template-columns:48px minmax(0,1fr);grid-template-areas:"staff lead" "num num" "badges badges"}
  .big-call__staff{width:48px;border-width:2px}
  .big-call__lead{font-size:16px;line-height:1.4;letter-spacing:0}
  .big-call .big-call__num,.big-call--staff .big-call__num{font-size:clamp(28px,calc(var(--num-room) / 9.4),var(--num-max))}
  .big-call__badges{gap:6px;margin-top:0}
  /* 札だけは14px（2つを横1列に収めるため。tests/browser.test.mjs の「16px未満の文字が無い」はこの札だけ除く） */
  .big-call__badge{min-height:28px;padding:2px 9px;font-size:14px;line-height:1.4;letter-spacing:0;white-space:nowrap}
  .big-call__badge--free{letter-spacing:.02em}
  .big-call__badge .icon{width:14px;height:14px}
}
/* 768px未満で幅が300px以上：葬儀社のリードは折り返さない */
@media (max-width:767.98px){@container (min-width:300px){.big-call--op .big-call__lead{white-space:nowrap}}}
/* 400px未満：ページ末の灰色の箱を画面の端まで広げ、大きな番号の幅を取る */
@media (max-width:399.98px){.final-cta{margin-inline:calc(-1 * var(--gutter-sp));border-radius:0}}
.final-cta .contact-links{justify-content:flex-start}
.access-contact{font-size:var(--fs-body);line-height:1.8}
.container > .access-contact{margin-top:32px}

/* ===== ヘッダー（PC：ロゴ・メニュー・電話の1段。1200px未満：ロゴ・電話・メニューの開閉ボタン） ===== */
.site-header{position:sticky;top:0;z-index:10;background:var(--surface-page);border-top:4px solid var(--brand);border-bottom:1px solid var(--line)}
.site-header__inner{position:relative;max-width:1248px;margin:0 auto;padding:4px 24px;min-height:64px;box-sizing:border-box;display:flex;align-items:center;gap:0 20px}
.site-logo{text-decoration:none;display:flex;flex-direction:column;line-height:1.3;flex-shrink:0}
.site-logo__name{font-size:24px;font-weight:700;letter-spacing:.08em;color:var(--cta)}
.site-nav{flex:1 1 auto;min-width:0}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(10px,1vw,20px)}
.site-nav a{display:flex;align-items:center;min-height:var(--tap-min);font-size:var(--fs-body);font-weight:500;letter-spacing:0;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--cta);border-bottom-color:var(--brand)}
.site-nav a[aria-current="page"]{color:var(--cta);border-bottom-color:var(--brand)}
.site-header__tel{flex-shrink:0}
.header-call,.menu-toggle{display:none}
.menu-toggle__close{display:none}
.menu-toggle[aria-expanded="true"] .menu-toggle__open{display:none}
.menu-toggle[aria-expanded="true"] .menu-toggle__close{display:block}
.menu-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:1199.98px){
  .site-header__inner{min-height:56px;column-gap:8px}
  .site-logo{flex:1 1 auto;min-width:0}
  .site-header__tel{display:none}
  .header-call{display:inline-flex;align-items:center;gap:6px;margin-left:auto;min-height:var(--tap-min);padding:0 10px;border-radius:var(--radius-button);background:var(--urgent);color:var(--urgent-ink);font-size:var(--fs-body);font-weight:700;text-decoration:none;white-space:nowrap}
  .header-call:hover{background:var(--urgent-hover);color:var(--urgent-ink)}
  .js .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;padding:0;border:2px solid var(--line-strong);border-radius:var(--radius-button);background:var(--surface-page);color:var(--text-body);cursor:pointer}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:0;background:var(--surface-page);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .js .site-nav.is-open{display:block}
  .js .site-nav ul{flex-direction:column;gap:0}
  .js .site-nav a{padding:0 var(--gutter-pc);border-bottom:1px solid var(--line);min-height:52px}
  .js .site-nav a[aria-current="page"]{font-weight:700;border-bottom-color:var(--line);background:var(--surface-alt)}
  html:not(.js) .site-header{position:static}
  html:not(.js) .site-header__inner{flex-wrap:wrap}
  html:not(.js) .site-nav{order:3;flex-basis:100%}
  html:not(.js) .site-nav ul{justify-content:flex-start}
}

/* ===== 下層のページタイトル＋パンくず ===== */
.page-title{background:var(--surface-alt);border-bottom:1px solid var(--line)}
.page-title h1{color:var(--cta)}
.page-title__inner{max-width:var(--container-xl);margin:0 auto;padding:28px var(--gutter-pc)}
/* 下層のページタイトルの帯は低く、見出しはコンテナの左にそろえる（2026-10-14 ユーザー指定） */
.page-title h1{font-size:26px;line-height:1.45;letter-spacing:.06em;text-wrap:balance;text-align:left;line-break:strict}
/* 斎場名の塊と残りの塊の間だけで折り返す（layout.mjs の titleHtml。2026-10-15） */
.page-title__part{display:inline-block}
.breadcrumb{background:var(--surface-page);border-top:1px solid var(--line)}
.breadcrumb ol{list-style:none;max-width:var(--container-xl);margin:0 auto;padding:6px var(--gutter-pc);display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-body);line-height:1.5;color:var(--text-note)}
.breadcrumb li{display:flex;gap:8px}
.breadcrumb a{color:var(--text-sub)}

/* ===== ページ末のCTA ===== */
.final-cta{display:flex;flex-direction:column;align-items:center;gap:20px;padding:32px clamp(16px,3vw,40px);background:var(--surface-alt);border-radius:var(--radius-m);text-align:center}
.final-cta__title{font-size:22px;font-weight:700;color:var(--text-body)}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 20px;font-size:var(--fs-body);line-height:1.6;color:var(--text-sub)}
.contact-links p{margin:0}
.contact-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}
.contact-link{display:inline-flex;align-items:center;min-height:44px;color:var(--text-body);font-weight:500;text-decoration:underline;text-underline-offset:4px}
.call-card .contact-links{justify-content:flex-start}

/* ===== フッター ===== */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark)}
.site-footer a{color:var(--text-on-dark)}
.site-footer a:hover{color:var(--text-on-dark-sub)}
.site-footer__inner{max-width:1248px;margin:0 auto;padding:64px var(--gutter-pc) 32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:48px}
.site-footer__info{display:flex;flex-direction:column;gap:12px}
.site-footer__name{font-size:24px;font-weight:700;letter-spacing:.08em}
.site-footer__sub{font-size:var(--fs-body);color:var(--text-on-dark-sub)}
.site-footer__sub a{color:var(--text-on-dark-sub)}
.site-footer__tel{margin-top:8px}
.site-footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:var(--fs-body)}
.site-footer__copy{text-align:center;font-size:var(--fs-body);color:var(--text-on-dark-sub);padding:16px 0 24px}

/* ===== フローティングCTA（大きなカード2枚を小さくした形。左＝運営葬儀社・urgent／右＝斎場・cta の緑。どの幅でも1段） ===== */
/* 帯の地は黒の透過（斎場のカードの緑と混ざらないように。透過はこの帯の地だけ例外：ユーザー指定 2026-10-14）。カードはベタのまま */
.float-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,.6);padding:8px clamp(12px,2vw,24px) 12px}
.float-cta__inner{max-width:1080px;margin:0 auto}
.tel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tel-card{--edge:var(--urgent-edge);display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;padding:6px 12px;border-radius:var(--radius-m);box-shadow:0 4px 0 var(--edge);text-decoration:none;caret-color:transparent}
.tel-card--hall{--edge:var(--cta-edge);background:var(--cta);color:var(--cta-ink)}
.tel-card--hall:hover{background:var(--cta-hover);color:var(--cta-ink)}
.tel-card--op{background:var(--urgent);color:var(--urgent-ink)}
.tel-card--op:hover{background:var(--urgent-hover);color:var(--urgent-ink)}
.tel-card__staff{width:52px;height:52px;border-width:2px}
.tel-card__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tel-card__lead{color:var(--accent-yellow);font-size:var(--fs-body);font-weight:700;line-height:1.4;letter-spacing:.02em;white-space:nowrap}
.tel-card__num{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font-size:clamp(24px,2.2vw,30px);font-weight:700;line-height:1.15;letter-spacing:0;white-space:nowrap}
.tel-card__num .icon{width:.75em;height:.75em;margin-right:-4px}
.tel-card__badge{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px;border-radius:999px;background:#fff;color:var(--urgent);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.tel-card--hall .tel-card__badge{color:var(--cta-edge)}
/* 1024px未満：番号の横の札は出さない（768〜1023px は札をリードの行に回す余裕がないので、リードと番号だけ） */
@media (max-width:1023.98px){.tel-card__badge{display:none}.tel-card__num{font-size:24px}}
/* 768px未満：写真・札を出さず、リード（16px）と番号（20px）だけ。カード2枚は1段のまま。
   Webフォントの読み込み前（数字が約1.5倍の幅）はアイコンが番号の上の行に回り、横にははみ出さない */
@media (max-width:767.98px){
  .float-cta{padding:6px 8px 9px}
  .tel-cards{gap:6px}
  .tel-card{padding:4px 4px 5px;border-radius:var(--radius-s);box-shadow:0 3px 0 var(--edge)}
  .tel-card__staff{display:none}
  .tel-card__body{align-items:center}
  .tel-card{padding-inline:2px}
  .tel-card__lead{letter-spacing:0}
  /* 中黒は半角分に詰める（Webフォントのサブセットは palt が効かないため） */
  .tel-card__dot{margin-inline:-.25em}
  .tel-card__num{gap:3px;font-size:20px}
  .tel-card__num .icon{width:16px;height:16px;margin-right:0}
}
/* 400px未満：運営葬儀社のリード「ご葬儀・ご相談・お見積り」が1行でカードに収まるよう、帯の左右とカードの間を少し詰め、字間も詰める */
@media (max-width:399.98px){.float-cta{padding-inline:5px}.tel-cards{gap:4px}.tel-card__lead{letter-spacing:-.05em}}
/* 360px未満：リードを外し、番号（18px）だけ。代わりのフォントでも収まるよう電話のアイコンも外す */
@media (max-width:359.98px){.tel-card__lead{display:none}.tel-card{min-height:48px;padding-inline:2px}.tel-card__num{font-size:18px;letter-spacing:-.03em}.tel-card__num .icon{display:none}.tel-block--inline .tel-block__num{font-size:28px}}

/* ===== よくある質問（HTMLでは開いた状態。JSが aria-expanded を切り替えて畳む） ===== */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:grid;grid-template-columns:32px 1fr 24px;gap:16px;align-items:center;padding:20px 0;background:none;border:0;text-align:left;font-size:20px;font-weight:700;color:var(--text-body);cursor:pointer;min-height:var(--tap-min)}
.faq__q .faq__mark{color:var(--cta)}
.faq__text{line-height:1.6}
.faq__toggle{color:var(--text-sub)}
.faq__toggle .icon:first-child{display:none}
.faq__q[aria-expanded="false"] .faq__toggle .icon:first-child{display:block}
.faq__q[aria-expanded="false"] .faq__toggle .icon:last-child{display:none}
.faq__a{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:0 40px 24px 0;font-size:var(--fs-body);line-height:1.8;color:var(--text-sub)}
.faq__a[hidden]{display:none}
.faq__a .faq__mark{font-weight:700;color:var(--urgent)}
.faq__a p{text-wrap:pretty}

/* ===== 表 ===== */
.table-scroll{overflow-x:auto;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card)}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);line-height:1.6}
.data-table--wide{min-width:640px}
.data-table thead tr{background:var(--brand-tint)}
.data-table th,.data-table td{text-align:left;padding:16px 20px}
.data-table tbody tr{border-top:1px solid var(--line)}
.data-table th[scope="row"]{font-weight:700}
.data-table td{color:var(--text-sub)}
.data-table .is-right{text-align:right;white-space:nowrap}
.data-table .is-center{text-align:center}
.data-table td.is-right{font-weight:700;color:var(--text-body)}
.cell-note{display:block;font-weight:400;color:var(--text-note)}

/* ===== 本文セクション共通 ===== */
.note{font-size:var(--fs-body);line-height:1.7;color:var(--text-note)}
.source-note{margin:12px 0 0}
.source-note a{color:inherit}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px}
.tag-list--center{justify-content:center}
.zoom{display:block;text-decoration:none;color:inherit}
.zoom:hover img{outline:3px solid var(--line-strong);outline-offset:-3px}

/* ===== FV：写真を全幅に敷き、文字は白い板の上（透過・グラデーションは使わない）。1200px未満は写真の下に板を重ねる ===== */
.fv{position:relative;background:var(--surface-alt)}
.fv__photo .photo img{display:block;width:100%;height:auto;aspect-ratio:1.618/1;object-fit:cover;object-position:50% 60%}
.fv__inner{position:relative;max-width:var(--container-xl);margin:-56px auto 0;padding:0 var(--gutter-pc) 40px}
.fv__panel{display:flex;flex-direction:column;gap:6px;max-width:440px;padding:28px 32px;background:var(--surface-card);border-radius:var(--radius-m)}
.fv__sub{font-size:18px;font-weight:500;line-height:1.5;color:var(--text-sub)}
.fv__panel h1{font-size:var(--fs-h1);font-weight:700;line-height:1.35;letter-spacing:.06em;color:var(--cta)}
.fv__kana{font-size:var(--fs-body);line-height:1.5;color:var(--text-note)}
.fv__catch{margin-top:10px;font-size:20px;font-weight:700;line-height:1.6;color:var(--text-body);word-break:keep-all;overflow-wrap:anywhere}
/* 1200px以上：写真を高さ520〜600pxの全幅に敷き、板を左下（建物の左の植え込みと低い棟の上）に重ねる */
@media (min-width:1200px){
  .fv{height:clamp(520px,42vw,600px);overflow:hidden}
  .fv__photo,.fv__photo .photo{position:absolute;inset:0}
  .fv__photo .photo img{height:100%;aspect-ratio:auto}
  .fv__inner{position:absolute;left:0;right:0;bottom:40px;max-width:none;margin:0;padding:0 0 0 max(var(--gutter-pc),calc((100vw - 1248px) / 2 + 24px))}
  .fv__panel{max-width:400px}
}
/* FV のすぐ下の電話の帯 */
.fv-call{padding:32px 0 40px;background:var(--surface-page);border-bottom:1px solid var(--line)}

/* ===== 斎場の特徴 ===== */
.feature{display:flex;flex-direction:column}
.feature__body{position:relative;padding:48px var(--card-pad) var(--card-pad);display:flex;flex-direction:column;gap:12px}
/* 01・02・03：写真の左下の角に重ねる、緑の丸い番号（白い縁）。写真が無いカードでは本文の先頭に置く */
.feature__no{position:absolute;top:-32px;left:20px;display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:4px solid var(--surface-card);background:var(--cta);color:var(--cta-ink);font-size:26px;font-weight:700;line-height:1;letter-spacing:.02em}
.feature__body:first-child{padding-top:var(--card-pad)}
.feature__body:first-child .feature__no{position:static}
.feature h3{font-size:20px;line-height:1.5}
.feature p{font-size:var(--fs-body);line-height:1.8;color:var(--text-sub);text-wrap:pretty}

/* ===== 施設のご案内・式場 ===== */
.gallery{display:flex;flex-direction:column;gap:16px}
.gallery__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:16px}
.container > .tag-list{margin-top:32px}
.room-list{display:flex;flex-direction:column;gap:24px}
.facility-intro{display:flex;flex-direction:column;gap:24px;margin-bottom:48px}
.rooms-lead{margin-bottom:24px;font-size:var(--fs-body);line-height:1.8;text-align:center;text-wrap:pretty}
.room{display:flex;flex-wrap:wrap}
.room__photo{flex:0 1 380px;min-width:260px;display:flex;flex-direction:column}
.room__photo .photo{flex:1 1 auto;display:flex;flex-direction:column}
.room__photo .photo img{flex:1 1 auto;height:100%;min-height:235px;aspect-ratio:auto}
.room__body{flex:1 1 360px;min-width:0;padding:24px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.room h3{font-size:24px;line-height:1.45}
.room p{font-size:var(--fs-body);line-height:1.8;color:var(--text-sub);text-wrap:pretty}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-body);line-height:1.8}
.check-list .icon{color:var(--brand);margin-top:4px}
.closed-days{display:flex;flex-wrap:wrap;gap:8px 16px;padding:16px 24px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card)}

/* ===== 葬儀プラン ===== */
.plan-card{display:flex;flex-direction:column;text-decoration:none;color:var(--text-body)}
a.plan-card:hover{background:var(--surface-alt);color:var(--text-body)}
.plan-card__body{flex:1;padding:24px 24px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;container-type:inline-size}
.plan-card h3{margin-bottom:8px;font-size:min(var(--fs-h2),10.5cqi);line-height:1.45;letter-spacing:.04em}
/* 価格は折り返さない：[大きな数字][（税込）／円〜 を縦に重ねた列]（2026-10-14 ユーザー指定） */
.plan-card__price{display:inline-flex;align-items:flex-end;justify-content:center;gap:4px;font-weight:700;line-height:1;white-space:nowrap}
.plan-card__num{font-size:clamp(24px,15cqi,var(--fs-number));line-height:1;letter-spacing:.01em}
.plan-card__unit-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.plan-card__tax{font-size:var(--fs-body);font-weight:500;line-height:1.2;color:var(--text-sub)}
.plan-card__unit{font-size:24px;line-height:1.1}
.plan-card__ex{margin-top:6px;font-size:var(--fs-body);font-weight:500;color:var(--text-sub)}
.plan-card__people{margin-top:8px;font-size:var(--fs-body);color:var(--text-sub)}
.plan-card__rites{background:var(--brand-tint);padding:16px 24px}
/* バッジの列もカードの本文と同じ内側の余白（下端に付けない。2026-10-14） */
.plan-card > .plan-badges{padding:0 var(--card-pad) var(--card-pad)}

/* ===== 葬儀の流れ（タブはJSがあるときだけ出す） ===== */
.flow-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:32px}
html:not(.js) .flow-tabs{display:none}
.flow-tab{min-height:56px;min-width:140px;padding:0 24px;border:2px solid var(--cta);border-radius:var(--radius-button);background:var(--surface-card);color:var(--cta);font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:background .15s ease}
.flow-tab[aria-selected="true"]{background:var(--cta);color:var(--cta-ink)}
.flow-panels{display:flex;flex-direction:column;gap:64px}
.flow-panel[hidden]{display:none}
.flow-panel__title{font-size:24px;line-height:1.45;text-align:center}
.flow-panel__lead{margin:8px 0 24px;font-size:var(--fs-body);color:var(--text-sub);text-align:center}
.flow-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.flow-steps > li{display:flex;flex-direction:column;align-items:center}
.flow-steps__arrow{width:0;height:0;margin:16px 0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:20px solid var(--brand)}
.flow-step{width:100%;display:flex;flex-direction:column;gap:12px;padding:32px 40px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card)}
.flow-step__title{display:flex;align-items:center;gap:12px;font-size:22px;line-height:1.45}
.flow-step__num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}
.flow-step p{font-size:var(--fs-body);line-height:1.8;color:var(--text-sub)}
.flow-steps > li.flow-steps__skip{display:block;margin-top:24px;padding:16px 24px;background:var(--brand-tint);border-radius:var(--radius-card);font-size:var(--fs-body);color:var(--text-sub)}

/* ===== アクセス ===== */
.map-frame{aspect-ratio:1.618/1;background:var(--surface-photo);border:1px solid var(--line)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
.info-list{margin:0;display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);font-size:var(--fs-body);line-height:1.7;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.info-list dt{padding:16px 20px;border-bottom:1px solid var(--line);background:var(--brand-tint);font-weight:700}
.info-list dd{margin:0;padding:16px 20px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.container > .info-list{margin-top:32px}
.container > .sec-head + .info-list{margin-top:0}
.container > .route-list{margin-top:48px}
.route{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card)}
.route h2{display:flex;align-items:center;gap:8px;font-size:22px;line-height:1.45}
.route h2 .icon{color:var(--brand)}
.route p{font-size:var(--fs-body);line-height:1.8;color:var(--text-sub);text-wrap:pretty}

/* ===== 768px未満 ===== */
@media (max-width:767.98px){
  /* 3列以上の表は、スマホでは行ごとのカードにする（横スクロールで料金が隠れないように） */
  .data-table--wide{min-width:0}
  .data-table--wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .data-table--wide tr,.data-table--wide th[scope="row"],.data-table--wide td{display:block}
  .data-table--wide th[scope="row"]{padding:16px 20px 8px}
  .data-table--wide td{display:flex;gap:16px;justify-content:space-between;padding:6px 20px;text-align:right}
  .data-table--wide td:last-child{padding-bottom:16px}
  .data-table--wide td[data-label]::before{content:attr(data-label);flex:none;font-weight:700;color:var(--text-body);text-align:left}
  .data-table--wide .is-center,.data-table--wide .is-right{text-align:right;white-space:normal}
  .section{padding-block:var(--section-pad-sp)}
  .section--compact{padding-block:var(--section-pad-sp)}
  .container,.page-title__inner,.breadcrumb ol,.site-footer__inner{padding-inline:var(--gutter-sp)}
  h1{font-size:var(--fs-h1-sp)}
  .page-title h1{font-size:20px}
  h2,.sec-head__title--h2{font-size:var(--fs-h2-sp)}
  .page-title__inner{padding-block:20px}
  .site-footer__inner{padding-top:48px}

  .site-header__inner{padding:4px var(--gutter-sp)}
  .site-logo__name{font-size:18px;letter-spacing:0}
  .js .site-nav a{padding-inline:var(--gutter-sp)}
  .final-cta{padding:24px 16px}

  .fv__inner{margin-top:-28px;padding:0 var(--gutter-sp) 24px}
  .fv__panel{padding:20px 20px 22px}
  .fv__sub{font-size:var(--fs-body)}
  .fv__panel h1{font-size:var(--fs-h1-sp)}
  .fv__catch{margin-top:6px;font-size:18px}
  .btn-row .btn{width:100%;min-width:0;padding-inline:16px}
  .room__photo{flex-basis:100%;min-width:0}
  .room__body{padding:20px}
  .flow-step{padding:24px 20px}
  .flow-tab{min-width:0;flex:1 1 auto;padding:0 12px;word-break:keep-all;overflow-wrap:anywhere}
  .info-list{grid-template-columns:minmax(0,110px) minmax(0,1fr)}
  .info-list dt,.info-list dd{padding:12px 14px}
  .faq__a{padding-right:0}
  body{--float-cta-h:88px}
}
/* 360px未満：キャッチが読点の前で切れないよう、少しだけ小さくする */
@media (max-width:359.98px){.fv__panel{padding-inline:16px}.fv__catch{font-size:17px;letter-spacing:0}}

/* ===== 下層ページ（予約・運営会社・サイトマップ） ===== */
.lead-text{margin:0 0 32px;font-size:var(--fs-body);line-height:1.8;text-wrap:pretty}
.call-card{display:flex;flex-direction:column;gap:16px;padding:32px}
.call-card h3{margin:0;display:flex;align-items:center;gap:10px;font-size:24px;line-height:1.45}
.call-card p{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--text-sub)}
.call-card + .note{margin-top:16px}
.task-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:12px}
.task-list li{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface-card);border:1px solid var(--line);border-radius:var(--radius-card);font-size:var(--fs-body);line-height:1.5}
.task-list .icon{flex:none;color:var(--brand)}
.step-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.step-list li{display:flex;align-items:flex-start;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.step-list__num{flex:none;width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px}
.step-list div{min-width:0}
.step-list h3{margin:0 0 4px;font-size:22px;line-height:1.45}
.step-list p{margin:0;font-size:var(--fs-body);line-height:1.8;color:var(--text-sub)}
.link-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:48px}
.link-group h2{margin:0 0 16px;padding-bottom:12px;border-bottom:2px solid var(--brand);color:var(--cta);font-size:22px;line-height:1.45}
.link-list{list-style:none;margin:0;padding:0}
.link-list li{border-bottom:1px solid var(--line)}
.link-list a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px;font-size:var(--fs-body);text-decoration:none;color:inherit;overflow-wrap:anywhere}
.closed-days + .check-list,.check-list + .closed-days{margin-top:24px}

/* 写真拡大（script.js が必要になったときに作る dialog） */
.zoom-dialog{max-width:min(96vw,1200px);max-height:96vh;margin:auto;padding:16px;border:0;border-radius:var(--radius-card);background:var(--surface-card);color:var(--text-body);overflow:auto}
.zoom-dialog::backdrop{background:var(--surface-dark)}
.zoom-dialog__img{display:block;max-width:100%;max-height:calc(96vh - 120px);width:auto;height:auto;margin:0 auto}
.zoom-dialog__close{display:block;min-width:var(--tap-min);min-height:var(--tap-min);margin:16px auto 0;padding:0 24px;border:2px solid var(--line-strong);border-radius:var(--radius-button);background:var(--surface-card);color:var(--text-body);font:inherit;font-size:var(--fs-body);font-weight:700;cursor:pointer}

/* ===== プランの詳細ページ（/plans/<id>/。2026-10-14 追加） ===== */
.plan-hero{padding-block:48px}
.plan-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.plan-hero__photo .photo img{border-radius:var(--radius-card)}
.plan-hero__body{display:flex;flex-direction:column;gap:20px;min-width:0}
.plan-hero__summary{font-size:18px;line-height:1.8;text-wrap:pretty}
.plan-price{display:flex;flex-direction:column;gap:8px;padding:20px 24px;background:var(--surface-alt);border-radius:var(--radius-card)}
.plan-price__main{display:flex;flex-wrap:wrap;align-items:flex-end;column-gap:6px;row-gap:4px;font-weight:700;line-height:1;color:var(--cta)}
.plan-price__label{flex-basis:100%;margin-bottom:6px;font-size:var(--fs-body);line-height:1.5;color:var(--text-body)}
.plan-price__num{font-size:var(--fs-number);line-height:1;letter-spacing:.01em}
.plan-price__unit-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.plan-price__tax{font-size:var(--fs-body);font-weight:500;line-height:1.2;color:var(--text-sub)}
.plan-price__unit{font-size:24px;line-height:1.1}
.plan-price__ex{font-size:var(--fs-body);font-weight:500;color:var(--text-sub)}
.plan-price__variants{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.plan-price__variants div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;font-size:var(--fs-body);line-height:1.6}
.plan-price__variants dt{font-weight:500}
.plan-price__variants dd{margin:0;font-weight:700;white-space:nowrap}
.plan-price__sub{font-size:24px;color:var(--cta)}
.plan-facts{margin:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line);font-size:var(--fs-body);line-height:1.6}
.plan-facts div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.plan-facts dt{font-weight:700}
.plan-facts dd{margin:0;color:var(--text-sub)}

.container > .plan-costs__sub{margin-top:48px;font-size:22px;line-height:1.45;color:var(--cta)}
.container > .plan-costs__sub + .lead-text{margin:12px 0 16px}
.dot-list{margin:0;padding-left:1.4em;font-size:var(--fs-body);line-height:1.8}
.dot-list li::marker{color:var(--brand)}
.plan-costs .data-table tbody tr:last-child{background:var(--brand-tint)}
.plan-costs .data-table tbody tr:last-child td{color:var(--cta);font-size:20px}
@media (min-width:900px){
  .plan-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px}
  .plan-hero__grid--text{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767.98px){
  .plan-hero{padding-block:24px 32px}
  .plan-hero__grid{gap:24px}
  .plan-price{padding:16px 18px}
  .plan-price__num{font-size:40px}
}