@charset "utf-8";
/* ============================================================
   03 初回無料カウンセリング｜コンパクトCTA
   Figma node 3198:2031（SP 375 / カード 327x201・枠線4px内側）
   ============================================================ */

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

.kh-cta03 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px 24px 0;
	height: 282px;                 /* Figmaの枠（下の余白はここで決まる） */
	background: #fffbf0;
	letter-spacing: normal;        /* サイト共通CSSの字送り(0.9px)を打ち消す */
	font-feature-settings: normal; /* 同 palt（約物詰め）。Figmaは素のままなので外す */
}

/* カードと、その上辺に重なるつまみを重ねる枠 */
.kh-cta03__wrap { position: relative; width: 327px; padding-top: 16px; }

.kh-cta03__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 327px;
	padding: 16px;
	border: 4px solid #93caf4;
	border-radius: 16px;
	background: var(--kh-white);
	overflow: hidden;
}

/* つまみはカードの上に重ねる（カードは overflow:hidden なので外に置く） */
.kh-cta03__tab { position: absolute; left: 133px; top: 0; width: 61px; height: 32px; }

/* ---- 無料表示と相談内容 ---------------------------------- */
.kh-cta03__head {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 295px;
}

.kh-cta03__free {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 108px;
}

/* 「初回無料！」。左右のリボンは21x7のSVGを -90度 回して立てて使う */
.kh-cta03__free-label {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	width: 100%;
}
.kh-cta03__ribbon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7px;
	height: 21px;
}
.kh-cta03__ribbon img { flex: none; width: 21px; height: 7px; max-width: none; }
.kh-cta03__ribbon--l img { transform: rotate(-90deg); }
.kh-cta03__ribbon--r img { transform: rotate(-90deg) scaleY(-1); }

.kh-cta03 .kh-cta03__free-text {
	flex: none;
	width: 60px;
	margin-left: 5px;          /* Figmaの padding-left 5px */
	font-family: "Yu Gothic", YuGothic, var(--kh-font-b);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
	color: #eb7699;
	text-align: center;
}

/* 「¥0」の作字。5枚のパスをFigmaと同じ位置に重ねる */
.kh-cta03__zero { position: relative; width: 108px; height: 50px;
	filter: drop-shadow(-3px 4px 0 rgba(140,180,214,.38));
}
.kh-cta03__zero img { position: absolute; max-width: none; }
.kh-cta03__zero-a { left: 46.63px; top: 0;       width: 32.3711px; height: 47.9924px; }
.kh-cta03__zero-b { left: 48.96px; top: 1.97px;  width: 27.7174px; height: 44.0414px; }
.kh-cta03__zero-c { left: 54.39px; top: 6.95px;  width: 16.8587px; height: 34.1182px; }
.kh-cta03__zero-d { left: 20px;    top: 12px;    width: 22.6302px; height: 35.0001px; }
.kh-cta03__zero-e { left: 22.18px; top: 14.07px; width: 18.2798px; height: 30.8357px; }

.kh-cta03__lead {
	flex: none;
	width: 165px;
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 13px;
	line-height: 23px;
	color: #555;
}
.kh-cta03__lead em { font-style: normal; color: var(--kh-blue); }

/* ---- 予約CTA -------------------------------------------- */
.kh-cta03__reserve {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 295px;
}

.kh-cta03__time {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	width: 100%;
}
.kh-cta03__slash {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 8.557px;
	height: 15.771px;
}
.kh-cta03__slash img { flex: none; width: 7.00054px; height: 17.0005px; max-width: none; }
.kh-cta03__slash--l img { transform: rotate(-14.33deg); }
.kh-cta03__slash--r img { transform: rotate(-165.67deg) scaleY(-1); }

.kh-cta03 .kh-cta03__time-text {
	flex: none;
	font-family: "Yu Gothic Pr6N", "Yu Gothic", YuGothic, var(--kh-font-b);
	font-weight: 700;
	font-size: 15px;
	line-height: 14px;
	letter-spacing: .9px;
	color: #888;
	white-space: nowrap;
}

.kh-cta03__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 289px;
	height: 56px;
	border-radius: 28px;
	background: #eb7699;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	font-weight: 500;
}
.kh-cta03__btn:hover { opacity: .9; }

.kh-cta03 .kh-cta03__btn-text {
	flex: none;
	width: 220px;
	font-family: var(--kh-font-b);
	font-weight: 700;
	font-size: 15px;
	line-height: 23px;
	color: var(--kh-white);
	text-align: right;
}
.kh-cta03__btn-arrow { flex: none; width: 10px; height: 16px; }

/* 左端の「無料」バッジ（ギザギザの丸） */
.kh-cta03__btn-badge {
	position: absolute;
	left: 5px;
	top: 3.23px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51px;
	height: 50px;
}
.kh-cta03__btn-badge img { position: absolute; inset: 0; width: 51px; height: 50px; }
.kh-cta03 .kh-cta03__btn-badge-text {
	position: relative;
	padding-left: 1.12px;      /* 字送りぶんの見た目のズレを戻す */
	font-family: var(--kh-font-h);
	font-weight: 700;
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 1.12px;
	color: #eb7699;
	text-align: center;
	white-space: nowrap;
}

/* ---- キラキラの飾り（カードの枠内に絶対配置） ------------ */
.kh-cta03__deco { position: absolute; width: 10.5763px; height: 10.8689px; }
.kh-cta03__deco--1 { left: 104.99px; top: 49.05px; }
.kh-cta03__deco--3 { left: 118.43px; top: 63.7px; }
/* 2・4 はFigmaで75.58度回っている。中心を合わせて回す */
.kh-cta03__deco--2 { left: 18.13px; top: 46.05px; transform: rotate(75.58deg); }
.kh-cta03__deco--4 { left: 7.29px;  top: 62.7px;  transform: rotate(75.58deg); }