@charset "utf8";
/*----------------------------------------------------
	260825 SEO用の見出しクラス（両サイト共通）

	既存の .title_pt は「<h2>日本語</h2><p>English</p>」の組で、::before の装飾バーが
	height:100% のため、その中に h3 を足すとバーが伸びて崩れる。
	そのため h2/h3 を追加する箇所では .title_pt を使わず、ここで定義したクラスを使う。

	.hd2        … .title_pt を使わない素の h2（左に主色のバー）
	.hd3        … 本文の小見出し（content.css の .blog_content_head02 と同じ見え方）
	.hd3--card  … カード内タイトル（選ばれる理由・スキル・お悩み等）
	.hd3--form  … フォーム内の区切り見出し（申込・企業様フォーム）
	.hd3--plain … 装飾なし（規約・ポリシーの条項内小項目）
----------------------------------------------------*/

.hd2 {
	position: relative;
	padding-left: 18px;
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.3;
	color: var(--c-primary);
}
.hd2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 6px;
	height: 1em;
	background: var(--c-primary);
	transform: skewX(-12deg);
}

.hd3 {
	margin: 28px 0 14px;
	padding: 6px 0 6px 14px;
	border-left: 4px solid var(--c-primary-sub);
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	color: #333;
}

.hd3--card {
	margin: 0 0 8px;
	padding: 0;
	border-left: 0;
	font-size: 17px;
	color: var(--c-primary);
}

.hd3--form {
	margin: 0;
	padding: 8px 12px;
	border-left: 4px solid var(--c-primary);
	background: var(--c-primary-bg);
	font-size: 16px;
}

.hd3--plain {
	margin: 16px 0 6px;
	padding: 0;
	border-left: 0;
	font-size: 16px;
	color: #333;
}

@media screen and (max-width: 650px) {
	.hd2 {
		padding-left: 14px;
		margin-bottom: 16px;
		font-size: 5.6vw;
	}
	.hd2::before { width: 5px; }
	.hd3 {
		margin: 20px 0 10px;
		font-size: 4.4vw;
	}
	/* 260915 margin を書き添えているのは、直前の .hd3 が SP で margin:20px 0 10px を
	   持っており、詳細度が同じ（どちらもクラス1つ）ぶん後勝ちでカード見出しにも
	   20px の上余白が乗っていたため。
	   ・お悩みカード … カードの padding 16px と合わさって見出しの上が36px空いていた
	   ・スキル項目 … 丸数字より20px下がって、数字が上・タイトルが下に見えていた
	   いずれもユーザー指摘。PCの .hd3--card（margin:0 0 8px）と同じ扱いに戻す。 */
	.hd3--card { margin: 0 0 2vw; font-size: 4.2vw; }
	.hd3--form { font-size: 4vw; }
	.hd3--plain { font-size: 4vw; }
}

/* 260826 SEOライティング資料で「H2の直下に置くH3」が全ページに指定されたので、
   セクション見出しのリード文用の型を足す（技術士と同じ定義） */
.hd3--lead {
	margin: -18px 0 26px;
	padding: 0;
	border-left: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	color: #333;
}
.reason_pt .hd3--lead {
	margin-top: -34px;   /* .btitle_pt の margin-bottom が 50px あるため多めに詰める */
	/* 260915 text-align:center を外した。h2・英字サブが左寄せなので、
	   ここだけ中央に寄ると4行が階段状にずれる（partners_pt も左寄せ） */
}

/* 260826 SEO要件で企業様フォーム・申込フォームの手前に置いた説明ブロック */
.form_intro {
	margin: 0 0 36px;
}
.form_intro:first-child {
	margin-top: 30px;
}
/* 261007 企業様フォームの導入コピー（旧 H1 の文言）。直下の .hd2（24px）より一段小さくして見出しと張り合わせない。
   これが先頭に来ると .form_intro は :first-child でなくなるので、上の余白 30px はこちらで持つ */
.form_intro_copy {
	margin: 30px 0 36px;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.6;
	color: var(--c-primary-dark);
}
.form_intro_lead {
	font-size: 16px;
	line-height: 1.9;
}
.form_intro_list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.8;
}
.form_intro_list li::before {
	content: "";
	position: absolute;
	top: 0.65em;
	left: 4px;
	width: 8px;
	height: 8px;
	background: var(--c-primary-sub);
	border-radius: 50%;
}
.form_intro_flow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.form_intro_flow li {
	flex: 1 1 0;
	min-width: 200px;
	padding: 14px 16px;
	background: var(--c-primary-bg);
	border-top: 3px solid var(--c-primary);
	border-radius: 6px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	color: var(--c-primary-dark);
}
.form_intro_flow li span {
	display: block;
	margin-bottom: 4px;
	font-family: "Roboto", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
	/* 260826 元は --c-primary-sub。淡緑の地（--c-primary-bg）の上で 4.43:1 と
	   AAに 0.07 足りなかったため、一段濃い --c-primary-dark（9.32:1）に変更。 */
	color: var(--c-primary-dark);
}

@media screen and (max-width: 650px) {
	.hd3--lead {
		margin: -3vw 0 5vw;
		/* 260915 3.4vw だけだと 320px 幅で 10.9px まで落ちる。11px を下限にする */
		font-size: max(11px, 3.4vw);
	}
	.reason_pt .hd3--lead {
		/* 260915 -6vw だと 375px で英字サブとの間が27.5px開き、partners(18.8px)の1.5倍になる。
		   打ち消す側の .btitle_pt margin-bottom が 50px 固定なので、こちらを深くして合わせる。
		   ただし -8vw のままだと 650px で 52px となり 50px を食い破って英字サブに重なるため、
		   -30px で頭打ちにする（負の値なので max が浅い側） */
		margin-top: max(-8vw, -30px);
	}
	.form_intro {
		margin-bottom: 7vw;
	}
	/* 261007 SP の .hd2（5.6vw）より一段小さく */
	.form_intro_copy {
		margin: 6vw 0 7vw;
		font-size: 4.6vw;
	}
	.form_intro_lead,
	.form_intro_list li {
		font-size: 3.5vw;
	}
	.form_intro_flow {
		display: block;
	}
	.form_intro_flow li {
		margin-bottom: 2.5vw;
		padding: 3vw 4vw;
		font-size: 3.5vw;
	}
}

/* 260915 グループ会社のロゴは見出し（.hd3）の行頭ではなく、表の「社名」欄で
   社名の左横に入る（カンプ 運営会社シート image46／image47）。
   .hd3--logo は使わなくなったため削除し、体裁は content.css の .co_name に移した。 */