@charset "utf-8";
/* ============================================================
   05 こんな変化、ありませんか？
   Figma node 3142:2020（SP 375 / 中身は幅330）
   Figmaは中身を絶対配置で組んでいるが、ここは通常のフローで同じ位置に落とす
   ============================================================ */

/* --- サイト共通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-change { font-feature-settings: normal;
	padding-bottom: 20px;
}

.kh-change {
	position: relative;
	padding: 60px 22.5px 20px;   /* 中身の開始を Figma の top:85px に合わせる */
	height: auto;
	background: #e8e8e8;
}

/* 透かしの英字。Alata はページで読み込んでいないので本文フォントに落ちる */
.kh-change .kh-change__en {
	position: absolute;
	left: 50%;
	top: 61px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 203px;
	height: 39px;
	font-family: "Alata", var(--kh-font-b);
	font-size: 35px;
	line-height: 1;
	letter-spacing: 2.45px;
	color: #ede8dd;
}

.kh-change__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 27px;
	width: 330px;
}

/* ---- 見出しとリード文 ------------------------------------ */
.kh-change__head {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 17px;
	min-height: 123px;
	width: 100%;
}
/* 見出しの下半分に敷くクリーム色の帯 */
.kh-change__marker {
	position: absolute;
	left: 12px;
	top: 13px;
	width: 301px;
	height: 10px;
	background: var(--kh-cream);
}
.kh-change .kh-change__title {
	position: relative;          /* 帯より前に出す */
	height: 18px;
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 21px;
	line-height: 18px;
	letter-spacing: 1.47px;
	color: var(--kh-text);
	text-align: center;
}
.kh-change__title em { font-style: normal; color: var(--kh-blue); }

.kh-change__desc {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;   /* 中の<span>1つだけをフレックスアイテムにする */
	font-family: var(--kh-font-b);
	font-weight: 500;
	font-size: 13px;
	line-height: 20.7px;
	color: var(--kh-text);
}
.kh-change__desc em { font-style: normal; color: var(--kh-blue); }

/* ---- チェックリスト（吹き出し） -------------------------- */
.kh-change__card { position: relative; width: 330px; min-height: 261px; }

/* 白い丸。カードの下から出てしっぽの付け根になる（カードより下に敷く） */
.kh-change__tail { position: absolute; left: 123px; top: 178px; width: 83px; height: 83px; }

.kh-change__card-body {
	position: relative;
	width: 330px;
	height: 239px;
	border-radius: 10px;
	background: var(--kh-white);
}

.kh-change__list {
	position: absolute;
	left: 21px;
	top: 25px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.kh-change__item {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 37px;
}
.kh-change__item--short { height: 36px; }
.kh-change__check { flex: none; width: 11px; height: 11px; }
.kh-change .kh-change__item span {
	font-family: var(--kh-font-b);
	font-weight: 500;
	font-size: 15px;
	line-height: 26.25px;
	letter-spacing: .3px;
	color: var(--kh-text);
}
.kh-change__item em { font-style: normal; color: var(--kh-blue); }

/* しっぽの丸2つ。カードの下、2つの吹き出しの間に出る */
.kh-change__dot { position: absolute; left: 50%; transform: translateX(-50%); }
.kh-change__dot--1 { top: 269px; width: 20px; height: 20px; }
.kh-change__dot--2 { top: 295px; width: 13px; height: 13px; }

/* ---- 男女それぞれに多い声 -------------------------------- */
.kh-change__voices {
	display: flex;
	align-items: center;
	gap: 13px;
}
.kh-change__voice { position: relative; width: 158px; height: 136px; }

.kh-change__box {
	position: absolute;
	left: 0;
	top: 21px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 158px;
	height: auto;
	border-radius: 10px;
	background: var(--kh-white);
	bottom: 0;
	padding-top: 43px;
}
.kh-change__voice--girl .kh-change__box {
	padding: 43px 10px 20px;  /* 修正7: ショートハンドごと。左右の値が異なる */
}
.kh-change__voice--boy  .kh-change__box { padding: 43px 6px 20px;  /* 修正7 */ }

.kh-change .kh-change__voice-title {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 19px;              /* Figma Container の高さ */
	width: 100%;
	font-family: var(--kh-font-b);
	font-weight: 700;
	font-size: 14px;
	line-height: 18.15px;
	text-align: center;
}
.kh-change__voice--girl .kh-change__voice-title { color: #e1a2b4; margin-bottom: -3px; }
.kh-change__voice--boy  .kh-change__voice-title { color: var(--kh-blue); margin-bottom: 2px; }

/* 枠より少しはみ出す幅をFigmaどおりに持たせて、1行で収まるようにする */
.kh-change .kh-change__voice-text {
	font-family: var(--kh-font-b);
	font-size: 12px;
	line-height: 17.33px;
	color: var(--kh-text);
	text-align: center;
}
.kh-change__voice--girl .kh-change__voice-text { width: 145px; height: 50px; padding-top: 7.67px; font-weight: 400; }
.kh-change__voice--boy  .kh-change__voice-text { width: 146px; font-weight: 500; }
.kh-change__voice-text b { font-weight: 700; }

/* 顔写真。Figmaのマスクはただの楕円なので border-radius で同じ切り抜きにする */
.kh-change__avatar { position: absolute; top: 0; width: 55px; }
.kh-change__voice--girl .kh-change__avatar { left: 51px; height: 58.3133px; }
.kh-change__voice--boy  .kh-change__avatar { left: 52px; height: 56.3133px; }

.kh-change__ring { position: absolute; left: 2.32px; width: 50.3615px; height: 50.3615px; }
.kh-change__voice--girl .kh-change__ring { top: 7.95px; }
.kh-change__voice--boy  .kh-change__ring { top: 5.95px; }

.kh-change__portrait {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 55px;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}
.kh-change__portrait img { width: 100%; height: 100%; object-fit: cover; }