/* =============================================================================
 *  KT CLINIC — 料金一覧（page-price.php）
 *  2026-07-27 モック（KT料金一覧_モック.html）に合わせて全面刷新
 *  セレクタは .kt-prc 配下にスコープしている
 *
 *  料金ブロックの見た目は施術詳細ページの料金セクションと同じ。
 *  幅も46remで揃えているので、同じ施術の料金が両方のページで同じ形に見える。
 * ========================================================================== */

.kt-prc{color:var(--ink);font-family:var(--sans);line-height:1.75;}
.kt-prc *{box-sizing:border-box;}
.kt-prc a{color:inherit;text-decoration:none;}

/* ===== ページヘッダー ===================================================== */
.kt-prc .prc-head{text-align:center;}
.kt-prc .prc-h1{font-family:var(--serif);font-size:2.5rem;font-weight:500;letter-spacing:.08em;
                line-height:1.5;margin:0 0 1.3rem;}
.kt-prc .prc-sub{font-size:.93rem;line-height:2.05;color:var(--sub);}

/* ===== 本体 ============================================================== */
.kt-prc .prc-body{padding:3rem 2.5rem 7rem;}
.kt-prc .prc-inner{max-width:46rem;margin:0 auto;}
.kt-prc .prc-empty{font-size:.92rem;color:var(--sub);text-align:center;padding:3rem 0;margin:0;}

/* --- 科タブ --- */
.kt-prc .prc-tabs{display:flex;justify-content:center;gap:1.15rem;margin-bottom:2.25rem;}
.kt-prc .prc-tab{cursor:pointer;font-family:var(--serif);font-size:1.05rem;font-weight:500;
                 letter-spacing:.16em;display:inline-flex;align-items:center;white-space:nowrap;
                 padding:1.05rem 2.1rem;border-radius:10px;
                 background:#fff;border:1.4px solid #DEDDD9;color:#8C8A85;
                 transition:background .25s,border-color .25s,color .25s,box-shadow .25s;}
.kt-prc .prc-tab:hover{color:var(--gold-deep);border-color:var(--gold-line);}
.kt-prc .prc-tab.is-active{background:#fff;border-color:var(--gold-deep);color:var(--gold-deep);
                           box-shadow:0 2px 10px rgba(62,56,47,.07);}
.kt-prc .prc-tab:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
.kt-prc .prc-panel{display:none;}
.kt-prc .prc-panel.is-active{display:block;}

/* --- 目次 --- */
.kt-prc .prc-idx{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.75rem;padding-bottom:2.25rem;
                 border-bottom:1px solid var(--grey-line);}
.kt-prc .prc-idx a{font-size:.82rem;letter-spacing:.04em;color:var(--sub);padding:.5rem 1.1rem;
                   border:1px solid var(--grey-line);border-radius:999px;transition:all .2s;
                   white-space:nowrap;}
.kt-prc .prc-idx a:hover{border-color:var(--gold-line);color:var(--gold-deep);}

/* --- シリーズ名（ドクターズコスメ） ---
   2026-08-01 まで料金側の施術名もこのクラスだった。
   料金はカテゴリーでまとめる形に変えたので、いまはコスメ専用。 */
.kt-prc .prc-mst + .prc-mst{margin-top:3.5rem;}
.kt-prc .prc-mst-h2{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:.06em;
                    line-height:1.6;margin:0 0 1.4rem;padding-bottom:.9rem;
                    border-bottom:1px solid var(--grey-line);}
.kt-prc .prc-mst-h2 a,
.kt-prc .prc-mst-h2 > span{display:flex;align-items:baseline;gap:.9rem;width:100%;}
.kt-prc .prc-mst-h2 .go{font-family:var(--sans);font-size:.76rem;font-weight:400;letter-spacing:.06em;
                        color:var(--gold-deep);margin-left:auto;white-space:nowrap;transition:opacity .2s;}
.kt-prc .prc-mst-h2 a:hover .go{opacity:.6;}

/* --- カテゴリー（h2）→ 施術名（h3） ---
   2026-08-01 追加。目次のチップが施術の数だけ増えていた（7つで2行）ため、
   カテゴリーでまとめる形にした。

   これより下の階層（料金グループ・部位・価格の行）は
   **assets/css/price-table.css が持つ**。施術詳細ページと共通。 */
.kt-prc .prc-cat + .prc-cat{margin-top:4.5rem;}
.kt-prc .prc-cat-h2{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:.06em;
                    line-height:1.6;margin:0 0 1.6rem;padding-bottom:.9rem;
                    border-bottom:1px solid var(--grey-line);}

.kt-prc .prc-trt + .prc-trt{margin-top:2.5rem;}
.kt-prc .prc-trt-h3{font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:.05em;
                    line-height:1.6;margin:0 0 .9rem;}
.kt-prc .prc-trt-h3 a,
.kt-prc .prc-trt-h3 > span{display:flex;align-items:baseline;gap:.9rem;width:100%;}
.kt-prc .prc-trt-h3 .go{font-family:var(--sans);font-size:.74rem;font-weight:400;letter-spacing:.06em;
                        color:var(--gold-deep);margin-left:auto;white-space:nowrap;transition:opacity .2s;}
.kt-prc .prc-trt-h3 a:hover .go{opacity:.6;}

   書体と色を1段ずつ変えて区別する。大きさだけでは差が足りない。 */
.kt-prc .prc-grp + .prc-grp{margin-top:2.5rem;}
.kt-prc .prc-grp-h4{font-family:var(--serif);font-size:1rem;font-weight:600;letter-spacing:.05em;
                    color:var(--gold-deep);margin:0 0 .45rem;}
.kt-prc .prc-grp-note{font-size:.82rem;line-height:1.95;color:var(--sub);margin:0 0 1rem;}
.kt-prc .prc-sub-h5{font-size:.88rem;font-weight:600;margin:1.35rem 0 .5rem;}
.kt-prc .prc-note-s{font-size:.8rem;line-height:1.95;color:#8C8A85;margin:.7rem 0 0;}

/* --- 価格の行 ---
   2026-08-01 見直し（案D）。それまで価格は明朝1.05rem・太さそのままで、
   施術名（.92rem）の 1.14倍しかなく、明朝の細い縦線とあいまって華奢に見えていた。

     数字を 1.35rem・太さ500 に上げ（施術名の 1.50倍）
     「円」は数字の 72% に落として、数字を主役にする
     行の高さを 62px → 79px に広げ、数字のまわりに空きをつくる

   色や塗りは足していない。塗りはサイト内で「独立したお知らせ」に使っているため。
   **施術詳細ページ（single-treatment.css の .trs-prc-*）と同じ値にすること。** */
.kt-prc .prc-rows{border-top:1px solid var(--grey-line);}
.kt-prc .prc-row{display:flex;align-items:baseline;gap:1rem;padding:1.15rem .25rem;
                 border-bottom:1px solid var(--grey-line);font-size:.9rem;}
.kt-prc .prc-name{flex:1;min-width:0;}
.kt-prc .prc-sublabel{font-size:.78rem;color:var(--sub);margin-left:.4rem;}
.kt-prc .prc-sublabel::before{content:"（";}
.kt-prc .prc-sublabel::after{content:"）";}
.kt-prc .prc-yen{flex:none;font-family:var(--serif);font-size:1.35rem;font-weight:500;
                 font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap;}
.kt-prc .prc-yen .unit{font-size:.72em;font-weight:500;margin-left:.08em;}
.kt-prc .prc-yen.is-campaign{color:#C0392B;}
.kt-prc .prc-tax{font-family:var(--sans);font-size:.68rem;font-weight:400;color:var(--sub);
                 margin-left:.45rem;}

/* --- ドクターズコスメの商品 --- */
.kt-prc .prc-prd + .prc-prd{margin-top:1.9rem;}
.kt-prc .prc-prd-head{display:flex;align-items:flex-start;gap:1rem;margin:0 0 .7rem;}
.kt-prc .prc-prd-img{flex:none;width:3.4rem;height:3.4rem;background:var(--gold-soft);overflow:hidden;}
.kt-prc .prc-prd-img img{width:100%;height:100%;object-fit:cover;display:block;}
.kt-prc .prc-prd-txt{flex:1;min-width:0;}
.kt-prc .prc-prd-name{font-size:1rem;font-weight:600;letter-spacing:.02em;margin:.1rem 0 .25rem;}
.kt-prc .prc-prd-name a{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;}
.kt-prc .prc-prd-name .go{font-size:.72rem;font-weight:400;letter-spacing:.06em;color:var(--gold-deep);
                          margin-left:auto;white-space:nowrap;}
.kt-prc .prc-prd-desc{font-size:.82rem;line-height:1.9;color:var(--sub);margin:0;}

/* --- 末尾の注記 --- */
.kt-prc .prc-note{margin-top:4rem;font-size:.8rem;line-height:2;color:#8C8A85;}
.kt-prc .prc-note p{margin:0;}

/* ===== スマホ =========================================================== */
@media (max-width:1080px){
  .kt-prc .prc-head{text-align:left;}
  .kt-prc .prc-h1{font-size:1.75rem;}
  .kt-prc .prc-sub{text-align:left;font-size:.88rem;}
  .kt-prc .prc-body{padding:2rem 1.25rem 4.5rem;}
  .kt-prc .prc-tabs{margin:0 -1.25rem 1.75rem;padding:.25rem 1.25rem;gap:.6rem;overflow-x:auto;
                    justify-content:flex-start;scrollbar-width:none;}
  .kt-prc .prc-tabs::-webkit-scrollbar{display:none;}
  .kt-prc .prc-tab{padding:.85rem 1.1rem;font-size:.9rem;letter-spacing:.1em;}
  .kt-prc .prc-idx{margin:0 -1.25rem 2rem;padding:0 1.25rem 1.75rem;gap:.45rem;flex-wrap:nowrap;
                   overflow-x:auto;scrollbar-width:none;}
  .kt-prc .prc-idx::-webkit-scrollbar{display:none;}
  .kt-prc .prc-idx a{padding:.45rem 1rem;font-size:.78rem;}
  .kt-prc .prc-mst + .prc-mst{margin-top:2.75rem;}
  .kt-prc .prc-mst-h2{font-size:1.25rem;}
  .kt-prc .prc-mst-h2 a,
  .kt-prc .prc-mst-h2 > span{flex-wrap:wrap;gap:.4rem;}
  .kt-prc .prc-mst-h2 .go{margin-left:0;font-size:.72rem;}
  /* カテゴリーと施術名。「施術ページを見る」は右端に置けないので、名前の下へ回す */
  .kt-prc .prc-cat + .prc-cat{margin-top:3.25rem;}
  .kt-prc .prc-cat-h2{font-size:1.25rem;}
  .kt-prc .prc-trt + .prc-trt{margin-top:2rem;}
  .kt-prc .prc-trt-h3{font-size:1.05rem;}
  .kt-prc .prc-trt-h3 a,
  .kt-prc .prc-trt-h3 > span{flex-wrap:wrap;gap:.35rem;}
  .kt-prc .prc-trt-h3 .go{margin-left:0;font-size:.72rem;}
  .kt-prc .prc-row{flex-wrap:wrap;gap:.25rem 1rem;padding:1rem .25rem;}
  /* スマホは価格が折り返して独立した行になるので、少しだけ落とす */
  .kt-prc .prc-yen{margin-left:auto;font-size:1.25rem;}
  .kt-prc .prc-prd-head{gap:.8rem;}
  .kt-prc .prc-prd-img{width:2.8rem;height:2.8rem;}
  .kt-prc .prc-prd-name{font-size:.94rem;}
  .kt-prc .prc-prd-name a{gap:.4rem;}
  .kt-prc .prc-prd-name .go{margin-left:0;}
}