/* /price 料金表（templates/main/price.mjs）。docs/design-main.md §3-10 ＋ capture/main-current/price/dom.html の実測値
   （STUDIO の実 CSS: 名称/価格 = Zen Maru 20px→16px、説明 16→14→13、価格セル地 #F1EAE5、行の余白 26/32、名称→説明 24/16/10、
   区画間 80（SP 64）、グループ名の下 112、目次ピル→グループ名 163/120/80）。
   ブレークポイント: 〜599 / 600〜 / 768〜1079（展開した折りたたみ＝2 列カード）/ 1080〜（PC 3 列の行）。
   規約: 100vh 禁止・center+overflow-x 併用禁止・overflow-x:hidden は body に付けない・タップ標的 44px・ch 単位禁止・色はトークンのみ。 */

/* ---------- 見出し・リード ---------- */
.price-head { padding-bottom: 0; }
.price-intro { padding-top: 72px; text-align: center; }
.price-intro-title { font-size: var(--fs-lead); color: var(--c-orange); letter-spacing: 0; line-height: 1.7; }
/* 〜599: 現行は幅 238px で「歯科における保険治療と／自費治療について」の 2 行に折る（成り行きだと「保険治／療」で折れる） */
.price-intro-title { max-width: 238px; margin-inline: auto; text-wrap: wrap; }   /* balance だと 10/9 で「〜保険治療／と自費〜」になる */
.price-intro-body { margin-top: 40px; text-align: left; font-size: 13px; color: var(--c-ink); }
.price-intro-body p + p { margin-top: 0; }
.price-intro-body strong { color: var(--c-orange); }
@media (min-width: 600px) {
  .price-intro { padding-top: 100px; }
  .price-intro-title { max-width: none; text-wrap: balance; }
  .price-intro-body { margin-top: 48px; font-size: 14px; }
}
@media (min-width: 1080px) {
  .price-intro .container-read { max-width: 820px; }
  .price-intro-body { margin-top: 60px; font-size: 16px; }
}

/* 目次ピル（部品 .anchor-nav）。〜599: 2 列 / 768〜1079: 2 列（現行 841 は 2 列・幅 680）/ 1080〜: 4 列 左詰め（現行は最終行も左詰め） */
.price-anchors { margin-top: 40px; }
.price-anchors .anchor-pill { padding-left: 16px; padding-right: 12px; }
@media (min-width: 600px) {
  .price-anchors { margin-top: 80px; }
  .price-anchors .anchor-pill { padding-left: 24px; padding-right: 16px; }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .price-anchors { max-width: 680px; }
  .price-anchors .anchor-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (min-width: 1080px) {
  .price-anchors { margin-top: 88px; }
  .price-anchors .anchor-nav ul { justify-content: flex-start; gap: 16px 24px; }
  .price-anchors .anchor-nav li { flex-basis: calc(25% - 18px); min-width: 0; }
  .price-anchors .anchor-pill { padding-left: 32px; padding-right: 24px; }
}

/* ---------- グループ名（h2。2026-11-02 まで p）・セクション ---------- */
.price-sections { margin-top: 80px; }
.price-group { font-family: var(--f-round); font-size: 28px; color: var(--c-ink-deep); letter-spacing: 0.06em; line-height: 1.7; text-align: center; margin-bottom: 112px; margin-top: 0; font-weight: 500; text-wrap: wrap; }   /* 上の余白・太さ・折り返しは p だったときの値。h2 のタグの規則（base.css の h1〜h4。768〜 は text-wrap: balance）に頼らず書く */
.price-sec + .price-sec, .price-sec + .price-group { margin-top: 64px; }
.price-sec .bar-head { font-size: 24px; margin-bottom: 24px; }
.price-sec-lead { font-size: 14px; color: var(--c-ink); margin: 0 0 32px; line-height: 1.8; }
@media (min-width: 600px) {
  .price-sections { margin-top: 120px; }
  .price-group { font-size: 32px; }
  .price-sec + .price-sec, .price-sec + .price-group { margin-top: 80px; }
}
@media (min-width: 1080px) {
  .price-sections { margin-top: 163px; }
  .price-group { font-size: 40px; }
  .price-sec .bar-head { font-size: 32px; }
  .price-sec-lead { font-size: 16px; margin-bottom: 40px; }
}

/* ---------- 料金行（〜599: 1 列カード。現行どおり地色の上に 画像→本文→価格セル。リストの上下に点線） ---------- */
.pr-list { display: grid; gap: 32px; border-top: var(--dash); border-bottom: var(--dash); padding-block: 16px; }
.pr-row { display: grid; grid-template-rows: auto 1fr auto; gap: 0; }
.pr-img img, .pr-noimg { display: block; width: 100%; aspect-ratio: 574 / 382; object-fit: cover; border-radius: 0; }
.pr-noimg { background: #D9D9D9; }   /* 写真の無い行の灰。現行 urala.com（PC・SP とも）と Figma の仮画像は #D9D9D9（tokens の --c-placeholder #CCCCCC は濃すぎる） */
.pr-body { padding: 24px 16px 20px; }
.pr-name { font-size: 16px; color: var(--c-ink-deep); letter-spacing: 0.06em; line-height: 1.7; }
.pr-desc { margin-top: 10px; font-size: 13px; color: var(--c-ink); letter-spacing: 0; line-height: 1.7; }
.pr-cell { display: grid; align-content: center; gap: 0; min-height: 80px; padding: 16px; background: var(--c-line); text-align: center; }
/* 価格は「ラベル：」も「¥金額」も同じ書体・同じ大きさ（現行は 1 本のテキスト。Zen Maru 20 / 16、字間 0.06em、行間 1.7） */
.pr-price { display: block; font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; color: var(--c-orange); line-height: 1.7; }
.pr-label, .pr-amount, .pr-amount-text { font: inherit; letter-spacing: inherit; }

/* 600〜767: 横広スマホ・展開の狭い側。1 列のまま余白だけ現行タブレット値に */
@media (min-width: 600px) {
  .pr-list { gap: 24px; }
  .pr-body { padding: 26px; }
  .pr-desc { margin-top: 16px; font-size: 14px; }
  .pr-cell { min-height: 130px; padding: 24px 16px; }
}

/* 768〜1079: 展開した折りたたみ。2 列カード（各 ≒373、間隔 16）。価格セルは行内で下端に揃える（現行は段ズレ） */
@media (min-width: 768px) and (max-width: 1079px) {
  .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; padding-block: 0; align-items: stretch; }
  .pr-row { grid-template-rows: auto 1fr auto; }
}

/* 1080〜: PC。画像 286 ｜ 本文 ｜ 価格セル 283 の 3 列（原本 1920 実測: 392〜678 ｜ 678〜1244 ｜ 1244〜1527）。行の上下に点線。価格セルは行の高さいっぱい */
@media (min-width: 1080px) {
  .pr-list { gap: 0; border: 0; padding-block: 0; }
  .pr-row { grid-template-columns: 286px minmax(0, 1fr) 283px; grid-template-rows: none; align-items: stretch; border-top: var(--dash); }
  .pr-row:last-child { border-bottom: var(--dash); }
  .pr-img { align-self: center; padding: 2px 0; }
  .pr-img img, .pr-noimg { width: 286px; }
  .pr-body { padding: 26px 32px; }
  .pr-name { font-size: 20px; }
  .pr-desc { margin-top: 24px; font-size: 16px; }
  .pr-cell { min-height: 194px; padding: 16px 20px; }
  .pr-price { font-size: 20px; }
}
/* 1280〜（原本 urala.com を 1280/1440/1920 で実測 2026-09-20）:
   料金行・目次ピル・下部ナビの容器は min(100% − 160, 1136)（1280: 80〜1200 ／ 1440: 152〜1288 ／ 1920: 392〜1528）。
   tokens の --container-md 1120 のままだと 1440 以上で本文列が 14px 狭く、説明文が 1 行多く折れる（例: ジルコニアインレーが 3 行 → 4 行） */
@media (min-width: 1280px) {
  .page-price .container-md { width: min(100% - 160px, 1136px); }
}

/* ---------- お支払い方法（2×2 の薄い面カード＋注記。面は価格セルと同じ #F1EAE5） ---------- */
.price-pay { padding-top: clamp(80px, 8vw + 24px, 168px); }
.price-pay-head { margin-bottom: 0; }
.price-pay-lead { margin-top: 24px; text-align: center; font-size: var(--fs-small); color: var(--c-ink); line-height: 1.9; }
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.pay-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 245px; padding: 24px 12px; background: var(--c-line); border-radius: var(--r-s); text-align: center; }
.pay-ic { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 56px; }
.pay-ic img { width: 100%; height: 100%; object-fit: contain; }
.pay-label { font-family: var(--f-round); font-size: var(--fs-body-l); color: var(--c-orange); letter-spacing: 0.06em; line-height: 1.5; }
.pay-notes { margin-top: 24px; font-size: var(--fs-small); color: var(--c-ink); line-height: 1.9; }
.pay-notes li + li { margin-top: 2px; }
@media (min-width: 600px) { .pay-ic { width: 120px; height: 72px; } }
@media (min-width: 768px) {
  .pay-grid { gap: 20px; }
  .pay-ic { width: 144px; height: 100px; }
  .pay-label { font-size: 20px; }
}
/* 1080〜: アイコンは原寸 288×143（原本 1920 実測: カード券面 270×120・現金 134×105 が見える。以前の 144×100 では半分の大きさだった） */
@media (min-width: 1080px) {
  .price-pay-lead { margin-top: 32px; }
  .pay-grid { margin-top: 56px; }
  .pay-card { gap: 16px; }
  .pay-ic { width: 288px; height: 143px; }
  .pay-label { font-size: 24px; }
}
/* （旧: 1280〜 のお支払い方法 1210 幅は Figma に合わせて 1136 に変更。ファイル末尾の 1080〜 Figma ブロック） */

/* ---------- 下部ナビ 4 枚（部品 .bnav） ---------- */
.price-bnav { padding-block: clamp(64px, 8vw, 160px) clamp(48px, 6vw, 96px); }
/* 1080〜: 参照はカード下端から口の上端まで 70（フッター側の margin-top 64 で足りる）→ 下余白 0 */
@media (min-width: 1080px) { .price-bnav { padding-bottom: 0; } }

/* ---------- 〜599: 参照 440/393/344 の実測に合わせる（capture/sp-compare/main__price 2026-09-24） ----------
   見出し: 「PRICE」の字頭 y124（15px/0.23em・参照 58 幅）、H1 28px、英字 → H1 28。H1 の字の下端 → 小見出しの字頭 99。
   小見出し 19.5px・行送り 34（参照 字高 19・「歯科における保険治療と」216 幅）。小見出しの 2 行目 → 本文 74。本文は変更なし（行位置が一致）。
   目次ピル: 本文の最終行 → ピル 68、左右 10 まで広げて 2 列（440: 10〜217 / 223〜430）・横 6・縦 12・高さ 56・文字 14px（左 18）・山形 22px（右 13）。
   H2: 左罫線 4×32 を 1 行目（行送り 41）の中央、文字は罫の 16 右。グループ名 → 罫 133、罫 → 写真 34（点線なし）、リスト上下の点線なし。
   区画間: 価格セル下端 → 次の罫 64.5（2026-09-26 静止状態で再測。旧「1 → 2 だけ 144」は出現アニメ前の写り）。区画のリード: 14px・行送り 24・#271200、罫 → リードの字頭 69、リード → 写真 25。
   行: 名称 18px・字間 0.07em（参照 送り 19.25・字高 16）、写真下端 → 名称の字頭 32、名称の行の箱 → 説明 10、説明 14px・行送り 23.8（1.7）・#574D45・左右 17、説明 → 価格セル 24、
   価格セル 78.6 高（上下 24 ＋ 30.6）・価格 18px（参照 ¥110,000- 82 幅）。2026-09-28 現行 393 の DOM を小数で実測して、行の送りを 1 行ずつ一致させた。
   お支払い方法: 最後の価格セル → 見出しの字頭 91、見出し 28px、見出し → リード 77（リード 13px・行送り 28.6・左寄せ・#271200）、リード → カード 40、
   カード 245 高・角丸 4・アイコンの箱 109 高（参照 現金 93×72・振込 49×64・ローン 61×65 ＝新の約 1.95 倍）・名称 19px・行送り 38・上下の余白 20/29、
   カード → 注記 29（注記 13px・行送り 24・#574D45・カード 1 列ぶんの幅で折る）。注記 → 下部ナビ 81、ナビ下端 → 口の上端 107（2026-09-26 静止状態で再測） */
@media (max-width: 599px) {
  .page-price .price-head { padding-top: 37px; }
  /* 2 周目: 英字は 16px（参照 344「PRICE」字頭 141〜192・「FAQ」字高 14 ＝ 15px の 1.06 倍）。行の箱は 25.5 に据え置き */
  .page-price .price-head .sec-head.center .sec-label { font-size: 16px; line-height: 25.5px; letter-spacing: 0.23em; text-indent: 0; }   /* 共通の body.area-main .sec-head.center .sec-label（0,4,1）より強く */
  .page-price .price-head .sec-head > .sec-label + * { margin-top: -9px; }   /* 2 周目: H1 の字頭が参照より 2 上（440: 153 / 151）→ −11 を −9 に。下はリードの上余白で相殺 */
  .page-price .price-head h1.sec-title { font-size: 28px; }
  .page-price .price-intro { padding-top: 80px; }
  .page-price .price-intro-title { max-width: 230px; font-size: 19.5px; line-height: 34.5px; letter-spacing: 0.01em; }   /* 送り 19.7 で 11 字 217・12 字 236。238 のままだと「自」が 1 行目に上がる */
  .page-price .price-intro-body { margin-top: 40px; color: var(--c-ink-deep); }   /* 2 周目: 本文の 1 行目が参照より 3 上（440/344: 386 / 383）。色は現行 #271200（2026-09-28。600〜 と同じ） */

  .page-price .price-anchors { width: calc(100% - 20px); margin-top: 47px; }
  .page-price .price-anchors .anchor-nav ul { gap: 12px 6px; }
  .page-price .price-anchors .anchor-pill { min-height: 56px; padding: 5.6px 13px 5.6px 18px; font-size: 14px; line-height: 1.6; }   /* 上下 5.6: 2 行のピルも 56 高（現行 344・393。旧 6 で 56.8 になり下の段が 1〜3 ずれた） */
  .page-price .price-anchors .anchor-pill .icon { width: 20px; height: 20px; margin-inline: 1px; }   /* 山形は現行 SP の 13×7.4 枠に合わせて 20 枠＋線 2.2（FAQ と同じ）。左右 1 で旧 22 枠の場所は変えない */
  /* 2026-09-25 現行照合: 現行（390・393）は「インレー（詰め物）」「クラウン（被せ物）」「矯正歯科オプション」が 1 行。新は字の入る幅が 121 で 2 行に折れていた。
     山形との間 8→2・右の余白 13→10 で 130 に広げる（14px・字間 0.02em の 9 字 ＝ 128.5 が 1 行に入る。「コア（被せ物の土台）」「スポーツマウスガード」は現行どおり 2 行） */
  .page-price .price-anchors .anchor-pill { gap: 2px; padding-right: 10px; }

  .page-price .price-group { font-size: 28px; margin-bottom: 92px; }
  .page-price .price-sec + .price-sec { margin-top: 60px; }
  /* 旧: 1 → 2 区画だけ 139（出現アニメ前の撮影の写り。2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: どの区画の間も 60） */
  /* 2 周目: 料金表の帯は行の上端に付く（STUDIO は帯と H2 を flex-start で並べる）。字頭は帯の上端から 9 下（参照 440/393/344 の 1・2・4 区画すべて 9。新は 5〜6）。
     帯の位置と、帯 → 写真・リードの距離は合っていたので、字だけ 3 下げる（上 padding 3・帯 top 1.5・下 margin 25） */
  .page-price .price-sec .bar-head { position: relative; border-left: 0; padding: 3px 0 0 20px; font-size: 24px; line-height: 40.8px; margin-bottom: 25px; text-wrap: wrap; }   /* 行の箱 40.8（現行の 1.7。旧 41 は区画ごとに 0.2 ずれた） */
  .page-price .price-sec .bar-head::before { content: ""; position: absolute; left: 0; top: 1.5px; width: 4px; height: 32px; background: var(--c-orange); }
  /* 2 周目: リード・説明文は字間 0（参照 440 のリード 1 行目 28 字で送り 14.0、説明文 26 字で 14.0。0.035em / 0.03em だと 1 字ずつ早く折れ、e-max・検査及び診断料などが 1 行増えていた）。
     行送りは 1.7 = 23.8（2026-09-28 現行の計算値。旧の 24 は 1 行ごとに 0.2 ずつずれ、お支払いの所で 393 は +9・344 は +13 になっていた） */
  .page-price .price-sec-lead { margin: 0 0 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }   /* リードの下 24（現行 393 の DOM。旧 25 はリードのある区画で 1 下へずれた） */
  .page-price .pr-list { border: 0; padding-block: 0; }
  .page-price .pr-body { padding: 24px 16px; }   /* 参照の名称・説明の字頭は x36（新は 37） */
  .page-price .pr-name { font-size: 18px; letter-spacing: 0.06em; }   /* 参照「ポーセレンメタルボンドクラウン」15 字の字頭 37〜306（新 0.07em は 38〜310） */
  .page-price .pr-desc { margin-top: 10px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }   /* 名称の箱の下端 → 説明の箱 10（現行 393。旧 9 と行送り 24 の組み合わせで行ごとに少しずつずれていた） */
  /* 価格セル: 上下 24・左右 0（STUDIO _p1u = padding 24px 0）。1 行 79・2 行 109・3 行 140（参照）。新は 16 の余白で 93 / 124 だった。
     左右 0 なので 344 でも「ホワイトニングジェル：￥15,000～」が 1 行に入る（新は 16 の余白で 2 行に折れていた） */
  .page-price .pr-cell { min-height: 78.6px; padding: 24px 0; }   /* 1 行 78.6（現行。旧 79 は 0.4 ずつ下へずれた） */
  /* 行の点線（STUDIO は行ごとに上下の点線の有無が違う。SP で残っているのは下の行だけ。参照 440/344 で位置を確認）:
     上下 = コア・矯正歯科・入れ歯・予防歯科の 1 行目、下だけ = 矯正歯科 4 行目・矯正オプション 1 行目・入れ歯と予防歯科の全行・ホワイトニング 2 行目。
     線は写真の上端の直前／価格セルの下端の直後に 1px（参照は線のぶん行の送りが 1 伸びる） */
  .page-price :is(#price3, #price4, #price6, #price7) .pr-row:first-child { border-top: var(--dash); }
  .page-price :is(#price3 .pr-row:first-child, #price4 .pr-row:is(:first-child, :nth-child(4)), #price5 .pr-row:first-child, #price6 .pr-row, #price7 .pr-row, #price8 .pr-row:nth-child(2)) { border-bottom: var(--dash); }
  /* 参照は「ポーセレンメタルボンドクラウン」だけ説明文 → 価格セルが 33 広い（3 幅とも。行の送り 569 / 538 / 559 に対し新 536 / 505 / 526） */
  .page-price #price2 .pr-row:nth-child(4) .pr-body { padding-bottom: 56px; }   /* 説明の下端 → 価格セル 56（現行 393） */
  .page-price .pr-price { font-size: 18px; }

  .page-price .price-pay { padding-top: 80px; }   /* 最後の価格セル → 見出しの字頭 91（新 89） */
  .page-price .price-pay-head .sec-title { font-size: 28px; }
  .page-price .price-pay-lead { margin-top: 32px; text-align: left; font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); }   /* 参照 440: 見出し → リード 77（新 79）、1 行目 380 幅（新 376） */
  .page-price .pay-grid { margin-top: 39px; gap: 20px; }
  /* カード: 左右の余白 0、アイコンの画像はカード幅いっぱい・高さは画像の比率なり（288×143 / 288×135。STUDIO と同じ）。
     参照 440 の現金 95×72・振込 49×64・ローン 61×66 は新（余白 12・箱 109）の 1.145 倍 = 190 / 166。344 も「現金窓口支払い」7 字が幅 142 に 1 行で入る。
     縦は中央寄せのまま上 25／下 24・名称 −2。参照 440 のカード上端 → インクの上端 現金 65・振込 73・ローン 73、名称の字頭 161・158・159、
     344 の名称の字頭 150（箱が 109 固定だと幅が変わっても 161 のまま） */
  .page-price .pay-card { min-height: 245px; gap: 0; padding: 25px 0 24px; border-radius: 4px; }
  .page-price .pay-ic { width: 100%; height: auto; }
  .page-price .pay-ic img { height: auto; }
  .page-price .pay-label { margin-top: -2px; font-size: 20px; line-height: 34px; letter-spacing: 0; }   /* 現行 20px/34・字間 normal（2026-09-28 393 実測。旧 19px/38・0.06em） */
  .page-price .pay-notes { width: calc((100% - 22px) / 2); margin-top: 23px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }   /* 参照 440: 字高 13・各行の幅は新（13px/0.05em）の 1.026 倍 = 14px 字間 0。幅は 2026-09-26 に 1 詰めた（393 で現行は 2 項目めが「…お支払い／よりご利用…」の 4 行。カード 1 列ぶん 166.5 だと「よ」まで入って 3 行になる） */
  .page-price .pay-notes li + li { margin-top: 0; }

  .page-price .price-bnav { padding-top: 81px; padding-bottom: 129px; }   /* 2026-09-26 現行を最後までスクロールして出現アニメを終えた状態（静止状態）で実測: ナビ下端 → 口の上端 107（旧 50 は 28） */
  /* 下部ナビのカード・アイコン・文字・橙ボタンは components.css の共通値（〜599）に任せる（参照: アイコンのインク下端 → 文字の字頭 24。旧 margin-top 3 は 3 下がっていた） */
}

/* ---------- 1080〜: Figma pc/price 482:3259（1366 幅・容器 1136 = 115〜1251）に合わせる（2026-09-25） ----------
   見出し（catch 505:10930）: 英字の上端 y200（Roboto 18px・字間 25%・行 31）→ 間 0 → H1 40px/68（y231〜299）。
   小見出し 482:3600: y382（H1 の下端 → 83）、26px/1.7 字間 6% #E56300 中央。→ 60 → 本文 482:3601（820 幅・16px/2.2 字間 6% #271200）。
   目次ピル（anchor link _btn short 482:3243）: y811（本文の下端 731 → 80）、272×56・横 16・縦 16 の 4 列、左 32 右 18、17px 字間 2% #E36200、右に丸 32 ＋山形。
   グループ名 482:3679: y1176（ピルの下端 → 165）、40px/68 字間 6% #271200 中央 → 35 → 最初の見出し y1279。
     （Figma のグループ名は Inter 48px 黒の仮書式が残っているが、スタイル PC/h1 = Zen Maru 40px が当たっている値を採る）
   見出し（Title 507:11358）: 帯 4×54 → 16 → 32px/54 字間 6% #271200。見出し → 点線 24（区画のリードがあるときは 見出し → 24 → リード 16px/1.7 字間 0 #271200 → 24 → 点線）。区画の間 80。
   料金行（487:4557）: 高さ 191。写真 287×191（角丸なし）→ 44 → 本文 506（上下中央。名称 20px/34 字間 6% #271200 → 24 → 説明 16px/1.7 字間 0 #574D45）→ 44 → 価格の面 255×191 #F1EAE5（20px/34 字間 6% #E56300 中央）。
     行の下に 2/2 の点線 1px #C5B5A8（Figma の線は太さ 0 の中心線 = 行の送りは 191 のまま）。
   お支払い方法: 最後の行 → 見出し 160（40px/68 字間 6% #271200）→ 34 → リード（16px/2.2 字間 6% #271200 中央）→ 53 → カード 368×245（3 列・横 16・#F1EAE5・角丸 4。
     アイコンの箱 143 を上 24 → 8 → 名称 26px/44 字間 6% #E56300。こちらは 4 枚 1 段で 272 幅・名称 24px。下の 1080〜 の節）→ 24 → 注記（16px/1.7 字間 0 #574D45・左寄せ）→ 134 → 下部ナビ。下部ナビの下端 → フッター 173 */
@media (min-width: 1080px) {
  .page-price .price-head { padding-top: calc(200px - var(--hd-h, 89px)); padding-bottom: 0; }
  .page-price .price-head .sec-head.center .sec-label { font-size: 18px; line-height: 31px; letter-spacing: 0.25em; }
  .page-price .price-head .sec-head > .sec-label + * { margin-top: 0; }
  .page-price .price-head h1.sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }

  .page-price .price-intro { padding-top: 83px; }
  .page-price .price-intro-title { font-size: 26px; line-height: 44px; letter-spacing: 0.06em; }
  .page-price .price-intro-body { margin-top: 60px; font-size: 16px; line-height: 35px; letter-spacing: 0.06em; color: var(--c-ink-deep); }   /* 行 35（Figma の 2.2 は 35 に丸まる） */

  .page-price .price-anchors { margin-top: 80px; }
  .page-price .price-anchors .anchor-nav ul { gap: 16px; }
  .page-price .price-anchors .anchor-nav li { flex-basis: calc(25% - 12px); }
  .page-price .price-anchors .anchor-pill { min-height: 56px; padding: 12px 18px 12px 32px; gap: 10px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; }
  .page-price .price-anchors .anchor-pill .icon { width: 26px; height: 26px; margin-inline: 3px; }   /* 24 枠の山形 12 幅 → 26 で 13 幅（Figma 12.7）。左右 3 で丸 32 の箱ぶん */

  .page-price .price-sections { margin-top: 165px; }
  .page-price .price-group { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; margin-bottom: 35px; }
  .page-price .price-sec + .price-sec, .page-price .price-sec + .price-group { margin-top: 80px; }
  .page-price .price-sec .bar-head { padding-left: 16px; font-size: 32px; line-height: 54px; letter-spacing: 0.06em; margin-bottom: 24px; }
  .page-price .price-sec-lead { margin: 0 0 24px; font-size: 16px; line-height: 27px; letter-spacing: 0; color: var(--c-ink-deep); }   /* 行 27（Figma の 1.7 は 27 に丸まる） */

  .page-price .pr-list { position: relative; }
  .page-price .pr-list::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; border-top: var(--dash); }
  .page-price .pr-row { position: relative; grid-template-columns: 287px minmax(0, 1fr) 255px; min-height: 191px; border: 0; }
  .page-price .pr-row:last-child { border-bottom: 0; }
  .page-price .pr-row::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; border-top: var(--dash); }
  .page-price .pr-img { align-self: stretch; padding: 0; }
  .page-price .pr-img img, .page-price .pr-noimg { width: 287px; height: 100%; min-height: 191px; aspect-ratio: auto 287 / 191; object-fit: cover; }
  .page-price .pr-body { align-self: center; padding: 26px 44px; }
  .page-price .pr-name { font-size: 20px; line-height: 34px; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-price .pr-desc { margin-top: 24px; font-size: 16px; line-height: 27px; letter-spacing: 0; color: var(--c-ink-soft); }   /* 行 27（27.2 だと 3 行で行が 192 になる） */
  .page-price .pr-cell { min-height: 191px; padding: 16px 26px; background: var(--c-line); }
  .page-price .pr-price { font-size: 20px; line-height: 34px; letter-spacing: 0.06em; color: var(--c-orange); }

  .page-price .price-pay { padding-top: 160px; }
  .page-price .price-pay-head .sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }
  .page-price .price-pay-lead { margin-top: 34px; font-size: 16px; line-height: 35px; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  /* 4 枚を 1 段（Figma は 3 枚 1 段。content はデンタルローンを含めて 4 枚なので、3 列だと 2 段目に 1 枚だけ残っていた）。
     列は下の案内カード 4 枚と同じ幅（1366: 272・間 16）。名称「クレジットカード払い」10 字を 1 行に入れるため、左右の余白 4・名称は 24px まで（1080〜1279 は幅なりに 21〜24px） */
  .page-price .pay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 53px; }
  .page-price .pay-card { justify-content: flex-start; gap: 8px; min-height: 245px; padding: 24px 4px 26px; background: var(--c-line); border-radius: 4px; }
  .page-price .pay-ic { width: 100%; max-width: 288px; height: 143px; }
  .page-price .pay-label { font-size: min(24px, 2.3vw - 3.5px); line-height: 44px; letter-spacing: 0.06em; }
  .page-price .pay-notes { margin-top: 24px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-price .pay-notes li + li { margin-top: 0; }

  .page-price .price-bnav { padding-top: 134px; padding-bottom: 109px; }   /* 下: フッターの margin-top 64 と足して 173 */
}
/* 1280〜: お支払い方法の格子も料金行と同じ 1136 の容器（Figma は 115〜1251 でそろう） */
@media (min-width: 1280px) {
  .page-price .price-pay .container-md { width: min(100% - 160px, 1136px); }
}
/* 1080〜1279: ピル 1 枚が 238 幅まで縮む → 17px・左 32 のままだと「コア（被せ物の土台）」などが 2 行に折れるので、字と左右の余白だけ詰める */
@media (min-width: 1080px) and (max-width: 1279px) {
  .page-price .price-anchors .anchor-pill { padding-left: 20px; padding-right: 10px; font-size: 16px; letter-spacing: 0; }
}

/* 目次ピルの山形の線（〜1079）: 20 枠で太さ 1.83（FAQ と同じ。現行の山形の太さ 1.86） */
@media (max-width: 1079px) { .page-price .price-anchors .anchor-pill .icon path { stroke-width: 2.2; } }

/* ============ 演出（docs/MOTION.md。属性は templates/main/price.mjs）============
   html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。
   見出しブロック（pageHead）→ リード（+0.36 秒）→ 目次ピル（+0.42 秒）。料金の行は淡く fade の stagger（金額はカウントしない）。
   お支払い方法は カード up の stagger ＋ アイコン pop。 */

/* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。
   〜599 は現行 390、768〜1079 は現行 841 の値 */
/* 下部ナビのカードの下端 → 口の上端: 現行 673・841 とも 120、1000 は 114（2026-09-28 測り直し。旧は 768〜 だけで 673 が 62 だった） */
@media (min-width: 600px) and (max-width: 1079px) { body.page-price main > .price-bnav { padding-bottom: 106px; } }
@media (min-width: 911px) and (max-width: 1079px) { body.page-price main > .price-bnav { padding-bottom: 100px; } }

/* ---------- 600〜1079: 現行 urala.com（STUDIO 541〜910 ／ 911〜1120）に合わせる（2026-09-28 現行を出現アニメの後に 673 / 841 / 1000 で実測） ----------
   600〜910: 左右の余白 40。英字 PRICE の字頭 y200（18px/25.2・字間 0.25em）→ すぐ下に H1 40px/68 → 100 → 小見出し 26px/44（中央）→ 48 → 本文 14px/30.8 字間 0.06em #271200
     → 80 → ピル（2 列・680 まで中央・横 16 縦 24・高さ 56・角丸 48・17px 字間 2%・左 33）→ 120 → グループ名 40px/68 → 112 → 見出し 32px/54（帯 4×40 は行の上端）
     → 24 →（区画のリード 14px/1.7 #271200 → 24 →）カード 2 列（横 16）: 写真 → 本文（上下左右 26・名称 20px/34 字間 0.06em → 16 → 説明 14px/1.7 字間 0 #574D45）→ 価格の面 130 高（20px/34 字間 0.06em）。区画の間 80。
   911〜1079: 左右の余白 56。本文 16px/35.2（820 幅）。ピル 3 列（240 幅・中央）。ピル → グループ名 163。帯 4×54。
     料金は PC と同じ行組み: 写真 287×191（行の上端）｜ 本文（上下 26 左右 32・名称 20px → 24 → 説明 16px/1.7）｜ 価格の面 222 幅（行の高さいっぱい）。行の間は点線。 */
@media (min-width: 600px) and (max-width: 1079px) {
  body.page-price .main { --gutter: 40px; }
  .page-price .price-head { padding-top: 110px; }
  .page-price .price-head .sec-head { gap: 0; }
  .page-price .price-head .sec-head.center .sec-label { font-size: 18px; line-height: 25.2px; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-price .price-head .sec-head > .sec-label + * { margin-top: 0; }
  .page-price .price-head h1.sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }
  .page-price .price-intro { padding-top: 100px; }
  .page-price .price-intro-title { font-size: 26px; line-height: 44px; letter-spacing: 0; }
  .page-price .price-intro-body { margin-top: 48px; font-size: 14px; line-height: 30.8px; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-price .price-anchors { max-width: 680px; margin-top: 80px; }
  .page-price .price-anchors .anchor-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .page-price .price-anchors .anchor-pill { min-height: 56px; padding: 12px 21px 12px 33px; gap: 8px; border-radius: 48px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; }
  .page-price .price-anchors .anchor-pill .icon { width: 20px; height: 20px; margin-inline: 2px; }   /* 〜599 と同じ山形。左右 2 で旧 24 枠の場所は変えない */
  .page-price .price-sections { margin-top: 120px; }
  .page-price .price-group { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; margin-bottom: 112px; }
  .page-price .price-sec .bar-head { position: relative; border-left: 0; padding-left: 20px; font-size: 32px; line-height: 54px; letter-spacing: 0.06em; margin-bottom: 24px; }
  .page-price .price-sec .bar-head::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 40px; background: var(--c-orange); }
  .page-price .price-sec-lead { margin: 0 0 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); }
  .page-price .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; padding-block: 0; align-items: stretch; }
  .page-price .pr-body { padding: 26px; }
  .page-price .pr-name { font-size: 20px; line-height: 34px; letter-spacing: 0.06em; }
  .page-price .pr-desc { margin-top: 16px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-price .pr-cell { min-height: 130px; padding: 24px 16px; }
  .page-price .pr-price { font-size: 20px; line-height: 34px; letter-spacing: 0.06em; }
}
/* 600〜910 のカード（2026-09-29 現行 673・841 を出現アニメの後に実測して合わせた）:
   ・価格の面の縦の位置は STUDIO のカードごとの設定どおり: インレー（詰め物）の 2 枚だけ説明のすぐ下（flex-start。841 でゴールドインレーの面が 24 上）、
     ほかの区画は行の下端にそろえる（space-between。841 のラミネートベニア・早期治療・プロケア・オフィスホワイトニングは面が説明の 50 下）。
     （同日の最初の直しで全カードを説明のすぐ下にしたら、この 4 枚の面が現行より 33〜35 上がったので戻した。2026-09-29 staffprice の 2 本目の照合）
   ・ポーセレンメタルボンドクラウンだけ説明の下が 32 広い（〜599 の 56 と同じ STUDIO の余白。841 で行が 8・673 で 32 高くなる）。
   ・面の中の字: ジルコニアクラウン・レイヤリングジルコニア・バルプラストの 3 枚だけ上寄せ（上 24。現行 673・841 で字の頭が面の上端の 26 下）、ほかは縦の中央。
   ・価格の面は高さ 130・左右の余白 0（「コバルトクロム床：¥330,000-」が 673 でも 1 行）。3 行（入れ歯の 1〜3 歯…）も 130 に収まるよう上下 14。
   ・点線は〜599 と同じ行だけ（STUDIO の行ごとの設定）: コア・矯正歯科・入れ歯・予防歯科の 1 行目の上、矯正歯科の 1・4 行目、矯正オプションの 1 行目、入れ歯・予防歯科の全行、ホワイトニングの 2 行目の下。
   ・1 件だけの区画（コア・インプラント・スポーツマウスガード・その他）はカードが容器の半分（841 で 381・673 で 297。2 件の区画は 373 / 289） */
@media (min-width: 600px) and (max-width: 910px) {
  .page-price #price1 .pr-row { grid-template-rows: auto auto auto; align-content: start; }
  .page-price .pr-cell { min-height: 130px; padding: 14px 0; }
  .page-price #price2 .pr-row:nth-child(4) .pr-body { padding-bottom: 58px; }
  .page-price :is(#price2 .pr-row:is(:nth-child(2), :nth-child(3)), #price6 .pr-row:first-child) .pr-cell { align-content: start; padding: 24px 0 0; }
  .page-price :is(#price3, #price4, #price6, #price7) .pr-row:first-child { border-top: var(--dash); }
  .page-price :is(#price3 .pr-row:first-child, #price4 .pr-row:is(:first-child, :nth-child(4)), #price5 .pr-row:first-child, #price6 .pr-row, #price7 .pr-row, #price8 .pr-row:nth-child(2)) { border-bottom: var(--dash); }
  .page-price .pr-list:has(> .pr-row:only-child) { grid-template-columns: minmax(0, 50%); }
}
@media (min-width: 911px) and (max-width: 1079px) {
  body.page-price .main { --gutter: 56px; }
  .page-price .price-intro .container-read { width: min(100% - 112px, 820px); }
  .page-price .price-intro-body { margin-top: 60px; font-size: 16px; line-height: 35.2px; }
  .page-price .price-anchors { max-width: 752px; }
  .page-price .price-anchors .anchor-nav ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-price .price-anchors .anchor-pill { gap: 0; padding-right: 8px; }   /* 240 幅に「コア（被せ物の土台）」10 字（173）を 1 行で入れる（現行は字と山形の間がほぼ 0） */
  .page-price .price-sections { margin-top: 163px; }
  .page-price .price-sec .bar-head::before { height: 54px; }
  .page-price .price-sec-lead { font-size: 16px; }
  .page-price .pr-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: var(--dash); }
  .page-price .pr-row { grid-template-columns: 287px minmax(0, 1fr) 222px; grid-template-rows: none; align-items: stretch; border-bottom: var(--dash); }
  .page-price .pr-img { align-self: start; }
  .page-price .pr-img img, .page-price .pr-noimg { width: 287px; height: 191px; aspect-ratio: auto; object-fit: cover; }
  .page-price .pr-body { padding: 26px 32px; }
  .page-price .pr-desc { margin-top: 24px; font-size: 16px; }
  .page-price .pr-cell { min-height: 191px; padding: 16px 12px; }
}
/* お支払い方法・下部ナビ（600〜1079。現行 841 / 1000 実測）: 最後の価格の面 → 見出し 120（911〜 は 160）、見出し 40px/68 → 32 → リード 16px/35.2 字間 0.06em #271200（中央）→ 56
   → カード 2 列（横 20・縦 20・高さ 245・角丸 4・アイコンは原寸 288 幅・アイコンと名称 26px/44 字間 0 を縦の中央に）→ 24 → 注記（14px/1.7 #574D45・容器の 47% 幅。911〜 は 16px）
   → 120（911〜 は 133）→ 下部ナビ（841 は 2 列 横 20、911〜 は 4 列 横 16・カード 218 高・角丸 16・アイコン 99×73 は上 48・→ 12 → 20px/34・右下の橙のつまみ 44×40） */
@media (min-width: 600px) and (max-width: 1079px) {
  .page-price .price-pay { padding-top: 120px; }
  .page-price .price-pay-head .sec-title { font-size: 40px; line-height: 68px; letter-spacing: 0.06em; }
  .page-price .price-pay-lead { margin-top: 32px; font-size: 16px; line-height: 35.2px; letter-spacing: 0.06em; color: var(--c-ink-deep); }
  .page-price .pay-grid { gap: 20px; margin-top: 56px; }
  .page-price .pay-card { justify-content: center; gap: 0; min-height: 245px; padding: 12px 0; border-radius: 4px; }
  .page-price .pay-ic { width: 100%; max-width: 288px; height: auto; }
  .page-price .pay-ic img { height: auto; }
  .page-price .pay-label { font-size: 26px; line-height: 44px; letter-spacing: 0; }
  .page-price .pay-notes { width: 47%; margin-top: 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); }
  .page-price .pay-notes li + li { margin-top: 0; }
  .page-price .price-bnav { padding-top: 120px; }
  .page-price .bnav { gap: 20px; }
  .page-price .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 48px 12px 0; border-radius: 16px; }
  .page-price .bnav-ic { width: 99px; height: 73px; }
  .page-price .bnav-label { margin-top: 12px; font-size: 20px; line-height: 34px; letter-spacing: 0.06em; }
  .page-price .bnav-btn { width: 44px; height: 40px; border-radius: 0 0 16px 0; }
}
@media (min-width: 911px) and (max-width: 1079px) {
  .page-price .price-pay { padding-top: 160px; }
  .page-price .pay-grid { margin-top: 57px; }
  .page-price .pay-notes { font-size: 16px; }
  .page-price .price-bnav { padding-top: 133px; }
  .page-price .bnav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- 下部 CTA の見直し案（docs/CTA.md・templates/main/_cta.mjs。旗がオフのときは要素が無い） ----------
   c03 予約の帯 .price-rsv: お支払い方法の注記の後。注記 → 帯の間をとり、帯 → 4 カードは .price-bnav の上の余白のまま（帯の下は 0） */
.page-price .price-rsv { padding-top: clamp(56px, 6vw, 80px); padding-bottom: 0; }

/* 名前の字が端まで入ったイラスト（content の items[].fit: "contain" → .pr-img.is-contain。templates/main/price.mjs）: 1080〜 は行の高さに合わせて箱が縦に伸びる（height:100%）ので、
   cover だと左右が切れて「1. アンカースクリュー」などの字の端が欠ける（2026-10-16 実測: 幅 1080 で 287×218 → 左右 6% ずつ切れた）。
   切らずに縮めて収め、余った上下はイラストの地と同じ白で埋める */
.page-price .pr-img.is-contain img { object-fit: contain; background: #fff; }