@charset "utf-8";
/* ============================================================
   04 「脱毛したい」と言われた
   Figma node 3142:2009（SP 375 / カード 330x537）
   カードもボタンも330px幅。375との差45pxを左右に分けて中央に置く
   ============================================================ */

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

.kh-voice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 22.5px 60px;
	background: #fefbef;
}

/* ---- 白いカード ------------------------------------------ */
.kh-voice__card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 330px;
	padding: 37px 22px;
	border-radius: 10px;
	background: var(--kh-white);
	box-shadow: 2px 2px 10.5px rgb(0 0 0 / 14%);
}
.kh-voice__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 286px;
}

.kh-voice__head {
	display: flex;
	flex-direction: column;
	gap: 21px;
	width: 100%;
}

/* ---- 見出し ---------------------------------------------- */
.kh-voice .kh-voice__title {
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 17px;
	line-height: 27px;
	letter-spacing: .45px;
	color: var(--kh-text);
}
/* 2行目だけ一段大きい青。行頭の空き2つはFigmaのまま */
.kh-voice__title em {
	font-style: normal;
	font-size: 20px;
	color: var(--kh-blue);
}

/* ---- 親子の写真 ------------------------------------------ */
.kh-voice__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 237 / 127;
	border-radius: 10px;
	overflow: hidden;
}
/* 元画像(900x413)を左寄りにトリミング。Figmaの left -6.33% / w 117.3% と同じ位置 */
.kh-voice__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 36.6% 50%;
}

/* ---- 本文 ------------------------------------------------ */
.kh-voice__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 218px;
}
.kh-voice__q1,
.kh-voice__q2 {
	font-family: var(--kh-font-b);
	font-weight: 700;
	font-size: 17px;
	color: var(--kh-blue);
}
.kh-voice__q1 { line-height: 20.7px; }
.kh-voice__q2 { line-height: 22.7px; }

.kh-voice .kh-voice__text {
	font-family: var(--kh-font-b);
	font-weight: 400;
	font-size: 14px;
	line-height: 18.7px;
	letter-spacing: .42px;
	color: var(--kh-text);
}
.kh-voice__text b { font-weight: 700; }
/* Figmaでは段落の1行目だけ行送りを広げて間隔を作っている（30.7 / 27.7px） */
.kh-voice__text--1 { margin-top: 12px; }
.kh-voice__text--2 { margin-top: 9px; }

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