@charset "utf-8";
/* ============================================================
   14 料金表（Figma SP 3142:2527 / 375x1899）
   ・料金表はすべて <table> のテキスト。画像化しない
   ・セットプランは css/style.css の .kh-acc を使う
   ============================================================ */
/* css/style.css の `.kh p, .kh li, .kh span …{ text-align:left; letter-spacing:normal }` は
   各要素への直接指定なので、親（見出し枠など）からの継承を止めてしまう。
   このセクション配下だけ継承に戻す。個別の値は下の各ルールで指定する */
.kh-price :is(p, li, dt, dd, th, td, h1, h2, h3, h4, span, em, small) {
  text-align: inherit;
  letter-spacing: inherit;
}


.kh-price {
  background: #fcf9ed;
  padding: 60px 0;
}
.kh-price__inner {
  margin-inline: auto;
  width: 330px;
}

/* ---- 見出し -------------------------------------------- */
.kh-price__head { text-align: center; }
.kh-price .kh-price__en {
  font-family: "Alata", var(--kh-font-b);
  font-size: 35px;
  line-height: 1;
  letter-spacing: 2.45px;
  color: #f6eabc;
}
.kh-price__title {
  margin-top: -19px;        /* Figma: PRICE に 料金表 を重ねる */
  font-size: 20px;
  line-height: 1.65;
}
.kh-price .kh-price__lead {
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .45px;
  color: #2b2622;
}

/* ---- 割引カード ---------------------------------------- */
.kh-price__discounts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 22px;
}
.kh-price__disc {
  box-sizing: border-box;
  background: var(--kh-white);
  border: 1px solid #eadfd5;
  border-radius: 2px;
  padding: 9px 8px;
	width: 100%;
}
.kh-price__disc-name {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 15px;
  font-weight: 700;
  line-height: 18.15px;
  color: var(--kh-blue);
}
/* 元画像は余白が大きい正方形PNGなので contain で収める */
.kh-price .kh-price__disc-icon {
  flex: none;
  margin: 0;
  width: 19px;
  height: 19px;
  object-fit: contain;
}
.kh-price__disc-small { font-size: 13px; }

.kh-price__disc-note {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 17.33px;
  color: var(--kh-text);
}
.kh-price__disc-note em { font-style: normal; color: var(--kh-blue); }

.kh-price__discounts-note {
  margin-top: 12px;
  padding-left: 34px;
  font-size: 10px;
  font-weight: 500;
  line-height: 16.5px;
  color: var(--kh-text);
}

/* ---- コースカード（半袖デビュー / スカート・ズボン） ---- */
.kh-price__course {
  box-sizing: border-box;
  margin-top: 24px;
  width: auto;
  background: var(--kh-white);
  border: 1px solid #eadfd5;
  border-radius: 2px;
  overflow: hidden;
}
.kh-price__course-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
}
.kh-price .kh-price__course-icon { flex: none; margin: 0; width: 43px; height: 39px; object-fit: contain; }
.kh-price__course-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: var(--kh-blue);
}
.kh-price__course-parts {
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  color: var(--kh-text);
}
.kh-price__course-note {
  padding: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 19px;
  color: var(--kh-text);
}

/* ---- 料金表 -------------------------------------------- */
.kh-price__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  line-height: 19px;
  color: var(--kh-text);
}
.kh-price__table th,
.kh-price__table td {
  box-sizing: border-box;
  padding: 4px;
  border: .5px solid #eadfd5;
  background: var(--kh-white);
  font-weight: 500;
  text-align: center;
  vertical-align: middle;
}
/* 1列目（部位名・区分）は左寄せ */
.kh-price__table tbody th { text-align: left; }

/* 見出し行 */
.kh-price__table thead th,
.kh-price__table thead td { background: var(--kh-cream); font-weight: 700; }
.kh-price__table thead .is-rec { background: #c3e3ff; }
.kh-price__corner { background: var(--kh-cream); }

/* おすすめ列（5回） */
.kh-price__table tbody .is-rec { background: #e7f4ff; font-weight: 700; }

/* セット行 */
.kh-price__table .is-set th { background: #c3e3ff; font-weight: 700; }
.kh-price__table .is-set td { background: #e7f4ff; font-weight: 700; }

/* 列幅 */
.kh-price__table thead th:first-child,
.kh-price__table thead td:first-child { width: 86px; }
.kh-price__table thead th:nth-child(2) { width: 76px; }
.kh-price__table thead th:nth-child(3) { width: 84px; }
.kh-price__table thead th:nth-child(4) { width: 84px; }

.kh-price__table--parts thead th:first-child { width: 82px; }
.kh-price__table--parts thead th:nth-child(2) { width: 80px; }

.kh-price__table--option thead th:first-child { width: 90px; }
.kh-price__table--option thead th:nth-child(2) { width: 120px; }
.kh-price__table--option thead th:nth-child(3) { width: 120px; }
.kh-price__table--option tbody th { text-align: center; }

/* セットプラン表は5列。330pxに収めるため少し小さく組む */
.kh-price__table--plan { font-size: 11px; line-height: 18px; }
.kh-price__table--plan th,
.kh-price__table--plan td { padding: 4px 2px; }
.kh-price__table--plan thead th:first-child { width: 74px; }
.kh-price__table--plan thead th:nth-child(2),
.kh-price__table--plan thead th:nth-child(3),
.kh-price__table--plan thead th:nth-child(4),
.kh-price__table--plan thead th:nth-child(5) { width: 64px; }

/* ---- 小見出し・注記 ------------------------------------ */
.kh-price__block { margin-top: 24px; }
.kh-price__h3 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 23px;
  color: var(--kh-blue);
}
.kh-price__note {
  margin-top: 10px;
  font-size: 10px;
  font-weight: 500;
  line-height: 19px;
  color: var(--kh-text);
}

/* ---- セットプランのアコーディオン（.kh-acc の見た目調整） */
.kh-price__acc {
  margin-bottom: 10px;
  background: var(--kh-white);
  border: 1px solid #eadfd5;
}
.kh-price__acc > .kh-acc__q {
  padding: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
}
.kh-price__acc > .kh-acc__q::after {
  content: "＋";
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  color: var(--kh-blue);
  font-size: 15px;
  line-height: 23px;
}
.kh-price__acc[open] > .kh-acc__q::after { content: "－"; transform: none; }
.kh-price__acc > .kh-acc__a { padding: 0 10px 10px; }

/* ---- お支払い・施術に関するご案内 ---------------------- */
.kh-price__guide {
  box-sizing: border-box;
  margin-top: 24px;
  width: auto;
  background: var(--kh-white);
  border: 1px solid #eadfd5;
  padding: 12px;
  font-size: 12px;
  line-height: 19px;
}
.kh-price__guide dt { font-weight: 700; color: var(--kh-blue); }
.kh-price__guide dd { margin-bottom: 10px; font-weight: 500; color: var(--kh-text); }
.kh-price__guide dd:last-child { margin-bottom: 0; }

/* ---- CTA ----------------------------------------------- */
.kh-price__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 24px auto 0;
  width: 330px;
  min-height: 47px;
  padding: 14px;
  border-radius: 26px;
  background: #eb7699;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  text-decoration: none;
}
.kh-price__cta:hover { opacity: .9; }

/* I-6 表が枠からはみ出すので横スクロールさせる。
   セルに nowrap を入れないと「147,8 / 円」のような不正な折り返しが残る */
.kh-scrollx {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.kh-scrollx > table { width: auto; min-width: 100%; }
.kh-scrollx th,
.kh-scrollx td { white-space: nowrap; }

/* ============================================================
   J-11 パーツ説明表（S/M/Lの対象部位）
   配色・文字サイズは料金表に合わせる。横スクロールは不要なので
   .kh-scrollx では囲まず、区分列を58px固定・対象部位列は残り全幅
   ============================================================ */
.kh-price__parts-guide { margin-top: 12px; }
.kh-price__table--guide { table-layout: fixed; width: 100%; }
.kh-price__table--guide th[scope="col"] { background: #FFF6D3; }
.kh-price__table--guide th[scope="col"]:first-child,
.kh-price__table--guide th[scope="row"] { width: 58px; }
.kh-price__table--guide td {
	white-space: normal;   /* 対象部位は折り返して良い */
	text-align: left;
	line-height: 1.6;
}
.kh-price__guide-lead {
	display: block;
	color: #544C45;
	font-weight: 700;
}