@charset "utf-8";
/* ============================================================
   こども脱毛LP ー PC（450px幅）での上書き

   SPは375px固定。PCは共通レイアウト .l-cs-inner の列幅（450px）いっぱいに
   広げる。セクション個別のCSSより後に読み込むので、ここが最後に勝つ。

   ブレークポイントは銀座サイトの既存に合わせて 813px 以上
   （/assets/css/l-center-scroll.css と css/style.css がこの値を使っている）。
   SP（〜812px）には一切効かせない。

   ---- Figmaの「PCビューデザイン」(3200:2591) の実測 -------------------
   列を450pxにしたうえで、中身は375px設計のまま中央に寄せる作りだった。
   文字の再折り返しは行われていない（text nodeの幅・高さがSPと1pxも違わない。
   例: 04の本文 286x218 / 286x53 がSP・PCで同値。セクション高もSPと全て同じ）。
   そのためここでも「背景は450pxまで伸ばし、中身は375px設計のまま中央」に揃える。
   Figmaが個別に調整していた箇所（FVの写真・バッジ、04の白カード）はその実数に合わせる。
   ============================================================ */

@media screen and (min-width: 813px) {

/* ---- 列そのものを450pxにする ---------------------------- */
.kh                   { max-width: 450px; }
.kh-fixed-cta__inner  { max-width: 450px; }

/* パンくずはここでは触らない。
   css/style.css 側で /doctor/nishikawa/ と同じ「PCではビューポート左上に固定」に
   揃えてあり、コンテンツ列の外にあるため列幅450pxの対象外。 */

/* ---- 01 FV ---------------------------------------------
   Figma PC(3200:2600) の実数:
     FV画像       x21 y-4  452x505  →  x35 y-28 503x562
     白のぼかし    x-18         →  x-13（+5）
     バッジ群      x20 w336.23  →  x43 w372（円 105.41→116.62・隙間 10→11.07）
   見出しコピー(x24 w205) はPCでも同じなので触らない。
   ※PCフレームでは「医師が診察する、こどもの医療脱毛です」の行が
     抜け落ちていた（高さ0の空フレーム）。内容なので消さずに残す。 */
.kh-fv__deco {
  left: -48px;
  width: 552px;                              /* 460 × 450/375。帯の高さは変えない */
  border-top-right-radius: 384px 160px;
}
.kh-fv__photo     { left: 35px; top: -28px; width: 503px; height: 562px; }
.kh-fv__photo img { width: 503px; height: 562px; }

.kh-fv__copy::before { left: -37px; }

.kh-fv__badges { left: 43px; gap: 11.07px; }
.kh-fv__badge,
.kh-fv__badge-ring { width: 116.62px; height: 112.12px; }
.kh-fv__badge-body {
  left: 4.86px;
  top: 4.67px;
  width: 106.91px;
  height: 102.78px;
  border-radius: 60px;
}
/* バッジ内の文字・アイコンはFigma PCでも同寸（78x35 / 32x30 / 24x19 など）。
   font-size は一切変えない＝拡大ではない */

/* ---- 02 こども脱毛で変わること ----------------------------
   上端の弧は列いっぱいに敷く装飾（Figma PC: Ellipse 28 が 375→450）。
   中身（327px）は align-items:center で自動的に中央に来るので触らない */
.kh-intro__arc { width: 450px; }

/* ---- 03 CTA --------------------------------------------
   flex-start のままだと左に寄るので中央へ（327px → 左右61.5px） */
.kh-cta03 { align-items: center; }

/* ---- 04 「脱毛したい」と言われた --------------------------
   Figma PC(3200:2669): 白カードだけ 330 → 386 に広がり、
   中の本文は286pxのまま・ボタンは330pxのまま中央。 */
.kh-voice            { padding-left: 32px; padding-right: 32px; }
.kh-voice__card      { width: 386px; }

/* ---- 05 こんな変化、ありませんか？ ------------------------
   ブロック要素なので左右の余白で中央に置く（330px → 左右60px） */
.kh-change { padding-left: 60px; padding-right: 60px; }

/* ---- 08 医療脱毛とエステ脱毛の違い ------------------------
   背面の英字はセクション基準の絶対配置。列の中央にずらす */
.kh-vs__en { left: 234.5px; }   /* 197 + 37.5 */

/* ---- 10 お子さまには、蓄熱式 ------------------------------ */
.kh-chikunetsu__inner { align-items: center; }
/* 上端の波は .kh img { max-width:100% } に clamp されて列幅ちょうどに縮む作りなので、
   375→450 で自動的に1.2倍になる。左位置も同じ比率でずらして見え方を揃える
   （SPと同じく右端に少しだけ地が出る。SP側の見え方は変えない） */
.kh-chikunetsu__wave  { left: -82.8px; }   /* -69 × 450/375 */

/* ---- 11 照射部位の一覧 ------------------------------------
   中身は全て .kh-parts__card の中（絶対配置の基準）なので、
   カード・見出し・英字の3つを +37.5px ずらすだけで図全体が中央にくる */
.kh-parts__en    { left: 132.5px; }   /*  95 + 37.5 */
.kh-parts__title { left:  97.5px; }   /*  60 + 37.5 */
.kh-parts__card  { left:  61.5px; }   /*  24 + 37.5 */

/* ---- 12 ご来院から施術までの流れ -------------------------- */
/* 上部写真の窓は450pxに広げる。中の画像は%指定のままだと窓に合わせて
   引き伸ばされて縦横比が崩れるので、SPでの実寸をpxに固定して
   「広がったぶん写真が多く見える」挙動にする */
.kh-flow__photo     { width: 450px; }
.kh-flow__photo img { left: -22.8px; top: -62.51px; width: 487.76px; height: 326px; }

.kh-flow__plate { left: 64.5px; }   /* 27 + 37.5 */
.kh-flow__en,
.kh-flow__title { left: 99.5px; }   /* 62 + 37.5 */
.kh-flow__steps { left: 67.5px; }   /* 30 + 37.5 */

/* ---- 15 迷っている方へ ------------------------------------ */
.kh-hesitate__head { width: 450px; }

/* ---- 16 その気持ちも、ちゃんと受け止めます ----------------- */
.kh-feelings__head,
.kh-feelings__photo,
.kh-feelings__title-area,
.kh-feelings__lead { width: 450px; }
/* タイトル地（下辺がV字のSVG）は幅だけ列に合わせる。高さは138pxのまま */
/* 修正8: background-size:450px 138px を削除。16_feelings.css の
     100% 100% が効くようになり、V字が右端まで届く */
/* 白地のリード文は行の折り返しを変えないよう、本文幅315pxを保って中央に置く */
.kh-feelings__lead { padding-left: 67.5px; padding-right: 67.5px; }

/* ---- 17 よくあるご質問 ------------------------------------
   アコーディオンの幅341pxを保って中央に置く（17 → 54.5px） */
.kh-faq { padding-left: 54.5px; padding-right: 54.5px; }

}

/* ============================================================
   H-1 PC（991px以上）で本文を14px / 行間22pxにする

   指示書の除外5箇所は対象外（いずれも狭い枠に改行位置が決め打ちされており、
   文字を上げると必ず崩れる）:
     .kh-parts__label--*  .kh-fv__badge-*  .kh-breadcrumb
     .kh-change__voice-text  .kh-selfcare__body / __name

   em / strong が独自の line-height を持つので、子要素にも効かせる
   ============================================================ */
@media screen and (min-width: 991px) {
  .kh-fv .kh-fv__sub,
  .kh-fv .kh-fv__sub *,
  .kh-cta03 .kh-cta03__free-text,
  .kh-cta03 .kh-cta03__free-text *,
  .kh-what .kh-what__card-body,
  .kh-what .kh-what__card-body *,
  .kh-vs__head-box--sub,
  .kh-vs__head-box--sub *,
  .kh-vs__table .kh-vs__item,
  .kh-vs__table .kh-vs__item *,
  .kh-vs__table .kh-vs__sub,
  .kh-vs__table .kh-vs__sub *,
  .kh-reasons__body,
  .kh-reasons__body *,
  .kh-chikunetsu__judge-body,
  .kh-chikunetsu__judge-body *,
  .kh-chikunetsu__machine-type,
  .kh-chikunetsu__machine-type *,
  .kh-chikunetsu__machine-desc,
  .kh-chikunetsu__machine-desc *,
  .kh-parts__note,
  .kh-parts__note *,
  .kh-visit .kh-visit__badge,
  .kh-visit .kh-visit__badge *,
  .kh-visit__note,
  .kh-visit__note *,
  .kh-visit__hours-head,
  .kh-visit__hours-head *,
  .kh-price__disc-note,
  .kh-price__disc-note *,
  .kh-price__course-parts,
  .kh-price__course-parts *,
  .kh-price__course-note,
  .kh-price__course-note *,
  .kh-price__table,
  .kh-price__table *,
  .kh-price__acc > .kh-acc__q,
  .kh-price__acc > .kh-acc__q *,
  .kh-price__guide,
  .kh-price__guide *,
  .kh-hesitate__text,
  .kh-hesitate__text *,
  .kh-hesitate__p,
  .kh-hesitate__p *,
  .kh-hesitate__list li,
  .kh-hesitate__list li *,
  .kh-feelings__lead p,
  .kh-feelings__lead p *,
  .kh-feelings__list li,
  .kh-feelings__list li *,
  .kh-access__text,
  .kh-access__text * {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ============================================================
   I-1 PCで料金表の左右余白を詰めて表を広く使う
   割引カード3枚は表より一回り細く、中央寄せ
   ============================================================ */
@media screen and (min-width: 991px) {
  .kh-price__inner {
    margin: 0 24px;
    width: auto;   /* 330px固定だと割引カード(340px)が溢れる */
  }
  .kh-price th,
  .kh-price td {
    font-size: 14px;
    padding: 8px 10px;
  }
  .kh-price__discounts {
    width: 340px;
    margin-inline: auto;
  }
}