@charset "UTF-8";
/* price.css — 料金表ページ固有（header/footer/navi/blog/reservation は common.css 流用）
   Figma: nZ1q PC 4:9418 / SP 4:11347（実測） */

/* ===== KV ヒーロー（左テキスト＋右画像） =====
   右画像は「object-fit:cover」でKVの高さいっぱいに拡大クロップされる。
   高さは min-height（＝Figmaの728px）。height で固定すると、目次(.price-index)の
   項目が増えたときに左テキストが枠から溢れて本文と重なるため、固定にしない。 */
.price-hero{display:grid;grid-template-columns:550px 1fr;align-items:stretch;min-height:728px;}
.price-hero__text{padding:40px 44px 40px 50px;display:flex;flex-direction:column;justify-content:center;}
/* KV画像が未設定のとき：右カラムを空けたままにせず、テキストだけの1カラムにする */
.price-hero--noimg{grid-template-columns:1fr;min-height:0;}
.price-hero--noimg .price-hero__text{width:min(100% - 100px,1400px);margin:0 auto;padding:64px 0 0;}
.price-hero__title{font-family:var(--f-min);font-weight:400;font-size:60px;line-height:1.2;color:var(--c-green);margin-top:8px;}
/* 画像はKVの高さを決めない（絶対配置）。ここを通常フローに置くと、画面が広いほど
   画像の自然高さでKVが縦に伸びる（1920pxで1198pxになっていた）。
   高さは左テキスト列だけが決める＝ブラウザ幅が変わっても一定。 */
.price-hero__img{position:relative;overflow:hidden;}
.price-hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ‐ 自由診療 ‐ ベージュラベル（Figma: bg#e5e0dc, py2, dash11×1 ink, Shippori16 ink） */
.label--pill{
  align-self:flex-start;background:var(--c-beige);
  padding:2px 8px;color:var(--c-ink);
  font-family:var(--f-min);font-size:16px;
}
.label--pill::before,.label--pill::after{background:var(--c-ink);width:11px;height:1px;}

/* インデックスボタン（Figma: 幅456, Shippori Medium22, pad16, gap20, 細い下向き矢印） */
.price-index{margin-top:80px;display:flex;flex-direction:column;gap:20px;}
.price-index a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px;background:var(--c-green);color:#fff;
  font-family:var(--f-min);font-weight:500;font-size:22px;line-height:1.4;transition:opacity .25s;
}
.price-index a:hover{opacity:.85;}
.price-index a::after{
  content:"";width:24px;height:8px;flex:none;
  background:url(../images/price-index-arrow.svg) no-repeat center/contain;
  transform:rotate(-90deg);
}

/* ===== 本体 ===== */
.price-content{width:min(100% - 100px,1400px);margin:0 auto;padding:100px 0 8px;}
.price-cat{scroll-margin-top:120px;}
.price-cat + .price-cat{margin-top:120px;}          /* カテゴリ間 120px */
.price-cat__body{display:flex;flex-direction:column;gap:32px;}  /* サブグループ間 32px */
.pt-group{display:flex;flex-direction:column;}
/* カテゴリ見出し: Figmaの行box(62px=lh1.9375)に合わせてleadingを再現＝ink隙間一致（box値だけ合わせると詰まる）。
   title→sub のink隙間をFigma(56px)に合わせて margin-bottom 24 */
.price-cat .feat-h{line-height:1.9375;margin-bottom:24px;}

/* 小見出し（— 顔の周り 等）Figma: Shippori26 ink, 緑マーカー24×4, gap8, 見出し→表13, 行box47=lh1.8 */
/* margin-bottom はink基準で1px（lh1.8の下側leading≈15pxが下側の隙間を担う）。box値13ではink隙間が28→広すぎた */
.pt-sub{display:flex;align-items:center;gap:8px;font-family:var(--f-min);font-weight:400;font-size:26px;line-height:1.8;color:var(--c-ink);margin-bottom:1px;}
.pt-sub::before{content:"";width:24px;height:4px;background:var(--c-green);flex:none;}

/* テーブル: 上線なし・下線は細線(1px)のみ・行下1px #132119、pad24、列gap40、Shippori18 */
.ptable{border-bottom:1px solid var(--c-ink);}
.pt-row{display:grid;align-items:center;column-gap:40px;padding:0 24px;min-height:80px;border-bottom:1px solid var(--c-ink);}
.pt-row:last-child{border-bottom:0;}
.pt-c3{grid-template-columns:26% 22% 1fr;}
.pt-c2{grid-template-columns:26% 1fr;}
.pt-head{background:var(--c-navi-th,#b6cfca);min-height:70px;font-family:var(--f-min);font-size:18px;color:var(--c-ink);}
.pt-item{font-family:var(--f-min);font-size:18px;line-height:1.4;color:var(--c-ink);}
.pt-val{font-family:var(--f-min);font-size:18px;line-height:1.4;color:var(--c-ink);}
.pt-na{color:#9a968f;}

/* ===== responsive ===== */
@media (max-width:1023px){
  .price-hero{grid-template-columns:1fr;min-height:0;}   /* 縦積みなのでPCの最低高さは解除 */
  .price-hero__text{padding:40px 24px;justify-content:flex-start;}
  .price-hero__img{aspect-ratio:16/9;order:-1;}
  .price-content{width:min(100% - 48px,900px);padding:64px 0 8px;}
  .pt-row{padding:0 16px;column-gap:16px;}
  .pt-c3{grid-template-columns:34% 30% 1fr;}
}
@media (max-width:767px){
  /* KV: SPは画像上・テキスト下（Figma SP 390×346画像） */
  .price-hero__img{aspect-ratio:390/346;}
  .price-hero__text{padding:32px 25px;}
  .price-hero__title{font-size:32px;}
  .price-index{margin-top:28px;gap:16px;}
  .price-index a{font-size:16px;padding:12px 16px;}

  /* 本体: Figma SP 左右15px */
  .price-content{width:calc(100% - 30px);padding:40px 0 8px;}
  .price-cat + .price-cat{margin-top:64px;}         /* カテゴリ間 SP 64px */
  .price-cat__body{gap:32px;}
  .pt-sub{font-size:18px;margin-bottom:4px;}
  .pt-sub::before{width:16px;height:2px;}
  .price-cat .feat-h{padding-left:17px;line-height:1.8;}   /* SPは20px→box36=lh1.8 */
  .price-cat .feat-h::before{height:36px;width:4px;}

  /* SP: 白背景カード＝サージュ地の品目バー＋「項目名 … 金額」行（Figma row_SP） */
  .ptable{border:0;display:flex;flex-direction:column;gap:24px;}   /* カード間 24px */
  .pt-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;background:#fff;padding:0 0 8px;min-height:0;border-bottom:0;}
  .pt-row.pt-head{display:none;}
  .pt-item{display:block;background:var(--c-navi-th,#b6cfca);padding:8px;font-weight:400;font-size:16px;}
  .pt-val{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:0 4px;font-size:16px;text-align:right;border-bottom:0;}
  .pt-val::before{content:attr(data-label);font-family:var(--f-min);color:var(--c-ink);text-align:left;}
  .pt-na{color:#9a968f;}
}