@charset "utf-8";
/* ============================================================
   02 section01（ABOUT / こども脱毛で変わること）
   Figma node 3142:1987（SP 375x250）/ 3142:2008（上辺のクリームの曲面 375x24）
   ============================================================ */

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

.kh-intro {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 250px;             /* Figmaの枠 */
	padding: 60px 24px 0;
	background: #fefbef;       /* セクション背景（:root に無い色） */
	letter-spacing: normal;        /* サイト共通CSSの字送り(0.9px)を打ち消す */
	font-feature-settings: normal;  /* 同 palt（約物詰め）。Figmaは素のままなので外す */
}

/* 上辺に乗るクリームの曲面（FVのクリームから続く装飾） */
.kh-intro__arc { position: absolute; left: 0; top: 0; width: 375px; height: 24px; }

/* 透かしの英字見出し。Alata はページで読み込んでいないので本文フォントに落ちる */
.kh-intro .kh-intro__en {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 178px;
	height: 32px;
	font-family: "Alata", var(--kh-font-b);
	font-size: 35px;
	line-height: 1;
	letter-spacing: 2.45px;
	color: #ede8dd;
}

.kh-intro__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;                 /* Figma Frame 427318300 の gap */
	width: 327px;
}

/* ---- 見出し ---------------------------------------------- */
.kh-intro__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 267px;
	height: 51px;
	font-family: var(--kh-font-h);
	font-weight: 700;
}
.kh-intro__title-row,
.kh-intro__title-row2 {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.kh-intro__title-row  { height: 21px; }    /* Figma Frame 11625 */
.kh-intro__title-row2 { height: 18.5px; }
.kh-intro .kh-intro__title-blue {
	display: flex;
	align-items: center;
	height: 18.5px;
	width: 107px;
	margin-right: -4px;
	font-size: 23px;
	text-align: center;
	letter-spacing: -1.15px;
	color: var(--kh-blue);
}
/* Figma側で「こ」「ど」に個別のカーニングが入っている */
.kh-intro .kh-intro__k1 { letter-spacing: -4.14px; }
.kh-intro .kh-intro__k2 { letter-spacing: -2.76px; }

.kh-intro .kh-intro__title-de,
.kh-intro .kh-intro__title-row2 {
	font-size: 21px;
	letter-spacing: 1.47px;
	color: var(--kh-text);
}

/* ---- チェックリスト --------------------------------------- */
.kh-intro__list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	width: 295px;              /* Figma Frame 11611。本文の左端を x=40 にそろえる */
}
.kh-intro .kh-intro__item {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 27px;              /* Figma Frame 11608-11610 */
	font-size: 15px;
	line-height: 26.25px;
	letter-spacing: .3px;
	color: var(--kh-text);
}
.kh-intro__item b { font-weight: 700; }
.kh-intro__check { flex: none; margin: 0; width: 11px; height: 11px; }