﻿@charset "utf-8";

#c2 {
	clear: both;
	margin: 0;
	padding: 0;
}

#col_main > section {
	max-width: 1180px;
	margin: 0 auto 72px;
	padding: 0 24px;
	box-sizing: border-box;
}

#c3 {
	clear: both;
	position: relative;
	margin: 0 0 42px;
	padding: 58px 32px 52px;
	overflow: hidden;
	background: linear-gradient(135deg, #edf7fb 0%, #fff 62%, #f6fbfd 100%);
	border: 1px solid #d8e9f2;
	box-sizing: border-box;
}

#c3:before {
	content: "FAQ";
	position: absolute;
	right: 34px;
	bottom: -10px;
	color: rgba(11, 49, 143, .07);
	font-size: 96px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .04em;
	pointer-events: none;
}

#c3 article {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

#c3 h1 {
	margin: 0;
	padding: 0;
	color: #073d70;
	font-size: 34px;
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: 0;
	text-align: center;
}

#c3 h1:after {
	content: "";
	display: block;
	width: 74px;
	height: 4px;
	margin: 22px auto 0;
	background: #d6001c;
}

#c3 div {
	text-align: center;
}

#c7,
#c5,
#c6 {
	clear: both;
	display: block;
	margin: 0 0 22px;
	padding: 30px 38px;
	background: #fff;
	border: 1px solid #dbe8ef;
	box-shadow: 0 14px 34px rgba(7, 61, 112, .08);
	box-sizing: border-box;
}

#c5,
#c6 {
	margin-top: 0;
}

#c7 > div.box,
#c5 > div.box,
#c6 > div.box {
	box-sizing: border-box;
	overflow: visible;
}

#c7 > div.box + div.box,
#c5 > div.box + div.box,
#c6 > div.box + div.box {
	margin-top: 18px;
	padding-top: 20px;
	border-top: 1px solid #e4eef4;
}

#c7 article,
#c5 article,
#c6 article {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 0 18px;
	align-items: start;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#c7 h3,
#c5 h3,
#c6 h3 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0;
	text-align: center;
	box-sizing: border-box;
}

#c7 > div.box:first-child h3,
#c5 > div.box:first-child h3,
#c6 > div.box:first-child h3 {
	color: #fff;
	background: #073d70;
}

#c7 > div.box:last-child h3,
#c5 > div.box:last-child h3,
#c6 > div.box:last-child h3 {
	color: #fff;
	background: #d6001c;
}

#c7 div.box article > div,
#c5 div.box article > div,
#c6 div.box article > div {
	margin: 0;
	padding-top: 5px;
	color: #283f50;
	font-size: 15px;
	line-height: 1.9;
	font-weight: 400;
	letter-spacing: 0;
	text-align: left;
}

#c7 > div.box:first-child article > div,
#c5 > div.box:first-child article > div,
#c6 > div.box:first-child article > div {
	color: #073d70;
	font-size: 19px;
	line-height: 1.65;
	font-weight: 800;
}

@media screen and (min-width: 641px) and (max-width: 834px) {
	#col_main > section {
		padding: 0 20px;
	}

	#c3 {
		margin: 0 0 32px;
		padding: 46px 24px 42px;
	}

	#c3 h1 {
		font-size: 30px;
	}

	#c7,
	#c5,
	#c6 {
		margin-bottom: 18px;
		padding: 28px 30px;
	}
}

@media screen and (max-width: 640px) {
	#col_main > section {
		margin-bottom: 50px;
		padding: 0 16px;
	}

	#c3 {
		margin: 0 0 26px;
		padding: 36px 20px 34px;
	}

	#c3:before {
		right: 14px;
		bottom: -4px;
		font-size: 58px;
	}

	#c3 h1 {
		font-size: 26px;
	}

	#c3 h1:after {
		width: 58px;
		height: 3px;
		margin-top: 18px;
	}

	#c7,
	#c5,
	#c6 {
		margin-bottom: 18px;
		padding: 24px 20px;
	}

	#c7 article,
	#c5 article,
	#c6 article {
		grid-template-columns: 38px minmax(0, 1fr);
		gap: 0 14px;
	}

	#c7 h3,
	#c5 h3,
	#c6 h3 {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	#c7 div.box article > div,
	#c5 div.box article > div,
	#c6 div.box article > div {
		padding-top: 3px;
		font-size: 14px;
		line-height: 1.85;
	}

	#c7 > div.box:first-child article > div,
	#c5 > div.box:first-child article > div,
	#c6 > div.box:first-child article > div {
		font-size: 17px;
		line-height: 1.65;
	}
}
