@charset "UTF-8";

/* ==================================================
	お悩み
	下の「プロベルなら」へつなぐ▼を、白い三角で次のセクションに食い込ませる
================================================== */
.about_worry {
	position: relative;
}

.about_worry::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 1;
	width: min(560px, 60%);
	height: 90px;
	background: var(--color_white);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform: translateX(-50%);
}

.about_worry_list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin-top: 60px;
}

.about_worry_item {
	padding: 30px 30px 35px;
}

.about_worry_category {
	color: var(--color_gold);
	font-size: var(--font_size_sm);
	font-weight: 700;
}

.about_worry_title {
	margin-top: 8px;
	font-size: var(--font_size_md);
	font-weight: 700;
	line-height: 1.6;
}

.about_worry_text {
	margin-top: 15px;
	font-size: 15px;
}

@media (max-width: 992px) {
	.about_worry_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.about_worry_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		margin-top: 40px;
	}

	.about_worry_item {
		padding: 25px 20px;
	}

	.about_worry::after {
		width: 70%;
		height: 45px;
	}
}


/* ==================================================
	プロベルなら
================================================== */
/* 上のお悩みからの▼が見出しに重ならないよう、▼の高さ分だけ上の余白を足す */
.about_solution {
	padding-top: calc(var(--section_space) + 90px);
}

@media (max-width: 768px) {
	.about_solution {
		padding-top: calc(var(--section_space) + 45px);
	}
}

/* 流れ図（矢印・横並び／縦並びの切り替えは style.css の step_flow）
   列いっぱいの画像の下にテキストを置く */
.about_route {
	margin-top: 60px;
}

/* カードの背景はなし（セクションの背景の上に画像とテキストを置く） */
.about_route .step_flow_item {
	justify-content: flex-start;
	padding: 0;
	background: none;
}

.about_route .step_flow_item_goal {
	color: var(--color_navy);
}

/* 画像は白背景のため、角を丸めてタイルとして見せる */
.about_route_img {
	display: block;
	flex-shrink: 0;
	width: 100%;
	max-width: 200px;
	margin-bottom: 20px;
	border-radius: 12px;
}

/* 横並びのとき、矢印を画像（正方形）の上下中央に置く
   画像の高さ＝列の幅（＝（流れ図の幅 − 矢印の間4つ分）÷ 5）と200pxの小さいほう。その半分の位置 */
@container (min-width: 761px) {
	.about_route .step_flow_item:not(:last-child)::after {
		top: calc(min((100cqi - 4 * 36px) / 5, 200px) / 2);
	}
}

@container (min-width: 761px) and (max-width: 1100px) {
	.about_route .step_flow_item:not(:last-child)::after {
		top: calc(min((100cqi - 4 * 30px) / 5, 200px) / 2);
	}
}

/* 文字は画像のすぐ下から上揃えにする */
.about_route_text {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
}

/* カードが狭いときは、補足の改行位置を文節に任せる */
@container (max-width: 1100px) {
	.about_route .step_flow_note {
		word-break: auto-phrase;
	}

	.about_route .step_flow_note br {
		display: none;
	}
}

/* 縦並びのとき（置き場所の幅が760px以下）は、画像を左・テキストを右にする */
@container (max-width: 760px) {
	.about_route .step_flow_item {
		flex-direction: row;
		gap: 15px;
		text-align: left;
	}

	.about_route_img {
		width: 80px;
		margin-bottom: 0;
	}

	/* 太字の項目名は改行しない（補足の改行は上で非表示にしている） */
	.about_route_text > br {
		display: none;
	}

	/* ▼は画像（幅80px）の左右中央に置く */
	.about_route .step_flow_item:not(:last-child)::after {
		left: 40px;
	}
}

@media (max-width: 992px) {
	.about_route {
		max-width: 480px;
		margin: 60px auto 0;
	}
}


/* ==================================================
	問い合わせが来やすい秘密
================================================== */
.about_secret_wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	margin-top: 60px;
}

.about_secret_table_wrap {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: var(--shadow_base);
}

.about_secret_table {
	width: 100%;
	background: var(--color_white);
	font-size: 15px;
	line-height: 1.6;
}

.about_secret_table th,
.about_secret_table td {
	padding: 18px 20px;
	border-bottom: 1px solid var(--color_gray_30);
	text-align: left;
	vertical-align: top;
}

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

.about_secret_table thead th {
	background: var(--color_navy);
	color: var(--color_white);
	font-weight: 700;
	text-align: center;
}

.about_secret_table tbody th {
	color: var(--color_gold);
	font-weight: 700;
}

.about_secret_source {
	margin-top: 15px;
	color: var(--color_navy_70);
	font-size: var(--font_size_xs);
	line-height: 1.7;
}

.about_secret_points {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.about_secret_point {
	padding: 24px 30px;
}

.about_secret_point_title {
	position: relative;
	padding-left: 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
}

.about_secret_point_title::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--color_gold);
}

.about_secret_point_text {
	margin-top: 6px;
	font-size: 15px;
}

.about_secret_note {
	margin-top: 40px;
	color: var(--color_navy_70);
	font-size: var(--font_size_xs);
	text-align: center;
}

@media (max-width: 992px) {
	.about_secret_wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		max-width: 640px;
		margin: 40px auto 0;
	}
}

@media (max-width: 576px) {
	.about_secret_table {
		font-size: var(--font_size_xs);
	}

	.about_secret_table th,
	.about_secret_table td {
		padding: 12px 10px;
	}

	.about_secret_point {
		padding: 20px;
	}

	.about_secret_point_title {
		font-size: var(--font_size_bs);
	}

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

	.about_secret_note {
		text-align: left;
	}
}


/* ==================================================
	問い合わせイメージ
================================================== */
.about_inquiry_wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	margin-top: 60px;
}

/* 問い合わせの見本は style.css の inquiry_mock */
.about_inquiry_label {
	color: var(--color_gold);
	font-size: var(--font_size_sm);
	font-weight: 700;
}

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

.about_inquiry_points {
	margin-top: 20px;
}

.about_inquiry_points li {
	position: relative;
	padding-left: 24px;
	font-weight: 700;
}

.about_inquiry_points li::before {
	content: "→";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color_gold);
}

.about_inquiry_text {
	margin-top: 20px;
}

.about_inquiry_note {
	margin-top: 10px;
	color: var(--color_navy_70);
	font-size: var(--font_size_xs);
}

.about_inquiry_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 30px;
}

.about_inquiry_btns .btn {
	width: 260px;
}

@media (max-width: 992px) {
	.about_inquiry_wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: 60px;
		max-width: 640px;
		margin: 40px auto 0;
	}
}

@media (max-width: 576px) {
	.about_inquiry_btns {
		flex-direction: column;
	}

	.about_inquiry_btns .btn {
		width: 100%;
	}
}


/* ==================================================
	公開されるコンテンツ
================================================== */
.about_contents_list {
	display: flex;
	flex-direction: column;
	gap: 80px;
	margin-top: 70px;
}

.about_contents_item {
	display: flex;
	align-items: flex-start;
	gap: 60px;
}

.about_contents_item:nth-child(even) {
	flex-direction: row-reverse;
}

.about_contents_img {
	display: block;
	flex: 0 0 calc(50% - 30px);
	min-width: 0;
	border-radius: 16px;
	box-shadow: var(--shadow_base);
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 2枚の画像を重ねる場合（05 対談動画・note記事）：奥に動画一覧、右下に note 記事を小さく重ねる */
/* 高さは幅に対する比率で決める（奥の画像の高さ＋手前の画像のはみ出し分） */
.about_contents_visual {
	position: relative;
	flex: 0 0 calc(50% - 30px);
	min-width: 0;
	aspect-ratio: 50 / 33;
}

.about_contents_shot {
	position: relative;
	width: 88%;
}

.about_contents_shot .about_contents_img {
	width: 100%;
}

.about_contents_shot_sub {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 55%;
}

.about_contents_shot_sub .about_contents_img {
	border: 4px solid var(--color_white);
	border-radius: 12px;
	box-shadow: 0 8px 30px color-mix(in srgb, var(--color_navy) 18%, transparent);
}


.about_contents_body {
	flex: 1;
}

/* 番号（大きな英字）を左、段階名と見出しを右に置く */
.about_contents_head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.about_contents_num {
	flex-shrink: 0;
	color: var(--color_gold);
	font-family: var(--font_en);
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
}

.about_contents_step {
	color: var(--color_gold);
	font-size: var(--font_size_sm);
	font-weight: 700;
	line-height: 1.5;
}

.about_contents_title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px 12px;
	font-size: var(--font_size_xl);
	font-weight: 700;
	line-height: 1.5;
}

.about_contents_badge {
	padding: 0 12px;
	border-radius: 999px;
	background: var(--color_gold);
	color: var(--color_white);
	font-size: var(--font_size_xs);
	line-height: 1.8;
}

.about_contents_text {
	margin-top: 30px;
}

/* なぜ効くか・AIに引用されやすい：ラベルの下に本文 */
.about_contents_why,
.about_contents_ai {
	margin-top: 25px;
}

.about_contents_why strong,
.about_contents_ai_tag {
	display: table;
	margin-bottom: 8px;
	padding: 2px 16px;
	border-radius: 999px;
	color: var(--color_white);
	font-weight: 700;
	line-height: 1.6;
}

.about_contents_why strong {
	background: var(--color_gold);
}

/* 紺の枠・背景なし。枠線の1px分だけ内側の余白を減らし、「なぜ効くか」と同じ大きさにする */
.about_contents_ai_tag {
	padding: 1px 15px;
	border: 1px solid var(--color_navy);
	background: none;
	color: var(--color_navy);
}

/* 補足（※）はグレーの小さい文字で下部に */
.about_contents_note {
	margin-top: 20px;
	color: var(--color_gray);
	font-size: var(--font_size_xs);
}

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

	.about_contents_img,
	.about_contents_visual {
		flex-basis: calc(45% - 20px);
	}

	.about_contents_num {
		font-size: 56px;
	}

	.about_contents_title {
		font-size: var(--font_size_lg);
	}

	.about_contents_text {
		margin-top: 20px;
	}
}

@media (max-width: 992px) {
	.about_contents_list {
		gap: 60px;
		max-width: 640px;
		margin: 40px auto 0;
	}

	.about_contents_item,
	.about_contents_item:nth-child(even) {
		flex-direction: column;
		align-items: stretch;
		gap: 25px;
	}

	.about_contents_img,
	.about_contents_visual {
		flex-basis: auto;
	}
}

@media (max-width: 576px) {
	.about_contents_head {
		gap: 15px;
	}

	.about_contents_num {
		font-size: 44px;
	}

	.about_contents_step {
		font-size: var(--font_size_xs);
	}

	.about_contents_why,
	.about_contents_ai {
		font-size: var(--font_size_sm);
	}
}

/* ==================================================
	ビジネスマッチング・AI検索
================================================== */
.about_related_list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.about_related_item {
	padding: 40px;
}

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

.about_related_text {
	margin-top: 15px;
}

/* カード内のリンクは右寄せ */
.about_related_item .text_link {
	display: table;
	margin: 20px 0 0 auto;
}

@media (max-width: 992px) {
	.about_related_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		max-width: 640px;
		margin: 0 auto;
	}
}

@media (max-width: 576px) {
	.about_related_item {
		padding: 30px 20px;
	}
}