@charset "utf-8";
/* ============================================================
   06 自己処理を続けると（Figma SP 3142:2075 / 375x565）
   ・カードは幅346px。左右の余白はFigmaどおり約14.5px
   ・写真は91pxの円。Figmaの丸マスク込みで書き出した状態のPNGを使う
   ============================================================ */

/* --- サイト共通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-selfcare { font-feature-settings: normal; }

.kh-selfcare {
  padding: 60px 0 41px;   /* Figmaの枠は580px。下の余白は 580-539=41px */
  background: #fcf9ed;
}
.kh-selfcare__inner {
  margin-inline: auto;
  width: 346px;
}

/* ---- 見出し --------------------------------------------
   Figmaでは PROBLEM が見出しの背面に絶対配置されていて、高さを持たない。
   見出しの箱（55px）だけが積み上がる */
.kh-selfcare .kh-selfcare__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  text-align: center;
}
.kh-selfcare .kh-selfcare__en {
  position: absolute;
  left: 50%;
  top: -2.5px;
  transform: translate(-50%, -17.5px);  /* 修正13: px固定をやめ文字数に依存しない形へ */
  width: 203px;
  font-family: "Alata", var(--kh-font-b);
  font-weight: 400;
  font-size: 35px;
  line-height: 1;
  letter-spacing: 2.45px;
  color: #ede8dd;
}
.kh-selfcare .kh-selfcare__title {
  position: relative;
  text-align: center;   /* .kh-title の中央寄せが .kh h2 に負けるので持たせ直す */
  width: 295px;
  font-size: 21px;
  line-height: 1.19;
  letter-spacing: 1.47px;
}

/* ---- カード -------------------------------------------- */
.kh-selfcare__cards {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 27px;
}
.kh-selfcare__card {
  box-sizing: border-box;
  height: 115px;
  padding: 15px;
  background: var(--kh-white);
  border-radius: 0 60px 60px 0;    /* 右端だけ大きく丸める */
}
/* 2枚目はFigmaで左右反転。角丸が左・写真が左になる */
.kh-selfcare__card--flip { border-radius: 60px 0 0 60px; }

.kh-selfcare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 85px;
  padding: 0 13px 0 12px;
}

/* ---- 文言 ---------------------------------------------- */
.kh-selfcare__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 195px;
}
.kh-selfcare .kh-selfcare__name {
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 20px;
  line-height: 18.15px;
  letter-spacing: -.8px;
	display: block;
	margin-bottom: 8px;
}
.kh-selfcare__name--skin { color: var(--kh-blue); }
.kh-selfcare__name--teen { color: #e1cc7a; }
.kh-selfcare__name--pore { color: #d38894; }

.kh-selfcare__body {
  font-size: 13px;
  font-weight: 400;
  line-height: 20.7px;
  color: var(--kh-text);
}
.kh-selfcare__hl { font-weight: 500; }
.kh-selfcare__hl--skin { color: var(--kh-blue); }
.kh-selfcare__hl--teen { color: #e1cc7a; }
.kh-selfcare__hl--pore { color: #d38894; }

/* ---- 写真（丸く切り抜き済み） -------------------------- */
.kh-selfcare__photo {
  flex: none;
  width: 91px;
  height: 91px;
  border-radius: 50%;
	position: relative;
	left: 16px;
	top: -3px;
}

/* I-7 反転カードは逆方向へ */
.kh-selfcare__card--flip .kh-selfcare__photo { left: -16px; }