@charset "UTF-8";

/* ==================================================
	ファーストビュー（背景と右側の装飾は style.css の page_title）
================================================== */
.consulting_fv_inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

.consulting_fv_content {
	flex: 1 1 0;
	min-width: 0;
}

/* 見出しの上のラベル（枠なしのゴールドの文字） */
.consulting_fv_label {
	color: var(--color_gold);
	font-size: var(--font_size_md);
	font-weight: 700;
	line-height: 1.5;
}

.consulting_fv_title {
	margin-top: 15px;
	font-size: 44px;
	font-weight: 700;
	line-height: 1.4;
}

.consulting_fv_lead {
	max-width: 620px;
	margin-top: 20px;
}

.consulting_fv .btn_group {
	margin-top: 30px;
}

/* トップのFVの「掲載について相談する」と同じ大きさのボタン（左にアイコン） */
.consulting_fv_btn {
	width: 280px;
	min-height: 68px;
	padding: 8px 20px;
	font-size: 18px;
}

.consulting_fv_points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 25px;
	font-size: var(--font_size_sm);
	font-weight: 700;
}

.consulting_fv_points li {
	position: relative;
	padding-left: 22px;
}

/* ゴールドのチェックマーク */
.consulting_fv_points li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 2px;
	width: 12px;
	height: 7px;
	border-bottom: 2px solid var(--color_gold);
	border-left: 2px solid var(--color_gold);
	transform: rotate(-45deg);
}

/* FVの画像（llmo_fv_img.png、1395×712）。横長のため右の列を少し広めに取る */
.consulting_fv_img {
	display: block;
	flex: 0 0 50%;
	min-width: 0;
	height: auto;
	border-radius: 16px;
}

@media (max-width: 1200px) {
	.consulting_fv_inner {
		gap: 40px;
	}

	.consulting_fv_title {
		font-size: 36px;
	}

	.consulting_fv_btn {
		width: 250px;
		font-size: var(--font_size_bs);
	}
}

@media (max-width: 992px) {
	.consulting_fv_inner {
		flex-direction: column;
		align-items: stretch;
	}

	.consulting_fv_img {
		flex: none;
		width: 100%;
		max-width: 640px;
	}
}

@media (max-width: 768px) {
	.consulting_fv_title {
		font-size: 28px;
	}

	.consulting_fv_title br {
		display: none;
	}
}

@media (max-width: 576px) {
	.consulting_fv_btn {
		width: 100%;
		min-height: 60px;
	}
}


/* ==================================================
	こんな課題はありませんか？
================================================== */
.consulting_worry_list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 50px;
}

.consulting_worry_item {
	padding: 35px 25px;
	text-align: center;
}

/* 見出しは2行分の高さにそろえ、1行のものは上下中央に置く（説明文の始まりをそろえる） */
.consulting_worry_title {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 3em;
	font-size: var(--font_size_md);
	font-weight: 700;
	line-height: 1.5;
}

.consulting_worry_text {
	margin-top: 10px;
	font-size: var(--font_size_sm);
	text-align: left;
}

@media (max-width: 1200px) {
	.consulting_worry_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.consulting_worry_list {
		gap: 16px;
		margin-top: 40px;
	}
}

@media (max-width: 576px) {
	.consulting_worry_list {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 1列で横幅があるため、見出しの改行はせず、高さもそろえない */
	.consulting_worry_title {
		display: block;
		min-height: 0;
	}

	.consulting_worry_title br {
		display: none;
	}
}


/* ==================================================
	LLMOコンサルティングで行うこと
================================================== */
/* カードは style.css の num_card（上に重なる大きな数字）。カテゴリは reason_category
   2段になるため、上の段のカードと下の段の数字が重ならないよう縦の間隔を広げる */
.consulting_service_list {
	gap: 80px 30px;
}

/* イラストなし。カテゴリがカードの先頭に来る */
.consulting_service_list .reason_category {
	margin-top: 0;
	text-align: center;
}

.consulting_service_list .num_card_title {
	margin-top: 8px;
}

@media (max-width: 992px) {
	.consulting_service_list {
		gap: 70px;
	}
}


/* ==================================================
	プロベルならではの3つの強み（文章と図を左右交互に並べる）
================================================== */
.consulting_strength_list {
	display: flex;
	flex-direction: column;
	gap: 70px;
	margin-top: 60px;
}

.consulting_strength_item {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: center;
	gap: 60px;
}

/* 2つ目は図を左に置く */
.consulting_strength_item:nth-child(even) .consulting_strength_body {
	order: 2;
}

.consulting_strength_num {
	color: var(--color_gold);
	font-family: var(--font_en);
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
}

.consulting_strength_title {
	margin-top: 15px;
	font-size: var(--font_size_lg);
	font-weight: 700;
	line-height: 1.5;
}

.consulting_strength_text {
	margin-top: 15px;
}

/* 図の画像（630×360） */
.consulting_strength_img {
	display: block;
	width: 100%;
	border-radius: 16px;
	box-shadow: var(--shadow_base);
	aspect-ratio: 630 / 360;
	object-fit: cover;
}

@media (max-width: 768px) {
	.consulting_strength_list {
		gap: 50px;
		margin-top: 40px;
	}

	/* 縦並びのときは常に「文章 → 図」の順 */
	.consulting_strength_item {
		grid-template-columns: minmax(0, 1fr);
		gap: 25px;
	}

	.consulting_strength_item:nth-child(even) .consulting_strength_body {
		order: 0;
	}

	.consulting_strength_num {
		font-size: 40px;
	}
}


/* ==================================================
	料金プラン（カードは style.css の plan_*）
================================================== */
/* 共通の plan_list は4列。このページは3プランなので3列にする */
.consulting_plan_list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	justify-content: normal;
	gap: 30px;
	max-width: 1080px;
	margin: 70px auto 0;
}

@media (max-width: 992px) {
	.consulting_plan_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 50px;
		max-width: 480px;
	}
}

/* プラン比較の表（○／—や金額を並べるため本文のセルも中央揃え） */
.consulting_compare_wrap {
	overflow-x: auto;
	margin-top: 70px;
	border-radius: 20px;
	box-shadow: var(--shadow_base);
	background: var(--color_white);
}

.consulting_compare {
	width: 100%;
	min-width: 680px;
	font-size: 15px;
	line-height: 1.6;
}

.consulting_compare th,
.consulting_compare td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--color_gray_30);
	text-align: center;
	vertical-align: middle;
}

.consulting_compare tbody tr:last-child th,
.consulting_compare tbody tr:last-child td {
	border-bottom: 0;
}

.consulting_compare thead th {
	background: var(--color_navy);
	color: var(--color_white);
	font-weight: 700;
}

.consulting_compare thead th.consulting_compare_recommend {
	background: var(--color_gold);
}

/* 左の見出し列は左揃え */
.consulting_compare tbody th {
	width: 300px;
	font-weight: 700;
	text-align: left;
}

.consulting_compare td.consulting_compare_recommend {
	background: var(--color_gold_10);
	font-weight: 700;
}

.consulting_plan_note {
	margin-top: 25px;
	font-size: var(--font_size_sm);
	text-align: center;
}

@media (max-width: 768px) {
	.consulting_compare_wrap {
		margin-top: 50px;
		border-radius: 12px;
	}

	.consulting_compare {
		font-size: var(--font_size_sm);
	}

	.consulting_compare th,
	.consulting_compare td {
		padding: 12px;
	}

	.consulting_compare tbody th {
		width: 200px;
	}

	.consulting_plan_note {
		text-align: left;
	}
}


/* ==================================================
	ご支援の流れ（流れ図は style.css の step_flow）
================================================== */
.consulting_flow_wrap {
	margin-top: 50px;
}

/* 「STEP」と番号（トップ・料金と掲載プランの掲載までの流れと同じ見た目） */
.consulting_flow_num {
	display: block;
	color: var(--color_gold);
	font-family: var(--font_en);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
}

.consulting_flow_num span {
	margin-left: 6px;
	font-size: 28px;
}

/* 共通の step_flow_item（上下15px）より、下の余白を10px広げる */
.consulting_flow_wrap .step_flow_item {
	padding-bottom: 25px;
}

/* 各ステップの見出し（無料相談など） */
.consulting_flow_title {
	font-size: var(--font_size_md);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.consulting_flow_wrap {
		margin-top: 40px;
	}
}


/* ==================================================
	ページ下のCTA（無料診断）。この下に共通の cta が続く
================================================== */
/* すぐ上のよくある質問も白背景のため、上の余白は詰める */
.consulting_cta_section {
	padding-top: 0;
}

.consulting_cta {
	padding: 60px 40px;
	border-radius: 20px;
	background: var(--color_navy);
	color: var(--color_white);
	text-align: center;
}

.consulting_cta_title {
	font-size: var(--font_size_xl);
	font-weight: 700;
	line-height: 1.5;
}

.consulting_cta_text {
	margin-top: 15px;
}

.consulting_cta .btn_group {
	margin-top: 30px;
}

@media (max-width: 768px) {
	.consulting_cta {
		padding: 40px 20px;
	}

	.consulting_cta_title br {
		display: none;
	}

	.consulting_cta_text {
		text-align: left;
	}
}