@charset "utf-8";
/* ============================================================
   07 こども脱毛とは？（Figma SP 3142:2119 / 375x482）
   ・カード3枚は105px×171px、6pxずつ空けて330pxの帯に収める
   ============================================================ */

/* --- サイト共通CSS(com.css)の palt（約物詰め）を外す。これが残ると
   日本語が約8%詰まってFigmaと折り返し位置・行幅がずれる。
   text-align / letter-spacing / margin / img は css/style.css で一括済み。
   そのぶん .kh p/.kh span 等(0,1,1)が効くので、字送り・揃えを指定する行は
   セクションのルートを前置きして (0,2,0) に上げている */
.kh-what { font-feature-settings: normal; }

.kh-what {
  padding: 60px 0 42px;   /* Figmaの枠は479px。ボタン下端437pxからの残り */
  background: #e7f4ff;
}
.kh-what__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-inline: auto;
  width: 330px;
}

/* ---- 見出し -------------------------------------------- */
.kh-what__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  height: 111px;          /* Figma 3142:2121。中身96.7pxとの差14pxが下に空く */
}
.kh-what .kh-what__title {
  box-sizing: border-box;
  height: 33px;           /* Figma 3142:2123。中の文字は箱から上下にはみ出す */
  padding-top: 4px;
  width: 295px;
  text-align: center;   /* .kh-title の中央寄せが .kh h2 に負けるので持たせ直す */
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: 1.47px;
}
.kh-what__title em { font-size: 29px; }   /* 「脱毛」だけ大きく青で出す */

.kh-what__rule { width: 215px; height: 4.327px; }

.kh-what .kh-what__lead {
  width: 291px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.7px;
  color: var(--kh-text);
  text-align: center;
}
.kh-what__hl { font-weight: 500; }

/* ---- 肌 / 毛 / 心 のカード ------------------------------ */
.kh-what__cards {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0;
}
.kh-what__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 105px;
  height: auto;
  padding: 9px 8px;
  background: var(--kh-white);
  border: 1px solid #d9d8d7;
  border-radius: 2px;
}
.kh-what__card--skin { border-color: #b9daf3; }
.kh-what__card--hair { border-color: #d9d8d7; }
.kh-what__card--mind { border-color: #c3e0cd; }

.kh-what__icon { flex: none; width: 55px; height: 52px; object-fit: contain; }

.kh-what .kh-what__card-title {
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 18px;
  line-height: 18.15px;
  text-align: center;
}
.kh-what__card--skin .kh-what__card-title { color: var(--kh-blue); }
.kh-what__card--hair .kh-what__card-title { color: #767574; }
.kh-what__card--mind .kh-what__card-title { color: #018d7d; }

.kh-what .kh-what__card-body {
  margin-top: -1px;          /* Figma: 見出しと本文の間は6px */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--kh-text);
  text-align: center;
  white-space: nowrap;
}
/* 2文だけのカードは見出しとの間が広い（Figma gap 18px） */
.kh-what .kh-what__card-body--wide { margin-top: 11px; }

/* ---- CTA ----------------------------------------------- */
.kh-what .kh-what__cta {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 330px;
  padding: 14px;
  border-radius: 26px;
  background: #eb7699;
  color: var(--kh-white);
  font-size: 18px;
  font-weight: 500;
  line-height: 19px;
  text-align: center;
  text-decoration: none;
}
.kh-what__cta:hover { opacity: .9; }