@charset "utf-8";
/* FV（Figma 3142:1938 / 375x374）
   見出しは画像にせずテキストで組む。写真の上に白のぼかしを敷いて文字を読ませる作り。 */

/* --- サイト共通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-fv { font-feature-settings: normal;
	background: var(--kh-white);
}

.kh-fv {
  position: relative;
  min-height: 374px;
  overflow: hidden;
  background: #FFFCF5;  /* 修正4: Figmaの背景レイヤー(image02)の代わり。白のままだと写真が浮く */
  letter-spacing: normal;            /* サイト共通CSSの字送り(0.9px)を打ち消す */
  font-feature-settings: normal;     /* 同 palt（約物詰め）。Figmaは素のままなので外す */
}

/* 背景の装飾（クリーム色の曲面）。Figma の Rectangle 524（回転＋マスク）は
   border-radius では作れないので、実データから拾った境界をそのままなぞる。
   境界の実測値 x:y = 0:236 / 20:253 / 130:315 / 246:342 / 374:335 */
.kh-fv__deco {
  position: absolute;
  inset: 0;
  background: var(--kh-cream);
  clip-path: polygon(0% 63.10%, 5.33% 67.65%, 16% 75.13%, 26.67% 80.75%,
		34.67% 84.22%, 45.33% 87.43%, 56% 89.84%, 65.60% 91.44%,
		77.33% 91.98%, 88% 91.18%, 100% 89.57%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.kh-fv__photo { position: absolute; left: 21px; top: -4px; width: 452px; height: 505px;
	mix-blend-mode: multiply;
}
.kh-fv__photo img { width: 452px; height: 505px; object-fit: cover; object-position: bottom; }

/* コピー。写真に重なる部分だけ白をぼかして敷く（Figmaの blur 20.5px 相当） */
.kh-fv__copy {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 205px;
}
.kh-fv__copy::before {
  content: "";
  position: absolute;
  left: -42px;
  top: -5px;
  width: 213px;
  min-height: 148px;
  background: var(--kh-white);
  filter: blur(20.5px);
  z-index: -1;
}

/* Figmaの箱の高さ（49 / 49 / 32px）に合わせて行を中央に置く */
.kh-fv .kh-fv__title {
  height: 49px;
  padding-top: 5.7px;
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 39px;
  line-height: 41.6px;
  letter-spacing: 2.08px;
  color: var(--kh-text);
  margin-left: -7px;
}
.kh-fv__title em { font-style: normal; color: var(--kh-blue); }
/* Figmaで1文字ずつカーニングが入っている（こ/ど/も/脱） */
.kh-fv .kh-fv__t1 { letter-spacing: -4.92px; }
.kh-fv .kh-fv__t2 { letter-spacing: -1.92px; }
.kh-fv .kh-fv__t3 { letter-spacing: -0.92px; }
.kh-fv .kh-fv__t4 { letter-spacing: 0.08px; }

.kh-fv .kh-fv__lead {
  height: 49px;
  padding-top: 3.7px;
  font-family: var(--kh-font-h);
  font-weight: 700;
  font-size: 16px;
  line-height: 20.8px;
  letter-spacing: 0.39px;
  color: var(--kh-text);
}
/* 「」の前後をFigmaと同じだけ詰める */
.kh-fv .kh-fv__kern { letter-spacing: -6.61px; }

/* .kh img { margin:0 }(0,1,1) に勝たせるためルートを前置きする */
.kh-fv .kh-fv__rule { margin: 7.5px 0; width: 125px; height: 1px; }

.kh-fv .kh-fv__sub {
  min-height: 32px;
  padding-top: 0;
  font-family: var(--kh-font-h);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.39px;
  color: var(--kh-text);
}

/* ---- 下部の3つのバッジ（中身はFigmaの座標どおりに置く） ---- */
.kh-fv__badges {
  position: absolute;
  left: 20px;
  bottom: 0;
  display: flex;
  gap: 10px;
  list-style: none;
}
.kh-fv__badge { position: relative; width: 105px; height: 101px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.kh-fv__badge-ring { position: absolute; inset: 0; width: 105px; height: 101px;
	z-index: 0;
}
.kh-fv__badge-body {
  position: absolute;
  width: 96.63px;
  height: 92.89px;
  border: 1px solid var(--kh-line);
  border-radius: 55px;
  background: var(--kh-white);
	inset: 4px;
	z-index: 0;
}
/* アイコンはFigma側で切り抜いて使われている。箱で切り抜き、同じ倍率・位置で出す */
.kh-fv__icon { position: relative; display: block; overflow: hidden;
	z-index: 1;
}
.kh-fv__icon img { position: absolute; max-width: none; }
.kh-fv__icon--test     { width: 40px; height: 23px; }
.kh-fv__icon--test img { width: 127.05%; height: 219.23%; left: -15.4%; top: -60.49%; }
.kh-fv__icon--guardian     { width: 32px; height: 30px; transform: scaleY(-1) rotate(180deg); }
.kh-fv__icon--guardian img { width: 166.41%; height: 179.42%; left: -34.18%; top: -38.68%; }
.kh-fv__icon--mom     {
	/* 修正11: icon_mom.png は上下に約30%ずつ透明な余白があり、49px枠のうち
	   実質の吹き出しは20px。その余白がそのまま高さになっていたので切り抜く */
	height: 20px;
	width: 26px;
	overflow: hidden;
	display: block;
}
.kh-fv__icon--mom img {
	height: 49px;
	width: 49px;
	max-width: none;
	object-fit: contain;
	display: block;
	margin: -15px 0 0 -12px;
}

.kh-fv .kh-fv__badge-text {
  position: relative;
  font-family: var(--kh-font-b);
  font-weight: 700;
  font-size: 14px;
  line-height: 17.4px;
  letter-spacing: .28px;
  color: var(--kh-blue);
  text-align: center;
	z-index: 1;
}
/* テスト照射OK：アイコンのすぐ下、74px幅の中央 */
.kh-fv__badge--test .kh-fv__badge-text { width: 74px; letter-spacing: .7px; }
/* 保護者同室OK：78px幅で2行に折り返す（Figmaも2行） */
.kh-fv__badge--guardian .kh-fv__badge-text { width: 78px; }
/* ママだけ／カウンセリング（Figmaでは行ごとにサイズが違う） */
.kh-fv__badge--mom .kh-fv__badge-text { width: 79px; line-height: 14.4px; letter-spacing: .1px; }
.kh-fv__badge-text small {            /* ママだけ */
  font-size: 10px;
  font-weight: 500;
  line-height: 14.4px;
  color: var(--kh-text);
}
.kh-fv__badge-text b {                /* カウンセリング */
  font-size: 11px;
  font-weight: 700;
  line-height: 14.4px;
}
.kh-fv .kh-fv__badge-ok {
  position: relative;
  width: 24px;
  font-family: var(--kh-font-b);
  font-weight: 700;
  font-size: 14px;
  line-height: 18.4px;
  letter-spacing: .28px;
  color: var(--kh-blue);
	z-index: 1;
}

/* 修正11: アイコンを切り抜いて中央に収まるようになったため、
   A-3 で入れていた -5px の光学補正は削除した */
.kh-fv__badge--mom .kh-fv__badge-ok { margin-top: -4px; }