/* =========================================================================
   料金表ページ (/price) 固有スタイル
   共通のヒーロー・パンくず・注意書き・ジャンプナビ・CTA・LINEブロックは
   common.css 側の .page-hero / .notice / .jumpnav / .ctaband / .lineblk を使用。
   ここには「料金リスト」「支払い方法」など、このページ固有の見た目のみ書く。

   ★更新：SBC（https://www.s-b-c.net/clinic/skin/price/）の料金表記を参考に、
   <table> ベースの表から「カード＋リスト」構成に刷新。
   モニター価格は値がある行にだけバッジ付きで表示し、親施術（同名が連続する
   項目）には「施術の詳細はこちら」ボタンを追加した（kaneko_render_price_table()
   側のHTML変更に合わせたスタイル）。
   ★再更新：
   ・モニター価格バッジを、塗りつぶしのボタン風デザインに変更
     （バッジの中に金額を入れず、バッジ＝ラベル、金額はバッジの外側に
     大きく強調表示）。
   ・カード（.price-item）を <details>/<summary> によるアコーディオンに変更。
     ヘッダーは薄いブラッシュ系の背景＋円形の開閉ボタン（＋／−）。
   ========================================================================= */

/* =========================================================================
   カテゴリー・ジャンプナビ（イラストアイコンのリンクボックス）
   ★追加：以前はピル型のテキストリンクを横スクロールで並べていたが、
   「お悩みから探す」（front-page.php の .find-grid）と同じ考え方で、
   イラストアイコン＋ラベルのカードにし、カード下端に「↓」の丸バッジを重ねて
   タップでその区画へジャンプすることが一目でわかるようにした。
   アイコンは kaneko_icon() の部位アイコン（目元／鼻／輪郭／身体／
   ヒアルロン酸／ボトックス／肌育／オプション）をそのまま流用している。
   ========================================================================= */
.price-jumpnav{padding-block:clamp(36px,5vh,54px) 0;}
.price-jumpgrid{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,26px) clamp(12px,2vw,20px);max-width:980px;}
.pj-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.7em 1em 1.9em;text-align:center;text-decoration:none;box-shadow:0 12px 24px -20px rgba(33,30,26,.45);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);}
.pj-box:hover{transform:translateY(-4px);border-color:var(--bronze);box-shadow:0 18px 32px -18px rgba(33,30,26,.5);}
.pj-ic{width:clamp(38px,5vw,46px);height:clamp(38px,5vw,46px);color:var(--bronze);}
.pj-ic .kic{width:100%;height:100%;}
.pj-lb{font-family:var(--f-body);font-weight:700;font-size:.84rem;letter-spacing:.01em;line-height:1.5;color:var(--ink-soft);}
.pj-arrow{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--bronze);box-shadow:0 6px 14px -6px rgba(33,30,26,.55);transition:background .3s;}
.pj-arrow::after{content:"";position:absolute;top:38%;left:50%;width:7px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg);}
.pj-box:hover .pj-arrow{background:var(--ink);}
.price-jump-pay{text-align:center;margin-top:clamp(26px,3.6vh,34px);}
.price-jump-pay a{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-body);font-weight:700;font-size:.86rem;color:var(--bronze);text-decoration:underline;text-underline-offset:.3em;}
.price-jump-pay a:hover{color:var(--ink);}
.price-jump-pay .ar{transition:transform .3s;}
.price-jump-pay a:hover .ar{transform:translateX(3px);}
@media (max-width:680px){
  .price-jumpgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;}
  .pj-lb{font-size:.78rem;}
}

.price-sec{padding-block:clamp(50px,7vh,80px) var(--sect-y);}

.price-cat{padding-top:clamp(40px,6vh,64px);scroll-margin-top:calc(var(--head-h) + 58px);/* 固定ヘッダー＋ジャンプナビ分、アンカー着地位置をオフセット */}
.price-cat + .price-cat{border-top:1px solid var(--line);}

/* ★更新：塗りつぶしのボックス見出しは、下のアコーディオン（.price-item-headの
   ブラッシュ系背景バー）と並ぶと同じような「帯」に見えて視覚的に重なって見えるため、
   下線のみのシンプルな見出しデザインに変更した。 */
.price-cat-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.3rem,4.6vw,1.7rem);line-height:1.6;letter-spacing:.01em;background:none;color:var(--ink);padding:0 0 .55em;margin:0 0 clamp(24px,3.4vh,34px);border-radius:0;border-bottom:3px solid var(--bronze,#9A7B4F);}

.price-group-title{font-family:var(--f-body);font-weight:700;font-size:.86rem;letter-spacing:.06em;color:var(--bronze);margin:clamp(28px,4vh,40px) 0 14px;padding-left:12px;border-left:3px solid var(--bronze);}
.price-group-title:first-of-type{margin-top:0;}

/* =========================================================================
   料金リスト（カード形式）
   ========================================================================= */
.price-list{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(30px,4.4vh,44px);}

/* ---- カード外枠（<details>） ---- */
.price-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;}

/* ---- ヘッダー（<summary>＝アコーディオンの開閉トリガー） ---- */
.price-item-head{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;
  padding:1.05em 1.3em;
  background:#ece0d8; /* ブラッシュ系の淡いベージュピンク */
  transition:background .25s;
}
.price-item-head::-webkit-details-marker{display:none;}
.price-item-head::marker{content:"";}
.price-item-head:hover{background:#e6d7cc;}
.price-item[open] .price-item-head{border-bottom:1px solid var(--line);}

.price-item-head .pt-caret{color:var(--bronze);font-weight:700;font-size:.85em;line-height:1;}
.price-item-name{font-family:var(--f-disp);font-weight:500;font-size:1.02rem;color:var(--ink-soft);letter-spacing:.01em;line-height:1.5;margin-right:auto;}
.price-item-name a{color:var(--ink-soft);text-decoration:none;transition:color .3s;}
.price-item-name a:hover{color:var(--bronze);}

.price-detail-link{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-body);font-weight:700;font-size:.76rem;letter-spacing:.02em;color:#fff;background:var(--bronze);border-radius:999px;padding:.55em 1.15em;white-space:nowrap;transition:background .3s,transform .3s;}
.price-detail-link:hover{background:var(--ink);transform:translateY(-1px);}
.price-detail-link .ar{transition:transform .3s;}
.price-detail-link:hover .ar{transform:translateX(3px);}

/* ---- 開閉ボタン（円形、＋／−） ---- */
.price-toggle{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#faf8f6;display:flex;align-items:center;justify-content:center;position: absolute;right: 15px;}
.price-toggle::after{content:"+";font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1;color:var(--bronze);}
.price-item[open] .price-toggle::after{content:"−";}

/* ---- アコーディオンなしカード（.price-item--plain） ----
   [kaneko_field type="price"] / [kaneko_price] / [kaneko_price_regular] 用。
   <details>/<summary> を使わず、常に全内容を表示した状態の見出しのみを持つ
   カード（開閉の＋－ボタンは表示しない）。 */
.price-item-head--plain{cursor:default;border-bottom:1px solid var(--line);}
.price-item-head--plain:hover{background:#ece0d8;}

/* ---- 本文（バリエーション一覧） ---- */
.price-item-body{display:flex;flex-direction:column;}

.price-variant{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:1em 1.3em;}
.price-variant + .price-variant{border-top:1px solid var(--line);}
.price-variant:hover{background:rgba(227,210,200,.14);}
.price-variant.is-plain{padding-block:1.05em;}

/* ★更新：料金表.xlsx の「見出し」列（〇）対応。1つのアコーディオンの中に、施術名ごとの
   小見出し（例：「目の上（両目）」）を挟んで複数のグループ（.price-subgroup）を並べる構成
   （kaneko_render_price_table_sectioned() が出力）。
   ★再更新：罫線だけだと区切りが分かりづらいとのご指摘のため、アコーディオン本文
   （.price-item-body）に薄いブラッシュ系の背景を敷き、施術名ごとに白いカード
   （.price-subgroup）で区切って、カードの間に余白ができるようにした。 */
.price-item--sectioned .price-item-body{background:#f3e7e0;padding:14px;gap:12px;}
.price-item--sectioned .price-subgroup{background:var(--card,#fff);border-radius:12px;overflow:hidden;box-shadow:0 8px 18px -16px rgba(33,30,26,.5);}
.price-item--sectioned .price-variant{padding:.95em 1.2em;}
.price-item--sectioned .price-variant + .price-variant{border-top:1px solid var(--line);}

.price-subgroup-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:1.1em 1.3em 0;
      border-bottom: 2px solid #57544e29;
}
.price-subgroup-title{margin:0 0 .5em;font-family:var(--f-body);font-weight:700;font-size:.84rem;letter-spacing:.02em;color:var(--ink-soft);

   /* text-decoration:underline; */
   text-decoration-color:var(--line);
   text-underline-offset:.35em;}
.price-detail-link--sub{margin:0 0 .6em;font-size:.68rem;padding:.4em .9em;}
/* ★追加：施術名（サブ見出し）にバリエーションが1件しかない場合、見出しカードを省略して
   価格行の名前の右側にそのまま小さく表示する「施術の詳細はこちら」リンク。
   ★更新：下に折り返す（display:block）と、名前セルの高さが価格より高くなり、
   .price-variant の align-items:center によって施術名が縦方向中央（本来より下寄り）に
   見えてしまっていたため、名前と同じ行の右側にインラインで並べる形に変更した。 */
.price-detail-link--inline{display:inline-flex;margin:0 0 0 12px;width:auto;vertical-align:middle;}

/* ★更新：施術名セルは常に上揃えにする（隣の価格セルより行が増えても、名前が
   縦方向中央に見えないようにするため）。 */
.price-variant-name{margin:0;font-size:.88rem;font-weight:500;color:var(--ink-soft);line-height:1.75;flex:1 1 auto;min-width:140px;align-self:flex-start;}

/* ★更新：「(税込)」が付くことで数字部分が左に寄って見える、とのご指摘のため、
   価格ブロック全体をtext-align:rightにして右端で揃うようにした。 */
.price-variant-values{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap;margin-left:auto;text-align:right;}

/* ★更新：通常料金の文字色を、目立たせるため赤系（#c0392b）に変更 */
.price-main{font-family:var(--f-body);font-weight:700;font-size:1.08rem;color:#c0392b;white-space:nowrap;line-height:1.4;text-align:right;}

/* ---- モニター価格：バッジ（ボタン風の塗りつぶし）＋外側の強調価格
   ★更新：モニター価格の文字色は元のブロンズ色に戻し、通常料金（赤）と差別化。
   サイズは.price-mainと同じまま統一。
   ★再更新：「¥◯,◯◯◯ → ¥◯,◯◯◯」のような割引表記の場合、金額側
   （.price-monitor-val）は取り消し線の元価格（上段）と実際のモニター価格
   （下段）の2行スタックになるが、align-items:centerのままだと「モニター価格」
   バッジが2行の中間（元価格寄り）に来てしまい、実際のモニター価格の金額と
   高さが揃わなかった。バッジを2行の下端＝実際の金額の行に揃うよう
   align-items:flex-endに変更（金額が1行だけの通常ケースでは見た目は変わらない）。 ---- */
.price-monitor{display:inline-flex;align-items:flex-end;gap:.7em;white-space:nowrap;}
.price-badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-body);font-weight:700;font-size:.68rem;letter-spacing:.02em;color:#fff;background:var(--bronze);border-radius:4px;padding:.5em .8em;line-height:1;white-space:nowrap;}
.price-monitor-val{font-family:var(--f-body);font-weight:700;font-size:1.08rem;color:var(--bronze);line-height:1.4;text-align:right;}

/* ★更新：スマホ版のサイズはそのまま、PC版（681px以上）の金額をより見やすく拡大。 */
@media (min-width:681px){
  .price-variant-values{gap:8px;}
  .price-main{font-size:1.32rem;}
  .price-monitor-val{font-size:1.32rem;}
  .price-monitor{gap:.8em;}
  .price-badge{font-size:.55rem;padding:.55em .9em;}
}

/* ---- 割引表記（元価格 → 割引後価格）。kaneko_yen_label() が出力するspan。
   .price-main / .price-monitor-val の中でそのまま使えるよう調整。
   通常の取り消し線（水平線）ではなく斜線デザイン。
   ★更新：「¥◯,◯◯◯ OFF」バッジは廃止し、斜線＋割引後価格のみのシンプルな表示に。 ---- */
.pt-price-set{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.35;gap:.3em;}
.pt-price-before{position:relative;display:inline-block;font-size:.7em;font-weight:400;color:var(--ink-faint);text-decoration:none;}
.pt-price-before::after{content:"";position:absolute;left:-4%;right:-4%;top:52%;height: 1px;
   background: rgb(163 156 144 / 46%);
   transform: none;
   /* transform:rotate(-10deg); */
}
/* ★更新：common.css側の .pt-price-after{color:var(--bronze)} が先に読み込まれ、
   ここで色を明示していなかったため、割引後価格（元価格→割引後価格の「後」）だけ
   常にブロンズ色のまま残ってしまっていた（＝通常料金なのに赤文字にならない不具合）。
   親要素（.price-main は赤、.price-monitor-val はブロンズ）の色をそのまま継承するよう
   明示的にcolor:inheritを指定して修正。 */
.pt-price-after{font-weight:700;color:inherit;}

/* ★更新：「要問合せ」は金額ではないため、通常の価格表示より一回り小さい
   フォントサイズで表示する。 */
.kaneko-price-inquiry{font-size:.6em;font-weight:700;}

/* =========================================================================
   お支払い方法
   ========================================================================= */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.pay-item{background:var(--card);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:.5em;}
.pay-name{font-family:var(--f-disp);font-weight:700;font-size:1.06rem;letter-spacing:.01em;}
.pay-note{font-size:.88rem;color:var(--ink-soft);font-weight:400;line-height:1.8;}

/* =========================================================================
   モバイル：カードの余白と文字サイズを詰め、価格情報は右揃えのまま
   下段に落として1画面あたりの視認性を確保する。
   ========================================================================= */
@media (max-width:680px){
  .price-item-head{padding:.9em 1.05em;gap:6px 12px;}
  .price-item-name{font-size:.94rem;margin-right:0;flex:1 1 100%;order:1;}
  .price-item-head .pt-caret{order:0;}
  .price-detail-link{font-size:.72rem;padding:.5em .95em;order:2;}
  .price-toggle{width:26px;height:26px;order:3;margin-left:auto;}
  .price-toggle::after{font-size:.9rem;}

  .price-variant{padding:1em 1.05em;flex-direction:column;align-items:flex-start;gap:0px;}
  .price-variant-name{font-size:.8rem;line-height:1.7;}
  .price-item--sectioned .price-item-body{padding:10px;gap:10px;}
  .price-item--sectioned .price-variant{padding:.4em 0.4em .9em 1.05em;}
  .price-subgroup-head{padding: .9em 1.05em 0;
   gap: 2px 10px;
   border-bottom: 2px solid #57544e29;}
  .price-subgroup-title{font-size:.68rem;}
  .price-detail-link--sub{font-size:.5rem;padding:.4em .8em;}
  .price-variant-values{align-self:flex-end;align-items:flex-end;gap:0px;text-align:right;}

  .price-main{font-size:1.1rem;}
  .price-main .pt-price-before{font-size:.68em;}
  .price-monitor{gap:.55em;}
  .price-badge{font-size:.4em;padding:.45em .7em;margin-bottom: 2px;}
  .price-monitor-val{font-size:1.1rem;}
  .price-monitor .pt-price-before{font-size:.66em;}

  .price-cat{padding-top:clamp(28px,4vh,40px);}
  .price-group-title{margin:clamp(20px,3vh,28px) 0 10px;}

  .pay-grid{grid-template-columns:1fr;}
  .pay-name{font-size:1.08rem;}
  .pay-note{font-size:.9rem;}
}