/* 採用力診断（Web簡易診断）専用スタイル。css/style.css の後に読み込む前提。
   it-diagnosis/css/it-diagnosis.css をベースに複製・拡張している（クラス名は同一のまま流用可）。 */

body {
	background: #fff;
}

.diagnosis_hero {
	background: linear-gradient(135deg, #001D2F 0%, #0082CD 100%);
	padding: 120px 20px 70px;
	color: #fff;
	text-align: center;
}
.diagnosis_hero_inner {
	max-width: 760px;
	margin: 0 auto;
}
.diagnosis_hero_eyebrow {
	font-size: 1.4rem;
	letter-spacing: 0.1em;
	color: #8fd6ff;
	font-weight: 600;
	margin-bottom: 10px;
}
.diagnosis_hero h2 {
	font-size: 3.2rem;
	line-height: 1.5;
	font-weight: 700;
	margin-bottom: 24px;
}
.diagnosis_hero_lead {
	font-size: 1.6rem;
	line-height: 1.9;
	margin: 0 auto 34px;
	max-width: 640px;
}
.diagnosis_cta {
	display: inline-block;
	padding: 16px 40px;
	background: #0082CD;
	color: #fff;
	font-weight: 700;
	font-size: 1.7rem;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 4px 0 rgba(0,0,0,0.15);
	transition: 0.25s;
	border: none;
	cursor: pointer;
}
.diagnosis_cta:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
/* ヒーロー部は背景自体が濃紺〜ブルーのグラデーションのため、
   青地×青ボタンだとコントラストが弱くなる。ここだけ白地×ブルー文字の反転配色にする */
.diagnosis_hero .diagnosis_cta {
	background: #fff;
	color: #0082CD;
}

.diagnosis_section {
	max-width: 1000px;
	margin: 0 auto;
	padding: 70px 20px;
}
.diagnosis_section_gray {
	background: #f7f8fa;
	max-width: none;
}
.diagnosis_section_gray > * {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.diagnosis_section_title {
	text-align: center;
	font-size: 2.4rem;
	font-weight: 700;
	color: #001D2F;
	margin-bottom: 40px;
}

.diagnosis_steps {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
.diagnosis_step {
	flex: 1 1 260px;
	max-width: 300px;
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0,0,0,.08);
	padding: 30px 24px;
	text-align: center;
}
.diagnosis_step_num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #0082CD;
	color: #fff;
	font-weight: 700;
	font-size: 1.8rem;
	margin-bottom: 14px;
}
.diagnosis_step h4 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 10px;
	color: #001D2F;
}
.diagnosis_step p {
	font-size: 1.4rem;
	line-height: 1.8;
	color: #464646;
}

.diagnosis_type_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
/* 採用力診断は10パターンあるため、5列で並べるバリエーション */
.diagnosis_type_grid_wide {
	grid-template-columns: repeat(5, 1fr);
}
.diagnosis_type_grid_wide .diagnosis_type_card {
	padding: 16px 10px;
}
.diagnosis_type_grid_wide .diagnosis_type_card h5 {
	font-size: 1.3rem;
	margin-bottom: 0;
}
.diagnosis_type_card {
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
}
.diagnosis_type_card h5 {
	font-size: 1.6rem;
	font-weight: 700;
	color: #0082CD;
	margin-bottom: 8px;
}
.diagnosis_type_card p {
	font-size: 1.3rem;
	color: #464646;
	line-height: 1.7;
}

.diagnosis_bottom_cta {
	text-align: center;
}

/* --- フォーム --- */
.diagnosis_form_header {
	max-width: 700px;
	margin: 140px auto 0;
	padding: 0 20px;
	text-align: center;
}
.diagnosis_form_header h2 {
	font-size: 2.6rem;
	font-weight: 700;
	color: #001D2F;
	margin: 10px 0 20px;
}
.diagnosis_form_header p {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #464646;
}

/* ハニーポット（スパムボット対策）：人間には見えない位置に飛ばす。display:noneは一部botに無視されるため使わない */
.diagnosis_hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.diagnosis_form {
	max-width: 700px;
}
.diagnosis_questions {
	margin-top: 20px;
}
.diagnosis_q {
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0,0,0,.06);
	padding: 24px;
	margin-bottom: 20px;
}
.diagnosis_q_label {
	font-size: 1.6rem;
	font-weight: 700;
	color: #0082CD;
	margin-bottom: 8px;
}
.diagnosis_q_text {
	font-size: 1.4rem;
	line-height: 1.8;
	color: #464646;
	margin-bottom: 16px;
}
.diagnosis_q label {
	display: block;
	font-size: 1.5rem;
	line-height: 1.7;
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 10px;
	cursor: pointer;
	transition: 0.2s;
}
.diagnosis_q label:hover {
	border-color: #0082CD;
	background: #f0f8fd;
}
.diagnosis_q input[type="radio"] {
	margin-right: 8px;
}

/* --- 結果・エラー画面 --- */
.diagnosis_result_wrap {
	max-width: 760px;
	margin: 140px auto 80px;
	padding: 0 20px;
}
.diagnosis_result_card {
	background: #fff;
	border: 1px solid #c3c3c3;
	border-radius: 10px;
	box-shadow: 0 3px 6px rgba(0,0,0,.1);
	overflow: hidden;
}
.diagnosis_result_card_head {
	background: linear-gradient(135deg, #001D2F 0%, #0082CD 100%);
	color: #fff;
	text-align: center;
	padding: 40px 24px;
}
.diagnosis_result_eyebrow {
	font-size: 1.3rem;
	letter-spacing: 0.1em;
	color: #8fd6ff;
	margin-bottom: 8px;
}
.diagnosis_result_card_head h2 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 10px;
}
.diagnosis_result_catch {
	font-size: 1.6rem;
}
.diagnosis_result_card_body {
	padding: 30px 30px 10px;
}
.diagnosis_result_score {
	font-size: 1.4rem;
	color: #464646;
	background: #efefef;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 24px;
}
.diagnosis_result_card_body h3 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #001D2F;
	border-left: 4px solid #0082CD;
	padding-left: 10px;
	margin: 24px 0 12px;
}
.diagnosis_comment_list li {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #464646;
	margin-bottom: 8px;
	padding-left: 1.4em;
	position: relative;
}
.diagnosis_comment_list li::before {
	content: "・";
	position: absolute;
	left: 0;
}
.diagnosis_mail_note {
	margin-top: 20px;
	font-size: 1.4rem;
	color: #464646;
	background: #eef7ff;
	border-radius: 8px;
	padding: 14px;
}
/* --- 確認画面の回答一覧テーブル --- */
.diagnosis_confirm_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 10px;
}
.diagnosis_confirm_table th,
.diagnosis_confirm_table td {
	border: 1px solid #ddd;
	padding: 12px 14px;
	font-size: 1.4rem;
	line-height: 1.7;
	text-align: left;
	vertical-align: top;
}
.diagnosis_confirm_table th {
	width: 32%;
	background: #efefef;
	color: #001D2F;
	font-weight: 600;
	white-space: nowrap;
}
.diagnosis_confirm_table td {
	color: #464646;
}
.diagnosis_confirm_form {
	margin-top: 24px;
	text-align: center;
}
.diagnosis_confirm_form .diagnosis_cta {
	margin: 0 8px 10px;
}
.diagnosis_cta_secondary {
	background: #efefef;
	color: #464646;
	box-shadow: 0 3px 0 #ccc;
}

@media screen and (max-width: 600px) {
	.diagnosis_confirm_table th,
	.diagnosis_confirm_table td {
		display: block;
		width: auto;
	}
	.diagnosis_confirm_table th {
		border-bottom: 0;
		padding-bottom: 4px;
	}
	.diagnosis_confirm_table td {
		padding-top: 4px;
	}
	.diagnosis_confirm_form .diagnosis_cta {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}
}

.diagnosis_mail_note_warn {
	background: #fff3e0;
}
.diagnosis_pitch_box {
	background: #f7f8fa;
	padding: 30px;
	text-align: center;
	margin-top: 10px;
}
.diagnosis_pitch_box h3 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #001D2F;
	margin-bottom: 14px;
}
.diagnosis_pitch_box p {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #464646;
	margin-bottom: 10px;
}
.diagnosis_pitch_axes {
	font-weight: 600;
	color: #0082CD;
}
.diagnosis_pitch_box .diagnosis_cta {
	margin-top: 14px;
}
/* 採用力診断の「詳細診断（有料）で明らかになること」チェックリスト（IT活用力診断の6軸ピッチとは異なる構成） */
.diagnosis_pitch_checklist {
	text-align: left;
	max-width: 520px;
	margin: 0 auto 16px;
}
.diagnosis_pitch_checklist li {
	font-size: 1.4rem;
	line-height: 1.7;
	color: #464646;
	margin-bottom: 12px;
	padding-left: 1.6em;
	position: relative;
}
.diagnosis_pitch_checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: #0082CD;
	font-weight: 700;
}
.diagnosis_pitch_checklist li strong {
	display: block;
	color: #001D2F;
}
.diagnosis_pitch_checklist li span {
	display: block;
	font-size: 1.2rem;
	color: #6b6b6b;
}
/* .diagnosis_pitch_box p { color: #464646; } の方が詳細度が高く負けてしまうため、
   親クラスを含めて詳細度を揃えて白文字を確実に効かせる */
.diagnosis_pitch_box .diagnosis_pitch_banner {
	background: #0082CD;
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	padding: 14px;
	margin-bottom: 14px !important;
}

.diagnosis_error_box {
	background: #fff;
	border: 1px solid #e0a0a0;
	border-radius: 10px;
	padding: 30px;
	text-align: center;
}
.diagnosis_error_box h2 {
	color: #c0392b;
	font-size: 2rem;
	margin-bottom: 16px;
}
.diagnosis_error_box ul {
	text-align: left;
	max-width: 480px;
	margin: 0 auto 24px;
}
.diagnosis_error_box li {
	color: #c0392b;
	font-size: 1.4rem;
	line-height: 1.8;
	margin-bottom: 6px;
}

@media screen and (max-width: 768px) {
	.diagnosis_hero { padding: 100px 20px 50px; }
	.diagnosis_hero h2 { font-size: 2.2rem; }
	.diagnosis_type_grid { grid-template-columns: repeat(2, 1fr); }
	.diagnosis_form_header { margin-top: 110px; }
	.diagnosis_result_wrap { margin-top: 110px; }
}

/* --- 利用規約ポップアップ（ページ読み込み時に1回表示） --- */
.diagnosis_terms_overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 29, 47, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
}
.diagnosis_terms_overlay[hidden] {
	display: none;
}
.diagnosis_terms_box {
	background: #fff;
	border-radius: 12px;
	max-width: 520px;
	width: 100%;
	max-height: 80vh;
	overflow-y: auto;
	padding: 30px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.diagnosis_terms_box h3 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #001D2F;
	margin-bottom: 14px;
}
.diagnosis_terms_box p {
	font-size: 1.4rem;
	line-height: 1.9;
	color: #464646;
	margin-bottom: 20px;
}
.diagnosis_terms_box a {
	color: #0082CD;
	text-decoration: underline;
}
.diagnosis_terms_box .diagnosis_cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 12px;
}