/* =========================================================================
 * Make it — 無料相談ページ（/consultation/）固有スタイル（フェーズ3）
 *
 * 見た目の正：Figma PC 104:2 / SP 105:2。
 * 見出し・リード等の汎用パーツは front.css を共有再利用。
 * このページ固有のレイアウト（3カード・家族向けコールアウト・予約フォーム・
 * LINEカード）のみをこのファイルに持つ。
 *
 * Reserve（予約）セクションはこのページの主目的そのものなため、他の下層ページの
 * ように最終CTAを別セクションに分けず、このセクション自体を rail点灯
 * （mk-rail--lit）にして視線を集める。
 *
 * ※当初は面も暖色（#F4EAD9）にしていたが、Issue #64 案2 で --bg-base へ戻した
 *   （2026-08-25 登内判断）。直前の consult-family が --bg-alt なので、暖色を
 *   alt に寄せると2連続で同色になり交互が壊れる。base なら intro(alt) →
 *   worry(base) → family(alt) → reserve(base) で交互が保たれる。
 * ====================================================================== */

.mk-section--consult-intro  { background: var(--bg-alt); }
.mk-section--consult-worry  { background: var(--bg-base); }
.mk-section--consult-family { background: var(--bg-alt); }
.mk-section--consult-reserve { background: var(--bg-base); }

.mk-consult-reserve__eyebrow {
	color: var(--c-light-text);
}

/* 予約セクション見出し（SP 24px / PC 30px）。
   このセクションは .mk-section-head を使わない構造のため、front.css の
   「下層ページの見出しスケール」（h2 21/28）の対象外。Figmaでも他のセクション見出しより
   大きい（PC30／SP23）＝申込の到達点として意図的に強調しているのでこの値を維持する。
   fluid禁止（design/typography-spec.md §0）のため clamp をやめPC/SPの2値で持つ。
   ※共有側 `.mk-section-head .mk-display` と詳細度を揃えるため複合セレクタで書く。 */
.mk-display.mk-consult-reserve__heading {
	margin-top: 0.875rem;
	font-size: 24px;
}

@media (min-width: 1024px) {
	.mk-display.mk-consult-reserve__heading {
		font-size: 30px;
	}
}

/* -------------------------------------------------------------------------
 * こんな状態でも、大丈夫です：3カード＋画像
 * ---------------------------------------------------------------------- */
.mk-consult-worry-cards {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	width: 100%;
	margin-top: 1.5rem;
}

.mk-consult-worry-card {
	padding: 1rem 1.125rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.55);
}

.mk-consult-worry-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--c-text);
}

.mk-consult-worry-card__desc {
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--c-text-sub);
}

.mk-consult-image {
	width: 100%;
	height: 160px;
	margin-top: 1rem;
	border-radius: var(--radius);
	background: var(--bg-placeholder);
}

@media (min-width: 1024px) {
	.mk-consult-worry-cards {
		flex-direction: row;
		gap: 1.25rem;
	}

	.mk-consult-worry-card {
		flex: 1 1 0%;
		min-width: 0;
		padding: 1.5rem 1.625rem 1.625rem;
	}

	.mk-consult-worry-card__title {
		font-size: 1.0625rem;
	}

	.mk-consult-worry-card__desc {
		font-size: 0.875rem;
	}

	.mk-consult-image {
		height: 240px;
		margin-top: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * ご家族の方へ：primary色の左ボーダーコールアウト
 * ---------------------------------------------------------------------- */
.mk-consult-family {
	padding: 1rem 1.125rem;
	width: 100%;
	border-radius: var(--radius);
	border-left: 3px solid var(--c-primary);
	background: rgba(255, 255, 255, 0.55);
}

/* 「ご家族の方へ」＝日本語なので Mono ではなく本文フォント（Issue #60）。
   PC・SPとも 11px だったため 12px に上げた（12px未満の和文の見直し）。 */
.mk-consult-family__label {
	font-family: var(--font-body);
	letter-spacing: 0.03em;
	font-size: 0.75rem;
	color: var(--c-light-text);
}

.mk-consult-family__text {
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.8;
	font-size: 0.9375rem;
	color: var(--c-text);
}

@media (min-width: 1024px) {
	.mk-consult-family {
		padding: 1.25rem 1.5rem;
	}

	.mk-consult-family__text {
		font-size: 1rem;
	}
}

/* -------------------------------------------------------------------------
 * Reserve：見出し行・フォーム／LINEカードの2カラム
 * ---------------------------------------------------------------------- */
.mk-consult-reserve-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.125rem;
	width: 100%;
	margin-top: 1.125rem;
}

@media (min-width: 1024px) {
	.mk-consult-reserve-row {
		flex-direction: row;
		align-items: stretch;
		gap: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
 * フォーム
 * ---------------------------------------------------------------------- */
.mk-consult-formbox {
	flex: 1 1 0%;
	min-width: 0;
	padding: 1.25rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.7);
}

.mk-consult-formbox__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--c-text);
}

.mk-consult-field {
	margin-top: 1.125rem;
}

.mk-consult-field__label {
	display: flex;
	align-items: center;
	/* ラベル文字とバッジの間隔は gap ではなくバッジ側の margin-left で確保する
	   （HTML上は </span><span> と空白が無く、環境により flex gap が効かず
	   バッジがラベルに密着して見えたため）。 */
}

.mk-consult-field__label-text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.8125rem;
	color: var(--c-text);
}

.mk-consult-tag {
	display: inline-flex;
	align-items: center;
	/* ラベル文字との間隔（flex gap 非依存で確実に）。 */
	margin-left: 0.5rem;
	/* 面の濃さではなく細罫で切り出す（Issue #64 案2・2026-08-25 登内判断）。
	   バッジの面が地と同色になって見えなくなるのを避けるため、面をやめて罫線に
	   役割を移す。罫線1pxぶん padding を詰めて外形16px（Figma実測）を維持する
	   （0.125rem=2px → 1px ／ 0.5rem=8px → 7px）。 */
	padding: 1px 7px;
	border: 1px solid var(--c-border);
	border-radius: 3px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.625rem;
	/* line-height を明示。基準 --lh-body(1.9) を継承するとバッジが縦23px程に膨らみ、
	   短い「必須/任意」が縦長の箱に入って詰まって見える。Figma実測は 16px
	   （テキスト12px＝1.2 ＋ 上下padding2px）。 */
	line-height: 1.2;
}

.mk-consult-tag--required {
	color: var(--c-light-text);
}

.mk-consult-tag--optional {
	color: var(--c-text-caption);
}

.mk-consult-field__input,
.mk-consult-field__textarea {
	display: block;
	width: 100%;
	margin-top: 0.4375rem;
	padding: 0 0.875rem;
	height: 46px;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: var(--bg-field);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	color: var(--c-text);
}

.mk-consult-field__textarea {
	height: 88px;
	padding: 0.75rem 0.875rem;
	resize: vertical;
	line-height: 1.6;
}

.mk-consult-field__input::placeholder,
.mk-consult-field__textarea::placeholder {
	color: #a8a49b;
}

.mk-consult-field__input:focus,
.mk-consult-field__textarea:focus {
	outline: 2px solid var(--c-primary);
	outline-offset: 1px;
}

.mk-consult-radios {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 0.4375rem;
}

/* CF7の[radio]タグが生成するマークアップ（.wpcf7-list-item / .wpcf7-list-item-label）
   をこの見た目に合わせてスタイリングする。グループの外側span（wpcf7-form-control-wrap）
   にCF7側で class:mk-consult-radios を指定する想定（docs/cf7-consultation-form.md）。 */
/* CF7 の実マークアップは .wpcf7-list-item 直下に input＋span（<label>は無い）。
   よって行の flex 配置は .wpcf7-list-item 自体に当てる（旧実装は存在しない label に
   当てていたため効かず、ラジオとテキストが baseline 揃えで縦ズレしていた）。 */
.mk-consult-radios .wpcf7-list-item {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	cursor: pointer;
}

.mk-consult-radios input[type="radio"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--c-primary);
}

.mk-consult-radios .wpcf7-list-item-label {
	font-family: var(--font-body);
	font-size: 0.8125rem;
	/* 基準 1.9 だと行が高くなりラジオとの中心が離れて見える。Figma実測=テキスト17px。 */
	line-height: 1.3;
	color: var(--c-text);
}

.mk-consult-field__hint {
	margin-top: 0.625rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	line-height: 1.7;
	color: var(--c-text-caption);
}

/* 2026-08：他の主CTAボタンと同じ --c-accent-strong に統一（AA確保）。 */
.mk-consult-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	margin-top: 1.125rem;
	border: none;
	border-radius: var(--radius);
	background: var(--c-accent-strong);
	color: var(--c-on-dark);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.875rem;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.mk-consult-submit:hover {
	opacity: 0.9;
}

.mk-consult-formbox__note {
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	line-height: 1.65;
	color: var(--c-text-caption);
}

/* フォーム未作成時のフォールバック表示用（reserve.php参照） */
.mk-consult-error {
	margin-bottom: 1rem;
	padding: 0.875rem 1.125rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-accent);
	background: rgba(233, 104, 71, 0.08);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--c-light-text);
}

@media (min-width: 1024px) {
	.mk-consult-formbox {
		padding: 1.75rem;
	}

	.mk-consult-field__label-text {
		font-size: 0.875rem;
	}

	.mk-consult-field__input,
	.mk-consult-field__textarea {
		height: 48px;
		font-size: 0.875rem;
	}

	.mk-consult-field__textarea {
		height: 96px;
	}

	.mk-consult-radios .wpcf7-list-item-label {
		font-size: 0.875rem;
	}
}

/* -------------------------------------------------------------------------
 * Contact Form 7：応答メッセージ・バリデーションのスタイリング
 * ---------------------------------------------------------------------- */
.mk-consult-formbox .wpcf7-response-output {
	margin: 0 0 1.125rem;
	padding: 0.875rem 1.125rem;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.7;
}

.mk-consult-formbox .wpcf7-form.invalid .wpcf7-response-output,
.mk-consult-formbox .wpcf7-form.spam .wpcf7-response-output,
.mk-consult-formbox .wpcf7-form.failed .wpcf7-response-output {
	border: 1px solid var(--c-accent);
	background: rgba(233, 104, 71, 0.08);
	color: var(--c-light-text);
}

.mk-consult-formbox .wpcf7-form.sent .wpcf7-response-output {
	border: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.85);
	color: var(--c-text);
}

.mk-consult-formbox .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.375rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--c-light-text);
}

.mk-consult-formbox .wpcf7-form-control.wpcf7-not-valid {
	border-color: var(--c-accent);
}

/* -------------------------------------------------------------------------
 * LINEカード
 * ---------------------------------------------------------------------- */
.mk-consult-linecard {
	padding: 1.25rem;
	border-radius: var(--radius);
	border: 1px solid var(--c-border);
	background: rgba(255, 255, 255, 0.7);
}

.mk-consult-linecard__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--c-text);
}

.mk-consult-linecard__desc {
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--c-text-sub);
}

.mk-consult-linecard__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin-top: 0.875rem;
	border-radius: var(--radius);
	border: 1.5px solid var(--c-primary);
	color: var(--c-primary);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.mk-consult-linecard__btn:hover {
	background: rgba(46, 74, 80, 0.06);
}

@media (min-width: 1024px) {
	.mk-consult-linecard {
		flex: none;
		align-self: stretch;
		width: 340px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 1.75rem;
	}

	.mk-consult-linecard__title {
		font-size: 1.1875rem;
	}

	.mk-consult-linecard__desc {
		font-size: 0.875rem;
	}
}